niuma-ui 1.1.11 → 1.2.0

package/src/components/table/RsTableCell.vue

@@ -1,239 +0,0 @@
-<script setup lang="ts" generic="T extends import('../table-utils').RsTableRowData = any">
-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

@@ -1,18 +0,0 @@
-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

@@ -1,352 +0,0 @@
-<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 tokens = Array.isArray(value) ? value.map(String) : String(value)
-  const empty =
-    tokens === '' || (Array.isArray(tokens) && tokens.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(tokens) ? tokens : [tokens]
-    model.value = joinMultiSelectDraft(list)
-    // 多选不在每次勾选时提交，等下拉关闭
-    return
-  }
-  model.value = Array.isArray(tokens) ? (tokens[0] ?? '') : tokens
-  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/RsTableColGroup.vue

@@ -1,41 +0,0 @@
-<script setup lang="ts" generic="T extends import('../table-utils').RsTableRowData">
-import { useRsTableView } from './rs-table-view-context'
-
-const view = useRsTableView<T>()
-</script>
-
-<template>
-  <colgroup v-if="view.useFixedColumnLayout">
-    <col v-if="view.showRowDragHandle" :style="{ width: `${view.prefixWidths.drag}px` }">
-    <col v-if="view.detailExpandable" :style="{ width: `${view.prefixWidths.expand}px` }">
-    <col v-if="view.showSelectColumn" :style="{ width: `${view.prefixWidths.select}px` }">
-    <col
-      v-if="view.showEditGutterColumn"
-      data-col-key="gutter"
-      :style="{ width: `${view.resolvedGutterWidth}px` }"
-    >
-    <col
-      v-else-if="view.showIndexColumn"
-      :style="{ width: `${view.resolvedIndexWidth}px` }"
-    >
-    <col v-if="view.showRowStatusColumn" :style="{ width: `${view.prefixWidths.status}px` }">
-    <col
-      v-if="view.columnPadLeft > 0"
-      class="rs-table__col-pad"
-      :style="{ width: `${view.columnPadLeft}px` }"
-    >
-    <col
-      v-for="column in view.visibleDataColumns"
-      :key="column.key"
-      :data-col-key="column.key"
-      :style="{
-        width: `${view.resolvedDataColumnWidth(column.key, column.width ?? column.minWidth)}px`,
-      }"
-    >
-    <col
-      v-if="view.columnPadRight > 0"
-      class="rs-table__col-pad"
-      :style="{ width: `${view.columnPadRight}px` }"
-    >
-  </colgroup>
-</template>

package/src/components/table/RsTableEditGutter.vue

@@ -1,54 +0,0 @@
-<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>