@hina-ui/vue 1.7.7 → 1.7.8

package/dist/shared/behavior/anchor-follow.ts

@@ -24,9 +24,16 @@ export interface AnchorFollowResult {
   viewport: HTMLElement | undefined
 }
 
+const FLIGHT_MS = 1500
+
 export function createAnchorFollow() {
   let lastCurrent: string | undefined
   let lastEnd: string | undefined
+  let flight: { port: HTMLElement; top: number; until: number } | undefined
+
+  function land(event: Event) {
+    if (flight?.port === event.currentTarget) flight = undefined
+  }
 
   function follow({
     nav,
@@ -47,13 +54,18 @@ export function createAnchorFollow() {
     if (!port || port.clientHeight <= 0 || port.scrollHeight <= port.clientHeight) return result
 
     const box = port.getBoundingClientRect()
-    let row: Pick<DOMRect, 'top' | 'bottom' | 'height'> = link.getBoundingClientRect()
     const scale = port.offsetHeight ? box.height / port.offsetHeight : 1
     if (scale <= 0) return result
+    const now = performance.now()
+    if (flight && (flight.port !== port || now > flight.until)) flight = undefined
+    const base = flight ? flight.top : port.scrollTop
+    const ahead = (base - port.scrollTop) * scale
+    const rect = link.getBoundingClientRect()
+    let row = { top: rect.top - ahead, bottom: rect.bottom - ahead, height: rect.height }
     if (endId !== id) {
       const end = nav.querySelector<HTMLElement>(`a[href="#${CSS.escape(endId)}"]`)
       if (end?.getClientRects().length) {
-        const bottom = end.getBoundingClientRect().bottom
+        const bottom = end.getBoundingClientRect().bottom - ahead
         const height = bottom - row.top
         if (height >= row.height && height <= port.clientHeight * scale)
           row = { top: row.top, bottom, height }
@@ -79,15 +91,12 @@ export function createAnchorFollow() {
       row.height > bottom - top || row.top < top
         ? (row.top - top) / scale - before
         : (row.bottom - bottom) / scale + after
-    const next = Math.max(
-      0,
-      Math.min(port.scrollHeight - port.clientHeight, port.scrollTop + delta),
-    )
-    if (Math.abs(next - port.scrollTop) < 1) return result
-    port.scrollTo({
-      top: next,
-      behavior: changed && !prefersReducedMotion() ? 'smooth' : 'instant',
-    })
+    const next = Math.max(0, Math.min(port.scrollHeight - port.clientHeight, base + delta))
+    if (Math.abs(next - base) < 1) return result
+    const smooth = changed && !prefersReducedMotion()
+    flight = smooth ? { port, top: next, until: now + FLIGHT_MS } : undefined
+    if (smooth) port.addEventListener('scrollend', land, { once: true })
+    port.scrollTo({ top: next, behavior: smooth ? 'smooth' : 'instant' })
     return result
   }
 

package/dist/shared/lib/command-palette/match.ts

@@ -90,3 +90,12 @@ export function filterCommands<T extends CommandMatchable>(
   if (q) sections.sort((a, b) => b.best - a.best)
   return sections.map(({ key, label, matches }) => ({ key, label, matches }))
 }
+
+export interface CommandMatchRange {
+  start: number
+  end: number
+}
+
+export function commandMatchRange(match: CommandMatch): CommandMatchRange | null {
+  return match.start < 0 ? null : { start: match.start, end: match.end }
+}

package/dist/shared/lib/line-clamp.ts

@@ -0,0 +1,76 @@
+export const LINE_CLAMP_DEFAULT = 3
+
+export function lineClampCount(lines: number | undefined) {
+  if (lines === undefined || !Number.isFinite(lines)) return LINE_CLAMP_DEFAULT
+  return Math.max(1, Math.floor(lines))
+}
+
+function measureHeights(content: HTMLElement) {
+  content.setAttribute('data-measuring', '')
+  const collapsed = content.clientHeight
+  const full = content.scrollHeight
+  content.removeAttribute('data-measuring')
+  return { collapsed, full }
+}
+
+export function measureLineClamp(content: HTMLElement) {
+  if (content.hasAttribute('data-animating')) return null
+  const { collapsed, full } = measureHeights(content)
+  return full - collapsed > 1
+}
+
+function toMs(value: string) {
+  const amount = Number.parseFloat(value)
+  if (Number.isNaN(amount)) return 0
+  return value.trim().endsWith('ms') ? amount : amount * 1000
+}
+
+const FADE = '--hn-line-clamp-fade'
+
+export function animateLineClamp(content: HTMLElement, expanded: boolean, done: () => void) {
+  const running = content.style.maxHeight !== ''
+  const current = running ? content.getBoundingClientRect().height : undefined
+  const fade = running ? getComputedStyle(content).getPropertyValue(FADE) : ''
+
+  content.style.transition = 'none'
+  const { collapsed, full } = measureHeights(content)
+  const from = current ?? (expanded ? collapsed : full)
+  const to = expanded ? full : collapsed
+  content.toggleAttribute('data-expanded', !expanded)
+  if (fade) content.style.setProperty(FADE, fade)
+  content.style.maxHeight = `${from}px`
+  content.setAttribute('data-animating', '')
+  void content.offsetHeight
+  content.style.transition = ''
+  content.style.removeProperty(FADE)
+  content.toggleAttribute('data-expanded', expanded)
+  content.style.maxHeight = `${to}px`
+
+  let timer: ReturnType<typeof setTimeout> | undefined
+  const stop = () => {
+    content.removeEventListener('transitionend', onEnd)
+    clearTimeout(timer)
+  }
+  const finish = () => {
+    stop()
+    content.style.maxHeight = ''
+    content.removeAttribute('data-animating')
+    done()
+  }
+  function onEnd(event: TransitionEvent) {
+    if (event.target === content && event.propertyName === 'max-height') finish()
+  }
+
+  if (Math.abs(from - to) < 1) {
+    finish()
+    return stop
+  }
+  const duration = Math.max(...getComputedStyle(content).transitionDuration.split(',').map(toMs))
+  content.addEventListener('transitionend', onEnd)
+  timer = setTimeout(finish, duration + 80)
+  return stop
+}
+
+export function revealLineClamp(root: HTMLElement | null) {
+  root?.scrollIntoView?.({ block: 'nearest' })
+}

package/dist/shared/lib/scroll-restore.ts

@@ -146,3 +146,148 @@ export function createScrollRestorer(key: string, ports: ScrollRestorerPorts): S
     },
   }
 }
+
+export const SCROLL_FIRST_PAINT_FIELD = '__hnScrollAt'
+
+export function scrollRestoreScript() {
+  const collect = `(function(){var s=window.${SCROLL_FIRST_PAINT_FIELD}=window.${SCROLL_FIRST_PAINT_FIELD}||{};var e=document.querySelectorAll('[${SCROLL_AT_ATTR}]');for(var i=0;i<e.length;i++){s[e[i].getAttribute('${SCROLL_RESTORE_ATTR}')]=Number(e[i].getAttribute('${SCROLL_AT_ATTR}'));e[i].removeAttribute('${SCROLL_AT_ATTR}')}})()`
+  return `${firstPaintRestoreScript()};${collect}`
+}
+
+export interface ScrollRestoreSessionOptions {
+  key: string
+  viewport: HTMLElement
+  target: HTMLElement
+  initial?: boolean
+  onUpdated: (listener: () => void) => () => void
+  onScroll: (listener: () => void) => () => void
+}
+
+export interface ScrollRestoreSession {
+  dispose: () => void
+}
+
+const ABANDON_EVENTS = ['wheel', 'touchstart', 'keydown'] as const
+const NAVIGATION_FALLBACK_MS = 500
+
+function takeFirstPaint(key: string, target: HTMLElement) {
+  const store = (window as unknown as Record<string, Record<string, number> | undefined>)[
+    SCROLL_FIRST_PAINT_FIELD
+  ]
+  if (store && key in store) {
+    const top = store[key]
+    delete store[key]
+    return top
+  }
+  const at = target.getAttribute(SCROLL_AT_ATTR)
+  target.removeAttribute(SCROLL_AT_ATTR)
+  return at === null ? undefined : Number(at)
+}
+
+function hashTarget() {
+  if (!location.hash) return null
+  try {
+    return document.getElementById(decodeURIComponent(location.hash.slice(1)))
+  } catch {
+    return null
+  }
+}
+
+export function createScrollRestoreSession({
+  key,
+  viewport,
+  target,
+  initial = true,
+  onUpdated,
+  onScroll,
+}: ScrollRestoreSessionOptions): ScrollRestoreSession {
+  const page = () => location.pathname + location.search
+  const here = () => ({ href: location.href, page: page() })
+  const setTimer = (fn: () => void, ms: number) => {
+    const id = setTimeout(fn, ms)
+    return () => clearTimeout(id)
+  }
+
+  let settled = here()
+  let navigating = false
+  let clearFallback: (() => void) | null = null
+  let disposed = false
+
+  const restorer = createScrollRestorer(key, {
+    getViewport: () => viewport,
+    takeFirstPaintTop: () => takeFirstPaint(key, target),
+    readState: () => history.state,
+    writeState: state => {
+      if (!navigating && page() === settled.page) history.replaceState(state, '')
+    },
+    setTimer,
+  })
+
+  function land(first = false) {
+    navigating = false
+    clearFallback?.()
+    clearFallback = null
+    settled = here()
+    const saved = readScrollRecord(history.state)[key]
+    restorer.restore(first)
+    if (!first && saved === undefined) hashTarget()?.scrollIntoView()
+  }
+
+  function detect(traversal = false) {
+    if (disposed || location.href === settled.href) return
+    if (page() === settled.page) {
+      settled = here()
+      if (traversal && readScrollRecord(history.state)[key] !== undefined) restorer.restore()
+      return
+    }
+    if (navigating) return
+    navigating = true
+    restorer.abandon()
+    clearFallback = setTimer(() => land(), NAVIGATION_FALLBACK_MS)
+  }
+
+  const check = () => queueMicrotask(() => detect())
+  const traverse = () => queueMicrotask(() => detect(true))
+  const entryChange = (event: Event) => {
+    const traversal = (event as Event & { navigationType?: string }).navigationType === 'traverse'
+    queueMicrotask(() => detect(traversal))
+  }
+  const abandon = () => restorer.abandon()
+  const save = () => restorer.save()
+  const navigation = (window as Window & { navigation?: EventTarget }).navigation
+
+  const off = [
+    onUpdated(() => {
+      detect()
+      if (navigating) land()
+      else restorer.settle()
+    }),
+    onScroll(() => {
+      detect()
+      restorer.saveSoon()
+    }),
+  ]
+  for (const name of ABANDON_EVENTS) viewport.addEventListener(name, abandon, { passive: true })
+  navigation?.addEventListener('currententrychange', entryChange)
+  window.addEventListener('popstate', traverse)
+  window.addEventListener('hashchange', check)
+  window.addEventListener('pagehide', save)
+  document.addEventListener('click', save, true)
+
+  land(initial)
+
+  return {
+    dispose() {
+      disposed = true
+      off.forEach(stop => stop())
+      for (const name of ABANDON_EVENTS) viewport.removeEventListener(name, abandon)
+      navigation?.removeEventListener('currententrychange', entryChange)
+      window.removeEventListener('popstate', traverse)
+      window.removeEventListener('hashchange', check)
+      window.removeEventListener('pagehide', save)
+      document.removeEventListener('click', save, true)
+      clearFallback?.()
+      restorer.dispose()
+    },
+  }
+}

package/dist/shared/locale/en-US.ts

@@ -205,6 +205,10 @@ export const enUS: UiMessages = {
     placeholder: 'Search',
     empty: 'No matches',
   },
+  lineClamp: {
+    expand: 'Show all',
+    collapse: 'Show less',
+  },
   calendar: {
     label: 'Calendar',
     prev: 'Previous month',

package/dist/shared/locale/index.ts

@@ -44,9 +44,11 @@ export function mergeUiMessages(base: UiMessages, patch: PartialUiMessages): UiM
     rating: { ...base.rating, ...patch.rating },
     form: { ...base.form, ...patch.form },
     command: { ...base.command, ...patch.command },
+    lineClamp: { ...base.lineClamp, ...patch.lineClamp },
   }
 }
 
 export { zhCN } from './zh-CN'
 export { enUS } from './en-US'
+export { jaJP } from './ja-JP'
 export type { UiMessages, PartialUiMessages } from './types'

package/dist/shared/locale/ja-JP.ts

@@ -0,0 +1,229 @@
+import type { UiMessages } from './types'
+
+export const jaJP: UiMessages = {
+  qrCode: {
+    label: 'QRコード',
+    empty: 'コンテンツがありません',
+    expired: 'QRコードの有効期限が切れました',
+    scanned: 'スキャン済み',
+    error: 'QRコードを生成できません',
+    refresh: 'QRコードを更新',
+  },
+  carousel: {
+    label: 'おすすめコンテンツ',
+    role: 'カルーセル',
+    slide: 'スライド',
+    prev: '前のグループ',
+    next: '次のグループ',
+    choose: '表示位置を選択',
+    play: '自動再生を開始',
+    pause: '自動再生を停止',
+    empty: 'コンテンツがありません',
+    position: (index, total) => `${total} 件中 ${index} 件目`,
+    goTo: index => `グループ ${index} に移動`,
+  },
+  monthGrid: { today: '今月に戻る' },
+  masonry: { empty: 'コンテンツがありません' },
+  splitButton: { more: 'その他の操作' },
+  editable: {
+    edit: '編集',
+    save: '保存',
+    placeholder: 'クリックして編集',
+    failed: '保存できませんでした。もう一度お試しください',
+  },
+  tag: 'ja-JP',
+  stepper: {
+    label: 'ステップ',
+    progress: (step, total) => `ステップ ${step} / ${total}`,
+    completed: '完了',
+    error: 'このステップにエラーがあります',
+  },
+  common: {
+    close: '閉じる',
+    copy: 'コピー',
+    copied: 'コピーしました',
+    clear: 'クリア',
+    loading: '読み込み中',
+    confirm: 'OK',
+    cancel: 'キャンセル',
+  },
+  banner: {
+    prev: '前のお知らせ',
+    next: '次のお知らせ',
+  },
+  pagination: {
+    rangeLabel: (from, to, total) =>
+      total ? String(from) + '–' + to + ' / 全 ' + total + ' 件' : '全 0 件',
+    pageCountLabel: (page, count) => page + ' / ' + count + ' ページ',
+    pageSizeLabel: '1 ページあたりの件数',
+    pageSizeOption: n => String(n) + ' 件 / ページ',
+    jumpLabel: 'ページへ移動',
+    previousPagesLabel: n => n + ' ページ戻る',
+    nextPagesLabel: n => n + ' ページ進む',
+    choosePage: 'ページを選択',
+    choosePageHint: '上下の矢印キーでページを選択',
+    navLabel: 'ページネーション',
+    prev: '前のページ',
+    next: '次のページ',
+    first: '最初のページ',
+    last: '最後のページ',
+    pageLabel: n => `${n} ページ`,
+    totalLabel: n => `全 ${n} 件`,
+  },
+  table: {
+    edit: '編集',
+    save: '保存',
+    cancel: 'キャンセル',
+    editFailed: '保存できませんでした。もう一度お試しください',
+    selectPage: '現在のページを選択',
+    selectFiltered: '絞り込み結果を選択',
+    expand: '展開',
+    collapse: '折りたたむ',
+    moveRow: '行を移動',
+    moveColumn: '列を移動',
+    resizeColumn: '列幅を調整',
+
+    noColumns: '表示する列がありません',
+    empty: 'データがありません',
+    loading: '読み込み中',
+    sortAsc: '昇順で並べ替え',
+    sortDesc: '降順で並べ替え',
+    sortNone: '並べ替えを解除',
+    selectRow: 'この行を選択',
+    selectAll: 'すべて選択',
+  },
+  select: {
+    placeholder: '選択してください',
+    empty: '一致する項目がありません',
+    optionCountLabel: n => `${n} 件の選択肢があります`,
+  },
+  upload: {
+    choose: 'ファイルを選択',
+    dropHint: 'ここにファイルをドロップ、またはクリックして選択',
+    tooLargeLabel: readableSize => `ファイルが上限の ${readableSize} を超えています`,
+    remove: '削除',
+    removeFile: name => `${name} を削除`,
+  },
+  time: {
+    justNow: 'たった今',
+    unknown: '日時不明',
+  },
+  virtualList: { empty: 'データがありません' },
+  dataList: {
+    empty: 'データがありません',
+    list: 'リスト表示',
+    grid: 'グリッド表示',
+    layout: '表示レイアウト',
+  },
+  scroll: {
+    regionLabel: 'スクロール可能な領域',
+    backToTop: 'ページの先頭へ戻る',
+  },
+  toast: {
+    regionLabel: '通知',
+  },
+  spoiler: {
+    revealLabel: 'ネタバレを含みます。クリックして表示',
+    hideLabel: 'ネタバレを隠す',
+  },
+  codeblock: {
+    copy: 'コードをコピー',
+  },
+  splitter: {
+    handleLabel: 'パネルのサイズを調整',
+  },
+  sidebar: {
+    navLabel: 'サイドバーナビゲーション',
+    toggleLabel: 'サイドバーを切り替え',
+  },
+  anchor: {
+    navLabel: 'このページの目次',
+  },
+  breadcrumb: {
+    navLabel: 'パンくずリスト',
+  },
+  lightbox: {
+    zoomIn: '拡大',
+    zoomOut: '縮小',
+    resetZoom: 'ウィンドウに合わせる',
+    actualSize: '実際のサイズ',
+    rotate: '回転',
+    download: 'ダウンロード',
+    loadingLarge: '高画質版を読み込み中',
+  },
+  chip: {
+    remove: '削除',
+  },
+  numberInput: {
+    increase: '増やす',
+    decrease: '減らす',
+  },
+  passwordInput: {
+    show: 'パスワードを表示',
+    hide: 'パスワードを隠す',
+  },
+  tree: { empty: 'ノードがありません' },
+  treeSelect: {
+    search: 'ノードを検索',
+  },
+  combobox: {
+    placeholder: '入力または選択',
+    toggle: '選択肢を表示',
+  },
+  slider: {
+    minimum: '最小値',
+    maximum: '最大値',
+  },
+  pinInput: {
+    cellLabel: (index, total) => `${total} 桁中 ${index} 桁目`,
+  },
+  dateField: {
+    year: '年',
+    month: '月',
+    day: '日',
+    hour: '時',
+    minute: '分',
+    second: '秒',
+    dayPeriod: '午前または午後',
+  },
+  dateRangeField: {
+    start: '開始日',
+    end: '終了日',
+    separator: '〜',
+  },
+  datePicker: {
+    open: 'カレンダーを開く',
+  },
+  dateTimePicker: {
+    time: '時刻',
+  },
+  rating: {
+    star: value => `星 ${value}`,
+    label: (value, max) => `星 ${max} 個中 ${value} 個`,
+    score: (value, max) => `${max} 点中 ${value} 点`,
+  },
+  form: {
+    required: '必須',
+  },
+  command: {
+    label: 'コマンドパレット',
+    placeholder: '検索',
+    empty: '一致する項目がありません',
+  },
+  lineClamp: {
+    expand: 'すべて表示',
+    collapse: '折りたたむ',
+  },
+  calendar: {
+    label: 'カレンダー',
+    prev: '前の月',
+    next: '次の月',
+    prevYear: '前の年',
+    nextYear: '次の年',
+    prevYears: '前の 12 年',
+    nextYears: '次の 12 年',
+    pickMonth: '月を選択',
+    pickYear: '年を選択',
+    weekStartsOn: 0,
+  },
+}

package/dist/shared/locale/types.ts

@@ -206,6 +206,10 @@ export interface UiMessages {
     placeholder: string
     empty: string
   }
+  lineClamp: {
+    expand: string
+    collapse: string
+  }
   calendar: {
     label: string
     prev: string

package/dist/shared/locale/zh-CN.ts

@@ -200,6 +200,10 @@ export const zhCN: UiMessages = {
     placeholder: '搜索',
     empty: '无匹配项',
   },
+  lineClamp: {
+    expand: '展开全部',
+    collapse: '收起',
+  },
   calendar: {
     label: '日历',
     prev: '上个月',

package/dist/shared/styles/density.css

@@ -1,8 +1,10 @@
 :root,
 [data-density='comfortable'] {
+  --hn-control-h-xs: 1.5rem;
   --hn-control-h-sm: 1.75rem;
   --hn-control-h-md: 2.25rem;
   --hn-control-h-lg: 2.75rem;
+  --hn-control-px-xs: 0.5rem;
   --hn-control-px-sm: 0.625rem;
   --hn-control-px-md: 1rem;
   --hn-control-px-lg: 1.25rem;
@@ -16,9 +18,11 @@
 }
 
 [data-density='compact'] {
+  --hn-control-h-xs: 1.25rem;
   --hn-control-h-sm: 1.5rem;
   --hn-control-h-md: 1.875rem;
   --hn-control-h-lg: 2.25rem;
+  --hn-control-px-xs: 0.25rem;
   --hn-control-px-sm: 0.375rem;
   --hn-control-px-md: 0.5rem;
   --hn-control-px-lg: 0.75rem;

package/dist/shared/styles/line-clamp.css

@@ -0,0 +1,98 @@
+@property --hn-line-clamp-fade {
+  syntax: '<number>';
+  inherits: false;
+  initial-value: 0;
+}
+
+.hn-line-clamp-root,
+.hn-line-clamp {
+  min-width: 0;
+}
+
+.hn-line-clamp:not([data-expanded]),
+.hn-line-clamp[data-animating],
+.hn-line-clamp[data-measuring] {
+  overflow: hidden;
+}
+
+.hn-line-clamp:not([data-expanded]):not([data-animating]),
+.hn-line-clamp[data-measuring] {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--hn-line-clamp, 3);
+}
+
+.hn-line-clamp[data-measuring] {
+  max-height: none !important;
+  transition: none !important;
+}
+
+.hn-line-clamp[data-animating] {
+  transition:
+    max-height var(--hn-duration-base) var(--hn-ease-move),
+    --hn-line-clamp-fade var(--hn-duration-base) var(--hn-ease-move);
+}
+
+.hn-line-clamp:not([data-expanded]),
+.hn-line-clamp[data-animating] {
+  mask-image: linear-gradient(
+    to bottom,
+    #000 calc(100% - min(1.5lh, calc(var(--hn-line-clamp, 3) * 0.6lh)) * var(--hn-line-clamp-fade)),
+    transparent
+  );
+}
+
+.hn-line-clamp-root[data-truncated='true'] > .hn-line-clamp:not([data-expanded]) {
+  --hn-line-clamp-fade: 1;
+}
+
+.hn-line-clamp-root[data-truncated='false'] > .hn-line-clamp {
+  mask-image: none;
+}
+
+.hn-line-clamp-toggle {
+  display: flex;
+  align-items: center;
+  height: 1lh;
+  margin-block-start: var(--spacing);
+}
+
+.hn-line-clamp-root[data-truncated='false'] > .hn-line-clamp-toggle {
+  display: none;
+}
+
+@supports (animation-timeline: scroll()) and (timeline-scope: --hn-line-clamp) {
+  .hn-line-clamp-root:not([data-truncated]):not([data-expanded]) {
+    timeline-scope: --hn-line-clamp;
+  }
+
+  .hn-line-clamp-root:not([data-truncated]):not([data-expanded]) > .hn-line-clamp {
+    scroll-timeline: --hn-line-clamp block;
+    animation: hn-line-clamp-fade 1ms linear both;
+    animation-timeline: --hn-line-clamp;
+  }
+
+  .hn-line-clamp-root:not([data-truncated]):not([data-expanded]) > .hn-line-clamp-toggle {
+    height: 0;
+    margin-block-start: 0;
+    visibility: hidden;
+    animation: hn-line-clamp-toggle 1ms linear both;
+    animation-timeline: --hn-line-clamp;
+  }
+}
+
+@keyframes hn-line-clamp-fade {
+  from,
+  to {
+    --hn-line-clamp-fade: 1;
+  }
+}
+
+@keyframes hn-line-clamp-toggle {
+  from,
+  to {
+    height: 1lh;
+    margin-block-start: var(--spacing);
+    visibility: visible;
+  }
+}