xkit-editor 2.0.0-alpha.0 → 2.0.0-alpha.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xkit-editor",
-  "version": "2.0.0-alpha.0",
+  "version": "2.0.0-alpha.1",
   "private": false,
   "type": "module",
   "main": "lib/xkit-editor.umd.cjs",
@@ -15,14 +15,13 @@
   },
   "files": [
     "lib",
-    "types",
-    "src"
+    "types"
   ],
   "dependencies": {
     "element-plus": "^2.9.3",
     "sortablejs": "^1.15.6",
     "vue": "^3.5.12",
-    "xkit-ui": "2.0.0-alpha.0"
+    "xkit-ui": "2.0.0-alpha.1"
   },
   "devDependencies": {
     "@tsconfig/node22": "^22.0.0",

package/src/component-configs/__tests__/config.test.ts

@@ -1,288 +0,0 @@
-import { describe, expect, it } from 'vitest'
-import { componentList, componentPaletteGroups } from '../../config'
-
-describe('componentList', () => {
-  const expectNoSchemaId = (value: unknown) => {
-    if (!value || typeof value !== 'object') return
-    if (Array.isArray(value)) {
-      value.forEach(expectNoSchemaId)
-      return
-    }
-
-    expect(value).not.toHaveProperty('id')
-    Object.values(value).forEach(expectNoSchemaId)
-  }
-
-  it('groups palette materials into layout containers and form controls', () => {
-    expect(componentPaletteGroups.map((group) => group.label)).toEqual(['组合容器', '基础控件'])
-    expect(componentPaletteGroups[0].items.map((item) => item.value)).toEqual(['group', 'x-input-table', 'x-input-array'])
-    expect(componentPaletteGroups[0].items.every((item) => item.editorKind === 'container')).toBe(true)
-    expect(componentPaletteGroups[1].items.every((item) => item.editorKind !== 'container')).toBe(true)
-    expect(componentList).toEqual(componentPaletteGroups.flatMap((group) => group.items))
-  })
-
-  it('registers input upload material without schema id', () => {
-    const upload = componentList.find((item) => item.value === 'x-input-upload')
-
-    expect(upload?.scaffold).toMatchObject({
-      type: 'x-input-upload',
-      label: '文件上传',
-      multiple: true
-    })
-    expect(upload?.scaffold).not.toHaveProperty('id')
-  })
-
-  it('registers icon select material with serializable icon source selection', () => {
-    const iconSelect = componentList.find((item) => item.value === 'x-icon-select')
-
-    expect(iconSelect?.scaffold).toMatchObject({
-      type: 'x-icon-select',
-      label: '图标选择器',
-      clearable: true,
-      iconSources: []
-    })
-    expect(iconSelect?.scaffold).not.toHaveProperty('iconLibs')
-    expect(iconSelect?.scaffold).not.toHaveProperty('id')
-  })
-
-  it('registers input table material with idField and schema items without id', () => {
-    const inputTable = componentList.find((item) => item.value === 'x-input-table')
-
-    expect(inputTable?.scaffold).toMatchObject({
-      type: 'x-input-table',
-      label: '表格输入器',
-      name: 'tableData',
-      border: true,
-      idField: 'id',
-      items: [
-        {
-          label: '字段名称',
-          name: 'name',
-          type: 'input',
-          width: 160
-        },
-        {
-          label: '操作',
-          type: 'operation',
-          width: 100
-        }
-      ]
-    })
-    expectNoSchemaId(inputTable?.scaffold)
-  })
-
-  it('registers input array material with idField and schema items without id', () => {
-    const inputArray = componentList.find((item) => item.value === 'x-input-array')
-    const dataTab = inputArray?.configTabs?.find((item) => item.key === 'data')
-    const layoutTab = inputArray?.configTabs?.find((item) => item.key === 'layout')
-    const fieldNames = dataTab?.body.map((item: any) => item.name).filter(Boolean)
-    const layoutTitles = layoutTab?.body.map((item: any) => item.title).filter(Boolean)
-    const layoutField = layoutTab?.body.find((item: any) => item.name === 'layout') as any
-    const spanField = layoutField?.sections?.find((section: any) => section.key === 'col')?.body?.find((item: any) => item.name === 'span')
-    const gutterField = layoutField?.sections?.find((section: any) => section.key === 'row')?.body?.find((item: any) => item.name === 'gutter')
-
-    expect(inputArray?.scaffold).toMatchObject({
-      type: 'x-input-array',
-      label: '数组输入器',
-      name: 'arrayData',
-      idField: 'id',
-      addable: true,
-      deletable: true,
-      useScaffoldValue: true,
-      showInlineAddButton: true,
-      items: [
-        {
-          label: '字段名称',
-          name: 'name',
-          type: 'input'
-        }
-      ]
-    })
-    expect(inputArray?.replace?.groups).toEqual(['collection'])
-    expect(fieldNames).toContain('defaultValue')
-    expect(layoutTitles).toEqual(['作为表单项的配置', '作为容器的配置'])
-    expect(layoutField.visible({ useLayout: false })).toBe(false)
-    expect(layoutField.visible({ useLayout: true })).toBe(true)
-    expect(spanField).toMatchObject({
-      label: '默认每列占位',
-      type: 'select',
-      options: [
-        { label: '整行', value: 24 },
-        { label: '1/2行', value: 12 },
-        { label: '1/3行', value: 8 },
-        { label: '1/4行', value: 6 }
-      ]
-    })
-    expect(gutterField).toMatchObject({
-      label: '栅格间隔',
-      type: 'select',
-      options: [
-        { label: '小 8px', value: 8 },
-        { label: '中 12px', value: 12 },
-        { label: '大 16px', value: 16 },
-        { label: '特大 20px', value: 20 }
-      ]
-    })
-    expectNoSchemaId(inputArray?.scaffold)
-  })
-
-  it('registers input number range material with numeric configuration', () => {
-    const inputNumberRange = componentList.find((item) => item.value === 'x-input-number-range')
-    const dataTab = inputNumberRange?.configTabs?.find((item) => item.key === 'data')
-    const basicTab = inputNumberRange?.configTabs?.find((item) => item.key === 'basic')
-    const dataFieldNames = dataTab?.body.map((item: any) => item.name).filter(Boolean)
-    const basicFieldNames = basicTab?.body.map((item: any) => item.name).filter(Boolean)
-
-    expect(inputNumberRange?.scaffold).toMatchObject({
-      type: 'x-input-number-range',
-      label: '数值范围',
-      name: 'numberRange',
-      startPlaceholder: '最小值',
-      endPlaceholder: '最大值',
-      rangeSeperator: '至',
-      controls: true
-    })
-    expect(inputNumberRange?.replace?.groups).toEqual(['placeholder', 'numeric'])
-    expect(dataFieldNames).toEqual(['min', 'max', 'step', 'precision', 'stepStrictly', 'joinValues'])
-    expect(basicFieldNames).toEqual(['label', 'sync', 'labelPosition', 'startPlaceholder', 'endPlaceholder', 'rangeSeperator', 'controls', 'controlsPosition'])
-    expectNoSchemaId(inputNumberRange?.scaffold)
-  })
-
-  it('configures input number range field mapping through sync', () => {
-    const inputNumberRange = componentList.find((item) => item.value === 'x-input-number-range')
-    const basicTab = inputNumberRange?.configTabs?.find((item) => item.key === 'basic')
-    const syncField = basicTab?.body.find((item: any) => item.name === 'sync') as any
-
-    expect(syncField?.type).toBe('custom')
-    expect(syncField?.label).toBe(false)
-    expect(syncField?.sync).toEqual([{ name: 'name', syncName: 'name' }])
-    expect(syncField?.component).toBeTruthy()
-  })
-
-  it('registers date range materials with separate start and end field mapping', () => {
-    const legacyDateRange = componentList.find((item) => item.value === 'x-date-range-picker')
-    const dateRangeV2 = componentList.find((item) => item.value === 'x-date-range-picker-v2')
-    const legacyBasicTab = legacyDateRange?.configTabs?.find((item) => item.key === 'basic')
-    const v2BasicTab = dateRangeV2?.configTabs?.find((item) => item.key === 'basic')
-    const legacySyncField = legacyBasicTab?.body.find((item: any) => item.name === 'sync') as any
-    const v2SyncField = v2BasicTab?.body.find((item: any) => item.name === 'sync') as any
-
-    expect(legacyDateRange?.scaffold).toMatchObject({
-      type: 'x-date-range-picker',
-      label: '日期范围',
-      rangeSeperator: '至',
-      _type: 'daterange',
-      valueFormat: 'YYYY-MM-DD',
-      sync: [
-        { name: 'startDate', syncName: 'startDate' },
-        { name: 'endDate', syncName: 'endDate' }
-      ]
-    })
-    expect(dateRangeV2?.scaffold).toMatchObject({
-      type: 'x-date-range-picker-v2',
-      label: '日期范围',
-      rangeSeperator: '至',
-      valueFormat: 'YYYY-MM-DD',
-      format: 'YYYY-MM-DD',
-      sync: [
-        { name: 'startDate', syncName: 'startDate' },
-        { name: 'endDate', syncName: 'endDate' }
-      ]
-    })
-    expect(legacySyncField).toMatchObject({
-      type: 'custom',
-      label: false,
-      allowTuple: false,
-      startSyncName: 'startDate',
-      endSyncName: 'endDate'
-    })
-    expect(v2SyncField).toMatchObject({
-      type: 'custom',
-      label: false,
-      allowTuple: false,
-      startSyncName: 'startDate',
-      endSyncName: 'endDate'
-    })
-    expectNoSchemaId(legacyDateRange?.scaffold)
-    expectNoSchemaId(dateRangeV2?.scaffold)
-  })
-
-  it('configures input table data tab for preset rows instead of columns', () => {
-    const inputTable = componentList.find((item) => item.value === 'x-input-table')
-    const dataTab = inputTable?.configTabs?.find((item) => item.key === 'data')
-    const operationTab = inputTable?.configTabs?.find((item) => item.key === 'operation')
-    const fieldNames = dataTab?.body.map((item: any) => item.name).filter(Boolean)
-    const operationFieldNames = operationTab?.body.map((item: any) => item.name).filter(Boolean)
-
-    expect(fieldNames).toContain('defaultValue')
-    expect(fieldNames).not.toContain('items')
-    expect(fieldNames).not.toContain('footerToolbar')
-    expect(operationFieldNames).toContain('items')
-    expect(operationFieldNames).toContain('footerToolbar')
-  })
-
-  it('registers radios material with runtime schema type', () => {
-    const radios = componentList.find((item) => item.value === 'x-radios')
-
-    expect(radios?.scaffold).toMatchObject({
-      type: 'x-radios',
-      label: '单选框',
-      options: [
-        { label: '选项一', value: '1' },
-        { label: '选项二', value: '2' }
-      ]
-    })
-    expectNoSchemaId(radios?.scaffold)
-  })
-
-  it('registers checkboxes material with runtime schema type and options', () => {
-    const checkboxes = componentList.find((item) => item.value === 'x-checkboxes')
-    const dataTab = checkboxes?.configTabs?.find((item) => item.key === 'data')
-    const fieldNames = dataTab?.body.map((item: any) => item.name).filter(Boolean)
-
-    expect(checkboxes?.scaffold).toMatchObject({
-      type: 'x-checkboxes',
-      label: '多选框',
-      options: [
-        { label: '选项一', value: '1' },
-        { label: '选项二', value: '2' }
-      ]
-    })
-    expect(fieldNames).toContain('options')
-    expectNoSchemaId(checkboxes?.scaffold)
-  })
-
-  it('registers checkbox material as a single boolean-style control', () => {
-    const checkbox = componentList.find((item) => item.value === 'checkbox')
-    const dataTab = checkbox?.configTabs?.find((item) => item.key === 'data')
-
-    expect(checkbox?.scaffold).toMatchObject({
-      type: 'checkbox',
-      label: '勾选框'
-    })
-    expect(checkbox?.scaffold).not.toHaveProperty('options')
-    expect(dataTab?.body.map((item: any) => item.name).filter(Boolean)).toEqual([])
-    expectNoSchemaId(checkbox?.scaffold)
-  })
-
-  it('configures common validation tab with rules editor', () => {
-    const input = componentList.find((item) => item.value === 'input')
-    const validationTab = input?.configTabs?.find((item) => item.key === 'validation')
-    const fieldNames = validationTab?.body.map((item: any) => item.name).filter(Boolean)
-
-    expect(fieldNames).toContain('rules')
-  })
-
-  it('shows missing dynamic state fields as their runtime defaults', () => {
-    const input = componentList.find((item) => item.value === 'input')
-    const advancedTab = input?.configTabs?.find((item) => item.key === 'advanced')
-    const visible = advancedTab?.body.find((item: any) => item.name === 'visible') as any
-    const disabled = advancedTab?.body.find((item: any) => item.name === 'disabled') as any
-    const staticItem = advancedTab?.body.find((item: any) => item.name === 'static') as any
-
-    expect(visible.pipeIn(undefined)).toBe(true)
-    expect(visible.pipeIn(false)).toBe(false)
-    expect(disabled.pipeIn(undefined)).toBe(false)
-    expect(staticItem.pipeIn(undefined)).toBe(false)
-  })
-})

package/src/component-configs/__tests__/group.test.ts

@@ -1,104 +0,0 @@
-import { describe, expect, it } from 'vitest'
-import { groupComponentConfig } from '../group'
-import { getEditorGroupTitleStyles, registerEditorGroupTitleStyle } from '../../group-title-styles'
-
-describe('groupComponentConfig', () => {
-  it('adds a schema-safe group scaffold for the editor palette', () => {
-    expect(groupComponentConfig.scaffold).toMatchObject({
-      type: 'group',
-      title: '分组',
-      label: false,
-      span: 24,
-      body: []
-    })
-    expect(groupComponentConfig.scaffold).not.toHaveProperty('id')
-  })
-
-  it('edits group label with a switch instead of a text input', () => {
-    const basicTab = groupComponentConfig.configTabs?.find((tab) => tab.key === 'basic')
-    const labelField = basicTab?.body.find((item) => item.name === 'label') as any
-
-    expect(labelField?.type).toBe('switch')
-    expect(labelField.pipeIn(false)).toBe(false)
-    expect(labelField.pipeIn('基础信息')).toBe(true)
-    expect(labelField.pipeOut(false, { title: '基础信息' })).toBe(false)
-    expect(labelField.pipeOut(true, { title: '基础信息' })).toBe('基础信息')
-  })
-
-  it('separates parent item layout from child container layout', () => {
-    const layoutTab = groupComponentConfig.configTabs?.find((tab) => tab.key === 'layout')
-    const titles = layoutTab?.body.map((item: any) => item.title).filter(Boolean)
-    const fieldNames = layoutTab?.body.map((item: any) => item.name).filter(Boolean)
-
-    expect(titles).toEqual(['作为表单项的布局', '容器本身布局配置'])
-    expect(fieldNames).toEqual(['span', 'layout'])
-  })
-
-  it('edits group title class through the registered style picker', () => {
-    const advancedTab = groupComponentConfig.configTabs?.find((tab) => tab.key === 'advanced')
-    const titleClassField = advancedTab?.body.find((item) => item.name === 'titleClass') as any
-
-    expect(titleClassField?.type).toBe('custom')
-    expect(getEditorGroupTitleStyles().map((style) => style.className)).toContain('x-group-title--bar')
-    expect(getEditorGroupTitleStyles().map((style) => style.className)).toContain('x-group-title--gradient-bar')
-  })
-
-  it('edits group title alignment independently from title style', () => {
-    const advancedTab = groupComponentConfig.configTabs?.find((tab) => tab.key === 'advanced')
-    const titleAlignField = advancedTab?.body.find((item) => item.name === 'titleAlign') as any
-
-    expect(titleAlignField?.type).toBe('x-radios')
-    expect(titleAlignField.pipeIn(undefined)).toBe('left')
-    expect(titleAlignField.pipeOut('left')).toBeUndefined()
-    expect(titleAlignField.pipeOut('center')).toBe('center')
-    expect(titleAlignField.pipeOut('right')).toBe('right')
-  })
-
-  it('exposes constrained title size and color instead of developer class fields', () => {
-    const advancedTab = groupComponentConfig.configTabs?.find((tab) => tab.key === 'advanced')
-    const fieldNames = advancedTab?.body.map((item: any) => item.name).filter(Boolean)
-    const titleSizeField = advancedTab?.body.find((item) => item.name === 'titleSize') as any
-    const titleColorField = advancedTab?.body.find((item) => item.name === 'titleColor') as any
-
-    expect(fieldNames).toContain('titleSize')
-    expect(fieldNames).toContain('titleColor')
-    expect(fieldNames).not.toContain('bodyClass')
-    expect(fieldNames).not.toContain('class')
-    expect(titleSizeField.pipeIn(undefined)).toBe('medium')
-    expect(titleSizeField.pipeOut('medium')).toBeUndefined()
-    expect(titleSizeField.pipeOut('large')).toBe('large')
-    expect(titleColorField.type).toBe('custom')
-    expect(titleColorField.component).toBeTruthy()
-  })
-
-  it('configures group title icon with the icon selector', () => {
-    const advancedTab = groupComponentConfig.configTabs?.find((tab) => tab.key === 'advanced')
-    const titleIconField = advancedTab?.body.find((item) => item.name === 'titleIcon') as any
-
-    expect(titleIconField?.type).toBe('x-icon-select')
-    expect(titleIconField.clearable).toBe(true)
-    expect(titleIconField).not.toHaveProperty('iconSources')
-  })
-})
-
-describe('group title style registry', () => {
-  it('registers and unregisters developer provided title styles', () => {
-    const unregister = registerEditorGroupTitleStyle({
-      key: 'test-style',
-      label: '测试样式',
-      className: 'test-group-title',
-      description: '仅用于测试'
-    })
-
-    expect(getEditorGroupTitleStyles()).toContainEqual({
-      key: 'test-style',
-      label: '测试样式',
-      className: 'test-group-title',
-      description: '仅用于测试'
-    })
-
-    unregister()
-
-    expect(getEditorGroupTitleStyles().some((style) => style.key === 'test-style')).toBe(false)
-  })
-})

package/src/component-configs/cascader.ts

@@ -1,20 +0,0 @@
-import type { ComponentConfig } from './types'
-import { commonProps, createComponentConfigTabs } from './common-props'
-
-export const cascaderComponentConfig: ComponentConfig = {
-  label: '级联选择器',
-  value: 'cascader',
-  icon: 'ri-node-tree',
-  scaffold: {
-    type: 'cascader',
-    label: '级联选择器',
-    options: []
-  },
-  replace: {
-    groups: ['options']
-  },
-  configTabs: createComponentConfigTabs({}),
-  configSchema: {
-    body: [...commonProps]
-  }
-}

package/src/component-configs/checkbox.ts

@@ -1,43 +0,0 @@
-import type { ComponentConfig } from './types'
-import { commonProps, createComponentConfigTabs } from './common-props'
-import { optionsConfigItem } from './options-config'
-
-export const checkboxComponentConfig: ComponentConfig = {
-  label: '单勾选框',
-  value: 'checkbox',
-  icon: 'ri-checkbox-line',
-  scaffold: {
-    type: 'checkbox',
-    label: '勾选框'
-  },
-  replace: {
-    groups: []
-  },
-  configTabs: createComponentConfigTabs({}),
-  configSchema: {
-    body: [...commonProps]
-  }
-}
-
-export const checkboxesComponentConfig: ComponentConfig = {
-  label: '多选框',
-  value: 'x-checkboxes',
-  icon: 'ri-checkbox-multiple-line',
-  scaffold: {
-    type: 'x-checkboxes',
-    label: '多选框',
-    options: [
-      { label: '选项一', value: '1' },
-      { label: '选项二', value: '2' }
-    ]
-  },
-  replace: {
-    groups: ['options']
-  },
-  configTabs: createComponentConfigTabs({
-    data: [optionsConfigItem]
-  }),
-  configSchema: {
-    body: [...commonProps, optionsConfigItem]
-  }
-}

package/src/component-configs/common-props.ts

@@ -1,130 +0,0 @@
-import { markRaw } from 'vue'
-import ConditionEditor from '../components/condition-editor.vue'
-import FormItemLayoutEditor from '../components/form-item-layout-editor.vue'
-import ValidationRulesEditor from '../components/validation-rules-editor.vue'
-import type { XFormItem } from 'xkit-ui'
-import type { EditorConfigTab } from './types'
-
-export const commonBasicProps: XFormItem[] = [
-  {
-    title: '基本信息',
-    label: false,
-    type: 'group',
-    titleClass: 'config-group-title',
-    body: []
-  },
-  {
-    label: '字段中文名',
-    name: 'label',
-    type: 'input',
-    placeholder: '请输入字段中文名'
-  },
-  {
-    label: '字段名',
-    name: 'name',
-    type: 'input',
-    placeholder: '请输入字段名'
-  },
-  {
-    label: '标签位置',
-    name: 'labelPosition',
-    type: 'select',
-    // mode: 'button',
-    // size: 'small',
-    options: [
-      { label: '继承', value: '' },
-      { label: '左', value: 'left' },
-      { label: '上', value: 'top' },
-      { label: '右', value: 'right' }
-    ],
-    pipeIn(value: string | undefined) {
-      return value ?? ''
-    },
-    pipeOut(value: string) {
-      return value || undefined
-    }
-  }
-]
-
-export const commonLayoutProps: XFormItem[] = [
-  {
-    title: '布局配置',
-    name: 'span',
-    type: 'custom',
-    component: markRaw(FormItemLayoutEditor),
-    titleClass: 'config-group-title',
-    label: false,
-    sync: [{ name: 'offsetRight', syncName: 'offsetRight' }]
-  }
-]
-
-export const commonAdvancedProps: XFormItem[] = [
-  {
-    title: '状态控制',
-    type: 'group',
-    titleClass: 'config-group-title',
-    label: false
-  },
-  {
-    label: '是否可见',
-    name: 'visible',
-    type: 'custom',
-    component: markRaw(ConditionEditor),
-    stateKind: 'visible',
-    _defaultValue: true,
-    pipeIn(value: any) {
-      return value === undefined ? true : value
-    }
-  },
-  {
-    label: '是否禁用',
-    name: 'disabled',
-    type: 'custom',
-    component: markRaw(ConditionEditor),
-    stateKind: 'disabled',
-    _defaultValue: false,
-    pipeIn(value: any) {
-      return value === undefined ? false : value
-    }
-  },
-  {
-    label: '是否静态',
-    name: 'static',
-    type: 'custom',
-    component: markRaw(ConditionEditor),
-    stateKind: 'static',
-    _defaultValue: false,
-    pipeIn(value: any) {
-      return value === undefined ? false : value
-    }
-  }
-]
-
-export const commonValidationProps: XFormItem[] = [
-  {
-    title: '校验规则',
-    name: 'rules',
-    type: 'custom',
-    component: markRaw(ValidationRulesEditor),
-    titleClass: 'config-group-title',
-    label: false
-  }
-]
-
-export const commonProps: XFormItem[] = [...commonBasicProps, ...commonLayoutProps, ...commonValidationProps, ...commonAdvancedProps]
-
-export const createComponentConfigTabs = (tabs: {
-  basic?: XFormItem[]
-  layout?: XFormItem[]
-  data?: XFormItem[]
-  operation?: XFormItem[]
-  validation?: XFormItem[]
-  advanced?: XFormItem[]
-}): EditorConfigTab[] => [
-  { key: 'basic', body: [...commonBasicProps, ...(tabs.basic || [])] },
-  { key: 'layout', body: [...commonLayoutProps, ...(tabs.layout || [])] },
-  { key: 'data', body: tabs.data || [] },
-  { key: 'operation', body: tabs.operation || [] },
-  { key: 'validation', body: [...commonValidationProps, ...(tabs.validation || [])] },
-  { key: 'advanced', body: [...commonAdvancedProps, ...(tabs.advanced || [])] }
-]