@vestow/vue 0.1.0

package/src/components/card/CardAction.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<ClassProps>()
+</script>
+
+<template>
+  <div :class="cn('flex shrink-0 items-center gap-2', props.class)">
+    <slot />
+  </div>
+</template>

package/src/components/card/CardContent.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<ClassProps>()
+</script>
+
+<template>
+  <div :class="cn('px-6 py-4', props.class)">
+    <slot />
+  </div>
+</template>

package/src/components/card/CardDescription.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<ClassProps>()
+</script>
+
+<template>
+  <p :class="cn('text-sm text-muted-foreground', props.class)">
+    <slot />
+  </p>
+</template>

package/src/components/card/CardFooter.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<ClassProps>()
+</script>
+
+<template>
+  <div :class="cn('flex items-center gap-2 border-t border-border px-6 py-4', props.class)">
+    <slot />
+  </div>
+</template>

package/src/components/card/CardHeader.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>
+  <div :class="cn('flex items-start justify-between gap-4 border-b border-border px-6 py-4', props.class)">
+    <div class="flex flex-col gap-1">
+      <slot />
+    </div>
+    <slot name="action" />
+  </div>
+</template>

package/src/components/card/CardTitle.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<ClassProps>()
+</script>
+
+<template>
+  <h3 :class="cn('text-base leading-none font-semibold tracking-tight', props.class)">
+    <slot />
+  </h3>
+</template>

package/src/components/card/index.ts

@@ -0,0 +1,7 @@
+export { default as Card } from './Card.vue'
+export { default as CardAction } from './CardAction.vue'
+export { default as CardContent } from './CardContent.vue'
+export { default as CardDescription } from './CardDescription.vue'
+export { default as CardFooter } from './CardFooter.vue'
+export { default as CardHeader } from './CardHeader.vue'
+export { default as CardTitle } from './CardTitle.vue'

package/src/components/carousel/Carousel.vue

@@ -0,0 +1,164 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import type {
+  CarouselOrientation,
+  EmblaCarouselType,
+  EmblaOptionsType,
+  EmblaPluginType,
+} from './index'
+import emblaCarouselVue from 'embla-carousel-vue'
+import { computed, ref, watch } from 'vue'
+import { useI18n } from '../../composables/useI18n'
+import { cn } from '../../lib/utils'
+import { provideCarouselContext } from './index'
+
+const props = withDefaults(
+  defineProps<ClassProps & {
+    opts?: EmblaOptionsType
+    plugins?: EmblaPluginType[]
+    orientation?: CarouselOrientation
+    /**
+     * Tên trợ năng của cả vùng. Bỏ trống thì lấy chuỗi của thư viện — đừng đặt
+     * default ở đây, chuỗi trong `withDefaults` đóng băng ở một ngôn ngữ.
+     */
+    label?: string
+  }>(),
+  { orientation: 'horizontal' },
+)
+
+const emits = defineEmits<{
+  /** Bắn một lần khi embla sẵn sàng, để bên gọi giữ lấy api nếu cần. */
+  'init-api': [api: EmblaCarouselType]
+}>()
+
+const { t } = useI18n()
+
+const orientation = computed(() => props.orientation)
+
+const [carouselRef, api] = emblaCarouselVue(
+  computed(() => ({ ...props.opts, axis: props.orientation === 'vertical' ? 'y' : 'x' })),
+  computed(() => props.plugins ?? []),
+)
+
+const canScrollPrev = ref(false)
+const canScrollNext = ref(false)
+const selectedIndex = ref(0)
+const scrollSnaps = ref<number[]>([])
+const version = ref(0)
+
+function readState(embla: EmblaCarouselType): void {
+  canScrollPrev.value = embla.canScrollPrev()
+  canScrollNext.value = embla.canScrollNext()
+  selectedIndex.value = embla.selectedScrollSnap()
+}
+
+function readLayout(embla: EmblaCarouselType): void {
+  scrollSnaps.value = embla.scrollSnapList()
+  version.value += 1
+  readState(embla)
+}
+
+watch(api, (embla, _old, onCleanup) => {
+  if (embla === undefined)
+    return
+
+  readLayout(embla)
+  emits('init-api', embla)
+
+  const onSelect = (): void => readState(embla)
+  const onReInit = (): void => readLayout(embla)
+  embla.on('select', onSelect).on('reInit', onReInit)
+
+  onCleanup(() => {
+    embla.off('select', onSelect).off('reInit', onReInit)
+  })
+}, { immediate: true })
+
+/**
+ * Vùng `overflow-hidden` VẪN cuộn được bằng chương trình.
+ *
+ * Đưa focus vào một link nằm trong slide đang khuất là trình duyệt tự cuộn vùng
+ * đó để lộ phần tử ra — nhưng embla đặt vị trí bằng `transform`, nó không biết
+ * gì về `scrollLeft`. Cả băng lệch đi một đoạn và không bao giờ trở lại, kể cả
+ * khi bấm nút mũi tên. Không lỗi, không cảnh báo.
+ *
+ * Trả nó về 0 ngay khi xảy ra. Đây là việc của mình chứ không phải của embla:
+ * `overflow-hidden` là do `CarouselContent` khai, và chính `carouselRef` là
+ * element mang nó.
+ */
+function resetNativeScroll(event: Event): void {
+  const el = event.currentTarget as HTMLElement
+  if (el.scrollLeft !== 0)
+    el.scrollLeft = 0
+  if (el.scrollTop !== 0)
+    el.scrollTop = 0
+}
+
+watch(carouselRef, (el, previous) => {
+  previous?.removeEventListener('scroll', resetNativeScroll)
+  el?.addEventListener('scroll', resetNativeScroll)
+}, { immediate: true })
+
+function scrollPrev(): void {
+  api.value?.scrollPrev()
+}
+function scrollNext(): void {
+  api.value?.scrollNext()
+}
+function scrollTo(index: number): void {
+  api.value?.scrollTo(index)
+}
+
+function onKeydown(event: KeyboardEvent): void {
+  const back = props.orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft'
+  const forward = props.orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight'
+
+  if (event.key !== back && event.key !== forward)
+    return
+
+  // Chỉ nhận phím khi nó không thuộc về một control bên trong slide, nếu không
+  // mũi tên trong một ô nhập sẽ mất tác dụng.
+  const target = event.target as HTMLElement | null
+  if (target !== null && target.closest('input, textarea, select, [contenteditable]') !== null)
+    return
+
+  event.preventDefault()
+  if (event.key === back)
+    scrollPrev()
+  else
+    scrollNext()
+}
+
+provideCarouselContext({
+  carouselRef,
+  api,
+  orientation,
+  canScrollPrev,
+  canScrollNext,
+  selectedIndex,
+  scrollSnaps,
+  scrollPrev,
+  scrollNext,
+  scrollTo,
+  version,
+})
+
+defineExpose({ scrollPrev, scrollNext, scrollTo })
+</script>
+
+<template>
+  <!--
+    `aria-roledescription` được ĐỌC NGUYÊN VĂN cho người dùng, nên nó phải đi
+    qua i18n như mọi chuỗi nhìn thấy được — để nguyên "carousel" là một từ tiếng
+    Anh chen vào giữa một câu tiếng Việt.
+  -->
+  <section
+    role="region"
+    :aria-roledescription="t('ui.carousel.roleDescription')"
+    :aria-label="props.label ?? t('ui.carousel.label')"
+    :class="cn('relative', props.class)"
+    @keydown="onKeydown"
+  >
+    <slot />
+  </section>
+</template>

package/src/components/carousel/CarouselContent.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import type { ComponentPublicInstance } from 'vue'
+import type { ClassProps } from '../../lib/types'
+import { cn } from '../../lib/utils'
+import { injectCarouselContext } from './index'
+
+const props = defineProps<ClassProps>()
+
+const { carouselRef, orientation } = injectCarouselContext()
+
+/**
+ * Đặt element cho embla.
+ *
+ * Viết thẳng trong template thì dấu `|` của kiểu union bị eslint-plugin-vue
+ * đọc thành filter của Vue 2 và báo lỗi. Kiểu thuộc về script, không thuộc
+ * về template.
+ */
+function setViewport(el: Element | ComponentPublicInstance | null): void {
+  carouselRef.value = (el as HTMLElement | null) ?? undefined
+}
+</script>
+
+<template>
+  <!--
+    Hai lớp, và không gộp được: embla đo lớp NGOÀI làm khung nhìn rồi dịch lớp
+    TRONG bằng `transform`. Đưa `overflow-hidden` và `flex` vào cùng một thẻ là
+    khung nhìn tự dịch theo chính nó.
+  -->
+  <div :ref="setViewport" class="overflow-hidden">
+    <div
+      :class="cn(
+        'flex',
+        // Khoảng cách giữa các slide làm bằng padding của slide cộng margin âm
+        // ở đây, chứ không bằng `gap`: `gap` cộng vào bề rộng khung nhìn nên
+        // `basis-1/3` không còn ra đúng một phần ba, và mép cuối hụt một nhịp.
+        orientation === 'vertical' ? '-mt-4 flex-col' : '-ml-4',
+        props.class,
+      )"
+    >
+      <slot />
+    </div>
+  </div>
+</template>

package/src/components/carousel/CarouselDots.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import { useI18n } from '../../composables/useI18n'
+import { focusRing } from '../../lib/focus'
+import { cn } from '../../lib/utils'
+import { injectCarouselContext } from './index'
+
+const props = defineProps<ClassProps>()
+
+const { scrollSnaps, selectedIndex, scrollTo } = injectCarouselContext()
+const { t } = useI18n()
+</script>
+
+<template>
+  <!--
+    Một chấm cho mỗi MỐC DỪNG, không phải cho mỗi slide.
+
+    Với `slidesToScroll` lớn hơn 1, hoặc khi mấy slide cuối vừa hết vào một
+    khung nhìn, số mốc dừng ÍT HƠN số slide. Đếm theo slide thì mấy chấm cuối
+    không bao giờ sáng lên được — bấm vào chúng đưa tới đúng cái mốc mà chấm
+    trước đó cũng trỏ tới.
+  -->
+  <div
+    :class="cn('flex items-center justify-center gap-2', props.class)"
+    :aria-label="t('ui.carousel.dots')"
+    role="group"
+  >
+    <button
+      v-for="(_snap, index) in scrollSnaps"
+      :key="index"
+      type="button"
+      :aria-label="t('ui.carousel.goTo', { index: index + 1 })"
+      :aria-current="index === selectedIndex ? 'true' : undefined"
+      :class="cn(
+        'size-2 rounded-full transition-colors',
+        focusRing,
+        index === selectedIndex ? 'bg-primary' : 'bg-muted-foreground/35 hover:bg-muted-foreground/60',
+      )"
+      @click="scrollTo(index)"
+    />
+  </div>
+</template>

package/src/components/carousel/CarouselItem.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import { computed, ref } from 'vue'
+import { useI18n } from '../../composables/useI18n'
+import { cn } from '../../lib/utils'
+import { injectCarouselContext } from './index'
+
+const props = defineProps<ClassProps>()
+
+const { api, orientation, version } = injectCarouselContext()
+const { t } = useI18n()
+
+const el = ref<HTMLElement>()
+
+/**
+ * Tự tra chỉ số của mình trong danh sách slide của embla.
+ *
+ * Không đếm bằng thứ tự mount: `v-for` đảo chỗ hay chèn giữa là số sai mà không
+ * có gì báo. `slideNodes()` chính là thứ tự embla đang dùng để cuộn, nên hỏi nó
+ * là hỏi đúng nguồn — chỉ cần một `version` để biết lúc nào phải hỏi lại, vì
+ * hàm đó không phải nguồn reactive.
+ */
+const position = computed(() => {
+  void version.value
+  const nodes = api.value?.slideNodes()
+  if (nodes === undefined || el.value === undefined)
+    return { index: -1, total: 0 }
+  return { index: nodes.indexOf(el.value), total: nodes.length }
+})
+
+const slideLabel = computed(() =>
+  position.value.index < 0
+    ? undefined
+    : t('ui.carousel.slideLabel', {
+        index: position.value.index + 1,
+        total: position.value.total,
+      }),
+)
+</script>
+
+<template>
+  <div
+    ref="el"
+    role="group"
+    :aria-roledescription="t('ui.carousel.slideRoleDescription')"
+    :aria-label="slideLabel"
+    :class="cn(
+      // `min-w-0` là bắt buộc: mặc định flex item không co xuống dưới
+      // min-content, nên một slide có chữ dài sẽ tự nong ra rộng hơn phần
+      // `basis` được chia và cả băng lệch dần.
+      'min-w-0 shrink-0 grow-0 basis-full',
+      orientation === 'vertical' ? 'pt-4' : 'pl-4',
+      props.class,
+    )"
+  >
+    <slot />
+  </div>
+</template>

package/src/components/carousel/CarouselNext.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import type { ButtonVariants } from '../button'
+import { computed } from 'vue'
+import { useI18n } from '../../composables/useI18n'
+import { ArrowDown, ArrowRight } from '../../lib/icons'
+import { cn } from '../../lib/utils'
+import Button from '../button/Button.vue'
+import { injectCarouselContext } from './index'
+
+const props = withDefaults(
+  defineProps<ClassProps & {
+    variant?: ButtonVariants['variant']
+    size?: ButtonVariants['size']
+    label?: string
+  }>(),
+  { variant: 'outline', size: 'icon' },
+)
+
+const { orientation, canScrollNext, scrollNext } = injectCarouselContext()
+const { t } = useI18n()
+
+const buttonLabel = computed(() => props.label ?? t('ui.carousel.next'))
+</script>
+
+<template>
+  <Button
+    type="button"
+    :variant="props.variant"
+    :size="props.size"
+    :disabled="!canScrollNext"
+    :aria-label="buttonLabel"
+    :class="cn(
+      'absolute rounded-full',
+      orientation === 'vertical'
+        ? '-bottom-12 left-1/2 -translate-x-1/2'
+        : '-right-12 top-1/2 -translate-y-1/2',
+      props.class,
+    )"
+    @click="scrollNext"
+  >
+    <ArrowDown v-if="orientation === 'vertical'" aria-hidden="true" />
+    <ArrowRight v-else aria-hidden="true" />
+  </Button>
+</template>

package/src/components/carousel/CarouselPrevious.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import type { ButtonVariants } from '../button'
+import { computed } from 'vue'
+import { useI18n } from '../../composables/useI18n'
+import { ArrowLeft, ArrowUp } from '../../lib/icons'
+import { cn } from '../../lib/utils'
+import Button from '../button/Button.vue'
+import { injectCarouselContext } from './index'
+
+const props = withDefaults(
+  defineProps<ClassProps & {
+    variant?: ButtonVariants['variant']
+    size?: ButtonVariants['size']
+    label?: string
+  }>(),
+  { variant: 'outline', size: 'icon' },
+)
+
+const { orientation, canScrollPrev, scrollPrev } = injectCarouselContext()
+const { t } = useI18n()
+
+const buttonLabel = computed(() => props.label ?? t('ui.carousel.previous'))
+</script>
+
+<template>
+  <Button
+    type="button"
+    :variant="props.variant"
+    :size="props.size"
+    :disabled="!canScrollPrev"
+    :aria-label="buttonLabel"
+    :class="cn(
+      'absolute rounded-full',
+      orientation === 'vertical'
+        ? '-top-12 left-1/2 -translate-x-1/2'
+        : '-left-12 top-1/2 -translate-y-1/2',
+      props.class,
+    )"
+    @click="scrollPrev"
+  >
+    <ArrowUp v-if="orientation === 'vertical'" aria-hidden="true" />
+    <ArrowLeft v-else aria-hidden="true" />
+  </Button>
+</template>

package/src/components/carousel/index.ts

@@ -0,0 +1,44 @@
+import type {
+  EmblaCarouselType,
+  EmblaOptionsType,
+  EmblaPluginType,
+} from 'embla-carousel'
+import type { ComputedRef, Ref } from 'vue'
+import { createContext } from 'reka-ui'
+
+export { default as Carousel } from './Carousel.vue'
+export { default as CarouselContent } from './CarouselContent.vue'
+export { default as CarouselDots } from './CarouselDots.vue'
+export { default as CarouselItem } from './CarouselItem.vue'
+export { default as CarouselNext } from './CarouselNext.vue'
+export { default as CarouselPrevious } from './CarouselPrevious.vue'
+
+export type { EmblaCarouselType, EmblaOptionsType, EmblaPluginType }
+
+export type CarouselOrientation = 'horizontal' | 'vertical'
+
+export interface CarouselContext {
+  /** Gắn vào vùng `overflow-hidden`; embla đo và điều khiển từ đây. */
+  carouselRef: Ref<HTMLElement | undefined>
+  /** `undefined` cho tới khi embla khởi tạo xong — mọi chỗ đọc phải chịu được. */
+  api: Ref<EmblaCarouselType | undefined>
+  orientation: ComputedRef<CarouselOrientation>
+  canScrollPrev: Ref<boolean>
+  canScrollNext: Ref<boolean>
+  selectedIndex: Ref<number>
+  /** Một mốc dừng cho mỗi trang, không phải cho mỗi slide — xem `CarouselDots`. */
+  scrollSnaps: Ref<number[]>
+  scrollPrev: () => void
+  scrollNext: () => void
+  scrollTo: (index: number) => void
+  /**
+   * Tăng mỗi lần embla `init` hoặc `reInit`.
+   *
+   * `slideNodes()` là một hàm thường, không phải nguồn reactive, nên `CarouselItem`
+   * cần một thứ để phụ thuộc vào khi nó tự tra chỉ số của mình trong danh sách đó.
+   */
+  version: Ref<number>
+}
+
+export const [injectCarouselContext, provideCarouselContext]
+  = createContext<CarouselContext>('Carousel')