@proj-airi/ui 0.10.1 → 0.11.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@proj-airi/ui",
   "type": "module",
-  "version": "0.10.1",
+  "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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useElementHover, useKeyModifier } from '@vueuse/core'
 import { computed, onMounted, ref, watch } from 'vue'
 
 const props = withDefaults(defineProps<{
@@ -6,6 +7,7 @@ const props = withDefaults(defineProps<{
   max?: number
   step?: number
   disabled?: boolean
+  handleWheel?: boolean
 }>(), {
   min: 0,
   max: 100,
@@ -13,17 +15,22 @@ const props = withDefaults(defineProps<{
   disabled: false,
 })
 
-const modelValue = defineModel<number>({ required: true })
+const smoothingFactor = 10000
 
-const scaledMin = computed(() => props.min * 10000)
-const scaledMax = computed(() => props.max * 10000)
-const scaledStep = computed(() => props.step * 10000)
+const modelValue = defineModel<number>({ required: true })
 
 const sliderRef = ref<HTMLInputElement>()
+
+const scaledMin = computed(() => props.min * smoothingFactor)
+const scaledMax = computed(() => props.max * smoothingFactor)
+const scaledStep = computed(() => props.step * smoothingFactor)
+const shiftPressed = useKeyModifier('Shift')
+const isHovered = useElementHover(sliderRef)
+
 const sliderValue = computed({
-  get: () => modelValue.value * 10000,
+  get: () => modelValue.value * smoothingFactor,
   set: (value: number) => {
-    modelValue.value = value / 10000
+    modelValue.value = value / smoothingFactor
     updateTrackColor()
   },
 })
@@ -31,6 +38,15 @@ const sliderValue = computed({
 onMounted(() => updateTrackColor())
 watch(sliderValue, () => updateTrackColor(), { immediate: true })
 watch([scaledMin, scaledMax, scaledStep], () => updateTrackColor(), { immediate: true })
+watch(isHovered, (hovered: boolean) => {
+  if (!props.handleWheel)
+    return
+  if (hovered) {
+    sliderRef.value?.addEventListener('wheel', onWheelInput)
+    return
+  }
+  sliderRef.value?.removeEventListener('wheel', onWheelInput)
+})
 
 function updateTrackColor() {
   if (!sliderRef.value) {
@@ -46,6 +62,17 @@ function handleInput(e: Event) {
   const target = e.target as HTMLInputElement
   target.style.setProperty('--value', target.value)
 }
+
+function onWheelInput(ev: WheelEvent) {
+  if (ev.deltaY === 0)
+    return
+  let valueAfter = modelValue.value
+  if (ev.deltaY < 0)
+    valueAfter += props.step * (shiftPressed.value ? 50 : 1)
+  if (ev.deltaY > 0)
+    valueAfter -= props.step * (shiftPressed.value ? 50 : 1)
+  modelValue.value = Math.min(Math.max(valueAfter, props.min), props.max)
+}
 </script>
 
 <template>
@@ -66,21 +93,23 @@ function handleInput(e: Event) {
 /*generated with Input range slider CSS style generator (version 20211225)
 https://toughengineer.github.io/demo/slider-styler*/
 .form_input-round-range {
-  --height: 2em;
+  --height: 100%;
+  --width: 2rem;
 
-  min-height: var(--height);
+  min-height: var(--width);
   appearance: none;
   background: transparent;
   transition: background-color 0.2s ease;
 
-  --thumb-width: var(--height);
-  --thumb-height: var(--height);
+  --thumb-width: var(--width);
+  --thumb-height: var(--width);
   --thumb-box-shadow: none;
   --thumb-border: none;
   --thumb-border-radius: 0px;
   --thumb-background: transparent;
 
   --track-height: calc(var(--height) - var(--track-value-padding) * 2);
+  --track-width: var(--width);
   --track-box-shadow: 0 0 12px -2px rgb(0 0 0 / 22%);
   --track-border: none;
   --track-border-radius: 16px;
@@ -95,8 +124,6 @@ https://toughengineer.github.io/demo/slider-styler*/
 }
 
 .dark .form_input-round-range {
-  --thumb-background: rgb(238, 238, 238);
-
   --track-border: none;
   --track-background: rgba(64, 64, 64, 0.7);
   --track-box-shadow: 0 0 12px -2px rgb(0 0 0 / 22%);

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',