niuma-ui 1.0.0

package/src/components/resolve-size.ts

@@ -0,0 +1,29 @@
+import { computed, type ComputedRef } from 'vue'
+import type { RsComponentSize } from '../theme/types'
+import { useRsConfigOptional } from '../composables/useRsConfig'
+import { useRsFormContext, type RsFormContext } from './form-utils'
+
+/**
+ * 解析控件尺寸：props → Form → ConfigProvider → md。
+ * 业务应传 `size` 或依赖全局/表单上下文，避免 :deep 改高度。
+ */
+export function resolveRsComponentSize(
+  size: RsComponentSize | undefined,
+  form?: RsFormContext | null,
+): ComputedRef<RsComponentSize> {
+  const config = useRsConfigOptional()
+  return computed(
+    () => size ?? form?.size.value ?? config?.controlSize.value ?? 'md',
+  )
+}
+
+/** 在 setup 内便捷解析（自动读 Form / Config）。 */
+export function useResolvedRsComponentSize(
+  size: () => RsComponentSize | undefined,
+): ComputedRef<RsComponentSize> {
+  const form = useRsFormContext()
+  const config = useRsConfigOptional()
+  return computed(
+    () => size() ?? form?.size.value ?? config?.controlSize.value ?? 'md',
+  )
+}

package/src/components/scrollbar-utils.ts

@@ -0,0 +1,10 @@
+export type RsScrollbarType = 'auto' | 'always' | 'scroll' | 'hover'
+
+export type RsScrollbarOrientation = 'vertical' | 'horizontal' | 'both'
+
+export function resolveScrollbarSize(size: number | string | undefined): string | undefined {
+  if (size === undefined) {
+    return undefined
+  }
+  return typeof size === 'number' ? `${size}px` : size
+}

package/src/components/select-utils.ts

@@ -0,0 +1,72 @@
+export interface RsSelectOption {
+  label: string
+  value: string
+  disabled?: boolean
+}
+
+export interface RsSelectOptionGroup {
+  label: string
+  options: RsSelectOption[]
+}
+
+export type RsSelectOptions = ReadonlyArray<RsSelectOption | RsSelectOptionGroup>
+
+export function isSelectOptionGroup(
+  item: RsSelectOption | RsSelectOptionGroup,
+): item is RsSelectOptionGroup {
+  return 'options' in item && Array.isArray(item.options)
+}
+
+export function flattenSelectOptions(options: RsSelectOptions): RsSelectOption[] {
+  const result: RsSelectOption[] = []
+  for (const item of options) {
+    if (isSelectOptionGroup(item)) {
+      result.push(...item.options)
+    } else {
+      result.push(item)
+    }
+  }
+  return result
+}
+
+export function buildOptionLabelMap(options: RsSelectOptions): Map<string, string> {
+  const map = new Map<string, string>()
+  for (const opt of flattenSelectOptions(options)) {
+    map.set(opt.value, opt.label)
+  }
+  return map
+}
+
+export function buildOptionDisabledMap(options: RsSelectOptions): Map<string, boolean> {
+  const map = new Map<string, boolean>()
+  for (const opt of flattenSelectOptions(options)) {
+    map.set(opt.value, Boolean(opt.disabled))
+  }
+  return map
+}
+
+export function filterSelectOptions(
+  options: RsSelectOptions,
+  query: string,
+  contains: (text: string, search: string) => boolean,
+): RsSelectOptions {
+  const trimmed = query.trim()
+  if (!trimmed) return options
+
+  const result: Array<RsSelectOption | RsSelectOptionGroup> = []
+  for (const item of options) {
+    if (isSelectOptionGroup(item)) {
+      const filtered = item.options.filter((opt) => contains(opt.label, trimmed))
+      if (filtered.length > 0) {
+        result.push({ label: item.label, options: filtered })
+      }
+    } else if (contains(item.label, trimmed)) {
+      result.push(item)
+    }
+  }
+  return result as RsSelectOptions
+}
+
+export function flattenSelectValues(options: RsSelectOptions): string[] {
+  return flattenSelectOptions(options).map((opt) => opt.value)
+}

package/src/components/split-pane-utils.ts

@@ -0,0 +1,187 @@
+/** 面板分割方向：horizontal 左右排布（拖动横向）· vertical 上下排布（拖动纵向） */
+export type RsSplitOrientation = 'horizontal' | 'vertical'
+
+/** 单个面板定义；尺寸单位统一为「占比百分比」(0~100) */
+export interface RsSplitPaneItem {
+  /** 唯一标识，用于插槽名与 v-model:sizes 的顺序映射 */
+  key: string
+  /** 初始尺寸（百分比）；缺省时在剩余空间内均分 */
+  size?: number
+  /** 最小尺寸（百分比），默认 0 */
+  min?: number
+  /** 最大尺寸（百分比），默认 100 */
+  max?: number
+  /** 是否可折叠：拖动越过阈值时吸附到 collapsedSize */
+  collapsible?: boolean
+  /** 折叠后的尺寸（百分比），默认 0；会被限制在 [0, min] */
+  collapsedSize?: number
+  /** 本面板右侧分隔条是否显示抓手；缺省时继承 RsSplitPane.withHandle */
+  resizerHandle?: boolean
+}
+
+/** 由 RsSplitPaneItem 解析出的规范化约束 */
+export interface RsSplitConstraint {
+  min: number
+  max: number
+  collapsible: boolean
+  collapsedSize: number
+}
+
+const clamp = (value: number, lower: number, upper: number): number =>
+  Math.min(Math.max(value, lower), upper)
+
+/** 保留有限位小数，消除浮点毛刺 */
+export function roundSize(value: number, precision = 4): number {
+  const factor = 10 ** precision
+  return Math.round(value * factor) / factor
+}
+
+/** 将面板定义解析为规范化约束，保证 0 ≤ min ≤ max ≤ 100 且 collapsedSize ≤ min */
+export function resolveSplitConstraints(panes: RsSplitPaneItem[]): RsSplitConstraint[] {
+  return panes.map((pane) => {
+    const rawMin = clamp(pane.min ?? 0, 0, 100)
+    const rawMax = clamp(pane.max ?? 100, 0, 100)
+    const min = Math.min(rawMin, rawMax)
+    const max = Math.max(rawMin, rawMax)
+    const collapsedSize = clamp(pane.collapsedSize ?? 0, 0, min)
+    return {
+      min,
+      max,
+      collapsible: pane.collapsible ?? false,
+      collapsedSize,
+    }
+  })
+}
+
+/** 按比例把一组尺寸缩放到总和为 100 */
+function rescaleTo100(sizes: number[]): number[] {
+  if (!sizes.length) return []
+  const sum = sizes.reduce((acc, value) => acc + Math.max(0, value), 0)
+  if (sum <= 0) {
+    const each = 100 / sizes.length
+    return sizes.map(() => each)
+  }
+  return sizes.map((value) => (Math.max(0, value) / sum) * 100)
+}
+
+/**
+ * 计算初始尺寸数组（总和 100）。
+ * 优先使用 provided（受控值），其次面板自身的 size，未指定的项在剩余空间内均分。
+ */
+export function normalizeSplitSizes(
+  panes: RsSplitPaneItem[],
+  provided?: number[] | null,
+): number[] {
+  const count = panes.length
+  if (count === 0) return []
+
+  const seed: (number | null)[] = panes.map((pane, index) => {
+    const candidate = provided?.[index] ?? pane.size
+    return typeof candidate === 'number' && Number.isFinite(candidate)
+      ? Math.max(0, candidate)
+      : null
+  })
+
+  const missing = seed.filter((value) => value === null).length
+  const knownSum = seed.reduce<number>((acc, value) => acc + (value ?? 0), 0)
+  const each = missing > 0 ? Math.max(0, 100 - knownSum) / missing : 0
+  const filled = seed.map((value) => value ?? each)
+  return rescaleTo100(filled).map((value) => roundSize(value))
+}
+
+/** 判断某面板当前是否处于折叠态 */
+export function isSplitPaneCollapsed(size: number, constraint: RsSplitConstraint): boolean {
+  if (!constraint.collapsible) return false
+  return size <= constraint.collapsedSize + 0.01
+}
+
+/**
+ * 在第 index 个分隔条（介于 pane[index] 与 pane[index+1] 之间）上拖动 deltaPercent。
+ * 仅调整相邻两个面板，遵守各自 min/max，并在可折叠时吸附到 collapsedSize。
+ * 返回新的尺寸数组（引用不同，总和保持不变）。
+ */
+export function applySplitResize(
+  sizes: number[],
+  constraints: RsSplitConstraint[],
+  index: number,
+  deltaPercent: number,
+): number[] {
+  if (index < 0 || index >= sizes.length - 1) return sizes
+  const a = sizes[index]
+  const b = sizes[index + 1]
+  const ca = constraints[index]
+  const cb = constraints[index + 1]
+  if (a === undefined || b === undefined || !ca || !cb) return sizes
+
+  const total = a + b
+  let nextA = a + deltaPercent
+
+  // 收缩 A：越过阈值吸附折叠
+  if (ca.collapsible && deltaPercent < 0 && nextA < ca.min) {
+    nextA = nextA <= (ca.min + ca.collapsedSize) / 2 ? ca.collapsedSize : ca.min
+  }
+
+  // 收缩 B（即放大 A）：越过阈值吸附折叠 B
+  if (cb.collapsible && deltaPercent > 0) {
+    const nextB = total - nextA
+    if (nextB < cb.min) {
+      const snappedB = nextB <= (cb.min + cb.collapsedSize) / 2 ? cb.collapsedSize : cb.min
+      nextA = total - snappedB
+    }
+  }
+
+  // 硬约束：A 的可行区间需同时满足 A 与 B 的 min/max
+  const lowerA = Math.max(ca.collapsible ? ca.collapsedSize : ca.min, total - cb.max)
+  const upperA = Math.min(ca.max, total - (cb.collapsible ? cb.collapsedSize : cb.min))
+  nextA = clamp(nextA, Math.min(lowerA, upperA), Math.max(lowerA, upperA))
+
+  const next = sizes.slice()
+  next[index] = roundSize(nextA)
+  next[index + 1] = roundSize(total - nextA)
+  return next
+}
+
+/** 把 pane[index] 设为 target，差额从相邻面板（优先右侧）补偿 */
+function redistribute(sizes: number[], index: number, target: number): number[] {
+  const current = sizes[index]
+  if (current === undefined) return sizes
+  const neighbor = index + 1 < sizes.length ? index + 1 : index - 1
+  if (neighbor < 0) return sizes
+  const next = sizes.slice()
+  const delta = target - current
+  next[index] = roundSize(target)
+  next[neighbor] = roundSize(Math.max(0, (next[neighbor] ?? 0) - delta))
+  return next
+}
+
+/** 折叠 pane[index]（可折叠→collapsedSize，否则→min） */
+export function collapseSplitPane(
+  sizes: number[],
+  constraints: RsSplitConstraint[],
+  index: number,
+): number[] {
+  const constraint = constraints[index]
+  if (!constraint || sizes[index] === undefined) return sizes
+  const target = constraint.collapsible ? constraint.collapsedSize : constraint.min
+  return redistribute(sizes, index, target)
+}
+
+/** 展开 pane[index]（toSize 缺省时回到 min 或均分值），并夹紧到 [min, max] */
+export function expandSplitPane(
+  sizes: number[],
+  constraints: RsSplitConstraint[],
+  index: number,
+  toSize?: number,
+): number[] {
+  const constraint = constraints[index]
+  if (!constraint || sizes[index] === undefined) return sizes
+  const fallback = constraint.min > 0 ? constraint.min : 100 / Math.max(1, sizes.length)
+  const target = clamp(toSize ?? fallback, constraint.min, constraint.max)
+  return redistribute(sizes, index, target)
+}
+
+/** 两组尺寸是否近似相等（用于受控回写时避免抖动） */
+export function splitSizesEqual(a: number[], b: number[], epsilon = 0.01): boolean {
+  if (a.length !== b.length) return false
+  return a.every((value, index) => Math.abs(value - (b[index] ?? 0)) <= epsilon)
+}

package/src/components/steps-utils.ts

@@ -0,0 +1,22 @@
+export type RsStepStatus = 'wait' | 'process' | 'finish' | 'error'
+export type RsStepsOrientation = 'horizontal' | 'vertical'
+export type RsStepsSize = 'sm' | 'md'
+
+export interface RsStepItem {
+  value: string
+  title: string
+  description?: string
+  status?: RsStepStatus
+  disabled?: boolean
+}
+
+export function resolveStepStatus(index: number, activeIndex: number, explicit?: RsStepStatus): RsStepStatus {
+  if (explicit) return explicit
+  if (index < activeIndex) return 'finish'
+  if (index === activeIndex) return 'process'
+  return 'wait'
+}
+
+export function isStepSeparatorCompleted(status: RsStepStatus): boolean {
+  return status === 'finish'
+}

package/src/components/table/RsTableBodyRow.vue

@@ -0,0 +1,287 @@
+<script setup lang="ts" generic="T extends import('../table-utils').RsTableRowData">
+import type { RsTableColumn, RsTableRowDropPosition, RsTableSelectionType } from '../table-utils'
+import type { RsTableCellEditTrigger } from './table-edit-utils'
+import RsTableCell from './RsTableCell.vue'
+import RsTableEditGutter from './RsTableEditGutter.vue'
+import RsTableRowStatus from './RsTableRowStatus.vue'
+
+defineProps<{
+  row: T
+  rowIndex: number
+  rowKey: string
+  columns: RsTableColumn<T>[]
+  /** 列虚拟化左侧占位宽（px） */
+  columnPadLeft?: number
+  /** 列虚拟化右侧占位宽（px） */
+  columnPadRight?: number
+  columnTdClassMap: Map<string, string[]>
+  columnStyleMap: Map<string, Record<string, string> | undefined>
+  showRowDragHandle: boolean
+  expandable: boolean
+  selectable: boolean
+  showIndex: boolean
+  showEditGutter: boolean
+  striped: boolean
+  selectionType: RsTableSelectionType
+  isRadioSelection: boolean
+  tableEditable: boolean
+  editTrigger: RsTableCellEditTrigger
+  rowCommit: boolean
+  allowNull: boolean
+  focusMode: import('./table-edit-utils').RsTableCellEditFocusMode
+  nullLabel: string
+  showRowStatus: boolean
+  selected: boolean
+  highlighted: boolean
+  expanded: boolean
+  disabled: boolean
+  rowDragByRow: boolean
+  dragging: boolean
+  dropTarget: boolean
+  dropPosition: RsTableRowDropPosition | null
+  dragLeadStyle: Record<string, string>
+  expandLeadStyle: Record<string, string>
+  selectLeadStyle: Record<string, string>
+  indexLeadStyle: Record<string, string>
+  gutterLeadStyle: Record<string, string>
+  canExpand: boolean
+  canSelect: boolean
+  rowEditPending: boolean
+  rowDirty: boolean
+  /** gutter 待提交时是否显示撤销按钮 */
+  showGutterRollback?: boolean
+  editingColKey: string | null
+  focusColKey: string | null
+  hasColumnSlot: (key: string) => boolean
+  hasEditSlot: (key: string) => boolean
+  cellTooltipEnabled: (column: RsTableColumn<T>, rowIndex: number) => boolean
+  cellTooltipMode: (column: RsTableColumn<T>, rowIndex: number) => string | undefined
+  cellTooltipText: (column: RsTableColumn<T>, row: T, rowIndex: number) => string | undefined
+  cellTooltipFallbackTitle: (column: RsTableColumn<T>, row: T, rowIndex: number) => string | undefined
+  getCellDraft: (rowKey: string, colKey: string) => string | undefined
+  isCellDirty: (rowKey: string, colKey: string) => boolean
+  getCellError: (rowKey: string, colKey: string) => string | undefined
+  isCellValidating: (rowKey: string, colKey: string) => boolean
+  dragRowLabel: string
+  expandRowLabel: string
+  collapseRowLabel: string
+  selectRowLabel: string
+  rowCommitLabel: string
+  rowRollbackLabel: string
+  gutterCommitHint: string
+}>()
+
+const emit = defineEmits<{
+  click: [event: MouseEvent]
+  cellClick: [colKey: string, event: MouseEvent]
+  cellContextmenu: [colKey: string, event: MouseEvent]
+  /** 数据单元格双击（.stop 后由父级决定进入编辑或转发 rowDblclick） */
+  cellDblclick: [colKey: string, event: MouseEvent]
+  dblclick: [event: MouseEvent]
+  contextmenu: [event: MouseEvent]
+  dragover: [event: DragEvent]
+  dragleave: [event: DragEvent]
+  drop: [event: DragEvent]
+  rowDragStart: [event: DragEvent]
+  rowDragEnd: []
+  toggleExpand: []
+  toggleSelect: []
+  cellStartEdit: [colKey: string]
+  cellCommit: [colKey: string, value: string]
+  cellCancel: [colKey: string]
+  cellUpdateDraft: [colKey: string, value: string]
+  cellNavigate: [colKey: string, direction: import('./table-edit-utils').RsTableCellNavigateDirection]
+  rowCommit: []
+  rowRollback: []
+  gutterCommit: []
+}>()
+</script>
+
+<template>
+  <tr
+    class="rs-table__row"
+    :class="{
+      'rs-table__row--selected': selected,
+      'rs-table__row--highlighted': highlighted && !selected,
+      'rs-table__row--striped': striped && rowIndex % 2 === 1,
+      'rs-table__row--disabled': disabled,
+      'rs-table__row--draggable': rowDragByRow,
+      'rs-table__row--dragging': dragging,
+      'rs-table__row--drop-before': dropTarget && dropPosition === 'before',
+      'rs-table__row--drop-after': dropTarget && dropPosition === 'after',
+      'rs-table__row--drop-into': dropTarget && dropPosition === 'into',
+      'rs-table__row--dirty': rowDirty || rowEditPending,
+    }"
+    @click="emit('click', $event)"
+    @dblclick="emit('dblclick', $event)"
+    @contextmenu="emit('contextmenu', $event)"
+    @dragover="emit('dragover', $event)"
+    @dragleave="emit('dragleave', $event)"
+    @drop="emit('drop', $event)"
+  >
+    <td
+      v-if="showRowDragHandle"
+      class="rs-table__td rs-table__td--drag"
+      :style="dragLeadStyle"
+      @click.stop
+    >
+      <span
+        v-if="!disabled"
+        class="rs-table__row-drag-handle"
+        draggable="true"
+        :aria-label="dragRowLabel"
+        @dragstart="emit('rowDragStart', $event)"
+        @dragend="emit('rowDragEnd')"
+      />
+    </td>
+    <td
+      v-if="expandable"
+      class="rs-table__td rs-table__td--expand"
+      :style="expandLeadStyle"
+      @click.stop
+    >
+      <button
+        v-if="canExpand"
+        type="button"
+        class="rs-table__expand-btn"
+        :class="{ 'rs-table__expand-btn--expanded': expanded }"
+        :aria-label="expanded ? collapseRowLabel : expandRowLabel"
+        @click="emit('toggleExpand')"
+      >
+        ›
+      </button>
+    </td>
+    <td
+      v-if="selectable"
+      class="rs-table__td rs-table__td--selection"
+      :style="selectLeadStyle"
+      @click.stop
+    >
+      <label class="rs-table__checkbox" :class="{ 'rs-table__checkbox--checked': selected }">
+        <input
+          :type="selectionType"
+          class="rs-table__checkbox-input"
+          :name="isRadioSelection ? 'rs-table-radio' : undefined"
+          :checked="selected"
+          :disabled="!canSelect"
+          :aria-label="selectRowLabel"
+          @change="emit('toggleSelect')"
+        >
+        <span
+          class="rs-table__checkbox-box"
+          :class="{ 'rs-table__checkbox-box--radio': isRadioSelection }"
+          aria-hidden="true"
+        />
+      </label>
+    </td>
+    <td
+      v-if="showEditGutter"
+      class="rs-table__td rs-table__td--gutter rs-table__cell--center"
+      :style="gutterLeadStyle"
+    >
+      <RsTableEditGutter
+        :line-number="rowIndex + 1"
+        :pending="rowEditPending"
+        :commit-label="rowCommitLabel"
+        :commit-hint="gutterCommitHint"
+        :rollback-label="rowRollbackLabel"
+        :show-rollback="showGutterRollback ?? rowCommit"
+        @commit="emit('gutterCommit')"
+        @rollback="emit('rowRollback')"
+      />
+    </td>
+    <td
+      v-else-if="showIndex"
+      class="rs-table__td rs-table__td--index rs-table__cell--center"
+      :style="indexLeadStyle"
+    >
+      {{ rowIndex + 1 }}
+    </td>
+    <td
+      v-if="showRowStatus"
+      class="rs-table__td rs-table__td--status rs-table__cell--center"
+      @click.stop
+    >
+      <RsTableRowStatus
+        :dirty="rowDirty"
+        :commit-label="rowCommitLabel"
+        :rollback-label="rowRollbackLabel"
+        @commit="emit('rowCommit')"
+        @rollback="emit('rowRollback')"
+      />
+    </td>
+    <td
+      v-if="(columnPadLeft ?? 0) > 0"
+      class="rs-table__td rs-table__col-pad"
+      :style="{ width: `${columnPadLeft}px`, minWidth: `${columnPadLeft}px` }"
+    />
+    <td
+      v-for="column in columns"
+      :key="column.key"
+      class="rs-table__td rs-table__td--data"
+      :class="[
+        columnTdClassMap.get(column.key),
+        {
+          'rs-table__td--row-draggable': rowDragByRow,
+          'rs-table__td--editing': editingColKey === column.key,
+          'rs-table__td--focused': focusColKey === column.key && editingColKey !== column.key,
+          'rs-table__td--invalid': !!getCellError(rowKey, column.key),
+        },
+      ]"
+      :style="columnStyleMap.get(column.key)"
+      :draggable="rowDragByRow"
+      :aria-selected="focusColKey === column.key || editingColKey === column.key ? 'true' : undefined"
+      @click.stop="emit('cellClick', column.key, $event)"
+      @dblclick.stop="emit('cellDblclick', column.key, $event)"
+      @contextmenu="emit('cellContextmenu', column.key, $event)"
+      @dragstart="rowDragByRow ? emit('rowDragStart', $event) : undefined"
+      @dragend="rowDragByRow ? emit('rowDragEnd') : undefined"
+    >
+      <span
+        :class="[
+          { 'rs-table__cell-tip': cellTooltipEnabled(column, rowIndex) },
+          { 'rs-table__cell-tip--editing': editingColKey === column.key },
+        ]"
+        :data-rs-table-tip-mode="cellTooltipEnabled(column, rowIndex) ? cellTooltipMode(column, rowIndex) : undefined"
+        :data-rs-table-tip-text="cellTooltipText(column, row, rowIndex)"
+        :title="getCellError(rowKey, column.key) || cellTooltipFallbackTitle(column, row, rowIndex)"
+      >
+        <RsTableCell
+          :column="column"
+          :row="row"
+          :row-index="rowIndex"
+          :row-key="rowKey"
+          :table-editable="tableEditable"
+          :editing="editingColKey === column.key"
+          :dirty="isCellDirty(rowKey, column.key)"
+          :focused="focusColKey === column.key"
+          :draft="getCellDraft(rowKey, column.key)"
+          :has-custom-slot="hasColumnSlot(column.key)"
+          :has-edit-slot="hasEditSlot(column.key)"
+          :edit-trigger="editTrigger"
+          :row-commit="rowCommit"
+          :allow-null="allowNull"
+          :focus-mode="focusMode"
+          :null-label="nullLabel"
+          :error-message="getCellError(rowKey, column.key) ?? null"
+          :validating="isCellValidating(rowKey, column.key)"
+          @start-edit="emit('cellStartEdit', column.key)"
+          @commit="emit('cellCommit', column.key, $event)"
+          @cancel="emit('cellCancel', column.key)"
+          @update-draft="emit('cellUpdateDraft', column.key, $event)"
+          @navigate="emit('cellNavigate', column.key, $event)"
+        >
+          <slot :name="column.key" :row="row" :column="column" :index="rowIndex" />
+          <template v-if="hasEditSlot(column.key)" #editor="scope">
+            <slot :name="`edit-${column.key}`" v-bind="scope" />
+          </template>
+        </RsTableCell>
+      </span>
+    </td>
+    <td
+      v-if="(columnPadRight ?? 0) > 0"
+      class="rs-table__td rs-table__col-pad"
+      :style="{ width: `${columnPadRight}px`, minWidth: `${columnPadRight}px` }"
+    />
+  </tr>
+</template>