docs(PinnedItems): improve pinned / rail interaction

vuetifyjs · Apr 12, 2024 · 2935cc8 · 2935cc8
1 parent 21241e1
commit 2935cc8
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 6 deletions.
diff --git a/packages/docs/src/components/app/drawer/Drawer.vue b/packages/docs/src/components/app/drawer/Drawer.vue
@@ -9,7 +9,7 @@
     width="300"
     @update:rail="onUpdateRail"
   >
-    <AppDrawerPinnedItems />
+    <AppDrawerPinnedItems :rail="rail" />
 
     <AppListList
       v-model:opened="opened"

diff --git a/packages/docs/src/components/app/drawer/PinnedItems.vue b/packages/docs/src/components/app/drawer/PinnedItems.vue
@@ -22,7 +22,11 @@
                 class="me-1"
                 icon="mdi-pin-off"
                 size="16"
-                @click.prevent.stop="onClickPinRemove(itemProps)"
+                @click.prevent.stop="onClickPinRemove({
+                  title: itemProps.title,
+                  to: itemProps.to,
+                  category: '',
+                })"
               />
             </template>
           </v-list-item>
@@ -32,29 +36,37 @@
   </AppListList>
 </template>
 
-<script setup>
+<script lang="ts" setup>
+  import { Pin } from '@/stores/pins'
+
+  const props = defineProps<{ rail: boolean }>()
+
   const auth = useAuthStore()
   const pins = usePinsStore()
   const user = useUserStore()
   const router = useRouter()
 
-  const opened = ref([])
+  const _opened = ref<string[]>([])
+  const opened = computed({
+    get: () => props.rail ? [] : _opened.value,
+    set: val => _opened.value = val,
+  })
   const pinned = computed(() => ([{
     activeIcon: 'mdi-pin',
     inactiveIcon: 'mdi-pin-outline',
     items: [...pins.pins],
     title: 'Pinned',
   }]))
 
-  async function onClickPin (to) {
+  async function onClickPin (to: string) {
     pins.isPinning = true
 
     await router.replace(to)
 
     pins.isPinning = false
   }
 
-  function onClickPinRemove (pin) {
+  function onClickPinRemove (pin: Pin) {
     pins.toggle(false, pin)
   }