feat: menu

jaskang · Mar 28, 2024 · f308a85 · f308a85
1 parent 0c64628
commit f308a85
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 10 deletions.
diff --git a/packages/docs/components/menu.md b/packages/docs/components/menu.md
@@ -9,6 +9,7 @@ const items = ref([
   { type: 'divider' },
   { key: 'Trash', label: 'Trash',icon: TrashIcon  },
   {
+    key: 'Archive',
     label: 'Archive',
     icon: ArchiveBoxIcon,
     children: [
@@ -29,6 +30,7 @@ const items = ref([
   },
 ])
 
+const current = ref('Archive')
 </script>
 
 # Menu
@@ -37,6 +39,6 @@ const items = ref([
 
 <div class="flex flex-wrap gap-2 not-prose">
   <div class="">
-    <Menu :items="items" class="border rounded-md border-slate-200 w-40" /> 
+    <Menu :current="current" :items="items" class="border rounded-md border-slate-200 w-40" /> 
   </div>
 </div>
diff --git a/packages/vue/src/Menu/Menu.vue b/packages/vue/src/Menu/Menu.vue
@@ -8,24 +8,23 @@ const emit = defineEmits<{ click: [any] }>()
 const slots = defineSlots<{ default?(_: {}): any }>()
 const props = defineProps({
   title: String,
+  current: String,
   items: {
     type: Array as PropType<MenuItemType[]>,
     default: () => [],
   },
 })
 
-const current = ref<MenuItemRawType>()
-
 const isCurrent = (item: MenuItemRawType) => {
-  return item.key === current.value?.key
+  return item.key === props.current
 }
 </script>
 <template>
   <nav class="grid gap-1 p-1">
     <template v-for="item in items">
       <div v-if="isDividerItem(item)" class="h-[1px] w-full shrink-0 bg-slate-200" />
       <div v-if="isTitleItem(item)" class="px-3 text-xs font-medium leading-6 text-slate-400">{{ item.label }}</div>
-      <MenuItem v-if="isRawItem(item)" :item="item" :active="isCurrent(item)" />
+      <MenuItem v-if="isRawItem(item)" :item="item" :current="current" />
     </template>
   </nav>
 </template>
diff --git a/packages/vue/src/Menu/MenuItem.vue b/packages/vue/src/Menu/MenuItem.vue
@@ -9,7 +9,7 @@ const emit = defineEmits<{ click: [any] }>()
 const slots = defineSlots<{ default?(_: {}): any }>()
 const props = defineProps({
   item: { type: Object as PropType<MenuItemRawType>, required: true },
-  active: { type: Boolean, default: false },
+  current: String,
 })
 
 const elRef = ref<HTMLElement>()
@@ -19,7 +19,7 @@ const elRef = ref<HTMLElement>()
     ref="elRef"
     :class="[
       'group inline-flex h-9 items-center justify-start whitespace-nowrap rounded-md px-3 text-sm font-medium transition-colors disabled:pointer-events-none disabled:opacity-50',
-      active ? 'text-primary-600 bg-gray-50' : 'hover:text-primary-600 text-gray-700 hover:bg-gray-50',
+      current === item.key ? 'bg-primary-500 text-white' : 'hover:text-primary-600 text-slate-700 hover:bg-slate-100',
       item.disabled ? '' : 'cursor-pointer',
     ]"
   >

diff --git a/packages/vue/src/Select/Select.vue b/packages/vue/src/Select/Select.vue
@@ -71,13 +71,17 @@ const focused = ref(false)
     </Input>
     <template #content>
       <ScrollArea class="flex max-h-80 flex-col text-sm" mode="y">
-        <div class="py-1">
+        <div class="grid gap-1 p-1">
           <div
             v-for="item in options"
             :key="item.value"
             @click="selectHandler(item)"
-            class="relative cursor-default py-2 px-3 select-none"
-            :class="[item.value === modelValue ? 'bg-primary-100 text-primary-500 font-medium' : 'hover:bg-slate-100']"
+            class="relative rounded py-2 px-3 text-sm select-none"
+            :class="[
+              item.value === modelValue
+                ? 'bg-primary-500 font-medium text-white'
+                : 'hover:text-primary-600 hover:bg-slate-100',
+            ]"
           >
             {{ item.label }}
           </div>