@proj-airi/ui 0.8.0 → 0.8.1-beta.10

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@proj-airi/ui",
   "type": "module",
-  "version": "0.8.0",
+  "version": "0.8.1-beta.10",
   "description": "A collection of UI components that used by Project AIRI",
   "author": {
     "name": "Moeru AI Project AIRI Team",
@@ -16,8 +16,9 @@
   },
   "exports": {
     ".": "./src/index.ts",
-    "./components/animations": "./src/components/Animations/index.ts",
-    "./components/form": "./src/components/Form/index.ts",
+    "./components/animations": "./src/components/animations/index.ts",
+    "./components/form": "./src/components/form/index.ts",
+    "./components/layouts": "./src/components/layouts/index.ts",
     "./*": "./*"
   },
   "dependencies": {

package/src/components/animations/index.ts

@@ -0,0 +1,9 @@
+export { default as TransitionBidirectional } from './transition-bidirectional.vue'
+export {
+  /**
+   * @deprecated Use TransitionBidirectional instead
+   */
+  default as BidirectionalTransition,
+} from './transition-bidirectional.vue'
+export { default as TransitionHorizontal } from './transition-horizontal.vue'
+export { default as TransitionVertical } from './transition-vertical.vue'

package/src/components/{Form/Checkbox/Checkbox.vue → form/checkbox/checkbox.vue}

@@ -11,6 +11,7 @@ const modelValue = defineModel<boolean>({ required: true })
       'duration-250 ease-in-out',
       'focus-within:outline-none',
       'flex',
+      'is-interacting',
       'border-neutral-300 dark:border-neutral-700 data-[state=checked]:border-primary-200 data-[state=unchecked]:border-neutral-300 focus-within:border-neutral-800',
       'data-[state=checked]:bg-primary-400 data-[state=unchecked]:bg-neutral-300 data-[state=checked]:dark:bg-primary-400/80 dark:data-[state=unchecked]:bg-neutral-800',
       'relative h-7 w-12.5 rounded-full',

package/src/components/form/checkbox/index.ts

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

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

@@ -0,0 +1,138 @@
+<script setup lang="ts" generic="T extends AcceptableValue">
+import type { AcceptableValue } from 'reka-ui'
+
+import {
+  ComboboxAnchor,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxGroup,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxItemIndicator,
+  ComboboxLabel,
+  ComboboxPortal,
+  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>
+
+    <ComboboxPortal>
+      <ComboboxContent
+        position="popper"
+        side="bottom"
+        align="start"
+        :side-offset="4"
+        :avoid-collisions="true"
+        :class="[
+          'z-150 w-full min-w-[160px] overflow-hidden rounded-xl shadow-sm border will-change-[opacity,transform]',
+          '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',
+        ]"
+        :style="{ width: 'var(--reka-combobox-trigger-width)' }"
+      >
+        <ComboboxViewport :class="['p-[2px]', 'max-h-50dvh', 'overflow-y-auto']">
+          <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.groupLabel"
+          >
+            <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-normal 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>
+    </ComboboxPortal>
+  </ComboboxRoot>
+</template>

package/src/components/form/combobox/index.ts

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

package/src/components/{Form/Field/FieldCheckbox.vue → form/field/field-checkbox.vue}

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import Checkbox from '../Checkbox/Checkbox.vue'
+import { Checkbox } from '../checkbox'
 
 const props = defineProps<{
   label?: string

package/src/components/{Form/Field/FieldInput.vue → form/field/field-input.vue}

@@ -1,19 +1,23 @@
-<script setup lang="ts">
-import Input from '../Input/Input.vue'
+<script
+  setup
+  lang="ts"
+  generic="InputType extends 'number' | string, T = InputType extends 'number' ? (number | undefined) : ((string | undefined))"
+>
+import { Input } from '../input'
 
 const props = withDefaults(defineProps<{
   label?: string
   description?: string
   placeholder?: string
   required?: boolean
-  type?: string
+  type?: InputType
   inputClass?: string
   singleLine?: boolean
 }>(), {
   singleLine: true,
 })
 
-const modelValue = defineModel<string>({ required: false })
+const modelValue = defineModel<T>({ required: false })
 </script>
 
 <template>
@@ -24,24 +28,31 @@ const modelValue = defineModel<string>({ required: false })
           <slot name="label">
             {{ props.label }}
           </slot>
-          <span v-if="props.required !== false" class="text-red-500">*</span>
+          <span v-if="props.required" class="text-red-500">*</span>
         </div>
-        <div class="text-xs text-neutral-500 dark:text-neutral-400" text-nowrap>
+        <div class="text-xs text-neutral-500 dark:text-neutral-400" text-wrap>
           <slot name="description">
             {{ props.description }}
           </slot>
         </div>
       </div>
       <Input
-        v-if="singleLine"
+        v-if="singleLine && props.type === 'number'"
+        v-model.number="modelValue"
+        :type="props.type"
+        :placeholder="props.placeholder"
+        :class="props.inputClass"
+      />
+      <Input
+        v-else-if="singleLine"
         v-model="modelValue"
         :type="props.type"
         :placeholder="props.placeholder"
         :class="props.inputClass"
       />
       <textarea
-        v-else
-        v-model="modelValue"
+        v-else-if="props.type !== 'number'"
+        v-model="modelValue as string | undefined"
         :type="props.type"
         :placeholder="props.placeholder"
         :class="[

package/src/components/{Form/Field/FieldKeyValues.vue → form/field/field-key-values.vue}

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue'
 
-import InputKeyValue from '../Input/InputKeyValue.vue'
+import { InputKeyValue } from '../input'
 
 const props = defineProps<{
   label?: string
@@ -37,7 +37,7 @@ watch([inputKey, inputValue], () => {
           </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>
+        <div class="text-xs text-neutral-500 dark:text-neutral-400">
           <slot name="description">
             {{ props.description }}
           </slot>

package/src/components/{Form/Field/FieldRange.vue → form/field/field-range.vue}

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import Range from '../Range/Range.vue'
+import { Range } from '../range'
 
 const props = withDefaults(defineProps<{
   min?: number

package/src/components/{Form/Field/FieldSelect.vue → form/field/field-select.vue}

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Select } from '@proj-airi/ui'
+import { Select } from '../select'
 
 const props = withDefaults(defineProps<{
   label: string

package/src/components/{Form/Field/FieldTextArea.vue → form/field/field-text-area.vue}

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import Textarea from '../Textarea/Textarea.vue'
+import { Textarea } from '../textarea'
 
 const props = withDefaults(defineProps<{
   label?: string
@@ -25,7 +25,7 @@ const modelValue = defineModel<string>({ required: false })
           </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>
+        <div class="text-xs text-neutral-500 dark:text-neutral-400">
           <slot name="description">
             {{ props.description }}
           </slot>

package/src/components/{Form/Field/FieldValues.vue → form/field/field-values.vue}

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import Input from '../Input/Input.vue'
+import { Input } from '../input'
 
 const props = defineProps<{
   label?: string

package/src/components/form/field/index.ts

@@ -0,0 +1,7 @@
+export { default as FieldCheckbox } from './field-checkbox.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/index.ts

@@ -0,0 +1,9 @@
+export * from './checkbox'
+export * from './combobox'
+export * from './field'
+export * from './input'
+export * from './radio'
+export * from './range'
+export * from './select'
+export * from './select-tab'
+export * from './textarea'

package/src/components/form/input/index.ts

@@ -0,0 +1,4 @@
+export { default as BasicInputFile } from './basic-input-file.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/InputFile.vue → form/input/input-file.vue}

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import BasicInputFile from './BasicInputFile.vue'
+import BasicInputFile from './basic-input-file.vue'
 
 defineProps<{
   accept?: string

package/src/components/{Form/Input/InputKeyValue.vue → form/input/input-key-value.vue}

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import Input from './Input.vue'
+import Input from './input.vue'
 
 const props = defineProps<{
   name?: string

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

@@ -0,0 +1,88 @@
+<script
+  setup
+  lang="ts"
+  generic="InputType extends 'number' | string, T = InputType extends 'number' ? (number | undefined) : ((string | undefined))"
+>
+// Define button variants for better type safety and maintainability
+type InputVariant = 'primary' | 'secondary' | 'primary-dimmed'
+
+type InputTheme = 'default'
+
+// Define size options for better flexibility
+type InputSize = 'sm' | 'md' | 'lg'
+
+const props = withDefaults(defineProps<{
+  type?: InputType
+  variant?: InputVariant // Button style variant
+  size?: InputSize // Button size variant
+  theme?: InputTheme // Button theme
+}>(), {
+  variant: 'primary',
+  size: 'md',
+  theme: 'default',
+})
+
+const modelValue = defineModel<T>({ required: false })
+
+const variantClasses: Record<InputVariant, Record<InputTheme, {
+  default: string[]
+}>> = {
+  'primary': {
+    default: {
+      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',
+        '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',
+      ],
+    },
+  },
+  'secondary': {
+    default: {
+      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',
+        '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',
+      ],
+    },
+  },
+  'primary-dimmed': {
+    default: {
+      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',
+        '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',
+      ],
+    },
+  },
+}
+</script>
+
+<template>
+  <template v-if="props.type === 'number'">
+    <input
+      v-model.number="modelValue"
+      :type="props.type || 'text'"
+      :class="[
+        'transition-all duration-200 ease-in-out',
+        'cursor-disabled:not-allowed',
+        ...variantClasses[props.variant][props.theme].default,
+      ]"
+    >
+  </template>
+  <template v-else>
+    <input
+      v-model="modelValue"
+      :type="props.type || 'text'"
+      :class="[
+        'transition-all duration-200 ease-in-out',
+        'cursor-disabled:not-allowed',
+        ...variantClasses[props.variant][props.theme].default,
+      ]"
+    >
+  </template>
+</template>

package/src/components/form/radio/index.ts

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

package/src/components/form/range/index.ts

@@ -0,0 +1,3 @@
+export { default as ColorHueRange } from './color-hue-range.vue'
+export { default as Range } from './range.vue'
+export { default as RoundRange } from './round-range.vue'

package/src/components/form/select/index.ts

@@ -0,0 +1,2 @@
+export { default as Option } from './option.vue'
+export { default as Select } from './select.vue'

package/src/components/{Form/Select/Select.vue → form/select/select.vue}

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { provide, ref } from 'vue'
 
-import Combobox from '../Combobox/Combobox.vue'
+import { Combobox } from '../combobox'
 
 const props = defineProps<{
   options?: { label: string, value: string | number }[]

package/src/components/form/select-tab/index.ts

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

package/src/components/{Form/SelectTab/SelectTab.vue → form/select-tab/select-tab.vue}

@@ -48,6 +48,7 @@ const rootStyle = computed(() => ({
     :aria-readonly="props.readonly"
     :class="[
       'select-tab',
+      'is-interacting',
       'relative', 'flex', 'w-full', 'items-stretch', 'rounded-lg',
       'overflow-hidden',
       'bg-white-400/6', 'dark:bg-neutral-950/70',

package/src/components/form/textarea/index.ts

@@ -0,0 +1,2 @@
+export { default as BasicTextarea } from './basic-text-area.vue'
+export { default as Textarea } from './textarea.vue'

package/src/components/{Form/Textarea/Textarea.vue → form/textarea/textarea.vue}

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import BasicTextarea from './Basic.vue'
+import BasicTextarea from './basic-text-area.vue'
 
 const modelValue = defineModel<string>({ default: '' })
 </script>

package/src/components/layouts/collapsible.vue

@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+import { watchEffect } from 'vue'
+
+import { TransitionVertical } from '../animations'
+
+const props = defineProps<{
+  default?: boolean
+  label?: string
+}>()
+const visible = defineModel<boolean>({ default: false })
+watchEffect(() => {
+  if (props.default != null) {
+    visible.value = !!props.default
+  }
+})
+
+function setVisible(value: boolean) {
+  visible.value = value
+  return value
+}
+</script>
+
+<template>
+  <div>
+    <slot name="trigger" v-bind="{ visible, setVisible }">
+      <button
+        :class="['sticky top-0 z-10 flex items-center justify-between px2 py1 text-sm backdrop-blur-xl']"
+        @click="visible = !visible"
+      >
+        <span>
+          {{ props.label ?? 'Collapsable' }}
+        </span> <span op50>{{ visible ? '▲' : '▼' }}</span>
+      </button>
+    </slot>
+    <TransitionVertical>
+      <slot v-if="visible" v-bind="{ visible, setVisible }" />
+    </TransitionVertical>
+  </div>
+</template>

package/src/components/layouts/index.ts

@@ -0,0 +1,3 @@
+export { default as Collapsible } from './collapsible.vue'
+export { default as Screen } from './screen.vue'
+export { default as Skeleton } from './skeleton.vue'

package/src/components/layouts/screen.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { breakpointsTailwind, useBreakpoints, useElementBounding, useWindowSize } from '@vueuse/core'
+import { computed, onMounted, ref, watch } from 'vue'
+
+const containerRef = ref<HTMLDivElement>()
+
+const breakpoints = useBreakpoints(breakpointsTailwind)
+const { width, height } = useWindowSize()
+const containerElementBounding = useElementBounding(containerRef, { immediate: true, windowResize: true, reset: true })
+
+const isMobile = computed(() => breakpoints.between('sm', 'md').value || breakpoints.smaller('sm').value)
+const isTablet = computed(() => breakpoints.between('md', 'lg').value)
+const isDesktop = computed(() => breakpoints.greaterOrEqual('lg').value)
+
+const canvasWidth = computed(() => {
+  if (isDesktop.value)
+    return containerElementBounding.width.value
+  else if (isMobile.value)
+    return (width.value - 16) // padding
+  else if (isTablet.value)
+    return (width.value - 16) // padding
+  else
+    return containerElementBounding.width.value
+})
+
+const canvasHeight = ref(0)
+
+watch([width, height, containerRef], () => {
+  const bounding = containerRef.value?.parentElement?.getBoundingClientRect()
+
+  if (isDesktop.value) {
+    canvasHeight.value = bounding?.height || 0
+  }
+  else if (isMobile.value) {
+    canvasHeight.value = bounding?.height || 0
+  }
+  else if (isTablet.value) {
+    canvasHeight.value = bounding?.height || 0
+  }
+  else {
+    canvasHeight.value = 600
+  }
+})
+
+watch([containerElementBounding.width, containerElementBounding.height], () => {
+  if (isDesktop.value) {
+    canvasHeight.value = containerElementBounding.height.value
+  }
+  else if (isMobile.value) {
+    canvasHeight.value = containerElementBounding.height.value
+  }
+  else if (isTablet.value) {
+    canvasHeight.value = containerElementBounding.height.value
+  }
+  else {
+    canvasHeight.value = 600
+  }
+})
+
+onMounted(async () => {
+  if (!containerRef.value)
+    return
+
+  containerElementBounding.update()
+})
+</script>
+
+<template>
+  <div ref="containerRef" h-full w-full>
+    <slot :width="canvasWidth" :height="canvasHeight" />
+  </div>
+</template>