xkit-editor 2.0.0-alpha.0

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

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

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

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

@@ -0,0 +1,191 @@
+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]
+  }
+}