69 lines
2.6 KiB
Vue
69 lines
2.6 KiB
Vue
<script setup>
|
|
import { ref, computed } from "vue";
|
|
import { Menu, MenuButton, MenuItems, MenuItem } from "@headlessui/vue";
|
|
import NewFolderModal from "./NewFolderModal.vue";
|
|
import UploadFiles from "./UploadFiles.vue";
|
|
import UploadFolder from "./UploadFolder.vue";
|
|
|
|
const newFolderModalActive = ref(false);
|
|
const rotate = ref(false);
|
|
|
|
const toggleNewFolderModal = (bool) => {
|
|
newFolderModalActive.value = bool;
|
|
};
|
|
|
|
const toggleRotate = () => {
|
|
rotate.value = !rotate.value;
|
|
};
|
|
|
|
const plusClass = computed(() =>
|
|
rotate.value
|
|
? "rotate-90 transition duration-300 ease-in-out"
|
|
: "transition duration-300 ease-in-out"
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<Menu as="div" class="relative inline-block text-left">
|
|
<div>
|
|
<MenuButton
|
|
class="inline-flex w-full justify-center rounded bg-emerald-700 px-5 py-3 font-medium text-white hover:bg-emerald-700/50"
|
|
@click="toggleRotate()"
|
|
>
|
|
<span :class="plusClass">＋</span> New
|
|
</MenuButton>
|
|
</div>
|
|
|
|
<transition
|
|
enter-active-class="transition duration-100 ease-out"
|
|
enter-from-class="transform scale-95 opacity-0"
|
|
enter-to-class="transform scale-100 opacity-100"
|
|
leave-active-class="transition duration-75 ease-in"
|
|
leave-from-class="transform scale-100 opacity-100"
|
|
leave-to-class="transform scale-95 opacity-0"
|
|
>
|
|
<MenuItems
|
|
class="border border-gray-300 dark:border-gray-700 absolute left-0 mt-2 w-56 divide-y divide-gray-700 rounded-md bg-zinc-900 focus:outline-none z-50"
|
|
>
|
|
<div class="px-1 py-1">
|
|
<MenuItem v-slot="{ active }"
|
|
><a
|
|
href="#"
|
|
@click.prevent="toggleNewFolderModal(true)"
|
|
class="block w-full items-center rounded-md py-2 border border-zinc-900 block w-full pl-3 pr-4 py-2 text-left text-base font-medium text-gray-600 dark:text-zinc-100 hover:border-sky-500 dark:hover:border-sky-600 hover:ring-sky-500 dark:hover:ring-sky-600 transition duration-150 ease-in-out"
|
|
>New Folder</a
|
|
></MenuItem
|
|
>
|
|
</div>
|
|
<div class="px-1 py-1">
|
|
<UploadFiles />
|
|
<UploadFolder />
|
|
</div>
|
|
</MenuItems>
|
|
</transition>
|
|
</Menu>
|
|
<NewFolderModal
|
|
v-model="newFolderModalActive"
|
|
@close="toggleNewFolderModal(false)"
|
|
/>
|
|
</template>
|