@proj-airi/ui 0.9.0-beta.6 → 0.9.0-rc.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@proj-airi/ui",
   "type": "module",
-  "version": "0.9.0-beta.6",
+  "version": "0.9.0-rc.1",
   "description": "A collection of UI components that used by Project AIRI",
   "author": {
     "name": "Moeru AI Project AIRI Team",
@@ -23,6 +23,7 @@
     "./*": "./*"
   },
   "dependencies": {
+    "@moeru/std": "0.1.0-beta.17",
     "@vueuse/core": "^14.2.1",
     "floating-vue": "^5.2.2",
     "reka-ui": "^2.9.2",

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

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { InputFile } from '../input'
+
+const props = defineProps<{
+  label?: string
+  description?: string
+  accept?: string
+  multiple?: boolean
+  placeholder?: string
+}>()
+
+const modelValue = defineModel<File[] | undefined>({ required: false })
+</script>
+
+<template>
+  <div class="max-w-full">
+    <label class="flex flex-col gap-4">
+      <div>
+        <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>
+      <InputFile
+        v-model="modelValue"
+        :accept="props.accept"
+        :multiple="props.multiple"
+        :placeholder="props.placeholder"
+      />
+    </label>
+  </div>
+</template>

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,9 @@
 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 FieldInputFile } from './field-input-file.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/index.ts

@@ -1,4 +1,5 @@
 export { default as BasicInputFile } from './basic-input-file.vue'
+export { default as InputFileCard } from './input-file-card.vue'
 export { default as InputFile } from './input-file.vue'
 export { default as InputKeyValue } from './input-key-value.vue'
 export { default as Input } from './input.vue'

package/src/components/form/input/input-file-card.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { useSlots } from 'vue'
+
+import BasicInputFile from './basic-input-file.vue'
+
+defineProps<{
+  accept?: string
+  multiple?: boolean
+}>()
+
+const slots = useSlots()
+</script>
+
+<template>
+  <BasicInputFile
+    :class="[
+      'min-h-[120px] flex flex-col cursor-pointer items-center justify-center rounded-xl p-6',
+      'border-dashed border-2',
+      'transition-all duration-300',
+      'opacity-95',
+      'hover:scale-100 hover:opacity-100 hover:shadow-md hover:dark:shadow-lg',
+    ]"
+    :is-not-dragging-classes="[
+      'border-neutral-200 dark:border-neutral-700 hover:border-primary-300 dark:hover:border-primary-700',
+      'bg-white/60 dark:bg-black/30 hover:bg-white/80 dark:hover:bg-black/40',
+    ]"
+    :is-dragging-classes="[
+      'border-primary-400 dark:border-primary-600 hover:border-primary-300 dark:hover:border-primary-700',
+      'bg-primary-50/5 dark:bg-primary-900/5',
+    ]"
+    :accept="accept"
+    :multiple="multiple"
+  >
+    <template #default="{ isDragging }">
+      <slot v-if="slots.default" :is-dragging="isDragging" />
+      <div
+        v-else
+        class="flex flex-col items-center"
+        :class="[
+          isDragging ? 'text-primary-500 dark:text-primary-400' : 'text-neutral-400 dark:text-neutral-500',
+        ]"
+      >
+        <div i-solar:upload-square-line-duotone mb-2 text-5xl />
+        <p font-medium text="center lg">
+          Upload
+        </p>
+        <p v-if="isDragging" text="center" text-sm>
+          Release to upload
+        </p>
+        <p v-else text="center" text-sm>
+          Click or drag and drop a file here
+        </p>
+      </div>
+    </template>
+  </BasicInputFile>
+</template>

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

@@ -1,56 +1,96 @@
 <script setup lang="ts">
-import { useSlots } from 'vue'
+import { useObjectUrl } from '@vueuse/core'
+import { computed } from 'vue'
 
-import BasicInputFile from './basic-input-file.vue'
-
-defineProps<{
+const props = withDefaults(defineProps<{
   accept?: string
   multiple?: boolean
-}>()
+  placeholder?: string
+}>(), {
+  placeholder: 'Choose file',
+  multiple: false,
+})
+
+const modelValue = defineModel<File[] | undefined>({ default: undefined })
+
+const fileNames = computed(() => {
+  const files = modelValue.value ?? []
+  if (!files.length)
+    return props.placeholder
+  return files.map(file => file.name).join(', ')
+})
+
+const previewImageFile = computed(() => {
+  const files = modelValue.value ?? []
+  return files.find(file => file.type.startsWith('image/'))
+})
+
+const previewUrl = useObjectUrl(previewImageFile)
+
+function onFileChange(event: Event) {
+  const input = event.target as HTMLInputElement
+  if (!input.files) {
+    modelValue.value = undefined
+    return
+  }
 
-const slots = useSlots()
+  const files = Array.from(input.files)
+  modelValue.value = files.length ? files : undefined
+
+  // Allow re-selecting the same file.
+  input.value = ''
+}
 </script>
 
 <template>
-  <BasicInputFile
+  <label
     :class="[
-      'min-h-[120px] flex flex-col cursor-pointer items-center justify-center rounded-xl p-6',
-      'border-dashed border-2',
-      'transition-all duration-300',
-      'opacity-95',
-      'hover:scale-100 hover:opacity-100 hover:shadow-md hover:dark:shadow-lg',
-    ]"
-    :is-not-dragging-classes="[
-      'border-neutral-200 dark:border-neutral-700 hover:border-primary-300 dark:hover:border-primary-700',
-      'bg-white/60 dark:bg-black/30 hover:bg-white/80 dark:hover:bg-black/40',
-    ]"
-    :is-dragging-classes="[
-      'border-primary-400 dark:border-primary-600 hover:border-primary-300 dark:hover:border-primary-700',
-      'bg-primary-50/5 dark:bg-primary-900/5',
+      'w-full flex cursor-pointer items-center gap-2',
+      'rounded-lg border-2 border-solid border-neutral-100 bg-neutral-50 px-2 py-1 shadow-sm',
+      'transition-all duration-200 ease-in-out',
+      'dark:border-neutral-900 dark:bg-neutral-950',
+      'hover:border-primary-300/70 dark:hover:border-primary-700/70',
     ]"
-    :accept="accept"
-    :multiple="multiple"
   >
-    <template #default="{ isDragging }">
-      <slot v-if="slots.default" :is-dragging="isDragging" />
-      <div
-        v-else
-        class="flex flex-col items-center"
+    <input
+      type="file"
+      :accept="accept"
+      :multiple="multiple"
+      :class="[
+        'hidden',
+      ]"
+      @change="onFileChange"
+    >
+
+    <div
+      :class="[
+        'i-solar:upload-square-line-duotone h-5 w-5 shrink-0 text-neutral-500 dark:text-neutral-400',
+      ]"
+    />
+
+    <div
+      :class="[
+        'min-w-0 flex-1 truncate text-sm text-neutral-600 dark:text-neutral-300',
+      ]"
+      :title="fileNames"
+    >
+      {{ fileNames }}
+    </div>
+
+    <div
+      v-if="previewUrl"
+      :class="[
+        'h-8 w-8 shrink-0 overflow-hidden rounded-md border border-neutral-200 bg-white',
+        'dark:border-neutral-700 dark:bg-neutral-900',
+      ]"
+    >
+      <img
+        :src="previewUrl"
+        alt="Preview"
         :class="[
-          isDragging ? 'text-primary-500 dark:text-primary-400' : 'text-neutral-400 dark:text-neutral-500',
+          'h-full w-full object-cover',
         ]"
       >
-        <div i-solar:upload-square-line-duotone mb-2 text-5xl />
-        <p font-medium text="center lg">
-          Upload
-        </p>
-        <p v-if="isDragging" text="center" text-sm>
-          Release to upload
-        </p>
-        <p v-else text="center" text-sm>
-          Click or drag and drop a file here
-        </p>
-      </div>
-    </template>
-  </BasicInputFile>
+    </div>
+  </label>
 </template>

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>

package/src/components/misc/button.vue

@@ -19,6 +19,7 @@ interface ButtonProps {
   loading?: boolean // Loading state
   variant?: ButtonVariant // Button style variant
   size?: ButtonSize // Button size variant
+  shape?: 'rounded' | 'pill' | 'square' // Button shape
   theme?: ButtonTheme // Button theme
   block?: boolean // Full width button
 }
@@ -127,9 +128,21 @@ const variantClasses: Record<ButtonVariant, Record<ButtonTheme, {
 
 // Extract size styles for better organization
 const sizeClasses: Record<ButtonSize, string> = {
-  sm: 'px-3 py-1.5 text-xs',
-  md: 'px-4 py-2 text-sm',
-  lg: 'px-6 py-3 text-base',
+  sm: props.shape === 'pill'
+    ? 'px-3 py-1.5 text-xs'
+    : props.shape === 'square'
+      ? 'p-2 text-xs'
+      : 'px-4 py-2 text-sm',
+  md: props.shape === 'pill'
+    ? 'px-4 py-2 text-sm'
+    : props.shape === 'square'
+      ? 'p-3 text-sm'
+      : 'px-5 py-3 text-base',
+  lg: props.shape === 'pill'
+    ? 'px-6 py-3 text-base'
+    : props.shape === 'square'
+      ? 'p-4 text-base'
+      : 'px-6 py-3 text-base',
 }
 
 // Base classes that are always applied

package/src/components/misc/container-error.vue

@@ -0,0 +1,219 @@
+<script setup lang="ts">
+import { errorCauseFrom, errorMessageFrom, errorNameFrom, errorStackFrom } from '@moeru/std'
+import { ScrollAreaCorner, ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport } from 'reka-ui'
+import { computed, shallowRef } from 'vue'
+
+import Button from './button.vue'
+
+type HeightPreset = 'sm' | 'md' | 'lg' | 'xl' | 'auto'
+
+interface ContainerErrorProps {
+  error?: unknown
+  message?: string
+  stack?: string
+  includeStack?: boolean
+  showCopyButton?: boolean
+  showFeedbackButton?: boolean
+  copyButtonLabel?: string
+  copiedButtonLabel?: string
+  feedbackButtonLabel?: string
+  heightPreset?: HeightPreset
+}
+
+const props = withDefaults(defineProps<ContainerErrorProps>(), {
+  includeStack: true,
+  showCopyButton: true,
+  showFeedbackButton: true,
+  copyButtonLabel: 'Copy',
+  copiedButtonLabel: 'Copied',
+  feedbackButtonLabel: 'Feedback',
+  heightPreset: 'md',
+})
+
+const emit = defineEmits<{
+  (e: 'copy', content: string): void
+  (e: 'feedback'): void
+}>()
+
+const copied = shallowRef(false)
+
+const heightPresetClasses: Record<HeightPreset, string[]> = {
+  sm: ['h-32'],
+  md: ['h-36'],
+  lg: ['h-42'],
+  xl: ['h-48'],
+  auto: [],
+}
+
+function indentLines(content: string, indent = 2): string {
+  const spaces = ' '.repeat(indent)
+  return content
+    .split('\n')
+    .map(line => `${spaces}${line}`)
+    .join('\n')
+}
+
+const resolvedErrorName = computed(() => {
+  return (errorNameFrom(props.error) ?? '').trim()
+})
+
+const resolvedMessage = computed(() => {
+  const fromProp = props.message?.trim()
+  if (fromProp)
+    return fromProp
+
+  const normalizedMessage = errorMessageFrom(props.error)
+  if (normalizedMessage)
+    return normalizedMessage.trim()
+
+  return props.error == null ? '' : String(props.error).trim()
+})
+
+const resolvedStack = computed(() => {
+  const fromProp = props.stack?.trim()
+  if (fromProp) {
+    const index = fromProp.indexOf(resolvedMessage.value)
+    if (index >= 0)
+      return fromProp.slice(index + resolvedMessage.value.length).trim()
+  }
+
+  if (!props.includeStack)
+    return ''
+
+  const resolved = (errorStackFrom(props.error) ?? '').trim()
+  const index = resolved.indexOf(resolvedMessage.value)
+  if (index >= 0)
+    return resolved.slice(index + resolvedMessage.value.length).trim()
+
+  return resolved
+})
+
+const resolvedCause = computed(() => {
+  if (props.error == null)
+    return ''
+
+  const cause = errorCauseFrom(props.error)
+  if (cause == null)
+    return ''
+
+  if (cause instanceof Error) {
+    const name = errorNameFrom(cause) ?? cause.name ?? 'Error'
+    const message = (errorMessageFrom(cause) ?? cause.message ?? '').trim()
+    const stack = (errorStackFrom(cause) ?? cause.stack ?? '').trim()
+
+    const header = message ? `${name}: ${message}` : name
+    if (!stack)
+      return header
+
+    return `${header}\n${indentLines(stack, 2)}`
+  }
+
+  return String(cause).trim()
+})
+
+const panelContent = computed(() => {
+  const sections: string[] = []
+
+  if (resolvedErrorName.value || resolvedMessage.value) {
+    const header = resolvedErrorName.value
+      ? (resolvedMessage.value ? `${resolvedErrorName.value}: ${resolvedMessage.value}` : resolvedErrorName.value)
+      : resolvedMessage.value
+    if (header)
+      sections.push(header)
+  }
+
+  if (resolvedStack.value)
+    sections.push(`Stack:\n${resolvedStack.value}`)
+
+  if (resolvedCause.value)
+    sections.push(`Cause:\n${resolvedCause.value}`)
+
+  return sections.join('\n\n')
+})
+
+async function copyContent() {
+  if (!panelContent.value)
+    return
+
+  emit('copy', panelContent.value)
+
+  try {
+    const clipboard = globalThis.navigator?.clipboard
+    if (!clipboard)
+      return
+
+    await clipboard.writeText(panelContent.value)
+    copied.value = true
+    globalThis.setTimeout(() => {
+      copied.value = false
+    }, 1200)
+  }
+  catch {
+    // Ignore clipboard failures and still keep emitted copy payload.
+  }
+}
+</script>
+
+<template>
+  <div
+    :class="[
+      'relative w-full rounded-xl border-2 border-red-200/70 bg-red-50/60 backdrop-blur-md p-1',
+      'dark:border-red-900/50 dark:bg-red-950/25',
+    ]"
+  >
+    <div :class="['absolute right-4 -translate-x-full top-2 z-10']">
+      <Button
+        v-if="showCopyButton"
+        size="sm"
+        variant="secondary"
+        shape="square"
+        icon="i-solar:copy-line-duotone"
+        :title="copied ? copiedButtonLabel : copyButtonLabel"
+        :aria-label="copied ? copiedButtonLabel : copyButtonLabel"
+        @click="copyContent"
+      />
+    </div>
+
+    <div :class="['absolute right-2 top-2 z-10']">
+      <Button
+        v-if="showFeedbackButton"
+        size="sm"
+        variant="secondary"
+        shape="square"
+        icon="i-solar:square-share-line-line-duotone"
+        :title="feedbackButtonLabel"
+        :aria-label="feedbackButtonLabel"
+        @click="emit('feedback')"
+      />
+    </div>
+
+    <ScrollAreaRoot
+      type="auto"
+      :class="[
+        'relative w-full overflow-hidden rounded-xl',
+        'bg-neutral-50/80 dark:bg-neutral-950/80',
+        ...heightPresetClasses[heightPreset],
+      ]"
+    >
+      <ScrollAreaViewport :class="['h-full w-full']">
+        <div :class="['flex flex-col gap-2 p-3 text-xs']">
+          <div v-if="resolvedErrorName || resolvedMessage" :class="['font-mono font-semibold text-red-700 leading-relaxed dark:text-red-300']">
+            {{ resolvedErrorName || 'Error' }}
+            <span v-if="resolvedMessage">
+              : {{ resolvedMessage }}
+            </span>
+          </div>
+          <pre v-if="resolvedStack" :class="['whitespace-pre-wrap break-words text-neutral-700 leading-relaxed dark:text-neutral-200']">    {{ resolvedStack }}</pre>
+          <pre v-if="resolvedCause" :class="['whitespace-pre-wrap break-words text-neutral-700 leading-relaxed dark:text-neutral-200']">{{ `Cause:\n${resolvedCause}` }}</pre>
+          <div v-if="!panelContent" :class="['text-neutral-600 dark:text-neutral-300']">
+            No error details available.
+          </div>
+        </div>
+      </ScrollAreaViewport>
+      <ScrollAreaScrollbar orientation="vertical" :class="['w-2 p-0.5']">
+        <ScrollAreaThumb :class="['rounded-full bg-neutral-300/80 dark:bg-neutral-700/80']" />
+      </ScrollAreaScrollbar>
+      <ScrollAreaCorner />
+    </ScrollAreaRoot>
+  </div>
+</template>

package/src/components/misc/index.ts

@@ -1,4 +1,5 @@
 export { default as Button } from './button.vue'
 export { default as Callout } from './callout.vue'
+export { default as ContainerError } from './container-error.vue'
 export { default as DoubleCheckButton } from './double-check-button.vue'
 export { default as Progress } from './progress.vue'