@hina-ui/vue 1.7.3 → 1.7.4

package/src/components/masonry/Masonry.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts" generic="T">
+  import { computed } from 'vue'
+  import { cn } from '../../lib/cn'
+  import { useUiLocale } from '../../locale'
+  import Spinner from '../spinner/Spinner.vue'
+  import {
+    masonry,
+    masonryList,
+    masonryItem,
+    masonryStatus,
+    masonryMeasure,
+  } from './masonry.variants'
+  import { useMasonry } from './composables/useMasonry'
+  import type { MasonryProps, MasonrySlotProps, MasonryLayout } from './types'
+
+  defineOptions({ name: 'HnMasonry' })
+  const props = withDefaults(defineProps<MasonryProps<T>>(), { minColumnWidth: 240, gap: 'md' })
+  const emit = defineEmits<{ layout: [value: MasonryLayout] }>()
+  const slots = defineSlots<{
+    default?(props: MasonrySlotProps<T>): unknown
+    empty?(): unknown
+    loading?(): unknown
+    pending?(): unknown
+  }>()
+  const t = useUiLocale()
+  const { element, list, spacing, listStyle, fixedColumns, entries, itemRef, measure, hasLayout } =
+    useMasonry(props, value => emit('layout', value))
+  const pending = computed(
+    () => !!slots.pending && !hasLayout.value && (props.items.length > 0 || props.loading),
+  )
+  defineExpose({ element, measure })
+</script>
+
+<template>
+  <div
+    ref="element"
+    data-hn-masonry
+    :dir="props.dir"
+    :class="cn(masonry({ gap: props.gap }), props.class)"
+    :aria-busy="pending || props.loading"
+  >
+    <span ref="spacing" aria-hidden="true" :class="masonryMeasure()" />
+    <div class="relative min-w-0">
+      <ul
+        ref="list"
+        role="list"
+        :aria-label="props.label"
+        :aria-busy="pending || props.loading"
+        :aria-hidden="pending ? true : undefined"
+        :inert="pending ? true : undefined"
+        :data-pending="pending ? '' : undefined"
+        :class="masonryList()"
+        :style="listStyle"
+        :data-fixed-columns="fixedColumns ? '' : undefined"
+      >
+        <li
+          v-for="entry in entries"
+          :key="entry.key"
+          :ref="itemRef(entry.key)"
+          :class="
+            cn(
+              masonryItem(),
+              typeof props.itemClass === 'function'
+                ? props.itemClass(entry.item, entry.index)
+                : props.itemClass,
+            )
+          "
+        >
+          <slot :item="entry.item" :index="entry.index" />
+        </li>
+      </ul>
+      <div v-if="pending" data-hn-masonry-pending role="status" :aria-label="t.common.loading">
+        <slot name="pending" />
+      </div>
+    </div>
+    <div v-if="props.loading && !pending" :class="masonryStatus()" role="status">
+      <slot name="loading">
+        <Spinner size="sm" aria-hidden="true" />
+        <span>{{ t.common.loading }}</span>
+      </slot>
+    </div>
+    <div v-else-if="!props.items.length && !pending" :class="masonryStatus()">
+      <slot name="empty">{{ props.emptyText ?? t.masonry.empty }}</slot>
+    </div>
+  </div>
+</template>

package/src/components/masonry/composables/useMasonry.ts

@@ -0,0 +1,200 @@
+import {
+  computed,
+  onBeforeUnmount,
+  onBeforeUpdate,
+  onMounted,
+  onUpdated,
+  shallowRef,
+  watch,
+} from 'vue'
+import { layoutMasonry, masonryColumns } from '../../../../../shared/src/lib/masonry'
+import type { MasonryKey, MasonryLayout, MasonryProps } from '../types'
+
+export function useMasonry<T>(props: MasonryProps<T>, onLayout: (layout: MasonryLayout) => void) {
+  const element = shallowRef<HTMLElement>()
+  const list = shallowRef<HTMLElement>()
+  const spacing = shallowRef<HTMLElement>()
+  const hasLayout = shallowRef(false)
+  const entries = computed(() =>
+    props.items.map((item, index) => ({ item, key: props.getKey(item, index), index })),
+  )
+  const minWidth = computed(() =>
+    Number.isFinite(props.minColumnWidth) && props.minColumnWidth! > 0
+      ? props.minColumnWidth!
+      : 240,
+  )
+  const fixedColumns = computed(() =>
+    props.columns !== undefined && Number.isFinite(props.columns)
+      ? Math.max(1, Math.floor(props.columns))
+      : undefined,
+  )
+  const listStyle = computed(() => ({
+    '--hn-masonry-min-width': `${minWidth.value}px`,
+    '--hn-masonry-fixed-columns': fixedColumns.value,
+  }))
+  const nodes = new Map<MasonryKey, HTMLElement>()
+  const keys = new WeakMap<Element, MasonryKey>()
+  const heights = new Map<MasonryKey, number>()
+  const refs = new Map<MasonryKey, (node: unknown) => void>()
+  let observer: ResizeObserver | undefined
+  let frame = 0
+  let alive = false
+  let remeasure = true
+  let columnWidth = -1
+  let lastWidth = -1
+  let lastLayout: MasonryLayout | undefined
+  let focused: HTMLElement | undefined
+
+  onBeforeUpdate(() => {
+    const active = element.value?.ownerDocument.activeElement
+    focused = active instanceof HTMLElement && element.value?.contains(active) ? active : undefined
+  })
+  onUpdated(() => {
+    if (
+      focused?.isConnected &&
+      element.value?.contains(focused) &&
+      focused.ownerDocument.activeElement === focused.ownerDocument.body
+    ) {
+      focused.focus({ preventScroll: true })
+    }
+    focused = undefined
+  })
+
+  function setStyle(node: HTMLElement, name: string, value: string) {
+    if (node.style.getPropertyValue(name) !== value) node.style.setProperty(name, value)
+  }
+  function schedule() {
+    if (alive && !frame) frame = requestAnimationFrame(update)
+  }
+  function measure() {
+    remeasure = true
+    schedule()
+  }
+  function itemRef(key: MasonryKey) {
+    if (!refs.has(key))
+      refs.set(key, node => {
+        const previous = nodes.get(key)
+        if (previous === node) return
+        if (previous) {
+          observer?.unobserve(previous)
+          keys.delete(previous)
+        }
+        if (node instanceof HTMLElement) {
+          nodes.set(key, node)
+          keys.set(node, key)
+          heights.delete(key)
+          observer?.observe(node, { box: 'border-box' })
+        } else {
+          nodes.delete(key)
+          heights.delete(key)
+        }
+        schedule()
+      })
+    return refs.get(key)!
+  }
+
+  function update() {
+    frame = 0
+    const host = list.value
+    if (!alive || !host || !host.getClientRects().length) return
+    const css = getComputedStyle(host)
+    const width = Number.parseFloat(css.width)
+    if (!(width > 0)) return
+    const gapX = Number.parseFloat(css.columnGap) || 0
+    const gapY = Number.parseFloat(css.rowGap) || 0
+    const count = masonryColumns(width, minWidth.value, gapX, fixedColumns.value)
+    const nextColumnWidth = Math.max(0, (width - (count - 1) * gapX) / count)
+    const resize = Math.abs(nextColumnWidth - columnWidth) > 0.01
+    lastWidth = width
+    columnWidth = nextColumnWidth
+    setStyle(host, '--hn-masonry-columns', String(count))
+
+    const sizes = entries.value.map(({ key }) => {
+      const node = nodes.get(key)
+      if (node && (resize || remeasure || !heights.has(key))) {
+        const style = getComputedStyle(node)
+        const extra =
+          style.boxSizing === 'border-box'
+            ? 0
+            : (
+                ['paddingTop', 'paddingBottom', 'borderTopWidth', 'borderBottomWidth'] as const
+              ).reduce((sum, name) => sum + (Number.parseFloat(style[name]) || 0), 0)
+        heights.set(key, (Number.parseFloat(style.height) || 0) + extra)
+      }
+      return heights.get(key) ?? 0
+    })
+    remeasure = false
+    const layout = layoutMasonry(sizes, count, gapY, props.sequential)
+    entries.value.forEach(({ key }, index) => {
+      const node = nodes.get(key)
+      if (!node) return
+      const position = layout.positions[index]!
+      setStyle(node, '--hn-masonry-column', String(position.column))
+      setStyle(node, '--hn-masonry-top', `${position.top}px`)
+    })
+    setStyle(host, '--hn-masonry-height', `${layout.height}px`)
+    if (!host.hasAttribute('data-ready')) host.setAttribute('data-ready', '')
+    hasLayout.value = entries.value.length > 0
+    if (lastLayout?.columns !== count || lastLayout?.height !== layout.height) {
+      lastLayout = { columns: count, height: layout.height }
+      onLayout(lastLayout)
+    }
+  }
+
+  watch(
+    entries,
+    value => {
+      const active = new Set(value.map(entry => entry.key))
+      for (const key of refs.keys()) if (!active.has(key)) refs.delete(key)
+      schedule()
+    },
+    { flush: 'post' },
+  )
+  watch(
+    () => entries.value.length,
+    count => {
+      if (!count && alive) hasLayout.value = false
+    },
+    { flush: 'sync' },
+  )
+  watch(
+    () => [props.columns, props.minColumnWidth, props.gap, props.sequential, props.class],
+    measure,
+    { flush: 'post' },
+  )
+  onMounted(() => {
+    if (typeof ResizeObserver === 'undefined') {
+      hasLayout.value = true
+      return
+    }
+    alive = true
+    observer = new ResizeObserver(records => {
+      let changed = false
+      for (const record of records) {
+        if (record.target === spacing.value) {
+          changed = true
+        } else if (record.target === list.value) {
+          if (Math.abs(record.contentRect.width - lastWidth) > 0.01) changed = true
+        } else {
+          const key = keys.get(record.target)
+          const height = record.borderBoxSize[0]?.blockSize
+          if (key !== undefined && height !== undefined && heights.get(key) !== height) {
+            heights.set(key, height)
+            changed = true
+          }
+        }
+      }
+      if (changed) schedule()
+    })
+    if (list.value) observer.observe(list.value)
+    if (spacing.value) observer.observe(spacing.value)
+    for (const node of nodes.values()) observer.observe(node, { box: 'border-box' })
+    update()
+  })
+  onBeforeUnmount(() => {
+    alive = false
+    observer?.disconnect()
+    cancelAnimationFrame(frame)
+  })
+  return { element, list, spacing, listStyle, fixedColumns, entries, itemRef, measure, hasLayout }
+}

package/src/components/masonry/masonry.variants.ts

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

package/src/components/masonry/types.ts

@@ -0,0 +1,29 @@
+import type { MasonryGap } from './masonry.variants'
+
+export type MasonryKey = string | number
+export interface MasonryLayout {
+  columns: number
+  height: number
+}
+export interface MasonrySlotProps<T> {
+  item: T
+  index: number
+}
+export interface MasonryProps<T> {
+  items: readonly T[]
+  getKey: (item: T, index: number) => MasonryKey
+  columns?: number
+  minColumnWidth?: number
+  gap?: MasonryGap
+  sequential?: boolean
+  loading?: boolean
+  emptyText?: string
+  label?: string
+  dir?: 'ltr' | 'rtl'
+  class?: string
+  itemClass?: string | ((item: T, index: number) => string | undefined)
+}
+export interface MasonryExpose {
+  element: HTMLElement | undefined
+  measure: () => void
+}

package/src/components/menubar/menubar.variants.ts

@@ -1,17 +1 @@
-import { tv } from '../../lib/tv'
-
-export const menubarRoot = tv({
-  base: 'bg-surface border-line inline-flex items-center gap-0.5 rounded-lg border p-1',
-})
-
-export const menubarTrigger = tv({
-  base: [
-    'hn-interactive hn-state-layer hn-press-none relative isolate inline-flex h-8 shrink-0 items-center',
-    'text-fg gap-1.5 rounded-md px-2.5 text-sm font-medium outline-none select-none',
-    'data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0',
-  ],
-})
-
-export const menubarContent = tv({
-  base: 'hn-anim-pop z-(--hn-z-overlay) flex min-w-40 flex-col gap-0.5 p-1 shadow-md outline-none',
-})
+export * from '../../../../shared/src/variants/menubar'

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

@@ -1,38 +1 @@
-import { tv } from '../../lib/tv'
-
-export const meterGroup = tv({
-  base: 'flex w-full min-w-0 flex-col gap-2',
-})
-
-export const meterHeader = tv({
-  base: 'text-fg flex items-baseline justify-between gap-3 text-sm',
-})
-
-export const meterSegment = tv({
-  base: 'hn-progress-bar block h-full shrink-0',
-  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 const meterLegend = tv({
-  base: 'flex flex-wrap gap-x-4 gap-y-1 text-sm',
-})
-
-export const meterLegendItem = tv({
-  base: 'inline-flex items-center gap-1.5',
-})
-
-export const meterValue = tv({
-  base: 'text-muted tabular-nums',
-})
+export * from '../../../../shared/src/variants/meter-group'