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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@proj-airi/ui",
   "type": "module",
-  "version": "0.7.0-alpha.1",
+  "version": "0.7.0",
   "description": "A collection of UI components that used by Project AIRI",
   "author": {
     "name": "Moeru AI Project AIRI Team",
@@ -21,14 +21,14 @@
     "./*": "./*"
   },
   "dependencies": {
-    "@vueuse/core": "^13.5.0",
+    "@vueuse/core": "^13.6.0",
     "floating-vue": "^5.2.2",
-    "reka-ui": "^2.3.2",
-    "vue": "^3.5.17"
+    "reka-ui": "^2.4.1",
+    "vue": "^3.5.18"
   },
   "devDependencies": {
     "@vue-macros/volar": "3.0.0-beta.8",
-    "vue-tsc": "^3.0.1"
+    "vue-tsc": "^3.0.5"
   },
   "scripts": {
     "typecheck": "vue-tsc --noEmit"

package/src/components/Form/Combobox/Combobox.vue

@@ -0,0 +1,130 @@
+<script setup lang="ts" generic="T extends AcceptableValue">
+import type { AcceptableValue } from 'reka-ui'
+
+import {
+  ComboboxAnchor,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxGroup,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxItemIndicator,
+  ComboboxLabel,
+  ComboboxRoot,
+  ComboboxSeparator,
+  ComboboxTrigger,
+  ComboboxViewport,
+} from 'reka-ui'
+
+const props = defineProps<{
+  options: { groupLabel: string, children?: { label: string, value: T }[] }[]
+  placeholder?: string
+}>()
+
+const modelValue = defineModel<T>({ required: false })
+
+function toDisplayValue(value: T): string {
+  const option = props.options.flatMap(group => group.children).find(option => option?.value === value)
+  return option ? option.label : props.placeholder || ''
+}
+</script>
+
+<template>
+  <ComboboxRoot v-model="modelValue" class="relative w-full">
+    <ComboboxAnchor
+      :class="[
+        'w-full inline-flex items-center justify-between rounded-xl border px-3 leading-none h-10 gap-[5px] outline-none',
+        'text-sm text-neutral-700 dark:text-neutral-200 data-[placeholder]:text-neutral-200',
+        'bg-white dark:bg-neutral-900 disabled:bg-neutral-100 hover:bg-neutral-50 dark:disabled:bg-neutral-900 dark:hover:bg-neutral-700',
+        'border-neutral-200 dark:border-neutral-800 border-solid border-2 focus:border-primary-300 dark:focus:border-primary-400/50',
+        'shadow-sm focus:shadow-[0_0_0_2px] focus:shadow-black',
+        'transition-colors duration-200 ease-in-out',
+      ]"
+    >
+      <ComboboxInput
+        :class="[
+          '!bg-transparent outline-none h-full selection:bg-grass5 placeholder-stone-400 w-full',
+          'text-neutral-700 dark:text-neutral-200',
+          'transition-colors duration-200 ease-in-out',
+        ]"
+        :placeholder="props.placeholder"
+        :display-value="(val) => toDisplayValue(val)"
+      />
+      <ComboboxTrigger>
+        <div
+          i-solar:alt-arrow-down-linear
+          :class="[
+            'h-4 w-4',
+            'text-neutral-700 dark:text-neutral-200',
+            'transition-colors duration-200 ease-in-out',
+          ]"
+        />
+      </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',
+          ]"
+        />
+
+        <template
+          v-for="(group, index) in options"
+          :key="group.name"
+        >
+          <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>
+
+            <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"
+              >
+                <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>
+  </ComboboxRoot>
+</template>

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

@@ -0,0 +1 @@
+export { default as Combobox } from './Combobox.vue'

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

@@ -1,14 +1,17 @@
 <script setup lang="ts">
 import { Select } from '@proj-airi/ui'
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   label: string
   description?: string
   options?: { label: string, value: string | number }[]
   placeholder?: string
   disabled?: boolean
   layout?: 'horizontal' | 'vertical'
-}>()
+  selectClass?: string | string[]
+}>(), {
+  layout: 'horizontal',
+})
 
 const modelValue = defineModel<string>({ required: false })
 </script>
@@ -16,17 +19,23 @@ const modelValue = defineModel<string>({ required: false })
 <template>
   <label flex="~ col gap-4">
     <div
+      class="items-center justify-center"
       :class="[
-        props.layout === 'horizontal' ? 'flex flex-row items-center justify-between gap-2' : 'flex flex-col items-start justify-center gap-2',
+        props.layout === 'horizontal' ? 'grid grid-cols-3 gap-2' : 'grid grid-cols-2 gap-2',
       ]"
     >
-      <div class="min-w-[max-content] flex-1">
-        <div class="flex items-center gap-1 text-sm font-medium">
+      <div
+        class="w-full"
+        :class="[
+          props.layout === 'horizontal' ? 'col-span-2' : 'row-span-1',
+        ]"
+      >
+        <div class="flex items-center gap-1 break-words text-sm font-medium">
           <slot name="label">
             {{ props.label }}
           </slot>
         </div>
-        <div class="text-xs text-neutral-500 dark:text-neutral-400">
+        <div class="break-words text-xs text-neutral-500 dark:text-neutral-400">
           <slot name="description">
             {{ props.description }}
           </slot>
@@ -35,10 +44,16 @@ const modelValue = defineModel<string>({ required: false })
       <slot>
         <Select
           v-model="modelValue"
-          :options="props.options"
+          :options="props.options?.filter(option => option.label && option.value) || []"
           :placeholder="props.placeholder"
           :disabled="props.disabled"
           :title="label"
+          :class="[
+            ...(props.selectClass
+              ? (typeof props.selectClass === 'string' ? [props.selectClass] : props.selectClass)
+              : []),
+            props.layout === 'horizontal' ? 'col-span-1' : 'row-span-2',
+          ]"
         >
           <template #default="{ value }">
             {{ props.options?.find(option => option.value === value)?.label || props.placeholder }}

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

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { useDebounce } from '@vueuse/core'
+import { ref } from 'vue'
+
+defineProps<{
+  accept?: string
+  multiple?: boolean
+}>()
+
+const files = defineModel<File[]>({ required: false, default: () => [] })
+const firstFile = ref<File>()
+
+const isDragging = ref(false)
+const isDraggingDebounced = useDebounce(isDragging, 150)
+
+function handleFileChange(e: Event) {
+  const input = e.target as HTMLInputElement
+
+  if (input.files && input.files.length > 0) {
+    firstFile.value = input.files[0]
+  }
+
+  files.value = Array.from(input.files || [])
+  isDragging.value = false
+}
+</script>
+
+<template>
+  <label
+    relative cursor-pointer
+    @dragover="isDragging = true"
+    @dragleave="isDragging = false"
+  >
+    <input
+      type="file"
+      :accept="accept"
+      :multiple="multiple"
+      class="absolute inset-0 h-full w-full opacity-0"
+      @change="handleFileChange"
+    >
+    <slot :is-dragging="isDraggingDebounced" :first-file="firstFile" :files="files" />
+  </label>
+</template>

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

@@ -1,3 +1,4 @@
+export { default as BasicInputFile } from './BasicInputFile.vue'
 export { default as Input } from './Input.vue'
 export { default as InputFile } from './InputFile.vue'
 export { default as InputKeyValue } from './InputKeyValue.vue'

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

@@ -74,11 +74,11 @@ https://toughengineer.github.io/demo/slider-styler*/
   transition: background-color 0.2s ease;
 
   --thumb-width: var(--height);
-  --thumb-height: 0px;
+  --thumb-height: var(--height);
   --thumb-box-shadow: none;
   --thumb-border: none;
   --thumb-border-radius: 0px;
-  --thumb-background: rgb(255, 255, 255);
+  --thumb-background: transparent;
 
   --track-height: calc(var(--height) - var(--track-value-padding) * 2);
   --track-box-shadow: 0 0 12px -2px rgb(0 0 0 / 22%);

package/src/components/Form/Select/Select.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import { Dropdown as VDropdown } from 'floating-vue'
 import { provide, ref } from 'vue'
 
-import UIOption from './Option.vue'
+import Combobox from '../Combobox/Combobox.vue'
 
 const props = defineProps<{
   options?: { label: string, value: string | number }[]
@@ -28,94 +27,5 @@ provide('hide', handleHide)
 </script>
 
 <template>
-  <VDropdown
-    auto-size
-    auto-boundary-max-size
-    w-full
-  >
-    <div
-      min-w="[160px]" p="2.5" w-full
-      class="focus:ring-2 focus:ring-black/10"
-      border="neutral-300 dark:neutral-800 solid 2 focus:neutral-400 dark:focus:neutral-600"
-      text="xs sm:sm dark:neutral-200 disabled:neutral-400 dark:disabled:neutral-600 neutral-700"
-      bg="white dark:neutral-900 disabled:neutral-100 hover:neutral-50 dark:disabled:neutral-900 dark:hover:neutral-800 "
-      cursor="disabled:not-allowed pointer"
-      flex items-center gap-2 rounded-lg shadow-sm outline-none transition-colors duration-200 ease-in-out
-      :class="[
-        props.disabled ? 'pointer-events-none' : '',
-      ]"
-    >
-      <div class="flex-1 truncate">
-        <slot :value="modelValue">
-          {{ props.options?.find(item => item.value === modelValue)?.label || modelValue }}
-        </slot>
-      </div>
-      <div i-solar:alt-arrow-down-linear class="h-3.5 w-3.5 text-neutral-500 dark:text-neutral-400" />
-    </div>
-
-    <template #popper="{ hide }">
-      <div class="min-w-[160px] flex flex-col gap-0.5 border border-neutral-200 rounded-lg bg-white p-1 shadow-lg dark:border-neutral-800 dark:bg-neutral-900 dark:bg-neutral-900">
-        <slot name="options" :hide="hide">
-          <template v-if="props.options && props.options.length">
-            <UIOption
-              v-for="option of props.options"
-              :key="option.value"
-              :value="option.value"
-              :label="option.label"
-              :active="modelValue === option.value"
-              @click="selectOption(option.value); hide()"
-            />
-          </template>
-
-          <p v-else class="my-3 text-center text-neutral-500 dark:text-neutral-400">
-            No data
-          </p>
-        </slot>
-      </div>
-    </template>
-  </VDropdown>
+  <Combobox v-model="modelValue" :default-value="modelValue" :options="[{ groupLabel: '', children: props.options }]" />
 </template>
-
-<style>
-.resize-observer[data-v-b329ee4c] {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: -1;
-  width: 100%;
-  height: 100%;
-  border: none;
-  background-color: transparent;
-  pointer-events: none;
-  display: block;
-  overflow: hidden;
-  opacity: 0;
-}
-
-.resize-observer[data-v-b329ee4c] object {
-  display: block;
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-  overflow: hidden;
-  pointer-events: none;
-  z-index: -1;
-}
-
-.v-popper__popper {
-  z-index: 10000;
-  top: 0;
-  left: 0;
-  outline: none;
-}
-
-.v-popper__arrow-container {
-  display: none;
-}
-
-.v-popper__inner {
-  border: none !important;
-}
-</style>

package/src/components/Form/index.ts

@@ -1,4 +1,5 @@
 export * from './Checkbox'
+export * from './Combobox'
 export * from './Field'
 export * from './Input'
 export * from './Radio'