xkit-editor 2.0.0-alpha.0

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

@@ -0,0 +1,123 @@
+import type { ComponentConfig } from './types'
+import { commonProps, createComponentConfigTabs } from './common-props'
+import type { XFormItem } from 'xkit-ui'
+
+const uploadBasicProps: XFormItem[] = [
+  {
+    title: '组件属性',
+    type: 'group',
+    titleClass: 'config-group-title',
+    label: false
+  },
+  {
+    label: '上传模式',
+    name: 'mode',
+    type: 'x-radios',
+    mode: 'button',
+    size: 'small',
+    options: [
+      { label: '文件', value: 'file' },
+      { label: '图片', value: 'image' }
+    ],
+    pipeIn(value: string | undefined) {
+      return value ?? 'file'
+    },
+    pipeOut(value: string) {
+      return value === 'file' ? undefined : value
+    }
+  },
+  {
+    label: '多文件',
+    name: 'multiple',
+    type: 'switch',
+    defaultValue: true
+  },
+  {
+    label: '提示文案',
+    name: 'tips',
+    type: 'input',
+    placeholder: '上传提示'
+  }
+]
+
+const uploadDataProps: XFormItem[] = [
+  {
+    title: '上传数据',
+    type: 'group',
+    titleClass: 'config-group-title',
+    label: false
+  },
+  {
+    label: '数量限制',
+    name: 'limit',
+    type: 'input-number',
+    min: 1,
+    step: 1,
+    controlsPosition: 'right',
+    visible(row: any) {
+      return row.multiple !== false
+    }
+  },
+  {
+    label: '大小限制(M)',
+    name: 'limitSize',
+    type: 'input-number',
+    min: 0,
+    controlsPosition: 'right'
+  },
+  {
+    label: '文件类型',
+    name: 'accept',
+    type: 'input',
+    placeholder: '例如 .png,.jpg'
+  },
+  {
+    label: '连接值',
+    name: 'joinValues',
+    type: 'switch'
+  },
+  {
+    label: '连接字段',
+    name: 'joinValuesField',
+    type: 'input',
+    placeholder: '默认 url',
+    visible(row: any) {
+      return row.joinValues === true
+    }
+  },
+  {
+    label: '值字段',
+    name: 'valueField',
+    type: 'input',
+    placeholder: '默认 url',
+    visible(row: any) {
+      return row.joinValues === true
+    }
+  },
+  {
+    label: 'ID模式',
+    name: 'idMode',
+    type: 'switch'
+  }
+]
+
+export const inputUploadComponentConfig: ComponentConfig = {
+  label: '文件上传',
+  value: 'x-input-upload',
+  icon: 'ri-upload-cloud-2-line',
+  scaffold: {
+    type: 'x-input-upload',
+    label: '文件上传',
+    multiple: true
+  },
+  replace: {
+    groups: ['upload']
+  },
+  configTabs: createComponentConfigTabs({
+    basic: uploadBasicProps,
+    data: uploadDataProps
+  }),
+  configSchema: {
+    body: [...commonProps, ...uploadBasicProps, ...uploadDataProps]
+  }
+}

package/src/component-configs/input.ts

@@ -0,0 +1,48 @@
+import type { ComponentConfig } from './types'
+import { commonProps, createComponentConfigTabs } from './common-props'
+import type { XFormItem } from 'xkit-ui'
+
+const inputBasicProps: XFormItem[] = [
+  {
+    title: '组件属性',
+    type: 'group',
+    titleClass: 'config-group-title',
+    label: false
+  },
+  {
+    label: '占位提示',
+    name: 'placeholder',
+    type: 'input'
+  },
+  {
+    label: '最大长度',
+    name: 'maxlength',
+    type: 'input'
+  },
+  {
+    label: '允许清空',
+    name: 'clearable',
+    type: 'switch',
+    defaultValue: true
+  }
+]
+
+export const inputComponentConfig: ComponentConfig = {
+  label: '输入框',
+  value: 'input',
+  icon: 'ri-barcode-box-line',
+  scaffold: {
+    type: 'input',
+    label: '输入框',
+    placeholder: '请输入内容'
+  },
+  replace: {
+    groups: ['placeholder', 'lengthLimit']
+  },
+  configTabs: createComponentConfigTabs({
+    basic: inputBasicProps
+  }),
+  configSchema: {
+    body: [...commonProps, ...inputBasicProps]
+  }
+}

package/src/component-configs/layout-sections.ts

@@ -0,0 +1,546 @@
+import type { ObjectSection } from '../components/object-section-editor.vue'
+
+export const containerLayoutSections: ObjectSection[] = [
+  {
+    label: '列数',
+    key: 'col',
+    body: [
+      {
+        label: '默认列数',
+        name: 'span',
+        type: 'slider',
+        min: 2,
+        max: 24,
+        step: 2,
+        marks: {
+          8: '1/3',
+          12: '1/2',
+          16: '2/3',
+          24: '100%'
+        },
+        pipeIn(value: number | undefined) {
+          return value ?? 24
+        },
+        pipeOut(value: number) {
+          return value === 24 ? undefined : value
+        }
+      }
+    ]
+  },
+  {
+    label: '间距',
+    key: 'row',
+    body: [
+      {
+        label: '栅格间隔',
+        name: 'gutter',
+        type: 'input-number',
+        min: 0,
+        step: 1,
+        controlsPosition: 'right',
+        placeholder: 'gutter'
+      }
+    ]
+  }
+]
+
+export const inputArrayContainerLayoutSections: ObjectSection[] = [
+  {
+    label: '列宽',
+    key: 'col',
+    body: [
+      {
+        label: '默认每列占位',
+        name: 'span',
+        type: 'select',
+        clearable: false,
+        options: [
+          { label: '整行', value: 24 },
+          { label: '1/2行', value: 12 },
+          { label: '1/3行', value: 8 },
+          { label: '1/4行', value: 6 }
+        ],
+        pipeIn(value: number | undefined) {
+          return value ?? 24
+        },
+        pipeOut(value: number) {
+          return value === 24 ? undefined : value
+        }
+      }
+    ]
+  },
+  {
+    label: '间距',
+    key: 'row',
+    body: [
+      {
+        label: '栅格间隔',
+        name: 'gutter',
+        type: 'select',
+        clearable: false,
+        options: [
+          { label: '小 8px', value: 8 },
+          { label: '中 12px', value: 12 },
+          { label: '大 16px', value: 16 },
+          { label: '特大 20px', value: 20 }
+        ],
+        pipeIn(value: number | undefined) {
+          return value ?? 8
+        },
+        pipeOut(value: number) {
+          return value === 8 ? undefined : value
+        }
+      }
+    ]
+  }
+]
+
+export const inputArrayItemWidthLayoutSections: ObjectSection[] = [
+  {
+    label: '宽度',
+    key: 'width',
+    body: [
+      {
+        label: '控件宽度',
+        name: 'width',
+        type: 'input',
+        placeholder: '例如 180px 或 100%'
+      }
+    ]
+  }
+]
+
+export const descriptionsLayoutSections: ObjectSection[] = [
+  {
+    label: '基础',
+    key: 'basic',
+    body: [
+      {
+        label: '每行项数',
+        name: 'column',
+        type: 'input-number',
+        min: 1,
+        max: 6,
+        step: 1,
+        controlsPosition: 'right',
+        placeholder: '默认 3'
+      },
+      {
+        label: '标签宽度',
+        name: 'labelWidth',
+        type: 'input',
+        placeholder: '例如 120'
+      },
+      {
+        label: '排列方向',
+        name: 'direction',
+        type: 'x-radios',
+        mode: 'button',
+        size: 'small',
+        options: [
+          { label: '水平', value: 'horizontal' },
+          { label: '垂直', value: 'vertical' }
+        ]
+      }
+    ]
+  },
+  {
+    label: '样式',
+    key: 'style',
+    body: [
+      {
+        label: '尺寸',
+        name: 'size',
+        type: 'x-radios',
+        mode: 'button',
+        size: 'small',
+        options: [
+          { label: '默认', value: '' },
+          { label: '小', value: 'small' },
+          { label: '大', value: 'large' }
+        ]
+      },
+      {
+        label: '标题',
+        name: 'title',
+        type: 'input'
+      }
+    ]
+  }
+]
+
+export const tableLayoutSections: ObjectSection[] = [
+  {
+    label: '基础',
+    key: 'basic',
+    body: [
+      {
+        label: '每行列数',
+        name: 'columns',
+        type: 'input-number',
+        min: 2,
+        max: 24,
+        step: 1,
+        controlsPosition: 'right',
+        placeholder: '默认 4',
+        pipeIn(value: number | undefined) {
+          return value ?? 4
+        },
+        pipeOut(value: number) {
+          return value
+        }
+      },
+      {
+        label: '标签宽度',
+        name: 'labelWidth',
+        type: 'input',
+        placeholder: '例如 140'
+      },
+      {
+        label: '值最小宽度',
+        name: 'valueMinWidth',
+        type: 'input',
+        placeholder: '例如 220'
+      },
+      {
+        label: '物理列宽',
+        name: 'columnWidths',
+        type: 'x-input-array',
+        labelPosition: 'top',
+        useScaffoldValue: false,
+        showFooterAddButton: true,
+        addable: true,
+        deletable: true,
+        useLayout: true,
+        layout: {
+          row: { gutter: 8 },
+          col: { span: 24 }
+        },
+        pipeIn(value: Array<string | number> | undefined) {
+          return Array.isArray(value) ? value.map((width) => ({ width })) : []
+        },
+        pipeOut(value: Array<{ width?: string | number }> | undefined) {
+          const result = Array.isArray(value) ? value.map((item) => item?.width).filter((width) => width !== undefined && width !== null && width !== '') : []
+          return result.length ? result : undefined
+        },
+        items: [
+          {
+            label: false,
+            name: 'width',
+            type: 'input',
+            placeholder: '例如 160 或 25%',
+            span: 24
+          }
+        ]
+      }
+    ]
+  },
+  {
+    label: '外观',
+    key: 'appearance',
+    body: [
+      {
+        label: '外观模式',
+        name: 'variant',
+        type: 'x-radios',
+        mode: 'button',
+        size: 'small',
+        options: [
+          { label: '默认', value: 'default' },
+          { label: '纯表格', value: 'plain' },
+          { label: '文档', value: 'document' }
+        ],
+        pipeIn(value: string | undefined) {
+          return value ?? 'default'
+        },
+        pipeOut(value: string) {
+          return value === 'default' ? undefined : value
+        }
+      },
+      {
+        label: '边框颜色',
+        name: 'borderColor',
+        type: 'input',
+        placeholder: '例如 #333'
+      },
+      {
+        label: '边框宽度',
+        name: 'borderWidth',
+        type: 'input',
+        placeholder: '例如 1'
+      },
+      {
+        label: '标签背景',
+        name: 'labelBackground',
+        type: 'input',
+        placeholder: '例如 transparent'
+      },
+      {
+        label: '值背景',
+        name: 'valueBackground',
+        type: 'input',
+        placeholder: '例如 transparent'
+      },
+      {
+        label: '标签字重',
+        name: 'labelFontWeight',
+        type: 'input',
+        placeholder: '例如 400'
+      },
+      {
+        label: '单元格内边距',
+        name: 'cellPadding',
+        type: 'input',
+        placeholder: '例如 6px 8px'
+      },
+      {
+        label: '控件边框',
+        name: 'controlBorder',
+        type: 'switch',
+        labelRemark: '关闭后，输入框、选择框等控件自身边框会隐藏，更接近 Word 表格。'
+      },
+      {
+        label: '占位提示',
+        name: 'showPlaceholder',
+        type: 'switch',
+        labelRemark: '文档模式默认隐藏占位提示，开启后显示输入框、选择框等控件的 placeholder。',
+        pipeIn(value: boolean | undefined, formValue: Record<string, any>) {
+          if (typeof value === 'boolean') return value
+          return formValue.variant !== 'document'
+        },
+        pipeOut(value: boolean) {
+          return value
+        }
+      }
+    ]
+  },
+  {
+    label: '高级',
+    key: 'advanced',
+    body: [
+      {
+        label: '值宽度',
+        name: 'valueWidth',
+        type: 'input',
+        placeholder: '例如 240'
+      },
+      {
+        label: '行高',
+        name: 'rowHeight',
+        type: 'input',
+        placeholder: '例如 48'
+      }
+    ]
+  }
+]
+
+export const descriptionsItemLayoutSections: ObjectSection[] = [
+  {
+    label: '基础',
+    key: 'basic',
+    body: [
+      {
+        label: '占用项数',
+        name: 'span',
+        type: 'input-number',
+        min: 1,
+        max: 8,
+        step: 1,
+        controlsPosition: 'right',
+        placeholder: '默认 1'
+      },
+      {
+        label: '标签宽度',
+        name: 'labelWidth',
+        type: 'input',
+        placeholder: '例如 120'
+      }
+    ]
+  },
+  {
+    label: '高级',
+    key: 'advanced',
+    body: [
+      {
+        label: '行合并',
+        name: 'rowspan',
+        type: 'input-number',
+        min: 1,
+        step: 1,
+        controlsPosition: 'right'
+      },
+      {
+        label: '内容宽度',
+        name: 'width',
+        type: 'input'
+      },
+      {
+        label: '最小宽度',
+        name: 'minWidth',
+        type: 'input'
+      }
+    ]
+  }
+]
+
+export const tableItemLayoutSections: ObjectSection[] = [
+  {
+    label: '基础',
+    key: 'basic',
+    body: [
+      {
+        label: '标签占列',
+        name: 'labelColspan',
+        type: 'input-number',
+        min: 1,
+        step: 1,
+        controlsPosition: 'right',
+        placeholder: '默认 1'
+      },
+      {
+        label: '值占列',
+        name: 'valueColspan',
+        type: 'input-number',
+        min: 1,
+        step: 1,
+        controlsPosition: 'right',
+        placeholder: '默认 1'
+      },
+      {
+        label: '标签宽度',
+        name: 'labelWidth',
+        type: 'input',
+        placeholder: '例如 140'
+      },
+      {
+        label: '值最小宽度',
+        name: 'valueMinWidth',
+        type: 'input',
+        placeholder: '例如 220'
+      }
+    ]
+  },
+  {
+    label: '高级',
+    key: 'advanced',
+    body: [
+      {
+        label: '行合并',
+        name: 'rowspan',
+        type: 'input-number',
+        min: 1,
+        step: 1,
+        controlsPosition: 'right'
+      }
+    ]
+  }
+]
+
+export const inputTableNestedColumnLayoutSections: ObjectSection[] = [
+  {
+    label: '基础',
+    key: 'basic',
+    body: [
+      {
+        label: '内容对齐',
+        name: 'align',
+        type: 'x-radios',
+        mode: 'button',
+        size: 'small',
+        options: [
+          { label: '继承', value: '' },
+          { label: '左', value: 'left' },
+          { label: '中', value: 'center' },
+          { label: '右', value: 'right' }
+        ],
+        pipeIn(value: string | undefined) {
+          return value ?? ''
+        },
+        pipeOut(value: string) {
+          return value || undefined
+        }
+      },
+      {
+        label: '表头对齐',
+        name: 'headerAlign',
+        type: 'x-radios',
+        mode: 'button',
+        size: 'small',
+        options: [
+          { label: '继承', value: '' },
+          { label: '左', value: 'left' },
+          { label: '中', value: 'center' },
+          { label: '右', value: 'right' }
+        ],
+        pipeIn(value: string | undefined) {
+          return value ?? ''
+        },
+        pipeOut(value: string) {
+          return value || undefined
+        }
+      },
+      {
+        label: '最小宽度',
+        name: 'minWidth',
+        type: 'input',
+        placeholder: '例如 160'
+      }
+    ]
+  }
+]
+
+export const inputTableMergedColumnLayoutSections: ObjectSection[] = [
+  {
+    label: '基础',
+    key: 'basic',
+    body: [
+      {
+        label: '内容对齐',
+        name: 'align',
+        type: 'x-radios',
+        mode: 'button',
+        size: 'small',
+        options: [
+          { label: '继承', value: '' },
+          { label: '左', value: 'left' },
+          { label: '中', value: 'center' },
+          { label: '右', value: 'right' }
+        ],
+        pipeIn(value: string | undefined) {
+          return value ?? ''
+        },
+        pipeOut(value: string) {
+          return value || undefined
+        }
+      },
+      {
+        label: '表头对齐',
+        name: 'headerAlign',
+        type: 'x-radios',
+        mode: 'button',
+        size: 'small',
+        options: [
+          { label: '继承', value: '' },
+          { label: '左', value: 'left' },
+          { label: '中', value: 'center' },
+          { label: '右', value: 'right' }
+        ],
+        pipeIn(value: string | undefined) {
+          return value ?? ''
+        },
+        pipeOut(value: string) {
+          return value || undefined
+        }
+      },
+      {
+        label: '占列',
+        name: 'colspan',
+        type: 'input-number',
+        min: 1,
+        step: 1,
+        controlsPosition: 'right',
+        placeholder: '默认 1'
+      }
+    ]
+  }
+]