From 0104a6862d53f4e202017b0ec69b943e9c2fbf06 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yusuf=20=C3=96zdemir?= <yusuf@ozdemir.be>
Date: Sun, 28 Apr 2024 22:01:57 +0300
Subject: [PATCH 01/52] add useModal composable

---
 README.md                                |  4 +--
 src/ServiceContainer.js                  |  9 ++---
 src/assets/css/index.css                 |  4 ++-
 src/components/Breadcrumb.vue            | 14 ++------
 src/components/ContextMenu.vue           | 34 +++++++-----------
 src/components/Explorer.vue              | 43 ++++++++++------------
 src/components/Message.vue               |  6 ----
 src/components/SortIcon.vue              | 14 +++-----
 src/components/Statusbar.vue             |  9 ++---
 src/components/Toast.vue                 |  6 ----
 src/components/Toolbar.vue               | 27 +++++++-------
 src/components/VueFinder.vue             | 45 +++++++-----------------
 src/components/modals/ModalAbout.vue     | 14 +++-----
 src/components/modals/ModalArchive.vue   | 15 +++-----
 src/components/modals/ModalDelete.vue    | 15 +++-----
 src/components/modals/ModalLayout.vue    |  4 +--
 src/components/modals/ModalMessage.vue   | 14 +++-----
 src/components/modals/ModalMove.vue      | 15 +++-----
 src/components/modals/ModalNewFile.vue   | 15 +++-----
 src/components/modals/ModalNewFolder.vue | 15 +++-----
 src/components/modals/ModalPreview.vue   | 14 +++-----
 src/components/modals/ModalRename.vue    | 15 +++-----
 src/components/modals/ModalUnarchive.vue | 15 +++-----
 src/components/modals/ModalUpload.vue    | 14 +++-----
 src/composables/useModal.js              | 20 +++++++++++
 src/composables/useTheme.js              |  2 +-
 src/index.js                             |  9 ++---
 src/modals.js                            | 11 ------
 28 files changed, 143 insertions(+), 279 deletions(-)
 create mode 100644 src/composables/useModal.js
 delete mode 100644 src/modals.js

diff --git a/README.md b/README.md
index c3934109..8f228243 100644
--- a/README.md
+++ b/README.md
@@ -132,7 +132,7 @@ when you set the select-button active to true, the select button will be visible
   :select-button="handleSelectButton"
 />
 
-<script>
+<script setup>
   // other codes
 
   const handleSelectButton = {
@@ -161,7 +161,7 @@ Alternatively, you can use the select event to get the selected items.
   @select="handleSelect"
 />
 
-<script>
+<script setup>
   // other codes
   
   // we can define a ref object to store the selected items
diff --git a/src/ServiceContainer.js b/src/ServiceContainer.js
index 6ee8b94a..9cf2c771 100644
--- a/src/ServiceContainer.js
+++ b/src/ServiceContainer.js
@@ -7,6 +7,7 @@ import {FEATURE_ALL_NAMES, FEATURES} from "./components/features.js";
 import {version} from './../package.json';
 import { format as filesizeDefault, metricFormat as filesizeMetric } from './utils/filesize.js'
 import useTheme from './composables/useTheme.js';
+import useModal from "./composables/useModal.js";
 
 export default (props, options) => {
     const storage = useStorage(props.id);
@@ -50,7 +51,7 @@ export default (props, options) => {
         // unit state - for example: GB or GiB
         metricUnits: metricUnits,
         // human readable file sizes
-        filesize: metricUnits ? filesizeMetric  : filesizeDefault,
+        filesize: metricUnits ? filesizeMetric : filesizeDefault,
         // max file size
         maxFileSize: props.maxFileSize,
         // loading state
@@ -58,11 +59,7 @@ export default (props, options) => {
         // default locale
         i18n : i18n,
         // modal state
-        modal: {
-            active: false,
-            type: 'delete',
-            data: {}
-        },
+        modal: useModal(),
         // main storage adapter
         adapter: storage.getStore('adapter'),
         // main storage adapter
diff --git a/src/assets/css/index.css b/src/assets/css/index.css
index 22643c19..c1b40a0d 100644
--- a/src/assets/css/index.css
+++ b/src/assets/css/index.css
@@ -63,7 +63,9 @@
         opacity-50 cursor-not-allowed
     }
 
-
+    .vuefinder .vf-sort-button{
+        @apply p-1 leading-6 hover:bg-neutral-100 bg-neutral-50 dark:bg-gray-800 dark:hover:bg-gray-700/10 flex items-center dark:border-gray-700
+    }
 
     .vf-explorer-selected {
         @apply bg-neutral-100 border border-neutral-300 dark:bg-slate-700 dark:border-gray-900 dark:border-slate-800 !important;
diff --git a/src/components/Breadcrumb.vue b/src/components/Breadcrumb.vue
index 86035090..6f59ef4e 100644
--- a/src/components/Breadcrumb.vue
+++ b/src/components/Breadcrumb.vue
@@ -77,18 +77,12 @@
   </div>
 </template>
 
-
-<script>
-export default {
-  name: 'VFBreadcrumb',
-};
-</script>
-
 <script setup>
 
 import {inject, nextTick, ref, watch} from 'vue';
 import useDebouncedRef from '../composables/useDebouncedRef.js';
 import {FEATURES} from "./features.js";
+import ModalMove from "./modals/ModalMove.vue";
 
 const dirname = ref(null);
 const breadcrumb = ref([]);
@@ -170,16 +164,12 @@ const handleDropZone = (e, index = null) => {
     return;
   }
 
-  app.emitter.emit('vf-modal-show', {
-    type: 'move',
-    items: {from: draggedItems, to: breadcrumb.value[index] ?? {path: (app.adapter + '://')}}
-  });
+  app.modal.open(ModalMove, {items: {from: draggedItems, to: breadcrumb.value[index] ?? {path: (app.adapter + '://')}}})
 };
 
 const handleDragOver = (e) => {
   e.preventDefault();
 
-
   if (isGoUpAvailable()) {
     e.dataTransfer.dropEffect = 'copy';
     e.currentTarget.classList.add('bg-blue-200','dark:bg-slate-500');
diff --git a/src/components/ContextMenu.vue b/src/components/ContextMenu.vue
index 50cdd867..5fd7ed8a 100644
--- a/src/components/ContextMenu.vue
+++ b/src/components/ContextMenu.vue
@@ -16,15 +16,15 @@
   </ul>
 </template>
 
-<script>
-export default {
-  name: 'VFContextMenu'
-};
-</script>
-
 <script setup>
 import {computed, inject, nextTick, reactive, ref} from 'vue';
 import {FEATURES} from "./features.js";
+import ModalNewFolder from "./modals/ModalNewFolder.vue";
+import ModalPreview from "./modals/ModalPreview.vue";
+import ModalArchive from "./modals/ModalArchive.vue";
+import ModalUnarchive from "./modals/ModalUnarchive.vue";
+import ModalRename from "./modals/ModalRename.vue";
+import ModalDelete from "./modals/ModalDelete.vue";
 
 const app = inject('ServiceContainer');
 const {t} = app.i18n
@@ -54,15 +54,13 @@ const menuItems = {
   newfolder: {
     key: FEATURES.NEW_FOLDER,
     title: () => t('New Folder'),
-    action: () => {
-      app.emitter.emit('vf-modal-show', {type:'new-folder'});
-    },
+    action: () => app.modal.open(ModalNewFolder),
   },
   delete: {
     key: FEATURES.DELETE,
     title: () => t('Delete'),
     action: () => {
-      app.emitter.emit('vf-modal-show', {type:'delete', items: selectedItems});
+      app.modal.open(ModalDelete, {items: selectedItems});
     },
   },
   refresh: {
@@ -74,9 +72,7 @@ const menuItems = {
   preview: {
     key: FEATURES.PREVIEW,
     title: () =>  t('Preview'),
-    action: () => {
-      app.emitter.emit('vf-modal-show', {type:'preview', adapter:app.data.adapter, item: selectedItems.value[0]});
-    },
+    action: () => app.modal.open(ModalPreview, {adapter:app.data.adapter, item: selectedItems.value[0]}),
   },
   open: {
     title: () =>  t('Open'),
@@ -105,23 +101,17 @@ const menuItems = {
   archive: {
     key: FEATURES.ARCHIVE,
     title: () =>  t('Archive'),
-    action: () => {
-      app.emitter.emit('vf-modal-show', {type:'archive', items: selectedItems});
-    },
+    action: () => app.modal.open(ModalArchive, {items: selectedItems}),
   },
   unarchive: {
     key: FEATURES.UNARCHIVE,
     title: () => t('Unarchive'),
-    action: () => {
-      app.emitter.emit('vf-modal-show', {type:'unarchive', items: selectedItems});
-    },
+    action: () => app.modal.open(ModalUnarchive, {items: selectedItems}),
   },
   rename: {
     key: FEATURES.RENAME,
     title: () =>  t('Rename'),
-    action: () => {
-      app.emitter.emit('vf-modal-show', {type:'rename', items: selectedItems});
-    },
+    action: () => app.modal.open(ModalRename, {items: selectedItems}),
   }
 };
 
diff --git a/src/components/Explorer.vue b/src/components/Explorer.vue
index f14b4750..3b44df1d 100644
--- a/src/components/Explorer.vue
+++ b/src/components/Explorer.vue
@@ -1,23 +1,23 @@
 <template>
   <div class="relative flex-auto flex flex-col overflow-hidden">
-    <div v-if="app.view=='list' || searchQuery.length" class="grid grid-cols-12 border-b border-neutral-300 border-gray-200 dark:border-gray-700 text-xs select-none">
-        <div @click="sortBy('basename')" class="col-span-7 py-1 leading-6 hover:bg-neutral-100 bg-neutral-50 dark:bg-gray-800 dark:hover:bg-gray-700/10 flex items-center pl-1">
+    <div v-if="app.view === 'list' || searchQuery.length" class="grid grid-cols-12 border-b border-neutral-300 dark:border-gray-700 text-xs select-none divide-x">
+        <div @click="sortBy('basename')" class="col-span-7 vf-sort-button">
           {{ t('Name') }}
-            <v-f-sort-icon :direction="sort.order=='asc'? 'down': 'up'" v-show="sort.active && sort.column=='basename'" />
+          <SortIcon :direction="sort.order" v-show="sort.active && sort.column === 'basename'" />
         </div>
-        <div v-if="!searchQuery.length" @click="sortBy('file_size')" class="col-span-2 py-1 leading-6 hover:bg-neutral-100 bg-neutral-50 dark:bg-gray-800 dark:hover:bg-gray-700/10 flex items-center justify-center border-l border-r dark:border-gray-700">
+        <div v-if="!searchQuery.length" @click="sortBy('file_size')" class="justify-center col-span-2 vf-sort-button">
           {{ t('Size') }}
-          <v-f-sort-icon :direction="sort.order=='asc'? 'down': 'up'"  v-show="sort.active && sort.column=='file_size'" />
+          <SortIcon :direction="sort.order"  v-show="sort.active && sort.column === 'file_size'" />
         </div>
-        <div v-if="!searchQuery.length" @click="sortBy('last_modified')" class="col-span-3 py-1 leading-6 hover:bg-neutral-100 bg-neutral-50 dark:bg-gray-800 dark:hover:bg-gray-700/10 flex items-center justify-center">
+        <div v-if="!searchQuery.length" @click="sortBy('last_modified')" class="justify-center col-span-3 vf-sort-button">
           {{ t('Date') }}
-          <v-f-sort-icon :direction="sort.order=='asc'? 'down': 'up'"  v-show="sort.active && sort.column=='last_modified'" />
+          <SortIcon :direction="sort.order"  v-show="sort.active && sort.column === 'last_modified'" />
         </div>
-        <div v-if="searchQuery.length" @click="sortBy('path')" class="col-span-5 py-1 leading-6 hover:bg-neutral-100 bg-neutral-50 dark:bg-gray-800 dark:hover:bg-gray-700/10 flex items-center justify-center border-l dark:border-gray-700">
+        <div v-if="searchQuery.length" @click="sortBy('path')" class="justify-center col-span-5 vf-sort-button">
           {{ t('Filepath') }}
-            <v-f-sort-icon :direction="sort.order=='asc'? 'down': 'up'"  v-show="sort.active && sort.column=='path'" />
+          <SortIcon :direction="sort.order"  v-show="sort.active && sort.column === 'path'" />
         </div>
-      </div>
+    </div>
 
     <div class="absolute">
       <div ref="dragImage"  class="absolute -z-50 -top-96">
@@ -113,28 +113,23 @@
       </div>
 
     </div>
-    <v-f-toast />
+    <Toast />
   </div>
 </template>
 
-<script>
-export default {
-  name: 'VFExplorer'
-};
-</script>
-
 <script setup>
 import { inject, nextTick, onBeforeUnmount, onMounted, onUpdated, reactive, ref, watch } from 'vue';
 import DragSelect from 'dragselect';
 import datetimestring from '../utils/datetimestring.js';
-import VFSortIcon from './SortIcon.vue';
-import VFToast from './Toast.vue';
+import Toast from './Toast.vue';
 import LazyLoad from 'vanilla-lazyload';
 import title_shorten from "../utils/title_shorten.js";
+import ModalPreview from "./modals/ModalPreview.vue";
+import ModalMove from "./modals/ModalMove.vue";
+import SortIcon from "./SortIcon.vue";
 
 const app = inject('ServiceContainer');
 const {t} = app.i18n;
-const {getStore} = app.storage;
 
 const ext = (item) => item?.substring(0, 3)
 const selectorArea = ref(null);
@@ -220,7 +215,7 @@ const openItem = (item) => {
     app.emitter.emit('vf-search-exit');
     app.emitter.emit('vf-fetch', {params:{q: 'index', adapter: app.data.adapter, path:item.path}});
   } else {
-    app.emitter.emit('vf-modal-show', {type: 'preview', adapter: app.data.adapter, item});
+    app.modal.open(ModalPreview, {adapter: app.data.adapter, item})
   }
 };
 
@@ -252,8 +247,8 @@ const getItems = (sorted = true) => {
 };
 
 const sortBy = (column) => {
-  if (sort.active && sort.column == column) {
-    sort.active =  sort.order == 'asc'
+  if (sort.active && sort.column === column) {
+    sort.active =  sort.order === 'asc'
     sort.column = column
     sort.order = 'desc'
   } else {
@@ -286,7 +281,7 @@ const handleDropZone = (e, item) => {
     return;
   }
 
-  app.emitter.emit('vf-modal-show', {type:'move', items: {from: draggedItems, to: item}});
+  app.modal.open(ModalMove, {items: {from: draggedItems, to: item}})
 };
 
 const handleDragOver = (e, item) => {
diff --git a/src/components/Message.vue b/src/components/Message.vue
index 9ff15e7c..4130c0d2 100644
--- a/src/components/Message.vue
+++ b/src/components/Message.vue
@@ -16,12 +16,6 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'Message'
-};
-</script>
-
 <script setup>
 import {ref, watch, inject} from 'vue';
 
diff --git a/src/components/SortIcon.vue b/src/components/SortIcon.vue
index bc5a6513..09865817 100644
--- a/src/components/SortIcon.vue
+++ b/src/components/SortIcon.vue
@@ -1,20 +1,14 @@
 <template>
   <div>
-    <svg v-if="direction==='down'" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+    <svg v-if="direction==='asc'" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
       <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
     </svg>
-   <svg v-if="direction==='up'" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-  <path fill-rule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clip-rule="evenodd" />
-</svg>
+    <svg v-if="direction==='desc'" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+      <path fill-rule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clip-rule="evenodd" />
+    </svg>
   </div>
 </template>
 
-<script>
-export default {
-  name: 'VFSortIcon'
-};
-</script>
-
 <script setup>
   defineProps({direction: String});
 </script>
diff --git a/src/components/Statusbar.vue b/src/components/Statusbar.vue
index cb1c7ade..e5fb06b2 100644
--- a/src/components/Statusbar.vue
+++ b/src/components/Statusbar.vue
@@ -24,7 +24,7 @@
               :disabled="!isSelectButtonActive"
               v-if="app.selectButton.active" @click="app.selectButton.click(app.selectedItems, $event)">{{ t("Select") }}</button>
 
-      <span class="mr-1" :aria-label="t('About')" data-microtip-position="top-left" role="tooltip" @click="app.emitter.emit('vf-modal-show', {type:'about'})">
+      <span class="mr-1" :aria-label="t('About')" data-microtip-position="top-left" role="tooltip" @click="app.modal.open(ModalAbout)">
         <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 stroke-slate-500 cursor-pointer" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
           <path stroke-linecap="round" stroke-linejoin="round" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
         </svg>
@@ -33,14 +33,9 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'VFStatusbar'
-};
-</script>
-
 <script setup>
 import {computed, inject, ref} from 'vue';
+import ModalAbout from "./modals/ModalAbout.vue";
 
 const app = inject('ServiceContainer');
 const {t} = app.i18n;
diff --git a/src/components/Toast.vue b/src/components/Toast.vue
index c6df3a3d..ab926558 100644
--- a/src/components/Toast.vue
+++ b/src/components/Toast.vue
@@ -16,12 +16,6 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'VFToast.vue'
-};
-</script>
-
 <script setup>
 import {inject, ref} from 'vue';
 
diff --git a/src/components/Toolbar.vue b/src/components/Toolbar.vue
index 9fa9747b..e9edb6a1 100644
--- a/src/components/Toolbar.vue
+++ b/src/components/Toolbar.vue
@@ -4,7 +4,7 @@
         <div class="mx-1.5"
              :aria-label="t('New Folder')" data-microtip-position="bottom-right" role="tooltip"
              v-if="app.features.includes(FEATURES.NEW_FOLDER)"
-             @click="app.emitter.emit('vf-modal-show', {type:'new-folder', items: selectedItems})">
+             @click="app.modal.open(ModalNewFolder, {items: selectedItems})">
           <svg xmlns="http://www.w3.org/2000/svg"
                class="h-6 w-6 md:h-8 md:w-8 m-auto cursor-pointer stroke-gray-500 hover:stroke-cyan-700 dark:stroke-gray-400 dark:hover:stroke-gray-300" fill="none" viewBox="0 0 24 24" stroke="none" stroke-width="1.5">
               <path stroke-linecap="round" stroke-linejoin="round" d="M12 10.5v6m3-3H9m4.06-7.19l-2.12-2.12a1.5 1.5 0 00-1.061-.44H4.5A2.25 2.25 0 002.25 6v12a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9a2.25 2.25 0 00-2.25-2.25h-5.379a1.5 1.5 0 01-1.06-.44z" />
@@ -14,7 +14,7 @@
         <div class="mx-1.5"
              :aria-label="t('New File')" data-microtip-position="bottom" role="tooltip"
              v-if="app.features.includes(FEATURES.NEW_FILE)"
-             @click="app.emitter.emit('vf-modal-show', {type:'new-file', items: selectedItems})">
+             @click="app.modal.open(ModalNewFile, {items: selectedItems})">
           <svg xmlns="http://www.w3.org/2000/svg"
             class="h-6 w-6 md:h-8 md:w-8 m-auto cursor-pointer stroke-gray-500 hover:stroke-cyan-700 dark:stroke-gray-400 dark:hover:stroke-gray-300" fill="none" viewBox="0 0 24 24" stroke="none" stroke-width="1.5">
              <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m3.75 9v6m3-3H9m1.5-12H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
@@ -24,7 +24,7 @@
         <div class="mx-1.5"
              :aria-label="t('Rename')" data-microtip-position="bottom" role="tooltip"
              v-if="app.features.includes(FEATURES.RENAME)"
-             @click="(selectedItems.length != 1) || app.emitter.emit('vf-modal-show', {type:'rename', items: selectedItems})">
+             @click="(selectedItems.length != 1) || app.modal.open(ModalRename, {items: selectedItems})">
           <svg xmlns="http://www.w3.org/2000/svg"
                 :class="(selectedItems.length == 1) ? 'cursor-pointer stroke-gray-500 hover:stroke-cyan-700 dark:stroke-gray-400 dark:hover:stroke-gray-300' : 'stroke-gray-200  dark:stroke-gray-700'"
                class="h-6 w-6 md:h-8 md:w-8 m-auto" fill="none" viewBox="0 0 24 24" stroke="none" stroke-width="1.5">
@@ -35,7 +35,7 @@
         <div class="mx-1.5"
              :aria-label="t('Delete')" data-microtip-position="bottom" role="tooltip"
              v-if="app.features.includes(FEATURES.DELETE)"
-             @click="(!selectedItems.length) || app.emitter.emit('vf-modal-show', {type:'delete', items: selectedItems})">
+             @click="(!selectedItems.length) || app.modal.open(ModalDelete, {items: selectedItems})">
             <svg xmlns="http://www.w3.org/2000/svg"
                  :class="(selectedItems.length) ? 'cursor-pointer stroke-gray-500 hover:stroke-cyan-700 dark:stroke-gray-400 dark:hover:stroke-gray-300' : 'stroke-gray-200  dark:stroke-gray-700'"
                  class="h-6 w-6 md:h-8 md:w-8 m-auto" fill="none" viewBox="0 0 24 24" stroke="none" stroke-width="1.5">
@@ -46,7 +46,7 @@
         <div class="mx-1.5"
              :aria-label="t('Upload')" data-microtip-position="bottom" role="tooltip"
              v-if="app.features.includes(FEATURES.UPLOAD)"
-             @click="app.emitter.emit('vf-modal-show', {type:'upload', items: selectedItems})">
+             @click="app.modal.open(ModalUpload, {items: selectedItems})">
           <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 md:h-8 md:w-8 m-auto cursor-pointer stroke-gray-500 hover:stroke-cyan-700 dark:stroke-gray-400 dark:hover:stroke-gray-300" fill="none" viewBox="0 0 24 24" stroke="none" stroke-width="1.5">
               <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" />
           </svg>
@@ -54,7 +54,7 @@
 
         <div class="mx-1.5" v-if="app.features.includes(FEATURES.UNARCHIVE) && selectedItems.length == 1 && selectedItems[0].mime_type == 'application/zip'"
              :aria-label="t('Unarchive')" data-microtip-position="bottom" role="tooltip"
-              @click="(!selectedItems.length) || app.emitter.emit('vf-modal-show', {type:'unarchive', items: selectedItems})">
+              @click="(!selectedItems.length) || app.modal.open(ModalUnarchive, {items: selectedItems})">
           <svg xmlns="http://www.w3.org/2000/svg"
                :class="(selectedItems.length) ? 'cursor-pointer stroke-gray-500 hover:stroke-cyan-700 dark:stroke-gray-400 dark:hover:stroke-gray-300' : 'stroke-gray-200  dark:stroke-gray-700'"
                class="h-6 w-6 md:h-8 md:w-8 m-auto" fill="none" viewBox="0 0 24 24" stroke="none" stroke-width="1.5">
@@ -63,7 +63,7 @@
         </div>
         <div class="mx-1.5" v-if="app.features.includes(FEATURES.ARCHIVE)"
              :aria-label="t('Archive')" data-microtip-position="bottom" role="tooltip"
-              @click="(!selectedItems.length) || app.emitter.emit('vf-modal-show', {type:'archive', items: selectedItems})">
+              @click="(!selectedItems.length) || app.modal.open(ModalArchive, {items: selectedItems})">
           <svg xmlns="http://www.w3.org/2000/svg"
                :class="(selectedItems.length) ? 'cursor-pointer stroke-gray-500 hover:stroke-cyan-700 dark:stroke-gray-400 dark:hover:stroke-gray-300' : 'stroke-gray-200  dark:stroke-gray-700'"
                class="h-6 w-6 md:h-8 md:w-8 m-auto" fill="none" viewBox="0 0 24 24" stroke="none" stroke-width="1.5">
@@ -107,15 +107,16 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'VFToolbar'
-};
-</script>
-
 <script setup>
 import {inject, ref} from 'vue';
 import { FEATURES } from "./features.js";
+import ModalNewFolder from "./modals/ModalNewFolder.vue";
+import ModalNewFile from "./modals/ModalNewFile.vue";
+import ModalRename from "./modals/ModalRename.vue";
+import ModalDelete from "./modals/ModalDelete.vue";
+import ModalUpload from "./modals/ModalUpload.vue";
+import ModalUnarchive from "./modals/ModalUnarchive.vue";
+import ModalArchive from "./modals/ModalArchive.vue";
 
 const app = inject('ServiceContainer');
 const {setStore} = app.storage;
diff --git a/src/components/VueFinder.vue b/src/components/VueFinder.vue
index 173a0c75..cfd83f21 100644
--- a/src/components/VueFinder.vue
+++ b/src/components/VueFinder.vue
@@ -1,42 +1,36 @@
 <template>
   <div class="vuefinder" ref="root">
-    <div :class="app.theme.actualValue === 'dark' ? 'dark': ''">
+    <div :class="app.theme.actualValue">
       <div
           :class="app.fullScreen ? 'fixed w-screen inset-0 z-20' : 'relative rounded-md'"
           :style="!app.fullScreen ? 'max-height: ' + maxHeight : ''"
           class="border flex flex-col bg-white dark:bg-gray-800 text-gray-700 dark:text-neutral-400 border-neutral-300 dark:border-gray-900 min-w-min select-none"
           @mousedown="app.emitter.emit('vf-contextmenu-hide')"
           @touchstart="app.emitter.emit('vf-contextmenu-hide')">
-        <v-f-toolbar/>
-        <v-f-breadcrumb/>
-        <v-f-explorer/>
-        <v-f-statusbar/>
+        <Toolbar/>
+        <Breadcrumb/>
+        <Explorer/>
+        <Statusbar/>
       </div>
 
       <Transition name="fade">
-        <component v-if="app.modal.active" :is="'v-f-modal-'+ app.modal.type"/>
+        <Component v-if="app.modal.visible" :is="app.modal.type"/>
       </Transition>
 
-      <v-f-context-menu/>
+      <ContextMenu/>
     </div>
   </div>
 </template>
 
-<script>
-export default {
-  name: 'VueFinder'
-};
-</script>
-
 <script setup>
 import {inject, onMounted, provide, ref} from 'vue';
 import ServiceContainer from "../ServiceContainer.js";
 
-import VFToolbar from '../components/Toolbar.vue';
-import VFBreadcrumb from '../components/Breadcrumb.vue';
-import VFExplorer from '../components/Explorer.vue';
-import VFContextMenu from '../components/ContextMenu.vue';
-import VFStatusbar from '../components/Statusbar.vue';
+import Toolbar from '../components/Toolbar.vue';
+import Breadcrumb from '../components/Breadcrumb.vue';
+import Explorer from '../components/Explorer.vue';
+import ContextMenu from '../components/ContextMenu.vue';
+import Statusbar from '../components/Statusbar.vue';
 
 const emit = defineEmits(['select'])
 
@@ -110,19 +104,6 @@ const {setStore} = app.storage;
 const root = ref(null);
 app.root = root;
 
-// Translator
-const {t} = app.i18n;
-
-app.emitter.on('vf-modal-close', () => {
-  app.modal.active = false;
-});
-
-app.emitter.on('vf-modal-show', (item) => {
-  app.modal.active = true;
-  app.modal.type = item.type;
-  app.modal.data = item;
-});
-
 const updateItems = (data) => {
   Object.assign(app.data, data);
   app.emitter.emit('vf-nodes-selected', {});
@@ -169,7 +150,7 @@ app.emitter.on('vf-fetch', ({params, body = null, onSuccess = null, onError = nu
       app.loading = false;
     }
     if (!noCloseModal) {
-      app.emitter.emit('vf-modal-close');
+      app.modal.close();
     }
     updateItems(data);
     if (onSuccess) {
diff --git a/src/components/modals/ModalAbout.vue b/src/components/modals/ModalAbout.vue
index 735dbf23..f6572f88 100644
--- a/src/components/modals/ModalAbout.vue
+++ b/src/components/modals/ModalAbout.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-f-modal-layout>
+  <ModalLayout>
     <div class="sm:flex sm:items-start">
       <div
           class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-50 dark:bg-gray-500 sm:mx-0 sm:h-10 sm:w-10">
@@ -80,21 +80,15 @@
       </div>
     </div>
     <template v-slot:buttons>
-      <button type="button" @click="app.emitter.emit('vf-modal-close')" class="vf-btn vf-btn-secondary">
+      <button type="button" @click="app.modal.close()" class="vf-btn vf-btn-secondary">
         {{ t('Close') }}
       </button>
     </template>
-  </v-f-modal-layout>
+  </ModalLayout>
 </template>
 
-<script>
-export default {
-  name: 'VFModalAbout'
-};
-</script>
-
 <script setup>
-import VFModalLayout from './ModalLayout.vue';
+import ModalLayout from './ModalLayout.vue';
 import {computed, inject, ref} from 'vue';
 import ActionMessage from "../ActionMessage.vue";
 import { format as filesizeDefault, metricFormat as filesizeMetric } from '../../utils/filesize.js'
diff --git a/src/components/modals/ModalArchive.vue b/src/components/modals/ModalArchive.vue
index 00d02cc6..c1059f59 100644
--- a/src/components/modals/ModalArchive.vue
+++ b/src/components/modals/ModalArchive.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-f-modal-layout>
+  <ModalLayout>
     <div class="sm:flex sm:items-start">
       <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-50 dark:bg-gray-500 sm:mx-0 sm:h-10 sm:w-10">
         <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 stroke-blue-600 dark:stroke-blue-100" fill="none" viewBox="0 0 24 24" stroke="none" stroke-width="1.5">
@@ -32,21 +32,14 @@
     <template v-slot:buttons>
       <button type="button" @click="archive" class="vf-btn vf-btn-primary">
         {{ t('Archive') }}</button>
-      <button type="button" @click="app.emitter.emit('vf-modal-close')" class="vf-btn vf-btn-secondary">
+      <button type="button" @click="app.modal.close()" class="vf-btn vf-btn-secondary">
         {{ t('Cancel') }}</button>
     </template>
-  </v-f-modal-layout>
+  </ModalLayout>
 </template>
 
-<script>
-export default {
-  name: 'VFModalArchive'
-};
-</script>
-
-
 <script setup>
-import VFModalLayout from './ModalLayout.vue';
+import ModalLayout from './ModalLayout.vue';
 import {inject, ref} from 'vue';
 import Message from '../Message.vue';
 const app = inject('ServiceContainer');
diff --git a/src/components/modals/ModalDelete.vue b/src/components/modals/ModalDelete.vue
index 2e8993ff..f11f864d 100644
--- a/src/components/modals/ModalDelete.vue
+++ b/src/components/modals/ModalDelete.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-f-modal-layout>
+  <ModalLayout>
     <div class="sm:flex sm:items-start">
       <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 dark:bg-gray-500 sm:mx-0 sm:h-10 sm:w-10">
         <svg xmlns="http://www.w3.org/2000/svg"
@@ -30,22 +30,15 @@
     <template v-slot:buttons>
       <button type="button" @click="remove" class="vf-btn vf-btn-danger">
         {{ t('Yes, Delete!') }}</button>
-      <button type="button" @click="app.emitter.emit('vf-modal-close')" class="vf-btn vf-btn-secondary">
+      <button type="button" @click="app.modal.close()" class="vf-btn vf-btn-secondary">
         {{ t('Cancel') }}</button>
       <div class="m-auto font-bold text-red-500 text-sm dark:text-red-200 text-center">{{ t('This action cannot be undone.') }}</div>
     </template>
-  </v-f-modal-layout>
+  </ModalLayout>
 </template>
 
-<script>
-export default {
-  name: 'VFModalDelete'
-};
-</script>
-
-
 <script setup>
-import VFModalLayout from './ModalLayout.vue';
+import ModalLayout from './ModalLayout.vue';
 import {inject, ref} from 'vue';
 import Message from '../Message.vue';
 
diff --git a/src/components/modals/ModalLayout.vue b/src/components/modals/ModalLayout.vue
index 53750ab1..b659eef6 100644
--- a/src/components/modals/ModalLayout.vue
+++ b/src/components/modals/ModalLayout.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="v-f-modal relative z-30" aria-labelledby="modal-title" role="dialog" aria-modal="true"
-       @keyup.esc="app.emitter.emit('vf-modal-close')" tabindex="0">
+       @keyup.esc="app.modal.close()" tabindex="0">
     <div class="fixed inset-0 bg-gray-500 dark:bg-gray-600 dark:bg-opacity-75 bg-opacity-75 transition-opacity"></div>
 
     <div class="fixed z-10 inset-0 overflow-hidden">
-      <div class="flex items-end sm:items-center justify-center min-h-full p-4 text-center sm:p-0" @mousedown.self="app.emitter.emit('vf-modal-close')">
+      <div class="flex items-end sm:items-center justify-center min-h-full p-4 text-center sm:p-0" @mousedown.self="app.modal.close()">
         <div class="relative bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8  sm:max-w-4xl md:max-w-2xl lg:max-w-3xl xl:max-w-5xl w-full">
           <div class="bg-white dark:bg-gray-800 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
 
diff --git a/src/components/modals/ModalMessage.vue b/src/components/modals/ModalMessage.vue
index acec7088..57878e23 100644
--- a/src/components/modals/ModalMessage.vue
+++ b/src/components/modals/ModalMessage.vue
@@ -1,5 +1,5 @@
 <template>
- <v-f-modal-layout>
+ <ModalLayout>
     <div class="sm:flex sm:items-start ">
       <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-50 dark:bg-gray-500 sm:mx-0 sm:h-10 sm:w-10">
         <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 stroke-blue-600 dark:stroke-blue-100" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
@@ -15,20 +15,14 @@
     </div>
 
     <template v-slot:buttons>
-      <button type="button" @click="app.emitter.emit('vf-modal-close')" class="vf-btn vf-btn-secondary">
+      <button type="button" @click="app.modal.close()" class="vf-btn vf-btn-secondary">
         {{ t('Close') }}</button>
     </template>
-  </v-f-modal-layout>
+  </ModalLayout>
 </template>
 
-<script>
-export default {
-  name: 'VFModalMessage'
-};
-</script>
-
 <script setup>
-import VFModalLayout from './ModalLayout.vue';
+import ModalLayout from './ModalLayout.vue';
 import {inject} from 'vue';
 const app = inject('ServiceContainer');
 const {t} = app.i18n;
diff --git a/src/components/modals/ModalMove.vue b/src/components/modals/ModalMove.vue
index 0860044c..c0847eeb 100644
--- a/src/components/modals/ModalMove.vue
+++ b/src/components/modals/ModalMove.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-f-modal-layout>
+  <ModalLayout>
     <div class="sm:flex sm:items-start">
       <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-50 dark:bg-gray-500 sm:mx-0 sm:h-10 sm:w-10">
         <svg class="h-6 w-6 stroke-blue-600 dark:stroke-blue-100" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
@@ -39,25 +39,18 @@
     <template v-slot:buttons>
       <button type="button" @click="move" class="vf-btn vf-btn-primary">
         {{ t('Yes, Move!') }}</button>
-      <button type="button" @click="app.emitter.emit('vf-modal-close')" class="vf-btn vf-btn-secondary">
+      <button type="button" @click="app.modal.close()" class="vf-btn vf-btn-secondary">
         {{ t('Cancel') }}</button>
 
       <div class="m-1 mr-auto font-bold text-gray-500 text-sm dark:text-gray-200 self-center">
         {{ t('%s item(s) selected.', items.length) }}
       </div>
     </template>
-  </v-f-modal-layout>
+  </ModalLayout>
 </template>
 
-<script>
-export default {
-  name: 'VFModalMove'
-};
-</script>
-
-
 <script setup>
-import VFModalLayout from './ModalLayout.vue';
+import ModalLayout from './ModalLayout.vue';
 import {inject, ref} from 'vue';
 import Message from '../Message.vue';
 
diff --git a/src/components/modals/ModalNewFile.vue b/src/components/modals/ModalNewFile.vue
index 6775cd9f..d31ca1b2 100644
--- a/src/components/modals/ModalNewFile.vue
+++ b/src/components/modals/ModalNewFile.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-f-modal-layout>
+  <ModalLayout>
     <div class="sm:flex sm:items-start">
       <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-50 dark:bg-gray-500 sm:mx-0 sm:h-10 sm:w-10">
         <svg xmlns="http://www.w3.org/2000/svg"
@@ -23,22 +23,15 @@
       <button type="button" @click="createFile" class="vf-btn vf-btn-primary">
         {{ t('Create') }}
       </button>
-      <button type="button" @click="app.emitter.emit('vf-modal-close')" class="vf-btn vf-btn-secondary">
+      <button type="button" @click="app.modal.close()" class="vf-btn vf-btn-secondary">
         {{ t('Cancel') }}
       </button>
     </template>
-  </v-f-modal-layout>
+  </ModalLayout>
 </template>
 
-<script>
-export default {
-  name: 'VFModalNewFile'
-};
-</script>
-
-
 <script setup>
-import VFModalLayout from './ModalLayout.vue';
+import ModalLayout from './ModalLayout.vue';
 import {inject, ref} from 'vue';
 import Message from '../Message.vue';
 
diff --git a/src/components/modals/ModalNewFolder.vue b/src/components/modals/ModalNewFolder.vue
index a3b239fd..c5c2208e 100644
--- a/src/components/modals/ModalNewFolder.vue
+++ b/src/components/modals/ModalNewFolder.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-f-modal-layout>
+  <ModalLayout>
     <div class="sm:flex sm:items-start">
       <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-50 dark:bg-gray-500 sm:mx-0 sm:h-10 sm:w-10">
          <svg xmlns="http://www.w3.org/2000/svg"
@@ -21,21 +21,14 @@
     <template v-slot:buttons>
       <button type="button" @click="createFolder" class="vf-btn vf-btn-primary">
         {{ t('Create') }}</button>
-      <button type="button" @click="app.emitter.emit('vf-modal-close')" class="vf-btn vf-btn-secondary">
+      <button type="button" @click="app.modal.close()" class="vf-btn vf-btn-secondary">
         {{ t('Cancel') }}</button>
     </template>
-  </v-f-modal-layout>
+  </ModalLayout>
 </template>
 
-<script>
-export default {
-  name: 'VFModalNewFolder'
-};
-</script>
-
-
 <script setup>
-import VFModalLayout from './ModalLayout.vue';
+import ModalLayout from './ModalLayout.vue';
 import {inject, ref} from 'vue';
 import Message from '../Message.vue';
 
diff --git a/src/components/modals/ModalPreview.vue b/src/components/modals/ModalPreview.vue
index dea4e8fe..15cfbe49 100644
--- a/src/components/modals/ModalPreview.vue
+++ b/src/components/modals/ModalPreview.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-f-modal-layout>
+  <ModalLayout>
     <div class="sm:flex sm:items-start">
       <div class="mt-3 text-center sm:mt-0 sm:text-left w-full">
         <div v-if="enabledPreview">
@@ -33,7 +33,7 @@
     </div>
 
     <template v-slot:buttons>
-      <button type="button" @click="app.emitter.emit('vf-modal-close')" class="vf-btn vf-btn-secondary">{{ t('Close') }}</button>
+      <button type="button" @click="app.modal.close()" class="vf-btn vf-btn-secondary">{{ t('Close') }}</button>
       <a
         target="_blank"
         class="vf-btn vf-btn-primary"
@@ -41,18 +41,12 @@
         :href="app.requester.getDownloadUrl(app.modal.data.adapter, app.modal.data.item)"
         v-if="app.features.includes(FEATURES.DOWNLOAD)">{{ t('Download') }}</a>
     </template>
-  </v-f-modal-layout>
+  </ModalLayout>
 </template>
 
-<script>
-export default {
-  name: 'VFModalPreview'
-};
-</script>
-
 <script setup>
 import {inject, ref} from 'vue';
-import VFModalLayout from './ModalLayout.vue';
+import ModalLayout from './ModalLayout.vue';
 import Text from '../previews/Text.vue';
 import Image from '../previews/Image.vue';
 import Default from '../previews/Default.vue';
diff --git a/src/components/modals/ModalRename.vue b/src/components/modals/ModalRename.vue
index 76c72dd3..300b3827 100644
--- a/src/components/modals/ModalRename.vue
+++ b/src/components/modals/ModalRename.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-f-modal-layout>
+  <ModalLayout>
     <div class="sm:flex sm:items-start">
       <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-50 dark:bg-gray-500 sm:mx-0 sm:h-10 sm:w-10">
 
@@ -28,20 +28,13 @@
 
     <template v-slot:buttons>
       <button type="button" @click="rename" class="vf-btn vf-btn-primary">{{ t('Rename') }}</button>
-      <button type="button" @click="app.emitter.emit('vf-modal-close')" class="vf-btn vf-btn-secondary">{{ t('Cancel') }}</button>
+      <button type="button" @click="app.modal.close()" class="vf-btn vf-btn-secondary">{{ t('Cancel') }}</button>
     </template>
-  </v-f-modal-layout>
+  </ModalLayout>
 </template>
 
-<script>
-export default {
-  name: 'VFModalRename'
-};
-</script>
-
-
 <script setup>
-import VFModalLayout from './ModalLayout.vue';
+import ModalLayout from './ModalLayout.vue';
 import {inject, ref} from 'vue';
 import Message from '../Message.vue';
 
diff --git a/src/components/modals/ModalUnarchive.vue b/src/components/modals/ModalUnarchive.vue
index 37ec348d..db896dd8 100644
--- a/src/components/modals/ModalUnarchive.vue
+++ b/src/components/modals/ModalUnarchive.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-f-modal-layout>
+  <ModalLayout>
     <div class="sm:flex sm:items-start">
       <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-50 dark:bg-gray-500 sm:mx-0 sm:h-10 sm:w-10">
         <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 stroke-blue-600 dark:stroke-blue-100" fill="none" viewBox="0 0 24 24" stroke="none" stroke-width="1.5">
@@ -27,20 +27,13 @@
 
     <template v-slot:buttons>
       <button type="button" @click="unarchive" class="vf-btn vf-btn-primary">{{ t('Unarchive') }}</button>
-      <button type="button" @click="app.emitter.emit('vf-modal-close')" class="vf-btn vf-btn-secondary">{{ t('Cancel') }}</button>
+      <button type="button" @click="app.modal.close()" class="vf-btn vf-btn-secondary">{{ t('Cancel') }}</button>
     </template>
-  </v-f-modal-layout>
+  </ModalLayout>
 </template>
 
-<script>
-export default {
-  name: 'VFModalUnarchive'
-};
-</script>
-
-
 <script setup>
-import VFModalLayout from './ModalLayout.vue';
+import ModalLayout from './ModalLayout.vue';
 import {inject, ref} from 'vue';
 import Message from '../Message.vue';
 
diff --git a/src/components/modals/ModalUpload.vue b/src/components/modals/ModalUpload.vue
index cd154abd..4d7260b4 100644
--- a/src/components/modals/ModalUpload.vue
+++ b/src/components/modals/ModalUpload.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-f-modal-layout>
+  <ModalLayout>
     <div class="sm:flex sm:items-start">
       <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-50 dark:bg-gray-500 sm:mx-0 sm:h-10 sm:w-10">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 stroke-blue-600 dark:stroke-blue-100" fill="none" viewBox="0 0 24 24" stroke="none" stroke-width="1.5">
@@ -87,19 +87,13 @@
       <button type="button" class="vf-btn vf-btn-secondary" v-if="uploading" @click.prevent="cancel">{{ t('Cancel') }}</button>
       <button type="button" class="vf-btn vf-btn-secondary" v-else @click.prevent="close">{{ t('Close') }}</button>
     </template>
-  </v-f-modal-layout>
+  </ModalLayout>
 </template>
 
-<script>
-export default {
-  name: 'VFModalUpload'
-};
-</script>
-
 <script setup>
 import Uppy from '@uppy/core';
 import XHR from '@uppy/xhr-upload';
-import VFModalLayout from './ModalLayout.vue';
+import ModalLayout from './ModalLayout.vue';
 import { inject, onBeforeUnmount, onMounted, ref } from 'vue';
 import Message from '../Message.vue';
 import { parse } from '../../utils/filesize.js';
@@ -288,7 +282,7 @@ function clear(onlySuccessful) {
  * Close upload modal
  */
 function close() {
-  app.emitter.emit('vf-modal-close');
+  app.modal.close();
 }
 
 function buildReqParams() {
diff --git a/src/composables/useModal.js b/src/composables/useModal.js
new file mode 100644
index 00000000..23fc94bf
--- /dev/null
+++ b/src/composables/useModal.js
@@ -0,0 +1,20 @@
+import {ref, shallowRef} from "vue";
+
+export default function () {
+    const type = shallowRef(null);
+    const visible = ref(false);
+    const data = ref();
+
+    const open = (modal, payload = null) => {
+        visible.value = true;
+        type.value = modal;
+        data.value = payload;
+    }
+
+    const close = () => {
+        visible.value = false;
+        type.value = null;
+    }
+
+    return {visible, type, data, open, close}
+}
diff --git a/src/composables/useTheme.js b/src/composables/useTheme.js
index 68add611..8c277dcd 100644
--- a/src/composables/useTheme.js
+++ b/src/composables/useTheme.js
@@ -36,7 +36,7 @@ export default function(storage, propTheme) {
     value: theme,
 
     /**
-     * @type {import('vue').Ref<Theme>}
+     * @type {import('vue').Ref<String>}
      */
     actualValue: actualTheme,
 
diff --git a/src/index.js b/src/index.js
index 11056f5b..c92cbc4d 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,21 +1,16 @@
 import VueFinder from './components/VueFinder.vue';
-import * as modals from './modals.js';
 import 'microtip/microtip.css'
 import './assets/css/index.css';
 
 export default {
-    /** @param {import('vue').App} app
+    /**
+     * @param {import('vue').App} app
      * @param options
      */
     install(app, options = {}) {
         // define main component
         app.component("VueFinder", VueFinder);
 
-        // define modals
-        for (const modal of Object.values(modals)) {
-            app.component(modal.name, modal);
-        }
-
         // define global properties with 'options'
         options.i18n = options.i18n ?? {};
         let [firstLanguage] = Object.keys(options.i18n)
diff --git a/src/modals.js b/src/modals.js
deleted file mode 100644
index 9e93391e..00000000
--- a/src/modals.js
+++ /dev/null
@@ -1,11 +0,0 @@
-export {default as ModalDelete} from './components/modals/ModalDelete.vue';
-export {default as ModalMessage} from './components/modals/ModalMessage.vue';
-export {default as ModalNewFolder} from './components/modals/ModalNewFolder.vue';
-export {default as ModalNewFile} from './components/modals/ModalNewFile.vue';
-export {default as ModalPreview} from './components/modals/ModalPreview.vue';
-export {default as ModalRename} from './components/modals/ModalRename.vue';
-export {default as ModalUpload} from './components/modals/ModalUpload.vue';
-export {default as ModalArchive} from './components/modals/ModalArchive.vue';
-export {default as ModalUnarchive} from './components/modals/ModalUnarchive.vue';
-export {default as ModalMove} from './components/modals/ModalMove.vue';
-export {default as ModalAbout} from './components/modals/ModalAbout.vue';

From 382458b255b3dbb73021538ac0b4bccd19738662 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yusuf=20=C3=96zdemir?= <yusuf@ozdemir.be>
Date: Sun, 28 Apr 2024 23:57:17 +0300
Subject: [PATCH 02/52] Update useTheme.js

---
 src/composables/useTheme.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/composables/useTheme.js b/src/composables/useTheme.js
index 8c277dcd..68add611 100644
--- a/src/composables/useTheme.js
+++ b/src/composables/useTheme.js
@@ -36,7 +36,7 @@ export default function(storage, propTheme) {
     value: theme,
 
     /**
-     * @type {import('vue').Ref<String>}
+     * @type {import('vue').Ref<Theme>}
      */
     actualValue: actualTheme,
 

From 1a09d4eafdea02dbd9e07b313a61dae0be5642c0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yusuf=20=C3=96zdemir?= <yusuf@ozdemir.be>
Date: Mon, 29 Apr 2024 00:57:36 +0300
Subject: [PATCH 03/52] update dragselect

---
 package.json                | 2 +-
 src/components/Explorer.vue | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 135ae022..9abf6a95 100755
--- a/package.json
+++ b/package.json
@@ -44,7 +44,7 @@
     "@uppy/locales": "^3.5.0",
     "@uppy/xhr-upload": "^3.6.0",
     "cropperjs": "^1.5.12",
-    "dragselect": "^2.3.1",
+    "dragselect": "^3.0.5",
     "microtip": "^0.2.2",
     "mitt": "^3.0.0",
     "vanilla-lazyload": "^17.8.3",
diff --git a/src/components/Explorer.vue b/src/components/Explorer.vue
index 3b44df1d..88df7fff 100644
--- a/src/components/Explorer.vue
+++ b/src/components/Explorer.vue
@@ -309,7 +309,7 @@ const setDragSelect = () => {
     })
   }));
 
-  ds.value.subscribe('predragstart', ({event, isDragging}) => {
+  ds.value.subscribe('DS:start:pre', ({event, isDragging}) => {
     // apply custom drag event
     if (isDragging) {
       selectedCount.value = ds.value.getSelection().length
@@ -325,13 +325,13 @@ const setDragSelect = () => {
     }
   });
 
-  ds.value.subscribe('predragmove', ({isDragging}) => {
+  ds.value.subscribe('DS:update:pre', ({isDragging}) => {
     if (isDragging) {
       ds.value.break();
     }
   });
 
-  ds.value.subscribe("callback", (	{ items, event, isDragging}) => {
+  ds.value.subscribe("DS:end", (	{ items, event, isDragging}) => {
     app.emitter.emit('vf-nodes-selected', getSelectedItems());
     selectedCount.value = ds.value.getSelection().length;
   })

From a5926de307a0843dba9718a6429da006a3a9c265 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yusuf=20=C3=96zdemir?= <yusuf@ozdemir.be>
Date: Mon, 29 Apr 2024 01:57:38 +0300
Subject: [PATCH 04/52] update ds

---
 src/components/Explorer.vue      | 213 ++++++++++++++-----------------
 src/components/Statusbar.vue     |   1 -
 src/composables/useDragSelect.js |  20 +++
 3 files changed, 119 insertions(+), 115 deletions(-)
 create mode 100644 src/composables/useDragSelect.js

diff --git a/src/components/Explorer.vue b/src/components/Explorer.vue
index 88df7fff..04ef501e 100644
--- a/src/components/Explorer.vue
+++ b/src/components/Explorer.vue
@@ -28,88 +28,89 @@
       </div>
     </div>
 
-    <div
-        @touchstart="handleTouchStart"
-        @contextmenu.self.prevent="app.emitter.emit('vf-contextmenu-show',{event: $event, area: selectorArea, items: getSelectedItems()})"
-        :class="app.fullScreen ? '' : 'resize-y'"
-        class="h-full w-full text-xs vf-selector-area vf-scrollbar min-h-[150px] overflow-auto p-1 z-0"
-        ref="selectorArea">
-
+    <div class="h-full min-h-[150px] overflow-auto z-0"   :class="app.fullScreen ? '' : 'resize-y'">
       <div
-           v-if="searchQuery.length"
-           @dblclick="openItem(item)"
-           @touchstart="delayedOpenItem($event)"
-           @touchend="clearTimeOut()"
-           @contextmenu.prevent="app.emitter.emit('vf-contextmenu-show', {event: $event, area: selectorArea, items: getSelectedItems(), target: item })"
-           :class="'vf-item-' + randId"
-           class="grid grid-cols-1 border hover:bg-neutral-50 dark:hover:bg-gray-700 border-transparent my-0.5 w-full select-none"
-           v-for="(item, index) in getItems()" :data-type="item.type" :data-item="JSON.stringify(item)" :data-index="index">
-          <div class="grid grid-cols-12 items-center">
-            <div class="flex col-span-7 items-center">
-              <svg v-if="item.type === 'dir'" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-neutral-500 fill-sky-500 stroke-sky-500 dark:fill-slate-500 dark:stroke-slate-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
-              </svg>
-              <svg v-else xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-neutral-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
-              </svg>
-              <span class="overflow-ellipsis overflow-hidden whitespace-nowrap">{{item.basename }}</span>
+          @touchstart="handleTouchStart"
+          @contextmenu.self.prevent="app.emitter.emit('vf-contextmenu-show',{event: $event, area: selectorArea, items: getSelectedItems()})"
+          class="h-full text-xs vf-selector-area overflow-auto vf-scrollbar p-1 z-0"
+          ref="selectorArea">
+
+        <div
+             v-if="searchQuery.length"
+             @dblclick="openItem(item)"
+             @touchstart="delayedOpenItem($event)"
+             @touchend="clearTimeOut()"
+             @contextmenu.prevent="app.emitter.emit('vf-contextmenu-show', {event: $event, area: selectorArea, items: getSelectedItems(), target: item })"
+             :class="'vf-item-' + randId"
+             class="grid grid-cols-1 border hover:bg-neutral-50 dark:hover:bg-gray-700 border-transparent my-0.5 w-full select-none"
+             v-for="(item, index) in getItems()" :data-type="item.type" :data-item="JSON.stringify(item)" :data-index="index">
+            <div class="grid grid-cols-12 items-center">
+              <div class="flex col-span-7 items-center">
+                <svg v-if="item.type === 'dir'" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-neutral-500 fill-sky-500 stroke-sky-500 dark:fill-slate-500 dark:stroke-slate-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
+                </svg>
+                <svg v-else xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-neutral-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
+                </svg>
+                <span class="overflow-ellipsis overflow-hidden whitespace-nowrap">{{item.basename }}</span>
+              </div>
+              <div class="col-span-5 overflow-ellipsis overflow-hidden whitespace-nowrap">{{ item.path }}</div>
             </div>
-            <div class="col-span-5 overflow-ellipsis overflow-hidden whitespace-nowrap">{{ item.path }}</div>
-          </div>
-      </div>
+        </div>
 
-      <div draggable="true"
-           v-if="app.view==='list' && !searchQuery.length"
-           @dblclick="openItem(item)"
-           @touchstart="delayedOpenItem($event)"
-           @touchend="clearTimeOut()"
-           @contextmenu.prevent="app.emitter.emit('vf-contextmenu-show', {event: $event, area: selectorArea, items: getSelectedItems(), target: item })"
-           @dragstart="handleDragStart($event,item)"
-           @dragover="handleDragOver($event,item)"
-           @drop="handleDropZone($event,item)"
-           :class="'vf-item-' + randId"
-           class="grid grid-cols-1 border hover:bg-neutral-50 dark:hover:bg-gray-700 border-transparent my-0.5 w-full select-none"
-           v-for="(item, index) in getItems()" :data-type="item.type" :data-item="JSON.stringify(item)" :data-index="index">
-          <div class="grid grid-cols-12 items-center">
-            <div class="flex col-span-7 items-center">
-              <svg v-if="item.type === 'dir'" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-neutral-500 fill-sky-500 stroke-sky-500 dark:fill-slate-500 dark:stroke-slate-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
-              </svg>
-              <svg v-else xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-neutral-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
-              </svg>
-              <span class="overflow-ellipsis overflow-hidden whitespace-nowrap">{{item.basename }}</span>
+        <div draggable="true"
+             v-if="app.view==='list' && !searchQuery.length"
+             @dblclick="openItem(item)"
+             @touchstart="delayedOpenItem($event)"
+             @touchend="clearTimeOut()"
+             @contextmenu.prevent="app.emitter.emit('vf-contextmenu-show', {event: $event, area: selectorArea, items: getSelectedItems(), target: item })"
+             @dragstart="handleDragStart($event,item)"
+             @dragover="handleDragOver($event,item)"
+             @drop="handleDropZone($event,item)"
+             :class="'vf-item-' + randId"
+             class="grid grid-cols-1 border hover:bg-neutral-50 dark:hover:bg-gray-700 border-transparent my-0.5 w-full select-none"
+             v-for="(item, index) in getItems()" :data-type="item.type" :data-item="JSON.stringify(item)" :data-index="index">
+            <div class="grid grid-cols-12 items-center">
+              <div class="flex col-span-7 items-center">
+                <svg v-if="item.type === 'dir'" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-neutral-500 fill-sky-500 stroke-sky-500 dark:fill-slate-500 dark:stroke-slate-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
+                </svg>
+                <svg v-else xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-neutral-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
+                </svg>
+                <span class="overflow-ellipsis overflow-hidden whitespace-nowrap">{{item.basename }}</span>
+              </div>
+              <div class="col-span-2 text-center">{{ item.file_size ? app.filesize(item.file_size) : '' }}</div>
+              <div class="col-span-3 overflow-ellipsis overflow-hidden whitespace-nowrap">{{ datetimestring(item.last_modified) }}</div>
             </div>
-            <div class="col-span-2 text-center">{{ item.file_size ? app.filesize(item.file_size) : '' }}</div>
-            <div class="col-span-3 overflow-ellipsis overflow-hidden whitespace-nowrap">{{ datetimestring(item.last_modified) }}</div>
-          </div>
-      </div>
+        </div>
 
-      <div draggable="true"
-           v-if="app.view==='grid' && !searchQuery.length"
-           @dblclick="openItem(item)"
-           @touchstart="delayedOpenItem($event)"
-           @touchend="clearTimeOut()"
-           @contextmenu.prevent="app.emitter.emit('vf-contextmenu-show', {event: $event, area: selectorArea, items: getSelectedItems(), target: item })"
-           @dragstart="handleDragStart($event,item)"
-           @dragover="handleDragOver($event,item)"
-           @drop="handleDropZone($event,item)"
-           :class="'vf-item-' + randId"
-           class="border border-transparent hover:bg-neutral-50 m-1 dark:hover:bg-gray-700 inline-flex w-[5.5rem] h-20 md:w-24 text-center justify-center select-none"
-           v-for="(item, index) in getItems(false)" :data-type="item.type" :data-item="JSON.stringify(item)" :data-index="index">
-          <div>
-            <div class="relative">
-              <svg v-if="item.type === 'dir'" xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 md:h-12 md:w-12 m-auto fill-sky-500 stroke-sky-500 dark:fill-slate-500 dark:stroke-slate-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
-              </svg>
-              <img class="lazy h-10 md:h-12 m-auto" v-else-if="(item.mime_type ?? '').startsWith('image')" :data-src="app.requester.getPreviewUrl(app.adapter, item)" :alt="item.basename" :key="item.path">
-              <svg v-else xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 md:h-12 md:w-12 m-auto text-neutral-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
-              </svg>
-              <div class="absolute hidden md:block top-1/2 w-full text-center text-neutral-500" v-if="!(item.mime_type ?? '').startsWith('image') && item.type != 'dir'">{{ ext(item.extension) }}</div>
+        <div draggable="true"
+             v-if="app.view==='grid' && !searchQuery.length"
+             @dblclick="openItem(item)"
+             @touchstart="delayedOpenItem($event)"
+             @touchend="clearTimeOut()"
+             @contextmenu.prevent="app.emitter.emit('vf-contextmenu-show', {event: $event, area: selectorArea, items: getSelectedItems(), target: item })"
+             @dragstart="handleDragStart($event,item)"
+             @dragover="handleDragOver($event,item)"
+             @drop="handleDropZone($event,item)"
+             :class="'vf-item-' + randId"
+             class="border border-transparent hover:bg-neutral-50 m-1 dark:hover:bg-gray-700 inline-flex w-[5.5rem] h-20 md:w-24 text-center justify-center select-none"
+             v-for="(item, index) in getItems(false)" :data-type="item.type" :data-item="JSON.stringify(item)" :data-index="index">
+            <div>
+              <div class="relative">
+                <svg v-if="item.type === 'dir'" xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 md:h-12 md:w-12 m-auto fill-sky-500 stroke-sky-500 dark:fill-slate-500 dark:stroke-slate-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
+                </svg>
+                <img class="lazy h-10 md:h-12 m-auto" v-else-if="(item.mime_type ?? '').startsWith('image')" :data-src="app.requester.getPreviewUrl(app.adapter, item)" :alt="item.basename" :key="item.path">
+                <svg v-else xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 md:h-12 md:w-12 m-auto text-neutral-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
+                </svg>
+                <div class="absolute hidden md:block top-1/2 w-full text-center text-neutral-500" v-if="!(item.mime_type ?? '').startsWith('image') && item.type != 'dir'">{{ ext(item.extension) }}</div>
+              </div>
+              <span class="break-all">{{ title_shorten(item.basename) }}</span>
             </div>
-            <span class="break-all">{{ title_shorten(item.basename) }}</span>
-          </div>
+        </div>
       </div>
 
     </div>
@@ -119,7 +120,6 @@
 
 <script setup>
 import { inject, nextTick, onBeforeUnmount, onMounted, onUpdated, reactive, ref, watch } from 'vue';
-import DragSelect from 'dragselect';
 import datetimestring from '../utils/datetimestring.js';
 import Toast from './Toast.vue';
 import LazyLoad from 'vanilla-lazyload';
@@ -127,6 +127,7 @@ import title_shorten from "../utils/title_shorten.js";
 import ModalPreview from "./modals/ModalPreview.vue";
 import ModalMove from "./modals/ModalMove.vue";
 import SortIcon from "./SortIcon.vue";
+import useDragSelect from "../composables/useDragSelect.js";
 
 const app = inject('ServiceContainer');
 const {t} = app.i18n;
@@ -135,9 +136,10 @@ const ext = (item) => item?.substring(0, 3)
 const selectorArea = ref(null);
 const dragImage = ref(null);
 const selectedCount = ref(0)
-const ds = ref(null);
+// const ds = ref(null);
 const randId = Math.floor(Math.random() * 2 ** 32);
 const searchQuery = ref('');
+const ds = useDragSelect();
 
 /** @type {import('vanilla-lazyload').ILazyLoadInstance} */
 let vfLazyLoad
@@ -183,11 +185,11 @@ const dragAndDrop = ref(true);
 const handleTouchStart = (event) => {
   if (event.touches.length > 1) {
     if (!dragAndDrop.value) {
-      ds.value.start();
+      ds.obj.value.start();
       app.emitter.emit('vf-toast-push', {label: t('Drag&Drop: on')});
       app.emitter.emit('vf-explorer-update');
     } else {
-      ds.value.stop();
+      ds.obj.value.stop();
       app.emitter.emit('vf-toast-push', {label: t('Drag&Drop: off')});
     }
     dragAndDrop.value = !dragAndDrop.value;
@@ -258,7 +260,7 @@ const sortBy = (column) => {
   }
 };
 
-const getSelectedItems = () => ds.value.getSelection().map((el) => JSON.parse(el.dataset.item))
+const getSelectedItems = () => ds.obj.value.getSelection().map((el) => JSON.parse(el.dataset.item))
 
 const handleDragStart = (e, item) => {
   if (e.altKey || e.ctrlKey || e.metaKey) {
@@ -286,7 +288,7 @@ const handleDropZone = (e, item) => {
 
 const handleDragOver = (e, item) => {
   e.preventDefault();
-  if (!item || item.type !== 'dir' || ds.value.getSelection().find(el => el == e.currentTarget)) {
+  if (!item || item.type !== 'dir' || ds.obj.value.getSelection().find(el => el == e.currentTarget)) {
     e.dataTransfer.dropEffect = 'none';
     e.dataTransfer.effectAllowed = 'none';
   } else {
@@ -295,63 +297,46 @@ const handleDragOver = (e, item) => {
 };
 
 const setDragSelect = () => {
-  ds.value = new DragSelect({
-    area: selectorArea.value,
-    keyboardDrag: false,
-    selectedClass: 'vf-explorer-selected',
-    selectorClass: 'vf-explorer-selector',
-  });
-
   app.emitter.on('vf-explorer-update', () => nextTick(() => {
-    ds.value.clearSelection();
-    ds.value.setSettings({
+    ds.obj.value.clearSelection();
+    ds.obj.value.setSettings({
       selectables: document.getElementsByClassName('vf-item-' + randId ),
     })
   }));
 
-  ds.value.subscribe('DS:start:pre', ({event, isDragging}) => {
-    // apply custom drag event
+  ds.obj.value.subscribe('DS:start:pre', ({ items, isDragging, isDraggingKeyboard }) => {
     if (isDragging) {
-      selectedCount.value = ds.value.getSelection().length
-      ds.value.break();
-    } else {
-      // if resizing selectable area at the corner dont start selection.
-      const offsetX = event.target.offsetWidth - event.offsetX;
-      const offsetY = event.target.offsetHeight - event.offsetY;
-      if (offsetX < 15 && offsetY < 15) {
-        ds.value.clearSelection();
-        ds.value.break();
-      }
+      selectedCount.value = ds.obj.value.getSelection().length
+      ds.obj.value.break();
     }
   });
 
-  ds.value.subscribe('DS:update:pre', ({isDragging}) => {
-    if (isDragging) {
-      ds.value.break();
+  ds.obj.value.subscribe('DS:update:pre', ({ isDragging, isDraggingKeyboard }) => {
+    if(isDragging || isDraggingKeyboard) {
+      ds.obj.value.break();
     }
   });
 
-  ds.value.subscribe("DS:end", (	{ items, event, isDragging}) => {
+  ds.obj.value.subscribe("DS:end", (	{ items, event, isDragging}) => {
     app.emitter.emit('vf-nodes-selected', getSelectedItems());
-    selectedCount.value = ds.value.getSelection().length;
+    selectedCount.value = ds.obj.value.getSelection().length;
   })
 };
 
 onMounted(() => {
   vfLazyLoad = new LazyLoad(selectorArea.value);
+  ds.init(selectorArea.value)
   setDragSelect();
+
+  watch(() => app.view, () => app.emitter.emit('vf-explorer-update'));
 });
 
 onUpdated(() => {
-  ds.value.Area.reset();
-  ds.value.SelectorArea.updatePos();
+  ds.obj.value.Area.reset();
+  ds.obj.value.SelectorArea.updatePos();
   vfLazyLoad.update();
 });
 
-onMounted(() => {
-  watch(() => app.view, () => app.emitter.emit('vf-explorer-update'));
-});
-
 onBeforeUnmount(() => {
   vfLazyLoad.destroy();
 });
diff --git a/src/components/Statusbar.vue b/src/components/Statusbar.vue
index e5fb06b2..a52ae8a2 100644
--- a/src/components/Statusbar.vue
+++ b/src/components/Statusbar.vue
@@ -51,7 +51,6 @@ const handleStorageSelect = () => {
 
 app.emitter.on('vf-nodes-selected', (items) => {
   selectedItemCount.value = items.length;
-
 })
 
 const searchQuery = ref('');
diff --git a/src/composables/useDragSelect.js b/src/composables/useDragSelect.js
new file mode 100644
index 00000000..4e933dce
--- /dev/null
+++ b/src/composables/useDragSelect.js
@@ -0,0 +1,20 @@
+import {ref, shallowRef} from "vue";
+import DragSelect from 'dragselect';
+
+export default function () {
+    const obj = shallowRef();
+
+    const init = (selectArea) => {
+        obj.value = new DragSelect({
+            area: selectArea,
+            keyboardDrag: false,
+            selectedClass: 'vf-explorer-selected',
+            selectorClass: 'vf-explorer-selector',
+        });
+    }
+
+    return {
+        obj,
+        init
+    }
+}

From 1a7ff977818f07cda2ec79551c38a580391e207b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yusuf=20=C3=96zdemir?= <yusuf@ozdemir.be>
Date: Mon, 29 Apr 2024 04:26:30 +0300
Subject: [PATCH 05/52] update ds

---
 src/ServiceContainer.js          |   3 +
 src/components/ContextMenu.vue   |   4 +-
 src/components/Explorer.vue      | 138 +++++++++++++++----------------
 src/components/Statusbar.vue     |   8 +-
 src/components/Toolbar.vue       |  30 +++----
 src/composables/useDragSelect.js |  31 ++++++-
 6 files changed, 112 insertions(+), 102 deletions(-)

diff --git a/src/ServiceContainer.js b/src/ServiceContainer.js
index 9cf2c771..a0908622 100644
--- a/src/ServiceContainer.js
+++ b/src/ServiceContainer.js
@@ -8,6 +8,7 @@ import {version} from './../package.json';
 import { format as filesizeDefault, metricFormat as filesizeMetric } from './utils/filesize.js'
 import useTheme from './composables/useTheme.js';
 import useModal from "./composables/useModal.js";
+import useDragSelect from "./composables/useDragSelect.js";
 
 export default (props, options) => {
     const storage = useStorage(props.id);
@@ -60,6 +61,8 @@ export default (props, options) => {
         i18n : i18n,
         // modal state
         modal: useModal(),
+        // dragSelect state
+        dragSelect: computed(() => useDragSelect(emitter)),
         // main storage adapter
         adapter: storage.getStore('adapter'),
         // main storage adapter
diff --git a/src/components/ContextMenu.vue b/src/components/ContextMenu.vue
index 5fd7ed8a..8c062faa 100644
--- a/src/components/ContextMenu.vue
+++ b/src/components/ContextMenu.vue
@@ -148,7 +148,7 @@ app.emitter.on('vf-contextmenu-show', ({event, area, items,  target = null}) =>
     app.emitter.emit('vf-context-selected', items);
     // console.log(items.length + ' selected (more than 1 item.)');
   } else {
-    if (target.type == 'dir') {
+    if (target.type === 'dir') {
       context.items.push(menuItems.open);
     } else {
       context.items.push(menuItems.preview);
@@ -156,7 +156,7 @@ app.emitter.on('vf-contextmenu-show', ({event, area, items,  target = null}) =>
     }
     context.items.push(menuItems.rename);
 
-    if (target.mime_type == 'application/zip') {
+    if (target.mime_type === 'application/zip') {
       context.items.push(menuItems.unarchive);
     } else {
       context.items.push(menuItems.archive);
diff --git a/src/components/Explorer.vue b/src/components/Explorer.vue
index 04ef501e..8e672a7e 100644
--- a/src/components/Explorer.vue
+++ b/src/components/Explorer.vue
@@ -24,14 +24,14 @@
         <svg xmlns="http://www.w3.org/2000/svg" class="absolute h-6 w-6 md:h-12 md:w-12 m-auto stroke-neutral-500 fill-white dark:fill-gray-700 dark:stroke-gray-600 z-10" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
           <path stroke-linecap="round" stroke-linejoin="round" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
         </svg>
-        <div class="text-neutral-700 dark:text-neutral-300 p-1 absolute text-center top-4 right-[-2rem] md:top-5 md:right-[-2.4rem] z-20 text-xs">{{ selectedCount }}</div>
+        <div class="text-neutral-700 dark:text-neutral-300 p-1 absolute text-center top-4 right-[-2rem] md:top-5 md:right-[-2.4rem] z-20 text-xs">{{ ds.getCount() }}</div>
       </div>
     </div>
 
     <div class="h-full min-h-[150px] overflow-auto z-0"   :class="app.fullScreen ? '' : 'resize-y'">
       <div
           @touchstart="handleTouchStart"
-          @contextmenu.self.prevent="app.emitter.emit('vf-contextmenu-show',{event: $event, area: selectorArea, items: getSelectedItems()})"
+          @contextmenu.self.prevent="app.emitter.emit('vf-contextmenu-show',{event: $event, area: selectorArea, items: ds.getSelected()})"
           class="h-full text-xs vf-selector-area overflow-auto vf-scrollbar p-1 z-0"
           ref="selectorArea">
 
@@ -40,7 +40,7 @@
              @dblclick="openItem(item)"
              @touchstart="delayedOpenItem($event)"
              @touchend="clearTimeOut()"
-             @contextmenu.prevent="app.emitter.emit('vf-contextmenu-show', {event: $event, area: selectorArea, items: getSelectedItems(), target: item })"
+             @contextmenu.prevent="app.emitter.emit('vf-contextmenu-show', {event: $event, area: selectorArea, items: ds.getSelected(), target: item })"
              :class="'vf-item-' + randId"
              class="grid grid-cols-1 border hover:bg-neutral-50 dark:hover:bg-gray-700 border-transparent my-0.5 w-full select-none"
              v-for="(item, index) in getItems()" :data-type="item.type" :data-item="JSON.stringify(item)" :data-index="index">
@@ -63,10 +63,8 @@
              @dblclick="openItem(item)"
              @touchstart="delayedOpenItem($event)"
              @touchend="clearTimeOut()"
-             @contextmenu.prevent="app.emitter.emit('vf-contextmenu-show', {event: $event, area: selectorArea, items: getSelectedItems(), target: item })"
-             @dragstart="handleDragStart($event,item)"
-             @dragover="handleDragOver($event,item)"
-             @drop="handleDropZone($event,item)"
+             @contextmenu.prevent="app.emitter.emit('vf-contextmenu-show', {event: $event, area: selectorArea, items: ds.getSelected(), target: item })"
+             v-draggable="item"
              :class="'vf-item-' + randId"
              class="grid grid-cols-1 border hover:bg-neutral-50 dark:hover:bg-gray-700 border-transparent my-0.5 w-full select-none"
              v-for="(item, index) in getItems()" :data-type="item.type" :data-item="JSON.stringify(item)" :data-index="index">
@@ -90,10 +88,8 @@
              @dblclick="openItem(item)"
              @touchstart="delayedOpenItem($event)"
              @touchend="clearTimeOut()"
-             @contextmenu.prevent="app.emitter.emit('vf-contextmenu-show', {event: $event, area: selectorArea, items: getSelectedItems(), target: item })"
-             @dragstart="handleDragStart($event,item)"
-             @dragover="handleDragOver($event,item)"
-             @drop="handleDropZone($event,item)"
+             @contextmenu.prevent="app.emitter.emit('vf-contextmenu-show', {event: $event, area: selectorArea, items: ds.getSelected(), target: item })"
+             v-draggable="item"
              :class="'vf-item-' + randId"
              class="border border-transparent hover:bg-neutral-50 m-1 dark:hover:bg-gray-700 inline-flex w-[5.5rem] h-20 md:w-24 text-center justify-center select-none"
              v-for="(item, index) in getItems(false)" :data-type="item.type" :data-item="JSON.stringify(item)" :data-index="index">
@@ -127,7 +123,6 @@ import title_shorten from "../utils/title_shorten.js";
 import ModalPreview from "./modals/ModalPreview.vue";
 import ModalMove from "./modals/ModalMove.vue";
 import SortIcon from "./SortIcon.vue";
-import useDragSelect from "../composables/useDragSelect.js";
 
 const app = inject('ServiceContainer');
 const {t} = app.i18n;
@@ -135,11 +130,11 @@ const {t} = app.i18n;
 const ext = (item) => item?.substring(0, 3)
 const selectorArea = ref(null);
 const dragImage = ref(null);
-const selectedCount = ref(0)
-// const ds = ref(null);
+
+
 const randId = Math.floor(Math.random() * 2 ** 32);
 const searchQuery = ref('');
-const ds = useDragSelect();
+const ds = app.dragSelect;
 
 /** @type {import('vanilla-lazyload').ILazyLoadInstance} */
 let vfLazyLoad
@@ -148,6 +143,59 @@ app.emitter.on('vf-fullscreen-toggle', () => {
   selectorArea.value.style.height = null;
 });
 
+const handleDragStart = (e, item) => {
+  if (e.altKey || e.ctrlKey || e.metaKey) {
+    e.preventDefault();
+    return false;
+  }
+
+  e.dataTransfer.setDragImage(dragImage.value, 0, 15);
+  e.dataTransfer.effectAllowed = 'all';
+  e.dataTransfer.dropEffect = 'copy';
+  e.dataTransfer.setData('items', JSON.stringify(ds.getSelected()))
+};
+
+const handleDropZone = (e, item) => {
+  e.preventDefault();
+  let draggedItems = JSON.parse(e.dataTransfer.getData('items'));
+
+  if (draggedItems.find(item => item.storage !== app.adapter)) {
+    alert('Moving items between different storages is not supported yet.');
+    return;
+  }
+
+  app.modal.open(ModalMove, {items: {from: draggedItems, to: item}})
+};
+
+const handleDragOver = (e, item) => {
+  e.preventDefault();
+  if (!item || item.type !== 'dir' || ds.obj.value.getSelection().find(el => el === e.currentTarget)) {
+    e.dataTransfer.dropEffect = 'none';
+    e.dataTransfer.effectAllowed = 'none';
+  } else {
+    e.dataTransfer.dropEffect = 'copy';
+  }
+};
+
+ const vDraggable = {
+   mounted(el, binding, vnode, prevVnode) {
+    el.addEventListener('dragstart', (event) => {
+      handleDragStart(event, binding.value)
+    });
+    el.addEventListener('dragover', (event) => {
+      handleDragOver(event, binding.value)
+    });
+    el.addEventListener('drop', (event) => {
+      handleDropZone(event, binding.value)
+    });
+   },
+  beforeUnmount(el, binding, vnode, prevVnode) {
+    el.removeEventListener('dragstart', handleDragStart);
+    el.removeEventListener('dragover', handleDragOver);
+    el.removeEventListener('drop', handleDropZone);
+  }
+}
+
 app.emitter.on('vf-search-query', ({newQuery}) => {
   searchQuery.value = newQuery;
 
@@ -260,43 +308,9 @@ const sortBy = (column) => {
   }
 };
 
-const getSelectedItems = () => ds.obj.value.getSelection().map((el) => JSON.parse(el.dataset.item))
-
-const handleDragStart = (e, item) => {
-  if (e.altKey || e.ctrlKey || e.metaKey) {
-    e.preventDefault();
-    return false;
-  }
-
-  e.dataTransfer.setDragImage(dragImage.value, 0, 15);
-  e.dataTransfer.effectAllowed = 'all';
-  e.dataTransfer.dropEffect = 'copy';
-  e.dataTransfer.setData('items', JSON.stringify(getSelectedItems()))
-};
-
-const handleDropZone = (e, item) => {
-  e.preventDefault();
-  let draggedItems = JSON.parse(e.dataTransfer.getData('items'));
-
-  if (draggedItems.find(item => item.storage !== app.adapter)) {
-    alert('Moving items between different storages is not supported yet.');
-    return;
-  }
-
-  app.modal.open(ModalMove, {items: {from: draggedItems, to: item}})
-};
-
-const handleDragOver = (e, item) => {
-  e.preventDefault();
-  if (!item || item.type !== 'dir' || ds.obj.value.getSelection().find(el => el == e.currentTarget)) {
-    e.dataTransfer.dropEffect = 'none';
-    e.dataTransfer.effectAllowed = 'none';
-  } else {
-    e.dataTransfer.dropEffect = 'copy';
-  }
-};
+onMounted(() => {
+  vfLazyLoad = new LazyLoad(selectorArea.value);
 
-const setDragSelect = () => {
   app.emitter.on('vf-explorer-update', () => nextTick(() => {
     ds.obj.value.clearSelection();
     ds.obj.value.setSettings({
@@ -304,29 +318,7 @@ const setDragSelect = () => {
     })
   }));
 
-  ds.obj.value.subscribe('DS:start:pre', ({ items, isDragging, isDraggingKeyboard }) => {
-    if (isDragging) {
-      selectedCount.value = ds.obj.value.getSelection().length
-      ds.obj.value.break();
-    }
-  });
-
-  ds.obj.value.subscribe('DS:update:pre', ({ isDragging, isDraggingKeyboard }) => {
-    if(isDragging || isDraggingKeyboard) {
-      ds.obj.value.break();
-    }
-  });
-
-  ds.obj.value.subscribe("DS:end", (	{ items, event, isDragging}) => {
-    app.emitter.emit('vf-nodes-selected', getSelectedItems());
-    selectedCount.value = ds.obj.value.getSelection().length;
-  })
-};
-
-onMounted(() => {
-  vfLazyLoad = new LazyLoad(selectorArea.value);
   ds.init(selectorArea.value)
-  setDragSelect();
 
   watch(() => app.view, () => app.emitter.emit('vf-explorer-update'));
 });
diff --git a/src/components/Statusbar.vue b/src/components/Statusbar.vue
index a52ae8a2..ae8c9fd5 100644
--- a/src/components/Statusbar.vue
+++ b/src/components/Statusbar.vue
@@ -14,7 +14,7 @@
 
      <div class="ml-3">
        <span v-if="searchQuery.length">{{ app.data.files.length }} items found. </span>
-       <span class="ml-1">{{ selectedItemCount > 0 ? t('%s item(s) selected.', selectedItemCount) : '' }}</span>
+       <span class="ml-1">{{ app.dragSelect.getCount() > 0 ? t('%s item(s) selected.', app.dragSelect.getCount()) : '' }}</span>
      </div>
     </div>
     <div class="flex leading-5 items-center justify-end">
@@ -41,18 +41,12 @@ const app = inject('ServiceContainer');
 const {t} = app.i18n;
 const {setStore} = app.storage;
 
-const selectedItemCount = ref(0);
-
 const handleStorageSelect = () => {
   app.emitter.emit('vf-search-exit');
   app.emitter.emit('vf-fetch', {params:{q: 'index', adapter: app.adapter}});
   setStore('adapter', app.adapter)
 };
 
-app.emitter.on('vf-nodes-selected', (items) => {
-  selectedItemCount.value = items.length;
-})
-
 const searchQuery = ref('');
 
 app.emitter.on('vf-search-query', ({newQuery}) => {
diff --git a/src/components/Toolbar.vue b/src/components/Toolbar.vue
index e9edb6a1..7c734494 100644
--- a/src/components/Toolbar.vue
+++ b/src/components/Toolbar.vue
@@ -4,7 +4,7 @@
         <div class="mx-1.5"
              :aria-label="t('New Folder')" data-microtip-position="bottom-right" role="tooltip"
              v-if="app.features.includes(FEATURES.NEW_FOLDER)"
-             @click="app.modal.open(ModalNewFolder, {items: selectedItems})">
+             @click="app.modal.open(ModalNewFolder, {items: ds.getSelected()})">
           <svg xmlns="http://www.w3.org/2000/svg"
                class="h-6 w-6 md:h-8 md:w-8 m-auto cursor-pointer stroke-gray-500 hover:stroke-cyan-700 dark:stroke-gray-400 dark:hover:stroke-gray-300" fill="none" viewBox="0 0 24 24" stroke="none" stroke-width="1.5">
               <path stroke-linecap="round" stroke-linejoin="round" d="M12 10.5v6m3-3H9m4.06-7.19l-2.12-2.12a1.5 1.5 0 00-1.061-.44H4.5A2.25 2.25 0 002.25 6v12a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9a2.25 2.25 0 00-2.25-2.25h-5.379a1.5 1.5 0 01-1.06-.44z" />
@@ -14,7 +14,7 @@
         <div class="mx-1.5"
              :aria-label="t('New File')" data-microtip-position="bottom" role="tooltip"
              v-if="app.features.includes(FEATURES.NEW_FILE)"
-             @click="app.modal.open(ModalNewFile, {items: selectedItems})">
+             @click="app.modal.open(ModalNewFile, {items: ds.getSelected()})">
           <svg xmlns="http://www.w3.org/2000/svg"
             class="h-6 w-6 md:h-8 md:w-8 m-auto cursor-pointer stroke-gray-500 hover:stroke-cyan-700 dark:stroke-gray-400 dark:hover:stroke-gray-300" fill="none" viewBox="0 0 24 24" stroke="none" stroke-width="1.5">
              <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m3.75 9v6m3-3H9m1.5-12H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
@@ -24,9 +24,9 @@
         <div class="mx-1.5"
              :aria-label="t('Rename')" data-microtip-position="bottom" role="tooltip"
              v-if="app.features.includes(FEATURES.RENAME)"
-             @click="(selectedItems.length != 1) || app.modal.open(ModalRename, {items: selectedItems})">
+             @click="(ds.getCount() !== 1) || app.modal.open(ModalRename, {items: ds.getSelected()})">
           <svg xmlns="http://www.w3.org/2000/svg"
-                :class="(selectedItems.length == 1) ? 'cursor-pointer stroke-gray-500 hover:stroke-cyan-700 dark:stroke-gray-400 dark:hover:stroke-gray-300' : 'stroke-gray-200  dark:stroke-gray-700'"
+                :class="(ds.getCount() === 1) ? 'cursor-pointer stroke-gray-500 hover:stroke-cyan-700 dark:stroke-gray-400 dark:hover:stroke-gray-300' : 'stroke-gray-200  dark:stroke-gray-700'"
                class="h-6 w-6 md:h-8 md:w-8 m-auto" fill="none" viewBox="0 0 24 24" stroke="none" stroke-width="1.5">
               <path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
           </svg>
@@ -35,9 +35,9 @@
         <div class="mx-1.5"
              :aria-label="t('Delete')" data-microtip-position="bottom" role="tooltip"
              v-if="app.features.includes(FEATURES.DELETE)"
-             @click="(!selectedItems.length) || app.modal.open(ModalDelete, {items: selectedItems})">
+             @click="(!ds.getCount()) || app.modal.open(ModalDelete, {items: ds.getSelected()})">
             <svg xmlns="http://www.w3.org/2000/svg"
-                 :class="(selectedItems.length) ? 'cursor-pointer stroke-gray-500 hover:stroke-cyan-700 dark:stroke-gray-400 dark:hover:stroke-gray-300' : 'stroke-gray-200  dark:stroke-gray-700'"
+                 :class="(ds.getCount()) ? 'cursor-pointer stroke-gray-500 hover:stroke-cyan-700 dark:stroke-gray-400 dark:hover:stroke-gray-300' : 'stroke-gray-200  dark:stroke-gray-700'"
                  class="h-6 w-6 md:h-8 md:w-8 m-auto" fill="none" viewBox="0 0 24 24" stroke="none" stroke-width="1.5">
               <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
             </svg>
@@ -46,26 +46,26 @@
         <div class="mx-1.5"
              :aria-label="t('Upload')" data-microtip-position="bottom" role="tooltip"
              v-if="app.features.includes(FEATURES.UPLOAD)"
-             @click="app.modal.open(ModalUpload, {items: selectedItems})">
+             @click="app.modal.open(ModalUpload, {items: ds.getSelected()})">
           <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 md:h-8 md:w-8 m-auto cursor-pointer stroke-gray-500 hover:stroke-cyan-700 dark:stroke-gray-400 dark:hover:stroke-gray-300" fill="none" viewBox="0 0 24 24" stroke="none" stroke-width="1.5">
               <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" />
           </svg>
         </div>
 
-        <div class="mx-1.5" v-if="app.features.includes(FEATURES.UNARCHIVE) && selectedItems.length == 1 && selectedItems[0].mime_type == 'application/zip'"
+        <div class="mx-1.5" v-if="app.features.includes(FEATURES.UNARCHIVE) && ds.getCount() === 1 && ds.getSelected()[0].mime_type === 'application/zip'"
              :aria-label="t('Unarchive')" data-microtip-position="bottom" role="tooltip"
-              @click="(!selectedItems.length) || app.modal.open(ModalUnarchive, {items: selectedItems})">
+              @click="(!ds.getCount()) || app.modal.open(ModalUnarchive, {items: ds.getSelected()})">
           <svg xmlns="http://www.w3.org/2000/svg"
-               :class="(selectedItems.length) ? 'cursor-pointer stroke-gray-500 hover:stroke-cyan-700 dark:stroke-gray-400 dark:hover:stroke-gray-300' : 'stroke-gray-200  dark:stroke-gray-700'"
+               :class="(ds.getCount()) ? 'cursor-pointer stroke-gray-500 hover:stroke-cyan-700 dark:stroke-gray-400 dark:hover:stroke-gray-300' : 'stroke-gray-200  dark:stroke-gray-700'"
                class="h-6 w-6 md:h-8 md:w-8 m-auto" fill="none" viewBox="0 0 24 24" stroke="none" stroke-width="1.5">
               <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5m6 4.125l2.25 2.25m0 0l2.25 2.25M12 13.875l2.25-2.25M12 13.875l-2.25 2.25M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z" />
           </svg>
         </div>
         <div class="mx-1.5" v-if="app.features.includes(FEATURES.ARCHIVE)"
              :aria-label="t('Archive')" data-microtip-position="bottom" role="tooltip"
-              @click="(!selectedItems.length) || app.modal.open(ModalArchive, {items: selectedItems})">
+              @click="(!ds.getCount()) || app.modal.open(ModalArchive, {items: ds.getSelected()})">
           <svg xmlns="http://www.w3.org/2000/svg"
-               :class="(selectedItems.length) ? 'cursor-pointer stroke-gray-500 hover:stroke-cyan-700 dark:stroke-gray-400 dark:hover:stroke-gray-300' : 'stroke-gray-200  dark:stroke-gray-700'"
+               :class="(ds.getCount()) ? 'cursor-pointer stroke-gray-500 hover:stroke-cyan-700 dark:stroke-gray-400 dark:hover:stroke-gray-300' : 'stroke-gray-200  dark:stroke-gray-700'"
                class="h-6 w-6 md:h-8 md:w-8 m-auto" fill="none" viewBox="0 0 24 24" stroke="none" stroke-width="1.5">
               <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z" />
           </svg>
@@ -122,7 +122,7 @@ const app = inject('ServiceContainer');
 const {setStore} = app.storage;
 const {t} = app.i18n;
 
-const selectedItems = ref([]);
+const ds = app.dragSelect;
 const searchQuery = ref('');
 
 app.emitter.on('vf-search-query', ({newQuery}) => {
@@ -135,10 +135,6 @@ const toggleFullScreen = () => {
   app.emitter.emit('vf-fullscreen-toggle');
 }
 
-app.emitter.on('vf-nodes-selected', (items) => {
-  selectedItems.value = items;
-})
-
 // View Management
 const toggleView = () => {
   app.view = app.view === 'list' ? 'grid' : 'list';
diff --git a/src/composables/useDragSelect.js b/src/composables/useDragSelect.js
index 4e933dce..f5c0618f 100644
--- a/src/composables/useDragSelect.js
+++ b/src/composables/useDragSelect.js
@@ -1,7 +1,7 @@
-import {ref, shallowRef} from "vue";
+import {computed, ref, shallowRef} from "vue";
 import DragSelect from 'dragselect';
 
-export default function () {
+export default function (emitter) {
     const obj = shallowRef();
 
     const init = (selectArea) => {
@@ -11,10 +11,35 @@ export default function () {
             selectedClass: 'vf-explorer-selected',
             selectorClass: 'vf-explorer-selector',
         });
+
+        obj.value.subscribe('DS:start:pre', ({items, isDragging, isDraggingKeyboard}) => {
+            if (isDragging) {
+                selectedItems.value = obj.value.getSelection().map((el) => JSON.parse(el.dataset.item));
+                obj.value.break();
+            }
+        });
+
+        obj.value.subscribe('DS:update:pre', ({isDragging, isDraggingKeyboard}) => {
+            if (isDragging || isDraggingKeyboard) {
+                obj.value.break();
+            }
+        });
+
+        obj.value.subscribe("DS:end", ({items, event, isDragging}) => {
+            selectedItems.value = obj.value.getSelection().map((el) => JSON.parse(el.dataset.item));
+            emitter.emit('vf-nodes-selected', selectedItems.value);
+        })
     }
+    const selectedItems = ref([]);
+
+    const getSelected = () => selectedItems.value;
+
+    const getCount = () => selectedItems.value.length;
 
     return {
         obj,
-        init
+        init,
+        getSelected,
+        getCount
     }
 }

From d15807fefc81eec875c9ec8017c9281bda959dfe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yusuf=20=C3=96zdemir?= <yusuf@ozdemir.be>
Date: Mon, 29 Apr 2024 20:50:06 +0300
Subject: [PATCH 06/52] add compactListView settings

---
 src/ServiceContainer.js              |  2 ++
 src/components/modals/ModalAbout.vue | 22 ++++++++++++++++++++++
 2 files changed, 24 insertions(+)

diff --git a/src/ServiceContainer.js b/src/ServiceContainer.js
index a0908622..9ded59cd 100644
--- a/src/ServiceContainer.js
+++ b/src/ServiceContainer.js
@@ -51,6 +51,8 @@ export default (props, options) => {
         selectButton: props.selectButton,
         // unit state - for example: GB or GiB
         metricUnits: metricUnits,
+        // show large icons in list view
+        compactListView: storage.getStore('compactListView', true),
         // human readable file sizes
         filesize: metricUnits ? filesizeMetric : filesizeDefault,
         // max file size
diff --git a/src/components/modals/ModalAbout.vue b/src/components/modals/ModalAbout.vue
index f6572f88..a52e47e5 100644
--- a/src/components/modals/ModalAbout.vue
+++ b/src/components/modals/ModalAbout.vue
@@ -36,6 +36,20 @@
                   </div>
                 </div>
 
+                <div class="flex relative gap-x-3">
+                  <div class="h-6 items-center">
+                    <input id="large_icons" name="large_icons" type="checkbox"
+                           v-model="app.compactListView"
+                           @click="handleCompactListView"
+                           class="h-4 w-4 rounded border-gray-300 text-indigo-600 dark:accent-slate-400 focus:ring-indigo-600">
+                  </div>
+                  <div class="flex-1 block text-sm">
+                    <label for="large_icons" class="flex w-full font-medium text-gray-900 dark:text-gray-400">
+                      {{ t('Compact list view') }} <action-message class="ms-3" on="vf-compact-view-saved">{{ t('Saved.') }}</action-message>
+                    </label>
+                  </div>
+                </div>
+
                 <div class="flex relative gap-x-3">
                   <div class="h-6 items-center">
                     <label for="theme" class="flex w-full font-medium text-gray-900 dark:text-gray-400 text-sm">
@@ -120,6 +134,14 @@ const handleMetricUnits = () => {
   app.emitter.emit('vf-metric-units-saved');
 }
 
+const handleCompactListView = () => {
+  app.compactListView = !app.compactListView;
+
+  setStore('compactListView', app.compactListView);
+  app.emitter.emit('vf-compact-view-saved');
+}
+
+
 const {i18n} = inject('VueFinderOptions');
 
 const languageList = {

From 10735e494de035c86b35dd1d53a50ddbe46a2972 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yusuf=20=C3=96zdemir?= <yusuf@ozdemir.be>
Date: Mon, 29 Apr 2024 20:50:40 +0300
Subject: [PATCH 07/52] add dragItem component

---
 src/components/DragItem.vue | 18 ++++++++++++++++++
 src/components/Explorer.vue |  9 ++-------
 2 files changed, 20 insertions(+), 7 deletions(-)
 create mode 100644 src/components/DragItem.vue

diff --git a/src/components/DragItem.vue b/src/components/DragItem.vue
new file mode 100644
index 00000000..80174c07
--- /dev/null
+++ b/src/components/DragItem.vue
@@ -0,0 +1,18 @@
+<template>
+  <div class="absolute -z-50 -top-96">
+    <svg xmlns="http://www.w3.org/2000/svg" class="absolute h-6 w-6 md:h-12 md:w-12 m-auto stroke-neutral-500 fill-white dark:fill-gray-700 dark:stroke-gray-600 z-10" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
+    </svg>
+    <div class="text-neutral-700 dark:text-neutral-300 p-1 absolute text-center top-4 right-[-2rem] md:top-5 md:right-[-2.4rem] z-20 text-xs">{{ props.count }}</div>
+  </div>
+</template>
+
+
+<script setup>
+const props = defineProps({
+  count: {
+    type: Number,
+    default: 0
+  }
+});
+</script>
diff --git a/src/components/Explorer.vue b/src/components/Explorer.vue
index 8e672a7e..e1525cbf 100644
--- a/src/components/Explorer.vue
+++ b/src/components/Explorer.vue
@@ -19,13 +19,8 @@
         </div>
     </div>
 
-    <div class="absolute">
-      <div ref="dragImage"  class="absolute -z-50 -top-96">
-        <svg xmlns="http://www.w3.org/2000/svg" class="absolute h-6 w-6 md:h-12 md:w-12 m-auto stroke-neutral-500 fill-white dark:fill-gray-700 dark:stroke-gray-600 z-10" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
-          <path stroke-linecap="round" stroke-linejoin="round" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
-        </svg>
-        <div class="text-neutral-700 dark:text-neutral-300 p-1 absolute text-center top-4 right-[-2rem] md:top-5 md:right-[-2.4rem] z-20 text-xs">{{ ds.getCount() }}</div>
-      </div>
+    <div class="relative">
+      <DragItem ref="dragImage" :count="ds.getCount()" />
     </div>
 
     <div class="h-full min-h-[150px] overflow-auto z-0"   :class="app.fullScreen ? '' : 'resize-y'">

From 3cd32d30cdd743c54927953a8e7bee67a891116c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yusuf=20=C3=96zdemir?= <yusuf@ozdemir.be>
Date: Mon, 29 Apr 2024 20:52:30 +0300
Subject: [PATCH 08/52] update modal max width

---
 src/components/modals/ModalLayout.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/modals/ModalLayout.vue b/src/components/modals/ModalLayout.vue
index b659eef6..ec6a69f4 100644
--- a/src/components/modals/ModalLayout.vue
+++ b/src/components/modals/ModalLayout.vue
@@ -5,7 +5,7 @@
 
     <div class="fixed z-10 inset-0 overflow-hidden">
       <div class="flex items-end sm:items-center justify-center min-h-full p-4 text-center sm:p-0" @mousedown.self="app.modal.close()">
-        <div class="relative bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8  sm:max-w-4xl md:max-w-2xl lg:max-w-3xl xl:max-w-5xl w-full">
+        <div class="relative bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8  sm:max-w-4xl md:max-w-2xl lg:max-w-3xl xl:max-w-3xl w-full">
           <div class="bg-white dark:bg-gray-800 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
 
             <slot />

From 0aee50d48340c8e7dd148946eb629e0a54e52298 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yusuf=20=C3=96zdemir?= <yusuf@ozdemir.be>
Date: Mon, 29 Apr 2024 20:52:41 +0300
Subject: [PATCH 09/52] add aspect ratio to video object

---
 src/components/previews/Video.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/previews/Video.vue b/src/components/previews/Video.vue
index 8b1e91d6..320964e1 100644
--- a/src/components/previews/Video.vue
+++ b/src/components/previews/Video.vue
@@ -3,7 +3,7 @@
     <h3 class="mb-2 text-lg leading-6 font-medium text-gray-900 dark:text-gray-400" id="modal-title"
          :aria-label="app.modal.data.item.path" data-microtip-position="bottom-right" role="tooltip">{{ app.modal.data.item.basename }}</h3>
   <div>
-    <video class="w-full" preload controls>
+    <video class="w-full aspect-video" preload controls>
       <source :src="getVideoUrl()" type="video/mp4">
       Your browser does not support the video tag.
     </video>

From 37a68cf30540a743b62c43d33cf6f05388348739 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yusuf=20=C3=96zdemir?= <yusuf@ozdemir.be>
Date: Mon, 29 Apr 2024 20:53:10 +0300
Subject: [PATCH 10/52] refactor Explorer component

---
 src/components/ContextMenu.vue    |  6 ++--
 src/components/Explorer.vue       | 49 +++++++++++--------------------
 src/components/icons/ItemIcon.vue | 33 +++++++++++++++++++++
 3 files changed, 53 insertions(+), 35 deletions(-)
 create mode 100644 src/components/icons/ItemIcon.vue

diff --git a/src/components/ContextMenu.vue b/src/components/ContextMenu.vue
index 8c062faa..62e441b6 100644
--- a/src/components/ContextMenu.vue
+++ b/src/components/ContextMenu.vue
@@ -1,14 +1,14 @@
 <template>
-  <ul class="z-30 absolute text-xs bg-neutral-50 dark:bg-gray-800 text-gray-700 dark:text-gray-200 border border-neutral-300 dark:border-gray-600 shadow rounded select-none" ref="contextmenu" v-if="context.active" :style="context.positions">
+  <ul class="z-30 absolute text-xs bg-neutral-50 dark:bg-gray-800 text-gray-700 dark:text-gray-200 border border-neutral-300 dark:border-gray-600 shadow rounded-sm select-none" ref="contextmenu" v-if="context.active" :style="context.positions">
     <li class="cursor-pointer hover:bg-neutral-200 dark:hover:bg-gray-700"
         v-for="(item) in filteredItems" :key="item.title">
         <template v-if="item.link">
-          <a class="block pl-2 pr-3 py-1 " target="_blank" :href="item.link" :download="item.link" @click="app.emitter.emit('vf-contextmenu-hide')">
+          <a class="block pl-2 pr-3 py-2 " target="_blank" :href="item.link" :download="item.link" @click="app.emitter.emit('vf-contextmenu-hide')">
             <span>{{ item.title() }}</span>
           </a>
         </template>
         <template v-else>
-          <div class="pl-2 pr-3 py-1" @click="run(item)">
+          <div class="pl-2 pr-3 py-1.5" @click="run(item)">
             <span>{{ item.title() }}</span>
           </div>
         </template>
diff --git a/src/components/Explorer.vue b/src/components/Explorer.vue
index e1525cbf..922e7271 100644
--- a/src/components/Explorer.vue
+++ b/src/components/Explorer.vue
@@ -2,20 +2,16 @@
   <div class="relative flex-auto flex flex-col overflow-hidden">
     <div v-if="app.view === 'list' || searchQuery.length" class="grid grid-cols-12 border-b border-neutral-300 dark:border-gray-700 text-xs select-none divide-x">
         <div @click="sortBy('basename')" class="col-span-7 vf-sort-button">
-          {{ t('Name') }}
-          <SortIcon :direction="sort.order" v-show="sort.active && sort.column === 'basename'" />
+          {{ t('Name') }} <SortIcon :direction="sort.order" v-show="sort.active && sort.column === 'basename'" />
         </div>
         <div v-if="!searchQuery.length" @click="sortBy('file_size')" class="justify-center col-span-2 vf-sort-button">
-          {{ t('Size') }}
-          <SortIcon :direction="sort.order"  v-show="sort.active && sort.column === 'file_size'" />
+          {{ t('Size') }} <SortIcon :direction="sort.order"  v-show="sort.active && sort.column === 'file_size'" />
         </div>
         <div v-if="!searchQuery.length" @click="sortBy('last_modified')" class="justify-center col-span-3 vf-sort-button">
-          {{ t('Date') }}
-          <SortIcon :direction="sort.order"  v-show="sort.active && sort.column === 'last_modified'" />
+          {{ t('Date') }} <SortIcon :direction="sort.order"  v-show="sort.active && sort.column === 'last_modified'" />
         </div>
         <div v-if="searchQuery.length" @click="sortBy('path')" class="justify-center col-span-5 vf-sort-button">
-          {{ t('Filepath') }}
-          <SortIcon :direction="sort.order"  v-show="sort.active && sort.column === 'path'" />
+          {{ t('Filepath') }} <SortIcon :direction="sort.order"  v-show="sort.active && sort.column === 'path'" />
         </div>
     </div>
 
@@ -41,36 +37,27 @@
              v-for="(item, index) in getItems()" :data-type="item.type" :data-item="JSON.stringify(item)" :data-index="index">
             <div class="grid grid-cols-12 items-center">
               <div class="flex col-span-7 items-center">
-                <svg v-if="item.type === 'dir'" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-neutral-500 fill-sky-500 stroke-sky-500 dark:fill-slate-500 dark:stroke-slate-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
-                </svg>
-                <svg v-else xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-neutral-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
-                </svg>
+                <ItemIcon :type="item.type" :small="app.compactListView" />
                 <span class="overflow-ellipsis overflow-hidden whitespace-nowrap">{{item.basename }}</span>
               </div>
               <div class="col-span-5 overflow-ellipsis overflow-hidden whitespace-nowrap">{{ item.path }}</div>
             </div>
         </div>
 
-        <div draggable="true"
+        <div
+            v-draggable="item"
+             draggable="true"
              v-if="app.view==='list' && !searchQuery.length"
              @dblclick="openItem(item)"
              @touchstart="delayedOpenItem($event)"
              @touchend="clearTimeOut()"
              @contextmenu.prevent="app.emitter.emit('vf-contextmenu-show', {event: $event, area: selectorArea, items: ds.getSelected(), target: item })"
-             v-draggable="item"
              :class="'vf-item-' + randId"
              class="grid grid-cols-1 border hover:bg-neutral-50 dark:hover:bg-gray-700 border-transparent my-0.5 w-full select-none"
              v-for="(item, index) in getItems()" :data-type="item.type" :data-item="JSON.stringify(item)" :data-index="index">
             <div class="grid grid-cols-12 items-center">
               <div class="flex col-span-7 items-center">
-                <svg v-if="item.type === 'dir'" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-neutral-500 fill-sky-500 stroke-sky-500 dark:fill-slate-500 dark:stroke-slate-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
-                </svg>
-                <svg v-else xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-neutral-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
-                </svg>
+                <ItemIcon :type="item.type" :small="app.compactListView"/>
                 <span class="overflow-ellipsis overflow-hidden whitespace-nowrap">{{item.basename }}</span>
               </div>
               <div class="col-span-2 text-center">{{ item.file_size ? app.filesize(item.file_size) : '' }}</div>
@@ -78,25 +65,21 @@
             </div>
         </div>
 
-        <div draggable="true"
+        <div
+             v-draggable="item"
+             draggable="true"
              v-if="app.view==='grid' && !searchQuery.length"
              @dblclick="openItem(item)"
              @touchstart="delayedOpenItem($event)"
              @touchend="clearTimeOut()"
              @contextmenu.prevent="app.emitter.emit('vf-contextmenu-show', {event: $event, area: selectorArea, items: ds.getSelected(), target: item })"
-             v-draggable="item"
              :class="'vf-item-' + randId"
              class="border border-transparent hover:bg-neutral-50 m-1 dark:hover:bg-gray-700 inline-flex w-[5.5rem] h-20 md:w-24 text-center justify-center select-none"
              v-for="(item, index) in getItems(false)" :data-type="item.type" :data-item="JSON.stringify(item)" :data-index="index">
             <div>
               <div class="relative">
-                <svg v-if="item.type === 'dir'" xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 md:h-12 md:w-12 m-auto fill-sky-500 stroke-sky-500 dark:fill-slate-500 dark:stroke-slate-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
-                </svg>
-                <img class="lazy h-10 md:h-12 m-auto" v-else-if="(item.mime_type ?? '').startsWith('image')" :data-src="app.requester.getPreviewUrl(app.adapter, item)" :alt="item.basename" :key="item.path">
-                <svg v-else xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 md:h-12 md:w-12 m-auto text-neutral-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
-                </svg>
+                <img class="lazy h-10 md:h-12 m-auto" v-if="(item.mime_type ?? '').startsWith('image')" :data-src="app.requester.getPreviewUrl(app.adapter, item)" :alt="item.basename" :key="item.path">
+                <ItemIcon :type="item.type" v-else />
                 <div class="absolute hidden md:block top-1/2 w-full text-center text-neutral-500" v-if="!(item.mime_type ?? '').startsWith('image') && item.type != 'dir'">{{ ext(item.extension) }}</div>
               </div>
               <span class="break-all">{{ title_shorten(item.basename) }}</span>
@@ -118,6 +101,8 @@ import title_shorten from "../utils/title_shorten.js";
 import ModalPreview from "./modals/ModalPreview.vue";
 import ModalMove from "./modals/ModalMove.vue";
 import SortIcon from "./SortIcon.vue";
+import DragItem from "./DragItem.vue";
+import ItemIcon from "./icons/ItemIcon.vue";
 
 const app = inject('ServiceContainer');
 const {t} = app.i18n;
@@ -144,7 +129,7 @@ const handleDragStart = (e, item) => {
     return false;
   }
 
-  e.dataTransfer.setDragImage(dragImage.value, 0, 15);
+  e.dataTransfer.setDragImage(dragImage.value.$el, 0, 15);
   e.dataTransfer.effectAllowed = 'all';
   e.dataTransfer.dropEffect = 'copy';
   e.dataTransfer.setData('items', JSON.stringify(ds.getSelected()))
diff --git a/src/components/icons/ItemIcon.vue b/src/components/icons/ItemIcon.vue
new file mode 100644
index 00000000..0fc17e51
--- /dev/null
+++ b/src/components/icons/ItemIcon.vue
@@ -0,0 +1,33 @@
+<template>
+  <span>
+    <svg v-if="type === 'dir'" xmlns="http://www.w3.org/2000/svg"
+         :class="{'h-5 w-5': small, 'h-10 w-10 md:h-12 md:w-12 m-auto': !small}"
+         class="text-neutral-500 fill-sky-500 stroke-sky-500 dark:fill-slate-500 dark:stroke-slate-500"
+         fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
+      <path stroke-linecap="round" stroke-linejoin="round"
+            d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/>
+    </svg>
+    <svg v-else xmlns="http://www.w3.org/2000/svg"
+         :class="{'h-5 w-5': small, 'h-10 w-10 md:h-12 md:w-12 m-auto': !small}"
+         class="text-neutral-500" fill="none" viewBox="0 0 24 24"
+         stroke="currentColor" stroke-width="1">
+      <path stroke-linecap="round" stroke-linejoin="round"
+            d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"/>
+    </svg>
+  </span>
+</template>
+<script setup>
+
+defineProps({
+  type: {
+    type: String,
+    required: true
+  },
+
+  small: {
+    type: Boolean,
+    default: false
+  }
+})
+
+</script>

From 8440cd8a56a6870d1aacef286be3f50cd139b65e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yusuf=20=C3=96zdemir?= <yusuf@ozdemir.be>
Date: Mon, 29 Apr 2024 22:54:13 +0300
Subject: [PATCH 11/52] cleanup && refactor Explorer

---
 src/assets/css/index.css             |   8 +
 src/components/ContextMenu.vue       |   4 +-
 src/components/Explorer.vue          | 237 ++++++++-------------------
 src/components/Item.vue              | 110 +++++++++++++
 src/components/modals/ModalAbout.vue |   5 +-
 src/composables/useDragSelect.js     |  16 +-
 src/locales/de.js                    |   1 +
 src/locales/en.js                    |   1 +
 src/locales/fa.js                    |   1 +
 src/locales/fr.js                    |   1 +
 src/locales/he.js                    |   1 +
 src/locales/hi.js                    |   1 +
 src/locales/ru.js                    |   1 +
 src/locales/sv.js                    |   1 +
 src/locales/tr.js                    |   1 +
 src/locales/zhCN.js                  |   1 +
 src/locales/zhTW.js                  |   1 +
 17 files changed, 213 insertions(+), 178 deletions(-)
 create mode 100644 src/components/Item.vue

diff --git a/src/assets/css/index.css b/src/assets/css/index.css
index c1b40a0d..9d9725f5 100644
--- a/src/assets/css/index.css
+++ b/src/assets/css/index.css
@@ -71,6 +71,14 @@
         @apply bg-neutral-100 border border-neutral-300 dark:bg-slate-700 dark:border-gray-900 dark:border-slate-800 !important;
     }
 
+    .vf-item-list {
+        @apply grid grid-cols-1 border hover:bg-neutral-50 dark:hover:bg-gray-700 border-transparent my-0.5 w-full select-none;
+    }
+
+    .vf-item-grid {
+        @apply border border-transparent hover:bg-neutral-50 m-1 dark:hover:bg-gray-700 inline-flex w-[5.5rem] h-20 md:w-24 text-center justify-center select-none
+    }
+
     .vf-explorer-selector {
         @apply border border-slate-500 bg-slate-300 opacity-50 !important;
     }
diff --git a/src/components/ContextMenu.vue b/src/components/ContextMenu.vue
index 62e441b6..da239bcc 100644
--- a/src/components/ContextMenu.vue
+++ b/src/components/ContextMenu.vue
@@ -125,9 +125,11 @@ app.emitter.on('vf-search-query', ({newQuery}) => {
   searchQuery.value = newQuery;
 });
 
-app.emitter.on('vf-contextmenu-show', ({event, area, items,  target = null}) => {
+app.emitter.on('vf-contextmenu-show', ({event, items,  target = null}) => {
   context.items = [];
 
+  const area = app.dragSelect.area.value;
+
   if (searchQuery.value) {
     if (target) {
       context.items.push(menuItems.openDir);
diff --git a/src/components/Explorer.vue b/src/components/Explorer.vue
index 922e7271..8c14a44c 100644
--- a/src/components/Explorer.vue
+++ b/src/components/Explorer.vue
@@ -1,118 +1,95 @@
 <template>
   <div class="relative flex-auto flex flex-col overflow-hidden">
     <div v-if="app.view === 'list' || searchQuery.length" class="grid grid-cols-12 border-b border-neutral-300 dark:border-gray-700 text-xs select-none divide-x">
-        <div @click="sortBy('basename')" class="col-span-7 vf-sort-button">
-          {{ t('Name') }} <SortIcon :direction="sort.order" v-show="sort.active && sort.column === 'basename'" />
-        </div>
-        <div v-if="!searchQuery.length" @click="sortBy('file_size')" class="justify-center col-span-2 vf-sort-button">
-          {{ t('Size') }} <SortIcon :direction="sort.order"  v-show="sort.active && sort.column === 'file_size'" />
-        </div>
-        <div v-if="!searchQuery.length" @click="sortBy('last_modified')" class="justify-center col-span-3 vf-sort-button">
-          {{ t('Date') }} <SortIcon :direction="sort.order"  v-show="sort.active && sort.column === 'last_modified'" />
-        </div>
-        <div v-if="searchQuery.length" @click="sortBy('path')" class="justify-center col-span-5 vf-sort-button">
-          {{ t('Filepath') }} <SortIcon :direction="sort.order"  v-show="sort.active && sort.column === 'path'" />
-        </div>
+      <div @click="sortBy('basename')" class="col-span-7 vf-sort-button">
+        {{ t('Name') }} <SortIcon :direction="sort.order" v-show="sort.active && sort.column === 'basename'"/>
+      </div>
+      <div v-if="!searchQuery.length" @click="sortBy('file_size')" class="justify-center col-span-2 vf-sort-button">
+        {{ t('Size') }} <SortIcon :direction="sort.order" v-show="sort.active && sort.column === 'file_size'"/>
+      </div>
+      <div v-if="!searchQuery.length" @click="sortBy('last_modified')" class="justify-center col-span-3 vf-sort-button">
+        {{ t('Date') }} <SortIcon :direction="sort.order" v-show="sort.active && sort.column === 'last_modified'"/>
+      </div>
+      <div v-if="searchQuery.length" @click="sortBy('path')" class="justify-center col-span-5 vf-sort-button">
+        {{ t('Filepath') }} <SortIcon :direction="sort.order" v-show="sort.active && sort.column === 'path'"/>
+      </div>
     </div>
 
     <div class="relative">
-      <DragItem ref="dragImage" :count="ds.getCount()" />
+      <DragItem ref="dragImage" :count="ds.getCount()"/>
     </div>
 
-    <div class="h-full min-h-[150px] overflow-auto z-0"   :class="app.fullScreen ? '' : 'resize-y'">
-      <div
-          @touchstart="handleTouchStart"
-          @contextmenu.self.prevent="app.emitter.emit('vf-contextmenu-show',{event: $event, area: selectorArea, items: ds.getSelected()})"
-          class="h-full text-xs vf-selector-area overflow-auto vf-scrollbar p-1 z-0"
-          ref="selectorArea">
-
-        <div
-             v-if="searchQuery.length"
-             @dblclick="openItem(item)"
-             @touchstart="delayedOpenItem($event)"
-             @touchend="clearTimeOut()"
-             @contextmenu.prevent="app.emitter.emit('vf-contextmenu-show', {event: $event, area: selectorArea, items: ds.getSelected(), target: item })"
-             :class="'vf-item-' + randId"
-             class="grid grid-cols-1 border hover:bg-neutral-50 dark:hover:bg-gray-700 border-transparent my-0.5 w-full select-none"
-             v-for="(item, index) in getItems()" :data-type="item.type" :data-item="JSON.stringify(item)" :data-index="index">
-            <div class="grid grid-cols-12 items-center">
-              <div class="flex col-span-7 items-center">
-                <ItemIcon :type="item.type" :small="app.compactListView" />
-                <span class="overflow-ellipsis overflow-hidden whitespace-nowrap">{{item.basename }}</span>
-              </div>
-              <div class="col-span-5 overflow-ellipsis overflow-hidden whitespace-nowrap">{{ item.path }}</div>
+      <div ref="selectorArea"
+          :class="app.fullScreen ? '' : 'resize-y'"
+          class="h-full w-full text-xs vf-selector-area vf-scrollbar min-h-[150px] overflow-auto p-1 z-0"
+
+           @touchstart="handleTouchStart"
+           @contextmenu.self.prevent="app.emitter.emit('vf-contextmenu-show',{event: $event, items: ds.getSelected()})"
+      >
+
+        <Item :item="item" :dragImage="dragImage" v-if="searchQuery.length" class="vf-item vf-item-list"
+              v-for="(item, index) in getItems()" :data-type="item.type" :data-item="JSON.stringify(item)" :data-index="index">
+          <div class="grid grid-cols-12 items-center">
+            <div class="flex col-span-7 items-center">
+              <ItemIcon :type="item.type" :small="app.compactListView"/>
+              <span class="overflow-ellipsis overflow-hidden whitespace-nowrap">{{ item.basename }}</span>
             </div>
-        </div>
-
-        <div
-            v-draggable="item"
-             draggable="true"
-             v-if="app.view==='list' && !searchQuery.length"
-             @dblclick="openItem(item)"
-             @touchstart="delayedOpenItem($event)"
-             @touchend="clearTimeOut()"
-             @contextmenu.prevent="app.emitter.emit('vf-contextmenu-show', {event: $event, area: selectorArea, items: ds.getSelected(), target: item })"
-             :class="'vf-item-' + randId"
-             class="grid grid-cols-1 border hover:bg-neutral-50 dark:hover:bg-gray-700 border-transparent my-0.5 w-full select-none"
-             v-for="(item, index) in getItems()" :data-type="item.type" :data-item="JSON.stringify(item)" :data-index="index">
-            <div class="grid grid-cols-12 items-center">
-              <div class="flex col-span-7 items-center">
-                <ItemIcon :type="item.type" :small="app.compactListView"/>
-                <span class="overflow-ellipsis overflow-hidden whitespace-nowrap">{{item.basename }}</span>
-              </div>
-              <div class="col-span-2 text-center">{{ item.file_size ? app.filesize(item.file_size) : '' }}</div>
-              <div class="col-span-3 overflow-ellipsis overflow-hidden whitespace-nowrap">{{ datetimestring(item.last_modified) }}</div>
+            <div class="col-span-5 overflow-ellipsis overflow-hidden whitespace-nowrap">{{ item.path }}</div>
+          </div>
+        </Item>
+
+        <Item :item="item" :dragImage="dragImage" draggable="true" v-if="app.view==='list' && !searchQuery.length" class="vf-item vf-item-list"
+              v-for="(item, index) in getItems()" :data-type="item.type" :data-item="JSON.stringify(item)" :data-index="index">
+          <div class="grid grid-cols-12 items-center">
+            <div class="flex col-span-7 items-center">
+              <ItemIcon :type="item.type" :small="app.compactListView"/>
+              <span class="overflow-ellipsis overflow-hidden whitespace-nowrap">{{ item.basename }}</span>
             </div>
-        </div>
-
-        <div
-             v-draggable="item"
-             draggable="true"
-             v-if="app.view==='grid' && !searchQuery.length"
-             @dblclick="openItem(item)"
-             @touchstart="delayedOpenItem($event)"
-             @touchend="clearTimeOut()"
-             @contextmenu.prevent="app.emitter.emit('vf-contextmenu-show', {event: $event, area: selectorArea, items: ds.getSelected(), target: item })"
-             :class="'vf-item-' + randId"
-             class="border border-transparent hover:bg-neutral-50 m-1 dark:hover:bg-gray-700 inline-flex w-[5.5rem] h-20 md:w-24 text-center justify-center select-none"
-             v-for="(item, index) in getItems(false)" :data-type="item.type" :data-item="JSON.stringify(item)" :data-index="index">
-            <div>
-              <div class="relative">
-                <img class="lazy h-10 md:h-12 m-auto" v-if="(item.mime_type ?? '').startsWith('image')" :data-src="app.requester.getPreviewUrl(app.adapter, item)" :alt="item.basename" :key="item.path">
-                <ItemIcon :type="item.type" v-else />
-                <div class="absolute hidden md:block top-1/2 w-full text-center text-neutral-500" v-if="!(item.mime_type ?? '').startsWith('image') && item.type != 'dir'">{{ ext(item.extension) }}</div>
+            <div class="col-span-2 text-center">{{ item.file_size ? app.filesize(item.file_size) : '' }}</div>
+            <div class="col-span-3 overflow-ellipsis overflow-hidden whitespace-nowrap">
+              {{ datetimestring(item.last_modified) }}
+            </div>
+          </div>
+        </Item>
+
+        <Item :item="item" :dragImage="dragImage" draggable="true" v-if="app.view==='grid' && !searchQuery.length" class="vf-item vf-item-grid"
+              v-for="(item, index) in getItems(false)" :data-type="item.type" :data-item="JSON.stringify(item)" :data-index="index">
+          <div>
+            <div class="relative">
+              <img class="lazy h-10 md:h-12 m-auto" v-if="(item.mime_type ?? '').startsWith('image')"
+                   :data-src="app.requester.getPreviewUrl(app.adapter, item)" :alt="item.basename" :key="item.path">
+              <ItemIcon :type="item.type" v-else/>
+              <div class="absolute hidden md:block top-1/2 w-full text-center text-neutral-500"
+                   v-if="!(item.mime_type ?? '').startsWith('image') && item.type != 'dir'">{{ ext(item.extension) }}
               </div>
-              <span class="break-all">{{ title_shorten(item.basename) }}</span>
             </div>
-        </div>
-      </div>
-
+            <span class="break-all">{{ title_shorten(item.basename) }}</span>
+          </div>
+        </Item>
     </div>
-    <Toast />
+    <Toast/>
   </div>
 </template>
 
 <script setup>
-import { inject, nextTick, onBeforeUnmount, onMounted, onUpdated, reactive, ref, watch } from 'vue';
+import {inject, nextTick, onBeforeUnmount, onMounted, onUpdated, reactive, ref, watch} from 'vue';
 import datetimestring from '../utils/datetimestring.js';
 import Toast from './Toast.vue';
 import LazyLoad from 'vanilla-lazyload';
 import title_shorten from "../utils/title_shorten.js";
-import ModalPreview from "./modals/ModalPreview.vue";
-import ModalMove from "./modals/ModalMove.vue";
 import SortIcon from "./SortIcon.vue";
 import DragItem from "./DragItem.vue";
 import ItemIcon from "./icons/ItemIcon.vue";
+import Item from "./Item.vue";
 
 const app = inject('ServiceContainer');
 const {t} = app.i18n;
 
 const ext = (item) => item?.substring(0, 3)
 const selectorArea = ref(null);
+const resizer = ref(null);
 const dragImage = ref(null);
 
-
-const randId = Math.floor(Math.random() * 2 ** 32);
 const searchQuery = ref('');
 const ds = app.dragSelect;
 
@@ -123,58 +100,6 @@ app.emitter.on('vf-fullscreen-toggle', () => {
   selectorArea.value.style.height = null;
 });
 
-const handleDragStart = (e, item) => {
-  if (e.altKey || e.ctrlKey || e.metaKey) {
-    e.preventDefault();
-    return false;
-  }
-
-  e.dataTransfer.setDragImage(dragImage.value.$el, 0, 15);
-  e.dataTransfer.effectAllowed = 'all';
-  e.dataTransfer.dropEffect = 'copy';
-  e.dataTransfer.setData('items', JSON.stringify(ds.getSelected()))
-};
-
-const handleDropZone = (e, item) => {
-  e.preventDefault();
-  let draggedItems = JSON.parse(e.dataTransfer.getData('items'));
-
-  if (draggedItems.find(item => item.storage !== app.adapter)) {
-    alert('Moving items between different storages is not supported yet.');
-    return;
-  }
-
-  app.modal.open(ModalMove, {items: {from: draggedItems, to: item}})
-};
-
-const handleDragOver = (e, item) => {
-  e.preventDefault();
-  if (!item || item.type !== 'dir' || ds.obj.value.getSelection().find(el => el === e.currentTarget)) {
-    e.dataTransfer.dropEffect = 'none';
-    e.dataTransfer.effectAllowed = 'none';
-  } else {
-    e.dataTransfer.dropEffect = 'copy';
-  }
-};
-
- const vDraggable = {
-   mounted(el, binding, vnode, prevVnode) {
-    el.addEventListener('dragstart', (event) => {
-      handleDragStart(event, binding.value)
-    });
-    el.addEventListener('dragover', (event) => {
-      handleDragOver(event, binding.value)
-    });
-    el.addEventListener('drop', (event) => {
-      handleDropZone(event, binding.value)
-    });
-   },
-  beforeUnmount(el, binding, vnode, prevVnode) {
-    el.removeEventListener('dragstart', handleDragStart);
-    el.removeEventListener('dragover', handleDragOver);
-    el.removeEventListener('drop', handleDropZone);
-  }
-}
 
 app.emitter.on('vf-search-query', ({newQuery}) => {
   searchQuery.value = newQuery;
@@ -194,22 +119,16 @@ app.emitter.on('vf-search-query', ({newQuery}) => {
       }
     });
   } else {
-    app.emitter.emit('vf-fetch', {params:{q: 'index', adapter: app.data.adapter, path: app.data.dirname}});
+    app.emitter.emit('vf-fetch', {params: {q: 'index', adapter: app.data.adapter, path: app.data.dirname}});
   }
 });
 
-let touchTimeOut = null;
-
-const clearTimeOut = () => {
-  if (touchTimeOut) {
-    clearTimeout(touchTimeOut);
-  }
-}
 
 // on ios devices scrollbars are hidden as system level.
 // to be able to scroll, 2 finger tap needed.
 // this is the easiest way that I can think of.
 const dragAndDrop = ref(true);
+
 const handleTouchStart = (event) => {
   if (event.touches.length > 1) {
     if (!dragAndDrop.value) {
@@ -224,32 +143,8 @@ const handleTouchStart = (event) => {
   }
 };
 
-const delayedOpenItem = ($event) => {
-  touchTimeOut = setTimeout(() =>  {
-    const cmEvent = new MouseEvent("contextmenu", {
-        bubbles: true,
-        cancelable: false,
-        view: window,
-        button: 2,
-        buttons: 0,
-        clientX: $event.target.getBoundingClientRect().x,
-        clientY: $event.target.getBoundingClientRect().y
-    });
-    $event.target.dispatchEvent(cmEvent);
-
-  } ,500)
-}
-
-const openItem = (item) => {
-  if (item.type === 'dir') {
-    app.emitter.emit('vf-search-exit');
-    app.emitter.emit('vf-fetch', {params:{q: 'index', adapter: app.data.adapter, path:item.path}});
-  } else {
-    app.modal.open(ModalPreview, {adapter: app.data.adapter, item})
-  }
-};
 
-const sort = reactive( { active: false, column: '', order: '' });
+const sort = reactive({active: false, column: '', order: ''});
 
 const getItems = (sorted = true) => {
   let files = [...app.data.files],
@@ -278,11 +173,11 @@ const getItems = (sorted = true) => {
 
 const sortBy = (column) => {
   if (sort.active && sort.column === column) {
-    sort.active =  sort.order === 'asc'
+    sort.active = sort.order === 'asc'
     sort.column = column
     sort.order = 'desc'
   } else {
-    sort.active =  true
+    sort.active = true
     sort.column = column
     sort.order = 'asc'
   }
@@ -294,7 +189,7 @@ onMounted(() => {
   app.emitter.on('vf-explorer-update', () => nextTick(() => {
     ds.obj.value.clearSelection();
     ds.obj.value.setSettings({
-      selectables: document.getElementsByClassName('vf-item-' + randId ),
+      selectables: document.getElementsByClassName('vf-item'),
     })
   }));
 
diff --git a/src/components/Item.vue b/src/components/Item.vue
new file mode 100644
index 00000000..4ccf5f2c
--- /dev/null
+++ b/src/components/Item.vue
@@ -0,0 +1,110 @@
+<template>
+  <div
+      v-draggable="item"
+      @dblclick="openItem(item)"
+      @touchstart="delayedOpenItem($event)"
+      @touchend="clearTimeOut()"
+      @contextmenu.prevent="app.emitter.emit('vf-contextmenu-show', {event: $event, items: ds.getSelected(), target: item })"
+  >
+    <slot/>
+  </div>
+</template>
+
+<script setup>
+import {ref, defineProps, inject} from 'vue';
+import ModalPreview from "./modals/ModalPreview.vue";
+import ModalMove from "./modals/ModalMove.vue";
+
+const app = inject('ServiceContainer');
+const ds = app.dragSelect;
+
+const props = defineProps({
+  item: {type: Object},
+  dragImage: {type: Object}
+  // draggable: {type: Boolean, default: false}
+})
+
+const openItem = (item) => {
+  if (item.type === 'dir') {
+    app.emitter.emit('vf-search-exit');
+    app.emitter.emit('vf-fetch', {params: {q: 'index', adapter: app.data.adapter, path: item.path}});
+  } else {
+    app.modal.open(ModalPreview, {adapter: app.data.adapter, item})
+  }
+};
+
+const vDraggable = {
+  mounted(el, binding, vnode, prevVnode) {
+    if (!!vnode.props.draggable) {
+      el.addEventListener('dragstart', (event) => handleDragStart(event, binding.value));
+      el.addEventListener('dragover', (event) => handleDragOver(event, binding.value));
+      el.addEventListener('drop', (event) => handleDropZone(event, binding.value));
+    }
+  },
+  beforeUnmount(el, binding, vnode, prevVnode) {
+    if (!!vnode.props.draggable) {
+      el.removeEventListener('dragstart', handleDragStart);
+      el.removeEventListener('dragover', handleDragOver);
+      el.removeEventListener('drop', handleDropZone);
+    }
+  }
+}
+
+const handleDragStart = (e, item) => {
+  if (e.altKey || e.ctrlKey || e.metaKey) {
+    e.preventDefault();
+    return false;
+  }
+
+  e.dataTransfer.setDragImage(props.dragImage.$el, 0, 15);
+  e.dataTransfer.effectAllowed = 'all';
+  e.dataTransfer.dropEffect = 'copy';
+  e.dataTransfer.setData('items', JSON.stringify(ds.getSelected()))
+};
+
+const handleDropZone = (e, item) => {
+  e.preventDefault();
+  let draggedItems = JSON.parse(e.dataTransfer.getData('items'));
+
+  if (draggedItems.find(item => item.storage !== app.adapter)) {
+    alert('Moving items between different storages is not supported yet.');
+    return;
+  }
+
+  app.modal.open(ModalMove, {items: {from: draggedItems, to: item}})
+};
+
+const handleDragOver = (e, item) => {
+  e.preventDefault();
+  if (!item || item.type !== 'dir' || ds.obj.value.getSelection().find(el => el === e.currentTarget)) {
+    e.dataTransfer.dropEffect = 'none';
+    e.dataTransfer.effectAllowed = 'none';
+  } else {
+    e.dataTransfer.dropEffect = 'copy';
+  }
+};
+
+let touchTimeOut = null;
+
+const clearTimeOut = () => {
+  if (touchTimeOut) {
+    clearTimeout(touchTimeOut);
+  }
+}
+const delayedOpenItem = ($event) => {
+  touchTimeOut = setTimeout(() => {
+    const cmEvent = new MouseEvent("contextmenu", {
+      bubbles: true,
+      cancelable: false,
+      view: window,
+      button: 2,
+      buttons: 0,
+      clientX: $event.target.getBoundingClientRect().x,
+      clientY: $event.target.getBoundingClientRect().y
+    });
+    $event.target.dispatchEvent(cmEvent);
+
+  }, 500)
+}
+
+</script>
diff --git a/src/components/modals/ModalAbout.vue b/src/components/modals/ModalAbout.vue
index a52e47e5..f3c2f317 100644
--- a/src/components/modals/ModalAbout.vue
+++ b/src/components/modals/ModalAbout.vue
@@ -110,12 +110,9 @@ import { format as filesizeDefault, metricFormat as filesizeMetric } from '../..
 import { FEATURES } from '../features.js';
 
 const app = inject('ServiceContainer');
-const {getStore, setStore, clearStore} = app.storage;
+const {setStore, clearStore} = app.storage;
 const {t, changeLocale, locale} = app.i18n;
 
-const name = ref('');
-const message = ref('');
-
 const clearLocalStorage = async () => {
   clearStore();
   location.reload();
diff --git a/src/composables/useDragSelect.js b/src/composables/useDragSelect.js
index f5c0618f..53f80522 100644
--- a/src/composables/useDragSelect.js
+++ b/src/composables/useDragSelect.js
@@ -1,10 +1,13 @@
-import {computed, ref, shallowRef} from "vue";
+import {ref, shallowRef} from "vue";
 import DragSelect from 'dragselect';
 
 export default function (emitter) {
     const obj = shallowRef();
 
+    const area = ref(null);
+
     const init = (selectArea) => {
+        area.value = selectArea;
         obj.value = new DragSelect({
             area: selectArea,
             keyboardDrag: false,
@@ -19,9 +22,17 @@ export default function (emitter) {
             }
         });
 
-        obj.value.subscribe('DS:update:pre', ({isDragging, isDraggingKeyboard}) => {
+        obj.value.subscribe('DS:update:pre', ({event, isDragging, isDraggingKeyboard}) => {
             if (isDragging || isDraggingKeyboard) {
                 obj.value.break();
+            } else {
+                // Prevent starting selection when resizing the selectable area from the corner.
+                const offsetX = area.value.offsetWidth - event.offsetX;
+                const offsetY = area.value.offsetHeight - event.offsetY;
+                if (offsetX < 15 && offsetY < 15) {
+                    obj.value.Selector.stop()
+                    obj.value.break();
+                }
             }
         });
 
@@ -38,6 +49,7 @@ export default function (emitter) {
 
     return {
         obj,
+        area,
         init,
         getSelected,
         getCount
diff --git a/src/locales/de.js b/src/locales/de.js
index 692abd91..4c4e0b8a 100644
--- a/src/locales/de.js
+++ b/src/locales/de.js
@@ -86,5 +86,6 @@ export default {
     "System": "System",
     "Target Directory" : "Zielverzeichnis",
     "Select": "Auswählen",
+    "Compact list view": "Kompakte Listenansicht",
     "uppy" : uppyLocaleDe,
 }
diff --git a/src/locales/en.js b/src/locales/en.js
index 49cb0973..558bb86f 100644
--- a/src/locales/en.js
+++ b/src/locales/en.js
@@ -86,5 +86,6 @@ export default {
   "System": "System",
   "Target Directory" : "Target Directory",
   "Select": "Select",
+  "Compact list view": "Compact list view",
   "uppy": uppyLocaleEn
 }
diff --git a/src/locales/fa.js b/src/locales/fa.js
index 128e156d..97131569 100644
--- a/src/locales/fa.js
+++ b/src/locales/fa.js
@@ -86,5 +86,6 @@ export default {
   "System": "سیستم",
   "Target Directory" : "پوشه مقصد",
   "Select": "انتخاب",
+  "Compact list view": "نمایش لیست کوچک",
   "uppy": uppyLocaleFa
 }
diff --git a/src/locales/fr.js b/src/locales/fr.js
index c6e480cb..4fbb8448 100644
--- a/src/locales/fr.js
+++ b/src/locales/fr.js
@@ -87,5 +87,6 @@ export default {
   "System": "Système",
   "Target Directory" : "Répertoire cible",
   "Select": "Sélectionner",
+  "Compact list view": "Vue en liste compacte",
   "uppy": uppyLocaleFr
 }
diff --git a/src/locales/he.js b/src/locales/he.js
index d31fce7d..92ea05ad 100644
--- a/src/locales/he.js
+++ b/src/locales/he.js
@@ -86,5 +86,6 @@ export default {
   "System": "מערכת",
   "Target Directory" : "תיקיית יעד",
   "Select": "בחר",
+  "Compact list view": "תצוגת רשימה קומפקטית",
   "uppy": uppyLocaleHe
 }
diff --git a/src/locales/hi.js b/src/locales/hi.js
index 743ddd75..3a99e2a3 100644
--- a/src/locales/hi.js
+++ b/src/locales/hi.js
@@ -86,5 +86,6 @@ export default {
   "System": "सिस्टम",
   "Target Directory" : "लक्षित निर्देशिका",
   "Select": "चयन",
+  "Compact list view": "संक्षिप्त सूची दृश्य",
   "uppy": uppyLocaleHi
 }
diff --git a/src/locales/ru.js b/src/locales/ru.js
index 8f68baf7..1f04b1ac 100644
--- a/src/locales/ru.js
+++ b/src/locales/ru.js
@@ -86,5 +86,6 @@ export default {
   "System": "Система",
   "Target Directory" : "Целевая директория",
   "Select": "Выбрать",
+  "Compact list view": "Компактный вид списка",
   "uppy": uppyLocaleRu
 }
diff --git a/src/locales/sv.js b/src/locales/sv.js
index 5f0b57e0..ab9eccb5 100644
--- a/src/locales/sv.js
+++ b/src/locales/sv.js
@@ -86,5 +86,6 @@ export default {
   "System": "System",
   "Target Directory" : "Mål katalog",
   "Select": "Välj",
+  "Compact list view": "Kompakt listvy",
   "uppy": uppyLocaleSv
 }
diff --git a/src/locales/tr.js b/src/locales/tr.js
index d0a17f88..9e2d5821 100644
--- a/src/locales/tr.js
+++ b/src/locales/tr.js
@@ -86,5 +86,6 @@ export default {
   "System": "Sistem",
   "Target Directory" : "Hedef Klasör",
   "Select": "Seç",
+  "Compact list view": "Kompakt liste görünümü",
   "uppy": uppyLocaleTr,
 }
diff --git a/src/locales/zhCN.js b/src/locales/zhCN.js
index 89491ba0..fa48fc7c 100644
--- a/src/locales/zhCN.js
+++ b/src/locales/zhCN.js
@@ -86,5 +86,6 @@ export default {
   "System": "系统",
   "Target Directory": "目标目录",
   "Select": "选择",
+  "Compact list view": "紧凑列表视图",
   "uppy": uppyLocalezhCN
 }
diff --git a/src/locales/zhTW.js b/src/locales/zhTW.js
index 7028e418..3cc4498b 100644
--- a/src/locales/zhTW.js
+++ b/src/locales/zhTW.js
@@ -86,5 +86,6 @@ export default {
   "System": "系統",
   "Target Directory": "目標目錄",
   "Select": "選擇",
+  "Compact list view": "緊湊列表視圖",
   "uppy": uppyLocalezhTW
 }

From f62b357ac530b36b0d5eb644da25d3cda00b02b3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yusuf=20=C3=96zdemir?= <yusuf@ozdemir.be>
Date: Mon, 29 Apr 2024 23:12:26 +0300
Subject: [PATCH 12/52] cleanup

---
 src/components/Explorer.vue             | 10 +++-------
 src/components/{ => icons}/SortIcon.vue |  0
 src/utils/filesize.js                   |  9 +++++++--
 3 files changed, 10 insertions(+), 9 deletions(-)
 rename src/components/{ => icons}/SortIcon.vue (100%)

diff --git a/src/components/Explorer.vue b/src/components/Explorer.vue
index 8c14a44c..6b76265c 100644
--- a/src/components/Explorer.vue
+++ b/src/components/Explorer.vue
@@ -74,12 +74,12 @@
 <script setup>
 import {inject, nextTick, onBeforeUnmount, onMounted, onUpdated, reactive, ref, watch} from 'vue';
 import datetimestring from '../utils/datetimestring.js';
+import title_shorten from "../utils/title_shorten.js";
 import Toast from './Toast.vue';
 import LazyLoad from 'vanilla-lazyload';
-import title_shorten from "../utils/title_shorten.js";
-import SortIcon from "./SortIcon.vue";
-import DragItem from "./DragItem.vue";
+import SortIcon from "./icons/SortIcon.vue";
 import ItemIcon from "./icons/ItemIcon.vue";
+import DragItem from "./DragItem.vue";
 import Item from "./Item.vue";
 
 const app = inject('ServiceContainer');
@@ -87,7 +87,6 @@ const {t} = app.i18n;
 
 const ext = (item) => item?.substring(0, 3)
 const selectorArea = ref(null);
-const resizer = ref(null);
 const dragImage = ref(null);
 
 const searchQuery = ref('');
@@ -100,7 +99,6 @@ app.emitter.on('vf-fullscreen-toggle', () => {
   selectorArea.value.style.height = null;
 });
 
-
 app.emitter.on('vf-search-query', ({newQuery}) => {
   searchQuery.value = newQuery;
 
@@ -123,7 +121,6 @@ app.emitter.on('vf-search-query', ({newQuery}) => {
   }
 });
 
-
 // on ios devices scrollbars are hidden as system level.
 // to be able to scroll, 2 finger tap needed.
 // this is the easiest way that I can think of.
@@ -143,7 +140,6 @@ const handleTouchStart = (event) => {
   }
 };
 
-
 const sort = reactive({active: false, column: '', order: ''});
 
 const getItems = (sorted = true) => {
diff --git a/src/components/SortIcon.vue b/src/components/icons/SortIcon.vue
similarity index 100%
rename from src/components/SortIcon.vue
rename to src/components/icons/SortIcon.vue
diff --git a/src/utils/filesize.js b/src/utils/filesize.js
index 8104eb45..a2fc2d30 100644
--- a/src/utils/filesize.js
+++ b/src/utils/filesize.js
@@ -1,8 +1,13 @@
-// Sir I cannot understand what is going on with this function, add docs please.
-export function format(a, b, c, d, e)  {
+// This function formats a given byte size a into a human-readable string with binary prefixes (KiB, MiB, GiB, etc.).
+// It calculates the appropriate binary prefix (e.g., KiB for kilobyte) based on the magnitude of the byte size.
+// Returns the formatted string with the byte size and its corresponding binary prefix.
+ export function format(a, b, c, d, e)  {
     return (b = Math, c = b.log, d = 1024, e = c(a) / c(d) | 0, a / b.pow(d, e)).toFixed(0) + ' ' + (e ? 'KMGTPEZY'[--e] + 'iB' : 'B');
 }
 
+// This function formats a given byte size a into a human-readable string with metric prefixes (kB, MB, GB, etc.).
+// It calculates the appropriate metric prefix (e.g., kB for kilobyte) based on the magnitude of the byte size.
+// Returns the formatted string with the byte size and its corresponding metric prefix.
 export function metricFormat(a, b, c, d, e)  {
     return (b = Math, c = b.log, d = 1000, e = c(a) / c(d) | 0, a / b.pow(d, e)).toFixed(0) + ' ' + (e ? 'KMGTPEZY'[--e]  + 'B' : 'B');
 }

From 05c90d6ca16ed62710aae3b1064381379eb88a6e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yusuf=20=C3=96zdemir?= <yusuf@ozdemir.be>
Date: Mon, 29 Apr 2024 23:20:12 +0300
Subject: [PATCH 13/52] add sass

---
 package.json                             | 5 +++--
 src/assets/css/{index.css => style.scss} | 4 ++--
 src/components/ContextMenu.vue           | 3 ++-
 src/index.js                             | 2 +-
 4 files changed, 8 insertions(+), 6 deletions(-)
 rename src/assets/css/{index.css => style.scss} (95%)

diff --git a/package.json b/package.json
index 9abf6a95..e5b1a754 100755
--- a/package.json
+++ b/package.json
@@ -35,9 +35,9 @@
     "@vitejs/plugin-vue": "^4.0.0",
     "autoprefixer": "^10.4.8",
     "postcss": "^8.4.16",
+    "rollup-plugin-copy": "^3.5.0",
     "tailwindcss": "^3.1.8",
-    "vite": "^5.0.12",
-    "rollup-plugin-copy": "^3.5.0"
+    "vite": "^5.0.12"
   },
   "dependencies": {
     "@uppy/core": "^3.8.0",
@@ -47,6 +47,7 @@
     "dragselect": "^3.0.5",
     "microtip": "^0.2.2",
     "mitt": "^3.0.0",
+    "sass": "^1.75.0",
     "vanilla-lazyload": "^17.8.3",
     "vue": "^3.2.0"
   }
diff --git a/src/assets/css/index.css b/src/assets/css/style.scss
similarity index 95%
rename from src/assets/css/index.css
rename to src/assets/css/style.scss
index 9d9725f5..1f8c1e17 100644
--- a/src/assets/css/index.css
+++ b/src/assets/css/style.scss
@@ -68,7 +68,7 @@
     }
 
     .vf-explorer-selected {
-        @apply bg-neutral-100 border border-neutral-300 dark:bg-slate-700 dark:border-gray-900 dark:border-slate-800 !important;
+        @apply bg-neutral-100 border border-neutral-300 dark:bg-slate-700 dark:border-gray-900 dark:border-slate-800 #{!important};
     }
 
     .vf-item-list {
@@ -80,7 +80,7 @@
     }
 
     .vf-explorer-selector {
-        @apply border border-slate-500 bg-slate-300 opacity-50 !important;
+        @apply border border-slate-500 bg-slate-300 opacity-50 #{!important};
     }
 
     .vuefinder.dark {
diff --git a/src/components/ContextMenu.vue b/src/components/ContextMenu.vue
index da239bcc..3308a47b 100644
--- a/src/components/ContextMenu.vue
+++ b/src/components/ContextMenu.vue
@@ -1,5 +1,6 @@
 <template>
-  <ul class="z-30 absolute text-xs bg-neutral-50 dark:bg-gray-800 text-gray-700 dark:text-gray-200 border border-neutral-300 dark:border-gray-600 shadow rounded-sm select-none" ref="contextmenu" v-if="context.active" :style="context.positions">
+  <ul ref="contextmenu" v-if="context.active" :style="context.positions"
+      class="z-30 absolute text-xs bg-neutral-50 dark:bg-gray-800 text-gray-700 dark:text-gray-200 border border-neutral-300 dark:border-gray-600 shadow rounded-sm select-none">
     <li class="cursor-pointer hover:bg-neutral-200 dark:hover:bg-gray-700"
         v-for="(item) in filteredItems" :key="item.title">
         <template v-if="item.link">
diff --git a/src/index.js b/src/index.js
index c92cbc4d..b0b838ce 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,6 +1,6 @@
 import VueFinder from './components/VueFinder.vue';
 import 'microtip/microtip.css'
-import './assets/css/index.css';
+import './assets/css/style.scss';
 
 export default {
     /**

From 4e46fe5c9f43ca328c4a21f4884728effd1e7d95 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yusuf=20=C3=96zdemir?= <yusuf@ozdemir.be>
Date: Mon, 29 Apr 2024 23:21:39 +0300
Subject: [PATCH 14/52] Update VueFinder.vue

---
 src/components/VueFinder.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/VueFinder.vue b/src/components/VueFinder.vue
index cfd83f21..5269147b 100644
--- a/src/components/VueFinder.vue
+++ b/src/components/VueFinder.vue
@@ -2,7 +2,7 @@
   <div class="vuefinder" ref="root">
     <div :class="app.theme.actualValue">
       <div
-          :class="app.fullScreen ? 'fixed w-screen inset-0 z-20' : 'relative rounded-md'"
+          :class="app.fullScreen ? 'fixed w-screen inset-0 z-20' : 'relative rounded'"
           :style="!app.fullScreen ? 'max-height: ' + maxHeight : ''"
           class="border flex flex-col bg-white dark:bg-gray-800 text-gray-700 dark:text-neutral-400 border-neutral-300 dark:border-gray-900 min-w-min select-none"
           @mousedown="app.emitter.emit('vf-contextmenu-hide')"

From 2d323c1c6de8c8ed2cb9d8b1198b0db00588cbef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yusuf=20=C3=96zdemir?= <yusuf@ozdemir.be>
Date: Mon, 29 Apr 2024 23:28:22 +0300
Subject: [PATCH 15/52] Update package.json

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index e5b1a754..8676ce38 100755
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vuefinder",
-  "version": "2.2.7",
+  "version": "3.0.0",
   "description": "Vuefinder is a file manager component for vuejs.",
   "type": "module",
   "files": [

From 34a0730afd6bdc97a0d8011dbb438da2b446ed6e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yusuf=20=C3=96zdemir?= <yusuf@ozdemir.be>
Date: Mon, 29 Apr 2024 23:39:49 +0300
Subject: [PATCH 16/52] Update Explorer.vue

---
 src/components/Explorer.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Explorer.vue b/src/components/Explorer.vue
index 6b76265c..06fc7b62 100644
--- a/src/components/Explorer.vue
+++ b/src/components/Explorer.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="relative flex-auto flex flex-col overflow-hidden">
-    <div v-if="app.view === 'list' || searchQuery.length" class="grid grid-cols-12 border-b border-neutral-300 dark:border-gray-700 text-xs select-none divide-x">
+    <div v-if="app.view === 'list' || searchQuery.length" class="grid grid-cols-12 px-1 bg-neutral-50 border-b border-neutral-300 dark:border-gray-700 text-xs select-none divide-x">
       <div @click="sortBy('basename')" class="col-span-7 vf-sort-button">
         {{ t('Name') }} <SortIcon :direction="sort.order" v-show="sort.active && sort.column === 'basename'"/>
       </div>
@@ -46,7 +46,7 @@
               <span class="overflow-ellipsis overflow-hidden whitespace-nowrap">{{ item.basename }}</span>
             </div>
             <div class="col-span-2 text-center">{{ item.file_size ? app.filesize(item.file_size) : '' }}</div>
-            <div class="col-span-3 overflow-ellipsis overflow-hidden whitespace-nowrap">
+            <div class="col-span-3 overflow-ellipsis overflow-hidden whitespace-nowrap px-1 md:px-3">
               {{ datetimestring(item.last_modified) }}
             </div>
           </div>

From 9dcc59cb1cccc6a7e6a5969c2c88204926efe087 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yusuf=20=C3=96zdemir?= <yusuf@ozdemir.be>
Date: Mon, 29 Apr 2024 23:44:45 +0300
Subject: [PATCH 17/52] Update Toolbar.vue

---
 src/components/Toolbar.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/Toolbar.vue b/src/components/Toolbar.vue
index 7c734494..b1954936 100644
--- a/src/components/Toolbar.vue
+++ b/src/components/Toolbar.vue
@@ -138,6 +138,8 @@ const toggleFullScreen = () => {
 // View Management
 const toggleView = () => {
   app.view = app.view === 'list' ? 'grid' : 'list';
+  ds.obj.value.clearSelection(true);
+
   setStore('viewport', app.view)
 };
 

From b1af0fe313903794b924fa2b60bed6c3df6033dd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yusuf=20=C3=96zdemir?= <yusuf@ozdemir.be>
Date: Tue, 30 Apr 2024 20:03:09 +0300
Subject: [PATCH 18/52] refactor selectedItems

---
 src/ServiceContainer.js          |  6 ++----
 src/components/Explorer.vue      |  5 +++--
 src/components/Statusbar.vue     |  5 +++--
 src/components/VueFinder.vue     | 14 ++++++++------
 src/composables/useDragSelect.js | 10 ++++++++--
 5 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/src/ServiceContainer.js b/src/ServiceContainer.js
index 9ded59cd..805e9fb9 100644
--- a/src/ServiceContainer.js
+++ b/src/ServiceContainer.js
@@ -12,7 +12,7 @@ import useDragSelect from "./composables/useDragSelect.js";
 
 export default (props, options) => {
     const storage = useStorage(props.id);
-    const emitter = mitt()
+    const emitter = mitt();
     const metricUnits = storage.getStore('metricUnits', false);
     const theme = useTheme(storage, props.theme);
     const supportedLocales = options.i18n;
@@ -63,7 +63,7 @@ export default (props, options) => {
         i18n : i18n,
         // modal state
         modal: useModal(),
-        // dragSelect state
+        // dragSelect object, it is responsible for selecting items
         dragSelect: computed(() => useDragSelect(emitter)),
         // main storage adapter
         adapter: storage.getStore('adapter'),
@@ -75,7 +75,5 @@ export default (props, options) => {
         storage: storage,
         // fetched items
         data: {adapter: storage.getStore('adapter'), storages: [], dirname: path, files: []},
-        // selected items
-        selectedItems: [],
     });
 }
diff --git a/src/components/Explorer.vue b/src/components/Explorer.vue
index 06fc7b62..4643f356 100644
--- a/src/components/Explorer.vue
+++ b/src/components/Explorer.vue
@@ -179,7 +179,10 @@ const sortBy = (column) => {
   }
 };
 
+
 onMounted(() => {
+  ds.init(selectorArea.value)
+
   vfLazyLoad = new LazyLoad(selectorArea.value);
 
   app.emitter.on('vf-explorer-update', () => nextTick(() => {
@@ -189,8 +192,6 @@ onMounted(() => {
     })
   }));
 
-  ds.init(selectorArea.value)
-
   watch(() => app.view, () => app.emitter.emit('vf-explorer-update'));
 });
 
diff --git a/src/components/Statusbar.vue b/src/components/Statusbar.vue
index ae8c9fd5..2de95414 100644
--- a/src/components/Statusbar.vue
+++ b/src/components/Statusbar.vue
@@ -22,7 +22,7 @@
       <button class="vf-btn py-0 vf-btn-primary"
               :class="{disabled: !isSelectButtonActive}"
               :disabled="!isSelectButtonActive"
-              v-if="app.selectButton.active" @click="app.selectButton.click(app.selectedItems, $event)">{{ t("Select") }}</button>
+              v-if="app.selectButton.active" @click="app.selectButton.click(ds.getSelected(), $event)">{{ t("Select") }}</button>
 
       <span class="mr-1" :aria-label="t('About')" data-microtip-position="top-left" role="tooltip" @click="app.modal.open(ModalAbout)">
         <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 stroke-slate-500 cursor-pointer" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
@@ -40,6 +40,7 @@ import ModalAbout from "./modals/ModalAbout.vue";
 const app = inject('ServiceContainer');
 const {t} = app.i18n;
 const {setStore} = app.storage;
+const  ds = app.dragSelect;
 
 const handleStorageSelect = () => {
   app.emitter.emit('vf-search-exit');
@@ -54,7 +55,7 @@ app.emitter.on('vf-search-query', ({newQuery}) => {
 });
 
 const isSelectButtonActive = computed(() => {
-  const selectionAllowed = app.selectButton.multiple ? app.selectedItems.length > 0 : app.selectedItems.length === 1;
+  const selectionAllowed = app.selectButton.multiple ? ds.getSelected().length > 0 : ds.getSelected().length === 1;
   return app.selectButton.active && selectionAllowed;
 });
 
diff --git a/src/components/VueFinder.vue b/src/components/VueFinder.vue
index 5269147b..45ac3fcd 100644
--- a/src/components/VueFinder.vue
+++ b/src/components/VueFinder.vue
@@ -104,17 +104,14 @@ const {setStore} = app.storage;
 const root = ref(null);
 app.root = root;
 
+// Define dragSelect object
+const ds = app.dragSelect;
+
 const updateItems = (data) => {
   Object.assign(app.data, data);
-  app.emitter.emit('vf-nodes-selected', {});
   app.emitter.emit('vf-explorer-update');
 };
 
-app.emitter.on('vf-nodes-selected', (items) => {
-  app.selectedItems = items;
-  emit('select', items);
-})
-
 /** @type {AbortController} */
 let controller;
 app.emitter.on('vf-fetch-abort', () => {
@@ -191,6 +188,11 @@ onMounted(() => {
     };
   }
 
+  // Emit select event
+  ds.onSelect((items) => {
+    emit('select', items);
+  });
+
   app.emitter.emit('vf-fetch', {params: {q: 'index', adapter: app.adapter, ...pathExists}});
 });
 
diff --git a/src/composables/useDragSelect.js b/src/composables/useDragSelect.js
index 53f80522..f8b37ad8 100644
--- a/src/composables/useDragSelect.js
+++ b/src/composables/useDragSelect.js
@@ -38,7 +38,6 @@ export default function (emitter) {
 
         obj.value.subscribe("DS:end", ({items, event, isDragging}) => {
             selectedItems.value = obj.value.getSelection().map((el) => JSON.parse(el.dataset.item));
-            emitter.emit('vf-nodes-selected', selectedItems.value);
         })
     }
     const selectedItems = ref([]);
@@ -47,11 +46,18 @@ export default function (emitter) {
 
     const getCount = () => selectedItems.value.length;
 
+    const onSelect = (callback) => {
+        obj.value.subscribe("DS:end", ({items, event, isDragging}) => {
+            callback(obj.value.getSelection().map((el) => JSON.parse(el.dataset.item)));
+        });
+    }
+
     return {
         obj,
         area,
         init,
         getSelected,
-        getCount
+        getCount,
+        onSelect
     }
 }

From effdd4c017c32be25b158c6a89e5e1926178241e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yusuf=20=C3=96zdemir?= <yusuf@ozdemir.be>
Date: Tue, 30 Apr 2024 20:07:48 +0300
Subject: [PATCH 19/52] Prevent starting selection when start resizing the
 selectable area from the corner.

---
 src/composables/useDragSelect.js | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/composables/useDragSelect.js b/src/composables/useDragSelect.js
index f8b37ad8..ab1485b4 100644
--- a/src/composables/useDragSelect.js
+++ b/src/composables/useDragSelect.js
@@ -15,18 +15,12 @@ export default function (emitter) {
             selectorClass: 'vf-explorer-selector',
         });
 
-        obj.value.subscribe('DS:start:pre', ({items, isDragging, isDraggingKeyboard}) => {
+        obj.value.subscribe('DS:start:pre', ({event, items, isDragging, isDraggingKeyboard}) => {
             if (isDragging) {
                 selectedItems.value = obj.value.getSelection().map((el) => JSON.parse(el.dataset.item));
                 obj.value.break();
-            }
-        });
-
-        obj.value.subscribe('DS:update:pre', ({event, isDragging, isDraggingKeyboard}) => {
-            if (isDragging || isDraggingKeyboard) {
-                obj.value.break();
             } else {
-                // Prevent starting selection when resizing the selectable area from the corner.
+                // Prevent starting selection when start resizing the selectable area from the corner.
                 const offsetX = area.value.offsetWidth - event.offsetX;
                 const offsetY = area.value.offsetHeight - event.offsetY;
                 if (offsetX < 15 && offsetY < 15) {
@@ -36,6 +30,12 @@ export default function (emitter) {
             }
         });
 
+        obj.value.subscribe('DS:update:pre', ({isDragging, isDraggingKeyboard}) => {
+            if (isDragging || isDraggingKeyboard) {
+                obj.value.break();
+            }
+        });
+
         obj.value.subscribe("DS:end", ({items, event, isDragging}) => {
             selectedItems.value = obj.value.getSelection().map((el) => JSON.parse(el.dataset.item));
         })

From 25ea4fdd1adaa47ed812804146560d3c97e94238 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yusuf=20=C3=96zdemir?= <yusuf@ozdemir.be>
Date: Tue, 30 Apr 2024 20:44:52 +0300
Subject: [PATCH 20/52] fix style

---
 src/assets/css/style.scss   | 128 ++++++++++++++++++------------------
 src/components/Explorer.vue |   2 +-
 2 files changed, 66 insertions(+), 64 deletions(-)

diff --git a/src/assets/css/style.scss b/src/assets/css/style.scss
index 1f8c1e17..77df320c 100644
--- a/src/assets/css/style.scss
+++ b/src/assets/css/style.scss
@@ -3,126 +3,128 @@
 @tailwind components;
 
 @layer components {
-    .vuefinder {
-        position: relative;
-    }
+  .vuefinder {
+    position: relative;
 
-    .vuefinder * {
-        touch-action: manipulation;
+    * {
+      touch-action: manipulation;
     }
 
-    .vuefinder .vf-btn {
-        @apply
-        inline-flex justify-center
-        w-full px-4 py-2 rounded-md border shadow-sm
-        text-base font-medium tracking-wide
-        focus:outline-none focus:ring-2 focus:ring-offset-2
-        mt-0.5 sm:mx-1 sm:w-auto sm:text-sm;
+    .vf-btn {
+      @apply
+      inline-flex justify-center
+      w-full px-4 py-2 rounded-md border shadow-sm
+      text-base font-medium tracking-wide
+      focus:outline-none focus:ring-2 focus:ring-offset-2
+      mt-0.5 sm:mx-1 sm:w-auto sm:text-sm;
     }
 
-    .vuefinder .vf-btn-primary {
-        @apply
-        border-transparent
-        text-white
-        bg-blue-600 hover:bg-blue-700
-        focus:ring-indigo-500
-        dark:text-gray-50 dark:border-gray-800 dark:bg-gray-700 dark:hover:bg-gray-500;
+    .vf-btn-primary {
+      @apply
+      border-transparent
+      text-white
+      bg-blue-600 hover:bg-blue-700
+      focus:ring-indigo-500
+      dark:text-gray-50 dark:border-gray-800 dark:bg-gray-700 dark:hover:bg-gray-500;
     }
-    .vuefinder .vf-btn-primary.disabled{
-        @apply
-        hover:bg-blue-600
-        dark:hover:bg-gray-700
+
+    .vf-btn-primary.disabled {
+      @apply
+      hover:bg-blue-600
+      dark:hover:bg-gray-700
     }
 
-    .vuefinder .vf-btn-secondary {
-        @apply
-        border-gray-300
-        text-gray-700
-        bg-white hover:bg-gray-50
-        focus:ring-gray-500
-        dark:text-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-500;
+    .vf-btn-secondary {
+      @apply
+      border-gray-300
+      text-gray-700
+      bg-white hover:bg-gray-50
+      focus:ring-gray-500
+      dark:text-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-500;
     }
 
-    .vuefinder .vf-btn-secondary.disabled{
-        @apply
-        hover:bg-gray-50
-        dark:hover:bg-gray-800
+    .vf-btn-secondary.disabled {
+      @apply
+      hover:bg-gray-50
+      dark:hover:bg-gray-800
     }
 
-    .vuefinder .vf-btn-danger {
-        @apply
-        border-transparent
-        text-white
-        bg-red-600 hover:bg-red-700
-        focus:ring-red-200 focus:ring-1 focus:ring-offset-1
-        dark:text-gray-50 dark:border-red-800 dark:bg-red-700 dark:hover:bg-red-500;
+    .vf-btn-danger {
+      @apply
+      border-transparent
+      text-white
+      bg-red-600 hover:bg-red-700
+      focus:ring-red-200 focus:ring-1 focus:ring-offset-1
+      dark:text-gray-50 dark:border-red-800 dark:bg-red-700 dark:hover:bg-red-500;
     }
 
-    .vuefinder .disabled {
-        @apply
-        opacity-50 cursor-not-allowed
+    .disabled {
+      @apply
+      opacity-50 cursor-not-allowed
     }
 
-    .vuefinder .vf-sort-button{
-        @apply p-1 leading-6 hover:bg-neutral-100 bg-neutral-50 dark:bg-gray-800 dark:hover:bg-gray-700/10 flex items-center dark:border-gray-700
+    .vf-sort-button {
+      @apply p-1 leading-6 hover:bg-neutral-100 bg-neutral-50 dark:bg-gray-800 dark:hover:bg-gray-700/10 flex items-center dark:border-gray-700
     }
 
     .vf-explorer-selected {
-        @apply bg-neutral-100 border border-neutral-300 dark:bg-slate-700 dark:border-gray-900 dark:border-slate-800 #{!important};
+      @apply bg-neutral-100 border border-neutral-300 dark:bg-slate-700 dark:border-gray-900 dark:border-slate-800 #{!important};
     }
 
     .vf-item-list {
-        @apply grid grid-cols-1 border hover:bg-neutral-50 dark:hover:bg-gray-700 border-transparent my-0.5 w-full select-none;
+      @apply grid grid-cols-1 border hover:bg-neutral-50 dark:hover:bg-gray-700 border-transparent my-0.5 w-full select-none;
     }
 
     .vf-item-grid {
-        @apply border border-transparent hover:bg-neutral-50 m-1 dark:hover:bg-gray-700 inline-flex w-[5.5rem] h-20 md:w-24 text-center justify-center select-none
+      @apply border border-transparent hover:bg-neutral-50 m-1 dark:hover:bg-gray-700 inline-flex w-[5.5rem] h-20 md:w-24 text-center justify-center select-none
     }
 
     .vf-explorer-selector {
-        @apply border border-slate-500 bg-slate-300 opacity-50 #{!important};
+      @apply border border-slate-500 bg-slate-300 opacity-50 #{!important};
     }
 
     .vuefinder.dark {
-        color-scheme: dark;
+      color-scheme: dark;
     }
 
     /* width */
     .vf-scrollbar::-webkit-scrollbar {
-        width: 12px;
+      width: 12px;
     }
 
     /* Track */
     .vf-scrollbar::-webkit-scrollbar-track-piece {
-        @apply bg-gray-100 dark:bg-slate-900/50;
+      @apply bg-gray-100 dark:bg-slate-900/50;
     }
 
     /* Handle */
     .vf-scrollbar::-webkit-scrollbar-thumb {
-        @apply bg-gray-300 dark:bg-slate-700;
+      @apply bg-gray-300 dark:bg-slate-700;
     }
 
     /* Handle on hover */
     .vf-scrollbar::-webkit-scrollbar-thumb:hover {
-        @apply bg-gray-400 dark:bg-slate-600;
+      @apply bg-gray-400 dark:bg-slate-600;
     }
 
     .vf-scrollbar::-webkit-scrollbar-corner {
-        @apply bg-transparent;
+      @apply bg-transparent;
     }
 
-
     /* modal fade effect */
-    .vuefinder .fade-enter-active,
-    .vuefinder .fade-leave-active {
-        transition: opacity 0.2s ease;
+    .fade-enter-active,
+    .fade-leave-active {
+      transition: opacity 0.2s ease;
     }
 
-    .vuefinder .fade-enter-from,
-    .vuefinder .fade-leave-to {
-        opacity: 0;
+    .fade-enter-from,
+    .fade-leave-to {
+      opacity: 0;
     }
 
+  }
+
+
 }
 
 @tailwind utilities;
diff --git a/src/components/Explorer.vue b/src/components/Explorer.vue
index 4643f356..75c39cef 100644
--- a/src/components/Explorer.vue
+++ b/src/components/Explorer.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="relative flex-auto flex flex-col overflow-hidden">
-    <div v-if="app.view === 'list' || searchQuery.length" class="grid grid-cols-12 px-1 bg-neutral-50 border-b border-neutral-300 dark:border-gray-700 text-xs select-none divide-x">
+    <div v-if="app.view === 'list' || searchQuery.length" class="grid grid-cols-12 px-1 bg-neutral-50 dark:bg-gray-800 border-b border-neutral-300 dark:border-gray-700 text-xs select-none divide-x">
       <div @click="sortBy('basename')" class="col-span-7 vf-sort-button">
         {{ t('Name') }} <SortIcon :direction="sort.order" v-show="sort.active && sort.column === 'basename'"/>
       </div>

From 0c3c4d15450b76032480490ca5d8e3cdf71ff7f2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yusuf=20=C3=96zdemir?= <yusuf@ozdemir.be>
Date: Tue, 30 Apr 2024 22:53:18 +0300
Subject: [PATCH 21/52] cleanup

---
 src/components/Breadcrumb.vue            | 4 ++--
 src/components/Explorer.vue              | 2 +-
 src/components/Toast.vue                 | 2 +-
 src/components/modals/ModalAbout.vue     | 1 -
 src/components/modals/ModalArchive.vue   | 1 -
 src/components/modals/ModalDelete.vue    | 1 -
 src/components/modals/ModalMove.vue      | 1 -
 src/components/modals/ModalNewFile.vue   | 2 +-
 src/components/modals/ModalNewFolder.vue | 2 +-
 src/components/modals/ModalRename.vue    | 1 -
 src/components/modals/ModalUnarchive.vue | 2 --
 11 files changed, 6 insertions(+), 13 deletions(-)

diff --git a/src/components/Breadcrumb.vue b/src/components/Breadcrumb.vue
index 6f59ef4e..2c37e339 100644
--- a/src/components/Breadcrumb.vue
+++ b/src/components/Breadcrumb.vue
@@ -96,7 +96,7 @@ app.emitter.on('vf-explorer-update', () => {
   let items = [], links = [];
   dirname.value = app.data.dirname ?? (app.adapter + '://');
 
-  if (dirname.value.length == 0) {
+  if (dirname.value.length === 0) {
     breadcrumb.value = [];
   }
   dirname.value
@@ -189,7 +189,7 @@ const handleDragLeave = (e) => {
 };
 
 const handleBlur = () => {
-  if (query.value == '') {
+  if (query.value === '') {
     exitSearchMode();
   }
 }
diff --git a/src/components/Explorer.vue b/src/components/Explorer.vue
index 75c39cef..eec5bfab 100644
--- a/src/components/Explorer.vue
+++ b/src/components/Explorer.vue
@@ -145,7 +145,7 @@ const sort = reactive({active: false, column: '', order: ''});
 const getItems = (sorted = true) => {
   let files = [...app.data.files],
       column = sort.column,
-      order = sort.order == 'asc' ? 1 : -1;
+      order = sort.order === 'asc' ? 1 : -1;
 
   if (!sorted) {
     return files;
diff --git a/src/components/Toast.vue b/src/components/Toast.vue
index ab926558..93787f63 100644
--- a/src/components/Toast.vue
+++ b/src/components/Toast.vue
@@ -1,7 +1,7 @@
 <template>
   <div
       :class="fullScreen.value ?  'fixed' : 'absolute'"
-      class=" bottom-0 max-w-fit flex flex-col bottom-0 left-1/2 -translate-x-1/2">
+      class="max-w-fit flex flex-col bottom-0 left-1/2 -translate-x-1/2">
     <transition-group
         name="vf-toast-item"
         leave-active-class="transition-all duration-1000"
diff --git a/src/components/modals/ModalAbout.vue b/src/components/modals/ModalAbout.vue
index f3c2f317..4b47547b 100644
--- a/src/components/modals/ModalAbout.vue
+++ b/src/components/modals/ModalAbout.vue
@@ -138,7 +138,6 @@ const handleCompactListView = () => {
   app.emitter.emit('vf-compact-view-saved');
 }
 
-
 const {i18n} = inject('VueFinderOptions');
 
 const languageList = {
diff --git a/src/components/modals/ModalArchive.vue b/src/components/modals/ModalArchive.vue
index c1059f59..cd6119ea 100644
--- a/src/components/modals/ModalArchive.vue
+++ b/src/components/modals/ModalArchive.vue
@@ -43,7 +43,6 @@ import ModalLayout from './ModalLayout.vue';
 import {inject, ref} from 'vue';
 import Message from '../Message.vue';
 const app = inject('ServiceContainer');
-const {getStore} = app.storage;
 const {t} = app.i18n;
 
 const name = ref('');
diff --git a/src/components/modals/ModalDelete.vue b/src/components/modals/ModalDelete.vue
index f11f864d..4559255b 100644
--- a/src/components/modals/ModalDelete.vue
+++ b/src/components/modals/ModalDelete.vue
@@ -43,7 +43,6 @@ import {inject, ref} from 'vue';
 import Message from '../Message.vue';
 
 const app = inject('ServiceContainer');
-const {getStore} = app.storage;
 const {t} = app.i18n;
 
 const items = ref(app.modal.data.items);
diff --git a/src/components/modals/ModalMove.vue b/src/components/modals/ModalMove.vue
index c0847eeb..f533bd4e 100644
--- a/src/components/modals/ModalMove.vue
+++ b/src/components/modals/ModalMove.vue
@@ -56,7 +56,6 @@ import Message from '../Message.vue';
 
 const app = inject('ServiceContainer');
 const {t} = app.i18n;
-const {getStore} = app.storage;
 
 const items = ref(app.modal.data.items.from);
 const message = ref('');
diff --git a/src/components/modals/ModalNewFile.vue b/src/components/modals/ModalNewFile.vue
index d31ca1b2..0e024263 100644
--- a/src/components/modals/ModalNewFile.vue
+++ b/src/components/modals/ModalNewFile.vue
@@ -43,7 +43,7 @@ const name = ref('');
 const message = ref('');
 
 const createFile = () => {
-  if (name.value != '') {
+  if (name.value !== '') {
     app.emitter.emit('vf-fetch', {
       params: {
         q: 'newfile',
diff --git a/src/components/modals/ModalNewFolder.vue b/src/components/modals/ModalNewFolder.vue
index c5c2208e..084b221d 100644
--- a/src/components/modals/ModalNewFolder.vue
+++ b/src/components/modals/ModalNewFolder.vue
@@ -40,7 +40,7 @@ const name = ref('');
 const message = ref('');
 
 const createFolder = () => {
-  if (name.value != '') {
+  if (name.value !== '') {
     app.emitter.emit('vf-fetch', {
       params: {
         q: 'newfolder',
diff --git a/src/components/modals/ModalRename.vue b/src/components/modals/ModalRename.vue
index 300b3827..aca96057 100644
--- a/src/components/modals/ModalRename.vue
+++ b/src/components/modals/ModalRename.vue
@@ -39,7 +39,6 @@ import {inject, ref} from 'vue';
 import Message from '../Message.vue';
 
 const app = inject('ServiceContainer');
-const {getStore} = app.storage;
 const {t} = app.i18n;
 
 const item = ref(app.modal.data.items[0]);
diff --git a/src/components/modals/ModalUnarchive.vue b/src/components/modals/ModalUnarchive.vue
index db896dd8..42f56b72 100644
--- a/src/components/modals/ModalUnarchive.vue
+++ b/src/components/modals/ModalUnarchive.vue
@@ -38,10 +38,8 @@ import {inject, ref} from 'vue';
 import Message from '../Message.vue';
 
 const app = inject('ServiceContainer');
-const {getStore} = app.storage;
 const {t} = app.i18n;
 
-const name = ref('');
 const item = ref(app.modal.data.items[0]);
 const message = ref('');
 

From 259646c056a70fc0a2e6903cf9cc231dc425e00f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yusuf=20=C3=96zdemir?= <yusuf@ozdemir.be>
Date: Wed, 1 May 2024 07:51:37 +0300
Subject: [PATCH 22/52] refactor getSelection

---
 src/components/Item.vue          |  2 +-
 src/composables/useDragSelect.js | 11 +++++++----
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/components/Item.vue b/src/components/Item.vue
index 4ccf5f2c..184857ed 100644
--- a/src/components/Item.vue
+++ b/src/components/Item.vue
@@ -76,7 +76,7 @@ const handleDropZone = (e, item) => {
 
 const handleDragOver = (e, item) => {
   e.preventDefault();
-  if (!item || item.type !== 'dir' || ds.obj.value.getSelection().find(el => el === e.currentTarget)) {
+  if (!item || item.type !== 'dir' || ds.getSelection().find(el => el === e.currentTarget)) {
     e.dataTransfer.dropEffect = 'none';
     e.dataTransfer.effectAllowed = 'none';
   } else {
diff --git a/src/composables/useDragSelect.js b/src/composables/useDragSelect.js
index ab1485b4..0f299e00 100644
--- a/src/composables/useDragSelect.js
+++ b/src/composables/useDragSelect.js
@@ -15,9 +15,9 @@ export default function (emitter) {
             selectorClass: 'vf-explorer-selector',
         });
 
-        obj.value.subscribe('DS:start:pre', ({event, items, isDragging, isDraggingKeyboard}) => {
+        obj.value.subscribe('DS:start:pre', ({items, event, isDragging, isDraggingKeyboard}) => {
             if (isDragging) {
-                selectedItems.value = obj.value.getSelection().map((el) => JSON.parse(el.dataset.item));
+                selectedItems.value = items.map((el) => JSON.parse(el.dataset.item));
                 obj.value.break();
             } else {
                 // Prevent starting selection when start resizing the selectable area from the corner.
@@ -37,18 +37,20 @@ export default function (emitter) {
         });
 
         obj.value.subscribe("DS:end", ({items, event, isDragging}) => {
-            selectedItems.value = obj.value.getSelection().map((el) => JSON.parse(el.dataset.item));
+            selectedItems.value = items.map((el) => JSON.parse(el.dataset.item));
         })
     }
     const selectedItems = ref([]);
 
     const getSelected = () => selectedItems.value;
 
+    const getSelection = () => obj.value.getSelection();
+
     const getCount = () => selectedItems.value.length;
 
     const onSelect = (callback) => {
         obj.value.subscribe("DS:end", ({items, event, isDragging}) => {
-            callback(obj.value.getSelection().map((el) => JSON.parse(el.dataset.item)));
+            callback(items.map((el) => JSON.parse(el.dataset.item)));
         });
     }
 
@@ -57,6 +59,7 @@ export default function (emitter) {
         area,
         init,
         getSelected,
+        getSelection,
         getCount,
         onSelect
     }

From 5c71869cc3e304a776cbaf4438c2d3b2797b326d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yusuf=20=C3=96zdemir?= <yusuf@ozdemir.be>
Date: Wed, 1 May 2024 07:54:12 +0300
Subject: [PATCH 23/52] Update Item.vue

---
 src/components/Item.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/Item.vue b/src/components/Item.vue
index 184857ed..243438a8 100644
--- a/src/components/Item.vue
+++ b/src/components/Item.vue
@@ -21,7 +21,6 @@ const ds = app.dragSelect;
 const props = defineProps({
   item: {type: Object},
   dragImage: {type: Object}
-  // draggable: {type: Boolean, default: false}
 })
 
 const openItem = (item) => {

From aa5bf624eb56cb7ddd793ec2a1dae79aab2c5e81 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yusuf=20=C3=96zdemir?= <yusuf@ozdemir.be>
Date: Wed, 1 May 2024 08:16:17 +0300
Subject: [PATCH 24/52] refactor clearSelection

---
 src/components/Explorer.vue      | 4 +---
 src/components/Statusbar.vue     | 2 +-
 src/components/Toolbar.vue       | 2 +-
 src/composables/useDragSelect.js | 5 +++++
 4 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/components/Explorer.vue b/src/components/Explorer.vue
index eec5bfab..c78a2ac9 100644
--- a/src/components/Explorer.vue
+++ b/src/components/Explorer.vue
@@ -186,13 +186,11 @@ onMounted(() => {
   vfLazyLoad = new LazyLoad(selectorArea.value);
 
   app.emitter.on('vf-explorer-update', () => nextTick(() => {
-    ds.obj.value.clearSelection();
+    ds.clearSelection();
     ds.obj.value.setSettings({
       selectables: document.getElementsByClassName('vf-item'),
     })
   }));
-
-  watch(() => app.view, () => app.emitter.emit('vf-explorer-update'));
 });
 
 onUpdated(() => {
diff --git a/src/components/Statusbar.vue b/src/components/Statusbar.vue
index 2de95414..37e09e67 100644
--- a/src/components/Statusbar.vue
+++ b/src/components/Statusbar.vue
@@ -45,7 +45,7 @@ const  ds = app.dragSelect;
 const handleStorageSelect = () => {
   app.emitter.emit('vf-search-exit');
   app.emitter.emit('vf-fetch', {params:{q: 'index', adapter: app.adapter}});
-  setStore('adapter', app.adapter)
+  setStore('adapter', app.adapter);
 };
 
 const searchQuery = ref('');
diff --git a/src/components/Toolbar.vue b/src/components/Toolbar.vue
index b1954936..86a547f0 100644
--- a/src/components/Toolbar.vue
+++ b/src/components/Toolbar.vue
@@ -138,8 +138,8 @@ const toggleFullScreen = () => {
 // View Management
 const toggleView = () => {
   app.view = app.view === 'list' ? 'grid' : 'list';
-  ds.obj.value.clearSelection(true);
 
+  app.emitter.emit('vf-explorer-update')
   setStore('viewport', app.view)
 };
 
diff --git a/src/composables/useDragSelect.js b/src/composables/useDragSelect.js
index 0f299e00..3fd48506 100644
--- a/src/composables/useDragSelect.js
+++ b/src/composables/useDragSelect.js
@@ -48,6 +48,10 @@ export default function (emitter) {
 
     const getCount = () => selectedItems.value.length;
 
+    const clearSelection = () => {
+        obj.value.clearSelection(true);
+    }
+
     const onSelect = (callback) => {
         obj.value.subscribe("DS:end", ({items, event, isDragging}) => {
             callback(items.map((el) => JSON.parse(el.dataset.item)));
@@ -60,6 +64,7 @@ export default function (emitter) {
         init,
         getSelected,
         getSelection,
+        clearSelection,
         getCount,
         onSelect
     }

From ffb2b5b4415ebeba4822f71de2a9bc2828f59166 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yusuf=20=C3=96zdemir?= <yusuf@ozdemir.be>
Date: Wed, 1 May 2024 09:24:35 +0300
Subject: [PATCH 25/52] improve selection

---
 src/components/Explorer.vue      |  5 +----
 src/components/Item.vue          |  1 +
 src/composables/useDragSelect.js | 23 ++++++++++++++++++++++-
 3 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/src/components/Explorer.vue b/src/components/Explorer.vue
index c78a2ac9..597bd72e 100644
--- a/src/components/Explorer.vue
+++ b/src/components/Explorer.vue
@@ -186,10 +186,7 @@ onMounted(() => {
   vfLazyLoad = new LazyLoad(selectorArea.value);
 
   app.emitter.on('vf-explorer-update', () => nextTick(() => {
-    ds.clearSelection();
-    ds.obj.value.setSettings({
-      selectables: document.getElementsByClassName('vf-item'),
-    })
+    ds.refreshSelection();
   }));
 });
 
diff --git a/src/components/Item.vue b/src/components/Item.vue
index 243438a8..71b4b4b6 100644
--- a/src/components/Item.vue
+++ b/src/components/Item.vue
@@ -1,5 +1,6 @@
 <template>
   <div
+      :class="'vf-item-' + ds.explorerId.value"
       v-draggable="item"
       @dblclick="openItem(item)"
       @touchstart="delayedOpenItem($event)"
diff --git a/src/composables/useDragSelect.js b/src/composables/useDragSelect.js
index 3fd48506..45716e51 100644
--- a/src/composables/useDragSelect.js
+++ b/src/composables/useDragSelect.js
@@ -6,6 +6,8 @@ export default function (emitter) {
 
     const area = ref(null);
 
+    const explorerId = ref(Math.floor(Math.random() * 2 ** 32));
+
     const init = (selectArea) => {
         area.value = selectArea;
         obj.value = new DragSelect({
@@ -49,7 +51,24 @@ export default function (emitter) {
     const getCount = () => selectedItems.value.length;
 
     const clearSelection = () => {
-        obj.value.clearSelection(true);
+       obj.value.clearSelection(true);
+    }
+
+    // Refresh selection after the list is updated.
+    const refreshSelection = () => {
+        const currentSelectedItems = getSelected().map((item) => item.path);
+        clearSelection();
+        // reinitialize the selectables
+        obj.value.setSettings({
+          selectables: document.getElementsByClassName('vf-item-' + explorerId.value),
+        })
+        // add the previously selected items
+        obj.value.addSelection(
+            obj.value.getSelectables()
+                .filter(el => currentSelectedItems.includes(JSON.parse(el.dataset.item).path))
+        );
+        // update selection
+        selectedItems.value = obj.value.getSelection().map((el) => JSON.parse(el.dataset.item));
     }
 
     const onSelect = (callback) => {
@@ -61,10 +80,12 @@ export default function (emitter) {
     return {
         obj,
         area,
+        explorerId,
         init,
         getSelected,
         getSelection,
         clearSelection,
+        refreshSelection,
         getCount,
         onSelect
     }

From 32a87ffa344c355cee3fb58bff901af106dd6207 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yusuf=20=C3=96zdemir?= <yusuf@ozdemir.be>
Date: Wed, 1 May 2024 21:57:40 +0300
Subject: [PATCH 26/52] Update ServiceContainer.js

---
 src/ServiceContainer.js | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/ServiceContainer.js b/src/ServiceContainer.js
index 805e9fb9..e6df59cf 100644
--- a/src/ServiceContainer.js
+++ b/src/ServiceContainer.js
@@ -17,7 +17,6 @@ export default (props, options) => {
     const theme = useTheme(storage, props.theme);
     const supportedLocales = options.i18n;
     const initialLang = props.locale ?? options.locale;
-    const i18n = computed(() => useI18n(storage, initialLang, emitter, supportedLocales));
 
     const setFeatures = (features) => {
         if (Array.isArray(features)) {
@@ -52,22 +51,22 @@ export default (props, options) => {
         // unit state - for example: GB or GiB
         metricUnits: metricUnits,
         // show large icons in list view
-        compactListView: storage.getStore('compactListView', true),
+        compactListView: storage.getStore('compact-list-view', true),
         // human readable file sizes
         filesize: metricUnits ? filesizeMetric : filesizeDefault,
         // max file size
         maxFileSize: props.maxFileSize,
         // loading state
         loading: false,
-        // default locale
-        i18n : i18n,
+        // localization object
+        i18n : computed(() => useI18n(storage, initialLang, emitter, supportedLocales)),
         // modal state
         modal: useModal(),
         // dragSelect object, it is responsible for selecting items
         dragSelect: computed(() => useDragSelect(emitter)),
         // main storage adapter
         adapter: storage.getStore('adapter'),
-        // main storage adapter
+        // current active path
         path: path,
         // persist state
         persist: props.persist,

From 48f29967d8b36fe11e18887fea73e324b84e1246 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yusuf=20=C3=96zdemir?= <yusuf@ozdemir.be>
Date: Wed, 1 May 2024 22:05:10 +0300
Subject: [PATCH 27/52] refactor explorer

---
 src/components/Explorer.vue | 18 +++++++++---------
 src/components/Item.vue     |  4 ++++
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/components/Explorer.vue b/src/components/Explorer.vue
index 597bd72e..cfa7309f 100644
--- a/src/components/Explorer.vue
+++ b/src/components/Explorer.vue
@@ -26,9 +26,9 @@
            @touchstart="handleTouchStart"
            @contextmenu.self.prevent="app.emitter.emit('vf-contextmenu-show',{event: $event, items: ds.getSelected()})"
       >
-
-        <Item :item="item" :dragImage="dragImage" v-if="searchQuery.length" class="vf-item vf-item-list"
-              v-for="(item, index) in getItems()" :data-type="item.type" :data-item="JSON.stringify(item)" :data-index="index">
+        <!-- Search View -->
+        <Item v-if="searchQuery.length" v-for="(item, index) in getItems()"
+              :item="item" :index="index" :dragImage="dragImage" class="vf-item vf-item-list">
           <div class="grid grid-cols-12 items-center">
             <div class="flex col-span-7 items-center">
               <ItemIcon :type="item.type" :small="app.compactListView"/>
@@ -37,9 +37,9 @@
             <div class="col-span-5 overflow-ellipsis overflow-hidden whitespace-nowrap">{{ item.path }}</div>
           </div>
         </Item>
-
-        <Item :item="item" :dragImage="dragImage" draggable="true" v-if="app.view==='list' && !searchQuery.length" class="vf-item vf-item-list"
-              v-for="(item, index) in getItems()" :data-type="item.type" :data-item="JSON.stringify(item)" :data-index="index">
+        <!-- List View -->
+        <Item  v-if="app.view==='list' && !searchQuery.length" v-for="(item, index) in getItems()"
+              :item="item" :index="index" :dragImage="dragImage" class="vf-item vf-item-list" draggable="true" >
           <div class="grid grid-cols-12 items-center">
             <div class="flex col-span-7 items-center">
               <ItemIcon :type="item.type" :small="app.compactListView"/>
@@ -51,9 +51,9 @@
             </div>
           </div>
         </Item>
-
-        <Item :item="item" :dragImage="dragImage" draggable="true" v-if="app.view==='grid' && !searchQuery.length" class="vf-item vf-item-grid"
-              v-for="(item, index) in getItems(false)" :data-type="item.type" :data-item="JSON.stringify(item)" :data-index="index">
+        <!-- Grid View -->
+        <Item v-if="app.view==='grid' && !searchQuery.length" v-for="(item, index) in getItems(false)"
+              :item="item" :index="index" :dragImage="dragImage" class="vf-item vf-item-grid" draggable="true">
           <div>
             <div class="relative">
               <img class="lazy h-10 md:h-12 m-auto" v-if="(item.mime_type ?? '').startsWith('image')"
diff --git a/src/components/Item.vue b/src/components/Item.vue
index 71b4b4b6..b455fecf 100644
--- a/src/components/Item.vue
+++ b/src/components/Item.vue
@@ -1,6 +1,9 @@
 <template>
   <div
       :class="'vf-item-' + ds.explorerId.value"
+      :data-type="item.type"
+      :data-item="JSON.stringify(item)"
+      :data-index="index"
       v-draggable="item"
       @dblclick="openItem(item)"
       @touchstart="delayedOpenItem($event)"
@@ -21,6 +24,7 @@ const ds = app.dragSelect;
 
 const props = defineProps({
   item: {type: Object},
+  index: {type: Number},
   dragImage: {type: Object}
 })
 

From 986ec28885c0fd10ee22d5f3f87165da251de461 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yusuf=20=C3=96zdemir?= <yusuf@ozdemir.be>
Date: Wed, 1 May 2024 23:03:46 +0300
Subject: [PATCH 28/52] Update Breadcrumb.vue

---
 src/components/Breadcrumb.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Breadcrumb.vue b/src/components/Breadcrumb.vue
index 2c37e339..00c448cd 100644
--- a/src/components/Breadcrumb.vue
+++ b/src/components/Breadcrumb.vue
@@ -104,7 +104,7 @@ app.emitter.on('vf-explorer-update', () => {
       .split('/')
       .forEach(function (item) {
         items.push(item);
-        if (items.join('/') != '') {
+        if (items.join('/') !== '') {
           links.push({
             'basename': item,
             'name': item,

From 8a2305014a1a5e17db5419badc66df4582efcaa5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yusuf=20=C3=96zdemir?= <yusuf@ozdemir.be>
Date: Thu, 2 May 2024 20:59:07 +0300
Subject: [PATCH 29/52] fix selector class in dark mode

---
 src/assets/css/style.scss | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/assets/css/style.scss b/src/assets/css/style.scss
index 77df320c..46a63034 100644
--- a/src/assets/css/style.scss
+++ b/src/assets/css/style.scss
@@ -79,10 +79,6 @@
       @apply border border-transparent hover:bg-neutral-50 m-1 dark:hover:bg-gray-700 inline-flex w-[5.5rem] h-20 md:w-24 text-center justify-center select-none
     }
 
-    .vf-explorer-selector {
-      @apply border border-slate-500 bg-slate-300 opacity-50 #{!important};
-    }
-
     .vuefinder.dark {
       color-scheme: dark;
     }
@@ -124,6 +120,12 @@
 
   }
 
+  /*
+    DragSelect selector appends to body
+   */
+  .vf-explorer-selector {
+    @apply border border-slate-500 bg-slate-300 opacity-50 #{!important};
+  }
 
 }
 

From 4f32a2e201d9ca38011ce4bddda0b84402ff835c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yusuf=20=C3=96zdemir?= <yusuf@ozdemir.be>
Date: Thu, 2 May 2024 22:07:32 +0300
Subject: [PATCH 30/52] add svg loader

---
 package.json                            |   3 +-
 src/assets/css/style.scss               |   8 ++
 src/components/Breadcrumb.vue           |  74 +++++-----
 src/components/DragItem.vue             |   6 +-
 src/components/Explorer.vue             |   4 +-
 src/components/ItemIcon.vue             |  25 ++++
 src/components/{icons => }/SortIcon.vue |   0
 src/components/Statusbar.vue            |  10 +-
 src/components/Toolbar.vue              | 171 ++++++++++--------------
 src/components/icons/ItemIcon.vue       |  33 -----
 src/components/icons/about.svg          |   5 +
 src/components/icons/archive.svg        |   5 +
 src/components/icons/close.svg          |   4 +
 src/components/icons/delete.svg         |   5 +
 src/components/icons/drag.svg           |   6 +
 src/components/icons/exit.svg           |   5 +
 src/components/icons/file.svg           |   6 +
 src/components/icons/folder.svg         |   6 +
 src/components/icons/full_screen.svg    |   6 +
 src/components/icons/go_up.svg          |   5 +
 src/components/icons/grid_view.svg      |   5 +
 src/components/icons/home.svg           |   4 +
 src/components/icons/list_view.svg      |   5 +
 src/components/icons/loading.svg        |   4 +
 src/components/icons/magnifier.svg      |   6 +
 src/components/icons/minimize.svg       |   6 +
 src/components/icons/new_file.svg       |   6 +
 src/components/icons/new_folder.svg     |   6 +
 src/components/icons/rename.svg         |   5 +
 src/components/icons/search.svg         |   5 +
 src/components/icons/storage.svg        |   5 +
 src/components/icons/unarchive.svg      |   5 +
 src/components/icons/upload.svg         |   5 +
 vite.config.ts                          |   2 +
 34 files changed, 272 insertions(+), 184 deletions(-)
 create mode 100644 src/components/ItemIcon.vue
 rename src/components/{icons => }/SortIcon.vue (100%)
 delete mode 100644 src/components/icons/ItemIcon.vue
 create mode 100644 src/components/icons/about.svg
 create mode 100644 src/components/icons/archive.svg
 create mode 100644 src/components/icons/close.svg
 create mode 100644 src/components/icons/delete.svg
 create mode 100644 src/components/icons/drag.svg
 create mode 100644 src/components/icons/exit.svg
 create mode 100644 src/components/icons/file.svg
 create mode 100644 src/components/icons/folder.svg
 create mode 100644 src/components/icons/full_screen.svg
 create mode 100644 src/components/icons/go_up.svg
 create mode 100644 src/components/icons/grid_view.svg
 create mode 100644 src/components/icons/home.svg
 create mode 100644 src/components/icons/list_view.svg
 create mode 100644 src/components/icons/loading.svg
 create mode 100644 src/components/icons/magnifier.svg
 create mode 100644 src/components/icons/minimize.svg
 create mode 100644 src/components/icons/new_file.svg
 create mode 100644 src/components/icons/new_folder.svg
 create mode 100644 src/components/icons/rename.svg
 create mode 100644 src/components/icons/search.svg
 create mode 100644 src/components/icons/storage.svg
 create mode 100644 src/components/icons/unarchive.svg
 create mode 100644 src/components/icons/upload.svg

diff --git a/package.json b/package.json
index 8676ce38..bfda5973 100755
--- a/package.json
+++ b/package.json
@@ -37,7 +37,8 @@
     "postcss": "^8.4.16",
     "rollup-plugin-copy": "^3.5.0",
     "tailwindcss": "^3.1.8",
-    "vite": "^5.0.12"
+    "vite": "^5.0.12",
+    "vite-svg-loader": "^5.1.0"
   },
   "dependencies": {
     "@uppy/core": "^3.8.0",
diff --git a/src/assets/css/style.scss b/src/assets/css/style.scss
index 46a63034..5a94aaac 100644
--- a/src/assets/css/style.scss
+++ b/src/assets/css/style.scss
@@ -67,6 +67,14 @@
       @apply p-1 leading-6 hover:bg-neutral-100 bg-neutral-50 dark:bg-gray-800 dark:hover:bg-gray-700/10 flex items-center dark:border-gray-700
     }
 
+    .vf-toolbar-icon{
+      @apply cursor-pointer stroke-gray-500 hover:stroke-cyan-700 dark:stroke-gray-400 dark:hover:stroke-gray-300;
+    }
+
+    .vf-toolbar-icon-disabled {
+      @apply cursor-not-allowed stroke-gray-200  dark:stroke-gray-700;
+    }
+
     .vf-explorer-selected {
       @apply bg-neutral-100 border border-neutral-300 dark:bg-slate-700 dark:border-gray-900 dark:border-slate-800 #{!important};
     }
diff --git a/src/components/Breadcrumb.vue b/src/components/Breadcrumb.vue
index 00c448cd..f70a581d 100644
--- a/src/components/Breadcrumb.vue
+++ b/src/components/Breadcrumb.vue
@@ -1,63 +1,51 @@
 <template>
-  <div class="flex p-1.5 bg-neutral-100 dark:bg-gray-800 border-t border-b border-neutral-300 dark:border-gray-700/50 items-center select-none text-sm">
+  <div
+      class="flex p-1.5 bg-neutral-100 dark:bg-gray-800 border-t border-b border-neutral-300 dark:border-gray-700/50 items-center select-none text-sm">
     <span :aria-label="t('Go up a directory')" data-microtip-position="bottom-right" role="tooltip">
-      <svg
+      <GoUpSVG
           @dragover="handleDragOver($event)"
           @dragleave="handleDragLeave($event)"
           @drop="handleDropZone($event)"
           @click="!isGoUpAvailable() || app.emitter.emit('vf-fetch', {params:{q: 'index', adapter: app.data.adapter, path:breadcrumb[breadcrumb.length-2]?.path ?? (app.adapter + '://')}} )"
-          class="h-6 w-6 p-0.5 rounded"
           :class="isGoUpAvailable() ? 'text-slate-700 hover:bg-neutral-300 dark:text-neutral-200 dark:hover:bg-gray-700 cursor-pointer' : 'text-gray-400 dark:text-neutral-500'"
-          xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 20 20" fill="currentColor">
-        <path fill-rule="evenodd" d="M5.293 9.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 7.414V15a1 1 0 11-2 0V7.414L6.707 9.707a1 1 0 01-1.414 0z" clip-rule="evenodd" />
-      </svg>
+      />
     </span>
     <span :aria-label="t('Refresh')" data-microtip-position="bottom-right" role="tooltip" v-if="!app.loading">
-      <svg @click="app.emitter.emit('vf-fetch',{params:{q: 'index', adapter: app.data.adapter, path: app.data.dirname}} );" class="h-6 w-6 p-1 rounded text-slate-700 hover:bg-neutral-300 dark:text-neutral-200 dark:hover:bg-gray-700 cursor-pointer" xmlns="http://www.w3.org/2000/svg" viewBox="-40 -40 580 580" fill="currentColor">
-        <path d="M463.5 224H472c13.3 0 24-10.7 24-24V72c0-9.7-5.8-18.5-14.8-22.2s-19.3-1.7-26.2 5.2L413.4 96.6c-87.6-86.5-228.7-86.2-315.8 1c-87.5 87.5-87.5 229.3 0 316.8s229.3 87.5 316.8 0c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0c-62.5 62.5-163.8 62.5-226.3 0s-62.5-163.8 0-226.3c62.2-62.2 162.7-62.5 225.3-1L327 183c-6.9 6.9-8.9 17.2-5.2 26.2s12.5 14.8 22.2 14.8H463.5z"></path>
-      </svg>
+      <HomeSVG
+          @click="app.emitter.emit('vf-fetch',{params:{q: 'index', adapter: app.data.adapter, path: app.data.dirname}} );"/>
     </span>
     <span :aria-label="t('Cancel')" data-microtip-position="bottom-right" role="tooltip" v-else>
-      <svg @click="app.emitter.emit('vf-fetch-abort')" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6 p-1 rounded text-slate-700 hover:bg-neutral-300 dark:text-neutral-200 dark:hover:bg-gray-700 cursor-pointer">
-        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
-      </svg>
+      <CloseSVG @click="app.emitter.emit('vf-fetch-abort')"/>
     </span>
 
-    <div v-if="!searchMode" class="group flex bg-white dark:bg-gray-700 items-center rounded p-1 ml-2 w-full" @click.self="enterSearchMode">
-      <svg
+    <div v-if="!searchMode" class="group flex bg-white dark:bg-gray-700 items-center rounded p-1 ml-2 w-full"
+         @click.self="enterSearchMode">
+      <SearchSVG
           @dragover="handleDragOver($event)"
           @dragleave="handleDragLeave($event)"
           @drop="handleDropZone($event, -1)"
-          @click="app.emitter.emit('vf-fetch', {params:{q: 'index', adapter: app.data.adapter}})"
-           class="h-6 w-6 p-1 rounded text-slate-700 hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-gray-800 cursor-pointer"
-           xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 20 20" fill="currentColor">
-        <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
-      </svg>
+          @click="app.emitter.emit('vf-fetch', {params:{q: 'index', adapter: app.data.adapter}})"/>
 
       <div class="flex leading-6">
         <div v-for="(item, index) in breadcrumb" :key="index">
           <span class="text-neutral-300 dark:text-gray-600 mx-0.5">/</span>
           <span
-          @dragover="(index === breadcrumb.length - 1) || handleDragOver($event)"
-          @dragleave="(index === breadcrumb.length - 1) || handleDragLeave($event)"
-          @drop="(index === breadcrumb.length - 1) || handleDropZone($event, index)"
-          class="px-1.5 py-1 text-slate-700 dark:text-slate-200 hover:bg-neutral-100 dark:hover:bg-gray-800 rounded cursor-pointer" :title="item.basename" @click="app.emitter.emit('vf-fetch', {params:{q: 'index', adapter: app.data.adapter, path:item.path}})">{{ item.name }}</span>
+              @dragover="(index === breadcrumb.length - 1) || handleDragOver($event)"
+              @dragleave="(index === breadcrumb.length - 1) || handleDragLeave($event)"
+              @drop="(index === breadcrumb.length - 1) || handleDropZone($event, index)"
+              class="px-1.5 py-1 text-slate-700 dark:text-slate-200 hover:bg-neutral-100 dark:hover:bg-gray-800 rounded cursor-pointer"
+              :title="item.basename"
+              @click="app.emitter.emit('vf-fetch', {params:{q: 'index', adapter: app.data.adapter, path:item.path}})">{{
+              item.name
+            }}</span>
         </div>
       </div>
 
-      <svg class="animate-spin p-1 h-6 w-6 text-white ml-auto" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"  v-if="app.loading">
-        <circle class="opacity-25 stroke-blue-900 dark:stroke-blue-100" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-        <path class="opacity-75" fill="currentColor"
-              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-      </svg>
+      <LoadingSVG v-if="app.loading"/>
     </div>
     <div v-else class="relative flex bg-white dark:bg-gray-700 justify-between items-center rounded p-1 ml-2 w-full">
       <div>
-        <svg
-           class="h-6 w-6 p-1 m-auto stroke-gray-400 fill-gray-100 dark:stroke-gray-400 dark:fill-gray-400/20"
-           xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 20 20" fill="currentColor">
-        <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
-      </svg>
+        <MagnifierSVG/>
       </div>
       <input
           ref="searchInput"
@@ -67,12 +55,7 @@
           :placeholder="t('Search anything..')"
           class="w-full pb-0 px-1 border-0 text-base ring-0 outline-0 text-gray-600 focus:ring-transparent focus:border-transparent dark:focus:ring-transparent dark:focus:border-transparent dark:text-gray-300 bg-transparent"
           type="text">
-      <svg
-          class="w-6 h-6 cursor-pointer"
-          @click="exitSearchMode"
-          xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
-      </svg>
+      <ExitSVG @click="exitSearchMode"/>
     </div>
   </div>
 </template>
@@ -83,6 +66,13 @@ import {inject, nextTick, ref, watch} from 'vue';
 import useDebouncedRef from '../composables/useDebouncedRef.js';
 import {FEATURES} from "./features.js";
 import ModalMove from "./modals/ModalMove.vue";
+import HomeSVG from "./icons/home.svg";
+import GoUpSVG from "./icons/go_up.svg";
+import CloseSVG from "./icons/close.svg";
+import SearchSVG from "./icons/search.svg";
+import MagnifierSVG from "./icons/magnifier.svg";
+import LoadingSVG from "./icons/loading.svg";
+import ExitSVG from "./icons/exit.svg";
 
 const dirname = ref(null);
 const breadcrumb = ref([]);
@@ -172,7 +162,7 @@ const handleDragOver = (e) => {
 
   if (isGoUpAvailable()) {
     e.dataTransfer.dropEffect = 'copy';
-    e.currentTarget.classList.add('bg-blue-200','dark:bg-slate-500');
+    e.currentTarget.classList.add('bg-blue-200', 'dark:bg-slate-500');
   } else {
     e.dataTransfer.dropEffect = 'none';
     e.dataTransfer.effectAllowed = 'none';
@@ -181,10 +171,10 @@ const handleDragOver = (e) => {
 const handleDragLeave = (e) => {
   e.preventDefault();
 
-  e.currentTarget.classList.remove('bg-blue-200','dark:bg-slate-500');
+  e.currentTarget.classList.remove('bg-blue-200', 'dark:bg-slate-500');
 
   if (isGoUpAvailable()) {
-    e.currentTarget.classList.remove('bg-blue-200','dark:bg-slate-500');
+    e.currentTarget.classList.remove('bg-blue-200', 'dark:bg-slate-500');
   }
 };
 
diff --git a/src/components/DragItem.vue b/src/components/DragItem.vue
index 80174c07..12bd57c1 100644
--- a/src/components/DragItem.vue
+++ b/src/components/DragItem.vue
@@ -1,14 +1,14 @@
 <template>
   <div class="absolute -z-50 -top-96">
-    <svg xmlns="http://www.w3.org/2000/svg" class="absolute h-6 w-6 md:h-12 md:w-12 m-auto stroke-neutral-500 fill-white dark:fill-gray-700 dark:stroke-gray-600 z-10" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
-      <path stroke-linecap="round" stroke-linejoin="round" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
-    </svg>
+    <DragSVG />
     <div class="text-neutral-700 dark:text-neutral-300 p-1 absolute text-center top-4 right-[-2rem] md:top-5 md:right-[-2.4rem] z-20 text-xs">{{ props.count }}</div>
   </div>
 </template>
 
 
 <script setup>
+import { defineProps } from 'vue';
+import DragSVG from './icons/drag.svg';
 const props = defineProps({
   count: {
     type: Number,
diff --git a/src/components/Explorer.vue b/src/components/Explorer.vue
index cfa7309f..800ffe5c 100644
--- a/src/components/Explorer.vue
+++ b/src/components/Explorer.vue
@@ -77,8 +77,8 @@ import datetimestring from '../utils/datetimestring.js';
 import title_shorten from "../utils/title_shorten.js";
 import Toast from './Toast.vue';
 import LazyLoad from 'vanilla-lazyload';
-import SortIcon from "./icons/SortIcon.vue";
-import ItemIcon from "./icons/ItemIcon.vue";
+import SortIcon from "./SortIcon.vue";
+import ItemIcon from "./ItemIcon.vue";
 import DragItem from "./DragItem.vue";
 import Item from "./Item.vue";
 
diff --git a/src/components/ItemIcon.vue b/src/components/ItemIcon.vue
new file mode 100644
index 00000000..12612981
--- /dev/null
+++ b/src/components/ItemIcon.vue
@@ -0,0 +1,25 @@
+<template>
+  <span>
+    <FileSVG  v-if="type === 'dir'" :class="{'h-5 w-5': small, 'h-10 w-10 md:h-12 md:w-12 m-auto': !small}" />
+    <FolderSVG  v-else :class="{'h-5 w-5': small, 'h-10 w-10 md:h-12 md:w-12 m-auto': !small}" />
+  </span>
+</template>
+
+<script setup>
+import {defineProps} from "vue";
+import FileSVG from './icons/file.svg';
+import FolderSVG from './icons/folder.svg';
+
+defineProps({
+  type: {
+    type: String,
+    required: true
+  },
+
+  small: {
+    type: Boolean,
+    default: false
+  }
+})
+
+</script>
diff --git a/src/components/icons/SortIcon.vue b/src/components/SortIcon.vue
similarity index 100%
rename from src/components/icons/SortIcon.vue
rename to src/components/SortIcon.vue
diff --git a/src/components/Statusbar.vue b/src/components/Statusbar.vue
index 37e09e67..73b7377f 100644
--- a/src/components/Statusbar.vue
+++ b/src/components/Statusbar.vue
@@ -2,9 +2,7 @@
   <div class="p-1 text-xs border-t border-neutral-300 dark:border-gray-700/50 flex justify-between select-none">
     <div class="flex leading-5 items-center">
       <div class="mx-2" :aria-label="t('Storage')" data-microtip-position="top-right" role="tooltip">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
-          <path stroke-linecap="round" stroke-linejoin="round" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4" />
-        </svg>
+        <StorageSVG/>
       </div>
       <select v-model="app.adapter" @change="handleStorageSelect" class="py-0.5 text-sm text-slate-500 border dark:border-gray-600 dark:text-neutral-50 dark:bg-gray-700 rounded pl-2 pr-8">
         <option v-for="storage in app.data.storages" :value="storage">
@@ -25,9 +23,7 @@
               v-if="app.selectButton.active" @click="app.selectButton.click(ds.getSelected(), $event)">{{ t("Select") }}</button>
 
       <span class="mr-1" :aria-label="t('About')" data-microtip-position="top-left" role="tooltip" @click="app.modal.open(ModalAbout)">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 stroke-slate-500 cursor-pointer" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-          <path stroke-linecap="round" stroke-linejoin="round" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-        </svg>
+        <AboutSVG />
       </span>
     </div>
   </div>
@@ -36,6 +32,8 @@
 <script setup>
 import {computed, inject, ref} from 'vue';
 import ModalAbout from "./modals/ModalAbout.vue";
+import StorageSVG from "./icons/storage.svg";
+import AboutSVG from "./icons/about.svg";
 
 const app = inject('ServiceContainer');
 const {t} = app.i18n;
diff --git a/src/components/Toolbar.vue b/src/components/Toolbar.vue
index 86a547f0..d54599bf 100644
--- a/src/components/Toolbar.vue
+++ b/src/components/Toolbar.vue
@@ -1,115 +1,80 @@
 <template>
   <div class="border-neutral-300 flex justify-between items-center py-1 text-sm">
     <div class="flex text-center" v-if="!searchQuery.length">
-        <div class="mx-1.5"
-             :aria-label="t('New Folder')" data-microtip-position="bottom-right" role="tooltip"
-             v-if="app.features.includes(FEATURES.NEW_FOLDER)"
-             @click="app.modal.open(ModalNewFolder, {items: ds.getSelected()})">
-          <svg xmlns="http://www.w3.org/2000/svg"
-               class="h-6 w-6 md:h-8 md:w-8 m-auto cursor-pointer stroke-gray-500 hover:stroke-cyan-700 dark:stroke-gray-400 dark:hover:stroke-gray-300" fill="none" viewBox="0 0 24 24" stroke="none" stroke-width="1.5">
-              <path stroke-linecap="round" stroke-linejoin="round" d="M12 10.5v6m3-3H9m4.06-7.19l-2.12-2.12a1.5 1.5 0 00-1.061-.44H4.5A2.25 2.25 0 002.25 6v12a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9a2.25 2.25 0 00-2.25-2.25h-5.379a1.5 1.5 0 01-1.06-.44z" />
-          </svg>
-        </div>
-
-        <div class="mx-1.5"
-             :aria-label="t('New File')" data-microtip-position="bottom" role="tooltip"
-             v-if="app.features.includes(FEATURES.NEW_FILE)"
-             @click="app.modal.open(ModalNewFile, {items: ds.getSelected()})">
-          <svg xmlns="http://www.w3.org/2000/svg"
-            class="h-6 w-6 md:h-8 md:w-8 m-auto cursor-pointer stroke-gray-500 hover:stroke-cyan-700 dark:stroke-gray-400 dark:hover:stroke-gray-300" fill="none" viewBox="0 0 24 24" stroke="none" stroke-width="1.5">
-             <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m3.75 9v6m3-3H9m1.5-12H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
-          </svg>
-        </div>
-
-        <div class="mx-1.5"
-             :aria-label="t('Rename')" data-microtip-position="bottom" role="tooltip"
-             v-if="app.features.includes(FEATURES.RENAME)"
-             @click="(ds.getCount() !== 1) || app.modal.open(ModalRename, {items: ds.getSelected()})">
-          <svg xmlns="http://www.w3.org/2000/svg"
-                :class="(ds.getCount() === 1) ? 'cursor-pointer stroke-gray-500 hover:stroke-cyan-700 dark:stroke-gray-400 dark:hover:stroke-gray-300' : 'stroke-gray-200  dark:stroke-gray-700'"
-               class="h-6 w-6 md:h-8 md:w-8 m-auto" fill="none" viewBox="0 0 24 24" stroke="none" stroke-width="1.5">
-              <path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
-          </svg>
-        </div>
-
-        <div class="mx-1.5"
-             :aria-label="t('Delete')" data-microtip-position="bottom" role="tooltip"
-             v-if="app.features.includes(FEATURES.DELETE)"
-             @click="(!ds.getCount()) || app.modal.open(ModalDelete, {items: ds.getSelected()})">
-            <svg xmlns="http://www.w3.org/2000/svg"
-                 :class="(ds.getCount()) ? 'cursor-pointer stroke-gray-500 hover:stroke-cyan-700 dark:stroke-gray-400 dark:hover:stroke-gray-300' : 'stroke-gray-200  dark:stroke-gray-700'"
-                 class="h-6 w-6 md:h-8 md:w-8 m-auto" fill="none" viewBox="0 0 24 24" stroke="none" stroke-width="1.5">
-              <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
-            </svg>
-        </div>
-
-        <div class="mx-1.5"
-             :aria-label="t('Upload')" data-microtip-position="bottom" role="tooltip"
-             v-if="app.features.includes(FEATURES.UPLOAD)"
-             @click="app.modal.open(ModalUpload, {items: ds.getSelected()})">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 md:h-8 md:w-8 m-auto cursor-pointer stroke-gray-500 hover:stroke-cyan-700 dark:stroke-gray-400 dark:hover:stroke-gray-300" fill="none" viewBox="0 0 24 24" stroke="none" stroke-width="1.5">
-              <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" />
-          </svg>
-        </div>
-
-        <div class="mx-1.5" v-if="app.features.includes(FEATURES.UNARCHIVE) && ds.getCount() === 1 && ds.getSelected()[0].mime_type === 'application/zip'"
-             :aria-label="t('Unarchive')" data-microtip-position="bottom" role="tooltip"
-              @click="(!ds.getCount()) || app.modal.open(ModalUnarchive, {items: ds.getSelected()})">
-          <svg xmlns="http://www.w3.org/2000/svg"
-               :class="(ds.getCount()) ? 'cursor-pointer stroke-gray-500 hover:stroke-cyan-700 dark:stroke-gray-400 dark:hover:stroke-gray-300' : 'stroke-gray-200  dark:stroke-gray-700'"
-               class="h-6 w-6 md:h-8 md:w-8 m-auto" fill="none" viewBox="0 0 24 24" stroke="none" stroke-width="1.5">
-              <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5m6 4.125l2.25 2.25m0 0l2.25 2.25M12 13.875l2.25-2.25M12 13.875l-2.25 2.25M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z" />
-          </svg>
-        </div>
-        <div class="mx-1.5" v-if="app.features.includes(FEATURES.ARCHIVE)"
-             :aria-label="t('Archive')" data-microtip-position="bottom" role="tooltip"
-              @click="(!ds.getCount()) || app.modal.open(ModalArchive, {items: ds.getSelected()})">
-          <svg xmlns="http://www.w3.org/2000/svg"
-               :class="(ds.getCount()) ? 'cursor-pointer stroke-gray-500 hover:stroke-cyan-700 dark:stroke-gray-400 dark:hover:stroke-gray-300' : 'stroke-gray-200  dark:stroke-gray-700'"
-               class="h-6 w-6 md:h-8 md:w-8 m-auto" fill="none" viewBox="0 0 24 24" stroke="none" stroke-width="1.5">
-              <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z" />
-          </svg>
-        </div>
-
+      <div class="mx-1.5"
+           :aria-label="t('New Folder')" data-microtip-position="bottom-right" role="tooltip"
+           v-if="app.features.includes(FEATURES.NEW_FOLDER)"
+           @click="app.modal.open(ModalNewFolder, {items: ds.getSelected()})">
+        <NewFolderSVG/>
+      </div>
+
+      <div class="mx-1.5"
+           :aria-label="t('New File')" data-microtip-position="bottom" role="tooltip"
+           v-if="app.features.includes(FEATURES.NEW_FILE)"
+           @click="app.modal.open(ModalNewFile, {items: ds.getSelected()})">
+        <NewFileSVG/>
+      </div>
+
+      <div class="mx-1.5"
+           :aria-label="t('Rename')" data-microtip-position="bottom" role="tooltip"
+           v-if="app.features.includes(FEATURES.RENAME)"
+           @click="(ds.getCount() !== 1) || app.modal.open(ModalRename, {items: ds.getSelected()})">
+        <RenameSVG :class="(ds.getCount() === 1) ? 'vf-toolbar-icon' : 'vf-toolbar-icon-disabled'"/>
+      </div>
+
+      <div class="mx-1.5"
+           :aria-label="t('Delete')" data-microtip-position="bottom" role="tooltip"
+           v-if="app.features.includes(FEATURES.DELETE)"
+           @click="(!ds.getCount()) || app.modal.open(ModalDelete, {items: ds.getSelected()})">
+        <DeleteSVG :class="(ds.getCount()) ? 'vf-toolbar-icon' : 'vf-toolbar-icon-disabled'"/>
+      </div>
+
+      <div class="mx-1.5"
+           :aria-label="t('Upload')" data-microtip-position="bottom" role="tooltip"
+           v-if="app.features.includes(FEATURES.UPLOAD)"
+           @click="app.modal.open(ModalUpload, {items: ds.getSelected()})">
+        <UploadSVG/>
+      </div>
+
+      <div class="mx-1.5"
+           v-if="app.features.includes(FEATURES.UNARCHIVE) && ds.getCount() === 1 && ds.getSelected()[0].mime_type === 'application/zip'"
+           :aria-label="t('Unarchive')" data-microtip-position="bottom" role="tooltip"
+           @click="(!ds.getCount()) || app.modal.open(ModalUnarchive, {items: ds.getSelected()})">
+        <UnarchiveSVG :class="(ds.getCount()) ? 'vf-toolbar-icon' : 'vf-toolbar-icon-disabled'"/>
+      </div>
+      <div class="mx-1.5" v-if="app.features.includes(FEATURES.ARCHIVE)"
+           :aria-label="t('Archive')" data-microtip-position="bottom" role="tooltip"
+           @click="(!ds.getCount()) || app.modal.open(ModalArchive, {items: ds.getSelected()})">
+        <ArchiveSVG :class="(ds.getCount()) ? 'vf-toolbar-icon' : 'vf-toolbar-icon-disabled'"/>
+      </div>
     </div>
 
     <div class="flex text-center" v-else>
-      <div class="pl-2"> {{ t('Search results for') }} <span class="dark:bg-gray-700 bg-gray-200 text-xs px-2 py-1 rounded">{{ searchQuery }}</span></div>
-       <svg
-            class="animate-spin p-0.5 h-5 w-5 text-white ml-auto" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"  v-if="app.loading">
-        <circle class="opacity-25 stroke-blue-900 dark:stroke-blue-100" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-        <path class="opacity-75" fill="currentColor"
-              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-      </svg>
+      <div class="pl-2"> {{ t('Search results for') }} <span
+          class="dark:bg-gray-700 bg-gray-200 text-xs px-2 py-1 rounded">{{ searchQuery }}</span></div>
+      <LoadingSVG v-if="app.loading"/>
     </div>
 
     <div class="flex text-center items-center justify-end">
-         <div v-if="app.features.includes(FEATURES.FULL_SCREEN)" class="mx-1.5" :aria-label="t('Toggle Full Screen')" data-microtip-position="bottom-left" role="tooltip"
-               @click="toggleFullScreen">
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 md:h-8 md:w-8 m-auto cursor-pointer stroke-gray-500 hover:stroke-cyan-700 dark:stroke-gray-400 dark:hover:stroke-gray-300" fill="none" viewBox="0 0 24 24" stroke="none" stroke-width="1.5">
-                <path v-if="app.fullScreen" stroke-linecap="round" stroke-linejoin="round" d="M9 9V4.5M9 9H4.5M9 9L3.75 3.75M9 15v4.5M9 15H4.5M9 15l-5.25 5.25M15 9h4.5M15 9V4.5M15 9l5.25-5.25M15 15h4.5M15 15v4.5m0-4.5l5.25 5.25" />
-                <path v-else stroke-linecap="round" stroke-linejoin="round" d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15" />
-            </svg>
-          </div>
-
-        <div class="mx-1.5"
-             :aria-label="t('Change View')" data-microtip-position="bottom-left" role="tooltip"
-             @click="searchQuery.length || toggleView()">
-
-          <svg xmlns="http://www.w3.org/2000/svg"
-               :class="(!searchQuery.length) ? 'cursor-pointer stroke-gray-500 hover:stroke-cyan-700 dark:stroke-gray-400 dark:hover:stroke-gray-300' : 'stroke-gray-200  dark:stroke-gray-700'"
-               class="h-6 w-6 md:h-8 md:w-8 m-auto" fill="none" viewBox="0 0 24 24" stroke="none" stroke-width="1.5">
-              <path v-if="app.view === 'grid'" stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z" />
-              <path v-if="app.view === 'list'"  stroke-linecap="round" stroke-linejoin="round" d="M3.75 12h16.5m-16.5 3.75h16.5M3.75 19.5h16.5M5.625 4.5h12.75a1.875 1.875 0 010 3.75H5.625a1.875 1.875 0 010-3.75z" />
-          </svg>
-        </div>
+      <div v-if="app.features.includes(FEATURES.FULL_SCREEN)" @click="toggleFullScreen"
+           class="mx-1.5" :aria-label="t('Toggle Full Screen')" data-microtip-position="bottom-left" role="tooltip">
+        <MinimizeSVG v-if="app.fullScreen"/>
+        <FullscreenSVG v-else/>
+      </div>
+
+      <div class="mx-1.5"
+           :aria-label="t('Change View')" data-microtip-position="bottom-left" role="tooltip"
+           @click="searchQuery.length || toggleView()">
+          <GridViewSVG v-if="app.view === 'grid'" :class="(!searchQuery.length) ? 'vf-toolbar-icon' : 'vf-toolbar-icon-disabled'"/>
+          <ListViewSVG v-if="app.view === 'list'" :class="(!searchQuery.length) ? 'vf-toolbar-icon' : 'vf-toolbar-icon-disabled'"/>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup>
 import {inject, ref} from 'vue';
-import { FEATURES } from "./features.js";
+import {FEATURES} from "./features.js";
 import ModalNewFolder from "./modals/ModalNewFolder.vue";
 import ModalNewFile from "./modals/ModalNewFile.vue";
 import ModalRename from "./modals/ModalRename.vue";
@@ -117,6 +82,18 @@ import ModalDelete from "./modals/ModalDelete.vue";
 import ModalUpload from "./modals/ModalUpload.vue";
 import ModalUnarchive from "./modals/ModalUnarchive.vue";
 import ModalArchive from "./modals/ModalArchive.vue";
+import NewFolderSVG from "./icons/new_folder.svg";
+import NewFileSVG from "./icons/new_file.svg";
+import RenameSVG from "./icons/rename.svg";
+import DeleteSVG from "./icons/delete.svg";
+import UploadSVG from "./icons/upload.svg";
+import ArchiveSVG from "./icons/archive.svg";
+import UnarchiveSVG from "./icons/unarchive.svg";
+import LoadingSVG from "./icons/loading.svg";
+import FullscreenSVG from "./icons/full_screen.svg";
+import MinimizeSVG from "./icons/minimize.svg";
+import GridViewSVG from "./icons/grid_view.svg";
+import ListViewSVG from "./icons/list_view.svg";
 
 const app = inject('ServiceContainer');
 const {setStore} = app.storage;
diff --git a/src/components/icons/ItemIcon.vue b/src/components/icons/ItemIcon.vue
deleted file mode 100644
index 0fc17e51..00000000
--- a/src/components/icons/ItemIcon.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<template>
-  <span>
-    <svg v-if="type === 'dir'" xmlns="http://www.w3.org/2000/svg"
-         :class="{'h-5 w-5': small, 'h-10 w-10 md:h-12 md:w-12 m-auto': !small}"
-         class="text-neutral-500 fill-sky-500 stroke-sky-500 dark:fill-slate-500 dark:stroke-slate-500"
-         fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
-      <path stroke-linecap="round" stroke-linejoin="round"
-            d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/>
-    </svg>
-    <svg v-else xmlns="http://www.w3.org/2000/svg"
-         :class="{'h-5 w-5': small, 'h-10 w-10 md:h-12 md:w-12 m-auto': !small}"
-         class="text-neutral-500" fill="none" viewBox="0 0 24 24"
-         stroke="currentColor" stroke-width="1">
-      <path stroke-linecap="round" stroke-linejoin="round"
-            d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"/>
-    </svg>
-  </span>
-</template>
-<script setup>
-
-defineProps({
-  type: {
-    type: String,
-    required: true
-  },
-
-  small: {
-    type: Boolean,
-    default: false
-  }
-})
-
-</script>
diff --git a/src/components/icons/about.svg b/src/components/icons/about.svg
new file mode 100644
index 00000000..f4ab1903
--- /dev/null
+++ b/src/components/icons/about.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 stroke-slate-500 cursor-pointer" fill="none" viewBox="0 0 24 24"
+     stroke="currentColor" stroke-width="2">
+    <path stroke-linecap="round" stroke-linejoin="round"
+          d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+</svg>
diff --git a/src/components/icons/archive.svg b/src/components/icons/archive.svg
new file mode 100644
index 00000000..d8be2433
--- /dev/null
+++ b/src/components/icons/archive.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     class="h-6 w-6 md:h-8 md:w-8 m-auto" fill="none" viewBox="0 0 24 24" stroke="none" stroke-width="1.5">
+    <path stroke-linecap="round" stroke-linejoin="round"
+          d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z"/>
+</svg>
diff --git a/src/components/icons/close.svg b/src/components/icons/close.svg
new file mode 100644
index 00000000..1f3f9212
--- /dev/null
+++ b/src/components/icons/close.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
+     class="h-6 w-6 p-1 rounded text-slate-700 hover:bg-neutral-300 dark:text-neutral-200 dark:hover:bg-gray-700 cursor-pointer">
+    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
+</svg>
diff --git a/src/components/icons/delete.svg b/src/components/icons/delete.svg
new file mode 100644
index 00000000..c2c19b8f
--- /dev/null
+++ b/src/components/icons/delete.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     class="h-6 w-6 md:h-8 md:w-8 m-auto" fill="none" viewBox="0 0 24 24" stroke="none" stroke-width="1.5">
+    <path stroke-linecap="round" stroke-linejoin="round"
+          d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"/>
+</svg>
diff --git a/src/components/icons/drag.svg b/src/components/icons/drag.svg
new file mode 100644
index 00000000..c3040f6e
--- /dev/null
+++ b/src/components/icons/drag.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     class="absolute h-6 w-6 md:h-12 md:w-12 m-auto stroke-neutral-500 fill-white dark:fill-gray-700 dark:stroke-gray-600 z-10"
+     fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
+    <path stroke-linecap="round" stroke-linejoin="round"
+          d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"/>
+</svg>
diff --git a/src/components/icons/exit.svg b/src/components/icons/exit.svg
new file mode 100644
index 00000000..00748f56
--- /dev/null
+++ b/src/components/icons/exit.svg
@@ -0,0 +1,5 @@
+<svg
+        class="w-6 h-6 cursor-pointer"
+        xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
+</svg>
diff --git a/src/components/icons/file.svg b/src/components/icons/file.svg
new file mode 100644
index 00000000..f381f4ff
--- /dev/null
+++ b/src/components/icons/file.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     class="text-neutral-500 fill-sky-500 stroke-sky-500 dark:fill-slate-500 dark:stroke-slate-500"
+     fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
+    <path stroke-linecap="round" stroke-linejoin="round"
+          d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/>
+</svg>
diff --git a/src/components/icons/folder.svg b/src/components/icons/folder.svg
new file mode 100644
index 00000000..4e79e7c2
--- /dev/null
+++ b/src/components/icons/folder.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     class="text-neutral-500" fill="none" viewBox="0 0 24 24"
+     stroke="currentColor" stroke-width="1">
+    <path stroke-linecap="round" stroke-linejoin="round"
+          d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"/>
+</svg>
diff --git a/src/components/icons/full_screen.svg b/src/components/icons/full_screen.svg
new file mode 100644
index 00000000..6f522890
--- /dev/null
+++ b/src/components/icons/full_screen.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 md:h-8 md:w-8 m-auto vf-toolbar-icon" fill="none"
+     viewBox="0 0 24 24" stroke="none" stroke-width="1.5">
+    <path stroke-linecap="round" stroke-linejoin="round"
+          d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15"/>
+</svg>
+
diff --git a/src/components/icons/go_up.svg b/src/components/icons/go_up.svg
new file mode 100644
index 00000000..94ff02b9
--- /dev/null
+++ b/src/components/icons/go_up.svg
@@ -0,0 +1,5 @@
+<svg class="h-6 w-6 p-0.5 rounded"
+     xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+    <path fill-rule="evenodd" clip-rule="evenodd"
+          d="M5.293 9.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 7.414V15a1 1 0 11-2 0V7.414L6.707 9.707a1 1 0 01-1.414 0z"/>
+</svg>
diff --git a/src/components/icons/grid_view.svg b/src/components/icons/grid_view.svg
new file mode 100644
index 00000000..bb3ec16b
--- /dev/null
+++ b/src/components/icons/grid_view.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     class="h-6 w-6 md:h-8 md:w-8 m-auto" fill="none" viewBox="0 0 24 24" stroke="none" stroke-width="1.5">
+    <path stroke-linecap="round" stroke-linejoin="round"
+          d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z"/>
+</svg>
diff --git a/src/components/icons/home.svg b/src/components/icons/home.svg
new file mode 100644
index 00000000..634f9039
--- /dev/null
+++ b/src/components/icons/home.svg
@@ -0,0 +1,4 @@
+<svg class="h-6 w-6 p-1 rounded text-slate-700 hover:bg-neutral-300 dark:text-neutral-200 dark:hover:bg-gray-700 cursor-pointer"
+     xmlns="http://www.w3.org/2000/svg" viewBox="-40 -40 580 580" fill="currentColor">
+    <path d="M463.5 224H472c13.3 0 24-10.7 24-24V72c0-9.7-5.8-18.5-14.8-22.2s-19.3-1.7-26.2 5.2L413.4 96.6c-87.6-86.5-228.7-86.2-315.8 1c-87.5 87.5-87.5 229.3 0 316.8s229.3 87.5 316.8 0c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0c-62.5 62.5-163.8 62.5-226.3 0s-62.5-163.8 0-226.3c62.2-62.2 162.7-62.5 225.3-1L327 183c-6.9 6.9-8.9 17.2-5.2 26.2s12.5 14.8 22.2 14.8H463.5z" />
+</svg>
diff --git a/src/components/icons/list_view.svg b/src/components/icons/list_view.svg
new file mode 100644
index 00000000..8dc94e1e
--- /dev/null
+++ b/src/components/icons/list_view.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     class="h-6 w-6 md:h-8 md:w-8 m-auto" fill="none" viewBox="0 0 24 24" stroke="none" stroke-width="1.5">
+    <path stroke-linecap="round" stroke-linejoin="round"
+          d="M3.75 12h16.5m-16.5 3.75h16.5M3.75 19.5h16.5M5.625 4.5h12.75a1.875 1.875 0 010 3.75H5.625a1.875 1.875 0 010-3.75z"/>
+</svg>
diff --git a/src/components/icons/loading.svg b/src/components/icons/loading.svg
new file mode 100644
index 00000000..21373371
--- /dev/null
+++ b/src/components/icons/loading.svg
@@ -0,0 +1,4 @@
+<svg  class="animate-spin p-0.5 h-5 w-5 text-white ml-auto" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+    <circle class="opacity-25 stroke-blue-900 dark:stroke-blue-100" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+</svg>
diff --git a/src/components/icons/magnifier.svg b/src/components/icons/magnifier.svg
new file mode 100644
index 00000000..188d8769
--- /dev/null
+++ b/src/components/icons/magnifier.svg
@@ -0,0 +1,6 @@
+<svg
+        class="h-6 w-6 p-1 m-auto stroke-gray-400 fill-gray-100 dark:stroke-gray-400 dark:fill-gray-400/20"
+        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+    <path stroke-linecap="round" stroke-linejoin="round"
+          d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"/>
+</svg>
diff --git a/src/components/icons/minimize.svg b/src/components/icons/minimize.svg
new file mode 100644
index 00000000..5e446df7
--- /dev/null
+++ b/src/components/icons/minimize.svg
@@ -0,0 +1,6 @@
+
+<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 md:h-8 md:w-8 m-auto vf-toolbar-icon" fill="none"
+     viewBox="0 0 24 24" stroke="none" stroke-width="1.5">
+    <path stroke-linecap="round" stroke-linejoin="round"
+          d="M9 9V4.5M9 9H4.5M9 9L3.75 3.75M9 15v4.5M9 15H4.5M9 15l-5.25 5.25M15 9h4.5M15 9V4.5M15 9l5.25-5.25M15 15h4.5M15 15v4.5m0-4.5l5.25 5.25"/>
+</svg>
diff --git a/src/components/icons/new_file.svg b/src/components/icons/new_file.svg
new file mode 100644
index 00000000..c7d6d85c
--- /dev/null
+++ b/src/components/icons/new_file.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     class="h-6 w-6 md:h-8 md:w-8 m-auto vf-toolbar-icon" fill="none" viewBox="0 0 24 24" stroke="none"
+     stroke-width="1.5">
+    <path stroke-linecap="round" stroke-linejoin="round"
+          d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m3.75 9v6m3-3H9m1.5-12H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"/>
+</svg>
diff --git a/src/components/icons/new_folder.svg b/src/components/icons/new_folder.svg
new file mode 100644
index 00000000..acab7e48
--- /dev/null
+++ b/src/components/icons/new_folder.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     class="h-6 w-6 md:h-8 md:w-8 m-auto vf-toolbar-icon" fill="none" viewBox="0 0 24 24" stroke="none"
+     stroke-width="1.5">
+    <path stroke-linecap="round" stroke-linejoin="round"
+          d="M12 10.5v6m3-3H9m4.06-7.19l-2.12-2.12a1.5 1.5 0 00-1.061-.44H4.5A2.25 2.25 0 002.25 6v12a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9a2.25 2.25 0 00-2.25-2.25h-5.379a1.5 1.5 0 01-1.06-.44z"/>
+</svg>
diff --git a/src/components/icons/rename.svg b/src/components/icons/rename.svg
new file mode 100644
index 00000000..16dbbd74
--- /dev/null
+++ b/src/components/icons/rename.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     class="h-6 w-6 md:h-8 md:w-8 m-auto" fill="none" viewBox="0 0 24 24" stroke="none" stroke-width="1.5">
+    <path stroke-linecap="round" stroke-linejoin="round"
+          d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"/>
+</svg>
diff --git a/src/components/icons/search.svg b/src/components/icons/search.svg
new file mode 100644
index 00000000..a36c492e
--- /dev/null
+++ b/src/components/icons/search.svg
@@ -0,0 +1,5 @@
+<svg
+        class="h-6 w-6 p-1 rounded text-slate-700 hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-gray-800 cursor-pointer"
+        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+    <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"/>
+</svg>
diff --git a/src/components/icons/storage.svg b/src/components/icons/storage.svg
new file mode 100644
index 00000000..2d2b3bed
--- /dev/null
+++ b/src/components/icons/storage.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"
+     stroke-width="1">
+    <path stroke-linecap="round" stroke-linejoin="round"
+          d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4"/>
+</svg>
diff --git a/src/components/icons/unarchive.svg b/src/components/icons/unarchive.svg
new file mode 100644
index 00000000..c84dc3fe
--- /dev/null
+++ b/src/components/icons/unarchive.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     class="h-6 w-6 md:h-8 md:w-8 m-auto" fill="none" viewBox="0 0 24 24" stroke="none" stroke-width="1.5">
+    <path stroke-linecap="round" stroke-linejoin="round"
+          d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5m6 4.125l2.25 2.25m0 0l2.25 2.25M12 13.875l2.25-2.25M12 13.875l-2.25 2.25M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z"/>
+</svg>
diff --git a/src/components/icons/upload.svg b/src/components/icons/upload.svg
new file mode 100644
index 00000000..03f73a2e
--- /dev/null
+++ b/src/components/icons/upload.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 md:h-8 md:w-8 m-auto vf-toolbar-icon" fill="none"
+     viewBox="0 0 24 24" stroke="none" stroke-width="1.5">
+    <path stroke-linecap="round" stroke-linejoin="round"
+          d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5"/>
+</svg>
diff --git a/vite.config.ts b/vite.config.ts
index d9a1bb9b..08457303 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -2,10 +2,12 @@ import {defineConfig} from 'vite'
 import {resolve} from 'path'
 import vue from '@vitejs/plugin-vue'
 import copy from 'rollup-plugin-copy'
+import svgLoader from 'vite-svg-loader'
 
 export default defineConfig({
     plugins: [
         vue(),
+        svgLoader(),
         copy({
             targets: [
                 {src: 'src/locales/*', dest: 'dist/locales'},

From 5ebdb351bb4372dc84fae3b1638c5a717d4918b3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yusuf=20=C3=96zdemir?= <yusuf@ozdemir.be>
Date: Thu, 2 May 2024 22:21:29 +0300
Subject: [PATCH 31/52] refactor SortIcon

---
 src/components/SortIcon.vue   | 14 +++++++-------
 src/components/icons/asc.svg  |  5 +++++
 src/components/icons/desc.svg |  5 +++++
 3 files changed, 17 insertions(+), 7 deletions(-)
 create mode 100644 src/components/icons/asc.svg
 create mode 100644 src/components/icons/desc.svg

diff --git a/src/components/SortIcon.vue b/src/components/SortIcon.vue
index 09865817..61c27673 100644
--- a/src/components/SortIcon.vue
+++ b/src/components/SortIcon.vue
@@ -1,14 +1,14 @@
 <template>
   <div>
-    <svg v-if="direction==='asc'" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-      <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
-    </svg>
-    <svg v-if="direction==='desc'" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-      <path fill-rule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clip-rule="evenodd" />
-    </svg>
+    <AscSVG v-if="direction==='asc'" />
+    <DescSVG v-if="direction==='desc'" />
   </div>
 </template>
 
 <script setup>
-  defineProps({direction: String});
+import {defineProps} from 'vue';
+import AscSVG from './icons/asc.svg';
+import DescSVG from './icons/desc.svg';
+
+defineProps({direction: String});
 </script>
diff --git a/src/components/icons/asc.svg b/src/components/icons/asc.svg
new file mode 100644
index 00000000..e2accc72
--- /dev/null
+++ b/src/components/icons/asc.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+    <path fill-rule="evenodd"
+          d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+          clip-rule="evenodd"/>
+</svg>
diff --git a/src/components/icons/desc.svg b/src/components/icons/desc.svg
new file mode 100644
index 00000000..d2137ea4
--- /dev/null
+++ b/src/components/icons/desc.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+    <path fill-rule="evenodd"
+          d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z"
+          clip-rule="evenodd"/>
+</svg>

From 835b503d09abb69f7eb0d59b2400c7f5560c5fd3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yusuf=20=C3=96zdemir?= <yusuf@ozdemir.be>
Date: Thu, 2 May 2024 22:29:39 +0300
Subject: [PATCH 32/52] fix icons

---
 src/components/Breadcrumb.vue      | 10 +++++-----
 src/components/icons/home.svg      |  6 +++---
 src/components/icons/magnifier.svg |  6 ------
 src/components/icons/refresh.svg   |  4 ++++
 src/components/icons/search.svg    |  8 ++++----
 5 files changed, 16 insertions(+), 18 deletions(-)
 delete mode 100644 src/components/icons/magnifier.svg
 create mode 100644 src/components/icons/refresh.svg

diff --git a/src/components/Breadcrumb.vue b/src/components/Breadcrumb.vue
index f70a581d..ac9faa8c 100644
--- a/src/components/Breadcrumb.vue
+++ b/src/components/Breadcrumb.vue
@@ -11,7 +11,7 @@
       />
     </span>
     <span :aria-label="t('Refresh')" data-microtip-position="bottom-right" role="tooltip" v-if="!app.loading">
-      <HomeSVG
+      <RefreshSVG
           @click="app.emitter.emit('vf-fetch',{params:{q: 'index', adapter: app.data.adapter, path: app.data.dirname}} );"/>
     </span>
     <span :aria-label="t('Cancel')" data-microtip-position="bottom-right" role="tooltip" v-else>
@@ -20,7 +20,7 @@
 
     <div v-if="!searchMode" class="group flex bg-white dark:bg-gray-700 items-center rounded p-1 ml-2 w-full"
          @click.self="enterSearchMode">
-      <SearchSVG
+      <HomeSVG
           @dragover="handleDragOver($event)"
           @dragleave="handleDragLeave($event)"
           @drop="handleDropZone($event, -1)"
@@ -45,7 +45,7 @@
     </div>
     <div v-else class="relative flex bg-white dark:bg-gray-700 justify-between items-center rounded p-1 ml-2 w-full">
       <div>
-        <MagnifierSVG/>
+        <SearchSVG />
       </div>
       <input
           ref="searchInput"
@@ -66,11 +66,11 @@ import {inject, nextTick, ref, watch} from 'vue';
 import useDebouncedRef from '../composables/useDebouncedRef.js';
 import {FEATURES} from "./features.js";
 import ModalMove from "./modals/ModalMove.vue";
-import HomeSVG from "./icons/home.svg";
+import RefreshSVG from "./icons/refresh.svg";
 import GoUpSVG from "./icons/go_up.svg";
 import CloseSVG from "./icons/close.svg";
+import HomeSVG from "./icons/home.svg";
 import SearchSVG from "./icons/search.svg";
-import MagnifierSVG from "./icons/magnifier.svg";
 import LoadingSVG from "./icons/loading.svg";
 import ExitSVG from "./icons/exit.svg";
 
diff --git a/src/components/icons/home.svg b/src/components/icons/home.svg
index 634f9039..d55d466a 100644
--- a/src/components/icons/home.svg
+++ b/src/components/icons/home.svg
@@ -1,4 +1,4 @@
-<svg class="h-6 w-6 p-1 rounded text-slate-700 hover:bg-neutral-300 dark:text-neutral-200 dark:hover:bg-gray-700 cursor-pointer"
-     xmlns="http://www.w3.org/2000/svg" viewBox="-40 -40 580 580" fill="currentColor">
-    <path d="M463.5 224H472c13.3 0 24-10.7 24-24V72c0-9.7-5.8-18.5-14.8-22.2s-19.3-1.7-26.2 5.2L413.4 96.6c-87.6-86.5-228.7-86.2-315.8 1c-87.5 87.5-87.5 229.3 0 316.8s229.3 87.5 316.8 0c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0c-62.5 62.5-163.8 62.5-226.3 0s-62.5-163.8 0-226.3c62.2-62.2 162.7-62.5 225.3-1L327 183c-6.9 6.9-8.9 17.2-5.2 26.2s12.5 14.8 22.2 14.8H463.5z" />
+<svg class="h-6 w-6 p-1 rounded text-slate-700 hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-gray-800 cursor-pointer"
+     xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+    <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"/>
 </svg>
diff --git a/src/components/icons/magnifier.svg b/src/components/icons/magnifier.svg
deleted file mode 100644
index 188d8769..00000000
--- a/src/components/icons/magnifier.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<svg
-        class="h-6 w-6 p-1 m-auto stroke-gray-400 fill-gray-100 dark:stroke-gray-400 dark:fill-gray-400/20"
-        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
-    <path stroke-linecap="round" stroke-linejoin="round"
-          d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"/>
-</svg>
diff --git a/src/components/icons/refresh.svg b/src/components/icons/refresh.svg
new file mode 100644
index 00000000..634f9039
--- /dev/null
+++ b/src/components/icons/refresh.svg
@@ -0,0 +1,4 @@
+<svg class="h-6 w-6 p-1 rounded text-slate-700 hover:bg-neutral-300 dark:text-neutral-200 dark:hover:bg-gray-700 cursor-pointer"
+     xmlns="http://www.w3.org/2000/svg" viewBox="-40 -40 580 580" fill="currentColor">
+    <path d="M463.5 224H472c13.3 0 24-10.7 24-24V72c0-9.7-5.8-18.5-14.8-22.2s-19.3-1.7-26.2 5.2L413.4 96.6c-87.6-86.5-228.7-86.2-315.8 1c-87.5 87.5-87.5 229.3 0 316.8s229.3 87.5 316.8 0c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0c-62.5 62.5-163.8 62.5-226.3 0s-62.5-163.8 0-226.3c62.2-62.2 162.7-62.5 225.3-1L327 183c-6.9 6.9-8.9 17.2-5.2 26.2s12.5 14.8 22.2 14.8H463.5z" />
+</svg>
diff --git a/src/components/icons/search.svg b/src/components/icons/search.svg
index a36c492e..f5fc3bce 100644
--- a/src/components/icons/search.svg
+++ b/src/components/icons/search.svg
@@ -1,5 +1,5 @@
-<svg
-        class="h-6 w-6 p-1 rounded text-slate-700 hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-gray-800 cursor-pointer"
-        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
-    <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"/>
+<svg class="h-6 w-6 p-1 m-auto stroke-gray-400 fill-gray-100 dark:stroke-gray-400 dark:fill-gray-400/20"
+     xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+    <path stroke-linecap="round" stroke-linejoin="round"
+          d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"/>
 </svg>

From ce25d47dac8187b262c069928f8658945481cd3d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yusuf=20=C3=96zdemir?= <yusuf@ozdemir.be>
Date: Thu, 2 May 2024 22:32:23 +0300
Subject: [PATCH 33/52] Update exit.svg

---
 src/components/icons/exit.svg | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/icons/exit.svg b/src/components/icons/exit.svg
index 00748f56..249c093a 100644
--- a/src/components/icons/exit.svg
+++ b/src/components/icons/exit.svg
@@ -1,5 +1,4 @@
-<svg
-        class="w-6 h-6 cursor-pointer"
-        xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+<svg class="w-6 h-6 cursor-pointer"
+     xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
     <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
 </svg>

From 130abeeddb24548e2946e69bdba635a7761f9c1b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yusuf=20=C3=96zdemir?= <yusuf@ozdemir.be>
Date: Thu, 2 May 2024 23:11:56 +0300
Subject: [PATCH 34/52] fix ds selection event

---
 src/components/VueFinder.vue     | 4 +++-
 src/composables/useDragSelect.js | 6 ++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/VueFinder.vue b/src/components/VueFinder.vue
index 45ac3fcd..fb6f530a 100644
--- a/src/components/VueFinder.vue
+++ b/src/components/VueFinder.vue
@@ -109,6 +109,7 @@ const ds = app.dragSelect;
 
 const updateItems = (data) => {
   Object.assign(app.data, data);
+  ds.clearSelection();
   app.emitter.emit('vf-explorer-update');
 };
 
@@ -188,12 +189,13 @@ onMounted(() => {
     };
   }
 
+  app.emitter.emit('vf-fetch', {params: {q: 'index', adapter: app.adapter, ...pathExists}});
+
   // Emit select event
   ds.onSelect((items) => {
     emit('select', items);
   });
 
-  app.emitter.emit('vf-fetch', {params: {q: 'index', adapter: app.adapter, ...pathExists}});
 });
 
 </script>
diff --git a/src/composables/useDragSelect.js b/src/composables/useDragSelect.js
index 45716e51..faf70968 100644
--- a/src/composables/useDragSelect.js
+++ b/src/composables/useDragSelect.js
@@ -37,10 +37,6 @@ export default function (emitter) {
                 obj.value.break();
             }
         });
-
-        obj.value.subscribe("DS:end", ({items, event, isDragging}) => {
-            selectedItems.value = items.map((el) => JSON.parse(el.dataset.item));
-        })
     }
     const selectedItems = ref([]);
 
@@ -73,10 +69,12 @@ export default function (emitter) {
 
     const onSelect = (callback) => {
         obj.value.subscribe("DS:end", ({items, event, isDragging}) => {
+            selectedItems.value = items.map((el) => JSON.parse(el.dataset.item));
             callback(items.map((el) => JSON.parse(el.dataset.item)));
         });
     }
 
+
     return {
         obj,
         area,

From 19ff8947aec9d3775c718b41bd092ea4034c3363 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yusuf=20=C3=96zdemir?= <yusuf@ozdemir.be>
Date: Thu, 2 May 2024 23:23:39 +0300
Subject: [PATCH 35/52] Update Explorer.vue

---
 src/components/Explorer.vue | 85 ++++++++++++++++++-------------------
 1 file changed, 42 insertions(+), 43 deletions(-)

diff --git a/src/components/Explorer.vue b/src/components/Explorer.vue
index 800ffe5c..7b35c701 100644
--- a/src/components/Explorer.vue
+++ b/src/components/Explorer.vue
@@ -19,53 +19,52 @@
       <DragItem ref="dragImage" :count="ds.getCount()"/>
     </div>
 
-      <div ref="selectorArea"
-          :class="app.fullScreen ? '' : 'resize-y'"
-          class="h-full w-full text-xs vf-selector-area vf-scrollbar min-h-[150px] overflow-auto p-1 z-0"
-
-           @touchstart="handleTouchStart"
-           @contextmenu.self.prevent="app.emitter.emit('vf-contextmenu-show',{event: $event, items: ds.getSelected()})"
-      >
-        <!-- Search View -->
-        <Item v-if="searchQuery.length" v-for="(item, index) in getItems()"
-              :item="item" :index="index" :dragImage="dragImage" class="vf-item vf-item-list">
-          <div class="grid grid-cols-12 items-center">
-            <div class="flex col-span-7 items-center">
-              <ItemIcon :type="item.type" :small="app.compactListView"/>
-              <span class="overflow-ellipsis overflow-hidden whitespace-nowrap">{{ item.basename }}</span>
-            </div>
-            <div class="col-span-5 overflow-ellipsis overflow-hidden whitespace-nowrap">{{ item.path }}</div>
+    <div ref="selectorArea"
+         :class="app.fullScreen ? '' : 'resize-y'"
+         class="h-full w-full text-xs vf-selector-area vf-scrollbar min-h-[150px] overflow-auto p-1 z-0"
+         @touchstart="handleTouchStart"
+         @contextmenu.self.prevent="app.emitter.emit('vf-contextmenu-show',{event: $event, items: ds.getSelected()})"
+    >
+      <!-- Search View -->
+      <Item v-if="searchQuery.length" v-for="(item, index) in getItems()"
+            :item="item" :index="index" :dragImage="dragImage" class="vf-item vf-item-list">
+        <div class="grid grid-cols-12 items-center">
+          <div class="flex col-span-7 items-center">
+            <ItemIcon :type="item.type" :small="app.compactListView"/>
+            <span class="overflow-ellipsis overflow-hidden whitespace-nowrap">{{ item.basename }}</span>
           </div>
-        </Item>
-        <!-- List View -->
-        <Item  v-if="app.view==='list' && !searchQuery.length" v-for="(item, index) in getItems()"
-              :item="item" :index="index" :dragImage="dragImage" class="vf-item vf-item-list" draggable="true" >
-          <div class="grid grid-cols-12 items-center">
-            <div class="flex col-span-7 items-center">
-              <ItemIcon :type="item.type" :small="app.compactListView"/>
-              <span class="overflow-ellipsis overflow-hidden whitespace-nowrap">{{ item.basename }}</span>
-            </div>
-            <div class="col-span-2 text-center">{{ item.file_size ? app.filesize(item.file_size) : '' }}</div>
-            <div class="col-span-3 overflow-ellipsis overflow-hidden whitespace-nowrap px-1 md:px-3">
-              {{ datetimestring(item.last_modified) }}
-            </div>
+          <div class="col-span-5 overflow-ellipsis overflow-hidden whitespace-nowrap">{{ item.path }}</div>
+        </div>
+      </Item>
+      <!-- List View -->
+      <Item v-if="app.view==='list' && !searchQuery.length" v-for="(item, index) in getItems()"
+            :item="item" :index="index" :dragImage="dragImage" class="vf-item vf-item-list" draggable="true">
+        <div class="grid grid-cols-12 items-center">
+          <div class="flex col-span-7 items-center">
+            <ItemIcon :type="item.type" :small="app.compactListView"/>
+            <span class="overflow-ellipsis overflow-hidden whitespace-nowrap">{{ item.basename }}</span>
+          </div>
+          <div class="col-span-2 text-center">{{ item.file_size ? app.filesize(item.file_size) : '' }}</div>
+          <div class="col-span-3 overflow-ellipsis overflow-hidden whitespace-nowrap px-1 md:px-3">
+            {{ datetimestring(item.last_modified) }}
           </div>
-        </Item>
-        <!-- Grid View -->
-        <Item v-if="app.view==='grid' && !searchQuery.length" v-for="(item, index) in getItems(false)"
-              :item="item" :index="index" :dragImage="dragImage" class="vf-item vf-item-grid" draggable="true">
-          <div>
-            <div class="relative">
-              <img class="lazy h-10 md:h-12 m-auto" v-if="(item.mime_type ?? '').startsWith('image')"
-                   :data-src="app.requester.getPreviewUrl(app.adapter, item)" :alt="item.basename" :key="item.path">
-              <ItemIcon :type="item.type" v-else/>
-              <div class="absolute hidden md:block top-1/2 w-full text-center text-neutral-500"
-                   v-if="!(item.mime_type ?? '').startsWith('image') && item.type != 'dir'">{{ ext(item.extension) }}
-              </div>
+        </div>
+      </Item>
+      <!-- Grid View -->
+      <Item v-if="app.view==='grid' && !searchQuery.length" v-for="(item, index) in getItems(false)"
+            :item="item" :index="index" :dragImage="dragImage" class="vf-item vf-item-grid" draggable="true">
+        <div>
+          <div class="relative">
+            <img class="lazy h-10 md:h-12 m-auto" v-if="(item.mime_type ?? '').startsWith('image')"
+                 :data-src="app.requester.getPreviewUrl(app.adapter, item)" :alt="item.basename" :key="item.path">
+            <ItemIcon :type="item.type" v-else/>
+            <div class="absolute hidden md:block top-1/2 w-full text-center text-neutral-500"
+                 v-if="!(item.mime_type ?? '').startsWith('image') && item.type != 'dir'">{{ ext(item.extension) }}
             </div>
-            <span class="break-all">{{ title_shorten(item.basename) }}</span>
           </div>
-        </Item>
+          <span class="break-all">{{ title_shorten(item.basename) }}</span>
+        </div>
+      </Item>
     </div>
     <Toast/>
   </div>

From 2a2885e3a112155ef0c15afd85c3829cd2724977 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yusuf=20=C3=96zdemir?= <yusuf@ozdemir.be>
Date: Sat, 4 May 2024 13:59:11 +0300
Subject: [PATCH 36/52] Update tailwind.config.cjs

---
 tailwind.config.cjs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 609ce50f..afbf4a3e 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -5,7 +5,7 @@ const postcss = require("postcss");
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
-    "./src/**/*.{vue,js,ts,jsx,tsx}",
+    "./src/**/*.{vue,js,ts,jsx,tsx,svg}",
   ],
   important: '.vuefinder',
   darkMode: 'class',

From f8462b050b56fae521c607a4b9b1cb4e4705a001 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yusuf=20=C3=96zdemir?= <yusuf@ozdemir.be>
Date: Sat, 4 May 2024 18:31:08 +0300
Subject: [PATCH 37/52] improve selection

---
 src/components/Breadcrumb.vue    |  3 +++
 src/components/Item.vue          |  9 +++++--
 src/composables/useDragSelect.js | 44 +++++++++++++++-----------------
 3 files changed, 31 insertions(+), 25 deletions(-)

diff --git a/src/components/Breadcrumb.vue b/src/components/Breadcrumb.vue
index ac9faa8c..7a1b020f 100644
--- a/src/components/Breadcrumb.vue
+++ b/src/components/Breadcrumb.vue
@@ -82,6 +82,8 @@ const searchInput = ref(null);
 const app = inject('ServiceContainer');
 const {t} = app.i18n;
 
+const ds = app.dragSelect;
+
 app.emitter.on('vf-explorer-update', () => {
   let items = [], links = [];
   dirname.value = app.data.dirname ?? (app.adapter + '://');
@@ -143,6 +145,7 @@ const isGoUpAvailable = () => {
 const handleDropZone = (e, index = null) => {
   e.preventDefault();
 
+  ds.isDraggingRef.value = false;
   handleDragLeave(e);
 
   index ??= breadcrumb.value.length - 2;
diff --git a/src/components/Item.vue b/src/components/Item.vue
index b455fecf..32520edd 100644
--- a/src/components/Item.vue
+++ b/src/components/Item.vue
@@ -1,7 +1,9 @@
 <template>
   <div
-      :class="'vf-item-' + ds.explorerId.value"
+      :style="{opacity:  ds.isDraggingRef.value && ds.getSelection().find((el) => $el === el) ? '0.5 !important' : ''}"
+      :class="[ 'vf-item-' + ds.explorerId.value]"
       :data-type="item.type"
+      :key="item.path"
       :data-item="JSON.stringify(item)"
       :data-index="index"
       v-draggable="item"
@@ -15,7 +17,7 @@
 </template>
 
 <script setup>
-import {ref, defineProps, inject} from 'vue';
+import {defineProps, inject} from 'vue';
 import ModalPreview from "./modals/ModalPreview.vue";
 import ModalMove from "./modals/ModalMove.vue";
 
@@ -60,6 +62,7 @@ const handleDragStart = (e, item) => {
     return false;
   }
 
+  ds.isDraggingRef.value = true;
   e.dataTransfer.setDragImage(props.dragImage.$el, 0, 15);
   e.dataTransfer.effectAllowed = 'all';
   e.dataTransfer.dropEffect = 'copy';
@@ -68,6 +71,7 @@ const handleDragStart = (e, item) => {
 
 const handleDropZone = (e, item) => {
   e.preventDefault();
+  ds.isDraggingRef.value = false;
   let draggedItems = JSON.parse(e.dataTransfer.getData('items'));
 
   if (draggedItems.find(item => item.storage !== app.adapter)) {
@@ -95,6 +99,7 @@ const clearTimeOut = () => {
     clearTimeout(touchTimeOut);
   }
 }
+
 const delayedOpenItem = ($event) => {
   touchTimeOut = setTimeout(() => {
     const cmEvent = new MouseEvent("contextmenu", {
diff --git a/src/composables/useDragSelect.js b/src/composables/useDragSelect.js
index faf70968..463ca28b 100644
--- a/src/composables/useDragSelect.js
+++ b/src/composables/useDragSelect.js
@@ -3,10 +3,15 @@ import DragSelect from 'dragselect';
 
 export default function (emitter) {
     const obj = shallowRef();
-
     const area = ref(null);
-
     const explorerId = ref(Math.floor(Math.random() * 2 ** 32));
+    const isDraggingRef = ref(false);
+    const selectedItems = ref([]);
+    const getSelected = () => selectedItems.value;
+    const getSelection = () => obj.value.getSelection();
+    const getCount = () => selectedItems.value.length;
+    const clearSelection = () => obj.value.clearSelection(true);
+    const onSelectCallback = ref();
 
     const init = (selectArea) => {
         area.value = selectArea;
@@ -17,68 +22,61 @@ export default function (emitter) {
             selectorClass: 'vf-explorer-selector',
         });
 
-        obj.value.subscribe('DS:start:pre', ({items, event, isDragging, isDraggingKeyboard}) => {
+        obj.value.subscribe('DS:start:pre', ({items, event, isDragging}) => {
             if (isDragging) {
-                selectedItems.value = items.map((el) => JSON.parse(el.dataset.item));
-                obj.value.break();
+                obj.value.Interaction._reset(event);
             } else {
                 // Prevent starting selection when start resizing the selectable area from the corner.
                 const offsetX = area.value.offsetWidth - event.offsetX;
                 const offsetY = area.value.offsetHeight - event.offsetY;
                 if (offsetX < 15 && offsetY < 15) {
-                    obj.value.Selector.stop()
-                    obj.value.break();
+                    obj.value.Interaction._reset(event);
                 }
             }
         });
 
-        obj.value.subscribe('DS:update:pre', ({isDragging, isDraggingKeyboard}) => {
-            if (isDragging || isDraggingKeyboard) {
-                obj.value.break();
+        // Immediately update the selection when dragging ends.
+        document.addEventListener('dragleave', (e) => {
+            if (!e.buttons && isDraggingRef.value) {
+                isDraggingRef.value = false;
             }
         });
     }
-    const selectedItems = ref([]);
-
-    const getSelected = () => selectedItems.value;
-
-    const getSelection = () => obj.value.getSelection();
-
-    const getCount = () => selectedItems.value.length;
-
-    const clearSelection = () => {
-       obj.value.clearSelection(true);
-    }
 
     // Refresh selection after the list is updated.
     const refreshSelection = () => {
         const currentSelectedItems = getSelected().map((item) => item.path);
+
         clearSelection();
         // reinitialize the selectables
         obj.value.setSettings({
-          selectables: document.getElementsByClassName('vf-item-' + explorerId.value),
+            selectables: document.getElementsByClassName('vf-item-' + explorerId.value),
         })
         // add the previously selected items
         obj.value.addSelection(
             obj.value.getSelectables()
                 .filter(el => currentSelectedItems.includes(JSON.parse(el.dataset.item).path))
         );
+
         // update selection
         selectedItems.value = obj.value.getSelection().map((el) => JSON.parse(el.dataset.item));
+        onSelectCallback.value(selectedItems.value);
     }
 
     const onSelect = (callback) => {
+        onSelectCallback.value = callback;
+
         obj.value.subscribe("DS:end", ({items, event, isDragging}) => {
             selectedItems.value = items.map((el) => JSON.parse(el.dataset.item));
             callback(items.map((el) => JSON.parse(el.dataset.item)));
         });
     }
 
-
     return {
         obj,
         area,
         explorerId,
+        isDraggingRef,
         init,
         getSelected,
         getSelection,

From 39b6c1011ec14d61e8ca09d9a4b01610737363ec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yusuf=20=C3=96zdemir?= <yusuf@ozdemir.be>
Date: Sat, 4 May 2024 19:32:48 +0300
Subject: [PATCH 38/52] add show thumbnails and persist path settings

---
 src/ServiceContainer.js              | 60 ++++++++++++++++++----------
 src/components/Explorer.vue          |  7 +++-
 src/components/VueFinder.vue         |  4 ++
 src/components/modals/ModalAbout.vue | 43 ++++++++++++++++++++
 4 files changed, 91 insertions(+), 23 deletions(-)

diff --git a/src/ServiceContainer.js b/src/ServiceContainer.js
index e6df59cf..e8cdcdb0 100644
--- a/src/ServiceContainer.js
+++ b/src/ServiceContainer.js
@@ -25,53 +25,71 @@ export default (props, options) => {
         return FEATURE_ALL_NAMES;
     }
 
-    const path = props.persist ? storage.getStore('path', props.path) : props.path;
+    const persist = storage.getStore('persist-path', props.persist);
+
+    const path = persist ? storage.getStore('path', props.path) : props.path;
 
     return reactive({
+        /*
+        * Core properties
+        * */
+
         // app version
         version: version,
         // root element
         root: null,
+        // loading state
+        loading: false,
         // app id
         debug: props.debug,
         // Event Bus
         emitter: emitter,
-        // active features
-        features: setFeatures(props.features),
+        // storage
+        storage: storage,
+        // localization object
+        i18n : computed(() => useI18n(storage, initialLang, emitter, supportedLocales)),
+        // modal state
+        modal: useModal(),
+        // dragSelect object, it is responsible for selecting items
+        dragSelect: computed(() => useDragSelect(emitter)),
         // http object
         requester : buildRequester(props.request),
-        // theme state
-        theme: theme,
+        // active features
+        features: setFeatures(props.features),
         // view state
         view: storage.getStore('viewport', 'grid'),
         // fullscreen state
         fullScreen: storage.getStore('full-screen', props.fullScreen),
         // selectButton state
         selectButton: props.selectButton,
+        // max file size
+        maxFileSize: props.maxFileSize,
+
+        /*
+        * Settings
+        * */
+
+        // theme state
+        theme: theme,
         // unit state - for example: GB or GiB
         metricUnits: metricUnits,
-        // show large icons in list view
-        compactListView: storage.getStore('compact-list-view', true),
         // human readable file sizes
         filesize: metricUnits ? filesizeMetric : filesizeDefault,
-        // max file size
-        maxFileSize: props.maxFileSize,
-        // loading state
-        loading: false,
-        // localization object
-        i18n : computed(() => useI18n(storage, initialLang, emitter, supportedLocales)),
-        // modal state
-        modal: useModal(),
-        // dragSelect object, it is responsible for selecting items
-        dragSelect: computed(() => useDragSelect(emitter)),
+        // show large icons in list view
+        compactListView: storage.getStore('compact-list-view', true),
+        // persist state
+        persist: persist,
+        // show thumbnails
+        showThumbnails: storage.getStore('show-thumbnails', props.showThumbnails),
+
+        /*
+        * Items
+        * */
+
         // main storage adapter
         adapter: storage.getStore('adapter'),
         // current active path
         path: path,
-        // persist state
-        persist: props.persist,
-        // storage
-        storage: storage,
         // fetched items
         data: {adapter: storage.getStore('adapter'), storages: [], dirname: path, files: []},
     });
diff --git a/src/components/Explorer.vue b/src/components/Explorer.vue
index 7b35c701..f520120e 100644
--- a/src/components/Explorer.vue
+++ b/src/components/Explorer.vue
@@ -55,13 +55,16 @@
             :item="item" :index="index" :dragImage="dragImage" class="vf-item vf-item-grid" draggable="true">
         <div>
           <div class="relative">
-            <img class="lazy h-10 md:h-12 m-auto" v-if="(item.mime_type ?? '').startsWith('image')"
+            <img src="data:image/png;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
+                 class="lazy h-10 md:h-12 m-auto" v-if="(item.mime_type ?? '').startsWith('image') && app.showThumbnails"
                  :data-src="app.requester.getPreviewUrl(app.adapter, item)" :alt="item.basename" :key="item.path">
             <ItemIcon :type="item.type" v-else/>
             <div class="absolute hidden md:block top-1/2 w-full text-center text-neutral-500"
-                 v-if="!(item.mime_type ?? '').startsWith('image') && item.type != 'dir'">{{ ext(item.extension) }}
+                 v-if="!((item.mime_type ?? '').startsWith('image') && app.showThumbnails) && item.type !== 'dir'" >
+              {{ ext(item.extension) }}
             </div>
           </div>
+
           <span class="break-all">{{ title_shorten(item.basename) }}</span>
         </div>
       </Item>
diff --git a/src/components/VueFinder.vue b/src/components/VueFinder.vue
index fb6f530a..05d271a8 100644
--- a/src/components/VueFinder.vue
+++ b/src/components/VueFinder.vue
@@ -79,6 +79,10 @@ const props = defineProps({
     type: Boolean,
     default: false
   },
+  showThumbnails: {
+    type: Boolean,
+    default: true
+  },
   selectButton: {
     type: Object,
     default(rawProps) {
diff --git a/src/components/modals/ModalAbout.vue b/src/components/modals/ModalAbout.vue
index 4b47547b..8c1e6b3b 100644
--- a/src/components/modals/ModalAbout.vue
+++ b/src/components/modals/ModalAbout.vue
@@ -50,6 +50,34 @@
                   </div>
                 </div>
 
+                <div class="flex relative gap-x-3">
+                  <div class="h-6 items-center">
+                    <input id="persist_path" name="persist_path" type="checkbox"
+                           v-model="app.persist"
+                           @click="handlePersistPath"
+                           class="h-4 w-4 rounded border-gray-300 text-indigo-600 dark:accent-slate-400 focus:ring-indigo-600">
+                  </div>
+                  <div class="flex-1 block text-sm">
+                    <label for="persist_path" class="flex w-full font-medium text-gray-900 dark:text-gray-400">
+                      {{ t('Persist path on reload') }} <action-message class="ms-3" on="vf-persist-path-saved">{{ t('Saved.') }}</action-message>
+                    </label>
+                  </div>
+                </div>
+
+                <div class="flex relative gap-x-3">
+                  <div class="h-6 items-center">
+                    <input id="show_thumbnails" name="show_thumbnails" type="checkbox"
+                           v-model="app.showThumbnails"
+                           @click="handleShowThumbnails"
+                           class="h-4 w-4 rounded border-gray-300 text-indigo-600 dark:accent-slate-400 focus:ring-indigo-600">
+                  </div>
+                  <div class="flex-1 block text-sm">
+                    <label for="show_thumbnails" class="flex w-full font-medium text-gray-900 dark:text-gray-400">
+                      {{ t('Show Thumbnails') }} <action-message class="ms-3" on="vf-show-thumbnails-saved">{{ t('Saved.') }}</action-message>
+                    </label>
+                  </div>
+                </div>
+
                 <div class="flex relative gap-x-3">
                   <div class="h-6 items-center">
                     <label for="theme" class="flex w-full font-medium text-gray-900 dark:text-gray-400 text-sm">
@@ -138,6 +166,21 @@ const handleCompactListView = () => {
   app.emitter.emit('vf-compact-view-saved');
 }
 
+const handleShowThumbnails = () => {
+  app.showThumbnails = !app.showThumbnails;
+
+  setStore('show-thumbnails', app.showThumbnails);
+  app.emitter.emit('vf-show-thumbnails-saved');
+}
+
+const handlePersistPath = () => {
+  app.persist = !app.persist;
+
+  setStore('persist-path', app.persist);
+  app.emitter.emit('vf-persist-path-saved');
+}
+
+
 const {i18n} = inject('VueFinderOptions');
 
 const languageList = {

From bf7dc5e26197f75896c511e1e2e9c31b3f31ff07 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yusuf=20=C3=96zdemir?= <yusuf@ozdemir.be>
Date: Sun, 5 May 2024 00:51:25 +0300
Subject: [PATCH 39/52] update dragselect object

---
 src/ServiceContainer.js              |  2 +-
 src/components/Explorer.vue          | 22 ++++-------
 src/components/Item.vue              |  2 +-
 src/components/Toolbar.vue           |  2 +-
 src/components/VueFinder.vue         |  1 +
 src/components/modals/ModalAbout.vue |  2 +-
 src/composables/useDragSelect.js     | 59 +++++++++++++++++-----------
 7 files changed, 47 insertions(+), 43 deletions(-)

diff --git a/src/ServiceContainer.js b/src/ServiceContainer.js
index e8cdcdb0..22f7178e 100644
--- a/src/ServiceContainer.js
+++ b/src/ServiceContainer.js
@@ -51,7 +51,7 @@ export default (props, options) => {
         // modal state
         modal: useModal(),
         // dragSelect object, it is responsible for selecting items
-        dragSelect: computed(() => useDragSelect(emitter)),
+        dragSelect: computed(() => useDragSelect()),
         // http object
         requester : buildRequester(props.request),
         // active features
diff --git a/src/components/Explorer.vue b/src/components/Explorer.vue
index f520120e..fdc93600 100644
--- a/src/components/Explorer.vue
+++ b/src/components/Explorer.vue
@@ -19,7 +19,7 @@
       <DragItem ref="dragImage" :count="ds.getCount()"/>
     </div>
 
-    <div ref="selectorArea"
+    <div :ref="ds.area"
          :class="app.fullScreen ? '' : 'resize-y'"
          class="h-full w-full text-xs vf-selector-area vf-scrollbar min-h-[150px] overflow-auto p-1 z-0"
          @touchstart="handleTouchStart"
@@ -69,6 +69,7 @@
         </div>
       </Item>
     </div>
+
     <Toast/>
   </div>
 </template>
@@ -88,7 +89,6 @@ const app = inject('ServiceContainer');
 const {t} = app.i18n;
 
 const ext = (item) => item?.substring(0, 3)
-const selectorArea = ref(null);
 const dragImage = ref(null);
 
 const searchQuery = ref('');
@@ -98,7 +98,7 @@ const ds = app.dragSelect;
 let vfLazyLoad
 
 app.emitter.on('vf-fullscreen-toggle', () => {
-  selectorArea.value.style.height = null;
+  ds.area.value.style.height = null;
 });
 
 app.emitter.on('vf-search-query', ({newQuery}) => {
@@ -131,11 +131,11 @@ const dragAndDrop = ref(true);
 const handleTouchStart = (event) => {
   if (event.touches.length > 1) {
     if (!dragAndDrop.value) {
-      ds.obj.value.start();
+      ds.instance.start();
       app.emitter.emit('vf-toast-push', {label: t('Drag&Drop: on')});
-      app.emitter.emit('vf-explorer-update');
+      ds.refreshSelection();
     } else {
-      ds.obj.value.stop();
+      ds.instance.stop();
       app.emitter.emit('vf-toast-push', {label: t('Drag&Drop: off')});
     }
     dragAndDrop.value = !dragAndDrop.value;
@@ -183,18 +183,10 @@ const sortBy = (column) => {
 
 
 onMounted(() => {
-  ds.init(selectorArea.value)
-
-  vfLazyLoad = new LazyLoad(selectorArea.value);
-
-  app.emitter.on('vf-explorer-update', () => nextTick(() => {
-    ds.refreshSelection();
-  }));
+  vfLazyLoad = new LazyLoad(ds.area.value);
 });
 
 onUpdated(() => {
-  ds.obj.value.Area.reset();
-  ds.obj.value.SelectorArea.updatePos();
   vfLazyLoad.update();
 });
 
diff --git a/src/components/Item.vue b/src/components/Item.vue
index 32520edd..422cf28a 100644
--- a/src/components/Item.vue
+++ b/src/components/Item.vue
@@ -1,7 +1,7 @@
 <template>
   <div
       :style="{opacity:  ds.isDraggingRef.value && ds.getSelection().find((el) => $el === el) ? '0.5 !important' : ''}"
-      :class="[ 'vf-item-' + ds.explorerId.value]"
+      :class="[ 'vf-item-' + ds.explorerId]"
       :data-type="item.type"
       :key="item.path"
       :data-item="JSON.stringify(item)"
diff --git a/src/components/Toolbar.vue b/src/components/Toolbar.vue
index d54599bf..438b78be 100644
--- a/src/components/Toolbar.vue
+++ b/src/components/Toolbar.vue
@@ -116,7 +116,7 @@ const toggleFullScreen = () => {
 const toggleView = () => {
   app.view = app.view === 'list' ? 'grid' : 'list';
 
-  app.emitter.emit('vf-explorer-update')
+  ds.refreshSelection();
   setStore('viewport', app.view)
 };
 
diff --git a/src/components/VueFinder.vue b/src/components/VueFinder.vue
index 05d271a8..2acf2cce 100644
--- a/src/components/VueFinder.vue
+++ b/src/components/VueFinder.vue
@@ -114,6 +114,7 @@ const ds = app.dragSelect;
 const updateItems = (data) => {
   Object.assign(app.data, data);
   ds.clearSelection();
+  ds.refreshSelection();
   app.emitter.emit('vf-explorer-update');
 };
 
diff --git a/src/components/modals/ModalAbout.vue b/src/components/modals/ModalAbout.vue
index 8c1e6b3b..4e0eddfe 100644
--- a/src/components/modals/ModalAbout.vue
+++ b/src/components/modals/ModalAbout.vue
@@ -73,7 +73,7 @@
                   </div>
                   <div class="flex-1 block text-sm">
                     <label for="show_thumbnails" class="flex w-full font-medium text-gray-900 dark:text-gray-400">
-                      {{ t('Show Thumbnails') }} <action-message class="ms-3" on="vf-show-thumbnails-saved">{{ t('Saved.') }}</action-message>
+                      {{ t('Show thumbnails') }} <action-message class="ms-3" on="vf-show-thumbnails-saved">{{ t('Saved.') }}</action-message>
                     </label>
                   </div>
                 </div>
diff --git a/src/composables/useDragSelect.js b/src/composables/useDragSelect.js
index 463ca28b..da92b3a5 100644
--- a/src/composables/useDragSelect.js
+++ b/src/composables/useDragSelect.js
@@ -1,36 +1,35 @@
-import {ref, shallowRef} from "vue";
+import {unref, isRef, ref, onMounted, onUpdated, onUnmounted, watchEffect, nextTick} from 'vue';
 import DragSelect from 'dragselect';
 
-export default function (emitter) {
-    const obj = shallowRef();
-    const area = ref(null);
-    const explorerId = ref(Math.floor(Math.random() * 2 ** 32));
+export default function () {
+    let dragSelectInstance;
+    const area = ref();
+    const explorerId = Math.floor(Math.random() * 2 ** 32);
     const isDraggingRef = ref(false);
     const selectedItems = ref([]);
     const getSelected = () => selectedItems.value;
-    const getSelection = () => obj.value.getSelection();
+    const getSelection = () => dragSelectInstance.getSelection();
     const getCount = () => selectedItems.value.length;
-    const clearSelection = () => obj.value.clearSelection(true);
+    const clearSelection = () => dragSelectInstance.clearSelection(true);
     const onSelectCallback = ref();
 
-    const init = (selectArea) => {
-        area.value = selectArea;
-        obj.value = new DragSelect({
-            area: selectArea,
+    function initDragSelect() {
+        dragSelectInstance = new DragSelect({
+            area: area.value,
             keyboardDrag: false,
             selectedClass: 'vf-explorer-selected',
             selectorClass: 'vf-explorer-selector',
         });
 
-        obj.value.subscribe('DS:start:pre', ({items, event, isDragging}) => {
+        dragSelectInstance.subscribe('DS:start:pre', ({items, event, isDragging}) => {
             if (isDragging) {
-                obj.value.Interaction._reset(event);
+                dragSelectInstance.Interaction._reset(event);
             } else {
                 // Prevent starting selection when start resizing the selectable area from the corner.
                 const offsetX = area.value.offsetWidth - event.offsetX;
                 const offsetY = area.value.offsetHeight - event.offsetY;
                 if (offsetX < 15 && offsetY < 15) {
-                    obj.value.Interaction._reset(event);
+                    dragSelectInstance.Interaction._reset(event);
                 }
             }
         });
@@ -44,40 +43,52 @@ export default function (emitter) {
     }
 
     // Refresh selection after the list is updated.
-    const refreshSelection = () => {
+    const refreshSelection = () => nextTick(() => {
         const currentSelectedItems = getSelected().map((item) => item.path);
 
         clearSelection();
         // reinitialize the selectables
-        obj.value.setSettings({
-            selectables: document.getElementsByClassName('vf-item-' + explorerId.value),
+        dragSelectInstance.setSettings({
+            selectables: document.getElementsByClassName('vf-item-' + explorerId),
         })
+
         // add the previously selected items
-        obj.value.addSelection(
-            obj.value.getSelectables()
+        dragSelectInstance.addSelection(
+            dragSelectInstance.getSelectables()
                 .filter(el => currentSelectedItems.includes(JSON.parse(el.dataset.item).path))
         );
 
         // update selection
-        selectedItems.value = obj.value.getSelection().map((el) => JSON.parse(el.dataset.item));
+        selectedItems.value = dragSelectInstance.getSelection().map((el) => JSON.parse(el.dataset.item));
         onSelectCallback.value(selectedItems.value);
-    }
+    });
 
     const onSelect = (callback) => {
         onSelectCallback.value = callback;
 
-        obj.value.subscribe("DS:end", ({items, event, isDragging}) => {
+        dragSelectInstance.subscribe("DS:end", ({items, event, isDragging}) => {
             selectedItems.value = items.map((el) => JSON.parse(el.dataset.item));
             callback(items.map((el) => JSON.parse(el.dataset.item)));
         });
     }
 
+    onMounted(() => {
+        initDragSelect()
+    });
+
+    onUnmounted(() => {
+        if (dragSelectInstance) dragSelectInstance.stop();
+    });
+
+    onUpdated(() => {
+        if (dragSelectInstance) dragSelectInstance.Area.reset()
+    });
+
     return {
-        obj,
+        instance: dragSelectInstance,
         area,
         explorerId,
         isDraggingRef,
-        init,
         getSelected,
         getSelection,
         clearSelection,

From 8f27639d8096b42d592c335669569ac7eb88e924 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yusuf=20=C3=96zdemir?= <yusuf@ozdemir.be>
Date: Sun, 5 May 2024 01:04:00 +0300
Subject: [PATCH 40/52] Update useDragSelect.js

---
 src/composables/useDragSelect.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/composables/useDragSelect.js b/src/composables/useDragSelect.js
index da92b3a5..ed711f07 100644
--- a/src/composables/useDragSelect.js
+++ b/src/composables/useDragSelect.js
@@ -1,4 +1,4 @@
-import {unref, isRef, ref, onMounted, onUpdated, onUnmounted, watchEffect, nextTick} from 'vue';
+import {ref, onMounted, onUpdated, onUnmounted, nextTick} from 'vue';
 import DragSelect from 'dragselect';
 
 export default function () {

From 2901a7cc44e8c4767fe5395a995a70ef53e34efc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yusuf=20=C3=96zdemir?= <yusuf@ozdemir.be>
Date: Sun, 5 May 2024 01:23:57 +0300
Subject: [PATCH 41/52] cleanup old download codes

---
 src/components/ContextMenu.vue         |  6 +-----
 src/components/VueFinder.vue           | 13 -------------
 src/components/modals/ModalPreview.vue |  5 -----
 3 files changed, 1 insertion(+), 23 deletions(-)

diff --git a/src/components/ContextMenu.vue b/src/components/ContextMenu.vue
index 3308a47b..4789f230 100644
--- a/src/components/ContextMenu.vue
+++ b/src/components/ContextMenu.vue
@@ -93,11 +93,7 @@ const menuItems = {
     key: FEATURES.DOWNLOAD,
     link: computed(() => app.requester.getDownloadUrl(app.data.adapter, selectedItems.value[0])),
     title: () =>  t('Download'),
-    action: () => {
-      // this is no longer needed since we are using the link attribute
-      // const url = app.requester.getDownloadUrl(app.data.adapter, selectedItems.value[0]);
-      // app.emitter.emit('vf-download', url);
-    },
+    action: () => {},
   },
   archive: {
     key: FEATURES.ARCHIVE,
diff --git a/src/components/VueFinder.vue b/src/components/VueFinder.vue
index 2acf2cce..b4f86cc2 100644
--- a/src/components/VueFinder.vue
+++ b/src/components/VueFinder.vue
@@ -167,19 +167,6 @@ app.emitter.on('vf-fetch', ({params, body = null, onSuccess = null, onError = nu
   });
 });
 
-// Download
-app.emitter.on('vf-download', (url) => {
-  const $a = document.createElement('a');
-  $a.style.display = 'none';
-  $a.target = '_blank';
-  $a.href = url;
-  // Cross-origin this doesn't work, but at least this does bring up a new window.
-  $a.download = url;
-  app.root.appendChild($a);
-  $a.click();
-  $a.remove();
-});
-
 // fetch initial data
 onMounted(() => {
   // app.adapter can be null at first, until we get the adapter list it will be the first one from response
diff --git a/src/components/modals/ModalPreview.vue b/src/components/modals/ModalPreview.vue
index 15cfbe49..f6d2a7e3 100644
--- a/src/components/modals/ModalPreview.vue
+++ b/src/components/modals/ModalPreview.vue
@@ -61,11 +61,6 @@ const {t} = app.i18n
 const loaded = ref(false);
 const loadPreview = (type) => (app.modal.data.item.mime_type ?? '').startsWith(type)
 
-const download = () => {
-  const url = app.requester.getDownloadUrl(app.modal.data.adapter, app.modal.data.item);
-  app.emitter.emit('vf-download', url);
-}
-
 const enabledPreview = app.features.includes(FEATURES.PREVIEW)
 if (!enabledPreview) {
   loaded.value = true;

From 8cedeab6903a49b8d2773965872e740bc2372036 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yusuf=20=C3=96zdemir?= <yusuf@ozdemir.be>
Date: Sun, 5 May 2024 10:17:58 +0300
Subject: [PATCH 42/52] fix context menu positions

---
 src/components/ContextMenu.vue | 90 ++++++++++++++++++++--------------
 src/index.js                   |  6 +--
 2 files changed, 57 insertions(+), 39 deletions(-)

diff --git a/src/components/ContextMenu.vue b/src/components/ContextMenu.vue
index 4789f230..423eb4cb 100644
--- a/src/components/ContextMenu.vue
+++ b/src/components/ContextMenu.vue
@@ -1,18 +1,19 @@
 <template>
-  <ul ref="contextmenu" v-if="context.active" :style="context.positions"
+  <ul ref="contextmenu" v-show="context.active" :style="context.positions"
       class="z-30 absolute text-xs bg-neutral-50 dark:bg-gray-800 text-gray-700 dark:text-gray-200 border border-neutral-300 dark:border-gray-600 shadow rounded-sm select-none">
     <li class="cursor-pointer hover:bg-neutral-200 dark:hover:bg-gray-700"
         v-for="(item) in filteredItems" :key="item.title">
-        <template v-if="item.link">
-          <a class="block pl-2 pr-3 py-2 " target="_blank" :href="item.link" :download="item.link" @click="app.emitter.emit('vf-contextmenu-hide')">
-            <span>{{ item.title() }}</span>
-          </a>
-        </template>
-        <template v-else>
-          <div class="pl-2 pr-3 py-1.5" @click="run(item)">
-            <span>{{ item.title() }}</span>
-          </div>
-        </template>
+      <template v-if="item.link">
+        <a class="block pl-2 pr-3 py-2 " target="_blank" :href="item.link" :download="item.link"
+           @click="app.emitter.emit('vf-contextmenu-hide')">
+          <span>{{ item.title() }}</span>
+        </a>
+      </template>
+      <template v-else>
+        <div class="pl-2 pr-3 py-1.5" @click="run(item)">
+          <span>{{ item.title() }}</span>
+        </div>
+      </template>
     </li>
   </ul>
 </template>
@@ -65,39 +66,52 @@ const menuItems = {
     },
   },
   refresh: {
-    title: () =>  t('Refresh'),
+    title: () => t('Refresh'),
     action: () => {
-      app.emitter.emit('vf-fetch',{params:{q: 'index', adapter: app.data.adapter, path: app.data.dirname}} );
+      app.emitter.emit('vf-fetch', {params: {q: 'index', adapter: app.data.adapter, path: app.data.dirname}});
     },
   },
   preview: {
     key: FEATURES.PREVIEW,
-    title: () =>  t('Preview'),
-    action: () => app.modal.open(ModalPreview, {adapter:app.data.adapter, item: selectedItems.value[0]}),
+    title: () => t('Preview'),
+    action: () => app.modal.open(ModalPreview, {adapter: app.data.adapter, item: selectedItems.value[0]}),
   },
   open: {
-    title: () =>  t('Open'),
+    title: () => t('Open'),
     action: () => {
       app.emitter.emit('vf-search-exit');
-      app.emitter.emit('vf-fetch', {params:{q: 'index', adapter: app.data.adapter, path:selectedItems.value[0].path}});
+      app.emitter.emit('vf-fetch', {
+        params: {
+          q: 'index',
+          adapter: app.data.adapter,
+          path: selectedItems.value[0].path
+        }
+      });
     },
   },
   openDir: {
-    title: () =>  t('Open containing folder'),
+    title: () => t('Open containing folder'),
     action: () => {
       app.emitter.emit('vf-search-exit');
-      app.emitter.emit('vf-fetch', {params:{q: 'index', adapter: app.data.adapter, path: (selectedItems.value[0].dir)}});
+      app.emitter.emit('vf-fetch', {
+        params: {
+          q: 'index',
+          adapter: app.data.adapter,
+          path: (selectedItems.value[0].dir)
+        }
+      });
     },
   },
   download: {
     key: FEATURES.DOWNLOAD,
     link: computed(() => app.requester.getDownloadUrl(app.data.adapter, selectedItems.value[0])),
-    title: () =>  t('Download'),
-    action: () => {},
+    title: () => t('Download'),
+    action: () => {
+    },
   },
   archive: {
     key: FEATURES.ARCHIVE,
-    title: () =>  t('Archive'),
+    title: () => t('Archive'),
     action: () => app.modal.open(ModalArchive, {items: selectedItems}),
   },
   unarchive: {
@@ -107,12 +121,12 @@ const menuItems = {
   },
   rename: {
     key: FEATURES.RENAME,
-    title: () =>  t('Rename'),
+    title: () => t('Rename'),
     action: () => app.modal.open(ModalRename, {items: selectedItems}),
   }
 };
 
-const run = (item) =>{
+const run = (item) => {
   app.emitter.emit('vf-contextmenu-hide');
   item.action();
 };
@@ -122,11 +136,9 @@ app.emitter.on('vf-search-query', ({newQuery}) => {
   searchQuery.value = newQuery;
 });
 
-app.emitter.on('vf-contextmenu-show', ({event, items,  target = null}) => {
+app.emitter.on('vf-contextmenu-show', ({event, items, target = null}) => {
   context.items = [];
 
-  const area = app.dragSelect.area.value;
-
   if (searchQuery.value) {
     if (target) {
       context.items.push(menuItems.openDir);
@@ -164,25 +176,31 @@ app.emitter.on('vf-contextmenu-show', ({event, items,  target = null}) => {
     app.emitter.emit('vf-context-selected', [target]);
     // console.log(target.type + ' is selected');
   }
-  showContextMenu(event, area)
+  showContextMenu(event)
 })
 
 app.emitter.on('vf-contextmenu-hide', () => {
   context.active = false;
 })
 
-const showContextMenu = (event, area) => {
-  context.active = true;
+const showContextMenu = (event) => {
+  const area = app.dragSelect.area.value
+  const rootContainer = app.root.getBoundingClientRect();
+  const areaContainer = area.getBoundingClientRect();
+
+  let left = event.clientX - rootContainer.left;
+  let top = event.clientY - rootContainer.top;
 
+  context.active = true;
+  // wait for the next tick to get the actual size of the context menu
   nextTick(() => {
-    const rootBbox = app.root.getBoundingClientRect();
-    const areaContainer = area.getBoundingClientRect();
+    // get the actual size of the context menu
+    const menuContainer = contextmenu.value?.getBoundingClientRect();
 
-    let left = event.pageX - rootBbox.left;
-    let top = event.pageY - rootBbox.top;
-    let menuHeight = contextmenu.value.offsetHeight;
-    let menuWidth = contextmenu.value.offsetWidth;
+    let menuHeight = menuContainer?.height ?? 0;
+    let menuWidth = menuContainer?.width ?? 0;
 
+    // check if the context menu is out of the container area
     left = (areaContainer.right - event.pageX + window.scrollX) < menuWidth ? left - menuWidth : left;
     top = (areaContainer.bottom - event.pageY + window.scrollY) < menuHeight ? top - menuHeight : top;
 
diff --git a/src/index.js b/src/index.js
index b0b838ce..624f846f 100644
--- a/src/index.js
+++ b/src/index.js
@@ -8,9 +8,6 @@ export default {
      * @param options
      */
     install(app, options = {}) {
-        // define main component
-        app.component("VueFinder", VueFinder);
-
         // define global properties with 'options'
         options.i18n = options.i18n ?? {};
         let [firstLanguage] = Object.keys(options.i18n)
@@ -18,6 +15,9 @@ export default {
 
         // unique id for the app options
         app.provide('VueFinderOptions', options);
+
+        // define main component
+        app.component("VueFinder", VueFinder);
     }
 };
 

From 29b5d959f5acb66e482b238f3e66df23908803cb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yusuf=20=C3=96zdemir?= <yusuf@ozdemir.be>
Date: Sun, 5 May 2024 14:28:05 +0300
Subject: [PATCH 43/52] Fix modal focus on mobile devices by delaying input
 element focus to ensure visibility above keyboard

---
 src/components/modals/ModalLayout.vue | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/components/modals/ModalLayout.vue b/src/components/modals/ModalLayout.vue
index ec6a69f4..93e1af1c 100644
--- a/src/components/modals/ModalLayout.vue
+++ b/src/components/modals/ModalLayout.vue
@@ -24,12 +24,9 @@
 import {inject, onMounted} from 'vue';
 
 const app = inject('ServiceContainer')
-
 onMounted(() => {
   const inputElements = document.querySelector('.v-f-modal input')
-  if (inputElements) {
-    inputElements.focus();
-  }
+  setTimeout(() => inputElements && inputElements.focus(), 100)
 })
 </script>
 

From bf33c3bc922da26339e74664dbd96a8743dd7f9b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yusuf=20=C3=96zdemir?= <yusuf@ozdemir.be>
Date: Sun, 5 May 2024 16:59:25 +0300
Subject: [PATCH 44/52] add composable for file operations

---
 src/ServiceContainer.js                  |  16 +---
 src/components/Breadcrumb.vue            | 101 ++++++++++-------------
 src/components/ContextMenu.vue           |  10 +--
 src/components/Explorer.vue              |  10 +--
 src/components/Item.vue                  |   6 +-
 src/components/Statusbar.vue             |  10 +--
 src/components/Toolbar.vue               |   2 +-
 src/components/VueFinder.vue             |  26 +++---
 src/components/icons/go_up.svg           |   2 +-
 src/components/icons/home.svg            |   2 +-
 src/components/modals/ModalArchive.vue   |   4 +-
 src/components/modals/ModalDelete.vue    |   4 +-
 src/components/modals/ModalMove.vue      |   4 +-
 src/components/modals/ModalNewFile.vue   |   4 +-
 src/components/modals/ModalNewFolder.vue |   4 +-
 src/components/modals/ModalRename.vue    |   4 +-
 src/components/modals/ModalUnarchive.vue |   6 +-
 src/components/modals/ModalUpload.vue    |   6 +-
 src/composables/useData.js               |  74 +++++++++++++++++
 19 files changed, 174 insertions(+), 121 deletions(-)
 create mode 100644 src/composables/useData.js

diff --git a/src/ServiceContainer.js b/src/ServiceContainer.js
index 22f7178e..eed6efbb 100644
--- a/src/ServiceContainer.js
+++ b/src/ServiceContainer.js
@@ -9,6 +9,7 @@ import { format as filesizeDefault, metricFormat as filesizeMetric } from './uti
 import useTheme from './composables/useTheme.js';
 import useModal from "./composables/useModal.js";
 import useDragSelect from "./composables/useDragSelect.js";
+import useData from "./composables/useData.js";
 
 export default (props, options) => {
     const storage = useStorage(props.id);
@@ -17,6 +18,7 @@ export default (props, options) => {
     const theme = useTheme(storage, props.theme);
     const supportedLocales = options.i18n;
     const initialLang = props.locale ?? options.locale;
+    const adapter = storage.getStore('adapter');
 
     const setFeatures = (features) => {
         if (Array.isArray(features)) {
@@ -38,8 +40,6 @@ export default (props, options) => {
         version: version,
         // root element
         root: null,
-        // loading state
-        loading: false,
         // app id
         debug: props.debug,
         // Event Bus
@@ -82,15 +82,7 @@ export default (props, options) => {
         // show thumbnails
         showThumbnails: storage.getStore('show-thumbnails', props.showThumbnails),
 
-        /*
-        * Items
-        * */
-
-        // main storage adapter
-        adapter: storage.getStore('adapter'),
-        // current active path
-        path: path,
-        // fetched items
-        data: {adapter: storage.getStore('adapter'), storages: [], dirname: path, files: []},
+        // file system
+        fs: useData(adapter, path),
     });
 }
diff --git a/src/components/Breadcrumb.vue b/src/components/Breadcrumb.vue
index 7a1b020f..7da634df 100644
--- a/src/components/Breadcrumb.vue
+++ b/src/components/Breadcrumb.vue
@@ -6,42 +6,42 @@
           @dragover="handleDragOver($event)"
           @dragleave="handleDragLeave($event)"
           @drop="handleDropZone($event)"
-          @click="!isGoUpAvailable() || app.emitter.emit('vf-fetch', {params:{q: 'index', adapter: app.data.adapter, path:breadcrumb[breadcrumb.length-2]?.path ?? (app.adapter + '://')}} )"
-          :class="isGoUpAvailable() ? 'text-slate-700 hover:bg-neutral-300 dark:text-neutral-200 dark:hover:bg-gray-700 cursor-pointer' : 'text-gray-400 dark:text-neutral-500'"
+          @click="handleGoUp"
+          :class="app.fs.isGoUpAvailable() ? 'text-slate-700 hover:bg-neutral-300 dark:text-neutral-200 dark:hover:bg-gray-700 cursor-pointer' : 'text-gray-400 dark:text-neutral-500'"
       />
     </span>
-    <span :aria-label="t('Refresh')" data-microtip-position="bottom-right" role="tooltip" v-if="!app.loading">
-      <RefreshSVG
-          @click="app.emitter.emit('vf-fetch',{params:{q: 'index', adapter: app.data.adapter, path: app.data.dirname}} );"/>
+
+    <span :aria-label="t('Refresh')" data-microtip-position="bottom-right" role="tooltip" v-if="!app.fs.loading">
+      <RefreshSVG @click="handleRefresh"/>
     </span>
     <span :aria-label="t('Cancel')" data-microtip-position="bottom-right" role="tooltip" v-else>
       <CloseSVG @click="app.emitter.emit('vf-fetch-abort')"/>
     </span>
 
-    <div v-if="!searchMode" class="group flex bg-white dark:bg-gray-700 items-center rounded p-1 ml-2 w-full"
+    <div v-if="!app.fs.searchMode" class="group flex bg-white dark:bg-gray-700 items-center rounded p-1 ml-2 w-full"
          @click.self="enterSearchMode">
       <HomeSVG
           @dragover="handleDragOver($event)"
           @dragleave="handleDragLeave($event)"
           @drop="handleDropZone($event, -1)"
-          @click="app.emitter.emit('vf-fetch', {params:{q: 'index', adapter: app.data.adapter}})"/>
+          @click="app.emitter.emit('vf-fetch', {params:{q: 'index', adapter: app.fs.adapter}})"/>
 
       <div class="flex leading-6">
-        <div v-for="(item, index) in breadcrumb" :key="index">
+        <div v-for="(item, index) in app.fs.breadcrumbs" :key="index">
           <span class="text-neutral-300 dark:text-gray-600 mx-0.5">/</span>
           <span
-              @dragover="(index === breadcrumb.length - 1) || handleDragOver($event)"
-              @dragleave="(index === breadcrumb.length - 1) || handleDragLeave($event)"
-              @drop="(index === breadcrumb.length - 1) || handleDropZone($event, index)"
+              @dragover="(index === app.fs.breadcrumbs.length - 1) || handleDragOver($event)"
+              @dragleave="(index === app.fs.breadcrumbs.length - 1) || handleDragLeave($event)"
+              @drop="(index === app.fs.breadcrumbs.length - 1) || handleDropZone($event, index)"
               class="px-1.5 py-1 text-slate-700 dark:text-slate-200 hover:bg-neutral-100 dark:hover:bg-gray-800 rounded cursor-pointer"
               :title="item.basename"
-              @click="app.emitter.emit('vf-fetch', {params:{q: 'index', adapter: app.data.adapter, path:item.path}})">{{
+              @click="app.emitter.emit('vf-fetch', {params:{q: 'index', adapter: app.fs.adapter, path:item.path}})">{{
               item.name
             }}</span>
         </div>
       </div>
 
-      <LoadingSVG v-if="app.loading"/>
+      <LoadingSVG v-if="app.fs.loading"/>
     </div>
     <div v-else class="relative flex bg-white dark:bg-gray-700 justify-between items-center rounded p-1 ml-2 w-full">
       <div>
@@ -74,9 +74,6 @@ import SearchSVG from "./icons/search.svg";
 import LoadingSVG from "./icons/loading.svg";
 import ExitSVG from "./icons/exit.svg";
 
-const dirname = ref(null);
-const breadcrumb = ref([]);
-const searchMode = ref(false);
 const searchInput = ref(null);
 
 const app = inject('ServiceContainer');
@@ -84,38 +81,8 @@ const {t} = app.i18n;
 
 const ds = app.dragSelect;
 
-app.emitter.on('vf-explorer-update', () => {
-  let items = [], links = [];
-  dirname.value = app.data.dirname ?? (app.adapter + '://');
-
-  if (dirname.value.length === 0) {
-    breadcrumb.value = [];
-  }
-  dirname.value
-      .replace(app.adapter + '://', '')
-      .split('/')
-      .forEach(function (item) {
-        items.push(item);
-        if (items.join('/') !== '') {
-          links.push({
-            'basename': item,
-            'name': item,
-            'path': app.adapter + '://' + items.join('/'),
-            'type': 'dir'
-          });
-        }
-      });
-
-  if (links.length > 4) {
-    links = links.slice(-5);
-    links[0].name = '..';
-  }
-
-  breadcrumb.value = links;
-});
-
 const exitSearchMode = () => {
-  searchMode.value = false;
+  app.fs.searchMode = false;
   query.value = '';
 }
 
@@ -127,7 +94,7 @@ const enterSearchMode = () => {
   if (!app.features.includes(FEATURES.SEARCH)) {
     return;
   }
-  searchMode.value = true;
+  app.fs.searchMode = true;
   nextTick(() => searchInput.value.focus())
 }
 
@@ -138,32 +105,33 @@ watch(query, newQuery => {
   app.emitter.emit('vf-search-query', {newQuery});
 });
 
-const isGoUpAvailable = () => {
-  return breadcrumb.value.length && !searchMode.value;
-};
-
 const handleDropZone = (e, index = null) => {
   e.preventDefault();
 
   ds.isDraggingRef.value = false;
   handleDragLeave(e);
 
-  index ??= breadcrumb.value.length - 2;
+  index ??= app.fs.breadcrumbs.length - 2;
 
   let draggedItems = JSON.parse(e.dataTransfer.getData('items'));
 
-  if (draggedItems.find(item => item.storage !== app.adapter)) {
+  if (draggedItems.find(item => item.storage !== app.fs.adapter)) {
     alert('Moving items between different storages is not supported yet.');
     return;
   }
 
-  app.modal.open(ModalMove, {items: {from: draggedItems, to: breadcrumb.value[index] ?? {path: (app.adapter + '://')}}})
+  app.modal.open(ModalMove, {
+    items: {
+      from: draggedItems,
+      to: app.fs.breadcrumbs[index] ?? {path: (app.fs.adapter + '://')}
+    }
+  })
 };
 
 const handleDragOver = (e) => {
   e.preventDefault();
 
-  if (isGoUpAvailable()) {
+  if (app.fs.isGoUpAvailable()) {
     e.dataTransfer.dropEffect = 'copy';
     e.currentTarget.classList.add('bg-blue-200', 'dark:bg-slate-500');
   } else {
@@ -171,16 +139,35 @@ const handleDragOver = (e) => {
     e.dataTransfer.effectAllowed = 'none';
   }
 };
+
 const handleDragLeave = (e) => {
   e.preventDefault();
 
   e.currentTarget.classList.remove('bg-blue-200', 'dark:bg-slate-500');
 
-  if (isGoUpAvailable()) {
+  if (app.fs.isGoUpAvailable()) {
     e.currentTarget.classList.remove('bg-blue-200', 'dark:bg-slate-500');
   }
 };
 
+const handleRefresh = () => {
+  exitSearchMode();
+  app.emitter.emit('vf-fetch',{params:{q: 'index', adapter: app.fs.adapter, path: app.fs.data.dirname}} );
+}
+
+const handleGoUp = () => {
+  exitSearchMode();
+
+  !app.fs.isGoUpAvailable() || app.emitter.emit('vf-fetch', {
+    params: {
+      q: 'index',
+      adapter: app.fs.adapter,
+      path: app.fs.breadcrumbs[app.fs.breadcrumbs.length - 2]?.path ?? (app.fs.adapter + '://')
+    }
+  })
+}
+
+
 const handleBlur = () => {
   if (query.value === '') {
     exitSearchMode();
diff --git a/src/components/ContextMenu.vue b/src/components/ContextMenu.vue
index 423eb4cb..bc2e492e 100644
--- a/src/components/ContextMenu.vue
+++ b/src/components/ContextMenu.vue
@@ -68,13 +68,13 @@ const menuItems = {
   refresh: {
     title: () => t('Refresh'),
     action: () => {
-      app.emitter.emit('vf-fetch', {params: {q: 'index', adapter: app.data.adapter, path: app.data.dirname}});
+      app.emitter.emit('vf-fetch', {params: {q: 'index', adapter: app.fs.adapter, path: app.fs.data.dirname}});
     },
   },
   preview: {
     key: FEATURES.PREVIEW,
     title: () => t('Preview'),
-    action: () => app.modal.open(ModalPreview, {adapter: app.data.adapter, item: selectedItems.value[0]}),
+    action: () => app.modal.open(ModalPreview, {adapter: app.fs.adapter, item: selectedItems.value[0]}),
   },
   open: {
     title: () => t('Open'),
@@ -83,7 +83,7 @@ const menuItems = {
       app.emitter.emit('vf-fetch', {
         params: {
           q: 'index',
-          adapter: app.data.adapter,
+          adapter: app.fs.adapter,
           path: selectedItems.value[0].path
         }
       });
@@ -96,7 +96,7 @@ const menuItems = {
       app.emitter.emit('vf-fetch', {
         params: {
           q: 'index',
-          adapter: app.data.adapter,
+          adapter: app.fs.adapter,
           path: (selectedItems.value[0].dir)
         }
       });
@@ -104,7 +104,7 @@ const menuItems = {
   },
   download: {
     key: FEATURES.DOWNLOAD,
-    link: computed(() => app.requester.getDownloadUrl(app.data.adapter, selectedItems.value[0])),
+    link: computed(() => app.requester.getDownloadUrl(app.fs.adapter, selectedItems.value[0])),
     title: () => t('Download'),
     action: () => {
     },
diff --git a/src/components/Explorer.vue b/src/components/Explorer.vue
index fdc93600..9f29dabe 100644
--- a/src/components/Explorer.vue
+++ b/src/components/Explorer.vue
@@ -57,7 +57,7 @@
           <div class="relative">
             <img src="data:image/png;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
                  class="lazy h-10 md:h-12 m-auto" v-if="(item.mime_type ?? '').startsWith('image') && app.showThumbnails"
-                 :data-src="app.requester.getPreviewUrl(app.adapter, item)" :alt="item.basename" :key="item.path">
+                 :data-src="app.requester.getPreviewUrl(app.fs.adapter, item)" :alt="item.basename" :key="item.path">
             <ItemIcon :type="item.type" v-else/>
             <div class="absolute hidden md:block top-1/2 w-full text-center text-neutral-500"
                  v-if="!((item.mime_type ?? '').startsWith('image') && app.showThumbnails) && item.type !== 'dir'" >
@@ -108,8 +108,8 @@ app.emitter.on('vf-search-query', ({newQuery}) => {
     app.emitter.emit('vf-fetch', {
       params: {
         q: 'search',
-        adapter: app.data.adapter,
-        path: app.data.dirname,
+        adapter: app.fs.adapter,
+        path: app.fs.data.dirname,
         filter: newQuery
       },
       onSuccess: (data) => {
@@ -119,7 +119,7 @@ app.emitter.on('vf-search-query', ({newQuery}) => {
       }
     });
   } else {
-    app.emitter.emit('vf-fetch', {params: {q: 'index', adapter: app.data.adapter, path: app.data.dirname}});
+    app.emitter.emit('vf-fetch', {params: {q: 'index', adapter: app.fs.adapter, path: app.fs.data.dirname}});
   }
 });
 
@@ -145,7 +145,7 @@ const handleTouchStart = (event) => {
 const sort = reactive({active: false, column: '', order: ''});
 
 const getItems = (sorted = true) => {
-  let files = [...app.data.files],
+  let files = [...app.fs.data.files],
       column = sort.column,
       order = sort.order === 'asc' ? 1 : -1;
 
diff --git a/src/components/Item.vue b/src/components/Item.vue
index 422cf28a..6a1ee2a4 100644
--- a/src/components/Item.vue
+++ b/src/components/Item.vue
@@ -33,9 +33,9 @@ const props = defineProps({
 const openItem = (item) => {
   if (item.type === 'dir') {
     app.emitter.emit('vf-search-exit');
-    app.emitter.emit('vf-fetch', {params: {q: 'index', adapter: app.data.adapter, path: item.path}});
+    app.emitter.emit('vf-fetch', {params: {q: 'index', adapter: app.fs.adapter, path: item.path}});
   } else {
-    app.modal.open(ModalPreview, {adapter: app.data.adapter, item})
+    app.modal.open(ModalPreview, {adapter: app.fs.adapter, item})
   }
 };
 
@@ -74,7 +74,7 @@ const handleDropZone = (e, item) => {
   ds.isDraggingRef.value = false;
   let draggedItems = JSON.parse(e.dataTransfer.getData('items'));
 
-  if (draggedItems.find(item => item.storage !== app.adapter)) {
+  if (draggedItems.find(item => item.storage !== app.fs.adapter)) {
     alert('Moving items between different storages is not supported yet.');
     return;
   }
diff --git a/src/components/Statusbar.vue b/src/components/Statusbar.vue
index 73b7377f..4f6407b8 100644
--- a/src/components/Statusbar.vue
+++ b/src/components/Statusbar.vue
@@ -4,14 +4,14 @@
       <div class="mx-2" :aria-label="t('Storage')" data-microtip-position="top-right" role="tooltip">
         <StorageSVG/>
       </div>
-      <select v-model="app.adapter" @change="handleStorageSelect" class="py-0.5 text-sm text-slate-500 border dark:border-gray-600 dark:text-neutral-50 dark:bg-gray-700 rounded pl-2 pr-8">
-        <option v-for="storage in app.data.storages" :value="storage">
+      <select v-model="app.fs.adapter" @change="handleStorageSelect" class="py-0.5 text-sm text-slate-500 border dark:border-gray-600 dark:text-neutral-50 dark:bg-gray-700 rounded pl-2 pr-8">
+        <option v-for="storage in app.fs.data.storages" :value="storage">
           {{ storage }}
         </option>
       </select>
 
      <div class="ml-3">
-       <span v-if="searchQuery.length">{{ app.data.files.length }} items found. </span>
+       <span v-if="searchQuery.length">{{ app.fs.data.files.length }} items found. </span>
        <span class="ml-1">{{ app.dragSelect.getCount() > 0 ? t('%s item(s) selected.', app.dragSelect.getCount()) : '' }}</span>
      </div>
     </div>
@@ -42,8 +42,8 @@ const  ds = app.dragSelect;
 
 const handleStorageSelect = () => {
   app.emitter.emit('vf-search-exit');
-  app.emitter.emit('vf-fetch', {params:{q: 'index', adapter: app.adapter}});
-  setStore('adapter', app.adapter);
+  app.emitter.emit('vf-fetch', {params:{q: 'index', adapter: app.fs.adapter}});
+  setStore('adapter', app.fs.adapter);
 };
 
 const searchQuery = ref('');
diff --git a/src/components/Toolbar.vue b/src/components/Toolbar.vue
index 438b78be..146f8c03 100644
--- a/src/components/Toolbar.vue
+++ b/src/components/Toolbar.vue
@@ -52,7 +52,7 @@
     <div class="flex text-center" v-else>
       <div class="pl-2"> {{ t('Search results for') }} <span
           class="dark:bg-gray-700 bg-gray-200 text-xs px-2 py-1 rounded">{{ searchQuery }}</span></div>
-      <LoadingSVG v-if="app.loading"/>
+      <LoadingSVG v-if="app.fs.loading"/>
     </div>
 
     <div class="flex text-center items-center justify-end">
diff --git a/src/components/VueFinder.vue b/src/components/VueFinder.vue
index b4f86cc2..407314bc 100644
--- a/src/components/VueFinder.vue
+++ b/src/components/VueFinder.vue
@@ -112,17 +112,16 @@ app.root = root;
 const ds = app.dragSelect;
 
 const updateItems = (data) => {
-  Object.assign(app.data, data);
+  Object.assign(app.fs.data, data);
   ds.clearSelection();
   ds.refreshSelection();
-  app.emitter.emit('vf-explorer-update');
 };
 
 /** @type {AbortController} */
 let controller;
 app.emitter.on('vf-fetch-abort', () => {
   controller.abort();
-  app.loading = false;
+  app.fs.loading = false;
 });
 
 // Fetch data
@@ -131,7 +130,7 @@ app.emitter.on('vf-fetch', ({params, body = null, onSuccess = null, onError = nu
     if (controller) {
       controller.abort();
     }
-    app.loading = true;
+    app.fs.loading = true;
   }
 
   controller = new AbortController();
@@ -143,14 +142,14 @@ app.emitter.on('vf-fetch', ({params, body = null, onSuccess = null, onError = nu
     body,
     abortSignal: signal,
   }).then(data => {
-    app.adapter = data.adapter;
+    app.fs.adapter = data.adapter;
     if (app.persist) {
-      app.path = data.dirname;
-      setStore('path', app.path);
+      app.fs.path = data.dirname;
+      setStore('path', app.fs.path);
     }
 
     if (['index', 'search'].includes(params.q)) {
-      app.loading = false;
+      app.fs.loading = false;
     }
     if (!noCloseModal) {
       app.modal.close();
@@ -169,19 +168,20 @@ app.emitter.on('vf-fetch', ({params, body = null, onSuccess = null, onError = nu
 
 // fetch initial data
 onMounted(() => {
-  // app.adapter can be null at first, until we get the adapter list it will be the first one from response
+  // app.fs.adapter can be null at first, until we get the adapter list it will be the first one from response
   // later we can set default adapter from a prop value
 
   // if there is a path coming from the prop, we should use it.
   let pathExists = {};
-  if (app.path.includes("://")) {
+
+  if (app.fs.path.includes("://")) {
     pathExists = {
-      adapter: app.path.split("://")[0],
-      path: app.path
+      adapter: app.fs.path.split("://")[0],
+      path: app.fs.path
     };
   }
 
-  app.emitter.emit('vf-fetch', {params: {q: 'index', adapter: app.adapter, ...pathExists}});
+  app.emitter.emit('vf-fetch', {params: {q: 'index', adapter: app.fs.adapter, ...pathExists}});
 
   // Emit select event
   ds.onSelect((items) => {
diff --git a/src/components/icons/go_up.svg b/src/components/icons/go_up.svg
index 94ff02b9..fe22e6bc 100644
--- a/src/components/icons/go_up.svg
+++ b/src/components/icons/go_up.svg
@@ -1,5 +1,5 @@
 <svg class="h-6 w-6 p-0.5 rounded"
      xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
-    <path fill-rule="evenodd" clip-rule="evenodd"
+    <path fill-rule="evenodd" clip-rule="evenodd" class="pointer-events-none"
           d="M5.293 9.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 7.414V15a1 1 0 11-2 0V7.414L6.707 9.707a1 1 0 01-1.414 0z"/>
 </svg>
diff --git a/src/components/icons/home.svg b/src/components/icons/home.svg
index d55d466a..346aac83 100644
--- a/src/components/icons/home.svg
+++ b/src/components/icons/home.svg
@@ -1,4 +1,4 @@
 <svg class="h-6 w-6 p-1 rounded text-slate-700 hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-gray-800 cursor-pointer"
      xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
-    <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"/>
+    <path class="pointer-events-none" d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"/>
 </svg>
diff --git a/src/components/modals/ModalArchive.vue b/src/components/modals/ModalArchive.vue
index cd6119ea..aa849365 100644
--- a/src/components/modals/ModalArchive.vue
+++ b/src/components/modals/ModalArchive.vue
@@ -56,8 +56,8 @@ const archive = () => {
       params: {
         q: 'archive',
         m: 'post',
-        adapter: app.adapter,
-        path: app.data.dirname,
+        adapter: app.fs.adapter,
+        path: app.fs.data.dirname,
       },
       body: {
         items: items.value.map(({path, type}) => ({path, type})),
diff --git a/src/components/modals/ModalDelete.vue b/src/components/modals/ModalDelete.vue
index 4559255b..89726f09 100644
--- a/src/components/modals/ModalDelete.vue
+++ b/src/components/modals/ModalDelete.vue
@@ -55,8 +55,8 @@ const remove = () => {
       params: {
         q: 'delete',
         m: 'post',
-        adapter: app.adapter,
-        path: app.data.dirname,
+        adapter: app.fs.adapter,
+        path: app.fs.data.dirname,
       },
       body: {
         items: items.value.map(({path, type}) => ({path, type})),
diff --git a/src/components/modals/ModalMove.vue b/src/components/modals/ModalMove.vue
index f533bd4e..9e911b74 100644
--- a/src/components/modals/ModalMove.vue
+++ b/src/components/modals/ModalMove.vue
@@ -67,8 +67,8 @@ const move = () => {
       params: {
         q: 'move',
         m: 'post',
-        adapter: app.adapter,
-        path: app.data.dirname,
+        adapter: app.fs.adapter,
+        path: app.fs.data.dirname,
       },
       body: {
         items: items.value.map(({path, type}) => ({path, type})),
diff --git a/src/components/modals/ModalNewFile.vue b/src/components/modals/ModalNewFile.vue
index 0e024263..833e0f9b 100644
--- a/src/components/modals/ModalNewFile.vue
+++ b/src/components/modals/ModalNewFile.vue
@@ -48,8 +48,8 @@ const createFile = () => {
       params: {
         q: 'newfile',
         m: 'post',
-        adapter: app.adapter,
-        path: app.data.dirname,
+        adapter: app.fs.adapter,
+        path: app.fs.data.dirname,
       },
       body: {
         name: name.value
diff --git a/src/components/modals/ModalNewFolder.vue b/src/components/modals/ModalNewFolder.vue
index 084b221d..3ca3f64e 100644
--- a/src/components/modals/ModalNewFolder.vue
+++ b/src/components/modals/ModalNewFolder.vue
@@ -45,8 +45,8 @@ const createFolder = () => {
       params: {
         q: 'newfolder',
         m: 'post',
-        adapter: app.adapter,
-        path: app.data.dirname,
+        adapter: app.fs.adapter,
+        path: app.fs.data.dirname,
       },
       body: {
         name: name.value
diff --git a/src/components/modals/ModalRename.vue b/src/components/modals/ModalRename.vue
index aca96057..45310d6a 100644
--- a/src/components/modals/ModalRename.vue
+++ b/src/components/modals/ModalRename.vue
@@ -51,8 +51,8 @@ const rename = () => {
       params: {
         q: 'rename',
         m: 'post',
-        adapter: app.adapter,
-        path: app.data.dirname,
+        adapter: app.fs.adapter,
+        path: app.fs.data.dirname,
       },
       body: {
         item: item.value.path,
diff --git a/src/components/modals/ModalUnarchive.vue b/src/components/modals/ModalUnarchive.vue
index 42f56b72..d1d9d629 100644
--- a/src/components/modals/ModalUnarchive.vue
+++ b/src/components/modals/ModalUnarchive.vue
@@ -18,7 +18,7 @@
               </svg>
             <span class="ml-1.5">{{ item.basename }}</span>
           </p>
-          <p class="my-1 text-sm text-gray-500">{{ t('The archive will be unarchived at')}} ({{app.data.dirname}})</p>
+          <p class="my-1 text-sm text-gray-500">{{ t('The archive will be unarchived at')}} ({{app.fs.data.dirname}})</p>
 
           <message v-if="message.length" @hidden="message=''" error>{{ message }}</message>
         </div>
@@ -51,8 +51,8 @@ const unarchive = () => {
     params: {
       q: 'unarchive',
       m: 'post',
-      adapter: app.adapter,
-      path: app.data.dirname,
+      adapter: app.fs.adapter,
+      path: app.fs.data.dirname,
     },
     body: {
       item: item.value.path
diff --git a/src/components/modals/ModalUpload.vue b/src/components/modals/ModalUpload.vue
index 4d7260b4..ab114839 100644
--- a/src/components/modals/ModalUpload.vue
+++ b/src/components/modals/ModalUpload.vue
@@ -289,7 +289,7 @@ function buildReqParams() {
   return app.requester.transformRequestParams({
     url: '',
     method: 'post',
-    params: { q: 'upload', adapter: app.data.adapter, path: app.data.dirname },
+    params: { q: 'upload', adapter: app.fs.adapter, path: app.fs.data.dirname },
   });
 }
 
@@ -394,14 +394,14 @@ onMounted(async () => {
     message.value = error.message;
     uploading.value = false;
     app.emitter.emit('vf-fetch', {
-      params: { q: 'index', adapter: app.data.adapter, path: app.data.dirname },
+      params: { q: 'index', adapter: app.fs.adapter, path: app.fs.data.dirname },
       noCloseModal: true,
     });
   })
   uppy.on('complete', () => {
     uploading.value = false;
     app.emitter.emit('vf-fetch', {
-      params: { q: 'index', adapter: app.data.adapter, path: app.data.dirname },
+      params: { q: 'index', adapter: app.fs.adapter, path: app.fs.data.dirname },
       noCloseModal: true,
     });
   });
diff --git a/src/composables/useData.js b/src/composables/useData.js
new file mode 100644
index 00000000..2de1898e
--- /dev/null
+++ b/src/composables/useData.js
@@ -0,0 +1,74 @@
+import {computed, onMounted, reactive, ref, watch} from "vue";
+
+export default function (initialAdapter, initialPath) {
+
+    const adapter = ref(initialAdapter);
+    const path = ref(initialPath);
+    const breadcrumbs = ref([]);
+
+    let loading = false; // loading state
+
+    let searchMode = false;
+
+    // fetched items
+    const data = reactive({
+        adapter: adapter,
+        storages: [],
+        dirname: path,
+        files: []
+    });
+
+    // breadcrumbs for the current path
+    function updateBreadcrumbs() {
+        let items = [], links = [];
+
+        let dirname = path.value ?? (adapter.value + '://');
+
+        if (dirname.length === 0) {
+            breadcrumbs.value = [];
+        }
+
+        dirname
+            .replace(adapter.value + '://', '')
+            .split('/')
+            .forEach(function (item) {
+                items.push(item);
+                if (items.join('/') !== '') {
+                    links.push({
+                        'basename': item,
+                        'name': item,
+                        'path': adapter.value + '://' + items.join('/'),
+                        'type': 'dir'
+                    });
+                }
+            });
+
+        if (links.length > 4) {
+            links = links.slice(-5);
+            links[0].name = '..';
+        }
+
+        breadcrumbs.value = [...links];
+    }
+
+    function isGoUpAvailable() {
+        return breadcrumbs.value && breadcrumbs.value.length && !searchMode;
+    };
+
+    onMounted(() => {
+        // load data
+    });
+
+    watch(path, updateBreadcrumbs)
+    onMounted(updateBreadcrumbs)
+
+    return {
+        adapter,
+        breadcrumbs,
+        path,
+        loading,
+        searchMode,
+        data,
+        isGoUpAvailable
+    }
+}

From 766caa0c1fbf6f7a11654f5c6fdac094f7067537 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yusuf=20=C3=96zdemir?= <yusuf@ozdemir.be>
Date: Sun, 5 May 2024 17:18:51 +0300
Subject: [PATCH 45/52] Update Breadcrumb.vue

---
 src/components/Breadcrumb.vue | 57 +++++++++++++++++++----------------
 1 file changed, 31 insertions(+), 26 deletions(-)

diff --git a/src/components/Breadcrumb.vue b/src/components/Breadcrumb.vue
index 7da634df..bcc32f18 100644
--- a/src/components/Breadcrumb.vue
+++ b/src/components/Breadcrumb.vue
@@ -74,37 +74,11 @@ import SearchSVG from "./icons/search.svg";
 import LoadingSVG from "./icons/loading.svg";
 import ExitSVG from "./icons/exit.svg";
 
-const searchInput = ref(null);
-
 const app = inject('ServiceContainer');
 const {t} = app.i18n;
 
 const ds = app.dragSelect;
 
-const exitSearchMode = () => {
-  app.fs.searchMode = false;
-  query.value = '';
-}
-
-app.emitter.on('vf-search-exit', () => {
-  exitSearchMode();
-});
-
-const enterSearchMode = () => {
-  if (!app.features.includes(FEATURES.SEARCH)) {
-    return;
-  }
-  app.fs.searchMode = true;
-  nextTick(() => searchInput.value.focus())
-}
-
-const query = useDebouncedRef('', 400);
-
-watch(query, newQuery => {
-  app.emitter.emit('vf-toast-clear');
-  app.emitter.emit('vf-search-query', {newQuery});
-});
-
 const handleDropZone = (e, index = null) => {
   e.preventDefault();
 
@@ -167,6 +141,37 @@ const handleGoUp = () => {
   })
 }
 
+/**
+ *
+ * Search
+ */
+
+const searchInput = ref(null);
+
+const enterSearchMode = () => {
+  if (!app.features.includes(FEATURES.SEARCH)) {
+    return;
+  }
+  app.fs.searchMode = true;
+  nextTick(() => searchInput.value.focus())
+}
+
+const query = useDebouncedRef('', 400);
+
+watch(query, newQuery => {
+  app.emitter.emit('vf-toast-clear');
+  app.emitter.emit('vf-search-query', {newQuery});
+});
+
+const exitSearchMode = () => {
+  app.fs.searchMode = false;
+  query.value = '';
+}
+
+app.emitter.on('vf-search-exit', () => {
+  exitSearchMode();
+});
+
 
 const handleBlur = () => {
   if (query.value === '') {

From 593452c98e0fd590a5e65e5a608cb45c4d0f133e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yusuf=20=C3=96zdemir?= <yusuf@ozdemir.be>
Date: Sun, 5 May 2024 19:16:55 +0300
Subject: [PATCH 46/52] add dropdown for too many folders in breadcrumb

---
 src/components/Breadcrumb.vue   | 82 +++++++++++++++++++++++++++++++--
 src/components/ItemIcon.vue     |  4 +-
 src/components/icons/dots.svg   |  3 ++
 src/components/icons/file.svg   |  6 +--
 src/components/icons/folder.svg |  6 +--
 src/composables/useData.js      | 30 ++++++++++--
 6 files changed, 114 insertions(+), 17 deletions(-)
 create mode 100644 src/components/icons/dots.svg

diff --git a/src/components/Breadcrumb.vue b/src/components/Breadcrumb.vue
index bcc32f18..08fd1e55 100644
--- a/src/components/Breadcrumb.vue
+++ b/src/components/Breadcrumb.vue
@@ -26,6 +26,32 @@
           @drop="handleDropZone($event, -1)"
           @click="app.emitter.emit('vf-fetch', {params:{q: 'index', adapter: app.fs.adapter}})"/>
 
+      <div class="flex leading-6">
+
+        <div v-if="app.fs.hiddenBreadcrumbs.length" class="flex" v-click-outside="() => app.fs.toggleHiddenBreadcrumbs(false)">
+          <div class="text-neutral-300 dark:text-gray-600 mx-0.5">/</div>
+          <div class="relative">
+            <span @click="app.fs.toggleHiddenBreadcrumbs()"
+                   class="text-slate-700 dark:text-slate-200 hover:bg-neutral-100 dark:hover:bg-gray-800 rounded cursor-pointer">
+              <DotsSVG class="px-1" />
+            </span>
+
+            <div v-show="app.fs.showHiddenBreadcrumbs"
+                class="z-30 absolute rounded -mx-1.5 mt-1 bg-neutral-50 dark:bg-gray-800 max-w-80 max-h-40 shadow overflow-y-auto text-gray-700 dark:text-gray-200 border border-neutral-300 dark:border-gray-600">
+              <div
+                  v-for="(item, index) in app.fs.hiddenBreadcrumbs" :key="index"
+                  @dragover="handleDragOver($event)"
+                  @dragleave="handleDragLeave($event)"
+                  @drop="handleHiddenBreadcrumbDropZone($event, index)"
+                  @click="handleHiddenBreadcrumbsClick(item)"
+                  class="flex px-2 py-0.5 hover:bg-gray-400/20 cursor-pointer items-center whitespace-nowrap   " >
+                <span><FolderSVG class="h-5 w-5" /></span> <span class="inline-block w-full text-ellipsis overflow-hidden">{{ item.name}}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
       <div class="flex leading-6">
         <div v-for="(item, index) in app.fs.breadcrumbs" :key="index">
           <span class="text-neutral-300 dark:text-gray-600 mx-0.5">/</span>
@@ -73,12 +99,38 @@ import HomeSVG from "./icons/home.svg";
 import SearchSVG from "./icons/search.svg";
 import LoadingSVG from "./icons/loading.svg";
 import ExitSVG from "./icons/exit.svg";
+import FolderSVG from './icons/folder.svg';
+import DotsSVG from './icons/dots.svg';
 
 const app = inject('ServiceContainer');
 const {t} = app.i18n;
 
 const ds = app.dragSelect;
 
+
+const handleHiddenBreadcrumbDropZone = (e, index = null) => {
+  e.preventDefault();
+
+  ds.isDraggingRef.value = false;
+  handleDragLeave(e);
+
+  index ??= app.fs.hiddenBreadcrumbs.length - 1;
+
+  let draggedItems = JSON.parse(e.dataTransfer.getData('items'));
+
+  if (draggedItems.find(item => item.storage !== app.fs.adapter)) {
+    alert('Moving items between different storages is not supported yet.');
+    return;
+  }
+
+  app.modal.open(ModalMove, {
+    items: {
+      from: draggedItems,
+      to: app.fs.hiddenBreadcrumbs[index] ?? {path: (app.fs.adapter + '://')}
+    }
+  })
+};
+
 const handleDropZone = (e, index = null) => {
   e.preventDefault();
 
@@ -107,7 +159,7 @@ const handleDragOver = (e) => {
 
   if (app.fs.isGoUpAvailable()) {
     e.dataTransfer.dropEffect = 'copy';
-    e.currentTarget.classList.add('bg-blue-200', 'dark:bg-slate-500');
+    e.currentTarget.classList.add('bg-blue-200', 'dark:bg-slate-600');
   } else {
     e.dataTransfer.dropEffect = 'none';
     e.dataTransfer.effectAllowed = 'none';
@@ -117,15 +169,16 @@ const handleDragOver = (e) => {
 const handleDragLeave = (e) => {
   e.preventDefault();
 
-  e.currentTarget.classList.remove('bg-blue-200', 'dark:bg-slate-500');
+  e.currentTarget.classList.remove('bg-blue-200', 'dark:bg-slate-600');
 
   if (app.fs.isGoUpAvailable()) {
-    e.currentTarget.classList.remove('bg-blue-200', 'dark:bg-slate-500');
+    e.currentTarget.classList.remove('bg-blue-200', 'dark:bg-slate-600');
   }
 };
 
 const handleRefresh = () => {
   exitSearchMode();
+
   app.emitter.emit('vf-fetch',{params:{q: 'index', adapter: app.fs.adapter, path: app.fs.data.dirname}} );
 }
 
@@ -136,11 +189,32 @@ const handleGoUp = () => {
     params: {
       q: 'index',
       adapter: app.fs.adapter,
-      path: app.fs.breadcrumbs[app.fs.breadcrumbs.length - 2]?.path ?? (app.fs.adapter + '://')
+      path: app.fs.parentFolderPath
     }
   })
 }
 
+const handleHiddenBreadcrumbsClick = (item) => {
+  app.emitter.emit('vf-fetch', {params: {q: 'index', adapter: app.fs.adapter, path: item.path}});
+  app.fs.toggleHiddenBreadcrumbs(false);
+}
+
+const vClickOutside = {
+  mounted(el, binding, vnode, prevVnode) {
+    el.clickOutsideEvent = function (event) {
+      // here I check that click was outside the el and his children
+      if (!(el === event.target || el.contains(event.target))) {
+        // and if it did, call method provided in attribute value
+        binding.value();
+      }
+    };
+    document.body.addEventListener('click', el.clickOutsideEvent)
+  },
+  beforeUnmount(el, binding, vnode, prevVnode) {
+    document.body.removeEventListener('click', el.clickOutsideEvent)
+  }
+};
+
 /**
  *
  * Search
diff --git a/src/components/ItemIcon.vue b/src/components/ItemIcon.vue
index 12612981..53d99793 100644
--- a/src/components/ItemIcon.vue
+++ b/src/components/ItemIcon.vue
@@ -1,7 +1,7 @@
 <template>
   <span>
-    <FileSVG  v-if="type === 'dir'" :class="{'h-5 w-5': small, 'h-10 w-10 md:h-12 md:w-12 m-auto': !small}" />
-    <FolderSVG  v-else :class="{'h-5 w-5': small, 'h-10 w-10 md:h-12 md:w-12 m-auto': !small}" />
+    <FolderSVG v-if="type === 'dir'" :class="{'h-5 w-5': small, 'h-10 w-10 md:h-12 md:w-12 m-auto': !small}" />
+    <FileSVG v-else :class="{'h-5 w-5': small, 'h-10 w-10 md:h-12 md:w-12 m-auto': !small}" />
   </span>
 </template>
 
diff --git a/src/components/icons/dots.svg b/src/components/icons/dots.svg
new file mode 100644
index 00000000..3f2991d4
--- /dev/null
+++ b/src/components/icons/dots.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="h-6 w-6 rounded text-slate-700 hover:bg-neutral-100 dark:fill-neutral-300 dark:hover:bg-gray-800 cursor-pointer">
+    <path d="M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z"/>
+</svg>
diff --git a/src/components/icons/file.svg b/src/components/icons/file.svg
index f381f4ff..4e79e7c2 100644
--- a/src/components/icons/file.svg
+++ b/src/components/icons/file.svg
@@ -1,6 +1,6 @@
 <svg xmlns="http://www.w3.org/2000/svg"
-     class="text-neutral-500 fill-sky-500 stroke-sky-500 dark:fill-slate-500 dark:stroke-slate-500"
-     fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
+     class="text-neutral-500" fill="none" viewBox="0 0 24 24"
+     stroke="currentColor" stroke-width="1">
     <path stroke-linecap="round" stroke-linejoin="round"
-          d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/>
+          d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"/>
 </svg>
diff --git a/src/components/icons/folder.svg b/src/components/icons/folder.svg
index 4e79e7c2..f381f4ff 100644
--- a/src/components/icons/folder.svg
+++ b/src/components/icons/folder.svg
@@ -1,6 +1,6 @@
 <svg xmlns="http://www.w3.org/2000/svg"
-     class="text-neutral-500" fill="none" viewBox="0 0 24 24"
-     stroke="currentColor" stroke-width="1">
+     class="text-neutral-500 fill-sky-500 stroke-sky-500 dark:fill-slate-500 dark:stroke-slate-500"
+     fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
     <path stroke-linecap="round" stroke-linejoin="round"
-          d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"/>
+          d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/>
 </svg>
diff --git a/src/composables/useData.js b/src/composables/useData.js
index 2de1898e..153a8d2a 100644
--- a/src/composables/useData.js
+++ b/src/composables/useData.js
@@ -5,6 +5,8 @@ export default function (initialAdapter, initialPath) {
     const adapter = ref(initialAdapter);
     const path = ref(initialPath);
     const breadcrumbs = ref([]);
+    const hiddenBreadcrumbs = ref([]);
+    const showHiddenBreadcrumbs = ref(false);
 
     let loading = false; // loading state
 
@@ -43,18 +45,32 @@ export default function (initialAdapter, initialPath) {
                 }
             });
 
-        if (links.length > 4) {
-            links = links.slice(-5);
-            links[0].name = '..';
+        const [linksToDisplay, hiddenLinks ] = separateBreadcrumbs(links, 3);
+
+        hiddenBreadcrumbs.value = hiddenLinks;
+        breadcrumbs.value = linksToDisplay;
+    }
+
+    function separateBreadcrumbs(links, show) {
+        if (links.length > show) {
+            return [links.slice(-show), links.slice(0, -show)];
         }
 
-        breadcrumbs.value = [...links];
+        return [links, []]
+    }
+
+    function toggleHiddenBreadcrumbs(value = null) {
+        showHiddenBreadcrumbs.value = value ?? !showHiddenBreadcrumbs.value;
     }
 
     function isGoUpAvailable() {
         return breadcrumbs.value && breadcrumbs.value.length && !searchMode;
     };
 
+    const parentFolderPath =  computed(()  => {
+        return breadcrumbs.value[breadcrumbs.value.length - 2]?.path ?? (adapter.value + '://');
+    });
+
     onMounted(() => {
         // load data
     });
@@ -65,10 +81,14 @@ export default function (initialAdapter, initialPath) {
     return {
         adapter,
         breadcrumbs,
+        hiddenBreadcrumbs,
+        showHiddenBreadcrumbs,
+        toggleHiddenBreadcrumbs,
         path,
         loading,
         searchMode,
         data,
-        isGoUpAvailable
+        isGoUpAvailable,
+        parentFolderPath
     }
 }

From 11a4d1d5d2d833531494e10de527e5d046ddb2ee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yusuf=20=C3=96zdemir?= <yusuf@ozdemir.be>
Date: Sun, 5 May 2024 22:45:07 +0300
Subject: [PATCH 47/52] fix breadcrumb

---
 src/components/Breadcrumb.vue | 45 ++++++++++++++++++++++-------------
 1 file changed, 28 insertions(+), 17 deletions(-)

diff --git a/src/components/Breadcrumb.vue b/src/components/Breadcrumb.vue
index 08fd1e55..90ac5939 100644
--- a/src/components/Breadcrumb.vue
+++ b/src/components/Breadcrumb.vue
@@ -18,36 +18,25 @@
       <CloseSVG @click="app.emitter.emit('vf-fetch-abort')"/>
     </span>
 
-    <div v-if="!app.fs.searchMode" class="group flex bg-white dark:bg-gray-700 items-center rounded p-1 ml-2 w-full"
+    <div v-if="!app.fs.searchMode" class="group flex bg-white dark:bg-gray-700 items-center rounded p-1 ml-2 w-full overflow-hidden"
          @click.self="enterSearchMode">
-      <HomeSVG
+      <div>
+        <HomeSVG
           @dragover="handleDragOver($event)"
           @dragleave="handleDragLeave($event)"
           @drop="handleDropZone($event, -1)"
           @click="app.emitter.emit('vf-fetch', {params:{q: 'index', adapter: app.fs.adapter}})"/>
+      </div>
 
       <div class="flex leading-6">
 
-        <div v-if="app.fs.hiddenBreadcrumbs.length" class="flex" v-click-outside="() => app.fs.toggleHiddenBreadcrumbs(false)">
+        <div v-if="app.fs.hiddenBreadcrumbs.length" class="flex" v-click-outside="handleClickOutside">
           <div class="text-neutral-300 dark:text-gray-600 mx-0.5">/</div>
           <div class="relative">
             <span @click="app.fs.toggleHiddenBreadcrumbs()"
                    class="text-slate-700 dark:text-slate-200 hover:bg-neutral-100 dark:hover:bg-gray-800 rounded cursor-pointer">
               <DotsSVG class="px-1" />
             </span>
-
-            <div v-show="app.fs.showHiddenBreadcrumbs"
-                class="z-30 absolute rounded -mx-1.5 mt-1 bg-neutral-50 dark:bg-gray-800 max-w-80 max-h-40 shadow overflow-y-auto text-gray-700 dark:text-gray-200 border border-neutral-300 dark:border-gray-600">
-              <div
-                  v-for="(item, index) in app.fs.hiddenBreadcrumbs" :key="index"
-                  @dragover="handleDragOver($event)"
-                  @dragleave="handleDragLeave($event)"
-                  @drop="handleHiddenBreadcrumbDropZone($event, index)"
-                  @click="handleHiddenBreadcrumbsClick(item)"
-                  class="flex px-2 py-0.5 hover:bg-gray-400/20 cursor-pointer items-center whitespace-nowrap   " >
-                <span><FolderSVG class="h-5 w-5" /></span> <span class="inline-block w-full text-ellipsis overflow-hidden">{{ item.name}}</span>
-              </div>
-            </div>
           </div>
         </div>
       </div>
@@ -59,7 +48,7 @@
               @dragover="(index === app.fs.breadcrumbs.length - 1) || handleDragOver($event)"
               @dragleave="(index === app.fs.breadcrumbs.length - 1) || handleDragLeave($event)"
               @drop="(index === app.fs.breadcrumbs.length - 1) || handleDropZone($event, index)"
-              class="px-1.5 py-1 text-slate-700 dark:text-slate-200 hover:bg-neutral-100 dark:hover:bg-gray-800 rounded cursor-pointer"
+              class="px-1.5 py-1 text-slate-700 dark:text-slate-200 hover:bg-neutral-100 dark:hover:bg-gray-800 rounded cursor-pointer whitespace-nowrap"
               :title="item.basename"
               @click="app.emitter.emit('vf-fetch', {params:{q: 'index', adapter: app.fs.adapter, path:item.path}})">{{
               item.name
@@ -83,6 +72,22 @@
           type="text">
       <ExitSVG @click="exitSearchMode"/>
     </div>
+
+
+    <div v-show="app.fs.showHiddenBreadcrumbs"
+        class="z-30 absolute top-[65px] md:top-[75px] left-[90px] rounded -mx-1.5 mt-1 bg-neutral-50 dark:bg-gray-800 max-w-80 max-h-50 shadow overflow-y-auto text-gray-700 dark:text-gray-200 border border-neutral-300 dark:border-gray-600">
+      <div
+          v-for="(item, index) in app.fs.hiddenBreadcrumbs" :key="index"
+          @dragover="handleDragOver($event)"
+          @dragleave="handleDragLeave($event)"
+          @drop="handleHiddenBreadcrumbDropZone($event, index)"
+          @click="handleHiddenBreadcrumbsClick(item)"
+          class="px-2 py-0.5 hover:bg-gray-400/20 cursor-pointer items-center whitespace-nowrap" >
+        <div class="flex pointer-events-none">
+          <span><FolderSVG class="h-5 w-5" /></span> <span class="inline-block w-full text-ellipsis overflow-hidden">{{ item.name}}</span>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -199,6 +204,12 @@ const handleHiddenBreadcrumbsClick = (item) => {
   app.fs.toggleHiddenBreadcrumbs(false);
 }
 
+const handleClickOutside = () => {
+  if (app.fs.showHiddenBreadcrumbs) {
+    app.fs.toggleHiddenBreadcrumbs(false);
+  }
+}
+
 const vClickOutside = {
   mounted(el, binding, vnode, prevVnode) {
     el.clickOutsideEvent = function (event) {

From c0084aa4ed791b27bf491d6baa3ef8775a4b7954 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yusuf=20=C3=96zdemir?= <yusuf@ozdemir.be>
Date: Sun, 5 May 2024 23:01:53 +0300
Subject: [PATCH 48/52] Update VueFinder.vue

---
 src/components/VueFinder.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/VueFinder.vue b/src/components/VueFinder.vue
index 407314bc..e4e02e9c 100644
--- a/src/components/VueFinder.vue
+++ b/src/components/VueFinder.vue
@@ -4,7 +4,7 @@
       <div
           :class="app.fullScreen ? 'fixed w-screen inset-0 z-20' : 'relative rounded'"
           :style="!app.fullScreen ? 'max-height: ' + maxHeight : ''"
-          class="border flex flex-col bg-white dark:bg-gray-800 text-gray-700 dark:text-neutral-400 border-neutral-300 dark:border-gray-900 min-w-min select-none"
+          class="border flex flex-col bg-white dark:bg-gray-800 text-gray-700 dark:text-neutral-400 border-neutral-300 dark:border-gray-900 select-none"
           @mousedown="app.emitter.emit('vf-contextmenu-hide')"
           @touchstart="app.emitter.emit('vf-contextmenu-hide')">
         <Toolbar/>

From d037c8199d21d3ea3e8cee702e95bde24ea44d84 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yusuf=20=C3=96zdemir?= <yusuf@ozdemir.be>
Date: Mon, 6 May 2024 10:58:10 +0300
Subject: [PATCH 49/52] Update Breadcrumb.vue

---
 src/components/Breadcrumb.vue | 34 ++++++++++++++++++++++++++++++++++
 1 file changed, 34 insertions(+)

diff --git a/src/components/Breadcrumb.vue b/src/components/Breadcrumb.vue
index 90ac5939..af1672d0 100644
--- a/src/components/Breadcrumb.vue
+++ b/src/components/Breadcrumb.vue
@@ -112,6 +112,40 @@ const {t} = app.i18n;
 
 const ds = app.dragSelect;
 
+// dynamic shown items calculation for breadcrumbs
+const breadcrumbContainer = ref(null);
+const breadcrumbContainerWidth = useDebouncedRef(0,100);
+watch(breadcrumbContainerWidth, newQuery => {
+  const children = breadcrumbContainer.value.children;
+  let totalWidth = 0;
+  let count = 0;
+  let max_shown_items = 5;
+  let min_shown_items = 1;
+
+  app.fs.limitBreadcrumbItems(max_shown_items);
+  nextTick(() => {
+    for (let i = 0; i < children.length; i++) {
+      if (totalWidth + children[i].offsetWidth > breadcrumbContainerWidth.value - 100) {
+        break;
+      }
+      totalWidth += parseInt(children[i].offsetWidth, 10);
+      count++;
+    }
+
+    if (count < min_shown_items) count = min_shown_items;
+    if (count > max_shown_items) count = max_shown_items;
+
+    app.fs.limitBreadcrumbItems(count);
+  });
+});
+
+const updateContainerWidth = () => {
+    breadcrumbContainerWidth.value = breadcrumbContainer.value.offsetWidth;
+}
+onMounted(() => {
+  new ResizeObserver(updateContainerWidth).observe(breadcrumbContainer.value);
+});
+
 
 const handleHiddenBreadcrumbDropZone = (e, index = null) => {
   e.preventDefault();

From 5b233803edd3e1fa2ae777eb50ab5fe72b0c7eb9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yusuf=20=C3=96zdemir?= <yusuf@ozdemir.be>
Date: Mon, 6 May 2024 11:02:57 +0300
Subject: [PATCH 50/52] fix merge

---
 src/components/Breadcrumb.vue | 18 ++++++++----------
 src/composables/useData.js    | 21 ++++++++++++++++-----
 2 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/src/components/Breadcrumb.vue b/src/components/Breadcrumb.vue
index af1672d0..8fa3877d 100644
--- a/src/components/Breadcrumb.vue
+++ b/src/components/Breadcrumb.vue
@@ -18,8 +18,7 @@
       <CloseSVG @click="app.emitter.emit('vf-fetch-abort')"/>
     </span>
 
-    <div v-if="!app.fs.searchMode" class="group flex bg-white dark:bg-gray-700 items-center rounded p-1 ml-2 w-full overflow-hidden"
-         @click.self="enterSearchMode">
+    <div v-show="!app.fs.searchMode" class="group flex bg-white dark:bg-gray-700 items-center rounded p-1 ml-2 w-full overflow-hidden">
       <div>
         <HomeSVG
           @dragover="handleDragOver($event)"
@@ -29,19 +28,20 @@
       </div>
 
       <div class="flex leading-6">
-
         <div v-if="app.fs.hiddenBreadcrumbs.length" class="flex" v-click-outside="handleClickOutside">
           <div class="text-neutral-300 dark:text-gray-600 mx-0.5">/</div>
           <div class="relative">
-            <span @click="app.fs.toggleHiddenBreadcrumbs()"
+            <span 
+            @dragenter="app.fs.toggleHiddenBreadcrumbs(true)"
+            @click="app.fs.toggleHiddenBreadcrumbs()"
                    class="text-slate-700 dark:text-slate-200 hover:bg-neutral-100 dark:hover:bg-gray-800 rounded cursor-pointer">
-              <DotsSVG class="px-1" />
+              <DotsSVG class="px-1 pointer-events-none" />
             </span>
           </div>
         </div>
       </div>
 
-      <div class="flex leading-6">
+      <div ref="breadcrumbContainer" class="flex leading-6 w-full overflow-hidden"  @click.self="enterSearchMode">
         <div v-for="(item, index) in app.fs.breadcrumbs" :key="index">
           <span class="text-neutral-300 dark:text-gray-600 mx-0.5">/</span>
           <span
@@ -58,7 +58,7 @@
 
       <LoadingSVG v-if="app.fs.loading"/>
     </div>
-    <div v-else class="relative flex bg-white dark:bg-gray-700 justify-between items-center rounded p-1 ml-2 w-full">
+    <div  v-show="app.fs.searchMode"  class="relative flex bg-white dark:bg-gray-700 justify-between items-center rounded p-1 ml-2 w-full">
       <div>
         <SearchSVG />
       </div>
@@ -73,7 +73,6 @@
       <ExitSVG @click="exitSearchMode"/>
     </div>
 
-
     <div v-show="app.fs.showHiddenBreadcrumbs"
         class="z-30 absolute top-[65px] md:top-[75px] left-[90px] rounded -mx-1.5 mt-1 bg-neutral-50 dark:bg-gray-800 max-w-80 max-h-50 shadow overflow-y-auto text-gray-700 dark:text-gray-200 border border-neutral-300 dark:border-gray-600">
       <div
@@ -93,7 +92,7 @@
 
 <script setup>
 
-import {inject, nextTick, ref, watch} from 'vue';
+import {inject, nextTick, onMounted, ref, watch} from 'vue';
 import useDebouncedRef from '../composables/useDebouncedRef.js';
 import {FEATURES} from "./features.js";
 import ModalMove from "./modals/ModalMove.vue";
@@ -109,7 +108,6 @@ import DotsSVG from './icons/dots.svg';
 
 const app = inject('ServiceContainer');
 const {t} = app.i18n;
-
 const ds = app.dragSelect;
 
 // dynamic shown items calculation for breadcrumbs
diff --git a/src/composables/useData.js b/src/composables/useData.js
index 153a8d2a..8a3df281 100644
--- a/src/composables/useData.js
+++ b/src/composables/useData.js
@@ -5,8 +5,10 @@ export default function (initialAdapter, initialPath) {
     const adapter = ref(initialAdapter);
     const path = ref(initialPath);
     const breadcrumbs = ref([]);
+    const breadcrumbItems = ref([]);
     const hiddenBreadcrumbs = ref([]);
     const showHiddenBreadcrumbs = ref(false);
+    const breadcrumbItemLimit = ref(5);
 
     let loading = false; // loading state
 
@@ -45,12 +47,19 @@ export default function (initialAdapter, initialPath) {
                 }
             });
 
-        const [linksToDisplay, hiddenLinks ] = separateBreadcrumbs(links, 3);
+        breadcrumbItems.value = links;
+
+        const [linksToDisplay, hiddenLinks ] = separateBreadcrumbs(links, breadcrumbItemLimit.value);
 
         hiddenBreadcrumbs.value = hiddenLinks;
         breadcrumbs.value = linksToDisplay;
     }
 
+    function limitBreadcrumbItems(count){
+        breadcrumbItemLimit.value = count;
+        updateBreadcrumbs();
+    }
+
     function separateBreadcrumbs(links, show) {
         if (links.length > show) {
             return [links.slice(-show), links.slice(0, -show)];
@@ -80,14 +89,16 @@ export default function (initialAdapter, initialPath) {
 
     return {
         adapter,
-        breadcrumbs,
-        hiddenBreadcrumbs,
-        showHiddenBreadcrumbs,
-        toggleHiddenBreadcrumbs,
         path,
         loading,
         searchMode,
         data,
+        breadcrumbs,
+        breadcrumbItems,
+        limitBreadcrumbItems,
+        hiddenBreadcrumbs,
+        showHiddenBreadcrumbs,
+        toggleHiddenBreadcrumbs,
         isGoUpAvailable,
         parentFolderPath
     }

From 836892c6175712be4ec353bce60e5eed41ed25e0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yusuf=20=C3=96zdemir?= <yusuf@ozdemir.be>
Date: Mon, 6 May 2024 11:40:32 +0300
Subject: [PATCH 51/52] Update Breadcrumb.vue

---
 src/components/Breadcrumb.vue | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/Breadcrumb.vue b/src/components/Breadcrumb.vue
index 8fa3877d..925dbbd8 100644
--- a/src/components/Breadcrumb.vue
+++ b/src/components/Breadcrumb.vue
@@ -91,7 +91,6 @@
 </template>
 
 <script setup>
-
 import {inject, nextTick, onMounted, ref, watch} from 'vue';
 import useDebouncedRef from '../composables/useDebouncedRef.js';
 import {FEATURES} from "./features.js";
@@ -122,8 +121,8 @@ watch(breadcrumbContainerWidth, newQuery => {
 
   app.fs.limitBreadcrumbItems(max_shown_items);
   nextTick(() => {
-    for (let i = 0; i < children.length; i++) {
-      if (totalWidth + children[i].offsetWidth > breadcrumbContainerWidth.value - 100) {
+    for (let i = children.length-1; i >= 0; i--) {
+      if (totalWidth + children[i].offsetWidth > breadcrumbContainerWidth.value - 40) {
         break;
       }
       totalWidth += parseInt(children[i].offsetWidth, 10);

From bb24b1026f66bad49c118c6a4da7a723a9509c78 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yusuf=20=C3=96zdemir?= <yusuf@ozdemir.be>
Date: Mon, 6 May 2024 12:35:36 +0300
Subject: [PATCH 52/52] update 2.3.0

---
 dist/locales/de.js   |    4 +
 dist/locales/en.js   |    4 +
 dist/locales/fa.js   |    4 +
 dist/locales/fr.js   |    4 +
 dist/locales/he.js   |    4 +
 dist/locales/hi.js   |    4 +
 dist/locales/ru.js   |    4 +
 dist/locales/sv.js   |    4 +
 dist/locales/tr.js   |    4 +
 dist/locales/zhCN.js |    4 +
 dist/locales/zhTW.js |    4 +
 dist/style.css       |    2 +-
 dist/vuefinder.cjs   |    2 +-
 dist/vuefinder.js    | 5990 ++++++++++++++++++++++--------------------
 package.json         |    2 +-
 src/locales/de.js    |    3 +
 src/locales/en.js    |    3 +
 src/locales/fa.js    |    3 +
 src/locales/fr.js    |    3 +
 src/locales/he.js    |    3 +
 src/locales/hi.js    |    3 +
 src/locales/ru.js    |    3 +
 src/locales/sv.js    |    3 +
 src/locales/tr.js    |    3 +
 src/locales/zhCN.js  |    3 +
 src/locales/zhTW.js  |    3 +
 26 files changed, 3193 insertions(+), 2880 deletions(-)

diff --git a/dist/locales/de.js b/dist/locales/de.js
index 692abd91..073ec52c 100644
--- a/dist/locales/de.js
+++ b/dist/locales/de.js
@@ -86,5 +86,9 @@ export default {
     "System": "System",
     "Target Directory" : "Zielverzeichnis",
     "Select": "Auswählen",
+    "Compact list view": "Kompakte Listenansicht",
+    "Show thumbnails": "Miniaturansichten anzeigen",
+    "Persist path on reload": "Pfad beim Neuladen beibehalten",
+    "Compact list view": "Kompakte Listenansicht",
     "uppy" : uppyLocaleDe,
 }
diff --git a/dist/locales/en.js b/dist/locales/en.js
index 49cb0973..383fb487 100644
--- a/dist/locales/en.js
+++ b/dist/locales/en.js
@@ -86,5 +86,9 @@ export default {
   "System": "System",
   "Target Directory" : "Target Directory",
   "Select": "Select",
+  "Compact list view": "Compact list view",
+  "Show thumbnails": "Show thumbnails",
+  "Persist path on reload": "Persist path on reload",
+  "Compact list view": "Compact list view",
   "uppy": uppyLocaleEn
 }
diff --git a/dist/locales/fa.js b/dist/locales/fa.js
index 128e156d..88702931 100644
--- a/dist/locales/fa.js
+++ b/dist/locales/fa.js
@@ -86,5 +86,9 @@ export default {
   "System": "سیستم",
   "Target Directory" : "پوشه مقصد",
   "Select": "انتخاب",
+  "Compact list view": "نمایش لیست کوچک",
+  "Show thumbnails": "نمایش تصاویر کوچک",
+  "Persist path on reload": "مسیر را در هنگام بارگذاری مجدد ذخیره کن",
+  "Compact list view": "نمایش لیست کوچک",
   "uppy": uppyLocaleFa
 }
diff --git a/dist/locales/fr.js b/dist/locales/fr.js
index c6e480cb..bed6bcbd 100644
--- a/dist/locales/fr.js
+++ b/dist/locales/fr.js
@@ -87,5 +87,9 @@ export default {
   "System": "Système",
   "Target Directory" : "Répertoire cible",
   "Select": "Sélectionner",
+  "Compact list view": "Vue en liste compacte",
+  "Show thumbnails": "Afficher les miniatures",
+  "Persist path on reload": "Conserver le chemin lors du rechargement",
+  "Compact list view": "Vue en liste compacte",
   "uppy": uppyLocaleFr
 }
diff --git a/dist/locales/he.js b/dist/locales/he.js
index d31fce7d..4683957e 100644
--- a/dist/locales/he.js
+++ b/dist/locales/he.js
@@ -86,5 +86,9 @@ export default {
   "System": "מערכת",
   "Target Directory" : "תיקיית יעד",
   "Select": "בחר",
+  "Compact list view": "תצוגת רשימה קומפקטית",
+  "Show thumbnails": "הצג תמונות ממוזערות",
+  "Persist path on reload": "שמור נתיב בטעינה מחדש",
+  "Compact list view": "תצוגת רשימה קומפקטית",
   "uppy": uppyLocaleHe
 }
diff --git a/dist/locales/hi.js b/dist/locales/hi.js
index 743ddd75..f94ce3d4 100644
--- a/dist/locales/hi.js
+++ b/dist/locales/hi.js
@@ -86,5 +86,9 @@ export default {
   "System": "सिस्टम",
   "Target Directory" : "लक्षित निर्देशिका",
   "Select": "चयन",
+  "Compact list view": "संक्षिप्त सूची दृश्य",
+  "Show thumbnails": "थंबनेल दिखाएं",
+  "Persist path on reload": "पुनः लोड पर पथ बनाए रखें",
+  "Compact list view": "संक्षिप्त सूची दृश्य",
   "uppy": uppyLocaleHi
 }
diff --git a/dist/locales/ru.js b/dist/locales/ru.js
index 8f68baf7..798dc7b6 100644
--- a/dist/locales/ru.js
+++ b/dist/locales/ru.js
@@ -86,5 +86,9 @@ export default {
   "System": "Система",
   "Target Directory" : "Целевая директория",
   "Select": "Выбрать",
+  "Compact list view": "Компактный вид списка",
+  "Show thumbnails": "Показать миниатюры",
+  "Persist path on reload": "Сохранить путь при перезагрузке",
+  "Compact list view": "Компактный вид списка",
   "uppy": uppyLocaleRu
 }
diff --git a/dist/locales/sv.js b/dist/locales/sv.js
index 5f0b57e0..0f46ea7d 100644
--- a/dist/locales/sv.js
+++ b/dist/locales/sv.js
@@ -86,5 +86,9 @@ export default {
   "System": "System",
   "Target Directory" : "Mål katalog",
   "Select": "Välj",
+  "Compact list view": "Kompakt listvy",
+  "Show thumbnails": "Visa miniatyrer",
+  "Persist path on reload": "Behåll sökväg vid omladdning",
+  "Compact list view": "Kompakt listvy",
   "uppy": uppyLocaleSv
 }
diff --git a/dist/locales/tr.js b/dist/locales/tr.js
index d0a17f88..946db7c4 100644
--- a/dist/locales/tr.js
+++ b/dist/locales/tr.js
@@ -86,5 +86,9 @@ export default {
   "System": "Sistem",
   "Target Directory" : "Hedef Klasör",
   "Select": "Seç",
+  "Compact list view": "Kompakt liste görünümü",
+  "Show thumbnails": "Küçük resimleri göster",
+  "Persist path on reload": "Yeniden yüklemede yolu koru",
+  "Compact list view": "Kompakt liste görünümü",
   "uppy": uppyLocaleTr,
 }
diff --git a/dist/locales/zhCN.js b/dist/locales/zhCN.js
index 89491ba0..f7771045 100644
--- a/dist/locales/zhCN.js
+++ b/dist/locales/zhCN.js
@@ -86,5 +86,9 @@ export default {
   "System": "系统",
   "Target Directory": "目标目录",
   "Select": "选择",
+  "Compact list view": "紧凑列表视图",
+  "Show thumbnails": "显示缩略图",
+  "Persist path on reload": "重新加载时保持路径",
+  "Compact list view": "紧凑列表视图",
   "uppy": uppyLocalezhCN
 }
diff --git a/dist/locales/zhTW.js b/dist/locales/zhTW.js
index 7028e418..1fd2aa23 100644
--- a/dist/locales/zhTW.js
+++ b/dist/locales/zhTW.js
@@ -86,5 +86,9 @@ export default {
   "System": "系統",
   "Target Directory": "目標目錄",
   "Select": "選擇",
+  "Compact list view": "緊湊列表視圖",
+  "Show thumbnails": "顯示縮略圖",
+  "Persist path on reload": "重新加載時保持路徑",
+  "Compact list view": "緊湊列表視圖",
   "uppy": uppyLocalezhTW
 }
diff --git a/dist/style.css b/dist/style.css
index d1e9ffde..2c98ec32 100644
--- a/dist/style.css
+++ b/dist/style.css
@@ -1 +1 @@
-.vuefinder *,.vuefinder :before,.vuefinder :after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}.vuefinder :before,.vuefinder :after{--tw-content: ""}.vuefinder hr{height:0;color:inherit;border-top-width:1px}.vuefinder abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}.vuefinder h1,.vuefinder h2,.vuefinder h3,.vuefinder h4,.vuefinder h5,.vuefinder h6{font-size:inherit;font-weight:inherit}.vuefinder a{color:inherit;text-decoration:inherit}.vuefinder b,.vuefinder strong{font-weight:bolder}.vuefinder code,.vuefinder kbd,.vuefinder samp,.vuefinder pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}.vuefinder small{font-size:80%}.vuefinder sub,.vuefinder sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}.vuefinder sub{bottom:-.25em}.vuefinder sup{top:-.5em}.vuefinder table{text-indent:0;border-color:inherit;border-collapse:collapse}.vuefinder button,.vuefinder input,.vuefinder optgroup,.vuefinder select,.vuefinder textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}.vuefinder button,.vuefinder select{text-transform:none}.vuefinder button,.vuefinder [type=button],.vuefinder [type=reset],.vuefinder [type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}.vuefinder :-moz-focusring{outline:auto}.vuefinder :-moz-ui-invalid{box-shadow:none}.vuefinder progress{vertical-align:baseline}.vuefinder ::-webkit-inner-spin-button,.vuefinder ::-webkit-outer-spin-button{height:auto}.vuefinder [type=search]{-webkit-appearance:textfield;outline-offset:-2px}.vuefinder ::-webkit-search-decoration{-webkit-appearance:none}.vuefinder ::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}.vuefinder summary{display:list-item}.vuefinder blockquote,.vuefinder dl,.vuefinder dd,.vuefinder h1,.vuefinder h2,.vuefinder h3,.vuefinder h4,.vuefinder h5,.vuefinder h6,.vuefinder hr,.vuefinder figure,.vuefinder p,.vuefinder pre{margin:0}.vuefinder fieldset{margin:0;padding:0}.vuefinder legend{padding:0}.vuefinder ol,.vuefinder ul,.vuefinder menu{list-style:none;margin:0;padding:0}.vuefinder dialog{padding:0}.vuefinder textarea{resize:vertical}.vuefinder input::-moz-placeholder,.vuefinder textarea::-moz-placeholder{opacity:1;color:#9ca3af}.vuefinder input::placeholder,.vuefinder textarea::placeholder{opacity:1;color:#9ca3af}.vuefinder button,.vuefinder [role=button]{cursor:pointer}.vuefinder :disabled{cursor:default}.vuefinder img,.vuefinder svg,.vuefinder video,.vuefinder canvas,.vuefinder audio,.vuefinder iframe,.vuefinder embed,.vuefinder object{display:block;vertical-align:middle}.vuefinder img,.vuefinder video{max-width:100%;height:auto}.vuefinder [hidden]{display:none}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.container{width:100%}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1536px){.container{max-width:1536px}}.vuefinder{position:relative}.vuefinder *{touch-action:manipulation}.vuefinder :is(.vf-btn){margin-top:.125rem;display:inline-flex;width:100%;justify-content:center;border-radius:.375rem;border-width:1px;padding:.5rem 1rem;font-size:1rem;line-height:1.5rem;font-weight:500;letter-spacing:.025em;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.vuefinder :is(.vf-btn:focus){outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-offset-width: 2px}@media (min-width: 640px){.vuefinder :is(.vf-btn){margin-left:.25rem;margin-right:.25rem;width:auto;font-size:.875rem;line-height:1.25rem}}.vuefinder :is(.vf-btn-primary){border-color:transparent;--tw-bg-opacity: 1;background-color:rgb(37 99 235 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.vuefinder :is(.vf-btn-primary:hover){--tw-bg-opacity: 1;background-color:rgb(29 78 216 / var(--tw-bg-opacity))}.vuefinder :is(.vf-btn-primary:focus){--tw-ring-opacity: 1;--tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity))}.vuefinder :is(.dark .vf-btn-primary){--tw-border-opacity: 1;border-color:rgb(31 41 55 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(249 250 251 / var(--tw-text-opacity))}.vuefinder :is(.dark .vf-btn-primary:hover){--tw-bg-opacity: 1;background-color:rgb(107 114 128 / var(--tw-bg-opacity))}.vuefinder :is(.vf-btn-primary.disabled:hover){--tw-bg-opacity: 1;background-color:rgb(37 99 235 / var(--tw-bg-opacity))}.vuefinder :is(.dark .vf-btn-primary.disabled:hover){--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity))}.vuefinder :is(.vf-btn-secondary){--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity))}.vuefinder :is(.vf-btn-secondary:hover){--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity))}.vuefinder :is(.vf-btn-secondary:focus){--tw-ring-opacity: 1;--tw-ring-color: rgb(107 114 128 / var(--tw-ring-opacity))}.vuefinder :is(.dark .vf-btn-secondary){--tw-border-opacity: 1;border-color:rgb(55 65 81 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(31 41 55 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(209 213 219 / var(--tw-text-opacity))}.vuefinder :is(.dark .vf-btn-secondary:hover){--tw-bg-opacity: 1;background-color:rgb(107 114 128 / var(--tw-bg-opacity))}.vuefinder :is(.vf-btn-secondary.disabled:hover){--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity))}.vuefinder :is(.dark .vf-btn-secondary.disabled:hover){--tw-bg-opacity: 1;background-color:rgb(31 41 55 / var(--tw-bg-opacity))}.vuefinder :is(.vf-btn-danger){border-color:transparent;--tw-bg-opacity: 1;background-color:rgb(220 38 38 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.vuefinder :is(.vf-btn-danger:hover){--tw-bg-opacity: 1;background-color:rgb(185 28 28 / var(--tw-bg-opacity))}.vuefinder :is(.vf-btn-danger:focus){--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-opacity: 1;--tw-ring-color: rgb(254 202 202 / var(--tw-ring-opacity));--tw-ring-offset-width: 1px}.vuefinder :is(.dark .vf-btn-danger){--tw-border-opacity: 1;border-color:rgb(153 27 27 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(185 28 28 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(249 250 251 / var(--tw-text-opacity))}.vuefinder :is(.dark .vf-btn-danger:hover){--tw-bg-opacity: 1;background-color:rgb(239 68 68 / var(--tw-bg-opacity))}.vuefinder :is(.disabled){cursor:not-allowed;opacity:.5}.vf-explorer-selected{border-width:1px!important;--tw-border-opacity: 1 !important;border-color:rgb(212 212 212 / var(--tw-border-opacity))!important;--tw-bg-opacity: 1 !important;background-color:rgb(245 245 245 / var(--tw-bg-opacity))!important}:is(.dark .vf-explorer-selected){border-color:rgb(17 24 39 / var(--tw-border-opacity))!important;--tw-border-opacity: 1 !important;border-color:rgb(30 41 59 / var(--tw-border-opacity))!important;--tw-bg-opacity: 1 !important;background-color:rgb(51 65 85 / var(--tw-bg-opacity))!important}.vf-explorer-selector{border-width:1px!important;--tw-border-opacity: 1 !important;border-color:rgb(100 116 139 / var(--tw-border-opacity))!important;--tw-bg-opacity: 1 !important;background-color:rgb(203 213 225 / var(--tw-bg-opacity))!important;opacity:.5!important}.vuefinder.dark{color-scheme:dark}.vf-scrollbar::-webkit-scrollbar{width:12px}.vf-scrollbar::-webkit-scrollbar-track-piece{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity))}:is(.dark .vf-scrollbar)::-webkit-scrollbar-track-piece{background-color:#0f172a80}.vf-scrollbar::-webkit-scrollbar-thumb{--tw-bg-opacity: 1;background-color:rgb(209 213 219 / var(--tw-bg-opacity))}:is(.dark .vf-scrollbar)::-webkit-scrollbar-thumb{--tw-bg-opacity: 1;background-color:rgb(51 65 85 / var(--tw-bg-opacity))}.vf-scrollbar::-webkit-scrollbar-thumb:hover{--tw-bg-opacity: 1;background-color:rgb(156 163 175 / var(--tw-bg-opacity))}:is(.dark .vf-scrollbar)::-webkit-scrollbar-thumb:hover{--tw-bg-opacity: 1;background-color:rgb(71 85 105 / var(--tw-bg-opacity))}.vf-scrollbar::-webkit-scrollbar-corner{background-color:transparent}.vuefinder .fade-enter-active,.vuefinder .fade-leave-active{transition:opacity .2s ease}.vuefinder .fade-enter-from,.vuefinder .fade-leave-to{opacity:0}.vuefinder :is(.pointer-events-none){pointer-events:none}.vuefinder :is(.fixed){position:fixed}.vuefinder :is(.absolute){position:absolute}.vuefinder :is(.relative){position:relative}.vuefinder :is(.inset-0){top:0;right:0;bottom:0;left:0}.vuefinder :is(.-top-96){top:-24rem}.vuefinder :is(.bottom-0){bottom:0}.vuefinder :is(.left-1\/2){left:50%}.vuefinder :is(.right-\[-2rem\]){right:-2rem}.vuefinder :is(.top-1\/2){top:50%}.vuefinder :is(.top-4){top:1rem}.vuefinder :is(.-z-50){z-index:-50}.vuefinder :is(.z-0){z-index:0}.vuefinder :is(.z-10){z-index:10}.vuefinder :is(.z-20){z-index:20}.vuefinder :is(.z-30){z-index:30}.vuefinder :is(.col-span-2){grid-column:span 2 / span 2}.vuefinder :is(.col-span-3){grid-column:span 3 / span 3}.vuefinder :is(.col-span-5){grid-column:span 5 / span 5}.vuefinder :is(.col-span-7){grid-column:span 7 / span 7}.vuefinder :is(.m-1){margin:.25rem}.vuefinder :is(.m-auto){margin:auto}.vuefinder :is(.mx-0){margin-left:0;margin-right:0}.vuefinder :is(.mx-0\.5){margin-left:.125rem;margin-right:.125rem}.vuefinder :is(.mx-1){margin-left:.25rem;margin-right:.25rem}.vuefinder :is(.mx-1\.5){margin-left:.375rem;margin-right:.375rem}.vuefinder :is(.mx-2){margin-left:.5rem;margin-right:.5rem}.vuefinder :is(.mx-auto){margin-left:auto;margin-right:auto}.vuefinder :is(.my-0){margin-top:0;margin-bottom:0}.vuefinder :is(.my-0\.5){margin-top:.125rem;margin-bottom:.125rem}.vuefinder :is(.my-1){margin-top:.25rem;margin-bottom:.25rem}.vuefinder :is(.-ml-1){margin-left:-.25rem}.vuefinder :is(.mb-1){margin-bottom:.25rem}.vuefinder :is(.mb-2){margin-bottom:.5rem}.vuefinder :is(.mb-4){margin-bottom:1rem}.vuefinder :is(.ml-1){margin-left:.25rem}.vuefinder :is(.ml-1\.5){margin-left:.375rem}.vuefinder :is(.ml-2){margin-left:.5rem}.vuefinder :is(.ml-3){margin-left:.75rem}.vuefinder :is(.ml-auto){margin-left:auto}.vuefinder :is(.mr-1){margin-right:.25rem}.vuefinder :is(.mr-3){margin-right:.75rem}.vuefinder :is(.mr-auto){margin-right:auto}.vuefinder :is(.ms-3){margin-inline-start:.75rem}.vuefinder :is(.mt-2){margin-top:.5rem}.vuefinder :is(.mt-3){margin-top:.75rem}.vuefinder :is(.mt-5){margin-top:1.25rem}.vuefinder :is(.block){display:block}.vuefinder :is(.inline-block){display:inline-block}.vuefinder :is(.flex){display:flex}.vuefinder :is(.inline-flex){display:inline-flex}.vuefinder :is(.grid){display:grid}.vuefinder :is(.\!hidden){display:none!important}.vuefinder :is(.hidden){display:none}.vuefinder :is(.h-10){height:2.5rem}.vuefinder :is(.h-12){height:3rem}.vuefinder :is(.h-20){height:5rem}.vuefinder :is(.h-4){height:1rem}.vuefinder :is(.h-5){height:1.25rem}.vuefinder :is(.h-6){height:1.5rem}.vuefinder :is(.h-\[120px\]){height:120px}.vuefinder :is(.h-\[60vh\]){height:60vh}.vuefinder :is(.h-fit){height:-moz-fit-content;height:fit-content}.vuefinder :is(.h-full){height:100%}.vuefinder :is(.max-h-\[200px\]){max-height:200px}.vuefinder :is(.max-h-\[50vh\]){max-height:50vh}.vuefinder :is(.max-h-\[60vh\]){max-height:60vh}.vuefinder :is(.min-h-\[150px\]){min-height:150px}.vuefinder :is(.min-h-\[200px\]){min-height:200px}.vuefinder :is(.min-h-full){min-height:100%}.vuefinder :is(.w-1\/2){width:50%}.vuefinder :is(.w-10){width:2.5rem}.vuefinder :is(.w-12){width:3rem}.vuefinder :is(.w-4){width:1rem}.vuefinder :is(.w-5){width:1.25rem}.vuefinder :is(.w-6){width:1.5rem}.vuefinder :is(.w-\[5\.5rem\]){width:5.5rem}.vuefinder :is(.w-full){width:100%}.vuefinder :is(.w-screen){width:100vw}.vuefinder :is(.min-w-max){min-width:-moz-max-content;min-width:max-content}.vuefinder :is(.min-w-min){min-width:-moz-min-content;min-width:min-content}.vuefinder :is(.max-w-\[50vh\]){max-width:50vh}.vuefinder :is(.max-w-fit){max-width:-moz-fit-content;max-width:fit-content}.vuefinder :is(.flex-1){flex:1 1 0%}.vuefinder :is(.flex-auto){flex:1 1 auto}.vuefinder :is(.flex-shrink-0){flex-shrink:0}.vuefinder :is(.flex-grow){flex-grow:1}.vuefinder :is(.basis-full){flex-basis:100%}.vuefinder :is(.-translate-x-1\/2){--tw-translate-x: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.vuefinder :is(.transform){transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes spin{to{transform:rotate(360deg)}}.vuefinder :is(.animate-spin){animation:spin 1s linear infinite}.vuefinder :is(.cursor-default){cursor:default}.vuefinder :is(.cursor-pointer){cursor:pointer}.vuefinder :is(.select-none){-webkit-user-select:none;-moz-user-select:none;user-select:none}.vuefinder :is(.resize-y){resize:vertical}.vuefinder :is(.grid-cols-1){grid-template-columns:repeat(1,minmax(0,1fr))}.vuefinder :is(.grid-cols-12){grid-template-columns:repeat(12,minmax(0,1fr))}.vuefinder :is(.flex-col){flex-direction:column}.vuefinder :is(.items-end){align-items:flex-end}.vuefinder :is(.items-center){align-items:center}.vuefinder :is(.justify-end){justify-content:flex-end}.vuefinder :is(.justify-center){justify-content:center}.vuefinder :is(.justify-between){justify-content:space-between}.vuefinder :is(.gap-x-3){-moz-column-gap:.75rem;column-gap:.75rem}.vuefinder :is(.space-y-2>:not([hidden])~:not([hidden])){--tw-space-y-reverse: 0;margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem * var(--tw-space-y-reverse))}.vuefinder :is(.self-center){align-self:center}.vuefinder :is(.overflow-auto){overflow:auto}.vuefinder :is(.overflow-hidden){overflow:hidden}.vuefinder :is(.overflow-y-auto){overflow-y:auto}.vuefinder :is(.overflow-ellipsis){text-overflow:ellipsis}.vuefinder :is(.whitespace-nowrap){white-space:nowrap}.vuefinder :is(.whitespace-pre-wrap){white-space:pre-wrap}.vuefinder :is(.text-nowrap){text-wrap:nowrap}.vuefinder :is(.break-all){word-break:break-all}.vuefinder :is(.rounded){border-radius:.25rem}.vuefinder :is(.rounded-full){border-radius:9999px}.vuefinder :is(.rounded-lg){border-radius:.5rem}.vuefinder :is(.rounded-md){border-radius:.375rem}.vuefinder :is(.border){border-width:1px}.vuefinder :is(.border-0){border-width:0px}.vuefinder :is(.border-2){border-width:2px}.vuefinder :is(.border-b){border-bottom-width:1px}.vuefinder :is(.border-l){border-left-width:1px}.vuefinder :is(.border-r){border-right-width:1px}.vuefinder :is(.border-t){border-top-width:1px}.vuefinder :is(.border-dashed){border-style:dashed}.vuefinder :is(.border-gray-200){--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity))}.vuefinder :is(.border-gray-300){--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity))}.vuefinder :is(.border-lime-600){--tw-border-opacity: 1;border-color:rgb(101 163 13 / var(--tw-border-opacity))}.vuefinder :is(.border-neutral-300){--tw-border-opacity: 1;border-color:rgb(212 212 212 / var(--tw-border-opacity))}.vuefinder :is(.border-red-400){--tw-border-opacity: 1;border-color:rgb(248 113 113 / var(--tw-border-opacity))}.vuefinder :is(.border-transparent){border-color:transparent}.vuefinder :is(.bg-blue-200){--tw-bg-opacity: 1;background-color:rgb(191 219 254 / var(--tw-bg-opacity))}.vuefinder :is(.bg-blue-50){--tw-bg-opacity: 1;background-color:rgb(239 246 255 / var(--tw-bg-opacity))}.vuefinder :is(.bg-blue-600){--tw-bg-opacity: 1;background-color:rgb(37 99 235 / var(--tw-bg-opacity))}.vuefinder :is(.bg-blue-700\/75){background-color:#1d4ed8bf}.vuefinder :is(.bg-emerald-100){--tw-bg-opacity: 1;background-color:rgb(209 250 229 / var(--tw-bg-opacity))}.vuefinder :is(.bg-gray-100){--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity))}.vuefinder :is(.bg-gray-200){--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity))}.vuefinder :is(.bg-gray-50){--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity))}.vuefinder :is(.bg-gray-500){--tw-bg-opacity: 1;background-color:rgb(107 114 128 / var(--tw-bg-opacity))}.vuefinder :is(.bg-neutral-100){--tw-bg-opacity: 1;background-color:rgb(245 245 245 / var(--tw-bg-opacity))}.vuefinder :is(.bg-neutral-50){--tw-bg-opacity: 1;background-color:rgb(250 250 250 / var(--tw-bg-opacity))}.vuefinder :is(.bg-red-100){--tw-bg-opacity: 1;background-color:rgb(254 226 226 / var(--tw-bg-opacity))}.vuefinder :is(.bg-transparent){background-color:transparent}.vuefinder :is(.bg-white){--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.vuefinder :is(.bg-opacity-75){--tw-bg-opacity: .75}.vuefinder :is(.fill-gray-100){fill:#f3f4f6}.vuefinder :is(.fill-sky-500){fill:#0ea5e9}.vuefinder :is(.fill-white){fill:#fff}.vuefinder :is(.stroke-blue-600){stroke:#2563eb}.vuefinder :is(.stroke-blue-900){stroke:#1e3a8a}.vuefinder :is(.stroke-gray-200){stroke:#e5e7eb}.vuefinder :is(.stroke-gray-400){stroke:#9ca3af}.vuefinder :is(.stroke-gray-500){stroke:#6b7280}.vuefinder :is(.stroke-neutral-500){stroke:#737373}.vuefinder :is(.stroke-red-600){stroke:#dc2626}.vuefinder :is(.stroke-sky-500){stroke:#0ea5e9}.vuefinder :is(.stroke-slate-500){stroke:#64748b}.vuefinder :is(.p-0){padding:0}.vuefinder :is(.p-0\.5){padding:.125rem}.vuefinder :is(.p-1){padding:.25rem}.vuefinder :is(.p-1\.5){padding:.375rem}.vuefinder :is(.p-2){padding:.5rem}.vuefinder :is(.p-4){padding:1rem}.vuefinder :is(.px-1){padding-left:.25rem;padding-right:.25rem}.vuefinder :is(.px-1\.5){padding-left:.375rem;padding-right:.375rem}.vuefinder :is(.px-2){padding-left:.5rem;padding-right:.5rem}.vuefinder :is(.px-4){padding-left:1rem;padding-right:1rem}.vuefinder :is(.py-0){padding-top:0;padding-bottom:0}.vuefinder :is(.py-0\.5){padding-top:.125rem;padding-bottom:.125rem}.vuefinder :is(.py-1){padding-top:.25rem;padding-bottom:.25rem}.vuefinder :is(.py-2){padding-top:.5rem;padding-bottom:.5rem}.vuefinder :is(.py-3){padding-top:.75rem;padding-bottom:.75rem}.vuefinder :is(.pb-0){padding-bottom:0}.vuefinder :is(.pb-1){padding-bottom:.25rem}.vuefinder :is(.pb-4){padding-bottom:1rem}.vuefinder :is(.pl-1){padding-left:.25rem}.vuefinder :is(.pl-2){padding-left:.5rem}.vuefinder :is(.pr-1){padding-right:.25rem}.vuefinder :is(.pr-3){padding-right:.75rem}.vuefinder :is(.pr-8){padding-right:2rem}.vuefinder :is(.pt-5){padding-top:1.25rem}.vuefinder :is(.text-left){text-align:left}.vuefinder :is(.text-center){text-align:center}.vuefinder :is(.text-base){font-size:1rem;line-height:1.5rem}.vuefinder :is(.text-lg){font-size:1.125rem;line-height:1.75rem}.vuefinder :is(.text-sm){font-size:.875rem;line-height:1.25rem}.vuefinder :is(.text-xs){font-size:.75rem;line-height:1rem}.vuefinder :is(.font-bold){font-weight:700}.vuefinder :is(.font-medium){font-weight:500}.vuefinder :is(.font-normal){font-weight:400}.vuefinder :is(.font-semibold){font-weight:600}.vuefinder :is(.leading-5){line-height:1.25rem}.vuefinder :is(.leading-6){line-height:1.5rem}.vuefinder :is(.leading-none){line-height:1}.vuefinder :is(.tracking-wider){letter-spacing:.05em}.vuefinder :is(.text-blue-500){--tw-text-opacity: 1;color:rgb(59 130 246 / var(--tw-text-opacity))}.vuefinder :is(.text-emerald-600){--tw-text-opacity: 1;color:rgb(5 150 105 / var(--tw-text-opacity))}.vuefinder :is(.text-gray-400){--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity))}.vuefinder :is(.text-gray-500){--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity))}.vuefinder :is(.text-gray-600){--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity))}.vuefinder :is(.text-gray-700){--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity))}.vuefinder :is(.text-gray-800){--tw-text-opacity: 1;color:rgb(31 41 55 / var(--tw-text-opacity))}.vuefinder :is(.text-gray-900){--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity))}.vuefinder :is(.text-green-600){--tw-text-opacity: 1;color:rgb(22 163 74 / var(--tw-text-opacity))}.vuefinder :is(.text-indigo-600){--tw-text-opacity: 1;color:rgb(79 70 229 / var(--tw-text-opacity))}.vuefinder :is(.text-lime-600){--tw-text-opacity: 1;color:rgb(101 163 13 / var(--tw-text-opacity))}.vuefinder :is(.text-neutral-300){--tw-text-opacity: 1;color:rgb(212 212 212 / var(--tw-text-opacity))}.vuefinder :is(.text-neutral-500){--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity))}.vuefinder :is(.text-neutral-700){--tw-text-opacity: 1;color:rgb(64 64 64 / var(--tw-text-opacity))}.vuefinder :is(.text-red-400){--tw-text-opacity: 1;color:rgb(248 113 113 / var(--tw-text-opacity))}.vuefinder :is(.text-red-500){--tw-text-opacity: 1;color:rgb(239 68 68 / var(--tw-text-opacity))}.vuefinder :is(.text-red-600){--tw-text-opacity: 1;color:rgb(220 38 38 / var(--tw-text-opacity))}.vuefinder :is(.text-slate-500){--tw-text-opacity: 1;color:rgb(100 116 139 / var(--tw-text-opacity))}.vuefinder :is(.text-slate-700){--tw-text-opacity: 1;color:rgb(51 65 85 / var(--tw-text-opacity))}.vuefinder :is(.text-white){--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.vuefinder :is(.text-opacity-50){--tw-text-opacity: .5}.vuefinder :is(.opacity-0){opacity:0}.vuefinder :is(.opacity-25){opacity:.25}.vuefinder :is(.opacity-75){opacity:.75}.vuefinder :is(.shadow){--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.vuefinder :is(.shadow-sm){--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.vuefinder :is(.shadow-xl){--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.vuefinder :is(.outline-0){outline-width:0px}.vuefinder :is(.ring-0){--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.vuefinder :is(.filter){filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.vuefinder :is(.transition-all){transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.vuefinder :is(.transition-opacity){transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.vuefinder :is(.duration-1000){transition-duration:1s}.vuefinder :is(.duration-500){transition-duration:.5s}.vuefinder :is(.ease-out){transition-timing-function:cubic-bezier(0,0,.2,1)}.vuefinder :is(.hover\:bg-blue-200:hover){--tw-bg-opacity: 1;background-color:rgb(191 219 254 / var(--tw-bg-opacity))}.vuefinder :is(.hover\:bg-blue-700:hover){--tw-bg-opacity: 1;background-color:rgb(29 78 216 / var(--tw-bg-opacity))}.vuefinder :is(.hover\:bg-gray-100:hover){--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity))}.vuefinder :is(.hover\:bg-neutral-100:hover){--tw-bg-opacity: 1;background-color:rgb(245 245 245 / var(--tw-bg-opacity))}.vuefinder :is(.hover\:bg-neutral-200:hover){--tw-bg-opacity: 1;background-color:rgb(229 229 229 / var(--tw-bg-opacity))}.vuefinder :is(.hover\:bg-neutral-300:hover){--tw-bg-opacity: 1;background-color:rgb(212 212 212 / var(--tw-bg-opacity))}.vuefinder :is(.hover\:bg-neutral-50:hover){--tw-bg-opacity: 1;background-color:rgb(250 250 250 / var(--tw-bg-opacity))}.vuefinder :is(.hover\:stroke-cyan-700:hover){stroke:#0e7490}.vuefinder :is(.hover\:text-red-600:hover){--tw-text-opacity: 1;color:rgb(220 38 38 / var(--tw-text-opacity))}.vuefinder :is(.focus\:border-transparent:focus){border-color:transparent}.vuefinder :is(.focus\:outline-none:focus){outline:2px solid transparent;outline-offset:2px}.vuefinder :is(.focus\:ring-indigo-600:focus){--tw-ring-opacity: 1;--tw-ring-color: rgb(79 70 229 / var(--tw-ring-opacity))}.vuefinder :is(.focus\:ring-transparent:focus){--tw-ring-color: transparent}.vuefinder :is(.disabled\:bg-gray-100:disabled){--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity))}.vuefinder :is(.dark .dark\:border-t){border-top-width:1px}.vuefinder :is(.dark .dark\:border-gray-200){--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity))}.vuefinder :is(.dark .dark\:border-gray-600){--tw-border-opacity: 1;border-color:rgb(75 85 99 / var(--tw-border-opacity))}.vuefinder :is(.dark .dark\:border-gray-700){--tw-border-opacity: 1;border-color:rgb(55 65 81 / var(--tw-border-opacity))}.vuefinder :is(.dark .dark\:border-gray-700\/50){border-color:#37415180}.vuefinder :is(.dark .dark\:border-gray-900){--tw-border-opacity: 1;border-color:rgb(17 24 39 / var(--tw-border-opacity))}.vuefinder :is(.dark .dark\:border-red-300){--tw-border-opacity: 1;border-color:rgb(252 165 165 / var(--tw-border-opacity))}.vuefinder :is(.dark .dark\:bg-emerald-950){--tw-bg-opacity: 1;background-color:rgb(2 44 34 / var(--tw-bg-opacity))}.vuefinder :is(.dark .dark\:bg-gray-500){--tw-bg-opacity: 1;background-color:rgb(107 114 128 / var(--tw-bg-opacity))}.vuefinder :is(.dark .dark\:bg-gray-600){--tw-bg-opacity: 1;background-color:rgb(75 85 99 / var(--tw-bg-opacity))}.vuefinder :is(.dark .dark\:bg-gray-700){--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity))}.vuefinder :is(.dark .dark\:bg-gray-700\/25){background-color:#37415140}.vuefinder :is(.dark .dark\:bg-gray-700\/50){background-color:#37415180}.vuefinder :is(.dark .dark\:bg-gray-800){--tw-bg-opacity: 1;background-color:rgb(31 41 55 / var(--tw-bg-opacity))}.vuefinder :is(.dark .dark\:bg-red-950){--tw-bg-opacity: 1;background-color:rgb(69 10 10 / var(--tw-bg-opacity))}.vuefinder :is(.dark .dark\:bg-slate-500){--tw-bg-opacity: 1;background-color:rgb(100 116 139 / var(--tw-bg-opacity))}.vuefinder :is(.dark .dark\:bg-opacity-75){--tw-bg-opacity: .75}.vuefinder :is(.dark .dark\:fill-gray-400\/20){fill:#9ca3af33}.vuefinder :is(.dark .dark\:fill-gray-700){fill:#374151}.vuefinder :is(.dark .dark\:fill-slate-500){fill:#64748b}.vuefinder :is(.dark .dark\:stroke-blue-100){stroke:#dbeafe}.vuefinder :is(.dark .dark\:stroke-gray-400){stroke:#9ca3af}.vuefinder :is(.dark .dark\:stroke-gray-600){stroke:#4b5563}.vuefinder :is(.dark .dark\:stroke-gray-700){stroke:#374151}.vuefinder :is(.dark .dark\:stroke-red-200){stroke:#fecaca}.vuefinder :is(.dark .dark\:stroke-slate-500){stroke:#64748b}.vuefinder :is(.dark .dark\:text-gray-100){--tw-text-opacity: 1;color:rgb(243 244 246 / var(--tw-text-opacity))}.vuefinder :is(.dark .dark\:text-gray-200){--tw-text-opacity: 1;color:rgb(229 231 235 / var(--tw-text-opacity))}.vuefinder :is(.dark .dark\:text-gray-300){--tw-text-opacity: 1;color:rgb(209 213 219 / var(--tw-text-opacity))}.vuefinder :is(.dark .dark\:text-gray-400){--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity))}.vuefinder :is(.dark .dark\:text-gray-50){--tw-text-opacity: 1;color:rgb(249 250 251 / var(--tw-text-opacity))}.vuefinder :is(.dark .dark\:text-gray-500){--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity))}.vuefinder :is(.dark .dark\:text-gray-600){--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity))}.vuefinder :is(.dark .dark\:text-green-600){--tw-text-opacity: 1;color:rgb(22 163 74 / var(--tw-text-opacity))}.vuefinder :is(.dark .dark\:text-lime-300){--tw-text-opacity: 1;color:rgb(190 242 100 / var(--tw-text-opacity))}.vuefinder :is(.dark .dark\:text-neutral-200){--tw-text-opacity: 1;color:rgb(229 229 229 / var(--tw-text-opacity))}.vuefinder :is(.dark .dark\:text-neutral-300){--tw-text-opacity: 1;color:rgb(212 212 212 / var(--tw-text-opacity))}.vuefinder :is(.dark .dark\:text-neutral-400){--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity))}.vuefinder :is(.dark .dark\:text-neutral-50){--tw-text-opacity: 1;color:rgb(250 250 250 / var(--tw-text-opacity))}.vuefinder :is(.dark .dark\:text-neutral-500){--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity))}.vuefinder :is(.dark .dark\:text-red-200){--tw-text-opacity: 1;color:rgb(254 202 202 / var(--tw-text-opacity))}.vuefinder :is(.dark .dark\:text-red-300){--tw-text-opacity: 1;color:rgb(252 165 165 / var(--tw-text-opacity))}.vuefinder :is(.dark .dark\:text-slate-200){--tw-text-opacity: 1;color:rgb(226 232 240 / var(--tw-text-opacity))}.vuefinder :is(.dark .dark\:accent-slate-400){accent-color:#94a3b8}.vuefinder :is(.dark .dark\:opacity-75){opacity:.75}.vuefinder :is(.dark .dark\:selection\:bg-gray-500 *)::-moz-selection{--tw-bg-opacity: 1;background-color:rgb(107 114 128 / var(--tw-bg-opacity))}.vuefinder :is(.dark .dark\:selection\:bg-gray-500 *)::selection{--tw-bg-opacity: 1;background-color:rgb(107 114 128 / var(--tw-bg-opacity))}.vuefinder :is(.dark .dark\:selection\:bg-gray-500)::-moz-selection{--tw-bg-opacity: 1;background-color:rgb(107 114 128 / var(--tw-bg-opacity))}.vuefinder :is(.dark .dark\:selection\:bg-gray-500)::selection{--tw-bg-opacity: 1;background-color:rgb(107 114 128 / var(--tw-bg-opacity))}.vuefinder :is(.dark .dark\:hover\:bg-gray-500:hover){--tw-bg-opacity: 1;background-color:rgb(107 114 128 / var(--tw-bg-opacity))}.vuefinder :is(.dark .dark\:hover\:bg-gray-700:hover){--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity))}.vuefinder :is(.dark .dark\:hover\:bg-gray-700\/10:hover){background-color:#3741511a}.vuefinder :is(.dark .dark\:hover\:bg-gray-700\/50:hover){background-color:#37415180}.vuefinder :is(.dark .dark\:hover\:bg-gray-800:hover){--tw-bg-opacity: 1;background-color:rgb(31 41 55 / var(--tw-bg-opacity))}.vuefinder :is(.dark .dark\:hover\:stroke-gray-300:hover){stroke:#d1d5db}.vuefinder :is(.dark .dark\:hover\:text-gray-200:hover){--tw-text-opacity: 1;color:rgb(229 231 235 / var(--tw-text-opacity))}.vuefinder :is(.dark .dark\:hover\:text-gray-300:hover){--tw-text-opacity: 1;color:rgb(209 213 219 / var(--tw-text-opacity))}.vuefinder :is(.dark .dark\:focus\:border-gray-600:focus){--tw-border-opacity: 1;border-color:rgb(75 85 99 / var(--tw-border-opacity))}.vuefinder :is(.dark .dark\:focus\:border-transparent:focus){border-color:transparent}.vuefinder :is(.dark .dark\:focus\:ring-gray-600:focus){--tw-ring-opacity: 1;--tw-ring-color: rgb(75 85 99 / var(--tw-ring-opacity))}.vuefinder :is(.dark .dark\:focus\:ring-transparent:focus){--tw-ring-color: transparent}@media (min-width: 640px){.vuefinder :is(.sm\:mx-0){margin-left:0;margin-right:0}.vuefinder :is(.sm\:my-8){margin-top:2rem;margin-bottom:2rem}.vuefinder :is(.sm\:ml-3){margin-left:.75rem}.vuefinder :is(.sm\:ml-4){margin-left:1rem}.vuefinder :is(.sm\:mt-0){margin-top:0}.vuefinder :is(.sm\:flex){display:flex}.vuefinder :is(.sm\:h-10){height:2.5rem}.vuefinder :is(.sm\:w-10){width:2.5rem}.vuefinder :is(.sm\:w-auto){width:auto}.vuefinder :is(.sm\:w-full){width:100%}.vuefinder :is(.sm\:max-w-4xl){max-width:56rem}.vuefinder :is(.sm\:flex-row-reverse){flex-direction:row-reverse}.vuefinder :is(.sm\:items-start){align-items:flex-start}.vuefinder :is(.sm\:items-center){align-items:center}.vuefinder :is(.sm\:p-0){padding:0}.vuefinder :is(.sm\:p-6){padding:1.5rem}.vuefinder :is(.sm\:px-6){padding-left:1.5rem;padding-right:1.5rem}.vuefinder :is(.sm\:pb-4){padding-bottom:1rem}.vuefinder :is(.sm\:text-left){text-align:left}.vuefinder :is(.sm\:text-sm){font-size:.875rem;line-height:1.25rem}.vuefinder :is(.sm\:text-xs){font-size:.75rem;line-height:1rem}}@media (min-width: 768px){.vuefinder :is(.md\:right-\[-2\.4rem\]){right:-2.4rem}.vuefinder :is(.md\:top-5){top:1.25rem}.vuefinder :is(.md\:block){display:block}.vuefinder :is(.md\:hidden){display:none}.vuefinder :is(.md\:h-12){height:3rem}.vuefinder :is(.md\:h-8){height:2rem}.vuefinder :is(.md\:w-12){width:3rem}.vuefinder :is(.md\:w-24){width:6rem}.vuefinder :is(.md\:w-8){width:2rem}.vuefinder :is(.md\:max-w-2xl){max-width:42rem}}@media (min-width: 1024px){.vuefinder :is(.lg\:max-w-3xl){max-width:48rem}}@media (min-width: 1280px){.vuefinder :is(.xl\:max-w-5xl){max-width:64rem}}
+.vuefinder *,.vuefinder :before,.vuefinder :after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}.vuefinder :before,.vuefinder :after{--tw-content: ""}.vuefinder hr{height:0;color:inherit;border-top-width:1px}.vuefinder abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}.vuefinder h1,.vuefinder h2,.vuefinder h3,.vuefinder h4,.vuefinder h5,.vuefinder h6{font-size:inherit;font-weight:inherit}.vuefinder a{color:inherit;text-decoration:inherit}.vuefinder b,.vuefinder strong{font-weight:bolder}.vuefinder code,.vuefinder kbd,.vuefinder samp,.vuefinder pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}.vuefinder small{font-size:80%}.vuefinder sub,.vuefinder sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}.vuefinder sub{bottom:-.25em}.vuefinder sup{top:-.5em}.vuefinder table{text-indent:0;border-color:inherit;border-collapse:collapse}.vuefinder button,.vuefinder input,.vuefinder optgroup,.vuefinder select,.vuefinder textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}.vuefinder button,.vuefinder select{text-transform:none}.vuefinder button,.vuefinder [type=button],.vuefinder [type=reset],.vuefinder [type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}.vuefinder :-moz-focusring{outline:auto}.vuefinder :-moz-ui-invalid{box-shadow:none}.vuefinder progress{vertical-align:baseline}.vuefinder ::-webkit-inner-spin-button,.vuefinder ::-webkit-outer-spin-button{height:auto}.vuefinder [type=search]{-webkit-appearance:textfield;outline-offset:-2px}.vuefinder ::-webkit-search-decoration{-webkit-appearance:none}.vuefinder ::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}.vuefinder summary{display:list-item}.vuefinder blockquote,.vuefinder dl,.vuefinder dd,.vuefinder h1,.vuefinder h2,.vuefinder h3,.vuefinder h4,.vuefinder h5,.vuefinder h6,.vuefinder hr,.vuefinder figure,.vuefinder p,.vuefinder pre{margin:0}.vuefinder fieldset{margin:0;padding:0}.vuefinder legend{padding:0}.vuefinder ol,.vuefinder ul,.vuefinder menu{list-style:none;margin:0;padding:0}.vuefinder dialog{padding:0}.vuefinder textarea{resize:vertical}.vuefinder input::-moz-placeholder,.vuefinder textarea::-moz-placeholder{opacity:1;color:#9ca3af}.vuefinder input::placeholder,.vuefinder textarea::placeholder{opacity:1;color:#9ca3af}.vuefinder button,.vuefinder [role=button]{cursor:pointer}.vuefinder :disabled{cursor:default}.vuefinder img,.vuefinder svg,.vuefinder video,.vuefinder canvas,.vuefinder audio,.vuefinder iframe,.vuefinder embed,.vuefinder object{display:block;vertical-align:middle}.vuefinder img,.vuefinder video{max-width:100%;height:auto}.vuefinder [hidden]{display:none}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.container{width:100%}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1536px){.container{max-width:1536px}}.vuefinder{position:relative}.vuefinder *{touch-action:manipulation}.vuefinder :is(.vf-btn){margin-top:.125rem;display:inline-flex;width:100%;justify-content:center;border-radius:.375rem;border-width:1px;padding:.5rem 1rem;font-size:1rem;line-height:1.5rem;font-weight:500;letter-spacing:.025em;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.vuefinder :is(.vf-btn:focus){outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-offset-width: 2px}@media (min-width: 640px){.vuefinder :is(.vf-btn){margin-left:.25rem;margin-right:.25rem;width:auto;font-size:.875rem;line-height:1.25rem}}.vuefinder :is(.vf-btn-primary){border-color:transparent;--tw-bg-opacity: 1;background-color:rgb(37 99 235 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.vuefinder :is(.vf-btn-primary:hover){--tw-bg-opacity: 1;background-color:rgb(29 78 216 / var(--tw-bg-opacity))}.vuefinder :is(.vf-btn-primary:focus){--tw-ring-opacity: 1;--tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity))}.vuefinder :is(.dark .vf-btn-primary){--tw-border-opacity: 1;border-color:rgb(31 41 55 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(249 250 251 / var(--tw-text-opacity))}.vuefinder :is(.dark .vf-btn-primary:hover){--tw-bg-opacity: 1;background-color:rgb(107 114 128 / var(--tw-bg-opacity))}.vuefinder :is(.vf-btn-primary.disabled:hover){--tw-bg-opacity: 1;background-color:rgb(37 99 235 / var(--tw-bg-opacity))}.vuefinder :is(.dark .vf-btn-primary.disabled:hover){--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity))}.vuefinder :is(.vf-btn-secondary){--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity))}.vuefinder :is(.vf-btn-secondary:hover){--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity))}.vuefinder :is(.vf-btn-secondary:focus){--tw-ring-opacity: 1;--tw-ring-color: rgb(107 114 128 / var(--tw-ring-opacity))}.vuefinder :is(.dark .vf-btn-secondary){--tw-border-opacity: 1;border-color:rgb(55 65 81 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(31 41 55 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(209 213 219 / var(--tw-text-opacity))}.vuefinder :is(.dark .vf-btn-secondary:hover){--tw-bg-opacity: 1;background-color:rgb(107 114 128 / var(--tw-bg-opacity))}.vuefinder :is(.vf-btn-secondary.disabled:hover){--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity))}.vuefinder :is(.dark .vf-btn-secondary.disabled:hover){--tw-bg-opacity: 1;background-color:rgb(31 41 55 / var(--tw-bg-opacity))}.vuefinder :is(.vf-btn-danger){border-color:transparent;--tw-bg-opacity: 1;background-color:rgb(220 38 38 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.vuefinder :is(.vf-btn-danger:hover){--tw-bg-opacity: 1;background-color:rgb(185 28 28 / var(--tw-bg-opacity))}.vuefinder :is(.vf-btn-danger:focus){--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-opacity: 1;--tw-ring-color: rgb(254 202 202 / var(--tw-ring-opacity));--tw-ring-offset-width: 1px}.vuefinder :is(.dark .vf-btn-danger){--tw-border-opacity: 1;border-color:rgb(153 27 27 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(185 28 28 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(249 250 251 / var(--tw-text-opacity))}.vuefinder :is(.dark .vf-btn-danger:hover){--tw-bg-opacity: 1;background-color:rgb(239 68 68 / var(--tw-bg-opacity))}.vuefinder :is(.disabled){cursor:not-allowed;opacity:.5}.vuefinder :is(.vf-sort-button){display:flex;align-items:center;--tw-bg-opacity: 1;background-color:rgb(250 250 250 / var(--tw-bg-opacity));padding:.25rem;line-height:1.5rem}.vuefinder :is(.vf-sort-button:hover){--tw-bg-opacity: 1;background-color:rgb(245 245 245 / var(--tw-bg-opacity))}.vuefinder :is(.dark .vf-sort-button){--tw-border-opacity: 1;border-color:rgb(55 65 81 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(31 41 55 / var(--tw-bg-opacity))}.vuefinder :is(.dark .vf-sort-button:hover){background-color:#3741511a}.vuefinder :is(.vf-toolbar-icon){cursor:pointer;stroke:#6b7280}.vuefinder :is(.vf-toolbar-icon:hover){stroke:#0e7490}.vuefinder :is(.dark .vf-toolbar-icon){stroke:#9ca3af}.vuefinder :is(.dark .vf-toolbar-icon:hover){stroke:#d1d5db}.vuefinder :is(.vf-toolbar-icon-disabled){cursor:not-allowed;stroke:#e5e7eb}.vuefinder :is(.dark .vf-toolbar-icon-disabled){stroke:#374151}.vuefinder :is(.vf-explorer-selected){border-width:1px!important;--tw-border-opacity: 1 !important;border-color:rgb(212 212 212 / var(--tw-border-opacity))!important;--tw-bg-opacity: 1 !important;background-color:rgb(245 245 245 / var(--tw-bg-opacity))!important}.vuefinder :is(.dark .vf-explorer-selected){border-color:rgb(17 24 39 / var(--tw-border-opacity))!important;--tw-border-opacity: 1 !important;border-color:rgb(30 41 59 / var(--tw-border-opacity))!important;--tw-bg-opacity: 1 !important;background-color:rgb(51 65 85 / var(--tw-bg-opacity))!important}.vuefinder :is(.vf-item-list){margin-top:.125rem;margin-bottom:.125rem;display:grid;width:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none;grid-template-columns:repeat(1,minmax(0,1fr));border-width:1px;border-color:transparent}.vuefinder :is(.vf-item-list:hover){--tw-bg-opacity: 1;background-color:rgb(250 250 250 / var(--tw-bg-opacity))}.vuefinder :is(.dark .vf-item-list:hover){--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity))}.vuefinder :is(.vf-item-grid){margin:.25rem;display:inline-flex;height:5rem;width:5.5rem;-webkit-user-select:none;-moz-user-select:none;user-select:none;justify-content:center;border-width:1px;border-color:transparent;text-align:center}.vuefinder :is(.vf-item-grid:hover){--tw-bg-opacity: 1;background-color:rgb(250 250 250 / var(--tw-bg-opacity))}.vuefinder :is(.dark .vf-item-grid:hover){--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity))}@media (min-width: 768px){.vuefinder :is(.vf-item-grid){width:6rem}}.vuefinder .vuefinder.dark{color-scheme:dark}.vuefinder .vf-scrollbar::-webkit-scrollbar{width:12px}.vuefinder :is(.vf-scrollbar)::-webkit-scrollbar-track-piece{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity))}.vuefinder :is(.dark .vf-scrollbar)::-webkit-scrollbar-track-piece{background-color:#0f172a80}.vuefinder :is(.vf-scrollbar)::-webkit-scrollbar-thumb{--tw-bg-opacity: 1;background-color:rgb(209 213 219 / var(--tw-bg-opacity))}.vuefinder :is(.dark .vf-scrollbar)::-webkit-scrollbar-thumb{--tw-bg-opacity: 1;background-color:rgb(51 65 85 / var(--tw-bg-opacity))}.vuefinder :is(.vf-scrollbar)::-webkit-scrollbar-thumb:hover{--tw-bg-opacity: 1;background-color:rgb(156 163 175 / var(--tw-bg-opacity))}.vuefinder :is(.dark .vf-scrollbar)::-webkit-scrollbar-thumb:hover{--tw-bg-opacity: 1;background-color:rgb(71 85 105 / var(--tw-bg-opacity))}.vuefinder :is(.vf-scrollbar)::-webkit-scrollbar-corner{background-color:transparent}.vuefinder .fade-enter-active,.vuefinder .fade-leave-active{transition:opacity .2s ease}.vuefinder .fade-enter-from,.vuefinder .fade-leave-to{opacity:0}.vf-explorer-selector{border-width:1px!important;--tw-border-opacity: 1 !important;border-color:rgb(100 116 139 / var(--tw-border-opacity))!important;--tw-bg-opacity: 1 !important;background-color:rgb(203 213 225 / var(--tw-bg-opacity))!important;opacity:.5!important}.vuefinder :is(.pointer-events-none){pointer-events:none}.vuefinder :is(.visible){visibility:visible}.vuefinder :is(.fixed){position:fixed}.vuefinder :is(.absolute){position:absolute}.vuefinder :is(.relative){position:relative}.vuefinder :is(.inset-0){top:0;right:0;bottom:0;left:0}.vuefinder :is(.-top-96){top:-24rem}.vuefinder :is(.bottom-0){bottom:0}.vuefinder :is(.left-1\/2){left:50%}.vuefinder :is(.left-\[90px\]){left:90px}.vuefinder :is(.right-\[-2rem\]){right:-2rem}.vuefinder :is(.top-1\/2){top:50%}.vuefinder :is(.top-4){top:1rem}.vuefinder :is(.top-\[65px\]){top:65px}.vuefinder :is(.-z-50){z-index:-50}.vuefinder :is(.z-0){z-index:0}.vuefinder :is(.z-10){z-index:10}.vuefinder :is(.z-20){z-index:20}.vuefinder :is(.z-30){z-index:30}.vuefinder :is(.col-span-2){grid-column:span 2 / span 2}.vuefinder :is(.col-span-3){grid-column:span 3 / span 3}.vuefinder :is(.col-span-5){grid-column:span 5 / span 5}.vuefinder :is(.col-span-7){grid-column:span 7 / span 7}.vuefinder :is(.m-1){margin:.25rem}.vuefinder :is(.m-auto){margin:auto}.vuefinder :is(.-mx-1){margin-left:-.25rem;margin-right:-.25rem}.vuefinder :is(.-mx-1\.5){margin-left:-.375rem;margin-right:-.375rem}.vuefinder :is(.mx-0){margin-left:0;margin-right:0}.vuefinder :is(.mx-0\.5){margin-left:.125rem;margin-right:.125rem}.vuefinder :is(.mx-1){margin-left:.25rem;margin-right:.25rem}.vuefinder :is(.mx-1\.5){margin-left:.375rem;margin-right:.375rem}.vuefinder :is(.mx-2){margin-left:.5rem;margin-right:.5rem}.vuefinder :is(.mx-auto){margin-left:auto;margin-right:auto}.vuefinder :is(.my-0){margin-top:0;margin-bottom:0}.vuefinder :is(.my-0\.5){margin-top:.125rem;margin-bottom:.125rem}.vuefinder :is(.my-1){margin-top:.25rem;margin-bottom:.25rem}.vuefinder :is(.-ml-1){margin-left:-.25rem}.vuefinder :is(.mb-1){margin-bottom:.25rem}.vuefinder :is(.mb-2){margin-bottom:.5rem}.vuefinder :is(.mb-4){margin-bottom:1rem}.vuefinder :is(.ml-1){margin-left:.25rem}.vuefinder :is(.ml-1\.5){margin-left:.375rem}.vuefinder :is(.ml-2){margin-left:.5rem}.vuefinder :is(.ml-3){margin-left:.75rem}.vuefinder :is(.ml-auto){margin-left:auto}.vuefinder :is(.mr-1){margin-right:.25rem}.vuefinder :is(.mr-3){margin-right:.75rem}.vuefinder :is(.mr-auto){margin-right:auto}.vuefinder :is(.ms-3){margin-inline-start:.75rem}.vuefinder :is(.mt-1){margin-top:.25rem}.vuefinder :is(.mt-2){margin-top:.5rem}.vuefinder :is(.mt-3){margin-top:.75rem}.vuefinder :is(.mt-5){margin-top:1.25rem}.vuefinder :is(.block){display:block}.vuefinder :is(.inline-block){display:inline-block}.vuefinder :is(.flex){display:flex}.vuefinder :is(.grid){display:grid}.vuefinder :is(.\!hidden){display:none!important}.vuefinder :is(.hidden){display:none}.vuefinder :is(.aspect-video){aspect-ratio:16 / 9}.vuefinder :is(.h-10){height:2.5rem}.vuefinder :is(.h-12){height:3rem}.vuefinder :is(.h-4){height:1rem}.vuefinder :is(.h-5){height:1.25rem}.vuefinder :is(.h-6){height:1.5rem}.vuefinder :is(.h-\[120px\]){height:120px}.vuefinder :is(.h-\[60vh\]){height:60vh}.vuefinder :is(.h-fit){height:-moz-fit-content;height:fit-content}.vuefinder :is(.h-full){height:100%}.vuefinder :is(.max-h-\[200px\]){max-height:200px}.vuefinder :is(.max-h-\[50vh\]){max-height:50vh}.vuefinder :is(.max-h-\[60vh\]){max-height:60vh}.vuefinder :is(.min-h-\[150px\]){min-height:150px}.vuefinder :is(.min-h-\[200px\]){min-height:200px}.vuefinder :is(.min-h-full){min-height:100%}.vuefinder :is(.w-1\/2){width:50%}.vuefinder :is(.w-10){width:2.5rem}.vuefinder :is(.w-12){width:3rem}.vuefinder :is(.w-4){width:1rem}.vuefinder :is(.w-5){width:1.25rem}.vuefinder :is(.w-6){width:1.5rem}.vuefinder :is(.w-full){width:100%}.vuefinder :is(.w-screen){width:100vw}.vuefinder :is(.min-w-max){min-width:-moz-max-content;min-width:max-content}.vuefinder :is(.max-w-80){max-width:20rem}.vuefinder :is(.max-w-\[50vh\]){max-width:50vh}.vuefinder :is(.max-w-fit){max-width:-moz-fit-content;max-width:fit-content}.vuefinder :is(.flex-1){flex:1 1 0%}.vuefinder :is(.flex-auto){flex:1 1 auto}.vuefinder :is(.flex-shrink-0){flex-shrink:0}.vuefinder :is(.flex-grow){flex-grow:1}.vuefinder :is(.basis-full){flex-basis:100%}.vuefinder :is(.-translate-x-1\/2){--tw-translate-x: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.vuefinder :is(.transform){transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes spin{to{transform:rotate(360deg)}}.vuefinder :is(.animate-spin){animation:spin 1s linear infinite}.vuefinder :is(.cursor-default){cursor:default}.vuefinder :is(.cursor-pointer){cursor:pointer}.vuefinder :is(.select-none){-webkit-user-select:none;-moz-user-select:none;user-select:none}.vuefinder :is(.resize-y){resize:vertical}.vuefinder :is(.grid-cols-12){grid-template-columns:repeat(12,minmax(0,1fr))}.vuefinder :is(.flex-col){flex-direction:column}.vuefinder :is(.items-end){align-items:flex-end}.vuefinder :is(.items-center){align-items:center}.vuefinder :is(.justify-end){justify-content:flex-end}.vuefinder :is(.justify-center){justify-content:center}.vuefinder :is(.justify-between){justify-content:space-between}.vuefinder :is(.gap-x-3){-moz-column-gap:.75rem;column-gap:.75rem}.vuefinder :is(.space-y-2>:not([hidden])~:not([hidden])){--tw-space-y-reverse: 0;margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem * var(--tw-space-y-reverse))}.vuefinder :is(.divide-x>:not([hidden])~:not([hidden])){--tw-divide-x-reverse: 0;border-right-width:calc(1px * var(--tw-divide-x-reverse));border-left-width:calc(1px * calc(1 - var(--tw-divide-x-reverse)))}.vuefinder :is(.self-center){align-self:center}.vuefinder :is(.overflow-auto){overflow:auto}.vuefinder :is(.overflow-hidden){overflow:hidden}.vuefinder :is(.overflow-y-auto){overflow-y:auto}.vuefinder :is(.overflow-ellipsis){text-overflow:ellipsis}.vuefinder :is(.text-ellipsis){text-overflow:ellipsis}.vuefinder :is(.whitespace-nowrap){white-space:nowrap}.vuefinder :is(.whitespace-pre-wrap){white-space:pre-wrap}.vuefinder :is(.text-nowrap){text-wrap:nowrap}.vuefinder :is(.break-all){word-break:break-all}.vuefinder :is(.rounded){border-radius:.25rem}.vuefinder :is(.rounded-full){border-radius:9999px}.vuefinder :is(.rounded-lg){border-radius:.5rem}.vuefinder :is(.rounded-sm){border-radius:.125rem}.vuefinder :is(.border){border-width:1px}.vuefinder :is(.border-0){border-width:0px}.vuefinder :is(.border-2){border-width:2px}.vuefinder :is(.border-b){border-bottom-width:1px}.vuefinder :is(.border-t){border-top-width:1px}.vuefinder :is(.border-dashed){border-style:dashed}.vuefinder :is(.border-gray-200){--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity))}.vuefinder :is(.border-gray-300){--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity))}.vuefinder :is(.border-lime-600){--tw-border-opacity: 1;border-color:rgb(101 163 13 / var(--tw-border-opacity))}.vuefinder :is(.border-neutral-300){--tw-border-opacity: 1;border-color:rgb(212 212 212 / var(--tw-border-opacity))}.vuefinder :is(.border-red-400){--tw-border-opacity: 1;border-color:rgb(248 113 113 / var(--tw-border-opacity))}.vuefinder :is(.border-transparent){border-color:transparent}.vuefinder :is(.bg-blue-200){--tw-bg-opacity: 1;background-color:rgb(191 219 254 / var(--tw-bg-opacity))}.vuefinder :is(.bg-blue-50){--tw-bg-opacity: 1;background-color:rgb(239 246 255 / var(--tw-bg-opacity))}.vuefinder :is(.bg-blue-600){--tw-bg-opacity: 1;background-color:rgb(37 99 235 / var(--tw-bg-opacity))}.vuefinder :is(.bg-blue-700\/75){background-color:#1d4ed8bf}.vuefinder :is(.bg-emerald-100){--tw-bg-opacity: 1;background-color:rgb(209 250 229 / var(--tw-bg-opacity))}.vuefinder :is(.bg-gray-100){--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity))}.vuefinder :is(.bg-gray-200){--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity))}.vuefinder :is(.bg-gray-50){--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity))}.vuefinder :is(.bg-gray-500){--tw-bg-opacity: 1;background-color:rgb(107 114 128 / var(--tw-bg-opacity))}.vuefinder :is(.bg-neutral-100){--tw-bg-opacity: 1;background-color:rgb(245 245 245 / var(--tw-bg-opacity))}.vuefinder :is(.bg-neutral-50){--tw-bg-opacity: 1;background-color:rgb(250 250 250 / var(--tw-bg-opacity))}.vuefinder :is(.bg-red-100){--tw-bg-opacity: 1;background-color:rgb(254 226 226 / var(--tw-bg-opacity))}.vuefinder :is(.bg-transparent){background-color:transparent}.vuefinder :is(.bg-white){--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.vuefinder :is(.bg-opacity-75){--tw-bg-opacity: .75}.vuefinder :is(.fill-gray-100){fill:#f3f4f6}.vuefinder :is(.fill-sky-500){fill:#0ea5e9}.vuefinder :is(.fill-white){fill:#fff}.vuefinder :is(.stroke-blue-600){stroke:#2563eb}.vuefinder :is(.stroke-blue-900){stroke:#1e3a8a}.vuefinder :is(.stroke-gray-400){stroke:#9ca3af}.vuefinder :is(.stroke-neutral-500){stroke:#737373}.vuefinder :is(.stroke-red-600){stroke:#dc2626}.vuefinder :is(.stroke-sky-500){stroke:#0ea5e9}.vuefinder :is(.stroke-slate-500){stroke:#64748b}.vuefinder :is(.p-0){padding:0}.vuefinder :is(.p-0\.5){padding:.125rem}.vuefinder :is(.p-1){padding:.25rem}.vuefinder :is(.p-1\.5){padding:.375rem}.vuefinder :is(.p-2){padding:.5rem}.vuefinder :is(.p-4){padding:1rem}.vuefinder :is(.px-1){padding-left:.25rem;padding-right:.25rem}.vuefinder :is(.px-1\.5){padding-left:.375rem;padding-right:.375rem}.vuefinder :is(.px-2){padding-left:.5rem;padding-right:.5rem}.vuefinder :is(.px-4){padding-left:1rem;padding-right:1rem}.vuefinder :is(.py-0){padding-top:0;padding-bottom:0}.vuefinder :is(.py-0\.5){padding-top:.125rem;padding-bottom:.125rem}.vuefinder :is(.py-1){padding-top:.25rem;padding-bottom:.25rem}.vuefinder :is(.py-1\.5){padding-top:.375rem;padding-bottom:.375rem}.vuefinder :is(.py-2){padding-top:.5rem;padding-bottom:.5rem}.vuefinder :is(.py-3){padding-top:.75rem;padding-bottom:.75rem}.vuefinder :is(.pb-0){padding-bottom:0}.vuefinder :is(.pb-1){padding-bottom:.25rem}.vuefinder :is(.pb-4){padding-bottom:1rem}.vuefinder :is(.pl-2){padding-left:.5rem}.vuefinder :is(.pr-1){padding-right:.25rem}.vuefinder :is(.pr-3){padding-right:.75rem}.vuefinder :is(.pr-8){padding-right:2rem}.vuefinder :is(.pt-5){padding-top:1.25rem}.vuefinder :is(.text-left){text-align:left}.vuefinder :is(.text-center){text-align:center}.vuefinder :is(.text-base){font-size:1rem;line-height:1.5rem}.vuefinder :is(.text-lg){font-size:1.125rem;line-height:1.75rem}.vuefinder :is(.text-sm){font-size:.875rem;line-height:1.25rem}.vuefinder :is(.text-xs){font-size:.75rem;line-height:1rem}.vuefinder :is(.font-bold){font-weight:700}.vuefinder :is(.font-medium){font-weight:500}.vuefinder :is(.font-normal){font-weight:400}.vuefinder :is(.font-semibold){font-weight:600}.vuefinder :is(.leading-5){line-height:1.25rem}.vuefinder :is(.leading-6){line-height:1.5rem}.vuefinder :is(.leading-none){line-height:1}.vuefinder :is(.tracking-wider){letter-spacing:.05em}.vuefinder :is(.text-blue-500){--tw-text-opacity: 1;color:rgb(59 130 246 / var(--tw-text-opacity))}.vuefinder :is(.text-emerald-600){--tw-text-opacity: 1;color:rgb(5 150 105 / var(--tw-text-opacity))}.vuefinder :is(.text-gray-400){--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity))}.vuefinder :is(.text-gray-500){--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity))}.vuefinder :is(.text-gray-600){--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity))}.vuefinder :is(.text-gray-700){--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity))}.vuefinder :is(.text-gray-800){--tw-text-opacity: 1;color:rgb(31 41 55 / var(--tw-text-opacity))}.vuefinder :is(.text-gray-900){--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity))}.vuefinder :is(.text-green-600){--tw-text-opacity: 1;color:rgb(22 163 74 / var(--tw-text-opacity))}.vuefinder :is(.text-indigo-600){--tw-text-opacity: 1;color:rgb(79 70 229 / var(--tw-text-opacity))}.vuefinder :is(.text-lime-600){--tw-text-opacity: 1;color:rgb(101 163 13 / var(--tw-text-opacity))}.vuefinder :is(.text-neutral-300){--tw-text-opacity: 1;color:rgb(212 212 212 / var(--tw-text-opacity))}.vuefinder :is(.text-neutral-500){--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity))}.vuefinder :is(.text-neutral-700){--tw-text-opacity: 1;color:rgb(64 64 64 / var(--tw-text-opacity))}.vuefinder :is(.text-red-400){--tw-text-opacity: 1;color:rgb(248 113 113 / var(--tw-text-opacity))}.vuefinder :is(.text-red-500){--tw-text-opacity: 1;color:rgb(239 68 68 / var(--tw-text-opacity))}.vuefinder :is(.text-red-600){--tw-text-opacity: 1;color:rgb(220 38 38 / var(--tw-text-opacity))}.vuefinder :is(.text-slate-500){--tw-text-opacity: 1;color:rgb(100 116 139 / var(--tw-text-opacity))}.vuefinder :is(.text-slate-700){--tw-text-opacity: 1;color:rgb(51 65 85 / var(--tw-text-opacity))}.vuefinder :is(.text-white){--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.vuefinder :is(.text-opacity-50){--tw-text-opacity: .5}.vuefinder :is(.opacity-0){opacity:0}.vuefinder :is(.opacity-25){opacity:.25}.vuefinder :is(.opacity-75){opacity:.75}.vuefinder :is(.shadow){--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.vuefinder :is(.shadow-sm){--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.vuefinder :is(.shadow-xl){--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.vuefinder :is(.outline-0){outline-width:0px}.vuefinder :is(.ring-0){--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.vuefinder :is(.filter){filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.vuefinder :is(.transition-all){transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.vuefinder :is(.transition-opacity){transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.vuefinder :is(.duration-1000){transition-duration:1s}.vuefinder :is(.duration-500){transition-duration:.5s}.vuefinder :is(.ease-out){transition-timing-function:cubic-bezier(0,0,.2,1)}.vuefinder :is(.hover\:bg-blue-200:hover){--tw-bg-opacity: 1;background-color:rgb(191 219 254 / var(--tw-bg-opacity))}.vuefinder :is(.hover\:bg-blue-700:hover){--tw-bg-opacity: 1;background-color:rgb(29 78 216 / var(--tw-bg-opacity))}.vuefinder :is(.hover\:bg-gray-100:hover){--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity))}.vuefinder :is(.hover\:bg-gray-400\/20:hover){background-color:#9ca3af33}.vuefinder :is(.hover\:bg-neutral-100:hover){--tw-bg-opacity: 1;background-color:rgb(245 245 245 / var(--tw-bg-opacity))}.vuefinder :is(.hover\:bg-neutral-200:hover){--tw-bg-opacity: 1;background-color:rgb(229 229 229 / var(--tw-bg-opacity))}.vuefinder :is(.hover\:bg-neutral-300:hover){--tw-bg-opacity: 1;background-color:rgb(212 212 212 / var(--tw-bg-opacity))}.vuefinder :is(.hover\:text-red-600:hover){--tw-text-opacity: 1;color:rgb(220 38 38 / var(--tw-text-opacity))}.vuefinder :is(.focus\:border-transparent:focus){border-color:transparent}.vuefinder :is(.focus\:outline-none:focus){outline:2px solid transparent;outline-offset:2px}.vuefinder :is(.focus\:ring-indigo-600:focus){--tw-ring-opacity: 1;--tw-ring-color: rgb(79 70 229 / var(--tw-ring-opacity))}.vuefinder :is(.focus\:ring-transparent:focus){--tw-ring-color: transparent}.vuefinder :is(.disabled\:bg-gray-100:disabled){--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity))}.vuefinder :is(.dark .dark\:border-t){border-top-width:1px}.vuefinder :is(.dark .dark\:border-gray-200){--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity))}.vuefinder :is(.dark .dark\:border-gray-600){--tw-border-opacity: 1;border-color:rgb(75 85 99 / var(--tw-border-opacity))}.vuefinder :is(.dark .dark\:border-gray-700){--tw-border-opacity: 1;border-color:rgb(55 65 81 / var(--tw-border-opacity))}.vuefinder :is(.dark .dark\:border-gray-700\/50){border-color:#37415180}.vuefinder :is(.dark .dark\:border-gray-900){--tw-border-opacity: 1;border-color:rgb(17 24 39 / var(--tw-border-opacity))}.vuefinder :is(.dark .dark\:border-red-300){--tw-border-opacity: 1;border-color:rgb(252 165 165 / var(--tw-border-opacity))}.vuefinder :is(.dark .dark\:bg-emerald-950){--tw-bg-opacity: 1;background-color:rgb(2 44 34 / var(--tw-bg-opacity))}.vuefinder :is(.dark .dark\:bg-gray-500){--tw-bg-opacity: 1;background-color:rgb(107 114 128 / var(--tw-bg-opacity))}.vuefinder :is(.dark .dark\:bg-gray-600){--tw-bg-opacity: 1;background-color:rgb(75 85 99 / var(--tw-bg-opacity))}.vuefinder :is(.dark .dark\:bg-gray-700){--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity))}.vuefinder :is(.dark .dark\:bg-gray-700\/25){background-color:#37415140}.vuefinder :is(.dark .dark\:bg-gray-700\/50){background-color:#37415180}.vuefinder :is(.dark .dark\:bg-gray-800){--tw-bg-opacity: 1;background-color:rgb(31 41 55 / var(--tw-bg-opacity))}.vuefinder :is(.dark .dark\:bg-red-950){--tw-bg-opacity: 1;background-color:rgb(69 10 10 / var(--tw-bg-opacity))}.vuefinder :is(.dark .dark\:bg-slate-600){--tw-bg-opacity: 1;background-color:rgb(71 85 105 / var(--tw-bg-opacity))}.vuefinder :is(.dark .dark\:bg-opacity-75){--tw-bg-opacity: .75}.vuefinder :is(.dark .dark\:fill-gray-400\/20){fill:#9ca3af33}.vuefinder :is(.dark .dark\:fill-gray-700){fill:#374151}.vuefinder :is(.dark .dark\:fill-neutral-300){fill:#d4d4d4}.vuefinder :is(.dark .dark\:fill-slate-500){fill:#64748b}.vuefinder :is(.dark .dark\:stroke-blue-100){stroke:#dbeafe}.vuefinder :is(.dark .dark\:stroke-gray-400){stroke:#9ca3af}.vuefinder :is(.dark .dark\:stroke-gray-600){stroke:#4b5563}.vuefinder :is(.dark .dark\:stroke-red-200){stroke:#fecaca}.vuefinder :is(.dark .dark\:stroke-slate-500){stroke:#64748b}.vuefinder :is(.dark .dark\:text-gray-100){--tw-text-opacity: 1;color:rgb(243 244 246 / var(--tw-text-opacity))}.vuefinder :is(.dark .dark\:text-gray-200){--tw-text-opacity: 1;color:rgb(229 231 235 / var(--tw-text-opacity))}.vuefinder :is(.dark .dark\:text-gray-300){--tw-text-opacity: 1;color:rgb(209 213 219 / var(--tw-text-opacity))}.vuefinder :is(.dark .dark\:text-gray-400){--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity))}.vuefinder :is(.dark .dark\:text-gray-50){--tw-text-opacity: 1;color:rgb(249 250 251 / var(--tw-text-opacity))}.vuefinder :is(.dark .dark\:text-gray-500){--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity))}.vuefinder :is(.dark .dark\:text-gray-600){--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity))}.vuefinder :is(.dark .dark\:text-green-600){--tw-text-opacity: 1;color:rgb(22 163 74 / var(--tw-text-opacity))}.vuefinder :is(.dark .dark\:text-lime-300){--tw-text-opacity: 1;color:rgb(190 242 100 / var(--tw-text-opacity))}.vuefinder :is(.dark .dark\:text-neutral-200){--tw-text-opacity: 1;color:rgb(229 229 229 / var(--tw-text-opacity))}.vuefinder :is(.dark .dark\:text-neutral-300){--tw-text-opacity: 1;color:rgb(212 212 212 / var(--tw-text-opacity))}.vuefinder :is(.dark .dark\:text-neutral-400){--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity))}.vuefinder :is(.dark .dark\:text-neutral-50){--tw-text-opacity: 1;color:rgb(250 250 250 / var(--tw-text-opacity))}.vuefinder :is(.dark .dark\:text-neutral-500){--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity))}.vuefinder :is(.dark .dark\:text-red-200){--tw-text-opacity: 1;color:rgb(254 202 202 / var(--tw-text-opacity))}.vuefinder :is(.dark .dark\:text-red-300){--tw-text-opacity: 1;color:rgb(252 165 165 / var(--tw-text-opacity))}.vuefinder :is(.dark .dark\:text-slate-200){--tw-text-opacity: 1;color:rgb(226 232 240 / var(--tw-text-opacity))}.vuefinder :is(.dark .dark\:accent-slate-400){accent-color:#94a3b8}.vuefinder :is(.dark .dark\:opacity-75){opacity:.75}.vuefinder :is(.dark .dark\:selection\:bg-gray-500 *)::-moz-selection{--tw-bg-opacity: 1;background-color:rgb(107 114 128 / var(--tw-bg-opacity))}.vuefinder :is(.dark .dark\:selection\:bg-gray-500 *)::selection{--tw-bg-opacity: 1;background-color:rgb(107 114 128 / var(--tw-bg-opacity))}.vuefinder :is(.dark .dark\:selection\:bg-gray-500)::-moz-selection{--tw-bg-opacity: 1;background-color:rgb(107 114 128 / var(--tw-bg-opacity))}.vuefinder :is(.dark .dark\:selection\:bg-gray-500)::selection{--tw-bg-opacity: 1;background-color:rgb(107 114 128 / var(--tw-bg-opacity))}.vuefinder :is(.dark .dark\:hover\:bg-gray-500:hover){--tw-bg-opacity: 1;background-color:rgb(107 114 128 / var(--tw-bg-opacity))}.vuefinder :is(.dark .dark\:hover\:bg-gray-700:hover){--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity))}.vuefinder :is(.dark .dark\:hover\:bg-gray-700\/50:hover){background-color:#37415180}.vuefinder :is(.dark .dark\:hover\:bg-gray-800:hover){--tw-bg-opacity: 1;background-color:rgb(31 41 55 / var(--tw-bg-opacity))}.vuefinder :is(.dark .dark\:hover\:text-gray-200:hover){--tw-text-opacity: 1;color:rgb(229 231 235 / var(--tw-text-opacity))}.vuefinder :is(.dark .dark\:hover\:text-gray-300:hover){--tw-text-opacity: 1;color:rgb(209 213 219 / var(--tw-text-opacity))}.vuefinder :is(.dark .dark\:focus\:border-gray-600:focus){--tw-border-opacity: 1;border-color:rgb(75 85 99 / var(--tw-border-opacity))}.vuefinder :is(.dark .dark\:focus\:border-transparent:focus){border-color:transparent}.vuefinder :is(.dark .dark\:focus\:ring-gray-600:focus){--tw-ring-opacity: 1;--tw-ring-color: rgb(75 85 99 / var(--tw-ring-opacity))}.vuefinder :is(.dark .dark\:focus\:ring-transparent:focus){--tw-ring-color: transparent}@media (min-width: 640px){.vuefinder :is(.sm\:mx-0){margin-left:0;margin-right:0}.vuefinder :is(.sm\:my-8){margin-top:2rem;margin-bottom:2rem}.vuefinder :is(.sm\:ml-3){margin-left:.75rem}.vuefinder :is(.sm\:ml-4){margin-left:1rem}.vuefinder :is(.sm\:mt-0){margin-top:0}.vuefinder :is(.sm\:flex){display:flex}.vuefinder :is(.sm\:h-10){height:2.5rem}.vuefinder :is(.sm\:w-10){width:2.5rem}.vuefinder :is(.sm\:w-auto){width:auto}.vuefinder :is(.sm\:w-full){width:100%}.vuefinder :is(.sm\:max-w-4xl){max-width:56rem}.vuefinder :is(.sm\:flex-row-reverse){flex-direction:row-reverse}.vuefinder :is(.sm\:items-start){align-items:flex-start}.vuefinder :is(.sm\:items-center){align-items:center}.vuefinder :is(.sm\:p-0){padding:0}.vuefinder :is(.sm\:p-6){padding:1.5rem}.vuefinder :is(.sm\:px-6){padding-left:1.5rem;padding-right:1.5rem}.vuefinder :is(.sm\:pb-4){padding-bottom:1rem}.vuefinder :is(.sm\:text-left){text-align:left}.vuefinder :is(.sm\:text-sm){font-size:.875rem;line-height:1.25rem}.vuefinder :is(.sm\:text-xs){font-size:.75rem;line-height:1rem}}@media (min-width: 768px){.vuefinder :is(.md\:right-\[-2\.4rem\]){right:-2.4rem}.vuefinder :is(.md\:top-5){top:1.25rem}.vuefinder :is(.md\:top-\[75px\]){top:75px}.vuefinder :is(.md\:block){display:block}.vuefinder :is(.md\:hidden){display:none}.vuefinder :is(.md\:h-12){height:3rem}.vuefinder :is(.md\:h-8){height:2rem}.vuefinder :is(.md\:w-12){width:3rem}.vuefinder :is(.md\:w-8){width:2rem}.vuefinder :is(.md\:max-w-2xl){max-width:42rem}.vuefinder :is(.md\:px-3){padding-left:.75rem;padding-right:.75rem}}@media (min-width: 1024px){.vuefinder :is(.lg\:max-w-3xl){max-width:48rem}}@media (min-width: 1280px){.vuefinder :is(.xl\:max-w-3xl){max-width:48rem}}
diff --git a/dist/vuefinder.cjs b/dist/vuefinder.cjs
index 018cf0d2..4b73aed9 100644
--- a/dist/vuefinder.cjs
+++ b/dist/vuefinder.cjs
@@ -1 +1 @@
-"use strict";var J=Object.defineProperty;var X=(d,t,o)=>t in d?J(d,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):d[t]=o;var I=(d,t,o)=>(X(d,typeof t!="symbol"?t+"":t,o),o);const e=require("vue"),Q=require("mitt"),Z=require("dragselect"),ee=require("vanilla-lazyload");require("cropperjs/dist/cropper.css");const te=require("cropperjs"),oe=require("@uppy/core"),re=require("@uppy/xhr-upload");require("microtip/microtip.css");var P;const H=(P=document.querySelector('meta[name="csrf-token"]'))==null?void 0:P.getAttribute("content");class ae{constructor(t){I(this,"config");this.config=t}get config(){return this.config}transformRequestParams(t){const o=this.config,a={};H!=null&&H!==""&&(a[o.xsrfHeaderName]=H);const r=Object.assign({},o.headers,a,t.headers),l=Object.assign({},o.params,t.params),c=t.body,s=o.baseUrl+t.url,n=t.method;let i;n!=="get"&&(c instanceof FormData?(i=c,o.body!=null&&Object.entries(this.config.body).forEach(([f,h])=>{i.append(f,h)})):(i={...c},o.body!=null&&Object.assign(i,this.config.body)));const p={url:s,method:n,headers:r,params:l,body:i};if(o.transformRequest!=null){const f=o.transformRequest({url:s,method:n,headers:r,params:l,body:i});f.url!=null&&(p.url=f.url),f.method!=null&&(p.method=f.method),f.params!=null&&(p.params=f.params??{}),f.headers!=null&&(p.headers=f.headers??{}),f.body!=null&&(p.body=f.body)}return p}getDownloadUrl(t,o){if(o.url!=null)return o.url;const a=this.transformRequestParams({url:"",method:"get",params:{q:"download",adapter:t,path:o.path}});return a.url+"?"+new URLSearchParams(a.params).toString()}getPreviewUrl(t,o){if(o.url!=null)return o.url;const a=this.transformRequestParams({url:"",method:"get",params:{q:"preview",adapter:t,path:o.path}});return a.url+"?"+new URLSearchParams(a.params).toString()}async send(t){const o=this.transformRequestParams(t),a=t.responseType||"json",r={method:t.method,headers:o.headers,signal:t.abortSignal},l=o.url+"?"+new URLSearchParams(o.params);if(o.method!=="get"&&o.body!=null){let s;o.body instanceof FormData?s=t.body:(s=JSON.stringify(o.body),r.headers["Content-Type"]="application/json"),r.body=s}const c=await fetch(l,r);if(c.ok)return await c[a]();throw await c.json()}}function ne(d){const t={baseUrl:"",headers:{},params:{},body:{},xsrfHeaderName:"X-CSRF-Token"};return typeof d=="string"?Object.assign(t,{baseUrl:d}):Object.assign(t,d),new ae(t)}function le(d){let t=localStorage.getItem(d+"_storage");const o=e.reactive(JSON.parse(t??"{}"));e.watch(o,a);function a(){Object.keys(o).length?localStorage.setItem(d+"_storage",JSON.stringify(o)):localStorage.removeItem(d+"_storage")}function r(n,i){o[n]=i}function l(n){delete o[n]}function c(){Object.keys(o).map(n=>l(n))}return{getStore:(n,i=null)=>o.hasOwnProperty(n)?o[n]:i,setStore:r,removeStore:l,clearStore:c}}async function se(d,t){const o=t[d];return typeof o=="function"?(await o()).default:o}function ie(d,t,o,a){const{getStore:r,setStore:l}=d,c=e.ref({}),s=e.ref(r("locale",t)),n=(f,h=t)=>{se(f,a).then(g=>{c.value=g,l("locale",f),s.value=f,l("translations",g),Object.values(a).length>1&&(o.emit("vf-toast-push",{label:"The language is set to "+f}),o.emit("vf-language-saved"))}).catch(g=>{h?(o.emit("vf-toast-push",{label:"The selected locale is not yet supported!",type:"error"}),n(h,null)):o.emit("vf-toast-push",{label:"Locale cannot be loaded!",type:"error"})})};!r("locale")&&!a.length?n(t):c.value=r("translations");const i=(f,...h)=>h.length?i(f=f.replace("%s",h.shift()),...h):f;function p(f,...h){return c.value&&c.value.hasOwnProperty(f)?i(c.value[f],...h):i(f,...h)}return{t:p,changeLocale:n,locale:s}}const $={EDIT:"edit",NEW_FILE:"newfile",NEW_FOLDER:"newfolder",PREVIEW:"preview",ARCHIVE:"archive",UNARCHIVE:"unarchive",SEARCH:"search",RENAME:"rename",UPLOAD:"upload",DELETE:"delete",FULL_SCREEN:"fullscreen",DOWNLOAD:"download",LANGUAGE:"language"},ce=Object.values($),de="2.2.7";function W(d,t,o,a,r){return(t=Math,o=t.log,a=1024,r=o(d)/o(a)|0,d/t.pow(a,r)).toFixed(0)+" "+(r?"KMGTPEZY"[--r]+"iB":"B")}function G(d,t,o,a,r){return(t=Math,o=t.log,a=1e3,r=o(d)/o(a)|0,d/t.pow(a,r)).toFixed(0)+" "+(r?"KMGTPEZY"[--r]+"B":"B")}function ue(d){const t={k:1,m:2,g:3,t:4},a=/(\d+(?:\.\d+)?)\s?(k|m|g|t)?b?/i.exec(d);return a[1]*Math.pow(1024,t[a[2].toLowerCase()])}const j={SYSTEM:"system",LIGHT:"light",DARK:"dark"};function me(d,t){const o=e.ref(j.SYSTEM),a=e.ref(j.LIGHT);o.value=d.getStore("theme",t??j.SYSTEM);const r=window.matchMedia("(prefers-color-scheme: dark)"),l=c=>{o.value===j.DARK||o.value===j.SYSTEM&&c.matches?a.value=j.DARK:a.value=j.LIGHT};return l(r),r.addEventListener("change",l),{value:o,actualValue:a,set(c){o.value=c,c!==j.SYSTEM?d.setStore("theme",c):d.removeStore("theme"),l(r)}}}const pe=(d,t)=>{const o=le(d.id),a=Q(),r=o.getStore("metricUnits",!1),l=me(o,d.theme),c=t.i18n,s=d.locale??t.locale,n=e.computed(()=>ie(o,s,a,c)),i=f=>Array.isArray(f)?f:ce,p=d.persist?o.getStore("path",d.path):d.path;return e.reactive({version:de,root:null,debug:d.debug,emitter:a,features:i(d.features),requester:ne(d.request),theme:l,view:o.getStore("viewport","grid"),fullScreen:o.getStore("full-screen",d.fullScreen),selectButton:d.selectButton,metricUnits:r,filesize:r?G:W,maxFileSize:d.maxFileSize,loading:!1,i18n:n,modal:{active:!1,type:"delete",data:{}},adapter:o.getStore("adapter"),path:p,persist:d.persist,storage:o,data:{adapter:o.getStore("adapter"),storages:[],dirname:p,files:[]},selectedItems:[]})},fe={class:"border-neutral-300 flex justify-between items-center py-1 text-sm"},ve={key:0,class:"flex text-center"},he=["aria-label"],ge=e.createElementVNode("svg",{xmlns:"http://www.w3.org/2000/svg",class:"h-6 w-6 md:h-8 md:w-8 m-auto cursor-pointer stroke-gray-500 hover:stroke-cyan-700 dark:stroke-gray-400 dark:hover:stroke-gray-300",fill:"none",viewBox:"0 0 24 24",stroke:"none","stroke-width":"1.5"},[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M12 10.5v6m3-3H9m4.06-7.19l-2.12-2.12a1.5 1.5 0 00-1.061-.44H4.5A2.25 2.25 0 002.25 6v12a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9a2.25 2.25 0 00-2.25-2.25h-5.379a1.5 1.5 0 01-1.06-.44z"})],-1),ke=[ge],ye=["aria-label"],_e=e.createElementVNode("svg",{xmlns:"http://www.w3.org/2000/svg",class:"h-6 w-6 md:h-8 md:w-8 m-auto cursor-pointer stroke-gray-500 hover:stroke-cyan-700 dark:stroke-gray-400 dark:hover:stroke-gray-300",fill:"none",viewBox:"0 0 24 24",stroke:"none","stroke-width":"1.5"},[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m3.75 9v6m3-3H9m1.5-12H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"})],-1),xe=[_e],we=["aria-label"],be=e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"},null,-1),Ee=[be],Ve=["aria-label"],Ne=e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"},null,-1),Be=[Ne],$e=["aria-label"],Ce=e.createElementVNode("svg",{xmlns:"http://www.w3.org/2000/svg",class:"h-6 w-6 md:h-8 md:w-8 m-auto cursor-pointer stroke-gray-500 hover:stroke-cyan-700 dark:stroke-gray-400 dark:hover:stroke-gray-300",fill:"none",viewBox:"0 0 24 24",stroke:"none","stroke-width":"1.5"},[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5"})],-1),Se=[Ce],De=["aria-label"],Me=e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5m6 4.125l2.25 2.25m0 0l2.25 2.25M12 13.875l2.25-2.25M12 13.875l-2.25 2.25M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z"},null,-1),je=[Me],Te=["aria-label"],Le=e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z"},null,-1),Fe=[Le],ze={key:1,class:"flex text-center"},Ae={class:"pl-2"},Oe={class:"dark:bg-gray-700 bg-gray-200 text-xs px-2 py-1 rounded"},Ue={key:0,class:"animate-spin p-0.5 h-5 w-5 text-white ml-auto",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24"},He=e.createElementVNode("circle",{class:"opacity-25 stroke-blue-900 dark:stroke-blue-100",cx:"12",cy:"12",r:"10",stroke:"currentColor","stroke-width":"4"},null,-1),Re=e.createElementVNode("path",{class:"opacity-75",fill:"currentColor",d:"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"},null,-1),qe=[He,Re],Ie={class:"flex text-center items-center justify-end"},Pe=["aria-label"],We={xmlns:"http://www.w3.org/2000/svg",class:"h-6 w-6 md:h-8 md:w-8 m-auto cursor-pointer stroke-gray-500 hover:stroke-cyan-700 dark:stroke-gray-400 dark:hover:stroke-gray-300",fill:"none",viewBox:"0 0 24 24",stroke:"none","stroke-width":"1.5"},Ge={key:0,"stroke-linecap":"round","stroke-linejoin":"round",d:"M9 9V4.5M9 9H4.5M9 9L3.75 3.75M9 15v4.5M9 15H4.5M9 15l-5.25 5.25M15 9h4.5M15 9V4.5M15 9l5.25-5.25M15 15h4.5M15 15v4.5m0-4.5l5.25 5.25"},Ye={key:1,"stroke-linecap":"round","stroke-linejoin":"round",d:"M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15"},Ke=["aria-label"],Je={key:0,"stroke-linecap":"round","stroke-linejoin":"round",d:"M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z"},Xe={key:1,"stroke-linecap":"round","stroke-linejoin":"round",d:"M3.75 12h16.5m-16.5 3.75h16.5M3.75 19.5h16.5M5.625 4.5h12.75a1.875 1.875 0 010 3.75H5.625a1.875 1.875 0 010-3.75z"},Qe={name:"VFToolbar"},Ze=Object.assign(Qe,{setup(d){const t=e.inject("ServiceContainer"),{setStore:o}=t.storage,{t:a}=t.i18n,r=e.ref([]),l=e.ref("");t.emitter.on("vf-search-query",({newQuery:n})=>{l.value=n});const c=()=>{t.fullScreen=!t.fullScreen,o("full-screen",t.fullScreen),t.emitter.emit("vf-fullscreen-toggle")};t.emitter.on("vf-nodes-selected",n=>{r.value=n});const s=()=>{t.view=t.view==="list"?"grid":"list",o("viewport",t.view)};return(n,i)=>(e.openBlock(),e.createElementBlock("div",fe,[l.value.length?(e.openBlock(),e.createElementBlock("div",ze,[e.createElementVNode("div",Ae,[e.createTextVNode(e.toDisplayString(e.unref(a)("Search results for"))+" ",1),e.createElementVNode("span",Oe,e.toDisplayString(l.value),1)]),e.unref(t).loading?(e.openBlock(),e.createElementBlock("svg",Ue,qe)):e.createCommentVNode("",!0)])):(e.openBlock(),e.createElementBlock("div",ve,[e.unref(t).features.includes(e.unref($).NEW_FOLDER)?(e.openBlock(),e.createElementBlock("div",{key:0,class:"mx-1.5","aria-label":e.unref(a)("New Folder"),"data-microtip-position":"bottom-right",role:"tooltip",onClick:i[0]||(i[0]=p=>e.unref(t).emitter.emit("vf-modal-show",{type:"new-folder",items:r.value}))},ke,8,he)):e.createCommentVNode("",!0),e.unref(t).features.includes(e.unref($).NEW_FILE)?(e.openBlock(),e.createElementBlock("div",{key:1,class:"mx-1.5","aria-label":e.unref(a)("New File"),"data-microtip-position":"bottom",role:"tooltip",onClick:i[1]||(i[1]=p=>e.unref(t).emitter.emit("vf-modal-show",{type:"new-file",items:r.value}))},xe,8,ye)):e.createCommentVNode("",!0),e.unref(t).features.includes(e.unref($).RENAME)?(e.openBlock(),e.createElementBlock("div",{key:2,class:"mx-1.5","aria-label":e.unref(a)("Rename"),"data-microtip-position":"bottom",role:"tooltip",onClick:i[2]||(i[2]=p=>r.value.length!=1||e.unref(t).emitter.emit("vf-modal-show",{type:"rename",items:r.value}))},[(e.openBlock(),e.createElementBlock("svg",{xmlns:"http://www.w3.org/2000/svg",class:e.normalizeClass([r.value.length==1?"cursor-pointer stroke-gray-500 hover:stroke-cyan-700 dark:stroke-gray-400 dark:hover:stroke-gray-300":"stroke-gray-200  dark:stroke-gray-700","h-6 w-6 md:h-8 md:w-8 m-auto"]),fill:"none",viewBox:"0 0 24 24",stroke:"none","stroke-width":"1.5"},Ee,2))],8,we)):e.createCommentVNode("",!0),e.unref(t).features.includes(e.unref($).DELETE)?(e.openBlock(),e.createElementBlock("div",{key:3,class:"mx-1.5","aria-label":e.unref(a)("Delete"),"data-microtip-position":"bottom",role:"tooltip",onClick:i[3]||(i[3]=p=>!r.value.length||e.unref(t).emitter.emit("vf-modal-show",{type:"delete",items:r.value}))},[(e.openBlock(),e.createElementBlock("svg",{xmlns:"http://www.w3.org/2000/svg",class:e.normalizeClass([r.value.length?"cursor-pointer stroke-gray-500 hover:stroke-cyan-700 dark:stroke-gray-400 dark:hover:stroke-gray-300":"stroke-gray-200  dark:stroke-gray-700","h-6 w-6 md:h-8 md:w-8 m-auto"]),fill:"none",viewBox:"0 0 24 24",stroke:"none","stroke-width":"1.5"},Be,2))],8,Ve)):e.createCommentVNode("",!0),e.unref(t).features.includes(e.unref($).UPLOAD)?(e.openBlock(),e.createElementBlock("div",{key:4,class:"mx-1.5","aria-label":e.unref(a)("Upload"),"data-microtip-position":"bottom",role:"tooltip",onClick:i[4]||(i[4]=p=>e.unref(t).emitter.emit("vf-modal-show",{type:"upload",items:r.value}))},Se,8,$e)):e.createCommentVNode("",!0),e.unref(t).features.includes(e.unref($).UNARCHIVE)&&r.value.length==1&&r.value[0].mime_type=="application/zip"?(e.openBlock(),e.createElementBlock("div",{key:5,class:"mx-1.5","aria-label":e.unref(a)("Unarchive"),"data-microtip-position":"bottom",role:"tooltip",onClick:i[5]||(i[5]=p=>!r.value.length||e.unref(t).emitter.emit("vf-modal-show",{type:"unarchive",items:r.value}))},[(e.openBlock(),e.createElementBlock("svg",{xmlns:"http://www.w3.org/2000/svg",class:e.normalizeClass([r.value.length?"cursor-pointer stroke-gray-500 hover:stroke-cyan-700 dark:stroke-gray-400 dark:hover:stroke-gray-300":"stroke-gray-200  dark:stroke-gray-700","h-6 w-6 md:h-8 md:w-8 m-auto"]),fill:"none",viewBox:"0 0 24 24",stroke:"none","stroke-width":"1.5"},je,2))],8,De)):e.createCommentVNode("",!0),e.unref(t).features.includes(e.unref($).ARCHIVE)?(e.openBlock(),e.createElementBlock("div",{key:6,class:"mx-1.5","aria-label":e.unref(a)("Archive"),"data-microtip-position":"bottom",role:"tooltip",onClick:i[6]||(i[6]=p=>!r.value.length||e.unref(t).emitter.emit("vf-modal-show",{type:"archive",items:r.value}))},[(e.openBlock(),e.createElementBlock("svg",{xmlns:"http://www.w3.org/2000/svg",class:e.normalizeClass([r.value.length?"cursor-pointer stroke-gray-500 hover:stroke-cyan-700 dark:stroke-gray-400 dark:hover:stroke-gray-300":"stroke-gray-200  dark:stroke-gray-700","h-6 w-6 md:h-8 md:w-8 m-auto"]),fill:"none",viewBox:"0 0 24 24",stroke:"none","stroke-width":"1.5"},Fe,2))],8,Te)):e.createCommentVNode("",!0)])),e.createElementVNode("div",Ie,[e.unref(t).features.includes(e.unref($).FULL_SCREEN)?(e.openBlock(),e.createElementBlock("div",{key:0,class:"mx-1.5","aria-label":e.unref(a)("Toggle Full Screen"),"data-microtip-position":"bottom-left",role:"tooltip",onClick:c},[(e.openBlock(),e.createElementBlock("svg",We,[e.unref(t).fullScreen?(e.openBlock(),e.createElementBlock("path",Ge)):(e.openBlock(),e.createElementBlock("path",Ye))]))],8,Pe)):e.createCommentVNode("",!0),e.createElementVNode("div",{class:"mx-1.5","aria-label":e.unref(a)("Change View"),"data-microtip-position":"bottom-left",role:"tooltip",onClick:i[7]||(i[7]=p=>l.value.length||s())},[(e.openBlock(),e.createElementBlock("svg",{xmlns:"http://www.w3.org/2000/svg",class:e.normalizeClass([l.value.length?"stroke-gray-200  dark:stroke-gray-700":"cursor-pointer stroke-gray-500 hover:stroke-cyan-700 dark:stroke-gray-400 dark:hover:stroke-gray-300","h-6 w-6 md:h-8 md:w-8 m-auto"]),fill:"none",viewBox:"0 0 24 24",stroke:"none","stroke-width":"1.5"},[e.unref(t).view==="grid"?(e.openBlock(),e.createElementBlock("path",Je)):e.createCommentVNode("",!0),e.unref(t).view==="list"?(e.openBlock(),e.createElementBlock("path",Xe)):e.createCommentVNode("",!0)],2))],8,Ke)])]))}}),et=(d,t=0,o=!1)=>{let a;return(...r)=>{o&&!a&&d(...r),clearTimeout(a),a=setTimeout(()=>{d(...r)},t)}},tt=(d,t,o)=>{const a=e.ref(d);return e.customRef((r,l)=>({get(){return r(),a.value},set:et(c=>{a.value=c,l()},t,o)}))},ot={class:"flex p-1.5 bg-neutral-100 dark:bg-gray-800 border-t border-b border-neutral-300 dark:border-gray-700/50 items-center select-none text-sm"},rt=["aria-label"],at=e.createElementVNode("path",{"fill-rule":"evenodd",d:"M5.293 9.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 7.414V15a1 1 0 11-2 0V7.414L6.707 9.707a1 1 0 01-1.414 0z","clip-rule":"evenodd"},null,-1),nt=[at],lt=["aria-label"],st=e.createElementVNode("path",{d:"M463.5 224H472c13.3 0 24-10.7 24-24V72c0-9.7-5.8-18.5-14.8-22.2s-19.3-1.7-26.2 5.2L413.4 96.6c-87.6-86.5-228.7-86.2-315.8 1c-87.5 87.5-87.5 229.3 0 316.8s229.3 87.5 316.8 0c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0c-62.5 62.5-163.8 62.5-226.3 0s-62.5-163.8 0-226.3c62.2-62.2 162.7-62.5 225.3-1L327 183c-6.9 6.9-8.9 17.2-5.2 26.2s12.5 14.8 22.2 14.8H463.5z"},null,-1),it=[st],ct=["aria-label"],dt=e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M6 18L18 6M6 6l12 12"},null,-1),ut=[dt],mt=e.createElementVNode("path",{d:"M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"},null,-1),pt=[mt],ft={class:"flex leading-6"},vt=e.createElementVNode("span",{class:"text-neutral-300 dark:text-gray-600 mx-0.5"},"/",-1),ht=["onDragover","onDragleave","onDrop","title","onClick"],gt={key:0,class:"animate-spin p-1 h-6 w-6 text-white ml-auto",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24"},kt=e.createElementVNode("circle",{class:"opacity-25 stroke-blue-900 dark:stroke-blue-100",cx:"12",cy:"12",r:"10",stroke:"currentColor","stroke-width":"4"},null,-1),yt=e.createElementVNode("path",{class:"opacity-75",fill:"currentColor",d:"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"},null,-1),_t=[kt,yt],xt={key:3,class:"relative flex bg-white dark:bg-gray-700 justify-between items-center rounded p-1 ml-2 w-full"},wt=e.createElementVNode("div",null,[e.createElementVNode("svg",{class:"h-6 w-6 p-1 m-auto stroke-gray-400 fill-gray-100 dark:stroke-gray-400 dark:fill-gray-400/20",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor"},[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"})])],-1),bt=["placeholder"],Et=e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M6 18L18 6M6 6l12 12"},null,-1),Vt=[Et],Nt={name:"VFBreadcrumb"},Bt=Object.assign(Nt,{setup(d){const t=e.ref(null),o=e.ref([]),a=e.ref(!1),r=e.ref(null),l=e.inject("ServiceContainer"),{t:c}=l.i18n;l.emitter.on("vf-explorer-update",()=>{let _=[],m=[];t.value=l.data.dirname??l.adapter+"://",t.value.length==0&&(o.value=[]),t.value.replace(l.adapter+"://","").split("/").forEach(function(u){_.push(u),_.join("/")!=""&&m.push({basename:u,name:u,path:l.adapter+"://"+_.join("/"),type:"dir"})}),m.length>4&&(m=m.slice(-5),m[0].name=".."),o.value=m});const s=()=>{a.value=!1,i.value=""};l.emitter.on("vf-search-exit",()=>{s()});const n=()=>{l.features.includes($.SEARCH)&&(a.value=!0,e.nextTick(()=>r.value.focus()))},i=tt("",400);e.watch(i,_=>{l.emitter.emit("vf-toast-clear"),l.emitter.emit("vf-search-query",{newQuery:_})});const p=()=>o.value.length&&!a.value,f=(_,m=null)=>{_.preventDefault(),g(_),m??(m=o.value.length-2);let u=JSON.parse(_.dataTransfer.getData("items"));if(u.find(B=>B.storage!==l.adapter)){alert("Moving items between different storages is not supported yet.");return}l.emitter.emit("vf-modal-show",{type:"move",items:{from:u,to:o.value[m]??{path:l.adapter+"://"}}})},h=_=>{_.preventDefault(),p()?(_.dataTransfer.dropEffect="copy",_.currentTarget.classList.add("bg-blue-200","dark:bg-slate-500")):(_.dataTransfer.dropEffect="none",_.dataTransfer.effectAllowed="none")},g=_=>{_.preventDefault(),_.currentTarget.classList.remove("bg-blue-200","dark:bg-slate-500"),p()&&_.currentTarget.classList.remove("bg-blue-200","dark:bg-slate-500")},w=()=>{i.value==""&&s()};return(_,m)=>(e.openBlock(),e.createElementBlock("div",ot,[e.createElementVNode("span",{"aria-label":e.unref(c)("Go up a directory"),"data-microtip-position":"bottom-right",role:"tooltip"},[(e.openBlock(),e.createElementBlock("svg",{onDragover:m[0]||(m[0]=u=>h(u)),onDragleave:m[1]||(m[1]=u=>g(u)),onDrop:m[2]||(m[2]=u=>f(u)),onClick:m[3]||(m[3]=u=>{var B;return!p()||e.unref(l).emitter.emit("vf-fetch",{params:{q:"index",adapter:e.unref(l).data.adapter,path:((B=o.value[o.value.length-2])==null?void 0:B.path)??e.unref(l).adapter+"://"}})}),class:e.normalizeClass(["h-6 w-6 p-0.5 rounded",p()?"text-slate-700 hover:bg-neutral-300 dark:text-neutral-200 dark:hover:bg-gray-700 cursor-pointer":"text-gray-400 dark:text-neutral-500"]),xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor"},nt,34))],8,rt),e.unref(l).loading?(e.openBlock(),e.createElementBlock("span",{key:1,"aria-label":e.unref(c)("Cancel"),"data-microtip-position":"bottom-right",role:"tooltip"},[(e.openBlock(),e.createElementBlock("svg",{onClick:m[5]||(m[5]=u=>e.unref(l).emitter.emit("vf-fetch-abort")),xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24","stroke-width":"1.5",stroke:"currentColor",class:"h-6 w-6 p-1 rounded text-slate-700 hover:bg-neutral-300 dark:text-neutral-200 dark:hover:bg-gray-700 cursor-pointer"},ut))],8,ct)):(e.openBlock(),e.createElementBlock("span",{key:0,"aria-label":e.unref(c)("Refresh"),"data-microtip-position":"bottom-right",role:"tooltip"},[(e.openBlock(),e.createElementBlock("svg",{onClick:m[4]||(m[4]=u=>{e.unref(l).emitter.emit("vf-fetch",{params:{q:"index",adapter:e.unref(l).data.adapter,path:e.unref(l).data.dirname}})}),class:"h-6 w-6 p-1 rounded text-slate-700 hover:bg-neutral-300 dark:text-neutral-200 dark:hover:bg-gray-700 cursor-pointer",xmlns:"http://www.w3.org/2000/svg",viewBox:"-40 -40 580 580",fill:"currentColor"},it))],8,lt)),a.value?(e.openBlock(),e.createElementBlock("div",xt,[wt,e.withDirectives(e.createElementVNode("input",{ref_key:"searchInput",ref:r,onKeydown:e.withKeys(s,["esc"]),onBlur:w,"onUpdate:modelValue":m[10]||(m[10]=u=>e.isRef(i)?i.value=u:null),placeholder:e.unref(c)("Search anything.."),class:"w-full pb-0 px-1 border-0 text-base ring-0 outline-0 text-gray-600 focus:ring-transparent focus:border-transparent dark:focus:ring-transparent dark:focus:border-transparent dark:text-gray-300 bg-transparent",type:"text"},null,40,bt),[[e.vModelText,e.unref(i)]]),(e.openBlock(),e.createElementBlock("svg",{class:"w-6 h-6 cursor-pointer",onClick:s,xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24","stroke-width":"1.5",stroke:"currentColor"},Vt))])):(e.openBlock(),e.createElementBlock("div",{key:2,class:"group flex bg-white dark:bg-gray-700 items-center rounded p-1 ml-2 w-full",onClick:e.withModifiers(n,["self"])},[(e.openBlock(),e.createElementBlock("svg",{onDragover:m[6]||(m[6]=u=>h(u)),onDragleave:m[7]||(m[7]=u=>g(u)),onDrop:m[8]||(m[8]=u=>f(u,-1)),onClick:m[9]||(m[9]=u=>e.unref(l).emitter.emit("vf-fetch",{params:{q:"index",adapter:e.unref(l).data.adapter}})),class:"h-6 w-6 p-1 rounded text-slate-700 hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-gray-800 cursor-pointer",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor"},pt,32)),e.createElementVNode("div",ft,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.value,(u,B)=>(e.openBlock(),e.createElementBlock("div",{key:B},[vt,e.createElementVNode("span",{onDragover:C=>B===o.value.length-1||h(C),onDragleave:C=>B===o.value.length-1||g(C),onDrop:C=>B===o.value.length-1||f(C,B),class:"px-1.5 py-1 text-slate-700 dark:text-slate-200 hover:bg-neutral-100 dark:hover:bg-gray-800 rounded cursor-pointer",title:u.basename,onClick:C=>e.unref(l).emitter.emit("vf-fetch",{params:{q:"index",adapter:e.unref(l).data.adapter,path:u.path}})},e.toDisplayString(u.name),41,ht)]))),128))]),e.unref(l).loading?(e.openBlock(),e.createElementBlock("svg",gt,_t)):e.createCommentVNode("",!0)]))]))}}),Y=(d,t=null)=>new Date(d*1e3).toLocaleString(t??navigator.language??"en-US"),$t={key:0,xmlns:"http://www.w3.org/2000/svg",class:"h-5 w-5",viewBox:"0 0 20 20",fill:"currentColor"},Ct=e.createElementVNode("path",{"fill-rule":"evenodd",d:"M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z","clip-rule":"evenodd"},null,-1),St=[Ct],Dt={key:1,xmlns:"http://www.w3.org/2000/svg",class:"h-5 w-5",viewBox:"0 0 20 20",fill:"currentColor"},Mt=e.createElementVNode("path",{"fill-rule":"evenodd",d:"M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z","clip-rule":"evenodd"},null,-1),jt=[Mt],Tt={name:"VFSortIcon"},O=Object.assign(Tt,{props:{direction:String},setup(d){return(t,o)=>(e.openBlock(),e.createElementBlock("div",null,[d.direction==="down"?(e.openBlock(),e.createElementBlock("svg",$t,St)):e.createCommentVNode("",!0),d.direction==="up"?(e.openBlock(),e.createElementBlock("svg",Dt,jt)):e.createCommentVNode("",!0)]))}}),Lt=["onClick"],Ft={name:"VFToast.vue"},zt=Object.assign(Ft,{setup(d){const t=e.inject("ServiceContainer"),{getStore:o}=t.storage,a=e.ref(o("full-screen",!1)),r=e.ref([]),l=n=>n==="error"?"text-red-400 border-red-400 dark:text-red-300 dark:border-red-300":"text-lime-600 border-lime-600 dark:text-lime-300 dark:border-lime-1300",c=n=>{r.value.splice(n,1)},s=n=>{let i=r.value.findIndex(p=>p.id===n);i!==-1&&c(i)};return t.emitter.on("vf-toast-clear",()=>{r.value=[]}),t.emitter.on("vf-toast-push",n=>{let i=new Date().getTime().toString(36).concat(performance.now().toString(),Math.random().toString()).replace(/\./g,"");n.id=i,r.value.push(n),setTimeout(()=>{s(i)},5e3)}),(n,i)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass([a.value.value?"fixed":"absolute","bottom-0 max-w-fit flex flex-col bottom-0 left-1/2 -translate-x-1/2"])},[e.createVNode(e.TransitionGroup,{name:"vf-toast-item","leave-active-class":"transition-all duration-1000","leave-to-class":"opacity-0"},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.value,(p,f)=>(e.openBlock(),e.createElementBlock("div",{onClick:h=>c(f),key:p,class:e.normalizeClass([l(p.type),"inline-block mx-auto my-0.5 py-0.5 px-2 min-w-max bg-gray-50 dark:bg-gray-600 border text-xs sm:text-sm rounded cursor-pointer"])},e.toDisplayString(p.label),11,Lt))),128))]),_:1})],2))}});function q(d,t=14){let o=`((?=([\\w\\W]{0,${t}}))([\\w\\W]{${t+1},})([\\w\\W]{8,}))`;return d.replace(new RegExp(o),"$2..$4")}const At={class:"relative flex-auto flex flex-col overflow-hidden"},Ot={key:0,class:"grid grid-cols-12 border-b border-neutral-300 border-gray-200 dark:border-gray-700 text-xs select-none"},Ut={class:"absolute"},Ht=e.createElementVNode("svg",{xmlns:"http://www.w3.org/2000/svg",class:"absolute h-6 w-6 md:h-12 md:w-12 m-auto stroke-neutral-500 fill-white dark:fill-gray-700 dark:stroke-gray-600 z-10",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor","stroke-width":"1"},[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"})],-1),Rt={class:"text-neutral-700 dark:text-neutral-300 p-1 absolute text-center top-4 right-[-2rem] md:top-5 md:right-[-2.4rem] z-20 text-xs"},qt=["onDblclick","onContextmenu","data-type","data-item","data-index"],It={class:"grid grid-cols-12 items-center"},Pt={class:"flex col-span-7 items-center"},Wt={key:0,xmlns:"http://www.w3.org/2000/svg",class:"h-5 w-5 text-neutral-500 fill-sky-500 stroke-sky-500 dark:fill-slate-500 dark:stroke-slate-500",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor","stroke-width":"1"},Gt=e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"},null,-1),Yt=[Gt],Kt={key:1,xmlns:"http://www.w3.org/2000/svg",class:"h-5 w-5 text-neutral-500",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor","stroke-width":"1"},Jt=e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"},null,-1),Xt=[Jt],Qt={class:"overflow-ellipsis overflow-hidden whitespace-nowrap"},Zt={class:"col-span-5 overflow-ellipsis overflow-hidden whitespace-nowrap"},eo=["onDblclick","onContextmenu","onDragstart","onDragover","onDrop","data-type","data-item","data-index"],to={class:"grid grid-cols-12 items-center"},oo={class:"flex col-span-7 items-center"},ro={key:0,xmlns:"http://www.w3.org/2000/svg",class:"h-5 w-5 text-neutral-500 fill-sky-500 stroke-sky-500 dark:fill-slate-500 dark:stroke-slate-500",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor","stroke-width":"1"},ao=e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"},null,-1),no=[ao],lo={key:1,xmlns:"http://www.w3.org/2000/svg",class:"h-5 w-5 text-neutral-500",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor","stroke-width":"1"},so=e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"},null,-1),io=[so],co={class:"overflow-ellipsis overflow-hidden whitespace-nowrap"},uo={class:"col-span-2 text-center"},mo={class:"col-span-3 overflow-ellipsis overflow-hidden whitespace-nowrap"},po=["onDblclick","onContextmenu","onDragstart","onDragover","onDrop","data-type","data-item","data-index"],fo={class:"relative"},vo={key:0,xmlns:"http://www.w3.org/2000/svg",class:"h-10 w-10 md:h-12 md:w-12 m-auto fill-sky-500 stroke-sky-500 dark:fill-slate-500 dark:stroke-slate-500",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor","stroke-width":"1"},ho=e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"},null,-1),go=[ho],ko=["data-src","alt"],yo={key:2,xmlns:"http://www.w3.org/2000/svg",class:"h-10 w-10 md:h-12 md:w-12 m-auto text-neutral-500",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor","stroke-width":"1"},_o=e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"},null,-1),xo=[_o],wo={key:3,class:"absolute hidden md:block top-1/2 w-full text-center text-neutral-500"},bo={class:"break-all"},Eo={name:"VFExplorer"},Vo=Object.assign(Eo,{setup(d){const t=e.inject("ServiceContainer"),{t:o}=t.i18n;t.storage;const a=k=>k==null?void 0:k.substring(0,3),r=e.ref(null),l=e.ref(null),c=e.ref(0),s=e.ref(null),n=Math.floor(Math.random()*2**32),i=e.ref("");let p;t.emitter.on("vf-fullscreen-toggle",()=>{r.value.style.height=null}),t.emitter.on("vf-search-query",({newQuery:k})=>{i.value=k,k?t.emitter.emit("vf-fetch",{params:{q:"search",adapter:t.data.adapter,path:t.data.dirname,filter:k},onSuccess:b=>{b.files.length||t.emitter.emit("vf-toast-push",{label:o("No search result found.")})}}):t.emitter.emit("vf-fetch",{params:{q:"index",adapter:t.data.adapter,path:t.data.dirname}})});let f=null;const h=()=>{f&&clearTimeout(f)},g=e.ref(!0),w=k=>{k.touches.length>1&&(g.value?(s.value.stop(),t.emitter.emit("vf-toast-push",{label:o("Drag&Drop: off")})):(s.value.start(),t.emitter.emit("vf-toast-push",{label:o("Drag&Drop: on")}),t.emitter.emit("vf-explorer-update")),g.value=!g.value)},_=k=>{f=setTimeout(()=>{const b=new MouseEvent("contextmenu",{bubbles:!0,cancelable:!1,view:window,button:2,buttons:0,clientX:k.target.getBoundingClientRect().x,clientY:k.target.getBoundingClientRect().y});k.target.dispatchEvent(b)},500)},m=k=>{k.type==="dir"?(t.emitter.emit("vf-search-exit"),t.emitter.emit("vf-fetch",{params:{q:"index",adapter:t.data.adapter,path:k.path}})):t.emitter.emit("vf-modal-show",{type:"preview",adapter:t.data.adapter,item:k})},u=e.reactive({active:!1,column:"",order:""}),B=(k=!0)=>{let b=[...t.data.files],y=u.column,E=u.order=="asc"?1:-1;if(!k)return b;const x=(v,V)=>typeof v=="string"&&typeof V=="string"?v.toLowerCase().localeCompare(V.toLowerCase()):v<V?-1:v>V?1:0;return u.active&&(b=b.slice().sort((v,V)=>x(v[y],V[y])*E)),b},C=k=>{u.active&&u.column==k?(u.active=u.order=="asc",u.column=k,u.order="desc"):(u.active=!0,u.column=k,u.order="asc")},M=()=>s.value.getSelection().map(k=>JSON.parse(k.dataset.item)),L=(k,b)=>{if(k.altKey||k.ctrlKey||k.metaKey)return k.preventDefault(),!1;k.dataTransfer.setDragImage(l.value,0,15),k.dataTransfer.effectAllowed="all",k.dataTransfer.dropEffect="copy",k.dataTransfer.setData("items",JSON.stringify(M()))},F=(k,b)=>{k.preventDefault();let y=JSON.parse(k.dataTransfer.getData("items"));if(y.find(E=>E.storage!==t.adapter)){alert("Moving items between different storages is not supported yet.");return}t.emitter.emit("vf-modal-show",{type:"move",items:{from:y,to:b}})},z=(k,b)=>{k.preventDefault(),!b||b.type!=="dir"||s.value.getSelection().find(y=>y==k.currentTarget)?(k.dataTransfer.dropEffect="none",k.dataTransfer.effectAllowed="none"):k.dataTransfer.dropEffect="copy"},A=()=>{s.value=new Z({area:r.value,keyboardDrag:!1,selectedClass:"vf-explorer-selected",selectorClass:"vf-explorer-selector"}),t.emitter.on("vf-explorer-update",()=>e.nextTick(()=>{s.value.clearSelection(),s.value.setSettings({selectables:document.getElementsByClassName("vf-item-"+n)})})),s.value.subscribe("predragstart",({event:k,isDragging:b})=>{if(b)c.value=s.value.getSelection().length,s.value.break();else{const y=k.target.offsetWidth-k.offsetX,E=k.target.offsetHeight-k.offsetY;y<15&&E<15&&(s.value.clearSelection(),s.value.break())}}),s.value.subscribe("predragmove",({isDragging:k})=>{k&&s.value.break()}),s.value.subscribe("callback",({items:k,event:b,isDragging:y})=>{t.emitter.emit("vf-nodes-selected",M()),c.value=s.value.getSelection().length})};return e.onMounted(()=>{p=new ee(r.value),A()}),e.onUpdated(()=>{s.value.Area.reset(),s.value.SelectorArea.updatePos(),p.update()}),e.onMounted(()=>{e.watch(()=>t.view,()=>t.emitter.emit("vf-explorer-update"))}),e.onBeforeUnmount(()=>{p.destroy()}),(k,b)=>(e.openBlock(),e.createElementBlock("div",At,[e.unref(t).view=="list"||i.value.length?(e.openBlock(),e.createElementBlock("div",Ot,[e.createElementVNode("div",{onClick:b[0]||(b[0]=y=>C("basename")),class:"col-span-7 py-1 leading-6 hover:bg-neutral-100 bg-neutral-50 dark:bg-gray-800 dark:hover:bg-gray-700/10 flex items-center pl-1"},[e.createTextVNode(e.toDisplayString(e.unref(o)("Name"))+" ",1),e.withDirectives(e.createVNode(O,{direction:u.order=="asc"?"down":"up"},null,8,["direction"]),[[e.vShow,u.active&&u.column=="basename"]])]),i.value.length?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",{key:0,onClick:b[1]||(b[1]=y=>C("file_size")),class:"col-span-2 py-1 leading-6 hover:bg-neutral-100 bg-neutral-50 dark:bg-gray-800 dark:hover:bg-gray-700/10 flex items-center justify-center border-l border-r dark:border-gray-700"},[e.createTextVNode(e.toDisplayString(e.unref(o)("Size"))+" ",1),e.withDirectives(e.createVNode(O,{direction:u.order=="asc"?"down":"up"},null,8,["direction"]),[[e.vShow,u.active&&u.column=="file_size"]])])),i.value.length?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",{key:1,onClick:b[2]||(b[2]=y=>C("last_modified")),class:"col-span-3 py-1 leading-6 hover:bg-neutral-100 bg-neutral-50 dark:bg-gray-800 dark:hover:bg-gray-700/10 flex items-center justify-center"},[e.createTextVNode(e.toDisplayString(e.unref(o)("Date"))+" ",1),e.withDirectives(e.createVNode(O,{direction:u.order=="asc"?"down":"up"},null,8,["direction"]),[[e.vShow,u.active&&u.column=="last_modified"]])])),i.value.length?(e.openBlock(),e.createElementBlock("div",{key:2,onClick:b[3]||(b[3]=y=>C("path")),class:"col-span-5 py-1 leading-6 hover:bg-neutral-100 bg-neutral-50 dark:bg-gray-800 dark:hover:bg-gray-700/10 flex items-center justify-center border-l dark:border-gray-700"},[e.createTextVNode(e.toDisplayString(e.unref(o)("Filepath"))+" ",1),e.withDirectives(e.createVNode(O,{direction:u.order=="asc"?"down":"up"},null,8,["direction"]),[[e.vShow,u.active&&u.column=="path"]])])):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0),e.createElementVNode("div",Ut,[e.createElementVNode("div",{ref_key:"dragImage",ref:l,class:"absolute -z-50 -top-96"},[Ht,e.createElementVNode("div",Rt,e.toDisplayString(c.value),1)],512)]),e.createElementVNode("div",{onTouchstart:w,onContextmenu:b[10]||(b[10]=e.withModifiers(y=>e.unref(t).emitter.emit("vf-contextmenu-show",{event:y,area:r.value,items:M()}),["self","prevent"])),class:e.normalizeClass([e.unref(t).fullScreen?"":"resize-y","h-full w-full text-xs vf-selector-area vf-scrollbar min-h-[150px] overflow-auto p-1 z-0"]),ref_key:"selectorArea",ref:r},[i.value.length?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:0},e.renderList(B(),(y,E)=>(e.openBlock(),e.createElementBlock("div",{onDblclick:x=>m(y),onTouchstart:b[4]||(b[4]=x=>_(x)),onTouchend:b[5]||(b[5]=x=>h()),onContextmenu:e.withModifiers(x=>e.unref(t).emitter.emit("vf-contextmenu-show",{event:x,area:r.value,items:M(),target:y}),["prevent"]),class:e.normalizeClass(["vf-item-"+e.unref(n),"grid grid-cols-1 border hover:bg-neutral-50 dark:hover:bg-gray-700 border-transparent my-0.5 w-full select-none"]),"data-type":y.type,"data-item":JSON.stringify(y),"data-index":E},[e.createElementVNode("div",It,[e.createElementVNode("div",Pt,[y.type==="dir"?(e.openBlock(),e.createElementBlock("svg",Wt,Yt)):(e.openBlock(),e.createElementBlock("svg",Kt,Xt)),e.createElementVNode("span",Qt,e.toDisplayString(y.basename),1)]),e.createElementVNode("div",Zt,e.toDisplayString(y.path),1)])],42,qt))),256)):e.createCommentVNode("",!0),e.unref(t).view==="list"&&!i.value.length?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:1},e.renderList(B(),(y,E)=>(e.openBlock(),e.createElementBlock("div",{draggable:"true",onDblclick:x=>m(y),onTouchstart:b[6]||(b[6]=x=>_(x)),onTouchend:b[7]||(b[7]=x=>h()),onContextmenu:e.withModifiers(x=>e.unref(t).emitter.emit("vf-contextmenu-show",{event:x,area:r.value,items:M(),target:y}),["prevent"]),onDragstart:x=>L(x),onDragover:x=>z(x,y),onDrop:x=>F(x,y),class:e.normalizeClass(["vf-item-"+e.unref(n),"grid grid-cols-1 border hover:bg-neutral-50 dark:hover:bg-gray-700 border-transparent my-0.5 w-full select-none"]),"data-type":y.type,"data-item":JSON.stringify(y),"data-index":E},[e.createElementVNode("div",to,[e.createElementVNode("div",oo,[y.type==="dir"?(e.openBlock(),e.createElementBlock("svg",ro,no)):(e.openBlock(),e.createElementBlock("svg",lo,io)),e.createElementVNode("span",co,e.toDisplayString(y.basename),1)]),e.createElementVNode("div",uo,e.toDisplayString(y.file_size?e.unref(t).filesize(y.file_size):""),1),e.createElementVNode("div",mo,e.toDisplayString(e.unref(Y)(y.last_modified)),1)])],42,eo))),256)):e.createCommentVNode("",!0),e.unref(t).view==="grid"&&!i.value.length?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:2},e.renderList(B(!1),(y,E)=>(e.openBlock(),e.createElementBlock("div",{draggable:"true",onDblclick:x=>m(y),onTouchstart:b[8]||(b[8]=x=>_(x)),onTouchend:b[9]||(b[9]=x=>h()),onContextmenu:e.withModifiers(x=>e.unref(t).emitter.emit("vf-contextmenu-show",{event:x,area:r.value,items:M(),target:y}),["prevent"]),onDragstart:x=>L(x),onDragover:x=>z(x,y),onDrop:x=>F(x,y),class:e.normalizeClass(["vf-item-"+e.unref(n),"border border-transparent hover:bg-neutral-50 m-1 dark:hover:bg-gray-700 inline-flex w-[5.5rem] h-20 md:w-24 text-center justify-center select-none"]),"data-type":y.type,"data-item":JSON.stringify(y),"data-index":E},[e.createElementVNode("div",null,[e.createElementVNode("div",fo,[y.type==="dir"?(e.openBlock(),e.createElementBlock("svg",vo,go)):(y.mime_type??"").startsWith("image")?(e.openBlock(),e.createElementBlock("img",{class:"lazy h-10 md:h-12 m-auto","data-src":e.unref(t).requester.getPreviewUrl(e.unref(t).adapter,y),alt:y.basename,key:y.path},null,8,ko)):(e.openBlock(),e.createElementBlock("svg",yo,xo)),!(y.mime_type??"").startsWith("image")&&y.type!="dir"?(e.openBlock(),e.createElementBlock("div",wo,e.toDisplayString(a(y.extension)),1)):e.createCommentVNode("",!0)]),e.createElementVNode("span",bo,e.toDisplayString(e.unref(q)(y.basename)),1)])],42,po))),256)):e.createCommentVNode("",!0)],34),e.createVNode(zt)]))}}),No=["href","download"],Bo=["onClick"],$o={name:"VFContextMenu"},Co=Object.assign($o,{setup(d){const t=e.inject("ServiceContainer"),{t:o}=t.i18n,a=e.ref(null),r=e.ref([]),l=e.ref(""),c=e.reactive({active:!1,items:[],positions:{left:0,top:0}}),s=e.computed(()=>c.items.filter(f=>f.key==null||t.features.includes(f.key)));t.emitter.on("vf-context-selected",f=>{r.value=f});const n={newfolder:{key:$.NEW_FOLDER,title:()=>o("New Folder"),action:()=>{t.emitter.emit("vf-modal-show",{type:"new-folder"})}},delete:{key:$.DELETE,title:()=>o("Delete"),action:()=>{t.emitter.emit("vf-modal-show",{type:"delete",items:r})}},refresh:{title:()=>o("Refresh"),action:()=>{t.emitter.emit("vf-fetch",{params:{q:"index",adapter:t.data.adapter,path:t.data.dirname}})}},preview:{key:$.PREVIEW,title:()=>o("Preview"),action:()=>{t.emitter.emit("vf-modal-show",{type:"preview",adapter:t.data.adapter,item:r.value[0]})}},open:{title:()=>o("Open"),action:()=>{t.emitter.emit("vf-search-exit"),t.emitter.emit("vf-fetch",{params:{q:"index",adapter:t.data.adapter,path:r.value[0].path}})}},openDir:{title:()=>o("Open containing folder"),action:()=>{t.emitter.emit("vf-search-exit"),t.emitter.emit("vf-fetch",{params:{q:"index",adapter:t.data.adapter,path:r.value[0].dir}})}},download:{key:$.DOWNLOAD,link:e.computed(()=>t.requester.getDownloadUrl(t.data.adapter,r.value[0])),title:()=>o("Download"),action:()=>{}},archive:{key:$.ARCHIVE,title:()=>o("Archive"),action:()=>{t.emitter.emit("vf-modal-show",{type:"archive",items:r})}},unarchive:{key:$.UNARCHIVE,title:()=>o("Unarchive"),action:()=>{t.emitter.emit("vf-modal-show",{type:"unarchive",items:r})}},rename:{key:$.RENAME,title:()=>o("Rename"),action:()=>{t.emitter.emit("vf-modal-show",{type:"rename",items:r})}}},i=f=>{t.emitter.emit("vf-contextmenu-hide"),f.action()};t.emitter.on("vf-search-query",({newQuery:f})=>{l.value=f}),t.emitter.on("vf-contextmenu-show",({event:f,area:h,items:g,target:w=null})=>{if(c.items=[],l.value)if(w)c.items.push(n.openDir),t.emitter.emit("vf-context-selected",[w]);else return;else!w&&!l.value?(c.items.push(n.refresh),c.items.push(n.newfolder),t.emitter.emit("vf-context-selected",[])):g.length>1&&g.some(_=>_.path===w.path)?(c.items.push(n.refresh),c.items.push(n.archive),c.items.push(n.delete),t.emitter.emit("vf-context-selected",g)):(w.type=="dir"?c.items.push(n.open):(c.items.push(n.preview),c.items.push(n.download)),c.items.push(n.rename),w.mime_type=="application/zip"?c.items.push(n.unarchive):c.items.push(n.archive),c.items.push(n.delete),t.emitter.emit("vf-context-selected",[w]));p(f,h)}),t.emitter.on("vf-contextmenu-hide",()=>{c.active=!1});const p=(f,h)=>{c.active=!0,e.nextTick(()=>{const g=t.root.getBoundingClientRect(),w=h.getBoundingClientRect();let _=f.pageX-g.left,m=f.pageY-g.top,u=a.value.offsetHeight,B=a.value.offsetWidth;_=w.right-f.pageX+window.scrollX<B?_-B:_,m=w.bottom-f.pageY+window.scrollY<u?m-u:m,c.positions={left:_+"px",top:m+"px"}})};return(f,h)=>c.active?(e.openBlock(),e.createElementBlock("ul",{key:0,class:"z-30 absolute text-xs bg-neutral-50 dark:bg-gray-800 text-gray-700 dark:text-gray-200 border border-neutral-300 dark:border-gray-600 shadow rounded select-none",ref_key:"contextmenu",ref:a,style:e.normalizeStyle(c.positions)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(s.value,g=>(e.openBlock(),e.createElementBlock("li",{class:"cursor-pointer hover:bg-neutral-200 dark:hover:bg-gray-700",key:g.title},[g.link?(e.openBlock(),e.createElementBlock("a",{key:0,class:"block pl-2 pr-3 py-1",target:"_blank",href:g.link,download:g.link,onClick:h[0]||(h[0]=w=>e.unref(t).emitter.emit("vf-contextmenu-hide"))},[e.createElementVNode("span",null,e.toDisplayString(g.title()),1)],8,No)):(e.openBlock(),e.createElementBlock("div",{key:1,class:"pl-2 pr-3 py-1",onClick:w=>i(g)},[e.createElementVNode("span",null,e.toDisplayString(g.title()),1)],8,Bo))]))),128))],4)):e.createCommentVNode("",!0)}}),So={class:"p-1 text-xs border-t border-neutral-300 dark:border-gray-700/50 flex justify-between select-none"},Do={class:"flex leading-5 items-center"},Mo=["aria-label"],jo=e.createElementVNode("svg",{xmlns:"http://www.w3.org/2000/svg",class:"h-5 w-5",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor","stroke-width":"1"},[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4"})],-1),To=[jo],Lo=["value"],Fo={class:"ml-3"},zo={key:0},Ao={class:"ml-1"},Oo={class:"flex leading-5 items-center justify-end"},Uo=["disabled"],Ho=["aria-label"],Ro=e.createElementVNode("svg",{xmlns:"http://www.w3.org/2000/svg",class:"h-5 w-5 stroke-slate-500 cursor-pointer",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor","stroke-width":"2"},[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"})],-1),qo=[Ro],Io={name:"VFStatusbar"},Po=Object.assign(Io,{setup(d){const t=e.inject("ServiceContainer"),{t:o}=t.i18n,{setStore:a}=t.storage,r=e.ref(0),l=()=>{t.emitter.emit("vf-search-exit"),t.emitter.emit("vf-fetch",{params:{q:"index",adapter:t.adapter}}),a("adapter",t.adapter)};t.emitter.on("vf-nodes-selected",n=>{r.value=n.length});const c=e.ref("");t.emitter.on("vf-search-query",({newQuery:n})=>{c.value=n});const s=e.computed(()=>{const n=t.selectButton.multiple?t.selectedItems.length>0:t.selectedItems.length===1;return t.selectButton.active&&n});return(n,i)=>(e.openBlock(),e.createElementBlock("div",So,[e.createElementVNode("div",Do,[e.createElementVNode("div",{class:"mx-2","aria-label":e.unref(o)("Storage"),"data-microtip-position":"top-right",role:"tooltip"},To,8,Mo),e.withDirectives(e.createElementVNode("select",{"onUpdate:modelValue":i[0]||(i[0]=p=>e.unref(t).adapter=p),onChange:l,class:"py-0.5 text-sm text-slate-500 border dark:border-gray-600 dark:text-neutral-50 dark:bg-gray-700 rounded pl-2 pr-8"},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(t).data.storages,p=>(e.openBlock(),e.createElementBlock("option",{value:p},e.toDisplayString(p),9,Lo))),256))],544),[[e.vModelSelect,e.unref(t).adapter]]),e.createElementVNode("div",Fo,[c.value.length?(e.openBlock(),e.createElementBlock("span",zo,e.toDisplayString(e.unref(t).data.files.length)+" items found. ",1)):e.createCommentVNode("",!0),e.createElementVNode("span",Ao,e.toDisplayString(r.value>0?e.unref(o)("%s item(s) selected.",r.value):""),1)])]),e.createElementVNode("div",Oo,[e.unref(t).selectButton.active?(e.openBlock(),e.createElementBlock("button",{key:0,class:e.normalizeClass(["vf-btn py-0 vf-btn-primary",{disabled:!s.value}]),disabled:!s.value,onClick:i[1]||(i[1]=p=>e.unref(t).selectButton.click(e.unref(t).selectedItems,p))},e.toDisplayString(e.unref(o)("Select")),11,Uo)):e.createCommentVNode("",!0),e.createElementVNode("span",{class:"mr-1","aria-label":e.unref(o)("About"),"data-microtip-position":"top-left",role:"tooltip",onClick:i[2]||(i[2]=p=>e.unref(t).emitter.emit("vf-modal-show",{type:"about"}))},qo,8,Ho)])]))}}),Wo={name:"VueFinder"},Go=Object.assign(Wo,{props:{id:{type:String,default:"vf"},request:{type:[String,Object],required:!0},persist:{type:Boolean,default:!1},path:{type:String,default:"."},features:{type:[Array,Boolean],default:!0},debug:{type:Boolean,default:!1},theme:{type:String,default:"system"},locale:{type:String,default:null},maxHeight:{type:String,default:"600px"},maxFileSize:{type:String,default:"10mb"},fullScreen:{type:Boolean,default:!1},selectButton:{type:Object,default(d){return{active:!1,multiple:!1,click:t=>{},...d}}}},emits:["select"],setup(d,{emit:t}){const o=t,r=pe(d,e.inject("VueFinderOptions"));e.provide("ServiceContainer",r);const{setStore:l}=r.storage,c=e.ref(null);r.root=c,r.i18n,r.emitter.on("vf-modal-close",()=>{r.modal.active=!1}),r.emitter.on("vf-modal-show",i=>{r.modal.active=!0,r.modal.type=i.type,r.modal.data=i});const s=i=>{Object.assign(r.data,i),r.emitter.emit("vf-nodes-selected",{}),r.emitter.emit("vf-explorer-update")};r.emitter.on("vf-nodes-selected",i=>{r.selectedItems=i,o("select",i)});let n;return r.emitter.on("vf-fetch-abort",()=>{n.abort(),r.loading=!1}),r.emitter.on("vf-fetch",({params:i,body:p=null,onSuccess:f=null,onError:h=null,noCloseModal:g=!1})=>{["index","search"].includes(i.q)&&(n&&n.abort(),r.loading=!0),n=new AbortController;const w=n.signal;r.requester.send({url:"",method:i.m||"get",params:i,body:p,abortSignal:w}).then(_=>{r.adapter=_.adapter,r.persist&&(r.path=_.dirname,l("path",r.path)),["index","search"].includes(i.q)&&(r.loading=!1),g||r.emitter.emit("vf-modal-close"),s(_),f&&f(_)}).catch(_=>{console.error(_),h&&h(_)})}),r.emitter.on("vf-download",i=>{const p=document.createElement("a");p.style.display="none",p.target="_blank",p.href=i,p.download=i,r.root.appendChild(p),p.click(),p.remove()}),e.onMounted(()=>{let i={};r.path.includes("://")&&(i={adapter:r.path.split("://")[0],path:r.path}),r.emitter.emit("vf-fetch",{params:{q:"index",adapter:r.adapter,...i}})}),(i,p)=>(e.openBlock(),e.createElementBlock("div",{class:"vuefinder",ref_key:"root",ref:c},[e.createElementVNode("div",{class:e.normalizeClass(e.unref(r).theme.actualValue==="dark"?"dark":"")},[e.createElementVNode("div",{class:e.normalizeClass([e.unref(r).fullScreen?"fixed w-screen inset-0 z-20":"relative rounded-md","border flex flex-col bg-white dark:bg-gray-800 text-gray-700 dark:text-neutral-400 border-neutral-300 dark:border-gray-900 min-w-min select-none"]),style:e.normalizeStyle(e.unref(r).fullScreen?"":"max-height: "+d.maxHeight),onMousedown:p[0]||(p[0]=f=>e.unref(r).emitter.emit("vf-contextmenu-hide")),onTouchstart:p[1]||(p[1]=f=>e.unref(r).emitter.emit("vf-contextmenu-hide"))},[e.createVNode(Ze),e.createVNode(Bt),e.createVNode(Vo),e.createVNode(Po)],38),e.createVNode(e.Transition,{name:"fade"},{default:e.withCtx(()=>[e.unref(r).modal.active?(e.openBlock(),e.createBlock(e.resolveDynamicComponent("v-f-modal-"+e.unref(r).modal.type),{key:0})):e.createCommentVNode("",!0)]),_:1}),e.createVNode(Co)],2)],512))}}),Yo=e.createElementVNode("div",{class:"fixed inset-0 bg-gray-500 dark:bg-gray-600 dark:bg-opacity-75 bg-opacity-75 transition-opacity"},null,-1),Ko={class:"fixed z-10 inset-0 overflow-hidden"},Jo={class:"relative bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:max-w-4xl md:max-w-2xl lg:max-w-3xl xl:max-w-5xl w-full"},Xo={class:"bg-white dark:bg-gray-800 px-4 pt-5 pb-4 sm:p-6 sm:pb-4"},Qo={class:"bg-gray-50 dark:bg-gray-800 dark:border-t dark:border-gray-700 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"},S={__name:"ModalLayout",setup(d){const t=e.inject("ServiceContainer");return e.onMounted(()=>{const o=document.querySelector(".v-f-modal input");o&&o.focus()}),(o,a)=>(e.openBlock(),e.createElementBlock("div",{class:"v-f-modal relative z-30","aria-labelledby":"modal-title",role:"dialog","aria-modal":"true",onKeyup:a[1]||(a[1]=e.withKeys(r=>e.unref(t).emitter.emit("vf-modal-close"),["esc"])),tabindex:"0"},[Yo,e.createElementVNode("div",Ko,[e.createElementVNode("div",{class:"flex items-end sm:items-center justify-center min-h-full p-4 text-center sm:p-0",onMousedown:a[0]||(a[0]=e.withModifiers(r=>e.unref(t).emitter.emit("vf-modal-close"),["self"]))},[e.createElementVNode("div",Jo,[e.createElementVNode("div",Xo,[e.renderSlot(o.$slots,"default")]),e.createElementVNode("div",Qo,[e.renderSlot(o.$slots,"buttons")])])],32)])],32))}},Zo=["aria-label"],er=e.createElementVNode("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24","stroke-width":"1.5",stroke:"currentColor",class:"w-5 h-5"},[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M6 18L18 6M6 6l12 12"})],-1),tr=[er],or={name:"Message"},D=Object.assign(or,{props:{error:{type:Boolean,default:!1}},emits:["hidden"],setup(d,{emit:t}){var i;const o=t,a=e.inject("ServiceContainer"),{t:r}=a.i18n,l=e.ref(!1),c=e.ref(null),s=e.ref((i=c.value)==null?void 0:i.strMessage);e.watch(s,()=>l.value=!1);const n=()=>{o("hidden"),l.value=!0};return(p,f)=>(e.openBlock(),e.createElementBlock("div",null,[l.value?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",{key:0,ref_key:"strMessage",ref:c,class:e.normalizeClass(["flex mt-2 p-1 px-2 rounded text-sm break-all dark:opacity-75",d.error?"bg-red-100 text-red-600 ":"bg-emerald-100 text-emerald-600"])},[e.renderSlot(p.$slots,"default"),e.createElementVNode("div",{class:"ml-auto cursor-pointer",onClick:n,"aria-label":e.unref(r)("Close"),"data-microtip-position":"top-left",role:"tooltip"},tr,8,Zo)],2))]))}}),rr={class:"sm:flex sm:items-start"},ar=e.createElementVNode("div",{class:"mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 dark:bg-gray-500 sm:mx-0 sm:h-10 sm:w-10"},[e.createElementVNode("svg",{xmlns:"http://www.w3.org/2000/svg",class:"h-6 w-6 stroke-red-600 dark:stroke-red-200",fill:"none",viewBox:"0 0 24 24",stroke:"none","stroke-width":"1.5"},[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"})])],-1),nr={class:"mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full"},lr={class:"text-lg leading-6 font-medium text-gray-900 dark:text-gray-400",id:"modal-title"},sr={class:"mt-2"},ir={class:"text-sm text-gray-500"},cr={class:"text-gray-500 text-sm mb-1 overflow-auto vf-scrollbar",style:{"max-height":"200px"}},dr={class:"flex text-sm text-gray-800 dark:text-gray-400"},ur={key:0,xmlns:"http://www.w3.org/2000/svg",class:"h-5 w-5 text-neutral-500 fill-sky-500 stroke-sky-500 dark:fill-slate-500 dark:stroke-slate-500",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor","stroke-width":"1"},mr=e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"},null,-1),pr=[mr],fr={key:1,xmlns:"http://www.w3.org/2000/svg",class:"h-5 w-5 text-neutral-500",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor","stroke-width":"1"},vr=e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"},null,-1),hr=[vr],gr={class:"ml-1.5"},kr={class:"m-auto font-bold text-red-500 text-sm dark:text-red-200 text-center"},yr={name:"VFModalDelete"},_r=Object.assign(yr,{setup(d){const t=e.inject("ServiceContainer");t.storage;const{t:o}=t.i18n,a=e.ref(t.modal.data.items),r=e.ref(""),l=()=>{a.value.length&&t.emitter.emit("vf-fetch",{params:{q:"delete",m:"post",adapter:t.adapter,path:t.data.dirname},body:{items:a.value.map(({path:c,type:s})=>({path:c,type:s}))},onSuccess:()=>{t.emitter.emit("vf-toast-push",{label:o("Files deleted.")})},onError:c=>{r.value=o(c.message)}})};return(c,s)=>(e.openBlock(),e.createBlock(S,null,{buttons:e.withCtx(()=>[e.createElementVNode("button",{type:"button",onClick:l,class:"vf-btn vf-btn-danger"},e.toDisplayString(e.unref(o)("Yes, Delete!")),1),e.createElementVNode("button",{type:"button",onClick:s[1]||(s[1]=n=>e.unref(t).emitter.emit("vf-modal-close")),class:"vf-btn vf-btn-secondary"},e.toDisplayString(e.unref(o)("Cancel")),1),e.createElementVNode("div",kr,e.toDisplayString(e.unref(o)("This action cannot be undone.")),1)]),default:e.withCtx(()=>[e.createElementVNode("div",rr,[ar,e.createElementVNode("div",nr,[e.createElementVNode("h3",lr,e.toDisplayString(e.unref(o)("Delete files")),1),e.createElementVNode("div",sr,[e.createElementVNode("p",ir,e.toDisplayString(e.unref(o)("Are you sure you want to delete these files?")),1),e.createElementVNode("div",cr,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.value,n=>(e.openBlock(),e.createElementBlock("p",dr,[n.type==="dir"?(e.openBlock(),e.createElementBlock("svg",ur,pr)):(e.openBlock(),e.createElementBlock("svg",fr,hr)),e.createElementVNode("span",gr,e.toDisplayString(n.basename),1)]))),256))]),r.value.length?(e.openBlock(),e.createBlock(D,{key:0,onHidden:s[0]||(s[0]=n=>r.value=""),error:""},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(r.value),1)]),_:1})):e.createCommentVNode("",!0)])])])]),_:1}))}}),xr={class:"sm:flex sm:items-start"},wr=e.createElementVNode("div",{class:"mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-50 dark:bg-gray-500 sm:mx-0 sm:h-10 sm:w-10"},[e.createElementVNode("svg",{xmlns:"http://www.w3.org/2000/svg",class:"h-6 w-6 stroke-blue-600 dark:stroke-blue-100",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor","stroke-width":"2"},[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"})])],-1),br={class:"mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full"},Er={class:"text-lg leading-6 font-medium text-gray-900 dark:text-gray-400",id:"modal-title"},Vr={class:"mt-2"},Nr={class:"text-sm text-gray-500"},Br={name:"VFModalMessage"},$r=Object.assign(Br,{setup(d){const t=e.inject("ServiceContainer"),{t:o}=t.i18n;return(a,r)=>(e.openBlock(),e.createBlock(S,null,{buttons:e.withCtx(()=>[e.createElementVNode("button",{type:"button",onClick:r[0]||(r[0]=l=>e.unref(t).emitter.emit("vf-modal-close")),class:"vf-btn vf-btn-secondary"},e.toDisplayString(e.unref(o)("Close")),1)]),default:e.withCtx(()=>{var l,c;return[e.createElementVNode("div",xr,[wr,e.createElementVNode("div",br,[e.createElementVNode("h3",Er,e.toDisplayString(((l=e.unref(t).modal.data)==null?void 0:l.title)??"Title"),1),e.createElementVNode("div",Vr,[e.createElementVNode("p",Nr,e.toDisplayString(((c=e.unref(t).modal.data)==null?void 0:c.message)??"Message"),1)])])])]}),_:1}))}}),Cr={class:"sm:flex sm:items-start"},Sr=e.createElementVNode("div",{class:"mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-50 dark:bg-gray-500 sm:mx-0 sm:h-10 sm:w-10"},[e.createElementVNode("svg",{xmlns:"http://www.w3.org/2000/svg",class:"h-6 w-6 stroke-blue-600 dark:stroke-blue-100",fill:"none",viewBox:"0 0 24 24",stroke:"none","stroke-width":"1.5"},[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z"})])],-1),Dr={class:"mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full"},Mr={class:"text-lg leading-6 font-medium text-gray-900 dark:text-gray-400",id:"modal-title"},jr={class:"mt-2"},Tr={class:"text-sm text-gray-500"},Lr=["placeholder"],Fr={name:"VFModalNewFolder"},zr=Object.assign(Fr,{setup(d){const t=e.inject("ServiceContainer");t.storage;const{t:o}=t.i18n,a=e.ref(""),r=e.ref(""),l=()=>{a.value!=""&&t.emitter.emit("vf-fetch",{params:{q:"newfolder",m:"post",adapter:t.adapter,path:t.data.dirname},body:{name:a.value},onSuccess:()=>{t.emitter.emit("vf-toast-push",{label:o("%s is created.",a.value)})},onError:c=>{r.value=o(c.message)}})};return(c,s)=>(e.openBlock(),e.createBlock(S,null,{buttons:e.withCtx(()=>[e.createElementVNode("button",{type:"button",onClick:l,class:"vf-btn vf-btn-primary"},e.toDisplayString(e.unref(o)("Create")),1),e.createElementVNode("button",{type:"button",onClick:s[2]||(s[2]=n=>e.unref(t).emitter.emit("vf-modal-close")),class:"vf-btn vf-btn-secondary"},e.toDisplayString(e.unref(o)("Cancel")),1)]),default:e.withCtx(()=>[e.createElementVNode("div",Cr,[Sr,e.createElementVNode("div",Dr,[e.createElementVNode("h3",Mr,e.toDisplayString(e.unref(o)("New Folder")),1),e.createElementVNode("div",jr,[e.createElementVNode("p",Tr,e.toDisplayString(e.unref(o)("Create a new folder")),1),e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":s[0]||(s[0]=n=>a.value=n),onKeyup:e.withKeys(l,["enter"]),class:"px-2 py-1 border rounded dark:bg-gray-700/25 dark:focus:ring-gray-600 dark:focus:border-gray-600 dark:text-gray-100 w-full",placeholder:e.unref(o)("Folder Name"),type:"text"},null,40,Lr),[[e.vModelText,a.value]]),r.value.length?(e.openBlock(),e.createBlock(D,{key:0,onHidden:s[1]||(s[1]=n=>r.value=""),error:""},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(r.value),1)]),_:1})):e.createCommentVNode("",!0)])])])]),_:1}))}}),Ar={class:"sm:flex sm:items-start"},Or=e.createElementVNode("div",{class:"mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-50 dark:bg-gray-500 sm:mx-0 sm:h-10 sm:w-10"},[e.createElementVNode("svg",{xmlns:"http://www.w3.org/2000/svg",class:"h-6 w-6 stroke-blue-600 dark:stroke-blue-100",fill:"none",viewBox:"0 0 24 24",stroke:"none","stroke-width":"1.5"},[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"})])],-1),Ur={class:"mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full"},Hr={class:"text-lg leading-6 font-medium text-gray-900 dark:text-gray-400",id:"modal-title"},Rr={class:"mt-2"},qr={class:"text-sm text-gray-500"},Ir=["placeholder"],Pr={name:"VFModalNewFile"},Wr=Object.assign(Pr,{setup(d){const t=e.inject("ServiceContainer");t.storage;const{t:o}=t.i18n,a=e.ref(""),r=e.ref(""),l=()=>{a.value!=""&&t.emitter.emit("vf-fetch",{params:{q:"newfile",m:"post",adapter:t.adapter,path:t.data.dirname},body:{name:a.value},onSuccess:()=>{t.emitter.emit("vf-toast-push",{label:o("%s is created.",a.value)})},onError:c=>{r.value=o(c.message)}})};return(c,s)=>(e.openBlock(),e.createBlock(S,null,{buttons:e.withCtx(()=>[e.createElementVNode("button",{type:"button",onClick:l,class:"vf-btn vf-btn-primary"},e.toDisplayString(e.unref(o)("Create")),1),e.createElementVNode("button",{type:"button",onClick:s[2]||(s[2]=n=>e.unref(t).emitter.emit("vf-modal-close")),class:"vf-btn vf-btn-secondary"},e.toDisplayString(e.unref(o)("Cancel")),1)]),default:e.withCtx(()=>[e.createElementVNode("div",Ar,[Or,e.createElementVNode("div",Ur,[e.createElementVNode("h3",Hr,e.toDisplayString(e.unref(o)("New File")),1),e.createElementVNode("div",Rr,[e.createElementVNode("p",qr,e.toDisplayString(e.unref(o)("Create a new file")),1),e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":s[0]||(s[0]=n=>a.value=n),onKeyup:e.withKeys(l,["enter"]),class:"px-2 py-1 border rounded dark:bg-gray-700/25 dark:focus:ring-gray-600 dark:focus:border-gray-600 dark:text-gray-100 w-full",placeholder:e.unref(o)("File Name"),type:"text"},null,40,Ir),[[e.vModelText,a.value]]),r.value.length?(e.openBlock(),e.createBlock(D,{key:0,onHidden:s[1]||(s[1]=n=>r.value=""),error:""},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(r.value),1)]),_:1})):e.createCommentVNode("",!0)])])])]),_:1}))}}),Gr={class:"flex"},Yr=["aria-label"],Kr={class:"ml-auto mb-2"},Jr={key:0,class:"p-2 border font-normal whitespace-pre-wrap border-gray-200 dark:border-gray-700/50 dark:text-gray-200 rounded min-h-[200px] max-h-[60vh] text-xs overflow-auto"},Xr={key:1},Qr={__name:"Text",emits:["success"],setup(d,{emit:t}){const o=t,a=e.ref(""),r=e.ref(""),l=e.ref(null),c=e.ref(!1),s=e.ref(""),n=e.ref(!1),i=e.inject("ServiceContainer"),{t:p}=i.i18n;e.onMounted(()=>{i.requester.send({url:"",method:"get",params:{q:"preview",adapter:i.modal.data.adapter,path:i.modal.data.item.path},responseType:"text"}).then(g=>{a.value=g,o("success")})});const f=()=>{c.value=!c.value,r.value=a.value,c.value==!0&&e.nextTick(()=>{l.value.focus()})},h=()=>{s.value="",n.value=!1,i.requester.send({url:"",method:"post",params:{q:"save",adapter:i.modal.data.adapter,path:i.modal.data.item.path},body:{content:r.value},responseType:"text"}).then(g=>{s.value=p("Updated."),a.value=g,o("success"),c.value=!c.value}).catch(g=>{s.value=p(g.message),n.value=!0})};return(g,w)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createElementVNode("div",Gr,[e.createElementVNode("div",{class:"mb-2 text-lg leading-6 font-medium text-gray-900 dark:text-gray-400",id:"modal-title","aria-label":e.unref(i).modal.data.item.path,"data-microtip-position":"bottom-right",role:"tooltip"},e.toDisplayString(e.unref(i).modal.data.item.basename),9,Yr),e.createElementVNode("div",Kr,[c.value?(e.openBlock(),e.createElementBlock("button",{key:0,onClick:h,class:"ml-1 px-2 py-1 rounded border border-transparent shadow-sm bg-blue-700/75 hover:bg-blue-700 dark:bg-gray-700 dark:hover:bg-gray-700/50 text-base font-medium text-white sm:ml-3 sm:w-auto sm:text-sm"},e.toDisplayString(e.unref(p)("Save")),1)):e.createCommentVNode("",!0),e.unref(i).features.includes(e.unref($).EDIT)?(e.openBlock(),e.createElementBlock("button",{key:1,class:"ml-1 px-2 py-1 text-blue-500",onClick:w[0]||(w[0]=_=>f())},e.toDisplayString(c.value?e.unref(p)("Cancel"):e.unref(p)("Edit")),1)):e.createCommentVNode("",!0)])]),e.createElementVNode("div",null,[c.value?(e.openBlock(),e.createElementBlock("div",Xr,[e.withDirectives(e.createElementVNode("textarea",{ref_key:"editInput",ref:l,"onUpdate:modelValue":w[1]||(w[1]=_=>r.value=_),class:"w-full p-2 rounded dark:bg-gray-700 dark:text-gray-200 dark:focus:ring-gray-600 dark:focus:border-gray-600 dark:selection:bg-gray-500 min-h-[200px] max-h-[60vh] text-xs",name:"text",id:"",cols:"30",rows:"10"},null,512),[[e.vModelText,r.value]])])):(e.openBlock(),e.createElementBlock("pre",Jr,e.toDisplayString(a.value),1)),s.value.length?(e.openBlock(),e.createBlock(D,{key:2,onHidden:w[2]||(w[2]=_=>s.value=""),error:n.value},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(s.value),1)]),_:1},8,["error"])):e.createCommentVNode("",!0)])],64))}},Zr={class:"flex"},ea=["aria-label"],ta={class:"ml-auto mb-2"},oa={class:"w-full flex justify-center"},ra=["src"],aa={__name:"Image",emits:["success"],setup(d,{emit:t}){const o=t,a=e.inject("ServiceContainer"),{t:r}=a.i18n,l=e.ref(null),c=e.ref(null),s=e.ref(!1),n=e.ref(""),i=e.ref(!1),p=()=>{s.value=!s.value,s.value?c.value=new te(l.value,{crop(h){}}):c.value.destroy()},f=()=>{c.value.getCroppedCanvas({width:795,height:341}).toBlob(h=>{n.value="",i.value=!1;const g=new FormData;g.set("file",h),a.requester.send({url:"",method:"post",params:{q:"upload",adapter:a.modal.data.adapter,path:a.modal.data.item.path},body:g}).then(w=>{n.value=r("Updated."),l.value.src=a.requester.getPreviewUrl(a.modal.data.adapter,a.modal.data.item),p(),o("success")}).catch(w=>{n.value=r(w.message),i.value=!0})})};return e.onMounted(()=>{o("success")}),(h,g)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createElementVNode("div",Zr,[e.createElementVNode("h3",{class:"mb-2 text-lg leading-6 font-medium text-gray-900 dark:text-gray-400",id:"modal-title","aria-label":e.unref(a).modal.data.item.path,"data-microtip-position":"bottom-right",role:"tooltip"},e.toDisplayString(e.unref(a).modal.data.item.basename),9,ea),e.createElementVNode("div",ta,[s.value?(e.openBlock(),e.createElementBlock("button",{key:0,onClick:f,class:"ml-1 px-2 py-1 rounded border border-transparent shadow-sm bg-blue-700/75 hover:bg-blue-700 dark:bg-gray-700 dark:hover:bg-gray-700/50 text-base font-medium text-white sm:ml-3 sm:w-auto sm:text-sm"},e.toDisplayString(e.unref(r)("Crop")),1)):e.createCommentVNode("",!0),e.unref(a).features.includes(e.unref($).EDIT)?(e.openBlock(),e.createElementBlock("button",{key:1,class:"ml-1 px-2 py-1 text-blue-500",onClick:g[0]||(g[0]=w=>p())},e.toDisplayString(s.value?e.unref(r)("Cancel"):e.unref(r)("Edit")),1)):e.createCommentVNode("",!0)])]),e.createElementVNode("div",oa,[e.createElementVNode("img",{ref_key:"image",ref:l,class:"max-w-[50vh] max-h-[50vh]",src:e.unref(a).requester.getPreviewUrl(e.unref(a).modal.data.adapter,e.unref(a).modal.data.item),alt:""},null,8,ra)]),n.value.length?(e.openBlock(),e.createBlock(D,{key:0,onHidden:g[1]||(g[1]=w=>n.value=""),error:i.value},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(n.value),1)]),_:1},8,["error"])):e.createCommentVNode("",!0)],64))}},na={class:"flex"},la=["aria-label"],sa=e.createElementVNode("div",null,null,-1),ia={__name:"Default",emits:["success"],setup(d,{emit:t}){const o=e.inject("ServiceContainer"),a=t;return e.onMounted(()=>{a("success")}),(r,l)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createElementVNode("div",na,[e.createElementVNode("h3",{class:"mb-2 text-lg leading-6 font-medium text-gray-900 dark:text-gray-400",id:"modal-title","aria-label":e.unref(o).modal.data.item.path,"data-microtip-position":"bottom-right",role:"tooltip"},e.toDisplayString(e.unref(o).modal.data.item.basename),9,la)]),sa],64))}},ca=["aria-label"],da={class:"w-full",preload:"",controls:""},ua=["src"],ma={__name:"Video",emits:["success"],setup(d,{emit:t}){const o=e.inject("ServiceContainer"),a=t,r=()=>o.requester.getPreviewUrl(o.modal.data.adapter,o.modal.data.item);return e.onMounted(()=>{a("success")}),(l,c)=>(e.openBlock(),e.createElementBlock("div",null,[e.createElementVNode("h3",{class:"mb-2 text-lg leading-6 font-medium text-gray-900 dark:text-gray-400",id:"modal-title","aria-label":e.unref(o).modal.data.item.path,"data-microtip-position":"bottom-right",role:"tooltip"},e.toDisplayString(e.unref(o).modal.data.item.basename),9,ca),e.createElementVNode("div",null,[e.createElementVNode("video",da,[e.createElementVNode("source",{src:r(),type:"video/mp4"},null,8,ua),e.createTextVNode(" Your browser does not support the video tag. ")])])]))}},pa=["aria-label"],fa={class:"w-full",controls:""},va=["src"],ha={__name:"Audio",emits:["success"],setup(d,{emit:t}){const o=t,a=e.inject("ServiceContainer"),r=()=>a.requester.getPreviewUrl(a.modal.data.adapter,a.modal.data.item);return e.onMounted(()=>{o("success")}),(l,c)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createElementVNode("h3",{class:"mb-2 text-lg leading-6 font-medium text-gray-900 dark:text-gray-400",id:"modal-title","aria-label":e.unref(a).modal.data.item.path,"data-microtip-position":"bottom-right",role:"tooltip"},e.toDisplayString(e.unref(a).modal.data.item.basename),9,pa),e.createElementVNode("div",null,[e.createElementVNode("audio",fa,[e.createElementVNode("source",{src:r(),type:"audio/mpeg"},null,8,va),e.createTextVNode(" Your browser does not support the audio element. ")])])],64))}},ga=["aria-label"],ka=["data"],ya=["src"],_a=e.createElementVNode("p",null,[e.createTextVNode(" Your browser does not support PDFs. "),e.createElementVNode("a",{href:"https://example.com/test.pdf"},"Download the PDF"),e.createTextVNode(" . ")],-1),xa=[_a],wa={__name:"Pdf",emits:["success"],setup(d,{emit:t}){const o=e.inject("ServiceContainer"),a=t,r=()=>o.requester.getPreviewUrl(o.modal.data.adapter,o.modal.data.item);return e.onMounted(()=>{a("success")}),(l,c)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createElementVNode("h3",{class:"mb-2 text-lg leading-6 font-medium text-gray-900 dark:text-gray-400",id:"modal-title","aria-label":e.unref(o).modal.data.item.path,"data-microtip-position":"bottom-right",role:"tooltip"},e.toDisplayString(e.unref(o).modal.data.item.basename),9,ga),e.createElementVNode("div",null,[e.createElementVNode("object",{class:"h-[60vh]",data:r(),type:"application/pdf",width:"100%",height:"100%"},[e.createElementVNode("iframe",{class:"border-0",src:r(),width:"100%",height:"100%"},xa,8,ya)],8,ka)])],64))}},ba={class:"sm:flex sm:items-start"},Ea={class:"mt-3 text-center sm:mt-0 sm:text-left w-full"},Va={key:0},Na={class:"text-gray-700 dark:text-gray-200 text-sm"},Ba={key:0,class:"flex leading-5"},$a=e.createElementVNode("svg",{class:"animate-spin -ml-1 mr-3 h-5 w-5 text-white",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24"},[e.createElementVNode("circle",{class:"opacity-25 stroke-blue-900 dark:stroke-blue-100",cx:"12",cy:"12",r:"10",stroke:"currentColor","stroke-width":"4"}),e.createElementVNode("path",{class:"opacity-75",fill:"currentColor",d:"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"})],-1),Ca={class:"py-2 flex font-normal break-all dark:text-gray-200 rounded text-xs"},Sa={class:"font-bold"},Da={class:"font-bold pl-2"},Ma={key:0,class:"text-xs text-gray-600 dark:text-gray-400"},ja=["download","href"],Ta={name:"VFModalPreview"},La=Object.assign(Ta,{setup(d){const t=e.inject("ServiceContainer"),{t:o}=t.i18n,a=e.ref(!1),r=c=>(t.modal.data.item.mime_type??"").startsWith(c),l=t.features.includes($.PREVIEW);return l||(a.value=!0),(c,s)=>(e.openBlock(),e.createBlock(S,null,{buttons:e.withCtx(()=>[e.createElementVNode("button",{type:"button",onClick:s[6]||(s[6]=n=>e.unref(t).emitter.emit("vf-modal-close")),class:"vf-btn vf-btn-secondary"},e.toDisplayString(e.unref(o)("Close")),1),e.unref(t).features.includes(e.unref($).DOWNLOAD)?(e.openBlock(),e.createElementBlock("a",{key:0,target:"_blank",class:"vf-btn vf-btn-primary",download:e.unref(t).requester.getDownloadUrl(e.unref(t).modal.data.adapter,e.unref(t).modal.data.item),href:e.unref(t).requester.getDownloadUrl(e.unref(t).modal.data.adapter,e.unref(t).modal.data.item)},e.toDisplayString(e.unref(o)("Download")),9,ja)):e.createCommentVNode("",!0)]),default:e.withCtx(()=>[e.createElementVNode("div",ba,[e.createElementVNode("div",Ea,[e.unref(l)?(e.openBlock(),e.createElementBlock("div",Va,[r("text")?(e.openBlock(),e.createBlock(Qr,{key:0,onSuccess:s[0]||(s[0]=n=>a.value=!0)})):r("image")?(e.openBlock(),e.createBlock(aa,{key:1,onSuccess:s[1]||(s[1]=n=>a.value=!0)})):r("video")?(e.openBlock(),e.createBlock(ma,{key:2,onSuccess:s[2]||(s[2]=n=>a.value=!0)})):r("audio")?(e.openBlock(),e.createBlock(ha,{key:3,onSuccess:s[3]||(s[3]=n=>a.value=!0)})):r("application/pdf")?(e.openBlock(),e.createBlock(wa,{key:4,onSuccess:s[4]||(s[4]=n=>a.value=!0)})):(e.openBlock(),e.createBlock(ia,{key:5,onSuccess:s[5]||(s[5]=n=>a.value=!0)}))])):e.createCommentVNode("",!0),e.createElementVNode("div",Na,[a.value===!1?(e.openBlock(),e.createElementBlock("div",Ba,[$a,e.createElementVNode("span",null,e.toDisplayString(e.unref(o)("Loading")),1)])):e.createCommentVNode("",!0)])])]),e.createElementVNode("div",Ca,[e.createElementVNode("div",null,[e.createElementVNode("span",Sa,e.toDisplayString(e.unref(o)("File Size"))+": ",1),e.createTextVNode(e.toDisplayString(e.unref(t).filesize(e.unref(t).modal.data.item.file_size)),1)]),e.createElementVNode("div",null,[e.createElementVNode("span",Da,e.toDisplayString(e.unref(o)("Last Modified"))+": ",1),e.createTextVNode(" "+e.toDisplayString(e.unref(Y)(e.unref(t).modal.data.item.last_modified)),1)])]),e.unref(t).features.includes(e.unref($).DOWNLOAD)?(e.openBlock(),e.createElementBlock("div",Ma,[e.createElementVNode("span",null,e.toDisplayString(e.unref(o)(`Download doesn't work? You can try right-click "Download" button, select "Save link as...".`)),1)])):e.createCommentVNode("",!0)]),_:1}))}}),Fa={class:"sm:flex sm:items-start"},za=e.createElementVNode("div",{class:"mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-50 dark:bg-gray-500 sm:mx-0 sm:h-10 sm:w-10"},[e.createElementVNode("svg",{xmlns:"http://www.w3.org/2000/svg",class:"h-6 w-6 stroke-blue-600 dark:stroke-blue-100",fill:"none",viewBox:"0 0 24 24",stroke:"none","stroke-width":"1.5"},[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"})])],-1),Aa={class:"mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full"},Oa={class:"text-lg leading-6 font-medium text-gray-900 dark:text-gray-400",id:"modal-title"},Ua={class:"mt-2"},Ha={class:"flex text-sm text-gray-800 dark:text-gray-400 py-2"},Ra={key:0,xmlns:"http://www.w3.org/2000/svg",class:"h-5 w-5 text-neutral-500 fill-sky-500 stroke-sky-500 dark:fill-slate-500 dark:stroke-slate-500",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor","stroke-width":"1"},qa=e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"},null,-1),Ia=[qa],Pa={key:1,xmlns:"http://www.w3.org/2000/svg",class:"h-5 w-5 text-neutral-500",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor","stroke-width":"1"},Wa=e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"},null,-1),Ga=[Wa],Ya={class:"ml-1.5"},Ka={name:"VFModalRename"},Ja=Object.assign(Ka,{setup(d){const t=e.inject("ServiceContainer");t.storage;const{t:o}=t.i18n,a=e.ref(t.modal.data.items[0]),r=e.ref(t.modal.data.items[0].basename),l=e.ref(""),c=()=>{r.value!=""&&t.emitter.emit("vf-fetch",{params:{q:"rename",m:"post",adapter:t.adapter,path:t.data.dirname},body:{item:a.value.path,name:r.value},onSuccess:()=>{t.emitter.emit("vf-toast-push",{label:o("%s is renamed.",r.value)})},onError:s=>{l.value=o(s.message)}})};return(s,n)=>(e.openBlock(),e.createBlock(S,null,{buttons:e.withCtx(()=>[e.createElementVNode("button",{type:"button",onClick:c,class:"vf-btn vf-btn-primary"},e.toDisplayString(e.unref(o)("Rename")),1),e.createElementVNode("button",{type:"button",onClick:n[2]||(n[2]=i=>e.unref(t).emitter.emit("vf-modal-close")),class:"vf-btn vf-btn-secondary"},e.toDisplayString(e.unref(o)("Cancel")),1)]),default:e.withCtx(()=>[e.createElementVNode("div",Fa,[za,e.createElementVNode("div",Aa,[e.createElementVNode("h3",Oa,e.toDisplayString(e.unref(o)("Rename")),1),e.createElementVNode("div",Ua,[e.createElementVNode("p",Ha,[a.value.type==="dir"?(e.openBlock(),e.createElementBlock("svg",Ra,Ia)):(e.openBlock(),e.createElementBlock("svg",Pa,Ga)),e.createElementVNode("span",Ya,e.toDisplayString(a.value.basename),1)]),e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":n[0]||(n[0]=i=>r.value=i),onKeyup:e.withKeys(c,["enter"]),class:"px-2 py-1 border rounded dark:bg-gray-700/25 dark:focus:ring-gray-600 dark:focus:border-gray-600 dark:text-gray-100 w-full",placeholder:"Name",type:"text"},null,544),[[e.vModelText,r.value]]),l.value.length?(e.openBlock(),e.createBlock(D,{key:0,onHidden:n[1]||(n[1]=i=>l.value=""),error:""},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(l.value),1)]),_:1})):e.createCommentVNode("",!0)])])])]),_:1}))}}),Xa={class:"sm:flex sm:items-start"},Qa=e.createElementVNode("div",{class:"mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-50 dark:bg-gray-500 sm:mx-0 sm:h-10 sm:w-10"},[e.createElementVNode("svg",{xmlns:"http://www.w3.org/2000/svg",class:"h-6 w-6 stroke-blue-600 dark:stroke-blue-100",fill:"none",viewBox:"0 0 24 24",stroke:"none","stroke-width":"1.5"},[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"})])],-1),Za={class:"mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full"},en={class:"text-lg leading-6 font-medium text-gray-900 dark:text-gray-400",id:"modal-title"},tn={class:"mt-2"},on={key:0,class:"pointer-events-none"},rn={key:1,class:"pointer-events-none"},an=["disabled"],nn=["disabled"],ln={class:"text-gray-500 text-sm mb-1 pr-1 max-h-[200px] overflow-y-auto vf-scrollbar"},sn={class:"rounded flex flex-shrink-0 w-6 h-6 border bg-gray-50 text-xs cursor-default dark:border-gray-700 dark:bg-gray-800 dark:text-gray-50"},cn=["textContent"],dn={class:"ml-1 w-full h-fit"},un={class:"text-left hidden md:block"},mn={class:"text-left md:hidden"},pn={key:0,class:"ml-auto"},fn=["title","disabled","onClick"],vn=e.createElementVNode("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24","stroke-width":"1.5",stroke:"currentColor",class:"w-5 h-5"},[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M6 18L18 6M6 6l12 12"})],-1),hn=[vn],gn={key:0,class:"py-2"},kn=["disabled"],yn={name:"VFModalUpload"},_n=Object.assign(yn,{setup(d){const t=e.inject("ServiceContainer"),{t:o}=t.i18n,a=o("uppy"),r={PENDING:0,CANCELED:1,UPLOADING:2,ERROR:3,DONE:10},l=e.ref({QUEUE_ENTRY_STATUS:r}),c=e.ref(null),s=e.ref(null),n=e.ref(null),i=e.ref(null),p=e.ref(null),f=e.ref(null),h=e.ref([]),g=e.ref(""),w=e.ref(!1),_=e.ref(!1);let m;function u(E){return h.value.findIndex(x=>x.id===E)}function B(E,x=null){x=x??(E.webkitRelativePath||E.name),m.addFile({name:x,type:E.type,data:E,source:"Local"})}function C(E){switch(E.status){case r.DONE:return"text-green-600";case r.ERROR:return"text-red-600";case r.CANCELED:return"text-red-600";case r.PENDING:default:return""}}const M=E=>{switch(E.status){case r.DONE:return"✓";case r.ERROR:case r.CANCELED:return"!";case r.PENDING:default:return"..."}};function L(){i.value.click()}function F(){if(!w.value){if(!h.value.filter(E=>E.status!==r.DONE).length){g.value=o("Please select file to upload first.");return}g.value="",m.retryAll(),m.upload()}}function z(){m.cancelAll({reason:"user"}),h.value.forEach(E=>{E.status!==r.DONE&&(E.status=r.CANCELED,E.statusName=o("Canceled"))}),w.value=!1}function A(E){w.value||(m.removeFile(E.id,"removed-by-user"),h.value.splice(u(E.id),1))}function k(E){if(!w.value){if(m.cancelAll({reason:"user"}),E){const x=[];h.value.forEach(v=>{v.status!==r.DONE&&x.push(v)}),h.value=[],x.forEach(v=>{B(v.originalFile,v.name)});return}h.value.splice(0)}}function b(){t.emitter.emit("vf-modal-close")}function y(){return t.requester.transformRequestParams({url:"",method:"post",params:{q:"upload",adapter:t.data.adapter,path:t.data.dirname}})}return e.onMounted(async()=>{m=new oe({debug:t.debug,restrictions:{maxFileSize:ue(t.maxFileSize)},locale:a,onBeforeFileAdded(v,V){if(V[v.id]!=null){const T=u(v.id);h.value[T].status===r.PENDING&&(g.value=m.i18n("noDuplicates",{fileName:v.name})),h.value=h.value.filter(U=>U.id!==v.id)}return h.value.push({id:v.id,name:v.name,size:t.filesize(v.size),status:r.PENDING,statusName:o("Pending upload"),percent:null,originalFile:v.data}),!0}}),m.use(re,{endpoint:"WILL_BE_REPLACED_BEFORE_UPLOAD",limit:5,timeout:0,getResponseError(v,V){let N;try{N=JSON.parse(v).message}catch{N=o("Cannot parse server response.")}return new Error(N)}}),m.on("restriction-failed",(v,V)=>{const N=h.value[u(v.id)];A(N),g.value=V.message}),m.on("upload",()=>{const v=y();m.setMeta({...v.body});const V=m.getPlugin("XHRUpload");V.opts.method=v.method,V.opts.endpoint=v.url+"?"+new URLSearchParams(v.params),V.opts.headers=v.headers,w.value=!0,h.value.forEach(N=>{N.status!==r.DONE&&(N.percent=null,N.status=r.UPLOADING,N.statusName=o("Pending upload"))})}),m.on("upload-progress",(v,V)=>{const N=Math.floor(V.bytesUploaded/V.bytesTotal*100);h.value[u(v.id)].percent=`${N}%`}),m.on("upload-success",v=>{const V=h.value[u(v.id)];V.status=r.DONE,V.statusName=o("Done")}),m.on("upload-error",(v,V)=>{const N=h.value[u(v.id)];N.percent=null,N.status=r.ERROR,V.isNetworkError?N.statusName=o("Network Error, Unable establish connection to the server or interrupted."):N.statusName=V?V.message:o("Unknown Error")}),m.on("error",v=>{g.value=v.message,w.value=!1,t.emitter.emit("vf-fetch",{params:{q:"index",adapter:t.data.adapter,path:t.data.dirname},noCloseModal:!0})}),m.on("complete",()=>{w.value=!1,t.emitter.emit("vf-fetch",{params:{q:"index",adapter:t.data.adapter,path:t.data.dirname},noCloseModal:!0})}),i.value.addEventListener("click",()=>{s.value.click()}),p.value.addEventListener("click",()=>{n.value.click()}),f.value.addEventListener("dragover",v=>{v.preventDefault(),_.value=!0}),f.value.addEventListener("dragleave",v=>{v.preventDefault(),_.value=!1});function E(v,V){V.isFile&&V.file(N=>v(V,N)),V.isDirectory&&V.createReader().readEntries(N=>{N.forEach(T=>{E(v,T)})})}f.value.addEventListener("drop",v=>{v.preventDefault(),_.value=!1;const V=/^[/\\](.+)/;[...v.dataTransfer.items].forEach(N=>{N.kind==="file"&&E((T,U)=>{const K=V.exec(T.fullPath);B(U,K[1])},N.webkitGetAsEntry())})});const x=({target:v})=>{const V=v.files;for(const N of V)B(N);v.value=""};s.value.addEventListener("change",x),n.value.addEventListener("change",x)}),e.onBeforeUnmount(()=>{m==null||m.close({reason:"unmount"})}),(E,x)=>(e.openBlock(),e.createBlock(S,null,{buttons:e.withCtx(()=>[e.createElementVNode("button",{type:"button",class:e.normalizeClass(["vf-btn vf-btn-primary",w.value?"bg-blue-200 hover:bg-blue-200 dark:bg-gray-700/50 dark:hover:bg-gray-700/50 dark:text-gray-500":"bg-blue-600 hover:bg-blue-700 dark:bg-gray-700 dark:hover:bg-gray-500"]),disabled:w.value,onClick:e.withModifiers(F,["prevent"])},e.toDisplayString(e.unref(o)("Upload")),11,kn),w.value?(e.openBlock(),e.createElementBlock("button",{key:0,type:"button",class:"vf-btn vf-btn-secondary",onClick:e.withModifiers(z,["prevent"])},e.toDisplayString(e.unref(o)("Cancel")),1)):(e.openBlock(),e.createElementBlock("button",{key:1,type:"button",class:"vf-btn vf-btn-secondary",onClick:e.withModifiers(b,["prevent"])},e.toDisplayString(e.unref(o)("Close")),1))]),default:e.withCtx(()=>[e.createElementVNode("div",Xa,[Qa,e.createElementVNode("div",Za,[e.createElementVNode("h3",en,e.toDisplayString(e.unref(o)("Upload Files")),1),e.createElementVNode("div",tn,[e.createElementVNode("div",{ref_key:"dropArea",ref:f,class:"flex items-center justify-center text-lg mb-4 text-gray-500 border-2 border-gray-300 rounded border-dashed select-none cursor-pointer dark:border-gray-600 h-[120px]",onClick:L},[_.value?(e.openBlock(),e.createElementBlock("div",on,e.toDisplayString(e.unref(o)("Release to drop these files.")),1)):(e.openBlock(),e.createElementBlock("div",rn,e.toDisplayString(e.unref(o)("Drag and drop the files/folders to here or click here.")),1))],512),e.createElementVNode("div",{ref_key:"container",ref:c,class:"text-gray-500 mb-1"},[e.createElementVNode("button",{ref_key:"pickFiles",ref:i,type:"button",class:"vf-btn vf-btn-secondary"},e.toDisplayString(e.unref(o)("Select Files")),513),e.createElementVNode("button",{ref_key:"pickFolders",ref:p,type:"button",class:"vf-btn vf-btn-secondary"},e.toDisplayString(e.unref(o)("Select Folders")),513),e.createElementVNode("button",{type:"button",class:"vf-btn vf-btn-secondary",disabled:w.value,onClick:x[0]||(x[0]=v=>k(!1))},e.toDisplayString(e.unref(o)("Clear all")),9,an),e.createElementVNode("button",{type:"button",class:"vf-btn vf-btn-secondary",disabled:w.value,onClick:x[1]||(x[1]=v=>k(!0))},e.toDisplayString(e.unref(o)("Clear only successful")),9,nn)],512),e.createElementVNode("div",ln,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(h.value,v=>(e.openBlock(),e.createElementBlock("div",{class:"flex hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-gray-300",key:v.id},[e.createElementVNode("span",sn,[e.createElementVNode("span",{class:e.normalizeClass(["text-base m-auto",C(v)]),textContent:e.toDisplayString(M(v))},null,10,cn)]),e.createElementVNode("div",dn,[e.createElementVNode("div",un,e.toDisplayString(e.unref(q)(v.name,40))+" ("+e.toDisplayString(v.size)+")",1),e.createElementVNode("div",mn,e.toDisplayString(e.unref(q)(v.name,16))+" ("+e.toDisplayString(v.size)+")",1),e.createElementVNode("div",{class:e.normalizeClass(["flex break-all text-left",C(v)])},[e.createTextVNode(e.toDisplayString(v.statusName)+" ",1),v.status===l.value.QUEUE_ENTRY_STATUS.UPLOADING?(e.openBlock(),e.createElementBlock("b",pn,e.toDisplayString(v.percent),1)):e.createCommentVNode("",!0)],2)]),e.createElementVNode("button",{type:"button",class:e.normalizeClass(["rounded w-5 h-5 border-1 text-base leading-none font-medium focus:outline-none dark:border-gray-200 dark:text-gray-400 dark:hover:text-gray-200 dark:bg-gray-600 ml-auto sm:text-xs hover:text-red-600",w.value?"disabled:bg-gray-100 text-white text-opacity-50":"bg-gray-100"]),title:e.unref(o)("Delete"),disabled:w.value,onClick:V=>A(v)},hn,10,fn)]))),128)),h.value.length?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",gn,e.toDisplayString(e.unref(o)("No files selected!")),1))]),g.value.length?(e.openBlock(),e.createBlock(D,{key:0,onHidden:x[2]||(x[2]=v=>g.value=""),error:""},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(g.value),1)]),_:1})):e.createCommentVNode("",!0)])])]),e.createElementVNode("input",{ref_key:"internalFileInput",ref:s,type:"file",multiple:"",class:"hidden"},null,512),e.createElementVNode("input",{ref_key:"internalFolderInput",ref:n,type:"file",multiple:"",webkitdirectory:"",class:"hidden"},null,512)]),_:1}))}}),xn={class:"sm:flex sm:items-start"},wn=e.createElementVNode("div",{class:"mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-50 dark:bg-gray-500 sm:mx-0 sm:h-10 sm:w-10"},[e.createElementVNode("svg",{xmlns:"http://www.w3.org/2000/svg",class:"h-6 w-6 stroke-blue-600 dark:stroke-blue-100",fill:"none",viewBox:"0 0 24 24",stroke:"none","stroke-width":"1.5"},[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z"})])],-1),bn={class:"mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full"},En={class:"text-lg leading-6 font-medium text-gray-900 dark:text-gray-400",id:"modal-title"},Vn={class:"mt-2"},Nn={class:"text-gray-500 text-sm mb-1 overflow-auto vf-scrollbar",style:{"max-height":"200px"}},Bn={class:"flex text-sm text-gray-800 dark:text-gray-400"},$n={key:0,xmlns:"http://www.w3.org/2000/svg",class:"h-5 w-5 text-neutral-500 fill-sky-500 stroke-sky-500 dark:fill-slate-500 dark:stroke-slate-500",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor","stroke-width":"1"},Cn=e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"},null,-1),Sn=[Cn],Dn={key:1,xmlns:"http://www.w3.org/2000/svg",class:"h-5 w-5 text-neutral-500",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor","stroke-width":"1"},Mn=e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"},null,-1),jn=[Mn],Tn={class:"ml-1.5"},Ln=["placeholder"],Fn={name:"VFModalArchive"},zn=Object.assign(Fn,{setup(d){const t=e.inject("ServiceContainer");t.storage;const{t:o}=t.i18n,a=e.ref(""),r=e.ref(""),l=e.ref(t.modal.data.items),c=()=>{l.value.length&&t.emitter.emit("vf-fetch",{params:{q:"archive",m:"post",adapter:t.adapter,path:t.data.dirname},body:{items:l.value.map(({path:s,type:n})=>({path:s,type:n})),name:a.value},onSuccess:()=>{t.emitter.emit("vf-toast-push",{label:o("The file(s) archived.")})},onError:s=>{r.value=o(s.message)}})};return(s,n)=>(e.openBlock(),e.createBlock(S,null,{buttons:e.withCtx(()=>[e.createElementVNode("button",{type:"button",onClick:c,class:"vf-btn vf-btn-primary"},e.toDisplayString(e.unref(o)("Archive")),1),e.createElementVNode("button",{type:"button",onClick:n[2]||(n[2]=i=>e.unref(t).emitter.emit("vf-modal-close")),class:"vf-btn vf-btn-secondary"},e.toDisplayString(e.unref(o)("Cancel")),1)]),default:e.withCtx(()=>[e.createElementVNode("div",xn,[wn,e.createElementVNode("div",bn,[e.createElementVNode("h3",En,e.toDisplayString(e.unref(o)("Archive the files")),1),e.createElementVNode("div",Vn,[e.createElementVNode("div",Nn,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.value,i=>(e.openBlock(),e.createElementBlock("p",Bn,[i.type==="dir"?(e.openBlock(),e.createElementBlock("svg",$n,Sn)):(e.openBlock(),e.createElementBlock("svg",Dn,jn)),e.createElementVNode("span",Tn,e.toDisplayString(i.basename),1)]))),256))]),e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":n[0]||(n[0]=i=>a.value=i),onKeyup:e.withKeys(c,["enter"]),class:"my-1 px-2 py-1 border rounded dark:bg-gray-700/25 dark:focus:ring-gray-600 dark:focus:border-gray-600 dark:text-gray-100 w-full",placeholder:e.unref(o)("Archive name. (.zip file will be created)"),type:"text"},null,40,Ln),[[e.vModelText,a.value]]),r.value.length?(e.openBlock(),e.createBlock(D,{key:0,onHidden:n[1]||(n[1]=i=>r.value=""),error:""},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(r.value),1)]),_:1})):e.createCommentVNode("",!0)])])])]),_:1}))}}),An={class:"sm:flex sm:items-start"},On=e.createElementVNode("div",{class:"mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-50 dark:bg-gray-500 sm:mx-0 sm:h-10 sm:w-10"},[e.createElementVNode("svg",{xmlns:"http://www.w3.org/2000/svg",class:"h-6 w-6 stroke-blue-600 dark:stroke-blue-100",fill:"none",viewBox:"0 0 24 24",stroke:"none","stroke-width":"1.5"},[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5m6 4.125l2.25 2.25m0 0l2.25 2.25M12 13.875l2.25-2.25M12 13.875l-2.25 2.25M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z"})])],-1),Un={class:"mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full"},Hn={class:"text-lg leading-6 font-medium text-gray-900 dark:text-gray-400",id:"modal-title"},Rn={class:"mt-2"},qn={class:"flex text-sm text-gray-800 dark:text-gray-400"},In={key:0,xmlns:"http://www.w3.org/2000/svg",class:"h-5 w-5 text-neutral-500 fill-sky-500 stroke-sky-500 dark:fill-slate-500 dark:stroke-slate-500",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor","stroke-width":"1"},Pn=e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"},null,-1),Wn=[Pn],Gn={key:1,xmlns:"http://www.w3.org/2000/svg",class:"h-5 w-5 text-neutral-500",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor","stroke-width":"1"},Yn=e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"},null,-1),Kn=[Yn],Jn={class:"ml-1.5"},Xn={class:"my-1 text-sm text-gray-500"},Qn={name:"VFModalUnarchive"},Zn=Object.assign(Qn,{setup(d){const t=e.inject("ServiceContainer");t.storage;const{t:o}=t.i18n;e.ref("");const a=e.ref(t.modal.data.items[0]),r=e.ref(""),l=e.ref([]),c=()=>{t.emitter.emit("vf-fetch",{params:{q:"unarchive",m:"post",adapter:t.adapter,path:t.data.dirname},body:{item:a.value.path},onSuccess:()=>{t.emitter.emit("vf-toast-push",{label:o("The file unarchived.")})},onError:s=>{r.value=o(s.message)}})};return(s,n)=>(e.openBlock(),e.createBlock(S,null,{buttons:e.withCtx(()=>[e.createElementVNode("button",{type:"button",onClick:c,class:"vf-btn vf-btn-primary"},e.toDisplayString(e.unref(o)("Unarchive")),1),e.createElementVNode("button",{type:"button",onClick:n[1]||(n[1]=i=>e.unref(t).emitter.emit("vf-modal-close")),class:"vf-btn vf-btn-secondary"},e.toDisplayString(e.unref(o)("Cancel")),1)]),default:e.withCtx(()=>[e.createElementVNode("div",An,[On,e.createElementVNode("div",Un,[e.createElementVNode("h3",Hn,e.toDisplayString(e.unref(o)("Unarchive")),1),e.createElementVNode("div",Rn,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.value,i=>(e.openBlock(),e.createElementBlock("p",qn,[i.type==="dir"?(e.openBlock(),e.createElementBlock("svg",In,Wn)):(e.openBlock(),e.createElementBlock("svg",Gn,Kn)),e.createElementVNode("span",Jn,e.toDisplayString(i.basename),1)]))),256)),e.createElementVNode("p",Xn,e.toDisplayString(e.unref(o)("The archive will be unarchived at"))+" ("+e.toDisplayString(e.unref(t).data.dirname)+")",1),r.value.length?(e.openBlock(),e.createBlock(D,{key:0,onHidden:n[0]||(n[0]=i=>r.value=""),error:""},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(r.value),1)]),_:1})):e.createCommentVNode("",!0)])])])]),_:1}))}}),el={class:"sm:flex sm:items-start"},tl=e.createElementVNode("div",{class:"mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-50 dark:bg-gray-500 sm:mx-0 sm:h-10 sm:w-10"},[e.createElementVNode("svg",{class:"h-6 w-6 stroke-blue-600 dark:stroke-blue-100",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24","stroke-width":"2",stroke:"currentColor","aria-hidden":"true"},[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"})])],-1),ol={class:"mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full"},rl={class:"text-lg leading-6 font-medium text-gray-900 dark:text-gray-400",id:"modal-title"},al={class:"text-sm text-gray-500 pb-1"},nl={class:"max-h-[200px] overflow-y-auto vf-scrollbar text-left"},ll={class:"flex text-sm text-gray-800 dark:text-gray-400"},sl={key:0,xmlns:"http://www.w3.org/2000/svg",class:"h-5 w-5 text-neutral-500 fill-sky-500 stroke-sky-500 dark:fill-slate-500 dark:stroke-slate-500",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor","stroke-width":"1"},il=e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"},null,-1),cl=[il],dl={key:1,xmlns:"http://www.w3.org/2000/svg",class:"h-5 w-5 text-neutral-500",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor","stroke-width":"1"},ul=e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"},null,-1),ml=[ul],pl={class:"ml-1.5"},fl={class:"font-bold text-xs text-gray-700 dark:text-gray-500 mt-3 tracking-wider"},vl={class:"flex text-sm text-gray-800 dark:text-gray-400 border dark:border-gray-700 p-1 rounded"},hl=e.createElementVNode("svg",{xmlns:"http://www.w3.org/2000/svg",class:"h-5 w-5 text-neutral-500 fill-sky-500 stroke-sky-500 dark:fill-slate-500 dark:stroke-slate-500",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor","stroke-width":"1"},[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"})],-1),gl={class:"ml-1.5 overflow-auto"},kl={class:"m-1 mr-auto font-bold text-gray-500 text-sm dark:text-gray-200 self-center"},yl={name:"VFModalMove"},_l=Object.assign(yl,{setup(d){const t=e.inject("ServiceContainer"),{t:o}=t.i18n;t.storage;const a=e.ref(t.modal.data.items.from),r=e.ref(""),l=()=>{a.value.length&&t.emitter.emit("vf-fetch",{params:{q:"move",m:"post",adapter:t.adapter,path:t.data.dirname},body:{items:a.value.map(({path:c,type:s})=>({path:c,type:s})),item:t.modal.data.items.to.path},onSuccess:()=>{t.emitter.emit("vf-toast-push",{label:o("Files moved.",t.modal.data.items.to.name)})},onError:c=>{r.value=o(c.message)}})};return(c,s)=>(e.openBlock(),e.createBlock(S,null,{buttons:e.withCtx(()=>[e.createElementVNode("button",{type:"button",onClick:l,class:"vf-btn vf-btn-primary"},e.toDisplayString(e.unref(o)("Yes, Move!")),1),e.createElementVNode("button",{type:"button",onClick:s[1]||(s[1]=n=>e.unref(t).emitter.emit("vf-modal-close")),class:"vf-btn vf-btn-secondary"},e.toDisplayString(e.unref(o)("Cancel")),1),e.createElementVNode("div",kl,e.toDisplayString(e.unref(o)("%s item(s) selected.",a.value.length)),1)]),default:e.withCtx(()=>[e.createElementVNode("div",el,[tl,e.createElementVNode("div",ol,[e.createElementVNode("h3",rl,e.toDisplayString(e.unref(o)("Move files")),1),e.createElementVNode("p",al,e.toDisplayString(e.unref(o)("Are you sure you want to move these files?")),1),e.createElementVNode("div",nl,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.value,n=>(e.openBlock(),e.createElementBlock("div",ll,[e.createElementVNode("div",null,[n.type==="dir"?(e.openBlock(),e.createElementBlock("svg",sl,cl)):(e.openBlock(),e.createElementBlock("svg",dl,ml))]),e.createElementVNode("div",pl,e.toDisplayString(n.path),1)]))),256))]),e.createElementVNode("h4",fl,e.toDisplayString(e.unref(o)("Target Directory")),1),e.createElementVNode("p",vl,[hl,e.createElementVNode("span",gl,e.toDisplayString(e.unref(t).modal.data.items.to.path),1)]),r.value.length?(e.openBlock(),e.createBlock(D,{key:0,onHidden:s[0]||(s[0]=n=>r.value=""),error:""},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(r.value),1)]),_:1})):e.createCommentVNode("",!0)])])]),_:1}))}}),xl=(d,t)=>{const o=d.__vccOpts||d;for(const[a,r]of t)o[a]=r;return o},wl={props:{on:{type:String,required:!0}},setup(d,{emit:t,slots:o}){const a=e.inject("ServiceContainer"),r=e.ref(!1),{t:l}=a.i18n;let c=null;const s=()=>{clearTimeout(c),r.value=!0,c=setTimeout(()=>{r.value=!1},2e3)};return e.onMounted(()=>{a.emitter.on(d.on,s)}),e.onUnmounted(()=>{clearTimeout(c)}),{shown:r,t:l}}},bl={key:1};function El(d,t,o,a,r,l){return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["text-sm text-green-600 dark:text-green-600 transition-opacity duration-500 ease-out",[{"opacity-0":!a.shown}]])},[d.$slots.default?e.renderSlot(d.$slots,"default",{key:0}):(e.openBlock(),e.createElementBlock("span",bl,e.toDisplayString(a.t("Saved.")),1))],2)}const R=xl(wl,[["render",El]]),Vl={class:"sm:flex sm:items-start"},Nl=e.createElementVNode("div",{class:"mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-50 dark:bg-gray-500 sm:mx-0 sm:h-10 sm:w-10"},[e.createElementVNode("svg",{xmlns:"http://www.w3.org/2000/svg",class:"h-6 w-6 stroke-blue-600 dark:stroke-blue-100",fill:"none",viewBox:"0 0 24 24","stroke-width":"1.5",stroke:"currentColor"},[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z"}),e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"})])],-1),Bl={class:"mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full"},$l={class:"text-lg leading-6 font-medium text-gray-900 dark:text-gray-400",id:"modal-title"},Cl={class:"mt-2"},Sl={class:"text-sm text-gray-500"},Dl={class:"text-sm font-semibold mt-5 text-gray-900 dark:text-gray-400 tracking-wider"},Ml={class:"mt-3 text-left"},jl={class:"space-y-2"},Tl={class:"flex relative gap-x-3"},Ll={class:"h-6 items-center"},Fl={class:"flex-1 block text-sm"},zl={for:"metric_unit",class:"flex w-full font-medium text-gray-900 dark:text-gray-400"},Al={class:"flex relative gap-x-3"},Ol={class:"h-6 items-center"},Ul={for:"theme",class:"flex w-full font-medium text-gray-900 dark:text-gray-400 text-sm"},Hl={class:"flex text-sm"},Rl=["label"],ql=["value"],Il={key:0,class:"flex relative gap-x-3"},Pl={class:"h-6 items-center"},Wl={for:"language",class:"flex w-full font-medium text-gray-900 dark:text-gray-400 text-sm text-nowrap"},Gl={class:"flex text-sm"},Yl=["label"],Kl=["value"],Jl={name:"VFModalAbout"},Xl=Object.assign(Jl,{setup(d){const t=e.inject("ServiceContainer"),{getStore:o,setStore:a,clearStore:r}=t.storage,{t:l,changeLocale:c,locale:s}=t.i18n;e.ref(""),e.ref("");const n=async()=>{r(),location.reload()},i=_=>{t.theme.set(_),t.emitter.emit("vf-theme-saved")},p=()=>{t.metricUnits=!t.metricUnits,t.filesize=t.metricUnits?G:W,a("metricUnits",t.metricUnits),t.emitter.emit("vf-metric-units-saved")},{i18n:f}=e.inject("VueFinderOptions"),g=Object.fromEntries(Object.entries({en:"English",fr:"French (Français)",de:"German (Deutsch)",fa:"Persian (فارسی)",he:"Hebrew (עִברִית)",hi:"Hindi (हिंदी)",ru:"Russian (Pусский)",sv:"Swedish (Svenska)",tr:"Turkish (Türkçe)",zhCN:"Simplified Chinese (简体中文)",zhTW:"Traditional Chinese (繁體中文)"}).filter(([_])=>Object.keys(f).includes(_))),w=e.computed(()=>({system:l("System"),light:l("Light"),dark:l("Dark")}));return(_,m)=>(e.openBlock(),e.createBlock(S,null,{buttons:e.withCtx(()=>[e.createElementVNode("button",{type:"button",onClick:m[5]||(m[5]=u=>e.unref(t).emitter.emit("vf-modal-close")),class:"vf-btn vf-btn-secondary"},e.toDisplayString(e.unref(l)("Close")),1)]),default:e.withCtx(()=>[e.createElementVNode("div",Vl,[Nl,e.createElementVNode("div",Bl,[e.createElementVNode("h3",$l,e.toDisplayString(e.unref(l)("About %s","Vuefinder "+e.unref(t).version)),1),e.createElementVNode("div",Cl,[e.createElementVNode("p",Sl,e.toDisplayString(e.unref(l)("Vuefinder is a file manager component for vue 3.")),1),e.createElementVNode("div",null,[e.createElementVNode("h3",Dl,e.toDisplayString(e.unref(l)("Settings")),1)]),e.createElementVNode("div",Ml,[e.createElementVNode("fieldset",null,[e.createElementVNode("div",jl,[e.createElementVNode("div",Tl,[e.createElementVNode("div",Ll,[e.withDirectives(e.createElementVNode("input",{id:"metric_unit",name:"metric_unit",type:"checkbox","onUpdate:modelValue":m[0]||(m[0]=u=>e.unref(t).metricUnits=u),onClick:p,class:"h-4 w-4 rounded border-gray-300 text-indigo-600 dark:accent-slate-400 focus:ring-indigo-600"},null,512),[[e.vModelCheckbox,e.unref(t).metricUnits]])]),e.createElementVNode("div",Fl,[e.createElementVNode("label",zl,[e.createTextVNode(e.toDisplayString(e.unref(l)("Use Metric Units"))+" ",1),e.createVNode(R,{class:"ms-3",on:"vf-metric-units-saved"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(e.unref(l)("Saved.")),1)]),_:1})])])]),e.createElementVNode("div",Al,[e.createElementVNode("div",Ol,[e.createElementVNode("label",Ul,e.toDisplayString(e.unref(l)("Theme")),1)]),e.createElementVNode("div",Hl,[e.withDirectives(e.createElementVNode("select",{id:"theme","onUpdate:modelValue":m[1]||(m[1]=u=>e.unref(t).theme.value=u),onChange:m[2]||(m[2]=u=>i(u.target.value)),class:"flex-shrink-0 w-full text-sm text-slate-500 border dark:border-gray-600 dark:text-neutral-50 dark:bg-gray-700 rounded"},[e.createElementVNode("optgroup",{label:e.unref(l)("Theme")},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(w.value,(u,B)=>(e.openBlock(),e.createElementBlock("option",{value:B},e.toDisplayString(u),9,ql))),256))],8,Rl)],544),[[e.vModelSelect,e.unref(t).theme.value]]),e.createVNode(R,{class:"ms-3 flex-shrink-0 flex-grow basis-full",on:"vf-theme-saved"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(e.unref(l)("Saved.")),1)]),_:1})])]),e.unref(t).features.includes(e.unref($).LANGUAGE)&&Object.keys(e.unref(g)).length>1?(e.openBlock(),e.createElementBlock("div",Il,[e.createElementVNode("div",Pl,[e.createElementVNode("label",Wl,e.toDisplayString(e.unref(l)("Language")),1)]),e.createElementVNode("div",Gl,[e.withDirectives(e.createElementVNode("select",{id:"language","onUpdate:modelValue":m[3]||(m[3]=u=>e.isRef(s)?s.value=u:null),onChange:m[4]||(m[4]=u=>e.unref(c)(u.target.value)),class:"flex-shrink-0 w-1/2 sm:w-full text-sm text-slate-500 border dark:border-gray-600 dark:text-neutral-50 dark:bg-gray-700 rounded"},[e.createElementVNode("optgroup",{label:e.unref(l)("Language")},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(g),(u,B)=>(e.openBlock(),e.createElementBlock("option",{value:B},e.toDisplayString(u),9,Kl))),256))],8,Yl)],544),[[e.vModelSelect,e.unref(s)]]),e.createVNode(R,{class:"ms-3 flex-shrink-0 flex-grow basis-full",on:"vf-language-saved"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(e.unref(l)("Saved.")),1)]),_:1})])])):e.createCommentVNode("",!0),e.createElementVNode("button",{onClick:n,type:"button",class:"vf-btn vf-btn-secondary"},e.toDisplayString(e.unref(l)("Reset Settings")),1)])])])])])])]),_:1}))}}),Ql=Object.freeze(Object.defineProperty({__proto__:null,ModalAbout:Xl,ModalArchive:zn,ModalDelete:_r,ModalMessage:$r,ModalMove:_l,ModalNewFile:Wr,ModalNewFolder:zr,ModalPreview:La,ModalRename:Ja,ModalUnarchive:Zn,ModalUpload:_n},Symbol.toStringTag,{value:"Module"})),Zl={install(d,t={}){d.component("VueFinder",Go);for(const a of Object.values(Ql))d.component(a.name,a);t.i18n=t.i18n??{};let[o]=Object.keys(t.i18n);t.locale=t.locale??o??"en",d.provide("VueFinderOptions",t)}};module.exports=Zl;
+"use strict";var ie=Object.defineProperty;var ce=(a,t,o)=>t in a?ie(a,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):a[t]=o;var W=(a,t,o)=>(ce(a,typeof t!="symbol"?t+"":t,o),o);const e=require("vue"),de=require("mitt"),ue=require("dragselect"),me=require("@uppy/core"),fe=require("@uppy/xhr-upload"),pe=require("vanilla-lazyload");require("cropperjs/dist/cropper.css");const he=require("cropperjs");require("microtip/microtip.css");var Y;const H=(Y=document.querySelector('meta[name="csrf-token"]'))==null?void 0:Y.getAttribute("content");class ve{constructor(t){W(this,"config");this.config=t}get config(){return this.config}transformRequestParams(t){const o=this.config,n={};H!=null&&H!==""&&(n[o.xsrfHeaderName]=H);const r=Object.assign({},o.headers,n,t.headers),u=Object.assign({},o.params,t.params),s=t.body,i=o.baseUrl+t.url,l=t.method;let c;l!=="get"&&(s instanceof FormData?(c=s,o.body!=null&&Object.entries(this.config.body).forEach(([h,d])=>{c.append(h,d)})):(c={...s},o.body!=null&&Object.assign(c,this.config.body)));const f={url:i,method:l,headers:r,params:u,body:c};if(o.transformRequest!=null){const h=o.transformRequest({url:i,method:l,headers:r,params:u,body:c});h.url!=null&&(f.url=h.url),h.method!=null&&(f.method=h.method),h.params!=null&&(f.params=h.params??{}),h.headers!=null&&(f.headers=h.headers??{}),h.body!=null&&(f.body=h.body)}return f}getDownloadUrl(t,o){if(o.url!=null)return o.url;const n=this.transformRequestParams({url:"",method:"get",params:{q:"download",adapter:t,path:o.path}});return n.url+"?"+new URLSearchParams(n.params).toString()}getPreviewUrl(t,o){if(o.url!=null)return o.url;const n=this.transformRequestParams({url:"",method:"get",params:{q:"preview",adapter:t,path:o.path}});return n.url+"?"+new URLSearchParams(n.params).toString()}async send(t){const o=this.transformRequestParams(t),n=t.responseType||"json",r={method:t.method,headers:o.headers,signal:t.abortSignal},u=o.url+"?"+new URLSearchParams(o.params);if(o.method!=="get"&&o.body!=null){let i;o.body instanceof FormData?i=t.body:(i=JSON.stringify(o.body),r.headers["Content-Type"]="application/json"),r.body=i}const s=await fetch(u,r);if(s.ok)return await s[n]();throw await s.json()}}function ge(a){const t={baseUrl:"",headers:{},params:{},body:{},xsrfHeaderName:"X-CSRF-Token"};return typeof a=="string"?Object.assign(t,{baseUrl:a}):Object.assign(t,a),new ve(t)}function ke(a){let t=localStorage.getItem(a+"_storage");const o=e.reactive(JSON.parse(t??"{}"));e.watch(o,n);function n(){Object.keys(o).length?localStorage.setItem(a+"_storage",JSON.stringify(o)):localStorage.removeItem(a+"_storage")}function r(l,c){o[l]=c}function u(l){delete o[l]}function s(){Object.keys(o).map(l=>u(l))}return{getStore:(l,c=null)=>o.hasOwnProperty(l)?o[l]:c,setStore:r,removeStore:u,clearStore:s}}async function _e(a,t){const o=t[a];return typeof o=="function"?(await o()).default:o}function xe(a,t,o,n){const{getStore:r,setStore:u}=a,s=e.ref({}),i=e.ref(r("locale",t)),l=(h,d=t)=>{_e(h,n).then(m=>{s.value=m,u("locale",h),i.value=h,u("translations",m),Object.values(n).length>1&&(o.emit("vf-toast-push",{label:"The language is set to "+h}),o.emit("vf-language-saved"))}).catch(m=>{d?(o.emit("vf-toast-push",{label:"The selected locale is not yet supported!",type:"error"}),l(d,null)):o.emit("vf-toast-push",{label:"Locale cannot be loaded!",type:"error"})})};!r("locale")&&!n.length?l(t):s.value=r("translations");const c=(h,...d)=>d.length?c(h=h.replace("%s",d.shift()),...d):h;function f(h,...d){return s.value&&s.value.hasOwnProperty(h)?c(s.value[h],...d):c(h,...d)}return{t:f,changeLocale:l,locale:i}}const C={EDIT:"edit",NEW_FILE:"newfile",NEW_FOLDER:"newfolder",PREVIEW:"preview",ARCHIVE:"archive",UNARCHIVE:"unarchive",SEARCH:"search",RENAME:"rename",UPLOAD:"upload",DELETE:"delete",FULL_SCREEN:"fullscreen",DOWNLOAD:"download",LANGUAGE:"language"},ye=Object.values(C),we="2.3.0";function J(a,t,o,n,r){return(t=Math,o=t.log,n=1024,r=o(a)/o(n)|0,a/t.pow(n,r)).toFixed(0)+" "+(r?"KMGTPEZY"[--r]+"iB":"B")}function Q(a,t,o,n,r){return(t=Math,o=t.log,n=1e3,r=o(a)/o(n)|0,a/t.pow(n,r)).toFixed(0)+" "+(r?"KMGTPEZY"[--r]+"B":"B")}function be(a){const t={k:1,m:2,g:3,t:4},n=/(\d+(?:\.\d+)?)\s?(k|m|g|t)?b?/i.exec(a);return n[1]*Math.pow(1024,t[n[2].toLowerCase()])}const A={SYSTEM:"system",LIGHT:"light",DARK:"dark"};function Ee(a,t){const o=e.ref(A.SYSTEM),n=e.ref(A.LIGHT);o.value=a.getStore("theme",t??A.SYSTEM);const r=window.matchMedia("(prefers-color-scheme: dark)"),u=s=>{o.value===A.DARK||o.value===A.SYSTEM&&s.matches?n.value=A.DARK:n.value=A.LIGHT};return u(r),r.addEventListener("change",u),{value:o,actualValue:n,set(s){o.value=s,s!==A.SYSTEM?a.setStore("theme",s):a.removeStore("theme"),u(r)}}}function Ve(){const a=e.shallowRef(null),t=e.ref(!1),o=e.ref();return{visible:t,type:a,data:o,open:(u,s=null)=>{t.value=!0,a.value=u,o.value=s},close:()=>{t.value=!1,a.value=null}}}function Ne(){let a;const t=e.ref(),o=Math.floor(Math.random()*2**32),n=e.ref(!1),r=e.ref([]),u=()=>r.value,s=()=>a.getSelection(),i=()=>r.value.length,l=()=>a.clearSelection(!0),c=e.ref();function f(){a=new ue({area:t.value,keyboardDrag:!1,selectedClass:"vf-explorer-selected",selectorClass:"vf-explorer-selector"}),a.subscribe("DS:start:pre",({items:m,event:p,isDragging:v})=>{if(v)a.Interaction._reset(p);else{const k=t.value.offsetWidth-p.offsetX,E=t.value.offsetHeight-p.offsetY;k<15&&E<15&&a.Interaction._reset(p)}}),document.addEventListener("dragleave",m=>{!m.buttons&&n.value&&(n.value=!1)})}const h=()=>e.nextTick(()=>{const m=u().map(p=>p.path);l(),a.setSettings({selectables:document.getElementsByClassName("vf-item-"+o)}),a.addSelection(a.getSelectables().filter(p=>m.includes(JSON.parse(p.dataset.item).path))),r.value=a.getSelection().map(p=>JSON.parse(p.dataset.item)),c.value(r.value)}),d=m=>{c.value=m,a.subscribe("DS:end",({items:p,event:v,isDragging:k})=>{r.value=p.map(E=>JSON.parse(E.dataset.item)),m(p.map(E=>JSON.parse(E.dataset.item)))})};return e.onMounted(()=>{f()}),e.onUnmounted(()=>{a&&a.stop()}),e.onUpdated(()=>{a&&a.Area.reset()}),{instance:a,area:t,explorerId:o,isDraggingRef:n,getSelected:u,getSelection:s,clearSelection:l,refreshSelection:h,getCount:i,onSelect:d}}function Be(a,t){const o=e.ref(a),n=e.ref(t),r=e.ref([]),u=e.ref([]),s=e.ref([]),i=e.ref(!1),l=e.ref(5);let c=!1,f=!1;const h=e.reactive({adapter:o,storages:[],dirname:n,files:[]});function d(){let _=[],x=[],M=n.value??o.value+"://";M.length===0&&(r.value=[]),M.replace(o.value+"://","").split("/").forEach(function(w){_.push(w),_.join("/")!==""&&x.push({basename:w,name:w,path:o.value+"://"+_.join("/"),type:"dir"})}),u.value=x;const[b,y]=p(x,l.value);s.value=y,r.value=b}function m(_){l.value=_,d()}function p(_,x){return _.length>x?[_.slice(-x),_.slice(0,-x)]:[_,[]]}function v(_=null){i.value=_??!i.value}function k(){return r.value&&r.value.length&&!f}const E=e.computed(()=>{var _;return((_=r.value[r.value.length-2])==null?void 0:_.path)??o.value+"://"});return e.onMounted(()=>{}),e.watch(n,d),e.onMounted(d),{adapter:o,path:n,loading:c,searchMode:f,data:h,breadcrumbs:r,breadcrumbItems:u,limitBreadcrumbItems:m,hiddenBreadcrumbs:s,showHiddenBreadcrumbs:i,toggleHiddenBreadcrumbs:v,isGoUpAvailable:k,parentFolderPath:E}}const $e=(a,t)=>{const o=ke(a.id),n=de(),r=o.getStore("metricUnits",!1),u=Ee(o,a.theme),s=t.i18n,i=a.locale??t.locale,l=o.getStore("adapter"),c=d=>Array.isArray(d)?d:ye,f=o.getStore("persist-path",a.persist),h=f?o.getStore("path",a.path):a.path;return e.reactive({version:we,root:null,debug:a.debug,emitter:n,storage:o,i18n:e.computed(()=>xe(o,i,n,s)),modal:Ve(),dragSelect:e.computed(()=>Ne()),requester:ge(a.request),features:c(a.features),view:o.getStore("viewport","grid"),fullScreen:o.getStore("full-screen",a.fullScreen),selectButton:a.selectButton,maxFileSize:a.maxFileSize,theme:u,metricUnits:r,filesize:r?Q:J,compactListView:o.getStore("compact-list-view",!0),persist:f,showThumbnails:o.getStore("show-thumbnails",a.showThumbnails),fs:Be(l,h)})},Se=e.createElementVNode("div",{class:"fixed inset-0 bg-gray-500 dark:bg-gray-600 dark:bg-opacity-75 bg-opacity-75 transition-opacity"},null,-1),Ce={class:"fixed z-10 inset-0 overflow-hidden"},De={class:"relative bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:max-w-4xl md:max-w-2xl lg:max-w-3xl xl:max-w-3xl w-full"},Me={class:"bg-white dark:bg-gray-800 px-4 pt-5 pb-4 sm:p-6 sm:pb-4"},Te={class:"bg-gray-50 dark:bg-gray-800 dark:border-t dark:border-gray-700 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"},T={__name:"ModalLayout",setup(a){const t=e.inject("ServiceContainer");return e.onMounted(()=>{const o=document.querySelector(".v-f-modal input");setTimeout(()=>o&&o.focus(),100)}),(o,n)=>(e.openBlock(),e.createElementBlock("div",{class:"v-f-modal relative z-30","aria-labelledby":"modal-title",role:"dialog","aria-modal":"true",onKeyup:n[1]||(n[1]=e.withKeys(r=>e.unref(t).modal.close(),["esc"])),tabindex:"0"},[Se,e.createElementVNode("div",Ce,[e.createElementVNode("div",{class:"flex items-end sm:items-center justify-center min-h-full p-4 text-center sm:p-0",onMousedown:n[0]||(n[0]=e.withModifiers(r=>e.unref(t).modal.close(),["self"]))},[e.createElementVNode("div",De,[e.createElementVNode("div",Me,[e.renderSlot(o.$slots,"default")]),e.createElementVNode("div",Te,[e.renderSlot(o.$slots,"buttons")])])],32)])],32))}},Le=["aria-label"],Ae=e.createElementVNode("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24","stroke-width":"1.5",stroke:"currentColor",class:"w-5 h-5"},[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M6 18L18 6M6 6l12 12"})],-1),je=[Ae],L={__name:"Message",props:{error:{type:Boolean,default:!1}},emits:["hidden"],setup(a,{emit:t}){var c;const o=t,n=e.inject("ServiceContainer"),{t:r}=n.i18n,u=e.ref(!1),s=e.ref(null),i=e.ref((c=s.value)==null?void 0:c.strMessage);e.watch(i,()=>u.value=!1);const l=()=>{o("hidden"),u.value=!0};return(f,h)=>(e.openBlock(),e.createElementBlock("div",null,[u.value?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",{key:0,ref_key:"strMessage",ref:s,class:e.normalizeClass(["flex mt-2 p-1 px-2 rounded text-sm break-all dark:opacity-75",a.error?"bg-red-100 text-red-600 ":"bg-emerald-100 text-emerald-600"])},[e.renderSlot(f.$slots,"default"),e.createElementVNode("div",{class:"ml-auto cursor-pointer",onClick:l,"aria-label":e.unref(r)("Close"),"data-microtip-position":"top-left",role:"tooltip"},je,8,Le)],2))]))}},Fe={class:"sm:flex sm:items-start"},Ue=e.createElementVNode("div",{class:"mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-50 dark:bg-gray-500 sm:mx-0 sm:h-10 sm:w-10"},[e.createElementVNode("svg",{xmlns:"http://www.w3.org/2000/svg",class:"h-6 w-6 stroke-blue-600 dark:stroke-blue-100",fill:"none",viewBox:"0 0 24 24",stroke:"none","stroke-width":"1.5"},[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z"})])],-1),ze={class:"mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full"},Ie={class:"text-lg leading-6 font-medium text-gray-900 dark:text-gray-400",id:"modal-title"},Re={class:"mt-2"},He={class:"text-sm text-gray-500"},qe=["placeholder"],X={__name:"ModalNewFolder",setup(a){const t=e.inject("ServiceContainer");t.storage;const{t:o}=t.i18n,n=e.ref(""),r=e.ref(""),u=()=>{n.value!==""&&t.emitter.emit("vf-fetch",{params:{q:"newfolder",m:"post",adapter:t.fs.adapter,path:t.fs.data.dirname},body:{name:n.value},onSuccess:()=>{t.emitter.emit("vf-toast-push",{label:o("%s is created.",n.value)})},onError:s=>{r.value=o(s.message)}})};return(s,i)=>(e.openBlock(),e.createBlock(T,null,{buttons:e.withCtx(()=>[e.createElementVNode("button",{type:"button",onClick:u,class:"vf-btn vf-btn-primary"},e.toDisplayString(e.unref(o)("Create")),1),e.createElementVNode("button",{type:"button",onClick:i[2]||(i[2]=l=>e.unref(t).modal.close()),class:"vf-btn vf-btn-secondary"},e.toDisplayString(e.unref(o)("Cancel")),1)]),default:e.withCtx(()=>[e.createElementVNode("div",Fe,[Ue,e.createElementVNode("div",ze,[e.createElementVNode("h3",Ie,e.toDisplayString(e.unref(o)("New Folder")),1),e.createElementVNode("div",Re,[e.createElementVNode("p",He,e.toDisplayString(e.unref(o)("Create a new folder")),1),e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":i[0]||(i[0]=l=>n.value=l),onKeyup:e.withKeys(u,["enter"]),class:"px-2 py-1 border rounded dark:bg-gray-700/25 dark:focus:ring-gray-600 dark:focus:border-gray-600 dark:text-gray-100 w-full",placeholder:e.unref(o)("Folder Name"),type:"text"},null,40,qe),[[e.vModelText,n.value]]),r.value.length?(e.openBlock(),e.createBlock(L,{key:0,onHidden:i[1]||(i[1]=l=>r.value=""),error:""},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(r.value),1)]),_:1})):e.createCommentVNode("",!0)])])])]),_:1}))}},Oe={class:"sm:flex sm:items-start"},Pe=e.createElementVNode("div",{class:"mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-50 dark:bg-gray-500 sm:mx-0 sm:h-10 sm:w-10"},[e.createElementVNode("svg",{xmlns:"http://www.w3.org/2000/svg",class:"h-6 w-6 stroke-blue-600 dark:stroke-blue-100",fill:"none",viewBox:"0 0 24 24",stroke:"none","stroke-width":"1.5"},[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"})])],-1),Ge={class:"mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full"},We={class:"text-lg leading-6 font-medium text-gray-900 dark:text-gray-400",id:"modal-title"},Ke={class:"mt-2"},Ye={class:"text-sm text-gray-500"},Je=["placeholder"],Qe={__name:"ModalNewFile",setup(a){const t=e.inject("ServiceContainer");t.storage;const{t:o}=t.i18n,n=e.ref(""),r=e.ref(""),u=()=>{n.value!==""&&t.emitter.emit("vf-fetch",{params:{q:"newfile",m:"post",adapter:t.fs.adapter,path:t.fs.data.dirname},body:{name:n.value},onSuccess:()=>{t.emitter.emit("vf-toast-push",{label:o("%s is created.",n.value)})},onError:s=>{r.value=o(s.message)}})};return(s,i)=>(e.openBlock(),e.createBlock(T,null,{buttons:e.withCtx(()=>[e.createElementVNode("button",{type:"button",onClick:u,class:"vf-btn vf-btn-primary"},e.toDisplayString(e.unref(o)("Create")),1),e.createElementVNode("button",{type:"button",onClick:i[2]||(i[2]=l=>e.unref(t).modal.close()),class:"vf-btn vf-btn-secondary"},e.toDisplayString(e.unref(o)("Cancel")),1)]),default:e.withCtx(()=>[e.createElementVNode("div",Oe,[Pe,e.createElementVNode("div",Ge,[e.createElementVNode("h3",We,e.toDisplayString(e.unref(o)("New File")),1),e.createElementVNode("div",Ke,[e.createElementVNode("p",Ye,e.toDisplayString(e.unref(o)("Create a new file")),1),e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":i[0]||(i[0]=l=>n.value=l),onKeyup:e.withKeys(u,["enter"]),class:"px-2 py-1 border rounded dark:bg-gray-700/25 dark:focus:ring-gray-600 dark:focus:border-gray-600 dark:text-gray-100 w-full",placeholder:e.unref(o)("File Name"),type:"text"},null,40,Je),[[e.vModelText,n.value]]),r.value.length?(e.openBlock(),e.createBlock(L,{key:0,onHidden:i[1]||(i[1]=l=>r.value=""),error:""},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(r.value),1)]),_:1})):e.createCommentVNode("",!0)])])])]),_:1}))}},Xe={class:"sm:flex sm:items-start"},Ze=e.createElementVNode("div",{class:"mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-50 dark:bg-gray-500 sm:mx-0 sm:h-10 sm:w-10"},[e.createElementVNode("svg",{xmlns:"http://www.w3.org/2000/svg",class:"h-6 w-6 stroke-blue-600 dark:stroke-blue-100",fill:"none",viewBox:"0 0 24 24",stroke:"none","stroke-width":"1.5"},[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"})])],-1),et={class:"mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full"},tt={class:"text-lg leading-6 font-medium text-gray-900 dark:text-gray-400",id:"modal-title"},ot={class:"mt-2"},rt={class:"flex text-sm text-gray-800 dark:text-gray-400 py-2"},nt={key:0,xmlns:"http://www.w3.org/2000/svg",class:"h-5 w-5 text-neutral-500 fill-sky-500 stroke-sky-500 dark:fill-slate-500 dark:stroke-slate-500",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor","stroke-width":"1"},at=e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"},null,-1),st=[at],lt={key:1,xmlns:"http://www.w3.org/2000/svg",class:"h-5 w-5 text-neutral-500",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor","stroke-width":"1"},it=e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"},null,-1),ct=[it],dt={class:"ml-1.5"},Z={__name:"ModalRename",setup(a){const t=e.inject("ServiceContainer"),{t:o}=t.i18n,n=e.ref(t.modal.data.items[0]),r=e.ref(t.modal.data.items[0].basename),u=e.ref(""),s=()=>{r.value!=""&&t.emitter.emit("vf-fetch",{params:{q:"rename",m:"post",adapter:t.fs.adapter,path:t.fs.data.dirname},body:{item:n.value.path,name:r.value},onSuccess:()=>{t.emitter.emit("vf-toast-push",{label:o("%s is renamed.",r.value)})},onError:i=>{u.value=o(i.message)}})};return(i,l)=>(e.openBlock(),e.createBlock(T,null,{buttons:e.withCtx(()=>[e.createElementVNode("button",{type:"button",onClick:s,class:"vf-btn vf-btn-primary"},e.toDisplayString(e.unref(o)("Rename")),1),e.createElementVNode("button",{type:"button",onClick:l[2]||(l[2]=c=>e.unref(t).modal.close()),class:"vf-btn vf-btn-secondary"},e.toDisplayString(e.unref(o)("Cancel")),1)]),default:e.withCtx(()=>[e.createElementVNode("div",Xe,[Ze,e.createElementVNode("div",et,[e.createElementVNode("h3",tt,e.toDisplayString(e.unref(o)("Rename")),1),e.createElementVNode("div",ot,[e.createElementVNode("p",rt,[n.value.type==="dir"?(e.openBlock(),e.createElementBlock("svg",nt,st)):(e.openBlock(),e.createElementBlock("svg",lt,ct)),e.createElementVNode("span",dt,e.toDisplayString(n.value.basename),1)]),e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":l[0]||(l[0]=c=>r.value=c),onKeyup:e.withKeys(s,["enter"]),class:"px-2 py-1 border rounded dark:bg-gray-700/25 dark:focus:ring-gray-600 dark:focus:border-gray-600 dark:text-gray-100 w-full",placeholder:"Name",type:"text"},null,544),[[e.vModelText,r.value]]),u.value.length?(e.openBlock(),e.createBlock(L,{key:0,onHidden:l[1]||(l[1]=c=>u.value=""),error:""},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(u.value),1)]),_:1})):e.createCommentVNode("",!0)])])])]),_:1}))}},ut={class:"sm:flex sm:items-start"},mt=e.createElementVNode("div",{class:"mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 dark:bg-gray-500 sm:mx-0 sm:h-10 sm:w-10"},[e.createElementVNode("svg",{xmlns:"http://www.w3.org/2000/svg",class:"h-6 w-6 stroke-red-600 dark:stroke-red-200",fill:"none",viewBox:"0 0 24 24",stroke:"none","stroke-width":"1.5"},[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"})])],-1),ft={class:"mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full"},pt={class:"text-lg leading-6 font-medium text-gray-900 dark:text-gray-400",id:"modal-title"},ht={class:"mt-2"},vt={class:"text-sm text-gray-500"},gt={class:"text-gray-500 text-sm mb-1 overflow-auto vf-scrollbar",style:{"max-height":"200px"}},kt={class:"flex text-sm text-gray-800 dark:text-gray-400"},_t={key:0,xmlns:"http://www.w3.org/2000/svg",class:"h-5 w-5 text-neutral-500 fill-sky-500 stroke-sky-500 dark:fill-slate-500 dark:stroke-slate-500",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor","stroke-width":"1"},xt=e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"},null,-1),yt=[xt],wt={key:1,xmlns:"http://www.w3.org/2000/svg",class:"h-5 w-5 text-neutral-500",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor","stroke-width":"1"},bt=e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"},null,-1),Et=[bt],Vt={class:"ml-1.5"},Nt={class:"m-auto font-bold text-red-500 text-sm dark:text-red-200 text-center"},ee={__name:"ModalDelete",setup(a){const t=e.inject("ServiceContainer"),{t:o}=t.i18n,n=e.ref(t.modal.data.items),r=e.ref(""),u=()=>{n.value.length&&t.emitter.emit("vf-fetch",{params:{q:"delete",m:"post",adapter:t.fs.adapter,path:t.fs.data.dirname},body:{items:n.value.map(({path:s,type:i})=>({path:s,type:i}))},onSuccess:()=>{t.emitter.emit("vf-toast-push",{label:o("Files deleted.")})},onError:s=>{r.value=o(s.message)}})};return(s,i)=>(e.openBlock(),e.createBlock(T,null,{buttons:e.withCtx(()=>[e.createElementVNode("button",{type:"button",onClick:u,class:"vf-btn vf-btn-danger"},e.toDisplayString(e.unref(o)("Yes, Delete!")),1),e.createElementVNode("button",{type:"button",onClick:i[1]||(i[1]=l=>e.unref(t).modal.close()),class:"vf-btn vf-btn-secondary"},e.toDisplayString(e.unref(o)("Cancel")),1),e.createElementVNode("div",Nt,e.toDisplayString(e.unref(o)("This action cannot be undone.")),1)]),default:e.withCtx(()=>[e.createElementVNode("div",ut,[mt,e.createElementVNode("div",ft,[e.createElementVNode("h3",pt,e.toDisplayString(e.unref(o)("Delete files")),1),e.createElementVNode("div",ht,[e.createElementVNode("p",vt,e.toDisplayString(e.unref(o)("Are you sure you want to delete these files?")),1),e.createElementVNode("div",gt,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.value,l=>(e.openBlock(),e.createElementBlock("p",kt,[l.type==="dir"?(e.openBlock(),e.createElementBlock("svg",_t,yt)):(e.openBlock(),e.createElementBlock("svg",wt,Et)),e.createElementVNode("span",Vt,e.toDisplayString(l.basename),1)]))),256))]),r.value.length?(e.openBlock(),e.createBlock(L,{key:0,onHidden:i[0]||(i[0]=l=>r.value=""),error:""},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(r.value),1)]),_:1})):e.createCommentVNode("",!0)])])])]),_:1}))}};function P(a,t=14){let o=`((?=([\\w\\W]{0,${t}}))([\\w\\W]{${t+1},})([\\w\\W]{8,}))`;return a.replace(new RegExp(o),"$2..$4")}const Bt={class:"sm:flex sm:items-start"},$t=e.createElementVNode("div",{class:"mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-50 dark:bg-gray-500 sm:mx-0 sm:h-10 sm:w-10"},[e.createElementVNode("svg",{xmlns:"http://www.w3.org/2000/svg",class:"h-6 w-6 stroke-blue-600 dark:stroke-blue-100",fill:"none",viewBox:"0 0 24 24",stroke:"none","stroke-width":"1.5"},[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"})])],-1),St={class:"mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full"},Ct={class:"text-lg leading-6 font-medium text-gray-900 dark:text-gray-400",id:"modal-title"},Dt={class:"mt-2"},Mt={key:0,class:"pointer-events-none"},Tt={key:1,class:"pointer-events-none"},Lt=["disabled"],At=["disabled"],jt={class:"text-gray-500 text-sm mb-1 pr-1 max-h-[200px] overflow-y-auto vf-scrollbar"},Ft={class:"rounded flex flex-shrink-0 w-6 h-6 border bg-gray-50 text-xs cursor-default dark:border-gray-700 dark:bg-gray-800 dark:text-gray-50"},Ut=["textContent"],zt={class:"ml-1 w-full h-fit"},It={class:"text-left hidden md:block"},Rt={class:"text-left md:hidden"},Ht={key:0,class:"ml-auto"},qt=["title","disabled","onClick"],Ot=e.createElementVNode("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24","stroke-width":"1.5",stroke:"currentColor",class:"w-5 h-5"},[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M6 18L18 6M6 6l12 12"})],-1),Pt=[Ot],Gt={key:0,class:"py-2"},Wt=["disabled"],Kt={__name:"ModalUpload",setup(a){const t=e.inject("ServiceContainer"),{t:o}=t.i18n,n=o("uppy"),r={PENDING:0,CANCELED:1,UPLOADING:2,ERROR:3,DONE:10},u=e.ref({QUEUE_ENTRY_STATUS:r}),s=e.ref(null),i=e.ref(null),l=e.ref(null),c=e.ref(null),f=e.ref(null),h=e.ref(null),d=e.ref([]),m=e.ref(""),p=e.ref(!1),v=e.ref(!1);let k;function E(B){return d.value.findIndex(D=>D.id===B)}function _(B,D=null){D=D??(B.webkitRelativePath||B.name),k.addFile({name:D,type:B.type,data:B,source:"Local"})}function x(B){switch(B.status){case r.DONE:return"text-green-600";case r.ERROR:return"text-red-600";case r.CANCELED:return"text-red-600";case r.PENDING:default:return""}}const M=B=>{switch(B.status){case r.DONE:return"✓";case r.ERROR:case r.CANCELED:return"!";case r.PENDING:default:return"..."}};function b(){c.value.click()}function y(){if(!p.value){if(!d.value.filter(B=>B.status!==r.DONE).length){m.value=o("Please select file to upload first.");return}m.value="",k.retryAll(),k.upload()}}function w(){k.cancelAll({reason:"user"}),d.value.forEach(B=>{B.status!==r.DONE&&(B.status=r.CANCELED,B.statusName=o("Canceled"))}),p.value=!1}function $(B){p.value||(k.removeFile(B.id,"removed-by-user"),d.value.splice(E(B.id),1))}function S(B){if(!p.value){if(k.cancelAll({reason:"user"}),B){const D=[];d.value.forEach(g=>{g.status!==r.DONE&&D.push(g)}),d.value=[],D.forEach(g=>{_(g.originalFile,g.name)});return}d.value.splice(0)}}function z(){t.modal.close()}function F(){return t.requester.transformRequestParams({url:"",method:"post",params:{q:"upload",adapter:t.fs.adapter,path:t.fs.data.dirname}})}return e.onMounted(async()=>{k=new me({debug:t.debug,restrictions:{maxFileSize:be(t.maxFileSize)},locale:n,onBeforeFileAdded(g,V){if(V[g.id]!=null){const j=E(g.id);d.value[j].status===r.PENDING&&(m.value=k.i18n("noDuplicates",{fileName:g.name})),d.value=d.value.filter(R=>R.id!==g.id)}return d.value.push({id:g.id,name:g.name,size:t.filesize(g.size),status:r.PENDING,statusName:o("Pending upload"),percent:null,originalFile:g.data}),!0}}),k.use(fe,{endpoint:"WILL_BE_REPLACED_BEFORE_UPLOAD",limit:5,timeout:0,getResponseError(g,V){let N;try{N=JSON.parse(g).message}catch{N=o("Cannot parse server response.")}return new Error(N)}}),k.on("restriction-failed",(g,V)=>{const N=d.value[E(g.id)];$(N),m.value=V.message}),k.on("upload",()=>{const g=F();k.setMeta({...g.body});const V=k.getPlugin("XHRUpload");V.opts.method=g.method,V.opts.endpoint=g.url+"?"+new URLSearchParams(g.params),V.opts.headers=g.headers,p.value=!0,d.value.forEach(N=>{N.status!==r.DONE&&(N.percent=null,N.status=r.UPLOADING,N.statusName=o("Pending upload"))})}),k.on("upload-progress",(g,V)=>{const N=Math.floor(V.bytesUploaded/V.bytesTotal*100);d.value[E(g.id)].percent=`${N}%`}),k.on("upload-success",g=>{const V=d.value[E(g.id)];V.status=r.DONE,V.statusName=o("Done")}),k.on("upload-error",(g,V)=>{const N=d.value[E(g.id)];N.percent=null,N.status=r.ERROR,V.isNetworkError?N.statusName=o("Network Error, Unable establish connection to the server or interrupted."):N.statusName=V?V.message:o("Unknown Error")}),k.on("error",g=>{m.value=g.message,p.value=!1,t.emitter.emit("vf-fetch",{params:{q:"index",adapter:t.fs.adapter,path:t.fs.data.dirname},noCloseModal:!0})}),k.on("complete",()=>{p.value=!1,t.emitter.emit("vf-fetch",{params:{q:"index",adapter:t.fs.adapter,path:t.fs.data.dirname},noCloseModal:!0})}),c.value.addEventListener("click",()=>{i.value.click()}),f.value.addEventListener("click",()=>{l.value.click()}),h.value.addEventListener("dragover",g=>{g.preventDefault(),v.value=!0}),h.value.addEventListener("dragleave",g=>{g.preventDefault(),v.value=!1});function B(g,V){V.isFile&&V.file(N=>g(V,N)),V.isDirectory&&V.createReader().readEntries(N=>{N.forEach(j=>{B(g,j)})})}h.value.addEventListener("drop",g=>{g.preventDefault(),v.value=!1;const V=/^[/\\](.+)/;[...g.dataTransfer.items].forEach(N=>{N.kind==="file"&&B((j,R)=>{const le=V.exec(j.fullPath);_(R,le[1])},N.webkitGetAsEntry())})});const D=({target:g})=>{const V=g.files;for(const N of V)_(N);g.value=""};i.value.addEventListener("change",D),l.value.addEventListener("change",D)}),e.onBeforeUnmount(()=>{k==null||k.close({reason:"unmount"})}),(B,D)=>(e.openBlock(),e.createBlock(T,null,{buttons:e.withCtx(()=>[e.createElementVNode("button",{type:"button",class:e.normalizeClass(["vf-btn vf-btn-primary",p.value?"bg-blue-200 hover:bg-blue-200 dark:bg-gray-700/50 dark:hover:bg-gray-700/50 dark:text-gray-500":"bg-blue-600 hover:bg-blue-700 dark:bg-gray-700 dark:hover:bg-gray-500"]),disabled:p.value,onClick:e.withModifiers(y,["prevent"])},e.toDisplayString(e.unref(o)("Upload")),11,Wt),p.value?(e.openBlock(),e.createElementBlock("button",{key:0,type:"button",class:"vf-btn vf-btn-secondary",onClick:e.withModifiers(w,["prevent"])},e.toDisplayString(e.unref(o)("Cancel")),1)):(e.openBlock(),e.createElementBlock("button",{key:1,type:"button",class:"vf-btn vf-btn-secondary",onClick:e.withModifiers(z,["prevent"])},e.toDisplayString(e.unref(o)("Close")),1))]),default:e.withCtx(()=>[e.createElementVNode("div",Bt,[$t,e.createElementVNode("div",St,[e.createElementVNode("h3",Ct,e.toDisplayString(e.unref(o)("Upload Files")),1),e.createElementVNode("div",Dt,[e.createElementVNode("div",{ref_key:"dropArea",ref:h,class:"flex items-center justify-center text-lg mb-4 text-gray-500 border-2 border-gray-300 rounded border-dashed select-none cursor-pointer dark:border-gray-600 h-[120px]",onClick:b},[v.value?(e.openBlock(),e.createElementBlock("div",Mt,e.toDisplayString(e.unref(o)("Release to drop these files.")),1)):(e.openBlock(),e.createElementBlock("div",Tt,e.toDisplayString(e.unref(o)("Drag and drop the files/folders to here or click here.")),1))],512),e.createElementVNode("div",{ref_key:"container",ref:s,class:"text-gray-500 mb-1"},[e.createElementVNode("button",{ref_key:"pickFiles",ref:c,type:"button",class:"vf-btn vf-btn-secondary"},e.toDisplayString(e.unref(o)("Select Files")),513),e.createElementVNode("button",{ref_key:"pickFolders",ref:f,type:"button",class:"vf-btn vf-btn-secondary"},e.toDisplayString(e.unref(o)("Select Folders")),513),e.createElementVNode("button",{type:"button",class:"vf-btn vf-btn-secondary",disabled:p.value,onClick:D[0]||(D[0]=g=>S(!1))},e.toDisplayString(e.unref(o)("Clear all")),9,Lt),e.createElementVNode("button",{type:"button",class:"vf-btn vf-btn-secondary",disabled:p.value,onClick:D[1]||(D[1]=g=>S(!0))},e.toDisplayString(e.unref(o)("Clear only successful")),9,At)],512),e.createElementVNode("div",jt,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(d.value,g=>(e.openBlock(),e.createElementBlock("div",{class:"flex hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-gray-300",key:g.id},[e.createElementVNode("span",Ft,[e.createElementVNode("span",{class:e.normalizeClass(["text-base m-auto",x(g)]),textContent:e.toDisplayString(M(g))},null,10,Ut)]),e.createElementVNode("div",zt,[e.createElementVNode("div",It,e.toDisplayString(e.unref(P)(g.name,40))+" ("+e.toDisplayString(g.size)+")",1),e.createElementVNode("div",Rt,e.toDisplayString(e.unref(P)(g.name,16))+" ("+e.toDisplayString(g.size)+")",1),e.createElementVNode("div",{class:e.normalizeClass(["flex break-all text-left",x(g)])},[e.createTextVNode(e.toDisplayString(g.statusName)+" ",1),g.status===u.value.QUEUE_ENTRY_STATUS.UPLOADING?(e.openBlock(),e.createElementBlock("b",Ht,e.toDisplayString(g.percent),1)):e.createCommentVNode("",!0)],2)]),e.createElementVNode("button",{type:"button",class:e.normalizeClass(["rounded w-5 h-5 border-1 text-base leading-none font-medium focus:outline-none dark:border-gray-200 dark:text-gray-400 dark:hover:text-gray-200 dark:bg-gray-600 ml-auto sm:text-xs hover:text-red-600",p.value?"disabled:bg-gray-100 text-white text-opacity-50":"bg-gray-100"]),title:e.unref(o)("Delete"),disabled:p.value,onClick:V=>$(g)},Pt,10,qt)]))),128)),d.value.length?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",Gt,e.toDisplayString(e.unref(o)("No files selected!")),1))]),m.value.length?(e.openBlock(),e.createBlock(L,{key:0,onHidden:D[2]||(D[2]=g=>m.value=""),error:""},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(m.value),1)]),_:1})):e.createCommentVNode("",!0)])])]),e.createElementVNode("input",{ref_key:"internalFileInput",ref:i,type:"file",multiple:"",class:"hidden"},null,512),e.createElementVNode("input",{ref_key:"internalFolderInput",ref:l,type:"file",multiple:"",webkitdirectory:"",class:"hidden"},null,512)]),_:1}))}},Yt={class:"sm:flex sm:items-start"},Jt=e.createElementVNode("div",{class:"mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-50 dark:bg-gray-500 sm:mx-0 sm:h-10 sm:w-10"},[e.createElementVNode("svg",{xmlns:"http://www.w3.org/2000/svg",class:"h-6 w-6 stroke-blue-600 dark:stroke-blue-100",fill:"none",viewBox:"0 0 24 24",stroke:"none","stroke-width":"1.5"},[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5m6 4.125l2.25 2.25m0 0l2.25 2.25M12 13.875l2.25-2.25M12 13.875l-2.25 2.25M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z"})])],-1),Qt={class:"mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full"},Xt={class:"text-lg leading-6 font-medium text-gray-900 dark:text-gray-400",id:"modal-title"},Zt={class:"mt-2"},eo={class:"flex text-sm text-gray-800 dark:text-gray-400"},to={key:0,xmlns:"http://www.w3.org/2000/svg",class:"h-5 w-5 text-neutral-500 fill-sky-500 stroke-sky-500 dark:fill-slate-500 dark:stroke-slate-500",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor","stroke-width":"1"},oo=e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"},null,-1),ro=[oo],no={key:1,xmlns:"http://www.w3.org/2000/svg",class:"h-5 w-5 text-neutral-500",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor","stroke-width":"1"},ao=e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"},null,-1),so=[ao],lo={class:"ml-1.5"},io={class:"my-1 text-sm text-gray-500"},te={__name:"ModalUnarchive",setup(a){const t=e.inject("ServiceContainer"),{t:o}=t.i18n,n=e.ref(t.modal.data.items[0]),r=e.ref(""),u=e.ref([]),s=()=>{t.emitter.emit("vf-fetch",{params:{q:"unarchive",m:"post",adapter:t.fs.adapter,path:t.fs.data.dirname},body:{item:n.value.path},onSuccess:()=>{t.emitter.emit("vf-toast-push",{label:o("The file unarchived.")})},onError:i=>{r.value=o(i.message)}})};return(i,l)=>(e.openBlock(),e.createBlock(T,null,{buttons:e.withCtx(()=>[e.createElementVNode("button",{type:"button",onClick:s,class:"vf-btn vf-btn-primary"},e.toDisplayString(e.unref(o)("Unarchive")),1),e.createElementVNode("button",{type:"button",onClick:l[1]||(l[1]=c=>e.unref(t).modal.close()),class:"vf-btn vf-btn-secondary"},e.toDisplayString(e.unref(o)("Cancel")),1)]),default:e.withCtx(()=>[e.createElementVNode("div",Yt,[Jt,e.createElementVNode("div",Qt,[e.createElementVNode("h3",Xt,e.toDisplayString(e.unref(o)("Unarchive")),1),e.createElementVNode("div",Zt,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(u.value,c=>(e.openBlock(),e.createElementBlock("p",eo,[c.type==="dir"?(e.openBlock(),e.createElementBlock("svg",to,ro)):(e.openBlock(),e.createElementBlock("svg",no,so)),e.createElementVNode("span",lo,e.toDisplayString(c.basename),1)]))),256)),e.createElementVNode("p",io,e.toDisplayString(e.unref(o)("The archive will be unarchived at"))+" ("+e.toDisplayString(e.unref(t).fs.data.dirname)+")",1),r.value.length?(e.openBlock(),e.createBlock(L,{key:0,onHidden:l[0]||(l[0]=c=>r.value=""),error:""},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(r.value),1)]),_:1})):e.createCommentVNode("",!0)])])])]),_:1}))}},co={class:"sm:flex sm:items-start"},uo=e.createElementVNode("div",{class:"mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-50 dark:bg-gray-500 sm:mx-0 sm:h-10 sm:w-10"},[e.createElementVNode("svg",{xmlns:"http://www.w3.org/2000/svg",class:"h-6 w-6 stroke-blue-600 dark:stroke-blue-100",fill:"none",viewBox:"0 0 24 24",stroke:"none","stroke-width":"1.5"},[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z"})])],-1),mo={class:"mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full"},fo={class:"text-lg leading-6 font-medium text-gray-900 dark:text-gray-400",id:"modal-title"},po={class:"mt-2"},ho={class:"text-gray-500 text-sm mb-1 overflow-auto vf-scrollbar",style:{"max-height":"200px"}},vo={class:"flex text-sm text-gray-800 dark:text-gray-400"},go={key:0,xmlns:"http://www.w3.org/2000/svg",class:"h-5 w-5 text-neutral-500 fill-sky-500 stroke-sky-500 dark:fill-slate-500 dark:stroke-slate-500",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor","stroke-width":"1"},ko=e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"},null,-1),_o=[ko],xo={key:1,xmlns:"http://www.w3.org/2000/svg",class:"h-5 w-5 text-neutral-500",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor","stroke-width":"1"},yo=e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"},null,-1),wo=[yo],bo={class:"ml-1.5"},Eo=["placeholder"],oe={__name:"ModalArchive",setup(a){const t=e.inject("ServiceContainer"),{t:o}=t.i18n,n=e.ref(""),r=e.ref(""),u=e.ref(t.modal.data.items),s=()=>{u.value.length&&t.emitter.emit("vf-fetch",{params:{q:"archive",m:"post",adapter:t.fs.adapter,path:t.fs.data.dirname},body:{items:u.value.map(({path:i,type:l})=>({path:i,type:l})),name:n.value},onSuccess:()=>{t.emitter.emit("vf-toast-push",{label:o("The file(s) archived.")})},onError:i=>{r.value=o(i.message)}})};return(i,l)=>(e.openBlock(),e.createBlock(T,null,{buttons:e.withCtx(()=>[e.createElementVNode("button",{type:"button",onClick:s,class:"vf-btn vf-btn-primary"},e.toDisplayString(e.unref(o)("Archive")),1),e.createElementVNode("button",{type:"button",onClick:l[2]||(l[2]=c=>e.unref(t).modal.close()),class:"vf-btn vf-btn-secondary"},e.toDisplayString(e.unref(o)("Cancel")),1)]),default:e.withCtx(()=>[e.createElementVNode("div",co,[uo,e.createElementVNode("div",mo,[e.createElementVNode("h3",fo,e.toDisplayString(e.unref(o)("Archive the files")),1),e.createElementVNode("div",po,[e.createElementVNode("div",ho,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(u.value,c=>(e.openBlock(),e.createElementBlock("p",vo,[c.type==="dir"?(e.openBlock(),e.createElementBlock("svg",go,_o)):(e.openBlock(),e.createElementBlock("svg",xo,wo)),e.createElementVNode("span",bo,e.toDisplayString(c.basename),1)]))),256))]),e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":l[0]||(l[0]=c=>n.value=c),onKeyup:e.withKeys(s,["enter"]),class:"my-1 px-2 py-1 border rounded dark:bg-gray-700/25 dark:focus:ring-gray-600 dark:focus:border-gray-600 dark:text-gray-100 w-full",placeholder:e.unref(o)("Archive name. (.zip file will be created)"),type:"text"},null,40,Eo),[[e.vModelText,n.value]]),r.value.length?(e.openBlock(),e.createBlock(L,{key:0,onHidden:l[1]||(l[1]=c=>r.value=""),error:""},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(r.value),1)]),_:1})):e.createCommentVNode("",!0)])])])]),_:1}))}},Vo={xmlns:"http://www.w3.org/2000/svg",fill:"none","stroke-width":"1.5",class:"h-6 w-6 md:h-8 md:w-8 m-auto vf-toolbar-icon",viewBox:"0 0 24 24"},No=e.createElementVNode("path",{d:"M12 10.5v6m3-3H9m4.06-7.19-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44z"},null,-1),Bo=[No];function $o(a,t){return e.openBlock(),e.createElementBlock("svg",Vo,[...Bo])}const So={render:$o},Co={xmlns:"http://www.w3.org/2000/svg",fill:"none","stroke-width":"1.5",class:"h-6 w-6 md:h-8 md:w-8 m-auto vf-toolbar-icon",viewBox:"0 0 24 24"},Do=e.createElementVNode("path",{d:"M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m3.75 9v6m3-3H9m1.5-12H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9"},null,-1),Mo=[Do];function To(a,t){return e.openBlock(),e.createElementBlock("svg",Co,[...Mo])}const Lo={render:To},Ao={xmlns:"http://www.w3.org/2000/svg",fill:"none","stroke-width":"1.5",class:"h-6 w-6 md:h-8 md:w-8 m-auto",viewBox:"0 0 24 24"},jo=e.createElementVNode("path",{d:"m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10"},null,-1),Fo=[jo];function Uo(a,t){return e.openBlock(),e.createElementBlock("svg",Ao,[...Fo])}const zo={render:Uo},Io={xmlns:"http://www.w3.org/2000/svg",fill:"none","stroke-width":"1.5",class:"h-6 w-6 md:h-8 md:w-8 m-auto",viewBox:"0 0 24 24"},Ro=e.createElementVNode("path",{d:"m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21q.512.078 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48 48 0 0 0-3.478-.397m-12 .562q.51-.089 1.022-.165m0 0a48 48 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a52 52 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a49 49 0 0 0-7.5 0"},null,-1),Ho=[Ro];function qo(a,t){return e.openBlock(),e.createElementBlock("svg",Io,[...Ho])}const Oo={render:qo},Po={xmlns:"http://www.w3.org/2000/svg",fill:"none","stroke-width":"1.5",class:"h-6 w-6 md:h-8 md:w-8 m-auto vf-toolbar-icon",viewBox:"0 0 24 24"},Go=e.createElementVNode("path",{d:"M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5m-13.5-9L12 3m0 0 4.5 4.5M12 3v13.5"},null,-1),Wo=[Go];function Ko(a,t){return e.openBlock(),e.createElementBlock("svg",Po,[...Wo])}const Yo={render:Ko},Jo={xmlns:"http://www.w3.org/2000/svg",fill:"none","stroke-width":"1.5",class:"h-6 w-6 md:h-8 md:w-8 m-auto",viewBox:"0 0 24 24"},Qo=e.createElementVNode("path",{d:"m20.25 7.5-.625 10.632a2.25 2.25 0 0 1-2.247 2.118H6.622a2.25 2.25 0 0 1-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125"},null,-1),Xo=[Qo];function Zo(a,t){return e.openBlock(),e.createElementBlock("svg",Jo,[...Xo])}const er={render:Zo},tr={xmlns:"http://www.w3.org/2000/svg",fill:"none","stroke-width":"1.5",class:"h-6 w-6 md:h-8 md:w-8 m-auto",viewBox:"0 0 24 24"},or=e.createElementVNode("path",{d:"m20.25 7.5-.625 10.632a2.25 2.25 0 0 1-2.247 2.118H6.622a2.25 2.25 0 0 1-2.247-2.118L3.75 7.5m6 4.125 2.25 2.25m0 0 2.25 2.25M12 13.875l2.25-2.25M12 13.875l-2.25 2.25M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125"},null,-1),rr=[or];function nr(a,t){return e.openBlock(),e.createElementBlock("svg",tr,[...rr])}const ar={render:nr},sr={xmlns:"http://www.w3.org/2000/svg",fill:"none",class:"animate-spin p-0.5 h-5 w-5 text-white ml-auto",viewBox:"0 0 24 24"},lr=e.createElementVNode("circle",{cx:"12",cy:"12",r:"10",stroke:"currentColor","stroke-width":"4",class:"opacity-25 stroke-blue-900 dark:stroke-blue-100"},null,-1),ir=e.createElementVNode("path",{fill:"currentColor",d:"M4 12a8 8 0 0 1 8-8V0C5.373 0 0 5.373 0 12zm2 5.291A7.96 7.96 0 0 1 4 12H0c0 3.042 1.135 5.824 3 7.938z",class:"opacity-75"},null,-1),cr=[lr,ir];function dr(a,t){return e.openBlock(),e.createElementBlock("svg",sr,[...cr])}const re={render:dr},ur={xmlns:"http://www.w3.org/2000/svg",fill:"none","stroke-width":"1.5",class:"h-6 w-6 md:h-8 md:w-8 m-auto vf-toolbar-icon",viewBox:"0 0 24 24"},mr=e.createElementVNode("path",{d:"M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15"},null,-1),fr=[mr];function pr(a,t){return e.openBlock(),e.createElementBlock("svg",ur,[...fr])}const hr={render:pr},vr={xmlns:"http://www.w3.org/2000/svg",fill:"none","stroke-width":"1.5",class:"h-6 w-6 md:h-8 md:w-8 m-auto vf-toolbar-icon",viewBox:"0 0 24 24"},gr=e.createElementVNode("path",{d:"M9 9V4.5M9 9H4.5M9 9 3.75 3.75M9 15v4.5M9 15H4.5M9 15l-5.25 5.25M15 9h4.5M15 9V4.5M15 9l5.25-5.25M15 15h4.5M15 15v4.5m0-4.5 5.25 5.25"},null,-1),kr=[gr];function _r(a,t){return e.openBlock(),e.createElementBlock("svg",vr,[...kr])}const xr={render:_r},yr={xmlns:"http://www.w3.org/2000/svg",fill:"none","stroke-width":"1.5",class:"h-6 w-6 md:h-8 md:w-8 m-auto",viewBox:"0 0 24 24"},wr=e.createElementVNode("path",{d:"M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25zm0 9.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18zM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25zm0 9.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25A2.25 2.25 0 0 1 13.5 18z"},null,-1),br=[wr];function Er(a,t){return e.openBlock(),e.createElementBlock("svg",yr,[...br])}const Vr={render:Er},Nr={xmlns:"http://www.w3.org/2000/svg",fill:"none","stroke-width":"1.5",class:"h-6 w-6 md:h-8 md:w-8 m-auto",viewBox:"0 0 24 24"},Br=e.createElementVNode("path",{d:"M3.75 12h16.5m-16.5 3.75h16.5M3.75 19.5h16.5M5.625 4.5h12.75a1.875 1.875 0 0 1 0 3.75H5.625a1.875 1.875 0 0 1 0-3.75"},null,-1),$r=[Br];function Sr(a,t){return e.openBlock(),e.createElementBlock("svg",Nr,[...$r])}const Cr={render:Sr},Dr={class:"border-neutral-300 flex justify-between items-center py-1 text-sm"},Mr={key:0,class:"flex text-center"},Tr=["aria-label"],Lr=["aria-label"],Ar=["aria-label"],jr=["aria-label"],Fr=["aria-label"],Ur=["aria-label"],zr=["aria-label"],Ir={key:1,class:"flex text-center"},Rr={class:"pl-2"},Hr={class:"dark:bg-gray-700 bg-gray-200 text-xs px-2 py-1 rounded"},qr={class:"flex text-center items-center justify-end"},Or=["aria-label"],Pr=["aria-label"],Gr={__name:"Toolbar",setup(a){const t=e.inject("ServiceContainer"),{setStore:o}=t.storage,{t:n}=t.i18n,r=t.dragSelect,u=e.ref("");t.emitter.on("vf-search-query",({newQuery:l})=>{u.value=l});const s=()=>{t.fullScreen=!t.fullScreen,o("full-screen",t.fullScreen),t.emitter.emit("vf-fullscreen-toggle")},i=()=>{t.view=t.view==="list"?"grid":"list",r.refreshSelection(),o("viewport",t.view)};return(l,c)=>(e.openBlock(),e.createElementBlock("div",Dr,[u.value.length?(e.openBlock(),e.createElementBlock("div",Ir,[e.createElementVNode("div",Rr,[e.createTextVNode(e.toDisplayString(e.unref(n)("Search results for"))+" ",1),e.createElementVNode("span",Hr,e.toDisplayString(u.value),1)]),e.unref(t).fs.loading?(e.openBlock(),e.createBlock(e.unref(re),{key:0})):e.createCommentVNode("",!0)])):(e.openBlock(),e.createElementBlock("div",Mr,[e.unref(t).features.includes(e.unref(C).NEW_FOLDER)?(e.openBlock(),e.createElementBlock("div",{key:0,class:"mx-1.5","aria-label":e.unref(n)("New Folder"),"data-microtip-position":"bottom-right",role:"tooltip",onClick:c[0]||(c[0]=f=>e.unref(t).modal.open(X,{items:e.unref(r).getSelected()}))},[e.createVNode(e.unref(So))],8,Tr)):e.createCommentVNode("",!0),e.unref(t).features.includes(e.unref(C).NEW_FILE)?(e.openBlock(),e.createElementBlock("div",{key:1,class:"mx-1.5","aria-label":e.unref(n)("New File"),"data-microtip-position":"bottom",role:"tooltip",onClick:c[1]||(c[1]=f=>e.unref(t).modal.open(Qe,{items:e.unref(r).getSelected()}))},[e.createVNode(e.unref(Lo))],8,Lr)):e.createCommentVNode("",!0),e.unref(t).features.includes(e.unref(C).RENAME)?(e.openBlock(),e.createElementBlock("div",{key:2,class:"mx-1.5","aria-label":e.unref(n)("Rename"),"data-microtip-position":"bottom",role:"tooltip",onClick:c[2]||(c[2]=f=>e.unref(r).getCount()!==1||e.unref(t).modal.open(Z,{items:e.unref(r).getSelected()}))},[e.createVNode(e.unref(zo),{class:e.normalizeClass(e.unref(r).getCount()===1?"vf-toolbar-icon":"vf-toolbar-icon-disabled")},null,8,["class"])],8,Ar)):e.createCommentVNode("",!0),e.unref(t).features.includes(e.unref(C).DELETE)?(e.openBlock(),e.createElementBlock("div",{key:3,class:"mx-1.5","aria-label":e.unref(n)("Delete"),"data-microtip-position":"bottom",role:"tooltip",onClick:c[3]||(c[3]=f=>!e.unref(r).getCount()||e.unref(t).modal.open(ee,{items:e.unref(r).getSelected()}))},[e.createVNode(e.unref(Oo),{class:e.normalizeClass(e.unref(r).getCount()?"vf-toolbar-icon":"vf-toolbar-icon-disabled")},null,8,["class"])],8,jr)):e.createCommentVNode("",!0),e.unref(t).features.includes(e.unref(C).UPLOAD)?(e.openBlock(),e.createElementBlock("div",{key:4,class:"mx-1.5","aria-label":e.unref(n)("Upload"),"data-microtip-position":"bottom",role:"tooltip",onClick:c[4]||(c[4]=f=>e.unref(t).modal.open(Kt,{items:e.unref(r).getSelected()}))},[e.createVNode(e.unref(Yo))],8,Fr)):e.createCommentVNode("",!0),e.unref(t).features.includes(e.unref(C).UNARCHIVE)&&e.unref(r).getCount()===1&&e.unref(r).getSelected()[0].mime_type==="application/zip"?(e.openBlock(),e.createElementBlock("div",{key:5,class:"mx-1.5","aria-label":e.unref(n)("Unarchive"),"data-microtip-position":"bottom",role:"tooltip",onClick:c[5]||(c[5]=f=>!e.unref(r).getCount()||e.unref(t).modal.open(te,{items:e.unref(r).getSelected()}))},[e.createVNode(e.unref(ar),{class:e.normalizeClass(e.unref(r).getCount()?"vf-toolbar-icon":"vf-toolbar-icon-disabled")},null,8,["class"])],8,Ur)):e.createCommentVNode("",!0),e.unref(t).features.includes(e.unref(C).ARCHIVE)?(e.openBlock(),e.createElementBlock("div",{key:6,class:"mx-1.5","aria-label":e.unref(n)("Archive"),"data-microtip-position":"bottom",role:"tooltip",onClick:c[6]||(c[6]=f=>!e.unref(r).getCount()||e.unref(t).modal.open(oe,{items:e.unref(r).getSelected()}))},[e.createVNode(e.unref(er),{class:e.normalizeClass(e.unref(r).getCount()?"vf-toolbar-icon":"vf-toolbar-icon-disabled")},null,8,["class"])],8,zr)):e.createCommentVNode("",!0)])),e.createElementVNode("div",qr,[e.unref(t).features.includes(e.unref(C).FULL_SCREEN)?(e.openBlock(),e.createElementBlock("div",{key:0,onClick:s,class:"mx-1.5","aria-label":e.unref(n)("Toggle Full Screen"),"data-microtip-position":"bottom-left",role:"tooltip"},[e.unref(t).fullScreen?(e.openBlock(),e.createBlock(e.unref(xr),{key:0})):(e.openBlock(),e.createBlock(e.unref(hr),{key:1}))],8,Or)):e.createCommentVNode("",!0),e.createElementVNode("div",{class:"mx-1.5","aria-label":e.unref(n)("Change View"),"data-microtip-position":"bottom-left",role:"tooltip",onClick:c[7]||(c[7]=f=>u.value.length||i())},[e.unref(t).view==="grid"?(e.openBlock(),e.createBlock(e.unref(Vr),{key:0,class:e.normalizeClass(u.value.length?"vf-toolbar-icon-disabled":"vf-toolbar-icon")},null,8,["class"])):e.createCommentVNode("",!0),e.unref(t).view==="list"?(e.openBlock(),e.createBlock(e.unref(Cr),{key:1,class:e.normalizeClass(u.value.length?"vf-toolbar-icon-disabled":"vf-toolbar-icon")},null,8,["class"])):e.createCommentVNode("",!0)],8,Pr)])]))}},Wr=(a,t=0,o=!1)=>{let n;return(...r)=>{o&&!n&&a(...r),clearTimeout(n),n=setTimeout(()=>{a(...r)},t)}},K=(a,t,o)=>{const n=e.ref(a);return e.customRef((r,u)=>({get(){return r(),n.value},set:Wr(s=>{n.value=s,u()},t,o)}))},Kr={class:"sm:flex sm:items-start"},Yr=e.createElementVNode("div",{class:"mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-50 dark:bg-gray-500 sm:mx-0 sm:h-10 sm:w-10"},[e.createElementVNode("svg",{class:"h-6 w-6 stroke-blue-600 dark:stroke-blue-100",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24","stroke-width":"2",stroke:"currentColor","aria-hidden":"true"},[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"})])],-1),Jr={class:"mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full"},Qr={class:"text-lg leading-6 font-medium text-gray-900 dark:text-gray-400",id:"modal-title"},Xr={class:"text-sm text-gray-500 pb-1"},Zr={class:"max-h-[200px] overflow-y-auto vf-scrollbar text-left"},en={class:"flex text-sm text-gray-800 dark:text-gray-400"},tn={key:0,xmlns:"http://www.w3.org/2000/svg",class:"h-5 w-5 text-neutral-500 fill-sky-500 stroke-sky-500 dark:fill-slate-500 dark:stroke-slate-500",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor","stroke-width":"1"},on=e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"},null,-1),rn=[on],nn={key:1,xmlns:"http://www.w3.org/2000/svg",class:"h-5 w-5 text-neutral-500",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor","stroke-width":"1"},an=e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"},null,-1),sn=[an],ln={class:"ml-1.5"},cn={class:"font-bold text-xs text-gray-700 dark:text-gray-500 mt-3 tracking-wider"},dn={class:"flex text-sm text-gray-800 dark:text-gray-400 border dark:border-gray-700 p-1 rounded"},un=e.createElementVNode("svg",{xmlns:"http://www.w3.org/2000/svg",class:"h-5 w-5 text-neutral-500 fill-sky-500 stroke-sky-500 dark:fill-slate-500 dark:stroke-slate-500",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor","stroke-width":"1"},[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"})],-1),mn={class:"ml-1.5 overflow-auto"},fn={class:"m-1 mr-auto font-bold text-gray-500 text-sm dark:text-gray-200 self-center"},G={__name:"ModalMove",setup(a){const t=e.inject("ServiceContainer"),{t:o}=t.i18n,n=e.ref(t.modal.data.items.from),r=e.ref(""),u=()=>{n.value.length&&t.emitter.emit("vf-fetch",{params:{q:"move",m:"post",adapter:t.fs.adapter,path:t.fs.data.dirname},body:{items:n.value.map(({path:s,type:i})=>({path:s,type:i})),item:t.modal.data.items.to.path},onSuccess:()=>{t.emitter.emit("vf-toast-push",{label:o("Files moved.",t.modal.data.items.to.name)})},onError:s=>{r.value=o(s.message)}})};return(s,i)=>(e.openBlock(),e.createBlock(T,null,{buttons:e.withCtx(()=>[e.createElementVNode("button",{type:"button",onClick:u,class:"vf-btn vf-btn-primary"},e.toDisplayString(e.unref(o)("Yes, Move!")),1),e.createElementVNode("button",{type:"button",onClick:i[1]||(i[1]=l=>e.unref(t).modal.close()),class:"vf-btn vf-btn-secondary"},e.toDisplayString(e.unref(o)("Cancel")),1),e.createElementVNode("div",fn,e.toDisplayString(e.unref(o)("%s item(s) selected.",n.value.length)),1)]),default:e.withCtx(()=>[e.createElementVNode("div",Kr,[Yr,e.createElementVNode("div",Jr,[e.createElementVNode("h3",Qr,e.toDisplayString(e.unref(o)("Move files")),1),e.createElementVNode("p",Xr,e.toDisplayString(e.unref(o)("Are you sure you want to move these files?")),1),e.createElementVNode("div",Zr,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.value,l=>(e.openBlock(),e.createElementBlock("div",en,[e.createElementVNode("div",null,[l.type==="dir"?(e.openBlock(),e.createElementBlock("svg",tn,rn)):(e.openBlock(),e.createElementBlock("svg",nn,sn))]),e.createElementVNode("div",ln,e.toDisplayString(l.path),1)]))),256))]),e.createElementVNode("h4",cn,e.toDisplayString(e.unref(o)("Target Directory")),1),e.createElementVNode("p",dn,[un,e.createElementVNode("span",mn,e.toDisplayString(e.unref(t).modal.data.items.to.path),1)]),r.value.length?(e.openBlock(),e.createBlock(L,{key:0,onHidden:i[0]||(i[0]=l=>r.value=""),error:""},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(r.value),1)]),_:1})):e.createCommentVNode("",!0)])])]),_:1}))}},pn={xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",class:"h-6 w-6 p-1 rounded text-slate-700 hover:bg-neutral-300 dark:text-neutral-200 dark:hover:bg-gray-700 cursor-pointer",viewBox:"-40 -40 580 580"},hn=e.createElementVNode("path",{d:"M463.5 224h8.5c13.3 0 24-10.7 24-24V72c0-9.7-5.8-18.5-14.8-22.2S461.9 48.1 455 55l-41.6 41.6c-87.6-86.5-228.7-86.2-315.8 1-87.5 87.5-87.5 229.3 0 316.8s229.3 87.5 316.8 0c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0c-62.5 62.5-163.8 62.5-226.3 0s-62.5-163.8 0-226.3c62.2-62.2 162.7-62.5 225.3-1L327 183c-6.9 6.9-8.9 17.2-5.2 26.2S334.3 224 344 224z"},null,-1),vn=[hn];function gn(a,t){return e.openBlock(),e.createElementBlock("svg",pn,[...vn])}const kn={render:gn},_n={xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",class:"h-6 w-6 p-0.5 rounded",viewBox:"0 0 20 20"},xn=e.createElementVNode("path",{"fill-rule":"evenodd",d:"M5.293 9.707a1 1 0 0 1 0-1.414l4-4a1 1 0 0 1 1.414 0l4 4a1 1 0 0 1-1.414 1.414L11 7.414V15a1 1 0 1 1-2 0V7.414L6.707 9.707a1 1 0 0 1-1.414 0",class:"pointer-events-none","clip-rule":"evenodd"},null,-1),yn=[xn];function wn(a,t){return e.openBlock(),e.createElementBlock("svg",_n,[...yn])}const bn={render:wn},En={xmlns:"http://www.w3.org/2000/svg",fill:"none",stroke:"currentColor","stroke-width":"1.5",class:"h-6 w-6 p-1 rounded text-slate-700 hover:bg-neutral-300 dark:text-neutral-200 dark:hover:bg-gray-700 cursor-pointer",viewBox:"0 0 24 24"},Vn=e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M6 18 18 6M6 6l12 12"},null,-1),Nn=[Vn];function Bn(a,t){return e.openBlock(),e.createElementBlock("svg",En,[...Nn])}const $n={render:Bn},Sn={xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",class:"h-6 w-6 p-1 rounded text-slate-700 hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-gray-800 cursor-pointer",viewBox:"0 0 20 20"},Cn=e.createElementVNode("path",{d:"M10.707 2.293a1 1 0 0 0-1.414 0l-7 7a1 1 0 0 0 1.414 1.414L4 10.414V17a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-2a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-6.586l.293.293a1 1 0 0 0 1.414-1.414z",class:"pointer-events-none"},null,-1),Dn=[Cn];function Mn(a,t){return e.openBlock(),e.createElementBlock("svg",Sn,[...Dn])}const Tn={render:Mn},Ln={xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",class:"h-6 w-6 p-1 m-auto stroke-gray-400 fill-gray-100 dark:stroke-gray-400 dark:fill-gray-400/20",viewBox:"0 0 20 20"},An=e.createElementVNode("path",{d:"m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607"},null,-1),jn=[An];function Fn(a,t){return e.openBlock(),e.createElementBlock("svg",Ln,[...jn])}const Un={render:Fn},zn={xmlns:"http://www.w3.org/2000/svg",fill:"none",stroke:"currentColor","stroke-width":"1.5",class:"w-6 h-6 cursor-pointer",viewBox:"0 0 24 24"},In=e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M6 18 18 6M6 6l12 12"},null,-1),Rn=[In];function Hn(a,t){return e.openBlock(),e.createElementBlock("svg",zn,[...Rn])}const qn={render:Hn},On={xmlns:"http://www.w3.org/2000/svg",fill:"none",stroke:"currentColor",class:"text-neutral-500 fill-sky-500 stroke-sky-500 dark:fill-slate-500 dark:stroke-slate-500",viewBox:"0 0 24 24"},Pn=e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M3 7v10a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-6l-2-2H5a2 2 0 0 0-2 2"},null,-1),Gn=[Pn];function Wn(a,t){return e.openBlock(),e.createElementBlock("svg",On,[...Gn])}const ne={render:Wn},Kn={xmlns:"http://www.w3.org/2000/svg",class:"h-6 w-6 rounded text-slate-700 hover:bg-neutral-100 dark:fill-neutral-300 dark:hover:bg-gray-800 cursor-pointer",viewBox:"0 0 448 512"},Yn=e.createElementVNode("path",{d:"M8 256a56 56 0 1 1 112 0 56 56 0 1 1-112 0m160 0a56 56 0 1 1 112 0 56 56 0 1 1-112 0m216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112"},null,-1),Jn=[Yn];function Qn(a,t){return e.openBlock(),e.createElementBlock("svg",Kn,[...Jn])}const Xn={render:Qn},Zn={class:"flex p-1.5 bg-neutral-100 dark:bg-gray-800 border-t border-b border-neutral-300 dark:border-gray-700/50 items-center select-none text-sm"},ea=["aria-label"],ta=["aria-label"],oa=["aria-label"],ra={class:"group flex bg-white dark:bg-gray-700 items-center rounded p-1 ml-2 w-full overflow-hidden"},na={class:"flex leading-6"},aa={key:0,class:"flex"},sa=e.createElementVNode("div",{class:"text-neutral-300 dark:text-gray-600 mx-0.5"},"/",-1),la={class:"relative"},ia=e.createElementVNode("span",{class:"text-neutral-300 dark:text-gray-600 mx-0.5"},"/",-1),ca=["onDragover","onDragleave","onDrop","title","onClick"],da={class:"relative flex bg-white dark:bg-gray-700 justify-between items-center rounded p-1 ml-2 w-full"},ua=["placeholder"],ma={class:"z-30 absolute top-[65px] md:top-[75px] left-[90px] rounded -mx-1.5 mt-1 bg-neutral-50 dark:bg-gray-800 max-w-80 max-h-50 shadow overflow-y-auto text-gray-700 dark:text-gray-200 border border-neutral-300 dark:border-gray-600"},fa=["onDrop","onClick"],pa={class:"flex pointer-events-none"},ha={class:"inline-block w-full text-ellipsis overflow-hidden"},va={__name:"Breadcrumb",setup(a){const t=e.inject("ServiceContainer"),{t:o}=t.i18n,n=t.dragSelect,r=e.ref(null),u=K(0,100);e.watch(u,b=>{const y=r.value.children;let w=0,$=0,S=5,z=1;t.fs.limitBreadcrumbItems(S),e.nextTick(()=>{console.log("width updated");for(let F=y.length-1;F>=0&&!(w+y[F].offsetWidth>u.value-40);F--)w+=parseInt(y[F].offsetWidth,10),$++;$<z&&($=z),$>S&&($=S),t.fs.limitBreadcrumbItems($)})});const s=()=>{u.value=r.value.offsetWidth};e.onMounted(()=>{new ResizeObserver(s).observe(r.value)});const i=(b,y=null)=>{b.preventDefault(),n.isDraggingRef.value=!1,f(b),y??(y=t.fs.hiddenBreadcrumbs.length-1);let w=JSON.parse(b.dataTransfer.getData("items"));if(w.find($=>$.storage!==t.fs.adapter)){alert("Moving items between different storages is not supported yet.");return}t.modal.open(G,{items:{from:w,to:t.fs.hiddenBreadcrumbs[y]??{path:t.fs.adapter+"://"}}})},l=(b,y=null)=>{b.preventDefault(),n.isDraggingRef.value=!1,f(b),y??(y=t.fs.breadcrumbs.length-2);let w=JSON.parse(b.dataTransfer.getData("items"));if(w.find($=>$.storage!==t.fs.adapter)){alert("Moving items between different storages is not supported yet.");return}t.modal.open(G,{items:{from:w,to:t.fs.breadcrumbs[y]??{path:t.fs.adapter+"://"}}})},c=b=>{b.preventDefault(),t.fs.isGoUpAvailable()?(b.dataTransfer.dropEffect="copy",b.currentTarget.classList.add("bg-blue-200","dark:bg-slate-600")):(b.dataTransfer.dropEffect="none",b.dataTransfer.effectAllowed="none")},f=b=>{b.preventDefault(),b.currentTarget.classList.remove("bg-blue-200","dark:bg-slate-600"),t.fs.isGoUpAvailable()&&b.currentTarget.classList.remove("bg-blue-200","dark:bg-slate-600")},h=()=>{x(),t.emitter.emit("vf-fetch",{params:{q:"index",adapter:t.fs.adapter,path:t.fs.data.dirname}})},d=()=>{x(),!t.fs.isGoUpAvailable()||t.emitter.emit("vf-fetch",{params:{q:"index",adapter:t.fs.adapter,path:t.fs.parentFolderPath}})},m=b=>{t.emitter.emit("vf-fetch",{params:{q:"index",adapter:t.fs.adapter,path:b.path}}),t.fs.toggleHiddenBreadcrumbs(!1)},p=()=>{t.fs.showHiddenBreadcrumbs&&t.fs.toggleHiddenBreadcrumbs(!1)},v={mounted(b,y,w,$){b.clickOutsideEvent=function(S){b===S.target||b.contains(S.target)||y.value()},document.body.addEventListener("click",b.clickOutsideEvent)},beforeUnmount(b,y,w,$){document.body.removeEventListener("click",b.clickOutsideEvent)}},k=e.ref(null),E=()=>{t.features.includes(C.SEARCH)&&(t.fs.searchMode=!0,e.nextTick(()=>k.value.focus()))},_=K("",400);e.watch(_,b=>{t.emitter.emit("vf-toast-clear"),t.emitter.emit("vf-search-query",{newQuery:b})});const x=()=>{t.fs.searchMode=!1,_.value=""};t.emitter.on("vf-search-exit",()=>{x()});const M=()=>{_.value===""&&x()};return(b,y)=>(e.openBlock(),e.createElementBlock("div",Zn,[e.createElementVNode("span",{"aria-label":e.unref(o)("Go up a directory"),"data-microtip-position":"bottom-right",role:"tooltip"},[e.createVNode(e.unref(bn),{onDragover:y[0]||(y[0]=w=>c(w)),onDragleave:y[1]||(y[1]=w=>f(w)),onDrop:y[2]||(y[2]=w=>l(w)),onClick:d,class:e.normalizeClass(e.unref(t).fs.isGoUpAvailable()?"text-slate-700 hover:bg-neutral-300 dark:text-neutral-200 dark:hover:bg-gray-700 cursor-pointer":"text-gray-400 dark:text-neutral-500")},null,8,["class"])],8,ea),e.unref(t).fs.loading?(e.openBlock(),e.createElementBlock("span",{key:1,"aria-label":e.unref(o)("Cancel"),"data-microtip-position":"bottom-right",role:"tooltip"},[e.createVNode(e.unref($n),{onClick:y[3]||(y[3]=w=>e.unref(t).emitter.emit("vf-fetch-abort"))})],8,oa)):(e.openBlock(),e.createElementBlock("span",{key:0,"aria-label":e.unref(o)("Refresh"),"data-microtip-position":"bottom-right",role:"tooltip"},[e.createVNode(e.unref(kn),{onClick:h})],8,ta)),e.withDirectives(e.createElementVNode("div",ra,[e.createElementVNode("div",null,[e.createVNode(e.unref(Tn),{onDragover:y[4]||(y[4]=w=>c(w)),onDragleave:y[5]||(y[5]=w=>f(w)),onDrop:y[6]||(y[6]=w=>l(w,-1)),onClick:y[7]||(y[7]=w=>e.unref(t).emitter.emit("vf-fetch",{params:{q:"index",adapter:e.unref(t).fs.adapter}}))})]),e.createElementVNode("div",na,[e.unref(t).fs.hiddenBreadcrumbs.length?e.withDirectives((e.openBlock(),e.createElementBlock("div",aa,[sa,e.createElementVNode("div",la,[e.createElementVNode("span",{onDragenter:y[8]||(y[8]=w=>e.unref(t).fs.toggleHiddenBreadcrumbs(!0)),onClick:y[9]||(y[9]=w=>e.unref(t).fs.toggleHiddenBreadcrumbs()),class:"text-slate-700 dark:text-slate-200 hover:bg-neutral-100 dark:hover:bg-gray-800 rounded cursor-pointer"},[e.createVNode(e.unref(Xn),{class:"px-1 pointer-events-none"})],32)])])),[[v,p]]):e.createCommentVNode("",!0)]),e.createElementVNode("div",{ref_key:"breadcrumbContainer",ref:r,class:"flex leading-6 w-full overflow-hidden",onClick:e.withModifiers(E,["self"])},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(t).fs.breadcrumbs,(w,$)=>(e.openBlock(),e.createElementBlock("div",{key:$},[ia,e.createElementVNode("span",{onDragover:S=>$===e.unref(t).fs.breadcrumbs.length-1||c(S),onDragleave:S=>$===e.unref(t).fs.breadcrumbs.length-1||f(S),onDrop:S=>$===e.unref(t).fs.breadcrumbs.length-1||l(S,$),class:"px-1.5 py-1 text-slate-700 dark:text-slate-200 hover:bg-neutral-100 dark:hover:bg-gray-800 rounded cursor-pointer whitespace-nowrap",title:w.basename,onClick:S=>e.unref(t).emitter.emit("vf-fetch",{params:{q:"index",adapter:e.unref(t).fs.adapter,path:w.path}})},e.toDisplayString(w.name),41,ca)]))),128))],512),e.unref(t).fs.loading?(e.openBlock(),e.createBlock(e.unref(re),{key:0})):e.createCommentVNode("",!0)],512),[[e.vShow,!e.unref(t).fs.searchMode]]),e.withDirectives(e.createElementVNode("div",da,[e.createElementVNode("div",null,[e.createVNode(e.unref(Un))]),e.withDirectives(e.createElementVNode("input",{ref_key:"searchInput",ref:k,onKeydown:e.withKeys(x,["esc"]),onBlur:M,"onUpdate:modelValue":y[10]||(y[10]=w=>e.isRef(_)?_.value=w:null),placeholder:e.unref(o)("Search anything.."),class:"w-full pb-0 px-1 border-0 text-base ring-0 outline-0 text-gray-600 focus:ring-transparent focus:border-transparent dark:focus:ring-transparent dark:focus:border-transparent dark:text-gray-300 bg-transparent",type:"text"},null,40,ua),[[e.vModelText,e.unref(_)]]),e.createVNode(e.unref(qn),{onClick:x})],512),[[e.vShow,e.unref(t).fs.searchMode]]),e.withDirectives(e.createElementVNode("div",ma,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(t).fs.hiddenBreadcrumbs,(w,$)=>(e.openBlock(),e.createElementBlock("div",{key:$,onDragover:y[11]||(y[11]=S=>c(S)),onDragleave:y[12]||(y[12]=S=>f(S)),onDrop:S=>i(S,$),onClick:S=>m(w),class:"px-2 py-0.5 hover:bg-gray-400/20 cursor-pointer items-center whitespace-nowrap"},[e.createElementVNode("div",pa,[e.createElementVNode("span",null,[e.createVNode(e.unref(ne),{class:"h-5 w-5"})]),e.createTextVNode(),e.createElementVNode("span",ha,e.toDisplayString(w.name),1)])],40,fa))),128))],512),[[e.vShow,e.unref(t).fs.showHiddenBreadcrumbs]])]))}},ae=(a,t=null)=>new Date(a*1e3).toLocaleString(t??navigator.language??"en-US"),ga=["onClick"],ka={__name:"Toast",setup(a){const t=e.inject("ServiceContainer"),{getStore:o}=t.storage,n=e.ref(o("full-screen",!1)),r=e.ref([]),u=l=>l==="error"?"text-red-400 border-red-400 dark:text-red-300 dark:border-red-300":"text-lime-600 border-lime-600 dark:text-lime-300 dark:border-lime-1300",s=l=>{r.value.splice(l,1)},i=l=>{let c=r.value.findIndex(f=>f.id===l);c!==-1&&s(c)};return t.emitter.on("vf-toast-clear",()=>{r.value=[]}),t.emitter.on("vf-toast-push",l=>{let c=new Date().getTime().toString(36).concat(performance.now().toString(),Math.random().toString()).replace(/\./g,"");l.id=c,r.value.push(l),setTimeout(()=>{i(c)},5e3)}),(l,c)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass([n.value.value?"fixed":"absolute","max-w-fit flex flex-col bottom-0 left-1/2 -translate-x-1/2"])},[e.createVNode(e.TransitionGroup,{name:"vf-toast-item","leave-active-class":"transition-all duration-1000","leave-to-class":"opacity-0"},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.value,(f,h)=>(e.openBlock(),e.createElementBlock("div",{onClick:d=>s(h),key:f,class:e.normalizeClass([u(f.type),"inline-block mx-auto my-0.5 py-0.5 px-2 min-w-max bg-gray-50 dark:bg-gray-600 border text-xs sm:text-sm rounded cursor-pointer"])},e.toDisplayString(f.label),11,ga))),128))]),_:1})],2))}},_a={xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",class:"h-5 w-5",viewBox:"0 0 20 20"},xa=e.createElementVNode("path",{"fill-rule":"evenodd",d:"M5.293 7.293a1 1 0 0 1 1.414 0L10 10.586l3.293-3.293a1 1 0 1 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 0-1.414","clip-rule":"evenodd"},null,-1),ya=[xa];function wa(a,t){return e.openBlock(),e.createElementBlock("svg",_a,[...ya])}const ba={render:wa},Ea={xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",class:"h-5 w-5",viewBox:"0 0 20 20"},Va=e.createElementVNode("path",{"fill-rule":"evenodd",d:"M14.707 12.707a1 1 0 0 1-1.414 0L10 9.414l-3.293 3.293a1 1 0 0 1-1.414-1.414l4-4a1 1 0 0 1 1.414 0l4 4a1 1 0 0 1 0 1.414","clip-rule":"evenodd"},null,-1),Na=[Va];function Ba(a,t){return e.openBlock(),e.createElementBlock("svg",Ea,[...Na])}const $a={render:Ba},I={__name:"SortIcon",props:{direction:String},setup(a){return(t,o)=>(e.openBlock(),e.createElementBlock("div",null,[a.direction==="asc"?(e.openBlock(),e.createBlock(e.unref(ba),{key:0})):e.createCommentVNode("",!0),a.direction==="desc"?(e.openBlock(),e.createBlock(e.unref($a),{key:1})):e.createCommentVNode("",!0)]))}},Sa={xmlns:"http://www.w3.org/2000/svg",fill:"none",stroke:"currentColor",class:"text-neutral-500",viewBox:"0 0 24 24"},Ca=e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M7 21h10a2 2 0 0 0 2-2V9.414a1 1 0 0 0-.293-.707l-5.414-5.414A1 1 0 0 0 12.586 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2"},null,-1),Da=[Ca];function Ma(a,t){return e.openBlock(),e.createElementBlock("svg",Sa,[...Da])}const Ta={render:Ma},q={__name:"ItemIcon",props:{type:{type:String,required:!0},small:{type:Boolean,default:!1}},setup(a){return(t,o)=>(e.openBlock(),e.createElementBlock("span",null,[a.type==="dir"?(e.openBlock(),e.createBlock(e.unref(ne),{key:0,class:e.normalizeClass({"h-5 w-5":a.small,"h-10 w-10 md:h-12 md:w-12 m-auto":!a.small})},null,8,["class"])):(e.openBlock(),e.createBlock(e.unref(Ta),{key:1,class:e.normalizeClass({"h-5 w-5":a.small,"h-10 w-10 md:h-12 md:w-12 m-auto":!a.small})},null,8,["class"]))]))}},La={xmlns:"http://www.w3.org/2000/svg",fill:"none",stroke:"currentColor",class:"absolute h-6 w-6 md:h-12 md:w-12 m-auto stroke-neutral-500 fill-white dark:fill-gray-700 dark:stroke-gray-600 z-10",viewBox:"0 0 24 24"},Aa=e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M7 21h10a2 2 0 0 0 2-2V9.414a1 1 0 0 0-.293-.707l-5.414-5.414A1 1 0 0 0 12.586 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2"},null,-1),ja=[Aa];function Fa(a,t){return e.openBlock(),e.createElementBlock("svg",La,[...ja])}const Ua={render:Fa},za={class:"absolute -z-50 -top-96"},Ia={class:"text-neutral-700 dark:text-neutral-300 p-1 absolute text-center top-4 right-[-2rem] md:top-5 md:right-[-2.4rem] z-20 text-xs"},Ra={__name:"DragItem",props:{count:{type:Number,default:0}},setup(a){const t=a;return(o,n)=>(e.openBlock(),e.createElementBlock("div",za,[e.createVNode(e.unref(Ua)),e.createElementVNode("div",Ia,e.toDisplayString(t.count),1)]))}},Ha={class:"flex"},qa=["aria-label"],Oa={class:"ml-auto mb-2"},Pa={key:0,class:"p-2 border font-normal whitespace-pre-wrap border-gray-200 dark:border-gray-700/50 dark:text-gray-200 rounded min-h-[200px] max-h-[60vh] text-xs overflow-auto"},Ga={key:1},Wa={__name:"Text",emits:["success"],setup(a,{emit:t}){const o=t,n=e.ref(""),r=e.ref(""),u=e.ref(null),s=e.ref(!1),i=e.ref(""),l=e.ref(!1),c=e.inject("ServiceContainer"),{t:f}=c.i18n;e.onMounted(()=>{c.requester.send({url:"",method:"get",params:{q:"preview",adapter:c.modal.data.adapter,path:c.modal.data.item.path},responseType:"text"}).then(m=>{n.value=m,o("success")})});const h=()=>{s.value=!s.value,r.value=n.value,s.value==!0&&e.nextTick(()=>{u.value.focus()})},d=()=>{i.value="",l.value=!1,c.requester.send({url:"",method:"post",params:{q:"save",adapter:c.modal.data.adapter,path:c.modal.data.item.path},body:{content:r.value},responseType:"text"}).then(m=>{i.value=f("Updated."),n.value=m,o("success"),s.value=!s.value}).catch(m=>{i.value=f(m.message),l.value=!0})};return(m,p)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createElementVNode("div",Ha,[e.createElementVNode("div",{class:"mb-2 text-lg leading-6 font-medium text-gray-900 dark:text-gray-400",id:"modal-title","aria-label":e.unref(c).modal.data.item.path,"data-microtip-position":"bottom-right",role:"tooltip"},e.toDisplayString(e.unref(c).modal.data.item.basename),9,qa),e.createElementVNode("div",Oa,[s.value?(e.openBlock(),e.createElementBlock("button",{key:0,onClick:d,class:"ml-1 px-2 py-1 rounded border border-transparent shadow-sm bg-blue-700/75 hover:bg-blue-700 dark:bg-gray-700 dark:hover:bg-gray-700/50 text-base font-medium text-white sm:ml-3 sm:w-auto sm:text-sm"},e.toDisplayString(e.unref(f)("Save")),1)):e.createCommentVNode("",!0),e.unref(c).features.includes(e.unref(C).EDIT)?(e.openBlock(),e.createElementBlock("button",{key:1,class:"ml-1 px-2 py-1 text-blue-500",onClick:p[0]||(p[0]=v=>h())},e.toDisplayString(s.value?e.unref(f)("Cancel"):e.unref(f)("Edit")),1)):e.createCommentVNode("",!0)])]),e.createElementVNode("div",null,[s.value?(e.openBlock(),e.createElementBlock("div",Ga,[e.withDirectives(e.createElementVNode("textarea",{ref_key:"editInput",ref:u,"onUpdate:modelValue":p[1]||(p[1]=v=>r.value=v),class:"w-full p-2 rounded dark:bg-gray-700 dark:text-gray-200 dark:focus:ring-gray-600 dark:focus:border-gray-600 dark:selection:bg-gray-500 min-h-[200px] max-h-[60vh] text-xs",name:"text",id:"",cols:"30",rows:"10"},null,512),[[e.vModelText,r.value]])])):(e.openBlock(),e.createElementBlock("pre",Pa,e.toDisplayString(n.value),1)),i.value.length?(e.openBlock(),e.createBlock(L,{key:2,onHidden:p[2]||(p[2]=v=>i.value=""),error:l.value},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(i.value),1)]),_:1},8,["error"])):e.createCommentVNode("",!0)])],64))}},Ka={class:"flex"},Ya=["aria-label"],Ja={class:"ml-auto mb-2"},Qa={class:"w-full flex justify-center"},Xa=["src"],Za={__name:"Image",emits:["success"],setup(a,{emit:t}){const o=t,n=e.inject("ServiceContainer"),{t:r}=n.i18n,u=e.ref(null),s=e.ref(null),i=e.ref(!1),l=e.ref(""),c=e.ref(!1),f=()=>{i.value=!i.value,i.value?s.value=new he(u.value,{crop(d){}}):s.value.destroy()},h=()=>{s.value.getCroppedCanvas({width:795,height:341}).toBlob(d=>{l.value="",c.value=!1;const m=new FormData;m.set("file",d),n.requester.send({url:"",method:"post",params:{q:"upload",adapter:n.modal.data.adapter,path:n.modal.data.item.path},body:m}).then(p=>{l.value=r("Updated."),u.value.src=n.requester.getPreviewUrl(n.modal.data.adapter,n.modal.data.item),f(),o("success")}).catch(p=>{l.value=r(p.message),c.value=!0})})};return e.onMounted(()=>{o("success")}),(d,m)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createElementVNode("div",Ka,[e.createElementVNode("h3",{class:"mb-2 text-lg leading-6 font-medium text-gray-900 dark:text-gray-400",id:"modal-title","aria-label":e.unref(n).modal.data.item.path,"data-microtip-position":"bottom-right",role:"tooltip"},e.toDisplayString(e.unref(n).modal.data.item.basename),9,Ya),e.createElementVNode("div",Ja,[i.value?(e.openBlock(),e.createElementBlock("button",{key:0,onClick:h,class:"ml-1 px-2 py-1 rounded border border-transparent shadow-sm bg-blue-700/75 hover:bg-blue-700 dark:bg-gray-700 dark:hover:bg-gray-700/50 text-base font-medium text-white sm:ml-3 sm:w-auto sm:text-sm"},e.toDisplayString(e.unref(r)("Crop")),1)):e.createCommentVNode("",!0),e.unref(n).features.includes(e.unref(C).EDIT)?(e.openBlock(),e.createElementBlock("button",{key:1,class:"ml-1 px-2 py-1 text-blue-500",onClick:m[0]||(m[0]=p=>f())},e.toDisplayString(i.value?e.unref(r)("Cancel"):e.unref(r)("Edit")),1)):e.createCommentVNode("",!0)])]),e.createElementVNode("div",Qa,[e.createElementVNode("img",{ref_key:"image",ref:u,class:"max-w-[50vh] max-h-[50vh]",src:e.unref(n).requester.getPreviewUrl(e.unref(n).modal.data.adapter,e.unref(n).modal.data.item),alt:""},null,8,Xa)]),l.value.length?(e.openBlock(),e.createBlock(L,{key:0,onHidden:m[1]||(m[1]=p=>l.value=""),error:c.value},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(l.value),1)]),_:1},8,["error"])):e.createCommentVNode("",!0)],64))}},es={class:"flex"},ts=["aria-label"],os=e.createElementVNode("div",null,null,-1),rs={__name:"Default",emits:["success"],setup(a,{emit:t}){const o=e.inject("ServiceContainer"),n=t;return e.onMounted(()=>{n("success")}),(r,u)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createElementVNode("div",es,[e.createElementVNode("h3",{class:"mb-2 text-lg leading-6 font-medium text-gray-900 dark:text-gray-400",id:"modal-title","aria-label":e.unref(o).modal.data.item.path,"data-microtip-position":"bottom-right",role:"tooltip"},e.toDisplayString(e.unref(o).modal.data.item.basename),9,ts)]),os],64))}},ns=["aria-label"],as={class:"w-full aspect-video",preload:"",controls:""},ss=["src"],ls={__name:"Video",emits:["success"],setup(a,{emit:t}){const o=e.inject("ServiceContainer"),n=t,r=()=>o.requester.getPreviewUrl(o.modal.data.adapter,o.modal.data.item);return e.onMounted(()=>{n("success")}),(u,s)=>(e.openBlock(),e.createElementBlock("div",null,[e.createElementVNode("h3",{class:"mb-2 text-lg leading-6 font-medium text-gray-900 dark:text-gray-400",id:"modal-title","aria-label":e.unref(o).modal.data.item.path,"data-microtip-position":"bottom-right",role:"tooltip"},e.toDisplayString(e.unref(o).modal.data.item.basename),9,ns),e.createElementVNode("div",null,[e.createElementVNode("video",as,[e.createElementVNode("source",{src:r(),type:"video/mp4"},null,8,ss),e.createTextVNode(" Your browser does not support the video tag. ")])])]))}},is=["aria-label"],cs={class:"w-full",controls:""},ds=["src"],us={__name:"Audio",emits:["success"],setup(a,{emit:t}){const o=t,n=e.inject("ServiceContainer"),r=()=>n.requester.getPreviewUrl(n.modal.data.adapter,n.modal.data.item);return e.onMounted(()=>{o("success")}),(u,s)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createElementVNode("h3",{class:"mb-2 text-lg leading-6 font-medium text-gray-900 dark:text-gray-400",id:"modal-title","aria-label":e.unref(n).modal.data.item.path,"data-microtip-position":"bottom-right",role:"tooltip"},e.toDisplayString(e.unref(n).modal.data.item.basename),9,is),e.createElementVNode("div",null,[e.createElementVNode("audio",cs,[e.createElementVNode("source",{src:r(),type:"audio/mpeg"},null,8,ds),e.createTextVNode(" Your browser does not support the audio element. ")])])],64))}},ms=["aria-label"],fs=["data"],ps=["src"],hs=e.createElementVNode("p",null,[e.createTextVNode(" Your browser does not support PDFs. "),e.createElementVNode("a",{href:"https://example.com/test.pdf"},"Download the PDF"),e.createTextVNode(" . ")],-1),vs=[hs],gs={__name:"Pdf",emits:["success"],setup(a,{emit:t}){const o=e.inject("ServiceContainer"),n=t,r=()=>o.requester.getPreviewUrl(o.modal.data.adapter,o.modal.data.item);return e.onMounted(()=>{n("success")}),(u,s)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createElementVNode("h3",{class:"mb-2 text-lg leading-6 font-medium text-gray-900 dark:text-gray-400",id:"modal-title","aria-label":e.unref(o).modal.data.item.path,"data-microtip-position":"bottom-right",role:"tooltip"},e.toDisplayString(e.unref(o).modal.data.item.basename),9,ms),e.createElementVNode("div",null,[e.createElementVNode("object",{class:"h-[60vh]",data:r(),type:"application/pdf",width:"100%",height:"100%"},[e.createElementVNode("iframe",{class:"border-0",src:r(),width:"100%",height:"100%"},vs,8,ps)],8,fs)])],64))}},ks={class:"sm:flex sm:items-start"},_s={class:"mt-3 text-center sm:mt-0 sm:text-left w-full"},xs={key:0},ys={class:"text-gray-700 dark:text-gray-200 text-sm"},ws={key:0,class:"flex leading-5"},bs=e.createElementVNode("svg",{class:"animate-spin -ml-1 mr-3 h-5 w-5 text-white",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24"},[e.createElementVNode("circle",{class:"opacity-25 stroke-blue-900 dark:stroke-blue-100",cx:"12",cy:"12",r:"10",stroke:"currentColor","stroke-width":"4"}),e.createElementVNode("path",{class:"opacity-75",fill:"currentColor",d:"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"})],-1),Es={class:"py-2 flex font-normal break-all dark:text-gray-200 rounded text-xs"},Vs={class:"font-bold"},Ns={class:"font-bold pl-2"},Bs={key:0,class:"text-xs text-gray-600 dark:text-gray-400"},$s=["download","href"],se={__name:"ModalPreview",setup(a){const t=e.inject("ServiceContainer"),{t:o}=t.i18n,n=e.ref(!1),r=s=>(t.modal.data.item.mime_type??"").startsWith(s),u=t.features.includes(C.PREVIEW);return u||(n.value=!0),(s,i)=>(e.openBlock(),e.createBlock(T,null,{buttons:e.withCtx(()=>[e.createElementVNode("button",{type:"button",onClick:i[6]||(i[6]=l=>e.unref(t).modal.close()),class:"vf-btn vf-btn-secondary"},e.toDisplayString(e.unref(o)("Close")),1),e.unref(t).features.includes(e.unref(C).DOWNLOAD)?(e.openBlock(),e.createElementBlock("a",{key:0,target:"_blank",class:"vf-btn vf-btn-primary",download:e.unref(t).requester.getDownloadUrl(e.unref(t).modal.data.adapter,e.unref(t).modal.data.item),href:e.unref(t).requester.getDownloadUrl(e.unref(t).modal.data.adapter,e.unref(t).modal.data.item)},e.toDisplayString(e.unref(o)("Download")),9,$s)):e.createCommentVNode("",!0)]),default:e.withCtx(()=>[e.createElementVNode("div",ks,[e.createElementVNode("div",_s,[e.unref(u)?(e.openBlock(),e.createElementBlock("div",xs,[r("text")?(e.openBlock(),e.createBlock(Wa,{key:0,onSuccess:i[0]||(i[0]=l=>n.value=!0)})):r("image")?(e.openBlock(),e.createBlock(Za,{key:1,onSuccess:i[1]||(i[1]=l=>n.value=!0)})):r("video")?(e.openBlock(),e.createBlock(ls,{key:2,onSuccess:i[2]||(i[2]=l=>n.value=!0)})):r("audio")?(e.openBlock(),e.createBlock(us,{key:3,onSuccess:i[3]||(i[3]=l=>n.value=!0)})):r("application/pdf")?(e.openBlock(),e.createBlock(gs,{key:4,onSuccess:i[4]||(i[4]=l=>n.value=!0)})):(e.openBlock(),e.createBlock(rs,{key:5,onSuccess:i[5]||(i[5]=l=>n.value=!0)}))])):e.createCommentVNode("",!0),e.createElementVNode("div",ys,[n.value===!1?(e.openBlock(),e.createElementBlock("div",ws,[bs,e.createElementVNode("span",null,e.toDisplayString(e.unref(o)("Loading")),1)])):e.createCommentVNode("",!0)])])]),e.createElementVNode("div",Es,[e.createElementVNode("div",null,[e.createElementVNode("span",Vs,e.toDisplayString(e.unref(o)("File Size"))+": ",1),e.createTextVNode(e.toDisplayString(e.unref(t).filesize(e.unref(t).modal.data.item.file_size)),1)]),e.createElementVNode("div",null,[e.createElementVNode("span",Ns,e.toDisplayString(e.unref(o)("Last Modified"))+": ",1),e.createTextVNode(" "+e.toDisplayString(e.unref(ae)(e.unref(t).modal.data.item.last_modified)),1)])]),e.unref(t).features.includes(e.unref(C).DOWNLOAD)?(e.openBlock(),e.createElementBlock("div",Bs,[e.createElementVNode("span",null,e.toDisplayString(e.unref(o)(`Download doesn't work? You can try right-click "Download" button, select "Save link as...".`)),1)])):e.createCommentVNode("",!0)]),_:1}))}},Ss=["data-type","data-item","data-index"],O={__name:"Item",props:{item:{type:Object},index:{type:Number},dragImage:{type:Object}},setup(a){const t=e.inject("ServiceContainer"),o=t.dragSelect,n=a,r=d=>{d.type==="dir"?(t.emitter.emit("vf-search-exit"),t.emitter.emit("vf-fetch",{params:{q:"index",adapter:t.fs.adapter,path:d.path}})):t.modal.open(se,{adapter:t.fs.adapter,item:d})},u={mounted(d,m,p,v){p.props.draggable&&(d.addEventListener("dragstart",k=>s(k,m.value)),d.addEventListener("dragover",k=>l(k,m.value)),d.addEventListener("drop",k=>i(k,m.value)))},beforeUnmount(d,m,p,v){p.props.draggable&&(d.removeEventListener("dragstart",s),d.removeEventListener("dragover",l),d.removeEventListener("drop",i))}},s=(d,m)=>{if(d.altKey||d.ctrlKey||d.metaKey)return d.preventDefault(),!1;o.isDraggingRef.value=!0,d.dataTransfer.setDragImage(n.dragImage.$el,0,15),d.dataTransfer.effectAllowed="all",d.dataTransfer.dropEffect="copy",d.dataTransfer.setData("items",JSON.stringify(o.getSelected()))},i=(d,m)=>{d.preventDefault(),o.isDraggingRef.value=!1;let p=JSON.parse(d.dataTransfer.getData("items"));if(p.find(v=>v.storage!==t.fs.adapter)){alert("Moving items between different storages is not supported yet.");return}t.modal.open(G,{items:{from:p,to:m}})},l=(d,m)=>{d.preventDefault(),!m||m.type!=="dir"||o.getSelection().find(p=>p===d.currentTarget)?(d.dataTransfer.dropEffect="none",d.dataTransfer.effectAllowed="none"):d.dataTransfer.dropEffect="copy"};let c=null;const f=()=>{c&&clearTimeout(c)},h=d=>{c=setTimeout(()=>{const m=new MouseEvent("contextmenu",{bubbles:!0,cancelable:!1,view:window,button:2,buttons:0,clientX:d.target.getBoundingClientRect().x,clientY:d.target.getBoundingClientRect().y});d.target.dispatchEvent(m)},500)};return(d,m)=>e.withDirectives((e.openBlock(),e.createElementBlock("div",{style:e.normalizeStyle({opacity:e.unref(o).isDraggingRef.value&&e.unref(o).getSelection().find(p=>d.$el===p)?"0.5 !important":""}),class:e.normalizeClass(["vf-item-"+e.unref(o).explorerId]),"data-type":a.item.type,key:a.item.path,"data-item":JSON.stringify(a.item),"data-index":a.index,onDblclick:m[0]||(m[0]=p=>r(a.item)),onTouchstart:m[1]||(m[1]=p=>h(p)),onTouchend:m[2]||(m[2]=p=>f()),onContextmenu:m[3]||(m[3]=e.withModifiers(p=>e.unref(t).emitter.emit("vf-contextmenu-show",{event:p,items:e.unref(o).getSelected(),target:a.item}),["prevent"]))},[e.renderSlot(d.$slots,"default")],46,Ss)),[[u,a.item]])}},Cs={class:"relative flex-auto flex flex-col overflow-hidden"},Ds={key:0,class:"grid grid-cols-12 px-1 bg-neutral-50 dark:bg-gray-800 border-b border-neutral-300 dark:border-gray-700 text-xs select-none divide-x"},Ms={class:"relative"},Ts={class:"grid grid-cols-12 items-center"},Ls={class:"flex col-span-7 items-center"},As={class:"overflow-ellipsis overflow-hidden whitespace-nowrap"},js={class:"col-span-5 overflow-ellipsis overflow-hidden whitespace-nowrap"},Fs={class:"grid grid-cols-12 items-center"},Us={class:"flex col-span-7 items-center"},zs={class:"overflow-ellipsis overflow-hidden whitespace-nowrap"},Is={class:"col-span-2 text-center"},Rs={class:"col-span-3 overflow-ellipsis overflow-hidden whitespace-nowrap px-1 md:px-3"},Hs={class:"relative"},qs=["data-src","alt"],Os={key:2,class:"absolute hidden md:block top-1/2 w-full text-center text-neutral-500"},Ps={class:"break-all"},Gs={__name:"Explorer",setup(a){const t=e.inject("ServiceContainer"),{t:o}=t.i18n,n=m=>m==null?void 0:m.substring(0,3),r=e.ref(null),u=e.ref(""),s=t.dragSelect;let i;t.emitter.on("vf-fullscreen-toggle",()=>{s.area.value.style.height=null}),t.emitter.on("vf-search-query",({newQuery:m})=>{u.value=m,m?t.emitter.emit("vf-fetch",{params:{q:"search",adapter:t.fs.adapter,path:t.fs.data.dirname,filter:m},onSuccess:p=>{p.files.length||t.emitter.emit("vf-toast-push",{label:o("No search result found.")})}}):t.emitter.emit("vf-fetch",{params:{q:"index",adapter:t.fs.adapter,path:t.fs.data.dirname}})});const l=e.ref(!0),c=m=>{m.touches.length>1&&(l.value?(s.instance.stop(),t.emitter.emit("vf-toast-push",{label:o("Drag&Drop: off")})):(s.instance.start(),t.emitter.emit("vf-toast-push",{label:o("Drag&Drop: on")}),s.refreshSelection()),l.value=!l.value)},f=e.reactive({active:!1,column:"",order:""}),h=(m=!0)=>{let p=[...t.fs.data.files],v=f.column,k=f.order==="asc"?1:-1;if(!m)return p;const E=(_,x)=>typeof _=="string"&&typeof x=="string"?_.toLowerCase().localeCompare(x.toLowerCase()):_<x?-1:_>x?1:0;return f.active&&(p=p.slice().sort((_,x)=>E(_[v],x[v])*k)),p},d=m=>{f.active&&f.column===m?(f.active=f.order==="asc",f.column=m,f.order="desc"):(f.active=!0,f.column=m,f.order="asc")};return e.onMounted(()=>{i=new pe(s.area.value)}),e.onUpdated(()=>{i.update()}),e.onBeforeUnmount(()=>{i.destroy()}),(m,p)=>(e.openBlock(),e.createElementBlock("div",Cs,[e.unref(t).view==="list"||u.value.length?(e.openBlock(),e.createElementBlock("div",Ds,[e.createElementVNode("div",{onClick:p[0]||(p[0]=v=>d("basename")),class:"col-span-7 vf-sort-button"},[e.createTextVNode(e.toDisplayString(e.unref(o)("Name"))+" ",1),e.withDirectives(e.createVNode(I,{direction:f.order},null,8,["direction"]),[[e.vShow,f.active&&f.column==="basename"]])]),u.value.length?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",{key:0,onClick:p[1]||(p[1]=v=>d("file_size")),class:"justify-center col-span-2 vf-sort-button"},[e.createTextVNode(e.toDisplayString(e.unref(o)("Size"))+" ",1),e.withDirectives(e.createVNode(I,{direction:f.order},null,8,["direction"]),[[e.vShow,f.active&&f.column==="file_size"]])])),u.value.length?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",{key:1,onClick:p[2]||(p[2]=v=>d("last_modified")),class:"justify-center col-span-3 vf-sort-button"},[e.createTextVNode(e.toDisplayString(e.unref(o)("Date"))+" ",1),e.withDirectives(e.createVNode(I,{direction:f.order},null,8,["direction"]),[[e.vShow,f.active&&f.column==="last_modified"]])])),u.value.length?(e.openBlock(),e.createElementBlock("div",{key:2,onClick:p[3]||(p[3]=v=>d("path")),class:"justify-center col-span-5 vf-sort-button"},[e.createTextVNode(e.toDisplayString(e.unref(o)("Filepath"))+" ",1),e.withDirectives(e.createVNode(I,{direction:f.order},null,8,["direction"]),[[e.vShow,f.active&&f.column==="path"]])])):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0),e.createElementVNode("div",Ms,[e.createVNode(Ra,{ref_key:"dragImage",ref:r,count:e.unref(s).getCount()},null,8,["count"])]),e.createElementVNode("div",{ref:e.unref(s).area,class:e.normalizeClass([e.unref(t).fullScreen?"":"resize-y","h-full w-full text-xs vf-selector-area vf-scrollbar min-h-[150px] overflow-auto p-1 z-0"]),onTouchstart:c,onContextmenu:p[4]||(p[4]=e.withModifiers(v=>e.unref(t).emitter.emit("vf-contextmenu-show",{event:v,items:e.unref(s).getSelected()}),["self","prevent"]))},[u.value.length?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:0},e.renderList(h(),(v,k)=>(e.openBlock(),e.createBlock(O,{item:v,index:k,dragImage:r.value,class:"vf-item vf-item-list"},{default:e.withCtx(()=>[e.createElementVNode("div",Ts,[e.createElementVNode("div",Ls,[e.createVNode(q,{type:v.type,small:e.unref(t).compactListView},null,8,["type","small"]),e.createElementVNode("span",As,e.toDisplayString(v.basename),1)]),e.createElementVNode("div",js,e.toDisplayString(v.path),1)])]),_:2},1032,["item","index","dragImage"]))),256)):e.createCommentVNode("",!0),e.unref(t).view==="list"&&!u.value.length?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:1},e.renderList(h(),(v,k)=>(e.openBlock(),e.createBlock(O,{item:v,index:k,dragImage:r.value,class:"vf-item vf-item-list",draggable:"true"},{default:e.withCtx(()=>[e.createElementVNode("div",Fs,[e.createElementVNode("div",Us,[e.createVNode(q,{type:v.type,small:e.unref(t).compactListView},null,8,["type","small"]),e.createElementVNode("span",zs,e.toDisplayString(v.basename),1)]),e.createElementVNode("div",Is,e.toDisplayString(v.file_size?e.unref(t).filesize(v.file_size):""),1),e.createElementVNode("div",Rs,e.toDisplayString(e.unref(ae)(v.last_modified)),1)])]),_:2},1032,["item","index","dragImage"]))),256)):e.createCommentVNode("",!0),e.unref(t).view==="grid"&&!u.value.length?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:2},e.renderList(h(!1),(v,k)=>(e.openBlock(),e.createBlock(O,{item:v,index:k,dragImage:r.value,class:"vf-item vf-item-grid",draggable:"true"},{default:e.withCtx(()=>[e.createElementVNode("div",null,[e.createElementVNode("div",Hs,[(v.mime_type??"").startsWith("image")&&e.unref(t).showThumbnails?(e.openBlock(),e.createElementBlock("img",{src:"data:image/png;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==",class:"lazy h-10 md:h-12 m-auto","data-src":e.unref(t).requester.getPreviewUrl(e.unref(t).fs.adapter,v),alt:v.basename,key:v.path},null,8,qs)):(e.openBlock(),e.createBlock(q,{key:1,type:v.type},null,8,["type"])),!((v.mime_type??"").startsWith("image")&&e.unref(t).showThumbnails)&&v.type!=="dir"?(e.openBlock(),e.createElementBlock("div",Os,e.toDisplayString(n(v.extension)),1)):e.createCommentVNode("",!0)]),e.createElementVNode("span",Ps,e.toDisplayString(e.unref(P)(v.basename)),1)])]),_:2},1032,["item","index","dragImage"]))),256)):e.createCommentVNode("",!0)],34),e.createVNode(ka)]))}},Ws=["href","download"],Ks=["onClick"],Ys={__name:"ContextMenu",setup(a){const t=e.inject("ServiceContainer"),{t:o}=t.i18n,n=e.ref(null),r=e.ref([]),u=e.ref(""),s=e.reactive({active:!1,items:[],positions:{left:0,top:0}}),i=e.computed(()=>s.items.filter(h=>h.key==null||t.features.includes(h.key)));t.emitter.on("vf-context-selected",h=>{r.value=h});const l={newfolder:{key:C.NEW_FOLDER,title:()=>o("New Folder"),action:()=>t.modal.open(X)},delete:{key:C.DELETE,title:()=>o("Delete"),action:()=>{t.modal.open(ee,{items:r})}},refresh:{title:()=>o("Refresh"),action:()=>{t.emitter.emit("vf-fetch",{params:{q:"index",adapter:t.fs.adapter,path:t.fs.data.dirname}})}},preview:{key:C.PREVIEW,title:()=>o("Preview"),action:()=>t.modal.open(se,{adapter:t.fs.adapter,item:r.value[0]})},open:{title:()=>o("Open"),action:()=>{t.emitter.emit("vf-search-exit"),t.emitter.emit("vf-fetch",{params:{q:"index",adapter:t.fs.adapter,path:r.value[0].path}})}},openDir:{title:()=>o("Open containing folder"),action:()=>{t.emitter.emit("vf-search-exit"),t.emitter.emit("vf-fetch",{params:{q:"index",adapter:t.fs.adapter,path:r.value[0].dir}})}},download:{key:C.DOWNLOAD,link:e.computed(()=>t.requester.getDownloadUrl(t.fs.adapter,r.value[0])),title:()=>o("Download"),action:()=>{}},archive:{key:C.ARCHIVE,title:()=>o("Archive"),action:()=>t.modal.open(oe,{items:r})},unarchive:{key:C.UNARCHIVE,title:()=>o("Unarchive"),action:()=>t.modal.open(te,{items:r})},rename:{key:C.RENAME,title:()=>o("Rename"),action:()=>t.modal.open(Z,{items:r})}},c=h=>{t.emitter.emit("vf-contextmenu-hide"),h.action()};t.emitter.on("vf-search-query",({newQuery:h})=>{u.value=h}),t.emitter.on("vf-contextmenu-show",({event:h,items:d,target:m=null})=>{if(s.items=[],u.value)if(m)s.items.push(l.openDir),t.emitter.emit("vf-context-selected",[m]);else return;else!m&&!u.value?(s.items.push(l.refresh),s.items.push(l.newfolder),t.emitter.emit("vf-context-selected",[])):d.length>1&&d.some(p=>p.path===m.path)?(s.items.push(l.refresh),s.items.push(l.archive),s.items.push(l.delete),t.emitter.emit("vf-context-selected",d)):(m.type==="dir"?s.items.push(l.open):(s.items.push(l.preview),s.items.push(l.download)),s.items.push(l.rename),m.mime_type==="application/zip"?s.items.push(l.unarchive):s.items.push(l.archive),s.items.push(l.delete),t.emitter.emit("vf-context-selected",[m]));f(h)}),t.emitter.on("vf-contextmenu-hide",()=>{s.active=!1});const f=h=>{const d=t.dragSelect.area.value,m=t.root.getBoundingClientRect(),p=d.getBoundingClientRect();let v=h.clientX-m.left,k=h.clientY-m.top;s.active=!0,e.nextTick(()=>{var M;const E=(M=n.value)==null?void 0:M.getBoundingClientRect();let _=(E==null?void 0:E.height)??0,x=(E==null?void 0:E.width)??0;v=p.right-h.pageX+window.scrollX<x?v-x:v,k=p.bottom-h.pageY+window.scrollY<_?k-_:k,s.positions={left:v+"px",top:k+"px"}})};return(h,d)=>e.withDirectives((e.openBlock(),e.createElementBlock("ul",{ref_key:"contextmenu",ref:n,style:e.normalizeStyle(s.positions),class:"z-30 absolute text-xs bg-neutral-50 dark:bg-gray-800 text-gray-700 dark:text-gray-200 border border-neutral-300 dark:border-gray-600 shadow rounded-sm select-none"},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(i.value,m=>(e.openBlock(),e.createElementBlock("li",{class:"cursor-pointer hover:bg-neutral-200 dark:hover:bg-gray-700",key:m.title},[m.link?(e.openBlock(),e.createElementBlock("a",{key:0,class:"block pl-2 pr-3 py-2",target:"_blank",href:m.link,download:m.link,onClick:d[0]||(d[0]=p=>e.unref(t).emitter.emit("vf-contextmenu-hide"))},[e.createElementVNode("span",null,e.toDisplayString(m.title()),1)],8,Ws)):(e.openBlock(),e.createElementBlock("div",{key:1,class:"pl-2 pr-3 py-1.5",onClick:p=>c(m)},[e.createElementVNode("span",null,e.toDisplayString(m.title()),1)],8,Ks))]))),128))],4)),[[e.vShow,s.active]])}},Js=(a,t)=>{const o=a.__vccOpts||a;for(const[n,r]of t)o[n]=r;return o},Qs={props:{on:{type:String,required:!0}},setup(a,{emit:t,slots:o}){const n=e.inject("ServiceContainer"),r=e.ref(!1),{t:u}=n.i18n;let s=null;const i=()=>{clearTimeout(s),r.value=!0,s=setTimeout(()=>{r.value=!1},2e3)};return e.onMounted(()=>{n.emitter.on(a.on,i)}),e.onUnmounted(()=>{clearTimeout(s)}),{shown:r,t:u}}},Xs={key:1};function Zs(a,t,o,n,r,u){return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["text-sm text-green-600 dark:text-green-600 transition-opacity duration-500 ease-out",[{"opacity-0":!n.shown}]])},[a.$slots.default?e.renderSlot(a.$slots,"default",{key:0}):(e.openBlock(),e.createElementBlock("span",Xs,e.toDisplayString(n.t("Saved.")),1))],2)}const U=Js(Qs,[["render",Zs]]),el={class:"sm:flex sm:items-start"},tl=e.createElementVNode("div",{class:"mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-50 dark:bg-gray-500 sm:mx-0 sm:h-10 sm:w-10"},[e.createElementVNode("svg",{xmlns:"http://www.w3.org/2000/svg",class:"h-6 w-6 stroke-blue-600 dark:stroke-blue-100",fill:"none",viewBox:"0 0 24 24","stroke-width":"1.5",stroke:"currentColor"},[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z"}),e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"})])],-1),ol={class:"mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full"},rl={class:"text-lg leading-6 font-medium text-gray-900 dark:text-gray-400",id:"modal-title"},nl={class:"mt-2"},al={class:"text-sm text-gray-500"},sl={class:"text-sm font-semibold mt-5 text-gray-900 dark:text-gray-400 tracking-wider"},ll={class:"mt-3 text-left"},il={class:"space-y-2"},cl={class:"flex relative gap-x-3"},dl={class:"h-6 items-center"},ul={class:"flex-1 block text-sm"},ml={for:"metric_unit",class:"flex w-full font-medium text-gray-900 dark:text-gray-400"},fl={class:"flex relative gap-x-3"},pl={class:"h-6 items-center"},hl={class:"flex-1 block text-sm"},vl={for:"large_icons",class:"flex w-full font-medium text-gray-900 dark:text-gray-400"},gl={class:"flex relative gap-x-3"},kl={class:"h-6 items-center"},_l={class:"flex-1 block text-sm"},xl={for:"persist_path",class:"flex w-full font-medium text-gray-900 dark:text-gray-400"},yl={class:"flex relative gap-x-3"},wl={class:"h-6 items-center"},bl={class:"flex-1 block text-sm"},El={for:"show_thumbnails",class:"flex w-full font-medium text-gray-900 dark:text-gray-400"},Vl={class:"flex relative gap-x-3"},Nl={class:"h-6 items-center"},Bl={for:"theme",class:"flex w-full font-medium text-gray-900 dark:text-gray-400 text-sm"},$l={class:"flex text-sm"},Sl=["label"],Cl=["value"],Dl={key:0,class:"flex relative gap-x-3"},Ml={class:"h-6 items-center"},Tl={for:"language",class:"flex w-full font-medium text-gray-900 dark:text-gray-400 text-sm text-nowrap"},Ll={class:"flex text-sm"},Al=["label"],jl=["value"],Fl={__name:"ModalAbout",setup(a){const t=e.inject("ServiceContainer"),{setStore:o,clearStore:n}=t.storage,{t:r,changeLocale:u,locale:s}=t.i18n,i=async()=>{n(),location.reload()},l=E=>{t.theme.set(E),t.emitter.emit("vf-theme-saved")},c=()=>{t.metricUnits=!t.metricUnits,t.filesize=t.metricUnits?Q:J,o("metricUnits",t.metricUnits),t.emitter.emit("vf-metric-units-saved")},f=()=>{t.compactListView=!t.compactListView,o("compactListView",t.compactListView),t.emitter.emit("vf-compact-view-saved")},h=()=>{t.showThumbnails=!t.showThumbnails,o("show-thumbnails",t.showThumbnails),t.emitter.emit("vf-show-thumbnails-saved")},d=()=>{t.persist=!t.persist,o("persist-path",t.persist),t.emitter.emit("vf-persist-path-saved")},{i18n:m}=e.inject("VueFinderOptions"),v=Object.fromEntries(Object.entries({en:"English",fr:"French (Français)",de:"German (Deutsch)",fa:"Persian (فارسی)",he:"Hebrew (עִברִית)",hi:"Hindi (हिंदी)",ru:"Russian (Pусский)",sv:"Swedish (Svenska)",tr:"Turkish (Türkçe)",zhCN:"Simplified Chinese (简体中文)",zhTW:"Traditional Chinese (繁體中文)"}).filter(([E])=>Object.keys(m).includes(E))),k=e.computed(()=>({system:r("System"),light:r("Light"),dark:r("Dark")}));return(E,_)=>(e.openBlock(),e.createBlock(T,null,{buttons:e.withCtx(()=>[e.createElementVNode("button",{type:"button",onClick:_[8]||(_[8]=x=>e.unref(t).modal.close()),class:"vf-btn vf-btn-secondary"},e.toDisplayString(e.unref(r)("Close")),1)]),default:e.withCtx(()=>[e.createElementVNode("div",el,[tl,e.createElementVNode("div",ol,[e.createElementVNode("h3",rl,e.toDisplayString(e.unref(r)("About %s","Vuefinder "+e.unref(t).version)),1),e.createElementVNode("div",nl,[e.createElementVNode("p",al,e.toDisplayString(e.unref(r)("Vuefinder is a file manager component for vue 3.")),1),e.createElementVNode("div",null,[e.createElementVNode("h3",sl,e.toDisplayString(e.unref(r)("Settings")),1)]),e.createElementVNode("div",ll,[e.createElementVNode("fieldset",null,[e.createElementVNode("div",il,[e.createElementVNode("div",cl,[e.createElementVNode("div",dl,[e.withDirectives(e.createElementVNode("input",{id:"metric_unit",name:"metric_unit",type:"checkbox","onUpdate:modelValue":_[0]||(_[0]=x=>e.unref(t).metricUnits=x),onClick:c,class:"h-4 w-4 rounded border-gray-300 text-indigo-600 dark:accent-slate-400 focus:ring-indigo-600"},null,512),[[e.vModelCheckbox,e.unref(t).metricUnits]])]),e.createElementVNode("div",ul,[e.createElementVNode("label",ml,[e.createTextVNode(e.toDisplayString(e.unref(r)("Use Metric Units"))+" ",1),e.createVNode(U,{class:"ms-3",on:"vf-metric-units-saved"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(e.unref(r)("Saved.")),1)]),_:1})])])]),e.createElementVNode("div",fl,[e.createElementVNode("div",pl,[e.withDirectives(e.createElementVNode("input",{id:"large_icons",name:"large_icons",type:"checkbox","onUpdate:modelValue":_[1]||(_[1]=x=>e.unref(t).compactListView=x),onClick:f,class:"h-4 w-4 rounded border-gray-300 text-indigo-600 dark:accent-slate-400 focus:ring-indigo-600"},null,512),[[e.vModelCheckbox,e.unref(t).compactListView]])]),e.createElementVNode("div",hl,[e.createElementVNode("label",vl,[e.createTextVNode(e.toDisplayString(e.unref(r)("Compact list view"))+" ",1),e.createVNode(U,{class:"ms-3",on:"vf-compact-view-saved"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(e.unref(r)("Saved.")),1)]),_:1})])])]),e.createElementVNode("div",gl,[e.createElementVNode("div",kl,[e.withDirectives(e.createElementVNode("input",{id:"persist_path",name:"persist_path",type:"checkbox","onUpdate:modelValue":_[2]||(_[2]=x=>e.unref(t).persist=x),onClick:d,class:"h-4 w-4 rounded border-gray-300 text-indigo-600 dark:accent-slate-400 focus:ring-indigo-600"},null,512),[[e.vModelCheckbox,e.unref(t).persist]])]),e.createElementVNode("div",_l,[e.createElementVNode("label",xl,[e.createTextVNode(e.toDisplayString(e.unref(r)("Persist path on reload"))+" ",1),e.createVNode(U,{class:"ms-3",on:"vf-persist-path-saved"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(e.unref(r)("Saved.")),1)]),_:1})])])]),e.createElementVNode("div",yl,[e.createElementVNode("div",wl,[e.withDirectives(e.createElementVNode("input",{id:"show_thumbnails",name:"show_thumbnails",type:"checkbox","onUpdate:modelValue":_[3]||(_[3]=x=>e.unref(t).showThumbnails=x),onClick:h,class:"h-4 w-4 rounded border-gray-300 text-indigo-600 dark:accent-slate-400 focus:ring-indigo-600"},null,512),[[e.vModelCheckbox,e.unref(t).showThumbnails]])]),e.createElementVNode("div",bl,[e.createElementVNode("label",El,[e.createTextVNode(e.toDisplayString(e.unref(r)("Show thumbnails"))+" ",1),e.createVNode(U,{class:"ms-3",on:"vf-show-thumbnails-saved"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(e.unref(r)("Saved.")),1)]),_:1})])])]),e.createElementVNode("div",Vl,[e.createElementVNode("div",Nl,[e.createElementVNode("label",Bl,e.toDisplayString(e.unref(r)("Theme")),1)]),e.createElementVNode("div",$l,[e.withDirectives(e.createElementVNode("select",{id:"theme","onUpdate:modelValue":_[4]||(_[4]=x=>e.unref(t).theme.value=x),onChange:_[5]||(_[5]=x=>l(x.target.value)),class:"flex-shrink-0 w-full text-sm text-slate-500 border dark:border-gray-600 dark:text-neutral-50 dark:bg-gray-700 rounded"},[e.createElementVNode("optgroup",{label:e.unref(r)("Theme")},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(k.value,(x,M)=>(e.openBlock(),e.createElementBlock("option",{value:M},e.toDisplayString(x),9,Cl))),256))],8,Sl)],544),[[e.vModelSelect,e.unref(t).theme.value]]),e.createVNode(U,{class:"ms-3 flex-shrink-0 flex-grow basis-full",on:"vf-theme-saved"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(e.unref(r)("Saved.")),1)]),_:1})])]),e.unref(t).features.includes(e.unref(C).LANGUAGE)&&Object.keys(e.unref(v)).length>1?(e.openBlock(),e.createElementBlock("div",Dl,[e.createElementVNode("div",Ml,[e.createElementVNode("label",Tl,e.toDisplayString(e.unref(r)("Language")),1)]),e.createElementVNode("div",Ll,[e.withDirectives(e.createElementVNode("select",{id:"language","onUpdate:modelValue":_[6]||(_[6]=x=>e.isRef(s)?s.value=x:null),onChange:_[7]||(_[7]=x=>e.unref(u)(x.target.value)),class:"flex-shrink-0 w-1/2 sm:w-full text-sm text-slate-500 border dark:border-gray-600 dark:text-neutral-50 dark:bg-gray-700 rounded"},[e.createElementVNode("optgroup",{label:e.unref(r)("Language")},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(v),(x,M)=>(e.openBlock(),e.createElementBlock("option",{value:M},e.toDisplayString(x),9,jl))),256))],8,Al)],544),[[e.vModelSelect,e.unref(s)]]),e.createVNode(U,{class:"ms-3 flex-shrink-0 flex-grow basis-full",on:"vf-language-saved"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(e.unref(r)("Saved.")),1)]),_:1})])])):e.createCommentVNode("",!0),e.createElementVNode("button",{onClick:i,type:"button",class:"vf-btn vf-btn-secondary"},e.toDisplayString(e.unref(r)("Reset Settings")),1)])])])])])])]),_:1}))}},Ul={xmlns:"http://www.w3.org/2000/svg",fill:"none",stroke:"currentColor",class:"h-5 w-5",viewBox:"0 0 24 24"},zl=e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4"},null,-1),Il=[zl];function Rl(a,t){return e.openBlock(),e.createElementBlock("svg",Ul,[...Il])}const Hl={render:Rl},ql={xmlns:"http://www.w3.org/2000/svg",fill:"none",stroke:"currentColor","stroke-width":"2",class:"h-5 w-5 stroke-slate-500 cursor-pointer",viewBox:"0 0 24 24"},Ol=e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0"},null,-1),Pl=[Ol];function Gl(a,t){return e.openBlock(),e.createElementBlock("svg",ql,[...Pl])}const Wl={render:Gl},Kl={class:"p-1 text-xs border-t border-neutral-300 dark:border-gray-700/50 flex justify-between select-none"},Yl={class:"flex leading-5 items-center"},Jl=["aria-label"],Ql=["value"],Xl={class:"ml-3"},Zl={key:0},ei={class:"ml-1"},ti={class:"flex leading-5 items-center justify-end"},oi=["disabled"],ri=["aria-label"],ni={__name:"Statusbar",setup(a){const t=e.inject("ServiceContainer"),{t:o}=t.i18n,{setStore:n}=t.storage,r=t.dragSelect,u=()=>{t.emitter.emit("vf-search-exit"),t.emitter.emit("vf-fetch",{params:{q:"index",adapter:t.fs.adapter}}),n("adapter",t.fs.adapter)},s=e.ref("");t.emitter.on("vf-search-query",({newQuery:l})=>{s.value=l});const i=e.computed(()=>{const l=t.selectButton.multiple?r.getSelected().length>0:r.getSelected().length===1;return t.selectButton.active&&l});return(l,c)=>(e.openBlock(),e.createElementBlock("div",Kl,[e.createElementVNode("div",Yl,[e.createElementVNode("div",{class:"mx-2","aria-label":e.unref(o)("Storage"),"data-microtip-position":"top-right",role:"tooltip"},[e.createVNode(e.unref(Hl))],8,Jl),e.withDirectives(e.createElementVNode("select",{"onUpdate:modelValue":c[0]||(c[0]=f=>e.unref(t).fs.adapter=f),onChange:u,class:"py-0.5 text-sm text-slate-500 border dark:border-gray-600 dark:text-neutral-50 dark:bg-gray-700 rounded pl-2 pr-8"},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(t).fs.data.storages,f=>(e.openBlock(),e.createElementBlock("option",{value:f},e.toDisplayString(f),9,Ql))),256))],544),[[e.vModelSelect,e.unref(t).fs.adapter]]),e.createElementVNode("div",Xl,[s.value.length?(e.openBlock(),e.createElementBlock("span",Zl,e.toDisplayString(e.unref(t).fs.data.files.length)+" items found. ",1)):e.createCommentVNode("",!0),e.createElementVNode("span",ei,e.toDisplayString(e.unref(t).dragSelect.getCount()>0?e.unref(o)("%s item(s) selected.",e.unref(t).dragSelect.getCount()):""),1)])]),e.createElementVNode("div",ti,[e.unref(t).selectButton.active?(e.openBlock(),e.createElementBlock("button",{key:0,class:e.normalizeClass(["vf-btn py-0 vf-btn-primary",{disabled:!i.value}]),disabled:!i.value,onClick:c[1]||(c[1]=f=>e.unref(t).selectButton.click(e.unref(r).getSelected(),f))},e.toDisplayString(e.unref(o)("Select")),11,oi)):e.createCommentVNode("",!0),e.createElementVNode("span",{class:"mr-1","aria-label":e.unref(o)("About"),"data-microtip-position":"top-left",role:"tooltip",onClick:c[2]||(c[2]=f=>e.unref(t).modal.open(Fl))},[e.createVNode(e.unref(Wl))],8,ri)])]))}},ai={__name:"VueFinder",props:{id:{type:String,default:"vf"},request:{type:[String,Object],required:!0},persist:{type:Boolean,default:!1},path:{type:String,default:"."},features:{type:[Array,Boolean],default:!0},debug:{type:Boolean,default:!1},theme:{type:String,default:"system"},locale:{type:String,default:null},maxHeight:{type:String,default:"600px"},maxFileSize:{type:String,default:"10mb"},fullScreen:{type:Boolean,default:!1},showThumbnails:{type:Boolean,default:!0},selectButton:{type:Object,default(a){return{active:!1,multiple:!1,click:t=>{},...a}}}},emits:["select"],setup(a,{emit:t}){const o=t,r=$e(a,e.inject("VueFinderOptions"));e.provide("ServiceContainer",r);const{setStore:u}=r.storage,s=e.ref(null);r.root=s;const i=r.dragSelect,l=f=>{Object.assign(r.fs.data,f),i.clearSelection(),i.refreshSelection()};let c;return r.emitter.on("vf-fetch-abort",()=>{c.abort(),r.fs.loading=!1}),r.emitter.on("vf-fetch",({params:f,body:h=null,onSuccess:d=null,onError:m=null,noCloseModal:p=!1})=>{["index","search"].includes(f.q)&&(c&&c.abort(),r.fs.loading=!0),c=new AbortController;const v=c.signal;r.requester.send({url:"",method:f.m||"get",params:f,body:h,abortSignal:v}).then(k=>{r.fs.adapter=k.adapter,r.persist&&(r.fs.path=k.dirname,u("path",r.fs.path)),["index","search"].includes(f.q)&&(r.fs.loading=!1),p||r.modal.close(),l(k),d&&d(k)}).catch(k=>{console.error(k),m&&m(k)})}),e.onMounted(()=>{let f={};r.fs.path.includes("://")&&(f={adapter:r.fs.path.split("://")[0],path:r.fs.path}),r.emitter.emit("vf-fetch",{params:{q:"index",adapter:r.fs.adapter,...f}}),i.onSelect(h=>{o("select",h)})}),(f,h)=>(e.openBlock(),e.createElementBlock("div",{class:"vuefinder",ref_key:"root",ref:s},[e.createElementVNode("div",{class:e.normalizeClass(e.unref(r).theme.actualValue)},[e.createElementVNode("div",{class:e.normalizeClass([e.unref(r).fullScreen?"fixed w-screen inset-0 z-20":"relative rounded","border flex flex-col bg-white dark:bg-gray-800 text-gray-700 dark:text-neutral-400 border-neutral-300 dark:border-gray-900 select-none"]),style:e.normalizeStyle(e.unref(r).fullScreen?"":"max-height: "+a.maxHeight),onMousedown:h[0]||(h[0]=d=>e.unref(r).emitter.emit("vf-contextmenu-hide")),onTouchstart:h[1]||(h[1]=d=>e.unref(r).emitter.emit("vf-contextmenu-hide"))},[e.createVNode(Gr),e.createVNode(va),e.createVNode(Gs),e.createVNode(ni)],38),e.createVNode(e.Transition,{name:"fade"},{default:e.withCtx(()=>[e.unref(r).modal.visible?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(r).modal.type),{key:0})):e.createCommentVNode("",!0)]),_:1}),e.createVNode(Ys)],2)],512))}},si={install(a,t={}){t.i18n=t.i18n??{};let[o]=Object.keys(t.i18n);t.locale=t.locale??o??"en",a.provide("VueFinderOptions",t),a.component("VueFinder",ai)}};module.exports=si;
diff --git a/dist/vuefinder.js b/dist/vuefinder.js
index ab8743cc..061cdaa9 100644
--- a/dist/vuefinder.js
+++ b/dist/vuefinder.js
@@ -1,22 +1,22 @@
-var Ce = Object.defineProperty;
-var Se = (p, e, s) => e in p ? Ce(p, e, { enumerable: !0, configurable: !0, writable: !0, value: s }) : p[e] = s;
-var fe = (p, e, s) => (Se(p, typeof e != "symbol" ? e + "" : e, s), s);
-import { reactive as ie, watch as de, ref as k, computed as ee, inject as F, openBlock as n, createElementBlock as m, unref as a, createCommentVNode as M, normalizeClass as z, createElementVNode as t, createTextVNode as V, toDisplayString as v, customRef as Me, withModifiers as Y, Fragment as U, renderList as q, withDirectives as I, withKeys as Q, isRef as _e, vModelText as Z, nextTick as ce, createVNode as H, TransitionGroup as Ee, withCtx as A, onMounted as P, onUpdated as De, onBeforeUnmount as ke, vShow as re, normalizeStyle as be, vModelSelect as pe, provide as je, Transition as Ae, createBlock as T, resolveDynamicComponent as Le, renderSlot as le, onUnmounted as Te, vModelCheckbox as Fe } from "vue";
-import Oe from "mitt";
-import Ve from "dragselect";
-import Ne from "vanilla-lazyload";
+var Fe = Object.defineProperty;
+var Oe = (l, e, a) => e in l ? Fe(l, e, { enumerable: !0, configurable: !0, writable: !0, value: a }) : l[e] = a;
+var we = (l, e, a) => (Oe(l, typeof e != "symbol" ? e + "" : e, a), a);
+import { reactive as de, watch as ne, ref as x, shallowRef as je, onMounted as W, onUnmounted as $e, onUpdated as Se, nextTick as le, computed as te, inject as U, openBlock as n, createElementBlock as u, withKeys as oe, unref as t, createElementVNode as s, withModifiers as ee, renderSlot as ie, normalizeClass as q, createCommentVNode as C, createBlock as A, withCtx as M, toDisplayString as c, withDirectives as j, vModelText as re, createTextVNode as V, Fragment as z, renderList as G, onBeforeUnmount as Ce, createVNode as L, customRef as qe, vShow as X, isRef as Ee, TransitionGroup as ze, normalizeStyle as xe, vModelCheckbox as ue, vModelSelect as ge, provide as Pe, Transition as Ge, resolveDynamicComponent as We } from "vue";
+import Ye from "mitt";
+import Ke from "dragselect";
+import Je from "@uppy/core";
+import Qe from "@uppy/xhr-upload";
+import Xe from "vanilla-lazyload";
 import "cropperjs/dist/cropper.css";
-import Be from "cropperjs";
-import ze from "@uppy/core";
-import Ue from "@uppy/xhr-upload";
+import Ze from "cropperjs";
 import "microtip/microtip.css";
-var ge;
-const me = (ge = document.querySelector('meta[name="csrf-token"]')) == null ? void 0 : ge.getAttribute("content");
-class He {
+var ye;
+const pe = (ye = document.querySelector('meta[name="csrf-token"]')) == null ? void 0 : ye.getAttribute("content");
+class et {
   /** @param {RequestConfig} config */
   constructor(e) {
     /** @type {RequestConfig} */
-    fe(this, "config");
+    we(this, "config");
     this.config = e;
   }
   /** @type {RequestConfig} */
@@ -34,29 +34,29 @@ class He {
    * @return {RequestTransformResultInternal}
    */
   transformRequestParams(e) {
-    const s = this.config, r = {};
-    me != null && me !== "" && (r[s.xsrfHeaderName] = me);
-    const o = Object.assign({}, s.headers, r, e.headers), i = Object.assign({}, s.params, e.params), u = e.body, d = s.baseUrl + e.url, l = e.method;
-    let c;
-    l !== "get" && (u instanceof FormData ? (c = u, s.body != null && Object.entries(this.config.body).forEach(([_, y]) => {
-      c.append(_, y);
-    })) : (c = { ...u }, s.body != null && Object.assign(c, this.config.body)));
+    const a = this.config, r = {};
+    pe != null && pe !== "" && (r[a.xsrfHeaderName] = pe);
+    const o = Object.assign({}, a.headers, r, e.headers), v = Object.assign({}, a.params, e.params), i = e.body, m = a.baseUrl + e.url, d = e.method;
+    let f;
+    d !== "get" && (i instanceof FormData ? (f = i, a.body != null && Object.entries(this.config.body).forEach(([b, p]) => {
+      f.append(b, p);
+    })) : (f = { ...i }, a.body != null && Object.assign(f, this.config.body)));
     const g = {
-      url: d,
-      method: l,
+      url: m,
+      method: d,
       headers: o,
-      params: i,
-      body: c
+      params: v,
+      body: f
     };
-    if (s.transformRequest != null) {
-      const _ = s.transformRequest({
-        url: d,
-        method: l,
+    if (a.transformRequest != null) {
+      const b = a.transformRequest({
+        url: m,
+        method: d,
         headers: o,
-        params: i,
-        body: c
+        params: v,
+        body: f
       });
-      _.url != null && (g.url = _.url), _.method != null && (g.method = _.method), _.params != null && (g.params = _.params ?? {}), _.headers != null && (g.headers = _.headers ?? {}), _.body != null && (g.body = _.body);
+      b.url != null && (g.url = b.url), b.method != null && (g.method = b.method), b.params != null && (g.params = b.params ?? {}), b.headers != null && (g.headers = b.headers ?? {}), b.body != null && (g.body = b.body);
     }
     return g;
   }
@@ -68,13 +68,13 @@ class He {
    * @param {String=} node.url
    * @return {String}
    */
-  getDownloadUrl(e, s) {
-    if (s.url != null)
-      return s.url;
+  getDownloadUrl(e, a) {
+    if (a.url != null)
+      return a.url;
     const r = this.transformRequestParams({
       url: "",
       method: "get",
-      params: { q: "download", adapter: e, path: s.path }
+      params: { q: "download", adapter: e, path: a.path }
     });
     return r.url + "?" + new URLSearchParams(r.params).toString();
   }
@@ -86,13 +86,13 @@ class He {
    * @param {String=} node.url
    * @return {String}
    */
-  getPreviewUrl(e, s) {
-    if (s.url != null)
-      return s.url;
+  getPreviewUrl(e, a) {
+    if (a.url != null)
+      return a.url;
     const r = this.transformRequestParams({
       url: "",
       method: "get",
-      params: { q: "preview", adapter: e, path: s.path }
+      params: { q: "preview", adapter: e, path: a.path }
     });
     return r.url + "?" + new URLSearchParams(r.params).toString();
   }
@@ -110,22 +110,22 @@ class He {
    * @throws {Record<String,?String>|null} resp json error
    */
   async send(e) {
-    const s = this.transformRequestParams(e), r = e.responseType || "json", o = {
+    const a = this.transformRequestParams(e), r = e.responseType || "json", o = {
       method: e.method,
-      headers: s.headers,
+      headers: a.headers,
       signal: e.abortSignal
-    }, i = s.url + "?" + new URLSearchParams(s.params);
-    if (s.method !== "get" && s.body != null) {
-      let d;
-      s.body instanceof FormData ? d = e.body : (d = JSON.stringify(s.body), o.headers["Content-Type"] = "application/json"), o.body = d;
+    }, v = a.url + "?" + new URLSearchParams(a.params);
+    if (a.method !== "get" && a.body != null) {
+      let m;
+      a.body instanceof FormData ? m = e.body : (m = JSON.stringify(a.body), o.headers["Content-Type"] = "application/json"), o.body = m;
     }
-    const u = await fetch(i, o);
-    if (u.ok)
-      return await u[r]();
-    throw await u.json();
+    const i = await fetch(v, o);
+    if (i.ok)
+      return await i[r]();
+    throw await i.json();
   }
 }
-function Re(p) {
+function tt(l) {
   const e = {
     baseUrl: "",
     headers: {},
@@ -133,46 +133,46 @@ function Re(p) {
     body: {},
     xsrfHeaderName: "X-CSRF-Token"
   };
-  return typeof p == "string" ? Object.assign(e, { baseUrl: p }) : Object.assign(e, p), new He(e);
+  return typeof l == "string" ? Object.assign(e, { baseUrl: l }) : Object.assign(e, l), new et(e);
 }
-function Ie(p) {
-  let e = localStorage.getItem(p + "_storage");
-  const s = ie(JSON.parse(e ?? "{}"));
-  de(s, r);
+function st(l) {
+  let e = localStorage.getItem(l + "_storage");
+  const a = de(JSON.parse(e ?? "{}"));
+  ne(a, r);
   function r() {
-    Object.keys(s).length ? localStorage.setItem(p + "_storage", JSON.stringify(s)) : localStorage.removeItem(p + "_storage");
+    Object.keys(a).length ? localStorage.setItem(l + "_storage", JSON.stringify(a)) : localStorage.removeItem(l + "_storage");
   }
-  function o(l, c) {
-    s[l] = c;
+  function o(d, f) {
+    a[d] = f;
   }
-  function i(l) {
-    delete s[l];
+  function v(d) {
+    delete a[d];
   }
-  function u() {
-    Object.keys(s).map((l) => i(l));
+  function i() {
+    Object.keys(a).map((d) => v(d));
   }
-  return { getStore: (l, c = null) => s.hasOwnProperty(l) ? s[l] : c, setStore: o, removeStore: i, clearStore: u };
+  return { getStore: (d, f = null) => a.hasOwnProperty(d) ? a[d] : f, setStore: o, removeStore: v, clearStore: i };
 }
-async function qe(p, e) {
-  const s = e[p];
-  return typeof s == "function" ? (await s()).default : s;
+async function at(l, e) {
+  const a = e[l];
+  return typeof a == "function" ? (await a()).default : a;
 }
-function Pe(p, e, s, r) {
-  const { getStore: o, setStore: i } = p, u = k({}), d = k(o("locale", e)), l = (_, y = e) => {
-    qe(_, r).then((x) => {
-      u.value = x, i("locale", _), d.value = _, i("translations", x), Object.values(r).length > 1 && (s.emit("vf-toast-push", { label: "The language is set to " + _ }), s.emit("vf-language-saved"));
-    }).catch((x) => {
-      y ? (s.emit("vf-toast-push", { label: "The selected locale is not yet supported!", type: "error" }), l(y, null)) : s.emit("vf-toast-push", { label: "Locale cannot be loaded!", type: "error" });
+function ot(l, e, a, r) {
+  const { getStore: o, setStore: v } = l, i = x({}), m = x(o("locale", e)), d = (b, p = e) => {
+    at(b, r).then((h) => {
+      i.value = h, v("locale", b), m.value = b, v("translations", h), Object.values(r).length > 1 && (a.emit("vf-toast-push", { label: "The language is set to " + b }), a.emit("vf-language-saved"));
+    }).catch((h) => {
+      p ? (a.emit("vf-toast-push", { label: "The selected locale is not yet supported!", type: "error" }), d(p, null)) : a.emit("vf-toast-push", { label: "Locale cannot be loaded!", type: "error" });
     });
   };
-  !o("locale") && !r.length ? l(e) : u.value = o("translations");
-  const c = (_, ...y) => y.length ? c(_ = _.replace("%s", y.shift()), ...y) : _;
-  function g(_, ...y) {
-    return u.value && u.value.hasOwnProperty(_) ? c(u.value[_], ...y) : c(_, ...y);
+  !o("locale") && !r.length ? d(e) : i.value = o("translations");
+  const f = (b, ...p) => p.length ? f(b = b.replace("%s", p.shift()), ...p) : b;
+  function g(b, ...p) {
+    return i.value && i.value.hasOwnProperty(b) ? f(i.value[b], ...p) : f(b, ...p);
   }
-  return { t: g, changeLocale: l, locale: d };
+  return { t: g, changeLocale: d, locale: m };
 }
-const B = {
+const O = {
   EDIT: "edit",
   NEW_FILE: "newfile",
   NEW_FOLDER: "newfolder",
@@ -186,33 +186,33 @@ const B = {
   FULL_SCREEN: "fullscreen",
   DOWNLOAD: "download",
   LANGUAGE: "language"
-}, We = Object.values(B), Ge = "2.2.7";
-function ye(p, e, s, r, o) {
-  return (e = Math, s = e.log, r = 1024, o = s(p) / s(r) | 0, p / e.pow(r, o)).toFixed(0) + " " + (o ? "KMGTPEZY"[--o] + "iB" : "B");
+}, rt = Object.values(O), nt = "2.3.0";
+function De(l, e, a, r, o) {
+  return (e = Math, a = e.log, r = 1024, o = a(l) / a(r) | 0, l / e.pow(r, o)).toFixed(0) + " " + (o ? "KMGTPEZY"[--o] + "iB" : "B");
 }
-function xe(p, e, s, r, o) {
-  return (e = Math, s = e.log, r = 1e3, o = s(p) / s(r) | 0, p / e.pow(r, o)).toFixed(0) + " " + (o ? "KMGTPEZY"[--o] + "B" : "B");
+function Me(l, e, a, r, o) {
+  return (e = Math, a = e.log, r = 1e3, o = a(l) / a(r) | 0, l / e.pow(r, o)).toFixed(0) + " " + (o ? "KMGTPEZY"[--o] + "B" : "B");
 }
-function Ye(p) {
-  const e = { k: 1, m: 2, g: 3, t: 4 }, r = /(\d+(?:\.\d+)?)\s?(k|m|g|t)?b?/i.exec(p);
+function lt(l) {
+  const e = { k: 1, m: 2, g: 3, t: 4 }, r = /(\d+(?:\.\d+)?)\s?(k|m|g|t)?b?/i.exec(l);
   return r[1] * Math.pow(1024, e[r[2].toLowerCase()]);
 }
-const J = {
+const Q = {
   SYSTEM: "system",
   LIGHT: "light",
   DARK: "dark"
 };
-function Ke(p, e) {
-  const s = k(J.SYSTEM), r = k(J.LIGHT);
-  s.value = p.getStore("theme", e ?? J.SYSTEM);
-  const o = window.matchMedia("(prefers-color-scheme: dark)"), i = (u) => {
-    s.value === J.DARK || s.value === J.SYSTEM && u.matches ? r.value = J.DARK : r.value = J.LIGHT;
+function it(l, e) {
+  const a = x(Q.SYSTEM), r = x(Q.LIGHT);
+  a.value = l.getStore("theme", e ?? Q.SYSTEM);
+  const o = window.matchMedia("(prefers-color-scheme: dark)"), v = (i) => {
+    a.value === Q.DARK || a.value === Q.SYSTEM && i.matches ? r.value = Q.DARK : r.value = Q.LIGHT;
   };
-  return i(o), o.addEventListener("change", i), {
+  return v(o), o.addEventListener("change", v), {
     /**
      * @type {import('vue').Ref<Theme>}
      */
-    value: s,
+    value: a,
     /**
      * @type {import('vue').Ref<Theme>}
      */
@@ -220,661 +220,454 @@ function Ke(p, e) {
     /**
      * @param {Theme} value
      */
-    set(u) {
-      s.value = u, u !== J.SYSTEM ? p.setStore("theme", u) : p.removeStore("theme"), i(o);
+    set(i) {
+      a.value = i, i !== Q.SYSTEM ? l.setStore("theme", i) : l.removeStore("theme"), v(o);
     }
   };
 }
-const Je = (p, e) => {
-  const s = Ie(p.id), r = Oe(), o = s.getStore("metricUnits", !1), i = Ke(s, p.theme), u = e.i18n, d = p.locale ?? e.locale, l = ee(() => Pe(s, d, r, u)), c = (_) => Array.isArray(_) ? _ : We, g = p.persist ? s.getStore("path", p.path) : p.path;
-  return ie({
+function dt() {
+  const l = je(null), e = x(!1), a = x();
+  return { visible: e, type: l, data: a, open: (v, i = null) => {
+    e.value = !0, l.value = v, a.value = i;
+  }, close: () => {
+    e.value = !1, l.value = null;
+  } };
+}
+function ct() {
+  let l;
+  const e = x(), a = Math.floor(Math.random() * 2 ** 32), r = x(!1), o = x([]), v = () => o.value, i = () => l.getSelection(), m = () => o.value.length, d = () => l.clearSelection(!0), f = x();
+  function g() {
+    l = new Ke({
+      area: e.value,
+      keyboardDrag: !1,
+      selectedClass: "vf-explorer-selected",
+      selectorClass: "vf-explorer-selector"
+    }), l.subscribe("DS:start:pre", ({ items: h, event: _, isDragging: w }) => {
+      if (w)
+        l.Interaction._reset(_);
+      else {
+        const y = e.value.offsetWidth - _.offsetX, T = e.value.offsetHeight - _.offsetY;
+        y < 15 && T < 15 && l.Interaction._reset(_);
+      }
+    }), document.addEventListener("dragleave", (h) => {
+      !h.buttons && r.value && (r.value = !1);
+    });
+  }
+  const b = () => le(() => {
+    const h = v().map((_) => _.path);
+    d(), l.setSettings({
+      selectables: document.getElementsByClassName("vf-item-" + a)
+    }), l.addSelection(
+      l.getSelectables().filter((_) => h.includes(JSON.parse(_.dataset.item).path))
+    ), o.value = l.getSelection().map((_) => JSON.parse(_.dataset.item)), f.value(o.value);
+  }), p = (h) => {
+    f.value = h, l.subscribe("DS:end", ({ items: _, event: w, isDragging: y }) => {
+      o.value = _.map((T) => JSON.parse(T.dataset.item)), h(_.map((T) => JSON.parse(T.dataset.item)));
+    });
+  };
+  return W(() => {
+    g();
+  }), $e(() => {
+    l && l.stop();
+  }), Se(() => {
+    l && l.Area.reset();
+  }), {
+    instance: l,
+    area: e,
+    explorerId: a,
+    isDraggingRef: r,
+    getSelected: v,
+    getSelection: i,
+    clearSelection: d,
+    refreshSelection: b,
+    getCount: m,
+    onSelect: p
+  };
+}
+function ut(l, e) {
+  const a = x(l), r = x(e), o = x([]), v = x([]), i = x([]), m = x(!1), d = x(5);
+  let f = !1, g = !1;
+  const b = de({
+    adapter: a,
+    storages: [],
+    dirname: r,
+    files: []
+  });
+  function p() {
+    let $ = [], S = [], Y = r.value ?? a.value + "://";
+    Y.length === 0 && (o.value = []), Y.replace(a.value + "://", "").split("/").forEach(function(D) {
+      $.push(D), $.join("/") !== "" && S.push({
+        basename: D,
+        name: D,
+        path: a.value + "://" + $.join("/"),
+        type: "dir"
+      });
+    }), v.value = S;
+    const [B, E] = _(S, d.value);
+    i.value = E, o.value = B;
+  }
+  function h($) {
+    d.value = $, p();
+  }
+  function _($, S) {
+    return $.length > S ? [$.slice(-S), $.slice(0, -S)] : [$, []];
+  }
+  function w($ = null) {
+    m.value = $ ?? !m.value;
+  }
+  function y() {
+    return o.value && o.value.length && !g;
+  }
+  const T = te(() => {
+    var $;
+    return (($ = o.value[o.value.length - 2]) == null ? void 0 : $.path) ?? a.value + "://";
+  });
+  return W(() => {
+  }), ne(r, p), W(p), {
+    adapter: a,
+    path: r,
+    loading: f,
+    searchMode: g,
+    data: b,
+    breadcrumbs: o,
+    breadcrumbItems: v,
+    limitBreadcrumbItems: h,
+    hiddenBreadcrumbs: i,
+    showHiddenBreadcrumbs: m,
+    toggleHiddenBreadcrumbs: w,
+    isGoUpAvailable: y,
+    parentFolderPath: T
+  };
+}
+const mt = (l, e) => {
+  const a = st(l.id), r = Ye(), o = a.getStore("metricUnits", !1), v = it(a, l.theme), i = e.i18n, m = l.locale ?? e.locale, d = a.getStore("adapter"), f = (p) => Array.isArray(p) ? p : rt, g = a.getStore("persist-path", l.persist), b = g ? a.getStore("path", l.path) : l.path;
+  return de({
+    /*
+    * Core properties
+    * */
     // app version
-    version: Ge,
+    version: nt,
     // root element
     root: null,
     // app id
-    debug: p.debug,
+    debug: l.debug,
     // Event Bus
     emitter: r,
-    // active features
-    features: c(p.features),
+    // storage
+    storage: a,
+    // localization object
+    i18n: te(() => ot(a, m, r, i)),
+    // modal state
+    modal: dt(),
+    // dragSelect object, it is responsible for selecting items
+    dragSelect: te(() => ct()),
     // http object
-    requester: Re(p.request),
-    // theme state
-    theme: i,
+    requester: tt(l.request),
+    // active features
+    features: f(l.features),
     // view state
-    view: s.getStore("viewport", "grid"),
+    view: a.getStore("viewport", "grid"),
     // fullscreen state
-    fullScreen: s.getStore("full-screen", p.fullScreen),
+    fullScreen: a.getStore("full-screen", l.fullScreen),
     // selectButton state
-    selectButton: p.selectButton,
+    selectButton: l.selectButton,
+    // max file size
+    maxFileSize: l.maxFileSize,
+    /*
+    * Settings
+    * */
+    // theme state
+    theme: v,
     // unit state - for example: GB or GiB
     metricUnits: o,
     // human readable file sizes
-    filesize: o ? xe : ye,
-    // max file size
-    maxFileSize: p.maxFileSize,
-    // loading state
-    loading: !1,
-    // default locale
-    i18n: l,
-    // modal state
-    modal: {
-      active: !1,
-      type: "delete",
-      data: {}
-    },
-    // main storage adapter
-    adapter: s.getStore("adapter"),
-    // main storage adapter
-    path: g,
+    filesize: o ? Me : De,
+    // show large icons in list view
+    compactListView: a.getStore("compact-list-view", !0),
     // persist state
-    persist: p.persist,
-    // storage
-    storage: s,
-    // fetched items
-    data: { adapter: s.getStore("adapter"), storages: [], dirname: g, files: [] },
-    // selected items
-    selectedItems: []
+    persist: g,
+    // show thumbnails
+    showThumbnails: a.getStore("show-thumbnails", l.showThumbnails),
+    // file system
+    fs: ut(d, b)
   });
-}, Xe = { class: "border-neutral-300 flex justify-between items-center py-1 text-sm" }, Qe = {
-  key: 0,
-  class: "flex text-center"
-}, Ze = ["aria-label"], et = /* @__PURE__ */ t("svg", {
-  xmlns: "http://www.w3.org/2000/svg",
-  class: "h-6 w-6 md:h-8 md:w-8 m-auto cursor-pointer stroke-gray-500 hover:stroke-cyan-700 dark:stroke-gray-400 dark:hover:stroke-gray-300",
-  fill: "none",
-  viewBox: "0 0 24 24",
-  stroke: "none",
-  "stroke-width": "1.5"
-}, [
-  /* @__PURE__ */ t("path", {
-    "stroke-linecap": "round",
-    "stroke-linejoin": "round",
-    d: "M12 10.5v6m3-3H9m4.06-7.19l-2.12-2.12a1.5 1.5 0 00-1.061-.44H4.5A2.25 2.25 0 002.25 6v12a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9a2.25 2.25 0 00-2.25-2.25h-5.379a1.5 1.5 0 01-1.06-.44z"
-  })
-], -1), tt = [
-  et
-], st = ["aria-label"], at = /* @__PURE__ */ t("svg", {
-  xmlns: "http://www.w3.org/2000/svg",
-  class: "h-6 w-6 md:h-8 md:w-8 m-auto cursor-pointer stroke-gray-500 hover:stroke-cyan-700 dark:stroke-gray-400 dark:hover:stroke-gray-300",
-  fill: "none",
-  viewBox: "0 0 24 24",
-  stroke: "none",
-  "stroke-width": "1.5"
-}, [
-  /* @__PURE__ */ t("path", {
-    "stroke-linecap": "round",
-    "stroke-linejoin": "round",
-    d: "M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m3.75 9v6m3-3H9m1.5-12H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"
-  })
-], -1), ot = [
-  at
-], rt = ["aria-label"], nt = /* @__PURE__ */ t("path", {
-  "stroke-linecap": "round",
-  "stroke-linejoin": "round",
-  d: "M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"
-}, null, -1), lt = [
-  nt
-], it = ["aria-label"], dt = /* @__PURE__ */ t("path", {
-  "stroke-linecap": "round",
-  "stroke-linejoin": "round",
-  d: "M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
-}, null, -1), ct = [
-  dt
-], ut = ["aria-label"], mt = /* @__PURE__ */ t("svg", {
+}, ft = /* @__PURE__ */ s("div", { class: "fixed inset-0 bg-gray-500 dark:bg-gray-600 dark:bg-opacity-75 bg-opacity-75 transition-opacity" }, null, -1), pt = { class: "fixed z-10 inset-0 overflow-hidden" }, vt = { class: "relative bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:max-w-4xl md:max-w-2xl lg:max-w-3xl xl:max-w-3xl w-full" }, ht = { class: "bg-white dark:bg-gray-800 px-4 pt-5 pb-4 sm:p-6 sm:pb-4" }, gt = { class: "bg-gray-50 dark:bg-gray-800 dark:border-t dark:border-gray-700 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse" }, K = {
+  __name: "ModalLayout",
+  setup(l) {
+    const e = U("ServiceContainer");
+    return W(() => {
+      const a = document.querySelector(".v-f-modal input");
+      setTimeout(() => a && a.focus(), 100);
+    }), (a, r) => (n(), u("div", {
+      class: "v-f-modal relative z-30",
+      "aria-labelledby": "modal-title",
+      role: "dialog",
+      "aria-modal": "true",
+      onKeyup: r[1] || (r[1] = oe((o) => t(e).modal.close(), ["esc"])),
+      tabindex: "0"
+    }, [
+      ft,
+      s("div", pt, [
+        s("div", {
+          class: "flex items-end sm:items-center justify-center min-h-full p-4 text-center sm:p-0",
+          onMousedown: r[0] || (r[0] = ee((o) => t(e).modal.close(), ["self"]))
+        }, [
+          s("div", vt, [
+            s("div", ht, [
+              ie(a.$slots, "default")
+            ]),
+            s("div", gt, [
+              ie(a.$slots, "buttons")
+            ])
+          ])
+        ], 32)
+      ])
+    ], 32));
+  }
+}, _t = ["aria-label"], bt = /* @__PURE__ */ s("svg", {
   xmlns: "http://www.w3.org/2000/svg",
-  class: "h-6 w-6 md:h-8 md:w-8 m-auto cursor-pointer stroke-gray-500 hover:stroke-cyan-700 dark:stroke-gray-400 dark:hover:stroke-gray-300",
   fill: "none",
   viewBox: "0 0 24 24",
-  stroke: "none",
-  "stroke-width": "1.5"
+  "stroke-width": "1.5",
+  stroke: "currentColor",
+  class: "w-5 h-5"
 }, [
-  /* @__PURE__ */ t("path", {
+  /* @__PURE__ */ s("path", {
     "stroke-linecap": "round",
     "stroke-linejoin": "round",
-    d: "M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5"
+    d: "M6 18L18 6M6 6l12 12"
   })
-], -1), vt = [
-  mt
-], pt = ["aria-label"], ht = /* @__PURE__ */ t("path", {
-  "stroke-linecap": "round",
-  "stroke-linejoin": "round",
-  d: "M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5m6 4.125l2.25 2.25m0 0l2.25 2.25M12 13.875l2.25-2.25M12 13.875l-2.25 2.25M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z"
-}, null, -1), ft = [
-  ht
-], gt = ["aria-label"], _t = /* @__PURE__ */ t("path", {
-  "stroke-linecap": "round",
-  "stroke-linejoin": "round",
-  d: "M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z"
-}, null, -1), kt = [
-  _t
-], bt = {
-  key: 1,
-  class: "flex text-center"
-}, yt = { class: "pl-2" }, xt = { class: "dark:bg-gray-700 bg-gray-200 text-xs px-2 py-1 rounded" }, wt = {
-  key: 0,
-  class: "animate-spin p-0.5 h-5 w-5 text-white ml-auto",
-  xmlns: "http://www.w3.org/2000/svg",
-  fill: "none",
-  viewBox: "0 0 24 24"
-}, $t = /* @__PURE__ */ t("circle", {
-  class: "opacity-25 stroke-blue-900 dark:stroke-blue-100",
-  cx: "12",
-  cy: "12",
-  r: "10",
-  stroke: "currentColor",
-  "stroke-width": "4"
-}, null, -1), Ct = /* @__PURE__ */ t("path", {
-  class: "opacity-75",
-  fill: "currentColor",
-  d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-}, null, -1), St = [
-  $t,
-  Ct
-], Mt = { class: "flex text-center items-center justify-end" }, Et = ["aria-label"], Dt = {
-  xmlns: "http://www.w3.org/2000/svg",
-  class: "h-6 w-6 md:h-8 md:w-8 m-auto cursor-pointer stroke-gray-500 hover:stroke-cyan-700 dark:stroke-gray-400 dark:hover:stroke-gray-300",
-  fill: "none",
-  viewBox: "0 0 24 24",
-  stroke: "none",
-  "stroke-width": "1.5"
-}, jt = {
-  key: 0,
-  "stroke-linecap": "round",
-  "stroke-linejoin": "round",
-  d: "M9 9V4.5M9 9H4.5M9 9L3.75 3.75M9 15v4.5M9 15H4.5M9 15l-5.25 5.25M15 9h4.5M15 9V4.5M15 9l5.25-5.25M15 15h4.5M15 15v4.5m0-4.5l5.25 5.25"
-}, At = {
-  key: 1,
-  "stroke-linecap": "round",
-  "stroke-linejoin": "round",
-  d: "M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15"
-}, Lt = ["aria-label"], Tt = {
-  key: 0,
-  "stroke-linecap": "round",
-  "stroke-linejoin": "round",
-  d: "M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z"
-}, Ft = {
-  key: 1,
-  "stroke-linecap": "round",
-  "stroke-linejoin": "round",
-  d: "M3.75 12h16.5m-16.5 3.75h16.5M3.75 19.5h16.5M5.625 4.5h12.75a1.875 1.875 0 010 3.75H5.625a1.875 1.875 0 010-3.75z"
-}, Ot = {
-  name: "VFToolbar"
-}, Vt = /* @__PURE__ */ Object.assign(Ot, {
-  setup(p) {
-    const e = F("ServiceContainer"), { setStore: s } = e.storage, { t: r } = e.i18n, o = k([]), i = k("");
-    e.emitter.on("vf-search-query", ({ newQuery: l }) => {
-      i.value = l;
-    });
-    const u = () => {
-      e.fullScreen = !e.fullScreen, s("full-screen", e.fullScreen), e.emitter.emit("vf-fullscreen-toggle");
-    };
-    e.emitter.on("vf-nodes-selected", (l) => {
-      o.value = l;
-    });
+], -1), xt = [
+  bt
+], J = {
+  __name: "Message",
+  props: {
+    error: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["hidden"],
+  setup(l, { emit: e }) {
+    var f;
+    const a = e, r = U("ServiceContainer"), { t: o } = r.i18n, v = x(!1), i = x(null), m = x((f = i.value) == null ? void 0 : f.strMessage);
+    ne(m, () => v.value = !1);
     const d = () => {
-      e.view = e.view === "list" ? "grid" : "list", s("viewport", e.view);
+      a("hidden"), v.value = !0;
     };
-    return (l, c) => (n(), m("div", Xe, [
-      i.value.length ? (n(), m("div", bt, [
-        t("div", yt, [
-          V(v(a(r)("Search results for")) + " ", 1),
-          t("span", xt, v(i.value), 1)
-        ]),
-        a(e).loading ? (n(), m("svg", wt, St)) : M("", !0)
-      ])) : (n(), m("div", Qe, [
-        a(e).features.includes(a(B).NEW_FOLDER) ? (n(), m("div", {
-          key: 0,
-          class: "mx-1.5",
-          "aria-label": a(r)("New Folder"),
-          "data-microtip-position": "bottom-right",
-          role: "tooltip",
-          onClick: c[0] || (c[0] = (g) => a(e).emitter.emit("vf-modal-show", { type: "new-folder", items: o.value }))
-        }, tt, 8, Ze)) : M("", !0),
-        a(e).features.includes(a(B).NEW_FILE) ? (n(), m("div", {
-          key: 1,
-          class: "mx-1.5",
-          "aria-label": a(r)("New File"),
-          "data-microtip-position": "bottom",
-          role: "tooltip",
-          onClick: c[1] || (c[1] = (g) => a(e).emitter.emit("vf-modal-show", { type: "new-file", items: o.value }))
-        }, ot, 8, st)) : M("", !0),
-        a(e).features.includes(a(B).RENAME) ? (n(), m("div", {
-          key: 2,
-          class: "mx-1.5",
-          "aria-label": a(r)("Rename"),
-          "data-microtip-position": "bottom",
-          role: "tooltip",
-          onClick: c[2] || (c[2] = (g) => o.value.length != 1 || a(e).emitter.emit("vf-modal-show", { type: "rename", items: o.value }))
-        }, [
-          (n(), m("svg", {
-            xmlns: "http://www.w3.org/2000/svg",
-            class: z([o.value.length == 1 ? "cursor-pointer stroke-gray-500 hover:stroke-cyan-700 dark:stroke-gray-400 dark:hover:stroke-gray-300" : "stroke-gray-200  dark:stroke-gray-700", "h-6 w-6 md:h-8 md:w-8 m-auto"]),
-            fill: "none",
-            viewBox: "0 0 24 24",
-            stroke: "none",
-            "stroke-width": "1.5"
-          }, lt, 2))
-        ], 8, rt)) : M("", !0),
-        a(e).features.includes(a(B).DELETE) ? (n(), m("div", {
-          key: 3,
-          class: "mx-1.5",
-          "aria-label": a(r)("Delete"),
-          "data-microtip-position": "bottom",
-          role: "tooltip",
-          onClick: c[3] || (c[3] = (g) => !o.value.length || a(e).emitter.emit("vf-modal-show", { type: "delete", items: o.value }))
-        }, [
-          (n(), m("svg", {
-            xmlns: "http://www.w3.org/2000/svg",
-            class: z([o.value.length ? "cursor-pointer stroke-gray-500 hover:stroke-cyan-700 dark:stroke-gray-400 dark:hover:stroke-gray-300" : "stroke-gray-200  dark:stroke-gray-700", "h-6 w-6 md:h-8 md:w-8 m-auto"]),
-            fill: "none",
-            viewBox: "0 0 24 24",
-            stroke: "none",
-            "stroke-width": "1.5"
-          }, ct, 2))
-        ], 8, it)) : M("", !0),
-        a(e).features.includes(a(B).UPLOAD) ? (n(), m("div", {
-          key: 4,
-          class: "mx-1.5",
-          "aria-label": a(r)("Upload"),
-          "data-microtip-position": "bottom",
-          role: "tooltip",
-          onClick: c[4] || (c[4] = (g) => a(e).emitter.emit("vf-modal-show", { type: "upload", items: o.value }))
-        }, vt, 8, ut)) : M("", !0),
-        a(e).features.includes(a(B).UNARCHIVE) && o.value.length == 1 && o.value[0].mime_type == "application/zip" ? (n(), m("div", {
-          key: 5,
-          class: "mx-1.5",
-          "aria-label": a(r)("Unarchive"),
-          "data-microtip-position": "bottom",
-          role: "tooltip",
-          onClick: c[5] || (c[5] = (g) => !o.value.length || a(e).emitter.emit("vf-modal-show", { type: "unarchive", items: o.value }))
-        }, [
-          (n(), m("svg", {
-            xmlns: "http://www.w3.org/2000/svg",
-            class: z([o.value.length ? "cursor-pointer stroke-gray-500 hover:stroke-cyan-700 dark:stroke-gray-400 dark:hover:stroke-gray-300" : "stroke-gray-200  dark:stroke-gray-700", "h-6 w-6 md:h-8 md:w-8 m-auto"]),
-            fill: "none",
-            viewBox: "0 0 24 24",
-            stroke: "none",
-            "stroke-width": "1.5"
-          }, ft, 2))
-        ], 8, pt)) : M("", !0),
-        a(e).features.includes(a(B).ARCHIVE) ? (n(), m("div", {
-          key: 6,
-          class: "mx-1.5",
-          "aria-label": a(r)("Archive"),
-          "data-microtip-position": "bottom",
-          role: "tooltip",
-          onClick: c[6] || (c[6] = (g) => !o.value.length || a(e).emitter.emit("vf-modal-show", { type: "archive", items: o.value }))
-        }, [
-          (n(), m("svg", {
-            xmlns: "http://www.w3.org/2000/svg",
-            class: z([o.value.length ? "cursor-pointer stroke-gray-500 hover:stroke-cyan-700 dark:stroke-gray-400 dark:hover:stroke-gray-300" : "stroke-gray-200  dark:stroke-gray-700", "h-6 w-6 md:h-8 md:w-8 m-auto"]),
-            fill: "none",
-            viewBox: "0 0 24 24",
-            stroke: "none",
-            "stroke-width": "1.5"
-          }, kt, 2))
-        ], 8, gt)) : M("", !0)
-      ])),
-      t("div", Mt, [
-        a(e).features.includes(a(B).FULL_SCREEN) ? (n(), m("div", {
-          key: 0,
-          class: "mx-1.5",
-          "aria-label": a(r)("Toggle Full Screen"),
-          "data-microtip-position": "bottom-left",
-          role: "tooltip",
-          onClick: u
-        }, [
-          (n(), m("svg", Dt, [
-            a(e).fullScreen ? (n(), m("path", jt)) : (n(), m("path", At))
-          ]))
-        ], 8, Et)) : M("", !0),
-        t("div", {
-          class: "mx-1.5",
-          "aria-label": a(r)("Change View"),
-          "data-microtip-position": "bottom-left",
-          role: "tooltip",
-          onClick: c[7] || (c[7] = (g) => i.value.length || d())
-        }, [
-          (n(), m("svg", {
-            xmlns: "http://www.w3.org/2000/svg",
-            class: z([i.value.length ? "stroke-gray-200  dark:stroke-gray-700" : "cursor-pointer stroke-gray-500 hover:stroke-cyan-700 dark:stroke-gray-400 dark:hover:stroke-gray-300", "h-6 w-6 md:h-8 md:w-8 m-auto"]),
-            fill: "none",
-            viewBox: "0 0 24 24",
-            stroke: "none",
-            "stroke-width": "1.5"
-          }, [
-            a(e).view === "grid" ? (n(), m("path", Tt)) : M("", !0),
-            a(e).view === "list" ? (n(), m("path", Ft)) : M("", !0)
-          ], 2))
-        ], 8, Lt)
-      ])
+    return (g, b) => (n(), u("div", null, [
+      v.value ? C("", !0) : (n(), u("div", {
+        key: 0,
+        ref_key: "strMessage",
+        ref: i,
+        class: q(["flex mt-2 p-1 px-2 rounded text-sm break-all dark:opacity-75", l.error ? "bg-red-100 text-red-600 " : "bg-emerald-100 text-emerald-600"])
+      }, [
+        ie(g.$slots, "default"),
+        s("div", {
+          class: "ml-auto cursor-pointer",
+          onClick: d,
+          "aria-label": t(o)("Close"),
+          "data-microtip-position": "top-left",
+          role: "tooltip"
+        }, xt, 8, _t)
+      ], 2))
     ]));
   }
-}), Nt = (p, e = 0, s = !1) => {
-  let r;
-  return (...o) => {
-    s && !r && p(...o), clearTimeout(r), r = setTimeout(() => {
-      p(...o);
-    }, e);
-  };
-}, Bt = (p, e, s) => {
-  const r = k(p);
-  return Me((o, i) => ({
-    get() {
-      return o(), r.value;
-    },
-    set: Nt(
-      (u) => {
-        r.value = u, i();
-      },
-      e,
-      s
-    )
-  }));
-}, zt = { class: "flex p-1.5 bg-neutral-100 dark:bg-gray-800 border-t border-b border-neutral-300 dark:border-gray-700/50 items-center select-none text-sm" }, Ut = ["aria-label"], Ht = /* @__PURE__ */ t("path", {
-  "fill-rule": "evenodd",
-  d: "M5.293 9.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 7.414V15a1 1 0 11-2 0V7.414L6.707 9.707a1 1 0 01-1.414 0z",
-  "clip-rule": "evenodd"
-}, null, -1), Rt = [
-  Ht
-], It = ["aria-label"], qt = /* @__PURE__ */ t("path", { d: "M463.5 224H472c13.3 0 24-10.7 24-24V72c0-9.7-5.8-18.5-14.8-22.2s-19.3-1.7-26.2 5.2L413.4 96.6c-87.6-86.5-228.7-86.2-315.8 1c-87.5 87.5-87.5 229.3 0 316.8s229.3 87.5 316.8 0c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0c-62.5 62.5-163.8 62.5-226.3 0s-62.5-163.8 0-226.3c62.2-62.2 162.7-62.5 225.3-1L327 183c-6.9 6.9-8.9 17.2-5.2 26.2s12.5 14.8 22.2 14.8H463.5z" }, null, -1), Pt = [
-  qt
-], Wt = ["aria-label"], Gt = /* @__PURE__ */ t("path", {
-  "stroke-linecap": "round",
-  "stroke-linejoin": "round",
-  d: "M6 18L18 6M6 6l12 12"
-}, null, -1), Yt = [
-  Gt
-], Kt = /* @__PURE__ */ t("path", { d: "M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" }, null, -1), Jt = [
-  Kt
-], Xt = { class: "flex leading-6" }, Qt = /* @__PURE__ */ t("span", { class: "text-neutral-300 dark:text-gray-600 mx-0.5" }, "/", -1), Zt = ["onDragover", "onDragleave", "onDrop", "title", "onClick"], es = {
-  key: 0,
-  class: "animate-spin p-1 h-6 w-6 text-white ml-auto",
-  xmlns: "http://www.w3.org/2000/svg",
-  fill: "none",
-  viewBox: "0 0 24 24"
-}, ts = /* @__PURE__ */ t("circle", {
-  class: "opacity-25 stroke-blue-900 dark:stroke-blue-100",
-  cx: "12",
-  cy: "12",
-  r: "10",
-  stroke: "currentColor",
-  "stroke-width": "4"
-}, null, -1), ss = /* @__PURE__ */ t("path", {
-  class: "opacity-75",
-  fill: "currentColor",
-  d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-}, null, -1), as = [
-  ts,
-  ss
-], os = {
-  key: 3,
-  class: "relative flex bg-white dark:bg-gray-700 justify-between items-center rounded p-1 ml-2 w-full"
-}, rs = /* @__PURE__ */ t("div", null, [
-  /* @__PURE__ */ t("svg", {
-    class: "h-6 w-6 p-1 m-auto stroke-gray-400 fill-gray-100 dark:stroke-gray-400 dark:fill-gray-400/20",
+}, wt = { class: "sm:flex sm:items-start" }, kt = /* @__PURE__ */ s("div", { class: "mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-50 dark:bg-gray-500 sm:mx-0 sm:h-10 sm:w-10" }, [
+  /* @__PURE__ */ s("svg", {
     xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 20 20",
-    fill: "currentColor"
+    class: "h-6 w-6 stroke-blue-600 dark:stroke-blue-100",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "none",
+    "stroke-width": "1.5"
   }, [
-    /* @__PURE__ */ t("path", {
+    /* @__PURE__ */ s("path", {
       "stroke-linecap": "round",
       "stroke-linejoin": "round",
-      d: "M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
+      d: "M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z"
     })
   ])
-], -1), ns = ["placeholder"], ls = /* @__PURE__ */ t("path", {
-  "stroke-linecap": "round",
-  "stroke-linejoin": "round",
-  d: "M6 18L18 6M6 6l12 12"
-}, null, -1), is = [
-  ls
-], ds = {
-  name: "VFBreadcrumb"
-}, cs = /* @__PURE__ */ Object.assign(ds, {
-  setup(p) {
-    const e = k(null), s = k([]), r = k(!1), o = k(null), i = F("ServiceContainer"), { t: u } = i.i18n;
-    i.emitter.on("vf-explorer-update", () => {
-      let C = [], f = [];
-      e.value = i.data.dirname ?? i.adapter + "://", e.value.length == 0 && (s.value = []), e.value.replace(i.adapter + "://", "").split("/").forEach(function(h) {
-        C.push(h), C.join("/") != "" && f.push({
-          basename: h,
-          name: h,
-          path: i.adapter + "://" + C.join("/"),
-          type: "dir"
-        });
-      }), f.length > 4 && (f = f.slice(-5), f[0].name = ".."), s.value = f;
-    });
-    const d = () => {
-      r.value = !1, c.value = "";
-    };
-    i.emitter.on("vf-search-exit", () => {
-      d();
-    });
-    const l = () => {
-      i.features.includes(B.SEARCH) && (r.value = !0, ce(() => o.value.focus()));
-    }, c = Bt("", 400);
-    de(c, (C) => {
-      i.emitter.emit("vf-toast-clear"), i.emitter.emit("vf-search-query", { newQuery: C });
-    });
-    const g = () => s.value.length && !r.value, _ = (C, f = null) => {
-      C.preventDefault(), x(C), f ?? (f = s.value.length - 2);
-      let h = JSON.parse(C.dataTransfer.getData("items"));
-      if (h.find((N) => N.storage !== i.adapter)) {
-        alert("Moving items between different storages is not supported yet.");
-        return;
-      }
-      i.emitter.emit("vf-modal-show", {
-        type: "move",
-        items: { from: h, to: s.value[f] ?? { path: i.adapter + "://" } }
+], -1), yt = { class: "mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full" }, $t = {
+  class: "text-lg leading-6 font-medium text-gray-900 dark:text-gray-400",
+  id: "modal-title"
+}, St = { class: "mt-2" }, Ct = { class: "text-sm text-gray-500" }, Et = ["placeholder"], Ae = {
+  __name: "ModalNewFolder",
+  setup(l) {
+    const e = U("ServiceContainer");
+    e.storage;
+    const { t: a } = e.i18n, r = x(""), o = x(""), v = () => {
+      r.value !== "" && e.emitter.emit("vf-fetch", {
+        params: {
+          q: "newfolder",
+          m: "post",
+          adapter: e.fs.adapter,
+          path: e.fs.data.dirname
+        },
+        body: {
+          name: r.value
+        },
+        onSuccess: () => {
+          e.emitter.emit("vf-toast-push", { label: a("%s is created.", r.value) });
+        },
+        onError: (i) => {
+          o.value = a(i.message);
+        }
       });
-    }, y = (C) => {
-      C.preventDefault(), g() ? (C.dataTransfer.dropEffect = "copy", C.currentTarget.classList.add("bg-blue-200", "dark:bg-slate-500")) : (C.dataTransfer.dropEffect = "none", C.dataTransfer.effectAllowed = "none");
-    }, x = (C) => {
-      C.preventDefault(), C.currentTarget.classList.remove("bg-blue-200", "dark:bg-slate-500"), g() && C.currentTarget.classList.remove("bg-blue-200", "dark:bg-slate-500");
-    }, E = () => {
-      c.value == "" && d();
     };
-    return (C, f) => (n(), m("div", zt, [
-      t("span", {
-        "aria-label": a(u)("Go up a directory"),
-        "data-microtip-position": "bottom-right",
-        role: "tooltip"
-      }, [
-        (n(), m("svg", {
-          onDragover: f[0] || (f[0] = (h) => y(h)),
-          onDragleave: f[1] || (f[1] = (h) => x(h)),
-          onDrop: f[2] || (f[2] = (h) => _(h)),
-          onClick: f[3] || (f[3] = (h) => {
-            var N;
-            return !g() || a(i).emitter.emit("vf-fetch", { params: { q: "index", adapter: a(i).data.adapter, path: ((N = s.value[s.value.length - 2]) == null ? void 0 : N.path) ?? a(i).adapter + "://" } });
-          }),
-          class: z(["h-6 w-6 p-0.5 rounded", g() ? "text-slate-700 hover:bg-neutral-300 dark:text-neutral-200 dark:hover:bg-gray-700 cursor-pointer" : "text-gray-400 dark:text-neutral-500"]),
-          xmlns: "http://www.w3.org/2000/svg",
-          viewBox: "0 0 20 20",
-          fill: "currentColor"
-        }, Rt, 34))
-      ], 8, Ut),
-      a(i).loading ? (n(), m("span", {
-        key: 1,
-        "aria-label": a(u)("Cancel"),
-        "data-microtip-position": "bottom-right",
-        role: "tooltip"
-      }, [
-        (n(), m("svg", {
-          onClick: f[5] || (f[5] = (h) => a(i).emitter.emit("vf-fetch-abort")),
-          xmlns: "http://www.w3.org/2000/svg",
-          fill: "none",
-          viewBox: "0 0 24 24",
-          "stroke-width": "1.5",
-          stroke: "currentColor",
-          class: "h-6 w-6 p-1 rounded text-slate-700 hover:bg-neutral-300 dark:text-neutral-200 dark:hover:bg-gray-700 cursor-pointer"
-        }, Yt))
-      ], 8, Wt)) : (n(), m("span", {
-        key: 0,
-        "aria-label": a(u)("Refresh"),
-        "data-microtip-position": "bottom-right",
-        role: "tooltip"
-      }, [
-        (n(), m("svg", {
-          onClick: f[4] || (f[4] = (h) => {
-            a(i).emitter.emit("vf-fetch", { params: { q: "index", adapter: a(i).data.adapter, path: a(i).data.dirname } });
-          }),
-          class: "h-6 w-6 p-1 rounded text-slate-700 hover:bg-neutral-300 dark:text-neutral-200 dark:hover:bg-gray-700 cursor-pointer",
-          xmlns: "http://www.w3.org/2000/svg",
-          viewBox: "-40 -40 580 580",
-          fill: "currentColor"
-        }, Pt))
-      ], 8, It)),
-      r.value ? (n(), m("div", os, [
-        rs,
-        I(t("input", {
-          ref_key: "searchInput",
-          ref: o,
-          onKeydown: Q(d, ["esc"]),
-          onBlur: E,
-          "onUpdate:modelValue": f[10] || (f[10] = (h) => _e(c) ? c.value = h : null),
-          placeholder: a(u)("Search anything.."),
-          class: "w-full pb-0 px-1 border-0 text-base ring-0 outline-0 text-gray-600 focus:ring-transparent focus:border-transparent dark:focus:ring-transparent dark:focus:border-transparent dark:text-gray-300 bg-transparent",
-          type: "text"
-        }, null, 40, ns), [
-          [Z, a(c)]
-        ]),
-        (n(), m("svg", {
-          class: "w-6 h-6 cursor-pointer",
-          onClick: d,
-          xmlns: "http://www.w3.org/2000/svg",
-          fill: "none",
-          viewBox: "0 0 24 24",
-          "stroke-width": "1.5",
-          stroke: "currentColor"
-        }, is))
-      ])) : (n(), m("div", {
-        key: 2,
-        class: "group flex bg-white dark:bg-gray-700 items-center rounded p-1 ml-2 w-full",
-        onClick: Y(l, ["self"])
-      }, [
-        (n(), m("svg", {
-          onDragover: f[6] || (f[6] = (h) => y(h)),
-          onDragleave: f[7] || (f[7] = (h) => x(h)),
-          onDrop: f[8] || (f[8] = (h) => _(h, -1)),
-          onClick: f[9] || (f[9] = (h) => a(i).emitter.emit("vf-fetch", { params: { q: "index", adapter: a(i).data.adapter } })),
-          class: "h-6 w-6 p-1 rounded text-slate-700 hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-gray-800 cursor-pointer",
-          xmlns: "http://www.w3.org/2000/svg",
-          viewBox: "0 0 20 20",
-          fill: "currentColor"
-        }, Jt, 32)),
-        t("div", Xt, [
-          (n(!0), m(U, null, q(s.value, (h, N) => (n(), m("div", { key: N }, [
-            Qt,
-            t("span", {
-              onDragover: (R) => N === s.value.length - 1 || y(R),
-              onDragleave: (R) => N === s.value.length - 1 || x(R),
-              onDrop: (R) => N === s.value.length - 1 || _(R, N),
-              class: "px-1.5 py-1 text-slate-700 dark:text-slate-200 hover:bg-neutral-100 dark:hover:bg-gray-800 rounded cursor-pointer",
-              title: h.basename,
-              onClick: (R) => a(i).emitter.emit("vf-fetch", { params: { q: "index", adapter: a(i).data.adapter, path: h.path } })
-            }, v(h.name), 41, Zt)
-          ]))), 128))
-        ]),
-        a(i).loading ? (n(), m("svg", es, as)) : M("", !0)
-      ]))
-    ]));
-  }
-}), we = (p, e = null) => new Date(p * 1e3).toLocaleString(e ?? navigator.language ?? "en-US"), us = {
-  key: 0,
-  xmlns: "http://www.w3.org/2000/svg",
-  class: "h-5 w-5",
-  viewBox: "0 0 20 20",
-  fill: "currentColor"
-}, ms = /* @__PURE__ */ t("path", {
-  "fill-rule": "evenodd",
-  d: "M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z",
-  "clip-rule": "evenodd"
-}, null, -1), vs = [
-  ms
-], ps = {
-  key: 1,
-  xmlns: "http://www.w3.org/2000/svg",
-  class: "h-5 w-5",
-  viewBox: "0 0 20 20",
-  fill: "currentColor"
-}, hs = /* @__PURE__ */ t("path", {
-  "fill-rule": "evenodd",
-  d: "M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z",
-  "clip-rule": "evenodd"
-}, null, -1), fs = [
-  hs
-], gs = {
-  name: "VFSortIcon"
-}, ne = /* @__PURE__ */ Object.assign(gs, {
-  props: { direction: String },
-  setup(p) {
-    return (e, s) => (n(), m("div", null, [
-      p.direction === "down" ? (n(), m("svg", us, vs)) : M("", !0),
-      p.direction === "up" ? (n(), m("svg", ps, fs)) : M("", !0)
-    ]));
+    return (i, m) => (n(), A(K, null, {
+      buttons: M(() => [
+        s("button", {
+          type: "button",
+          onClick: v,
+          class: "vf-btn vf-btn-primary"
+        }, c(t(a)("Create")), 1),
+        s("button", {
+          type: "button",
+          onClick: m[2] || (m[2] = (d) => t(e).modal.close()),
+          class: "vf-btn vf-btn-secondary"
+        }, c(t(a)("Cancel")), 1)
+      ]),
+      default: M(() => [
+        s("div", wt, [
+          kt,
+          s("div", yt, [
+            s("h3", $t, c(t(a)("New Folder")), 1),
+            s("div", St, [
+              s("p", Ct, c(t(a)("Create a new folder")), 1),
+              j(s("input", {
+                "onUpdate:modelValue": m[0] || (m[0] = (d) => r.value = d),
+                onKeyup: oe(v, ["enter"]),
+                class: "px-2 py-1 border rounded dark:bg-gray-700/25 dark:focus:ring-gray-600 dark:focus:border-gray-600 dark:text-gray-100 w-full",
+                placeholder: t(a)("Folder Name"),
+                type: "text"
+              }, null, 40, Et), [
+                [re, r.value]
+              ]),
+              o.value.length ? (n(), A(J, {
+                key: 0,
+                onHidden: m[1] || (m[1] = (d) => o.value = ""),
+                error: ""
+              }, {
+                default: M(() => [
+                  V(c(o.value), 1)
+                ]),
+                _: 1
+              })) : C("", !0)
+            ])
+          ])
+        ])
+      ]),
+      _: 1
+    }));
   }
-}), _s = ["onClick"], ks = {
-  name: "VFToast.vue"
-}, bs = /* @__PURE__ */ Object.assign(ks, {
-  setup(p) {
-    const e = F("ServiceContainer"), { getStore: s } = e.storage, r = k(s("full-screen", !1)), o = k([]), i = (l) => l === "error" ? "text-red-400 border-red-400 dark:text-red-300 dark:border-red-300" : "text-lime-600 border-lime-600 dark:text-lime-300 dark:border-lime-1300", u = (l) => {
-      o.value.splice(l, 1);
-    }, d = (l) => {
-      let c = o.value.findIndex((g) => g.id === l);
-      c !== -1 && u(c);
+}, Dt = { class: "sm:flex sm:items-start" }, Mt = /* @__PURE__ */ s("div", { class: "mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-50 dark:bg-gray-500 sm:mx-0 sm:h-10 sm:w-10" }, [
+  /* @__PURE__ */ s("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    class: "h-6 w-6 stroke-blue-600 dark:stroke-blue-100",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "none",
+    "stroke-width": "1.5"
+  }, [
+    /* @__PURE__ */ s("path", {
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      d: "M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+    })
+  ])
+], -1), At = { class: "mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full" }, Lt = {
+  class: "text-lg leading-6 font-medium text-gray-900 dark:text-gray-400",
+  id: "modal-title"
+}, Bt = { class: "mt-2" }, Vt = { class: "text-sm text-gray-500" }, Tt = ["placeholder"], Nt = {
+  __name: "ModalNewFile",
+  setup(l) {
+    const e = U("ServiceContainer");
+    e.storage;
+    const { t: a } = e.i18n, r = x(""), o = x(""), v = () => {
+      r.value !== "" && e.emitter.emit("vf-fetch", {
+        params: {
+          q: "newfile",
+          m: "post",
+          adapter: e.fs.adapter,
+          path: e.fs.data.dirname
+        },
+        body: {
+          name: r.value
+        },
+        onSuccess: () => {
+          e.emitter.emit("vf-toast-push", { label: a("%s is created.", r.value) });
+        },
+        onError: (i) => {
+          o.value = a(i.message);
+        }
+      });
     };
-    return e.emitter.on("vf-toast-clear", () => {
-      o.value = [];
-    }), e.emitter.on("vf-toast-push", (l) => {
-      let c = (/* @__PURE__ */ new Date()).getTime().toString(36).concat(performance.now().toString(), Math.random().toString()).replace(/\./g, "");
-      l.id = c, o.value.push(l), setTimeout(() => {
-        d(c);
-      }, 5e3);
-    }), (l, c) => (n(), m("div", {
-      class: z([r.value.value ? "fixed" : "absolute", "bottom-0 max-w-fit flex flex-col bottom-0 left-1/2 -translate-x-1/2"])
-    }, [
-      H(Ee, {
-        name: "vf-toast-item",
-        "leave-active-class": "transition-all duration-1000",
-        "leave-to-class": "opacity-0"
-      }, {
-        default: A(() => [
-          (n(!0), m(U, null, q(o.value, (g, _) => (n(), m("div", {
-            onClick: (y) => u(_),
-            key: g,
-            class: z([i(g.type), "inline-block mx-auto my-0.5 py-0.5 px-2 min-w-max bg-gray-50 dark:bg-gray-600 border text-xs sm:text-sm rounded cursor-pointer"])
-          }, v(g.label), 11, _s))), 128))
-        ]),
-        _: 1
-      })
-    ], 2));
+    return (i, m) => (n(), A(K, null, {
+      buttons: M(() => [
+        s("button", {
+          type: "button",
+          onClick: v,
+          class: "vf-btn vf-btn-primary"
+        }, c(t(a)("Create")), 1),
+        s("button", {
+          type: "button",
+          onClick: m[2] || (m[2] = (d) => t(e).modal.close()),
+          class: "vf-btn vf-btn-secondary"
+        }, c(t(a)("Cancel")), 1)
+      ]),
+      default: M(() => [
+        s("div", Dt, [
+          Mt,
+          s("div", At, [
+            s("h3", Lt, c(t(a)("New File")), 1),
+            s("div", Bt, [
+              s("p", Vt, c(t(a)("Create a new file")), 1),
+              j(s("input", {
+                "onUpdate:modelValue": m[0] || (m[0] = (d) => r.value = d),
+                onKeyup: oe(v, ["enter"]),
+                class: "px-2 py-1 border rounded dark:bg-gray-700/25 dark:focus:ring-gray-600 dark:focus:border-gray-600 dark:text-gray-100 w-full",
+                placeholder: t(a)("File Name"),
+                type: "text"
+              }, null, 40, Tt), [
+                [re, r.value]
+              ]),
+              o.value.length ? (n(), A(J, {
+                key: 0,
+                onHidden: m[1] || (m[1] = (d) => o.value = ""),
+                error: ""
+              }, {
+                default: M(() => [
+                  V(c(o.value), 1)
+                ]),
+                _: 1
+              })) : C("", !0)
+            ])
+          ])
+        ])
+      ]),
+      _: 1
+    }));
   }
-});
-function he(p, e = 14) {
-  let s = `((?=([\\w\\W]{0,${e}}))([\\w\\W]{${e + 1},})([\\w\\W]{8,}))`;
-  return p.replace(new RegExp(s), "$2..$4");
-}
-const ys = { class: "relative flex-auto flex flex-col overflow-hidden" }, xs = {
-  key: 0,
-  class: "grid grid-cols-12 border-b border-neutral-300 border-gray-200 dark:border-gray-700 text-xs select-none"
-}, ws = { class: "absolute" }, $s = /* @__PURE__ */ t("svg", {
-  xmlns: "http://www.w3.org/2000/svg",
-  class: "absolute h-6 w-6 md:h-12 md:w-12 m-auto stroke-neutral-500 fill-white dark:fill-gray-700 dark:stroke-gray-600 z-10",
-  fill: "none",
-  viewBox: "0 0 24 24",
-  stroke: "currentColor",
-  "stroke-width": "1"
-}, [
-  /* @__PURE__ */ t("path", {
-    "stroke-linecap": "round",
-    "stroke-linejoin": "round",
-    d: "M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"
-  })
-], -1), Cs = { class: "text-neutral-700 dark:text-neutral-300 p-1 absolute text-center top-4 right-[-2rem] md:top-5 md:right-[-2.4rem] z-20 text-xs" }, Ss = ["onDblclick", "onContextmenu", "data-type", "data-item", "data-index"], Ms = { class: "grid grid-cols-12 items-center" }, Es = { class: "flex col-span-7 items-center" }, Ds = {
+}, Ut = { class: "sm:flex sm:items-start" }, It = /* @__PURE__ */ s("div", { class: "mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-50 dark:bg-gray-500 sm:mx-0 sm:h-10 sm:w-10" }, [
+  /* @__PURE__ */ s("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    class: "h-6 w-6 stroke-blue-600 dark:stroke-blue-100",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "none",
+    "stroke-width": "1.5"
+  }, [
+    /* @__PURE__ */ s("path", {
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      d: "M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
+    })
+  ])
+], -1), Ht = { class: "mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full" }, Rt = {
+  class: "text-lg leading-6 font-medium text-gray-900 dark:text-gray-400",
+  id: "modal-title"
+}, Ft = { class: "mt-2" }, Ot = { class: "flex text-sm text-gray-800 dark:text-gray-400 py-2" }, jt = {
   key: 0,
   xmlns: "http://www.w3.org/2000/svg",
   class: "h-5 w-5 text-neutral-500 fill-sky-500 stroke-sky-500 dark:fill-slate-500 dark:stroke-slate-500",
@@ -882,13 +675,13 @@ const ys = { class: "relative flex-auto flex flex-col overflow-hidden" }, xs = {
   viewBox: "0 0 24 24",
   stroke: "currentColor",
   "stroke-width": "1"
-}, js = /* @__PURE__ */ t("path", {
+}, qt = /* @__PURE__ */ s("path", {
   "stroke-linecap": "round",
   "stroke-linejoin": "round",
   d: "M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"
-}, null, -1), As = [
-  js
-], Ls = {
+}, null, -1), zt = [
+  qt
+], Pt = {
   key: 1,
   xmlns: "http://www.w3.org/2000/svg",
   class: "h-5 w-5 text-neutral-500",
@@ -896,13 +689,106 @@ const ys = { class: "relative flex-auto flex flex-col overflow-hidden" }, xs = {
   viewBox: "0 0 24 24",
   stroke: "currentColor",
   "stroke-width": "1"
-}, Ts = /* @__PURE__ */ t("path", {
+}, Gt = /* @__PURE__ */ s("path", {
   "stroke-linecap": "round",
   "stroke-linejoin": "round",
   d: "M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"
-}, null, -1), Fs = [
-  Ts
-], Os = { class: "overflow-ellipsis overflow-hidden whitespace-nowrap" }, Vs = { class: "col-span-5 overflow-ellipsis overflow-hidden whitespace-nowrap" }, Ns = ["onDblclick", "onContextmenu", "onDragstart", "onDragover", "onDrop", "data-type", "data-item", "data-index"], Bs = { class: "grid grid-cols-12 items-center" }, zs = { class: "flex col-span-7 items-center" }, Us = {
+}, null, -1), Wt = [
+  Gt
+], Yt = { class: "ml-1.5" }, Le = {
+  __name: "ModalRename",
+  setup(l) {
+    const e = U("ServiceContainer"), { t: a } = e.i18n, r = x(e.modal.data.items[0]), o = x(e.modal.data.items[0].basename), v = x(""), i = () => {
+      o.value != "" && e.emitter.emit("vf-fetch", {
+        params: {
+          q: "rename",
+          m: "post",
+          adapter: e.fs.adapter,
+          path: e.fs.data.dirname
+        },
+        body: {
+          item: r.value.path,
+          name: o.value
+        },
+        onSuccess: () => {
+          e.emitter.emit("vf-toast-push", { label: a("%s is renamed.", o.value) });
+        },
+        onError: (m) => {
+          v.value = a(m.message);
+        }
+      });
+    };
+    return (m, d) => (n(), A(K, null, {
+      buttons: M(() => [
+        s("button", {
+          type: "button",
+          onClick: i,
+          class: "vf-btn vf-btn-primary"
+        }, c(t(a)("Rename")), 1),
+        s("button", {
+          type: "button",
+          onClick: d[2] || (d[2] = (f) => t(e).modal.close()),
+          class: "vf-btn vf-btn-secondary"
+        }, c(t(a)("Cancel")), 1)
+      ]),
+      default: M(() => [
+        s("div", Ut, [
+          It,
+          s("div", Ht, [
+            s("h3", Rt, c(t(a)("Rename")), 1),
+            s("div", Ft, [
+              s("p", Ot, [
+                r.value.type === "dir" ? (n(), u("svg", jt, zt)) : (n(), u("svg", Pt, Wt)),
+                s("span", Yt, c(r.value.basename), 1)
+              ]),
+              j(s("input", {
+                "onUpdate:modelValue": d[0] || (d[0] = (f) => o.value = f),
+                onKeyup: oe(i, ["enter"]),
+                class: "px-2 py-1 border rounded dark:bg-gray-700/25 dark:focus:ring-gray-600 dark:focus:border-gray-600 dark:text-gray-100 w-full",
+                placeholder: "Name",
+                type: "text"
+              }, null, 544), [
+                [re, o.value]
+              ]),
+              v.value.length ? (n(), A(J, {
+                key: 0,
+                onHidden: d[1] || (d[1] = (f) => v.value = ""),
+                error: ""
+              }, {
+                default: M(() => [
+                  V(c(v.value), 1)
+                ]),
+                _: 1
+              })) : C("", !0)
+            ])
+          ])
+        ])
+      ]),
+      _: 1
+    }));
+  }
+}, Kt = { class: "sm:flex sm:items-start" }, Jt = /* @__PURE__ */ s("div", { class: "mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 dark:bg-gray-500 sm:mx-0 sm:h-10 sm:w-10" }, [
+  /* @__PURE__ */ s("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    class: "h-6 w-6 stroke-red-600 dark:stroke-red-200",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "none",
+    "stroke-width": "1.5"
+  }, [
+    /* @__PURE__ */ s("path", {
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+    })
+  ])
+], -1), Qt = { class: "mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full" }, Xt = {
+  class: "text-lg leading-6 font-medium text-gray-900 dark:text-gray-400",
+  id: "modal-title"
+}, Zt = { class: "mt-2" }, es = { class: "text-sm text-gray-500" }, ts = {
+  class: "text-gray-500 text-sm mb-1 overflow-auto vf-scrollbar",
+  style: { "max-height": "200px" }
+}, ss = { class: "flex text-sm text-gray-800 dark:text-gray-400" }, as = {
   key: 0,
   xmlns: "http://www.w3.org/2000/svg",
   class: "h-5 w-5 text-neutral-500 fill-sky-500 stroke-sky-500 dark:fill-slate-500 dark:stroke-slate-500",
@@ -910,13 +796,13 @@ const ys = { class: "relative flex-auto flex flex-col overflow-hidden" }, xs = {
   viewBox: "0 0 24 24",
   stroke: "currentColor",
   "stroke-width": "1"
-}, Hs = /* @__PURE__ */ t("path", {
+}, os = /* @__PURE__ */ s("path", {
   "stroke-linecap": "round",
   "stroke-linejoin": "round",
   d: "M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"
-}, null, -1), Rs = [
-  Hs
-], Is = {
+}, null, -1), rs = [
+  os
+], ns = {
   key: 1,
   xmlns: "http://www.w3.org/2000/svg",
   class: "h-5 w-5 text-neutral-500",
@@ -924,831 +810,549 @@ const ys = { class: "relative flex-auto flex flex-col overflow-hidden" }, xs = {
   viewBox: "0 0 24 24",
   stroke: "currentColor",
   "stroke-width": "1"
-}, qs = /* @__PURE__ */ t("path", {
-  "stroke-linecap": "round",
-  "stroke-linejoin": "round",
-  d: "M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"
-}, null, -1), Ps = [
-  qs
-], Ws = { class: "overflow-ellipsis overflow-hidden whitespace-nowrap" }, Gs = { class: "col-span-2 text-center" }, Ys = { class: "col-span-3 overflow-ellipsis overflow-hidden whitespace-nowrap" }, Ks = ["onDblclick", "onContextmenu", "onDragstart", "onDragover", "onDrop", "data-type", "data-item", "data-index"], Js = { class: "relative" }, Xs = {
-  key: 0,
-  xmlns: "http://www.w3.org/2000/svg",
-  class: "h-10 w-10 md:h-12 md:w-12 m-auto fill-sky-500 stroke-sky-500 dark:fill-slate-500 dark:stroke-slate-500",
-  fill: "none",
-  viewBox: "0 0 24 24",
-  stroke: "currentColor",
-  "stroke-width": "1"
-}, Qs = /* @__PURE__ */ t("path", {
-  "stroke-linecap": "round",
-  "stroke-linejoin": "round",
-  d: "M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"
-}, null, -1), Zs = [
-  Qs
-], ea = ["data-src", "alt"], ta = {
-  key: 2,
-  xmlns: "http://www.w3.org/2000/svg",
-  class: "h-10 w-10 md:h-12 md:w-12 m-auto text-neutral-500",
-  fill: "none",
-  viewBox: "0 0 24 24",
-  stroke: "currentColor",
-  "stroke-width": "1"
-}, sa = /* @__PURE__ */ t("path", {
+}, ls = /* @__PURE__ */ s("path", {
   "stroke-linecap": "round",
   "stroke-linejoin": "round",
   d: "M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"
-}, null, -1), aa = [
-  sa
-], oa = {
-  key: 3,
-  class: "absolute hidden md:block top-1/2 w-full text-center text-neutral-500"
-}, ra = { class: "break-all" }, na = {
-  name: "VFExplorer"
-}, la = /* @__PURE__ */ Object.assign(na, {
-  setup(p) {
-    const e = F("ServiceContainer"), { t: s } = e.i18n;
-    e.storage;
-    const r = (w) => w == null ? void 0 : w.substring(0, 3), o = k(null), i = k(null), u = k(0), d = k(null), l = Math.floor(Math.random() * 2 ** 32), c = k("");
-    let g;
-    e.emitter.on("vf-fullscreen-toggle", () => {
-      o.value.style.height = null;
-    }), e.emitter.on("vf-search-query", ({ newQuery: w }) => {
-      c.value = w, w ? e.emitter.emit("vf-fetch", {
+}, null, -1), is = [
+  ls
+], ds = { class: "ml-1.5" }, cs = { class: "m-auto font-bold text-red-500 text-sm dark:text-red-200 text-center" }, Be = {
+  __name: "ModalDelete",
+  setup(l) {
+    const e = U("ServiceContainer"), { t: a } = e.i18n, r = x(e.modal.data.items), o = x(""), v = () => {
+      r.value.length && e.emitter.emit("vf-fetch", {
         params: {
-          q: "search",
-          adapter: e.data.adapter,
-          path: e.data.dirname,
-          filter: w
+          q: "delete",
+          m: "post",
+          adapter: e.fs.adapter,
+          path: e.fs.data.dirname
         },
-        onSuccess: (D) => {
-          D.files.length || e.emitter.emit("vf-toast-push", { label: s("No search result found.") });
-        }
-      }) : e.emitter.emit("vf-fetch", { params: { q: "index", adapter: e.data.adapter, path: e.data.dirname } });
-    });
-    let _ = null;
-    const y = () => {
-      _ && clearTimeout(_);
-    }, x = k(!0), E = (w) => {
-      w.touches.length > 1 && (x.value ? (d.value.stop(), e.emitter.emit("vf-toast-push", { label: s("Drag&Drop: off") })) : (d.value.start(), e.emitter.emit("vf-toast-push", { label: s("Drag&Drop: on") }), e.emitter.emit("vf-explorer-update")), x.value = !x.value);
-    }, C = (w) => {
-      _ = setTimeout(() => {
-        const D = new MouseEvent("contextmenu", {
-          bubbles: !0,
-          cancelable: !1,
-          view: window,
-          button: 2,
-          buttons: 0,
-          clientX: w.target.getBoundingClientRect().x,
-          clientY: w.target.getBoundingClientRect().y
-        });
-        w.target.dispatchEvent(D);
-      }, 500);
-    }, f = (w) => {
-      w.type === "dir" ? (e.emitter.emit("vf-search-exit"), e.emitter.emit("vf-fetch", { params: { q: "index", adapter: e.data.adapter, path: w.path } })) : e.emitter.emit("vf-modal-show", { type: "preview", adapter: e.data.adapter, item: w });
-    }, h = ie({ active: !1, column: "", order: "" }), N = (w = !0) => {
-      let D = [...e.data.files], $ = h.column, j = h.order == "asc" ? 1 : -1;
-      if (!w)
-        return D;
-      const S = (b, L) => typeof b == "string" && typeof L == "string" ? b.toLowerCase().localeCompare(L.toLowerCase()) : b < L ? -1 : b > L ? 1 : 0;
-      return h.active && (D = D.slice().sort((b, L) => S(b[$], L[$]) * j)), D;
-    }, R = (w) => {
-      h.active && h.column == w ? (h.active = h.order == "asc", h.column = w, h.order = "desc") : (h.active = !0, h.column = w, h.order = "asc");
-    }, K = () => d.value.getSelection().map((w) => JSON.parse(w.dataset.item)), te = (w, D) => {
-      if (w.altKey || w.ctrlKey || w.metaKey)
-        return w.preventDefault(), !1;
-      w.dataTransfer.setDragImage(i.value, 0, 15), w.dataTransfer.effectAllowed = "all", w.dataTransfer.dropEffect = "copy", w.dataTransfer.setData("items", JSON.stringify(K()));
-    }, se = (w, D) => {
-      w.preventDefault();
-      let $ = JSON.parse(w.dataTransfer.getData("items"));
-      if ($.find((j) => j.storage !== e.adapter)) {
-        alert("Moving items between different storages is not supported yet.");
-        return;
-      }
-      e.emitter.emit("vf-modal-show", { type: "move", items: { from: $, to: D } });
-    }, ae = (w, D) => {
-      w.preventDefault(), !D || D.type !== "dir" || d.value.getSelection().find(($) => $ == w.currentTarget) ? (w.dataTransfer.dropEffect = "none", w.dataTransfer.effectAllowed = "none") : w.dataTransfer.dropEffect = "copy";
-    }, oe = () => {
-      d.value = new Ve({
-        area: o.value,
-        keyboardDrag: !1,
-        selectedClass: "vf-explorer-selected",
-        selectorClass: "vf-explorer-selector"
-      }), e.emitter.on("vf-explorer-update", () => ce(() => {
-        d.value.clearSelection(), d.value.setSettings({
-          selectables: document.getElementsByClassName("vf-item-" + l)
-        });
-      })), d.value.subscribe("predragstart", ({ event: w, isDragging: D }) => {
-        if (D)
-          u.value = d.value.getSelection().length, d.value.break();
-        else {
-          const $ = w.target.offsetWidth - w.offsetX, j = w.target.offsetHeight - w.offsetY;
-          $ < 15 && j < 15 && (d.value.clearSelection(), d.value.break());
+        body: {
+          items: r.value.map(({ path: i, type: m }) => ({ path: i, type: m }))
+        },
+        onSuccess: () => {
+          e.emitter.emit("vf-toast-push", { label: a("Files deleted.") });
+        },
+        onError: (i) => {
+          o.value = a(i.message);
         }
-      }), d.value.subscribe("predragmove", ({ isDragging: w }) => {
-        w && d.value.break();
-      }), d.value.subscribe("callback", ({ items: w, event: D, isDragging: $ }) => {
-        e.emitter.emit("vf-nodes-selected", K()), u.value = d.value.getSelection().length;
       });
     };
-    return P(() => {
-      g = new Ne(o.value), oe();
-    }), De(() => {
-      d.value.Area.reset(), d.value.SelectorArea.updatePos(), g.update();
-    }), P(() => {
-      de(() => e.view, () => e.emitter.emit("vf-explorer-update"));
-    }), ke(() => {
-      g.destroy();
-    }), (w, D) => (n(), m("div", ys, [
-      a(e).view == "list" || c.value.length ? (n(), m("div", xs, [
-        t("div", {
-          onClick: D[0] || (D[0] = ($) => R("basename")),
-          class: "col-span-7 py-1 leading-6 hover:bg-neutral-100 bg-neutral-50 dark:bg-gray-800 dark:hover:bg-gray-700/10 flex items-center pl-1"
-        }, [
-          V(v(a(s)("Name")) + " ", 1),
-          I(H(ne, {
-            direction: h.order == "asc" ? "down" : "up"
-          }, null, 8, ["direction"]), [
-            [re, h.active && h.column == "basename"]
-          ])
-        ]),
-        c.value.length ? M("", !0) : (n(), m("div", {
-          key: 0,
-          onClick: D[1] || (D[1] = ($) => R("file_size")),
-          class: "col-span-2 py-1 leading-6 hover:bg-neutral-100 bg-neutral-50 dark:bg-gray-800 dark:hover:bg-gray-700/10 flex items-center justify-center border-l border-r dark:border-gray-700"
-        }, [
-          V(v(a(s)("Size")) + " ", 1),
-          I(H(ne, {
-            direction: h.order == "asc" ? "down" : "up"
-          }, null, 8, ["direction"]), [
-            [re, h.active && h.column == "file_size"]
-          ])
-        ])),
-        c.value.length ? M("", !0) : (n(), m("div", {
-          key: 1,
-          onClick: D[2] || (D[2] = ($) => R("last_modified")),
-          class: "col-span-3 py-1 leading-6 hover:bg-neutral-100 bg-neutral-50 dark:bg-gray-800 dark:hover:bg-gray-700/10 flex items-center justify-center"
-        }, [
-          V(v(a(s)("Date")) + " ", 1),
-          I(H(ne, {
-            direction: h.order == "asc" ? "down" : "up"
-          }, null, 8, ["direction"]), [
-            [re, h.active && h.column == "last_modified"]
-          ])
-        ])),
-        c.value.length ? (n(), m("div", {
-          key: 2,
-          onClick: D[3] || (D[3] = ($) => R("path")),
-          class: "col-span-5 py-1 leading-6 hover:bg-neutral-100 bg-neutral-50 dark:bg-gray-800 dark:hover:bg-gray-700/10 flex items-center justify-center border-l dark:border-gray-700"
-        }, [
-          V(v(a(s)("Filepath")) + " ", 1),
-          I(H(ne, {
-            direction: h.order == "asc" ? "down" : "up"
-          }, null, 8, ["direction"]), [
-            [re, h.active && h.column == "path"]
-          ])
-        ])) : M("", !0)
-      ])) : M("", !0),
-      t("div", ws, [
-        t("div", {
-          ref_key: "dragImage",
-          ref: i,
-          class: "absolute -z-50 -top-96"
-        }, [
-          $s,
-          t("div", Cs, v(u.value), 1)
-        ], 512)
+    return (i, m) => (n(), A(K, null, {
+      buttons: M(() => [
+        s("button", {
+          type: "button",
+          onClick: v,
+          class: "vf-btn vf-btn-danger"
+        }, c(t(a)("Yes, Delete!")), 1),
+        s("button", {
+          type: "button",
+          onClick: m[1] || (m[1] = (d) => t(e).modal.close()),
+          class: "vf-btn vf-btn-secondary"
+        }, c(t(a)("Cancel")), 1),
+        s("div", cs, c(t(a)("This action cannot be undone.")), 1)
       ]),
-      t("div", {
-        onTouchstart: E,
-        onContextmenu: D[10] || (D[10] = Y(($) => a(e).emitter.emit("vf-contextmenu-show", { event: $, area: o.value, items: K() }), ["self", "prevent"])),
-        class: z([a(e).fullScreen ? "" : "resize-y", "h-full w-full text-xs vf-selector-area vf-scrollbar min-h-[150px] overflow-auto p-1 z-0"]),
-        ref_key: "selectorArea",
-        ref: o
-      }, [
-        c.value.length ? (n(!0), m(U, { key: 0 }, q(N(), ($, j) => (n(), m("div", {
-          onDblclick: (S) => f($),
-          onTouchstart: D[4] || (D[4] = (S) => C(S)),
-          onTouchend: D[5] || (D[5] = (S) => y()),
-          onContextmenu: Y((S) => a(e).emitter.emit("vf-contextmenu-show", { event: S, area: o.value, items: K(), target: $ }), ["prevent"]),
-          class: z(["vf-item-" + a(l), "grid grid-cols-1 border hover:bg-neutral-50 dark:hover:bg-gray-700 border-transparent my-0.5 w-full select-none"]),
-          "data-type": $.type,
-          "data-item": JSON.stringify($),
-          "data-index": j
-        }, [
-          t("div", Ms, [
-            t("div", Es, [
-              $.type === "dir" ? (n(), m("svg", Ds, As)) : (n(), m("svg", Ls, Fs)),
-              t("span", Os, v($.basename), 1)
-            ]),
-            t("div", Vs, v($.path), 1)
-          ])
-        ], 42, Ss))), 256)) : M("", !0),
-        a(e).view === "list" && !c.value.length ? (n(!0), m(U, { key: 1 }, q(N(), ($, j) => (n(), m("div", {
-          draggable: "true",
-          onDblclick: (S) => f($),
-          onTouchstart: D[6] || (D[6] = (S) => C(S)),
-          onTouchend: D[7] || (D[7] = (S) => y()),
-          onContextmenu: Y((S) => a(e).emitter.emit("vf-contextmenu-show", { event: S, area: o.value, items: K(), target: $ }), ["prevent"]),
-          onDragstart: (S) => te(S),
-          onDragover: (S) => ae(S, $),
-          onDrop: (S) => se(S, $),
-          class: z(["vf-item-" + a(l), "grid grid-cols-1 border hover:bg-neutral-50 dark:hover:bg-gray-700 border-transparent my-0.5 w-full select-none"]),
-          "data-type": $.type,
-          "data-item": JSON.stringify($),
-          "data-index": j
-        }, [
-          t("div", Bs, [
-            t("div", zs, [
-              $.type === "dir" ? (n(), m("svg", Us, Rs)) : (n(), m("svg", Is, Ps)),
-              t("span", Ws, v($.basename), 1)
-            ]),
-            t("div", Gs, v($.file_size ? a(e).filesize($.file_size) : ""), 1),
-            t("div", Ys, v(a(we)($.last_modified)), 1)
-          ])
-        ], 42, Ns))), 256)) : M("", !0),
-        a(e).view === "grid" && !c.value.length ? (n(!0), m(U, { key: 2 }, q(N(!1), ($, j) => (n(), m("div", {
-          draggable: "true",
-          onDblclick: (S) => f($),
-          onTouchstart: D[8] || (D[8] = (S) => C(S)),
-          onTouchend: D[9] || (D[9] = (S) => y()),
-          onContextmenu: Y((S) => a(e).emitter.emit("vf-contextmenu-show", { event: S, area: o.value, items: K(), target: $ }), ["prevent"]),
-          onDragstart: (S) => te(S),
-          onDragover: (S) => ae(S, $),
-          onDrop: (S) => se(S, $),
-          class: z(["vf-item-" + a(l), "border border-transparent hover:bg-neutral-50 m-1 dark:hover:bg-gray-700 inline-flex w-[5.5rem] h-20 md:w-24 text-center justify-center select-none"]),
-          "data-type": $.type,
-          "data-item": JSON.stringify($),
-          "data-index": j
-        }, [
-          t("div", null, [
-            t("div", Js, [
-              $.type === "dir" ? (n(), m("svg", Xs, Zs)) : ($.mime_type ?? "").startsWith("image") ? (n(), m("img", {
-                class: "lazy h-10 md:h-12 m-auto",
-                "data-src": a(e).requester.getPreviewUrl(a(e).adapter, $),
-                alt: $.basename,
-                key: $.path
-              }, null, 8, ea)) : (n(), m("svg", ta, aa)),
-              !($.mime_type ?? "").startsWith("image") && $.type != "dir" ? (n(), m("div", oa, v(r($.extension)), 1)) : M("", !0)
-            ]),
-            t("span", ra, v(a(he)($.basename)), 1)
+      default: M(() => [
+        s("div", Kt, [
+          Jt,
+          s("div", Qt, [
+            s("h3", Xt, c(t(a)("Delete files")), 1),
+            s("div", Zt, [
+              s("p", es, c(t(a)("Are you sure you want to delete these files?")), 1),
+              s("div", ts, [
+                (n(!0), u(z, null, G(r.value, (d) => (n(), u("p", ss, [
+                  d.type === "dir" ? (n(), u("svg", as, rs)) : (n(), u("svg", ns, is)),
+                  s("span", ds, c(d.basename), 1)
+                ]))), 256))
+              ]),
+              o.value.length ? (n(), A(J, {
+                key: 0,
+                onHidden: m[0] || (m[0] = (d) => o.value = ""),
+                error: ""
+              }, {
+                default: M(() => [
+                  V(c(o.value), 1)
+                ]),
+                _: 1
+              })) : C("", !0)
+            ])
           ])
-        ], 42, Ks))), 256)) : M("", !0)
-      ], 34),
-      H(bs)
-    ]));
+        ])
+      ]),
+      _: 1
+    }));
   }
-}), ia = ["href", "download"], da = ["onClick"], ca = {
-  name: "VFContextMenu"
-}, ua = /* @__PURE__ */ Object.assign(ca, {
-  setup(p) {
-    const e = F("ServiceContainer"), { t: s } = e.i18n, r = k(null), o = k([]), i = k(""), u = ie({
-      active: !1,
-      items: [],
-      positions: {
-        left: 0,
-        top: 0
+};
+function _e(l, e = 14) {
+  let a = `((?=([\\w\\W]{0,${e}}))([\\w\\W]{${e + 1},})([\\w\\W]{8,}))`;
+  return l.replace(new RegExp(a), "$2..$4");
+}
+const us = { class: "sm:flex sm:items-start" }, ms = /* @__PURE__ */ s("div", { class: "mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-50 dark:bg-gray-500 sm:mx-0 sm:h-10 sm:w-10" }, [
+  /* @__PURE__ */ s("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    class: "h-6 w-6 stroke-blue-600 dark:stroke-blue-100",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "none",
+    "stroke-width": "1.5"
+  }, [
+    /* @__PURE__ */ s("path", {
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      d: "M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"
+    })
+  ])
+], -1), fs = { class: "mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full" }, ps = {
+  class: "text-lg leading-6 font-medium text-gray-900 dark:text-gray-400",
+  id: "modal-title"
+}, vs = { class: "mt-2" }, hs = {
+  key: 0,
+  class: "pointer-events-none"
+}, gs = {
+  key: 1,
+  class: "pointer-events-none"
+}, _s = ["disabled"], bs = ["disabled"], xs = { class: "text-gray-500 text-sm mb-1 pr-1 max-h-[200px] overflow-y-auto vf-scrollbar" }, ws = { class: "rounded flex flex-shrink-0 w-6 h-6 border bg-gray-50 text-xs cursor-default dark:border-gray-700 dark:bg-gray-800 dark:text-gray-50" }, ks = ["textContent"], ys = { class: "ml-1 w-full h-fit" }, $s = { class: "text-left hidden md:block" }, Ss = { class: "text-left md:hidden" }, Cs = {
+  key: 0,
+  class: "ml-auto"
+}, Es = ["title", "disabled", "onClick"], Ds = /* @__PURE__ */ s("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  "stroke-width": "1.5",
+  stroke: "currentColor",
+  class: "w-5 h-5"
+}, [
+  /* @__PURE__ */ s("path", {
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round",
+    d: "M6 18L18 6M6 6l12 12"
+  })
+], -1), Ms = [
+  Ds
+], As = {
+  key: 0,
+  class: "py-2"
+}, Ls = ["disabled"], Bs = {
+  __name: "ModalUpload",
+  setup(l) {
+    const e = U("ServiceContainer"), { t: a } = e.i18n, r = a("uppy"), o = {
+      PENDING: 0,
+      CANCELED: 1,
+      UPLOADING: 2,
+      ERROR: 3,
+      DONE: 10
+    }, v = x({ QUEUE_ENTRY_STATUS: o }), i = x(null), m = x(null), d = x(null), f = x(null), g = x(null), b = x(null), p = x([]), h = x(""), _ = x(!1), w = x(!1);
+    let y;
+    function T(H) {
+      return p.value.findIndex((P) => P.id === H);
+    }
+    function $(H, P = null) {
+      P = P ?? (H.webkitRelativePath || H.name), y.addFile({
+        name: P,
+        type: H.type,
+        data: H,
+        source: "Local"
+      });
+    }
+    function S(H) {
+      switch (H.status) {
+        case o.DONE:
+          return "text-green-600";
+        case o.ERROR:
+          return "text-red-600";
+        case o.CANCELED:
+          return "text-red-600";
+        case o.PENDING:
+        default:
+          return "";
       }
-    }), d = ee(() => u.items.filter((_) => _.key == null || e.features.includes(_.key)));
-    e.emitter.on("vf-context-selected", (_) => {
-      o.value = _;
-    });
-    const l = {
-      newfolder: {
-        key: B.NEW_FOLDER,
-        title: () => s("New Folder"),
-        action: () => {
-          e.emitter.emit("vf-modal-show", { type: "new-folder" });
-        }
-      },
-      delete: {
-        key: B.DELETE,
-        title: () => s("Delete"),
-        action: () => {
-          e.emitter.emit("vf-modal-show", { type: "delete", items: o });
-        }
-      },
-      refresh: {
-        title: () => s("Refresh"),
-        action: () => {
-          e.emitter.emit("vf-fetch", { params: { q: "index", adapter: e.data.adapter, path: e.data.dirname } });
-        }
-      },
-      preview: {
-        key: B.PREVIEW,
-        title: () => s("Preview"),
-        action: () => {
-          e.emitter.emit("vf-modal-show", { type: "preview", adapter: e.data.adapter, item: o.value[0] });
-        }
-      },
-      open: {
-        title: () => s("Open"),
-        action: () => {
-          e.emitter.emit("vf-search-exit"), e.emitter.emit("vf-fetch", { params: { q: "index", adapter: e.data.adapter, path: o.value[0].path } });
-        }
-      },
-      openDir: {
-        title: () => s("Open containing folder"),
-        action: () => {
-          e.emitter.emit("vf-search-exit"), e.emitter.emit("vf-fetch", { params: { q: "index", adapter: e.data.adapter, path: o.value[0].dir } });
-        }
-      },
-      download: {
-        key: B.DOWNLOAD,
-        link: ee(() => e.requester.getDownloadUrl(e.data.adapter, o.value[0])),
-        title: () => s("Download"),
-        action: () => {
+    }
+    const Y = (H) => {
+      switch (H.status) {
+        case o.DONE:
+          return "✓";
+        case o.ERROR:
+        case o.CANCELED:
+          return "!";
+        case o.PENDING:
+        default:
+          return "...";
+      }
+    };
+    function B() {
+      f.value.click();
+    }
+    function E() {
+      if (!_.value) {
+        if (!p.value.filter((H) => H.status !== o.DONE).length) {
+          h.value = a("Please select file to upload first.");
+          return;
         }
-      },
-      archive: {
-        key: B.ARCHIVE,
-        title: () => s("Archive"),
-        action: () => {
-          e.emitter.emit("vf-modal-show", { type: "archive", items: o });
+        h.value = "", y.retryAll(), y.upload();
+      }
+    }
+    function D() {
+      y.cancelAll({ reason: "user" }), p.value.forEach((H) => {
+        H.status !== o.DONE && (H.status = o.CANCELED, H.statusName = a("Canceled"));
+      }), _.value = !1;
+    }
+    function R(H) {
+      _.value || (y.removeFile(H.id, "removed-by-user"), p.value.splice(T(H.id), 1));
+    }
+    function F(H) {
+      if (!_.value) {
+        if (y.cancelAll({ reason: "user" }), H) {
+          const P = [];
+          p.value.forEach((k) => {
+            k.status !== o.DONE && P.push(k);
+          }), p.value = [], P.forEach((k) => {
+            $(k.originalFile, k.name);
+          });
+          return;
         }
-      },
-      unarchive: {
-        key: B.UNARCHIVE,
-        title: () => s("Unarchive"),
-        action: () => {
-          e.emitter.emit("vf-modal-show", { type: "unarchive", items: o });
+        p.value.splice(0);
+      }
+    }
+    function ce() {
+      e.modal.close();
+    }
+    function se() {
+      return e.requester.transformRequestParams({
+        url: "",
+        method: "post",
+        params: { q: "upload", adapter: e.fs.adapter, path: e.fs.data.dirname }
+      });
+    }
+    return W(async () => {
+      y = new Je({
+        debug: e.debug,
+        restrictions: {
+          maxFileSize: lt(e.maxFileSize)
+          //maxNumberOfFiles
+          //allowedFileTypes
+        },
+        locale: r,
+        onBeforeFileAdded(k, N) {
+          if (N[k.id] != null) {
+            const Z = T(k.id);
+            p.value[Z].status === o.PENDING && (h.value = y.i18n("noDuplicates", { fileName: k.name })), p.value = p.value.filter((fe) => fe.id !== k.id);
+          }
+          return p.value.push({
+            id: k.id,
+            name: k.name,
+            size: e.filesize(k.size),
+            status: o.PENDING,
+            statusName: a("Pending upload"),
+            percent: null,
+            originalFile: k.data
+          }), !0;
         }
-      },
-      rename: {
-        key: B.RENAME,
-        title: () => s("Rename"),
-        action: () => {
-          e.emitter.emit("vf-modal-show", { type: "rename", items: o });
+      }), y.use(Qe, {
+        endpoint: "WILL_BE_REPLACED_BEFORE_UPLOAD",
+        limit: 5,
+        timeout: 0,
+        getResponseError(k, N) {
+          let I;
+          try {
+            I = JSON.parse(k).message;
+          } catch {
+            I = a("Cannot parse server response.");
+          }
+          return new Error(I);
         }
+      }), y.on("restriction-failed", (k, N) => {
+        const I = p.value[T(k.id)];
+        R(I), h.value = N.message;
+      }), y.on("upload", () => {
+        const k = se();
+        y.setMeta({ ...k.body });
+        const N = y.getPlugin("XHRUpload");
+        N.opts.method = k.method, N.opts.endpoint = k.url + "?" + new URLSearchParams(k.params), N.opts.headers = k.headers, _.value = !0, p.value.forEach((I) => {
+          I.status !== o.DONE && (I.percent = null, I.status = o.UPLOADING, I.statusName = a("Pending upload"));
+        });
+      }), y.on("upload-progress", (k, N) => {
+        const I = Math.floor(N.bytesUploaded / N.bytesTotal * 100);
+        p.value[T(k.id)].percent = `${I}%`;
+      }), y.on("upload-success", (k) => {
+        const N = p.value[T(k.id)];
+        N.status = o.DONE, N.statusName = a("Done");
+      }), y.on("upload-error", (k, N) => {
+        const I = p.value[T(k.id)];
+        I.percent = null, I.status = o.ERROR, N.isNetworkError ? I.statusName = a("Network Error, Unable establish connection to the server or interrupted.") : I.statusName = N ? N.message : a("Unknown Error");
+      }), y.on("error", (k) => {
+        h.value = k.message, _.value = !1, e.emitter.emit("vf-fetch", {
+          params: { q: "index", adapter: e.fs.adapter, path: e.fs.data.dirname },
+          noCloseModal: !0
+        });
+      }), y.on("complete", () => {
+        _.value = !1, e.emitter.emit("vf-fetch", {
+          params: { q: "index", adapter: e.fs.adapter, path: e.fs.data.dirname },
+          noCloseModal: !0
+        });
+      }), f.value.addEventListener("click", () => {
+        m.value.click();
+      }), g.value.addEventListener("click", () => {
+        d.value.click();
+      }), b.value.addEventListener("dragover", (k) => {
+        k.preventDefault(), w.value = !0;
+      }), b.value.addEventListener("dragleave", (k) => {
+        k.preventDefault(), w.value = !1;
+      });
+      function H(k, N) {
+        N.isFile && N.file((I) => k(N, I)), N.isDirectory && N.createReader().readEntries((I) => {
+          I.forEach((Z) => {
+            H(k, Z);
+          });
+        });
       }
-    }, c = (_) => {
-      e.emitter.emit("vf-contextmenu-hide"), _.action();
-    };
-    e.emitter.on("vf-search-query", ({ newQuery: _ }) => {
-      i.value = _;
-    }), e.emitter.on("vf-contextmenu-show", ({ event: _, area: y, items: x, target: E = null }) => {
-      if (u.items = [], i.value)
-        if (E)
-          u.items.push(l.openDir), e.emitter.emit("vf-context-selected", [E]);
-        else
-          return;
-      else
-        !E && !i.value ? (u.items.push(l.refresh), u.items.push(l.newfolder), e.emitter.emit("vf-context-selected", [])) : x.length > 1 && x.some((C) => C.path === E.path) ? (u.items.push(l.refresh), u.items.push(l.archive), u.items.push(l.delete), e.emitter.emit("vf-context-selected", x)) : (E.type == "dir" ? u.items.push(l.open) : (u.items.push(l.preview), u.items.push(l.download)), u.items.push(l.rename), E.mime_type == "application/zip" ? u.items.push(l.unarchive) : u.items.push(l.archive), u.items.push(l.delete), e.emitter.emit("vf-context-selected", [E]));
-      g(_, y);
-    }), e.emitter.on("vf-contextmenu-hide", () => {
-      u.active = !1;
-    });
-    const g = (_, y) => {
-      u.active = !0, ce(() => {
-        const x = e.root.getBoundingClientRect(), E = y.getBoundingClientRect();
-        let C = _.pageX - x.left, f = _.pageY - x.top, h = r.value.offsetHeight, N = r.value.offsetWidth;
-        C = E.right - _.pageX + window.scrollX < N ? C - N : C, f = E.bottom - _.pageY + window.scrollY < h ? f - h : f, u.positions = {
-          left: C + "px",
-          top: f + "px"
-        };
+      b.value.addEventListener("drop", (k) => {
+        k.preventDefault(), w.value = !1;
+        const N = /^[/\\](.+)/;
+        [...k.dataTransfer.items].forEach((I) => {
+          I.kind === "file" && H((Z, fe) => {
+            const Re = N.exec(Z.fullPath);
+            $(fe, Re[1]);
+          }, I.webkitGetAsEntry());
+        });
       });
-    };
-    return (_, y) => u.active ? (n(), m("ul", {
-      key: 0,
-      class: "z-30 absolute text-xs bg-neutral-50 dark:bg-gray-800 text-gray-700 dark:text-gray-200 border border-neutral-300 dark:border-gray-600 shadow rounded select-none",
-      ref_key: "contextmenu",
-      ref: r,
-      style: be(u.positions)
-    }, [
-      (n(!0), m(U, null, q(d.value, (x) => (n(), m("li", {
-        class: "cursor-pointer hover:bg-neutral-200 dark:hover:bg-gray-700",
-        key: x.title
-      }, [
-        x.link ? (n(), m("a", {
+      const P = ({ target: k }) => {
+        const N = k.files;
+        for (const I of N)
+          $(I);
+        k.value = "";
+      };
+      m.value.addEventListener("change", P), d.value.addEventListener("change", P);
+    }), Ce(() => {
+      y == null || y.close({ reason: "unmount" });
+    }), (H, P) => (n(), A(K, null, {
+      buttons: M(() => [
+        s("button", {
+          type: "button",
+          class: q(["vf-btn vf-btn-primary", _.value ? "bg-blue-200 hover:bg-blue-200 dark:bg-gray-700/50 dark:hover:bg-gray-700/50 dark:text-gray-500" : "bg-blue-600 hover:bg-blue-700 dark:bg-gray-700 dark:hover:bg-gray-500"]),
+          disabled: _.value,
+          onClick: ee(E, ["prevent"])
+        }, c(t(a)("Upload")), 11, Ls),
+        _.value ? (n(), u("button", {
           key: 0,
-          class: "block pl-2 pr-3 py-1",
-          target: "_blank",
-          href: x.link,
-          download: x.link,
-          onClick: y[0] || (y[0] = (E) => a(e).emitter.emit("vf-contextmenu-hide"))
-        }, [
-          t("span", null, v(x.title()), 1)
-        ], 8, ia)) : (n(), m("div", {
+          type: "button",
+          class: "vf-btn vf-btn-secondary",
+          onClick: ee(D, ["prevent"])
+        }, c(t(a)("Cancel")), 1)) : (n(), u("button", {
           key: 1,
-          class: "pl-2 pr-3 py-1",
-          onClick: (E) => c(x)
-        }, [
-          t("span", null, v(x.title()), 1)
-        ], 8, da))
-      ]))), 128))
-    ], 4)) : M("", !0);
+          type: "button",
+          class: "vf-btn vf-btn-secondary",
+          onClick: ee(ce, ["prevent"])
+        }, c(t(a)("Close")), 1))
+      ]),
+      default: M(() => [
+        s("div", us, [
+          ms,
+          s("div", fs, [
+            s("h3", ps, c(t(a)("Upload Files")), 1),
+            s("div", vs, [
+              s("div", {
+                ref_key: "dropArea",
+                ref: b,
+                class: "flex items-center justify-center text-lg mb-4 text-gray-500 border-2 border-gray-300 rounded border-dashed select-none cursor-pointer dark:border-gray-600 h-[120px]",
+                onClick: B
+              }, [
+                w.value ? (n(), u("div", hs, c(t(a)("Release to drop these files.")), 1)) : (n(), u("div", gs, c(t(a)("Drag and drop the files/folders to here or click here.")), 1))
+              ], 512),
+              s("div", {
+                ref_key: "container",
+                ref: i,
+                class: "text-gray-500 mb-1"
+              }, [
+                s("button", {
+                  ref_key: "pickFiles",
+                  ref: f,
+                  type: "button",
+                  class: "vf-btn vf-btn-secondary"
+                }, c(t(a)("Select Files")), 513),
+                s("button", {
+                  ref_key: "pickFolders",
+                  ref: g,
+                  type: "button",
+                  class: "vf-btn vf-btn-secondary"
+                }, c(t(a)("Select Folders")), 513),
+                s("button", {
+                  type: "button",
+                  class: "vf-btn vf-btn-secondary",
+                  disabled: _.value,
+                  onClick: P[0] || (P[0] = (k) => F(!1))
+                }, c(t(a)("Clear all")), 9, _s),
+                s("button", {
+                  type: "button",
+                  class: "vf-btn vf-btn-secondary",
+                  disabled: _.value,
+                  onClick: P[1] || (P[1] = (k) => F(!0))
+                }, c(t(a)("Clear only successful")), 9, bs)
+              ], 512),
+              s("div", xs, [
+                (n(!0), u(z, null, G(p.value, (k) => (n(), u("div", {
+                  class: "flex hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-gray-300",
+                  key: k.id
+                }, [
+                  s("span", ws, [
+                    s("span", {
+                      class: q(["text-base m-auto", S(k)]),
+                      textContent: c(Y(k))
+                    }, null, 10, ks)
+                  ]),
+                  s("div", ys, [
+                    s("div", $s, c(t(_e)(k.name, 40)) + " (" + c(k.size) + ")", 1),
+                    s("div", Ss, c(t(_e)(k.name, 16)) + " (" + c(k.size) + ")", 1),
+                    s("div", {
+                      class: q(["flex break-all text-left", S(k)])
+                    }, [
+                      V(c(k.statusName) + " ", 1),
+                      k.status === v.value.QUEUE_ENTRY_STATUS.UPLOADING ? (n(), u("b", Cs, c(k.percent), 1)) : C("", !0)
+                    ], 2)
+                  ]),
+                  s("button", {
+                    type: "button",
+                    class: q(["rounded w-5 h-5 border-1 text-base leading-none font-medium focus:outline-none dark:border-gray-200 dark:text-gray-400 dark:hover:text-gray-200 dark:bg-gray-600 ml-auto sm:text-xs hover:text-red-600", _.value ? "disabled:bg-gray-100 text-white text-opacity-50" : "bg-gray-100"]),
+                    title: t(a)("Delete"),
+                    disabled: _.value,
+                    onClick: (N) => R(k)
+                  }, Ms, 10, Es)
+                ]))), 128)),
+                p.value.length ? C("", !0) : (n(), u("div", As, c(t(a)("No files selected!")), 1))
+              ]),
+              h.value.length ? (n(), A(J, {
+                key: 0,
+                onHidden: P[2] || (P[2] = (k) => h.value = ""),
+                error: ""
+              }, {
+                default: M(() => [
+                  V(c(h.value), 1)
+                ]),
+                _: 1
+              })) : C("", !0)
+            ])
+          ])
+        ]),
+        s("input", {
+          ref_key: "internalFileInput",
+          ref: m,
+          type: "file",
+          multiple: "",
+          class: "hidden"
+        }, null, 512),
+        s("input", {
+          ref_key: "internalFolderInput",
+          ref: d,
+          type: "file",
+          multiple: "",
+          webkitdirectory: "",
+          class: "hidden"
+        }, null, 512)
+      ]),
+      _: 1
+    }));
   }
-}), ma = { class: "p-1 text-xs border-t border-neutral-300 dark:border-gray-700/50 flex justify-between select-none" }, va = { class: "flex leading-5 items-center" }, pa = ["aria-label"], ha = /* @__PURE__ */ t("svg", {
+}, Vs = { class: "sm:flex sm:items-start" }, Ts = /* @__PURE__ */ s("div", { class: "mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-50 dark:bg-gray-500 sm:mx-0 sm:h-10 sm:w-10" }, [
+  /* @__PURE__ */ s("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    class: "h-6 w-6 stroke-blue-600 dark:stroke-blue-100",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "none",
+    "stroke-width": "1.5"
+  }, [
+    /* @__PURE__ */ s("path", {
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      d: "M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5m6 4.125l2.25 2.25m0 0l2.25 2.25M12 13.875l2.25-2.25M12 13.875l-2.25 2.25M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z"
+    })
+  ])
+], -1), Ns = { class: "mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full" }, Us = {
+  class: "text-lg leading-6 font-medium text-gray-900 dark:text-gray-400",
+  id: "modal-title"
+}, Is = { class: "mt-2" }, Hs = { class: "flex text-sm text-gray-800 dark:text-gray-400" }, Rs = {
+  key: 0,
   xmlns: "http://www.w3.org/2000/svg",
-  class: "h-5 w-5",
+  class: "h-5 w-5 text-neutral-500 fill-sky-500 stroke-sky-500 dark:fill-slate-500 dark:stroke-slate-500",
   fill: "none",
   viewBox: "0 0 24 24",
   stroke: "currentColor",
   "stroke-width": "1"
-}, [
-  /* @__PURE__ */ t("path", {
-    "stroke-linecap": "round",
-    "stroke-linejoin": "round",
-    d: "M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4"
-  })
-], -1), fa = [
-  ha
-], ga = ["value"], _a = { class: "ml-3" }, ka = { key: 0 }, ba = { class: "ml-1" }, ya = { class: "flex leading-5 items-center justify-end" }, xa = ["disabled"], wa = ["aria-label"], $a = /* @__PURE__ */ t("svg", {
+}, Fs = /* @__PURE__ */ s("path", {
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round",
+  d: "M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"
+}, null, -1), Os = [
+  Fs
+], js = {
+  key: 1,
   xmlns: "http://www.w3.org/2000/svg",
-  class: "h-5 w-5 stroke-slate-500 cursor-pointer",
-  fill: "none",
-  viewBox: "0 0 24 24",
-  stroke: "currentColor",
-  "stroke-width": "2"
-}, [
-  /* @__PURE__ */ t("path", {
-    "stroke-linecap": "round",
-    "stroke-linejoin": "round",
-    d: "M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-  })
-], -1), Ca = [
-  $a
-], Sa = {
-  name: "VFStatusbar"
-}, Ma = /* @__PURE__ */ Object.assign(Sa, {
-  setup(p) {
-    const e = F("ServiceContainer"), { t: s } = e.i18n, { setStore: r } = e.storage, o = k(0), i = () => {
-      e.emitter.emit("vf-search-exit"), e.emitter.emit("vf-fetch", { params: { q: "index", adapter: e.adapter } }), r("adapter", e.adapter);
-    };
-    e.emitter.on("vf-nodes-selected", (l) => {
-      o.value = l.length;
-    });
-    const u = k("");
-    e.emitter.on("vf-search-query", ({ newQuery: l }) => {
-      u.value = l;
-    });
-    const d = ee(() => {
-      const l = e.selectButton.multiple ? e.selectedItems.length > 0 : e.selectedItems.length === 1;
-      return e.selectButton.active && l;
-    });
-    return (l, c) => (n(), m("div", ma, [
-      t("div", va, [
-        t("div", {
-          class: "mx-2",
-          "aria-label": a(s)("Storage"),
-          "data-microtip-position": "top-right",
-          role: "tooltip"
-        }, fa, 8, pa),
-        I(t("select", {
-          "onUpdate:modelValue": c[0] || (c[0] = (g) => a(e).adapter = g),
-          onChange: i,
-          class: "py-0.5 text-sm text-slate-500 border dark:border-gray-600 dark:text-neutral-50 dark:bg-gray-700 rounded pl-2 pr-8"
-        }, [
-          (n(!0), m(U, null, q(a(e).data.storages, (g) => (n(), m("option", { value: g }, v(g), 9, ga))), 256))
-        ], 544), [
-          [pe, a(e).adapter]
-        ]),
-        t("div", _a, [
-          u.value.length ? (n(), m("span", ka, v(a(e).data.files.length) + " items found. ", 1)) : M("", !0),
-          t("span", ba, v(o.value > 0 ? a(s)("%s item(s) selected.", o.value) : ""), 1)
-        ])
-      ]),
-      t("div", ya, [
-        a(e).selectButton.active ? (n(), m("button", {
-          key: 0,
-          class: z(["vf-btn py-0 vf-btn-primary", { disabled: !d.value }]),
-          disabled: !d.value,
-          onClick: c[1] || (c[1] = (g) => a(e).selectButton.click(a(e).selectedItems, g))
-        }, v(a(s)("Select")), 11, xa)) : M("", !0),
-        t("span", {
-          class: "mr-1",
-          "aria-label": a(s)("About"),
-          "data-microtip-position": "top-left",
-          role: "tooltip",
-          onClick: c[2] || (c[2] = (g) => a(e).emitter.emit("vf-modal-show", { type: "about" }))
-        }, Ca, 8, wa)
-      ])
-    ]));
-  }
-}), Ea = {
-  name: "VueFinder"
-}, Da = /* @__PURE__ */ Object.assign(Ea, {
-  props: {
-    id: {
-      type: String,
-      default: "vf"
-    },
-    request: {
-      type: [String, Object],
-      required: !0
-    },
-    persist: {
-      type: Boolean,
-      default: !1
-    },
-    path: {
-      type: String,
-      default: "."
-    },
-    features: {
-      type: [Array, Boolean],
-      default: !0
-    },
-    debug: {
-      type: Boolean,
-      default: !1
-    },
-    theme: {
-      type: String,
-      default: "system"
-    },
-    locale: {
-      type: String,
-      default: null
-    },
-    maxHeight: {
-      type: String,
-      default: "600px"
-    },
-    maxFileSize: {
-      type: String,
-      default: "10mb"
-    },
-    fullScreen: {
-      type: Boolean,
-      default: !1
-    },
-    selectButton: {
-      type: Object,
-      default(p) {
-        return {
-          active: !1,
-          multiple: !1,
-          click: (e) => {
-          },
-          ...p
-        };
-      }
-    }
-  },
-  emits: ["select"],
-  setup(p, { emit: e }) {
-    const s = e, o = Je(p, F("VueFinderOptions"));
-    je("ServiceContainer", o);
-    const { setStore: i } = o.storage, u = k(null);
-    o.root = u, o.i18n, o.emitter.on("vf-modal-close", () => {
-      o.modal.active = !1;
-    }), o.emitter.on("vf-modal-show", (c) => {
-      o.modal.active = !0, o.modal.type = c.type, o.modal.data = c;
-    });
-    const d = (c) => {
-      Object.assign(o.data, c), o.emitter.emit("vf-nodes-selected", {}), o.emitter.emit("vf-explorer-update");
-    };
-    o.emitter.on("vf-nodes-selected", (c) => {
-      o.selectedItems = c, s("select", c);
-    });
-    let l;
-    return o.emitter.on("vf-fetch-abort", () => {
-      l.abort(), o.loading = !1;
-    }), o.emitter.on("vf-fetch", ({ params: c, body: g = null, onSuccess: _ = null, onError: y = null, noCloseModal: x = !1 }) => {
-      ["index", "search"].includes(c.q) && (l && l.abort(), o.loading = !0), l = new AbortController();
-      const E = l.signal;
-      o.requester.send({
-        url: "",
-        method: c.m || "get",
-        params: c,
-        body: g,
-        abortSignal: E
-      }).then((C) => {
-        o.adapter = C.adapter, o.persist && (o.path = C.dirname, i("path", o.path)), ["index", "search"].includes(c.q) && (o.loading = !1), x || o.emitter.emit("vf-modal-close"), d(C), _ && _(C);
-      }).catch((C) => {
-        console.error(C), y && y(C);
-      });
-    }), o.emitter.on("vf-download", (c) => {
-      const g = document.createElement("a");
-      g.style.display = "none", g.target = "_blank", g.href = c, g.download = c, o.root.appendChild(g), g.click(), g.remove();
-    }), P(() => {
-      let c = {};
-      o.path.includes("://") && (c = {
-        adapter: o.path.split("://")[0],
-        path: o.path
-      }), o.emitter.emit("vf-fetch", { params: { q: "index", adapter: o.adapter, ...c } });
-    }), (c, g) => (n(), m("div", {
-      class: "vuefinder",
-      ref_key: "root",
-      ref: u
-    }, [
-      t("div", {
-        class: z(a(o).theme.actualValue === "dark" ? "dark" : "")
-      }, [
-        t("div", {
-          class: z([a(o).fullScreen ? "fixed w-screen inset-0 z-20" : "relative rounded-md", "border flex flex-col bg-white dark:bg-gray-800 text-gray-700 dark:text-neutral-400 border-neutral-300 dark:border-gray-900 min-w-min select-none"]),
-          style: be(a(o).fullScreen ? "" : "max-height: " + p.maxHeight),
-          onMousedown: g[0] || (g[0] = (_) => a(o).emitter.emit("vf-contextmenu-hide")),
-          onTouchstart: g[1] || (g[1] = (_) => a(o).emitter.emit("vf-contextmenu-hide"))
-        }, [
-          H(Vt),
-          H(cs),
-          H(la),
-          H(Ma)
-        ], 38),
-        H(Ae, { name: "fade" }, {
-          default: A(() => [
-            a(o).modal.active ? (n(), T(Le("v-f-modal-" + a(o).modal.type), { key: 0 })) : M("", !0)
-          ]),
-          _: 1
-        }),
-        H(ua)
-      ], 2)
-    ], 512));
-  }
-}), ja = /* @__PURE__ */ t("div", { class: "fixed inset-0 bg-gray-500 dark:bg-gray-600 dark:bg-opacity-75 bg-opacity-75 transition-opacity" }, null, -1), Aa = { class: "fixed z-10 inset-0 overflow-hidden" }, La = { class: "relative bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:max-w-4xl md:max-w-2xl lg:max-w-3xl xl:max-w-5xl w-full" }, Ta = { class: "bg-white dark:bg-gray-800 px-4 pt-5 pb-4 sm:p-6 sm:pb-4" }, Fa = { class: "bg-gray-50 dark:bg-gray-800 dark:border-t dark:border-gray-700 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse" }, W = {
-  __name: "ModalLayout",
-  setup(p) {
-    const e = F("ServiceContainer");
-    return P(() => {
-      const s = document.querySelector(".v-f-modal input");
-      s && s.focus();
-    }), (s, r) => (n(), m("div", {
-      class: "v-f-modal relative z-30",
-      "aria-labelledby": "modal-title",
-      role: "dialog",
-      "aria-modal": "true",
-      onKeyup: r[1] || (r[1] = Q((o) => a(e).emitter.emit("vf-modal-close"), ["esc"])),
-      tabindex: "0"
-    }, [
-      ja,
-      t("div", Aa, [
-        t("div", {
-          class: "flex items-end sm:items-center justify-center min-h-full p-4 text-center sm:p-0",
-          onMousedown: r[0] || (r[0] = Y((o) => a(e).emitter.emit("vf-modal-close"), ["self"]))
-        }, [
-          t("div", La, [
-            t("div", Ta, [
-              le(s.$slots, "default")
-            ]),
-            t("div", Fa, [
-              le(s.$slots, "buttons")
-            ])
-          ])
-        ], 32)
-      ])
-    ], 32));
-  }
-}, Oa = ["aria-label"], Va = /* @__PURE__ */ t("svg", {
-  xmlns: "http://www.w3.org/2000/svg",
-  fill: "none",
-  viewBox: "0 0 24 24",
-  "stroke-width": "1.5",
-  stroke: "currentColor",
-  class: "w-5 h-5"
-}, [
-  /* @__PURE__ */ t("path", {
-    "stroke-linecap": "round",
-    "stroke-linejoin": "round",
-    d: "M6 18L18 6M6 6l12 12"
-  })
-], -1), Na = [
-  Va
-], Ba = {
-  name: "Message"
-}, G = /* @__PURE__ */ Object.assign(Ba, {
-  props: {
-    error: {
-      type: Boolean,
-      default: !1
-    }
-  },
-  emits: ["hidden"],
-  setup(p, { emit: e }) {
-    var c;
-    const s = e, r = F("ServiceContainer"), { t: o } = r.i18n, i = k(!1), u = k(null), d = k((c = u.value) == null ? void 0 : c.strMessage);
-    de(d, () => i.value = !1);
-    const l = () => {
-      s("hidden"), i.value = !0;
-    };
-    return (g, _) => (n(), m("div", null, [
-      i.value ? M("", !0) : (n(), m("div", {
-        key: 0,
-        ref_key: "strMessage",
-        ref: u,
-        class: z(["flex mt-2 p-1 px-2 rounded text-sm break-all dark:opacity-75", p.error ? "bg-red-100 text-red-600 " : "bg-emerald-100 text-emerald-600"])
-      }, [
-        le(g.$slots, "default"),
-        t("div", {
-          class: "ml-auto cursor-pointer",
-          onClick: l,
-          "aria-label": a(o)("Close"),
-          "data-microtip-position": "top-left",
-          role: "tooltip"
-        }, Na, 8, Oa)
-      ], 2))
-    ]));
-  }
-}), za = { class: "sm:flex sm:items-start" }, Ua = /* @__PURE__ */ t("div", { class: "mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 dark:bg-gray-500 sm:mx-0 sm:h-10 sm:w-10" }, [
-  /* @__PURE__ */ t("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    class: "h-6 w-6 stroke-red-600 dark:stroke-red-200",
-    fill: "none",
-    viewBox: "0 0 24 24",
-    stroke: "none",
-    "stroke-width": "1.5"
-  }, [
-    /* @__PURE__ */ t("path", {
-      "stroke-linecap": "round",
-      "stroke-linejoin": "round",
-      d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
-    })
-  ])
-], -1), Ha = { class: "mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full" }, Ra = {
-  class: "text-lg leading-6 font-medium text-gray-900 dark:text-gray-400",
-  id: "modal-title"
-}, Ia = { class: "mt-2" }, qa = { class: "text-sm text-gray-500" }, Pa = {
-  class: "text-gray-500 text-sm mb-1 overflow-auto vf-scrollbar",
-  style: { "max-height": "200px" }
-}, Wa = { class: "flex text-sm text-gray-800 dark:text-gray-400" }, Ga = {
-  key: 0,
-  xmlns: "http://www.w3.org/2000/svg",
-  class: "h-5 w-5 text-neutral-500 fill-sky-500 stroke-sky-500 dark:fill-slate-500 dark:stroke-slate-500",
-  fill: "none",
-  viewBox: "0 0 24 24",
-  stroke: "currentColor",
-  "stroke-width": "1"
-}, Ya = /* @__PURE__ */ t("path", {
-  "stroke-linecap": "round",
-  "stroke-linejoin": "round",
-  d: "M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"
-}, null, -1), Ka = [
-  Ya
-], Ja = {
-  key: 1,
-  xmlns: "http://www.w3.org/2000/svg",
-  class: "h-5 w-5 text-neutral-500",
+  class: "h-5 w-5 text-neutral-500",
   fill: "none",
   viewBox: "0 0 24 24",
   stroke: "currentColor",
   "stroke-width": "1"
-}, Xa = /* @__PURE__ */ t("path", {
+}, qs = /* @__PURE__ */ s("path", {
   "stroke-linecap": "round",
   "stroke-linejoin": "round",
   d: "M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"
-}, null, -1), Qa = [
-  Xa
-], Za = { class: "ml-1.5" }, eo = { class: "m-auto font-bold text-red-500 text-sm dark:text-red-200 text-center" }, to = {
-  name: "VFModalDelete"
-}, so = /* @__PURE__ */ Object.assign(to, {
-  setup(p) {
-    const e = F("ServiceContainer");
-    e.storage;
-    const { t: s } = e.i18n, r = k(e.modal.data.items), o = k(""), i = () => {
-      r.value.length && e.emitter.emit("vf-fetch", {
+}, null, -1), zs = [
+  qs
+], Ps = { class: "ml-1.5" }, Gs = { class: "my-1 text-sm text-gray-500" }, Ve = {
+  __name: "ModalUnarchive",
+  setup(l) {
+    const e = U("ServiceContainer"), { t: a } = e.i18n, r = x(e.modal.data.items[0]), o = x(""), v = x([]), i = () => {
+      e.emitter.emit("vf-fetch", {
         params: {
-          q: "delete",
+          q: "unarchive",
           m: "post",
-          adapter: e.adapter,
-          path: e.data.dirname
+          adapter: e.fs.adapter,
+          path: e.fs.data.dirname
         },
         body: {
-          items: r.value.map(({ path: u, type: d }) => ({ path: u, type: d }))
+          item: r.value.path
         },
         onSuccess: () => {
-          e.emitter.emit("vf-toast-push", { label: s("Files deleted.") });
+          e.emitter.emit("vf-toast-push", { label: a("The file unarchived.") });
         },
-        onError: (u) => {
-          o.value = s(u.message);
+        onError: (m) => {
+          o.value = a(m.message);
         }
       });
     };
-    return (u, d) => (n(), T(W, null, {
-      buttons: A(() => [
-        t("button", {
+    return (m, d) => (n(), A(K, null, {
+      buttons: M(() => [
+        s("button", {
           type: "button",
           onClick: i,
-          class: "vf-btn vf-btn-danger"
-        }, v(a(s)("Yes, Delete!")), 1),
-        t("button", {
+          class: "vf-btn vf-btn-primary"
+        }, c(t(a)("Unarchive")), 1),
+        s("button", {
           type: "button",
-          onClick: d[1] || (d[1] = (l) => a(e).emitter.emit("vf-modal-close")),
+          onClick: d[1] || (d[1] = (f) => t(e).modal.close()),
           class: "vf-btn vf-btn-secondary"
-        }, v(a(s)("Cancel")), 1),
-        t("div", eo, v(a(s)("This action cannot be undone.")), 1)
+        }, c(t(a)("Cancel")), 1)
       ]),
-      default: A(() => [
-        t("div", za, [
-          Ua,
-          t("div", Ha, [
-            t("h3", Ra, v(a(s)("Delete files")), 1),
-            t("div", Ia, [
-              t("p", qa, v(a(s)("Are you sure you want to delete these files?")), 1),
-              t("div", Pa, [
-                (n(!0), m(U, null, q(r.value, (l) => (n(), m("p", Wa, [
-                  l.type === "dir" ? (n(), m("svg", Ga, Ka)) : (n(), m("svg", Ja, Qa)),
-                  t("span", Za, v(l.basename), 1)
-                ]))), 256))
-              ]),
-              o.value.length ? (n(), T(G, {
+      default: M(() => [
+        s("div", Vs, [
+          Ts,
+          s("div", Ns, [
+            s("h3", Us, c(t(a)("Unarchive")), 1),
+            s("div", Is, [
+              (n(!0), u(z, null, G(v.value, (f) => (n(), u("p", Hs, [
+                f.type === "dir" ? (n(), u("svg", Rs, Os)) : (n(), u("svg", js, zs)),
+                s("span", Ps, c(f.basename), 1)
+              ]))), 256)),
+              s("p", Gs, c(t(a)("The archive will be unarchived at")) + " (" + c(t(e).fs.data.dirname) + ")", 1),
+              o.value.length ? (n(), A(J, {
                 key: 0,
-                onHidden: d[0] || (d[0] = (l) => o.value = ""),
+                onHidden: d[0] || (d[0] = (f) => o.value = ""),
                 error: ""
               }, {
-                default: A(() => [
-                  V(v(o.value), 1)
+                default: M(() => [
+                  V(c(o.value), 1)
                 ]),
                 _: 1
-              })) : M("", !0)
+              })) : C("", !0)
             ])
           ])
         ])
@@ -1756,56 +1360,8 @@ const ys = { class: "relative flex-auto flex flex-col overflow-hidden" }, xs = {
       _: 1
     }));
   }
-}), ao = { class: "sm:flex sm:items-start" }, oo = /* @__PURE__ */ t("div", { class: "mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-50 dark:bg-gray-500 sm:mx-0 sm:h-10 sm:w-10" }, [
-  /* @__PURE__ */ t("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    class: "h-6 w-6 stroke-blue-600 dark:stroke-blue-100",
-    fill: "none",
-    viewBox: "0 0 24 24",
-    stroke: "currentColor",
-    "stroke-width": "2"
-  }, [
-    /* @__PURE__ */ t("path", {
-      "stroke-linecap": "round",
-      "stroke-linejoin": "round",
-      d: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-    })
-  ])
-], -1), ro = { class: "mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full" }, no = {
-  class: "text-lg leading-6 font-medium text-gray-900 dark:text-gray-400",
-  id: "modal-title"
-}, lo = { class: "mt-2" }, io = { class: "text-sm text-gray-500" }, co = {
-  name: "VFModalMessage"
-}, uo = /* @__PURE__ */ Object.assign(co, {
-  setup(p) {
-    const e = F("ServiceContainer"), { t: s } = e.i18n;
-    return (r, o) => (n(), T(W, null, {
-      buttons: A(() => [
-        t("button", {
-          type: "button",
-          onClick: o[0] || (o[0] = (i) => a(e).emitter.emit("vf-modal-close")),
-          class: "vf-btn vf-btn-secondary"
-        }, v(a(s)("Close")), 1)
-      ]),
-      default: A(() => {
-        var i, u;
-        return [
-          t("div", ao, [
-            oo,
-            t("div", ro, [
-              t("h3", no, v(((i = a(e).modal.data) == null ? void 0 : i.title) ?? "Title"), 1),
-              t("div", lo, [
-                t("p", io, v(((u = a(e).modal.data) == null ? void 0 : u.message) ?? "Message"), 1)
-              ])
-            ])
-          ])
-        ];
-      }),
-      _: 1
-    }));
-  }
-}), mo = { class: "sm:flex sm:items-start" }, vo = /* @__PURE__ */ t("div", { class: "mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-50 dark:bg-gray-500 sm:mx-0 sm:h-10 sm:w-10" }, [
-  /* @__PURE__ */ t("svg", {
+}, Ws = { class: "sm:flex sm:items-start" }, Ys = /* @__PURE__ */ s("div", { class: "mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-50 dark:bg-gray-500 sm:mx-0 sm:h-10 sm:w-10" }, [
+  /* @__PURE__ */ s("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     class: "h-6 w-6 stroke-blue-600 dark:stroke-blue-100",
     fill: "none",
@@ -1813,79 +1369,113 @@ const ys = { class: "relative flex-auto flex flex-col overflow-hidden" }, xs = {
     stroke: "none",
     "stroke-width": "1.5"
   }, [
-    /* @__PURE__ */ t("path", {
+    /* @__PURE__ */ s("path", {
       "stroke-linecap": "round",
       "stroke-linejoin": "round",
-      d: "M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z"
+      d: "M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z"
     })
   ])
-], -1), po = { class: "mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full" }, ho = {
+], -1), Ks = { class: "mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full" }, Js = {
   class: "text-lg leading-6 font-medium text-gray-900 dark:text-gray-400",
   id: "modal-title"
-}, fo = { class: "mt-2" }, go = { class: "text-sm text-gray-500" }, _o = ["placeholder"], ko = {
-  name: "VFModalNewFolder"
-}, bo = /* @__PURE__ */ Object.assign(ko, {
-  setup(p) {
-    const e = F("ServiceContainer");
-    e.storage;
-    const { t: s } = e.i18n, r = k(""), o = k(""), i = () => {
-      r.value != "" && e.emitter.emit("vf-fetch", {
+}, Qs = { class: "mt-2" }, Xs = {
+  class: "text-gray-500 text-sm mb-1 overflow-auto vf-scrollbar",
+  style: { "max-height": "200px" }
+}, Zs = { class: "flex text-sm text-gray-800 dark:text-gray-400" }, ea = {
+  key: 0,
+  xmlns: "http://www.w3.org/2000/svg",
+  class: "h-5 w-5 text-neutral-500 fill-sky-500 stroke-sky-500 dark:fill-slate-500 dark:stroke-slate-500",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  stroke: "currentColor",
+  "stroke-width": "1"
+}, ta = /* @__PURE__ */ s("path", {
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round",
+  d: "M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"
+}, null, -1), sa = [
+  ta
+], aa = {
+  key: 1,
+  xmlns: "http://www.w3.org/2000/svg",
+  class: "h-5 w-5 text-neutral-500",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  stroke: "currentColor",
+  "stroke-width": "1"
+}, oa = /* @__PURE__ */ s("path", {
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round",
+  d: "M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"
+}, null, -1), ra = [
+  oa
+], na = { class: "ml-1.5" }, la = ["placeholder"], Te = {
+  __name: "ModalArchive",
+  setup(l) {
+    const e = U("ServiceContainer"), { t: a } = e.i18n, r = x(""), o = x(""), v = x(e.modal.data.items), i = () => {
+      v.value.length && e.emitter.emit("vf-fetch", {
         params: {
-          q: "newfolder",
+          q: "archive",
           m: "post",
-          adapter: e.adapter,
-          path: e.data.dirname
+          adapter: e.fs.adapter,
+          path: e.fs.data.dirname
         },
         body: {
+          items: v.value.map(({ path: m, type: d }) => ({ path: m, type: d })),
           name: r.value
         },
         onSuccess: () => {
-          e.emitter.emit("vf-toast-push", { label: s("%s is created.", r.value) });
+          e.emitter.emit("vf-toast-push", { label: a("The file(s) archived.") });
         },
-        onError: (u) => {
-          o.value = s(u.message);
+        onError: (m) => {
+          o.value = a(m.message);
         }
       });
     };
-    return (u, d) => (n(), T(W, null, {
-      buttons: A(() => [
-        t("button", {
+    return (m, d) => (n(), A(K, null, {
+      buttons: M(() => [
+        s("button", {
           type: "button",
           onClick: i,
           class: "vf-btn vf-btn-primary"
-        }, v(a(s)("Create")), 1),
-        t("button", {
+        }, c(t(a)("Archive")), 1),
+        s("button", {
           type: "button",
-          onClick: d[2] || (d[2] = (l) => a(e).emitter.emit("vf-modal-close")),
+          onClick: d[2] || (d[2] = (f) => t(e).modal.close()),
           class: "vf-btn vf-btn-secondary"
-        }, v(a(s)("Cancel")), 1)
+        }, c(t(a)("Cancel")), 1)
       ]),
-      default: A(() => [
-        t("div", mo, [
-          vo,
-          t("div", po, [
-            t("h3", ho, v(a(s)("New Folder")), 1),
-            t("div", fo, [
-              t("p", go, v(a(s)("Create a new folder")), 1),
-              I(t("input", {
-                "onUpdate:modelValue": d[0] || (d[0] = (l) => r.value = l),
-                onKeyup: Q(i, ["enter"]),
-                class: "px-2 py-1 border rounded dark:bg-gray-700/25 dark:focus:ring-gray-600 dark:focus:border-gray-600 dark:text-gray-100 w-full",
-                placeholder: a(s)("Folder Name"),
+      default: M(() => [
+        s("div", Ws, [
+          Ys,
+          s("div", Ks, [
+            s("h3", Js, c(t(a)("Archive the files")), 1),
+            s("div", Qs, [
+              s("div", Xs, [
+                (n(!0), u(z, null, G(v.value, (f) => (n(), u("p", Zs, [
+                  f.type === "dir" ? (n(), u("svg", ea, sa)) : (n(), u("svg", aa, ra)),
+                  s("span", na, c(f.basename), 1)
+                ]))), 256))
+              ]),
+              j(s("input", {
+                "onUpdate:modelValue": d[0] || (d[0] = (f) => r.value = f),
+                onKeyup: oe(i, ["enter"]),
+                class: "my-1 px-2 py-1 border rounded dark:bg-gray-700/25 dark:focus:ring-gray-600 dark:focus:border-gray-600 dark:text-gray-100 w-full",
+                placeholder: t(a)("Archive name. (.zip file will be created)"),
                 type: "text"
-              }, null, 40, _o), [
-                [Z, r.value]
+              }, null, 40, la), [
+                [re, r.value]
               ]),
-              o.value.length ? (n(), T(G, {
+              o.value.length ? (n(), A(J, {
                 key: 0,
-                onHidden: d[1] || (d[1] = (l) => o.value = ""),
+                onHidden: d[1] || (d[1] = (f) => o.value = ""),
                 error: ""
               }, {
-                default: A(() => [
-                  V(v(o.value), 1)
+                default: M(() => [
+                  V(c(o.value), 1)
                 ]),
                 _: 1
-              })) : M("", !0)
+              })) : C("", !0)
             ])
           ])
         ])
@@ -1893,204 +1483,1025 @@ const ys = { class: "relative flex-auto flex flex-col overflow-hidden" }, xs = {
       _: 1
     }));
   }
-}), yo = { class: "sm:flex sm:items-start" }, xo = /* @__PURE__ */ t("div", { class: "mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-50 dark:bg-gray-500 sm:mx-0 sm:h-10 sm:w-10" }, [
-  /* @__PURE__ */ t("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    class: "h-6 w-6 stroke-blue-600 dark:stroke-blue-100",
-    fill: "none",
-    viewBox: "0 0 24 24",
-    stroke: "none",
-    "stroke-width": "1.5"
-  }, [
-    /* @__PURE__ */ t("path", {
-      "stroke-linecap": "round",
-      "stroke-linejoin": "round",
-      d: "M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
-    })
-  ])
-], -1), wo = { class: "mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full" }, $o = {
-  class: "text-lg leading-6 font-medium text-gray-900 dark:text-gray-400",
-  id: "modal-title"
-}, Co = { class: "mt-2" }, So = { class: "text-sm text-gray-500" }, Mo = ["placeholder"], Eo = {
-  name: "VFModalNewFile"
-}, Do = /* @__PURE__ */ Object.assign(Eo, {
-  setup(p) {
-    const e = F("ServiceContainer");
-    e.storage;
-    const { t: s } = e.i18n, r = k(""), o = k(""), i = () => {
-      r.value != "" && e.emitter.emit("vf-fetch", {
-        params: {
-          q: "newfile",
-          m: "post",
-          adapter: e.adapter,
-          path: e.data.dirname
-        },
-        body: {
-          name: r.value
-        },
-        onSuccess: () => {
-          e.emitter.emit("vf-toast-push", { label: s("%s is created.", r.value) });
-        },
-        onError: (u) => {
-          o.value = s(u.message);
+}, ia = {
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  "stroke-width": "1.5",
+  class: "h-6 w-6 md:h-8 md:w-8 m-auto vf-toolbar-icon",
+  viewBox: "0 0 24 24"
+}, da = /* @__PURE__ */ s("path", { d: "M12 10.5v6m3-3H9m4.06-7.19-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44z" }, null, -1), ca = [
+  da
+];
+function ua(l, e) {
+  return n(), u("svg", ia, [...ca]);
+}
+const ma = { render: ua }, fa = {
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  "stroke-width": "1.5",
+  class: "h-6 w-6 md:h-8 md:w-8 m-auto vf-toolbar-icon",
+  viewBox: "0 0 24 24"
+}, pa = /* @__PURE__ */ s("path", { d: "M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m3.75 9v6m3-3H9m1.5-12H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9" }, null, -1), va = [
+  pa
+];
+function ha(l, e) {
+  return n(), u("svg", fa, [...va]);
+}
+const ga = { render: ha }, _a = {
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  "stroke-width": "1.5",
+  class: "h-6 w-6 md:h-8 md:w-8 m-auto",
+  viewBox: "0 0 24 24"
+}, ba = /* @__PURE__ */ s("path", { d: "m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" }, null, -1), xa = [
+  ba
+];
+function wa(l, e) {
+  return n(), u("svg", _a, [...xa]);
+}
+const ka = { render: wa }, ya = {
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  "stroke-width": "1.5",
+  class: "h-6 w-6 md:h-8 md:w-8 m-auto",
+  viewBox: "0 0 24 24"
+}, $a = /* @__PURE__ */ s("path", { d: "m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21q.512.078 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48 48 0 0 0-3.478-.397m-12 .562q.51-.089 1.022-.165m0 0a48 48 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a52 52 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a49 49 0 0 0-7.5 0" }, null, -1), Sa = [
+  $a
+];
+function Ca(l, e) {
+  return n(), u("svg", ya, [...Sa]);
+}
+const Ea = { render: Ca }, Da = {
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  "stroke-width": "1.5",
+  class: "h-6 w-6 md:h-8 md:w-8 m-auto vf-toolbar-icon",
+  viewBox: "0 0 24 24"
+}, Ma = /* @__PURE__ */ s("path", { d: "M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5m-13.5-9L12 3m0 0 4.5 4.5M12 3v13.5" }, null, -1), Aa = [
+  Ma
+];
+function La(l, e) {
+  return n(), u("svg", Da, [...Aa]);
+}
+const Ba = { render: La }, Va = {
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  "stroke-width": "1.5",
+  class: "h-6 w-6 md:h-8 md:w-8 m-auto",
+  viewBox: "0 0 24 24"
+}, Ta = /* @__PURE__ */ s("path", { d: "m20.25 7.5-.625 10.632a2.25 2.25 0 0 1-2.247 2.118H6.622a2.25 2.25 0 0 1-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125" }, null, -1), Na = [
+  Ta
+];
+function Ua(l, e) {
+  return n(), u("svg", Va, [...Na]);
+}
+const Ia = { render: Ua }, Ha = {
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  "stroke-width": "1.5",
+  class: "h-6 w-6 md:h-8 md:w-8 m-auto",
+  viewBox: "0 0 24 24"
+}, Ra = /* @__PURE__ */ s("path", { d: "m20.25 7.5-.625 10.632a2.25 2.25 0 0 1-2.247 2.118H6.622a2.25 2.25 0 0 1-2.247-2.118L3.75 7.5m6 4.125 2.25 2.25m0 0 2.25 2.25M12 13.875l2.25-2.25M12 13.875l-2.25 2.25M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125" }, null, -1), Fa = [
+  Ra
+];
+function Oa(l, e) {
+  return n(), u("svg", Ha, [...Fa]);
+}
+const ja = { render: Oa }, qa = {
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  class: "animate-spin p-0.5 h-5 w-5 text-white ml-auto",
+  viewBox: "0 0 24 24"
+}, za = /* @__PURE__ */ s("circle", {
+  cx: "12",
+  cy: "12",
+  r: "10",
+  stroke: "currentColor",
+  "stroke-width": "4",
+  class: "opacity-25 stroke-blue-900 dark:stroke-blue-100"
+}, null, -1), Pa = /* @__PURE__ */ s("path", {
+  fill: "currentColor",
+  d: "M4 12a8 8 0 0 1 8-8V0C5.373 0 0 5.373 0 12zm2 5.291A7.96 7.96 0 0 1 4 12H0c0 3.042 1.135 5.824 3 7.938z",
+  class: "opacity-75"
+}, null, -1), Ga = [
+  za,
+  Pa
+];
+function Wa(l, e) {
+  return n(), u("svg", qa, [...Ga]);
+}
+const Ne = { render: Wa }, Ya = {
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  "stroke-width": "1.5",
+  class: "h-6 w-6 md:h-8 md:w-8 m-auto vf-toolbar-icon",
+  viewBox: "0 0 24 24"
+}, Ka = /* @__PURE__ */ s("path", { d: "M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15" }, null, -1), Ja = [
+  Ka
+];
+function Qa(l, e) {
+  return n(), u("svg", Ya, [...Ja]);
+}
+const Xa = { render: Qa }, Za = {
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  "stroke-width": "1.5",
+  class: "h-6 w-6 md:h-8 md:w-8 m-auto vf-toolbar-icon",
+  viewBox: "0 0 24 24"
+}, eo = /* @__PURE__ */ s("path", { d: "M9 9V4.5M9 9H4.5M9 9 3.75 3.75M9 15v4.5M9 15H4.5M9 15l-5.25 5.25M15 9h4.5M15 9V4.5M15 9l5.25-5.25M15 15h4.5M15 15v4.5m0-4.5 5.25 5.25" }, null, -1), to = [
+  eo
+];
+function so(l, e) {
+  return n(), u("svg", Za, [...to]);
+}
+const ao = { render: so }, oo = {
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  "stroke-width": "1.5",
+  class: "h-6 w-6 md:h-8 md:w-8 m-auto",
+  viewBox: "0 0 24 24"
+}, ro = /* @__PURE__ */ s("path", { d: "M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25zm0 9.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18zM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25zm0 9.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25A2.25 2.25 0 0 1 13.5 18z" }, null, -1), no = [
+  ro
+];
+function lo(l, e) {
+  return n(), u("svg", oo, [...no]);
+}
+const io = { render: lo }, co = {
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  "stroke-width": "1.5",
+  class: "h-6 w-6 md:h-8 md:w-8 m-auto",
+  viewBox: "0 0 24 24"
+}, uo = /* @__PURE__ */ s("path", { d: "M3.75 12h16.5m-16.5 3.75h16.5M3.75 19.5h16.5M5.625 4.5h12.75a1.875 1.875 0 0 1 0 3.75H5.625a1.875 1.875 0 0 1 0-3.75" }, null, -1), mo = [
+  uo
+];
+function fo(l, e) {
+  return n(), u("svg", co, [...mo]);
+}
+const po = { render: fo }, vo = { class: "border-neutral-300 flex justify-between items-center py-1 text-sm" }, ho = {
+  key: 0,
+  class: "flex text-center"
+}, go = ["aria-label"], _o = ["aria-label"], bo = ["aria-label"], xo = ["aria-label"], wo = ["aria-label"], ko = ["aria-label"], yo = ["aria-label"], $o = {
+  key: 1,
+  class: "flex text-center"
+}, So = { class: "pl-2" }, Co = { class: "dark:bg-gray-700 bg-gray-200 text-xs px-2 py-1 rounded" }, Eo = { class: "flex text-center items-center justify-end" }, Do = ["aria-label"], Mo = ["aria-label"], Ao = {
+  __name: "Toolbar",
+  setup(l) {
+    const e = U("ServiceContainer"), { setStore: a } = e.storage, { t: r } = e.i18n, o = e.dragSelect, v = x("");
+    e.emitter.on("vf-search-query", ({ newQuery: d }) => {
+      v.value = d;
+    });
+    const i = () => {
+      e.fullScreen = !e.fullScreen, a("full-screen", e.fullScreen), e.emitter.emit("vf-fullscreen-toggle");
+    }, m = () => {
+      e.view = e.view === "list" ? "grid" : "list", o.refreshSelection(), a("viewport", e.view);
+    };
+    return (d, f) => (n(), u("div", vo, [
+      v.value.length ? (n(), u("div", $o, [
+        s("div", So, [
+          V(c(t(r)("Search results for")) + " ", 1),
+          s("span", Co, c(v.value), 1)
+        ]),
+        t(e).fs.loading ? (n(), A(t(Ne), { key: 0 })) : C("", !0)
+      ])) : (n(), u("div", ho, [
+        t(e).features.includes(t(O).NEW_FOLDER) ? (n(), u("div", {
+          key: 0,
+          class: "mx-1.5",
+          "aria-label": t(r)("New Folder"),
+          "data-microtip-position": "bottom-right",
+          role: "tooltip",
+          onClick: f[0] || (f[0] = (g) => t(e).modal.open(Ae, { items: t(o).getSelected() }))
+        }, [
+          L(t(ma))
+        ], 8, go)) : C("", !0),
+        t(e).features.includes(t(O).NEW_FILE) ? (n(), u("div", {
+          key: 1,
+          class: "mx-1.5",
+          "aria-label": t(r)("New File"),
+          "data-microtip-position": "bottom",
+          role: "tooltip",
+          onClick: f[1] || (f[1] = (g) => t(e).modal.open(Nt, { items: t(o).getSelected() }))
+        }, [
+          L(t(ga))
+        ], 8, _o)) : C("", !0),
+        t(e).features.includes(t(O).RENAME) ? (n(), u("div", {
+          key: 2,
+          class: "mx-1.5",
+          "aria-label": t(r)("Rename"),
+          "data-microtip-position": "bottom",
+          role: "tooltip",
+          onClick: f[2] || (f[2] = (g) => t(o).getCount() !== 1 || t(e).modal.open(Le, { items: t(o).getSelected() }))
+        }, [
+          L(t(ka), {
+            class: q(t(o).getCount() === 1 ? "vf-toolbar-icon" : "vf-toolbar-icon-disabled")
+          }, null, 8, ["class"])
+        ], 8, bo)) : C("", !0),
+        t(e).features.includes(t(O).DELETE) ? (n(), u("div", {
+          key: 3,
+          class: "mx-1.5",
+          "aria-label": t(r)("Delete"),
+          "data-microtip-position": "bottom",
+          role: "tooltip",
+          onClick: f[3] || (f[3] = (g) => !t(o).getCount() || t(e).modal.open(Be, { items: t(o).getSelected() }))
+        }, [
+          L(t(Ea), {
+            class: q(t(o).getCount() ? "vf-toolbar-icon" : "vf-toolbar-icon-disabled")
+          }, null, 8, ["class"])
+        ], 8, xo)) : C("", !0),
+        t(e).features.includes(t(O).UPLOAD) ? (n(), u("div", {
+          key: 4,
+          class: "mx-1.5",
+          "aria-label": t(r)("Upload"),
+          "data-microtip-position": "bottom",
+          role: "tooltip",
+          onClick: f[4] || (f[4] = (g) => t(e).modal.open(Bs, { items: t(o).getSelected() }))
+        }, [
+          L(t(Ba))
+        ], 8, wo)) : C("", !0),
+        t(e).features.includes(t(O).UNARCHIVE) && t(o).getCount() === 1 && t(o).getSelected()[0].mime_type === "application/zip" ? (n(), u("div", {
+          key: 5,
+          class: "mx-1.5",
+          "aria-label": t(r)("Unarchive"),
+          "data-microtip-position": "bottom",
+          role: "tooltip",
+          onClick: f[5] || (f[5] = (g) => !t(o).getCount() || t(e).modal.open(Ve, { items: t(o).getSelected() }))
+        }, [
+          L(t(ja), {
+            class: q(t(o).getCount() ? "vf-toolbar-icon" : "vf-toolbar-icon-disabled")
+          }, null, 8, ["class"])
+        ], 8, ko)) : C("", !0),
+        t(e).features.includes(t(O).ARCHIVE) ? (n(), u("div", {
+          key: 6,
+          class: "mx-1.5",
+          "aria-label": t(r)("Archive"),
+          "data-microtip-position": "bottom",
+          role: "tooltip",
+          onClick: f[6] || (f[6] = (g) => !t(o).getCount() || t(e).modal.open(Te, { items: t(o).getSelected() }))
+        }, [
+          L(t(Ia), {
+            class: q(t(o).getCount() ? "vf-toolbar-icon" : "vf-toolbar-icon-disabled")
+          }, null, 8, ["class"])
+        ], 8, yo)) : C("", !0)
+      ])),
+      s("div", Eo, [
+        t(e).features.includes(t(O).FULL_SCREEN) ? (n(), u("div", {
+          key: 0,
+          onClick: i,
+          class: "mx-1.5",
+          "aria-label": t(r)("Toggle Full Screen"),
+          "data-microtip-position": "bottom-left",
+          role: "tooltip"
+        }, [
+          t(e).fullScreen ? (n(), A(t(ao), { key: 0 })) : (n(), A(t(Xa), { key: 1 }))
+        ], 8, Do)) : C("", !0),
+        s("div", {
+          class: "mx-1.5",
+          "aria-label": t(r)("Change View"),
+          "data-microtip-position": "bottom-left",
+          role: "tooltip",
+          onClick: f[7] || (f[7] = (g) => v.value.length || m())
+        }, [
+          t(e).view === "grid" ? (n(), A(t(io), {
+            key: 0,
+            class: q(v.value.length ? "vf-toolbar-icon-disabled" : "vf-toolbar-icon")
+          }, null, 8, ["class"])) : C("", !0),
+          t(e).view === "list" ? (n(), A(t(po), {
+            key: 1,
+            class: q(v.value.length ? "vf-toolbar-icon-disabled" : "vf-toolbar-icon")
+          }, null, 8, ["class"])) : C("", !0)
+        ], 8, Mo)
+      ])
+    ]));
+  }
+}, Lo = (l, e = 0, a = !1) => {
+  let r;
+  return (...o) => {
+    a && !r && l(...o), clearTimeout(r), r = setTimeout(() => {
+      l(...o);
+    }, e);
+  };
+}, ke = (l, e, a) => {
+  const r = x(l);
+  return qe((o, v) => ({
+    get() {
+      return o(), r.value;
+    },
+    set: Lo(
+      (i) => {
+        r.value = i, v();
+      },
+      e,
+      a
+    )
+  }));
+}, Bo = { class: "sm:flex sm:items-start" }, Vo = /* @__PURE__ */ s("div", { class: "mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-50 dark:bg-gray-500 sm:mx-0 sm:h-10 sm:w-10" }, [
+  /* @__PURE__ */ s("svg", {
+    class: "h-6 w-6 stroke-blue-600 dark:stroke-blue-100",
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    "stroke-width": "2",
+    stroke: "currentColor",
+    "aria-hidden": "true"
+  }, [
+    /* @__PURE__ */ s("path", {
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+    })
+  ])
+], -1), To = { class: "mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full" }, No = {
+  class: "text-lg leading-6 font-medium text-gray-900 dark:text-gray-400",
+  id: "modal-title"
+}, Uo = { class: "text-sm text-gray-500 pb-1" }, Io = { class: "max-h-[200px] overflow-y-auto vf-scrollbar text-left" }, Ho = { class: "flex text-sm text-gray-800 dark:text-gray-400" }, Ro = {
+  key: 0,
+  xmlns: "http://www.w3.org/2000/svg",
+  class: "h-5 w-5 text-neutral-500 fill-sky-500 stroke-sky-500 dark:fill-slate-500 dark:stroke-slate-500",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  stroke: "currentColor",
+  "stroke-width": "1"
+}, Fo = /* @__PURE__ */ s("path", {
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round",
+  d: "M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"
+}, null, -1), Oo = [
+  Fo
+], jo = {
+  key: 1,
+  xmlns: "http://www.w3.org/2000/svg",
+  class: "h-5 w-5 text-neutral-500",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  stroke: "currentColor",
+  "stroke-width": "1"
+}, qo = /* @__PURE__ */ s("path", {
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round",
+  d: "M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"
+}, null, -1), zo = [
+  qo
+], Po = { class: "ml-1.5" }, Go = { class: "font-bold text-xs text-gray-700 dark:text-gray-500 mt-3 tracking-wider" }, Wo = { class: "flex text-sm text-gray-800 dark:text-gray-400 border dark:border-gray-700 p-1 rounded" }, Yo = /* @__PURE__ */ s("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  class: "h-5 w-5 text-neutral-500 fill-sky-500 stroke-sky-500 dark:fill-slate-500 dark:stroke-slate-500",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  stroke: "currentColor",
+  "stroke-width": "1"
+}, [
+  /* @__PURE__ */ s("path", {
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round",
+    d: "M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"
+  })
+], -1), Ko = { class: "ml-1.5 overflow-auto" }, Jo = { class: "m-1 mr-auto font-bold text-gray-500 text-sm dark:text-gray-200 self-center" }, be = {
+  __name: "ModalMove",
+  setup(l) {
+    const e = U("ServiceContainer"), { t: a } = e.i18n, r = x(e.modal.data.items.from), o = x(""), v = () => {
+      r.value.length && e.emitter.emit("vf-fetch", {
+        params: {
+          q: "move",
+          m: "post",
+          adapter: e.fs.adapter,
+          path: e.fs.data.dirname
+        },
+        body: {
+          items: r.value.map(({ path: i, type: m }) => ({ path: i, type: m })),
+          item: e.modal.data.items.to.path
+        },
+        onSuccess: () => {
+          e.emitter.emit("vf-toast-push", { label: a("Files moved.", e.modal.data.items.to.name) });
+        },
+        onError: (i) => {
+          o.value = a(i.message);
         }
       });
     };
-    return (u, d) => (n(), T(W, null, {
-      buttons: A(() => [
-        t("button", {
+    return (i, m) => (n(), A(K, null, {
+      buttons: M(() => [
+        s("button", {
           type: "button",
-          onClick: i,
+          onClick: v,
           class: "vf-btn vf-btn-primary"
-        }, v(a(s)("Create")), 1),
-        t("button", {
+        }, c(t(a)("Yes, Move!")), 1),
+        s("button", {
           type: "button",
-          onClick: d[2] || (d[2] = (l) => a(e).emitter.emit("vf-modal-close")),
+          onClick: m[1] || (m[1] = (d) => t(e).modal.close()),
           class: "vf-btn vf-btn-secondary"
-        }, v(a(s)("Cancel")), 1)
+        }, c(t(a)("Cancel")), 1),
+        s("div", Jo, c(t(a)("%s item(s) selected.", r.value.length)), 1)
       ]),
-      default: A(() => [
-        t("div", yo, [
-          xo,
-          t("div", wo, [
-            t("h3", $o, v(a(s)("New File")), 1),
-            t("div", Co, [
-              t("p", So, v(a(s)("Create a new file")), 1),
-              I(t("input", {
-                "onUpdate:modelValue": d[0] || (d[0] = (l) => r.value = l),
-                onKeyup: Q(i, ["enter"]),
-                class: "px-2 py-1 border rounded dark:bg-gray-700/25 dark:focus:ring-gray-600 dark:focus:border-gray-600 dark:text-gray-100 w-full",
-                placeholder: a(s)("File Name"),
-                type: "text"
-              }, null, 40, Mo), [
-                [Z, r.value]
-              ]),
-              o.value.length ? (n(), T(G, {
-                key: 0,
-                onHidden: d[1] || (d[1] = (l) => o.value = ""),
-                error: ""
-              }, {
-                default: A(() => [
-                  V(v(o.value), 1)
+      default: M(() => [
+        s("div", Bo, [
+          Vo,
+          s("div", To, [
+            s("h3", No, c(t(a)("Move files")), 1),
+            s("p", Uo, c(t(a)("Are you sure you want to move these files?")), 1),
+            s("div", Io, [
+              (n(!0), u(z, null, G(r.value, (d) => (n(), u("div", Ho, [
+                s("div", null, [
+                  d.type === "dir" ? (n(), u("svg", Ro, Oo)) : (n(), u("svg", jo, zo))
                 ]),
-                _: 1
-              })) : M("", !0)
-            ])
+                s("div", Po, c(d.path), 1)
+              ]))), 256))
+            ]),
+            s("h4", Go, c(t(a)("Target Directory")), 1),
+            s("p", Wo, [
+              Yo,
+              s("span", Ko, c(t(e).modal.data.items.to.path), 1)
+            ]),
+            o.value.length ? (n(), A(J, {
+              key: 0,
+              onHidden: m[0] || (m[0] = (d) => o.value = ""),
+              error: ""
+            }, {
+              default: M(() => [
+                V(c(o.value), 1)
+              ]),
+              _: 1
+            })) : C("", !0)
           ])
         ])
       ]),
       _: 1
     }));
   }
-}), jo = { class: "flex" }, Ao = ["aria-label"], Lo = { class: "ml-auto mb-2" }, To = {
+}, Qo = {
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "currentColor",
+  class: "h-6 w-6 p-1 rounded text-slate-700 hover:bg-neutral-300 dark:text-neutral-200 dark:hover:bg-gray-700 cursor-pointer",
+  viewBox: "-40 -40 580 580"
+}, Xo = /* @__PURE__ */ s("path", { d: "M463.5 224h8.5c13.3 0 24-10.7 24-24V72c0-9.7-5.8-18.5-14.8-22.2S461.9 48.1 455 55l-41.6 41.6c-87.6-86.5-228.7-86.2-315.8 1-87.5 87.5-87.5 229.3 0 316.8s229.3 87.5 316.8 0c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0c-62.5 62.5-163.8 62.5-226.3 0s-62.5-163.8 0-226.3c62.2-62.2 162.7-62.5 225.3-1L327 183c-6.9 6.9-8.9 17.2-5.2 26.2S334.3 224 344 224z" }, null, -1), Zo = [
+  Xo
+];
+function er(l, e) {
+  return n(), u("svg", Qo, [...Zo]);
+}
+const tr = { render: er }, sr = {
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "currentColor",
+  class: "h-6 w-6 p-0.5 rounded",
+  viewBox: "0 0 20 20"
+}, ar = /* @__PURE__ */ s("path", {
+  "fill-rule": "evenodd",
+  d: "M5.293 9.707a1 1 0 0 1 0-1.414l4-4a1 1 0 0 1 1.414 0l4 4a1 1 0 0 1-1.414 1.414L11 7.414V15a1 1 0 1 1-2 0V7.414L6.707 9.707a1 1 0 0 1-1.414 0",
+  class: "pointer-events-none",
+  "clip-rule": "evenodd"
+}, null, -1), or = [
+  ar
+];
+function rr(l, e) {
+  return n(), u("svg", sr, [...or]);
+}
+const nr = { render: rr }, lr = {
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "1.5",
+  class: "h-6 w-6 p-1 rounded text-slate-700 hover:bg-neutral-300 dark:text-neutral-200 dark:hover:bg-gray-700 cursor-pointer",
+  viewBox: "0 0 24 24"
+}, ir = /* @__PURE__ */ s("path", {
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round",
+  d: "M6 18 18 6M6 6l12 12"
+}, null, -1), dr = [
+  ir
+];
+function cr(l, e) {
+  return n(), u("svg", lr, [...dr]);
+}
+const ur = { render: cr }, mr = {
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "currentColor",
+  class: "h-6 w-6 p-1 rounded text-slate-700 hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-gray-800 cursor-pointer",
+  viewBox: "0 0 20 20"
+}, fr = /* @__PURE__ */ s("path", {
+  d: "M10.707 2.293a1 1 0 0 0-1.414 0l-7 7a1 1 0 0 0 1.414 1.414L4 10.414V17a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-2a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-6.586l.293.293a1 1 0 0 0 1.414-1.414z",
+  class: "pointer-events-none"
+}, null, -1), pr = [
+  fr
+];
+function vr(l, e) {
+  return n(), u("svg", mr, [...pr]);
+}
+const hr = { render: vr }, gr = {
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "currentColor",
+  class: "h-6 w-6 p-1 m-auto stroke-gray-400 fill-gray-100 dark:stroke-gray-400 dark:fill-gray-400/20",
+  viewBox: "0 0 20 20"
+}, _r = /* @__PURE__ */ s("path", { d: "m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607" }, null, -1), br = [
+  _r
+];
+function xr(l, e) {
+  return n(), u("svg", gr, [...br]);
+}
+const wr = { render: xr }, kr = {
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "1.5",
+  class: "w-6 h-6 cursor-pointer",
+  viewBox: "0 0 24 24"
+}, yr = /* @__PURE__ */ s("path", {
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round",
+  d: "M6 18 18 6M6 6l12 12"
+}, null, -1), $r = [
+  yr
+];
+function Sr(l, e) {
+  return n(), u("svg", kr, [...$r]);
+}
+const Cr = { render: Sr }, Er = {
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  stroke: "currentColor",
+  class: "text-neutral-500 fill-sky-500 stroke-sky-500 dark:fill-slate-500 dark:stroke-slate-500",
+  viewBox: "0 0 24 24"
+}, Dr = /* @__PURE__ */ s("path", {
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round",
+  d: "M3 7v10a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-6l-2-2H5a2 2 0 0 0-2 2"
+}, null, -1), Mr = [
+  Dr
+];
+function Ar(l, e) {
+  return n(), u("svg", Er, [...Mr]);
+}
+const Ue = { render: Ar }, Lr = {
+  xmlns: "http://www.w3.org/2000/svg",
+  class: "h-6 w-6 rounded text-slate-700 hover:bg-neutral-100 dark:fill-neutral-300 dark:hover:bg-gray-800 cursor-pointer",
+  viewBox: "0 0 448 512"
+}, Br = /* @__PURE__ */ s("path", { d: "M8 256a56 56 0 1 1 112 0 56 56 0 1 1-112 0m160 0a56 56 0 1 1 112 0 56 56 0 1 1-112 0m216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112" }, null, -1), Vr = [
+  Br
+];
+function Tr(l, e) {
+  return n(), u("svg", Lr, [...Vr]);
+}
+const Nr = { render: Tr }, Ur = { class: "flex p-1.5 bg-neutral-100 dark:bg-gray-800 border-t border-b border-neutral-300 dark:border-gray-700/50 items-center select-none text-sm" }, Ir = ["aria-label"], Hr = ["aria-label"], Rr = ["aria-label"], Fr = { class: "group flex bg-white dark:bg-gray-700 items-center rounded p-1 ml-2 w-full overflow-hidden" }, Or = { class: "flex leading-6" }, jr = {
   key: 0,
-  class: "p-2 border font-normal whitespace-pre-wrap border-gray-200 dark:border-gray-700/50 dark:text-gray-200 rounded min-h-[200px] max-h-[60vh] text-xs overflow-auto"
-}, Fo = { key: 1 }, Oo = {
-  __name: "Text",
-  emits: ["success"],
-  setup(p, { emit: e }) {
-    const s = e, r = k(""), o = k(""), i = k(null), u = k(!1), d = k(""), l = k(!1), c = F("ServiceContainer"), { t: g } = c.i18n;
-    P(() => {
-      c.requester.send({
-        url: "",
-        method: "get",
-        params: { q: "preview", adapter: c.modal.data.adapter, path: c.modal.data.item.path },
+  class: "flex"
+}, qr = /* @__PURE__ */ s("div", { class: "text-neutral-300 dark:text-gray-600 mx-0.5" }, "/", -1), zr = { class: "relative" }, Pr = /* @__PURE__ */ s("span", { class: "text-neutral-300 dark:text-gray-600 mx-0.5" }, "/", -1), Gr = ["onDragover", "onDragleave", "onDrop", "title", "onClick"], Wr = { class: "relative flex bg-white dark:bg-gray-700 justify-between items-center rounded p-1 ml-2 w-full" }, Yr = ["placeholder"], Kr = { class: "z-30 absolute top-[65px] md:top-[75px] left-[90px] rounded -mx-1.5 mt-1 bg-neutral-50 dark:bg-gray-800 max-w-80 max-h-50 shadow overflow-y-auto text-gray-700 dark:text-gray-200 border border-neutral-300 dark:border-gray-600" }, Jr = ["onDrop", "onClick"], Qr = { class: "flex pointer-events-none" }, Xr = { class: "inline-block w-full text-ellipsis overflow-hidden" }, Zr = {
+  __name: "Breadcrumb",
+  setup(l) {
+    const e = U("ServiceContainer"), { t: a } = e.i18n, r = e.dragSelect, o = x(null), v = ke(0, 100);
+    ne(v, (B) => {
+      const E = o.value.children;
+      let D = 0, R = 0, F = 5, ce = 1;
+      e.fs.limitBreadcrumbItems(F), le(() => {
+        console.log("width updated");
+        for (let se = E.length - 1; se >= 0 && !(D + E[se].offsetWidth > v.value - 40); se--)
+          D += parseInt(E[se].offsetWidth, 10), R++;
+        R < ce && (R = ce), R > F && (R = F), e.fs.limitBreadcrumbItems(R);
+      });
+    });
+    const i = () => {
+      v.value = o.value.offsetWidth;
+    };
+    W(() => {
+      new ResizeObserver(i).observe(o.value);
+    });
+    const m = (B, E = null) => {
+      B.preventDefault(), r.isDraggingRef.value = !1, g(B), E ?? (E = e.fs.hiddenBreadcrumbs.length - 1);
+      let D = JSON.parse(B.dataTransfer.getData("items"));
+      if (D.find((R) => R.storage !== e.fs.adapter)) {
+        alert("Moving items between different storages is not supported yet.");
+        return;
+      }
+      e.modal.open(be, {
+        items: {
+          from: D,
+          to: e.fs.hiddenBreadcrumbs[E] ?? { path: e.fs.adapter + "://" }
+        }
+      });
+    }, d = (B, E = null) => {
+      B.preventDefault(), r.isDraggingRef.value = !1, g(B), E ?? (E = e.fs.breadcrumbs.length - 2);
+      let D = JSON.parse(B.dataTransfer.getData("items"));
+      if (D.find((R) => R.storage !== e.fs.adapter)) {
+        alert("Moving items between different storages is not supported yet.");
+        return;
+      }
+      e.modal.open(be, {
+        items: {
+          from: D,
+          to: e.fs.breadcrumbs[E] ?? { path: e.fs.adapter + "://" }
+        }
+      });
+    }, f = (B) => {
+      B.preventDefault(), e.fs.isGoUpAvailable() ? (B.dataTransfer.dropEffect = "copy", B.currentTarget.classList.add("bg-blue-200", "dark:bg-slate-600")) : (B.dataTransfer.dropEffect = "none", B.dataTransfer.effectAllowed = "none");
+    }, g = (B) => {
+      B.preventDefault(), B.currentTarget.classList.remove("bg-blue-200", "dark:bg-slate-600"), e.fs.isGoUpAvailable() && B.currentTarget.classList.remove("bg-blue-200", "dark:bg-slate-600");
+    }, b = () => {
+      S(), e.emitter.emit("vf-fetch", { params: { q: "index", adapter: e.fs.adapter, path: e.fs.data.dirname } });
+    }, p = () => {
+      S(), !e.fs.isGoUpAvailable() || e.emitter.emit("vf-fetch", {
+        params: {
+          q: "index",
+          adapter: e.fs.adapter,
+          path: e.fs.parentFolderPath
+        }
+      });
+    }, h = (B) => {
+      e.emitter.emit("vf-fetch", { params: { q: "index", adapter: e.fs.adapter, path: B.path } }), e.fs.toggleHiddenBreadcrumbs(!1);
+    }, _ = () => {
+      e.fs.showHiddenBreadcrumbs && e.fs.toggleHiddenBreadcrumbs(!1);
+    }, w = {
+      mounted(B, E, D, R) {
+        B.clickOutsideEvent = function(F) {
+          B === F.target || B.contains(F.target) || E.value();
+        }, document.body.addEventListener("click", B.clickOutsideEvent);
+      },
+      beforeUnmount(B, E, D, R) {
+        document.body.removeEventListener("click", B.clickOutsideEvent);
+      }
+    }, y = x(null), T = () => {
+      e.features.includes(O.SEARCH) && (e.fs.searchMode = !0, le(() => y.value.focus()));
+    }, $ = ke("", 400);
+    ne($, (B) => {
+      e.emitter.emit("vf-toast-clear"), e.emitter.emit("vf-search-query", { newQuery: B });
+    });
+    const S = () => {
+      e.fs.searchMode = !1, $.value = "";
+    };
+    e.emitter.on("vf-search-exit", () => {
+      S();
+    });
+    const Y = () => {
+      $.value === "" && S();
+    };
+    return (B, E) => (n(), u("div", Ur, [
+      s("span", {
+        "aria-label": t(a)("Go up a directory"),
+        "data-microtip-position": "bottom-right",
+        role: "tooltip"
+      }, [
+        L(t(nr), {
+          onDragover: E[0] || (E[0] = (D) => f(D)),
+          onDragleave: E[1] || (E[1] = (D) => g(D)),
+          onDrop: E[2] || (E[2] = (D) => d(D)),
+          onClick: p,
+          class: q(t(e).fs.isGoUpAvailable() ? "text-slate-700 hover:bg-neutral-300 dark:text-neutral-200 dark:hover:bg-gray-700 cursor-pointer" : "text-gray-400 dark:text-neutral-500")
+        }, null, 8, ["class"])
+      ], 8, Ir),
+      t(e).fs.loading ? (n(), u("span", {
+        key: 1,
+        "aria-label": t(a)("Cancel"),
+        "data-microtip-position": "bottom-right",
+        role: "tooltip"
+      }, [
+        L(t(ur), {
+          onClick: E[3] || (E[3] = (D) => t(e).emitter.emit("vf-fetch-abort"))
+        })
+      ], 8, Rr)) : (n(), u("span", {
+        key: 0,
+        "aria-label": t(a)("Refresh"),
+        "data-microtip-position": "bottom-right",
+        role: "tooltip"
+      }, [
+        L(t(tr), { onClick: b })
+      ], 8, Hr)),
+      j(s("div", Fr, [
+        s("div", null, [
+          L(t(hr), {
+            onDragover: E[4] || (E[4] = (D) => f(D)),
+            onDragleave: E[5] || (E[5] = (D) => g(D)),
+            onDrop: E[6] || (E[6] = (D) => d(D, -1)),
+            onClick: E[7] || (E[7] = (D) => t(e).emitter.emit("vf-fetch", { params: { q: "index", adapter: t(e).fs.adapter } }))
+          })
+        ]),
+        s("div", Or, [
+          t(e).fs.hiddenBreadcrumbs.length ? j((n(), u("div", jr, [
+            qr,
+            s("div", zr, [
+              s("span", {
+                onDragenter: E[8] || (E[8] = (D) => t(e).fs.toggleHiddenBreadcrumbs(!0)),
+                onClick: E[9] || (E[9] = (D) => t(e).fs.toggleHiddenBreadcrumbs()),
+                class: "text-slate-700 dark:text-slate-200 hover:bg-neutral-100 dark:hover:bg-gray-800 rounded cursor-pointer"
+              }, [
+                L(t(Nr), { class: "px-1 pointer-events-none" })
+              ], 32)
+            ])
+          ])), [
+            [w, _]
+          ]) : C("", !0)
+        ]),
+        s("div", {
+          ref_key: "breadcrumbContainer",
+          ref: o,
+          class: "flex leading-6 w-full overflow-hidden",
+          onClick: ee(T, ["self"])
+        }, [
+          (n(!0), u(z, null, G(t(e).fs.breadcrumbs, (D, R) => (n(), u("div", { key: R }, [
+            Pr,
+            s("span", {
+              onDragover: (F) => R === t(e).fs.breadcrumbs.length - 1 || f(F),
+              onDragleave: (F) => R === t(e).fs.breadcrumbs.length - 1 || g(F),
+              onDrop: (F) => R === t(e).fs.breadcrumbs.length - 1 || d(F, R),
+              class: "px-1.5 py-1 text-slate-700 dark:text-slate-200 hover:bg-neutral-100 dark:hover:bg-gray-800 rounded cursor-pointer whitespace-nowrap",
+              title: D.basename,
+              onClick: (F) => t(e).emitter.emit("vf-fetch", { params: { q: "index", adapter: t(e).fs.adapter, path: D.path } })
+            }, c(D.name), 41, Gr)
+          ]))), 128))
+        ], 512),
+        t(e).fs.loading ? (n(), A(t(Ne), { key: 0 })) : C("", !0)
+      ], 512), [
+        [X, !t(e).fs.searchMode]
+      ]),
+      j(s("div", Wr, [
+        s("div", null, [
+          L(t(wr))
+        ]),
+        j(s("input", {
+          ref_key: "searchInput",
+          ref: y,
+          onKeydown: oe(S, ["esc"]),
+          onBlur: Y,
+          "onUpdate:modelValue": E[10] || (E[10] = (D) => Ee($) ? $.value = D : null),
+          placeholder: t(a)("Search anything.."),
+          class: "w-full pb-0 px-1 border-0 text-base ring-0 outline-0 text-gray-600 focus:ring-transparent focus:border-transparent dark:focus:ring-transparent dark:focus:border-transparent dark:text-gray-300 bg-transparent",
+          type: "text"
+        }, null, 40, Yr), [
+          [re, t($)]
+        ]),
+        L(t(Cr), { onClick: S })
+      ], 512), [
+        [X, t(e).fs.searchMode]
+      ]),
+      j(s("div", Kr, [
+        (n(!0), u(z, null, G(t(e).fs.hiddenBreadcrumbs, (D, R) => (n(), u("div", {
+          key: R,
+          onDragover: E[11] || (E[11] = (F) => f(F)),
+          onDragleave: E[12] || (E[12] = (F) => g(F)),
+          onDrop: (F) => m(F, R),
+          onClick: (F) => h(D),
+          class: "px-2 py-0.5 hover:bg-gray-400/20 cursor-pointer items-center whitespace-nowrap"
+        }, [
+          s("div", Qr, [
+            s("span", null, [
+              L(t(Ue), { class: "h-5 w-5" })
+            ]),
+            V(),
+            s("span", Xr, c(D.name), 1)
+          ])
+        ], 40, Jr))), 128))
+      ], 512), [
+        [X, t(e).fs.showHiddenBreadcrumbs]
+      ])
+    ]));
+  }
+}, Ie = (l, e = null) => new Date(l * 1e3).toLocaleString(e ?? navigator.language ?? "en-US"), en = ["onClick"], tn = {
+  __name: "Toast",
+  setup(l) {
+    const e = U("ServiceContainer"), { getStore: a } = e.storage, r = x(a("full-screen", !1)), o = x([]), v = (d) => d === "error" ? "text-red-400 border-red-400 dark:text-red-300 dark:border-red-300" : "text-lime-600 border-lime-600 dark:text-lime-300 dark:border-lime-1300", i = (d) => {
+      o.value.splice(d, 1);
+    }, m = (d) => {
+      let f = o.value.findIndex((g) => g.id === d);
+      f !== -1 && i(f);
+    };
+    return e.emitter.on("vf-toast-clear", () => {
+      o.value = [];
+    }), e.emitter.on("vf-toast-push", (d) => {
+      let f = (/* @__PURE__ */ new Date()).getTime().toString(36).concat(performance.now().toString(), Math.random().toString()).replace(/\./g, "");
+      d.id = f, o.value.push(d), setTimeout(() => {
+        m(f);
+      }, 5e3);
+    }), (d, f) => (n(), u("div", {
+      class: q([r.value.value ? "fixed" : "absolute", "max-w-fit flex flex-col bottom-0 left-1/2 -translate-x-1/2"])
+    }, [
+      L(ze, {
+        name: "vf-toast-item",
+        "leave-active-class": "transition-all duration-1000",
+        "leave-to-class": "opacity-0"
+      }, {
+        default: M(() => [
+          (n(!0), u(z, null, G(o.value, (g, b) => (n(), u("div", {
+            onClick: (p) => i(b),
+            key: g,
+            class: q([v(g.type), "inline-block mx-auto my-0.5 py-0.5 px-2 min-w-max bg-gray-50 dark:bg-gray-600 border text-xs sm:text-sm rounded cursor-pointer"])
+          }, c(g.label), 11, en))), 128))
+        ]),
+        _: 1
+      })
+    ], 2));
+  }
+}, sn = {
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "currentColor",
+  class: "h-5 w-5",
+  viewBox: "0 0 20 20"
+}, an = /* @__PURE__ */ s("path", {
+  "fill-rule": "evenodd",
+  d: "M5.293 7.293a1 1 0 0 1 1.414 0L10 10.586l3.293-3.293a1 1 0 1 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 0-1.414",
+  "clip-rule": "evenodd"
+}, null, -1), on = [
+  an
+];
+function rn(l, e) {
+  return n(), u("svg", sn, [...on]);
+}
+const nn = { render: rn }, ln = {
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "currentColor",
+  class: "h-5 w-5",
+  viewBox: "0 0 20 20"
+}, dn = /* @__PURE__ */ s("path", {
+  "fill-rule": "evenodd",
+  d: "M14.707 12.707a1 1 0 0 1-1.414 0L10 9.414l-3.293 3.293a1 1 0 0 1-1.414-1.414l4-4a1 1 0 0 1 1.414 0l4 4a1 1 0 0 1 0 1.414",
+  "clip-rule": "evenodd"
+}, null, -1), cn = [
+  dn
+];
+function un(l, e) {
+  return n(), u("svg", ln, [...cn]);
+}
+const mn = { render: un }, me = {
+  __name: "SortIcon",
+  props: { direction: String },
+  setup(l) {
+    return (e, a) => (n(), u("div", null, [
+      l.direction === "asc" ? (n(), A(t(nn), { key: 0 })) : C("", !0),
+      l.direction === "desc" ? (n(), A(t(mn), { key: 1 })) : C("", !0)
+    ]));
+  }
+}, fn = {
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  stroke: "currentColor",
+  class: "text-neutral-500",
+  viewBox: "0 0 24 24"
+}, pn = /* @__PURE__ */ s("path", {
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round",
+  d: "M7 21h10a2 2 0 0 0 2-2V9.414a1 1 0 0 0-.293-.707l-5.414-5.414A1 1 0 0 0 12.586 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2"
+}, null, -1), vn = [
+  pn
+];
+function hn(l, e) {
+  return n(), u("svg", fn, [...vn]);
+}
+const gn = { render: hn }, ve = {
+  __name: "ItemIcon",
+  props: {
+    type: {
+      type: String,
+      required: !0
+    },
+    small: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  setup(l) {
+    return (e, a) => (n(), u("span", null, [
+      l.type === "dir" ? (n(), A(t(Ue), {
+        key: 0,
+        class: q({ "h-5 w-5": l.small, "h-10 w-10 md:h-12 md:w-12 m-auto": !l.small })
+      }, null, 8, ["class"])) : (n(), A(t(gn), {
+        key: 1,
+        class: q({ "h-5 w-5": l.small, "h-10 w-10 md:h-12 md:w-12 m-auto": !l.small })
+      }, null, 8, ["class"]))
+    ]));
+  }
+}, _n = {
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  stroke: "currentColor",
+  class: "absolute h-6 w-6 md:h-12 md:w-12 m-auto stroke-neutral-500 fill-white dark:fill-gray-700 dark:stroke-gray-600 z-10",
+  viewBox: "0 0 24 24"
+}, bn = /* @__PURE__ */ s("path", {
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round",
+  d: "M7 21h10a2 2 0 0 0 2-2V9.414a1 1 0 0 0-.293-.707l-5.414-5.414A1 1 0 0 0 12.586 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2"
+}, null, -1), xn = [
+  bn
+];
+function wn(l, e) {
+  return n(), u("svg", _n, [...xn]);
+}
+const kn = { render: wn }, yn = { class: "absolute -z-50 -top-96" }, $n = { class: "text-neutral-700 dark:text-neutral-300 p-1 absolute text-center top-4 right-[-2rem] md:top-5 md:right-[-2.4rem] z-20 text-xs" }, Sn = {
+  __name: "DragItem",
+  props: {
+    count: {
+      type: Number,
+      default: 0
+    }
+  },
+  setup(l) {
+    const e = l;
+    return (a, r) => (n(), u("div", yn, [
+      L(t(kn)),
+      s("div", $n, c(e.count), 1)
+    ]));
+  }
+}, Cn = { class: "flex" }, En = ["aria-label"], Dn = { class: "ml-auto mb-2" }, Mn = {
+  key: 0,
+  class: "p-2 border font-normal whitespace-pre-wrap border-gray-200 dark:border-gray-700/50 dark:text-gray-200 rounded min-h-[200px] max-h-[60vh] text-xs overflow-auto"
+}, An = { key: 1 }, Ln = {
+  __name: "Text",
+  emits: ["success"],
+  setup(l, { emit: e }) {
+    const a = e, r = x(""), o = x(""), v = x(null), i = x(!1), m = x(""), d = x(!1), f = U("ServiceContainer"), { t: g } = f.i18n;
+    W(() => {
+      f.requester.send({
+        url: "",
+        method: "get",
+        params: { q: "preview", adapter: f.modal.data.adapter, path: f.modal.data.item.path },
         responseType: "text"
-      }).then((x) => {
-        r.value = x, s("success");
+      }).then((h) => {
+        r.value = h, a("success");
       });
     });
-    const _ = () => {
-      u.value = !u.value, o.value = r.value, u.value == !0 && ce(() => {
-        i.value.focus();
+    const b = () => {
+      i.value = !i.value, o.value = r.value, i.value == !0 && le(() => {
+        v.value.focus();
       });
-    }, y = () => {
-      d.value = "", l.value = !1, c.requester.send({
+    }, p = () => {
+      m.value = "", d.value = !1, f.requester.send({
         url: "",
         method: "post",
         params: {
           q: "save",
-          adapter: c.modal.data.adapter,
-          path: c.modal.data.item.path
+          adapter: f.modal.data.adapter,
+          path: f.modal.data.item.path
         },
         body: {
           content: o.value
         },
         responseType: "text"
-      }).then((x) => {
-        d.value = g("Updated."), r.value = x, s("success"), u.value = !u.value;
-      }).catch((x) => {
-        d.value = g(x.message), l.value = !0;
+      }).then((h) => {
+        m.value = g("Updated."), r.value = h, a("success"), i.value = !i.value;
+      }).catch((h) => {
+        m.value = g(h.message), d.value = !0;
       });
     };
-    return (x, E) => (n(), m(U, null, [
-      t("div", jo, [
-        t("div", {
+    return (h, _) => (n(), u(z, null, [
+      s("div", Cn, [
+        s("div", {
           class: "mb-2 text-lg leading-6 font-medium text-gray-900 dark:text-gray-400",
           id: "modal-title",
-          "aria-label": a(c).modal.data.item.path,
+          "aria-label": t(f).modal.data.item.path,
           "data-microtip-position": "bottom-right",
           role: "tooltip"
-        }, v(a(c).modal.data.item.basename), 9, Ao),
-        t("div", Lo, [
-          u.value ? (n(), m("button", {
+        }, c(t(f).modal.data.item.basename), 9, En),
+        s("div", Dn, [
+          i.value ? (n(), u("button", {
             key: 0,
-            onClick: y,
+            onClick: p,
             class: "ml-1 px-2 py-1 rounded border border-transparent shadow-sm bg-blue-700/75 hover:bg-blue-700 dark:bg-gray-700 dark:hover:bg-gray-700/50 text-base font-medium text-white sm:ml-3 sm:w-auto sm:text-sm"
-          }, v(a(g)("Save")), 1)) : M("", !0),
-          a(c).features.includes(a(B).EDIT) ? (n(), m("button", {
+          }, c(t(g)("Save")), 1)) : C("", !0),
+          t(f).features.includes(t(O).EDIT) ? (n(), u("button", {
             key: 1,
             class: "ml-1 px-2 py-1 text-blue-500",
-            onClick: E[0] || (E[0] = (C) => _())
-          }, v(u.value ? a(g)("Cancel") : a(g)("Edit")), 1)) : M("", !0)
+            onClick: _[0] || (_[0] = (w) => b())
+          }, c(i.value ? t(g)("Cancel") : t(g)("Edit")), 1)) : C("", !0)
         ])
       ]),
-      t("div", null, [
-        u.value ? (n(), m("div", Fo, [
-          I(t("textarea", {
+      s("div", null, [
+        i.value ? (n(), u("div", An, [
+          j(s("textarea", {
             ref_key: "editInput",
-            ref: i,
-            "onUpdate:modelValue": E[1] || (E[1] = (C) => o.value = C),
+            ref: v,
+            "onUpdate:modelValue": _[1] || (_[1] = (w) => o.value = w),
             class: "w-full p-2 rounded dark:bg-gray-700 dark:text-gray-200 dark:focus:ring-gray-600 dark:focus:border-gray-600 dark:selection:bg-gray-500 min-h-[200px] max-h-[60vh] text-xs",
             name: "text",
             id: "",
             cols: "30",
             rows: "10"
           }, null, 512), [
-            [Z, o.value]
+            [re, o.value]
           ])
-        ])) : (n(), m("pre", To, v(r.value), 1)),
-        d.value.length ? (n(), T(G, {
+        ])) : (n(), u("pre", Mn, c(r.value), 1)),
+        m.value.length ? (n(), A(J, {
           key: 2,
-          onHidden: E[2] || (E[2] = (C) => d.value = ""),
-          error: l.value
+          onHidden: _[2] || (_[2] = (w) => m.value = ""),
+          error: d.value
         }, {
-          default: A(() => [
-            V(v(d.value), 1)
+          default: M(() => [
+            V(c(m.value), 1)
           ]),
           _: 1
-        }, 8, ["error"])) : M("", !0)
+        }, 8, ["error"])) : C("", !0)
       ])
     ], 64));
   }
-}, Vo = { class: "flex" }, No = ["aria-label"], Bo = { class: "ml-auto mb-2" }, zo = { class: "w-full flex justify-center" }, Uo = ["src"], Ho = {
+}, Bn = { class: "flex" }, Vn = ["aria-label"], Tn = { class: "ml-auto mb-2" }, Nn = { class: "w-full flex justify-center" }, Un = ["src"], In = {
   __name: "Image",
   emits: ["success"],
-  setup(p, { emit: e }) {
-    const s = e, r = F("ServiceContainer"), { t: o } = r.i18n, i = k(null), u = k(null), d = k(!1), l = k(""), c = k(!1), g = () => {
-      d.value = !d.value, d.value ? u.value = new Be(i.value, {
-        crop(y) {
+  setup(l, { emit: e }) {
+    const a = e, r = U("ServiceContainer"), { t: o } = r.i18n, v = x(null), i = x(null), m = x(!1), d = x(""), f = x(!1), g = () => {
+      m.value = !m.value, m.value ? i.value = new Ze(v.value, {
+        crop(p) {
         }
-      }) : u.value.destroy();
-    }, _ = () => {
-      u.value.getCroppedCanvas({
+      }) : i.value.destroy();
+    }, b = () => {
+      i.value.getCroppedCanvas({
         width: 795,
         height: 341
       }).toBlob(
-        (y) => {
-          l.value = "", c.value = !1;
-          const x = new FormData();
-          x.set("file", y), r.requester.send({
+        (p) => {
+          d.value = "", f.value = !1;
+          const h = new FormData();
+          h.set("file", p), r.requester.send({
             url: "",
             method: "post",
             params: {
@@ -2098,1169 +2509,697 @@ const ys = { class: "relative flex-auto flex flex-col overflow-hidden" }, xs = {
               adapter: r.modal.data.adapter,
               path: r.modal.data.item.path
             },
-            body: x
-          }).then((E) => {
-            l.value = o("Updated."), i.value.src = r.requester.getPreviewUrl(r.modal.data.adapter, r.modal.data.item), g(), s("success");
-          }).catch((E) => {
-            l.value = o(E.message), c.value = !0;
+            body: h
+          }).then((_) => {
+            d.value = o("Updated."), v.value.src = r.requester.getPreviewUrl(r.modal.data.adapter, r.modal.data.item), g(), a("success");
+          }).catch((_) => {
+            d.value = o(_.message), f.value = !0;
           });
         }
       );
     };
-    return P(() => {
-      s("success");
-    }), (y, x) => (n(), m(U, null, [
-      t("div", Vo, [
-        t("h3", {
+    return W(() => {
+      a("success");
+    }), (p, h) => (n(), u(z, null, [
+      s("div", Bn, [
+        s("h3", {
           class: "mb-2 text-lg leading-6 font-medium text-gray-900 dark:text-gray-400",
           id: "modal-title",
-          "aria-label": a(r).modal.data.item.path,
+          "aria-label": t(r).modal.data.item.path,
           "data-microtip-position": "bottom-right",
           role: "tooltip"
-        }, v(a(r).modal.data.item.basename), 9, No),
-        t("div", Bo, [
-          d.value ? (n(), m("button", {
+        }, c(t(r).modal.data.item.basename), 9, Vn),
+        s("div", Tn, [
+          m.value ? (n(), u("button", {
             key: 0,
-            onClick: _,
+            onClick: b,
             class: "ml-1 px-2 py-1 rounded border border-transparent shadow-sm bg-blue-700/75 hover:bg-blue-700 dark:bg-gray-700 dark:hover:bg-gray-700/50 text-base font-medium text-white sm:ml-3 sm:w-auto sm:text-sm"
-          }, v(a(o)("Crop")), 1)) : M("", !0),
-          a(r).features.includes(a(B).EDIT) ? (n(), m("button", {
+          }, c(t(o)("Crop")), 1)) : C("", !0),
+          t(r).features.includes(t(O).EDIT) ? (n(), u("button", {
             key: 1,
             class: "ml-1 px-2 py-1 text-blue-500",
-            onClick: x[0] || (x[0] = (E) => g())
-          }, v(d.value ? a(o)("Cancel") : a(o)("Edit")), 1)) : M("", !0)
+            onClick: h[0] || (h[0] = (_) => g())
+          }, c(m.value ? t(o)("Cancel") : t(o)("Edit")), 1)) : C("", !0)
         ])
       ]),
-      t("div", zo, [
-        t("img", {
+      s("div", Nn, [
+        s("img", {
           ref_key: "image",
-          ref: i,
+          ref: v,
           class: "max-w-[50vh] max-h-[50vh]",
-          src: a(r).requester.getPreviewUrl(a(r).modal.data.adapter, a(r).modal.data.item),
+          src: t(r).requester.getPreviewUrl(t(r).modal.data.adapter, t(r).modal.data.item),
           alt: ""
-        }, null, 8, Uo)
+        }, null, 8, Un)
       ]),
-      l.value.length ? (n(), T(G, {
+      d.value.length ? (n(), A(J, {
         key: 0,
-        onHidden: x[1] || (x[1] = (E) => l.value = ""),
-        error: c.value
+        onHidden: h[1] || (h[1] = (_) => d.value = ""),
+        error: f.value
       }, {
-        default: A(() => [
-          V(v(l.value), 1)
+        default: M(() => [
+          V(c(d.value), 1)
         ]),
         _: 1
-      }, 8, ["error"])) : M("", !0)
+      }, 8, ["error"])) : C("", !0)
     ], 64));
   }
-}, Ro = { class: "flex" }, Io = ["aria-label"], qo = /* @__PURE__ */ t("div", null, null, -1), Po = {
+}, Hn = { class: "flex" }, Rn = ["aria-label"], Fn = /* @__PURE__ */ s("div", null, null, -1), On = {
   __name: "Default",
   emits: ["success"],
-  setup(p, { emit: e }) {
-    const s = F("ServiceContainer"), r = e;
-    return P(() => {
+  setup(l, { emit: e }) {
+    const a = U("ServiceContainer"), r = e;
+    return W(() => {
       r("success");
-    }), (o, i) => (n(), m(U, null, [
-      t("div", Ro, [
-        t("h3", {
+    }), (o, v) => (n(), u(z, null, [
+      s("div", Hn, [
+        s("h3", {
           class: "mb-2 text-lg leading-6 font-medium text-gray-900 dark:text-gray-400",
           id: "modal-title",
-          "aria-label": a(s).modal.data.item.path,
+          "aria-label": t(a).modal.data.item.path,
           "data-microtip-position": "bottom-right",
           role: "tooltip"
-        }, v(a(s).modal.data.item.basename), 9, Io)
+        }, c(t(a).modal.data.item.basename), 9, Rn)
       ]),
-      qo
+      Fn
     ], 64));
   }
-}, Wo = ["aria-label"], Go = {
-  class: "w-full",
+}, jn = ["aria-label"], qn = {
+  class: "w-full aspect-video",
   preload: "",
   controls: ""
-}, Yo = ["src"], Ko = {
+}, zn = ["src"], Pn = {
   __name: "Video",
   emits: ["success"],
-  setup(p, { emit: e }) {
-    const s = F("ServiceContainer"), r = e, o = () => s.requester.getPreviewUrl(s.modal.data.adapter, s.modal.data.item);
-    return P(() => {
+  setup(l, { emit: e }) {
+    const a = U("ServiceContainer"), r = e, o = () => a.requester.getPreviewUrl(a.modal.data.adapter, a.modal.data.item);
+    return W(() => {
       r("success");
-    }), (i, u) => (n(), m("div", null, [
-      t("h3", {
+    }), (v, i) => (n(), u("div", null, [
+      s("h3", {
         class: "mb-2 text-lg leading-6 font-medium text-gray-900 dark:text-gray-400",
         id: "modal-title",
-        "aria-label": a(s).modal.data.item.path,
+        "aria-label": t(a).modal.data.item.path,
         "data-microtip-position": "bottom-right",
         role: "tooltip"
-      }, v(a(s).modal.data.item.basename), 9, Wo),
-      t("div", null, [
-        t("video", Go, [
-          t("source", {
+      }, c(t(a).modal.data.item.basename), 9, jn),
+      s("div", null, [
+        s("video", qn, [
+          s("source", {
             src: o(),
             type: "video/mp4"
-          }, null, 8, Yo),
+          }, null, 8, zn),
           V(" Your browser does not support the video tag. ")
         ])
       ])
     ]));
   }
-}, Jo = ["aria-label"], Xo = {
+}, Gn = ["aria-label"], Wn = {
   class: "w-full",
   controls: ""
-}, Qo = ["src"], Zo = {
+}, Yn = ["src"], Kn = {
   __name: "Audio",
   emits: ["success"],
-  setup(p, { emit: e }) {
-    const s = e, r = F("ServiceContainer"), o = () => r.requester.getPreviewUrl(r.modal.data.adapter, r.modal.data.item);
-    return P(() => {
-      s("success");
-    }), (i, u) => (n(), m(U, null, [
-      t("h3", {
+  setup(l, { emit: e }) {
+    const a = e, r = U("ServiceContainer"), o = () => r.requester.getPreviewUrl(r.modal.data.adapter, r.modal.data.item);
+    return W(() => {
+      a("success");
+    }), (v, i) => (n(), u(z, null, [
+      s("h3", {
         class: "mb-2 text-lg leading-6 font-medium text-gray-900 dark:text-gray-400",
         id: "modal-title",
-        "aria-label": a(r).modal.data.item.path,
+        "aria-label": t(r).modal.data.item.path,
         "data-microtip-position": "bottom-right",
         role: "tooltip"
-      }, v(a(r).modal.data.item.basename), 9, Jo),
-      t("div", null, [
-        t("audio", Xo, [
-          t("source", {
+      }, c(t(r).modal.data.item.basename), 9, Gn),
+      s("div", null, [
+        s("audio", Wn, [
+          s("source", {
             src: o(),
             type: "audio/mpeg"
-          }, null, 8, Qo),
+          }, null, 8, Yn),
           V(" Your browser does not support the audio element. ")
         ])
       ])
     ], 64));
   }
-}, er = ["aria-label"], tr = ["data"], sr = ["src"], ar = /* @__PURE__ */ t("p", null, [
+}, Jn = ["aria-label"], Qn = ["data"], Xn = ["src"], Zn = /* @__PURE__ */ s("p", null, [
   /* @__PURE__ */ V(" Your browser does not support PDFs. "),
-  /* @__PURE__ */ t("a", { href: "https://example.com/test.pdf" }, "Download the PDF"),
+  /* @__PURE__ */ s("a", { href: "https://example.com/test.pdf" }, "Download the PDF"),
   /* @__PURE__ */ V(" . ")
-], -1), or = [
-  ar
-], rr = {
+], -1), el = [
+  Zn
+], tl = {
   __name: "Pdf",
   emits: ["success"],
-  setup(p, { emit: e }) {
-    const s = F("ServiceContainer"), r = e, o = () => s.requester.getPreviewUrl(s.modal.data.adapter, s.modal.data.item);
-    return P(() => {
+  setup(l, { emit: e }) {
+    const a = U("ServiceContainer"), r = e, o = () => a.requester.getPreviewUrl(a.modal.data.adapter, a.modal.data.item);
+    return W(() => {
       r("success");
-    }), (i, u) => (n(), m(U, null, [
-      t("h3", {
+    }), (v, i) => (n(), u(z, null, [
+      s("h3", {
         class: "mb-2 text-lg leading-6 font-medium text-gray-900 dark:text-gray-400",
         id: "modal-title",
-        "aria-label": a(s).modal.data.item.path,
+        "aria-label": t(a).modal.data.item.path,
         "data-microtip-position": "bottom-right",
         role: "tooltip"
-      }, v(a(s).modal.data.item.basename), 9, er),
-      t("div", null, [
-        t("object", {
+      }, c(t(a).modal.data.item.basename), 9, Jn),
+      s("div", null, [
+        s("object", {
           class: "h-[60vh]",
           data: o(),
           type: "application/pdf",
           width: "100%",
-          height: "100%"
-        }, [
-          t("iframe", {
-            class: "border-0",
-            src: o(),
-            width: "100%",
-            height: "100%"
-          }, or, 8, sr)
-        ], 8, tr)
-      ])
-    ], 64));
-  }
-}, nr = { class: "sm:flex sm:items-start" }, lr = { class: "mt-3 text-center sm:mt-0 sm:text-left w-full" }, ir = { key: 0 }, dr = { class: "text-gray-700 dark:text-gray-200 text-sm" }, cr = {
-  key: 0,
-  class: "flex leading-5"
-}, ur = /* @__PURE__ */ t("svg", {
-  class: "animate-spin -ml-1 mr-3 h-5 w-5 text-white",
-  xmlns: "http://www.w3.org/2000/svg",
-  fill: "none",
-  viewBox: "0 0 24 24"
-}, [
-  /* @__PURE__ */ t("circle", {
-    class: "opacity-25 stroke-blue-900 dark:stroke-blue-100",
-    cx: "12",
-    cy: "12",
-    r: "10",
-    stroke: "currentColor",
-    "stroke-width": "4"
-  }),
-  /* @__PURE__ */ t("path", {
-    class: "opacity-75",
-    fill: "currentColor",
-    d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-  })
-], -1), mr = { class: "py-2 flex font-normal break-all dark:text-gray-200 rounded text-xs" }, vr = { class: "font-bold" }, pr = { class: "font-bold pl-2" }, hr = {
-  key: 0,
-  class: "text-xs text-gray-600 dark:text-gray-400"
-}, fr = ["download", "href"], gr = {
-  name: "VFModalPreview"
-}, _r = /* @__PURE__ */ Object.assign(gr, {
-  setup(p) {
-    const e = F("ServiceContainer"), { t: s } = e.i18n, r = k(!1), o = (u) => (e.modal.data.item.mime_type ?? "").startsWith(u), i = e.features.includes(B.PREVIEW);
-    return i || (r.value = !0), (u, d) => (n(), T(W, null, {
-      buttons: A(() => [
-        t("button", {
-          type: "button",
-          onClick: d[6] || (d[6] = (l) => a(e).emitter.emit("vf-modal-close")),
-          class: "vf-btn vf-btn-secondary"
-        }, v(a(s)("Close")), 1),
-        a(e).features.includes(a(B).DOWNLOAD) ? (n(), m("a", {
-          key: 0,
-          target: "_blank",
-          class: "vf-btn vf-btn-primary",
-          download: a(e).requester.getDownloadUrl(a(e).modal.data.adapter, a(e).modal.data.item),
-          href: a(e).requester.getDownloadUrl(a(e).modal.data.adapter, a(e).modal.data.item)
-        }, v(a(s)("Download")), 9, fr)) : M("", !0)
-      ]),
-      default: A(() => [
-        t("div", nr, [
-          t("div", lr, [
-            a(i) ? (n(), m("div", ir, [
-              o("text") ? (n(), T(Oo, {
-                key: 0,
-                onSuccess: d[0] || (d[0] = (l) => r.value = !0)
-              })) : o("image") ? (n(), T(Ho, {
-                key: 1,
-                onSuccess: d[1] || (d[1] = (l) => r.value = !0)
-              })) : o("video") ? (n(), T(Ko, {
-                key: 2,
-                onSuccess: d[2] || (d[2] = (l) => r.value = !0)
-              })) : o("audio") ? (n(), T(Zo, {
-                key: 3,
-                onSuccess: d[3] || (d[3] = (l) => r.value = !0)
-              })) : o("application/pdf") ? (n(), T(rr, {
-                key: 4,
-                onSuccess: d[4] || (d[4] = (l) => r.value = !0)
-              })) : (n(), T(Po, {
-                key: 5,
-                onSuccess: d[5] || (d[5] = (l) => r.value = !0)
-              }))
-            ])) : M("", !0),
-            t("div", dr, [
-              r.value === !1 ? (n(), m("div", cr, [
-                ur,
-                t("span", null, v(a(s)("Loading")), 1)
-              ])) : M("", !0)
-            ])
-          ])
-        ]),
-        t("div", mr, [
-          t("div", null, [
-            t("span", vr, v(a(s)("File Size")) + ": ", 1),
-            V(v(a(e).filesize(a(e).modal.data.item.file_size)), 1)
-          ]),
-          t("div", null, [
-            t("span", pr, v(a(s)("Last Modified")) + ": ", 1),
-            V(" " + v(a(we)(a(e).modal.data.item.last_modified)), 1)
-          ])
-        ]),
-        a(e).features.includes(a(B).DOWNLOAD) ? (n(), m("div", hr, [
-          t("span", null, v(a(s)(`Download doesn't work? You can try right-click "Download" button, select "Save link as...".`)), 1)
-        ])) : M("", !0)
-      ]),
-      _: 1
-    }));
-  }
-}), kr = { class: "sm:flex sm:items-start" }, br = /* @__PURE__ */ t("div", { class: "mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-50 dark:bg-gray-500 sm:mx-0 sm:h-10 sm:w-10" }, [
-  /* @__PURE__ */ t("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    class: "h-6 w-6 stroke-blue-600 dark:stroke-blue-100",
-    fill: "none",
-    viewBox: "0 0 24 24",
-    stroke: "none",
-    "stroke-width": "1.5"
-  }, [
-    /* @__PURE__ */ t("path", {
-      "stroke-linecap": "round",
-      "stroke-linejoin": "round",
-      d: "M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
-    })
-  ])
-], -1), yr = { class: "mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full" }, xr = {
-  class: "text-lg leading-6 font-medium text-gray-900 dark:text-gray-400",
-  id: "modal-title"
-}, wr = { class: "mt-2" }, $r = { class: "flex text-sm text-gray-800 dark:text-gray-400 py-2" }, Cr = {
-  key: 0,
-  xmlns: "http://www.w3.org/2000/svg",
-  class: "h-5 w-5 text-neutral-500 fill-sky-500 stroke-sky-500 dark:fill-slate-500 dark:stroke-slate-500",
-  fill: "none",
-  viewBox: "0 0 24 24",
-  stroke: "currentColor",
-  "stroke-width": "1"
-}, Sr = /* @__PURE__ */ t("path", {
-  "stroke-linecap": "round",
-  "stroke-linejoin": "round",
-  d: "M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"
-}, null, -1), Mr = [
-  Sr
-], Er = {
-  key: 1,
-  xmlns: "http://www.w3.org/2000/svg",
-  class: "h-5 w-5 text-neutral-500",
-  fill: "none",
-  viewBox: "0 0 24 24",
-  stroke: "currentColor",
-  "stroke-width": "1"
-}, Dr = /* @__PURE__ */ t("path", {
-  "stroke-linecap": "round",
-  "stroke-linejoin": "round",
-  d: "M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"
-}, null, -1), jr = [
-  Dr
-], Ar = { class: "ml-1.5" }, Lr = {
-  name: "VFModalRename"
-}, Tr = /* @__PURE__ */ Object.assign(Lr, {
-  setup(p) {
-    const e = F("ServiceContainer");
-    e.storage;
-    const { t: s } = e.i18n, r = k(e.modal.data.items[0]), o = k(e.modal.data.items[0].basename), i = k(""), u = () => {
-      o.value != "" && e.emitter.emit("vf-fetch", {
-        params: {
-          q: "rename",
-          m: "post",
-          adapter: e.adapter,
-          path: e.data.dirname
-        },
-        body: {
-          item: r.value.path,
-          name: o.value
-        },
-        onSuccess: () => {
-          e.emitter.emit("vf-toast-push", { label: s("%s is renamed.", o.value) });
-        },
-        onError: (d) => {
-          i.value = s(d.message);
-        }
-      });
-    };
-    return (d, l) => (n(), T(W, null, {
-      buttons: A(() => [
-        t("button", {
-          type: "button",
-          onClick: u,
-          class: "vf-btn vf-btn-primary"
-        }, v(a(s)("Rename")), 1),
-        t("button", {
-          type: "button",
-          onClick: l[2] || (l[2] = (c) => a(e).emitter.emit("vf-modal-close")),
-          class: "vf-btn vf-btn-secondary"
-        }, v(a(s)("Cancel")), 1)
-      ]),
-      default: A(() => [
-        t("div", kr, [
-          br,
-          t("div", yr, [
-            t("h3", xr, v(a(s)("Rename")), 1),
-            t("div", wr, [
-              t("p", $r, [
-                r.value.type === "dir" ? (n(), m("svg", Cr, Mr)) : (n(), m("svg", Er, jr)),
-                t("span", Ar, v(r.value.basename), 1)
-              ]),
-              I(t("input", {
-                "onUpdate:modelValue": l[0] || (l[0] = (c) => o.value = c),
-                onKeyup: Q(u, ["enter"]),
-                class: "px-2 py-1 border rounded dark:bg-gray-700/25 dark:focus:ring-gray-600 dark:focus:border-gray-600 dark:text-gray-100 w-full",
-                placeholder: "Name",
-                type: "text"
-              }, null, 544), [
-                [Z, o.value]
-              ]),
-              i.value.length ? (n(), T(G, {
-                key: 0,
-                onHidden: l[1] || (l[1] = (c) => i.value = ""),
-                error: ""
-              }, {
-                default: A(() => [
-                  V(v(i.value), 1)
-                ]),
-                _: 1
-              })) : M("", !0)
-            ])
-          ])
-        ])
-      ]),
-      _: 1
-    }));
-  }
-}), Fr = { class: "sm:flex sm:items-start" }, Or = /* @__PURE__ */ t("div", { class: "mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-50 dark:bg-gray-500 sm:mx-0 sm:h-10 sm:w-10" }, [
-  /* @__PURE__ */ t("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    class: "h-6 w-6 stroke-blue-600 dark:stroke-blue-100",
-    fill: "none",
-    viewBox: "0 0 24 24",
-    stroke: "none",
-    "stroke-width": "1.5"
-  }, [
-    /* @__PURE__ */ t("path", {
-      "stroke-linecap": "round",
-      "stroke-linejoin": "round",
-      d: "M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"
-    })
-  ])
-], -1), Vr = { class: "mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full" }, Nr = {
-  class: "text-lg leading-6 font-medium text-gray-900 dark:text-gray-400",
-  id: "modal-title"
-}, Br = { class: "mt-2" }, zr = {
-  key: 0,
-  class: "pointer-events-none"
-}, Ur = {
-  key: 1,
-  class: "pointer-events-none"
-}, Hr = ["disabled"], Rr = ["disabled"], Ir = { class: "text-gray-500 text-sm mb-1 pr-1 max-h-[200px] overflow-y-auto vf-scrollbar" }, qr = { class: "rounded flex flex-shrink-0 w-6 h-6 border bg-gray-50 text-xs cursor-default dark:border-gray-700 dark:bg-gray-800 dark:text-gray-50" }, Pr = ["textContent"], Wr = { class: "ml-1 w-full h-fit" }, Gr = { class: "text-left hidden md:block" }, Yr = { class: "text-left md:hidden" }, Kr = {
-  key: 0,
-  class: "ml-auto"
-}, Jr = ["title", "disabled", "onClick"], Xr = /* @__PURE__ */ t("svg", {
-  xmlns: "http://www.w3.org/2000/svg",
-  fill: "none",
-  viewBox: "0 0 24 24",
-  "stroke-width": "1.5",
-  stroke: "currentColor",
-  class: "w-5 h-5"
-}, [
-  /* @__PURE__ */ t("path", {
-    "stroke-linecap": "round",
-    "stroke-linejoin": "round",
-    d: "M6 18L18 6M6 6l12 12"
-  })
-], -1), Qr = [
-  Xr
-], Zr = {
-  key: 0,
-  class: "py-2"
-}, en = ["disabled"], tn = {
-  name: "VFModalUpload"
-}, sn = /* @__PURE__ */ Object.assign(tn, {
-  setup(p) {
-    const e = F("ServiceContainer"), { t: s } = e.i18n, r = s("uppy"), o = {
-      PENDING: 0,
-      CANCELED: 1,
-      UPLOADING: 2,
-      ERROR: 3,
-      DONE: 10
-    }, i = k({ QUEUE_ENTRY_STATUS: o }), u = k(null), d = k(null), l = k(null), c = k(null), g = k(null), _ = k(null), y = k([]), x = k(""), E = k(!1), C = k(!1);
-    let f;
-    function h(j) {
-      return y.value.findIndex((S) => S.id === j);
-    }
-    function N(j, S = null) {
-      S = S ?? (j.webkitRelativePath || j.name), f.addFile({
-        name: S,
-        type: j.type,
-        data: j,
-        source: "Local"
-      });
-    }
-    function R(j) {
-      switch (j.status) {
-        case o.DONE:
-          return "text-green-600";
-        case o.ERROR:
-          return "text-red-600";
-        case o.CANCELED:
-          return "text-red-600";
-        case o.PENDING:
-        default:
-          return "";
-      }
-    }
-    const K = (j) => {
-      switch (j.status) {
-        case o.DONE:
-          return "✓";
-        case o.ERROR:
-        case o.CANCELED:
-          return "!";
-        case o.PENDING:
-        default:
-          return "...";
-      }
-    };
-    function te() {
-      c.value.click();
-    }
-    function se() {
-      if (!E.value) {
-        if (!y.value.filter((j) => j.status !== o.DONE).length) {
-          x.value = s("Please select file to upload first.");
-          return;
-        }
-        x.value = "", f.retryAll(), f.upload();
-      }
-    }
-    function ae() {
-      f.cancelAll({ reason: "user" }), y.value.forEach((j) => {
-        j.status !== o.DONE && (j.status = o.CANCELED, j.statusName = s("Canceled"));
-      }), E.value = !1;
-    }
-    function oe(j) {
-      E.value || (f.removeFile(j.id, "removed-by-user"), y.value.splice(h(j.id), 1));
-    }
-    function w(j) {
-      if (!E.value) {
-        if (f.cancelAll({ reason: "user" }), j) {
-          const S = [];
-          y.value.forEach((b) => {
-            b.status !== o.DONE && S.push(b);
-          }), y.value = [], S.forEach((b) => {
-            N(b.originalFile, b.name);
-          });
-          return;
-        }
-        y.value.splice(0);
-      }
-    }
-    function D() {
-      e.emitter.emit("vf-modal-close");
-    }
-    function $() {
-      return e.requester.transformRequestParams({
-        url: "",
-        method: "post",
-        params: { q: "upload", adapter: e.data.adapter, path: e.data.dirname }
-      });
-    }
-    return P(async () => {
-      f = new ze({
-        debug: e.debug,
-        restrictions: {
-          maxFileSize: Ye(e.maxFileSize)
-          //maxNumberOfFiles
-          //allowedFileTypes
-        },
-        locale: r,
-        onBeforeFileAdded(b, L) {
-          if (L[b.id] != null) {
-            const X = h(b.id);
-            y.value[X].status === o.PENDING && (x.value = f.i18n("noDuplicates", { fileName: b.name })), y.value = y.value.filter((ue) => ue.id !== b.id);
-          }
-          return y.value.push({
-            id: b.id,
-            name: b.name,
-            size: e.filesize(b.size),
-            status: o.PENDING,
-            statusName: s("Pending upload"),
-            percent: null,
-            originalFile: b.data
-          }), !0;
-        }
-      }), f.use(Ue, {
-        endpoint: "WILL_BE_REPLACED_BEFORE_UPLOAD",
-        limit: 5,
-        timeout: 0,
-        getResponseError(b, L) {
-          let O;
-          try {
-            O = JSON.parse(b).message;
-          } catch {
-            O = s("Cannot parse server response.");
-          }
-          return new Error(O);
-        }
-      }), f.on("restriction-failed", (b, L) => {
-        const O = y.value[h(b.id)];
-        oe(O), x.value = L.message;
-      }), f.on("upload", () => {
-        const b = $();
-        f.setMeta({ ...b.body });
-        const L = f.getPlugin("XHRUpload");
-        L.opts.method = b.method, L.opts.endpoint = b.url + "?" + new URLSearchParams(b.params), L.opts.headers = b.headers, E.value = !0, y.value.forEach((O) => {
-          O.status !== o.DONE && (O.percent = null, O.status = o.UPLOADING, O.statusName = s("Pending upload"));
-        });
-      }), f.on("upload-progress", (b, L) => {
-        const O = Math.floor(L.bytesUploaded / L.bytesTotal * 100);
-        y.value[h(b.id)].percent = `${O}%`;
-      }), f.on("upload-success", (b) => {
-        const L = y.value[h(b.id)];
-        L.status = o.DONE, L.statusName = s("Done");
-      }), f.on("upload-error", (b, L) => {
-        const O = y.value[h(b.id)];
-        O.percent = null, O.status = o.ERROR, L.isNetworkError ? O.statusName = s("Network Error, Unable establish connection to the server or interrupted.") : O.statusName = L ? L.message : s("Unknown Error");
-      }), f.on("error", (b) => {
-        x.value = b.message, E.value = !1, e.emitter.emit("vf-fetch", {
-          params: { q: "index", adapter: e.data.adapter, path: e.data.dirname },
-          noCloseModal: !0
-        });
-      }), f.on("complete", () => {
-        E.value = !1, e.emitter.emit("vf-fetch", {
-          params: { q: "index", adapter: e.data.adapter, path: e.data.dirname },
-          noCloseModal: !0
-        });
-      }), c.value.addEventListener("click", () => {
-        d.value.click();
-      }), g.value.addEventListener("click", () => {
-        l.value.click();
-      }), _.value.addEventListener("dragover", (b) => {
-        b.preventDefault(), C.value = !0;
-      }), _.value.addEventListener("dragleave", (b) => {
-        b.preventDefault(), C.value = !1;
-      });
-      function j(b, L) {
-        L.isFile && L.file((O) => b(L, O)), L.isDirectory && L.createReader().readEntries((O) => {
-          O.forEach((X) => {
-            j(b, X);
-          });
-        });
-      }
-      _.value.addEventListener("drop", (b) => {
-        b.preventDefault(), C.value = !1;
-        const L = /^[/\\](.+)/;
-        [...b.dataTransfer.items].forEach((O) => {
-          O.kind === "file" && j((X, ue) => {
-            const $e = L.exec(X.fullPath);
-            N(ue, $e[1]);
-          }, O.webkitGetAsEntry());
-        });
-      });
-      const S = ({ target: b }) => {
-        const L = b.files;
-        for (const O of L)
-          N(O);
-        b.value = "";
-      };
-      d.value.addEventListener("change", S), l.value.addEventListener("change", S);
-    }), ke(() => {
-      f == null || f.close({ reason: "unmount" });
-    }), (j, S) => (n(), T(W, null, {
-      buttons: A(() => [
-        t("button", {
-          type: "button",
-          class: z(["vf-btn vf-btn-primary", E.value ? "bg-blue-200 hover:bg-blue-200 dark:bg-gray-700/50 dark:hover:bg-gray-700/50 dark:text-gray-500" : "bg-blue-600 hover:bg-blue-700 dark:bg-gray-700 dark:hover:bg-gray-500"]),
-          disabled: E.value,
-          onClick: Y(se, ["prevent"])
-        }, v(a(s)("Upload")), 11, en),
-        E.value ? (n(), m("button", {
-          key: 0,
-          type: "button",
-          class: "vf-btn vf-btn-secondary",
-          onClick: Y(ae, ["prevent"])
-        }, v(a(s)("Cancel")), 1)) : (n(), m("button", {
-          key: 1,
-          type: "button",
-          class: "vf-btn vf-btn-secondary",
-          onClick: Y(D, ["prevent"])
-        }, v(a(s)("Close")), 1))
-      ]),
-      default: A(() => [
-        t("div", Fr, [
-          Or,
-          t("div", Vr, [
-            t("h3", Nr, v(a(s)("Upload Files")), 1),
-            t("div", Br, [
-              t("div", {
-                ref_key: "dropArea",
-                ref: _,
-                class: "flex items-center justify-center text-lg mb-4 text-gray-500 border-2 border-gray-300 rounded border-dashed select-none cursor-pointer dark:border-gray-600 h-[120px]",
-                onClick: te
-              }, [
-                C.value ? (n(), m("div", zr, v(a(s)("Release to drop these files.")), 1)) : (n(), m("div", Ur, v(a(s)("Drag and drop the files/folders to here or click here.")), 1))
-              ], 512),
-              t("div", {
-                ref_key: "container",
-                ref: u,
-                class: "text-gray-500 mb-1"
-              }, [
-                t("button", {
-                  ref_key: "pickFiles",
-                  ref: c,
-                  type: "button",
-                  class: "vf-btn vf-btn-secondary"
-                }, v(a(s)("Select Files")), 513),
-                t("button", {
-                  ref_key: "pickFolders",
-                  ref: g,
-                  type: "button",
-                  class: "vf-btn vf-btn-secondary"
-                }, v(a(s)("Select Folders")), 513),
-                t("button", {
-                  type: "button",
-                  class: "vf-btn vf-btn-secondary",
-                  disabled: E.value,
-                  onClick: S[0] || (S[0] = (b) => w(!1))
-                }, v(a(s)("Clear all")), 9, Hr),
-                t("button", {
-                  type: "button",
-                  class: "vf-btn vf-btn-secondary",
-                  disabled: E.value,
-                  onClick: S[1] || (S[1] = (b) => w(!0))
-                }, v(a(s)("Clear only successful")), 9, Rr)
-              ], 512),
-              t("div", Ir, [
-                (n(!0), m(U, null, q(y.value, (b) => (n(), m("div", {
-                  class: "flex hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-gray-300",
-                  key: b.id
-                }, [
-                  t("span", qr, [
-                    t("span", {
-                      class: z(["text-base m-auto", R(b)]),
-                      textContent: v(K(b))
-                    }, null, 10, Pr)
-                  ]),
-                  t("div", Wr, [
-                    t("div", Gr, v(a(he)(b.name, 40)) + " (" + v(b.size) + ")", 1),
-                    t("div", Yr, v(a(he)(b.name, 16)) + " (" + v(b.size) + ")", 1),
-                    t("div", {
-                      class: z(["flex break-all text-left", R(b)])
-                    }, [
-                      V(v(b.statusName) + " ", 1),
-                      b.status === i.value.QUEUE_ENTRY_STATUS.UPLOADING ? (n(), m("b", Kr, v(b.percent), 1)) : M("", !0)
-                    ], 2)
-                  ]),
-                  t("button", {
-                    type: "button",
-                    class: z(["rounded w-5 h-5 border-1 text-base leading-none font-medium focus:outline-none dark:border-gray-200 dark:text-gray-400 dark:hover:text-gray-200 dark:bg-gray-600 ml-auto sm:text-xs hover:text-red-600", E.value ? "disabled:bg-gray-100 text-white text-opacity-50" : "bg-gray-100"]),
-                    title: a(s)("Delete"),
-                    disabled: E.value,
-                    onClick: (L) => oe(b)
-                  }, Qr, 10, Jr)
-                ]))), 128)),
-                y.value.length ? M("", !0) : (n(), m("div", Zr, v(a(s)("No files selected!")), 1))
-              ]),
-              x.value.length ? (n(), T(G, {
-                key: 0,
-                onHidden: S[2] || (S[2] = (b) => x.value = ""),
-                error: ""
-              }, {
-                default: A(() => [
-                  V(v(x.value), 1)
-                ]),
-                _: 1
-              })) : M("", !0)
-            ])
-          ])
-        ]),
-        t("input", {
-          ref_key: "internalFileInput",
-          ref: d,
-          type: "file",
-          multiple: "",
-          class: "hidden"
-        }, null, 512),
-        t("input", {
-          ref_key: "internalFolderInput",
-          ref: l,
-          type: "file",
-          multiple: "",
-          webkitdirectory: "",
-          class: "hidden"
-        }, null, 512)
-      ]),
-      _: 1
-    }));
+          height: "100%"
+        }, [
+          s("iframe", {
+            class: "border-0",
+            src: o(),
+            width: "100%",
+            height: "100%"
+          }, el, 8, Xn)
+        ], 8, Qn)
+      ])
+    ], 64));
   }
-}), an = { class: "sm:flex sm:items-start" }, on = /* @__PURE__ */ t("div", { class: "mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-50 dark:bg-gray-500 sm:mx-0 sm:h-10 sm:w-10" }, [
-  /* @__PURE__ */ t("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    class: "h-6 w-6 stroke-blue-600 dark:stroke-blue-100",
-    fill: "none",
-    viewBox: "0 0 24 24",
-    stroke: "none",
-    "stroke-width": "1.5"
-  }, [
-    /* @__PURE__ */ t("path", {
-      "stroke-linecap": "round",
-      "stroke-linejoin": "round",
-      d: "M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z"
-    })
-  ])
-], -1), rn = { class: "mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full" }, nn = {
-  class: "text-lg leading-6 font-medium text-gray-900 dark:text-gray-400",
-  id: "modal-title"
-}, ln = { class: "mt-2" }, dn = {
-  class: "text-gray-500 text-sm mb-1 overflow-auto vf-scrollbar",
-  style: { "max-height": "200px" }
-}, cn = { class: "flex text-sm text-gray-800 dark:text-gray-400" }, un = {
+}, sl = { class: "sm:flex sm:items-start" }, al = { class: "mt-3 text-center sm:mt-0 sm:text-left w-full" }, ol = { key: 0 }, rl = { class: "text-gray-700 dark:text-gray-200 text-sm" }, nl = {
   key: 0,
+  class: "flex leading-5"
+}, ll = /* @__PURE__ */ s("svg", {
+  class: "animate-spin -ml-1 mr-3 h-5 w-5 text-white",
   xmlns: "http://www.w3.org/2000/svg",
-  class: "h-5 w-5 text-neutral-500 fill-sky-500 stroke-sky-500 dark:fill-slate-500 dark:stroke-slate-500",
-  fill: "none",
-  viewBox: "0 0 24 24",
-  stroke: "currentColor",
-  "stroke-width": "1"
-}, mn = /* @__PURE__ */ t("path", {
-  "stroke-linecap": "round",
-  "stroke-linejoin": "round",
-  d: "M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"
-}, null, -1), vn = [
-  mn
-], pn = {
-  key: 1,
-  xmlns: "http://www.w3.org/2000/svg",
-  class: "h-5 w-5 text-neutral-500",
   fill: "none",
-  viewBox: "0 0 24 24",
-  stroke: "currentColor",
-  "stroke-width": "1"
-}, hn = /* @__PURE__ */ t("path", {
-  "stroke-linecap": "round",
-  "stroke-linejoin": "round",
-  d: "M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"
-}, null, -1), fn = [
-  hn
-], gn = { class: "ml-1.5" }, _n = ["placeholder"], kn = {
-  name: "VFModalArchive"
-}, bn = /* @__PURE__ */ Object.assign(kn, {
-  setup(p) {
-    const e = F("ServiceContainer");
-    e.storage;
-    const { t: s } = e.i18n, r = k(""), o = k(""), i = k(e.modal.data.items), u = () => {
-      i.value.length && e.emitter.emit("vf-fetch", {
-        params: {
-          q: "archive",
-          m: "post",
-          adapter: e.adapter,
-          path: e.data.dirname
-        },
-        body: {
-          items: i.value.map(({ path: d, type: l }) => ({ path: d, type: l })),
-          name: r.value
-        },
-        onSuccess: () => {
-          e.emitter.emit("vf-toast-push", { label: s("The file(s) archived.") });
-        },
-        onError: (d) => {
-          o.value = s(d.message);
-        }
-      });
-    };
-    return (d, l) => (n(), T(W, null, {
-      buttons: A(() => [
-        t("button", {
-          type: "button",
-          onClick: u,
-          class: "vf-btn vf-btn-primary"
-        }, v(a(s)("Archive")), 1),
-        t("button", {
+  viewBox: "0 0 24 24"
+}, [
+  /* @__PURE__ */ s("circle", {
+    class: "opacity-25 stroke-blue-900 dark:stroke-blue-100",
+    cx: "12",
+    cy: "12",
+    r: "10",
+    stroke: "currentColor",
+    "stroke-width": "4"
+  }),
+  /* @__PURE__ */ s("path", {
+    class: "opacity-75",
+    fill: "currentColor",
+    d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+  })
+], -1), il = { class: "py-2 flex font-normal break-all dark:text-gray-200 rounded text-xs" }, dl = { class: "font-bold" }, cl = { class: "font-bold pl-2" }, ul = {
+  key: 0,
+  class: "text-xs text-gray-600 dark:text-gray-400"
+}, ml = ["download", "href"], He = {
+  __name: "ModalPreview",
+  setup(l) {
+    const e = U("ServiceContainer"), { t: a } = e.i18n, r = x(!1), o = (i) => (e.modal.data.item.mime_type ?? "").startsWith(i), v = e.features.includes(O.PREVIEW);
+    return v || (r.value = !0), (i, m) => (n(), A(K, null, {
+      buttons: M(() => [
+        s("button", {
           type: "button",
-          onClick: l[2] || (l[2] = (c) => a(e).emitter.emit("vf-modal-close")),
+          onClick: m[6] || (m[6] = (d) => t(e).modal.close()),
           class: "vf-btn vf-btn-secondary"
-        }, v(a(s)("Cancel")), 1)
+        }, c(t(a)("Close")), 1),
+        t(e).features.includes(t(O).DOWNLOAD) ? (n(), u("a", {
+          key: 0,
+          target: "_blank",
+          class: "vf-btn vf-btn-primary",
+          download: t(e).requester.getDownloadUrl(t(e).modal.data.adapter, t(e).modal.data.item),
+          href: t(e).requester.getDownloadUrl(t(e).modal.data.adapter, t(e).modal.data.item)
+        }, c(t(a)("Download")), 9, ml)) : C("", !0)
       ]),
-      default: A(() => [
-        t("div", an, [
-          on,
-          t("div", rn, [
-            t("h3", nn, v(a(s)("Archive the files")), 1),
-            t("div", ln, [
-              t("div", dn, [
-                (n(!0), m(U, null, q(i.value, (c) => (n(), m("p", cn, [
-                  c.type === "dir" ? (n(), m("svg", un, vn)) : (n(), m("svg", pn, fn)),
-                  t("span", gn, v(c.basename), 1)
-                ]))), 256))
-              ]),
-              I(t("input", {
-                "onUpdate:modelValue": l[0] || (l[0] = (c) => r.value = c),
-                onKeyup: Q(u, ["enter"]),
-                class: "my-1 px-2 py-1 border rounded dark:bg-gray-700/25 dark:focus:ring-gray-600 dark:focus:border-gray-600 dark:text-gray-100 w-full",
-                placeholder: a(s)("Archive name. (.zip file will be created)"),
-                type: "text"
-              }, null, 40, _n), [
-                [Z, r.value]
-              ]),
-              o.value.length ? (n(), T(G, {
+      default: M(() => [
+        s("div", sl, [
+          s("div", al, [
+            t(v) ? (n(), u("div", ol, [
+              o("text") ? (n(), A(Ln, {
                 key: 0,
-                onHidden: l[1] || (l[1] = (c) => o.value = ""),
-                error: ""
-              }, {
-                default: A(() => [
-                  V(v(o.value), 1)
-                ]),
-                _: 1
-              })) : M("", !0)
+                onSuccess: m[0] || (m[0] = (d) => r.value = !0)
+              })) : o("image") ? (n(), A(In, {
+                key: 1,
+                onSuccess: m[1] || (m[1] = (d) => r.value = !0)
+              })) : o("video") ? (n(), A(Pn, {
+                key: 2,
+                onSuccess: m[2] || (m[2] = (d) => r.value = !0)
+              })) : o("audio") ? (n(), A(Kn, {
+                key: 3,
+                onSuccess: m[3] || (m[3] = (d) => r.value = !0)
+              })) : o("application/pdf") ? (n(), A(tl, {
+                key: 4,
+                onSuccess: m[4] || (m[4] = (d) => r.value = !0)
+              })) : (n(), A(On, {
+                key: 5,
+                onSuccess: m[5] || (m[5] = (d) => r.value = !0)
+              }))
+            ])) : C("", !0),
+            s("div", rl, [
+              r.value === !1 ? (n(), u("div", nl, [
+                ll,
+                s("span", null, c(t(a)("Loading")), 1)
+              ])) : C("", !0)
             ])
           ])
-        ])
+        ]),
+        s("div", il, [
+          s("div", null, [
+            s("span", dl, c(t(a)("File Size")) + ": ", 1),
+            V(c(t(e).filesize(t(e).modal.data.item.file_size)), 1)
+          ]),
+          s("div", null, [
+            s("span", cl, c(t(a)("Last Modified")) + ": ", 1),
+            V(" " + c(t(Ie)(t(e).modal.data.item.last_modified)), 1)
+          ])
+        ]),
+        t(e).features.includes(t(O).DOWNLOAD) ? (n(), u("div", ul, [
+          s("span", null, c(t(a)(`Download doesn't work? You can try right-click "Download" button, select "Save link as...".`)), 1)
+        ])) : C("", !0)
       ]),
       _: 1
     }));
   }
-}), yn = { class: "sm:flex sm:items-start" }, xn = /* @__PURE__ */ t("div", { class: "mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-50 dark:bg-gray-500 sm:mx-0 sm:h-10 sm:w-10" }, [
-  /* @__PURE__ */ t("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    class: "h-6 w-6 stroke-blue-600 dark:stroke-blue-100",
-    fill: "none",
-    viewBox: "0 0 24 24",
-    stroke: "none",
-    "stroke-width": "1.5"
-  }, [
-    /* @__PURE__ */ t("path", {
-      "stroke-linecap": "round",
-      "stroke-linejoin": "round",
-      d: "M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5m6 4.125l2.25 2.25m0 0l2.25 2.25M12 13.875l2.25-2.25M12 13.875l-2.25 2.25M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z"
-    })
-  ])
-], -1), wn = { class: "mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full" }, $n = {
-  class: "text-lg leading-6 font-medium text-gray-900 dark:text-gray-400",
-  id: "modal-title"
-}, Cn = { class: "mt-2" }, Sn = { class: "flex text-sm text-gray-800 dark:text-gray-400" }, Mn = {
+}, fl = ["data-type", "data-item", "data-index"], he = {
+  __name: "Item",
+  props: {
+    item: { type: Object },
+    index: { type: Number },
+    dragImage: { type: Object }
+  },
+  setup(l) {
+    const e = U("ServiceContainer"), a = e.dragSelect, r = l, o = (p) => {
+      p.type === "dir" ? (e.emitter.emit("vf-search-exit"), e.emitter.emit("vf-fetch", { params: { q: "index", adapter: e.fs.adapter, path: p.path } })) : e.modal.open(He, { adapter: e.fs.adapter, item: p });
+    }, v = {
+      mounted(p, h, _, w) {
+        _.props.draggable && (p.addEventListener("dragstart", (y) => i(y, h.value)), p.addEventListener("dragover", (y) => d(y, h.value)), p.addEventListener("drop", (y) => m(y, h.value)));
+      },
+      beforeUnmount(p, h, _, w) {
+        _.props.draggable && (p.removeEventListener("dragstart", i), p.removeEventListener("dragover", d), p.removeEventListener("drop", m));
+      }
+    }, i = (p, h) => {
+      if (p.altKey || p.ctrlKey || p.metaKey)
+        return p.preventDefault(), !1;
+      a.isDraggingRef.value = !0, p.dataTransfer.setDragImage(r.dragImage.$el, 0, 15), p.dataTransfer.effectAllowed = "all", p.dataTransfer.dropEffect = "copy", p.dataTransfer.setData("items", JSON.stringify(a.getSelected()));
+    }, m = (p, h) => {
+      p.preventDefault(), a.isDraggingRef.value = !1;
+      let _ = JSON.parse(p.dataTransfer.getData("items"));
+      if (_.find((w) => w.storage !== e.fs.adapter)) {
+        alert("Moving items between different storages is not supported yet.");
+        return;
+      }
+      e.modal.open(be, { items: { from: _, to: h } });
+    }, d = (p, h) => {
+      p.preventDefault(), !h || h.type !== "dir" || a.getSelection().find((_) => _ === p.currentTarget) ? (p.dataTransfer.dropEffect = "none", p.dataTransfer.effectAllowed = "none") : p.dataTransfer.dropEffect = "copy";
+    };
+    let f = null;
+    const g = () => {
+      f && clearTimeout(f);
+    }, b = (p) => {
+      f = setTimeout(() => {
+        const h = new MouseEvent("contextmenu", {
+          bubbles: !0,
+          cancelable: !1,
+          view: window,
+          button: 2,
+          buttons: 0,
+          clientX: p.target.getBoundingClientRect().x,
+          clientY: p.target.getBoundingClientRect().y
+        });
+        p.target.dispatchEvent(h);
+      }, 500);
+    };
+    return (p, h) => j((n(), u("div", {
+      style: xe({ opacity: t(a).isDraggingRef.value && t(a).getSelection().find((_) => p.$el === _) ? "0.5 !important" : "" }),
+      class: q(["vf-item-" + t(a).explorerId]),
+      "data-type": l.item.type,
+      key: l.item.path,
+      "data-item": JSON.stringify(l.item),
+      "data-index": l.index,
+      onDblclick: h[0] || (h[0] = (_) => o(l.item)),
+      onTouchstart: h[1] || (h[1] = (_) => b(_)),
+      onTouchend: h[2] || (h[2] = (_) => g()),
+      onContextmenu: h[3] || (h[3] = ee((_) => t(e).emitter.emit("vf-contextmenu-show", { event: _, items: t(a).getSelected(), target: l.item }), ["prevent"]))
+    }, [
+      ie(p.$slots, "default")
+    ], 46, fl)), [
+      [v, l.item]
+    ]);
+  }
+}, pl = { class: "relative flex-auto flex flex-col overflow-hidden" }, vl = {
   key: 0,
-  xmlns: "http://www.w3.org/2000/svg",
-  class: "h-5 w-5 text-neutral-500 fill-sky-500 stroke-sky-500 dark:fill-slate-500 dark:stroke-slate-500",
-  fill: "none",
-  viewBox: "0 0 24 24",
-  stroke: "currentColor",
-  "stroke-width": "1"
-}, En = /* @__PURE__ */ t("path", {
-  "stroke-linecap": "round",
-  "stroke-linejoin": "round",
-  d: "M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"
-}, null, -1), Dn = [
-  En
-], jn = {
-  key: 1,
-  xmlns: "http://www.w3.org/2000/svg",
-  class: "h-5 w-5 text-neutral-500",
-  fill: "none",
-  viewBox: "0 0 24 24",
-  stroke: "currentColor",
-  "stroke-width": "1"
-}, An = /* @__PURE__ */ t("path", {
-  "stroke-linecap": "round",
-  "stroke-linejoin": "round",
-  d: "M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"
-}, null, -1), Ln = [
-  An
-], Tn = { class: "ml-1.5" }, Fn = { class: "my-1 text-sm text-gray-500" }, On = {
-  name: "VFModalUnarchive"
-}, Vn = /* @__PURE__ */ Object.assign(On, {
-  setup(p) {
-    const e = F("ServiceContainer");
-    e.storage;
-    const { t: s } = e.i18n;
-    k("");
-    const r = k(e.modal.data.items[0]), o = k(""), i = k([]), u = () => {
-      e.emitter.emit("vf-fetch", {
+  class: "grid grid-cols-12 px-1 bg-neutral-50 dark:bg-gray-800 border-b border-neutral-300 dark:border-gray-700 text-xs select-none divide-x"
+}, hl = { class: "relative" }, gl = { class: "grid grid-cols-12 items-center" }, _l = { class: "flex col-span-7 items-center" }, bl = { class: "overflow-ellipsis overflow-hidden whitespace-nowrap" }, xl = { class: "col-span-5 overflow-ellipsis overflow-hidden whitespace-nowrap" }, wl = { class: "grid grid-cols-12 items-center" }, kl = { class: "flex col-span-7 items-center" }, yl = { class: "overflow-ellipsis overflow-hidden whitespace-nowrap" }, $l = { class: "col-span-2 text-center" }, Sl = { class: "col-span-3 overflow-ellipsis overflow-hidden whitespace-nowrap px-1 md:px-3" }, Cl = { class: "relative" }, El = ["data-src", "alt"], Dl = {
+  key: 2,
+  class: "absolute hidden md:block top-1/2 w-full text-center text-neutral-500"
+}, Ml = { class: "break-all" }, Al = {
+  __name: "Explorer",
+  setup(l) {
+    const e = U("ServiceContainer"), { t: a } = e.i18n, r = (h) => h == null ? void 0 : h.substring(0, 3), o = x(null), v = x(""), i = e.dragSelect;
+    let m;
+    e.emitter.on("vf-fullscreen-toggle", () => {
+      i.area.value.style.height = null;
+    }), e.emitter.on("vf-search-query", ({ newQuery: h }) => {
+      v.value = h, h ? e.emitter.emit("vf-fetch", {
         params: {
-          q: "unarchive",
-          m: "post",
-          adapter: e.adapter,
-          path: e.data.dirname
-        },
-        body: {
-          item: r.value.path
-        },
-        onSuccess: () => {
-          e.emitter.emit("vf-toast-push", { label: s("The file unarchived.") });
+          q: "search",
+          adapter: e.fs.adapter,
+          path: e.fs.data.dirname,
+          filter: h
         },
-        onError: (d) => {
-          o.value = s(d.message);
+        onSuccess: (_) => {
+          _.files.length || e.emitter.emit("vf-toast-push", { label: a("No search result found.") });
         }
-      });
+      }) : e.emitter.emit("vf-fetch", { params: { q: "index", adapter: e.fs.adapter, path: e.fs.data.dirname } });
+    });
+    const d = x(!0), f = (h) => {
+      h.touches.length > 1 && (d.value ? (i.instance.stop(), e.emitter.emit("vf-toast-push", { label: a("Drag&Drop: off") })) : (i.instance.start(), e.emitter.emit("vf-toast-push", { label: a("Drag&Drop: on") }), i.refreshSelection()), d.value = !d.value);
+    }, g = de({ active: !1, column: "", order: "" }), b = (h = !0) => {
+      let _ = [...e.fs.data.files], w = g.column, y = g.order === "asc" ? 1 : -1;
+      if (!h)
+        return _;
+      const T = ($, S) => typeof $ == "string" && typeof S == "string" ? $.toLowerCase().localeCompare(S.toLowerCase()) : $ < S ? -1 : $ > S ? 1 : 0;
+      return g.active && (_ = _.slice().sort(($, S) => T($[w], S[w]) * y)), _;
+    }, p = (h) => {
+      g.active && g.column === h ? (g.active = g.order === "asc", g.column = h, g.order = "desc") : (g.active = !0, g.column = h, g.order = "asc");
     };
-    return (d, l) => (n(), T(W, null, {
-      buttons: A(() => [
-        t("button", {
-          type: "button",
-          onClick: u,
-          class: "vf-btn vf-btn-primary"
-        }, v(a(s)("Unarchive")), 1),
-        t("button", {
-          type: "button",
-          onClick: l[1] || (l[1] = (c) => a(e).emitter.emit("vf-modal-close")),
-          class: "vf-btn vf-btn-secondary"
-        }, v(a(s)("Cancel")), 1)
-      ]),
-      default: A(() => [
-        t("div", yn, [
-          xn,
-          t("div", wn, [
-            t("h3", $n, v(a(s)("Unarchive")), 1),
-            t("div", Cn, [
-              (n(!0), m(U, null, q(i.value, (c) => (n(), m("p", Sn, [
-                c.type === "dir" ? (n(), m("svg", Mn, Dn)) : (n(), m("svg", jn, Ln)),
-                t("span", Tn, v(c.basename), 1)
-              ]))), 256)),
-              t("p", Fn, v(a(s)("The archive will be unarchived at")) + " (" + v(a(e).data.dirname) + ")", 1),
-              o.value.length ? (n(), T(G, {
-                key: 0,
-                onHidden: l[0] || (l[0] = (c) => o.value = ""),
-                error: ""
-              }, {
-                default: A(() => [
-                  V(v(o.value), 1)
-                ]),
-                _: 1
-              })) : M("", !0)
-            ])
+    return W(() => {
+      m = new Xe(i.area.value);
+    }), Se(() => {
+      m.update();
+    }), Ce(() => {
+      m.destroy();
+    }), (h, _) => (n(), u("div", pl, [
+      t(e).view === "list" || v.value.length ? (n(), u("div", vl, [
+        s("div", {
+          onClick: _[0] || (_[0] = (w) => p("basename")),
+          class: "col-span-7 vf-sort-button"
+        }, [
+          V(c(t(a)("Name")) + " ", 1),
+          j(L(me, {
+            direction: g.order
+          }, null, 8, ["direction"]), [
+            [X, g.active && g.column === "basename"]
           ])
-        ])
-      ]),
-      _: 1
-    }));
-  }
-}), Nn = { class: "sm:flex sm:items-start" }, Bn = /* @__PURE__ */ t("div", { class: "mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-50 dark:bg-gray-500 sm:mx-0 sm:h-10 sm:w-10" }, [
-  /* @__PURE__ */ t("svg", {
-    class: "h-6 w-6 stroke-blue-600 dark:stroke-blue-100",
-    xmlns: "http://www.w3.org/2000/svg",
-    fill: "none",
-    viewBox: "0 0 24 24",
-    "stroke-width": "2",
-    stroke: "currentColor",
-    "aria-hidden": "true"
-  }, [
-    /* @__PURE__ */ t("path", {
-      "stroke-linecap": "round",
-      "stroke-linejoin": "round",
-      d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
-    })
-  ])
-], -1), zn = { class: "mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full" }, Un = {
-  class: "text-lg leading-6 font-medium text-gray-900 dark:text-gray-400",
-  id: "modal-title"
-}, Hn = { class: "text-sm text-gray-500 pb-1" }, Rn = { class: "max-h-[200px] overflow-y-auto vf-scrollbar text-left" }, In = { class: "flex text-sm text-gray-800 dark:text-gray-400" }, qn = {
-  key: 0,
-  xmlns: "http://www.w3.org/2000/svg",
-  class: "h-5 w-5 text-neutral-500 fill-sky-500 stroke-sky-500 dark:fill-slate-500 dark:stroke-slate-500",
-  fill: "none",
-  viewBox: "0 0 24 24",
-  stroke: "currentColor",
-  "stroke-width": "1"
-}, Pn = /* @__PURE__ */ t("path", {
-  "stroke-linecap": "round",
-  "stroke-linejoin": "round",
-  d: "M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"
-}, null, -1), Wn = [
-  Pn
-], Gn = {
-  key: 1,
-  xmlns: "http://www.w3.org/2000/svg",
-  class: "h-5 w-5 text-neutral-500",
-  fill: "none",
-  viewBox: "0 0 24 24",
-  stroke: "currentColor",
-  "stroke-width": "1"
-}, Yn = /* @__PURE__ */ t("path", {
-  "stroke-linecap": "round",
-  "stroke-linejoin": "round",
-  d: "M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"
-}, null, -1), Kn = [
-  Yn
-], Jn = { class: "ml-1.5" }, Xn = { class: "font-bold text-xs text-gray-700 dark:text-gray-500 mt-3 tracking-wider" }, Qn = { class: "flex text-sm text-gray-800 dark:text-gray-400 border dark:border-gray-700 p-1 rounded" }, Zn = /* @__PURE__ */ t("svg", {
-  xmlns: "http://www.w3.org/2000/svg",
-  class: "h-5 w-5 text-neutral-500 fill-sky-500 stroke-sky-500 dark:fill-slate-500 dark:stroke-slate-500",
-  fill: "none",
-  viewBox: "0 0 24 24",
-  stroke: "currentColor",
-  "stroke-width": "1"
-}, [
-  /* @__PURE__ */ t("path", {
-    "stroke-linecap": "round",
-    "stroke-linejoin": "round",
-    d: "M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"
-  })
-], -1), el = { class: "ml-1.5 overflow-auto" }, tl = { class: "m-1 mr-auto font-bold text-gray-500 text-sm dark:text-gray-200 self-center" }, sl = {
-  name: "VFModalMove"
-}, al = /* @__PURE__ */ Object.assign(sl, {
-  setup(p) {
-    const e = F("ServiceContainer"), { t: s } = e.i18n;
-    e.storage;
-    const r = k(e.modal.data.items.from), o = k(""), i = () => {
-      r.value.length && e.emitter.emit("vf-fetch", {
-        params: {
-          q: "move",
-          m: "post",
-          adapter: e.adapter,
-          path: e.data.dirname
-        },
-        body: {
-          items: r.value.map(({ path: u, type: d }) => ({ path: u, type: d })),
-          item: e.modal.data.items.to.path
-        },
-        onSuccess: () => {
-          e.emitter.emit("vf-toast-push", { label: s("Files moved.", e.modal.data.items.to.name) });
-        },
-        onError: (u) => {
-          o.value = s(u.message);
+        ]),
+        v.value.length ? C("", !0) : (n(), u("div", {
+          key: 0,
+          onClick: _[1] || (_[1] = (w) => p("file_size")),
+          class: "justify-center col-span-2 vf-sort-button"
+        }, [
+          V(c(t(a)("Size")) + " ", 1),
+          j(L(me, {
+            direction: g.order
+          }, null, 8, ["direction"]), [
+            [X, g.active && g.column === "file_size"]
+          ])
+        ])),
+        v.value.length ? C("", !0) : (n(), u("div", {
+          key: 1,
+          onClick: _[2] || (_[2] = (w) => p("last_modified")),
+          class: "justify-center col-span-3 vf-sort-button"
+        }, [
+          V(c(t(a)("Date")) + " ", 1),
+          j(L(me, {
+            direction: g.order
+          }, null, 8, ["direction"]), [
+            [X, g.active && g.column === "last_modified"]
+          ])
+        ])),
+        v.value.length ? (n(), u("div", {
+          key: 2,
+          onClick: _[3] || (_[3] = (w) => p("path")),
+          class: "justify-center col-span-5 vf-sort-button"
+        }, [
+          V(c(t(a)("Filepath")) + " ", 1),
+          j(L(me, {
+            direction: g.order
+          }, null, 8, ["direction"]), [
+            [X, g.active && g.column === "path"]
+          ])
+        ])) : C("", !0)
+      ])) : C("", !0),
+      s("div", hl, [
+        L(Sn, {
+          ref_key: "dragImage",
+          ref: o,
+          count: t(i).getCount()
+        }, null, 8, ["count"])
+      ]),
+      s("div", {
+        ref: t(i).area,
+        class: q([t(e).fullScreen ? "" : "resize-y", "h-full w-full text-xs vf-selector-area vf-scrollbar min-h-[150px] overflow-auto p-1 z-0"]),
+        onTouchstart: f,
+        onContextmenu: _[4] || (_[4] = ee((w) => t(e).emitter.emit("vf-contextmenu-show", { event: w, items: t(i).getSelected() }), ["self", "prevent"]))
+      }, [
+        v.value.length ? (n(!0), u(z, { key: 0 }, G(b(), (w, y) => (n(), A(he, {
+          item: w,
+          index: y,
+          dragImage: o.value,
+          class: "vf-item vf-item-list"
+        }, {
+          default: M(() => [
+            s("div", gl, [
+              s("div", _l, [
+                L(ve, {
+                  type: w.type,
+                  small: t(e).compactListView
+                }, null, 8, ["type", "small"]),
+                s("span", bl, c(w.basename), 1)
+              ]),
+              s("div", xl, c(w.path), 1)
+            ])
+          ]),
+          _: 2
+        }, 1032, ["item", "index", "dragImage"]))), 256)) : C("", !0),
+        t(e).view === "list" && !v.value.length ? (n(!0), u(z, { key: 1 }, G(b(), (w, y) => (n(), A(he, {
+          item: w,
+          index: y,
+          dragImage: o.value,
+          class: "vf-item vf-item-list",
+          draggable: "true"
+        }, {
+          default: M(() => [
+            s("div", wl, [
+              s("div", kl, [
+                L(ve, {
+                  type: w.type,
+                  small: t(e).compactListView
+                }, null, 8, ["type", "small"]),
+                s("span", yl, c(w.basename), 1)
+              ]),
+              s("div", $l, c(w.file_size ? t(e).filesize(w.file_size) : ""), 1),
+              s("div", Sl, c(t(Ie)(w.last_modified)), 1)
+            ])
+          ]),
+          _: 2
+        }, 1032, ["item", "index", "dragImage"]))), 256)) : C("", !0),
+        t(e).view === "grid" && !v.value.length ? (n(!0), u(z, { key: 2 }, G(b(!1), (w, y) => (n(), A(he, {
+          item: w,
+          index: y,
+          dragImage: o.value,
+          class: "vf-item vf-item-grid",
+          draggable: "true"
+        }, {
+          default: M(() => [
+            s("div", null, [
+              s("div", Cl, [
+                (w.mime_type ?? "").startsWith("image") && t(e).showThumbnails ? (n(), u("img", {
+                  src: "data:image/png;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==",
+                  class: "lazy h-10 md:h-12 m-auto",
+                  "data-src": t(e).requester.getPreviewUrl(t(e).fs.adapter, w),
+                  alt: w.basename,
+                  key: w.path
+                }, null, 8, El)) : (n(), A(ve, {
+                  key: 1,
+                  type: w.type
+                }, null, 8, ["type"])),
+                !((w.mime_type ?? "").startsWith("image") && t(e).showThumbnails) && w.type !== "dir" ? (n(), u("div", Dl, c(r(w.extension)), 1)) : C("", !0)
+              ]),
+              s("span", Ml, c(t(_e)(w.basename)), 1)
+            ])
+          ]),
+          _: 2
+        }, 1032, ["item", "index", "dragImage"]))), 256)) : C("", !0)
+      ], 34),
+      L(tn)
+    ]));
+  }
+}, Ll = ["href", "download"], Bl = ["onClick"], Vl = {
+  __name: "ContextMenu",
+  setup(l) {
+    const e = U("ServiceContainer"), { t: a } = e.i18n, r = x(null), o = x([]), v = x(""), i = de({
+      active: !1,
+      items: [],
+      positions: {
+        left: 0,
+        top: 0
+      }
+    }), m = te(() => i.items.filter((b) => b.key == null || e.features.includes(b.key)));
+    e.emitter.on("vf-context-selected", (b) => {
+      o.value = b;
+    });
+    const d = {
+      newfolder: {
+        key: O.NEW_FOLDER,
+        title: () => a("New Folder"),
+        action: () => e.modal.open(Ae)
+      },
+      delete: {
+        key: O.DELETE,
+        title: () => a("Delete"),
+        action: () => {
+          e.modal.open(Be, { items: o });
+        }
+      },
+      refresh: {
+        title: () => a("Refresh"),
+        action: () => {
+          e.emitter.emit("vf-fetch", { params: { q: "index", adapter: e.fs.adapter, path: e.fs.data.dirname } });
         }
+      },
+      preview: {
+        key: O.PREVIEW,
+        title: () => a("Preview"),
+        action: () => e.modal.open(He, { adapter: e.fs.adapter, item: o.value[0] })
+      },
+      open: {
+        title: () => a("Open"),
+        action: () => {
+          e.emitter.emit("vf-search-exit"), e.emitter.emit("vf-fetch", {
+            params: {
+              q: "index",
+              adapter: e.fs.adapter,
+              path: o.value[0].path
+            }
+          });
+        }
+      },
+      openDir: {
+        title: () => a("Open containing folder"),
+        action: () => {
+          e.emitter.emit("vf-search-exit"), e.emitter.emit("vf-fetch", {
+            params: {
+              q: "index",
+              adapter: e.fs.adapter,
+              path: o.value[0].dir
+            }
+          });
+        }
+      },
+      download: {
+        key: O.DOWNLOAD,
+        link: te(() => e.requester.getDownloadUrl(e.fs.adapter, o.value[0])),
+        title: () => a("Download"),
+        action: () => {
+        }
+      },
+      archive: {
+        key: O.ARCHIVE,
+        title: () => a("Archive"),
+        action: () => e.modal.open(Te, { items: o })
+      },
+      unarchive: {
+        key: O.UNARCHIVE,
+        title: () => a("Unarchive"),
+        action: () => e.modal.open(Ve, { items: o })
+      },
+      rename: {
+        key: O.RENAME,
+        title: () => a("Rename"),
+        action: () => e.modal.open(Le, { items: o })
+      }
+    }, f = (b) => {
+      e.emitter.emit("vf-contextmenu-hide"), b.action();
+    };
+    e.emitter.on("vf-search-query", ({ newQuery: b }) => {
+      v.value = b;
+    }), e.emitter.on("vf-contextmenu-show", ({ event: b, items: p, target: h = null }) => {
+      if (i.items = [], v.value)
+        if (h)
+          i.items.push(d.openDir), e.emitter.emit("vf-context-selected", [h]);
+        else
+          return;
+      else
+        !h && !v.value ? (i.items.push(d.refresh), i.items.push(d.newfolder), e.emitter.emit("vf-context-selected", [])) : p.length > 1 && p.some((_) => _.path === h.path) ? (i.items.push(d.refresh), i.items.push(d.archive), i.items.push(d.delete), e.emitter.emit("vf-context-selected", p)) : (h.type === "dir" ? i.items.push(d.open) : (i.items.push(d.preview), i.items.push(d.download)), i.items.push(d.rename), h.mime_type === "application/zip" ? i.items.push(d.unarchive) : i.items.push(d.archive), i.items.push(d.delete), e.emitter.emit("vf-context-selected", [h]));
+      g(b);
+    }), e.emitter.on("vf-contextmenu-hide", () => {
+      i.active = !1;
+    });
+    const g = (b) => {
+      const p = e.dragSelect.area.value, h = e.root.getBoundingClientRect(), _ = p.getBoundingClientRect();
+      let w = b.clientX - h.left, y = b.clientY - h.top;
+      i.active = !0, le(() => {
+        var Y;
+        const T = (Y = r.value) == null ? void 0 : Y.getBoundingClientRect();
+        let $ = (T == null ? void 0 : T.height) ?? 0, S = (T == null ? void 0 : T.width) ?? 0;
+        w = _.right - b.pageX + window.scrollX < S ? w - S : w, y = _.bottom - b.pageY + window.scrollY < $ ? y - $ : y, i.positions = {
+          left: w + "px",
+          top: y + "px"
+        };
       });
     };
-    return (u, d) => (n(), T(W, null, {
-      buttons: A(() => [
-        t("button", {
-          type: "button",
-          onClick: i,
-          class: "vf-btn vf-btn-primary"
-        }, v(a(s)("Yes, Move!")), 1),
-        t("button", {
-          type: "button",
-          onClick: d[1] || (d[1] = (l) => a(e).emitter.emit("vf-modal-close")),
-          class: "vf-btn vf-btn-secondary"
-        }, v(a(s)("Cancel")), 1),
-        t("div", tl, v(a(s)("%s item(s) selected.", r.value.length)), 1)
-      ]),
-      default: A(() => [
-        t("div", Nn, [
-          Bn,
-          t("div", zn, [
-            t("h3", Un, v(a(s)("Move files")), 1),
-            t("p", Hn, v(a(s)("Are you sure you want to move these files?")), 1),
-            t("div", Rn, [
-              (n(!0), m(U, null, q(r.value, (l) => (n(), m("div", In, [
-                t("div", null, [
-                  l.type === "dir" ? (n(), m("svg", qn, Wn)) : (n(), m("svg", Gn, Kn))
-                ]),
-                t("div", Jn, v(l.path), 1)
-              ]))), 256))
-            ]),
-            t("h4", Xn, v(a(s)("Target Directory")), 1),
-            t("p", Qn, [
-              Zn,
-              t("span", el, v(a(e).modal.data.items.to.path), 1)
-            ]),
-            o.value.length ? (n(), T(G, {
-              key: 0,
-              onHidden: d[0] || (d[0] = (l) => o.value = ""),
-              error: ""
-            }, {
-              default: A(() => [
-                V(v(o.value), 1)
-              ]),
-              _: 1
-            })) : M("", !0)
-          ])
-        ])
-      ]),
-      _: 1
-    }));
+    return (b, p) => j((n(), u("ul", {
+      ref_key: "contextmenu",
+      ref: r,
+      style: xe(i.positions),
+      class: "z-30 absolute text-xs bg-neutral-50 dark:bg-gray-800 text-gray-700 dark:text-gray-200 border border-neutral-300 dark:border-gray-600 shadow rounded-sm select-none"
+    }, [
+      (n(!0), u(z, null, G(m.value, (h) => (n(), u("li", {
+        class: "cursor-pointer hover:bg-neutral-200 dark:hover:bg-gray-700",
+        key: h.title
+      }, [
+        h.link ? (n(), u("a", {
+          key: 0,
+          class: "block pl-2 pr-3 py-2",
+          target: "_blank",
+          href: h.link,
+          download: h.link,
+          onClick: p[0] || (p[0] = (_) => t(e).emitter.emit("vf-contextmenu-hide"))
+        }, [
+          s("span", null, c(h.title()), 1)
+        ], 8, Ll)) : (n(), u("div", {
+          key: 1,
+          class: "pl-2 pr-3 py-1.5",
+          onClick: (_) => f(h)
+        }, [
+          s("span", null, c(h.title()), 1)
+        ], 8, Bl))
+      ]))), 128))
+    ], 4)), [
+      [X, i.active]
+    ]);
   }
-}), ol = (p, e) => {
-  const s = p.__vccOpts || p;
+}, Tl = (l, e) => {
+  const a = l.__vccOpts || l;
   for (const [r, o] of e)
-    s[r] = o;
-  return s;
-}, rl = {
+    a[r] = o;
+  return a;
+}, Nl = {
   props: {
     on: { type: String, required: !0 }
   },
-  setup(p, { emit: e, slots: s }) {
-    const r = F("ServiceContainer"), o = k(!1), { t: i } = r.i18n;
-    let u = null;
-    const d = () => {
-      clearTimeout(u), o.value = !0, u = setTimeout(() => {
+  setup(l, { emit: e, slots: a }) {
+    const r = U("ServiceContainer"), o = x(!1), { t: v } = r.i18n;
+    let i = null;
+    const m = () => {
+      clearTimeout(i), o.value = !0, i = setTimeout(() => {
         o.value = !1;
       }, 2e3);
     };
-    return P(() => {
-      r.emitter.on(p.on, d);
-    }), Te(() => {
-      clearTimeout(u);
+    return W(() => {
+      r.emitter.on(l.on, m);
+    }), $e(() => {
+      clearTimeout(i);
     }), {
       shown: o,
-      t: i
+      t: v
     };
   }
-}, nl = { key: 1 };
-function ll(p, e, s, r, o, i) {
-  return n(), m("div", {
-    class: z(["text-sm text-green-600 dark:text-green-600 transition-opacity duration-500 ease-out", [{ "opacity-0": !r.shown }]])
+}, Ul = { key: 1 };
+function Il(l, e, a, r, o, v) {
+  return n(), u("div", {
+    class: q(["text-sm text-green-600 dark:text-green-600 transition-opacity duration-500 ease-out", [{ "opacity-0": !r.shown }]])
   }, [
-    p.$slots.default ? le(p.$slots, "default", { key: 0 }) : (n(), m("span", nl, v(r.t("Saved.")), 1))
+    l.$slots.default ? ie(l.$slots, "default", { key: 0 }) : (n(), u("span", Ul, c(r.t("Saved.")), 1))
   ], 2);
 }
-const ve = /* @__PURE__ */ ol(rl, [["render", ll]]), il = { class: "sm:flex sm:items-start" }, dl = /* @__PURE__ */ t("div", { class: "mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-50 dark:bg-gray-500 sm:mx-0 sm:h-10 sm:w-10" }, [
-  /* @__PURE__ */ t("svg", {
+const ae = /* @__PURE__ */ Tl(Nl, [["render", Il]]), Hl = { class: "sm:flex sm:items-start" }, Rl = /* @__PURE__ */ s("div", { class: "mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-50 dark:bg-gray-500 sm:mx-0 sm:h-10 sm:w-10" }, [
+  /* @__PURE__ */ s("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     class: "h-6 w-6 stroke-blue-600 dark:stroke-blue-100",
     fill: "none",
@@ -3268,45 +3207,57 @@ const ve = /* @__PURE__ */ ol(rl, [["render", ll]]), il = { class: "sm:flex sm:i
     "stroke-width": "1.5",
     stroke: "currentColor"
   }, [
-    /* @__PURE__ */ t("path", {
+    /* @__PURE__ */ s("path", {
       "stroke-linecap": "round",
       "stroke-linejoin": "round",
       d: "M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z"
     }),
-    /* @__PURE__ */ t("path", {
+    /* @__PURE__ */ s("path", {
       "stroke-linecap": "round",
       "stroke-linejoin": "round",
       d: "M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
     })
   ])
-], -1), cl = { class: "mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full" }, ul = {
+], -1), Fl = { class: "mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full" }, Ol = {
   class: "text-lg leading-6 font-medium text-gray-900 dark:text-gray-400",
   id: "modal-title"
-}, ml = { class: "mt-2" }, vl = { class: "text-sm text-gray-500" }, pl = { class: "text-sm font-semibold mt-5 text-gray-900 dark:text-gray-400 tracking-wider" }, hl = { class: "mt-3 text-left" }, fl = { class: "space-y-2" }, gl = { class: "flex relative gap-x-3" }, _l = { class: "h-6 items-center" }, kl = { class: "flex-1 block text-sm" }, bl = {
+}, jl = { class: "mt-2" }, ql = { class: "text-sm text-gray-500" }, zl = { class: "text-sm font-semibold mt-5 text-gray-900 dark:text-gray-400 tracking-wider" }, Pl = { class: "mt-3 text-left" }, Gl = { class: "space-y-2" }, Wl = { class: "flex relative gap-x-3" }, Yl = { class: "h-6 items-center" }, Kl = { class: "flex-1 block text-sm" }, Jl = {
   for: "metric_unit",
   class: "flex w-full font-medium text-gray-900 dark:text-gray-400"
-}, yl = { class: "flex relative gap-x-3" }, xl = { class: "h-6 items-center" }, wl = {
+}, Ql = { class: "flex relative gap-x-3" }, Xl = { class: "h-6 items-center" }, Zl = { class: "flex-1 block text-sm" }, ei = {
+  for: "large_icons",
+  class: "flex w-full font-medium text-gray-900 dark:text-gray-400"
+}, ti = { class: "flex relative gap-x-3" }, si = { class: "h-6 items-center" }, ai = { class: "flex-1 block text-sm" }, oi = {
+  for: "persist_path",
+  class: "flex w-full font-medium text-gray-900 dark:text-gray-400"
+}, ri = { class: "flex relative gap-x-3" }, ni = { class: "h-6 items-center" }, li = { class: "flex-1 block text-sm" }, ii = {
+  for: "show_thumbnails",
+  class: "flex w-full font-medium text-gray-900 dark:text-gray-400"
+}, di = { class: "flex relative gap-x-3" }, ci = { class: "h-6 items-center" }, ui = {
   for: "theme",
   class: "flex w-full font-medium text-gray-900 dark:text-gray-400 text-sm"
-}, $l = { class: "flex text-sm" }, Cl = ["label"], Sl = ["value"], Ml = {
+}, mi = { class: "flex text-sm" }, fi = ["label"], pi = ["value"], vi = {
   key: 0,
   class: "flex relative gap-x-3"
-}, El = { class: "h-6 items-center" }, Dl = {
+}, hi = { class: "h-6 items-center" }, gi = {
   for: "language",
   class: "flex w-full font-medium text-gray-900 dark:text-gray-400 text-sm text-nowrap"
-}, jl = { class: "flex text-sm" }, Al = ["label"], Ll = ["value"], Tl = {
-  name: "VFModalAbout"
-}, Fl = /* @__PURE__ */ Object.assign(Tl, {
-  setup(p) {
-    const e = F("ServiceContainer"), { getStore: s, setStore: r, clearStore: o } = e.storage, { t: i, changeLocale: u, locale: d } = e.i18n;
-    k(""), k("");
-    const l = async () => {
-      o(), location.reload();
-    }, c = (C) => {
-      e.theme.set(C), e.emitter.emit("vf-theme-saved");
+}, _i = { class: "flex text-sm" }, bi = ["label"], xi = ["value"], wi = {
+  __name: "ModalAbout",
+  setup(l) {
+    const e = U("ServiceContainer"), { setStore: a, clearStore: r } = e.storage, { t: o, changeLocale: v, locale: i } = e.i18n, m = async () => {
+      r(), location.reload();
+    }, d = (T) => {
+      e.theme.set(T), e.emitter.emit("vf-theme-saved");
+    }, f = () => {
+      e.metricUnits = !e.metricUnits, e.filesize = e.metricUnits ? Me : De, a("metricUnits", e.metricUnits), e.emitter.emit("vf-metric-units-saved");
     }, g = () => {
-      e.metricUnits = !e.metricUnits, e.filesize = e.metricUnits ? xe : ye, r("metricUnits", e.metricUnits), e.emitter.emit("vf-metric-units-saved");
-    }, { i18n: _ } = F("VueFinderOptions"), x = Object.fromEntries(
+      e.compactListView = !e.compactListView, a("compactListView", e.compactListView), e.emitter.emit("vf-compact-view-saved");
+    }, b = () => {
+      e.showThumbnails = !e.showThumbnails, a("show-thumbnails", e.showThumbnails), e.emitter.emit("vf-show-thumbnails-saved");
+    }, p = () => {
+      e.persist = !e.persist, a("persist-path", e.persist), e.emitter.emit("vf-persist-path-saved");
+    }, { i18n: h } = U("VueFinderOptions"), w = Object.fromEntries(
       Object.entries({
         en: "English",
         fr: "French (Français)",
@@ -3319,126 +3270,210 @@ const ve = /* @__PURE__ */ ol(rl, [["render", ll]]), il = { class: "sm:flex sm:i
         tr: "Turkish (Türkçe)",
         zhCN: "Simplified Chinese (简体中文)",
         zhTW: "Traditional Chinese (繁體中文)"
-      }).filter(([C]) => Object.keys(_).includes(C))
-    ), E = ee(() => ({
-      system: i("System"),
-      light: i("Light"),
-      dark: i("Dark")
+      }).filter(([T]) => Object.keys(h).includes(T))
+    ), y = te(() => ({
+      system: o("System"),
+      light: o("Light"),
+      dark: o("Dark")
     }));
-    return (C, f) => (n(), T(W, null, {
-      buttons: A(() => [
-        t("button", {
+    return (T, $) => (n(), A(K, null, {
+      buttons: M(() => [
+        s("button", {
           type: "button",
-          onClick: f[5] || (f[5] = (h) => a(e).emitter.emit("vf-modal-close")),
+          onClick: $[8] || ($[8] = (S) => t(e).modal.close()),
           class: "vf-btn vf-btn-secondary"
-        }, v(a(i)("Close")), 1)
+        }, c(t(o)("Close")), 1)
       ]),
-      default: A(() => [
-        t("div", il, [
-          dl,
-          t("div", cl, [
-            t("h3", ul, v(a(i)("About %s", "Vuefinder " + a(e).version)), 1),
-            t("div", ml, [
-              t("p", vl, v(a(i)("Vuefinder is a file manager component for vue 3.")), 1),
-              t("div", null, [
-                t("h3", pl, v(a(i)("Settings")), 1)
+      default: M(() => [
+        s("div", Hl, [
+          Rl,
+          s("div", Fl, [
+            s("h3", Ol, c(t(o)("About %s", "Vuefinder " + t(e).version)), 1),
+            s("div", jl, [
+              s("p", ql, c(t(o)("Vuefinder is a file manager component for vue 3.")), 1),
+              s("div", null, [
+                s("h3", zl, c(t(o)("Settings")), 1)
               ]),
-              t("div", hl, [
-                t("fieldset", null, [
-                  t("div", fl, [
-                    t("div", gl, [
-                      t("div", _l, [
-                        I(t("input", {
+              s("div", Pl, [
+                s("fieldset", null, [
+                  s("div", Gl, [
+                    s("div", Wl, [
+                      s("div", Yl, [
+                        j(s("input", {
                           id: "metric_unit",
                           name: "metric_unit",
                           type: "checkbox",
-                          "onUpdate:modelValue": f[0] || (f[0] = (h) => a(e).metricUnits = h),
-                          onClick: g,
+                          "onUpdate:modelValue": $[0] || ($[0] = (S) => t(e).metricUnits = S),
+                          onClick: f,
                           class: "h-4 w-4 rounded border-gray-300 text-indigo-600 dark:accent-slate-400 focus:ring-indigo-600"
                         }, null, 512), [
-                          [Fe, a(e).metricUnits]
+                          [ue, t(e).metricUnits]
                         ])
                       ]),
-                      t("div", kl, [
-                        t("label", bl, [
-                          V(v(a(i)("Use Metric Units")) + " ", 1),
-                          H(ve, {
+                      s("div", Kl, [
+                        s("label", Jl, [
+                          V(c(t(o)("Use Metric Units")) + " ", 1),
+                          L(ae, {
                             class: "ms-3",
                             on: "vf-metric-units-saved"
                           }, {
-                            default: A(() => [
-                              V(v(a(i)("Saved.")), 1)
+                            default: M(() => [
+                              V(c(t(o)("Saved.")), 1)
+                            ]),
+                            _: 1
+                          })
+                        ])
+                      ])
+                    ]),
+                    s("div", Ql, [
+                      s("div", Xl, [
+                        j(s("input", {
+                          id: "large_icons",
+                          name: "large_icons",
+                          type: "checkbox",
+                          "onUpdate:modelValue": $[1] || ($[1] = (S) => t(e).compactListView = S),
+                          onClick: g,
+                          class: "h-4 w-4 rounded border-gray-300 text-indigo-600 dark:accent-slate-400 focus:ring-indigo-600"
+                        }, null, 512), [
+                          [ue, t(e).compactListView]
+                        ])
+                      ]),
+                      s("div", Zl, [
+                        s("label", ei, [
+                          V(c(t(o)("Compact list view")) + " ", 1),
+                          L(ae, {
+                            class: "ms-3",
+                            on: "vf-compact-view-saved"
+                          }, {
+                            default: M(() => [
+                              V(c(t(o)("Saved.")), 1)
+                            ]),
+                            _: 1
+                          })
+                        ])
+                      ])
+                    ]),
+                    s("div", ti, [
+                      s("div", si, [
+                        j(s("input", {
+                          id: "persist_path",
+                          name: "persist_path",
+                          type: "checkbox",
+                          "onUpdate:modelValue": $[2] || ($[2] = (S) => t(e).persist = S),
+                          onClick: p,
+                          class: "h-4 w-4 rounded border-gray-300 text-indigo-600 dark:accent-slate-400 focus:ring-indigo-600"
+                        }, null, 512), [
+                          [ue, t(e).persist]
+                        ])
+                      ]),
+                      s("div", ai, [
+                        s("label", oi, [
+                          V(c(t(o)("Persist path on reload")) + " ", 1),
+                          L(ae, {
+                            class: "ms-3",
+                            on: "vf-persist-path-saved"
+                          }, {
+                            default: M(() => [
+                              V(c(t(o)("Saved.")), 1)
+                            ]),
+                            _: 1
+                          })
+                        ])
+                      ])
+                    ]),
+                    s("div", ri, [
+                      s("div", ni, [
+                        j(s("input", {
+                          id: "show_thumbnails",
+                          name: "show_thumbnails",
+                          type: "checkbox",
+                          "onUpdate:modelValue": $[3] || ($[3] = (S) => t(e).showThumbnails = S),
+                          onClick: b,
+                          class: "h-4 w-4 rounded border-gray-300 text-indigo-600 dark:accent-slate-400 focus:ring-indigo-600"
+                        }, null, 512), [
+                          [ue, t(e).showThumbnails]
+                        ])
+                      ]),
+                      s("div", li, [
+                        s("label", ii, [
+                          V(c(t(o)("Show thumbnails")) + " ", 1),
+                          L(ae, {
+                            class: "ms-3",
+                            on: "vf-show-thumbnails-saved"
+                          }, {
+                            default: M(() => [
+                              V(c(t(o)("Saved.")), 1)
                             ]),
                             _: 1
                           })
                         ])
                       ])
                     ]),
-                    t("div", yl, [
-                      t("div", xl, [
-                        t("label", wl, v(a(i)("Theme")), 1)
+                    s("div", di, [
+                      s("div", ci, [
+                        s("label", ui, c(t(o)("Theme")), 1)
                       ]),
-                      t("div", $l, [
-                        I(t("select", {
+                      s("div", mi, [
+                        j(s("select", {
                           id: "theme",
-                          "onUpdate:modelValue": f[1] || (f[1] = (h) => a(e).theme.value = h),
-                          onChange: f[2] || (f[2] = (h) => c(h.target.value)),
+                          "onUpdate:modelValue": $[4] || ($[4] = (S) => t(e).theme.value = S),
+                          onChange: $[5] || ($[5] = (S) => d(S.target.value)),
                           class: "flex-shrink-0 w-full text-sm text-slate-500 border dark:border-gray-600 dark:text-neutral-50 dark:bg-gray-700 rounded"
                         }, [
-                          t("optgroup", {
-                            label: a(i)("Theme")
+                          s("optgroup", {
+                            label: t(o)("Theme")
                           }, [
-                            (n(!0), m(U, null, q(E.value, (h, N) => (n(), m("option", { value: N }, v(h), 9, Sl))), 256))
-                          ], 8, Cl)
+                            (n(!0), u(z, null, G(y.value, (S, Y) => (n(), u("option", { value: Y }, c(S), 9, pi))), 256))
+                          ], 8, fi)
                         ], 544), [
-                          [pe, a(e).theme.value]
+                          [ge, t(e).theme.value]
                         ]),
-                        H(ve, {
+                        L(ae, {
                           class: "ms-3 flex-shrink-0 flex-grow basis-full",
                           on: "vf-theme-saved"
                         }, {
-                          default: A(() => [
-                            V(v(a(i)("Saved.")), 1)
+                          default: M(() => [
+                            V(c(t(o)("Saved.")), 1)
                           ]),
                           _: 1
                         })
                       ])
                     ]),
-                    a(e).features.includes(a(B).LANGUAGE) && Object.keys(a(x)).length > 1 ? (n(), m("div", Ml, [
-                      t("div", El, [
-                        t("label", Dl, v(a(i)("Language")), 1)
+                    t(e).features.includes(t(O).LANGUAGE) && Object.keys(t(w)).length > 1 ? (n(), u("div", vi, [
+                      s("div", hi, [
+                        s("label", gi, c(t(o)("Language")), 1)
                       ]),
-                      t("div", jl, [
-                        I(t("select", {
+                      s("div", _i, [
+                        j(s("select", {
                           id: "language",
-                          "onUpdate:modelValue": f[3] || (f[3] = (h) => _e(d) ? d.value = h : null),
-                          onChange: f[4] || (f[4] = (h) => a(u)(h.target.value)),
+                          "onUpdate:modelValue": $[6] || ($[6] = (S) => Ee(i) ? i.value = S : null),
+                          onChange: $[7] || ($[7] = (S) => t(v)(S.target.value)),
                           class: "flex-shrink-0 w-1/2 sm:w-full text-sm text-slate-500 border dark:border-gray-600 dark:text-neutral-50 dark:bg-gray-700 rounded"
                         }, [
-                          t("optgroup", {
-                            label: a(i)("Language")
+                          s("optgroup", {
+                            label: t(o)("Language")
                           }, [
-                            (n(!0), m(U, null, q(a(x), (h, N) => (n(), m("option", { value: N }, v(h), 9, Ll))), 256))
-                          ], 8, Al)
+                            (n(!0), u(z, null, G(t(w), (S, Y) => (n(), u("option", { value: Y }, c(S), 9, xi))), 256))
+                          ], 8, bi)
                         ], 544), [
-                          [pe, a(d)]
+                          [ge, t(i)]
                         ]),
-                        H(ve, {
+                        L(ae, {
                           class: "ms-3 flex-shrink-0 flex-grow basis-full",
                           on: "vf-language-saved"
                         }, {
-                          default: A(() => [
-                            V(v(a(i)("Saved.")), 1)
+                          default: M(() => [
+                            V(c(t(o)("Saved.")), 1)
                           ]),
                           _: 1
                         })
                       ])
-                    ])) : M("", !0),
-                    t("button", {
-                      onClick: l,
+                    ])) : C("", !0),
+                    s("button", {
+                      onClick: m,
                       type: "button",
                       class: "vf-btn vf-btn-secondary"
-                    }, v(a(i)("Reset Settings")), 1)
+                    }, c(t(o)("Reset Settings")), 1)
                   ])
                 ])
               ])
@@ -3449,32 +3484,233 @@ const ve = /* @__PURE__ */ ol(rl, [["render", ll]]), il = { class: "sm:flex sm:i
       _: 1
     }));
   }
-}), Ol = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-  __proto__: null,
-  ModalAbout: Fl,
-  ModalArchive: bn,
-  ModalDelete: so,
-  ModalMessage: uo,
-  ModalMove: al,
-  ModalNewFile: Do,
-  ModalNewFolder: bo,
-  ModalPreview: _r,
-  ModalRename: Tr,
-  ModalUnarchive: Vn,
-  ModalUpload: sn
-}, Symbol.toStringTag, { value: "Module" })), Wl = {
-  /** @param {import('vue').App} app
+}, ki = {
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  stroke: "currentColor",
+  class: "h-5 w-5",
+  viewBox: "0 0 24 24"
+}, yi = /* @__PURE__ */ s("path", {
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round",
+  d: "M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4"
+}, null, -1), $i = [
+  yi
+];
+function Si(l, e) {
+  return n(), u("svg", ki, [...$i]);
+}
+const Ci = { render: Si }, Ei = {
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "2",
+  class: "h-5 w-5 stroke-slate-500 cursor-pointer",
+  viewBox: "0 0 24 24"
+}, Di = /* @__PURE__ */ s("path", {
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round",
+  d: "M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0"
+}, null, -1), Mi = [
+  Di
+];
+function Ai(l, e) {
+  return n(), u("svg", Ei, [...Mi]);
+}
+const Li = { render: Ai }, Bi = { class: "p-1 text-xs border-t border-neutral-300 dark:border-gray-700/50 flex justify-between select-none" }, Vi = { class: "flex leading-5 items-center" }, Ti = ["aria-label"], Ni = ["value"], Ui = { class: "ml-3" }, Ii = { key: 0 }, Hi = { class: "ml-1" }, Ri = { class: "flex leading-5 items-center justify-end" }, Fi = ["disabled"], Oi = ["aria-label"], ji = {
+  __name: "Statusbar",
+  setup(l) {
+    const e = U("ServiceContainer"), { t: a } = e.i18n, { setStore: r } = e.storage, o = e.dragSelect, v = () => {
+      e.emitter.emit("vf-search-exit"), e.emitter.emit("vf-fetch", { params: { q: "index", adapter: e.fs.adapter } }), r("adapter", e.fs.adapter);
+    }, i = x("");
+    e.emitter.on("vf-search-query", ({ newQuery: d }) => {
+      i.value = d;
+    });
+    const m = te(() => {
+      const d = e.selectButton.multiple ? o.getSelected().length > 0 : o.getSelected().length === 1;
+      return e.selectButton.active && d;
+    });
+    return (d, f) => (n(), u("div", Bi, [
+      s("div", Vi, [
+        s("div", {
+          class: "mx-2",
+          "aria-label": t(a)("Storage"),
+          "data-microtip-position": "top-right",
+          role: "tooltip"
+        }, [
+          L(t(Ci))
+        ], 8, Ti),
+        j(s("select", {
+          "onUpdate:modelValue": f[0] || (f[0] = (g) => t(e).fs.adapter = g),
+          onChange: v,
+          class: "py-0.5 text-sm text-slate-500 border dark:border-gray-600 dark:text-neutral-50 dark:bg-gray-700 rounded pl-2 pr-8"
+        }, [
+          (n(!0), u(z, null, G(t(e).fs.data.storages, (g) => (n(), u("option", { value: g }, c(g), 9, Ni))), 256))
+        ], 544), [
+          [ge, t(e).fs.adapter]
+        ]),
+        s("div", Ui, [
+          i.value.length ? (n(), u("span", Ii, c(t(e).fs.data.files.length) + " items found. ", 1)) : C("", !0),
+          s("span", Hi, c(t(e).dragSelect.getCount() > 0 ? t(a)("%s item(s) selected.", t(e).dragSelect.getCount()) : ""), 1)
+        ])
+      ]),
+      s("div", Ri, [
+        t(e).selectButton.active ? (n(), u("button", {
+          key: 0,
+          class: q(["vf-btn py-0 vf-btn-primary", { disabled: !m.value }]),
+          disabled: !m.value,
+          onClick: f[1] || (f[1] = (g) => t(e).selectButton.click(t(o).getSelected(), g))
+        }, c(t(a)("Select")), 11, Fi)) : C("", !0),
+        s("span", {
+          class: "mr-1",
+          "aria-label": t(a)("About"),
+          "data-microtip-position": "top-left",
+          role: "tooltip",
+          onClick: f[2] || (f[2] = (g) => t(e).modal.open(wi))
+        }, [
+          L(t(Li))
+        ], 8, Oi)
+      ])
+    ]));
+  }
+}, qi = {
+  __name: "VueFinder",
+  props: {
+    id: {
+      type: String,
+      default: "vf"
+    },
+    request: {
+      type: [String, Object],
+      required: !0
+    },
+    persist: {
+      type: Boolean,
+      default: !1
+    },
+    path: {
+      type: String,
+      default: "."
+    },
+    features: {
+      type: [Array, Boolean],
+      default: !0
+    },
+    debug: {
+      type: Boolean,
+      default: !1
+    },
+    theme: {
+      type: String,
+      default: "system"
+    },
+    locale: {
+      type: String,
+      default: null
+    },
+    maxHeight: {
+      type: String,
+      default: "600px"
+    },
+    maxFileSize: {
+      type: String,
+      default: "10mb"
+    },
+    fullScreen: {
+      type: Boolean,
+      default: !1
+    },
+    showThumbnails: {
+      type: Boolean,
+      default: !0
+    },
+    selectButton: {
+      type: Object,
+      default(l) {
+        return {
+          active: !1,
+          multiple: !1,
+          click: (e) => {
+          },
+          ...l
+        };
+      }
+    }
+  },
+  emits: ["select"],
+  setup(l, { emit: e }) {
+    const a = e, o = mt(l, U("VueFinderOptions"));
+    Pe("ServiceContainer", o);
+    const { setStore: v } = o.storage, i = x(null);
+    o.root = i;
+    const m = o.dragSelect, d = (g) => {
+      Object.assign(o.fs.data, g), m.clearSelection(), m.refreshSelection();
+    };
+    let f;
+    return o.emitter.on("vf-fetch-abort", () => {
+      f.abort(), o.fs.loading = !1;
+    }), o.emitter.on("vf-fetch", ({ params: g, body: b = null, onSuccess: p = null, onError: h = null, noCloseModal: _ = !1 }) => {
+      ["index", "search"].includes(g.q) && (f && f.abort(), o.fs.loading = !0), f = new AbortController();
+      const w = f.signal;
+      o.requester.send({
+        url: "",
+        method: g.m || "get",
+        params: g,
+        body: b,
+        abortSignal: w
+      }).then((y) => {
+        o.fs.adapter = y.adapter, o.persist && (o.fs.path = y.dirname, v("path", o.fs.path)), ["index", "search"].includes(g.q) && (o.fs.loading = !1), _ || o.modal.close(), d(y), p && p(y);
+      }).catch((y) => {
+        console.error(y), h && h(y);
+      });
+    }), W(() => {
+      let g = {};
+      o.fs.path.includes("://") && (g = {
+        adapter: o.fs.path.split("://")[0],
+        path: o.fs.path
+      }), o.emitter.emit("vf-fetch", { params: { q: "index", adapter: o.fs.adapter, ...g } }), m.onSelect((b) => {
+        a("select", b);
+      });
+    }), (g, b) => (n(), u("div", {
+      class: "vuefinder",
+      ref_key: "root",
+      ref: i
+    }, [
+      s("div", {
+        class: q(t(o).theme.actualValue)
+      }, [
+        s("div", {
+          class: q([t(o).fullScreen ? "fixed w-screen inset-0 z-20" : "relative rounded", "border flex flex-col bg-white dark:bg-gray-800 text-gray-700 dark:text-neutral-400 border-neutral-300 dark:border-gray-900 select-none"]),
+          style: xe(t(o).fullScreen ? "" : "max-height: " + l.maxHeight),
+          onMousedown: b[0] || (b[0] = (p) => t(o).emitter.emit("vf-contextmenu-hide")),
+          onTouchstart: b[1] || (b[1] = (p) => t(o).emitter.emit("vf-contextmenu-hide"))
+        }, [
+          L(Ao),
+          L(Zr),
+          L(Al),
+          L(ji)
+        ], 38),
+        L(Ge, { name: "fade" }, {
+          default: M(() => [
+            t(o).modal.visible ? (n(), A(We(t(o).modal.type), { key: 0 })) : C("", !0)
+          ]),
+          _: 1
+        }),
+        L(Vl)
+      ], 2)
+    ], 512));
+  }
+}, ed = {
+  /**
+   * @param {import('vue').App} app
    * @param options
    */
-  install(p, e = {}) {
-    p.component("VueFinder", Da);
-    for (const r of Object.values(Ol))
-      p.component(r.name, r);
+  install(l, e = {}) {
     e.i18n = e.i18n ?? {};
-    let [s] = Object.keys(e.i18n);
-    e.locale = e.locale ?? s ?? "en", p.provide("VueFinderOptions", e);
+    let [a] = Object.keys(e.i18n);
+    e.locale = e.locale ?? a ?? "en", l.provide("VueFinderOptions", e), l.component("VueFinder", qi);
   }
 };
 export {
-  Wl as default
+  ed as default
 };
diff --git a/package.json b/package.json
index bfda5973..5a1f31ae 100755
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vuefinder",
-  "version": "3.0.0",
+  "version": "2.3.0",
   "description": "Vuefinder is a file manager component for vuejs.",
   "type": "module",
   "files": [
diff --git a/src/locales/de.js b/src/locales/de.js
index 4c4e0b8a..073ec52c 100644
--- a/src/locales/de.js
+++ b/src/locales/de.js
@@ -87,5 +87,8 @@ export default {
     "Target Directory" : "Zielverzeichnis",
     "Select": "Auswählen",
     "Compact list view": "Kompakte Listenansicht",
+    "Show thumbnails": "Miniaturansichten anzeigen",
+    "Persist path on reload": "Pfad beim Neuladen beibehalten",
+    "Compact list view": "Kompakte Listenansicht",
     "uppy" : uppyLocaleDe,
 }
diff --git a/src/locales/en.js b/src/locales/en.js
index 558bb86f..383fb487 100644
--- a/src/locales/en.js
+++ b/src/locales/en.js
@@ -87,5 +87,8 @@ export default {
   "Target Directory" : "Target Directory",
   "Select": "Select",
   "Compact list view": "Compact list view",
+  "Show thumbnails": "Show thumbnails",
+  "Persist path on reload": "Persist path on reload",
+  "Compact list view": "Compact list view",
   "uppy": uppyLocaleEn
 }
diff --git a/src/locales/fa.js b/src/locales/fa.js
index 97131569..88702931 100644
--- a/src/locales/fa.js
+++ b/src/locales/fa.js
@@ -87,5 +87,8 @@ export default {
   "Target Directory" : "پوشه مقصد",
   "Select": "انتخاب",
   "Compact list view": "نمایش لیست کوچک",
+  "Show thumbnails": "نمایش تصاویر کوچک",
+  "Persist path on reload": "مسیر را در هنگام بارگذاری مجدد ذخیره کن",
+  "Compact list view": "نمایش لیست کوچک",
   "uppy": uppyLocaleFa
 }
diff --git a/src/locales/fr.js b/src/locales/fr.js
index 4fbb8448..bed6bcbd 100644
--- a/src/locales/fr.js
+++ b/src/locales/fr.js
@@ -88,5 +88,8 @@ export default {
   "Target Directory" : "Répertoire cible",
   "Select": "Sélectionner",
   "Compact list view": "Vue en liste compacte",
+  "Show thumbnails": "Afficher les miniatures",
+  "Persist path on reload": "Conserver le chemin lors du rechargement",
+  "Compact list view": "Vue en liste compacte",
   "uppy": uppyLocaleFr
 }
diff --git a/src/locales/he.js b/src/locales/he.js
index 92ea05ad..4683957e 100644
--- a/src/locales/he.js
+++ b/src/locales/he.js
@@ -87,5 +87,8 @@ export default {
   "Target Directory" : "תיקיית יעד",
   "Select": "בחר",
   "Compact list view": "תצוגת רשימה קומפקטית",
+  "Show thumbnails": "הצג תמונות ממוזערות",
+  "Persist path on reload": "שמור נתיב בטעינה מחדש",
+  "Compact list view": "תצוגת רשימה קומפקטית",
   "uppy": uppyLocaleHe
 }
diff --git a/src/locales/hi.js b/src/locales/hi.js
index 3a99e2a3..f94ce3d4 100644
--- a/src/locales/hi.js
+++ b/src/locales/hi.js
@@ -87,5 +87,8 @@ export default {
   "Target Directory" : "लक्षित निर्देशिका",
   "Select": "चयन",
   "Compact list view": "संक्षिप्त सूची दृश्य",
+  "Show thumbnails": "थंबनेल दिखाएं",
+  "Persist path on reload": "पुनः लोड पर पथ बनाए रखें",
+  "Compact list view": "संक्षिप्त सूची दृश्य",
   "uppy": uppyLocaleHi
 }
diff --git a/src/locales/ru.js b/src/locales/ru.js
index 1f04b1ac..798dc7b6 100644
--- a/src/locales/ru.js
+++ b/src/locales/ru.js
@@ -87,5 +87,8 @@ export default {
   "Target Directory" : "Целевая директория",
   "Select": "Выбрать",
   "Compact list view": "Компактный вид списка",
+  "Show thumbnails": "Показать миниатюры",
+  "Persist path on reload": "Сохранить путь при перезагрузке",
+  "Compact list view": "Компактный вид списка",
   "uppy": uppyLocaleRu
 }
diff --git a/src/locales/sv.js b/src/locales/sv.js
index ab9eccb5..0f46ea7d 100644
--- a/src/locales/sv.js
+++ b/src/locales/sv.js
@@ -87,5 +87,8 @@ export default {
   "Target Directory" : "Mål katalog",
   "Select": "Välj",
   "Compact list view": "Kompakt listvy",
+  "Show thumbnails": "Visa miniatyrer",
+  "Persist path on reload": "Behåll sökväg vid omladdning",
+  "Compact list view": "Kompakt listvy",
   "uppy": uppyLocaleSv
 }
diff --git a/src/locales/tr.js b/src/locales/tr.js
index 9e2d5821..946db7c4 100644
--- a/src/locales/tr.js
+++ b/src/locales/tr.js
@@ -87,5 +87,8 @@ export default {
   "Target Directory" : "Hedef Klasör",
   "Select": "Seç",
   "Compact list view": "Kompakt liste görünümü",
+  "Show thumbnails": "Küçük resimleri göster",
+  "Persist path on reload": "Yeniden yüklemede yolu koru",
+  "Compact list view": "Kompakt liste görünümü",
   "uppy": uppyLocaleTr,
 }
diff --git a/src/locales/zhCN.js b/src/locales/zhCN.js
index fa48fc7c..f7771045 100644
--- a/src/locales/zhCN.js
+++ b/src/locales/zhCN.js
@@ -87,5 +87,8 @@ export default {
   "Target Directory": "目标目录",
   "Select": "选择",
   "Compact list view": "紧凑列表视图",
+  "Show thumbnails": "显示缩略图",
+  "Persist path on reload": "重新加载时保持路径",
+  "Compact list view": "紧凑列表视图",
   "uppy": uppyLocalezhCN
 }
diff --git a/src/locales/zhTW.js b/src/locales/zhTW.js
index 3cc4498b..1fd2aa23 100644
--- a/src/locales/zhTW.js
+++ b/src/locales/zhTW.js
@@ -87,5 +87,8 @@ export default {
   "Target Directory": "目標目錄",
   "Select": "選擇",
   "Compact list view": "緊湊列表視圖",
+  "Show thumbnails": "顯示縮略圖",
+  "Persist path on reload": "重新加載時保持路徑",
+  "Compact list view": "緊湊列表視圖",
   "uppy": uppyLocalezhTW
 }