xkit-editor 2.0.0-alpha.0

package/src/shims-vue.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

package/src/utils/__tests__/component-replace.test.ts

@@ -0,0 +1,129 @@
+import { describe, expect, it } from 'vitest'
+import type { ComponentConfig } from '../../component-configs/types'
+import { EDITOR_ID_FIELD } from '../editor-schema'
+import { createReplacementNode, isReplaceableComponentConfig } from '../component-replace'
+
+const inputConfig: ComponentConfig = {
+  label: '输入框',
+  value: 'input',
+  icon: 'input',
+  scaffold: {
+    type: 'input',
+    label: '输入框',
+    placeholder: '请输入内容'
+  },
+  replace: {
+    groups: ['placeholder', 'lengthLimit']
+  },
+  configSchema: {
+    body: []
+  }
+}
+
+const selectConfig: ComponentConfig = {
+  label: '下拉框',
+  value: 'select',
+  icon: 'select',
+  scaffold: {
+    type: 'select',
+    label: '下拉框',
+    options: []
+  },
+  replace: {
+    groups: ['options', 'placeholder']
+  },
+  configSchema: {
+    body: []
+  }
+}
+
+const radioConfig: ComponentConfig = {
+  label: '单选框',
+  value: 'x-radios',
+  icon: 'radio',
+  scaffold: {
+    type: 'x-radios',
+    label: '单选框',
+    options: []
+  },
+  replace: {
+    groups: ['options']
+  },
+  configSchema: {
+    body: []
+  }
+}
+
+describe('component replacement', () => {
+  it('preserves common form item fields and editor id', () => {
+    const result = createReplacementNode({
+      source: {
+        type: 'input',
+        name: 'username',
+        label: '用户名',
+        span: 12,
+        visible: { type: 'expression', expression: 'showName' },
+        _id: 'runtime',
+        [EDITOR_ID_FIELD]: 'field'
+      },
+      sourceConfig: inputConfig,
+      targetConfig: selectConfig
+    })
+
+    expect(result).toMatchObject({
+      type: 'select',
+      name: 'username',
+      label: '用户名',
+      span: 12,
+      visible: { type: 'expression', expression: 'showName' },
+      [EDITOR_ID_FIELD]: 'field'
+    })
+    expect(result._id).toBeUndefined()
+    expect(result.id).toBeUndefined()
+  })
+
+  it('keeps option fields only between option-compatible components', () => {
+    const source = {
+      type: 'select',
+      name: 'status',
+      options: [{ label: '启用', value: 'enabled' }],
+      placeholder: '请选择'
+    }
+
+    expect(
+      createReplacementNode({
+        source,
+        sourceConfig: selectConfig,
+        targetConfig: radioConfig
+      }).options
+    ).toEqual([{ label: '启用', value: 'enabled' }])
+
+    const inputResult = createReplacementNode({
+      source,
+      sourceConfig: selectConfig,
+      targetConfig: inputConfig
+    })
+    expect(inputResult.options).toBeUndefined()
+    expect(inputResult.placeholder).toBe('请选择')
+  })
+
+  it('starts from target scaffold for target-only defaults', () => {
+    const result = createReplacementNode({
+      source: {
+        type: 'select',
+        label: '状态'
+      },
+      sourceConfig: selectConfig,
+      targetConfig: inputConfig
+    })
+
+    expect(result.type).toBe('input')
+    expect(result.label).toBe('状态')
+    expect(result.placeholder).toBe('请输入内容')
+  })
+
+  it('does not allow container configs as replaceable targets', () => {
+    expect(isReplaceableComponentConfig({ ...inputConfig, editorKind: 'container' })).toBe(false)
+    expect(isReplaceableComponentConfig(inputConfig)).toBe(true)
+  })
+})

package/src/utils/__tests__/editor-schema.test.ts

@@ -0,0 +1,429 @@
+import { describe, expect, it } from 'vitest'
+import {
+  EDITOR_ID_FIELD,
+  assignNewEditorIdsDeep,
+  findByEditorId,
+  getArrayByEditorPath,
+  getByEditorPath,
+  insertAtEditorPath,
+  insertAfterEditorId,
+  moveAcrossEditorPaths,
+  moveWithinEditorPath,
+  normalizeEditorIds,
+  preserveUneditedChildCollections,
+  removeByEditorId,
+  stripEditorMetaDeep,
+  stripRuntimeMetaDeep,
+  updateByEditorId
+} from '../editor-schema'
+
+const createId = () => {
+  let index = 0
+  return () => `editor_${++index}`
+}
+
+describe('editor schema tree utilities', () => {
+  it('normalizes editor ids recursively without mutating existing ids', () => {
+    const nextId = createId()
+    const source = [
+      {
+        type: 'group',
+        body: [
+          { type: 'input' },
+          { type: 'select', [EDITOR_ID_FIELD]: 'kept' }
+        ]
+      }
+    ]
+
+    const result = normalizeEditorIds(source, nextId)
+
+    expect(result.changed).toBe(true)
+    expect(result.items[0][EDITOR_ID_FIELD]).toBe('editor_1')
+    expect(result.items[0].body[0][EDITOR_ID_FIELD]).toBe('editor_2')
+    expect(result.items[0].body[1][EDITOR_ID_FIELD]).toBe('kept')
+    expect(source[0][EDITOR_ID_FIELD]).toBeUndefined()
+  })
+
+  it('normalizes editor ids inside input table items', () => {
+    const nextId = createId()
+    const source = [
+      {
+        type: 'x-input-table',
+        items: [
+          { type: 'input', name: 'name' },
+          { type: 'operation' }
+        ]
+      }
+    ]
+
+    const result = normalizeEditorIds(source, nextId)
+
+    expect(result.changed).toBe(true)
+    expect(result.items[0][EDITOR_ID_FIELD]).toBe('editor_1')
+    expect(result.items[0].items[0][EDITOR_ID_FIELD]).toBe('editor_2')
+    expect(result.items[0].items[1][EDITOR_ID_FIELD]).toBe('editor_3')
+  })
+
+  it('updates nested nodes by editor id', () => {
+    const source = [
+      {
+        type: 'group',
+        [EDITOR_ID_FIELD]: 'group',
+        body: [{ type: 'input', name: 'old', [EDITOR_ID_FIELD]: 'field' }]
+      }
+    ]
+
+    const result = updateByEditorId(source, 'field', { type: 'input', name: 'next', [EDITOR_ID_FIELD]: 'field' })
+
+    expect(result.changed).toBe(true)
+    expect(result.items[0].body[0].name).toBe('next')
+    expect(source[0].body[0].name).toBe('old')
+  })
+
+  it('updates input table columns by editor id', () => {
+    const source = [
+      {
+        type: 'x-input-table',
+        [EDITOR_ID_FIELD]: 'table',
+        items: [{ type: 'input', name: 'old', [EDITOR_ID_FIELD]: 'column' }]
+      }
+    ]
+
+    const result = updateByEditorId(source, 'column', { type: 'select', name: 'next', [EDITOR_ID_FIELD]: 'column' })
+
+    expect(result.changed).toBe(true)
+    expect(result.items[0].items[0]).toMatchObject({ type: 'select', name: 'next' })
+    expect(source[0].items[0].name).toBe('old')
+  })
+
+  it('finds nodes and preserves child collections that the active config does not edit', () => {
+    const source = [
+      {
+        type: 'group',
+        title: '基础信息',
+        [EDITOR_ID_FIELD]: 'group',
+        body: [{ type: 'input', name: 'name', [EDITOR_ID_FIELD]: 'field' }]
+      }
+    ]
+    const previousNode = findByEditorId(source, 'group')
+    const nextNode = preserveUneditedChildCollections(
+      previousNode,
+      {
+        type: 'group',
+        title: '基础信息',
+        titleClass: 'x-group-title--gradient-bar',
+        [EDITOR_ID_FIELD]: 'group'
+      },
+      new Set(['titleClass'])
+    )
+
+    expect(nextNode.body).toEqual(source[0].body)
+    expect(nextNode.titleClass).toBe('x-group-title--gradient-bar')
+  })
+
+  it('allows edited child collections to be replaced', () => {
+    const previousNode = {
+      type: 'x-input-table',
+      [EDITOR_ID_FIELD]: 'table',
+      items: [{ type: 'input', name: 'old' }]
+    }
+    const nextNode = preserveUneditedChildCollections(
+      previousNode,
+      {
+        type: 'x-input-table',
+        [EDITOR_ID_FIELD]: 'table',
+        items: [{ type: 'select', name: 'next' }]
+      },
+      new Set(['items'])
+    )
+
+    expect(nextNode.items).toEqual([{ type: 'select', name: 'next' }])
+  })
+
+  it('removes nested nodes by editor id', () => {
+    const source = [
+      {
+        type: 'group',
+        [EDITOR_ID_FIELD]: 'group',
+        body: [
+          { type: 'input', [EDITOR_ID_FIELD]: 'a' },
+          { type: 'select', [EDITOR_ID_FIELD]: 'b' }
+        ]
+      }
+    ]
+
+    const result = removeByEditorId(source, 'a')
+
+    expect(result.changed).toBe(true)
+    expect(result.items[0].body).toHaveLength(1)
+    expect(result.items[0].body[0][EDITOR_ID_FIELD]).toBe('b')
+  })
+
+  it('removes input table columns by editor id', () => {
+    const source = [
+      {
+        type: 'x-input-table',
+        [EDITOR_ID_FIELD]: 'table',
+        items: [
+          { type: 'input', name: 'name', [EDITOR_ID_FIELD]: 'name_column' },
+          { type: 'select', name: 'status', [EDITOR_ID_FIELD]: 'status_column' },
+          { type: 'operation', [EDITOR_ID_FIELD]: 'operation_column' }
+        ]
+      }
+    ]
+
+    const result = removeByEditorId(source, 'status_column')
+
+    expect(result.changed).toBe(true)
+    expect(result.items[0].items.map((item: any) => item[EDITOR_ID_FIELD])).toEqual(['name_column', 'operation_column'])
+    expect(source[0].items.map((item: any) => item[EDITOR_ID_FIELD])).toEqual(['name_column', 'status_column', 'operation_column'])
+  })
+
+  it('inserts nested nodes after a matching editor id', () => {
+    const source = [
+      {
+        type: 'group',
+        [EDITOR_ID_FIELD]: 'group',
+        body: [{ type: 'input', [EDITOR_ID_FIELD]: 'field' }]
+      }
+    ]
+
+    const result = insertAfterEditorId(source, 'field', { type: 'select', [EDITOR_ID_FIELD]: 'copy' })
+
+    expect(result.changed).toBe(true)
+    expect(result.items[0].body.map((item: any) => item[EDITOR_ID_FIELD])).toEqual(['field', 'copy'])
+  })
+
+  it('assigns fresh editor ids to copied nodes recursively', () => {
+    const nextId = createId()
+    const result = assignNewEditorIdsDeep(
+      {
+        type: 'group',
+        _id: 'runtime_group',
+        [EDITOR_ID_FIELD]: 'old_group',
+        body: [{ type: 'input', _id: 'runtime_child', [EDITOR_ID_FIELD]: 'old_child' }]
+      },
+      nextId
+    )
+
+    expect(result[EDITOR_ID_FIELD]).toBe('editor_1')
+    expect(result.body[0][EDITOR_ID_FIELD]).toBe('editor_2')
+    expect(result._id).toBeUndefined()
+    expect(result.body[0]._id).toBeUndefined()
+  })
+
+  it('strips runtime and editor metadata deeply', () => {
+    const source = {
+      type: 'group',
+      _id: 'runtime_group',
+      [EDITOR_ID_FIELD]: 'group',
+      body: [{ type: 'input', _id: 'runtime_field', [EDITOR_ID_FIELD]: 'field' }]
+    }
+
+    expect(stripRuntimeMetaDeep(source)).toEqual({
+      type: 'group',
+      [EDITOR_ID_FIELD]: 'group',
+      body: [{ type: 'input', [EDITOR_ID_FIELD]: 'field' }]
+    })
+    expect(stripEditorMetaDeep(source)).toEqual({
+      type: 'group',
+      body: [{ type: 'input' }]
+    })
+  })
+
+  it('gets nested nodes by editor path', () => {
+    const source = [
+      {
+        type: 'group',
+        body: [{ type: 'input', name: 'nested' }]
+      }
+    ]
+
+    expect(getByEditorPath(source, [0, 'body', 0])?.name).toBe('nested')
+    expect(getByEditorPath(source, [0, 'body', 3])).toBeUndefined()
+  })
+
+  it('gets arrays by editor path', () => {
+    const source = [
+      {
+        type: 'group',
+        body: [{ type: 'input', name: 'nested' }]
+      }
+    ]
+
+    expect(getArrayByEditorPath(source, [])).toBe(source)
+    expect(getArrayByEditorPath(source, [0, 'body'])?.[0].name).toBe('nested')
+    expect(getArrayByEditorPath(source, [0, 'missing'])).toBeUndefined()
+  })
+
+  it('inserts nodes into nested containers by editor path', () => {
+    const source = [
+      {
+        type: 'group',
+        body: [{ type: 'input', name: 'a' }]
+      }
+    ]
+
+    const result = insertAtEditorPath(source, [0, 'body'], 1, { type: 'select', name: 'b' })
+
+    expect(result.changed).toBe(true)
+    expect(result.items[0].body.map((item: any) => item.name)).toEqual(['a', 'b'])
+    expect(source[0].body).toHaveLength(1)
+  })
+
+  it('inserts nodes into input table items by editor path', () => {
+    const source = [
+      {
+        type: 'x-input-table',
+        items: [{ type: 'input', name: 'name' }, { type: 'operation' }]
+      }
+    ]
+
+    const result = insertAtEditorPath(source, [0, 'items'], 1, { type: 'select', name: 'status' })
+
+    expect(result.changed).toBe(true)
+    expect(result.items[0].items.map((item: any) => item.type)).toEqual(['input', 'select', 'operation'])
+    expect(source[0].items.map((item: any) => item.type)).toEqual(['input', 'operation'])
+  })
+
+  it('moves nodes within nested containers by editor path', () => {
+    const source = [
+      {
+        type: 'group',
+        body: [
+          { type: 'input', name: 'a' },
+          { type: 'select', name: 'b' }
+        ]
+      }
+    ]
+
+    const result = moveWithinEditorPath(source, [0, 'body'], 0, 1)
+
+    expect(result.changed).toBe(true)
+    expect(result.items[0].body.map((item: any) => item.name)).toEqual(['b', 'a'])
+  })
+
+  it('moves nodes across containers by editor path', () => {
+    const source = [
+      { type: 'input', name: 'top' },
+      {
+        type: 'group',
+        body: [{ type: 'select', name: 'nested' }]
+      }
+    ]
+
+    const result = moveAcrossEditorPaths(source, [], 0, [1, 'body'], 1)
+
+    expect(result.changed).toBe(true)
+    expect(result.items.map((item: any) => item.name)).toEqual([undefined])
+    expect(result.items[0].body.map((item: any) => item.name)).toEqual(['nested', 'top'])
+  })
+
+  it('moves nodes from nested containers to the root by editor path', () => {
+    const source = [
+      { type: 'input', name: 'top' },
+      {
+        type: 'group',
+        body: [
+          { type: 'select', name: 'nested' },
+          { type: 'input', name: 'kept' }
+        ]
+      }
+    ]
+
+    const result = moveAcrossEditorPaths(source, [1, 'body'], 0, [], 1)
+
+    expect(result.changed).toBe(true)
+    expect(result.items.map((item: any) => item.name)).toEqual(['top', 'nested', undefined])
+    expect(result.items[2].body.map((item: any) => item.name)).toEqual(['kept'])
+  })
+
+  it('moves nodes between sibling nested containers by editor path', () => {
+    const source = [
+      {
+        type: 'group',
+        body: [{ type: 'input', name: 'a' }]
+      },
+      {
+        type: 'group',
+        body: [{ type: 'select', name: 'b' }]
+      }
+    ]
+
+    const result = moveAcrossEditorPaths(source, [0, 'body'], 0, [1, 'body'], 1)
+
+    expect(result.changed).toBe(true)
+    expect(result.items[0].body).toEqual([])
+    expect(result.items[1].body.map((item: any) => item.name)).toEqual(['b', 'a'])
+  })
+
+  it('adjusts nested target paths when source removal shifts an ancestor index', () => {
+    const source = [
+      {
+        type: 'group',
+        body: [{ type: 'input', name: 'moving' }]
+      },
+      {
+        type: 'group',
+        body: [
+          {
+            type: 'group',
+            body: [{ type: 'select', name: 'nested' }]
+          }
+        ]
+      }
+    ]
+
+    const result = moveAcrossEditorPaths(source, [], 0, [1, 'body', 0, 'body'], 1)
+
+    expect(result.changed).toBe(true)
+    expect(result.items).toHaveLength(1)
+    expect(result.items[0].body[0].body.map((item: any) => item.name)).toEqual(['nested', undefined])
+    expect(result.items[0].body[0].body[1].body.map((item: any) => item.name)).toEqual(['moving'])
+  })
+
+  it('adjusts nested target paths when nested source removal shifts a sibling ancestor index', () => {
+    const source = [
+      {
+        type: 'group',
+        body: [
+          {
+            type: 'group',
+            body: [{ type: 'input', name: 'moving' }]
+          },
+          {
+            type: 'group',
+            body: [
+              {
+                type: 'group',
+                body: [{ type: 'select', name: 'nested' }]
+              }
+            ]
+          }
+        ]
+      }
+    ]
+
+    const result = moveAcrossEditorPaths(source, [0, 'body'], 0, [0, 'body', 1, 'body', 0, 'body'], 1)
+
+    expect(result.changed).toBe(true)
+    expect(result.items[0].body).toHaveLength(1)
+    expect(result.items[0].body[0].body[0].body.map((item: any) => item.name)).toEqual(['nested', undefined])
+    expect(result.items[0].body[0].body[0].body[1].body.map((item: any) => item.name)).toEqual(['moving'])
+  })
+
+  it('does not move a node into its own descendant container', () => {
+    const source = [
+      {
+        type: 'group',
+        name: 'parent',
+        body: [{ type: 'input', name: 'child' }]
+      }
+    ]
+
+    const result = moveAcrossEditorPaths(source, [], 0, [0, 'body'], 1)
+
+    expect(result.changed).toBe(false)
+    expect(result.items).toBe(source)
+  })
+})

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

@@ -0,0 +1,53 @@
+import { describe, expect, it } from 'vitest'
+import {
+  DEFAULT_FORM_ITEM_CUSTOM_WIDTH,
+  formatCustomFormItemControlWidth,
+  isFullFormItemControlWidth,
+  normalizeCustomFormItemControlWidth,
+  setFormItemControlWidth
+} from '../form-item-width'
+
+describe('form item control width utilities', () => {
+  it('treats missing and 100% widths as full width', () => {
+    expect(isFullFormItemControlWidth(undefined)).toBe(true)
+    expect(isFullFormItemControlWidth(null)).toBe(true)
+    expect(isFullFormItemControlWidth('')).toBe(true)
+    expect(isFullFormItemControlWidth('100%')).toBe(true)
+    expect(isFullFormItemControlWidth(240)).toBe(false)
+  })
+
+  it('normalizes custom widths to positive pixel numbers', () => {
+    expect(normalizeCustomFormItemControlWidth(320)).toBe(320)
+    expect(normalizeCustomFormItemControlWidth('320px')).toBe(320)
+    expect(normalizeCustomFormItemControlWidth('12.4px')).toBe(12)
+    expect(normalizeCustomFormItemControlWidth('calc(100% - 20px)')).toBe(DEFAULT_FORM_ITEM_CUSTOM_WIDTH)
+    expect(normalizeCustomFormItemControlWidth(0)).toBe(DEFAULT_FORM_ITEM_CUSTOM_WIDTH)
+  })
+
+  it('formats custom widths as pixel strings for schema output', () => {
+    expect(formatCustomFormItemControlWidth(320)).toBe('320px')
+    expect(formatCustomFormItemControlWidth('320px')).toBe('320px')
+    expect(formatCustomFormItemControlWidth('calc(100% - 20px)')).toBe('240px')
+  })
+
+  it('writes custom width and removes full width from schema style', () => {
+    const item: Record<string, any> = { style: { color: 'red' } }
+
+    setFormItemControlWidth(item, 260)
+    expect(item.style).toEqual({ color: 'red', width: '260px' })
+
+    setFormItemControlWidth(item, undefined)
+    expect(item.style).toEqual({ color: 'red' })
+
+    setFormItemControlWidth(item, '100%')
+    expect(item.style).toEqual({ color: 'red' })
+  })
+
+  it('removes empty style objects when switching back to full width', () => {
+    const item: Record<string, any> = { style: { width: '260px' } }
+
+    setFormItemControlWidth(item, undefined)
+
+    expect(item.style).toBeUndefined()
+  })
+})

package/src/utils/__tests__/group-drag-path.test.ts

@@ -0,0 +1,84 @@
+import { describe, expect, it } from 'vitest'
+import { getEditorChildContainerPath, getEditorChildItemPath } from 'xkit-ui'
+import { insertAtEditorPath, moveAcrossEditorPaths, moveWithinEditorPath } from '../editor-schema'
+
+describe('group drag path integration', () => {
+  it('inserts dragged palette scaffolds into an empty group body', () => {
+    const groupPath = [0]
+    const groupBodyPath = getEditorChildContainerPath(groupPath, 'body')
+    const source = [
+      {
+        type: 'group',
+        title: '分组',
+        body: []
+      }
+    ]
+    const inputScaffold = {
+      type: 'input',
+      label: '输入框'
+    }
+
+    const result = insertAtEditorPath(source, groupBodyPath, 0, inputScaffold)
+
+    expect(result.changed).toBe(true)
+    expect(result.items[0].body).toEqual([inputScaffold])
+    expect(source[0].body).toEqual([])
+  })
+
+  it('sorts items within group body using the group drop path', () => {
+    const groupBodyPath = getEditorChildContainerPath([0], 'body')
+    const source = [
+      {
+        type: 'group',
+        body: [
+          { type: 'input', name: 'a' },
+          { type: 'select', name: 'b' }
+        ]
+      }
+    ]
+
+    const result = moveWithinEditorPath(source, groupBodyPath, 0, 1)
+
+    expect(result.changed).toBe(true)
+    expect(result.items[0].body.map((item: any) => item.name)).toEqual(['b', 'a'])
+  })
+
+  it('moves root items into group body using root and group drop paths', () => {
+    const groupBodyPath = getEditorChildContainerPath([1], 'body')
+    const source = [
+      { type: 'input', name: 'top' },
+      {
+        type: 'group',
+        body: [{ type: 'select', name: 'nested' }]
+      }
+    ]
+
+    const result = moveAcrossEditorPaths(source, [], 0, groupBodyPath, 1)
+
+    expect(result.changed).toBe(true)
+    expect(result.items).toHaveLength(1)
+    expect(result.items[0].body.map((item: any) => item.name)).toEqual(['nested', 'top'])
+  })
+
+  it('moves group body items back to root using child item paths', () => {
+    const groupPath = [1]
+    const groupBodyPath = getEditorChildContainerPath(groupPath, 'body')
+    const nestedItemPath = getEditorChildItemPath(groupBodyPath, 0)
+    const source = [
+      { type: 'input', name: 'top' },
+      {
+        type: 'group',
+        body: [
+          { type: 'select', name: 'nested' },
+          { type: 'input', name: 'kept' }
+        ]
+      }
+    ]
+
+    const result = moveAcrossEditorPaths(source, groupBodyPath, Number(nestedItemPath.at(-1)), [], 1)
+
+    expect(result.changed).toBe(true)
+    expect(result.items.map((item: any) => item.name)).toEqual(['top', 'nested', undefined])
+    expect(result.items[2].body.map((item: any) => item.name)).toEqual(['kept'])
+  })
+})