@vestow/vue 0.1.0

package/src/components/command-block/CommandBlock.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import { computed, onUnmounted, ref } from 'vue'
+import { useI18n } from '../../composables/useI18n'
+import { Check, Copy } from '../../lib/icons'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<ClassProps & {
+  variants: CommandVariant[]
+  /** Dòng kết quả in mờ ngay dưới lệnh, ví dụ `✔ Button.vue → …`. */
+  output?: string
+}>()
+const { t } = useI18n()
+/** Một trình quản lý gói và câu lệnh tương ứng. */
+export interface CommandVariant {
+  manager: string
+  command: string
+}
+
+/** Giữ trạng thái "đã chép" bao lâu trước khi cho bấm lại. */
+const RESET_DELAY = 3000
+
+const active = ref(0)
+const current = computed(() => props.variants[active.value] ?? props.variants[0])
+
+const copied = ref(false)
+let timer: ReturnType<typeof setTimeout> | undefined
+
+onUnmounted(() => clearTimeout(timer))
+
+async function copy(): Promise<void> {
+  try {
+    await navigator.clipboard.writeText(current.value.command)
+  }
+  catch {
+    // Clipboard API cần ngữ cảnh bảo mật (https hoặc localhost).
+    return
+  }
+
+  copied.value = true
+  clearTimeout(timer)
+  timer = setTimeout(() => {
+    copied.value = false
+  }, RESET_DELAY)
+}
+</script>
+
+<template>
+  <div :class="cn('flex flex-col gap-3', props.class)">
+    <div class="flex gap-0.5 self-start rounded-lg border border-border bg-secondary p-[3px]">
+      <button
+        v-for="(variant, index) in props.variants"
+        :key="variant.manager"
+        type="button"
+        class="h-[26px] rounded-sm px-[13px] font-mono text-xs font-medium transition-colors"
+        :class="index === active
+          ? 'bg-background text-foreground shadow-sm'
+          : 'text-muted-foreground hover:text-foreground'"
+        @click="active = index"
+      >
+        {{ variant.manager }}
+      </button>
+    </div>
+
+    <div class="relative">
+      <button
+        type="button"
+        :aria-label="copied ? t('ui.copied') : t('ui.copy.command')"
+        class="absolute right-3 top-3 z-(--z-raised) grid size-[26px] place-items-center rounded-md border border-border bg-card text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring [&_svg]:size-[13px]"
+        :disabled="copied"
+        @click="copy"
+      >
+        <Check v-if="copied" class="text-success" />
+        <Copy v-else />
+      </button>
+
+      <!-- Nền tô ở lớp ngoài, đúng MỘT lần — xem chú thích ở CodeBlock. -->
+      <div class="overflow-hidden rounded-xl border border-border bg-code-bg">
+        <div class="flex flex-col overflow-auto py-4 pl-[18px] pr-[44px] font-mono text-[12.5px] leading-[1.85] text-code-fg">
+          <div class="whitespace-pre">
+            <span class="text-muted-foreground">$ </span>{{ current.command }}
+          </div>
+          <div v-if="props.output" class="whitespace-pre text-muted-foreground">
+            {{ props.output }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/src/components/command-block/index.ts

@@ -0,0 +1,2 @@
+export type { CommandVariant } from './CommandBlock.vue'
+export { default as CommandBlock } from './CommandBlock.vue'

package/src/components/confirm-dialog/ConfirmDialog.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { useConfirmInternals } from '../../composables/useConfirm'
+import { useI18n } from '../../composables/useI18n'
+import Button from '../button/Button.vue'
+import Dialog from '../dialog/Dialog.vue'
+import DialogContent from '../dialog/DialogContent.vue'
+import DialogDescription from '../dialog/DialogDescription.vue'
+import DialogFooter from '../dialog/DialogFooter.vue'
+import DialogHeader from '../dialog/DialogHeader.vue'
+import DialogTitle from '../dialog/DialogTitle.vue'
+
+const { t } = useI18n()
+// Đặt 1 lần trong layout gốc. useConfirm() ở bất kỳ đâu sẽ dùng dialog này.
+const { open, state, settle, onOpenChange } = useConfirmInternals()
+</script>
+
+<template>
+  <Dialog :open="open" @update:open="onOpenChange">
+    <DialogContent size="sm" hide-close>
+      <DialogHeader>
+        <DialogTitle>{{ state?.title }}</DialogTitle>
+        <DialogDescription v-if="state?.description">
+          {{ state.description }}
+        </DialogDescription>
+      </DialogHeader>
+
+      <DialogFooter>
+        <Button variant="outline" @click="settle(false)">
+          {{ state?.cancelLabel ?? t('ui.cancel') }}
+        </Button>
+        <Button :variant="state?.variant ?? 'default'" @click="settle(true)">
+          {{ state?.confirmLabel }}
+        </Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>

package/src/components/confirm-dialog/index.ts

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

package/src/components/confirm-popup/ConfirmPopup.vue

@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import type { ButtonVariants } from '../button'
+import { computed, ref } from 'vue'
+import { useI18n } from '../../composables/useI18n'
+import { cn } from '../../lib/utils'
+import Button from '../button/Button.vue'
+import Popover from '../popover/Popover.vue'
+import PopoverContent from '../popover/PopoverContent.vue'
+import PopoverTrigger from '../popover/PopoverTrigger.vue'
+
+/**
+ * Gốc của component là một provider KHÔNG vẽ ra DOM, nên thuộc tính rơi tự do
+ * không có chỗ đáp và biến mất hẳn. Đo được: đặt `id` lên component thì nó
+ * không xuất hiện ở bất kỳ đâu trong DOM, và `<Label for>` trỏ vào hư không.
+ *
+ * Chuyển tay xuống chính cái trigger.
+ */
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(
+  defineProps<ClassProps & {
+    title: string
+    description?: string
+    /**
+     * Nhãn nút xác nhận — **bắt buộc**, và phải là ĐỘNG TỪ nói rõ việc sắp xảy
+     * ra: `'Xoá 3 tệp'`, không phải `'Đồng ý'`. Cùng lý do đã ghi ở
+     * `ConfirmOptions`: mặc định luôn là thứ bị dùng nhiều nhất, mà `'Đồng ý'`
+     * không nói người dùng đang đồng ý với cái gì.
+     */
+    confirmLabel: string
+    cancelLabel?: string
+    /** `destructive` cho hành động xoá hoặc thu hồi. */
+    variant?: ButtonVariants['variant']
+    side?: 'top' | 'right' | 'bottom' | 'left'
+    align?: 'start' | 'center' | 'end'
+  }>(),
+  { variant: 'default', side: 'bottom', align: 'end' },
+)
+
+const emit = defineEmits<{ confirm: [], cancel: [] }>()
+
+const open = defineModel<boolean>('open', { default: false })
+
+const { t } = useI18n()
+
+const cancelText = computed(() => props.cancelLabel ?? t('ui.cancel'))
+
+/**
+ * Phân biệt "đóng vì đã chọn" với "đóng vì bỏ đi".
+ *
+ * Bấm ra ngoài và bấm Escape đều là từ chối, và cả hai đều phải phát `cancel` —
+ * người dùng đã trả lời "không", chỉ là trả lời bằng cách bỏ đi. Không có cờ
+ * này thì `confirm` xong popover đóng lại và `cancel` bắn theo ngay sau.
+ */
+const settled = ref(false)
+
+function accept(): void {
+  settled.value = true
+  open.value = false
+  emit('confirm')
+}
+
+function reject(): void {
+  settled.value = true
+  open.value = false
+  emit('cancel')
+}
+
+function onOpenChange(value: boolean): void {
+  if (value) {
+    settled.value = false
+    open.value = true
+    return
+  }
+
+  open.value = false
+  if (!settled.value)
+    emit('cancel')
+}
+</script>
+
+<template>
+  <Popover :open="open" @update:open="onOpenChange">
+    <PopoverTrigger v-bind="$attrs" as-child>
+      <slot />
+    </PopoverTrigger>
+
+    <PopoverContent
+      :side="props.side"
+      :align="props.align"
+      :class="cn('w-64 p-3', props.class)"
+    >
+      <p class="text-sm font-medium">
+        <slot name="title">
+          {{ props.title }}
+        </slot>
+      </p>
+      <p v-if="props.description || $slots.description" class="mt-1 text-sm text-muted-foreground">
+        <slot name="description">
+          {{ props.description }}
+        </slot>
+      </p>
+
+      <!--
+        Nút HUỶ đứng trước trong DOM, và đó không phải chuyện bố cục.
+
+        `PopoverContent` tự đưa focus vào phần tử nhận focus đầu tiên, nên thứ
+        tự DOM quyết định phím Enter đầu tiên rơi vào đâu. Với một hộp hỏi trước
+        khi xoá thì đường mặc định phải là đường AN TOÀN. May là nó cũng trùng
+        với chỗ đặt quen thuộc: huỷ bên trái, xác nhận bên phải.
+      -->
+      <div class="mt-3 flex justify-end gap-2">
+        <Button variant="outline" size="sm" @click="reject">
+          {{ cancelText }}
+        </Button>
+        <Button :variant="props.variant" size="sm" @click="accept">
+          {{ props.confirmLabel }}
+        </Button>
+      </div>
+    </PopoverContent>
+  </Popover>
+</template>

package/src/components/confirm-popup/index.ts

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

package/src/components/context-menu/ContextMenu.vue

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

package/src/components/context-menu/ContextMenuCheckboxItem.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { ContextMenuCheckboxItemEmits, ContextMenuCheckboxItemProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { ContextMenuCheckboxItem, ContextMenuItemIndicator, 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<ContextMenuCheckboxItemProps & ClassProps>()
+const emits = defineEmits<ContextMenuCheckboxItemEmits>()
+
+const delegated = computed(() => {
+  const { class: _class, ...rest } = props
+  return rest
+})
+
+const forwarded = useForwardPropsEmits(delegated, emits)
+</script>
+
+<template>
+  <ContextMenuCheckboxItem v-bind="forwarded" :class="cn(menuIndicatorItemClass, props.class)">
+    <span :class="menuIndicatorSlotClass">
+      <ContextMenuItemIndicator>
+        <Check class="size-4" />
+      </ContextMenuItemIndicator>
+    </span>
+    <slot />
+  </ContextMenuCheckboxItem>
+</template>

package/src/components/context-menu/ContextMenuContent.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { ContextMenuContentEmits, ContextMenuContentProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { ContextMenuContent, ContextMenuPortal, useForwardPropsEmits } from 'reka-ui'
+import { computed } from 'vue'
+import { menuContentClass } from '../../lib/menu-styles'
+import { cn } from '../../lib/utils'
+
+const props = withDefaults(
+  defineProps<ContextMenuContentProps & ClassProps>(),
+  { collisionPadding: 8 },
+)
+const emits = defineEmits<ContextMenuContentEmits>()
+
+const delegated = computed(() => {
+  const { class: _class, ...rest } = props
+  return rest
+})
+
+const forwarded = useForwardPropsEmits(delegated, emits)
+</script>
+
+<template>
+  <ContextMenuPortal>
+    <ContextMenuContent
+      v-bind="forwarded"
+      :class="cn(
+        menuContentClass,
+        'max-h-[var(--reka-context-menu-content-available-height)] overflow-y-auto',
+        props.class,
+      )"
+    >
+      <slot />
+    </ContextMenuContent>
+  </ContextMenuPortal>
+</template>

package/src/components/context-menu/ContextMenuGroup.vue

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

package/src/components/context-menu/ContextMenuItem.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { ContextMenuItemEmits, ContextMenuItemProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { ContextMenuItem, useForwardPropsEmits } from 'reka-ui'
+import { computed } from 'vue'
+import { menuInsetClass, menuItemClass } from '../../lib/menu-styles'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<ContextMenuItemProps & ClassProps & {
+  /** Item hành động nguy hiểm: xoá, thu hồi quyền... */
+  variant?: 'default' | 'destructive'
+  inset?: boolean
+}>()
+const emits = defineEmits<ContextMenuItemEmits>()
+
+const delegated = computed(() => {
+  const { class: _class, variant: _variant, inset: _inset, ...rest } = props
+  return rest
+})
+
+const forwarded = useForwardPropsEmits(delegated, emits)
+</script>
+
+<template>
+  <ContextMenuItem
+    v-bind="forwarded"
+    :data-variant="props.variant"
+    :class="cn(menuItemClass, props.inset && menuInsetClass, props.class)"
+  >
+    <slot />
+  </ContextMenuItem>
+</template>

package/src/components/context-menu/ContextMenuLabel.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { ContextMenuLabelProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { ContextMenuLabel } from 'reka-ui'
+import { computed } from 'vue'
+import { menuInsetClass, menuLabelClass } from '../../lib/menu-styles'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<ContextMenuLabelProps & ClassProps & { inset?: boolean }>()
+
+const delegated = computed(() => {
+  const { class: _class, inset: _inset, ...rest } = props
+  return rest
+})
+</script>
+
+<template>
+  <ContextMenuLabel v-bind="delegated" :class="cn(menuLabelClass, props.inset && menuInsetClass, props.class)">
+    <slot />
+  </ContextMenuLabel>
+</template>

package/src/components/context-menu/ContextMenuRadioGroup.vue

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

package/src/components/context-menu/ContextMenuRadioItem.vue

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

package/src/components/context-menu/ContextMenuSeparator.vue

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

package/src/components/context-menu/ContextMenuShortcut.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/context-menu/ContextMenuSub.vue

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

package/src/components/context-menu/ContextMenuSubContent.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { ContextMenuSubContentEmits, ContextMenuSubContentProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { ContextMenuPortal, ContextMenuSubContent, useForwardPropsEmits } from 'reka-ui'
+import { computed } from 'vue'
+import { menuSubContentClass } from '../../lib/menu-styles'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<ContextMenuSubContentProps & ClassProps>()
+const emits = defineEmits<ContextMenuSubContentEmits>()
+
+const delegated = computed(() => {
+  const { class: _class, ...rest } = props
+  return rest
+})
+
+const forwarded = useForwardPropsEmits(delegated, emits)
+</script>
+
+<template>
+  <ContextMenuPortal>
+    <ContextMenuSubContent v-bind="forwarded" :class="cn(menuSubContentClass, props.class)">
+      <slot />
+    </ContextMenuSubContent>
+  </ContextMenuPortal>
+</template>

package/src/components/context-menu/ContextMenuSubTrigger.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { ContextMenuSubTriggerProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { ContextMenuSubTrigger } from 'reka-ui'
+import { computed } from 'vue'
+import { ChevronRight } from '../../lib/icons'
+import { menuInsetClass, menuSubTriggerClass } from '../../lib/menu-styles'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<ContextMenuSubTriggerProps & ClassProps & { inset?: boolean }>()
+
+const delegated = computed(() => {
+  const { class: _class, inset: _inset, ...rest } = props
+  return rest
+})
+</script>
+
+<template>
+  <ContextMenuSubTrigger
+    v-bind="delegated"
+    :class="cn(menuSubTriggerClass, props.inset && menuInsetClass, props.class)"
+  >
+    <slot />
+    <ChevronRight class="ml-auto text-muted-foreground" />
+  </ContextMenuSubTrigger>
+</template>

package/src/components/context-menu/ContextMenuTrigger.vue

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

package/src/components/context-menu/index.ts

@@ -0,0 +1,14 @@
+export { default as ContextMenu } from './ContextMenu.vue'
+export { default as ContextMenuCheckboxItem } from './ContextMenuCheckboxItem.vue'
+export { default as ContextMenuContent } from './ContextMenuContent.vue'
+export { default as ContextMenuGroup } from './ContextMenuGroup.vue'
+export { default as ContextMenuItem } from './ContextMenuItem.vue'
+export { default as ContextMenuLabel } from './ContextMenuLabel.vue'
+export { default as ContextMenuRadioGroup } from './ContextMenuRadioGroup.vue'
+export { default as ContextMenuRadioItem } from './ContextMenuRadioItem.vue'
+export { default as ContextMenuSeparator } from './ContextMenuSeparator.vue'
+export { default as ContextMenuShortcut } from './ContextMenuShortcut.vue'
+export { default as ContextMenuSub } from './ContextMenuSub.vue'
+export { default as ContextMenuSubContent } from './ContextMenuSubContent.vue'
+export { default as ContextMenuSubTrigger } from './ContextMenuSubTrigger.vue'
+export { default as ContextMenuTrigger } from './ContextMenuTrigger.vue'