feat(ContextMenu/DropdownMenu): handle loading field in items

playground/app/pages/components/command-palette.vue

@@ -33,7 +33,8 @@ const groups = computed(() => [{
     icon: 'i-heroicons-document-plus',
     loading: loading.value,
     onSelect(e: Event) {
-      e?.preventDefault()
+      e.preventDefault()
+
       toast.add({ title: 'New file added!' })
 
       loading.value = true
@@ -48,7 +49,8 @@ const groups = computed(() => [{
     suffix: 'Create a new folder in the current directory or workspace.',
     icon: 'i-heroicons-folder-plus',
     onSelect(e: Event) {
-      e?.preventDefault()
+      e.preventDefault()
+
       toast.add({ title: 'New folder added!' })
     },
     kbds: ['meta', 'F']
@@ -57,7 +59,8 @@ const groups = computed(() => [{
     suffix: 'Add a hashtag to the current item.',
     icon: 'i-heroicons-hashtag',
     onSelect(e: Event) {
-      e?.preventDefault()
+      e.preventDefault()
+
       toast.add({ title: 'Hashtag added!' })
     },
     kbds: ['meta', 'H']
@@ -66,7 +69,8 @@ const groups = computed(() => [{
     suffix: 'Add a label to the current item.',
     icon: 'i-heroicons-tag',
     onSelect(e: Event) {
-      e?.preventDefault()
+      e.preventDefault()
+
       toast.add({ title: 'Label added!' })
     },
     kbds: ['meta', 'L']

playground/app/pages/components/context-menu.vue

@@ -1,9 +1,12 @@
 <script setup lang="ts">
 import theme from '#build/ui/context-menu'
 
-const items = [
+const loading = ref(false)
+
+const items = computed(() => [
   [{
     label: 'My account',
+    type: 'label' as const,
     avatar: {
       src: 'https://github.com/benjamincanac.png'
     }
@@ -37,7 +40,16 @@ const items = [
     label: 'Collapse Pinned Tabs',
     disabled: true
   }], [{
-    label: 'Refresh the Page'
+    label: 'Refresh the Page',
+    loading: loading.value,
+    onSelect(e: Event) {
+      e.preventDefault()
+
+      loading.value = true
+      setTimeout(() => {
+        loading.value = false
+      }, 2000)
+    }
   }, {
     label: 'Clear Cookies and Refresh'
   }, {
@@ -72,13 +84,13 @@ const items = [
       }
     }]]
   }]
-]
+])
 
 const sizes = Object.keys(theme.variants.size)
 
 const size = ref('md' as const)
 
-defineShortcuts(extractShortcuts(items))
+defineShortcuts(extractShortcuts(items.value))
 </script>
 
 <template>

playground/app/pages/components/dropdown-menu.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import theme from '#build/ui/dropdown-menu'
 
-const items = [
+const loading = ref(false)
+
+const items = computed(() => [
   [{
     label: 'My account',
     avatar: {
@@ -45,7 +47,7 @@ const items = [
       icon: 'i-heroicons-link',
       kbds: ['meta', 'i'],
       onSelect(e: Event) {
-        e?.preventDefault()
+        e.preventDefault()
         console.log('Invite by link clicked')
       }
     }], [{
@@ -80,8 +82,14 @@ const items = [
     label: 'New team',
     icon: 'i-heroicons-plus',
     kbds: ['meta', 'n'],
-    onSelect() {
-      console.log('New team clicked')
+    loading: loading.value,
+    onSelect(e: Event) {
+      e.preventDefault()
+
+      loading.value = true
+      setTimeout(() => {
+        loading.value = false
+      }, 2000)
     }
   }], [{
     label: 'GitHub',
@@ -112,13 +120,13 @@ const items = [
       console.log('Logout clicked')
     }
   }]
-]
+])
 
 const sizes = Object.keys(theme.variants.size)
 
 const size = ref('md' as const)
 
-defineShortcuts(extractShortcuts(items))
+defineShortcuts(extractShortcuts(items.value))
 </script>
 
 <template>