@vestow/vue 0.1.0

package/src/components/collapsible/Collapsible.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { CollapsibleRootEmits, CollapsibleRootProps } from 'reka-ui'
+import { CollapsibleRoot, useForwardPropsEmits } from 'reka-ui'
+
+const props = defineProps<CollapsibleRootProps>()
+const emits = defineEmits<CollapsibleRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <CollapsibleRoot v-bind="forwarded">
+    <slot />
+  </CollapsibleRoot>
+</template>

package/src/components/collapsible/CollapsibleContent.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { CollapsibleContentProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { CollapsibleContent } from 'reka-ui'
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<CollapsibleContentProps & ClassProps>()
+
+const delegated = computed(() => {
+  const { class: _class, ...rest } = props
+  return rest
+})
+</script>
+
+<template>
+  <CollapsibleContent
+    v-bind="delegated"
+    :class="cn(
+      'overflow-hidden data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up',
+      props.class,
+    )"
+  >
+    <slot />
+  </CollapsibleContent>
+</template>

package/src/components/collapsible/CollapsibleTrigger.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { CollapsibleTriggerProps } from 'reka-ui'
+import { CollapsibleTrigger } from 'reka-ui'
+
+const props = defineProps<CollapsibleTriggerProps>()
+</script>
+
+<template>
+  <CollapsibleTrigger v-bind="props">
+    <slot />
+  </CollapsibleTrigger>
+</template>

package/src/components/collapsible/index.ts

@@ -0,0 +1,3 @@
+export { default as Collapsible } from './Collapsible.vue'
+export { default as CollapsibleContent } from './CollapsibleContent.vue'
+export { default as CollapsibleTrigger } from './CollapsibleTrigger.vue'

package/src/components/combobox/Combobox.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { ComboboxRootEmits, ComboboxRootProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { ComboboxRoot, useForwardPropsEmits } from 'reka-ui'
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<ComboboxRootProps & ClassProps>()
+const emits = defineEmits<ComboboxRootEmits>()
+
+const delegated = computed(() => {
+  const { class: _class, ...rest } = props
+  return rest
+})
+
+const forwarded = useForwardPropsEmits(delegated, emits)
+</script>
+
+<template>
+  <ComboboxRoot v-bind="forwarded" :class="cn('relative', props.class)">
+    <slot />
+  </ComboboxRoot>
+</template>

package/src/components/combobox/ComboboxAnchor.vue

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

package/src/components/combobox/ComboboxEmpty.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { ComboboxEmptyProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { ComboboxEmpty } from 'reka-ui'
+import { computed } from 'vue'
+import { useI18n } from '../../composables/useI18n'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<ComboboxEmptyProps & ClassProps>()
+const { t } = useI18n()
+const delegated = computed(() => {
+  const { class: _class, ...rest } = props
+  return rest
+})
+</script>
+
+<template>
+  <ComboboxEmpty v-bind="delegated" :class="cn('py-6 text-center text-sm text-muted-foreground', props.class)">
+    <slot>{{ t('ui.combobox.empty') }}</slot>
+  </ComboboxEmpty>
+</template>

package/src/components/combobox/ComboboxGroup.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { ComboboxGroupProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { ComboboxGroup, ComboboxLabel } from 'reka-ui'
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<ComboboxGroupProps & ClassProps & { heading?: string }>()
+
+const delegated = computed(() => {
+  const { class: _class, heading: _heading, ...rest } = props
+  return rest
+})
+</script>
+
+<template>
+  <ComboboxGroup v-bind="delegated" :class="cn('overflow-hidden p-1 text-foreground', props.class)">
+    <ComboboxLabel v-if="props.heading" class="px-2 py-1.5 text-xs font-medium text-muted-foreground">
+      {{ props.heading }}
+    </ComboboxLabel>
+    <slot />
+  </ComboboxGroup>
+</template>

package/src/components/combobox/ComboboxInput.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { ComboboxInputEmits, ComboboxInputProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { ComboboxInput, useForwardPropsEmits } from 'reka-ui'
+import { computed } from 'vue'
+import { Search } from '../../lib/icons'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<ComboboxInputProps & ClassProps & { hideIcon?: boolean }>()
+const emits = defineEmits<ComboboxInputEmits>()
+
+const delegated = computed(() => {
+  const { class: _class, hideIcon: _hideIcon, ...rest } = props
+  return rest
+})
+
+const forwarded = useForwardPropsEmits(delegated, emits)
+</script>
+
+<template>
+  <div class="flex items-center gap-2 border-b border-border px-3">
+    <Search v-if="!props.hideIcon" class="size-4 shrink-0 text-muted-foreground" />
+    <ComboboxInput
+      v-bind="forwarded"
+      :class="cn(
+        'flex h-10 w-full bg-transparent py-3 text-sm outline-none',
+        'placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
+        props.class,
+      )"
+    />
+  </div>
+</template>

package/src/components/combobox/ComboboxItem.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { ComboboxItemEmits, ComboboxItemProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { ComboboxItem, ComboboxItemIndicator, useForwardPropsEmits } from 'reka-ui'
+import { computed } from 'vue'
+import { Check } from '../../lib/icons'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<ComboboxItemProps & ClassProps>()
+const emits = defineEmits<ComboboxItemEmits>()
+
+const delegated = computed(() => {
+  const { class: _class, ...rest } = props
+  return rest
+})
+
+const forwarded = useForwardPropsEmits(delegated, emits)
+</script>
+
+<template>
+  <ComboboxItem
+    v-bind="forwarded"
+    :class="cn(
+      'relative flex w-full cursor-default select-none items-center gap-2 rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none transition-colors',
+      'data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground',
+      'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      '[&_svg]:size-4 [&_svg]:shrink-0',
+      props.class,
+    )"
+  >
+    <slot />
+    <span class="absolute right-2 flex size-4 items-center justify-center">
+      <ComboboxItemIndicator>
+        <Check class="size-4" />
+      </ComboboxItemIndicator>
+    </span>
+  </ComboboxItem>
+</template>

package/src/components/combobox/ComboboxList.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import type { ComboboxContentEmits, ComboboxContentProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { ComboboxContent, ComboboxPortal, ComboboxViewport, useForwardPropsEmits } from 'reka-ui'
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+
+const props = withDefaults(
+  defineProps<ComboboxContentProps & ClassProps & {
+    /** false = render inline (dùng cho command palette trong Dialog). */
+    portal?: boolean
+  }>(),
+  { position: 'popper', sideOffset: 6, portal: true },
+)
+const emits = defineEmits<ComboboxContentEmits>()
+
+const delegated = computed(() => {
+  const { class: _class, portal: _portal, ...rest } = props
+  return rest
+})
+
+const forwarded = useForwardPropsEmits(delegated, emits)
+</script>
+
+<template>
+  <component :is="props.portal ? ComboboxPortal : 'template'">
+    <ComboboxContent
+      v-bind="forwarded"
+      :class="cn(
+        'surface z-(--z-overlay) max-h-72 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover 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-[var(--reka-combobox-trigger-width)]',
+        props.class,
+      )"
+    >
+      <ComboboxViewport class="max-h-72 overflow-y-auto p-1">
+        <slot />
+      </ComboboxViewport>
+    </ComboboxContent>
+  </component>
+</template>

package/src/components/combobox/ComboboxSeparator.vue

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

package/src/components/combobox/ComboboxTrigger.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { ComboboxTriggerProps } from 'reka-ui'
+import { ComboboxTrigger } from 'reka-ui'
+
+const props = defineProps<ComboboxTriggerProps>()
+</script>
+
+<template>
+  <ComboboxTrigger v-bind="props">
+    <slot />
+  </ComboboxTrigger>
+</template>

package/src/components/combobox/index.ts

@@ -0,0 +1,9 @@
+export { default as Combobox } from './Combobox.vue'
+export { default as ComboboxAnchor } from './ComboboxAnchor.vue'
+export { default as ComboboxEmpty } from './ComboboxEmpty.vue'
+export { default as ComboboxGroup } from './ComboboxGroup.vue'
+export { default as ComboboxInput } from './ComboboxInput.vue'
+export { default as ComboboxItem } from './ComboboxItem.vue'
+export { default as ComboboxList } from './ComboboxList.vue'
+export { default as ComboboxSeparator } from './ComboboxSeparator.vue'
+export { default as ComboboxTrigger } from './ComboboxTrigger.vue'

package/src/components/command/Command.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import type { ListboxRootEmits, ListboxRootProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { ListboxRoot, useForwardPropsEmits } from 'reka-ui'
+import { computed, ref } from 'vue'
+import { cn } from '../../lib/utils'
+import { provideCommandContext } from './index'
+
+const props = withDefaults(
+  defineProps<ListboxRootProps & ClassProps>(),
+  { highlightOnHover: true },
+)
+
+const emits = defineEmits<ListboxRootEmits>()
+
+const search = defineModel<string>('search', { default: '' })
+
+const delegated = computed(() => {
+  const { class: _class, ...rest } = props
+  return rest
+})
+
+const forwarded = useForwardPropsEmits(delegated, emits)
+
+/**
+ * Đếm bằng Set chứ không phải một biến số nguyên.
+ *
+ * Vue tháo và gắn lại các mục theo thứ tự không đoán trước được khi danh sách
+ * đổi — cộng trừ một biến đếm sẽ trôi dần khỏi thực tế sau vài lần gõ.
+ */
+const ids = ref(new Set<symbol>())
+
+provideCommandContext({
+  search,
+  count: computed(() => ids.value.size),
+  register: (id) => {
+    ids.value.add(id)
+    ids.value = new Set(ids.value)
+  },
+  unregister: (id) => {
+    ids.value.delete(id)
+    ids.value = new Set(ids.value)
+  },
+})
+</script>
+
+<template>
+  <ListboxRoot
+    v-bind="forwarded"
+    :class="cn('flex w-full flex-col overflow-hidden rounded-xl bg-popover text-popover-foreground', props.class)"
+  >
+    <slot />
+  </ListboxRoot>
+</template>

package/src/components/command/CommandDialog.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import { computed } from 'vue'
+import { useI18n } from '../../composables/useI18n'
+import { cn } from '../../lib/utils'
+import { Dialog, DialogContent, DialogTitle } from '../dialog'
+import Command from './Command.vue'
+
+const props = defineProps<ClassProps & {
+  /** Tên cho hộp thoại — chỉ trình đọc màn hình thấy. */
+  title?: string
+}>()
+
+const { t } = useI18n()
+
+// Mặc định phải đi qua `t()`, xem ghi chú ở Spinner.
+const title = computed(() => props.title ?? t('ui.command.title'))
+
+const open = defineModel<boolean>('open', { default: false })
+const search = defineModel<string>('search', { default: '' })
+</script>
+
+<template>
+  <Dialog v-model:open="open">
+    <!--
+      `hide-close` và không có padding: bảng lệnh tự đóng khi chọn xong hoặc khi
+      bấm Escape, nên một nút × ở góc chỉ chiếm chỗ của dòng kết quả đầu tiên.
+    -->
+    <DialogContent
+      hide-close
+      :class="cn('overflow-hidden p-0 sm:max-w-[520px]', props.class)"
+    >
+      <DialogTitle class="sr-only">
+        {{ title }}
+      </DialogTitle>
+      <Command v-model:search="search" class="rounded-none bg-transparent">
+        <slot />
+      </Command>
+    </DialogContent>
+  </Dialog>
+</template>

package/src/components/command/CommandEmpty.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import { useI18n } from '../../composables/useI18n'
+import { cn } from '../../lib/utils'
+import { injectCommandContext } from './index'
+
+const props = defineProps<ClassProps>()
+const { t } = useI18n()
+const command = injectCommandContext()
+</script>
+
+<template>
+  <div
+    v-if="command.count.value === 0"
+    :class="cn('py-8 text-center text-sm text-muted-foreground', props.class)"
+  >
+    <slot>{{ t('ui.command.empty') }}</slot>
+  </div>
+</template>

package/src/components/command/CommandGroup.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { ListboxGroupProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { ListboxGroup, ListboxGroupLabel } from 'reka-ui'
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<ListboxGroupProps & ClassProps & { heading?: string }>()
+
+const delegated = computed(() => {
+  const { class: _class, heading: _heading, ...rest } = props
+  return rest
+})
+</script>
+
+<template>
+  <ListboxGroup v-bind="delegated" :class="cn('overflow-hidden', props.class)">
+    <ListboxGroupLabel
+      v-if="props.heading || $slots.heading"
+      class="px-2.5 py-1.5 text-xs font-medium text-muted-foreground"
+    >
+      <slot name="heading">
+        {{ props.heading }}
+      </slot>
+    </ListboxGroupLabel>
+    <slot />
+  </ListboxGroup>
+</template>

package/src/components/command/CommandInput.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import { ListboxFilter } from 'reka-ui'
+import { Search } from '../../lib/icons'
+import { cn } from '../../lib/utils'
+import { injectCommandContext } from './index'
+
+const props = defineProps<ClassProps & { placeholder?: string }>()
+
+const command = injectCommandContext()
+</script>
+
+<template>
+  <!-- Viền dưới chứ không phải viền quanh: ô tìm là phần đầu của tấm bảng, không
+       phải một ô nhập rời đặt lên trên nó. -->
+  <div :class="cn('flex items-center gap-2 border-b border-border px-3', props.class)">
+    <Search class="size-4 shrink-0 text-muted-foreground" aria-hidden="true" />
+    <ListboxFilter
+      v-model="command.search.value"
+      auto-focus
+      :placeholder="props.placeholder"
+      class="h-11 w-full bg-transparent text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
+    />
+  </div>
+</template>

package/src/components/command/CommandItem.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { ListboxItemEmits, ListboxItemProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { ListboxItem, useForwardPropsEmits } from 'reka-ui'
+import { computed, onBeforeUnmount, onMounted } from 'vue'
+import { cn } from '../../lib/utils'
+import { injectCommandContext } from './index'
+
+const props = defineProps<ListboxItemProps & ClassProps>()
+const emits = defineEmits<ListboxItemEmits>()
+
+const command = injectCommandContext(null)
+const id = Symbol('command-item')
+
+// Tự đăng ký để CommandEmpty biết còn mục nào không — xem chú thích ở index.ts.
+onMounted(() => command?.register(id))
+onBeforeUnmount(() => command?.unregister(id))
+
+const delegated = computed(() => {
+  const { class: _class, ...rest } = props
+  return rest
+})
+
+const forwarded = useForwardPropsEmits(delegated, emits)
+</script>
+
+<template>
+  <ListboxItem
+    v-bind="forwarded"
+    :class="cn(
+      'relative flex cursor-default select-none items-center gap-2.5 rounded-md px-2.5 py-2 text-sm outline-none',
+      'data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground',
+      'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      '[&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground',
+      props.class,
+    )"
+  >
+    <slot />
+  </ListboxItem>
+</template>

package/src/components/command/CommandList.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import { ListboxContent } from 'reka-ui'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<ClassProps>()
+</script>
+
+<template>
+  <ListboxContent :class="cn('max-h-[320px] overflow-y-auto overflow-x-hidden p-1.5 outline-none', props.class)">
+    <slot />
+  </ListboxContent>
+</template>

package/src/components/command/CommandSeparator.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import { menuSeparatorClass } from '../../lib/menu-styles'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<ClassProps>()
+</script>
+
+<template>
+  <div role="separator" :class="cn(menuSeparatorClass, props.class)" />
+</template>

package/src/components/command/CommandShortcut.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import { menuShortcutClass } from '../../lib/menu-styles'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<ClassProps>()
+</script>
+
+<template>
+  <span :class="cn(menuShortcutClass, props.class)">
+    <slot />
+  </span>
+</template>

package/src/components/command/index.ts

@@ -0,0 +1,34 @@
+import type { ComputedRef, Ref } from 'vue'
+import { createContext } from 'reka-ui'
+
+export { default as Command } from './Command.vue'
+export { default as CommandDialog } from './CommandDialog.vue'
+export { default as CommandEmpty } from './CommandEmpty.vue'
+export { default as CommandGroup } from './CommandGroup.vue'
+export { default as CommandInput } from './CommandInput.vue'
+export { default as CommandItem } from './CommandItem.vue'
+export { default as CommandList } from './CommandList.vue'
+export { default as CommandSeparator } from './CommandSeparator.vue'
+export { default as CommandShortcut } from './CommandShortcut.vue'
+
+/**
+ * `Command` **không tự lọc danh sách**.
+ *
+ * S dùng `cmdk`, thư viện đó lọc sẵn theo chuỗi con. Nhưng bảng lệnh thật gần
+ * như luôn cần hơn thế: gọi API, xếp hạng theo tần suất dùng, khớp mờ, gộp
+ * nhiều nguồn. Tự lọc sẵn thì mấy ca đó phải chống lại component.
+ *
+ * Ở đây `Command` giữ chuỗi tìm kiếm và lo bàn phím; bên gọi tự quyết lọc thế
+ * nào. Đổi lại phải có cách biết "không còn mục nào" — nên `CommandItem` tự
+ * đăng ký vào context này, và `CommandEmpty` đọc số đếm đó.
+ */
+export interface CommandContext {
+  search: Ref<string>
+  /** Số mục đang render thật, sau khi bên gọi đã lọc. */
+  count: ComputedRef<number>
+  register: (id: symbol) => void
+  unregister: (id: symbol) => void
+}
+
+export const [injectCommandContext, provideCommandContext]
+  = createContext<CommandContext>('Command')