@proj-airi/ui 0.6.1 → 0.7.0-alpha.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@proj-airi/ui",
   "type": "module",
-  "version": "0.6.1",
+  "version": "0.7.0-alpha.1",
   "description": "A collection of UI components that used by Project AIRI",
   "author": {
     "name": "Moeru AI Project AIRI Team",
@@ -20,22 +20,17 @@
     "./components/form": "./src/components/Form/index.ts",
     "./*": "./*"
   },
-  "main": "./dist/index.mjs",
-  "module": "./dist/index.mjs",
   "dependencies": {
-    "@vueuse/core": "^13.3.0",
+    "@vueuse/core": "^13.5.0",
     "floating-vue": "^5.2.2",
-    "reka-ui": "^2.3.1",
-    "vue": "^3.5.16"
+    "reka-ui": "^2.3.2",
+    "vue": "^3.5.17"
   },
   "devDependencies": {
     "@vue-macros/volar": "3.0.0-beta.8",
-    "vue-tsc": "^3.0.0-alpha.10"
+    "vue-tsc": "^3.0.1"
   },
   "scripts": {
-    "dev": "pnpm run build",
-    "stub": "pnpm run build",
-    "build": "tsdown",
     "typecheck": "vue-tsc --noEmit"
   }
 }

package/src/components/Animations/TransitionHorizontal.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+function enter(el: any, done: any) {
+  el.style.transition = 'all 0.5s'
+  const width = el.scrollWidth
+  el.style.width = '0'
+  requestAnimationFrame(() => {
+    el.style.width = `${width}px`
+  })
+  el.addEventListener('transitionend', done)
+}
+
+function beforeLeave(el: any) {
+  el.style.transition = 'all 0.5s'
+  el.style.width = '0'
+  el.style.opacity = '0'
+}
+
+function leave(el: any, done: any) {
+  el.style.transition = 'all 0.5s'
+  el.style.width = '0'
+  el.style.opacity = '0'
+  el.addEventListener('transitionend', done)
+}
+</script>
+
+<template>
+  <Transition
+    name="slide-fade"
+    :css="false"
+    @enter="enter"
+    @leave="leave"
+    @before-leave="beforeLeave"
+  >
+    <slot />
+  </Transition>
+</template>

package/src/components/Animations/index.ts

@@ -1 +1,2 @@
+export { default as TransitionHorizontal } from './TransitionHorizontal.vue'
 export { default as TransitionVertical } from './TransitionVertical.vue'

package/src/components/Form/Field/FieldCheckbox.vue

@@ -14,10 +14,14 @@ const modelValue = defineModel<boolean>({ required: true })
     <div flex="~ row" items-center gap-2>
       <div flex="1">
         <div class="flex items-center gap-1 text-sm font-medium">
-          {{ props.label }}
+          <slot name="label">
+            {{ props.label }}
+          </slot>
         </div>
         <div class="text-xs text-neutral-500 dark:text-neutral-400">
-          {{ props.description }}
+          <slot name="description">
+            {{ props.description }}
+          </slot>
         </div>
       </div>
       <Checkbox v-model="modelValue" />

package/src/components/Form/Field/FieldInput.vue

@@ -13,7 +13,7 @@ const props = withDefaults(defineProps<{
   singleLine: true,
 })
 
-const modelValue = defineModel<string>({ required: true })
+const modelValue = defineModel<string>({ required: false })
 </script>
 
 <template>
@@ -21,11 +21,15 @@ const modelValue = defineModel<string>({ required: true })
     <label flex="~ col gap-4">
       <div>
         <div class="flex items-center gap-1 text-sm font-medium">
-          {{ props.label }}
+          <slot name="label">
+            {{ props.label }}
+          </slot>
           <span v-if="props.required !== false" class="text-red-500">*</span>
         </div>
         <div class="text-xs text-neutral-500 dark:text-neutral-400" text-nowrap>
-          {{ props.description }}
+          <slot name="description">
+            {{ props.description }}
+          </slot>
         </div>
       </div>
       <Input

package/src/components/Form/Field/FieldKeyValues.vue

@@ -32,11 +32,15 @@ watch([inputKey, inputValue], () => {
     <label flex="~ col gap-2">
       <div>
         <div class="flex items-center gap-1 text-sm font-medium">
-          {{ props.label }}
+          <slot name="label">
+            {{ props.label }}
+          </slot>
           <span v-if="props.required !== false" class="text-red-500">*</span>
         </div>
         <div class="text-xs text-neutral-500 dark:text-neutral-400" text-nowrap>
-          {{ props.description }}
+          <slot name="description">
+            {{ props.description }}
+          </slot>
         </div>
       </div>
       <div v-auto-animate flex="~ col gap-2">

package/src/components/Form/Field/FieldRange.vue

@@ -1,27 +1,34 @@
 <script setup lang="ts">
 import Range from '../Range/Range.vue'
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   min?: number
   max?: number
   step?: number
   label?: string
   description?: string
   formatValue?: (value: number) => string
-}>()
+  as?: 'label' | 'div'
+}>(), {
+  as: 'label',
+})
 
 const modelValue = defineModel<number>({ required: true })
 </script>
 
 <template>
-  <label flex="~ col gap-4">
+  <props.as flex="~ col gap-4">
     <div flex="~ row" items-center gap-2>
       <div flex="1">
         <div class="flex items-center gap-1 text-sm font-medium">
-          {{ label }}
+          <slot name="label">
+            {{ label }}
+          </slot>
         </div>
         <div class="text-xs text-neutral-500 dark:text-neutral-400">
-          {{ description }}
+          <slot name="description">
+            {{ description }}
+          </slot>
         </div>
       </div>
       <span font-mono>{{ props.formatValue?.(modelValue) || modelValue }}</span>
@@ -35,5 +42,5 @@ const modelValue = defineModel<number>({ required: true })
         w-full
       />
     </div>
-  </label>
+  </props.as>
 </template>

package/src/components/Form/Field/FieldSelect.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { Select } from '@proj-airi/ui'
+
+const props = defineProps<{
+  label: string
+  description?: string
+  options?: { label: string, value: string | number }[]
+  placeholder?: string
+  disabled?: boolean
+  layout?: 'horizontal' | 'vertical'
+}>()
+
+const modelValue = defineModel<string>({ required: false })
+</script>
+
+<template>
+  <label flex="~ col gap-4">
+    <div
+      :class="[
+        props.layout === 'horizontal' ? 'flex flex-row items-center justify-between gap-2' : 'flex flex-col items-start justify-center gap-2',
+      ]"
+    >
+      <div class="min-w-[max-content] flex-1">
+        <div class="flex items-center gap-1 text-sm font-medium">
+          <slot name="label">
+            {{ props.label }}
+          </slot>
+        </div>
+        <div class="text-xs text-neutral-500 dark:text-neutral-400">
+          <slot name="description">
+            {{ props.description }}
+          </slot>
+        </div>
+      </div>
+      <slot>
+        <Select
+          v-model="modelValue"
+          :options="props.options"
+          :placeholder="props.placeholder"
+          :disabled="props.disabled"
+          :title="label"
+        >
+          <template #default="{ value }">
+            {{ props.options?.find(option => option.value === value)?.label || props.placeholder }}
+          </template>
+        </Select>
+      </slot>
+    </div>
+  </label>
+</template>

package/src/components/Form/Field/FieldValues.vue

@@ -33,11 +33,15 @@ function removeItem(index: number) {
     <label class="flex flex-col gap-2">
       <div>
         <div class="flex items-center gap-1 text-sm font-medium">
-          {{ props.label }}
+          <slot name="label">
+            {{ props.label }}
+          </slot>
           <span v-if="props.required !== false" class="text-red-500">*</span>
         </div>
         <div class="text-nowrap text-xs text-neutral-500 dark:text-neutral-400">
-          {{ props.description }}
+          <slot name="description">
+            {{ props.description }}
+          </slot>
         </div>
       </div>
 

package/src/components/Form/Field/index.ts

@@ -2,4 +2,5 @@ export { default as FieldCheckbox } from './FieldCheckbox.vue'
 export { default as FieldInput } from './FieldInput.vue'
 export { default as FieldKeyValues } from './FieldKeyValues.vue'
 export { default as FieldRange } from './FieldRange.vue'
+export { default as FieldSelect } from './FieldSelect.vue'
 export { default as FieldValues } from './FieldValues.vue'

package/src/components/Form/Input/Input.vue

@@ -3,7 +3,7 @@ const props = defineProps<{
   type?: string
 }>()
 
-const modelValue = defineModel<string>({ required: true })
+const modelValue = defineModel<string>({ required: false })
 </script>
 
 <template>

package/src/components/Form/Range/ColorHueRange.vue

@@ -39,23 +39,23 @@ const colorValue = defineModel<string>('colorValue', {
   );
 
   &::-webkit-slider-thumb {
-    --at-apply: w-1 h-12 appearance-none rounded-md bg-neutral-600 cursor-pointer shadow-lg border-2 border-neutral-500
-      hover: bg-neutral-800 transition-colors duration-200;
+    --at-apply: w-1 h-12 hover:w-2 hover:h-13 appearance-none rounded-md bg-neutral-600 cursor-pointer shadow-lg border-2 border-neutral-500
+      hover: bg-neutral-800 transition-colors,transform,width,height duration-200 cursor-col-resize;
   }
 
   .dark &::-webkit-slider-thumb {
-    --at-apply: w-1 h-12 appearance-none rounded-md bg-neutral-100 cursor-pointer shadow-md border-2 border-white
-      hover: bg-neutral-300 transition-colors duration-200;
+    --at-apply: w-1 h-12 hover:w-2 hover:h-13 appearance-none rounded-md bg-neutral-100 cursor-pointer shadow-md border-2 border-white
+      hover: bg-neutral-300 transition-colors,transform,width,height duration-200 cursor-col-resize;
   }
 
   &::-moz-range-thumb {
-    --at-apply: w-1 h-12 appearance-none rounded-md bg-neutral-600 cursor-pointer shadow-lg border-2 border-neutral-500
-      hover: bg-neutral-800 transition-colors duration-200;
+    --at-apply: w-1 h-12 hover:w-2 hover:h-13 appearance-none rounded-md bg-neutral-600 cursor-pointer shadow-lg border-2 border-neutral-500
+      hover: bg-neutral-800 transition-colors,transform,width,height duration-200 cursor-col-resize;
   }
 
   .dark &::-moz-range-thumb {
-    --at-apply: w-1 h-12 appearance-none rounded-md bg-neutral-100 cursor-pointer shadow-md border-2 border-white
-      hover: bg-neutral-300 transition-colors duration-200;
+    --at-apply: w-1 h-12 hover:w-2 hover:h-13 appearance-none rounded-md bg-neutral-100 cursor-pointer shadow-md border-2 border-white
+      hover: bg-neutral-300 transition-colors,transform,width,height duration-200 cursor-col-resize;
   }
 }
 </style>

package/src/components/Form/Range/Range.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 
 const props = withDefaults(defineProps<{
   min?: number
@@ -19,7 +19,7 @@ const props = withDefaults(defineProps<{
   trackValueColor: 'red',
 })
 
-const modelValue = defineModel<number>('modelValue', { required: true })
+const modelValue = defineModel<number>({ required: true })
 
 const scaledMin = computed(() => props.min * 10000)
 const scaledMax = computed(() => props.max * 10000)
@@ -34,15 +34,16 @@ const sliderValue = computed({
   },
 })
 
-onMounted(() => {
-  updateTrackColor()
-})
+onMounted(() => updateTrackColor())
+watch(sliderValue, () => updateTrackColor(), { immediate: true })
+watch([scaledMin, scaledMax, scaledStep], () => updateTrackColor(), { immediate: true })
 
 function updateTrackColor() {
-  if (!sliderRef.value)
+  if (!sliderRef.value) {
     return
+  }
 
-  sliderRef.value.style.setProperty('--value', sliderRef.value.value)
+  sliderRef.value.style.setProperty('--value', sliderValue.value.toString())
   sliderRef.value.style.setProperty('--min', !sliderRef.value.min ? props.min.toString() : sliderRef.value.min)
   sliderRef.value.style.setProperty('--max', !sliderRef.value.max ? props.max.toString() : sliderRef.value.max)
 }
@@ -83,17 +84,17 @@ https://toughengineer.github.io/demo/slider-styler*/
   --thumb-box-shadow: 0 0 0px #e6e6e6;
   --thumb-border: none;
   --thumb-border-radius: 999px;
-  --thumb-background: oklch(80% var(--theme-colors-chroma-200) calc(var(--theme-colors-hue) + 0));
-  --thumb-background-hover: oklch(90% var(--theme-colors-chroma-200) calc(var(--theme-colors-hue) + 0));
-  --thumb-background-active: oklch(70% var(--theme-colors-chroma-200) calc(var(--theme-colors-hue) + 0));
+  --thumb-background: oklch(80% var(--chromatic-chroma-200) calc(var(--chromatic-hue) + 0));
+  --thumb-background-hover: oklch(90% var(--chromatic-chroma-200) calc(var(--chromatic-hue) + 0));
+  --thumb-background-active: oklch(70% var(--chromatic-chroma-200) calc(var(--chromatic-hue) + 0));
 
   --track-height: calc(var(--height) - var(--track-value-padding) * 2);
   --track-box-shadow: none;
   --track-border: solid 2px rgb(238, 238, 238);
   --track-border-radius: 6px;
-  --track-background: rgb(238, 238, 238);
-  --track-background-hover: rgb(238, 238, 238);
-  --track-background-active: rgb(238, 238, 238);
+  --track-background: rgba(238, 238, 238, 0.6);
+  --track-background-hover: rgba(238, 238, 238, 0.6);
+  --track-background-active: rgba(238, 238, 238, 0.6);
 
   --track-value-background: rgb(255, 255, 255);
   --track-value-background-hover: rgb(255, 255, 255);
@@ -102,14 +103,14 @@ https://toughengineer.github.io/demo/slider-styler*/
 }
 
 .dark .form_input-range {
-  --thumb-background: oklch(70% var(--theme-colors-chroma-200) calc(var(--theme-colors-hue) + 0));
-  --thumb-background-hover: oklch(90% var(--theme-colors-chroma-200) calc(var(--theme-colors-hue) + 0));
-  --thumb-background-active: oklch(80% var(--theme-colors-chroma-200) calc(var(--theme-colors-hue) + 0));
+  --thumb-background: oklch(70% var(--chromatic-chroma-200) calc(var(--chromatic-hue) + 0));
+  --thumb-background-hover: oklch(90% var(--chromatic-chroma-200) calc(var(--chromatic-hue) + 0));
+  --thumb-background-active: oklch(80% var(--chromatic-chroma-200) calc(var(--chromatic-hue) + 0));
 
   --track-border: solid 2px rgb(44, 44, 44);
-  --track-background: rgb(44, 44, 44);
-  --track-background-hover: rgb(44, 44, 44);
-  --track-background-active: rgb(44, 44, 44);
+  --track-background: rgba(44, 44, 44, 0.7);
+  --track-background-hover: rgba(44, 44, 44, 0.7);
+  --track-background-active: rgba(44, 44, 44, 0.7);
 
   --track-value-background: rgb(164, 164, 164);
   --track-value-background-hover: rgb(164, 164, 164);
@@ -143,7 +144,8 @@ https://toughengineer.github.io/demo/slider-styler*/
     background 0.2s ease-in-out,
     box-shadow 0.2s ease-in-out,
     border-color 0.2s ease-in-out,
-    transform 0.2s ease-in-out;
+    transform 0.2s cubic-bezier(0.165, 0.84, 0.44, 1),
+    width 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
 }
 
 .form_input-range::-webkit-slider-runnable-track {
@@ -151,6 +153,7 @@ https://toughengineer.github.io/demo/slider-styler*/
   border: var(--track-border);
   border-radius: var(--track-border-radius);
   background: var(--track-background);
+  backdrop-filter: blur(8px);
   box-shadow: var(--track-box-shadow);
   position: relative;
   cursor: col-resize;
@@ -161,6 +164,9 @@ https://toughengineer.github.io/demo/slider-styler*/
 
 .form_input-range::-webkit-slider-thumb:hover {
   background: var(--thumb-background-hover);
+
+  width: calc(var(--thumb-width) * 1.6);
+  transform: scaleY(1.2);
 }
 
 .form_input-range:hover::-webkit-slider-runnable-track {
@@ -207,6 +213,12 @@ https://toughengineer.github.io/demo/slider-styler*/
   box-shadow: var(--thumb-box-shadow);
   cursor: col-resize;
   margin-left: calc(0 - var(--track-value-padding));
+  transition:
+    background 0.2s ease-in-out,
+    box-shadow 0.2s ease-in-out,
+    border-color 0.2s ease-in-out,
+    transform 0.2s cubic-bezier(0.165, 0.84, 0.44, 1),
+    width 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
 }
 
 .form_input-range::-moz-range-track {
@@ -214,6 +226,7 @@ https://toughengineer.github.io/demo/slider-styler*/
   border: var(--track-border);
   border-radius: var(--track-border-radius);
   background: var(--track-background);
+  backdrop-filter: blur(8px);
   box-shadow: var(--track-box-shadow);
   cursor: col-resize;
   /* Trim left and right paddings of track */
@@ -222,6 +235,9 @@ https://toughengineer.github.io/demo/slider-styler*/
 
 .form_input-range::-moz-range-thumb:hover {
   background: var(--thumb-background-hover);
+
+  width: calc(var(--thumb-width) * 1.6);
+  transform: scaleY(1.2);
 }
 
 .form_input-range:hover::-moz-range-track {
@@ -280,12 +296,20 @@ https://toughengineer.github.io/demo/slider-styler*/
   margin-left: calc(0 - var(--track-value-padding));
   box-sizing: border-box;
   cursor: col-resize;
+
+  transition:
+    background 0.2s ease-in-out,
+    box-shadow 0.2s ease-in-out,
+    border-color 0.2s ease-in-out,
+    transform 0.2s cubic-bezier(0.165, 0.84, 0.44, 1),
+    width 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
 }
 
 .form_input-range::-ms-track {
   height: var(--track-height);
   border-radius: var(--track-border-radius);
   background: var(--track-background);
+  backdrop-filter: blur(8px);
   border: var(--track-border);
   box-shadow: var(--track-box-shadow);
   box-sizing: border-box;
@@ -294,6 +318,9 @@ https://toughengineer.github.io/demo/slider-styler*/
 
 .form_input-range::-ms-thumb:hover {
   background: var(--thumb-background-hover);
+
+  width: calc(var(--thumb-width) * 1.6);
+  transform: scaleY(1.2);
 }
 
 .form_input-range:hover::-ms-track {