@hina-ui/vue 1.3.0 → 1.4.0

package/src/lib/useDirection.ts

@@ -0,0 +1,31 @@
+import { computed, shallowRef, watchEffect } from 'vue'
+import { injectConfigProviderContext, type Direction } from 'reka-ui'
+
+export function useDirection(dir: () => Direction | undefined) {
+  const root = shallowRef<HTMLElement>()
+  const context = injectConfigProviderContext(null)
+  const inherited = shallowRef<Direction>('ltr')
+  const rootDirection = computed(() => dir() ?? context?.dir?.value)
+  const direction = computed(() => rootDirection.value ?? inherited.value)
+
+  watchEffect(
+    onCleanup => {
+      const element = root.value
+      const view = element?.ownerDocument.defaultView
+      if (!element || !view || rootDirection.value) return
+
+      const update = () => {
+        inherited.value = view.getComputedStyle(element).direction === 'rtl' ? 'rtl' : 'ltr'
+      }
+
+      update()
+      const observer = new view.MutationObserver(update)
+      for (let ancestor: HTMLElement | null = element; ancestor; ancestor = ancestor.parentElement)
+        observer.observe(ancestor, { attributes: true, attributeFilter: ['dir'] })
+      onCleanup(() => observer.disconnect())
+    },
+    { flush: 'post' },
+  )
+
+  return { root, direction, rootDirection }
+}

package/src/locale/en-US.ts

@@ -16,6 +16,16 @@ export const enUS: UiMessages = {
     next: 'Next notice',
   },
   pagination: {
+    rangeLabel: (from, to, total) =>
+      total ? String(from) + '–' + to + ' of ' + total + ' items' : '0 items',
+    pageCountLabel: (page, count) => 'Page ' + page + ' of ' + count,
+    pageSizeLabel: 'Items per page',
+    pageSizeOption: n => String(n) + ' / page',
+    jumpLabel: 'Go to page',
+    previousPagesLabel: n => 'Go back ' + n + ' pages',
+    nextPagesLabel: n => 'Go forward ' + n + ' pages',
+    choosePage: 'Choose a page',
+    choosePageHint: 'Press ArrowDown or ArrowUp to choose a page',
     navLabel: 'Pagination',
     prev: 'Previous page',
     next: 'Next page',
@@ -78,7 +88,8 @@ export const enUS: UiMessages = {
   lightbox: {
     zoomIn: 'Zoom in',
     zoomOut: 'Zoom out',
-    resetZoom: 'Reset zoom',
+    resetZoom: 'Fit to window',
+    actualSize: 'Actual size',
     rotate: 'Rotate',
     download: 'Download',
     loadingLarge: 'Loading HD',
@@ -94,6 +105,9 @@ export const enUS: UiMessages = {
     show: 'Show password',
     hide: 'Hide password',
   },
+  treeSelect: {
+    search: 'Search nodes',
+  },
   combobox: {
     placeholder: 'Type or choose',
     toggle: 'Show options',

package/src/locale/index.ts

@@ -36,6 +36,7 @@ function merge(base: UiMessages, patch: PartialUiMessages): UiMessages {
     chip: { ...base.chip, ...patch.chip },
     numberInput: { ...base.numberInput, ...patch.numberInput },
     passwordInput: { ...base.passwordInput, ...patch.passwordInput },
+    treeSelect: { ...base.treeSelect, ...patch.treeSelect },
     combobox: { ...base.combobox, ...patch.combobox },
     slider: { ...base.slider, ...patch.slider },
     pinInput: { ...base.pinInput, ...patch.pinInput },

package/src/locale/types.ts

@@ -14,6 +14,15 @@ export interface UiMessages {
     next: string
   }
   pagination: {
+    rangeLabel: (from: number, to: number, total: number) => string
+    pageCountLabel: (page: number, count: number) => string
+    pageSizeLabel: string
+    pageSizeOption: (n: number) => string
+    jumpLabel: string
+    previousPagesLabel: (n: number) => string
+    nextPagesLabel: (n: number) => string
+    choosePage: string
+    choosePageHint: string
     navLabel: string
     prev: string
     next: string
@@ -77,6 +86,7 @@ export interface UiMessages {
     zoomIn: string
     zoomOut: string
     resetZoom: string
+    actualSize: string
     rotate: string
     download: string
     loadingLarge: string
@@ -92,6 +102,9 @@ export interface UiMessages {
     show: string
     hide: string
   }
+  treeSelect: {
+    search: string
+  }
   combobox: {
     placeholder: string
     toggle: string

package/src/locale/zh-CN.ts

@@ -16,6 +16,16 @@ export const zhCN: UiMessages = {
     next: '下一条',
   },
   pagination: {
+    rangeLabel: (from, to, total) =>
+      total ? String(from) + '–' + to + ' / 共 ' + total + ' 条' : '共 0 条',
+    pageCountLabel: (page, count) => '第 ' + page + ' / ' + count + ' 页',
+    pageSizeLabel: '每页条数',
+    pageSizeOption: n => String(n) + ' / 页',
+    jumpLabel: '跳至页码',
+    previousPagesLabel: n => '向前跳 ' + n + ' 页',
+    nextPagesLabel: n => '向后跳 ' + n + ' 页',
+    choosePage: '选择页码',
+    choosePageHint: '按向下或向上箭头选择页码',
     navLabel: '翻页',
     prev: '上一页',
     next: '下一页',
@@ -78,7 +88,8 @@ export const zhCN: UiMessages = {
   lightbox: {
     zoomIn: '放大',
     zoomOut: '缩小',
-    resetZoom: '恢复原始大小',
+    resetZoom: '适应窗口',
+    actualSize: '原始尺寸',
     rotate: '旋转',
     download: '下载',
     loadingLarge: '正在加载原图',
@@ -94,6 +105,9 @@ export const zhCN: UiMessages = {
     show: '显示密码',
     hide: '隐藏密码',
   },
+  treeSelect: {
+    search: '搜索节点',
+  },
   combobox: {
     placeholder: '输入或选择',
     toggle: '展开选项',

package/src/styles/interaction.css

@@ -266,20 +266,43 @@
 }
 
 @utility hn-skeleton {
-  background-color: var(--hn-bg-subtle);
+  position: relative;
+  overflow: hidden;
+  background-color: var(--hn-skeleton-bg);
   border-radius: var(--hn-radius-md);
   color: transparent;
   cursor: default;
   pointer-events: none;
   user-select: none;
-  animation: hn-skeleton var(--hn-skeleton-duration) var(--hn-ease-move) infinite;
+
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    transform: translateX(-100%);
+    background: linear-gradient(
+      90deg,
+      rgb(255 255 255 / 0),
+      var(--hn-skeleton-wave),
+      rgb(255 255 255 / 0)
+    );
+    animation: hn-skeleton var(--hn-skeleton-duration) var(--hn-ease-move) infinite;
+  }
+
+  &:dir(rtl)::after {
+    animation-name: hn-skeleton-rtl;
+  }
 
   & * {
     visibility: hidden;
   }
 
   @media (prefers-reduced-motion: reduce) {
-    animation: none;
+    &::after,
+    &:dir(rtl)::after {
+      animation: none;
+    }
   }
 }
 

package/src/styles/motion.css

@@ -5,8 +5,20 @@
 }
 
 @keyframes hn-skeleton {
-  50% {
-    background-color: var(--hn-bg-inset);
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
+
+@keyframes hn-skeleton-rtl {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(-100%);
   }
 }
 

package/src/styles/semantic.css

@@ -72,6 +72,8 @@
     0 40px 80px -24px rgb(0 0 0 / 0.16);
 
   --hn-scroll-shadow: rgb(0 0 0 / 0.1);
+  --hn-skeleton-bg: var(--color-neutral-200);
+  --hn-skeleton-wave: rgb(255 255 255 / 0.4);
 
   --hn-z-overlay: 100;
   --hn-z-toast: 110;
@@ -146,6 +148,8 @@
     0 32px 64px -16px rgb(0 0 0 / 0.55);
 
   --hn-scroll-shadow: rgb(0 0 0 / 0.5);
+  --hn-skeleton-bg: rgb(255 255 255 / 0.06);
+  --hn-skeleton-wave: rgb(255 255 255 / 0.04);
 }
 
 :root {
@@ -202,7 +206,7 @@
   --hn-travel-md: 10px;
   --hn-stagger: 24ms;
   --hn-spin-duration: 700ms;
-  --hn-skeleton-duration: 2200ms;
+  --hn-skeleton-duration: 1200ms;
   --hn-ripple-in: 75ms;
   --hn-ripple-out: 375ms;
   --hn-pulse-duration: 1500ms;