@proj-airi/ui 0.9.0-beta.6 → 0.9.0-beta.7

package/package.json

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

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

@@ -1,8 +1,10 @@
 <script
   setup
   lang="ts"
-  generic="InputType extends 'number' | string, T = InputType extends 'number' ? (number | undefined) : ((string | undefined))"
+  generic="InputType extends 'number' | InputTypeHTMLAttribute | string, T = InputType extends 'number' ? (number | undefined) : ((string | undefined))"
 >
+import type { InputTypeHTMLAttribute } from 'vue'
+
 import { Input } from '../input'
 
 const props = withDefaults(defineProps<{

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

@@ -0,0 +1,105 @@
+<script setup lang="ts" generic="T extends AcceptableValue">
+import type { AcceptableValue } from 'reka-ui'
+
+import { Select } from '../select'
+
+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<{
+  label: string
+  description?: string
+  options?: SelectOptionItem<T>[] | SelectOptionGroupItem<T>[]
+  placeholder?: string
+  disabled?: boolean
+  layout?: 'horizontal' | 'vertical'
+  selectClass?: string | string[]
+  by?: string | ((a: T, b: T) => boolean)
+  contentMinWidth?: string | number
+  contentWidth?: string | number
+  shape?: 'rounded' | 'default'
+  variant?: 'blurry' | 'default'
+}>(), {
+  layout: 'horizontal',
+})
+
+const modelValue = defineModel<T>({ required: false })
+</script>
+
+<template>
+  <label :class="['flex', 'flex-col', 'gap-4']">
+    <div
+      :class="[
+        'items-center',
+        props.layout === 'horizontal' ? 'grid grid-cols-4 gap-2' : 'grid grid-rows-2 gap-2',
+      ]"
+    >
+      <div
+        :class="[
+          'w-full',
+          props.layout === 'horizontal' ? 'col-span-2' : 'row-span-2',
+        ]"
+      >
+        <div :class="['flex', 'items-center', 'gap-1', 'break-words', 'text-sm', 'font-medium', 'text-left']">
+          <slot name="label">
+            {{ props.label }}
+          </slot>
+        </div>
+        <div :class="['break-words', 'text-xs', 'text-neutral-500', 'dark:text-neutral-400', 'text-left']">
+          <slot name="description">
+            {{ props.description }}
+          </slot>
+        </div>
+      </div>
+      <slot>
+        <Select
+          v-model="modelValue"
+          :options="props.options ?? []"
+          :placeholder="props.placeholder"
+          :disabled="props.disabled"
+          :by="props.by"
+          :content-min-width="props.contentMinWidth"
+          :content-width="props.contentWidth"
+          :shape="props.shape"
+          :variant="props.variant"
+          :class="[
+            ...(props.selectClass
+              ? (typeof props.selectClass === 'string' ? [props.selectClass] : props.selectClass)
+              : []),
+            props.layout === 'horizontal' ? 'col-span-2' : 'row-span-2',
+          ]"
+        >
+          <template
+            v-if="$slots.value"
+            #value="{ option, value, placeholder: slotPlaceholder }"
+          >
+            <slot
+              name="value"
+              v-bind="{ option, value, placeholder: slotPlaceholder }"
+            />
+          </template>
+
+          <template
+            v-if="$slots.option"
+            #option="{ option }"
+          >
+            <slot
+              name="option"
+              v-bind="{ option }"
+            />
+          </template>
+        </Select>
+      </slot>
+    </div>
+  </label>
+</template>

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

@@ -1,7 +1,8 @@
 export { default as FieldCheckbox } from './field-checkbox.vue'
-export { default as FieldCombobox } from './field-combobox.vue'
+export { default as FieldCombobox } from './field-combobox-select.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/input/input.vue

@@ -1,8 +1,10 @@
 <script
   setup
   lang="ts"
-  generic="InputType extends 'number' | string, T = InputType extends 'number' ? (number | undefined) : ((string | undefined))"
+  generic="InputType extends 'number' | InputTypeHTMLAttribute | string, T = InputType extends 'number' ? (number | undefined) : ((string | undefined))"
 >
+import type { InputTypeHTMLAttribute } from 'vue'
+
 // Define button variants for better type safety and maintainability
 type InputVariant = 'primary' | 'secondary' | 'primary-dimmed'
 

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

@@ -71,7 +71,6 @@ https://toughengineer.github.io/demo/slider-styler*/
   min-height: var(--height);
   appearance: none;
   background: transparent;
-  border-radius: 4px;
   transition: background-color 0.2s ease;
 
   --thumb-width: var(--height);
@@ -84,7 +83,7 @@ https://toughengineer.github.io/demo/slider-styler*/
   --track-height: calc(var(--height) - var(--track-value-padding) * 2);
   --track-box-shadow: 0 0 12px -2px rgb(0 0 0 / 22%);
   --track-border: none;
-  --track-border-radius: 10px;
+  --track-border-radius: 16px;
   --track-background: rgba(0, 0, 0, 0.4);
 
   --track-value-background: rgb(255, 255, 255);
@@ -99,7 +98,7 @@ https://toughengineer.github.io/demo/slider-styler*/
   --thumb-background: rgb(238, 238, 238);
 
   --track-border: none;
-  --track-background: rgba(99, 99, 99, 0.7);
+  --track-background: rgba(64, 64, 64, 0.7);
   --track-box-shadow: 0 0 12px -2px rgb(0 0 0 / 22%);
 
   --track-value-background: rgb(238, 238, 238);

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

@@ -112,7 +112,7 @@ function toCssSize(value?: string | number): string | undefined {
     <SelectTrigger
       :class="[
         'group',
-        'w-full inline-flex items-center justify-between border px-1 leading-none h-fit gap-[5px] outline-none',
+        'w-full inline-flex items-center justify-between border px-3 leading-none h-9 gap-[5px] outline-none',
         props.shape === 'rounded' ? 'rounded-full' : 'rounded-lg',
         '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' : '',
@@ -144,7 +144,6 @@ function toCssSize(value?: string | number): string | undefined {
         <SelectValue
           v-else
           v-model="modelValue"
-          :placeholder="props.placeholder"
         />
       </div>
       <SelectIcon as-child>