@proj-airi/ui 0.10.2 → 0.11.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@proj-airi/ui",
   "type": "module",
-  "version": "0.10.2",
+  "version": "0.11.0",
   "description": "A collection of UI components that used by Project AIRI",
   "author": {
     "name": "Moeru AI Project AIRI Team",
@@ -30,7 +30,7 @@
     "vue": "^3.5.32"
   },
   "devDependencies": {
-    "@vue-macros/volar": "3.0.0-beta.8",
+    "@vue-macros/volar": "^3.1.2",
     "vue-tsc": "^3.2.6"
   },
   "scripts": {

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

@@ -35,10 +35,12 @@ const props = withDefaults(defineProps<{
   options: ComboboxOptionItem<T>[] | ComboboxOptionGroupItem<T>[]
   placeholder?: string
   disabled?: boolean
+  openOnClick?: boolean
   contentMinWidth?: string | number
   contentWidth?: string | number
 }>(), {
   disabled: false,
+  openOnClick: true,
 })
 
 const modelValue = defineModel<T>({ required: false })
@@ -83,6 +85,7 @@ function toCssSize(value?: string | number): string | undefined {
   <ComboboxRoot
     v-model="modelValue"
     :disabled="props.disabled"
+    :open-on-click="props.openOnClick"
     :class="['relative', 'w-full', 'h-fit']"
   >
     <ComboboxAnchor

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { Combobox } from '../combobox'
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   options?: {
     label: string
     value: string | number
@@ -11,11 +11,15 @@ const props = defineProps<{
   }[]
   placeholder?: string
   disabled?: boolean
+  openOnClick?: boolean
   title?: string
   layout?: 'horizontal' | 'vertical'
   contentMinWidth?: string | number
   contentWidth?: string | number
-}>()
+}>(), {
+  disabled: false,
+  openOnClick: true,
+})
 
 const modelValue = defineModel<string | number>({ required: false })
 </script>
@@ -25,6 +29,7 @@ const modelValue = defineModel<string | number>({ required: false })
     v-model="modelValue"
     :options="[{ groupLabel: '', children: props.options }]"
     :disabled="props.disabled"
+    :open-on-click="props.openOnClick"
     :content-min-width="props.contentMinWidth"
     :content-width="props.contentWidth"
     :placeholder="props.placeholder"

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

@@ -13,12 +13,15 @@ const props = withDefaults(defineProps<{
   }[]
   placeholder?: string
   disabled?: boolean
+  openOnClick?: boolean
   layout?: 'horizontal' | 'vertical'
   selectClass?: string | string[]
   contentMinWidth?: string | number
   contentWidth?: string | number
 }>(), {
   layout: 'horizontal',
+  disabled: false,
+  openOnClick: true,
 })
 
 const modelValue = defineModel<string>({ required: false })
@@ -55,6 +58,7 @@ const modelValue = defineModel<string>({ required: false })
           :options="props.options?.filter(option => option.label && option.value) || []"
           :placeholder="props.placeholder"
           :disabled="props.disabled"
+          :open-on-click="props.openOnClick"
           :content-min-width="props.contentMinWidth"
           :content-width="props.contentWidth"
           :title="label"

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

@@ -27,6 +27,7 @@ const props = withDefaults(defineProps<{
    */
   hideRequiredMark?: boolean
   type?: InputType
+  autocomplete?: string
   inputClass?: string
   singleLine?: boolean
 }>(), {
@@ -57,6 +58,7 @@ const modelValue = defineModel<T>({ required: false })
         v-model.number="modelValue"
         :type="props.type"
         :placeholder="props.placeholder"
+        :autocomplete="props.autocomplete"
         :required="props.required"
         :class="props.inputClass"
       />
@@ -65,6 +67,7 @@ const modelValue = defineModel<T>({ required: false })
         v-model="modelValue"
         :type="props.type"
         :placeholder="props.placeholder"
+        :autocomplete="props.autocomplete"
         :required="props.required"
         :class="props.inputClass"
       />
@@ -73,6 +76,7 @@ const modelValue = defineModel<T>({ required: false })
         v-model="modelValue as string | undefined"
         :type="props.type"
         :placeholder="props.placeholder"
+        :autocomplete="props.autocomplete"
         :required="props.required"
         :class="[
           props.inputClass,
@@ -81,6 +85,7 @@ const modelValue = defineModel<T>({ required: false })
           'text-disabled:neutral-400 dark:text-disabled:neutral-600',
           'cursor-disabled:not-allowed',
           'w-full rounded-lg px-2 py-1 text-sm outline-none',
+          'text-neutral-900 dark:text-neutral-100 placeholder:text-neutral-400 dark:placeholder:text-neutral-500',
           'shadow-sm',
           'bg-neutral-50 dark:bg-neutral-950 focus:bg-neutral-50 dark:focus:bg-neutral-900',
         ]"

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

@@ -9,11 +9,22 @@ const props = withDefaults(defineProps<{
   description?: string
   formatValue?: (value: number) => string
   as?: 'label' | 'div'
+  /**
+   * When provided, renders a reset control next to the label that restores the
+   * value to this default. Prefer `as="div"` when using this, since the reset
+   * button should not live inside a `<label>` element.
+   */
+  defaultValue?: number
 }>(), {
   as: 'label',
 })
 
 const modelValue = defineModel<number>({ required: true })
+
+function resetToDefault() {
+  if (props.defaultValue !== undefined)
+    modelValue.value = props.defaultValue
+}
 </script>
 
 <template>
@@ -24,6 +35,15 @@ const modelValue = defineModel<number>({ required: true })
           <slot name="label">
             {{ label }}
           </slot>
+          <button
+            v-if="defaultValue !== undefined"
+            type="button"
+            title="Reset to default"
+            :class="['px-2', 'text-xs', 'outline-none']"
+            @click.prevent="resetToDefault"
+          >
+            <div :class="['i-solar:forward-linear', 'transform-scale-x--100', 'text-neutral-500', 'dark:text-neutral-400']" />
+          </button>
         </div>
         <div :class="['text-xs', 'text-neutral-500', 'dark:text-neutral-400']">
           <slot name="description">

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

@@ -40,6 +40,7 @@ const variantClasses: Record<InputVariant, Record<InputTheme, {
       default: [
         'w-full rounded-lg px-2 py-1 text-nowrap text-sm outline-none',
         'bg-neutral-50 dark:bg-neutral-950 focus:bg-neutral-50 dark:focus:bg-neutral-900',
+        'text-neutral-900 dark:text-neutral-100 placeholder:text-neutral-400 dark:placeholder:text-neutral-500',
         'focus:border-primary-300 dark:focus:border-primary-400/50 border-2 border-solid border-neutral-100 dark:border-neutral-900',
         'text-disabled:neutral-400 dark:text-disabled:neutral-600',
         'shadow-sm',
@@ -51,6 +52,7 @@ const variantClasses: Record<InputVariant, Record<InputTheme, {
       default: [
         'w-full rounded-lg px-2 py-1 text-nowrap text-sm outline-none',
         'bg-neutral-50 dark:bg-neutral-950 focus:bg-neutral-50 dark:focus:bg-neutral-900',
+        'text-neutral-900 dark:text-neutral-100 placeholder:text-neutral-400 dark:placeholder:text-neutral-500',
         'focus:border-primary-300 dark:focus:border-primary-400/50 border-2 border-solid border-neutral-100 dark:border-neutral-900',
         'text-disabled:neutral-400 dark:text-disabled:neutral-600',
         'shadow-sm',
@@ -62,6 +64,7 @@ const variantClasses: Record<InputVariant, Record<InputTheme, {
       default: [
         'w-full rounded-lg px-2 py-1 text-nowrap text-sm outline-none',
         'bg-neutral-100 dark:bg-neutral-800 focus:bg-neutral-50 dark:focus:bg-neutral-950',
+        'text-neutral-900 dark:text-neutral-100 placeholder:text-neutral-400 dark:placeholder:text-neutral-500',
         'focus:border-primary-500/30 dark:focus:border-primary-400/50 border-2 border-solid border-neutral-500/5 dark:border-neutral-700/40',
         'text-disabled:neutral-400 dark:text-disabled:neutral-600',
       ],

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

@@ -64,11 +64,13 @@ function handleInput(e: Event) {
 }
 
 function onWheelInput(ev: WheelEvent) {
-  let valueAfter = 0
+  if (ev.deltaY === 0)
+    return
+  let valueAfter = modelValue.value
   if (ev.deltaY < 0)
-    valueAfter = modelValue.value += props.step * (shiftPressed.value ? 50 : 1)
+    valueAfter += props.step * (shiftPressed.value ? 50 : 1)
   if (ev.deltaY > 0)
-    valueAfter = modelValue.value -= props.step * (shiftPressed.value ? 50 : 1)
+    valueAfter -= props.step * (shiftPressed.value ? 50 : 1)
   modelValue.value = Math.min(Math.max(valueAfter, props.min), props.max)
 }
 </script>

package/src/components/form/textarea/textarea.vue

@@ -13,6 +13,7 @@ const modelValue = defineModel<string>({ default: '' })
       'text-disabled:neutral-400 dark:text-disabled:neutral-600',
       'cursor-disabled:not-allowed',
       'w-full rounded-lg px-2 py-1 text-nowrap text-sm outline-none',
+      'text-neutral-900 dark:text-neutral-100 placeholder:text-neutral-400 dark:placeholder:text-neutral-500',
       'shadow-sm',
       'bg-neutral-50 dark:bg-neutral-950 focus:bg-neutral-50 dark:focus:bg-neutral-900',
     ]"

package/src/components/layouts/screen.vue

@@ -63,6 +63,10 @@ onMounted(async () => {
 
   containerElementBounding.update()
 })
+
+defineExpose({
+  containerRef,
+})
 </script>
 
 <template>

package/src/components/misc/button.vue

@@ -154,7 +154,7 @@ const baseClasses = computed(() => {
   const theme = variant[props.theme] || variant.default
 
   return [
-    'font-medium outline-none',
+    'font-medium outline-none whitespace-nowrap',
     'transition-all duration-200 ease-in-out',
     'disabled:cursor-not-allowed disabled:opacity-50',
     'backdrop-blur-md',