niuma-ui 1.0.0

package/src/components/table/RsTableCell.vue

@@ -0,0 +1,239 @@
+<script setup lang="ts" generic="T extends import('../table-utils').RsTableRowData">
+import { computed, ref, watch } from 'vue'
+import type { RsTableColumn } from '../table-utils'
+import RsCheckbox from '../RsCheckbox.vue'
+import RsTableCellEditor from './RsTableCellEditor.vue'
+import RsTableCellContent from './RsTableCellContent'
+import {
+  booleanToEditText,
+  coerceBoolean,
+  isBooleanToggleColumn,
+  isColumnEditable,
+  isColumnNullable,
+  isNullDraft,
+  nullToEditText,
+  resolveCellEditText,
+  resolveColumnCommitOn,
+  resolveColumnDisplayContent,
+  resolveColumnEditorOptions,
+  resolveColumnEditTrigger,
+  resolveColumnRawValue,
+  resolveColumnValueType,
+  type RsTableCellCommitTrigger,
+  type RsTableCellEditFocusMode,
+  type RsTableCellEditTrigger,
+  type RsTableCellNavigateDirection,
+} from './table-edit-utils'
+
+const props = withDefaults(
+  defineProps<{
+    column: RsTableColumn<T>
+    row: T
+    rowIndex: number
+    rowKey: string
+    tableEditable?: boolean
+    editing?: boolean
+    dirty?: boolean
+    focused?: boolean
+    /** 编辑草稿（string）；number 列也在此以文本承载，commit 时再 parse */
+    draft?: string
+    hasCustomSlot?: boolean
+    hasEditSlot?: boolean
+    editTrigger?: RsTableCellEditTrigger
+    rowCommit?: boolean
+    allowNull?: boolean
+    focusMode?: RsTableCellEditFocusMode
+    nullLabel?: string
+    errorMessage?: string | null
+    validating?: boolean
+  }>(),
+  {
+    tableEditable: false,
+    editing: false,
+    dirty: false,
+    focused: false,
+    hasCustomSlot: false,
+    hasEditSlot: false,
+    editTrigger: 'dblclick',
+    rowCommit: false,
+    allowNull: true,
+    focusMode: 'end',
+    nullLabel: '(NULL)',
+    errorMessage: null,
+    validating: false,
+  },
+)
+
+const emit = defineEmits<{
+  startEdit: []
+  commit: [value: string]
+  cancel: []
+  updateDraft: [value: string]
+  navigate: [direction: RsTableCellNavigateDirection]
+}>()
+
+const localDraft = ref('')
+
+const editable = computed(() =>
+  isColumnEditable(props.column, props.row, props.rowIndex, props.tableEditable),
+)
+
+const valueType = computed(() => resolveColumnValueType(props.column))
+const editorOptions = computed(() =>
+  resolveColumnEditorOptions(props.column, props.row, props.rowIndex),
+)
+const isBoolean = computed(() => isBooleanToggleColumn(props.column))
+const nullable = computed(() => isColumnNullable(props.column, props.allowNull))
+const resolvedEditTrigger = computed(() =>
+  resolveColumnEditTrigger(props.column, props.editTrigger),
+)
+const resolvedCommitOn = computed((): RsTableCellCommitTrigger =>
+  resolveColumnCommitOn(props.column, props.rowCommit),
+)
+
+const booleanChecked = computed(() => {
+  if (props.draft !== undefined) {
+    if (isNullDraft(props.draft)) return false
+    return coerceBoolean(props.draft)
+  }
+  const raw = resolveColumnRawValue(props.row, props.column, props.rowIndex)
+  if (raw == null) return false
+  return coerceBoolean(raw)
+})
+
+const isNullDisplay = computed(() => {
+  if (props.draft !== undefined) return isNullDraft(props.draft)
+  if (props.column.render) return false
+  const raw = resolveColumnRawValue(props.row, props.column, props.rowIndex)
+  return raw === null || raw === undefined
+})
+
+const displayContent = computed(() =>
+  resolveColumnDisplayContent(props.row, props.column, props.rowIndex, {
+    draft: props.draft,
+    nullLabel: props.nullLabel,
+  }),
+)
+
+watch(
+  () => props.editing,
+  (editing) => {
+    if (!editing) return
+    localDraft.value = resolveCellEditText(
+      props.row,
+      props.column,
+      props.rowIndex,
+      props.draft,
+    )
+  },
+  { immediate: true },
+)
+
+function onDisplayClick(): void {
+  if (!editable.value || isBoolean.value) return
+  if (resolvedEditTrigger.value === 'click') emit('startEdit')
+}
+
+function onDisplayDblClick(event: MouseEvent): void {
+  if (!editable.value || isBoolean.value) return
+  if (resolvedEditTrigger.value !== 'dblclick') return
+  event.stopPropagation()
+  emit('startEdit')
+}
+
+function onBooleanToggle(event: Event): void {
+  event.preventDefault()
+  event.stopPropagation()
+  if (!editable.value) return
+  emit('commit', booleanToEditText(!booleanChecked.value))
+}
+
+function onEditorUpdate(value: string): void {
+  localDraft.value = value
+  emit('updateDraft', value)
+}
+
+function onEditorCommit(): void {
+  emit('commit', localDraft.value)
+}
+
+function onEditorCancel(): void {
+  emit('cancel')
+}
+
+function onEditorNavigate(direction: RsTableCellNavigateDirection): void {
+  emit('navigate', direction)
+}
+
+function onEditorSetNull(): void {
+  localDraft.value = nullToEditText()
+  emit('updateDraft', localDraft.value)
+}
+</script>
+
+<template>
+  <RsCheckbox
+    v-if="!editing && isBoolean && editable"
+    class="rs-table__cell-check"
+    :class="{
+      'rs-table__cell-check--dirty': dirty,
+      'rs-table__cell-check--invalid': !!errorMessage,
+    }"
+    size="sm"
+    :model-value="booleanChecked"
+    :aria-label="column.title"
+    @click.prevent.stop="onBooleanToggle"
+    @dblclick.stop
+  />
+  <span
+    v-else-if="!editing"
+    class="rs-table__cell-body"
+    :class="{
+      'rs-table__ellipsis-text': column.ellipsis,
+      'rs-table__cell-body--editable': editable,
+      'rs-table__cell-body--readonly': tableEditable && !editable,
+      'rs-table__cell-body--dirty': dirty,
+      'rs-table__cell-body--null': isNullDisplay,
+      'rs-table__cell-body--invalid': !!errorMessage,
+      'rs-table__cell-body--focused': focused && !editing,
+    }"
+    :title="errorMessage || undefined"
+    :aria-readonly="tableEditable && !editable ? 'true' : undefined"
+    :aria-invalid="errorMessage ? 'true' : undefined"
+    @click="onDisplayClick"
+    @dblclick="onDisplayDblClick"
+  >
+    <slot v-if="hasCustomSlot" />
+    <RsTableCellContent v-else :content="displayContent" />
+  </span>
+  <div v-else-if="hasEditSlot" class="rs-table-cell-editor rs-table-cell-editor--custom">
+    <slot
+      name="editor"
+      :draft="localDraft"
+      :row="row"
+      :column="column"
+      :index="rowIndex"
+      :error="errorMessage"
+      :update="onEditorUpdate"
+      :commit="onEditorCommit"
+      :cancel="onEditorCancel"
+    />
+  </div>
+  <RsTableCellEditor
+    v-else
+    v-model="localDraft"
+    :value-type="valueType"
+    :editor-options="editorOptions"
+    size="sm"
+    :commit-on="resolvedCommitOn"
+    :focus-mode="focusMode"
+    :allow-null="nullable"
+    :error-message="errorMessage"
+    :validating="validating"
+    @update:model-value="onEditorUpdate"
+    @commit="onEditorCommit"
+    @cancel="onEditorCancel"
+    @navigate="onEditorNavigate"
+    @set-null="onEditorSetNull"
+  />
+</template>

package/src/components/table/RsTableCellContent.ts

@@ -0,0 +1,18 @@
+import { defineComponent, type PropType, type VNodeChild } from 'vue'
+
+/**
+ * 渲染单元格 `VNodeChild`（string / number / VNode / 数组等）。
+ * 模板插值会对对象走 String()，VNode 必须经渲染函数输出。
+ */
+export default defineComponent({
+  name: 'RsTableCellContent',
+  props: {
+    content: {
+      type: [String, Number, Boolean, Object, Array, Function] as PropType<VNodeChild>,
+      default: null,
+    },
+  },
+  setup(props) {
+    return () => props.content as VNodeChild
+  },
+})

package/src/components/table/RsTableCellEditor.vue

@@ -0,0 +1,351 @@
+<script setup lang="ts">
+import { computed, nextTick, onMounted, ref, useId, watch } from 'vue'
+import type { RsComponentSize } from '../../theme/types'
+import { useRsI18n } from '../../composables/useRsI18n'
+import RsDatePicker from '../RsDatePicker.vue'
+import RsInput from '../RsInput.vue'
+import RsInputNumber from '../RsInputNumber.vue'
+import RsSelect from '../RsSelect.vue'
+import type { RsSelectOptions } from '../select-utils'
+import type { RsTableColumnEditorOptionsResolved, RsTableCellValueType } from '../table-utils'
+import {
+  applyFocusMode,
+  isNullDraft,
+  nullToEditText,
+  resolveCellEditorInputType,
+  usesOverlayEditor,
+  type RsTableCellCommitTrigger,
+  type RsTableCellEditFocusMode,
+  type RsTableCellNavigateDirection,
+} from './table-edit-utils'
+
+const { t } = useRsI18n()
+
+const props = withDefaults(
+  defineProps<{
+    valueType?: RsTableCellValueType
+    editorOptions?: RsTableColumnEditorOptionsResolved
+    size?: RsComponentSize
+    placeholder?: string
+    commitOn?: RsTableCellCommitTrigger
+    autofocus?: boolean
+    /** inline：表格单元格内紧凑编辑；field：Popover/表单场景完整输入框 */
+    variant?: 'inline' | 'field'
+    focusMode?: RsTableCellEditFocusMode
+    allowNull?: boolean
+    errorMessage?: string | null
+    validating?: boolean
+  }>(),
+  {
+    valueType: 'text',
+    size: 'sm',
+    commitOn: 'blur',
+    autofocus: true,
+    variant: 'inline',
+    focusMode: 'end',
+    allowNull: true,
+    errorMessage: null,
+    validating: false,
+  },
+)
+
+const model = defineModel<string>({ default: '' })
+
+const emit = defineEmits<{
+  commit: []
+  cancel: []
+  navigate: [direction: RsTableCellNavigateDirection]
+  setNull: []
+}>()
+
+const rootRef = ref<HTMLElement | null>(null)
+const textareaId = useId()
+const textareaLabel = computed(() => props.placeholder || t('table.editTextarea'))
+/** 仅 date 浮层：打开时抑制 blur 误提交；select 不做关闭特殊处理 */
+const dateOverlayOpen = ref(false)
+/** 多选 select：关闭下拉时再提交 */
+const selectOverlayOpen = ref(false)
+const composing = ref(false)
+
+const inputType = computed(() => resolveCellEditorInputType(props.valueType))
+const isSelect = computed(() => props.valueType === 'select')
+const isMultipleSelect = computed(
+  () => isSelect.value && Boolean(props.editorOptions?.multiple),
+)
+const isDate = computed(() => props.valueType === 'date' || props.valueType === 'datetime')
+const isTextarea = computed(() => props.valueType === 'textarea')
+const isNumber = computed(() => props.valueType === 'number')
+const isTextLike = computed(
+  () => !isSelect.value && !isDate.value && !isTextarea.value && !isNumber.value,
+)
+const isNullValue = computed(() => isNullDraft(model.value))
+const resolvedFocusMode = computed(
+  (): RsTableCellEditFocusMode => props.editorOptions?.focusMode ?? props.focusMode,
+)
+const textareaRows = computed(() => props.editorOptions?.rows ?? 3)
+
+const selectOptions = computed((): RsSelectOptions => props.editorOptions?.options ?? [])
+
+/** 多选草稿：逗号分隔字符串 ↔ string[]（与表设计索引列等约定一致） */
+function parseMultiSelectDraft(text: string): string[] {
+  return String(text ?? '')
+    .split(/[,，]+/)
+    .map((s) => s.trim())
+    .filter(Boolean)
+}
+
+function joinMultiSelectDraft(values: string[]): string {
+  return values
+    .map((s) => String(s).trim())
+    .filter(Boolean)
+    .join(', ')
+}
+
+const selectModelValue = computed((): string | string[] => {
+  if (isNullValue.value) return isMultipleSelect.value ? [] : ''
+  if (isMultipleSelect.value) return parseMultiSelectDraft(model.value)
+  return model.value
+})
+
+watch(selectOverlayOpen, (isOpen, wasOpen) => {
+  if (wasOpen && !isOpen && isMultipleSelect.value) emit('commit')
+})
+
+const displayModel = computed({
+  get: () => (isNullDraft(model.value) ? '' : model.value),
+  set: (value: string) => {
+    model.value = value
+  },
+})
+
+/** number 列：表格草稿为 string，InputNumber stringMode 用 string | null */
+const numberDraft = computed({
+  get: (): string | null => {
+    if (isNullDraft(model.value)) return null
+    return model.value === '' ? null : model.value
+  },
+  set: (value: string | null) => {
+    if (isNullDraft(model.value) && (value == null || value === '')) return
+    model.value = value == null ? '' : String(value)
+  },
+})
+
+async function focusEditor(): Promise<void> {
+  await nextTick()
+  if (isSelect.value || isDate.value) return
+  const el = rootRef.value?.querySelector('input, textarea') as
+    | HTMLInputElement
+    | HTMLTextAreaElement
+    | null
+    | undefined
+  if (!el) return
+  el.focus()
+  if (isNumber.value) {
+    applyFocusMode(el, resolvedFocusMode.value)
+    return
+  }
+  if (el instanceof HTMLInputElement && (el.type === 'number' || el.type === 'date' || el.type === 'datetime-local')) {
+    return
+  }
+  applyFocusMode(el, resolvedFocusMode.value)
+}
+
+onMounted(() => {
+  if (props.autofocus) void focusEditor()
+})
+
+function shouldCommitOnEnter(): boolean {
+  if (isTextarea.value && !composing.value) return false
+  return props.commitOn === 'enter' || props.commitOn === 'blur' || props.commitOn === 'manual'
+}
+
+function shouldCommitOnBlur(): boolean {
+  // select：change 提交，不做关闭/blur 特殊处理
+  if (props.valueType === 'select' || props.commitOn === 'change') return false
+  // 日期面板打开时不 blur 提交；关闭后也不靠 blur（面板「确认」只改草稿，Enter/Tab 再提交）
+  if (isDate.value) return false
+  if (usesOverlayEditor(props.valueType)) return false
+  return props.commitOn === 'blur' || props.commitOn === 'manual'
+}
+
+function shouldCommitOnChange(): boolean {
+  return props.commitOn === 'change'
+}
+
+function onPressEnter(event: KeyboardEvent): void {
+  if (event.isComposing || composing.value) return
+  if (isTextarea.value) {
+    if (event.ctrlKey || event.metaKey) {
+      event.preventDefault()
+      emit('commit')
+    }
+    return
+  }
+  event.preventDefault()
+  if (shouldCommitOnEnter()) emit('commit')
+}
+
+function onBlur(): void {
+  if (isDate.value && dateOverlayOpen.value) {
+    window.setTimeout(() => {
+      if (shouldCommitOnBlur()) emit('commit')
+    }, 0)
+    return
+  }
+  if (shouldCommitOnBlur()) emit('commit')
+}
+
+function onKeydown(event: KeyboardEvent): void {
+  if (event.isComposing || composing.value) {
+    if (event.key === 'Process') return
+  }
+  if (event.key === 'Enter') {
+    onPressEnter(event)
+    return
+  }
+  if (event.key === 'Escape') {
+    if (event.isComposing || composing.value) return
+    event.preventDefault()
+    emit('cancel')
+    return
+  }
+  if (event.key === 'Tab') {
+    if (event.isComposing || composing.value) return
+    event.preventDefault()
+    emit('navigate', event.shiftKey ? 'prev' : 'next')
+    return
+  }
+  if (props.allowNull && event.key === '0' && (event.ctrlKey || event.metaKey)) {
+    event.preventDefault()
+    model.value = nullToEditText()
+    emit('setNull')
+    emit('commit')
+  }
+}
+
+function onSelectUpdate(value: string | string[]): void {
+  const empty =
+    value == null || value === '' || (Array.isArray(value) && value.length === 0)
+  // 表格内下拉默认不可清除：仅选择；显式 clearable 时才允许清空
+  if (empty) {
+    if (!props.editorOptions?.clearable) return
+    model.value = props.allowNull ? nullToEditText() : ''
+    // 多选：关闭面板时再提交；单选 clearable 仍走 change
+    if (!isMultipleSelect.value && shouldCommitOnChange()) emit('commit')
+    return
+  }
+  if (isMultipleSelect.value) {
+    const list = Array.isArray(value) ? value.map(String) : [String(value)]
+    model.value = joinMultiSelectDraft(list)
+    // 多选不在每次勾选时提交，等下拉关闭
+    return
+  }
+  model.value = Array.isArray(value) ? (value[0] ?? '') : String(value ?? '')
+  if (shouldCommitOnChange()) emit('commit')
+}
+
+function onDateUpdate(value: string): void {
+  model.value = value || (props.allowNull ? nullToEditText() : '')
+  // rowCommit(manual)：确认/清空时写入 staged（点外侧关闭不改值，不会进这里）
+  if (props.commitOn === 'manual') emit('commit')
+}
+</script>
+
+<template>
+  <div
+    ref="rootRef"
+    class="rs-table-cell-editor"
+    :class="[
+      `rs-table-cell-editor--${size}`,
+      `rs-table-cell-editor--${valueType}`,
+      `rs-table-cell-editor--${variant}`,
+      {
+        'rs-table-cell-editor--overlay': isSelect || isDate,
+        'rs-table-cell-editor--invalid': !!errorMessage,
+        'rs-table-cell-editor--null': isNullValue,
+        'rs-table-cell-editor--validating': validating,
+      },
+    ]"
+    :title="errorMessage || undefined"
+    :aria-invalid="errorMessage ? 'true' : undefined"
+    :aria-busy="validating ? 'true' : undefined"
+    @click.stop
+    @dblclick.stop
+  >
+    <span v-if="validating" class="rs-table-cell-editor__validating" aria-hidden="true">…</span>
+    <span v-else-if="isNullValue && !isSelect && !isDate" class="rs-table-cell-editor__null-tag" aria-hidden="true">
+      NULL
+    </span>
+    <RsSelect
+      v-if="isSelect"
+      :model-value="selectModelValue"
+      v-model:open="selectOverlayOpen"
+      :options="selectOptions"
+      :size="size"
+      block
+      :multiple="isMultipleSelect"
+      :searchable="editorOptions?.searchable ?? true"
+      :creatable="editorOptions?.creatable ?? false"
+      :clearable="editorOptions?.clearable ?? false"
+      :placeholder="placeholder"
+      @update:model-value="onSelectUpdate"
+      @keydown="onKeydown"
+    />
+    <RsDatePicker
+      v-else-if="isDate"
+      :model-value="isNullValue ? '' : model"
+      v-model:open="dateOverlayOpen"
+      :with-time="valueType === 'datetime'"
+      :with-seconds="editorOptions?.withSeconds ?? valueType === 'datetime'"
+      :placeholder="placeholder"
+      @update:model-value="(v) => onDateUpdate(typeof v === 'string' ? v : '')"
+    />
+    <RsInputNumber
+      v-else-if="isNumber"
+      v-model="numberDraft"
+      string-mode
+      :size="size"
+      :placeholder="placeholder"
+      :disabled="validating"
+      :min="editorOptions?.min"
+      :max="editorOptions?.max"
+      :step="editorOptions?.step ?? 1"
+      :precision="editorOptions?.precision"
+      :controls="editorOptions?.controls ?? variant === 'field'"
+      :keyboard="true"
+      @press-enter="onPressEnter"
+      @blur="onBlur"
+      @keydown="onKeydown"
+    />
+    <template v-else-if="isTextarea">
+      <label class="rs-table-cell-editor__sr-label" :for="textareaId">
+        {{ textareaLabel }}
+      </label>
+      <textarea
+        :id="textareaId"
+        v-model="displayModel"
+        class="rs-table-cell-editor__textarea"
+        :rows="textareaRows"
+        :placeholder="placeholder"
+        :disabled="validating"
+        @keydown="onKeydown"
+        @blur="onBlur"
+        @compositionstart="composing = true"
+        @compositionend="composing = false"
+      />
+    </template>
+    <RsInput
+      v-else-if="isTextLike"
+      v-model="displayModel"
+      :type="inputType === 'textarea' ? 'text' : inputType"
+      :size="size"
+      :placeholder="placeholder"
+      :disabled="validating"
+      @press-enter="onPressEnter"
+      @blur="onBlur"
+      @keydown="onKeydown"
+      @compositionstart="composing = true"
+      @compositionend="composing = false"
+    />
+  </div>
+</template>

package/src/components/table/RsTableEditGutter.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import RsIcon from '../RsIcon.vue'
+
+defineProps<{
+  lineNumber: number
+  pending: boolean
+  commitLabel?: string
+  commitHint?: string
+  rollbackLabel?: string
+  showRollback?: boolean
+}>()
+
+const emit = defineEmits<{
+  commit: []
+  rollback: []
+}>()
+</script>
+
+<template>
+  <div
+    class="rs-table-edit-gutter"
+    :class="{ 'rs-table-edit-gutter--pending': pending }"
+  >
+    <span
+      class="rs-table-edit-gutter__line"
+      :class="{ 'rs-table-edit-gutter__line--hidden': pending }"
+      aria-hidden="true"
+    >
+      {{ lineNumber }}
+    </span>
+    <div v-if="pending" class="rs-table-edit-gutter__actions">
+      <button
+        type="button"
+        class="rs-table-edit-gutter__commit"
+        :aria-label="commitLabel"
+        :title="commitLabel"
+        @click.stop="emit('commit')"
+      >
+        <RsIcon name="check" :size="12" />
+        <span class="rs-table-edit-gutter__commit-hint">{{ commitHint ?? commitLabel }}</span>
+      </button>
+      <button
+        v-if="showRollback"
+        type="button"
+        class="rs-table-edit-gutter__rollback"
+        :aria-label="rollbackLabel"
+        :title="rollbackLabel"
+        @click.stop="emit('rollback')"
+      >
+        <RsIcon name="x" :size="12" />
+      </button>
+    </div>
+  </div>
+</template>