@hina-ui/vue 1.7.3 → 1.7.4

package/src/components/carousel/composables/useCarousel.ts

@@ -0,0 +1,345 @@
+import {
+  computed,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  shallowRef,
+  watch,
+  type Ref,
+} from 'vue'
+import { usePreferredReducedMotion } from '@vueuse/core'
+import EmblaCarousel, { type EmblaCarouselType, type EmblaOptionsType } from 'embla-carousel'
+import {
+  carouselIndex as indexOf,
+  carouselInitialLayout,
+} from '../../../../../shared/src/lib/carousel'
+import { DURATION } from '../../../motion'
+import { useDirection } from '../../../lib/useDirection'
+import type { CarouselProps, CarouselControls, CarouselState } from '../types'
+
+export function useCarousel<T>(
+  props: CarouselProps<T>,
+  model: Ref<number | undefined>,
+  emit: (event: 'select' | 'ready', state: CarouselState) => void,
+) {
+  const { root: element, direction, rootDirection } = useDirection(() => props.dir)
+  const viewport = shallowRef<HTMLElement>()
+  const reduced = usePreferredReducedMotion()
+  const ready = ref(false)
+  const index = ref(indexOf(model.value))
+  const snapCount = ref(0)
+  const canPrev = ref(false)
+  const canNext = ref(false)
+  const visibleItems = ref<number[]>([])
+  const visibilityKnown = ref(false)
+  const requested = ref(false)
+  const hovering = ref(false)
+  const dragging = ref(false)
+  const onScreen = ref(false)
+  const documentVisible = ref(true)
+  let api: EmblaCarouselType | undefined
+  let mounted = false
+  let timer: ReturnType<typeof setTimeout> | undefined
+  let cleanup = () => {}
+  let pointerIntent: boolean | undefined
+
+  const options = computed<EmblaOptionsType>(() => ({
+    axis: props.orientation === 'vertical' ? 'y' : 'x',
+    direction: direction.value,
+    align: props.align ?? 'start',
+    containScroll: props.containScroll === undefined ? 'trimSnaps' : props.containScroll,
+    slidesToScroll:
+      props.slidesToScroll === 'auto'
+        ? 'auto'
+        : Number.isFinite(props.slidesToScroll)
+          ? Math.max(1, Math.trunc(props.slidesToScroll!))
+          : 1,
+    inViewThreshold: 0.01,
+    loop: props.loop,
+    watchDrag: props.draggable !== false,
+    dragFree: props.dragFree,
+    watchSlides: false,
+    duration: reduced.value === 'reduce' ? 0 : DURATION.slow * 60,
+  }))
+  const initialLayout = computed(() =>
+    !props.itemClass &&
+    (options.value.slidesToScroll === 1 || options.value.slidesToScroll === 'auto')
+      ? carouselInitialLayout(props.items.length, model.value, props.loop)
+      : undefined,
+  )
+  const initialIndex = computed(() => (ready.value ? undefined : initialLayout.value?.index))
+  const playing = computed(
+    () =>
+      requested.value &&
+      ready.value &&
+      snapCount.value > 1 &&
+      onScreen.value &&
+      documentVisible.value &&
+      !hovering.value &&
+      !dragging.value,
+  )
+  const state = computed<CarouselState>(() => ({
+    index: ready.value ? index.value : (initialLayout.value?.index ?? indexOf(model.value)),
+    snapCount: ready.value ? snapCount.value : (initialLayout.value?.snapCount ?? 0),
+    canPrev: ready.value ? canPrev.value : (initialLayout.value?.canPrev ?? false),
+    canNext: ready.value ? canNext.value : (initialLayout.value?.canNext ?? false),
+    visibleItems: visibilityKnown.value
+      ? visibleItems.value
+      : (initialLayout.value?.visibleItems ?? []),
+    ready: ready.value,
+    playing: playing.value,
+  }))
+  const controls = computed<CarouselControls>(() => ({
+    ...state.value,
+    prev,
+    next,
+    scrollTo,
+    play,
+    pause,
+  }))
+
+  function clearTimer() {
+    clearTimeout(timer)
+    timer = undefined
+  }
+  function schedule() {
+    clearTimer()
+    if (!playing.value) return
+    const delay =
+      typeof props.autoplay === 'number' && Number.isFinite(props.autoplay)
+        ? Math.max(1000, props.autoplay)
+        : 5000
+    timer = setTimeout(() => {
+      if (!playing.value || !api) return
+      if (api.canScrollNext()) api.scrollNext(reduced.value === 'reduce')
+      else pause()
+    }, delay)
+  }
+  function pause() {
+    requested.value = false
+    clearTimer()
+  }
+  function play() {
+    if (!props.autoplay || !api || snapCount.value < 2) return
+    if (!api.canScrollNext()) api.scrollTo(0, true)
+    requested.value = true
+  }
+  function rotationPointerDown() {
+    pointerIntent = requested.value
+  }
+  function toggleRotation() {
+    const stop = pointerIntent ?? requested.value
+    pointerIntent = undefined
+    if (stop) pause()
+    else play()
+  }
+  function focusIn() {
+    pause()
+  }
+  function scrollTo(value: number, instant = false) {
+    if (!api) return
+    pause()
+    api.scrollTo(indexOf(value, snapCount.value), instant || reduced.value === 'reduce')
+  }
+  function prev() {
+    if (api && canPrev.value) {
+      pause()
+      api.scrollPrev(reduced.value === 'reduce')
+    }
+  }
+  function next() {
+    if (api && canNext.value) {
+      pause()
+      api.scrollNext(reduced.value === 'reduce')
+    }
+  }
+  function visible() {
+    if (!api || !viewport.value) return
+    const bounds = viewport.value.getBoundingClientRect()
+    const vertical = props.orientation === 'vertical'
+    const nodes = api.slideNodes()
+    const items = api.slidesInView().filter(index => {
+      const rect = nodes[index]!.getBoundingClientRect()
+      return vertical
+        ? Math.min(rect.bottom, bounds.bottom) - Math.max(rect.top, bounds.top) > 1
+        : Math.min(rect.right, bounds.right) - Math.max(rect.left, bounds.left) > 1
+    })
+    if (!items.length) return
+    const active = viewport.value?.ownerDocument.activeElement
+    if (active && api.slideNodes().some((slide, i) => !items.includes(i) && slide.contains(active)))
+      viewport.value?.focus({ preventScroll: true })
+    visibleItems.value = items
+    visibilityKnown.value = true
+  }
+  function sync() {
+    if (!api || !viewport.value) return
+    const rect = viewport.value.getBoundingClientRect()
+    const measurable = (props.orientation === 'vertical' ? rect.height : rect.width) > 0
+    if (!ready.value && !measurable) return
+    const initial = !ready.value
+    index.value = api.selectedScrollSnap()
+    snapCount.value = api.scrollSnapList().length
+    canPrev.value = api.canScrollPrev()
+    canNext.value = api.canScrollNext()
+    if (model.value !== index.value) model.value = index.value
+    ready.value = true
+    visible()
+    schedule()
+    if (initial) emit('ready', state.value)
+  }
+  function selected() {
+    sync()
+    emit('select', state.value)
+  }
+  function reinitialized() {
+    visibilityKnown.value = false
+    if (!ready.value && api) api.scrollTo(indexOf(model.value, api.scrollSnapList().length), true)
+    sync()
+  }
+  function destroy() {
+    api?.destroy()
+    api = undefined
+    element.value?.removeAttribute('data-engine')
+    ready.value = false
+    snapCount.value = 0
+    canPrev.value = false
+    canNext.value = false
+    visibilityKnown.value = false
+    visibleItems.value = []
+    clearTimer()
+  }
+  function refresh() {
+    if (!mounted || !viewport.value) return
+    if (!props.items.length) {
+      destroy()
+      return
+    }
+    element.value?.setAttribute('data-engine', '')
+    if (api) api.reInit({ ...options.value, startIndex: indexOf(model.value) })
+    else {
+      api = EmblaCarousel(viewport.value, {
+        ...options.value,
+        startIndex: indexOf(model.value, initialLayout.value?.snapCount),
+      })
+      api
+        .on('select', selected)
+        .on('reInit', reinitialized)
+        .on('slidesInView', visible)
+        .on('pointerDown', () => {
+          dragging.value = true
+          pause()
+        })
+        .on('pointerUp', () => {
+          dragging.value = false
+        })
+        .on('settle', () => {
+          visible()
+          schedule()
+        })
+      sync()
+    }
+  }
+  function keydown(event: KeyboardEvent) {
+    if (
+      event.target !== viewport.value ||
+      event.altKey ||
+      event.ctrlKey ||
+      event.metaKey ||
+      !ready.value
+    )
+      return
+    const forward =
+      props.orientation === 'vertical'
+        ? 'ArrowDown'
+        : direction.value === 'rtl'
+          ? 'ArrowLeft'
+          : 'ArrowRight'
+    const backward =
+      props.orientation === 'vertical'
+        ? 'ArrowUp'
+        : direction.value === 'rtl'
+          ? 'ArrowRight'
+          : 'ArrowLeft'
+    if (![forward, backward, 'Home', 'End'].includes(event.key)) return
+    event.preventDefault()
+    if (event.key === forward) next()
+    else if (event.key === backward) prev()
+    else scrollTo(event.key === 'Home' ? 0 : snapCount.value - 1)
+  }
+  watch(model, value => {
+    if (!api || !ready.value) return
+    const target = indexOf(value, snapCount.value)
+    if (target !== api.selectedScrollSnap()) scrollTo(target)
+    else if (value !== target) model.value = target
+  })
+  watch(options, async () => {
+    await nextTick()
+    refresh()
+  })
+  watch(
+    () => props.items.map(props.getKey),
+    async (keys, before) => {
+      if (keys.length === before.length && keys.every((key, index) => key === before[index])) return
+      await nextTick()
+      refresh()
+    },
+  )
+  watch(playing, schedule)
+  watch(
+    () => props.autoplay,
+    value => {
+      requested.value = !!value && reduced.value !== 'reduce'
+      schedule()
+    },
+  )
+  watch(reduced, value => {
+    if (value === 'reduce') pause()
+  })
+  onMounted(() => {
+    mounted = true
+    const doc = viewport.value!.ownerDocument
+    const view = doc.defaultView!
+    const visibility = () => {
+      documentVisible.value = !doc.hidden
+    }
+    visibility()
+    doc.addEventListener('visibilitychange', visibility)
+    const observer =
+      typeof view.IntersectionObserver === 'function'
+        ? new view.IntersectionObserver(entries => {
+            onScreen.value = entries.some(entry => entry.isIntersecting)
+          })
+        : undefined
+    if (observer && element.value) observer.observe(element.value)
+    else onScreen.value = true
+    cleanup = () => {
+      observer?.disconnect()
+      doc.removeEventListener('visibilitychange', visibility)
+    }
+    requested.value = !!props.autoplay && reduced.value !== 'reduce'
+    refresh()
+  })
+  onBeforeUnmount(() => {
+    mounted = false
+    cleanup()
+    destroy()
+  })
+  return {
+    element,
+    viewport,
+    rootDirection,
+    ready,
+    initialIndex,
+    visibilityKnown: computed(() => visibilityKnown.value || !!initialLayout.value),
+    state,
+    controls,
+    requested,
+    hovering,
+    keydown,
+    focusIn,
+    rotationPointerDown,
+    toggleRotation,
+    refresh,
+  }
+}

package/src/components/carousel/types.ts

@@ -0,0 +1,70 @@
+import type { CarouselGap } from './carousel.variants'
+
+export interface CarouselProps<T> {
+  items: readonly T[]
+  getKey: (item: T, index: number) => string | number
+  index?: number
+  label?: string
+  dir?: 'ltr' | 'rtl'
+  orientation?: 'horizontal' | 'vertical'
+  align?: 'start' | 'center' | 'end'
+  containScroll?: false | 'trimSnaps' | 'keepSnaps'
+  slidesToScroll?: number | 'auto'
+  loop?: boolean
+  draggable?: boolean
+  dragFree?: boolean
+  autoplay?: boolean | number
+  arrows?: boolean
+  indicators?: boolean
+  gap?: CarouselGap
+  class?: string
+  viewportClass?: string
+  itemClass?: string | ((item: T, index: number) => string | undefined)
+}
+
+export interface CarouselItemSlot<T> {
+  item: T
+  index: number
+  isVisible: boolean
+  ready: boolean
+}
+
+export interface CarouselState {
+  index: number
+  snapCount: number
+  canPrev: boolean
+  canNext: boolean
+  visibleItems: readonly number[]
+  ready: boolean
+  playing: boolean
+}
+
+export interface CarouselControls extends CarouselState {
+  prev: () => void
+  next: () => void
+  scrollTo: (index: number, instant?: boolean) => void
+  play: () => void
+  pause: () => void
+}
+
+export interface CarouselIndicatorsSlot extends CarouselControls {
+  viewportId: string
+}
+
+export interface CarouselIndicatorSlot {
+  index: number
+  active: boolean
+  snapCount: number
+}
+
+export interface CarouselExpose {
+  element: HTMLElement | undefined
+  viewport: HTMLElement | undefined
+  state: CarouselState
+  prev: () => void
+  next: () => void
+  scrollTo: (index: number, instant?: boolean) => void
+  play: () => void
+  pause: () => void
+  refresh: () => void
+}

package/src/components/checkbox/checkbox.variants.ts

@@ -1,101 +1 @@
-import { tv, type VariantProps } from '../../lib/tv'
-
-export const checkbox = tv({
-  base: [
-    'text-fg grid w-fit max-w-full cursor-pointer items-center gap-x-[var(--hn-field-gap)] select-none',
-    'data-disabled:cursor-not-allowed data-disabled:opacity-50',
-  ],
-  variants: {
-    controlPlacement: {
-      start: 'grid-cols-[auto_minmax(0,1fr)]',
-      end: 'grid-cols-[minmax(0,1fr)_auto]',
-    },
-    block: { true: 'w-full' },
-    bare: { true: 'gap-x-0' },
-    size: {
-      sm: 'text-sm',
-      md: 'text-base',
-      lg: 'text-md',
-    },
-  },
-  defaultVariants: {
-    size: 'md',
-    controlPlacement: 'start',
-    block: false,
-  },
-})
-
-export const checkboxControl = tv({
-  base: 'row-start-1',
-  variants: {
-    controlPlacement: {
-      start: 'col-start-1 justify-self-start',
-      end: 'col-start-2 justify-self-end',
-    },
-  },
-  defaultVariants: { controlPlacement: 'start' },
-})
-
-export const checkboxBox = tv({
-  base: [
-    'hn-focus-ring hn-state-layer hn-transition-base relative grid shrink-0 cursor-pointer place-items-center',
-    'size-[var(--hn-checkbox-size)] border',
-    'border-line bg-surface shadow-sm disabled:cursor-not-allowed',
-    '[--hn-state-selected-color:var(--hn-accent-on)] [--hn-state-selected-opacity:0]',
-    'data-[state=checked]:border-accent data-[state=checked]:bg-accent data-[state=checked]:text-surface',
-    'data-[state=indeterminate]:border-accent data-[state=indeterminate]:bg-accent data-[state=indeterminate]:text-surface',
-    'data-invalid:border-danger data-invalid:focus-visible:outline-danger',
-    '[&_svg]:col-start-1 [&_svg]:row-start-1 [&_svg]:size-[var(--hn-checkbox-icon)] [&_svg]:stroke-[3]',
-  ],
-  variants: {
-    shape: {
-      square: 'rounded-xs',
-      round: 'rounded-full',
-    },
-    size: {
-      sm: '[--hn-checkbox-icon:0.625rem] [--hn-checkbox-size:0.875rem]',
-      md: '[--hn-checkbox-icon:0.75rem] [--hn-checkbox-size:1rem]',
-      lg: '[--hn-checkbox-icon:0.875rem] [--hn-checkbox-size:1.125rem]',
-    },
-  },
-  defaultVariants: {
-    shape: 'square',
-    size: 'md',
-  },
-})
-
-export const checkboxTitle = tv({
-  base: 'row-start-1 flex min-h-[1lh] min-w-0 items-center',
-  variants: {
-    controlPlacement: {
-      start: 'col-start-2',
-      end: 'col-start-1',
-    },
-  },
-  defaultVariants: { controlPlacement: 'start' },
-})
-
-export const checkboxTitleText = tv({
-  base: 'block [text-box:trim-both_cap_alphabetic]',
-})
-
-export const checkboxDescription = tv({
-  base: 'text-muted row-start-2 block',
-  variants: {
-    controlPlacement: {
-      start: 'col-start-2',
-      end: 'col-start-1',
-    },
-    size: {
-      sm: 'text-xs',
-      md: 'text-sm',
-      lg: 'text-base',
-    },
-  },
-  defaultVariants: {
-    size: 'md',
-    controlPlacement: 'start',
-  },
-})
-
-export type CheckboxVariants = VariantProps<typeof checkbox>
+export * from '../../../../shared/src/variants/checkbox'

package/src/components/checkbox-group/checkbox-group.variants.ts

@@ -1,25 +1 @@
-import { tv, type VariantProps } from '../../lib/tv'
-
-export const checkboxGroup = tv({
-  base: 'flex min-w-0',
-  variants: {
-    block: { true: 'w-full' },
-    orientation: {
-      vertical: 'flex-col gap-2',
-      horizontal: 'flex-row flex-wrap gap-x-[var(--hn-inline-gap)] gap-y-2',
-    },
-  },
-  defaultVariants: {
-    orientation: 'vertical',
-  },
-})
-
-export const checkboxGroupItem = tv({
-  variants: {
-    orientation: { vertical: '', horizontal: '' },
-    block: { true: '' },
-  },
-  compoundVariants: [{ orientation: 'horizontal', block: true, class: 'flex-1' }],
-})
-
-export type CheckboxGroupVariants = VariantProps<typeof checkboxGroup>
+export * from '../../../../shared/src/variants/checkbox-group'

package/src/components/chip/chip.variants.ts

@@ -1,67 +1 @@
-import { tv, type VariantProps } from '../../lib/tv'
-
-export const chip = tv({
-  base: [
-    'relative inline-flex shrink-0 items-center rounded-full border border-transparent',
-    'font-medium whitespace-nowrap select-none',
-  ],
-  variants: {
-    variant: {
-      soft: '',
-      outline: 'border-line',
-    },
-    tone: {
-      neutral: '',
-      accent: '',
-    },
-    size: {
-      sm: 'h-[calc(var(--hn-control-h-sm)-0.25rem)] px-2 text-xs [&_svg]:size-3',
-      md: 'h-[var(--hn-control-h-sm)] px-2.5 text-sm [&_svg]:size-3.5',
-    },
-    interactive: {
-      true: 'hn-interactive hn-state-layer',
-    },
-    selected: {
-      true: '',
-    },
-    disabled: {
-      true: 'pointer-events-none opacity-50',
-    },
-  },
-  compoundVariants: [
-    { variant: 'soft', tone: 'neutral', class: 'bg-subtle text-fg' },
-    { variant: 'soft', tone: 'accent', class: 'bg-accent-soft text-accent-text' },
-    { variant: 'outline', tone: 'neutral', class: 'text-fg' },
-    { variant: 'outline', tone: 'accent', class: 'text-accent-text' },
-    { selected: true, class: 'text-accent-text' },
-  ],
-  defaultVariants: {
-    variant: 'soft',
-    tone: 'neutral',
-    size: 'md',
-  },
-})
-
-export const chipIcon = tv({
-  base: 'relative inline-flex shrink-0 items-center justify-center',
-  variants: {
-    size: {
-      sm: 'me-1 size-3',
-      md: 'me-1.5 size-3.5',
-    },
-  },
-  defaultVariants: { size: 'md' },
-})
-
-export const chipRemove = tv({
-  base: 'hn-press-none disabled:opacity-100',
-  variants: {
-    size: {
-      sm: 'ms-1 -me-1 size-4 [&_svg]:size-3',
-      md: 'ms-1 -me-1.5 [&_svg]:size-3.5',
-    },
-  },
-  defaultVariants: { size: 'md' },
-})
-
-export type ChipVariants = VariantProps<typeof chip>
+export * from '../../../../shared/src/variants/chip'

package/src/components/code-block/code-block.variants.ts

@@ -1,21 +1 @@
-import { tv } from '../../lib/tv'
-
-export const codeBlock = tv({
-  base: 'relative flex min-h-0 min-w-0 flex-col',
-})
-
-export const codeBlockArea = tv({
-  base: 'hn-pre min-h-0 grow p-0',
-})
-
-export const codeBlockContent = tv({
-  base: 'hn-pre-content m-0 w-max min-w-full',
-})
-
-export const codeBlockActions = tv({
-  base: 'absolute top-2 end-2 flex items-center gap-2',
-})
-
-export const codeBlockLabel = tv({
-  base: 'text-faint font-mono text-xs select-none',
-})
+export * from '../../../../shared/src/variants/code-block'

package/src/components/collapsible/CollapsibleContent.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
   import { CollapsibleContent as RekaCollapsibleContent } from 'reka-ui'
   import { cn } from '../../lib/cn'
+  import { rekaCollapsibleStyle } from '../../lib/reka/styles'
   import { useCollapseGap } from '../../lib/collapse'
 
   defineOptions({ name: 'HnCollapsibleContent' })
@@ -13,9 +14,8 @@
 <template>
   <RekaCollapsibleContent
     ref="content"
-    :class="
-      cn('hn-anim-collapse [--hn-collapse-h:var(--reka-collapsible-content-height)]', props.class)
-    "
+    :class="cn('hn-anim-collapse', props.class)"
+    :style="rekaCollapsibleStyle"
   >
     <slot />
   </RekaCollapsibleContent>

package/src/components/combobox/Combobox.vue

@@ -2,6 +2,7 @@
   import { computed } from 'vue'
   import { ComboboxAnchor, ComboboxInput, ComboboxRoot, ComboboxTrigger } from 'reka-ui'
   import { cn } from '../../lib/cn'
+  import type { VirtualizeOptions } from '../../lib/virtual/types'
   import { useUiLocale } from '../../locale'
   import { X } from '@lucide/vue'
   import InputAction from '../input/InputAction.vue'
@@ -27,6 +28,7 @@
 
   const props = defineProps<{
     options: SelectItems<T>
+    virtualize?: VirtualizeOptions
     selectedOption?: T | null
     placeholder?: string
     ignoreFilter?: boolean
@@ -63,7 +65,7 @@
     () => !!props.clearable && model.value != null && model.value !== '' && !disabled.value,
   )
 
-  const { keyboard, input, displayValue, clear, onInput, onHostClick } = useCombobox({
+  const { keyboard, input, inputValue, displayValue, clear, onInput, onHostClick } = useCombobox({
     options: () => props.options,
     selectedOption: () => props.selectedOption,
     model,
@@ -100,7 +102,7 @@
         <ComboboxInput
           ref="input"
           v-bind="$attrs"
-          v-model="search"
+          v-model="inputValue"
           :id="fieldId"
           :aria-describedby="describedBy"
           :display-value="displayValue"
@@ -138,7 +140,7 @@
         </ComboboxTrigger>
       </div>
     </ComboboxAnchor>
-    <ComboboxList :options="props.options" :keyboard="keyboard">
+    <ComboboxList :options="props.options" :keyboard="keyboard" :virtualize="props.virtualize">
       <template #option="slotProps">
         <slot name="option" v-bind="slotProps" />
       </template>