xkit-editor 2.0.0-alpha.0

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "xkit-editor",
+  "version": "2.0.0-alpha.0",
+  "private": false,
+  "type": "module",
+  "main": "lib/xkit-editor.umd.cjs",
+  "module": "lib/xkit-editor.js",
+  "types": "lib/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "import": "./lib/xkit-editor.js",
+      "require": "./lib/xkit-editor.umd.cjs"
+    }
+  },
+  "files": [
+    "lib",
+    "types",
+    "src"
+  ],
+  "dependencies": {
+    "element-plus": "^2.9.3",
+    "sortablejs": "^1.15.6",
+    "vue": "^3.5.12",
+    "xkit-ui": "2.0.0-alpha.0"
+  },
+  "devDependencies": {
+    "@tsconfig/node22": "^22.0.0",
+    "@types/node": "^22.9.0",
+    "@types/sortablejs": "^1.15.8",
+    "@vitejs/plugin-vue": "^5.2.3",
+    "@vitejs/plugin-vue-jsx": "^4.1.2",
+    "@vue/tsconfig": "^0.5.1",
+    "npm-run-all2": "^7.0.1",
+    "typescript": "~5.6.3",
+    "vite": "^6.3.5",
+    "vite-plugin-dts": "^4.5.3",
+    "vitest": "^3.2.4",
+    "vue-tsc": "^2.2.8"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "run-p type-check \"build-only {@}\" --",
+    "preview": "vite preview",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --build --force",
+    "test": "vitest",
+    "test:coverage": "vitest run --coverage"
+  }
+}

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

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

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

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

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

@@ -0,0 +1,130 @@
+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 || [])] }
+]