@proj-airi/ui 0.8.1-beta.9 → 0.8.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@proj-airi/ui",
   "type": "module",
-  "version": "0.8.1-beta.9",
+  "version": "0.8.3",
   "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

@@ -10,6 +10,7 @@ import {
   ComboboxItem,
   ComboboxItemIndicator,
   ComboboxLabel,
+  ComboboxPortal,
   ComboboxRoot,
   ComboboxSeparator,
   ComboboxTrigger,
@@ -62,69 +63,79 @@ function toDisplayValue(value: T): string {
       </ComboboxTrigger>
     </ComboboxAnchor>
 
-    <ComboboxContent
-      :avoid-collisions="true"
-      :class="[
-        'absolute z-10 w-full mt-1 min-w-[160px] overflow-hidden rounded-xl shadow-sm border will-change-[opacity,transform] max-h-50dvh',
-        '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',
-      ]"
-    >
-      <ComboboxViewport class="p-[2px]">
-        <ComboboxEmpty
-          :class="[
-            'font-medium py-2 px-2',
-            'text-xs text-neutral-700 dark:text-neutral-200',
-            'transition-colors duration-200 ease-in-out',
-          ]"
-        />
+    <ComboboxPortal>
+      <ComboboxContent
+        position="popper"
+        side="bottom"
+        align="start"
+        :side-offset="4"
+        :avoid-collisions="true"
+        :class="[
+          // NOTICE: DrawerContent is z-[1000], here we choose `1010`
+          // Read more at: https://github.com/moeru-ai/airi/blob/0fddd043f2b213f441f3998c52dca1d24acb8405/packages/stage-ui/src/components/scenarios/dialogs/audio-input/hearing-config-dialog.vue#L62C8-L62C21
+          'z-[1010]',
+          'w-full min-w-[160px] 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)' }"
+      >
+        <ComboboxViewport :class="['p-[2px]', 'max-h-50dvh', 'overflow-y-auto']">
+          <ComboboxEmpty
+            :class="[
+              'font-medium py-2 px-2',
+              'text-xs text-neutral-700 dark:text-neutral-200',
+              'transition-colors duration-200 ease-in-out',
+            ]"
+          />
 
-        <template
-          v-for="(group, index) in options"
-          :key="group.groupLabel"
-        >
-          <ComboboxGroup :class="['overflow-x-hidden']">
-            <ComboboxSeparator
-              v-if="index !== 0"
-              :class="['m-[5px]', 'h-[1px]', 'bg-neutral-400']"
-            />
+          <template
+            v-for="(group, index) in options"
+            :key="group.groupLabel"
+          >
+            <ComboboxGroup :class="['overflow-x-hidden']">
+              <ComboboxSeparator
+                v-if="index !== 0"
+                :class="['m-[5px]', 'h-[1px]', 'bg-neutral-400']"
+              />
 
-            <ComboboxLabel
-              :class="[
-                'px-[25px] text-xs leading-[25px]',
-                'text-neutral-500 dark:text-neutral-400',
-                'transition-colors duration-200 ease-in-out',
-              ]"
-            >
-              {{ group.groupLabel }}
-            </ComboboxLabel>
+              <ComboboxLabel
+                :class="[
+                  'px-[25px] text-xs leading-[25px]',
+                  'text-neutral-500 dark:text-neutral-400',
+                  'transition-colors duration-200 ease-in-out',
+                ]"
+              >
+                {{ group.groupLabel }}
+              </ComboboxLabel>
 
-            <ComboboxItem
-              v-for="option in group.children"
-              :key="option.label"
-              :text-value="option.label"
-              :value="option.value"
-              :class="[
-                'leading-none 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',
-                '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',
-              ]"
-            >
-              <ComboboxItemIndicator
-                :class="['absolute', 'left-0', 'w-[25px]', 'inline-flex', 'items-center', 'justify-center', 'opacity-30']"
+              <ComboboxItem
+                v-for="option in group.children"
+                :key="option.label"
+                :text-value="option.label"
+                :value="option.value"
+                :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',
+                  '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',
+                ]"
               >
-                <div i-solar:alt-arrow-right-outline />
-              </ComboboxItemIndicator>
-              <span :class="['line-clamp-1', 'overflow-hidden', 'text-ellipsis', 'whitespace-nowrap']">
-                {{ option.label }}
-              </span>
-            </ComboboxItem>
-          </ComboboxGroup>
-        </template>
-      </ComboboxViewport>
-    </ComboboxContent>
+                <ComboboxItemIndicator
+                  :class="['absolute', 'left-0', 'w-[25px]', 'inline-flex', 'items-center', 'justify-center', 'opacity-30']"
+                >
+                  <div i-solar:alt-arrow-right-outline />
+                </ComboboxItemIndicator>
+                <span :class="['line-clamp-1', 'overflow-hidden', 'text-ellipsis', 'whitespace-nowrap']">
+                  {{ option.label }}
+                </span>
+              </ComboboxItem>
+            </ComboboxGroup>
+          </template>
+        </ComboboxViewport>
+      </ComboboxContent>
+    </ComboboxPortal>
   </ComboboxRoot>
 </template>

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

@@ -1,4 +1,8 @@
-<script setup lang="ts">
+<script
+  setup
+  lang="ts"
+  generic="InputType extends 'number' | string, T = InputType extends 'number' ? (number | undefined) : ((string | undefined))"
+>
 import { Input } from '../input'
 
 const props = withDefaults(defineProps<{
@@ -6,14 +10,14 @@ const props = withDefaults(defineProps<{
   description?: string
   placeholder?: string
   required?: boolean
-  type?: string
+  type?: InputType
   inputClass?: string
   singleLine?: boolean
 }>(), {
   singleLine: true,
 })
 
-const modelValue = defineModel<string>({ required: false })
+const modelValue = defineModel<T>({ required: false })
 </script>
 
 <template>
@@ -33,15 +37,22 @@ const modelValue = defineModel<string>({ required: false })
         </div>
       </div>
       <Input
-        v-if="singleLine"
+        v-if="singleLine && props.type === 'number'"
+        v-model.number="modelValue"
+        :type="props.type"
+        :placeholder="props.placeholder"
+        :class="props.inputClass"
+      />
+      <Input
+        v-else-if="singleLine"
         v-model="modelValue"
         :type="props.type"
         :placeholder="props.placeholder"
         :class="props.inputClass"
       />
       <textarea
-        v-else
-        v-model="modelValue"
+        v-else-if="props.type !== 'number'"
+        v-model="modelValue as string | undefined"
         :type="props.type"
         :placeholder="props.placeholder"
         :class="[

package/src/components/form/input/input.vue

@@ -1,4 +1,8 @@
-<script setup lang="ts">
+<script
+  setup
+  lang="ts"
+  generic="InputType extends 'number' | string, T = InputType extends 'number' ? (number | undefined) : ((string | undefined))"
+>
 // Define button variants for better type safety and maintainability
 type InputVariant = 'primary' | 'secondary' | 'primary-dimmed'
 
@@ -8,7 +12,7 @@ type InputTheme = 'default'
 type InputSize = 'sm' | 'md' | 'lg'
 
 const props = withDefaults(defineProps<{
-  type?: string
+  type?: InputType
   variant?: InputVariant // Button style variant
   size?: InputSize // Button size variant
   theme?: InputTheme // Button theme
@@ -18,7 +22,7 @@ const props = withDefaults(defineProps<{
   theme: 'default',
 })
 
-const modelValue = defineModel<string>({ required: false })
+const modelValue = defineModel<T>({ required: false })
 
 const variantClasses: Record<InputVariant, Record<InputTheme, {
   default: string[]
@@ -59,13 +63,26 @@ const variantClasses: Record<InputVariant, Record<InputTheme, {
 </script>
 
 <template>
-  <input
-    v-model="modelValue"
-    :type="props.type || 'text'"
-    :class="[
-      'transition-all duration-200 ease-in-out',
-      'cursor-disabled:not-allowed',
-      ...variantClasses[props.variant][props.theme].default,
-    ]"
-  >
+  <template v-if="props.type === 'number'">
+    <input
+      v-model.number="modelValue"
+      :type="props.type || 'text'"
+      :class="[
+        'transition-all duration-200 ease-in-out',
+        'cursor-disabled:not-allowed',
+        ...variantClasses[props.variant][props.theme].default,
+      ]"
+    >
+  </template>
+  <template v-else>
+    <input
+      v-model="modelValue"
+      :type="props.type || 'text'"
+      :class="[
+        'transition-all duration-200 ease-in-out',
+        'cursor-disabled:not-allowed',
+        ...variantClasses[props.variant][props.theme].default,
+      ]"
+    >
+  </template>
 </template>