refactor(ui): support multiple select for VueSelect (#92)

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"

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>

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>