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

package/src/component-configs/input-array.ts

@@ -1,184 +0,0 @@
-import { markRaw } from 'vue'
-import type { ComponentConfig } from './types'
-import { commonAdvancedProps, commonBasicProps, commonValidationProps } from './common-props'
-import ObjectSectionEditor from '../components/object-section-editor.vue'
-import InputTableDefaultRowsEditor from '../components/input-table-default-rows-editor.vue'
-import FormItemLayoutEditor from '../components/form-item-layout-editor.vue'
-import { inputArrayContainerLayoutSections } from './layout-sections'
-import type { XFormItem } from 'xkit-ui'
-
-const inputArrayBasicProps: XFormItem[] = [
-  {
-    title: '组件属性',
-    type: 'group',
-    titleClass: 'config-group-title',
-    label: false
-  },
-  {
-    label: '行ID字段',
-    name: 'idField',
-    type: 'input',
-    placeholder: '默认 id'
-  },
-  {
-    label: '拖拽排序',
-    name: 'draggable',
-    type: 'switch'
-  },
-  {
-    label: '允许新增',
-    name: 'addable',
-    type: 'switch',
-    defaultValue: true
-  },
-  {
-    label: '允许删除',
-    name: 'deletable',
-    type: 'switch',
-    defaultValue: true
-  },
-  {
-    label: '最少行数',
-    name: 'minLength',
-    type: 'input-number',
-    min: 0,
-    step: 1,
-    controlsPosition: 'right'
-  },
-  {
-    label: '最多行数',
-    name: 'maxLength',
-    type: 'input-number',
-    min: 1,
-    step: 1,
-    controlsPosition: 'right'
-  },
-  {
-    label: '空值脚手架',
-    name: 'useScaffoldValue',
-    type: 'switch',
-    defaultValue: true
-  },
-  {
-    label: '行内新增按钮',
-    name: 'showInlineAddButton',
-    type: 'switch',
-    defaultValue: true
-  },
-  {
-    label: '底部新增按钮',
-    name: 'showFooterAddButton',
-    type: 'switch'
-  }
-]
-
-const inputArrayLayoutProps: XFormItem[] = [
-  {
-    title: '作为表单项的配置',
-    type: 'group',
-    titleClass: 'config-group-title',
-    label: false
-  },
-  {
-    name: 'span',
-    type: 'custom',
-    component: markRaw(FormItemLayoutEditor),
-    label: false,
-    sync: [{ name: 'offsetRight', syncName: 'offsetRight' }]
-  },
-  {
-    title: '作为容器的配置',
-    type: 'group',
-    titleClass: 'config-group-title',
-    label: false
-  },
-  {
-    label: '启用栅格布局',
-    name: 'useLayout',
-    type: 'switch'
-  },
-  {
-    name: 'layout',
-    type: 'custom',
-    component: markRaw(ObjectSectionEditor),
-    label: false,
-    rootKey: 'layout',
-    sectionMode: 'plain',
-    sections: inputArrayContainerLayoutSections,
-    visible(row: any) {
-      return Boolean(row.useLayout)
-    }
-  }
-]
-
-const inputArrayDataProps: XFormItem[] = [
-  {
-    title: '预设数据',
-    name: 'defaultValue',
-    type: 'custom',
-    component: markRaw(InputTableDefaultRowsEditor),
-    titleClass: 'config-group-title',
-    label: false
-  }
-]
-
-const stripOperationColumns = (items: unknown) => {
-  return Array.isArray(items) ? items.filter((item: any) => item?.type !== 'operation') : undefined
-}
-
-const createDefaultOperationColumn = () => ({
-  label: '操作',
-  type: 'operation',
-  width: 100,
-  actions: [
-    { type: 'link', action: 'add', label: '新增' },
-    { type: 'link', action: 'delete', label: '删除' }
-  ]
-})
-
-export const inputArrayComponentConfig: ComponentConfig = {
-  label: '数组输入器',
-  value: 'x-input-array',
-  icon: 'ri-list-check-2',
-  editorKind: 'container',
-  scaffold: {
-    type: 'x-input-array',
-    label: '数组输入器',
-    name: 'arrayData',
-    idField: 'id',
-    addable: true,
-    deletable: true,
-    useScaffoldValue: true,
-    showInlineAddButton: true,
-    items: [
-      {
-        label: '字段名称',
-        name: 'name',
-        type: 'input'
-      }
-    ]
-  },
-  replace: {
-    groups: ['collection'],
-    migrate({ source, targetScaffold }) {
-      return {
-        items: stripOperationColumns(source.items) || targetScaffold.items
-      }
-    }
-  },
-  configTabs: [
-    { key: 'basic', body: [...commonBasicProps, ...inputArrayBasicProps] },
-    { key: 'layout', body: inputArrayLayoutProps },
-    { key: 'data', body: inputArrayDataProps },
-    { key: 'validation', body: commonValidationProps },
-    { key: 'advanced', body: commonAdvancedProps }
-  ],
-  configSchema: {
-    body: [...commonBasicProps, ...inputArrayBasicProps, ...inputArrayLayoutProps, ...inputArrayDataProps, ...commonValidationProps, ...commonAdvancedProps]
-  }
-}
-
-export const migrateInputArrayItemsToInputTable = (items: unknown) => {
-  const normalItems = stripOperationColumns(items)
-  return [...(normalItems?.length ? normalItems : []), createDefaultOperationColumn()]
-}

package/src/component-configs/input-number-range.ts

@@ -1,143 +0,0 @@
-import type { ComponentConfig } from './types'
-import { commonAdvancedProps, commonBasicProps, commonLayoutProps, commonProps, commonValidationProps } from './common-props'
-import type { XFormItem } from 'xkit-ui'
-import { markRaw } from 'vue'
-import InputNumberRangeBindingEditor from '../components/input-number-range-binding-editor.vue'
-
-const [basicInfoGroupProp, labelProp, , labelPositionProp] = commonBasicProps
-
-const inputNumberRangeBindingProp: XFormItem = {
-  label: false,
-  name: 'sync',
-  type: 'custom',
-  component: markRaw(InputNumberRangeBindingEditor),
-  sync: [{ name: 'name', syncName: 'name' }]
-}
-
-const inputNumberRangeBasicProps: XFormItem[] = [
-  {
-    title: '组件属性',
-    type: 'group',
-    titleClass: 'config-group-title',
-    label: false
-  },
-  {
-    label: '开始占位',
-    name: 'startPlaceholder',
-    type: 'input'
-  },
-  {
-    label: '结束占位',
-    name: 'endPlaceholder',
-    type: 'input'
-  },
-  {
-    label: '范围分隔符',
-    name: 'rangeSeperator',
-    type: 'input'
-  },
-  {
-    label: '显示控制按钮',
-    name: 'controls',
-    type: 'switch',
-    defaultValue: true
-  },
-  {
-    label: '按钮位置',
-    name: 'controlsPosition',
-    type: 'x-radios',
-    mode: 'button',
-    size: 'small',
-    options: [
-      { label: '默认', value: '' },
-      { label: '右侧', value: 'right' }
-    ],
-    visible(row: any) {
-      return row.controls !== false
-    },
-    pipeIn(value: string | undefined) {
-      return value ?? ''
-    },
-    pipeOut(value: string) {
-      return value || undefined
-    }
-  }
-]
-
-const inputNumberRangeDataProps: XFormItem[] = [
-  {
-    title: '数值规则',
-    type: 'group',
-    titleClass: 'config-group-title',
-    label: false
-  },
-  {
-    label: '最小值',
-    name: 'min',
-    type: 'input-number',
-    controlsPosition: 'right'
-  },
-  {
-    label: '最大值',
-    name: 'max',
-    type: 'input-number',
-    controlsPosition: 'right'
-  },
-  {
-    label: '步长',
-    name: 'step',
-    type: 'input-number',
-    min: 0,
-    controlsPosition: 'right'
-  },
-  {
-    label: '精度',
-    name: 'precision',
-    type: 'input-number',
-    min: 0,
-    step: 1,
-    controlsPosition: 'right'
-  },
-  {
-    label: '严格步长',
-    name: 'stepStrictly',
-    type: 'switch'
-  },
-  {
-    label: '拼接为字符串',
-    name: 'joinValues',
-    type: 'switch'
-  }
-]
-
-export const inputNumberRangeComponentConfig: ComponentConfig = {
-  label: '数值范围选择器',
-  value: 'x-input-number-range',
-  icon: 'ri-expand-left-right-line',
-  scaffold: {
-    type: 'x-input-number-range',
-    label: '数值范围',
-    name: 'numberRange',
-    startPlaceholder: '最小值',
-    endPlaceholder: '最大值',
-    rangeSeperator: '至',
-    controls: true
-  },
-  replace: {
-    groups: ['placeholder', 'numeric'],
-    keep: ['controls', 'controlsPosition', 'rangeSeperator', 'joinValues']
-  },
-  configTabs: [
-    {
-      key: 'basic',
-      body: [basicInfoGroupProp, labelProp, inputNumberRangeBindingProp, labelPositionProp, ...inputNumberRangeBasicProps]
-    },
-    { key: 'layout', body: commonLayoutProps },
-    { key: 'data', body: inputNumberRangeDataProps },
-    { key: 'validation', body: commonValidationProps },
-    { key: 'advanced', body: commonAdvancedProps }
-  ],
-  configSchema: {
-    body: [...commonProps, inputNumberRangeBindingProp, ...inputNumberRangeBasicProps, ...inputNumberRangeDataProps]
-  }
-}

package/src/component-configs/input-number.ts

@@ -1,111 +0,0 @@
-import type { ComponentConfig } from './types'
-import { commonProps, createComponentConfigTabs } from './common-props'
-import type { XFormItem } from 'xkit-ui'
-
-const inputNumberBasicProps: XFormItem[] = [
-  {
-    title: '组件属性',
-    type: 'group',
-    titleClass: 'config-group-title',
-    label: false
-  },
-  {
-    label: '占位提示',
-    name: 'placeholder',
-    type: 'input'
-  },
-  {
-    label: '显示控制按钮',
-    name: 'controls',
-    type: 'switch',
-    defaultValue: true
-  },
-  {
-    label: '按钮位置',
-    name: 'controlsPosition',
-    type: 'x-radios',
-    mode: 'button',
-    size: 'small',
-    options: [
-      { label: '默认', value: '' },
-      { label: '右侧', value: 'right' }
-    ],
-    visible(row: any) {
-      return row.controls !== false
-    },
-    pipeIn(value: string | undefined) {
-      return value ?? ''
-    },
-    pipeOut(value: string) {
-      return value || undefined
-    }
-  },
-  {
-    label: '单位',
-    name: 'unit',
-    type: 'input'
-  }
-]
-
-const inputNumberDataProps: XFormItem[] = [
-  {
-    title: '数值规则',
-    type: 'group',
-    titleClass: 'config-group-title',
-    label: false
-  },
-  {
-    label: '最小值',
-    name: 'min',
-    type: 'input-number',
-    controlsPosition: 'right'
-  },
-  {
-    label: '最大值',
-    name: 'max',
-    type: 'input-number',
-    controlsPosition: 'right'
-  },
-  {
-    label: '步长',
-    name: 'step',
-    type: 'input-number',
-    min: 0,
-    controlsPosition: 'right'
-  },
-  {
-    label: '精度',
-    name: 'precision',
-    type: 'input-number',
-    min: 0,
-    step: 1,
-    controlsPosition: 'right'
-  },
-  {
-    label: '严格步长',
-    name: 'stepStrictly',
-    type: 'switch'
-  }
-]
-
-export const inputNumberComponentConfig: ComponentConfig = {
-  label: '数字输入框',
-  value: 'input-number',
-  icon: 'ri-input-cursor-move',
-  scaffold: {
-    type: 'input-number',
-    label: '数字输入',
-    placeholder: '请输入数字',
-    controls: true
-  },
-  replace: {
-    groups: ['placeholder', 'numeric']
-  },
-  configTabs: createComponentConfigTabs({
-    basic: inputNumberBasicProps,
-    data: inputNumberDataProps
-  }),
-  configSchema: {
-    body: [...commonProps, ...inputNumberBasicProps, ...inputNumberDataProps]
-  }
-}

package/src/component-configs/input-table.ts

@@ -1,191 +0,0 @@
-import { markRaw } from 'vue'
-import type { ComponentConfig } from './types'
-import { commonProps, createComponentConfigTabs } from './common-props'
-import InputTableDefaultRowsEditor from '../components/input-table-default-rows-editor.vue'
-import InputTableOperationEditor from '../components/input-table-operation-editor.vue'
-import { migrateInputArrayItemsToInputTable } from './input-array'
-import type { XFormItem } from 'xkit-ui'
-
-const inputTableBasicProps: XFormItem[] = [
-  {
-    title: '组件属性',
-    type: 'group',
-    titleClass: 'config-group-title',
-    label: false
-  },
-  {
-    label: '行ID字段',
-    name: 'idField',
-    type: 'input',
-    placeholder: '默认 id'
-  },
-  {
-    label: '显示边框',
-    name: 'border',
-    type: 'switch',
-    defaultValue: true
-  },
-  {
-    label: '显示表头',
-    name: 'showHeader',
-    type: 'switch',
-    defaultValue: true,
-    labelRemark: '默认显示。合并模式下也会显示子表列头。'
-  },
-  {
-    label: '拖拽排序',
-    name: 'draggable',
-    type: 'switch'
-  },
-  {
-    label: '允许新增',
-    name: 'addable',
-    type: 'switch',
-    defaultValue: true
-  },
-  {
-    label: '允许删除',
-    name: 'deletable',
-    type: 'switch',
-    defaultValue: true
-  },
-  {
-    label: '最少行数',
-    name: 'minLength',
-    type: 'input-number',
-    min: 0,
-    step: 1,
-    controlsPosition: 'right'
-  },
-  {
-    label: '最多行数',
-    name: 'maxLength',
-    type: 'input-number',
-    min: 1,
-    step: 1,
-    controlsPosition: 'right'
-  }
-]
-
-const inputTableLayoutProps: XFormItem[] = [
-  {
-    title: '表格组合',
-    type: 'group',
-    titleClass: 'config-group-title',
-    label: false
-  },
-  {
-    label: '表格组合',
-    name: 'tableComposition',
-    type: 'x-radios',
-    mode: 'button',
-    size: 'small',
-    options: [
-      { label: '嵌套', value: 'nested' },
-      { label: '合并', value: 'merged' }
-    ],
-    defaultValue: 'nested',
-    pipeIn(value: string | undefined) {
-      return value ?? 'nested'
-    },
-    pipeOut(value: string) {
-      return value === 'merged' ? 'merged' : undefined
-    }
-  }
-]
-
-const inputTableDataProps: XFormItem[] = [
-  {
-    title: '预设数据',
-    name: 'defaultValue',
-    type: 'custom',
-    component: markRaw(InputTableDefaultRowsEditor),
-    titleClass: 'config-group-title',
-    label: false
-  }
-]
-
-const inputTableOperationProps: XFormItem[] = [
-  {
-    title: '行操作列',
-    name: 'items',
-    type: 'custom',
-    component: markRaw(InputTableOperationEditor),
-    titleClass: 'config-group-title',
-    label: false
-  },
-  {
-    title: '底部工具栏',
-    type: 'group',
-    titleClass: 'config-group-title',
-    label: false
-  },
-  {
-    label: '显示底部新增',
-    name: 'footerToolbar',
-    type: 'switch',
-    pipeIn(value: unknown) {
-      return Boolean(value)
-    },
-    pipeOut(value: boolean) {
-      return value
-        ? {
-            left: [{ type: 'button', action: 'add', label: '新增', attrs: { type: 'primary' } }]
-          }
-        : undefined
-    }
-  }
-]
-
-export const inputTableComponentConfig: ComponentConfig = {
-  label: '表格输入器',
-  value: 'x-input-table',
-  icon: 'ri-table-line',
-  editorKind: 'container',
-  scaffold: {
-    type: 'x-input-table',
-    label: '表格输入器',
-    name: 'tableData',
-    // defaultValue: [],
-    border: true,
-    idField: 'id',
-    items: [
-      {
-        label: '字段名称',
-        name: 'name',
-        type: 'input',
-        width: 160
-      },
-      {
-        label: '操作',
-        type: 'operation',
-        width: 100,
-        actions: [
-          { type: 'link', action: 'add', label: '新增' },
-          { type: 'link', action: 'delete', label: '删除' }
-        ]
-      }
-    ],
-    footerToolbar: {
-      left: [{ type: 'button', action: 'add', label: '新增', attrs: { type: 'primary' } }]
-    }
-  },
-  replace: {
-    groups: ['collection'],
-    migrate({ source }) {
-      if (source.type !== 'x-input-array') return {}
-      return {
-        items: migrateInputArrayItemsToInputTable(source.items)
-      }
-    }
-  },
-  configTabs: createComponentConfigTabs({
-    basic: inputTableBasicProps,
-    layout: inputTableLayoutProps,
-    data: inputTableDataProps,
-    operation: inputTableOperationProps
-  }),
-  configSchema: {
-    body: [...commonProps, ...inputTableBasicProps, ...inputTableLayoutProps, ...inputTableDataProps, ...inputTableOperationProps]
-  }
-}