From b04790566fb0e0d39051aeba350ccb3e596137eb Mon Sep 17 00:00:00 2001
From: Alex <49969959+alexzhang1030@users.noreply.github.com>
Date: Wed, 20 Dec 2023 14:17:12 +0800
Subject: [PATCH 1/3] build(client): cleanup existing bundle file

---
 packages/client/vite.config.ts     | 4 +++-
 packages/client/vite.lib.config.ts | 6 ++++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/client/vite.config.ts b/packages/client/vite.config.ts
index 91a69f5fa..86b305dd7 100644
--- a/packages/client/vite.config.ts
+++ b/packages/client/vite.config.ts
@@ -17,7 +17,9 @@ export default defineConfig(mergeConfig(baseConfig, {
         // Removed `browser-extension` and `electron` on `build:lib`
         // Remove `vite/dist/client` on building
         ;['../vite/dist/client'].forEach((dir) => {
-          fse.rmSync(resolve(__dirname, dir), { recursive: true, force: true })
+          const absoluteDir = resolve(__dirname, dir)
+          if (fse.existsSync(absoluteDir))
+            fse.removeSync(absoluteDir)
         })
 
         ;['../browser-extension/client', '../electron/client', '../vite/dist/client'].forEach((dir) => {
diff --git a/packages/client/vite.lib.config.ts b/packages/client/vite.lib.config.ts
index 4414ebbbb..aba23d8de 100644
--- a/packages/client/vite.lib.config.ts
+++ b/packages/client/vite.lib.config.ts
@@ -45,8 +45,10 @@ export default defineConfig(mergeConfig(baseConfig, {
         ;['../browser-extension/client', '../electron/client'].forEach((dir) => {
           // NOTE: remember the order of `build:lib` and `build`,
           // if change the order, rmSync must set in `build` stage
-          fse.rmSync(resolve(__dirname, dir), { recursive: true, force: true })
-          fse.copySync(clientFile, resolve(__dirname, dir))
+          const absoluteDir = resolve(__dirname, dir)
+          if (fse.existsSync(absoluteDir))
+            fse.removeSync(absoluteDir)
+          fse.copySync(clientFile, absoluteDir)
         })
       },
     },

From f32de9994e17d365e9cf9d52164732d2cba1ce06 Mon Sep 17 00:00:00 2001
From: Alex <49969959+alexzhang1030@users.noreply.github.com>
Date: Wed, 20 Dec 2023 14:18:12 +0800
Subject: [PATCH 2/3] refactor(ui): rem based (#90)

---
 packages/client/src/App.vue                     |  2 +-
 packages/client/src/pages/settings.vue          |  9 +++++----
 packages/ui/src/components/Button.vue           |  8 ++++----
 packages/ui/src/components/Checkbox.vue         |  4 ++--
 packages/ui/src/components/Confirm.vue          |  4 ++--
 packages/ui/src/components/Dialog.vue           | 14 +++++++-------
 packages/ui/src/components/Drawer.vue           |  2 +-
 packages/ui/src/components/FormField.vue        |  2 +-
 packages/ui/src/components/Input.vue            |  4 ++--
 packages/ui/src/components/LoadingIndicator.vue |  2 +-
 packages/ui/src/components/Select.vue           |  2 +-
 packages/ui/src/components/Switch.vue           |  6 +++---
 12 files changed, 30 insertions(+), 29 deletions(-)

diff --git a/packages/client/src/App.vue b/packages/client/src/App.vue
index 847dd4341..6981e6d1a 100644
--- a/packages/client/src/App.vue
+++ b/packages/client/src/App.vue
@@ -23,7 +23,7 @@ const sidebarExpanded = computed(() => clientState.value.expandSidebar)
 
 watchEffect(() => {
   const scale = devtoolsClientState.value.scale
-  document.body.style.fontSize = `${scale * 15}px`
+  document.documentElement.style.fontSize = `${scale * 15}px`
 })
 
 watch(connected, (v) => {
diff --git a/packages/client/src/pages/settings.vue b/packages/client/src/pages/settings.vue
index 4ad2db819..5f3c1626c 100644
--- a/packages/client/src/pages/settings.vue
+++ b/packages/client/src/pages/settings.vue
@@ -166,12 +166,13 @@ const minimizePanelInteractiveLabel = computed(() => {
               Switch to Overlay Mode
             </VueButton>
           </div>
-          <!-- TODO: need rewrite client/(UI package) to rem based -->
-          <!-- <div mx--2 my1 h-1px border="b base" op75 />
+          <div mx--2 my1 h-1px border="b base" op75 />
           <p>UI Scale</p>
           <div>
-            <VueSelect v-model="scale" :options="scaleOptions.map(([label, value]) => ({ label, value }))" />
-          </div> -->
+            <VueSelect
+              v-model="scale" :options="scaleOptions.map(([label, value]) => ({ label, value }))" :button-props="{ outlined: true }"
+            />
+          </div>
           <div mx--2 my1 h-1px border="b base" op75 />
           <div class="flex items-center gap2 text-sm">
             <VueCheckbox v-model="expandSidebar" />
diff --git a/packages/ui/src/components/Button.vue b/packages/ui/src/components/Button.vue
index 1f90be0fb..1f122df1b 100644
--- a/packages/ui/src/components/Button.vue
+++ b/packages/ui/src/components/Button.vue
@@ -108,7 +108,7 @@ const variantClasses = computed(() => {
   <component
     :is="component" v-bind="$attrs"
     role="button" :aria-disabled="disabled"
-    class="$ui-base $ui-inline-fcc inline-flex cursor-pointer select-none gap5px py-0 no-underline $ui-transition"
+    class="$ui-base $ui-inline-fcc inline-flex cursor-pointer select-none gap1.25 py-0 no-underline $ui-transition"
     :class="[
       [styles.common[props.type]],
       {
@@ -119,14 +119,14 @@ const variantClasses = computed(() => {
       },
       [
         outlined ? 'b-1 $ui-border-base active:ring-3 shadow-sm' : 'border-none',
-        size === 'mini' ? 'px4px text-12px h22px' : 'px-14px text-14px h32px',
+        size === 'mini' ? 'px1 text-3 h5.5' : 'px3.5 text-3.5 h8',
         variantClasses,
       ],
     ]"
     @click.capture="handleClick"
   >
-    <LoadingIndicator v-if="loading" class="mt2px h-full w-12px" />
-    <slot v-else name="icon" class="h-full w-12px $ui-inline-fcc" />
+    <LoadingIndicator v-if="loading" class="mt0.5 h-full w3" />
+    <slot v-else name="icon" class="h-full w3 $ui-inline-fcc" />
     <div v-if="slots.default">
       <slot />
     </div>
diff --git a/packages/ui/src/components/Checkbox.vue b/packages/ui/src/components/Checkbox.vue
index 21764cee4..75233182a 100644
--- a/packages/ui/src/components/Checkbox.vue
+++ b/packages/ui/src/components/Checkbox.vue
@@ -17,7 +17,7 @@ const value = useVModel(props, 'modelValue', emit)
 
 <template>
   <div
-    class="relative $ui-base h20px w20px $ui-inline-fcc cursor-pointer border-2px rounded-5px transition-colors duration-200 ease-in-out"
+    class="relative $ui-base h5 w5 $ui-inline-fcc cursor-pointer border-0.125rem rounded-1.25 transition-colors duration-200 ease-in-out"
     :class="[
       value
         ? variant === 'normal'
@@ -31,7 +31,7 @@ const value = useVModel(props, 'modelValue', emit)
       :class="[
         value ? 'opacity-100' : 'opacity-0',
       ]"
-      class="h-60% w-35% transform-translate-y--1px transform-rotate-45 border-width-[0_2px_2px_0] border-white border-solid transition-opacity duration-200 ease-in-out"
+      class="h-60% w-35% transform-translate-y--0.25 transform-rotate-45 border-width-[0_0.125rem_0.125rem_0] border-white border-solid transition-opacity duration-200 ease-in-out"
     />
   </div>
 </template>
diff --git a/packages/ui/src/components/Confirm.vue b/packages/ui/src/components/Confirm.vue
index 768db1b3a..476b1981c 100644
--- a/packages/ui/src/components/Confirm.vue
+++ b/packages/ui/src/components/Confirm.vue
@@ -18,7 +18,7 @@ const props = withDefaults(defineProps<{
   cancelText: 'Cancel',
   confirmText: 'Confirm',
   width: '20%',
-  height: '150px',
+  height: '9rem',
   title: 'Warning',
   loading: false,
   autoClose: true,
@@ -50,7 +50,7 @@ function close(close = false) {
       {{ content }}
     </slot>
     <template #footer>
-      <div class="$ui-fec gap10px">
+      <div class="$ui-fec gap2.5">
         <VueButton
           @click="() => {
             emit('cancel')
diff --git a/packages/ui/src/components/Dialog.vue b/packages/ui/src/components/Dialog.vue
index bf1477b18..c550b8042 100644
--- a/packages/ui/src/components/Dialog.vue
+++ b/packages/ui/src/components/Dialog.vue
@@ -19,8 +19,8 @@ const props = withDefaults(
     title: 'Dialog',
     modelValue: false,
     autoClose: true,
-    width: '500px',
-    height: '300px',
+    width: '32rem',
+    height: '18rem',
     closable: true,
     mountTo: 'body',
   },
@@ -58,21 +58,21 @@ onMounted(() => isMount.value = true)
 <template>
   <Teleport v-if="isMount || mountTo === 'body'" :to="mountTo">
     <Transition
-      enter-from-class="opacity-0 [&_.modal]:scale-95 [&_.content,&_.footer]:translate-y--10px [&_.content,&_.footer]:opacity-0"
+      enter-from-class="opacity-0 [&_.modal]:scale-95 [&_.content,&_.footer]:translate-y--2.5 [&_.content,&_.footer]:opacity-0"
       enter-to-class="opacity-100 [&_.modal]:scale-100"
       leave-from-class="opacity-100 [&_.modal]:scale-100"
       leave-to-class="opacity-0 [&_.modal]:scale-95"
     >
       <Overlay v-if="show" :dim="dim" :blur="blur">
         <div
-          class="modal relative grid grid-rows-[30px_1fr_40px] $ui-base max-h-[calc(100vh-100x)] max-w-[calc(100vw-100px)] min-h-100px min-w-200px gap-10px rounded-md bg-white px24px py18px color-gray-800 shadow-2xl transition-transform transition-duration-300 dark:bg-gray-900 dark:color-gray-200"
+          class="modal relative grid grid-rows-[1.875rem_1fr_2.5rem] $ui-base max-h-[calc(100vh-6.25rem)] max-w-[calc(100vw-6.25rem)] min-h-6.25rem min-w-12.5rem gap-2.5 rounded-md bg-white px6 py4.5 color-gray-800 shadow-2xl transition-transform transition-duration-300 dark:bg-gray-900 dark:color-gray-200"
           :style="{
             width: props.width,
             height: props.height,
           }"
         >
-          <div class="h-30px w-full $ui-fbc">
-            <div class="text-18px">
+          <div class="h7.5 w-full $ui-fbc">
+            <div class="text-4.5">
               <slot name="title">
                 {{ props.title }}
               </slot>
@@ -84,7 +84,7 @@ onMounted(() => isMount.value = true)
           <div class="content transition-all transition-duration-300">
             <slot />
           </div>
-          <div class="footer h32px w-full transition-all transition-duration-300 delay-250">
+          <div class="footer h8 w-full transition-all transition-duration-300 delay-250">
             <slot name="footer">
               <slot name="footer">
                 <div class="$ui-fcc">
diff --git a/packages/ui/src/components/Drawer.vue b/packages/ui/src/components/Drawer.vue
index a6d29d409..a6e800aab 100644
--- a/packages/ui/src/components/Drawer.vue
+++ b/packages/ui/src/components/Drawer.vue
@@ -85,7 +85,7 @@ onMounted(() => isMount.value = true)
             top: placement === 'bottom' ? 'auto' : `${height}px`,
             height: ['top', 'bottom'].includes(placement) ? 'auto' : `calc(100% - ${height}px)`,
           }"
-          class="drawer pointer-events-auto absolute min-w-100px of-auto $ui-border-base transition-transform transition-duration-300"
+          class="drawer pointer-events-auto absolute min-w-25 of-auto $ui-border-base transition-transform transition-duration-300"
           @click.stop
         >
           <div v-if="closable" class="i-carbon-close absolute right-1.5 top-1.5 $ui-z-max cursor-pointer p1 text-lg $ui-text" @click="show = false" />
diff --git a/packages/ui/src/components/FormField.vue b/packages/ui/src/components/FormField.vue
index 7e7359b12..f77219750 100644
--- a/packages/ui/src/components/FormField.vue
+++ b/packages/ui/src/components/FormField.vue
@@ -44,7 +44,7 @@ const iconMapping = {
   <div class="$ui-base">
     <VueInput v-model="value" :placeholder="placeholder" @update-focused="f => focused = f" />
     <div
-      class="mt2 $ui-base text-14px" :class="[
+      class="mt2 $ui-base text-3.5" :class="[
         statusMapping[status],
         { 'opacity-65': !focused },
       ]"
diff --git a/packages/ui/src/components/Input.vue b/packages/ui/src/components/Input.vue
index 30b1a4d66..4f5449627 100644
--- a/packages/ui/src/components/Input.vue
+++ b/packages/ui/src/components/Input.vue
@@ -76,7 +76,7 @@ watchEffect(() => {
 
 <template>
   <div
-    class="group relative w-200px w-auto flex items-center justify-between gap-2px overflow-hidden b-1 rounded-1 px12px py-3px color-gray-800 dark:color-gray-100"
+    class="group relative w-50 w-auto flex items-center justify-between gap-0.5 overflow-hidden b-1 rounded-1 px3 py-0.75 color-gray-800 dark:color-gray-100"
     :class="[
       {
         'border-none bg-transparent group': variant === 'flat',
@@ -111,7 +111,7 @@ watchEffect(() => {
     </div>
     <!-- Focus animation -->
     <div
-      v-if="!noFocusAnimation" class="pointer-events-none absolute bottom--1px left-50% right-50% z-9999 h-3px bg-primary-500 opacity-0 transition-all duration-240 group-[&.focused]:(left-0 right-0 opacity-100) group-[&.accent.focused]:bg-accent-500"
+      v-if="!noFocusAnimation" class="pointer-events-none absolute bottom--0.25 left-50% right-50% z-9999 h-0.75 bg-primary-500 opacity-0 transition-all duration-240 group-[&.focused]:(left-0 right-0 opacity-100) group-[&.accent.focused]:bg-accent-500"
     />
   </div>
 </template>
diff --git a/packages/ui/src/components/LoadingIndicator.vue b/packages/ui/src/components/LoadingIndicator.vue
index 345a6283e..71046d768 100644
--- a/packages/ui/src/components/LoadingIndicator.vue
+++ b/packages/ui/src/components/LoadingIndicator.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="h-12px w-12px $ui-inline-fcc">
+  <div class="h-3 w-3 $ui-inline-fcc">
     <svg class="animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
       <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
       <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
diff --git a/packages/ui/src/components/Select.vue b/packages/ui/src/components/Select.vue
index 68e2fde9c..1ad748e1a 100644
--- a/packages/ui/src/components/Select.vue
+++ b/packages/ui/src/components/Select.vue
@@ -46,7 +46,7 @@ const label = computed(() => {
     }"
   >
     <template #popper>
-      <div class="m1 min-w-140px w-auto flex flex-col">
+      <div class="m1 min-w-35 w-auto flex flex-col">
         <VueButton
           v-for="item in options" :key="item.value" v-close-popper="props.autoClose" :disabled="disabled" round="normal"
           class="flex-[auto_1_1] not-action:[&:not(.active)]:bg-transparent!"
diff --git a/packages/ui/src/components/Switch.vue b/packages/ui/src/components/Switch.vue
index 1212a70bc..d6032f79c 100644
--- a/packages/ui/src/components/Switch.vue
+++ b/packages/ui/src/components/Switch.vue
@@ -19,17 +19,17 @@ const toggleValue = useToggle(value)
     :class="[
       disabled ? 'cursor-not-allowed' : 'cursor-pointer',
     ]"
-    class="$ui-base $ui-if-sc cursor-pointer select-none gap5px vertical-mid text-14px" role="checkbox" @click="!disabled && toggleValue()"
+    class="$ui-base $ui-if-sc cursor-pointer select-none gap1.25 vertical-mid text-3.5" role="checkbox" @click="!disabled && toggleValue()"
   >
     <slot />
     <div
       :class="{
         selected: value,
       }"
-      class="group relative $ui-base h16px w32px rounded-8px bg-primary-100 transition-colors dark:bg-gray-700 [&.selected]:bg-primary-500!"
+      class="group relative $ui-base h4 w8 rounded-2 bg-primary-100 transition-colors dark:bg-gray-700 [&.selected]:bg-primary-500!"
     >
       <div
-        class="h16px w16px rounded-full bg-primary-800 transition-transform group-[&.selected]:transform-translate-x-16px dark:bg-white"
+        class="h4 w4 rounded-full bg-primary-800 transition-transform group-[&.selected]:transform-translate-x-4 dark:bg-white"
         :class="[
           { 'group-hover:opacity-75 group-active:scale-85': !disabled },
           { 'opacity-65': disabled },

From 06885cc2ceab14564a85cdf65214fad783091fed Mon Sep 17 00:00:00 2001
From: Alex <49969959+alexzhang1030@users.noreply.github.com>
Date: Wed, 20 Dec 2023 15:47:26 +0800
Subject: [PATCH 3/3] refactor(ui): support multiple select for `VueSelect`
 (#92)

---
 packages/client/src/pages/assets.vue   | 60 +++++++++++---------
 packages/ui/src/components/Select.vue  | 76 +++++++++++++++++++-------
 packages/ui/storybook/Select.story.vue | 21 +++++++
 3 files changed, 112 insertions(+), 45 deletions(-)

diff --git a/packages/client/src/pages/assets.vue b/packages/client/src/pages/assets.vue
index 19357c2cc..23a90c519 100644
--- a/packages/client/src/pages/assets.vue
+++ b/packages/client/src/pages/assets.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { AssetInfo } from '@vue-devtools-next/core'
-import { VueCheckbox, VueDrawer, VueDropdown, VueIcon } from '@vue-devtools-next/ui'
+import { VueCheckbox, VueDrawer, VueIcon, VueSelect } from '@vue-devtools-next/ui'
 import { useDevToolsBridgeRpc } from '@vue-devtools-next/core'
 import Fuse from 'fuse.js'
 
@@ -11,15 +11,20 @@ const navbar = ref<HTMLElement>()
 const view = ref('grid')
 const assets = ref<AssetInfo[]>([])
 const bridgeRpc = useDevToolsBridgeRpc()
-const extensions = reactiveComputed(() => {
-  const results: { name: string, value: boolean }[] = []
+const uniqAssetsTypes = computed(() => {
+  const results: { label: string, value: string }[] = []
   for (const asset of assets.value || []) {
     const ext = asset.path.split('.').pop()
-    if (ext && !results.find(e => e.name === ext))
-      results.push({ name: ext, value: true })
+    if (ext && !results.find(e => e.value === ext))
+      results.push({ label: ext, value: ext })
   }
   return results
 })
+const filteredExtensions = ref<string[]>([])
+// first time, selected all
+watchOnce(() => uniqAssetsTypes.value, (v) => {
+  filteredExtensions.value = v.map(i => i.value)
+})
 const selected = ref<AssetInfo>()
 const fuse = computed(() => new Fuse(assets.value || [], {
   keys: [
@@ -32,7 +37,7 @@ const filtered = computed(() => {
     : (assets.value || [])
   return result.filter((asset) => {
     const ext = asset.path.split('.').pop()
-    return !ext || extensions.some(e => e.name === ext && e.value)
+    return !ext || filteredExtensions.value.includes(ext)
   })
 })
 
@@ -94,29 +99,32 @@ function toggleView() {
             title="File Upload" :border="false" flex="~ gap-0!" action
             @click="dropzone = !dropzone"
           /> -->
-          <VueDropdown direction="end" n="sm primary">
-            <IconTitle
-              v-tooltip.bottom-end="'Filter'"
-              icon="i-carbon-filter hover:op50" :border="false"
-              title="Filter" relative cursor-pointer p2 text-lg
-              @click="() => { }"
+          <VueSelect v-model="filteredExtensions" :multiple="true" :options="uniqAssetsTypes">
+            <template #button>
+              <IconTitle
+                v-tooltip.bottom-end="'Filter'"
+                icon="i-carbon-filter hover:op50" :border="false"
+                title="Filter" relative cursor-pointer p2 text-lg
+                @click="() => { }"
+              >
+                <span flex="~ items-center justify-center" absolute bottom-0 right-2px h-4 w-4 rounded-full bg-primary-800 text-8px text-white>
+                  {{ filteredExtensions.length }}
+                </span>
+              </IconTitle>
+            </template>
+            <template
+              #item="{
+                item, active,
+              }"
             >
-              <span flex="~ items-center justify-center" absolute bottom-0 right-2px h-4 w-4 rounded-full bg-primary-800 text-8px text-white>
-                {{ extensions.length }}
-              </span>
-            </IconTitle>
-            <template #popper>
-              <div flex="~ col" w-30 of-auto>
-                <div
-                  v-for="item of extensions" :key="item.name"
-                  w-full flex="~ gap-2 items-center" rounded px2 py2
-                >
-                  <VueCheckbox v-model="item.value" />
-                  <span text-xs op75>{{ item.name }}</span>
-                </div>
+              <div
+                w-full flex="~ gap-2 items-center" rounded px2 py2
+              >
+                <VueCheckbox :model-value="active" />
+                <span text-xs op75>{{ item.label }}</span>
               </div>
             </template>
-          </VueDropdown>
+          </VueSelect>
           <VueIcon
             v-tooltip.bottom-end="'Toggle View'"
             :border="false"
diff --git a/packages/ui/src/components/Select.vue b/packages/ui/src/components/Select.vue
index 1ad748e1a..728489077 100644
--- a/packages/ui/src/components/Select.vue
+++ b/packages/ui/src/components/Select.vue
@@ -1,31 +1,40 @@
-<script setup lang="ts" generic="K extends number | string, V">
-import { computed } from 'vue'
+<script setup lang="ts" generic="Value extends number | string, Label, M extends boolean">
+import { computed, useSlots } from 'vue'
 import { VClosePopper as vClosePopper } from 'floating-vue'
 import VueDropdown from './Dropdown.vue'
 import VueButton from './Button.vue'
 import type { ButtonProps } from './Button.vue'
 
 const props = withDefaults(defineProps<{
-  modelValue: K
-  options: { label: V, value: K }[]
+  modelValue: M extends true ? Value[] : Value
+  multiple?: M
+  options: { label: Label, value: Value }[]
   placeholder?: string
   autoClose?: boolean
   disabled?: boolean
-  labelRenderer?: (label: V) => string
+  labelRenderer?: (label: Label) => string
   buttonProps?: ButtonProps
 }>(), {
+  // @ts-expect-error typing infer error from vue
+  multiple: false,
   placeholder: 'Select...',
   autoClose: true,
   disabled: false,
-  labelRenderer: (label: V) => String(label),
+  labelRenderer: (label: Label) => String(label),
   buttonClass: '',
   buttonProps: () => ({}),
 })
 
 const emit = defineEmits<{
-  'update:modelValue': [value: K]
+  'update:modelValue': [value: M extends true ? Value[] : Value]
 }>()
 
+defineSlots<{
+  item(props: { item: { label: Label, value: Value }, active: boolean, disabled: boolean }): any
+  button(): any
+}>()
+const slots = useSlots()
+
 const value = computed({
   get: () => props.modelValue,
   set: v => emit('update:modelValue', v),
@@ -35,6 +44,17 @@ const label = computed(() => {
   const option = props.options.find(i => i.value === value.value)
   return option?.label ? props.labelRenderer(option.label) : props.placeholder
 })
+
+function onToggleSelection(item: { label: Label, value: Value }) {
+  if (props.multiple) {
+    // @ts-expect-error typing infer error from vue
+    value.value = value.value.includes(item.value) ? value.value.filter(i => i !== item.value) : [...value.value, item.value]
+  }
+  else {
+    // @ts-expect-error typing infer error from vue
+    value.value = item.value
+  }
+}
 </script>
 
 <template>
@@ -47,20 +67,38 @@ const label = computed(() => {
   >
     <template #popper>
       <div class="m1 min-w-35 w-auto flex flex-col">
-        <VueButton
-          v-for="item in options" :key="item.value" v-close-popper="props.autoClose" :disabled="disabled" round="normal"
-          class="flex-[auto_1_1] not-action:[&:not(.active)]:bg-transparent!"
-          :class="{
-            active: item.value === value,
-          }"
-          @click="() => {
-            value = item.value
-          }"
-        >
-          {{ item.label }}
-        </VueButton>
+        <template v-if="slots.item">
+          <div
+            v-for="item in options"
+            :key="item.value" class="cursor-pointer" @click="onToggleSelection(item)"
+          >
+            <slot
+              name="item" v-bind="{
+                item,
+                active: multiple ? (value as Value[]).includes(item.value) : item.value === value,
+                disabled,
+              }"
+            />
+          </div>
+        </template>
+        <template v-else>
+          <VueButton
+            v-for="item in options" :key="item.value"
+            v-close-popper="autoClose" :disabled="disabled" round="normal"
+            class="flex-[auto_1_1] not-hover:[&:not(.active)]:bg-transparent!"
+            :class="{
+              active: multiple ? (value as Value[]).includes(item.value) : item.value === value,
+            }"
+            @click="onToggleSelection(item)"
+          >
+            {{ item.label }}
+          </VueButton>
+        </template>
       </div>
     </template>
+    <template v-if="slots.button" #default>
+      <slot name="button" />
+    </template>
     <template #button-icon-right>
       <div class="i-mdi-chevron-down" />
     </template>
diff --git a/packages/ui/storybook/Select.story.vue b/packages/ui/storybook/Select.story.vue
index d79525599..c2a7f0049 100644
--- a/packages/ui/storybook/Select.story.vue
+++ b/packages/ui/storybook/Select.story.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import Select from '../src/components/Select.vue'
+import { VueCheckbox } from '../src'
 
 const options = [
   {
@@ -22,6 +23,7 @@ const options = [
 ]
 
 const current = ref(options[0].value)
+const currentMultiple = ref([options[0].value, options[1].value])
 const disabled = ref(false)
 </script>
 
@@ -40,5 +42,24 @@ const disabled = ref(false)
     <Variant title="auto-close set false">
       <Select v-model="current" :options="options" :auto-close="false" :disabled="disabled" />
     </Variant>
+    <Variant title="multiple select">
+      <Select v-model="currentMultiple" :multiple="true" :options="options" :disabled="disabled" :auto-close="false" />
+      Value: {{ currentMultiple }}
+    </Variant>
+    <Variant title="custom item">
+      <Select v-model="currentMultiple" :multiple="true" :options="options" :disabled="disabled" :auto-close="false">
+        <template #item="{ item: { label }, active }">
+          {{ label }} <VueCheckbox :model-value="active" />
+        </template>
+      </Select>
+      Value: {{ currentMultiple }}
+    </Variant>
+    <Variant title="custom button">
+      <Select v-model="currentMultiple" :multiple="true" :options="options" :disabled="disabled" :auto-close="false">
+        <template #button>
+          <button>click me</button>
+        </template>
+      </Select>
+    </Variant>
   </Story>
 </template>