refactor(desk): improve UX in folder explorer

Author: zzhenryquezz

package-lock.json

@@ -5,7 +5,8 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { computed, ref, useAttrs } from 'vue'
+import { createBindings } from '@/composables/binding'
+import { computed, ref, useAttrs, onMounted } from 'vue'
 import { useVModel } from 'vue-wind/composables/v-model'
 
 const props = defineProps({
@@ -49,6 +50,10 @@ const props = defineProps({
         type: String,
         default: '',
     },
+    autofocus: {
+        type: Boolean,
+        default: false,
+    },
 })
 
 const emit = defineEmits(['update:modelValue'])
@@ -152,32 +157,15 @@ const labelClasses = computed(() => {
 
 // input attrs
 
-const bindings = computed(() => {
-    const root = {}
-    const label = {}
-    const input = {}
-    const wrapper = {}
-
-    Object.keys(attrs).forEach((key) => {
-        if (key.startsWith('input:')) {
-            input[key.replace('input:', '')] = attrs[key]
-            return
-        }
+const bindings = computed(() => createBindings(attrs, ['label', 'input', 'wrapper']))
 
-        if (key.startsWith('label:')) {
-            label[key.replace('label:', '')] = attrs[key]
-            return
-        }
+// autofocus
+const inputRef = ref<HTMLInputElement>()
 
-        if (key.startsWith('wrapper:')) {
-            wrapper[key.replace('wrapper:', '')] = attrs[key]
-            return
-        }
-
-        root[key] = attrs[key]
-    })
-
-    return { root, wrapper, label, input }
+onMounted(() => {
+    if (props.autofocus) {
+        inputRef.value?.focus()
+    }
 })
 </script>
 <template>
@@ -189,6 +177,7 @@ const bindings = computed(() => {
         <div :class="classes" v-bind="bindings.wrapper">
             <input
                 :id="label"
+                ref="inputRef"
                 v-model="model"
                 :type="type"
                 :placeholder="placeholder"

packages/desktop/components/is-input.vue

@@ -101,12 +101,12 @@ const visibleItems = computed(() => props.items.slice(0, pagination.value.limit)
         </thead>
 
         <slot
-            v-for="item in visibleItems"
-            :key="item"
+            v-for="(item, index) in visibleItems"
             name="item"
             :items="visibleItems"
             :columns="parsedColumns"
             :item="item"
+            :index="index"
         >
             <v-tr>
                 <slot

packages/desktop/components/v-table.vue

@@ -25,39 +25,39 @@ export const useStore = defineStore('entry', () => {
             payload.workspaceId = workspace.currentId
         }
 
-        return useCase<ListDirectoryEntryDTO.Output>('list-directory-entry', payload)
+        return useCase('list-directory-entry', payload as any)
     }
 
     function show(payload: Partial<ShowDirectoryEntryDTO.Input>) {
         if (!payload.workspaceId && workspace.currentId) {
             payload.workspaceId = workspace.currentId
         }
 
-        return useCase<ShowDirectoryEntryDTO.Output>('show-directory-entry', payload)
+        return useCase('show-directory-entry', payload as any)
     }
 
     function create(payload: Partial<CreateDirectoryEntryDTO.Input>) {
         if (!payload.workspaceId && workspace.currentId) {
             payload.workspaceId = workspace.currentId
         }
 
-        return useCase<CreateDirectoryEntryDTO.Output>('create-directory-entry', payload)
+        return useCase('create-directory-entry', payload as any)
     }
 
     function update(payload: Partial<UpdateDirectionEntryDTO.Input>) {
         if (!payload.workspaceId && workspace.currentId) {
             payload.workspaceId = workspace.currentId
         }
 
-        return useCase<UpdateDirectionEntryDTO.Output>('update-directory-entry', payload)
+        return useCase('update-directory-entry', payload as any)
     }
 
     function destroy(payload: Partial<DeleteDirectoryEntryDTO.Input>) {
         if (!payload.workspaceId && workspace.currentId) {
             payload.workspaceId = workspace.currentId
         }
 
-        return useCase<DeleteDirectoryEntryDTO.Output>('delete-directory-entry', payload)
+        return useCase('delete-directory-entry', payload as any)
     }
 
     function read(payload: Partial<ReadDirectoryEntryDTO.Input>) {
@@ -73,7 +73,7 @@ export const useStore = defineStore('entry', () => {
             payload.workspaceId = workspace.currentId
         }
 
-        return useCase<void>('write-directory-entry', payload)
+        return useCase('write-directory-entry', payload as any)
     }
 
     return {