@hina-ui/vue 1.7.2 → 1.7.4

package/src/components/navigation-menu/NavigationMenuLink.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+  import {
+    NavigationMenuLink as RekaNavigationMenuLink,
+    type NavigationMenuLinkEmits,
+    type PrimitiveProps,
+  } from 'reka-ui'
+  import { cn } from '../../lib/cn'
+  import { useNavigationMenu } from './context'
+  import {
+    navigationMenuControl,
+    navigationMenuLink,
+    navigationMenuIcon,
+  } from './navigation-menu.variants'
+
+  defineOptions({ name: 'HnNavigationMenuLink', inheritAttrs: false })
+  const props = withDefaults(
+    defineProps<
+      PrimitiveProps & {
+        active?: boolean
+        disabled?: boolean
+        description?: string
+        class?: string
+      }
+    >(),
+    { as: 'a' },
+  )
+  const emit = defineEmits<NavigationMenuLinkEmits>()
+  const menu = useNavigationMenu()
+  defineSlots<{
+    default(): unknown
+    icon?(): unknown
+    trailing?(): unknown
+    description?(): unknown
+  }>()
+
+  function guard(event: MouseEvent) {
+    if (!props.disabled) return
+    event.preventDefault()
+    event.stopImmediatePropagation()
+  }
+</script>
+
+<template>
+  <RekaNavigationMenuLink
+    v-bind="$attrs"
+    :as="props.as"
+    :as-child="props.asChild"
+    :active="props.active"
+    :aria-disabled="props.disabled || undefined"
+    :data-disabled="props.disabled ? '' : undefined"
+    :tabindex="props.disabled ? -1 : undefined"
+    data-hn-navigation-control
+    :class="
+      cn(
+        navigationMenuControl({ size: menu.size.value, orientation: menu.orientation.value }),
+        navigationMenuLink(),
+        props.class,
+      )
+    "
+    @click.capture="guard"
+    @select="emit('select', $event)"
+  >
+    <slot v-if="props.asChild" />
+    <template v-else>
+      <span v-if="$slots.icon" :class="navigationMenuIcon()" aria-hidden="true">
+        <slot name="icon" />
+      </span>
+      <span class="flex min-w-0 flex-1 flex-col gap-1">
+        <span><slot /></span>
+        <span
+          v-if="props.description || $slots.description"
+          class="text-muted text-xs leading-relaxed font-normal"
+        >
+          <slot name="description">{{ props.description }}</slot>
+        </span>
+      </span>
+      <span v-if="$slots.trailing" :class="navigationMenuIcon()">
+        <slot name="trailing" />
+      </span>
+    </template>
+  </RekaNavigationMenuLink>
+</template>

package/src/components/navigation-menu/NavigationMenuTrigger.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+  import { NavigationMenuTrigger as RekaNavigationMenuTrigger } from 'reka-ui'
+  import { cn } from '../../lib/cn'
+  import DisclosureIcon from '../disclosure-icon/DisclosureIcon.vue'
+  import { useNavigationMenu } from './context'
+  import {
+    navigationMenuControl,
+    navigationMenuTrigger,
+    navigationMenuIcon,
+    navigationMenuDisclosure,
+  } from './navigation-menu.variants'
+
+  defineOptions({ name: 'HnNavigationMenuTrigger' })
+  const props = defineProps<{ disabled?: boolean; class?: string }>()
+  const menu = useNavigationMenu()
+  defineSlots<{ default(): unknown; icon?(): unknown; trailing?(): unknown }>()
+</script>
+
+<template>
+  <RekaNavigationMenuTrigger
+    type="button"
+    data-hn-navigation-control
+    :disabled="props.disabled"
+    :class="
+      cn(
+        navigationMenuControl({ size: menu.size.value, orientation: menu.orientation.value }),
+        navigationMenuTrigger(),
+        props.class,
+      )
+    "
+  >
+    <span v-if="$slots.icon" :class="navigationMenuIcon()" aria-hidden="true">
+      <slot name="icon" />
+    </span>
+    <span class="min-w-0 flex-1"><slot /></span>
+    <span :class="navigationMenuIcon()">
+      <slot name="trailing">
+        <span :class="navigationMenuDisclosure({ orientation: menu.orientation.value })">
+          <DisclosureIcon :direction="menu.orientation.value === 'vertical' ? 'end' : 'down'" />
+        </span>
+      </slot>
+    </span>
+  </RekaNavigationMenuTrigger>
+</template>

package/src/components/navigation-menu/composables/useNavigationMenuKeyboard.ts

@@ -0,0 +1,33 @@
+import type { Ref } from 'vue'
+import type { NavigationMenuOrientation } from '../types'
+
+export function useNavigationMenuKeyboard(
+  root: Ref<HTMLElement | undefined>,
+  orientation: () => NavigationMenuOrientation,
+  direction: () => 'ltr' | 'rtl',
+) {
+  return (event: KeyboardEvent) => {
+    if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey) return
+    const items = Array.from(
+      root.value?.querySelectorAll<HTMLElement>(
+        '[data-hn-navigation-list] > [data-menu-item] > [data-hn-navigation-control]',
+      ) ?? [],
+    ).filter(item => !item.hasAttribute('data-disabled'))
+    const index = items.indexOf(event.target as HTMLElement)
+    if (index < 0) return
+
+    const horizontal = orientation() === 'horizontal'
+    const next = horizontal ? (direction() === 'rtl' ? 'ArrowLeft' : 'ArrowRight') : 'ArrowDown'
+    const previous = horizontal ? (direction() === 'rtl' ? 'ArrowRight' : 'ArrowLeft') : 'ArrowUp'
+    let target: number
+    if (event.key === next) target = Math.min(index + 1, items.length - 1)
+    else if (event.key === previous) target = Math.max(index - 1, 0)
+    else if (event.key === 'Home') target = 0
+    else if (event.key === 'End') target = items.length - 1
+    else return
+
+    event.preventDefault()
+    event.stopPropagation()
+    items[target]?.focus()
+  }
+}

package/src/components/navigation-menu/composables/useNavigationMenuLayout.ts

@@ -0,0 +1,72 @@
+import { computed, shallowRef, watch, type Ref } from 'vue'
+import { useElementBounding, useResizeObserver, useWindowSize } from '@vueuse/core'
+import type { NavigationMenuOrientation } from '../types'
+
+export function useNavigationMenuLayout(
+  root: Ref<HTMLElement | undefined>,
+  orientation: () => NavigationMenuOrientation,
+  direction: () => 'ltr' | 'rtl',
+) {
+  const { left, right, update } = useElementBounding(root)
+  const { width } = useWindowSize()
+  const ancestors = shallowRef<HTMLElement[]>([])
+  const bounds = shallowRef({ start: 16, end: width.value - 16 })
+
+  function measure() {
+    let start = 16
+    let end = width.value - 16
+    for (const element of ancestors.value) {
+      const overflow = element.ownerDocument.defaultView?.getComputedStyle(element).overflowX
+      if (overflow === 'visible') continue
+      const rect = element.getBoundingClientRect()
+      start = Math.max(start, rect.left + element.clientLeft + 8)
+      end = Math.min(end, rect.left + element.clientLeft + element.clientWidth - 8)
+    }
+    bounds.value = { start, end }
+  }
+
+  watch(
+    root,
+    element => {
+      const parents: HTMLElement[] = []
+      for (let parent = element?.parentElement; parent; parent = parent.parentElement)
+        parents.push(parent)
+      ancestors.value = parents
+      measure()
+    },
+    { flush: 'post' },
+  )
+  watch([left, right, width], measure, { flush: 'post' })
+  useResizeObserver(ancestors, () => {
+    update()
+    measure()
+  })
+
+  const available = computed(() => {
+    const before = Math.max(0, left.value - bounds.value.start - 10)
+    const after = Math.max(0, bounds.value.end - right.value - 10)
+    return direction() === 'rtl' ? { start: after, end: before } : { start: before, end: after }
+  })
+  const side = computed(() =>
+    orientation() === 'vertical' &&
+    available.value.end < 320 &&
+    available.value.start > available.value.end
+      ? 'start'
+      : 'end',
+  )
+  const placement = computed(() => {
+    if (orientation() === 'horizontal') return 'bottom'
+    if (side.value === 'end') return direction() === 'rtl' ? 'left' : 'right'
+    return direction() === 'rtl' ? 'right' : 'left'
+  })
+  const style = computed(() =>
+    root.value
+      ? {
+          '--hn-navigation-max-width': `${orientation() === 'vertical' ? available.value[side.value] : Math.max(0, bounds.value.end - bounds.value.start - 2)}px`,
+          '--hn-navigation-min-x': `${bounds.value.start - left.value}px`,
+          '--hn-navigation-bound-end': `${bounds.value.end - left.value}px`,
+        }
+      : undefined,
+  )
+  return { side, placement, style }
+}

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

@@ -0,0 +1,19 @@
+import { inject, provide, type InjectionKey, type Ref } from 'vue'
+import type { NavigationMenuOrientation, NavigationMenuSize } from './types'
+
+interface NavigationMenuContext {
+  size: Readonly<Ref<NavigationMenuSize>>
+  orientation: Readonly<Ref<NavigationMenuOrientation>>
+}
+
+const key: InjectionKey<NavigationMenuContext> = Symbol('hn-navigation-menu')
+
+export function provideNavigationMenu(context: NavigationMenuContext) {
+  provide(key, context)
+}
+
+export function useNavigationMenu() {
+  const context = inject(key)
+  if (!context) throw new Error('NavigationMenu controls must be inside NavigationMenu.')
+  return context
+}

package/src/components/navigation-menu/navigation-menu.variants.ts

@@ -0,0 +1 @@
+export * from '../../../../shared/src/variants/navigation-menu'

package/src/components/navigation-menu/types.ts

@@ -0,0 +1,17 @@
+export type NavigationMenuSize = 'sm' | 'md' | 'lg'
+export type NavigationMenuOrientation = 'horizontal' | 'vertical'
+
+export interface NavigationMenuProps {
+  label?: string
+  orientation?: NavigationMenuOrientation
+  dir?: 'ltr' | 'rtl'
+  size?: NavigationMenuSize
+  trigger?: 'hover' | 'click'
+  delayDuration?: number
+  skipDelayDuration?: number
+  align?: 'start' | 'center' | 'end'
+  unmountOnHide?: boolean
+  class?: string
+  listClass?: string
+  viewportClass?: string
+}

package/src/components/number-input/number-input.variants.ts

@@ -1,32 +1 @@
-import { tv } from '../../lib/tv'
-
-export const numberInputStepper = tv({
-  base: 'flex shrink-0 flex-col',
-  variants: {
-    divided: {
-      true: 'border-line border-s',
-    },
-    size: {
-      sm: '[&_svg]:size-3',
-      md: '[&_svg]:size-3',
-      lg: '[&_svg]:size-3.5',
-    },
-  },
-  defaultVariants: {
-    size: 'md',
-    divided: true,
-  },
-})
-
-export const numberInputStep = tv({
-  base: [
-    'hn-interactive hn-state-layer hn-press-none text-muted',
-    'flex min-h-0 flex-1 basis-0 items-center justify-center px-1.5 outline-none',
-    'disabled:pointer-events-none disabled:opacity-40',
-  ],
-  variants: {
-    divided: {
-      true: 'border-line border-t',
-    },
-  },
-})
+export * from '../../../../shared/src/variants/number-input'

package/src/components/pagination/pagination.variants.ts

@@ -1,32 +1 @@
-import { tv } from '../../lib/tv'
-
-export const pagination = tv({
-  base: 'flex w-full shrink-0 flex-wrap items-center gap-x-4 gap-y-3',
-  variants: {
-    align: {
-      start: 'justify-start',
-      center: 'justify-center',
-      end: 'justify-end',
-      between: 'justify-between',
-    },
-  },
-})
-
-export const paginationList = tv({
-  base: 'relative isolate flex max-w-full flex-wrap items-center gap-1',
-})
-
-export const paginationItem = tv({
-  base: 'min-w-0 px-0 tabular-nums [&>span]:min-w-0',
-  variants: {
-    size: {
-      sm: 'size-[var(--hn-control-h-sm)]',
-      md: 'size-[var(--hn-control-h-md)]',
-      lg: 'size-[var(--hn-control-h-lg)]',
-    },
-    selected: { true: 'bg-accent text-accent-on' },
-  },
-  defaultVariants: { size: 'md' },
-})
-
-export const paginationArrow = tv({ variants: { dir: { ltr: '', rtl: 'rotate-180' } } })
+export * from '../../../../shared/src/variants/pagination'

package/src/components/panel/panel.variants.ts

@@ -1,29 +1 @@
-import { tv, type VariantProps } from '../../lib/tv'
-
-export const panelHeader = tv({
-  base: 'flex items-start justify-between gap-4 px-(--hn-panel-p) pt-(--hn-panel-p)',
-})
-
-export const panelTitle = tv({
-  base: 'flex min-w-0 items-center gap-2',
-})
-
-export const panelIcon = tv({
-  base: 'text-muted flex shrink-0 [&_svg]:size-4.5',
-})
-
-export const panelActions = tv({
-  base: 'flex shrink-0 items-center gap-2',
-})
-
-export const panelBody = tv({
-  base: 'pt-4',
-  variants: {
-    padded: {
-      true: 'px-(--hn-panel-p) pb-(--hn-panel-p)',
-    },
-  },
-  defaultVariants: { padded: true },
-})
-
-export type PanelVariants = VariantProps<typeof panelBody>
+export * from '../../../../shared/src/variants/panel'

package/src/components/pin-input/pin-input.variants.ts

@@ -1,31 +1 @@
-import { tv, type VariantProps } from '../../lib/tv'
-
-export const pinInput = tv({
-  base: 'inline-flex max-w-full gap-2',
-})
-
-export const pinInputCell = tv({
-  base: [
-    'hn-field text-fg shrink-0 rounded-md border text-center font-medium tabular-nums outline-none [font-family:inherit]',
-    'placeholder:text-faint placeholder:font-normal',
-    'disabled:cursor-not-allowed disabled:opacity-50',
-  ],
-  variants: {
-    variant: {
-      primary:
-        'border-line [--hn-field-bg:var(--hn-surface)] [--hn-field-shadow:var(--hn-shadow-sm)]',
-      secondary: 'border-transparent [--hn-field-bg:var(--hn-bg-inset)]',
-    },
-    size: {
-      sm: 'size-[var(--hn-control-h-sm)] text-sm',
-      md: 'size-[var(--hn-control-h-md)] text-base',
-      lg: 'size-[var(--hn-control-h-lg)] text-md',
-    },
-  },
-  defaultVariants: {
-    variant: 'primary',
-    size: 'md',
-  },
-})
-
-export type PinInputVariants = VariantProps<typeof pinInputCell>
+export * from '../../../../shared/src/variants/pin-input'

package/src/components/prev-next/prev-next.variants.ts

@@ -1,28 +1 @@
-import { tv, type VariantProps } from '../../lib/tv'
-
-export const prevNextLink = tv({
-  base: [
-    'hn-interactive hn-state-layer hn-press-lg flex flex-col gap-1 rounded-lg p-4 text-start',
-    'bg-surface border-line border shadow-sm',
-  ],
-  variants: {
-    direction: {
-      prev: 'items-start',
-      next: 'items-end text-end sm:col-start-2',
-    },
-  },
-  defaultVariants: { direction: 'next' },
-})
-
-export const prevNextEyebrow = tv({
-  base: 'text-muted inline-flex items-center gap-1 text-sm',
-  variants: {
-    direction: {
-      prev: '',
-      next: 'flex-row-reverse',
-    },
-  },
-  defaultVariants: { direction: 'next' },
-})
-
-export type PrevNextVariants = VariantProps<typeof prevNextLink>
+export * from '../../../../shared/src/variants/prev-next'

package/src/components/progress/progress.variants.ts

@@ -1,46 +1 @@
-import { tv, type VariantProps } from '../../lib/tv'
-
-export const progress = tv({
-  base: 'flex w-full min-w-0 flex-col gap-1.5',
-})
-
-export const progressHeader = tv({
-  base: 'text-fg flex items-baseline justify-between gap-3 text-sm',
-})
-
-export const progressValue = tv({
-  base: 'text-muted ms-auto tabular-nums',
-})
-
-export const progressTrack = tv({
-  base: 'bg-line-strong relative w-full overflow-hidden rounded-full rtl:[--hn-progress-dir:-1]',
-  variants: {
-    size: {
-      sm: 'h-1',
-      md: 'h-2',
-      lg: 'h-3',
-    },
-  },
-  defaultVariants: {
-    size: 'md',
-  },
-})
-
-export const progressBar = tv({
-  base: 'hn-progress-bar block h-full w-[calc(var(--hn-progress-p,0)*100%)] rounded-full',
-  variants: {
-    tone: {
-      accent: 'bg-accent',
-      neutral: 'bg-neutral-solid',
-      success: 'bg-success',
-      warning: 'bg-warning',
-      danger: 'bg-danger',
-      info: 'bg-info',
-    },
-  },
-  defaultVariants: {
-    tone: 'accent',
-  },
-})
-
-export type ProgressVariants = VariantProps<typeof progressTrack> & VariantProps<typeof progressBar>
+export * from '../../../../shared/src/variants/progress'

package/src/components/qr-code/QRCode.vue

@@ -0,0 +1,155 @@
+<script setup lang="ts">
+  import { computed, ref, watch } from 'vue'
+  import { Check, QrCode, RefreshCw, CircleAlert } from '@lucide/vue'
+  import { qrCodeGeometry, qrCodeSize } from '../../../../shared/src/lib/qr-code'
+  import { cn } from '../../lib/cn'
+  import { useUiLocale } from '../../locale'
+  import Button from '../button/Button.vue'
+  import Spinner from '../spinner/Spinner.vue'
+  import { qrCode, qrCodeSvg, qrCodeStatus } from './qr-code.variants'
+  import { exportQRCode } from './export'
+  import type { QRCodeProps, QRCodeExportOptions, QRCodeStatusSlot, QRCodeState } from './types'
+
+  defineOptions({ name: 'HnQRCode' })
+  const props = withDefaults(defineProps<QRCodeProps>(), {
+    size: 192,
+    margin: 4,
+    logoSize: 32,
+    logoMargin: 2,
+    status: 'active',
+    bordered: true,
+  })
+  const emit = defineEmits<{ refresh: []; error: [error: Error]; logoError: [event: Event] }>()
+  defineSlots<{ status?(props: QRCodeStatusSlot): unknown }>()
+  const t = useUiLocale()
+  const element = ref<HTMLElement>()
+  const svg = ref<SVGSVGElement>()
+  const logoFailed = ref(false)
+  watch(
+    () => props.logo,
+    () => {
+      logoFailed.value = false
+    },
+  )
+  const size = computed(() => qrCodeSize(props.size))
+  const result = computed(() => {
+    if (!props.value) return {}
+    try {
+      return {
+        geometry: qrCodeGeometry(
+          props.value,
+          props.level ?? (props.logo ? 'H' : 'M'),
+          props.margin,
+        ),
+      }
+    } catch (error) {
+      return { error: error instanceof Error ? error : new Error(String(error)) }
+    }
+  })
+  const state = computed<QRCodeState>(() =>
+    props.status !== 'active'
+      ? props.status
+      : result.value.error
+        ? 'error'
+        : result.value.geometry
+          ? 'active'
+          : 'empty',
+  )
+  const inactive = computed(() => (state.value === 'active' ? 'empty' : state.value))
+  watch(
+    () => result.value.error,
+    error => {
+      if (error) emit('error', error)
+    },
+    { immediate: true },
+  )
+  const refresh = () => emit('refresh')
+  function onLogoError(event: Event) {
+    logoFailed.value = true
+    emit('logoError', event)
+  }
+  const logo = computed(() => {
+    if (!props.logo || logoFailed.value || !result.value.geometry) return
+    const dimension = result.value.geometry.size
+    const pixels = Number.isFinite(props.logoSize) ? Math.max(0, props.logoSize) : 32
+    if (!pixels) return
+    const padding = Number.isFinite(props.logoMargin) ? Math.max(0, props.logoMargin) : 2
+    const side = Math.min((pixels / size.value) * dimension, dimension / 4)
+    const gap = Math.min((padding / size.value) * dimension, dimension / 32)
+    return { side, gap, start: (dimension - side) / 2 }
+  })
+  async function toBlob(options?: QRCodeExportOptions) {
+    if (state.value !== 'active' || !svg.value) throw new Error('No active QR code to export')
+    return exportQRCode(svg.value, size.value, options)
+  }
+  defineExpose({ element, svg, toBlob })
+</script>
+
+<template>
+  <div
+    ref="element"
+    data-hn-qr-code
+    :data-state="state"
+    :aria-busy="state === 'loading' || undefined"
+    :class="cn(qrCode({ bordered: props.bordered }), props.class)"
+    :style="{
+      '--hn-qr-size': `${size}px`,
+      '--hn-qr-foreground': props.color,
+      '--hn-qr-background': props.background,
+    }"
+  >
+    <svg
+      v-if="state === 'active' && result.geometry"
+      ref="svg"
+      xmlns="http://www.w3.org/2000/svg"
+      :width="size"
+      :height="size"
+      :viewBox="`0 0 ${result.geometry.size} ${result.geometry.size}`"
+      role="img"
+      :aria-label="props.label ?? t.qrCode.label"
+      :class="qrCodeSvg()"
+      shape-rendering="crispEdges"
+    >
+      <rect width="100%" height="100%" fill="var(--hn-qr-background)" />
+      <path :d="result.geometry.path" fill="var(--hn-qr-foreground)" />
+      <template v-if="logo">
+        <rect
+          :x="logo.start - logo.gap"
+          :y="logo.start - logo.gap"
+          :width="logo.side + logo.gap * 2"
+          :height="logo.side + logo.gap * 2"
+          fill="var(--hn-qr-background)"
+        />
+        <image
+          :href="props.logo"
+          :x="logo.start"
+          :y="logo.start"
+          :width="logo.side"
+          :height="logo.side"
+          preserveAspectRatio="xMidYMid meet"
+          aria-hidden="true"
+          @error="onLogoError"
+        />
+      </template>
+    </svg>
+    <div v-else :class="qrCodeStatus()" role="status" aria-live="polite">
+      <slot name="status" :status="inactive" :error="result.error" :refresh="refresh">
+        <Spinner v-if="state === 'loading'" size="sm" aria-hidden="true" />
+        <Check v-else-if="state === 'scanned'" class="text-success size-6" aria-hidden="true" />
+        <CircleAlert v-else-if="state === 'error'" class="size-6" aria-hidden="true" />
+        <QrCode v-else class="size-6" aria-hidden="true" />
+        <span>{{ inactive === 'loading' ? t.common.loading : t.qrCode[inactive] }}</span>
+        <Button
+          v-if="state === 'expired'"
+          size="sm"
+          variant="outline"
+          tone="neutral"
+          @click="refresh"
+        >
+          <template #icon><RefreshCw /></template>
+          {{ t.qrCode.refresh }}
+        </Button>
+      </slot>
+    </div>
+  </div>
+</template>