xkit-editor 2.0.0-alpha.0

package/src/utils/__tests__/record-field.test.ts

@@ -0,0 +1,34 @@
+import { describe, expect, it } from 'vitest'
+import { fieldRowsToRecord, recordToFieldRows } from '../record-field'
+
+describe('record field helpers', () => {
+  it('converts records to key-value rows', () => {
+    expect(recordToFieldRows({ name: 'Alice', age: 18 })).toEqual([
+      { key: 'name', value: 'Alice' },
+      { key: 'age', value: 18 }
+    ])
+  })
+
+  it('returns empty rows for non-record values', () => {
+    expect(recordToFieldRows(undefined)).toEqual([])
+    expect(recordToFieldRows([])).toEqual([])
+  })
+
+  it('converts key-value rows to records', () => {
+    expect(
+      fieldRowsToRecord([
+        { key: ' name ', value: 'Alice' },
+        { key: '', value: 'ignored' },
+        { key: 'age', value: 18 }
+      ])
+    ).toEqual({
+      name: 'Alice',
+      age: 18
+    })
+  })
+
+  it('returns undefined for empty records', () => {
+    expect(fieldRowsToRecord([])).toBeUndefined()
+    expect(fieldRowsToRecord([{ key: '', value: 'ignored' }])).toBeUndefined()
+  })
+})

package/src/utils/component-replace.ts

@@ -0,0 +1,67 @@
+import type { ComponentConfig, ComponentReplaceGroup } from '../component-configs/types'
+import { EDITOR_ID_FIELD, cloneSchemaValue, stripRuntimeMetaDeep } from './editor-schema'
+
+const COMMON_REPLACE_KEYS = ['name', 'label', 'labelPosition', 'span', 'offset', 'offsetRight', 'layoutCfg', 'visible', 'disabled', 'static']
+
+const REPLACE_GROUP_KEYS: Record<ComponentReplaceGroup, string[]> = {
+  placeholder: ['placeholder', 'clearable', 'startPlaceholder', 'endPlaceholder'],
+  lengthLimit: ['maxlength', 'showWordLimit'],
+  options: ['options', 'optionSource', 'props'],
+  numeric: ['min', 'max', 'step', 'precision', 'stepStrictly'],
+  date: ['_type', 'format', 'valueFormat', 'rangeSeparator', 'rangeSeperator', 'editable', 'unlinkPanels'],
+  upload: ['mode', 'multiple', 'tips', 'limit', 'limitSize', 'accept', 'joinValues', 'joinValuesField', 'valueField', 'idMode'],
+  icon: ['iconSources', 'clearable'],
+  collection: ['idField', 'defaultValue', 'minLength', 'maxLength']
+}
+
+const hasOwn = (value: Record<string, any>, key: string) => Object.prototype.hasOwnProperty.call(value, key)
+
+const copyKeys = (target: Record<string, any>, source: Record<string, any>, keys: string[]) => {
+  keys.forEach((key) => {
+    if (hasOwn(source, key)) {
+      target[key] = cloneSchemaValue(source[key])
+    }
+  })
+}
+
+const getSharedGroups = (sourceConfig: ComponentConfig, targetConfig: ComponentConfig) => {
+  const sourceGroups = new Set(sourceConfig.replace?.groups || [])
+  return (targetConfig.replace?.groups || []).filter((group) => sourceGroups.has(group))
+}
+
+export const isReplaceableComponentConfig = (config: ComponentConfig | undefined) => {
+  return Boolean(config && config.editorKind !== 'container')
+}
+
+export const createReplacementNode = (params: { source: Record<string, any>; sourceConfig: ComponentConfig; targetConfig: ComponentConfig }) => {
+  const { source, sourceConfig, targetConfig } = params
+  const next = cloneSchemaValue(targetConfig.scaffold) as Record<string, any>
+
+  copyKeys(next, source, COMMON_REPLACE_KEYS)
+  getSharedGroups(sourceConfig, targetConfig).forEach((group) => {
+    copyKeys(next, source, REPLACE_GROUP_KEYS[group])
+  })
+  copyKeys(next, source, sourceConfig.replace?.keep || [])
+  copyKeys(next, source, targetConfig.replace?.keep || [])
+
+  const migrated = targetConfig.replace?.migrate?.({
+    source,
+    targetScaffold: cloneSchemaValue(targetConfig.scaffold),
+    sourceConfig,
+    targetConfig
+  })
+  if (migrated && typeof migrated === 'object') {
+    Object.assign(next, migrated)
+  }
+
+  ;[...(sourceConfig.replace?.drop || []), ...(targetConfig.replace?.drop || [])].forEach((key) => {
+    delete next[key]
+  })
+
+  if (hasOwn(source, EDITOR_ID_FIELD)) {
+    next[EDITOR_ID_FIELD] = source[EDITOR_ID_FIELD]
+  }
+
+  delete next.id
+  return stripRuntimeMetaDeep(next)
+}

package/src/utils/editor-schema.ts

@@ -0,0 +1,374 @@
+export const EDITOR_ID_FIELD = '__editorId'
+
+export type EditorId = string | number
+export type EditorPath = Array<string | number>
+export type EditorSchemaNode = Record<string, any>
+
+export interface EditorTreeResult {
+  items: EditorSchemaNode[]
+  changed: boolean
+}
+
+export const EDITOR_CHILD_KEYS = ['body', 'items']
+
+const getEditorChildKeys = (item: EditorSchemaNode): string[] => {
+  return EDITOR_CHILD_KEYS.filter((key) => Array.isArray(item?.[key]))
+}
+
+export const getEditorId = (item: any): EditorId | undefined => {
+  return item?.[EDITOR_ID_FIELD] ?? item?._id
+}
+
+export const cloneSchemaValue = <T>(value: T): T => {
+  return JSON.parse(JSON.stringify(value))
+}
+
+export const stripRuntimeMetaDeep = <T>(value: T): T => {
+  if (Array.isArray(value)) {
+    return value.map((item) => stripRuntimeMetaDeep(item)) as T
+  }
+  if (!value || typeof value !== 'object') return value
+
+  const { _id, ...rest } = value as Record<string, any>
+  const next: Record<string, any> = {}
+  Object.entries(rest).forEach(([key, itemValue]) => {
+    next[key] = stripRuntimeMetaDeep(itemValue)
+  })
+  return next as T
+}
+
+export const stripEditorMetaDeep = <T>(value: T): T => {
+  if (Array.isArray(value)) {
+    return value.map((item) => stripEditorMetaDeep(item)) as T
+  }
+  if (!value || typeof value !== 'object') return value
+
+  const { [EDITOR_ID_FIELD]: _editorId, _id, ...rest } = value as Record<string, any>
+  const next: Record<string, any> = {}
+  Object.entries(rest).forEach(([key, itemValue]) => {
+    next[key] = stripEditorMetaDeep(itemValue)
+  })
+  return next as T
+}
+
+export const ensureEditorId = (item: any, createEditorId: () => EditorId) => {
+  if (!item || typeof item !== 'object') return item
+  if (item[EDITOR_ID_FIELD]) return item
+  return {
+    ...item,
+    [EDITOR_ID_FIELD]: createEditorId()
+  }
+}
+
+export const normalizeEditorIds = (items: EditorSchemaNode[] = [], createEditorId: () => EditorId): EditorTreeResult => {
+  let changed = false
+  const nextItems = items.map((item) => {
+    let nextItem = ensureEditorId(item, createEditorId)
+    if (nextItem !== item) changed = true
+
+    getEditorChildKeys(nextItem).forEach((childKey) => {
+      const normalizedBody = normalizeEditorIds(nextItem[childKey], createEditorId)
+      if (normalizedBody.changed) {
+        nextItem = {
+          ...nextItem,
+          [childKey]: normalizedBody.items
+        }
+        changed = true
+      }
+    })
+
+    return nextItem
+  })
+
+  return { items: nextItems, changed }
+}
+
+export const updateByEditorId = (
+  items: EditorSchemaNode[] = [],
+  editorId: EditorId | undefined,
+  nextNode: EditorSchemaNode
+): EditorTreeResult => {
+  if (editorId === undefined) return { items, changed: false }
+
+  let changed = false
+  const nextItems = items.map((item) => {
+    if (getEditorId(item) === editorId) {
+      changed = true
+      return nextNode
+    }
+
+    for (const childKey of getEditorChildKeys(item)) {
+      const updatedBody = updateByEditorId(item[childKey], editorId, nextNode)
+      if (updatedBody.changed) {
+        changed = true
+        return {
+          ...item,
+          [childKey]: updatedBody.items
+        }
+      }
+    }
+
+    return item
+  })
+
+  return { items: nextItems, changed }
+}
+
+export const findByEditorId = (items: EditorSchemaNode[] = [], editorId: EditorId | undefined): EditorSchemaNode | undefined => {
+  if (editorId === undefined) return undefined
+
+  for (const item of items) {
+    if (getEditorId(item) === editorId) return item
+
+    for (const childKey of getEditorChildKeys(item)) {
+      const result = findByEditorId(item[childKey], editorId)
+      if (result) return result
+    }
+  }
+}
+
+export const preserveUneditedChildCollections = (
+  previousNode: EditorSchemaNode | undefined,
+  nextNode: EditorSchemaNode,
+  editedKeys: Set<string>
+) => {
+  if (!previousNode) return nextNode
+
+  let result = nextNode
+  getEditorChildKeys(previousNode).forEach((childKey) => {
+    if (editedKeys.has(childKey)) return
+    result = {
+      ...result,
+      [childKey]: previousNode[childKey]
+    }
+  })
+  return result
+}
+
+export const removeByEditorId = (items: EditorSchemaNode[] = [], editorId: EditorId | undefined): EditorTreeResult => {
+  if (editorId === undefined) return { items, changed: false }
+
+  let changed = false
+  const nextItems: EditorSchemaNode[] = []
+  items.forEach((item) => {
+    if (getEditorId(item) === editorId) {
+      changed = true
+      return
+    }
+
+    for (const childKey of getEditorChildKeys(item)) {
+      const updatedBody = removeByEditorId(item[childKey], editorId)
+      if (updatedBody.changed) {
+        changed = true
+        nextItems.push({
+          ...item,
+          [childKey]: updatedBody.items
+        })
+        return
+      }
+    }
+
+    nextItems.push(item)
+  })
+
+  return { items: changed ? nextItems : items, changed }
+}
+
+export const insertAfterEditorId = (
+  items: EditorSchemaNode[] = [],
+  editorId: EditorId | undefined,
+  nextNode: EditorSchemaNode
+): EditorTreeResult => {
+  if (editorId === undefined) return { items, changed: false }
+
+  let changed = false
+  const nextItems: EditorSchemaNode[] = []
+  items.forEach((item) => {
+    nextItems.push(item)
+    if (getEditorId(item) === editorId) {
+      nextItems.push(nextNode)
+      changed = true
+      return
+    }
+
+    for (const childKey of getEditorChildKeys(item)) {
+      const updatedBody = insertAfterEditorId(item[childKey], editorId, nextNode)
+      if (updatedBody.changed) {
+        nextItems[nextItems.length - 1] = {
+          ...item,
+          [childKey]: updatedBody.items
+        }
+        changed = true
+        break
+      }
+    }
+  })
+
+  return { items: changed ? nextItems : items, changed }
+}
+
+export const assignNewEditorIdsDeep = (
+  item: EditorSchemaNode,
+  createEditorId: () => EditorId
+): EditorSchemaNode => {
+  const nextItem = stripRuntimeMetaDeep(cloneSchemaValue(item)) as EditorSchemaNode
+  nextItem[EDITOR_ID_FIELD] = createEditorId()
+
+  getEditorChildKeys(nextItem).forEach((childKey) => {
+    nextItem[childKey] = nextItem[childKey].map((child) => assignNewEditorIdsDeep(child, createEditorId))
+  })
+
+  return nextItem
+}
+
+export const moveItem = (items: EditorSchemaNode[] = [], oldIndex: number, newIndex: number): EditorTreeResult => {
+  if (oldIndex === newIndex || oldIndex < 0 || newIndex < 0 || oldIndex >= items.length || newIndex >= items.length) {
+    return { items, changed: false }
+  }
+
+  const nextItems = [...items]
+  const [movedItem] = nextItems.splice(oldIndex, 1)
+  nextItems.splice(newIndex, 0, movedItem)
+  return { items: nextItems, changed: true }
+}
+
+export const getArrayByEditorPath = (items: EditorSchemaNode[] = [], path: EditorPath = []): EditorSchemaNode[] | undefined => {
+  if (path.length === 0) return items
+
+  let current: any = items
+  for (const segment of path) {
+    if (Array.isArray(current) && typeof segment === 'number') {
+      current = current[segment]
+      continue
+    }
+    if (current && typeof current === 'object' && typeof segment === 'string') {
+      current = current[segment]
+      continue
+    }
+    return undefined
+  }
+
+  return Array.isArray(current) ? current : undefined
+}
+
+const updateArrayByEditorPath = (
+  items: EditorSchemaNode[],
+  path: EditorPath,
+  updater: (target: EditorSchemaNode[]) => EditorSchemaNode[] | undefined
+): EditorTreeResult => {
+  if (path.length === 0) {
+    const nextItems = updater(items)
+    return nextItems ? { items: nextItems, changed: true } : { items, changed: false }
+  }
+
+  const [head, nextSegment, ...rest] = path
+  if (typeof head !== 'number' || typeof nextSegment !== 'string') {
+    return { items, changed: false }
+  }
+
+  const item = items[head]
+  if (!item) return { items, changed: false }
+
+  const childValue = item[nextSegment]
+  if (!Array.isArray(childValue)) return { items, changed: false }
+
+  const updatedChild = updateArrayByEditorPath(childValue, rest, updater)
+  if (!updatedChild.changed) return { items, changed: false }
+
+  const nextItems = [...items]
+  nextItems[head] = {
+    ...item,
+    [nextSegment]: updatedChild.items
+  }
+  return { items: nextItems, changed: true }
+}
+
+export const insertAtEditorPath = (
+  items: EditorSchemaNode[] = [],
+  containerPath: EditorPath = [],
+  index: number,
+  nextNode: EditorSchemaNode
+): EditorTreeResult => {
+  return updateArrayByEditorPath(items, containerPath, (target) => {
+    const nextItems = [...target]
+    const safeIndex = Math.max(0, Math.min(index, nextItems.length))
+    nextItems.splice(safeIndex, 0, nextNode)
+    return nextItems
+  })
+}
+
+export const moveWithinEditorPath = (
+  items: EditorSchemaNode[] = [],
+  containerPath: EditorPath = [],
+  oldIndex: number,
+  newIndex: number
+): EditorTreeResult => {
+  return updateArrayByEditorPath(items, containerPath, (target) => {
+    const moved = moveItem(target, oldIndex, newIndex)
+    return moved.changed ? moved.items : undefined
+  })
+}
+
+export const moveAcrossEditorPaths = (
+  items: EditorSchemaNode[] = [],
+  fromContainerPath: EditorPath = [],
+  fromIndex: number,
+  toContainerPath: EditorPath = [],
+  toIndex: number
+): EditorTreeResult => {
+  const source = getArrayByEditorPath(items, fromContainerPath)
+  const movingItem = source?.[fromIndex]
+  if (!movingItem) return { items, changed: false }
+  if (isEditorPathPrefix([...fromContainerPath, fromIndex], toContainerPath)) {
+    return { items, changed: false }
+  }
+
+  let changed = false
+  const removed = updateArrayByEditorPath(items, fromContainerPath, (target) => {
+    if (fromIndex < 0 || fromIndex >= target.length) return undefined
+    const nextItems = [...target]
+    nextItems.splice(fromIndex, 1)
+    changed = true
+    return nextItems
+  })
+  if (!removed.changed) return { items, changed: false }
+
+  const sameContainer = JSON.stringify(fromContainerPath) === JSON.stringify(toContainerPath)
+  const safeToIndex = sameContainer && toIndex > fromIndex ? toIndex - 1 : toIndex
+  const adjustedToContainerPath = adjustContainerPathAfterRemoval(toContainerPath, fromContainerPath, fromIndex)
+  const inserted = insertAtEditorPath(removed.items, adjustedToContainerPath, safeToIndex, movingItem)
+  if (!inserted.changed) return { items, changed: false }
+  return { items: inserted.items, changed: changed && inserted.changed }
+}
+
+const adjustContainerPathAfterRemoval = (targetPath: EditorPath, sourceContainerPath: EditorPath, sourceIndex: number): EditorPath => {
+  if (!isEditorPathPrefix(sourceContainerPath, targetPath)) return targetPath
+  const shiftedIndexPosition = sourceContainerPath.length
+  const shiftedIndex = targetPath[shiftedIndexPosition]
+  if (typeof shiftedIndex !== 'number' || shiftedIndex <= sourceIndex) return targetPath
+
+  const nextPath = [...targetPath]
+  nextPath[shiftedIndexPosition] = shiftedIndex - 1
+  return nextPath
+}
+
+const isEditorPathPrefix = (prefix: EditorPath, path: EditorPath): boolean => {
+  if (prefix.length > path.length) return false
+  return prefix.every((segment, index) => segment === path[index])
+}
+
+export const getByEditorPath = (items: EditorSchemaNode[] = [], path: EditorPath = []): EditorSchemaNode | undefined => {
+  let current: any = items
+  for (const segment of path) {
+    if (Array.isArray(current) && typeof segment === 'number') {
+      current = current[segment]
+      continue
+    }
+    if (current && typeof current === 'object' && typeof segment === 'string') {
+      current = current[segment]
+      continue
+    }
+    return undefined
+  }
+  return current && !Array.isArray(current) && typeof current === 'object' ? current : undefined
+}

package/src/utils/form-item-width.ts

@@ -0,0 +1,40 @@
+export const DEFAULT_FORM_ITEM_CUSTOM_WIDTH = 240
+
+export const isFullFormItemControlWidth = (value: unknown) => {
+  return value === undefined || value === null || value === '' || value === '100%'
+}
+
+export const normalizeCustomFormItemControlWidth = (value: unknown, fallback = DEFAULT_FORM_ITEM_CUSTOM_WIDTH) => {
+  const numericValue = typeof value === 'string' ? Number.parseFloat(value) : Number(value)
+  if (!Number.isFinite(numericValue) || numericValue <= 0) return fallback
+  return Math.round(numericValue)
+}
+
+export const formatCustomFormItemControlWidth = (value: unknown, fallback = DEFAULT_FORM_ITEM_CUSTOM_WIDTH) => {
+  return `${normalizeCustomFormItemControlWidth(value, fallback)}px`
+}
+
+const cleanRecord = (value: Record<string, any> | undefined) => {
+  if (!value || typeof value !== 'object') return undefined
+  const next = Object.entries(value).reduce<Record<string, any>>((result, [key, itemValue]) => {
+    if (itemValue !== undefined && itemValue !== null && itemValue !== '') {
+      result[key] = itemValue
+    }
+    return result
+  }, {})
+  return Object.keys(next).length > 0 ? next : undefined
+}
+
+export const setFormItemControlWidth = (item: Record<string, any>, width: unknown) => {
+  if (isFullFormItemControlWidth(width)) {
+    const style = { ...(item.style || {}) }
+    delete style.width
+    item.style = cleanRecord(style)
+    return
+  }
+
+  item.style = {
+    ...(item.style || {}),
+    width: formatCustomFormItemControlWidth(width)
+  }
+}

package/src/utils/local-dict-center.ts

@@ -0,0 +1,81 @@
+import type { OptionItem } from 'xkit-ui'
+
+export interface EditorDictRecord {
+  code: string
+  label: string
+  options: OptionItem[]
+}
+
+const STORAGE_KEY = 'xkit-editor:dict-center'
+
+const defaultDicts: EditorDictRecord[] = [
+  {
+    code: 'GENDER',
+    label: '性别',
+    options: [
+      { label: '男', value: '1' },
+      { label: '女', value: '0' }
+    ]
+  },
+  {
+    code: 'SYS_STATUS',
+    label: '系统状态',
+    options: [
+      { label: '启用', value: '1' },
+      { label: '停用', value: '0' }
+    ]
+  },
+  {
+    code: 'GRADE',
+    label: '年级',
+    options: [
+      { label: '一年级', value: 'grade-1' },
+      { label: '二年级', value: 'grade-2' },
+      { label: '三年级', value: 'grade-3' }
+    ]
+  }
+]
+
+const canUseStorage = () => typeof window !== 'undefined' && Boolean(window.localStorage)
+
+const normalizeDicts = (value: unknown): EditorDictRecord[] => {
+  if (!Array.isArray(value)) return []
+  return value
+    .filter((item) => item && typeof item === 'object')
+    .map((item: any) => ({
+      code: String(item.code || '').trim(),
+      label: String(item.label || item.code || '').trim(),
+      options: Array.isArray(item.options) ? item.options : []
+    }))
+    .filter((item) => item.code)
+}
+
+export const ensureEditorLocalDicts = () => {
+  if (!canUseStorage()) return defaultDicts
+  const raw = window.localStorage.getItem(STORAGE_KEY)
+  if (raw) {
+    try {
+      const parsed = normalizeDicts(JSON.parse(raw))
+      if (parsed.length > 0) return parsed
+    } catch {
+      // ignore malformed cache and reset below
+    }
+  }
+  window.localStorage.setItem(STORAGE_KEY, JSON.stringify(defaultDicts))
+  return defaultDicts
+}
+
+export const listEditorLocalDicts = () => ensureEditorLocalDicts()
+
+export const saveEditorLocalDicts = (dicts: EditorDictRecord[]) => {
+  const next = normalizeDicts(dicts)
+  if (canUseStorage()) {
+    window.localStorage.setItem(STORAGE_KEY, JSON.stringify(next))
+  }
+  return next
+}
+
+export const loadEditorLocalDictOptions = async (code: string) => {
+  const dict = ensureEditorLocalDicts().find((item) => item.code === code)
+  return dict?.options || []
+}

package/src/utils/record-field.ts

@@ -0,0 +1,30 @@
+export interface RecordFieldRow {
+  key?: string
+  value?: any
+}
+
+const isPlainRecord = (value: unknown): value is Record<string, any> => {
+  return Boolean(value) && typeof value === 'object' && !Array.isArray(value)
+}
+
+export const recordToFieldRows = (value: unknown): RecordFieldRow[] => {
+  if (!isPlainRecord(value)) return []
+  return Object.entries(value).map(([key, itemValue]) => ({
+    key,
+    value: itemValue
+  }))
+}
+
+export const fieldRowsToRecord = (rows: unknown): Record<string, any> | undefined => {
+  if (!Array.isArray(rows)) return undefined
+
+  const record: Record<string, any> = {}
+  rows.forEach((row) => {
+    if (!isPlainRecord(row)) return
+    const key = typeof row.key === 'string' ? row.key.trim() : ''
+    if (!key) return
+    record[key] = row.value
+  })
+
+  return Object.keys(record).length > 0 ? record : undefined
+}