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

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

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

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

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