vue components refactoring

resources/js/components/UI/Buttons/ActionButton.vue

@@ -0,0 +1,52 @@
+<template>
+    <div class="action-button">
+        <x-icon size="12" class="icon text-theme dark-text-theme" v-if="icon === 'x'" />
+        <edit-2-icon size="12" class="icon text-theme dark-text-theme" v-if="icon === 'pencil-alt'" />
+        <span class="label">
+            <slot />
+        </span>
+    </div>
+</template>
+
+<script>
+import { Edit2Icon, XIcon } from 'vue-feather-icons'
+
+export default {
+    name: 'ActionButton',
+    props: ['icon'],
+    components: {
+        Edit2Icon,
+        XIcon,
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../../../sass/vuefilemanager/variables';
+@import '../../../../sass/vuefilemanager/mixins';
+
+.action-button {
+    cursor: pointer;
+
+    .label {
+        @include font-size(12);
+        font-weight: 600;
+    }
+
+    .icon {
+        @include font-size(10);
+        vertical-align: middle;
+        display: inline-block;
+        margin-right: 2px;
+
+        path,
+        circle,
+        line {
+            color: inherit;
+        }
+    }
+}
+
+.dark {
+}
+</style>

resources/js/components/UI/Buttons/AuthButton.vue

@@ -0,0 +1,47 @@
+<template>
+    <button
+        class="group mx-auto inline-block flex items-center whitespace-nowrap rounded-lg border-2 border-black px-7 py-2.5 dark:border-gray-300"
+    >
+        <span class="pr-1 text-lg font-extrabold">
+            {{ text }}
+        </span>
+        <refresh-cw-icon v-if="loading" size="20" class="vue-feather text-theme sync-alt -mr-1" />
+        <chevron-right-icon v-if="!loading && icon" size="20" class="vue-feather text-theme -mr-1" />
+    </button>
+</template>
+
+<script>
+import { ChevronRightIcon, RefreshCwIcon } from 'vue-feather-icons'
+
+export default {
+    name: 'AuthContent',
+    props: ['loading', 'icon', 'text'],
+    components: {
+        ChevronRightIcon,
+        RefreshCwIcon,
+    },
+    data() {
+        return {
+            isVisible: false,
+        }
+    },
+    created() {
+        this.isVisible = this.visible
+    },
+}
+</script>
+
+<style scoped lang="scss">
+.sync-alt {
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    0% {
+        transform: rotate(0);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
+</style>

resources/js/components/UI/Buttons/ButtonBase.vue

@@ -0,0 +1,118 @@
+<template>
+    <button class="button-base" :class="buttonStyle" type="button">
+        <div v-if="loading" class="icon">
+            <refresh-cw-icon size="16" class="animate-spin" />
+        </div>
+        <div class="content">
+            <slot v-if="!loading" />
+        </div>
+    </button>
+</template>
+
+<script>
+import { RefreshCwIcon } from 'vue-feather-icons'
+
+export default {
+    name: 'ButtonBase',
+    props: ['buttonStyle', 'loading'],
+    components: {
+        RefreshCwIcon,
+    },
+}
+</script>
+
+<style scoped lang="scss">
+@import '../../../../sass/vuefilemanager/variables';
+@import '../../../../sass/vuefilemanager/mixins';
+
+.button-base {
+    @include font-size(15);
+    font-weight: 700;
+    cursor: pointer;
+    transition: 0.15s all ease;
+    border-radius: 8px;
+    border: 0;
+    padding: 10px 28px;
+    white-space: nowrap;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .icon {
+        line-height: 1;
+        margin-right: 10px;
+    }
+
+    &:active {
+        transform: scale(0.95);
+    }
+
+    &.theme-solid {
+        .content {
+            color: white;
+        }
+    }
+
+    &.danger {
+        background: rgba($danger, 0.1);
+
+        .content {
+            color: $danger;
+        }
+
+        polyline,
+        path {
+            stroke: $danger;
+        }
+    }
+
+    &.danger-solid {
+        background: $danger;
+
+        .content {
+            color: white;
+        }
+
+        polyline,
+        path {
+            stroke: white;
+        }
+    }
+
+    &.secondary {
+        background: $light_background;
+
+        .content {
+            color: $text;
+        }
+
+        polyline,
+        path {
+            stroke: $text;
+        }
+    }
+}
+
+.dark {
+    .button-base {
+        &.secondary {
+            background: $dark_mode_foreground;
+
+            .content {
+                color: $dark_mode_text_primary;
+            }
+
+            polyline,
+            path {
+                color: inherit;
+            }
+        }
+    }
+
+    .popup-wrapper {
+        .button-base.secondary {
+            background: lighten($dark_mode_foreground, 3%);
+        }
+    }
+}
+</style>

resources/js/components/UI/Buttons/ButtonUpload.vue

@@ -0,0 +1,48 @@
+<template>
+    <label :class="buttonStyle" label="file" class="button file-input button-base">
+        <slot />
+        <input accept="*" v-show="false" @change="emmitFiles" id="file" type="file" name="files[]" multiple />
+    </label>
+</template>
+
+<script>
+export default {
+    name: 'ButtonBase',
+    props: ['buttonStyle'],
+    data() {
+        return {
+            files: undefined,
+        }
+    },
+    methods: {
+        emmitFiles(e) {
+            this.$uploadFiles(e.target.files)
+        },
+    },
+}
+</script>
+
+<style scoped lang="scss">
+@import '../../../../sass/vuefilemanager/variables';
+@import '../../../../sass/vuefilemanager/mixins';
+
+.button-base {
+    @include font-size(15);
+    font-weight: 700;
+    cursor: pointer;
+    transition: 0.15s all ease;
+    border-radius: 8px;
+    border: 0;
+    padding: 10px 28px;
+    display: inline-block;
+
+    &:active {
+        transform: scale(0.95);
+    }
+
+    &.secondary {
+        color: $text;
+        background: $light_background;
+    }
+}
+</style>

resources/js/components/UI/Buttons/MobileActionButton.vue

@@ -0,0 +1,94 @@
+<template>
+    <button class="mr-2 inline-block rounded-xl bg-light-background py-2 px-3.5 dark:bg-2x-dark-foreground">
+        <div class="flex items-center">
+            <hard-drive-icon v-if="icon === 'hard-drive'" size="15" class="vue-feather dark-text-theme" />
+            <upload-cloud-icon v-if="icon === 'upload-cloud'" size="15" class="vue-feather dark-text-theme" />
+            <link-icon v-if="icon === 'share'" size="15" class="vue-feather dark-text-theme" />
+            <trash2-icon v-if="icon === 'trash2'" size="15" class="vue-feather dark-text-theme" />
+            <users-icon v-if="icon === 'users'" size="15" class="vue-feather dark-text-theme" />
+            <user-check-icon v-if="icon === 'user-check'" size="15" class="vue-feather dark-text-theme" />
+            <search-icon v-if="icon === 'search'" size="15" class="vue-feather dark-text-theme" />
+            <refresh-cw-icon v-if="icon === 'refresh'" size="15" class="vue-feather dark-text-theme" />
+            <download-icon v-if="icon === 'download'" size="15" class="vue-feather dark-text-theme" />
+            <copy-icon v-if="icon === 'copy'" size="15" class="vue-feather dark-text-theme" />
+            <filter-icon v-if="icon === 'filter'" size="15" class="vue-feather dark-text-theme" />
+            <credit-card-icon v-if="icon === 'credit-card'" size="15" class="vue-feather dark-text-theme" />
+            <folder-plus-icon v-if="icon === 'folder-plus'" size="15" class="vue-feather dark-text-theme" />
+            <list-icon v-if="icon === 'th-list'" size="15" class="vue-feather dark-text-theme" />
+            <trash-icon v-if="icon === 'trash'" size="15" class="vue-feather dark-text-theme" />
+            <grid-icon v-if="icon === 'th'" size="15" class="vue-feather dark-text-theme" />
+            <user-plus-icon v-if="icon === 'user-plus'" size="15" class="vue-feather dark-text-theme" />
+            <plus-icon v-if="icon === 'plus'" size="15" class="vue-feather dark-text-theme" />
+            <check-square-icon v-if="icon === 'check-square'" size="15" class="vue-feather dark-text-theme" />
+            <x-square-icon v-if="icon === 'x-square'" size="15" class="vue-feather dark-text-theme" />
+            <check-icon v-if="icon === 'check'" size="15" class="vue-feather dark-text-theme" />
+            <dollar-sign-icon v-if="icon === 'dollar-sign'" size="15" class="vue-feather dark-text-theme" />
+            <sorting-icon v-if="icon === 'preview-sorting'" class="vue-feather dark-text-theme preview-sorting" />
+            <cloud-plus-icon v-if="icon === 'cloud-plus'" class="vue-feather dark-text-theme preview-sorting" />
+
+            <span v-if="$slots.default" class="ml-2 text-sm font-bold">
+                <slot />
+            </span>
+        </div>
+    </button>
+</template>
+
+<script>
+import {
+    UserCheckIcon,
+    HardDriveIcon,
+    UploadCloudIcon,
+    LinkIcon,
+    Trash2Icon,
+    UsersIcon,
+    SearchIcon,
+    RefreshCwIcon,
+    DownloadIcon,
+    CopyIcon,
+    FilterIcon,
+    DollarSignIcon,
+    CheckIcon,
+    XSquareIcon,
+    CheckSquareIcon,
+    FolderPlusIcon,
+    ListIcon,
+    GridIcon,
+    TrashIcon,
+    UserPlusIcon,
+    PlusIcon,
+    CreditCardIcon,
+} from 'vue-feather-icons'
+import CloudPlusIcon from '../../Icons/CloudPlusIcon'
+import SortingIcon from '../../Icons/SortingIcon'
+
+export default {
+    name: 'MobileActionButton',
+    props: ['icon'],
+    components: {
+        UserCheckIcon,
+        HardDriveIcon,
+        UploadCloudIcon,
+        LinkIcon,
+        Trash2Icon,
+        UsersIcon,
+        CheckSquareIcon,
+        DollarSignIcon,
+        CreditCardIcon,
+        FolderPlusIcon,
+        RefreshCwIcon,
+        CloudPlusIcon,
+        UserPlusIcon,
+        DownloadIcon,
+        SortingIcon,
+        XSquareIcon,
+        FilterIcon,
+        SearchIcon,
+        CheckIcon,
+        TrashIcon,
+        PlusIcon,
+        CopyIcon,
+        ListIcon,
+        GridIcon,
+    },
+}
+</script>

resources/js/components/UI/Buttons/MobileActionButtonUpload.vue

@@ -0,0 +1,79 @@
+<template>
+    <button class="mobile-action-button">
+        <div class="flex">
+            <cloud-plus-icon class="icon dark-text-theme" size="15" />
+            <label label="file" class="label button file-input button-base">
+                <slot />
+                <input @change="emmitFiles" v-show="false" id="file" type="file" name="files[]" multiple />
+            </label>
+        </div>
+    </button>
+</template>
+
+<script>
+import { UploadCloudIcon } from 'vue-feather-icons'
+import CloudPlusIcon from '../../Icons/CloudPlusIcon'
+
+export default {
+    name: 'MobileActionButtonUpload',
+    components: {
+        CloudPlusIcon,
+        UploadCloudIcon,
+    },
+    methods: {
+        emmitFiles(e) {
+            this.$uploadFiles(e.target.files)
+        },
+    },
+}
+</script>
+
+<style scoped lang="scss">
+@import '../../../../sass/vuefilemanager/variables';
+@import '../../../../sass/vuefilemanager/mixins';
+
+.mobile-action-button {
+    background: $light_background;
+    margin-right: 8px;
+    border-radius: 8px;
+    padding: 7px 14px;
+    cursor: pointer;
+    border: none;
+
+    .flex {
+        display: flex;
+        align-items: center;
+    }
+
+    .icon {
+        vertical-align: middle;
+        margin-right: 10px;
+        @include font-size(14);
+    }
+
+    .label {
+        vertical-align: middle;
+        @include font-size(14);
+        font-weight: 700;
+        color: $text;
+    }
+}
+
+.dark {
+    .mobile-action-button {
+        background: $dark_mode_foreground;
+
+        path,
+        line,
+        polyline,
+        rect,
+        circle {
+            color: inherit;
+        }
+
+        .label {
+            color: $dark_mode_text_primary;
+        }
+    }
+}
+</style>

resources/js/components/UI/Buttons/SearchBarButton.vue

@@ -0,0 +1,36 @@
+<template>
+    <div
+        @click="$openSpotlight()"
+        class="relative cursor-pointer rounded-lg bg-light-background dark:bg-dark-foreground"
+    >
+        <div class="flex w-56 items-center justify-between px-4 py-2.5 text-left xl:w-64">
+            <div class="flex items-center">
+                <search-icon size="18" class="vue-feather text-gray-400 dark:text-gray-600" />
+                <span class="pl-2.5 text-xs font-bold text-gray-400 dark:text-gray-600">
+                    {{ $t('search_anything') }}
+                </span>
+            </div>
+            <span
+                class="rounded border px-1 py-0.5 text-xs font-bold tracking-normal text-gray-400 dark:border-slate-200 dark:border-opacity-5 dark:text-gray-600"
+            >
+                {{ metaKeyIcon }}+K
+            </span>
+        </div>
+    </div>
+</template>
+
+<script>
+import { SearchIcon } from 'vue-feather-icons'
+
+    export default {
+        name: 'SearchBarButton',
+        components: {
+            SearchIcon,
+        },
+		computed: {
+			metaKeyIcon() {
+				return this.$isApple() ? '⌘' : 'Ctrl'
+			},
+		},
+    }
+</script>

resources/js/components/UI/Buttons/SocialLoginButtons.vue

@@ -0,0 +1,41 @@
+<template>
+    <div
+        v-if="config.allowedFacebookLogin || config.allowedGoogleLogin || config.allowedGithubLogin"
+        class="mb-10 flex items-center justify-center"
+    >
+        <div v-if="config.allowedFacebookLogin" class="mx-5 cursor-pointer">
+            <facebook-icon @click="socialiteRedirect('facebook')" />
+        </div>
+
+        <div v-if="config.allowedGithubLogin" class="mx-5 cursor-pointer">
+            <github-icon @click="socialiteRedirect('github')" />
+        </div>
+
+        <div v-if="config.allowedGoogleLogin" class="mx-5 cursor-pointer">
+			<google-icon @click="socialiteRedirect('google')" class="vue-feather"/>
+        </div>
+    </div>
+</template>
+
+<script>
+import { FacebookIcon, GithubIcon } from 'vue-feather-icons'
+import GoogleIcon from "../../Icons/GoogleIcon"
+import { mapGetters } from 'vuex'
+
+export default {
+    name: 'SocialLoginButtons',
+    components: {
+        FacebookIcon,
+        GoogleIcon,
+        GithubIcon,
+    },
+    computed: {
+        ...mapGetters(['config']),
+    },
+    methods: {
+        socialiteRedirect(provider) {
+            this.$store.dispatch('socialiteRedirect', provider)
+        },
+    },
+}
+</script>

resources/js/components/UI/Buttons/ToolbarButton.vue

@@ -0,0 +1,82 @@
+<template>
+    <button
+        class="group inline-flex h-[42px] w-[42px] cursor-pointer items-center justify-center rounded-lg hover:bg-light-background dark:hover:bg-2x-dark-foreground"
+        :title="action"
+    >
+        <corner-down-right-icon v-if="source === 'move'" size="19" class="vue-feather group-hover-text-theme" />
+        <download-cloud-icon v-if="source === 'download'" size="19" class="vue-feather group-hover-text-theme" />
+        <folder-plus-icon v-if="source === 'folder-plus'" size="19" class="vue-feather group-hover-text-theme" />
+        <user-plus-icon v-if="source === 'user-plus'" size="19" class="vue-feather group-hover-text-theme" />
+        <zoom-in-icon v-if="source === 'zoom-in'" size="19" class="vue-feather group-hover-text-theme" />
+        <zoom-out-icon v-if="source === 'zoom-out'" size="19" class="vue-feather group-hover-text-theme" />
+        <edit-2-icon v-if="source === 'rename'" size="19" class="vue-feather group-hover-text-theme" />
+        <printer-icon v-if="source === 'print'" size="19" class="vue-feather group-hover-text-theme" />
+        <trash-2-icon v-if="source === 'trash'" size="19" class="vue-feather group-hover-text-theme" />
+        <list-icon v-if="source === 'th-list'" size="19" class="vue-feather group-hover-text-theme" />
+        <info-icon
+            v-if="source === 'info'"
+            size="19"
+            class="vue-feather group-hover-text-theme"
+            :class="{ 'text-theme': isVisibleSidebar }"
+        />
+        <grid-icon v-if="source === 'th'" size="19" class="vue-feather group-hover-text-theme" />
+        <link-icon v-if="source === 'share'" size="19" class="vue-feather group-hover-text-theme" />
+        <x-icon v-if="source === 'close'" size="19" class="vue-feather group-hover-text-theme" />
+        <search-icon v-if="source === 'search'" size="19" class="vue-feather group-hover-text-theme" />
+        <cloud-off-icon v-if="source === 'shared-off'" size="19" class="vue-feather group-hover-text-theme" />
+        <sorting-icon v-if="source === 'preview-sorting'" class="vue-feather group-hover-text-theme scale-125" />
+        <CloudPlusIcon v-if="source === 'cloud-plus'" class="vue-feather group-hover-text-theme scale-125" />
+    </button>
+</template>
+
+<script>
+import SortingIcon from '../../Icons/SortingIcon'
+import CloudPlusIcon from '../../Icons/CloudPlusIcon'
+import {
+    SearchIcon,
+    UserPlusIcon,
+    CornerDownRightIcon,
+    DownloadCloudIcon,
+    FolderPlusIcon,
+    CloudOffIcon,
+    PrinterIcon,
+    ZoomOutIcon,
+    ZoomInIcon,
+    Trash2Icon,
+    Edit2Icon,
+    GridIcon,
+    ListIcon,
+    InfoIcon,
+    LinkIcon,
+    XIcon,
+} from 'vue-feather-icons'
+import { mapGetters } from 'vuex'
+
+export default {
+    name: 'ToolbarButton',
+    props: ['source', 'action'],
+    computed: {
+        ...mapGetters(['isVisibleSidebar']),
+    },
+    components: {
+        SearchIcon,
+        CloudPlusIcon,
+        UserPlusIcon,
+        SortingIcon,
+        CornerDownRightIcon,
+        DownloadCloudIcon,
+        FolderPlusIcon,
+        CloudOffIcon,
+        PrinterIcon,
+        ZoomOutIcon,
+        ZoomInIcon,
+        Trash2Icon,
+        Edit2Icon,
+        ListIcon,
+        GridIcon,
+        InfoIcon,
+        LinkIcon,
+        XIcon,
+    },
+}
+</script>