@vestow/vue 0.1.0

package/src/components/input-tags/InputTagsItemText.vue

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

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

@@ -0,0 +1,16 @@
+/**
+ * Ô nhập biến từng mục thành một chip: người nhận trong ô "To:", tag của bài
+ * viết, bộ lọc đang áp.
+ *
+ * Dáng của chip lấy thẳng `badgeVariants` + `chipVariants` của `Chip`, nên hai
+ * chỗ không trôi khỏi nhau. Nhưng KHÔNG bọc chính `Chip`: nút gỡ của nó và
+ * `TagsInputItemDelete` của reka sẽ tranh nhau một việc, mà bản của reka mới là
+ * bản biết xoá khỏi model rồi trả focus về ô nhập.
+ */
+
+export { default as InputTags } from './InputTags.vue'
+export { default as InputTagsClear } from './InputTagsClear.vue'
+export { default as InputTagsInput } from './InputTagsInput.vue'
+export { default as InputTagsItem } from './InputTagsItem.vue'
+export { default as InputTagsItemDelete } from './InputTagsItemDelete.vue'
+export { default as InputTagsItemText } from './InputTagsItemText.vue'

package/src/components/kbd/Kbd.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import type { KbdVariants } from './index'
+import { cn } from '../../lib/utils'
+import { kbdVariants } from './index'
+
+const props = defineProps<ClassProps & {
+  size?: KbdVariants['size']
+  tone?: KbdVariants['tone']
+}>()
+</script>
+
+<template>
+  <kbd :class="cn(kbdVariants({ size: props.size, tone: props.tone }), props.class)">
+    <slot />
+  </kbd>
+</template>

package/src/components/kbd/KbdGroup.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<ClassProps>()
+</script>
+
+<template>
+  <!-- Cũng là thẻ <kbd>, lồng đúng theo HTML spec: một tổ hợp phím là một <kbd>
+       chứa nhiều <kbd> con. Trình đọc màn hình nhờ vậy đọc ra "phím tắt" chứ
+       không phải mấy chữ rời rạc. -->
+  <kbd :class="cn('inline-flex items-center gap-1', props.class)">
+    <slot />
+  </kbd>
+</template>

package/src/components/kbd/index.ts

@@ -0,0 +1,4 @@
+export { kbdVariants, type KbdVariants } from '../../variants/components/kbd'
+export { default as Kbd } from './Kbd.vue'
+
+export { default as KbdGroup } from './KbdGroup.vue'

package/src/components/label/Label.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { LabelProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { Label } from 'reka-ui'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<LabelProps & ClassProps>()
+</script>
+
+<template>
+  <Label
+    :for="props.for"
+    :as="props.as"
+    :as-child="props.asChild"
+    :class="cn(
+      'text-sm font-medium leading-none select-none',
+      'peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+      props.class,
+    )"
+  >
+    <slot />
+  </Label>
+</template>

package/src/components/label/index.ts

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

package/src/components/listbox/Listbox.vue

@@ -0,0 +1,42 @@
+<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 } from 'vue'
+import { cn } from '../../lib/utils'
+
+const props = withDefaults(
+  defineProps<ListboxRootProps & ClassProps>(),
+  { highlightOnHover: true },
+)
+const emits = defineEmits<ListboxRootEmits>()
+
+const delegated = computed(() => {
+  const { class: _class, ...rest } = props
+  return rest
+})
+
+const forwarded = useForwardPropsEmits(delegated, emits)
+</script>
+
+<template>
+  <!--
+    `highlightOnHover` bật sẵn, khác mặc định của reka.
+
+    Đây là danh sách LUÔN hiện, không phải một tấm menu vừa bung ra: con trỏ đã
+    ở trong vùng đó suốt, nên không rê chuột mà vẫn sáng theo bàn phím thì đọc
+    ra như danh sách chết. Tắt đi khi dòng nào cũng có nút riêng bên trong, vì
+    lúc đó hai vùng sáng chồng nhau.
+  -->
+  <ListboxRoot
+    v-bind="forwarded"
+    :class="cn(
+      'surface flex w-full flex-col overflow-hidden rounded-md border border-border bg-background text-sm',
+      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+      'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      props.class,
+    )"
+  >
+    <slot />
+  </ListboxRoot>
+</template>

package/src/components/listbox/ListboxContent.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { ListboxContentProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { ListboxContent } from 'reka-ui'
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<ListboxContentProps & ClassProps>()
+
+const delegated = computed(() => {
+  const { class: _class, ...rest } = props
+  return rest
+})
+</script>
+
+<template>
+  <!-- Vùng cuộn. Chiều cao do bên gọi đặt (`max-h-*`) — danh sách dài bao nhiêu
+       thì chỉ bên gọi biết. -->
+  <ListboxContent v-bind="delegated" :class="cn('flex flex-col gap-0.5 overflow-y-auto p-1', props.class)">
+    <slot />
+  </ListboxContent>
+</template>

package/src/components/listbox/ListboxFilter.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { ListboxFilterEmits, ListboxFilterProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { ListboxFilter, useForwardPropsEmits } from 'reka-ui'
+import { computed } from 'vue'
+import { Search } from '../../lib/icons'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<ListboxFilterProps & ClassProps & { placeholder?: string }>()
+const emits = defineEmits<ListboxFilterEmits>()
+
+const delegated = computed(() => {
+  const { class: _class, placeholder: _placeholder, ...rest } = props
+  return rest
+})
+
+const forwarded = useForwardPropsEmits(delegated, emits)
+</script>
+
+<template>
+  <!--
+    Ô lọc KHÔNG tự lọc gì cả — nó chỉ giữ chuỗi và chuyển phím mũi tên xuống
+    danh sách, đúng cách `Command` làm. Bên gọi tự quyết lọc thế nào; xem ghi
+    chú ở `components/command/index.ts` để biết vì sao.
+  -->
+  <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-bind="forwarded"
+      :placeholder="props.placeholder"
+      class="h-9 w-full bg-transparent text-sm outline-none placeholder:text-muted-foreground"
+    />
+  </div>
+</template>

package/src/components/listbox/ListboxGroup.vue

@@ -0,0 +1,31 @@
+<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>
+  <!-- Nhãn nhóm phải là `ListboxGroupLabel` chứ không phải một `<div>` tự viết:
+       reka nối nó vào nhóm bằng `aria-labelledby`, nên trình đọc màn hình mới
+       đọc ra "Nhóm X, mục 2 trên 5". -->
+  <ListboxGroup v-bind="delegated" :class="cn('flex flex-col gap-0.5', props.class)">
+    <ListboxGroupLabel
+      v-if="props.heading || $slots.heading"
+      class="px-2 py-1.5 text-xs font-medium text-muted-foreground"
+    >
+      <slot name="heading">
+        {{ props.heading }}
+      </slot>
+    </ListboxGroupLabel>
+    <slot />
+  </ListboxGroup>
+</template>

package/src/components/listbox/ListboxItem.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import type { ListboxItemEmits, ListboxItemProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { ListboxItem, ListboxItemIndicator, useForwardPropsEmits } from 'reka-ui'
+import { computed } from 'vue'
+import { Check } from '../../lib/icons'
+import { cn } from '../../lib/utils'
+
+// Không đặt generic ở đây, cùng lý do với SelectItem: generic làm TS mất thông
+// tin "value là bắt buộc" lúc forward prop xuống primitive của reka.
+const props = defineProps<ListboxItemProps & ClassProps>()
+const emits = defineEmits<ListboxItemEmits>()
+
+const delegated = computed(() => {
+  const { class: _class, ...rest } = props
+  return rest
+})
+
+const forwarded = useForwardPropsEmits(delegated, emits)
+</script>
+
+<template>
+  <!--
+    Hai trạng thái KHÁC NHAU, và trộn chúng là lỗi hay gặp nhất ở listbox:
+    `data-highlighted` là dòng bàn phím đang đứng, `data-state=checked` là dòng
+    đã chọn. Ở chế độ nhiều lựa chọn, hai dòng đó thường không phải một.
+  -->
+  <ListboxItem
+    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-[state=checked]:font-medium',
+      '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">
+      <ListboxItemIndicator>
+        <Check class="size-4" />
+      </ListboxItemIndicator>
+    </span>
+  </ListboxItem>
+</template>

package/src/components/listbox/index.ts

@@ -0,0 +1,19 @@
+/**
+ * Danh sách chọn LUÔN HIỆN. Cùng primitive với `Command`, khác cách đóng khung.
+ *
+ * | dùng khi | lấy cái nào |
+ * |---|---|
+ * | danh sách ngắn, luôn thấy, chọn một hoặc nhiều | `Listbox` |
+ * | cùng lựa chọn đó nhưng thu vào một nút | `Select` |
+ * | gõ để lọc, danh sách dài, mở bằng phím tắt | `Command` |
+ *
+ * `ListboxFilter` có ở đây cho trường hợp danh sách hơi dài nhưng vẫn muốn nó
+ * nằm nguyên trong trang. Nó **không tự lọc** — bên gọi tự quyết, cùng lý do đã
+ * ghi ở `components/command/index.ts`.
+ */
+
+export { default as Listbox } from './Listbox.vue'
+export { default as ListboxContent } from './ListboxContent.vue'
+export { default as ListboxFilter } from './ListboxFilter.vue'
+export { default as ListboxGroup } from './ListboxGroup.vue'
+export { default as ListboxItem } from './ListboxItem.vue'

package/src/components/mask/Mask.vue

@@ -0,0 +1,205 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import { computed, nextTick, ref, watch } from 'vue'
+import { focusRing, invalidRing } from '../../lib/focus'
+import { cn } from '../../lib/utils'
+import { dataBefore, formatMask, parseMask, toRaw } from './index'
+
+/**
+ * Gốc là một `<div>` bọc ngoài, nên thuộc tính rơi tự do phải chuyển tay vào
+ * đúng cái `<input>` — cùng lý do đã ghi ở `Input.vue`.
+ */
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(
+  defineProps<ClassProps & {
+    /** `9` là chữ số, `a` là chữ cái, `*` là chữ hoặc số. Còn lại là cố định. */
+    mask: string
+    /** Ký tự giữ chỗ cho ô chưa điền. */
+    slotChar?: string
+    /** Giá trị là dữ liệu THÔ, không kèm ký tự cố định. */
+    unmask?: boolean
+    invalid?: boolean
+    disabled?: boolean
+    size?: 'sm' | 'default'
+    placeholder?: string
+  }>(),
+  { slotChar: '_', unmask: false, size: 'default' },
+)
+
+const model = defineModel<string>({ default: '' })
+
+const input = ref<HTMLInputElement>()
+const focused = ref(false)
+
+const slots = computed(() => parseMask(props.mask))
+
+/** Dữ liệu thật, không định dạng. Đây mới là nguồn sự thật của component. */
+const raw = ref(toRaw(model.value, slots.value))
+
+const result = computed(() => formatMask(raw.value, slots.value, props.slotChar))
+
+/**
+ * Khuôn chỉ hiện ra khi ô ĐANG focus hoặc ĐÃ có gì đó.
+ *
+ * PrimeVue hiện `(___) ___-____` mọi lúc. Với ô rỗng thì đó là một ô trông như
+ * đã điền sẵn, và trình đọc màn hình đọc ra một tràng gạch dưới trước cả khi
+ * người dùng biết mình đang ở đâu. Placeholder làm đúng việc đó tốt hơn.
+ */
+const display = computed(() => {
+  if (raw.value.length === 0 && !focused.value)
+    return ''
+  return result.value.text
+})
+
+/** Đủ mọi ô dữ liệu thì mới coi là hoàn chỉnh. */
+const complete = computed(() =>
+  raw.value.length === slots.value.filter(slot => slot.accepts !== undefined).length,
+)
+
+const inputMode = computed(() =>
+  props.mask.includes('a') || props.mask.includes('*') ? undefined : 'numeric',
+)
+
+function publish(): void {
+  model.value = props.unmask ? raw.value : result.value.filled
+}
+
+/** Ghi thẳng vào DOM rồi đặt con trỏ — Vue không kịp làm việc này giữa hai phím. */
+function render(caret: number): void {
+  const el = input.value
+  if (el === undefined)
+    return
+  el.value = display.value
+  el.setSelectionRange(caret, caret)
+}
+
+function onInput(): void {
+  const el = input.value
+  if (el === undefined)
+    return
+
+  // Đếm số ký tự dữ liệu nằm TRƯỚC con trỏ, rồi đặt lại con trỏ ngay sau đúng
+  // chừng ấy ô. Nhảy thẳng về cuối chuỗi thì gõ chen vào giữa một số điện thoại
+  // đã điền dở sẽ hất con trỏ đi mất sau mỗi phím.
+  const before = toRaw(el.value.slice(0, el.selectionStart ?? 0), slots.value).length
+
+  raw.value = toRaw(el.value, slots.value)
+  publish()
+  void nextTick(() => render(caretAfter(before)))
+}
+
+/**
+ * Backspace và Delete phải tự viết, không để trình duyệt xử lý.
+ *
+ * Mặc định nó xoá ký tự ngay trước con trỏ, mà ký tự đó thường là một ký tự CỐ
+ * ĐỊNH. Xoá xong thì `toRaw` vẫn ra đúng chuỗi cũ, khuôn dựng lại y nguyên, và
+ * người dùng thấy phím Backspace không làm gì cả — bấm bao nhiêu lần cũng vậy.
+ * Nên phím đó phải nhắm vào ô DỮ LIỆU, không nhắm vào ký tự.
+ */
+function onKeydown(event: KeyboardEvent): void {
+  if (event.key !== 'Backspace' && event.key !== 'Delete')
+    return
+
+  const el = input.value
+  if (el === undefined)
+    return
+
+  event.preventDefault()
+
+  const start = el.selectionStart ?? 0
+  const end = el.selectionEnd ?? start
+
+  // Kẹp vào độ dài dữ liệu THẬT. Bấm chuột vào vùng giữ chỗ rồi bấm Backspace
+  // thì `dataBefore` đếm cả những ô còn trống, ra một chỉ số nằm ngoài `raw`,
+  // và phím đó im lặng không làm gì — đúng cái mà nó sinh ra để tránh.
+  const from = Math.min(dataBefore(slots.value, start), raw.value.length)
+
+  if (end > start) {
+    // Bôi đen rồi xoá: bỏ đúng những ô dữ liệu nằm trong vùng bôi đen.
+    const to = Math.min(dataBefore(slots.value, end), raw.value.length)
+    raw.value = raw.value.slice(0, from) + raw.value.slice(to)
+    publish()
+    void nextTick(() => render(caretAfter(from)))
+    return
+  }
+
+  const index = event.key === 'Backspace' ? from - 1 : from
+  if (index < 0 || index >= raw.value.length)
+    return
+
+  raw.value = raw.value.slice(0, index) + raw.value.slice(index + 1)
+  publish()
+  void nextTick(() => render(caretAfter(index)))
+}
+
+/** Vị trí con trỏ ứng với ô dữ liệu thứ `index`. */
+function caretForIndex(index: number): number {
+  if (index <= 0)
+    return slots.value.findIndex(slot => slot.accepts !== undefined)
+  let seen = 0
+  for (const [position, slot] of slots.value.entries()) {
+    if (slot.accepts === undefined)
+      continue
+    if (seen === index)
+      return position
+    seen += 1
+  }
+  return result.value.text.length
+}
+
+/** Vị trí con trỏ sau khi đã điền `count` ô dữ liệu. */
+function caretAfter(count: number): number {
+  return count <= 0 ? caretForIndex(0) : caretForIndex(count - 1) + 1
+}
+
+function onFocus(): void {
+  focused.value = true
+  // Vào bằng Tab thì con trỏ đứng ngay sau ô đã điền cuối cùng. Vào bằng chuột
+  // thì KHÔNG: `mouseup` đặt lại con trỏ theo chỗ bấm, sau cả `focus`. Đó là
+  // hành vi đúng của một ô nhập, và việc gõ vẫn chèn đúng chỗ.
+  void nextTick(() => render(caretAfter(raw.value.length)))
+}
+
+function onBlur(): void {
+  focused.value = false
+}
+
+/** Giá trị đổi từ bên ngoài thì dựng lại — nhưng đừng đè lên thứ đang gõ. */
+watch(model, (value) => {
+  const next = props.unmask ? value : toRaw(value, slots.value)
+  if (next !== raw.value && !focused.value)
+    raw.value = toRaw(value, slots.value)
+})
+</script>
+
+<template>
+  <div class="relative w-full">
+    <input
+      ref="input"
+      v-bind="$attrs"
+      type="text"
+      :value="display"
+      :placeholder="props.placeholder"
+      :disabled="props.disabled"
+      :inputmode="inputMode"
+      :aria-invalid="props.invalid || undefined"
+      :data-invalid="props.invalid || undefined"
+      :data-complete="complete || undefined"
+      autocomplete="off"
+      :class="cn(
+        'flex w-full rounded-md border border-input bg-background py-1 shadow-xs transition-colors',
+        props.size === 'sm' ? 'h-(--ui-field-height-sm) px-(--ui-field-padding-x-sm) text-(length:--ui-field-text-sm)' : 'h-(--ui-field-height-md) px-(--ui-field-padding-x-md) text-sm',
+        'placeholder:text-muted-foreground',
+        focusRing,
+        'disabled:cursor-not-allowed disabled:opacity-50',
+        invalidRing,
+        props.class,
+      )"
+      @input="onInput"
+      @keydown="onKeydown"
+      @focus="onFocus"
+      @blur="onBlur"
+    >
+  </div>
+</template>

package/src/components/mask/index.ts

@@ -0,0 +1,15 @@
+/**
+ * Bốn hàm khuôn giờ ở `src/variants/lib/mask` — logic thuần, không dính
+ * framework, nên bản React đọc CÙNG một file thay vì chép lại. Re-export ở đây
+ * để chỗ nào đang `import { toRaw } from '../mask'` không phải sửa.
+ */
+export {
+  dataBefore,
+  formatMask,
+  type FormatResult,
+  type MaskSlot,
+  parseMask,
+  toRaw,
+} from '../../variants/lib/mask'
+
+export { default as Mask } from './Mask.vue'

package/src/components/menubar/Menubar.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { MenubarRootEmits, MenubarRootProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { MenubarRoot, useForwardPropsEmits } from 'reka-ui'
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<MenubarRootProps & ClassProps>()
+const emits = defineEmits<MenubarRootEmits>()
+
+const delegated = computed(() => {
+  const { class: _class, ...rest } = props
+  return rest
+})
+
+const forwarded = useForwardPropsEmits(delegated, emits)
+</script>
+
+<template>
+  <MenubarRoot
+    v-bind="forwarded"
+    :class="cn('flex h-9 items-center gap-1 rounded-md border border-border bg-background p-1 shadow-xs', props.class)"
+  >
+    <slot />
+  </MenubarRoot>
+</template>

package/src/components/menubar/MenubarCheckboxItem.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { MenubarCheckboxItemEmits, MenubarCheckboxItemProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { MenubarCheckboxItem, MenubarItemIndicator, useForwardPropsEmits } from 'reka-ui'
+import { computed } from 'vue'
+import { Check } from '../../lib/icons'
+import { menuIndicatorItemClass, menuIndicatorSlotClass } from '../../lib/menu-styles'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<MenubarCheckboxItemProps & ClassProps>()
+const emits = defineEmits<MenubarCheckboxItemEmits>()
+
+const delegated = computed(() => {
+  const { class: _class, ...rest } = props
+  return rest
+})
+
+const forwarded = useForwardPropsEmits(delegated, emits)
+</script>
+
+<template>
+  <MenubarCheckboxItem v-bind="forwarded" :class="cn(menuIndicatorItemClass, props.class)">
+    <span :class="menuIndicatorSlotClass">
+      <MenubarItemIndicator>
+        <Check class="size-4" />
+      </MenubarItemIndicator>
+    </span>
+    <slot />
+  </MenubarCheckboxItem>
+</template>

package/src/components/menubar/MenubarContent.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import type { FocusOutsideEvent, MenubarContentProps, PointerDownOutsideEvent } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { MenubarContent, MenubarPortal, useForwardPropsEmits } from 'reka-ui'
+import { computed } from 'vue'
+import { menuContentClass } from '../../lib/menu-styles'
+import { cn } from '../../lib/utils'
+
+const props = withDefaults(
+  defineProps<MenubarContentProps & ClassProps>(),
+  { align: 'start', sideOffset: 6, alignOffset: -4, collisionPadding: 8 },
+)
+
+/*
+ * Khai tay danh sách emit, không dùng `MenubarContentEmits`.
+ *
+ * reka chỉ export `MenubarSubContentEmits`, không có bản cho content thường —
+ * năm sự kiện dưới đây chép từ chính khai báo kiểu của component.
+ *
+ * Và không bỏ đi được: gốc của component này là `MenubarPortal`, nên listener
+ * rơi tự do sẽ dính vào portal thay vì vào tấm menu, rồi im lặng không chạy.
+ */
+const emits = defineEmits<{
+  escapeKeyDown: [event: KeyboardEvent]
+  pointerDownOutside: [event: PointerDownOutsideEvent]
+  focusOutside: [event: FocusOutsideEvent]
+  interactOutside: [event: PointerDownOutsideEvent | FocusOutsideEvent]
+  closeAutoFocus: [event: Event]
+}>()
+
+const delegated = computed(() => {
+  const { class: _class, ...rest } = props
+  return rest
+})
+
+const forwarded = useForwardPropsEmits(delegated, emits)
+</script>
+
+<template>
+  <MenubarPortal>
+    <MenubarContent
+      v-bind="forwarded"
+      :class="cn(
+        menuContentClass,
+        'max-h-[var(--reka-menubar-content-available-height)] min-w-[12rem] overflow-y-auto',
+        props.class,
+      )"
+    >
+      <slot />
+    </MenubarContent>
+  </MenubarPortal>
+</template>

package/src/components/menubar/MenubarGroup.vue

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