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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/package.json +5 -5
  2. package/src/components/Form/Combobox/Combobox.vue +17 -15
  3. package/src/components/Form/Field/FieldSelect.vue +16 -5
  4. package/src/components/Form/Select/Select.vue +1 -1
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@proj-airi/ui",
3
3
  "type": "module",
4
- "version": "0.7.0-beta.1",
4
+ "version": "0.7.0",
5
5
  "description": "A collection of UI components that used by Project AIRI",
6
6
  "author": {
7
7
  "name": "Moeru AI Project AIRI Team",
@@ -21,14 +21,14 @@
21
21
  "./*": "./*"
22
22
  },
23
23
  "dependencies": {
24
- "@vueuse/core": "^13.5.0",
24
+ "@vueuse/core": "^13.6.0",
25
25
  "floating-vue": "^5.2.2",
26
- "reka-ui": "^2.3.2",
27
- "vue": "^3.5.17"
26
+ "reka-ui": "^2.4.1",
27
+ "vue": "^3.5.18"
28
28
  },
29
29
  "devDependencies": {
30
30
  "@vue-macros/volar": "3.0.0-beta.8",
31
- "vue-tsc": "^3.0.3"
31
+ "vue-tsc": "^3.0.5"
32
32
  },
33
33
  "scripts": {
34
34
  "typecheck": "vue-tsc --noEmit"
package/src/components/Form/Combobox/Combobox.vue CHANGED
@@ -1,4 +1,6 @@
1
- <script setup lang="ts">
1
+ <script setup lang="ts" generic="T extends AcceptableValue">
2
+ import type { AcceptableValue } from 'reka-ui'
3
+
2
4
  import {
3
5
  ComboboxAnchor,
4
6
  ComboboxContent,
@@ -15,26 +17,26 @@ import {
15
17
  } from 'reka-ui'
16
18
 
17
19
  const props = defineProps<{
18
- options: { groupLabel: string, children?: { label: string, value: any }[] }[]
20
+ options: { groupLabel: string, children?: { label: string, value: T }[] }[]
19
21
  placeholder?: string
20
22
  }>()
21
23
 
22
- function toDisplayValue(value: any): string {
24
+ const modelValue = defineModel<T>({ required: false })
25
+
26
+ function toDisplayValue(value: T): string {
23
27
  const option = props.options.flatMap(group => group.children).find(option => option?.value === value)
24
28
  return option ? option.label : props.placeholder || ''
25
29
  }
26
30
  </script>
27
31
 
28
32
  <template>
29
- <ComboboxRoot
30
- class="relative w-full"
31
- >
33
+ <ComboboxRoot v-model="modelValue" class="relative w-full">
32
34
  <ComboboxAnchor
33
35
  :class="[
34
- 'min-w-[160px] w-full inline-flex items-center justify-between rounded-lg border px-2 leading-none h-[35px] gap-[5px] outline-none',
35
- 'text-xs text-neutral-700 dark:text-neutral-200 data-[placeholder]:text-neutral-200',
36
+ 'w-full inline-flex items-center justify-between rounded-xl border px-3 leading-none h-10 gap-[5px] outline-none',
37
+ 'text-sm text-neutral-700 dark:text-neutral-200 data-[placeholder]:text-neutral-200',
36
38
  'bg-white dark:bg-neutral-900 disabled:bg-neutral-100 hover:bg-neutral-50 dark:disabled:bg-neutral-900 dark:hover:bg-neutral-700',
37
- 'border-neutral-300 dark:border-neutral-800 border-solid border-2 focus:border-neutral-400 dark:focus:border-neutral-600',
39
+ 'border-neutral-200 dark:border-neutral-800 border-solid border-2 focus:border-primary-300 dark:focus:border-primary-400/50',
38
40
  'shadow-sm focus:shadow-[0_0_0_2px] focus:shadow-black',
39
41
  'transition-colors duration-200 ease-in-out',
40
42
  ]"
@@ -63,10 +65,10 @@ function toDisplayValue(value: any): string {
63
65
  <ComboboxContent
64
66
  :avoid-collisions="true"
65
67
  :class="[
66
- 'absolute z-10 w-full mt-1 min-w-[160px] overflow-hidden rounded-lg shadow-sm border will-change-[opacity,transform] max-h-50dvh',
68
+ 'absolute z-10 w-full mt-1 min-w-[160px] overflow-hidden rounded-xl shadow-sm border will-change-[opacity,transform] max-h-50dvh',
67
69
  'data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade',
68
70
  'bg-white dark:bg-neutral-900',
69
- 'border-neutral-300 dark:border-neutral-800 border-solid border-2 focus:border-neutral-400 dark:focus:border-neutral-600',
71
+ 'border-neutral-200 dark:border-neutral-800 border-solid border-2 focus:border-neutral-300 dark:focus:border-neutral-600',
70
72
  ]"
71
73
  >
72
74
  <ComboboxViewport class="p-[2px]">
@@ -82,7 +84,7 @@ function toDisplayValue(value: any): string {
82
84
  v-for="(group, index) in options"
83
85
  :key="group.name"
84
86
  >
85
- <ComboboxGroup>
87
+ <ComboboxGroup class="overflow-x-hidden">
86
88
  <ComboboxSeparator
87
89
  v-if="index !== 0"
88
90
  class="m-[5px] h-[1px] bg-neutral-400"
@@ -104,9 +106,9 @@ function toDisplayValue(value: any): string {
104
106
  :text-value="option.label"
105
107
  :value="option.value"
106
108
  :class="[
107
- 'leading-none rounded-[5px] flex items-center h-[25px] pr-[35px] pl-[25px] relative select-none data-[disabled]:pointer-events-none data-[highlighted]:outline-none',
109
+ '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',
108
110
  'data-[highlighted]:bg-neutral-100 dark:data-[highlighted]:bg-neutral-800',
109
- 'text-xs text-neutral-700 dark:text-neutral-200 data-[disabled]:text-neutral-400 dark:data-[disabled]:text-neutral-600 data-[highlighted]:text-grass1',
111
+ 'text-sm text-neutral-700 dark:text-neutral-200 data-[disabled]:text-neutral-400 dark:data-[disabled]:text-neutral-600 data-[highlighted]:text-grass1',
110
112
  'transition-colors duration-200 ease-in-out',
111
113
  'cursor-pointer',
112
114
  ]"
@@ -116,7 +118,7 @@ function toDisplayValue(value: any): string {
116
118
  >
117
119
  <div i-solar:alt-arrow-right-outline />
118
120
  </ComboboxItemIndicator>
119
- <span>
121
+ <span class="line-clamp-1 overflow-hidden text-ellipsis whitespace-nowrap">
120
122
  {{ option.label }}
121
123
  </span>
122
124
  </ComboboxItem>
package/src/components/Form/Field/FieldSelect.vue CHANGED
@@ -19,17 +19,23 @@ const modelValue = defineModel<string>({ required: false })
19
19
  <template>
20
20
  <label flex="~ col gap-4">
21
21
  <div
22
+ class="items-center justify-center"
22
23
  :class="[
23
- props.layout === 'horizontal' ? 'flex flex-row items-center justify-between gap-2' : 'flex flex-col items-start justify-center gap-2',
24
+ props.layout === 'horizontal' ? 'grid grid-cols-3 gap-2' : 'grid grid-cols-2 gap-2',
24
25
  ]"
25
26
  >
26
- <div class="min-w-[max-content] flex-1">
27
- <div class="flex items-center gap-1 text-sm font-medium">
27
+ <div
28
+ class="w-full"
29
+ :class="[
30
+ props.layout === 'horizontal' ? 'col-span-2' : 'row-span-1',
31
+ ]"
32
+ >
33
+ <div class="flex items-center gap-1 break-words text-sm font-medium">
28
34
  <slot name="label">
29
35
  {{ props.label }}
30
36
  </slot>
31
37
  </div>
32
- <div class="text-xs text-neutral-500 dark:text-neutral-400">
38
+ <div class="break-words text-xs text-neutral-500 dark:text-neutral-400">
33
39
  <slot name="description">
34
40
  {{ props.description }}
35
41
  </slot>
@@ -42,7 +48,12 @@ const modelValue = defineModel<string>({ required: false })
42
48
  :placeholder="props.placeholder"
43
49
  :disabled="props.disabled"
44
50
  :title="label"
45
- :class="props.selectClass"
51
+ :class="[
52
+ ...(props.selectClass
53
+ ? (typeof props.selectClass === 'string' ? [props.selectClass] : props.selectClass)
54
+ : []),
55
+ props.layout === 'horizontal' ? 'col-span-1' : 'row-span-2',
56
+ ]"
46
57
  >
47
58
  <template #default="{ value }">
48
59
  {{ props.options?.find(option => option.value === value)?.label || props.placeholder }}
package/src/components/Form/Select/Select.vue CHANGED
@@ -27,5 +27,5 @@ provide('hide', handleHide)
27
27
  </script>
28
28
 
29
29
  <template>
30
- <Combobox v-model="modelValue" :options="[{ groupLabel: '', children: props.options }]" />
30
+ <Combobox v-model="modelValue" :default-value="modelValue" :options="[{ groupLabel: '', children: props.options }]" />
31
31
  </template>