@hina-ui/vue 1.0.0

package/src/components/highlight/Highlight.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+  import { computed } from 'vue'
+  import { Motion } from 'motion-v'
+  import { cn } from '../../lib/cn'
+  import { TRANSITION, prefersReducedMotion } from '../../motion'
+
+  defineOptions({ name: 'HnHighlight' })
+
+  const props = withDefaults(
+    defineProps<{
+      id?: string
+      as?: 'div' | 'li'
+      class?: string
+    }>(),
+    { id: undefined, as: 'div' },
+  )
+
+  const transition = computed(() => (prefersReducedMotion() ? { duration: 0 } : TRANSITION.layout))
+</script>
+
+<template>
+  <Motion
+    :as="props.as"
+    layout
+    :layout-id="props.id"
+    aria-hidden="true"
+    data-hn-highlight
+    :transition="transition"
+    :class="cn('pointer-events-none', props.class)"
+  />
+</template>

package/src/components/hover-card/HoverCard.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+  import { HoverCardContent, HoverCardPortal, HoverCardRoot, HoverCardTrigger } from 'reka-ui'
+  import { cn } from '../../lib/cn'
+  import Card from '../card/Card.vue'
+
+  defineOptions({ name: 'HnHoverCard' })
+
+  const props = withDefaults(
+    defineProps<{
+      side?: 'top' | 'right' | 'bottom' | 'left'
+      align?: 'start' | 'center' | 'end'
+      sideOffset?: number
+      openDelay?: number
+      closeDelay?: number
+      padded?: boolean
+      class?: string
+    }>(),
+    {
+      side: 'bottom',
+      align: 'center',
+      sideOffset: 8,
+      openDelay: 300,
+      closeDelay: 150,
+      padded: true,
+    },
+  )
+
+  const open = defineModel<boolean>('open')
+</script>
+
+<template>
+  <HoverCardRoot v-model:open="open" :open-delay="props.openDelay" :close-delay="props.closeDelay">
+    <HoverCardTrigger as-child>
+      <slot />
+    </HoverCardTrigger>
+    <HoverCardPortal>
+      <HoverCardContent
+        as-child
+        :side="props.side"
+        :align="props.align"
+        :side-offset="props.sideOffset"
+      >
+        <Card
+          data-hn-hover-card
+          :padded="props.padded"
+          :class="cn('hn-anim-pop z-(--hn-z-overlay) max-w-sm shadow-md outline-none', props.class)"
+        >
+          <slot name="content" />
+        </Card>
+      </HoverCardContent>
+    </HoverCardPortal>
+  </HoverCardRoot>
+</template>

package/src/components/icon-button/IconButton.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+  import { injectTooltipProviderContext, type PrimitiveProps } from 'reka-ui'
+  import Button from '../button/Button.vue'
+  import Tooltip from '../tooltip/Tooltip.vue'
+  import { Passthrough } from '../../lib/passthrough'
+  import type { ButtonVariants } from '../button/button.variants'
+
+  defineOptions({ name: 'HnIconButton', inheritAttrs: false })
+
+  const props = withDefaults(
+    defineProps<
+      PrimitiveProps & {
+        label: string
+        tooltip?: boolean
+        side?: 'top' | 'right' | 'bottom' | 'left'
+        variant?: ButtonVariants['variant']
+        tone?: ButtonVariants['tone']
+        size?: ButtonVariants['size']
+        type?: 'button' | 'submit' | 'reset'
+        pill?: boolean
+        loading?: boolean
+        disabled?: boolean
+        class?: string
+      }
+    >(),
+    {
+      as: 'button',
+      tooltip: true,
+      side: 'top',
+      variant: 'ghost',
+      tone: 'neutral',
+      type: 'button',
+    },
+  )
+
+  const provider = injectTooltipProviderContext(null)
+  const Wrapper = provider ? Tooltip : Passthrough
+</script>
+
+<template>
+  <Wrapper :disabled="!props.tooltip" :content="props.label" :side="props.side">
+    <Button
+      v-bind="$attrs"
+      icon-only
+      :as="props.as"
+      :as-child="props.asChild"
+      :variant="props.variant"
+      :tone="props.tone"
+      :size="props.size"
+      :type="props.type"
+      :pill="props.pill"
+      :loading="props.loading"
+      :disabled="props.disabled"
+      :aria-label="props.label"
+      :class="props.class"
+    >
+      <slot />
+    </Button>
+  </Wrapper>
+</template>

package/src/components/image/Image.vue

@@ -0,0 +1,138 @@
+<script setup lang="ts">
+  import { computed, onBeforeUnmount, shallowRef, useId, watch } from 'vue'
+  import { Primitive } from 'reka-ui'
+  import { cn } from '../../lib/cn'
+  import { useRequiredLabel } from '../../lib/a11y'
+  import Skeleton from '../skeleton/Skeleton.vue'
+  import Lightbox from '../lightbox/Lightbox.vue'
+  import type { LightboxItem } from '../lightbox/types'
+  import { image, type ImageVariants } from './image.variants'
+  import { useImage } from './composables/useImage'
+  import { useImageGroup } from './context'
+  import { useImageResolver } from './resolver'
+
+  defineOptions({ name: 'HnImage', inheritAttrs: false })
+
+  const props = withDefaults(
+    defineProps<{
+      src?: string
+      alt?: string
+      fallback?: string
+      fit?: ImageVariants['fit']
+      ratio?: number
+      lazy?: boolean
+      rootMargin?: string
+      skeleton?: boolean
+      eager?: boolean
+      preview?: boolean | string
+      draggable?: boolean
+      class?: string
+      imageClass?: string
+    }>(),
+    {
+      alt: '',
+      fit: 'cover',
+      lazy: true,
+      rootMargin: '200px',
+      skeleton: true,
+      eager: false,
+      preview: false,
+    },
+  )
+
+  const emit = defineEmits<{
+    load: [size: { width: number; height: number }]
+    error: []
+  }>()
+
+  const { rootEl, imageEl, skeletonEl, src, revealed, failed, showImage, showSkeleton } = useImage(
+    props,
+    emit,
+  )
+
+  useRequiredLabel('Image', () => !props.preview || !!props.alt, '替代文本')
+
+  const resolve = useImageResolver()
+  const previewOpen = shallowRef(false)
+  const previewId = useId()
+  const previewItem = computed<LightboxItem>(() => ({
+    id: previewId,
+    src: src.value ?? '',
+    preview: resolve(
+      typeof props.preview === 'string' ? props.preview : (props.src ?? ''),
+      'preview',
+    ),
+    alt: props.alt,
+    fit: props.fit,
+    source: () => imageEl.value,
+  }))
+
+  const group = useImageGroup()
+
+  if (group) {
+    watch(
+      () => !!props.preview,
+      on => {
+        if (on) group.register(previewId, () => previewItem.value)
+        else group.unregister(previewId)
+      },
+      { immediate: true },
+    )
+    onBeforeUnmount(() => group.unregister(previewId))
+  }
+
+  function openPreview() {
+    if (!props.preview || !showImage.value || !src.value) return
+    if (group) group.open(previewId)
+    else previewOpen.value = true
+  }
+</script>
+
+<template>
+  <Primitive
+    ref="rootEl"
+    :as="props.preview ? 'button' : 'span'"
+    :type="props.preview ? 'button' : undefined"
+    :class="
+      cn(
+        'relative block overflow-hidden',
+        props.preview && 'hn-focus-ring cursor-zoom-in',
+        props.class,
+      )
+    "
+    :style="props.ratio ? { aspectRatio: String(props.ratio) } : undefined"
+    @click="openPreview"
+  >
+    <img
+      v-if="showImage"
+      ref="imageEl"
+      v-bind="$attrs"
+      :src="src"
+      :alt="props.alt"
+      :decoding="props.eager ? 'sync' : 'async'"
+      :fetchpriority="props.eager ? 'high' : undefined"
+      :draggable="props.draggable"
+      :class="
+        cn(
+          image({ fit: props.fit }),
+          props.lazy ? !revealed && 'opacity-0' : 'relative z-10',
+          props.imageClass,
+        )
+      "
+    />
+    <slot v-else-if="failed" name="error" />
+    <slot v-else name="empty" />
+
+    <span
+      v-if="showSkeleton"
+      ref="skeletonEl"
+      aria-hidden="true"
+      class="pointer-events-none absolute inset-0"
+    >
+      <slot name="skeleton">
+        <Skeleton class="size-full rounded-none" />
+      </slot>
+    </span>
+    <Lightbox v-if="props.preview && !group" v-model:open="previewOpen" :items="[previewItem]" />
+  </Primitive>
+</template>

package/src/components/image/ImageGroup.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+  import { computed, reactive, shallowRef } from 'vue'
+  import Lightbox from '../lightbox/Lightbox.vue'
+  import type { LightboxItem } from '../lightbox/types'
+  import { provideImageGroup } from './context'
+
+  defineOptions({ name: 'HnImageGroup' })
+
+  const props = defineProps<{ loop?: boolean }>()
+
+  const registry = reactive(new Map<string, () => LightboxItem>())
+  const open = shallowRef(false)
+  const index = shallowRef(0)
+
+  function byDom(a: LightboxItem, b: LightboxItem): number {
+    const first = a.source?.()
+    const second = b.source?.()
+    if (!first || !second || first === second) return 0
+    return first.compareDocumentPosition(second) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1
+  }
+
+  const items = computed(() => [...registry.values()].map(read => read()).sort(byDom))
+
+  provideImageGroup({
+    register: (id, item) => {
+      registry.set(id, item)
+    },
+    unregister: id => {
+      registry.delete(id)
+    },
+    open: id => {
+      const at = items.value.findIndex(item => item.id === id)
+      if (at < 0) return
+      index.value = at
+      open.value = true
+    },
+  })
+</script>
+
+<template>
+  <slot />
+  <Lightbox v-model:open="open" v-model:index="index" :items="items" :loop="props.loop" />
+</template>

package/src/components/image/composables/useImage.ts

@@ -0,0 +1,153 @@
+import { computed, nextTick, onMounted, shallowRef, watch, type ComponentPublicInstance } from 'vue'
+import { useIntersectionObserver } from '@vueuse/core'
+import { useImageResolver } from '../resolver'
+
+function ready(img: HTMLImageElement): Promise<void> {
+  if (typeof img.decode === 'function') return img.decode()
+  if (img.complete) {
+    return img.naturalWidth > 0 ? Promise.resolve() : Promise.reject(new Error('image failed'))
+  }
+  return new Promise((res, rej) => {
+    img.addEventListener('load', () => res(), { once: true })
+    img.addEventListener('error', () => rej(new Error('image failed')), { once: true })
+  })
+}
+
+export function useImage(
+  props: {
+    src?: string
+    fallback?: string
+    lazy: boolean
+    rootMargin: string
+    skeleton: boolean
+  },
+  emit: {
+    (e: 'load', size: { width: number; height: number }): void
+    (e: 'error'): void
+  },
+) {
+  const resolve = useImageResolver()
+
+  const rootEl = shallowRef<HTMLElement | ComponentPublicInstance>()
+  const imageEl = shallowRef<HTMLImageElement>()
+  const skeletonEl = shallowRef<HTMLElement>()
+  const entered = shallowRef(!props.lazy)
+  const usingFallback = shallowRef(false)
+  const revealed = shallowRef(false)
+  const skeletonMounted = shallowRef(true)
+  const failed = shallowRef(false)
+
+  let fade: Animation | null = null
+
+  const { isSupported, stop } = useIntersectionObserver(
+    rootEl,
+    entries => {
+      if (!entries.some(entry => entry.isIntersecting)) return
+      entered.value = true
+      stop()
+    },
+    { rootMargin: props.rootMargin, immediate: props.lazy },
+  )
+
+  const primary = computed(() => (props.src ? resolve(props.src, 'image') : ''))
+
+  const fallback = computed(() => (props.fallback ? resolve(props.fallback, 'image') : ''))
+
+  const resolved = computed(() => (usingFallback.value ? fallback.value : primary.value))
+
+  const src = computed(() => (entered.value ? resolved.value || undefined : undefined))
+  const showImage = computed(() => Boolean(resolved.value) && !failed.value)
+  const showSkeleton = computed(() => props.skeleton && showImage.value && skeletonMounted.value)
+
+  watch(primary, () => {
+    usingFallback.value = false
+  })
+
+  watch(resolved, () => {
+    fade?.cancel()
+    fade = null
+    revealed.value = false
+    skeletonMounted.value = true
+    failed.value = false
+  })
+
+  function play(el: HTMLElement, frames: Keyframe[]): Animation | null {
+    const style = getComputedStyle(el)
+    try {
+      return el.animate(frames, {
+        duration: Number.parseFloat(style.getPropertyValue('--hn-duration-base')) || 0,
+        easing: style.getPropertyValue('--hn-ease-enter').trim() || 'linear',
+        fill: 'forwards',
+      })
+    } catch {
+      return null
+    }
+  }
+
+  function afterPaint() {
+    return new Promise<void>(res => requestAnimationFrame(() => requestAnimationFrame(() => res())))
+  }
+
+  async function reveal() {
+    revealed.value = true
+
+    if (!props.lazy) {
+      skeletonMounted.value = false
+      return
+    }
+
+    await nextTick()
+    await afterPaint()
+
+    const layer = skeletonEl.value
+    const anim = layer && play(layer, [{ opacity: 1 }, { opacity: 0 }])
+    if (!anim) {
+      skeletonMounted.value = false
+      return
+    }
+
+    fade = anim
+    anim.finished.then(
+      () => {
+        if (fade === anim) skeletonMounted.value = false
+      },
+      () => {},
+    )
+  }
+
+  function fail() {
+    if (!usingFallback.value && fallback.value) {
+      usingFallback.value = true
+      return
+    }
+    failed.value = true
+    emit('error')
+  }
+
+  watch(
+    [imageEl, src],
+    async () => {
+      const img = imageEl.value
+      if (!img || !src.value) return
+
+      const at = src.value
+      try {
+        await ready(img)
+      } catch {
+        if (src.value === at) fail()
+        return
+      }
+      if (src.value !== at) return
+
+      emit('load', { width: img.naturalWidth, height: img.naturalHeight })
+      void reveal()
+    },
+    { flush: 'post' },
+  )
+
+  onMounted(() => {
+    if (!isSupported.value) entered.value = true
+  })
+
+  return { rootEl, imageEl, skeletonEl, src, revealed, failed, showImage, showSkeleton }
+}

package/src/components/image/context.ts

@@ -0,0 +1,18 @@
+import { inject, provide, type InjectionKey } from 'vue'
+import type { LightboxItem } from '../lightbox/types'
+
+export interface ImageGroupContext {
+  register: (id: string, item: () => LightboxItem) => void
+  unregister: (id: string) => void
+  open: (id: string) => void
+}
+
+const KEY: InjectionKey<ImageGroupContext> = Symbol('hn-image-group')
+
+export function provideImageGroup(context: ImageGroupContext) {
+  provide(KEY, context)
+}
+
+export function useImageGroup(): ImageGroupContext | null {
+  return inject(KEY, null)
+}

package/src/components/image/image.variants.ts

@@ -0,0 +1,17 @@
+import { tv, type VariantProps } from '../../lib/tv'
+
+export const image = tv({
+  base: 'block size-full',
+  variants: {
+    fit: {
+      cover: 'object-cover',
+      contain: 'object-contain',
+      fill: 'object-fill',
+      none: 'object-none',
+      'scale-down': 'object-scale-down',
+    },
+  },
+  defaultVariants: { fit: 'cover' },
+})
+
+export type ImageVariants = VariantProps<typeof image>

package/src/components/image/resolver.ts

@@ -0,0 +1,15 @@
+import { inject, provide, type InjectionKey } from 'vue'
+
+export type ImageVariant = 'image' | 'preview'
+
+export type ImageResolver = (src: string, variant: ImageVariant) => string
+
+const KEY: InjectionKey<ImageResolver> = Symbol('hn-image-resolver')
+
+export function provideImageResolver(resolver: ImageResolver) {
+  provide(KEY, resolver)
+}
+
+export function useImageResolver(): ImageResolver {
+  return inject(KEY, (src: string) => src)
+}

package/src/components/indicator/Indicator.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+  import { Primitive, type PrimitiveProps } from 'reka-ui'
+  import VisuallyHidden from '../visually-hidden/VisuallyHidden.vue'
+  import { cn } from '../../lib/cn'
+  import { indicator, type IndicatorVariants } from './indicator.variants'
+
+  defineOptions({ name: 'HnIndicator' })
+
+  const props = withDefaults(
+    defineProps<
+      PrimitiveProps & {
+        tone?: IndicatorVariants['tone']
+        size?: IndicatorVariants['size']
+        pulse?: boolean
+        label?: string
+        class?: string
+      }
+    >(),
+    { as: 'span' },
+  )
+</script>
+
+<template>
+  <Primitive
+    :as="props.as"
+    :as-child="props.asChild"
+    :aria-hidden="props.label ? undefined : 'true'"
+    :class="cn(indicator({ tone: props.tone, size: props.size }), props.class)"
+  >
+    <span
+      v-if="props.pulse"
+      aria-hidden="true"
+      class="hn-ping absolute inset-0 rounded-full bg-inherit"
+    />
+    <VisuallyHidden v-if="props.label">{{ props.label }}</VisuallyHidden>
+  </Primitive>
+</template>

package/src/components/indicator/indicator.variants.ts

@@ -0,0 +1,26 @@
+import { tv, type VariantProps } from '../../lib/tv'
+
+export const indicator = tv({
+  base: 'relative inline-flex shrink-0 rounded-full align-middle',
+  variants: {
+    tone: {
+      accent: 'bg-accent',
+      neutral: 'bg-neutral-solid',
+      success: 'bg-success',
+      warning: 'bg-warning',
+      danger: 'bg-danger',
+      info: 'bg-info',
+    },
+    size: {
+      sm: 'size-1.5',
+      md: 'size-2',
+      lg: 'size-2.5',
+    },
+  },
+  defaultVariants: {
+    tone: 'neutral',
+    size: 'md',
+  },
+})
+
+export type IndicatorVariants = VariantProps<typeof indicator>

package/src/components/inline/Inline.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+  import { cn } from '../../lib/cn'
+  import { inline, type InlineVariants } from './inline.variants'
+
+  defineOptions({ name: 'HnInline' })
+
+  const props = withDefaults(
+    defineProps<{
+      as?: string
+      gap?: InlineVariants['gap']
+      align?: InlineVariants['align']
+      justify?: InlineVariants['justify']
+      wrap?: boolean
+      class?: string
+    }>(),
+    { as: 'div', wrap: true },
+  )
+</script>
+
+<template>
+  <component :is="props.as" :class="cn(inline({ gap, align, justify, wrap }), props.class)">
+    <slot />
+  </component>
+</template>

package/src/components/inline/inline.variants.ts

@@ -0,0 +1,41 @@
+import { tv, type VariantProps } from '../../lib/tv'
+
+export const inline = tv({
+  base: 'flex',
+  variants: {
+    gap: {
+      none: 'gap-0',
+      xs: 'gap-1',
+      sm: 'gap-2',
+      md: 'gap-[var(--hn-inline-gap)]',
+      lg: 'gap-6',
+      xl: 'gap-8',
+    },
+    align: {
+      start: 'items-start',
+      center: 'items-center',
+      end: 'items-end',
+      baseline: 'items-baseline',
+      stretch: 'items-stretch',
+    },
+    justify: {
+      start: 'justify-start',
+      center: 'justify-center',
+      end: 'justify-end',
+      between: 'justify-between',
+      around: 'justify-around',
+      evenly: 'justify-evenly',
+    },
+    wrap: {
+      true: 'flex-wrap',
+      false: 'flex-nowrap',
+    },
+  },
+  defaultVariants: {
+    gap: 'md',
+    align: 'center',
+    wrap: true,
+  },
+})
+
+export type InlineVariants = VariantProps<typeof inline>