@vestow/vue 0.1.0

package/src/components/radio-group/index.ts

@@ -0,0 +1,21 @@
+import type { ComputedRef } from 'vue'
+import type { RadioGroupItemVariants } from '../../variants/components/radio-group'
+import { createContext } from 'reka-ui'
+
+export { radioGroupItemVariants, type RadioGroupItemVariants } from '../../variants/components/radio-group'
+export { default as RadioGroup } from './RadioGroup.vue'
+export { default as RadioGroupItem } from './RadioGroupItem.vue'
+
+/** Cỡ/kiểu tô/trạng thái lỗi mà `RadioGroup` truyền xuống từng nút con. */
+export interface RadioGroupContext {
+  size: ComputedRef<RadioGroupItemVariants['size']>
+  tone: ComputedRef<RadioGroupItemVariants['tone']>
+  invalid: ComputedRef<boolean>
+}
+
+// Dùng createContext của reka thay vì tự khai InjectionKey: cùng một cơ chế với
+// mọi context khác đang chạy trong cây component, và báo lỗi kèm tên component.
+export const [injectRadioGroupContext, provideRadioGroupContext]
+  = createContext<RadioGroupContext>('RadioGroup')
+
+export { default as RadioGroupItemField } from './RadioGroupItemField.vue'

package/src/components/rating/Rating.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import type { RatingRootEmits, RatingRootProps } from 'reka-ui'
+import type { CSSProperties } from 'vue'
+import type { ClassProps } from '../../lib/types'
+import { RatingItem, RatingItemIndicator, RatingRoot, useForwardPropsEmits } from 'reka-ui'
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+import RatingStar from './RatingStar.vue'
+
+const props = withDefaults(
+  defineProps<RatingRootProps & ClassProps & {
+    /** Cỡ một ngôi sao. Đặt thành biến CSS để lớp rỗng và lớp đầy khớp nhau. */
+    size?: 'sm' | 'default' | 'lg'
+  }>(),
+  { length: 5, hoverable: true, size: 'default' },
+)
+const emits = defineEmits<RatingRootEmits>()
+
+const delegated = computed(() => {
+  const { class: _class, size: _size, ...rest } = props
+  return rest
+})
+
+const forwarded = useForwardPropsEmits(delegated, emits)
+
+const sizes = { sm: '1rem', default: '1.25rem', lg: '1.5rem' }
+const style = computed<CSSProperties>(() => ({ '--rating-item-size': sizes[props.size] } as CSSProperties))
+</script>
+
+<template>
+  <!--
+    Slot mặc định dựng sẵn cả hàng sao, nên `<Rating v-model="score" />` chạy
+    được ngay. Truyền nội dung vào là thay hẳn — dùng khi cần icon khác hoặc
+    bố cục khác, và khi đó `RatingItem` / `RatingItemIndicator` vẫn export sẵn.
+  -->
+  <RatingRoot
+    v-bind="forwarded"
+    :style="style"
+    :class="cn(
+      'inline-flex items-center gap-0.5',
+      'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      props.class,
+    )"
+  >
+    <slot>
+      <RatingItem
+        v-for="item in props.length"
+        v-slot="{ steps }"
+        :key="item"
+        :item="item"
+        class="relative block size-(--rating-item-size) cursor-pointer"
+      >
+        <RatingStar class="absolute inset-0 text-muted-foreground/35" />
+        <!--
+          Mỗi bước là một lớp phủ bị cắt theo `--reka-rating-item-step-width`
+          mà reka đặt inline. Ngôi sao bên trong giữ nguyên cỡ đầy đủ, nên nửa
+          sao là một ngôi sao bị xén chứ không phải một ngôi sao bị bóp.
+        -->
+        <RatingItemIndicator
+          v-for="step in steps"
+          :key="step"
+          :step="step"
+          class="absolute inset-y-0 left-0 block overflow-hidden outline-none w-(--reka-rating-item-step-width) opacity-(--reka-rating-item-step-opacity) z-(--reka-rating-item-step-z-index) focus-visible:outline-none"
+        >
+          <RatingStar class="text-warning" filled />
+        </RatingItemIndicator>
+      </RatingItem>
+    </slot>
+  </RatingRoot>
+</template>

package/src/components/rating/RatingItem.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { RatingItemProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { RatingItem } from 'reka-ui'
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<RatingItemProps & ClassProps>()
+
+const delegated = computed(() => {
+  const { class: _class, ...rest } = props
+  return rest
+})
+</script>
+
+<template>
+  <!-- Slot có phạm vi trả về `steps`: một phần tử khi `step` là 1, hai khi 0.5,
+       và cứ thế. Bên gọi dựng một `RatingItemIndicator` cho mỗi bước. -->
+  <RatingItem
+    v-slot="{ steps }"
+    v-bind="delegated"
+    :class="cn('relative block size-(--rating-item-size) cursor-pointer', props.class)"
+  >
+    <slot :steps="steps" />
+  </RatingItem>
+</template>

package/src/components/rating/RatingItemIndicator.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { RatingItemIndicatorProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { RatingItemIndicator } from 'reka-ui'
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<RatingItemIndicatorProps & ClassProps>()
+
+const delegated = computed(() => {
+  const { class: _class, ...rest } = props
+  return rest
+})
+</script>
+
+<template>
+  <!--
+    KHÔNG đặt `style` ở đây: reka đã bind inline `--reka-rating-item-step-width`,
+    `-opacity` và `-z-index` lên chính element này. Thêm style của mình vào là
+    tranh chỗ với nó, mà mấy biến đó chính là thứ vẽ ra nửa sao.
+  -->
+  <RatingItemIndicator
+    v-bind="delegated"
+    :class="cn('absolute inset-y-0 left-0 block overflow-hidden outline-none w-(--reka-rating-item-step-width) opacity-(--reka-rating-item-step-opacity) z-(--reka-rating-item-step-z-index)', props.class)"
+  >
+    <slot />
+  </RatingItemIndicator>
+</template>

package/src/components/rating/RatingStar.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import { Star } from '../../lib/icons'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<ClassProps & { filled?: boolean }>()
+</script>
+
+<template>
+  <!-- `max-w-none` giữ ngôi sao ở đúng cỡ ngay cả khi lớp phủ đã bị cắt hẹp —
+       thiếu nó thì nửa sao thành sao bị bóp méo thay vì sao bị xén. -->
+  <Star
+    :class="cn('size-(--rating-item-size) max-w-none', props.filled && 'fill-current', props.class)"
+    aria-hidden="true"
+  />
+</template>

package/src/components/rating/index.ts

@@ -0,0 +1,13 @@
+/**
+ * Chấm sao. `<Rating v-model="score" />` là đủ — slot mặc định dựng sẵn cả hàng.
+ *
+ * Nửa sao (`step="0.5"`) không phải một icon riêng: reka chia mỗi ngôi sao thành
+ * mấy bước, mỗi bước là một lớp phủ bị **cắt** theo bề rộng, và ngôi sao bên
+ * trong giữ nguyên cỡ đầy đủ. Vì vậy `RatingStar` khai `max-w-none` — thiếu nó
+ * thì nửa sao thành ngôi sao bị bóp méo.
+ */
+
+export { default as Rating } from './Rating.vue'
+export { default as RatingItem } from './RatingItem.vue'
+export { default as RatingItemIndicator } from './RatingItemIndicator.vue'
+export { default as RatingStar } from './RatingStar.vue'

package/src/components/scroll-area/ScrollArea.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import type { ScrollAreaRootProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import {
+  ScrollAreaCorner,
+  ScrollAreaRoot,
+  ScrollAreaScrollbar,
+  ScrollAreaThumb,
+  ScrollAreaViewport,
+} from 'reka-ui'
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+
+const props = withDefaults(
+  defineProps<ScrollAreaRootProps & ClassProps & {
+    orientation?: 'vertical' | 'horizontal' | 'both'
+    viewportClass?: string
+  }>(),
+  { orientation: 'vertical' },
+)
+
+const delegated = computed(() => {
+  const { class: _class, orientation: _orientation, viewportClass: _viewportClass, ...rest } = props
+  return rest
+})
+</script>
+
+<template>
+  <ScrollAreaRoot v-bind="delegated" :class="cn('relative overflow-hidden', props.class)">
+    <ScrollAreaViewport :class="cn('size-full rounded-[inherit]', props.viewportClass)">
+      <slot />
+    </ScrollAreaViewport>
+
+    <ScrollAreaScrollbar
+      v-if="props.orientation !== 'horizontal'"
+      orientation="vertical"
+      class="flex w-2 touch-none select-none border-l border-l-transparent p-px transition-colors"
+    >
+      <ScrollAreaThumb class="relative flex-1 rounded-full bg-border" />
+    </ScrollAreaScrollbar>
+
+    <ScrollAreaScrollbar
+      v-if="props.orientation !== 'vertical'"
+      orientation="horizontal"
+      class="flex h-2 touch-none select-none border-t border-t-transparent p-px transition-colors"
+    >
+      <ScrollAreaThumb class="relative flex-1 rounded-full bg-border" />
+    </ScrollAreaScrollbar>
+
+    <ScrollAreaCorner />
+  </ScrollAreaRoot>
+</template>

package/src/components/scroll-area/index.ts

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

package/src/components/search-input/SearchInput.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import { computed } from 'vue'
+import { Search } from '../../lib/icons'
+import { cn } from '../../lib/utils'
+import Input from '../input/Input.vue'
+
+/**
+ * Gốc là cái vỏ `<div class="relative">` chứ không phải ô nhập, nên thuộc tính
+ * rơi tự do (`aria-label`, `id`, `disabled`, `name`) phải chuyển tay xuống
+ * `Input` — để mặc định thì chúng đáp xuống cái div và `<Label for>` trỏ vào
+ * hư không. `class` vẫn ở vỏ vì nó là thứ đặt bề rộng.
+ */
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(
+  defineProps<ClassProps & {
+    placeholder?: string
+    size?: 'sm' | 'default'
+  }>(),
+  { size: 'sm' },
+)
+
+const model = defineModel<string>({ default: '' })
+
+const iconClass = computed(() =>
+  props.size === 'sm' ? 'left-2.5 size-3.5' : 'left-3 size-4',
+)
+</script>
+
+<template>
+  <div :class="cn('relative', props.class)">
+    <Search
+      :class="cn('pointer-events-none absolute top-1/2 -translate-y-1/2 text-muted-foreground', iconClass)"
+      aria-hidden="true"
+    />
+    <Input
+      v-bind="$attrs"
+      v-model="model"
+      type="search"
+      :size="props.size"
+      :placeholder="props.placeholder"
+      :class="props.size === 'sm' ? 'pl-8' : 'pl-9'"
+    />
+  </div>
+</template>

package/src/components/search-input/index.ts

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

package/src/components/select/Select.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts" generic="T extends AcceptableValue = AcceptableValue">
+import type { AcceptableValue, SelectRootEmits, SelectRootProps } from 'reka-ui'
+import { SelectRoot, useForwardPropsEmits } from 'reka-ui'
+
+const props = defineProps<SelectRootProps<T>>()
+const emits = defineEmits<SelectRootEmits<T>>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <SelectRoot v-bind="forwarded">
+    <slot />
+  </SelectRoot>
+</template>

package/src/components/select/SelectContent.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import type { SelectContentEmits, SelectContentProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import {
+  injectSelectRootContext,
+  SelectContent,
+  SelectPortal,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectViewport,
+  useForwardPropsEmits,
+} from 'reka-ui'
+import { computed } from 'vue'
+import { ChevronDown, ChevronUp } from '../../lib/icons'
+import { cn } from '../../lib/utils'
+
+const props = withDefaults(
+  defineProps<SelectContentProps & ClassProps>(),
+  { position: 'popper', sideOffset: 6 },
+)
+const emits = defineEmits<SelectContentEmits>()
+
+const delegated = computed(() => {
+  const { class: _class, ...rest } = props
+  return rest
+})
+
+const forwarded = useForwardPropsEmits(delegated, emits)
+
+// reka không đặt `aria-multiselectable` khi bật `multiple`, mà APG đòi listbox
+// chọn nhiều phải khai — nếu không trình đọc màn hình vẫn nói "chọn một".
+const rootContext = injectSelectRootContext()
+const multiselectable = computed(() => rootContext.multiple.value || undefined)
+</script>
+
+<template>
+  <SelectPortal>
+    <SelectContent
+      v-bind="forwarded"
+      :aria-multiselectable="multiselectable"
+      :class="cn(
+        // `ui-menu` + `bg-menu-surface` cho khớp `menuContentClass`: Select là
+        // một menu, nên hai trục `data-menu-color` / `data-menu-appearance` phải
+        // với tới nó. Nó không dùng chung chuỗi class kia vì còn có nút cuộn
+        // trên/dưới và phần định vị riêng.
+        'ui-menu surface relative z-(--z-overlay) max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-border bg-menu-surface text-popover-foreground shadow-md',
+        'data-[state=open]:animate-in data-[state=closed]:animate-out',
+        'data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0',
+        'data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95',
+        props.position === 'popper' && 'w-full min-w-[var(--reka-select-trigger-width)]',
+        props.class,
+      )"
+    >
+      <SelectScrollUpButton class="flex h-6 cursor-default items-center justify-center text-muted-foreground">
+        <ChevronUp class="size-4" />
+      </SelectScrollUpButton>
+
+      <SelectViewport :class="cn('p-1', props.position === 'popper' && 'max-h-[var(--reka-select-content-available-height)]')">
+        <slot />
+      </SelectViewport>
+
+      <SelectScrollDownButton class="flex h-6 cursor-default items-center justify-center text-muted-foreground">
+        <ChevronDown class="size-4" />
+      </SelectScrollDownButton>
+    </SelectContent>
+  </SelectPortal>
+</template>

package/src/components/select/SelectGroup.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { SelectGroupProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { SelectGroup } from 'reka-ui'
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<SelectGroupProps & ClassProps>()
+
+const delegated = computed(() => {
+  const { class: _class, ...rest } = props
+  return rest
+})
+</script>
+
+<template>
+  <SelectGroup v-bind="delegated" :class="cn('p-1', props.class)">
+    <slot />
+  </SelectGroup>
+</template>

package/src/components/select/SelectItem.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import type { SelectItemEmits, SelectItemProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { SelectItem, SelectItemIndicator, SelectItemText, useForwardPropsEmits } from 'reka-ui'
+import { computed } from 'vue'
+import { Check } from '../../lib/icons'
+import { cn } from '../../lib/utils'
+
+// Không đặt generic ở đây: generic làm TS mất thông tin "value là bắt buộc"
+// khi forward prop xuống SelectItem của reka. Kiểu của value vẫn là
+// AcceptableValue (string | number | bigint | Record | null), đủ dùng.
+const props = defineProps<SelectItemProps & ClassProps & {
+  /**
+   * Ô đánh dấu bên trái thay cho dấu tick bên phải — dành cho chế độ nhiều,
+   * nơi "đang chọn" của từng dòng phải đọc ra như một công tắc. Trạng thái lấy
+   * từ `data-state` mà reka đặt trên chính dòng, qua `group-data-*`.
+   */
+  checkbox?: boolean
+}>()
+const emits = defineEmits<SelectItemEmits>()
+
+const delegated = computed(() => {
+  const { class: _class, checkbox: _checkbox, ...rest } = props
+  return rest
+})
+
+const forwarded = useForwardPropsEmits(delegated, emits)
+</script>
+
+<template>
+  <SelectItem
+    v-bind="forwarded"
+    :class="cn(
+      'group relative flex w-full cursor-default select-none items-center gap-2 rounded-sm py-1.5 pl-2 text-sm outline-none transition-colors',
+      props.checkbox ? 'pr-2' : 'pr-8',
+      'focus:bg-accent focus:text-accent-foreground',
+      'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      props.class,
+    )"
+  >
+    <span
+      v-if="props.checkbox"
+      aria-hidden="true"
+      class="flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input bg-background shadow-xs transition-colors group-data-[state=checked]:border-primary group-data-[state=checked]:bg-primary group-data-[state=checked]:text-primary-foreground"
+    >
+      <SelectItemIndicator>
+        <Check class="size-3.5" />
+      </SelectItemIndicator>
+    </span>
+    <SelectItemText>
+      <slot />
+    </SelectItemText>
+    <span v-if="!props.checkbox" class="absolute right-2 flex size-4 items-center justify-center">
+      <SelectItemIndicator>
+        <Check class="size-4" />
+      </SelectItemIndicator>
+    </span>
+  </SelectItem>
+</template>

package/src/components/select/SelectLabel.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { SelectLabelProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { SelectLabel } from 'reka-ui'
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<SelectLabelProps & ClassProps>()
+
+const delegated = computed(() => {
+  const { class: _class, ...rest } = props
+  return rest
+})
+</script>
+
+<template>
+  <SelectLabel v-bind="delegated" :class="cn('px-2 py-1.5 text-xs font-medium text-muted-foreground', props.class)">
+    <slot />
+  </SelectLabel>
+</template>

package/src/components/select/SelectSeparator.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { SelectSeparatorProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { SelectSeparator } from 'reka-ui'
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<SelectSeparatorProps & ClassProps>()
+
+const delegated = computed(() => {
+  const { class: _class, ...rest } = props
+  return rest
+})
+</script>
+
+<template>
+  <SelectSeparator v-bind="delegated" :class="cn('-mx-1 my-1 h-px bg-border', props.class)" />
+</template>

package/src/components/select/SelectTrigger.vue

@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import type { SelectTriggerProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { injectSelectRootContext, SelectIcon, SelectTrigger } from 'reka-ui'
+import { computed } from 'vue'
+import { useI18n } from '../../composables/useI18n'
+import { focusRing, invalidRing } from '../../lib/focus'
+import { ChevronDown, X } from '../../lib/icons'
+import { cn } from '../../lib/utils'
+import Spinner from '../spinner/Spinner.vue'
+
+/**
+ * Gốc là một `<div>` bọc ngoài chứ không phải chính cái nút: nút × xoá giá trị
+ * phải là `<button>` thật, mà button không được lồng trong button. Nó nằm CẠNH
+ * trigger, đặt chồng lên bằng `absolute`. Thuộc tính rơi tự do (`id`,
+ * `aria-invalid` từ FormField…) vì vậy phải chuyển tay xuống nút.
+ */
+defineOptions({ inheritAttrs: false })
+
+const props = defineProps<SelectTriggerProps & ClassProps & {
+  invalid?: boolean
+  size?: 'sm' | 'default'
+  /**
+   * Nút × xoá giá trị, chỉ hiện khi đang có giá trị. Bàn phím: `Delete` hoặc
+   * `Backspace` lúc trigger đang focus — nút × để `tabindex="-1"` nên không
+   * thêm một điểm dừng Tab cho mỗi select trong form.
+   */
+  clearable?: boolean
+  /** Thay mũi tên bằng spinner và khai `aria-busy`. Vẫn mở được. */
+  loading?: boolean
+}>()
+
+const { t } = useI18n()
+const rootContext = injectSelectRootContext()
+
+const delegated = computed(() => {
+  const { class: _class, invalid: _invalid, size: _size, clearable: _clearable, loading: _loading, ...rest } = props
+  return rest
+})
+
+const showClear = computed(() =>
+  props.clearable === true
+  && !rootContext.isEmptyModelValue.value
+  && !rootContext.disabled?.value,
+)
+
+function clear() {
+  rootContext.modelValue.value = rootContext.multiple.value ? [] : undefined
+}
+
+function onKeydown(event: KeyboardEvent) {
+  if (!showClear.value || (event.key !== 'Delete' && event.key !== 'Backspace'))
+    return
+  event.preventDefault()
+  clear()
+}
+</script>
+
+<template>
+  <div :class="cn('relative', props.class)">
+    <SelectTrigger
+      v-bind="{ ...delegated, ...$attrs }"
+      :aria-invalid="props.invalid || undefined"
+      :aria-busy="props.loading || undefined"
+      :data-invalid="props.invalid || undefined"
+      :class="cn(
+        'flex w-full items-center justify-between gap-2 rounded-md border border-input bg-background px-3 py-1 text-sm shadow-xs transition-colors',
+        // `min-h` chứ không `h`: giá trị dạng chip xuống hàng thì trigger phải cao lên theo.
+        props.size === 'sm' ? 'min-h-8' : 'min-h-9',
+        'data-[placeholder]:text-muted-foreground',
+        'focus:outline-none',
+        focusRing,
+        'disabled:cursor-not-allowed disabled:opacity-50',
+        invalidRing,
+        '[&>span]:truncate [&>span]:text-left',
+        // Chừa chỗ cho nút × (16px) và khoảng cách tới nó (8px).
+        showClear && '[&>[data-slot=select-value]]:mr-6',
+        // Mũi tên xoay theo `data-state` mà reka đặt trên trigger — không JS.
+        '[&[data-state=open]>svg]:rotate-180',
+      )"
+      @keydown="onKeydown"
+    >
+      <slot />
+      <Spinner v-if="props.loading" class="shrink-0 text-muted-foreground" />
+      <SelectIcon v-else as-child>
+        <ChevronDown class="size-4 shrink-0 text-muted-foreground transition-transform duration-(--duration-base) motion-reduce:transition-none" />
+      </SelectIcon>
+    </SelectTrigger>
+
+    <button
+      v-if="showClear"
+      type="button"
+      tabindex="-1"
+      :aria-label="t('ui.select.clear')"
+      class="absolute top-1/2 right-9 grid size-4 -translate-y-1/2 place-items-center rounded-sm text-muted-foreground transition-colors hover:text-foreground"
+      @click="clear"
+    >
+      <X class="size-3.5" />
+    </button>
+  </div>
+</template>

package/src/components/select/SelectValue.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import type { SelectValueProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { SelectValue } from 'reka-ui'
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+import { badgeVariants } from '../badge'
+import { chipVariants } from '../chip'
+
+const props = defineProps<SelectValueProps & ClassProps & {
+  /**
+   * Chế độ nhiều: mỗi nhãn đã chọn là một chip, thay vì chuỗi nối dấu phẩy.
+   * Chip chỉ để nhìn — nút gỡ trên chip sẽ là button lồng trong button.
+   */
+  chips?: boolean
+}>()
+
+const delegated = computed(() => {
+  const { class: _class, chips: _chips, ...rest } = props
+  return rest
+})
+
+const chipClass = cn(badgeVariants({ variant: 'secondary' }), chipVariants({ size: 'sm', removable: false }))
+</script>
+
+<template>
+  <!--
+    Phải chuyển tiếp slot scope: reka trả `selectedLabel` và `modelValue` qua
+    slot, viết `<slot />` trần là bên gọi nhận `undefined` mà không có gì báo.
+
+    Nhánh chip chỉ render khi CÓ giá trị; còn lại để rỗng để reka rơi về nội
+    dung mặc định của nó (nhãn nối dấu phẩy, hoặc placeholder).
+  -->
+  <SelectValue
+    v-slot="scope"
+    v-bind="delegated"
+    data-slot="select-value"
+    :class="cn('truncate', props.chips && 'flex flex-wrap gap-1', props.class)"
+  >
+    <slot v-bind="scope">
+      <template v-if="props.chips && scope.selectedLabel.length">
+        <span v-for="label in scope.selectedLabel" :key="label" :class="chipClass">{{ label }}</span>
+      </template>
+    </slot>
+  </SelectValue>
+</template>

package/src/components/select/index.ts

@@ -0,0 +1,8 @@
+export { default as Select } from './Select.vue'
+export { default as SelectContent } from './SelectContent.vue'
+export { default as SelectGroup } from './SelectGroup.vue'
+export { default as SelectItem } from './SelectItem.vue'
+export { default as SelectLabel } from './SelectLabel.vue'
+export { default as SelectSeparator } from './SelectSeparator.vue'
+export { default as SelectTrigger } from './SelectTrigger.vue'
+export { default as SelectValue } from './SelectValue.vue'