@proj-airi/ui 0.9.0-alpha.21 → 0.9.0-alpha.23

package/README.md

@@ -58,11 +58,12 @@ import { Button } from '@proj-airi/ui'
     * [TransitionVertical](src/components/Animations/TransitionVertical.vue)
 * [Form](src/components/Form)
     * [Checkbox](src/components/Form/Checkbox)
+    * [Select](src/components/Form/Select)
     * [Field](src/components/Form/Field)
     * [Input](src/components/Form/Input)
     * [Radio](src/components/Form/Radio)
     * [Range](src/components/Form/Range)
-    * [Select](src/components/Form/Select)
+    * [ComboboxSelect](src/components/Form/Select)
     * [Textarea](src/components/Form/Textarea)
 
 ## License

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@proj-airi/ui",
   "type": "module",
-  "version": "0.9.0-alpha.21",
+  "version": "0.9.0-alpha.23",
   "description": "A collection of UI components that used by Project AIRI",
   "author": {
     "name": "Moeru AI Project AIRI Team",

package/src/components/form/checkbox/checkbox.vue

@@ -1,12 +1,17 @@
 <script setup lang="ts">
 import { SwitchRoot, SwitchThumb } from 'reka-ui'
 
+const props = defineProps<{
+  disabled?: boolean
+}>()
+
 const modelValue = defineModel<boolean>({ required: true })
 </script>
 
 <template>
   <SwitchRoot
     v-model="modelValue"
+    :disabled="props.disabled"
     :class="[
       'duration-250 ease-in-out',
       'focus-within:outline-none',
@@ -16,6 +21,7 @@ const modelValue = defineModel<boolean>({ required: true })
       'data-[state=checked]:bg-primary-400 data-[state=unchecked]:bg-neutral-300 data-[state=checked]:dark:bg-primary-400/80 dark:data-[state=unchecked]:bg-neutral-800',
       'relative h-7 w-12.5 rounded-full',
       'shadow-sm focus-within:shadow-none',
+      props.disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer',
     ]"
   >
     <SwitchThumb

package/src/components/form/combobox/combobox.vue

@@ -20,6 +20,8 @@ import {
 const props = defineProps<{
   options: { groupLabel: string, children?: { label: string, value: T }[] }[]
   placeholder?: string
+  contentMinWidth?: string | number
+  contentWidth?: string | number
 }>()
 
 const modelValue = defineModel<T>({ required: false })
@@ -28,6 +30,14 @@ function toDisplayValue(value: T): string {
   const option = props.options.flatMap(group => group.children).find(option => option?.value === value)
   return option ? option.label : props.placeholder || ''
 }
+
+function toCssSize(value?: string | number): string | undefined {
+  if (value == null) {
+    return undefined
+  }
+
+  return typeof value === 'number' ? `${value}px` : value
+}
 </script>
 
 <template>
@@ -76,12 +86,15 @@ function toDisplayValue(value: T): string {
           // Dialog/Drawer are not hidden behind the overlay or dismissed unexpectedly.
           // Read more at: https://github.com/moeru-ai/airi/issues/1136
           'z-[10010]',
-          'w-full min-w-[160px] overflow-hidden rounded-xl shadow-sm border will-change-[opacity,transform]',
+          'w-full overflow-hidden rounded-xl shadow-sm border will-change-[opacity,transform]',
           'data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade',
           'bg-white dark:bg-neutral-900',
           'border-neutral-200 dark:border-neutral-800 border-solid border-2 focus:border-neutral-300 dark:focus:border-neutral-600',
         ]"
-        :style="{ width: 'var(--reka-combobox-trigger-width)' }"
+        :style="{
+          width: toCssSize(props.contentWidth) ?? 'var(--reka-combobox-trigger-width)',
+          minWidth: toCssSize(props.contentMinWidth) ?? '160px',
+        }"
       >
         <ComboboxViewport :class="['p-[2px]', 'max-h-50dvh', 'overflow-y-auto']">
           <ComboboxEmpty

package/src/components/form/combobox-select/combobox-select.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { provide, ref } from 'vue'
+
+import { Combobox } from '../combobox'
+
+const props = defineProps<{
+  options?: { label: string, value: string | number }[]
+  placeholder?: string
+  disabled?: boolean
+  title?: string
+  layout?: 'horizontal' | 'vertical'
+  contentMinWidth?: string | number
+  contentWidth?: string | number
+}>()
+
+const show = ref(false)
+const modelValue = defineModel<string | number>({ required: false })
+
+function selectOption(value: string | number) {
+  modelValue.value = value
+}
+
+function handleHide() {
+  show.value = false
+}
+
+provide('selectOption', selectOption)
+provide('hide', handleHide)
+</script>
+
+<template>
+  <Combobox
+    v-model="modelValue"
+    :default-value="modelValue"
+    :options="[{ groupLabel: '', children: props.options }]"
+    :content-min-width="props.contentMinWidth"
+    :content-width="props.contentWidth"
+  />
+</template>

package/src/components/form/combobox-select/index.ts

@@ -0,0 +1,2 @@
+export { default as ComboboxOption } from './combobox-option.vue'
+export { default as ComboboxSelect } from './combobox-select.vue'

package/src/components/form/field/field-checkbox.vue

@@ -4,6 +4,7 @@ import { Checkbox } from '../checkbox'
 const props = defineProps<{
   label?: string
   description?: string
+  disabled?: boolean
 }>()
 
 const modelValue = defineModel<boolean>({ required: true })
@@ -24,7 +25,7 @@ const modelValue = defineModel<boolean>({ required: true })
           </slot>
         </div>
       </div>
-      <Checkbox v-model="modelValue" />
+      <Checkbox v-model="modelValue" :disabled="props.disabled" />
     </div>
   </label>
 </template>

package/src/components/form/field/{field-select.vue → field-combobox.vue}

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Select } from '../select'
+import { ComboboxSelect } from '../combobox-select'
 
 const props = withDefaults(defineProps<{
   label: string
@@ -42,7 +42,7 @@ const modelValue = defineModel<string>({ required: false })
         </div>
       </div>
       <slot>
-        <Select
+        <ComboboxSelect
           v-model="modelValue"
           :options="props.options?.filter(option => option.label && option.value) || []"
           :placeholder="props.placeholder"
@@ -58,7 +58,7 @@ const modelValue = defineModel<string>({ required: false })
           <template #default="{ value }">
             {{ props.options?.find(option => option.value === value)?.label || props.placeholder }}
           </template>
-        </Select>
+        </ComboboxSelect>
       </slot>
     </div>
   </label>

package/src/components/form/field/index.ts

@@ -1,7 +1,7 @@
 export { default as FieldCheckbox } from './field-checkbox.vue'
+export { default as FieldCombobox } from './field-combobox.vue'
 export { default as FieldInput } from './field-input.vue'
 export { default as FieldKeyValues } from './field-key-values.vue'
 export { default as FieldRange } from './field-range.vue'
-export { default as FieldSelect } from './field-select.vue'
 export { default as FieldTextArea } from './field-text-area.vue'
 export { default as FieldValues } from './field-values.vue'

package/src/components/form/index.ts

@@ -1,5 +1,6 @@
 export * from './checkbox'
 export * from './combobox'
+export * from './combobox-select'
 export * from './field'
 export * from './input'
 export * from './radio'

package/src/components/form/select/index.ts

@@ -1,2 +1,2 @@
-export { default as Option } from './option.vue'
+export { default as SelectOption } from './select-option.vue'
 export { default as Select } from './select.vue'

package/src/components/form/select/select-option.vue

@@ -0,0 +1,89 @@
+<script setup lang="ts" generic="T extends AcceptableValue">
+import type { AcceptableValue } from 'reka-ui'
+
+import {
+  SelectItem,
+  SelectItemIndicator,
+  SelectItemText,
+} from 'reka-ui'
+
+interface SelectOptionItem<T extends AcceptableValue> {
+  label: string
+  value: T
+  description?: string
+  disabled?: boolean
+  icon?: string
+}
+
+const props = defineProps<{
+  option: SelectOptionItem<T>
+}>()
+</script>
+
+<template>
+  <SelectItem
+    :value="props.option.value"
+    :disabled="props.option.disabled"
+    :text-value="props.option.label"
+    :class="[
+      'leading-normal rounded-lg grid grid-cols-[1rem_minmax(0,1fr)] items-center gap-2 min-h-8 px-2 relative select-none data-[disabled]:pointer-events-none data-[highlighted]:outline-none',
+      'data-[highlighted]:bg-neutral-100 dark:data-[highlighted]:bg-neutral-800',
+      'text-sm text-neutral-700 dark:text-neutral-200 data-[disabled]:text-neutral-400 dark:data-[disabled]:text-neutral-600',
+      'transition-colors duration-200 ease-in-out',
+      props.option.disabled ? 'cursor-not-allowed' : 'cursor-pointer',
+    ]"
+  >
+    <SelectItemIndicator
+      :class="[
+        'col-start-1 row-start-1',
+        'inline-flex items-center justify-center',
+        'w-[1.25rem]',
+        'opacity-30',
+        'text-current',
+      ]"
+    >
+      <div i-solar:alt-arrow-right-outline class="size-4" />
+    </SelectItemIndicator>
+
+    <SelectItemText :class="['sr-only']">
+      {{ props.option.label }}
+    </SelectItemText>
+
+    <div :class="['col-start-2', 'min-w-0', 'flex', 'items-center', 'gap-2', 'py-1']">
+      <slot v-bind="{ option: props.option }">
+        <span
+          v-if="props.option.icon"
+          :class="[
+            'size-4 shrink-0',
+            'text-current',
+            props.option.icon,
+          ]"
+        />
+
+        <div :class="['min-w-0 flex flex-1 flex-col']">
+          <span
+            :class="[
+              'line-clamp-1',
+              'overflow-hidden',
+              'text-ellipsis',
+              'whitespace-nowrap',
+            ]"
+          >
+            {{ props.option.label }}
+          </span>
+
+          <span
+            v-if="props.option.description"
+            :class="[
+              'line-clamp-2',
+              'text-xs',
+              'text-neutral-500 dark:text-neutral-400',
+            ]"
+          >
+            {{ props.option.description }}
+          </span>
+        </div>
+      </slot>
+    </div>
+  </SelectItem>
+</template>

package/src/components/form/select/select.vue

@@ -1,31 +1,241 @@
-<script setup lang="ts">
-import { provide, ref } from 'vue'
+<script setup lang="ts" generic="T extends AcceptableValue">
+import type { AcceptableValue } from 'reka-ui'
 
-import { Combobox } from '../combobox'
+import {
+  SelectArrow,
+  SelectContent,
+  SelectGroup,
+  SelectIcon,
+  SelectLabel,
+  SelectPortal,
+  SelectRoot,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+  SelectViewport,
+} from 'reka-ui'
+import { computed } from 'vue'
 
-const props = defineProps<{
-  options?: { label: string, value: string | number }[]
+import SelectOption from './select-option.vue'
+
+interface SelectOptionItem<T extends AcceptableValue> {
+  label: string
+  value: T
+  description?: string
+  disabled?: boolean
+  icon?: string
+}
+
+interface SelectOptionGroupItem<T extends AcceptableValue> {
+  groupLabel?: string
+  children?: SelectOptionItem<T>[]
+}
+
+const props = withDefaults(defineProps<{
+  options: SelectOptionItem<T>[] | SelectOptionGroupItem<T>[]
   placeholder?: string
   disabled?: boolean
-  title?: string
-  layout?: 'horizontal' | 'vertical'
-}>()
+  by?: string | ((a: T, b: T) => boolean)
+  contentMinWidth?: string | number
+  contentWidth?: string | number
+  variant?: 'blurry' | 'default'
+}>(), {
+  placeholder: 'Select an option',
+  disabled: false,
+  by: undefined,
+  contentMinWidth: 160,
+  contentWidth: undefined,
+  variant: 'default',
+})
 
-const show = ref(false)
-const modelValue = defineModel<string | number>({ required: false })
+const modelValue = defineModel<T>({ required: false })
 
-function selectOption(value: string | number) {
-  modelValue.value = value
-}
+const normalizedOptions = computed<SelectOptionGroupItem<T>[]>(() => {
+  if (!props.options.length) {
+    return []
+  }
+
+  const [firstOption] = props.options
+  if ('value' in firstOption) {
+    return [
+      {
+        groupLabel: '',
+        children: props.options as SelectOptionItem<T>[],
+      },
+    ]
+  }
+
+  return props.options as SelectOptionGroupItem<T>[]
+})
+
+const flattenedOptions = computed<SelectOptionItem<T>[]>(() =>
+  normalizedOptions.value.flatMap(group => group.children ?? []),
+)
 
-function handleHide() {
-  show.value = false
+const selectedOption = computed<SelectOptionItem<T> | undefined>(() =>
+  flattenedOptions.value.find(option => isSelectedOption(option.value, modelValue.value)),
+)
+
+function isSelectedOption(a: T, b: T | undefined): boolean {
+  if (b == null) {
+    return false
+  }
+
+  if (typeof props.by === 'function') {
+    return props.by(a, b)
+  }
+
+  if (typeof props.by === 'string') {
+    return (a as Record<string, unknown> | null)?.[props.by] === (b as Record<string, unknown> | null)?.[props.by]
+  }
+
+  return a === b
 }
 
-provide('selectOption', selectOption)
-provide('hide', handleHide)
+function toCssSize(value?: string | number): string | undefined {
+  if (value == null) {
+    return undefined
+  }
+
+  return typeof value === 'number' ? `${value}px` : value
+}
 </script>
 
 <template>
-  <Combobox v-model="modelValue" :default-value="modelValue" :options="[{ groupLabel: '', children: props.options }]" />
+  <SelectRoot
+    v-model="modelValue"
+    :by="props.by"
+    :disabled="props.disabled"
+  >
+    <SelectTrigger
+      :class="[
+        'group',
+        'w-full inline-flex items-center justify-between rounded-xl border px-3 leading-none h-fit gap-[5px] outline-none',
+        'text-sm text-neutral-700 dark:text-neutral-200 data-[placeholder]:text-neutral-400 dark:data-[placeholder]:text-neutral-500',
+        props.variant === 'default' ? 'bg-white dark:bg-neutral-900 disabled:bg-neutral-100 hover:bg-neutral-50 dark:disabled:bg-neutral-900 dark:hover:bg-neutral-700' : '',
+        props.variant === 'blurry' ? 'bg-neutral-50/70 dark:bg-neutral-800/70 disabled:bg-neutral-100 hover:bg-neutral-50 dark:disabled:bg-neutral-900 dark:hover:bg-neutral-700' : '',
+        props.variant === 'blurry' ? 'backdrop-blur-md' : '',
+        'border-2 border-solid focus:border-primary-300 dark:focus:border-primary-400/50',
+        props.variant === 'default' ? 'border-neutral-200 dark:border-neutral-800' : '',
+        props.variant === 'blurry' ? 'border-neutral-100/60 dark:border-neutral-800/30' : '',
+        'shadow-sm focus:shadow-[0_0_0_2px] focus:shadow-black/10 dark:focus:shadow-black/30',
+        'transition-colors duration-200 ease-in-out',
+        props.disabled ? 'cursor-not-allowed opacity-60' : 'cursor-pointer',
+      ]"
+    >
+      <div :class="['min-w-0 flex-1 text-left']">
+        <slot
+          v-if="$slots.value"
+          name="value"
+          v-bind="{ option: selectedOption, value: modelValue, placeholder: props.placeholder }"
+        >
+          <span
+            :class="[
+              'block truncate',
+              selectedOption
+                ? 'text-neutral-700 dark:text-neutral-200'
+                : 'text-neutral-400 dark:text-neutral-500',
+            ]"
+          >
+            {{ selectedOption?.label ?? props.placeholder }}
+          </span>
+        </slot>
+        <SelectValue
+          v-else
+          v-model="modelValue"
+          :placeholder="props.placeholder"
+        />
+      </div>
+      <SelectIcon as-child>
+        <div
+          i-solar:alt-arrow-down-linear
+          :class="[
+            'h-4 w-4 shrink-0',
+            'text-neutral-700 dark:text-neutral-200',
+            'transition-transform duration-200 ease-in-out',
+            'group-data-[state=open]:rotate-180',
+          ]"
+        />
+      </SelectIcon>
+    </SelectTrigger>
+
+    <SelectPortal>
+      <SelectContent
+        position="popper"
+        side="bottom"
+        align="start"
+        :side-offset="4"
+        :avoid-collisions="true"
+        :class="[
+          // NOTICE: DialogContent/DialogOverlay use z-[9999], and DrawerContent uses z-[1000].
+          // SelectContent must render above these layers so that dropdowns inside
+          // Dialog/Drawer are not hidden behind the overlay or dismissed unexpectedly.
+          // Read more at: https://github.com/moeru-ai/airi/issues/1136
+          'z-[10010]',
+          'overflow-hidden rounded-xl shadow-sm border will-change-[opacity,transform]',
+          'data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade',
+          'bg-white dark:bg-neutral-900',
+          'border-neutral-200 dark:border-neutral-800 border-solid border-2',
+        ]"
+        :style="{
+          width: toCssSize(props.contentWidth) ?? 'var(--reka-select-trigger-width)',
+          minWidth: toCssSize(props.contentMinWidth),
+        }"
+      >
+        <SelectViewport
+          :class="[
+            'p-[2px]',
+            'max-h-50dvh',
+            'overflow-y-auto',
+          ]"
+        >
+          <template
+            v-for="(group, groupIndex) in normalizedOptions"
+            :key="group.groupLabel || `group-${groupIndex}`"
+          >
+            <SelectGroup :class="['overflow-x-hidden']">
+              <SelectSeparator
+                v-if="groupIndex !== 0"
+                :class="['m-[5px]', 'h-[1px]', 'bg-neutral-200 dark:bg-neutral-800']"
+              />
+
+              <SelectLabel
+                v-if="group.groupLabel"
+                :class="[
+                  'px-[25px] text-xs leading-[25px]',
+                  'text-neutral-500 dark:text-neutral-400',
+                  'transition-colors duration-200 ease-in-out',
+                ]"
+              >
+                {{ group.groupLabel }}
+              </SelectLabel>
+
+              <SelectOption
+                v-for="(option, optionIndex) in group.children || []"
+                :key="`${group.groupLabel || groupIndex}-${option.label}-${optionIndex}`"
+                :option="option"
+              >
+                <template
+                  v-if="$slots.option"
+                  #default="{ option: slotOption }"
+                >
+                  <slot
+                    name="option"
+                    v-bind="{ option: slotOption }"
+                  />
+                </template>
+              </SelectOption>
+            </SelectGroup>
+          </template>
+        </SelectViewport>
+
+        <SelectArrow
+          :class="[
+            'fill-white dark:fill-neutral-900',
+            'stroke-neutral-200 dark:stroke-neutral-800',
+          ]"
+        />
+      </SelectContent>
+    </SelectPortal>
+  </SelectRoot>
 </template>