refactor(desk)!: remake i-value components

Author: zzhenryquezz

packages/core/entities/view-common.ts

@@ -21,13 +21,15 @@ export interface ViewOrder {
 
 export default class ViewCommon extends View {
     public search = ''
+    public limit?: number
     public filters: ViewFilter[] = []
     public columns: ViewColumn[] = []
     public orderBy: ViewOrder[] = []
 
     constructor(props?: Partial<ViewCommon>, id?: string) {
         super(props, id)
 
+        this.limit = props?.limit
         this.search = props?.search || ''
         this.filters = props?.filters || []
         this.columns = props?.columns || []

packages/core/repositories/item/implementations/entry-item-repository.ts

@@ -40,7 +40,11 @@ export default class EntryItemRepository implements IItemRepository {
             .map((id) => {
                 const meta = metas.find((i) => i.id === id)
 
-                return new Item(meta, id)
+                const item = new Item(meta, id)
+
+                item._path = DirectoryEntry.normalize(this.collection.path, id)
+
+                return item
             })
     }
 

packages/desktop/components/v-btn.vue

@@ -56,7 +56,7 @@ const variations = {
         'danger': 'bg-danger hover:bg-danger/75 text-t-primary',
         'info': 'bg-info hover:bg-info/75 text-t-primary',
         'warn': 'bg-warn hover:bg-warn/75 text-t-primary',
-        'b-secondary': 'bg-b-secondary hover:bg-b-secondary/75 text-t-primary',
+        'b-secondary': 'bg-b-secondary text-t-secondary hover:text-t-primary',
     },
     text: {
         'accent':

packages/desktop/components/v-select.vue

@@ -3,32 +3,16 @@ export default { inheritAttrs: false }
 </script>
 <script setup lang="ts">
 import { createBindings } from '@/composables/binding'
-import { computed, ref, useAttrs } from 'vue'
+import { computed, ref, useAttrs, PropType } from 'vue'
 import { useVModel } from 'vue-wind/composables/v-model'
 
 // Props & Emits
 
 const props = defineProps({
     modelValue: {
-        type: [String, Number, Object, Boolean],
+        type: [String, Number, Object, Boolean] as PropType<any>,
         default: '',
     },
-    label: {
-        type: String,
-        default: '',
-    },
-    size: {
-        type: String,
-        default: 'md',
-    },
-    color: {
-        type: String,
-        default: 'accent',
-    },
-    flat: {
-        type: Boolean,
-        default: false,
-    },
     readonly: {
         type: Boolean,
         default: false,
@@ -53,6 +37,10 @@ const props = defineProps({
         type: Boolean,
         default: false,
     },
+    clearValue: {
+        type: [Function] as PropType<() => any>,
+        default: () => () => undefined,
+    },
 })
 
 const emit = defineEmits(['update:modelValue'])
@@ -96,7 +84,7 @@ function getLabel(option: any) {
 
 // display label
 
-const displayLabel = computed(() => {
+const displayValue = computed(() => {
     let label: any = model.value
 
     if (!label) {
@@ -131,26 +119,32 @@ function onShowMenu(value: boolean) {
         @update:model-value="onShowMenu"
     >
         <template #activator="{ attrs, toggle }">
-            <v-input
-                v-bind="{ ...attrs, ...bindings.root }"
-                :model-value="displayLabel"
-                :label="label"
-                :color="color"
-                :flat="flat"
-                :size="size"
-                class="cursor-pointer"
-                input:class="cursor-pointer"
-                readonly
-                @keydown.enter="toggle"
-                @keydown.esc="menu = false"
+            <slot
+                name="selection"
+                :attrs="{ ...attrs, ...bindings.root }"
+                :display-value="displayValue"
             >
-                <template v-if="!noChevron" #append>
-                    <v-icon name="chevron-down" class="ml-auto text-t-secondary" />
-                </template>
-            </v-input>
+                <v-input
+                    v-bind="{ ...attrs, ...bindings.root }"
+                    :model-value="displayValue"
+                    class="cursor-pointer"
+                    input:class="cursor-pointer"
+                    readonly
+                    @keydown.enter="toggle"
+                    @keydown.esc="menu = false"
+                >
+                    <template v-if="!noChevron" #append>
+                        <v-icon name="chevron-down" class="ml-auto text-t-secondary" />
+                    </template>
+                </v-input>
+            </slot>
         </template>
 
         <v-card color="b-secondary" v-bind="bindings.card">
+            <v-list-item class="border-b border-lines" @click="model = clearValue()">
+                {{ $t('clear') }}
+            </v-list-item>
+
             <template v-for="option in options" :key="option">
                 <slot name="option" :option="option">
                     <v-list-item dark @click="onSelect(option)">

packages/desktop/components/v-tr.vue

@@ -1,5 +1,28 @@
+<script setup lang="ts">
+import { toCssMeasurement } from '@/composables/utils'
+import { computed } from 'vue'
+
+const props = defineProps({
+    height: {
+        type: [String, Number],
+        default: null,
+    },
+})
+
+// style
+
+const style = computed(() => {
+    const result: any = {}
+
+    if (props.height) {
+        result.height = toCssMeasurement(props.height)
+    }
+
+    return result
+})
+</script>
 <template>
-    <tr>
+    <tr :style="style">
         <slot></slot>
     </tr>
 </template>

packages/desktop/composables/externals.ts

@@ -1,3 +1,5 @@
+import { open } from '@tauri-apps/api/shell'
+
 export function openURL(url: string) {
-    return (window as any).openURL(url)
+    return open(url)
 }

packages/desktop/i18n/en-US.ts

@@ -86,6 +86,7 @@ export default {
     date: 'Date',
     displayFormat: 'Display format',
     saveFormat: 'Save format',
+    limit: 'Limit',
     errors: {
         unknown: 'Unknown error',
         workspaceNotFound: '@:workspace not found: {0}',

packages/desktop/modules/collection-column/composables/with-view.ts

@@ -6,22 +6,22 @@ import Column from '@core/entities/column'
 export function withView<T = ViewColumn>(columns: Column[], viewColumns: ViewColumn[] = []) {
     const result: any[] = useNonReactive(columns)
 
-    result.forEach((c) => {
+    for (const c of result) {
         const vColumn = viewColumns.find((vc) => vc.id === c.id)
 
         if (vColumn) {
             Object.assign(c, useNonReactive(vColumn))
         }
-    })
+    }
 
-    result.sort((a, b) => {
-        const aIndex = viewColumns.findIndex((s) => s.id === a.id)
-        const bIndex = viewColumns.findIndex((s) => s.id === b.id)
+    // result.sort((a, b) => {
+    //     const aIndex = viewColumns.findIndex((s) => s.id === a.id)
+    //     const bIndex = viewColumns.findIndex((s) => s.id === b.id)
 
-        if (aIndex === -1 || bIndex === -1) return 0
+    //     if (aIndex === -1 || bIndex === -1) return 0
 
-        return aIndex - bIndex
-    })
+    //     return aIndex - bIndex
+    // })
 
     return result as (Column & T)[]
 }

packages/desktop/modules/collection-column/store.ts

@@ -18,10 +18,8 @@ interface StoreItem {
 export const useStore = defineStore('column', () => {
     const items = ref<StoreItem[]>([])
 
-    const stores = {
-        workspace: useWorkspace(),
-        collection: useCollection(),
-    }
+    const workspace = useWorkspace()
+    const collection = useCollection()
 
     async function set(collectionId: string, forceUpdate = false) {
         let item = items.value.find((i) => i.collectionId === collectionId)
@@ -44,13 +42,13 @@ export const useStore = defineStore('column', () => {
 
         item.loading = true
 
-        await stores.collection.setCollections()
+        await collection.setCollections()
 
-        const collection = stores.collection.collections.find((c) => c.id === collectionId)
+        const data = collection.collections.find((c) => c.id === collectionId)
 
-        if (!collection) return
+        if (!data) return
 
-        item.columns = useNonReactive(collection.columns)
+        item.columns = useNonReactive(data.columns)
 
         setTimeout(() => {
             const index = items.value.findIndex((i) => i.collectionId === collectionId)
@@ -87,6 +85,20 @@ export const useStore = defineStore('column', () => {
         return null
     }
 
+    async function show(collectionId: string, columnId: string): Promise<Column | null> {
+        if (!collection.collections.length) {
+            await collection.setCollections()
+        }
+
+        const search = collection.collections.find((c) => c.id === collectionId)
+
+        if (!search) return null
+
+        const column = search.columns.find((c) => c.id === columnId)
+
+        return column ? useNonReactive(column) : null
+    }
+
     function isLoading(collectionId: string) {
         const item = items.value.find((i) => i.collectionId === collectionId)
 
@@ -98,7 +110,7 @@ export const useStore = defineStore('column', () => {
     async function create(collectionId: string) {
         const item = items.value.find((i) => i.collectionId === collectionId)
 
-        await stores.collection.setCollections()
+        await collection.setCollections()
 
         if (!item) return
 
@@ -108,14 +120,14 @@ export const useStore = defineStore('column', () => {
     async function save(collectionId: string) {
         const item = items.value.find((i) => i.collectionId === collectionId)
 
-        await stores.collection.setCollections()
+        await collection.setCollections()
 
-        const collection = stores.collection.collections.find((c) => c.id === collectionId)
+        const data = collection.collections.find((c) => c.id === collectionId)
 
-        if (!item || !collection) return
+        if (!item || !data) return
 
-        await stores.collection.update({
-            workspaceId: stores.workspace.currentId!,
+        await collection.update({
+            workspaceId: workspace.currentId!,
             collectionId,
             data: {
                 columns: item.columns,
@@ -138,6 +150,7 @@ export const useStore = defineStore('column', () => {
     return {
         all,
         get,
+        show,
         set,
         isLoading,
         create,

packages/desktop/modules/collection/components/CActions.vue

@@ -9,6 +9,7 @@ import { useStore } from '@/store/global'
 import CDrawerFilter from './CDrawerFilter.vue'
 import CDrawerHideColumns from './CDrawerHideColumns.vue'
 import CActionsOrder from './CActionsOrder.vue'
+import View from '@/../core/entities/view'
 
 // Props & emit
 const props = defineProps({
@@ -58,6 +59,14 @@ async function refresh() {
 
     await store.column.set(props.collectionId, true)
 }
+
+function isCommon(v: View): v is ViewCommon {
+    return ['table', 'gallery'].includes(v.component)
+}
+
+function isGallery(v: View): v is ViewGallery {
+    return v.component === 'gallery'
+}
 </script>
 <template>
     <v-card-head :class="register?.loading ? 'border-b-accent' : ''">
@@ -66,7 +75,7 @@ async function refresh() {
         <div class="grow"></div>
 
         <template v-if="view">
-            <template v-if="view instanceof ViewCommon">
+            <template v-if="isCommon(view)">
                 <div class="flex items-center transition-all">
                     <transition name="slide-left">
                         <v-input
@@ -118,8 +127,9 @@ async function refresh() {
                 <v-card color="b-secondary" width="300">
                     <v-card-content class="flex flex-wrap gap-y-4">
                         <v-input v-model="view.label" :label="$t('label')" />
+                        <v-input v-model="view.limit" type="number" :label="$t('limit')" />
 
-                        <template v-if="view instanceof ViewGallery">
+                        <template v-if="isGallery(view)">
                             <v-select
                                 v-model="view.thumbnail.key"
                                 :options="columns"