xkit-editor 2.0.0-alpha.0

package/src/components/table-columns-editor.vue

@@ -0,0 +1,353 @@
+<template>
+  <div class="table-columns-editor">
+    <x-input-array
+      :model-value="editableColumns"
+      id-field="__editorId"
+      label-position="top"
+      draggable
+      addable
+      deletable
+      show-footer-add-button
+      :use-scaffold-value="false"
+      use-layout
+      :layout="columnLayout"
+      :items="columnItems"
+      @update:modelValue="handleColumnsChange"
+    />
+
+    <div class="table-columns-editor__operation">
+      <div class="table-columns-editor__operation-main">
+        <span class="table-columns-editor__operation-title">操作列</span>
+        <el-switch v-model="operationVisible" @change="handleOperationChange" />
+      </div>
+      <el-input-number
+        v-if="operationVisible"
+        v-model="operationWidth"
+        :min="60"
+        :step="10"
+        controls-position="right"
+        size="small"
+        @change="handleOperationChange"
+      />
+      <div v-if="operationVisible" class="table-columns-editor__operation-actions">
+        <label class="table-columns-editor__operation-action">
+          <span>新增</span>
+          <el-switch v-model="operationActions.add" @change="handleOperationChange" />
+        </label>
+        <label class="table-columns-editor__operation-action">
+          <span>删除</span>
+          <el-switch v-model="operationActions.delete" @change="handleOperationChange" />
+        </label>
+        <label class="table-columns-editor__operation-action">
+          <span>新增子项</span>
+          <el-switch v-model="operationActions.addChild" @change="handleOperationChange" />
+        </label>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { ElInputNumber, ElSwitch } from 'element-plus'
+import { XInputArray, genId } from 'xkit-ui'
+
+type TableColumn = Record<string, any>
+
+const EDITOR_ID_FIELD = '__editorId'
+
+const props = defineProps<{
+  modelValue?: TableColumn[]
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: TableColumn[]): void
+}>()
+
+const componentTypeOptions = [
+  { label: '输入框', value: 'input' },
+  { label: '多行文本', value: 'textarea' },
+  { label: '数字输入', value: 'input-number' },
+  { label: '下拉框', value: 'select' },
+  { label: '单选框', value: 'x-radios' },
+  { label: '复选框组', value: 'checkbox' },
+  { label: '开关', value: 'switch' },
+  { label: '日期选择', value: 'date-picker' },
+  { label: '图标选择', value: 'x-icon-select' },
+  { label: '文件上传', value: 'x-input-upload' }
+]
+
+const optionComponentTypes = new Set(['select', 'x-radios', 'checkbox'])
+const columnLayout = {
+  row: { gutter: 8 },
+  col: { span: 8 }
+}
+
+const columnItems: any[] = [
+  {
+    label: false,
+    name: 'label',
+    type: 'input',
+    clearable: false,
+    placeholder: '列标题',
+    span: 8
+  },
+  {
+    label: false,
+    name: 'name',
+    type: 'input',
+    clearable: false,
+    placeholder: '字段名',
+    span: 8
+  },
+  {
+    label: false,
+    name: 'type',
+    type: 'select',
+    clearable: false,
+    placeholder: '组件',
+    options: componentTypeOptions,
+    span: 8
+  },
+  // {
+  //   label: false,
+  //   name: 'width',
+  //   type: 'input-number',
+  //   min: 60,
+  //   step: 10,
+  //   controlsPosition: 'right',
+  //   placeholder: '宽度',
+  //   span: 8
+  // },
+  // {
+  //   label: false,
+  //   name: 'placeholder',
+  //   type: 'input',
+  //   placeholder: '占位提示',
+  //   span: 16
+  // },
+  {
+    label: '选项',
+    name: 'options',
+    type: 'x-input-array',
+    labelPosition: 'top',
+    useScaffoldValue: false,
+    showFooterAddButton: true,
+    addable: true,
+    deletable: true,
+    visible(row: TableColumn) {
+      return optionComponentTypes.has(row.type)
+    },
+    items: [
+      {
+        label: false,
+        name: 'label',
+        type: 'input',
+        clearable: false,
+        placeholder: '选项名称'
+      },
+      {
+        label: false,
+        name: 'value',
+        type: 'input',
+        clearable: false,
+        placeholder: '选项值'
+      }
+    ]
+  }
+]
+
+const editableColumns = ref<TableColumn[]>([])
+const operationVisible = ref(true)
+const operationWidth = ref(100)
+const operationActions = ref({
+  add: true,
+  delete: true,
+  addChild: false
+})
+let syncingFromModel = false
+let emitQueued = false
+let queuedColumns: TableColumn[] | undefined
+
+const normalizeEditableColumn = (column: TableColumn, index: number, fallbackEditorId?: string): TableColumn => ({
+  label: column.label || `列${index + 1}`,
+  name: column.name || `field${index + 1}`,
+  type: column.type || 'input',
+  width: column.width ?? 160,
+  ...column,
+  [EDITOR_ID_FIELD]: column[EDITOR_ID_FIELD] || fallbackEditorId || genId('editor_table_column')
+})
+
+const cleanColumn = (column: TableColumn): TableColumn => {
+  const { [EDITOR_ID_FIELD]: _editorId, id: _id, ...rest } = column
+  const result: TableColumn = { ...rest }
+
+  if (!optionComponentTypes.has(result.type)) {
+    delete result.options
+  }
+  if (result.width === '' || result.width == null) {
+    delete result.width
+  }
+  if (result.placeholder === '') {
+    delete result.placeholder
+  }
+
+  return result
+}
+
+const createActionItem = (action: 'add' | 'delete' | 'add-child') => {
+  const labelMap = {
+    add: '新增',
+    delete: '删除',
+    'add-child': '新增子项'
+  }
+  return { type: 'link', action, label: labelMap[action] }
+}
+
+const normalizeOperationActionState = (actions: unknown) => {
+  const actionList = Array.isArray(actions) ? actions : []
+  return {
+    add: actionList.length === 0 || actionList.some((item) => item?.action === 'add' || item === 'add'),
+    delete: actionList.length === 0 || actionList.some((item) => item?.action === 'delete' || item === 'delete'),
+    addChild: actionList.some((item) => item?.action === 'add-child' || item === 'add-child')
+  }
+}
+
+const createOperationActions = () => {
+  const result: TableColumn[] = []
+  if (operationActions.value.add) result.push(createActionItem('add'))
+  if (operationActions.value.delete) result.push(createActionItem('delete'))
+  if (operationActions.value.addChild) result.push(createActionItem('add-child'))
+  return result
+}
+
+const createOperationColumn = (): TableColumn => {
+  const actions = createOperationActions()
+  return {
+    label: '操作',
+    type: 'operation',
+    width: operationWidth.value,
+    actions
+  }
+}
+
+const normalizeOutputColumns = (value: TableColumn[] | undefined) => {
+  const source = Array.isArray(value) ? value : []
+  const operationColumn = source.find((item) => item.type === 'operation')
+  const columns = source.filter((item) => item.type !== 'operation').map(cleanColumn)
+  if (operationColumn) {
+    columns.push({
+      ...cleanColumn(operationColumn),
+      actions: Array.isArray(operationColumn.actions) ? operationColumn.actions : createOperationColumn().actions
+    })
+  }
+  return columns
+}
+
+const isSameColumns = (left: TableColumn[] | undefined, right: TableColumn[] | undefined) => {
+  return JSON.stringify(normalizeOutputColumns(left)) === JSON.stringify(normalizeOutputColumns(right))
+}
+
+const createOutputColumns = (columns: TableColumn[]) => {
+  const result = columns.map((column, index) => cleanColumn(normalizeEditableColumn(column, index)))
+  if (operationVisible.value) {
+    result.push(createOperationColumn())
+  }
+  return result
+}
+
+const syncFromModelValue = (value: TableColumn[] | undefined) => {
+  const source = Array.isArray(value) ? value : []
+  const previousColumns = editableColumns.value
+  const operationColumn = source.find((item) => item.type === 'operation')
+  operationVisible.value = source.length === 0 || Boolean(operationColumn)
+  operationWidth.value = Number(operationColumn?.width) || 100
+  operationActions.value = normalizeOperationActionState(operationColumn?.actions)
+  syncingFromModel = true
+  editableColumns.value = source
+    .filter((item) => item.type !== 'operation')
+    .map((column, index) => normalizeEditableColumn(column, index, previousColumns[index]?.[EDITOR_ID_FIELD]))
+  syncingFromModel = false
+}
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    syncFromModelValue(value)
+  },
+  { immediate: true }
+)
+
+const emitColumns = (sourceColumns = editableColumns.value) => {
+  if (syncingFromModel) return
+
+  const columns = createOutputColumns(sourceColumns)
+  if (isSameColumns(props.modelValue, columns)) return
+
+  queuedColumns = columns
+  if (emitQueued) return
+
+  emitQueued = true
+  queueMicrotask(() => {
+    emitQueued = false
+    const nextColumns = queuedColumns
+    queuedColumns = undefined
+    if (!nextColumns || isSameColumns(props.modelValue, nextColumns)) return
+    emit('update:modelValue', nextColumns)
+  })
+}
+
+const handleColumnsChange = (value: TableColumn[]) => {
+  emitColumns(value)
+}
+
+const handleOperationChange = () => {
+  emitColumns()
+}
+</script>
+
+<style scoped lang="scss">
+.table-columns-editor {
+  width: 100%;
+}
+
+.table-columns-editor__operation {
+  margin-top: 12px;
+  padding-top: 12px;
+  border-top: 1px solid var(--el-border-color-lighter);
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 8px;
+  align-items: center;
+}
+
+.table-columns-editor__operation-main {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.table-columns-editor__operation-actions {
+  grid-column: 1 / -1;
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.table-columns-editor__operation-action {
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  color: var(--el-text-color-regular);
+  font-size: 12px;
+}
+
+.table-columns-editor__operation-title {
+  color: var(--el-text-color-primary);
+  font-size: 13px;
+  font-weight: 600;
+}
+</style>

package/src/components/validation-rules-editor.vue

@@ -0,0 +1,321 @@
+<template>
+  <div class="validation-rules-editor">
+    <div class="validation-rules-editor__section">
+      <div class="validation-rules-editor__row">
+        <span class="validation-rules-editor__label">是否必填</span>
+        <el-switch v-model="requiredEnabled" @change="() => emitRules()" />
+      </div>
+      <el-input
+        v-if="requiredEnabled"
+        v-model="requiredMessage"
+        size="small"
+        placeholder="必填提示"
+        @change="() => emitRules()"
+      />
+    </div>
+
+    <div class="validation-rules-editor__section">
+      <span class="validation-rules-editor__title">预置规则</span>
+      <el-select
+        v-model="selectedPresetTypes"
+        multiple
+        collapse-tags
+        collapse-tags-tooltip
+        clearable
+        size="small"
+        placeholder="请选择预置规则"
+        @change="() => emitRules()"
+      >
+        <el-option v-for="preset in presets" :key="preset.type" :label="preset.label" :value="preset.type" />
+      </el-select>
+    </div>
+
+    <div class="validation-rules-editor__section">
+      <span class="validation-rules-editor__title">自定义规则</span>
+      <x-input-array
+        :model-value="editableCustomRules"
+        id-field="__editorId"
+        label-position="top"
+        addable
+        deletable
+        draggable
+        show-footer-add-button
+        :use-scaffold-value="false"
+        use-layout
+        :layout="customRuleLayout"
+        :items="customRuleItems"
+        @update:modelValue="handleCustomRulesChange"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { ElInput, ElOption, ElSelect, ElSwitch } from 'element-plus'
+import { XInputArray, genId } from 'xkit-ui'
+import type { FormItemRule } from 'element-plus'
+import { getEditorValidationRulePreset, getEditorValidationRulePresets } from '../validation-rules'
+
+type RuleRecord = FormItemRule & Record<string, any>
+type EditableCustomRule = {
+  __editorId?: string
+  mode?: 'pattern' | 'expression'
+  pattern?: string
+  validatorExpression?: string
+  message?: string
+  trigger?: string
+}
+
+const EDITOR_ID_FIELD = '__editorId'
+const PRESET_FIELD = 'editorPresetType'
+const customRuleLayout = {
+  row: { gutter: 8 },
+  col: { span: 8 }
+}
+
+const props = defineProps<{
+  modelValue?: RuleRecord | RuleRecord[]
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: RuleRecord[] | undefined): void
+}>()
+
+const requiredEnabled = ref(false)
+const requiredMessage = ref('')
+const selectedPresetTypes = ref<string[]>([])
+const editableCustomRules = ref<EditableCustomRule[]>([])
+let syncingFromModel = false
+let emitQueued = false
+let queuedRules: RuleRecord[] | undefined
+
+const presets = computed(() => getEditorValidationRulePresets())
+
+const customRuleItems: any[] = [
+  {
+    label: false,
+    name: 'mode',
+    type: 'select',
+    clearable: false,
+    placeholder: '规则类型',
+    options: [
+      { label: '正则', value: 'pattern' },
+      { label: '表达式', value: 'expression' }
+    ],
+    span: 8
+  },
+  {
+    label: false,
+    name: 'trigger',
+    type: 'select',
+    placeholder: '触发',
+    options: [
+      { label: '失焦', value: 'blur' },
+      { label: '变更', value: 'change' }
+    ],
+    span: 8
+  },
+  {
+    label: false,
+    name: 'message',
+    type: 'input',
+    placeholder: '错误提示',
+    span: 8
+  },
+  {
+    label: false,
+    name: 'pattern',
+    type: 'input',
+    placeholder: '正则，例如 ^[A-Z]+$ 或 /abc/i',
+    visible(row: EditableCustomRule) {
+      return (row.mode || 'pattern') === 'pattern'
+    }
+  },
+  {
+    label: false,
+    name: 'validatorExpression',
+    type: 'textarea',
+    placeholder: '表达式，例如 value > 0 && form.type === "A"',
+    visible(row: EditableCustomRule) {
+      return row.mode === 'expression'
+    }
+  }
+]
+
+const normalizeRuleList = (value: RuleRecord | RuleRecord[] | undefined) => {
+  if (!value) return []
+  return Array.isArray(value) ? value : [value]
+}
+
+const isRequiredRule = (rule: RuleRecord) => Boolean(rule.required)
+
+const isPresetRule = (rule: RuleRecord) => typeof rule[PRESET_FIELD] === 'string'
+
+const isCustomRule = (rule: RuleRecord) => !isRequiredRule(rule) && !isPresetRule(rule)
+
+const toStringValue = (value: unknown) => (typeof value === 'string' ? value : '')
+
+const toTriggerValue = (value: unknown) => {
+  if (typeof value === 'string') return value
+  if (Array.isArray(value) && typeof value[0] === 'string') return value[0]
+  return 'blur'
+}
+
+const toPatternValue = (value: unknown) => {
+  if (typeof value === 'string') return value
+  if (value instanceof RegExp) return value.toString()
+  return ''
+}
+
+const normalizeEditableCustomRule = (
+  rule: RuleRecord | EditableCustomRule,
+  index: number,
+  fallbackEditorId?: string
+): EditableCustomRule => ({
+  ...rule,
+  mode: rule.validatorExpression ? 'expression' : 'pattern',
+  trigger: toTriggerValue(rule.trigger),
+  message: toStringValue(rule.message),
+  pattern: toPatternValue(rule.pattern),
+  validatorExpression: toStringValue(rule.validatorExpression),
+  [EDITOR_ID_FIELD]: rule[EDITOR_ID_FIELD] || fallbackEditorId || genId(`editor_validation_rule_${index}`)
+})
+
+const cleanCustomRule = (rule: EditableCustomRule): RuleRecord | undefined => {
+  const { [EDITOR_ID_FIELD]: _editorId, mode = 'pattern', pattern, validatorExpression, message, trigger } = rule
+  const result: RuleRecord = {}
+
+  if (message) result.message = message
+  if (trigger) result.trigger = trigger
+
+  if (mode === 'expression') {
+    const expression = validatorExpression?.trim()
+    if (!expression) return undefined
+    result.validatorExpression = expression
+    result.message ||= '校验未通过'
+    return result
+  }
+
+  const patternValue = pattern?.trim()
+  if (!patternValue) return undefined
+  result.pattern = patternValue
+  result.message ||= '格式不正确'
+  return result
+}
+
+const createRequiredRule = (): RuleRecord | undefined => {
+  if (!requiredEnabled.value) return undefined
+  return {
+    required: true,
+    message: requiredMessage.value || '此项为必填项',
+    trigger: 'blur'
+  }
+}
+
+const createPresetRules = () => {
+  return selectedPresetTypes.value
+    .map((type) => {
+      const preset = getEditorValidationRulePreset(type)
+      return preset
+        ? {
+            ...preset.rule,
+            [PRESET_FIELD]: preset.type
+          }
+        : undefined
+    })
+    .filter(Boolean) as RuleRecord[]
+}
+
+const createOutputRules = (customRules = editableCustomRules.value) => {
+  const rules = [
+    createRequiredRule(),
+    ...createPresetRules(),
+    ...customRules.map(cleanCustomRule)
+  ].filter(Boolean) as RuleRecord[]
+  return rules.length > 0 ? rules : undefined
+}
+
+const normalizeOutputRules = (value: RuleRecord[] | undefined) => value ?? []
+
+const isSameRules = (left: RuleRecord[] | undefined, right: RuleRecord[] | undefined) => {
+  return JSON.stringify(normalizeOutputRules(left)) === JSON.stringify(normalizeOutputRules(right))
+}
+
+const syncFromModelValue = (value: RuleRecord | RuleRecord[] | undefined) => {
+  const rules = normalizeRuleList(value)
+  const requiredRule = rules.find(isRequiredRule)
+  const previousCustomRules = editableCustomRules.value
+
+  syncingFromModel = true
+  requiredEnabled.value = Boolean(requiredRule)
+  requiredMessage.value = typeof requiredRule?.message === 'string' ? requiredRule.message : ''
+  selectedPresetTypes.value = rules.map((rule) => rule[PRESET_FIELD]).filter((type): type is string => typeof type === 'string')
+  editableCustomRules.value = rules
+    .filter(isCustomRule)
+    .map((rule, index) => normalizeEditableCustomRule(rule, index, previousCustomRules[index]?.[EDITOR_ID_FIELD]))
+  syncingFromModel = false
+}
+
+const emitRules = (customRules = editableCustomRules.value) => {
+  if (syncingFromModel) return
+
+  const nextRules = createOutputRules(customRules)
+  if (isSameRules(normalizeRuleList(props.modelValue), nextRules)) return
+
+  queuedRules = nextRules
+  if (emitQueued) return
+
+  emitQueued = true
+  queueMicrotask(() => {
+    emitQueued = false
+    const rules = queuedRules
+    queuedRules = undefined
+    if (isSameRules(normalizeRuleList(props.modelValue), rules)) return
+    emit('update:modelValue', rules)
+  })
+}
+
+const handleCustomRulesChange = (value: EditableCustomRule[]) => {
+  editableCustomRules.value = value.map((rule, index) => normalizeEditableCustomRule(rule, index))
+  emitRules(editableCustomRules.value)
+}
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    syncFromModelValue(value)
+  },
+  { immediate: true }
+)
+</script>
+
+<style scoped lang="scss">
+.validation-rules-editor {
+  width: 100%;
+  display: grid;
+  gap: 12px;
+}
+
+.validation-rules-editor__section {
+  display: grid;
+  gap: 8px;
+}
+
+.validation-rules-editor__row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.validation-rules-editor__label,
+.validation-rules-editor__title {
+  color: var(--el-text-color-regular);
+  font-size: 13px;
+}
+
+.validation-rules-editor__title {
+  font-weight: 600;
+}
+</style>