nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-21 01:12:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

vue components refactoring

Browse Source
This commit is contained in:
Čarodej
2022-04-13 16:19:10 +02:00
parent 6a4bfa8bfe
commit 338f8664b7
251 changed files with 1068 additions and 1943 deletions
Download Patch File Download Diff File Expand all files Collapse all files

328
resources/js/components/Menus/Components/Option.vue Normal file
View File

@@ -0,0 +1,328 @@
<template>
<li
class="flex items-center justify-between lg:py-3.5 py-4 px-5"
:class="{ 'group cursor-pointer hover:bg-light-background dark:hover:bg-4x-dark-foreground': !isHoverDisabled }"
>
<div class="flex items-center">
<div class="mr-4">
<calendar-icon
v-if="icon === 'calendar'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<grid-icon
v-if="icon === 'grid'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<list-icon
v-if="icon === 'list'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<trash-2-icon
v-if="icon === 'trash'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<life-buoy-icon
v-if="icon === 'restore'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<trash-icon
v-if="icon === 'empty-trash'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<eye-icon
v-if="icon === 'detail'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<download-cloud-icon
v-if="icon === 'download'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<edit2-icon
v-if="icon === 'rename'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<corner-down-right-icon
v-if="icon === 'move-item'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<link-icon
v-if="icon === 'share'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<star-icon
v-if="icon === 'favourites'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<folder-plus-icon
v-if="icon === 'create-folder'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<smile-icon
v-if="icon === 'no-options'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<paperclip-icon
v-if="icon === 'zip-folder'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<alphabet-icon
v-if="icon === 'alphabet'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<star-icon
v-if="icon === 'star'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<hard-drive-icon
v-if="icon === 'hard-drive'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<upload-cloud-icon
v-if="icon === 'upload-cloud'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<users-icon
v-if="icon === 'users'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<user-icon
v-if="icon === 'user'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<user-plus-icon
v-if="icon === 'user-plus'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<user-minus-icon
v-if="icon === 'user-minus'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<user-check-icon
v-if="icon === 'user-check'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<settings-icon
v-if="icon === 'settings'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<power-icon
v-if="icon === 'power'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<lock-icon
v-if="icon === 'lock'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<cloud-icon
v-if="icon === 'cloud'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<credit-card-icon
v-if="icon === 'credit-card'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<file-text-icon
v-if="icon === 'file-text'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<database-icon
v-if="icon === 'database'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<globe-icon
v-if="icon === 'globe'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<monitor-icon
v-if="icon === 'monitor'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<box-icon
v-if="icon === 'box'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<folder-plus-icon
v-if="icon === 'folder-plus'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
</div>
<b class="group-hover-text-theme text-sm font-bold" :class="{ 'text-theme': isActive }">
{{ title }}
</b>
</div>
<div v-if="arrow" class="ml-2">
<chevron-right-icon
v-if="arrow === 'right'"
size="14"
class="vue-feather group-hover-text-theme opacity-50"
:class="{ 'text-theme': isActive }"
/>
<arrow-up-icon
v-if="arrow === 'up'"
size="14"
class="vue-feather group-hover-text-theme opacity-50"
:class="{ 'text-theme': isActive }"
/>
<arrow-down-icon
v-if="arrow === 'down'"
size="14"
class="vue-feather group-hover-text-theme opacity-50"
:class="{ 'text-theme': isActive }"
/>
</div>
</li>
</template>
<script>
import AlphabetIcon from '../../Icons/AlphabetIcon'
import {
UserMinusIcon,
UserCheckIcon,
UserPlusIcon,
ArrowUpIcon,
ArrowDownIcon,
ChevronRightIcon,
BoxIcon,
MonitorIcon,
GlobeIcon,
FileTextIcon,
CreditCardIcon,
CloudIcon,
LockIcon,
PowerIcon,
SettingsIcon,
UsersIcon,
UserIcon,
UploadCloudIcon,
HardDriveIcon,
CornerDownRightIcon,
DownloadCloudIcon,
FolderPlusIcon,
PaperclipIcon,
LifeBuoyIcon,
Trash2Icon,
Edit2Icon,
TrashIcon,
StarIcon,
LinkIcon,
EyeIcon,
SmileIcon,
GridIcon,
ListIcon,
CalendarIcon,
DatabaseIcon,
} from 'vue-feather-icons'
export default {
name: 'Option',
props: ['isHoverDisabled', 'isActive', 'title', 'arrow', 'icon'],
components: {
UserMinusIcon,
UserCheckIcon,
UserPlusIcon,
ArrowUpIcon,
ArrowDownIcon,
BoxIcon,
MonitorIcon,
GlobeIcon,
DatabaseIcon,
ChevronRightIcon,
FileTextIcon,
CreditCardIcon,
CloudIcon,
LockIcon,
CornerDownRightIcon,
DownloadCloudIcon,
UploadCloudIcon,
FolderPlusIcon,
HardDriveIcon,
PaperclipIcon,
SettingsIcon,
LifeBuoyIcon,
CalendarIcon,
AlphabetIcon,
Trash2Icon,
SmileIcon,
PowerIcon,
UsersIcon,
Edit2Icon,
TrashIcon,
LinkIcon,
StarIcon,
GridIcon,
ListIcon,
UserIcon,
EyeIcon,
},
}
</script>