fix(desk): breaking layout in ISingle page

Author: zzhenryquezz

packages/desktop/components/VLayoutDrawer.vue

@@ -3,9 +3,8 @@ export default defineComponent({ inheritAttrs: false })
 </script>
 
 <script setup lang="ts">
-import { ref, computed, defineComponent, onMounted, onUnmounted } from 'vue'
 import { useLayout, LayoutItem } from '@composables/layout'
-import { useVModel } from 'vue-wind/composables/v-model'
+import { useVModel } from '@vueuse/core'
 
 // Props & Emits
 const props = defineProps({
@@ -59,21 +58,33 @@ const padding = computed(() => {
 })
 
 // transform
-const transform = computed(() => {
-    if (model.value) return 'translateX(0)'
+const model = useVModel(props, 'modelValue', emit)
 
-    return props.right ? 'translateX(200%)' : 'translateX(-100%)'
-})
+const style = computed(() => {
+    let transform = 'translateX(0)'
+    let width = `${props.width}px`
 
-// v-model
-const model = useVModel(props, 'modelValue', emit)
+    if (!model.value) {
+        transform = props.right ? 'translateX(200%)' : 'translateX(-100%)'
+    }
+
+    if (props.right && !model.value) {
+        // width = `0px`
+    }
+
+    return {
+        padding,
+        transform,
+        width,
+    }
+})
 </script>
 <template>
     <aside
         ref="root"
-        class="absolute overflow-hidden top-0 transition-transform h-full"
+        class="absolute overflow-hidden top-0 h-full transition-transform duration-300 ease-in-out"
         :class="[right ? 'right-0' : 'left-0']"
-        :style="{ padding, transform, width: `${width}px` }"
+        :style="(style as any)"
     >
         <div class="h-full w-full overflow-auto" v-bind="$attrs">
             <slot />

packages/desktop/modules/item/components/IValueText.vue

@@ -43,11 +43,5 @@ const editModel = useModelOrInnerValue(props, 'edit', emit)
         {{ payload }}
     </div>
 
-    <v-input
-        v-else
-        v-model="payload"
-        autofocus
-        @update:model-value="save"
-        @blur="editModel = false"
-    />
+    <v-input v-else v-model="payload" @update:model-value="save" @blur="editModel = false" />
 </template>

packages/desktop/modules/item/pages/ISingle.vue

@@ -4,15 +4,13 @@ import { useRouter } from 'vue-router'
 
 import { useStore } from '@store/global'
 
-import LLayout from '@modules/layout/LLayout.vue'
-import LToolbar from '@modules/layout/components/LToolbar.vue'
 import EMarkdown from '@modules/entry/pages/EMarkdown.vue'
 
 import IValue from '../components/IValue.vue'
 import Item from '@core/entities/item'
-import { useState } from '@composables/state'
 import DirectoryEntry from '@core/entities/directory-entry'
 import { useColumnStore } from '@modules/column/store'
+import { useLocalStorage } from '@vueuse/core'
 
 // Props & Emit
 const props = defineProps({
@@ -36,11 +34,16 @@ const router = useRouter()
 
 const item = ref<Item>()
 
+const loading = ref(false)
+
 async function setItem() {
+    loading.value = true
+
     await store.item
         .show(props.collectionId, props.itemId)
         .then((r) => (item.value = r ?? undefined))
         .catch(() => router.push('404'))
+        .finally(() => (loading.value = false))
 }
 
 watch(props, setItem, {
@@ -59,12 +62,10 @@ async function load() {
     }
 }
 
-watch(() => props.collectionId, load, { deep: true })
+watch(() => props.collectionId, load)
 
 // drawer
-const drawer = useState('app:item-drawer', true, {
-    localStorage: true,
-})
+const drawer = useLocalStorage('app:item-drawer', true)
 
 // content path
 
@@ -84,22 +85,29 @@ watch(() => props.itemId, setContentPath, {
 </script>
 <template>
     <v-layout use-percentage>
-        <v-layout-drawer v-if="item" v-model="drawer" class="border-l border-lines px-4 py-4" right>
-            <i-value
-                v-for="c in columnStore.columns"
-                :key="c.id"
-                :column-id="c.id"
-                :collection-id="collectionId"
-                :item-id="item.id"
-                :label="c.label"
-                :type="c.type"
-                edit
-                class="mb-4 last:mb-0"
-            />
+        <v-layout-drawer :model-value="drawer" class="border-l border-lines px-4 py-4" right>
+            <div v-if="item">
+                <i-value
+                    v-for="c in columnStore.columns"
+                    :key="c.id"
+                    :column-id="c.id"
+                    :collection-id="collectionId"
+                    :item-id="item.id"
+                    :label="c.label"
+                    :type="c.type"
+                    edit
+                    class="mb-4 last:mb-0"
+                />
+            </div>
         </v-layout-drawer>
 
-        <v-layout-content v-if="contentPath">
-            <e-markdown ref="editorRef" :path="contentPath" :doc:scope="{ item }">
+        <v-layout-content>
+            <e-markdown
+                v-if="contentPath"
+                ref="editorRef"
+                :path="contentPath"
+                :doc:scope="{ item }"
+            >
                 <template #append-actions>
                     <v-btn mode="text" size="sm" @click="drawer = !drawer">
                         <v-icon name="cog" />