@proj-airi/ui 0.9.0-alpha.33 → 0.9.0-alpha.36

package/package.json

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

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

@@ -16,19 +16,58 @@ import {
   ComboboxTrigger,
   ComboboxViewport,
 } from 'reka-ui'
+import { computed } from 'vue'
 
-const props = defineProps<{
-  options: { groupLabel: string, children?: { label: string, value: T }[] }[]
+interface ComboboxOptionItem<T extends AcceptableValue> {
+  label: string
+  value: T
+  description?: string
+  disabled?: boolean
+  icon?: string
+}
+
+interface ComboboxOptionGroupItem<T extends AcceptableValue> {
+  groupLabel?: string
+  children?: ComboboxOptionItem<T>[]
+}
+
+const props = withDefaults(defineProps<{
+  options: ComboboxOptionItem<T>[] | ComboboxOptionGroupItem<T>[]
   placeholder?: string
+  disabled?: boolean
   contentMinWidth?: string | number
   contentWidth?: string | number
-}>()
+}>(), {
+  disabled: false,
+})
 
 const modelValue = defineModel<T>({ required: false })
 
+const normalizedOptions = computed<ComboboxOptionGroupItem<T>[]>(() => {
+  if (!props.options.length) {
+    return []
+  }
+
+  const [firstOption] = props.options
+  if ('value' in firstOption) {
+    return [
+      {
+        groupLabel: '',
+        children: props.options as ComboboxOptionItem<T>[],
+      },
+    ]
+  }
+
+  return props.options as ComboboxOptionGroupItem<T>[]
+})
+
+const flattenedOptions = computed<ComboboxOptionItem<T>[]>(() =>
+  normalizedOptions.value.flatMap(group => group.children ?? []),
+)
+
 function toDisplayValue(value: T): string {
-  const option = props.options.flatMap(group => group.children).find(option => option?.value === value)
-  return option ? option.label : props.placeholder || ''
+  const option = flattenedOptions.value.find(option => option.value === value)
+  return option?.label ?? props.placeholder ?? ''
 }
 
 function toCssSize(value?: string | number): string | undefined {
@@ -41,15 +80,20 @@ function toCssSize(value?: string | number): string | undefined {
 </script>
 
 <template>
-  <ComboboxRoot v-model="modelValue" :class="['relative', 'w-full', 'h-fit']">
+  <ComboboxRoot
+    v-model="modelValue"
+    :disabled="props.disabled"
+    :class="['relative', 'w-full', 'h-fit']"
+  >
     <ComboboxAnchor
       :class="[
         'w-full inline-flex items-center justify-between rounded-xl border px-3 leading-none h-9 gap-[5px] outline-none',
         'text-sm text-neutral-700 dark:text-neutral-200 data-[placeholder]:text-neutral-200',
-        'bg-white dark:bg-neutral-900 disabled:bg-neutral-100 hover:bg-neutral-50 dark:disabled:bg-neutral-900 dark:hover:bg-neutral-700',
+        'bg-white dark:bg-neutral-900 hover:bg-neutral-50 dark:hover:bg-neutral-700',
         'border-neutral-200 dark:border-neutral-800 border-solid border-2 focus:border-primary-300 dark:focus:border-primary-400/50',
         'shadow-sm focus:shadow-[0_0_0_2px] focus:shadow-black',
         'transition-colors duration-200 ease-in-out',
+        props.disabled ? 'cursor-not-allowed bg-neutral-100 opacity-60 dark:bg-neutral-900' : 'cursor-pointer',
       ]"
     >
       <ComboboxInput
@@ -58,6 +102,7 @@ function toCssSize(value?: string | number): string | undefined {
           'text-neutral-700 dark:text-neutral-200',
           'transition-colors duration-200 ease-in-out',
         ]"
+        :disabled="props.disabled"
         :placeholder="props.placeholder"
         :display-value="(val) => toDisplayValue(val)"
       />
@@ -103,19 +148,22 @@ function toCssSize(value?: string | number): string | undefined {
               'text-xs text-neutral-700 dark:text-neutral-200',
               'transition-colors duration-200 ease-in-out',
             ]"
-          />
+          >
+            <slot name="empty" />
+          </ComboboxEmpty>
 
           <template
-            v-for="(group, index) in options"
-            :key="group.groupLabel"
+            v-for="(group, groupIndex) in normalizedOptions"
+            :key="group.groupLabel || `group-${groupIndex}`"
           >
             <ComboboxGroup :class="['overflow-x-hidden']">
               <ComboboxSeparator
-                v-if="index !== 0"
+                v-if="groupIndex !== 0"
                 :class="['m-[5px]', 'h-[1px]', 'bg-neutral-400']"
               />
 
               <ComboboxLabel
+                v-if="group.groupLabel"
                 :class="[
                   'px-[25px] text-xs leading-[25px]',
                   'text-neutral-500 dark:text-neutral-400',
@@ -126,26 +174,70 @@ function toCssSize(value?: string | number): string | undefined {
               </ComboboxLabel>
 
               <ComboboxItem
-                v-for="option in group.children"
-                :key="option.label"
+                v-for="(option, optionIndex) in group.children || []"
+                :key="`${group.groupLabel || groupIndex}-${option.label}-${optionIndex}`"
                 :text-value="option.label"
                 :value="option.value"
+                :disabled="option.disabled"
                 :class="[
-                  'leading-normal rounded-lg flex items-center h-8 pr-[0.5rem] pl-[1.5rem] relative select-none data-[disabled]:pointer-events-none data-[highlighted]:outline-none',
+                  '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 data-[highlighted]:text-grass1',
                   'transition-colors duration-200 ease-in-out',
-                  'cursor-pointer',
+                  option.disabled ? 'cursor-not-allowed' : 'cursor-pointer',
                 ]"
               >
                 <ComboboxItemIndicator
-                  :class="['absolute', 'left-0', 'w-[25px]', 'inline-flex', 'items-center', 'justify-center', 'opacity-30']"
+                  :class="[
+                    'col-start-1 row-start-1',
+                    'inline-flex items-center justify-center',
+                    'w-[1rem]',
+                    'opacity-30',
+                    'text-current',
+                  ]"
                 >
-                  <div i-solar:alt-arrow-right-outline />
+                  <div i-solar:alt-arrow-right-outline class="size-4" />
                 </ComboboxItemIndicator>
-                <span :class="['line-clamp-1', 'overflow-hidden', 'text-ellipsis', 'whitespace-nowrap']">
-                  {{ option.label }}
-                </span>
+
+                <div :class="['col-start-2', 'min-w-0', 'flex', 'items-center', 'gap-2', 'py-1']">
+                  <slot
+                    name="option"
+                    v-bind="{ option }"
+                  >
+                    <span
+                      v-if="option.icon"
+                      :class="[
+                        'size-4 shrink-0',
+                        'text-current',
+                        option.icon,
+                      ]"
+                    />
+
+                    <div :class="['min-w-0', 'flex', 'flex-1', 'flex-col']">
+                      <span
+                        :class="[
+                          'line-clamp-1',
+                          'overflow-hidden',
+                          'text-ellipsis',
+                          'whitespace-nowrap',
+                        ]"
+                      >
+                        {{ option.label }}
+                      </span>
+
+                      <span
+                        v-if="option.description"
+                        :class="[
+                          'line-clamp-2',
+                          'text-xs',
+                          'text-neutral-500 dark:text-neutral-400',
+                        ]"
+                      >
+                        {{ option.description }}
+                      </span>
+                    </div>
+                  </slot>
+                </div>
               </ComboboxItem>
             </ComboboxGroup>
           </template>

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

@@ -1,10 +1,14 @@
 <script setup lang="ts">
-import { provide, ref } from 'vue'
-
 import { Combobox } from '../combobox'
 
 const props = defineProps<{
-  options?: { label: string, value: string | number }[]
+  options?: {
+    label: string
+    value: string | number
+    description?: string
+    disabled?: boolean
+    icon?: string
+  }[]
   placeholder?: string
   disabled?: boolean
   title?: string
@@ -13,27 +17,33 @@ const props = defineProps<{
   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 }]"
+    :disabled="props.disabled"
     :content-min-width="props.contentMinWidth"
     :content-width="props.contentWidth"
-  />
+    :placeholder="props.placeholder"
+  >
+    <template
+      v-if="$slots.option"
+      #option="{ option }"
+    >
+      <slot
+        name="option"
+        v-bind="{ option }"
+      />
+    </template>
+
+    <template
+      v-if="$slots.empty"
+      #empty
+    >
+      <slot name="empty" />
+    </template>
+  </Combobox>
 </template>

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

@@ -4,11 +4,19 @@ import { ComboboxSelect } from '../combobox-select'
 const props = withDefaults(defineProps<{
   label: string
   description?: string
-  options?: { label: string, value: string | number }[]
+  options?: {
+    label: string
+    value: string | number
+    description?: string
+    disabled?: boolean
+    icon?: string
+  }[]
   placeholder?: string
   disabled?: boolean
   layout?: 'horizontal' | 'vertical'
   selectClass?: string | string[]
+  contentMinWidth?: string | number
+  contentWidth?: string | number
 }>(), {
   layout: 'horizontal',
 })
@@ -27,7 +35,7 @@ const modelValue = defineModel<string>({ required: false })
       <div
         :class="[
           'w-full',
-          props.layout === 'horizontal' ? 'col-span-3' : 'row-span-2',
+          props.layout === 'horizontal' ? 'col-span-2' : 'row-span-2',
         ]"
       >
         <div :class="['flex', 'items-center', 'gap-1', 'break-words', 'text-sm', 'font-medium', 'text-left']">
@@ -47,16 +55,31 @@ const modelValue = defineModel<string>({ required: false })
           :options="props.options?.filter(option => option.label && option.value) || []"
           :placeholder="props.placeholder"
           :disabled="props.disabled"
+          :content-min-width="props.contentMinWidth"
+          :content-width="props.contentWidth"
           :title="label"
           :class="[
             ...(props.selectClass
               ? (typeof props.selectClass === 'string' ? [props.selectClass] : props.selectClass)
               : []),
-            props.layout === 'horizontal' ? 'col-span-1' : 'row-span-2',
+            props.layout === 'horizontal' ? 'col-span-2' : 'row-span-2',
           ]"
         >
-          <template #default="{ value }">
-            {{ props.options?.find(option => option.value === value)?.label || props.placeholder }}
+          <template
+            v-if="$slots.option"
+            #option="{ option }"
+          >
+            <slot
+              name="option"
+              v-bind="{ option }"
+            />
+          </template>
+
+          <template
+            v-if="$slots.empty"
+            #empty
+          >
+            <slot name="empty" />
           </template>
         </ComboboxSelect>
       </slot>

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

@@ -36,9 +36,9 @@ const modelValue = defineModel<number>({ required: true })
     <div :class="['flex', 'flex-row', 'items-center', 'gap-2']">
       <Range
         v-model="modelValue"
-        :min="min || 0"
-        :max="max || 1"
-        :step="step || 0.01"
+        :min="min ?? 0"
+        :max="max ?? 1"
+        :step="step ?? 0.01"
         :class="['w-full']"
       />
     </div>

package/src/components/form/textarea/basic-text-area.vue

@@ -1,9 +1,12 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue'
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   defaultHeight?: string
-}>()
+  submitOnEnter?: boolean
+}>(), {
+  submitOnEnter: true,
+})
 
 const events = defineEmits<{
   (event: 'submit', message: string): void
@@ -18,6 +21,9 @@ const textareaRef = ref<HTMLTextAreaElement>()
 const textareaHeight = ref('auto')
 
 function onKeyDown(e: KeyboardEvent) {
+  if (!props.submitOnEnter)
+    return
+
   if (e.code === 'Enter' && !e.shiftKey) { // just block Enter is enough, Shift+Enter by default generates a newline
     e.preventDefault()
     events('submit', input.value)