@hina-ui/vue 1.7.2 → 1.7.3

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

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+  import { computed, toRef } from 'vue'
+  import { NavigationMenuRoot, NavigationMenuList, NavigationMenuViewport } from 'reka-ui'
+  import { cn } from '../../lib/cn'
+  import { useAccessibleName } from '../../lib/a11y'
+  import { useDirection } from '../../lib/useDirection'
+  import { provideNavigationMenu } from './context'
+  import { useNavigationMenuKeyboard } from './composables/useNavigationMenuKeyboard'
+  import { useNavigationMenuLayout } from './composables/useNavigationMenuLayout'
+  import {
+    navigationMenu,
+    navigationMenuList,
+    navigationMenuViewport,
+  } from './navigation-menu.variants'
+  import type { NavigationMenuProps } from './types'
+
+  defineOptions({ name: 'HnNavigationMenu' })
+  const props = withDefaults(defineProps<NavigationMenuProps>(), {
+    orientation: 'horizontal',
+    size: 'md',
+    trigger: 'hover',
+    delayDuration: 200,
+    skipDelayDuration: 300,
+    align: 'center',
+    unmountOnHide: true,
+  })
+  const model = defineModel<string>({ default: '' })
+  const { root, direction, rootDirection } = useDirection(() => props.dir)
+  const onKeydown = useNavigationMenuKeyboard(
+    root,
+    () => props.orientation,
+    () => direction.value,
+  )
+  const { side, placement, style } = useNavigationMenuLayout(
+    root,
+    () => props.orientation,
+    () => direction.value,
+  )
+  const align = computed(() =>
+    props.orientation === 'horizontal' && direction.value === 'rtl' && props.align !== 'center'
+      ? props.align === 'start'
+        ? 'end'
+        : 'start'
+      : props.align,
+  )
+  provideNavigationMenu({ size: toRef(props, 'size'), orientation: toRef(props, 'orientation') })
+  useAccessibleName('NavigationMenu', () => !props.label)
+  defineSlots<{ default(props: { value: string }): unknown }>()
+</script>
+
+<template>
+  <NavigationMenuRoot
+    :key="props.orientation"
+    v-model="model"
+    as-child
+    :orientation="props.orientation"
+    :dir="direction"
+    :delay-duration="props.delayDuration"
+    :skip-delay-duration="props.skipDelayDuration"
+    :disable-hover-trigger="props.trigger === 'click'"
+    :disable-pointer-leave-close="props.trigger === 'click'"
+    :unmount-on-hide="props.unmountOnHide"
+    :aria-label="props.label"
+    :class="cn(navigationMenu(), props.class)"
+    @keydown.capture="onKeydown"
+  >
+    <nav ref="root" :dir="rootDirection" :style="style" data-hn-navigation-menu>
+      <NavigationMenuList
+        data-hn-navigation-list
+        :class="cn(navigationMenuList({ orientation: props.orientation }), props.listClass)"
+      >
+        <slot :value="model" />
+      </NavigationMenuList>
+      <NavigationMenuViewport
+        data-hn-navigation-viewport
+        :align="align"
+        :data-side="placement"
+        :class="
+          cn(navigationMenuViewport({ orientation: props.orientation, side }), props.viewportClass)
+        "
+      />
+    </nav>
+  </NavigationMenuRoot>
+</template>

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

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+  import {
+    NavigationMenuContent as RekaNavigationMenuContent,
+    useForwardPropsEmits,
+    type NavigationMenuContentEmits,
+  } from 'reka-ui'
+  import { cn } from '../../lib/cn'
+  import { navigationMenuContent } from './navigation-menu.variants'
+
+  defineOptions({ name: 'HnNavigationMenuContent', inheritAttrs: false })
+  const props = withDefaults(defineProps<{ padded?: boolean; class?: string }>(), { padded: true })
+  const emit = defineEmits<NavigationMenuContentEmits>()
+  const events = useForwardPropsEmits({}, emit)
+  defineSlots<{ default(): unknown }>()
+</script>
+
+<template>
+  <RekaNavigationMenuContent
+    v-bind="{ ...$attrs, ...events }"
+    data-hn-navigation-content
+    :class="cn(navigationMenuContent({ padded: props.padded }), props.class)"
+  >
+    <slot />
+  </RekaNavigationMenuContent>
+</template>

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

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+  import { NavigationMenuItem as RekaNavigationMenuItem } from 'reka-ui'
+
+  defineOptions({ name: 'HnNavigationMenuItem' })
+  const props = defineProps<{ value?: string }>()
+  defineSlots<{ default(): unknown }>()
+</script>
+
+<template>
+  <RekaNavigationMenuItem :value="props.value">
+    <slot />
+  </RekaNavigationMenuItem>
+</template>

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,82 @@
+import { tv } from '../../lib/tv'
+
+export const navigationMenu = tv({
+  base: 'relative w-fit max-w-full',
+})
+
+export const navigationMenuList = tv({
+  base: 'm-0 flex list-none gap-1 p-0',
+  variants: {
+    orientation: {
+      horizontal: 'flex-wrap items-center',
+      vertical: 'flex-col items-stretch',
+    },
+  },
+})
+
+export const navigationMenuControl = tv({
+  base: [
+    'hn-interactive hn-state-layer hn-press-none relative isolate flex cursor-pointer items-center',
+    'text-fg gap-(--hn-control-gap) rounded-md text-start font-medium no-underline outline-none select-none [&_svg]:shrink-0',
+    'data-[state=open]:bg-inset data-active:text-accent-text data-active:bg-accent-soft',
+    'data-disabled:pointer-events-none data-disabled:opacity-50',
+  ],
+  variants: {
+    size: {
+      sm: 'min-h-(--hn-control-h-sm) px-(--hn-control-px-sm) text-xs [&_svg]:size-3.5',
+      md: 'min-h-(--hn-control-h-md) px-(--hn-control-px-md) text-sm [&_svg]:size-4',
+      lg: 'min-h-(--hn-control-h-lg) px-(--hn-control-px-lg) text-base [&_svg]:size-[1.125rem]',
+    },
+    orientation: {
+      horizontal: '',
+      vertical: 'w-full',
+    },
+  },
+  defaultVariants: { size: 'md' },
+})
+
+export const navigationMenuTrigger = tv({
+  base: 'group/hn-disclosure',
+})
+
+export const navigationMenuIcon = tv({
+  base: 'inline-flex shrink-0 items-center justify-center gap-1',
+})
+
+export const navigationMenuDisclosure = tv({
+  base: 'inline-flex shrink-0 text-muted',
+  variants: {
+    orientation: { horizontal: '', vertical: 'rtl:-scale-x-100' },
+  },
+})
+
+export const navigationMenuLink = tv({
+  base: 'py-2',
+})
+
+export const navigationMenuContent = tv({
+  base: 'hn-anim-navigation-content absolute start-0 top-0 w-80 max-w-[min(calc(100vw-2rem),var(--hn-navigation-max-width,100vw))] outline-none rtl:start-auto rtl:end-0',
+  variants: {
+    padded: { true: 'p-2', false: '' },
+  },
+  defaultVariants: { padded: true },
+})
+
+export const navigationMenuViewport = tv({
+  base: [
+    'hn-navigation-viewport bg-surface border-line absolute z-(--hn-z-overlay) overflow-hidden rounded-lg border shadow-md',
+    'h-(--reka-navigation-menu-viewport-height) w-(--reka-navigation-menu-viewport-width)',
+  ],
+  variants: {
+    orientation: {
+      horizontal:
+        'top-full mt-2 [left:clamp(var(--hn-navigation-min-x,0px),var(--reka-navigation-menu-viewport-left),calc(var(--hn-navigation-bound-end,100vw)-var(--reka-navigation-menu-viewport-width)-2px))]',
+      vertical: '[top:var(--reka-navigation-menu-viewport-top)]',
+    },
+    side: { start: '', end: '' },
+  },
+  compoundVariants: [
+    { orientation: 'vertical', side: 'end', class: 'start-full ms-2' },
+    { orientation: 'vertical', side: 'start', class: 'end-full me-2' },
+  ],
+})

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/rating/Rating.vue

@@ -13,12 +13,14 @@
     type RatingVariants,
   } from './rating.variants'
   import { starFill } from './utils/fill'
+  import { useRatingScale } from './composables/useRatingScale'
 
   defineOptions({ name: 'HnRating', inheritAttrs: false })
 
   const props = withDefaults(
     defineProps<{
       max?: number
+      stars?: number
       step?: 1 | 0.5
       clearable?: boolean
       readonly?: boolean
@@ -31,6 +33,11 @@
   )
 
   const model = defineModel<number>({ default: 0 })
+  const { count, scaled, value, toScore } = useRatingScale(
+    model,
+    () => props.max,
+    () => props.stars,
+  )
 
   const t = useUiLocale()
 
@@ -46,12 +53,12 @@
     data-hn-rating
     data-readonly
     role="img"
-    :aria-label="t.rating.label(model, props.max)"
+    :aria-label="scaled ? t.rating.score(model, props.max) : t.rating.label(model, props.max)"
     :class="cn(ratingRoot({ size: props.size }), props.class)"
   >
-    <span v-for="index in props.max" :key="index" :class="ratingItem()">
+    <span v-for="index in count" :key="index" :class="ratingItem()">
       <Star :class="ratingStar()" />
-      <span :class="ratingFill()" :style="{ width: starFill(model, index) }">
+      <span :class="ratingFill()" :style="{ width: starFill(value, index) }">
         <Star :class="ratingStar({ active: true })" />
       </span>
     </span>
@@ -66,15 +73,14 @@
     :aria-labelledby="labelledBy"
     :aria-describedby="describedBy"
     :aria-invalid="invalid || undefined"
-    :model-value="model"
-    :length="props.max"
+    v-model="value"
+    :length="count"
     :step="props.step"
     :clearable="props.clearable"
     hoverable
     :disabled="disabled"
-    :name="props.name"
+    :name="scaled ? undefined : props.name"
     :class="cn(ratingRoot({ size: props.size }), props.class)"
-    @update:model-value="model = $event"
   >
     <RatingItem
       v-for="item in items"
@@ -87,11 +93,19 @@
         v-for="step in steps"
         :key="step"
         :step="step"
-        :aria-label="t.rating.star(step)"
+        :aria-label="scaled ? t.rating.score(toScore(step), props.max) : t.rating.star(step)"
         :class="ratingStep()"
       >
         <Star :class="ratingStar()" />
       </RatingItemIndicator>
     </RatingItem>
+    <input
+      v-if="scaled && props.name"
+      type="hidden"
+      :name="props.name"
+      :value="model"
+      :disabled="disabled"
+      :form="$attrs.form as string | undefined"
+    />
   </RatingRoot>
 </template>

package/src/components/rating/composables/useRatingScale.ts

@@ -0,0 +1,24 @@
+import { computed, type Ref } from 'vue'
+
+export function useRatingScale(
+  model: Ref<number>,
+  max: () => number,
+  stars: () => number | undefined,
+) {
+  const count = computed(() => stars() ?? max())
+  const scaled = computed(() => count.value !== max())
+
+  function toScore(value: number) {
+    return scaled.value ? Number(((value / count.value) * max()).toPrecision(15)) : value
+  }
+
+  const value = computed({
+    get: () =>
+      scaled.value ? Number(((model.value / max()) * count.value).toFixed(10)) : model.value,
+    set: (value: number) => {
+      model.value = toScore(value)
+    },
+  })
+
+  return { count, scaled, value, toScore }
+}

package/src/components/sidebar/Sidebar.vue

@@ -85,7 +85,7 @@
     <ScrollArea :shadow="false" class="min-h-0 flex-1">
       <nav
         :aria-label="props.label ?? t.sidebar.navLabel"
-        :class="cn('flex flex-col gap-1 py-2', !inDrawer && 'px-2.5')"
+        :class="cn('flex flex-col gap-1', inDrawer ? 'py-2' : 'px-2.5 py-2.5')"
       >
         <slot />
       </nav>