niuma-ui 1.0.0

package/src/composables/useRsI18n.ts

@@ -0,0 +1,22 @@
+import { computed, inject } from 'vue'
+import { localeMap } from '../locale/messages'
+import { defaultLocale, type RsLocale } from '../locale/types'
+import { rsConfigKey } from './useRsConfig'
+
+export type RsTranslateFn = (key: string, fallback?: string) => string
+
+/** 组件内安全取文案：Provider 内跟随 locale，否则回退 defaultLocale */
+export function useRsI18n() {
+  const ctx = inject(rsConfigKey, null)
+  const locale = computed<RsLocale>(() => ctx?.locale.value ?? defaultLocale)
+
+  function t(key: string, fallback?: string): string {
+    return localeMap[locale.value][key] ?? fallback ?? key
+  }
+
+  return { t, locale }
+}
+
+export function createTranslator(locale: RsLocale): RsTranslateFn {
+  return (key, fallback) => localeMap[locale][key] ?? fallback ?? key
+}

package/src/composables/useRsTabsNav.ts

@@ -0,0 +1,187 @@
+import {
+  computed,
+  nextTick,
+  onMounted,
+  onUnmounted,
+  ref,
+  watch,
+  type ComputedRef,
+  type Ref,
+} from 'vue'
+import { resolveVisibleTabValues, type RsTabItem, type RsTabsOverflow } from '../components/tabs-utils'
+
+interface UseRsTabsNavOptions {
+  items: ComputedRef<RsTabItem[]>
+  activeValue: Ref<string>
+  overflow: ComputedRef<RsTabsOverflow | false>
+  canAdd: ComputedRef<boolean>
+  navRef: Ref<HTMLElement | null>
+  measureRef: Ref<HTMLElement | null>
+  overflowRef: Ref<HTMLElement | null>
+  addButtonWidth: number
+}
+
+export function useRsTabsNav(options: UseRsTabsNavOptions) {
+  const navViewportRef = ref<HTMLElement | null>(null)
+  const triggerWidths = ref<Map<string, number>>(new Map())
+  const visibleValues = ref<Set<string>>(new Set())
+  const canScrollPrev = ref(false)
+  const canScrollNext = ref(false)
+
+  let resizeObserver: ResizeObserver | null = null
+
+  const useDropdownOverflow = computed(() => options.overflow.value === 'dropdown')
+  const useScrollOverflow = computed(() => options.overflow.value === 'scroll')
+
+  const visibleTabItems = computed(() =>
+    options.items.value.filter((item) => visibleValues.value.has(item.value)),
+  )
+
+  const hiddenItems = computed(() =>
+    options.items.value.filter((item) => !visibleValues.value.has(item.value)),
+  )
+
+  const overflowMenuItems = computed(() =>
+    hiddenItems.value.map((item) => ({ value: item.value, label: item.label })),
+  )
+
+  const activeInHidden = computed(() =>
+    hiddenItems.value.some((item) => item.value === options.activeValue.value),
+  )
+
+  const showOverflowMenu = computed(
+    () => useDropdownOverflow.value && hiddenItems.value.length > 0,
+  )
+
+  function measureTriggerWidths(): Map<string, number> {
+    const measureRoot = options.measureRef.value
+    if (measureRoot) {
+      const next = new Map<string, number>()
+      for (const node of measureRoot.querySelectorAll<HTMLElement>('[data-tab-value]')) {
+        const value = node.dataset.tabValue
+        if (value) next.set(value, node.offsetWidth)
+      }
+      if (next.size > 0) return next
+    }
+
+    const viewport = navViewportRef.value
+    const next = new Map<string, number>()
+    if (!viewport) return next
+    for (const trigger of viewport.querySelectorAll<HTMLElement>('.rs-tabs__trigger[data-tab-value]')) {
+      const value = trigger.dataset.tabValue
+      if (value) next.set(value, trigger.offsetWidth)
+    }
+    return next
+  }
+
+  function reservedWidth(): number {
+    let width = 0
+    if (useDropdownOverflow.value && options.items.value.length > 1) {
+      width += options.overflowRef.value?.offsetWidth ?? 76
+    }
+    if (options.canAdd.value) width += options.addButtonWidth
+    return width
+  }
+
+  function recomputeVisibleTabs() {
+    if (!useDropdownOverflow.value) {
+      visibleValues.value = new Set(options.items.value.map((item) => item.value))
+      return
+    }
+
+    const nav = options.navRef.value
+    if (!nav) return
+
+    triggerWidths.value = measureTriggerWidths()
+    const availableWidth = nav.clientWidth
+    visibleValues.value = resolveVisibleTabValues(
+      options.items.value,
+      triggerWidths.value,
+      availableWidth,
+      options.activeValue.value,
+      reservedWidth(),
+      { keepActiveVisible: false },
+    )
+  }
+
+  function updateScrollButtons() {
+    const viewport = navViewportRef.value
+    if (!viewport || !useScrollOverflow.value) {
+      canScrollPrev.value = false
+      canScrollNext.value = false
+      return
+    }
+    canScrollPrev.value = viewport.scrollLeft > 1
+    canScrollNext.value = viewport.scrollLeft + viewport.clientWidth < viewport.scrollWidth - 1
+  }
+
+  function scrollNav(direction: -1 | 1) {
+    navViewportRef.value?.scrollBy({ left: direction * 180, behavior: 'smooth' })
+  }
+
+  function onNavScroll() {
+    updateScrollButtons()
+  }
+
+  async function scrollActiveTabIntoView() {
+    if (!useScrollOverflow.value) return
+    await nextTick()
+    const viewport = navViewportRef.value
+    if (!viewport) return
+    const active = viewport.querySelector<HTMLElement>(`.rs-tabs__trigger[data-state='active']`)
+    active?.scrollIntoView({ inline: 'nearest', block: 'nearest', behavior: 'smooth' })
+    updateScrollButtons()
+  }
+
+  function scheduleLayout() {
+    nextTick(() => {
+      recomputeVisibleTabs()
+      updateScrollButtons()
+      if (!useDropdownOverflow.value) return
+      nextTick(() => {
+        recomputeVisibleTabs()
+        updateScrollButtons()
+      })
+    })
+  }
+
+  onMounted(() => {
+    scheduleLayout()
+    const nav = options.navRef.value
+    if (!nav || typeof ResizeObserver === 'undefined') return
+    resizeObserver = new ResizeObserver(() => scheduleLayout())
+    resizeObserver.observe(nav)
+  })
+
+  onUnmounted(() => {
+    resizeObserver?.disconnect()
+    resizeObserver = null
+  })
+
+  watch(
+    () => [options.items.value, options.overflow.value, options.canAdd.value] as const,
+    () => scheduleLayout(),
+    { deep: true },
+  )
+
+  watch(options.activeValue, () => {
+    scheduleLayout()
+    void scrollActiveTabIntoView()
+  })
+
+  return {
+    navViewportRef,
+    useDropdownOverflow,
+    useScrollOverflow,
+    visibleTabItems,
+    hiddenItems,
+    overflowMenuItems,
+    activeInHidden,
+    showOverflowMenu,
+    canScrollPrev,
+    canScrollNext,
+    scrollNav,
+    onNavScroll,
+    scheduleLayout,
+  }
+}

package/src/composables/useRsToast.ts

@@ -0,0 +1,48 @@
+import { toast } from 'vue-sonner'
+import type { RsToastPosition, RsToastType } from '../components/overlay-utils'
+
+export type { RsToastPosition, RsToastType }
+
+export type RsToastInput =
+  | string
+  | {
+      title: string
+      description?: string
+      position?: RsToastPosition
+      duration?: number
+    }
+
+function resolveToast(input: RsToastInput): {
+  title: string
+  description?: string
+  position?: RsToastPosition
+  duration?: number
+} {
+  if (typeof input === 'string') return { title: input }
+  return input
+}
+
+export function useRsToast() {
+  function show(type: RsToastType, input: RsToastInput): void {
+    const payload = resolveToast(input)
+    const options = {
+      description: payload.description,
+      ...(payload.position ? { position: payload.position } : {}),
+      ...(payload.duration ? { duration: payload.duration } : {}),
+      class: `rs-toast rs-toast--${type}`,
+    }
+
+    if (type === 'success') toast.success(payload.title, options)
+    else if (type === 'error') toast.error(payload.title, options)
+    else if (type === 'warning') toast.warning(payload.title, options)
+    else toast.info(payload.title, options)
+  }
+
+  return {
+    success: (input: RsToastInput) => show('success', input),
+    error: (input: RsToastInput) => show('error', input),
+    info: (input: RsToastInput) => show('info', input),
+    warning: (input: RsToastInput) => show('warning', input),
+    dismiss: toast.dismiss,
+  }
+}

package/src/composables/useTableCellTooltip.ts

@@ -0,0 +1,239 @@
+import { nextTick, onUnmounted, ref, type Ref } from 'vue'
+
+export const RS_TABLE_TIP_ATTR = 'data-rs-table-tip'
+export const RS_TABLE_TIP_MODE_ATTR = 'data-rs-table-tip-mode'
+export const RS_TABLE_TIP_TEXT_ATTR = 'data-rs-table-tip-text'
+/** 列头 headerTip：整表共享浮层，悬停 th-label 显示 */
+export const RS_TABLE_HEADER_TIP_ATTR = 'data-rs-table-header-tip'
+
+const TIP_SIDE_OFFSET = 6
+const TIP_VIEWPORT_PAD = 8
+const TIP_HIDE_GRACE_MS = 80
+
+export interface TableCellTooltipState {
+  visible: boolean
+  ready: boolean
+  text: string
+  kind: 'cell' | 'header'
+  style: { left: string; top: string }
+}
+
+function isHeaderTipHost(host: HTMLElement): boolean {
+  return host.hasAttribute(RS_TABLE_HEADER_TIP_ATTR)
+}
+
+function findTipHost(target: EventTarget | null): HTMLElement | null {
+  if (!(target instanceof Element)) return null
+  const header = target.closest(`[${RS_TABLE_HEADER_TIP_ATTR}]`)
+  if (header instanceof HTMLElement) return header
+  const cell = target.closest(`[${RS_TABLE_TIP_ATTR}], .rs-table__cell-tip`)
+  return cell instanceof HTMLElement ? cell : null
+}
+
+function resolveMeasureEl(host: HTMLElement): HTMLElement {
+  if (host.classList.contains('rs-table__ellipsis-text')) return host
+  const inner = host.querySelector('.rs-table__ellipsis-text')
+  return inner instanceof HTMLElement ? inner : host
+}
+
+function resolveTipText(host: HTMLElement): string | null {
+  if (isHeaderTipHost(host)) {
+    const text = host.getAttribute(RS_TABLE_HEADER_TIP_ATTR)?.trim()
+    return text || null
+  }
+
+  if (host.hasAttribute(RS_TABLE_TIP_ATTR)) {
+    const text = host.getAttribute(RS_TABLE_TIP_ATTR)?.trim()
+    return text || null
+  }
+
+  const mode = host.getAttribute(RS_TABLE_TIP_MODE_ATTR)
+  if (!mode) return null
+
+  const text = host.getAttribute(RS_TABLE_TIP_TEXT_ATTR)?.trim() ?? ''
+  if (mode === 'always') return text || null
+
+  if (mode === 'overflow') {
+    const measure = resolveMeasureEl(host)
+    if (measure.scrollWidth <= measure.clientWidth) return null
+    return text || measure.textContent?.trim() || null
+  }
+
+  return null
+}
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.min(Math.max(value, min), max)
+}
+
+export function useTableCellTooltip(options: {
+  enabled: () => boolean
+  /** 列头 headerTip 共享浮层；默认 true */
+  headerEnabled?: () => boolean
+  delay: () => number
+  tipRef: Ref<HTMLElement | null>
+}): {
+  state: Ref<TableCellTooltipState>
+  onPointerOver: (event: PointerEvent) => void
+  onPointerOut: (event: PointerEvent) => void
+  hide: () => void
+} {
+  const state = ref<TableCellTooltipState>({
+    visible: false,
+    ready: false,
+    text: '',
+    kind: 'cell',
+    style: { left: '0', top: '0' },
+  })
+
+  let tipHost: HTMLElement | null = null
+  let showTimer = 0
+  let hideTimer = 0
+  let positionRaf = 0
+
+  function clearTimers(): void {
+    if (showTimer) {
+      clearTimeout(showTimer)
+      showTimer = 0
+    }
+    if (hideTimer) {
+      clearTimeout(hideTimer)
+      hideTimer = 0
+    }
+  }
+
+  function cancelPositionRaf(): void {
+    if (positionRaf) {
+      cancelAnimationFrame(positionRaf)
+      positionRaf = 0
+    }
+  }
+
+  function positionTip(host: HTMLElement): void {
+    const tipEl = options.tipRef.value
+    if (!tipEl) return
+
+    const hostRect = host.getBoundingClientRect()
+    const tipRect = tipEl.getBoundingClientRect()
+    const vw = window.innerWidth
+    const vh = window.innerHeight
+
+    let left: number
+    let top: number
+
+    if (isHeaderTipHost(host)) {
+      left = hostRect.left
+      top = hostRect.bottom + TIP_SIDE_OFFSET
+      if (top + tipRect.height > vh - TIP_VIEWPORT_PAD) {
+        top = hostRect.top - tipRect.height - TIP_SIDE_OFFSET
+      }
+    } else {
+      left = hostRect.left + hostRect.width / 2 - tipRect.width / 2
+      top = hostRect.top - tipRect.height - TIP_SIDE_OFFSET
+      if (top < TIP_VIEWPORT_PAD) {
+        top = hostRect.bottom + TIP_SIDE_OFFSET
+      }
+    }
+
+    left = clamp(left, TIP_VIEWPORT_PAD, Math.max(TIP_VIEWPORT_PAD, vw - tipRect.width - TIP_VIEWPORT_PAD))
+    top = clamp(top, TIP_VIEWPORT_PAD, Math.max(TIP_VIEWPORT_PAD, vh - tipRect.height - TIP_VIEWPORT_PAD))
+
+    state.value.style = {
+      left: `${left}px`,
+      top: `${top}px`,
+    }
+    state.value.ready = true
+  }
+
+  function hide(): void {
+    clearTimers()
+    cancelPositionRaf()
+    tipHost = null
+    state.value.visible = false
+    state.value.ready = false
+    state.value.text = ''
+    state.value.kind = 'cell'
+  }
+
+  function show(host: HTMLElement, text: string): void {
+    tipHost = host
+    state.value.text = text
+    state.value.kind = isHeaderTipHost(host) ? 'header' : 'cell'
+    state.value.ready = false
+    state.value.visible = true
+
+    cancelPositionRaf()
+    nextTick(() => {
+      positionRaf = requestAnimationFrame(() => {
+        positionRaf = 0
+        if (tipHost === host) positionTip(host)
+      })
+    })
+  }
+
+  function scheduleShow(host: HTMLElement): void {
+    const header = isHeaderTipHost(host)
+    if (header) {
+      if (options.headerEnabled && !options.headerEnabled()) return
+    } else if (!options.enabled()) {
+      return
+    }
+
+    const text = resolveTipText(host)
+    if (!text) {
+      hide()
+      return
+    }
+
+    clearTimers()
+    if (tipHost !== host) tipHost = host
+
+    const delay = options.delay()
+    if (delay <= 0) {
+      show(host, text)
+      return
+    }
+
+    showTimer = window.setTimeout(() => {
+      showTimer = 0
+      if (tipHost === host) show(host, text)
+    }, delay)
+  }
+
+  function scheduleHide(): void {
+    clearTimers()
+    hideTimer = window.setTimeout(hide, TIP_HIDE_GRACE_MS)
+  }
+
+  function onPointerOver(event: PointerEvent): void {
+    if (event.pointerType === 'touch') return
+
+    const host = findTipHost(event.target)
+    if (!host) {
+      if (tipHost) scheduleHide()
+      return
+    }
+
+    if (host === tipHost && state.value.visible) return
+    if (tipHost && host !== tipHost) hide()
+    scheduleShow(host)
+  }
+
+  function onPointerOut(event: PointerEvent): void {
+    const related = event.relatedTarget
+    if (related instanceof Element && findTipHost(related)) return
+    scheduleHide()
+  }
+
+  onUnmounted(() => {
+    clearTimers()
+    cancelPositionRaf()
+  })
+
+  return {
+    state,
+    onPointerOver,
+    onPointerOut,
+    hide,
+  }
+}