xkit-editor 2.0.0-alpha.0

package/src/component-configs/date-picker.ts

@@ -0,0 +1,153 @@
+import type { ComponentConfig } from './types'
+import { commonProps, createComponentConfigTabs } from './common-props'
+import type { XFormItem } from 'xkit-ui'
+
+const getDefaultDateValueFormat = (type?: string) => {
+  const pickerType = String(type || 'date')
+  if (['year', 'years', 'yearrange'].includes(pickerType)) return 'YYYY'
+  if (['month', 'months', 'monthrange'].includes(pickerType)) return 'YYYY-MM'
+  if (['datetime', 'datetimerange'].includes(pickerType)) return 'YYYY-MM-DD HH:mm:ss'
+  return 'YYYY-MM-DD'
+}
+
+const defaultDateValueFormats = new Set([
+  'YYYY',
+  'YYYY-MM',
+  'YYYY-MM-DD',
+  'YYYY-MM-DD HH:mm:ss'
+])
+
+const datePickerBasicProps: XFormItem[] = [
+  {
+    title: '组件属性',
+    type: 'group',
+    titleClass: 'config-group-title',
+    label: false
+  },
+  {
+    label: '占位提示',
+    name: 'placeholder',
+    type: 'input',
+    visible(row: any) {
+      return !String(row._type || 'date').includes('range')
+    }
+  },
+  {
+    label: '开始占位',
+    name: 'startPlaceholder',
+    type: 'input',
+    visible(row: any) {
+      return String(row._type || '').includes('range')
+    }
+  },
+  {
+    label: '结束占位',
+    name: 'endPlaceholder',
+    type: 'input',
+    visible(row: any) {
+      return String(row._type || '').includes('range')
+    }
+  },
+  {
+    label: '允许清空',
+    name: 'clearable',
+    type: 'switch',
+    defaultValue: true
+  },
+  {
+    label: '允许输入',
+    name: 'editable',
+    type: 'switch',
+    defaultValue: true
+  },
+  {
+    label: '取消面板联动',
+    name: 'unlinkPanels',
+    type: 'switch',
+    visible(row: any) {
+      return String(row._type || '').includes('range')
+    }
+  }
+]
+
+const datePickerDataProps: XFormItem[] = [
+  {
+    title: '日期数据',
+    type: 'group',
+    titleClass: 'config-group-title',
+    label: false
+  },
+  {
+    label: '选择类型',
+    name: '_type',
+    type: 'select',
+    options: [
+      { label: '日期', value: 'date' },
+      { label: '日期时间', value: 'datetime' },
+      { label: '年份', value: 'year' },
+      { label: '月份', value: 'month' },
+      { label: '周', value: 'week' },
+      { label: '多个日期', value: 'dates' },
+      { label: '日期范围', value: 'daterange' },
+      { label: '日期时间范围', value: 'datetimerange' },
+      { label: '月份范围', value: 'monthrange' },
+      { label: '年份范围', value: 'yearrange' }
+    ],
+    defaultValue: 'date',
+    pipeOut(value: string, row: any) {
+      if (!row.valueFormat || defaultDateValueFormats.has(row.valueFormat)) {
+        row.valueFormat = getDefaultDateValueFormat(value)
+      }
+      return value
+    }
+  },
+  {
+    label: '展示格式',
+    name: 'format',
+    type: 'input',
+    placeholder: '例如 YYYY-MM-DD'
+  },
+  {
+    label: '值格式',
+    name: 'valueFormat',
+    type: 'input',
+    placeholder: '例如 YYYY-MM-DD',
+    pipeIn(value: string | undefined, row: any) {
+      return value || getDefaultDateValueFormat(row._type)
+    },
+    pipeOut(value: string, row: any) {
+      return value || getDefaultDateValueFormat(row._type)
+    }
+  },
+  {
+    label: '范围分隔符',
+    name: 'rangeSeparator',
+    type: 'input',
+    visible(row: any) {
+      return String(row._type || '').includes('range')
+    }
+  }
+]
+
+export const datePickerComponentConfig: ComponentConfig = {
+  label: '日期选择器',
+  value: 'date-picker',
+  icon: 'ri-calendar-line',
+  scaffold: {
+    type: 'date-picker',
+    label: '日期选择',
+    placeholder: '请选择日期',
+    _type: 'date',
+    valueFormat: 'YYYY-MM-DD'
+  },
+  replace: {
+    groups: ['placeholder', 'date']
+  },
+  configTabs: createComponentConfigTabs({
+    basic: datePickerBasicProps,
+    data: datePickerDataProps
+  }),
+  configSchema: {
+    body: [...commonProps, ...datePickerBasicProps, ...datePickerDataProps]
+  }
+}

package/src/component-configs/date-range-picker.ts

@@ -0,0 +1,185 @@
+import type { ComponentConfig } from './types'
+import { commonAdvancedProps, commonBasicProps, commonLayoutProps, 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 dateRangeBindingProp: XFormItem = {
+  label: false,
+  name: 'sync',
+  type: 'custom',
+  component: markRaw(InputNumberRangeBindingEditor),
+  allowTuple: false,
+  defaultBaseName: 'dateRange',
+  startFieldLabel: '开始字段',
+  endFieldLabel: '结束字段',
+  startSyncName: 'startDate',
+  endSyncName: 'endDate',
+  sync: [{ name: 'name', syncName: 'name' }]
+}
+
+const dateRangeBasicProps: 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'
+  }
+]
+
+const legacyDateRangeBasicProps: XFormItem[] = [
+  ...dateRangeBasicProps,
+  {
+    label: '允许输入',
+    name: 'editable',
+    type: 'switch',
+    defaultValue: true
+  },
+  {
+    label: '取消面板联动',
+    name: 'unlinkPanels',
+    type: 'switch'
+  }
+]
+
+const legacyDateRangeDataProps: XFormItem[] = [
+  {
+    title: '日期数据',
+    type: 'group',
+    titleClass: 'config-group-title',
+    label: false
+  },
+  {
+    label: '选择类型',
+    name: '_type',
+    type: 'select',
+    options: [
+      { label: '日期范围', value: 'daterange' },
+      { label: '日期时间范围', value: 'datetimerange' },
+      { label: '月份范围', value: 'monthrange' },
+      { label: '年份范围', value: 'yearrange' }
+    ],
+    defaultValue: 'daterange',
+    pipeOut(value: string, row: any) {
+      if (value === 'datetimerange' && (!row.valueFormat || row.valueFormat === 'YYYY-MM-DD')) {
+        row.valueFormat = 'YYYY-MM-DD HH:mm:ss'
+      }
+      return value
+    }
+  },
+  {
+    label: '展示格式',
+    name: 'format',
+    type: 'input',
+    placeholder: '例如 YYYY-MM-DD'
+  },
+  {
+    label: '值格式',
+    name: 'valueFormat',
+    type: 'input',
+    placeholder: '例如 YYYY-MM-DD'
+  }
+]
+
+const dateRangeV2DataProps: XFormItem[] = [
+  {
+    title: '日期数据',
+    type: 'group',
+    titleClass: 'config-group-title',
+    label: false
+  },
+  {
+    label: '展示格式',
+    name: 'format',
+    type: 'input',
+    placeholder: '例如 YYYY-MM-DD'
+  },
+  {
+    label: '值格式',
+    name: 'valueFormat',
+    type: 'input',
+    placeholder: '例如 YYYY-MM-DD'
+  }
+]
+
+const createDateRangeConfigTabs = (basicProps: XFormItem[], dataProps: XFormItem[]) => [
+  {
+    key: 'basic' as const,
+    body: [basicInfoGroupProp, labelProp, dateRangeBindingProp, labelPositionProp, ...basicProps]
+  },
+  { key: 'layout' as const, body: commonLayoutProps },
+  { key: 'data' as const, body: dataProps },
+  { key: 'validation' as const, body: commonValidationProps },
+  { key: 'advanced' as const, body: commonAdvancedProps }
+]
+
+export const dateRangePickerComponentConfig: ComponentConfig = {
+  label: '日期范围选择器',
+  value: 'x-date-range-picker',
+  icon: 'ri-calendar-event-line',
+  scaffold: {
+    type: 'x-date-range-picker',
+    label: '日期范围',
+    startPlaceholder: '开始日期',
+    endPlaceholder: '结束日期',
+    rangeSeperator: '至',
+    _type: 'daterange',
+    valueFormat: 'YYYY-MM-DD',
+    sync: [
+      { name: 'startDate', syncName: 'startDate' },
+      { name: 'endDate', syncName: 'endDate' }
+    ]
+  },
+  replace: {
+    groups: ['placeholder', 'date'],
+    keep: ['sync', 'rangeSeperator']
+  },
+  configTabs: createDateRangeConfigTabs(legacyDateRangeBasicProps, legacyDateRangeDataProps),
+  configSchema: {
+    body: [basicInfoGroupProp, labelProp, dateRangeBindingProp, labelPositionProp, ...legacyDateRangeBasicProps, ...commonLayoutProps, ...legacyDateRangeDataProps, ...commonValidationProps, ...commonAdvancedProps]
+  }
+}
+
+export const dateRangePickerV2ComponentConfig: ComponentConfig = {
+  label: '日期范围选择器2',
+  value: 'x-date-range-picker-v2',
+  icon: 'ri-calendar-schedule-line',
+  scaffold: {
+    type: 'x-date-range-picker-v2',
+    label: '日期范围',
+    startPlaceholder: '开始日期',
+    endPlaceholder: '结束日期',
+    rangeSeperator: '至',
+    valueFormat: 'YYYY-MM-DD',
+    format: 'YYYY-MM-DD',
+    sync: [
+      { name: 'startDate', syncName: 'startDate' },
+      { name: 'endDate', syncName: 'endDate' }
+    ]
+  },
+  replace: {
+    groups: ['placeholder', 'date'],
+    keep: ['sync', 'rangeSeperator']
+  },
+  configTabs: createDateRangeConfigTabs(dateRangeBasicProps, dateRangeV2DataProps),
+  configSchema: {
+    body: [basicInfoGroupProp, labelProp, dateRangeBindingProp, labelPositionProp, ...dateRangeBasicProps, ...commonLayoutProps, ...dateRangeV2DataProps, ...commonValidationProps, ...commonAdvancedProps]
+  }
+}

package/src/component-configs/group.ts

@@ -0,0 +1,196 @@
+import { markRaw } from 'vue'
+import type { ComponentConfig } from './types'
+import { commonAdvancedProps, commonValidationProps } from './common-props'
+import ObjectSectionEditor from '../components/object-section-editor.vue'
+import GroupTitleStylePicker from '../components/group-title-style-picker.vue'
+import GroupTitleColorSelect from '../components/group-title-color-select.vue'
+import FormItemLayoutEditor from '../components/form-item-layout-editor.vue'
+import { containerLayoutSections } from './layout-sections'
+import type { XFormItem } from 'xkit-ui'
+
+const groupBasicProps: XFormItem[] = [
+  {
+    title: '分组属性',
+    type: 'group',
+    titleClass: 'config-group-title',
+    label: false
+  },
+  {
+    label: '显示表单标签',
+    name: 'label',
+    type: 'switch',
+    pipeIn(value: string | false | undefined) {
+      return value !== false
+    },
+    pipeOut(value: boolean, row: any) {
+      return value ? row.label || row.title || '分组' : false
+    }
+  },
+  {
+    label: '分组标题',
+    name: 'title',
+    type: 'input',
+    placeholder: '请输入分组标题'
+  },
+  {
+    label: '字段名',
+    name: 'name',
+    type: 'input',
+    placeholder: '请输入字段名'
+  },
+  {
+    label: '标签位置',
+    name: 'labelPosition',
+    type: 'select',
+    options: [
+      { label: '继承', value: '' },
+      { label: '左', value: 'left' },
+      { label: '上', value: 'top' },
+      { label: '右', value: 'right' }
+    ],
+    visible(row: any) {
+      return row.label !== false
+    },
+    pipeIn(value: string | undefined) {
+      return value ?? ''
+    },
+    pipeOut(value: string) {
+      return value || undefined
+    }
+  },
+  {
+    label: '显示模式',
+    name: 'mode',
+    type: 'x-radios',
+    mode: 'button',
+    size: 'small',
+    options: [
+      { label: '默认', value: 'default' },
+      { label: '行内', value: 'inline' },
+      { label: '嵌套', value: 'nest' }
+    ],
+    defaultValue: 'default'
+  },
+  {
+    label: '显示切换',
+    name: 'showToggleButton',
+    type: 'switch'
+  }
+]
+
+const groupLayoutProps: 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
+  },
+  {
+    name: 'layout',
+    type: 'custom',
+    component: markRaw(ObjectSectionEditor),
+    label: false,
+    rootKey: 'layout',
+    sectionMode: 'plain',
+    sections: containerLayoutSections
+  }
+]
+
+const groupAdvancedProps: XFormItem[] = [
+  {
+    title: '样式配置',
+    type: 'group',
+    titleClass: 'config-group-title',
+    label: false
+  },
+  {
+    label: '标题样式',
+    name: 'titleClass',
+    type: 'custom',
+    component: markRaw(GroupTitleStylePicker)
+  },
+  {
+    label: '标题图标',
+    name: 'titleIcon',
+    type: 'x-icon-select',
+    clearable: true
+  },
+  {
+    label: '标题对齐',
+    name: 'titleAlign',
+    type: 'x-radios',
+    mode: 'button',
+    size: 'small',
+    options: [
+      { label: '左', value: 'left' },
+      { label: '中', value: 'center' },
+      { label: '右', value: 'right' }
+    ],
+    pipeIn(value: string | undefined) {
+      return value ?? 'left'
+    },
+    pipeOut(value: string) {
+      return value === 'left' ? undefined : value
+    }
+  },
+  {
+    label: '标题字号',
+    name: 'titleSize',
+    type: 'x-radios',
+    mode: 'button',
+    size: 'small',
+    options: [
+      { label: '小', value: 'small' },
+      { label: '中', value: 'medium' },
+      { label: '大', value: 'large' }
+    ],
+    pipeIn(value: string | undefined) {
+      return value ?? 'medium'
+    },
+    pipeOut(value: string) {
+      return value === 'medium' ? undefined : value
+    }
+  },
+  {
+    label: '标题颜色',
+    name: 'titleColor',
+    type: 'custom',
+    component: markRaw(GroupTitleColorSelect)
+  }
+]
+
+export const groupComponentConfig: ComponentConfig = {
+  label: '分组',
+  value: 'group',
+  icon: 'ri-layout-grid-line',
+  editorKind: 'container',
+  scaffold: {
+    type: 'group',
+    title: '分组',
+    label: false,
+    span: 24,
+    body: []
+  },
+  configTabs: [
+    { key: 'basic', body: groupBasicProps },
+    { key: 'layout', body: groupLayoutProps },
+    { key: 'validation', body: commonValidationProps },
+    { key: 'advanced', body: [...commonAdvancedProps, ...groupAdvancedProps] }
+  ],
+  configSchema: {
+    body: [...groupBasicProps, ...groupLayoutProps, ...commonValidationProps, ...commonAdvancedProps, ...groupAdvancedProps]
+  }
+}

package/src/component-configs/icon-select.ts

@@ -0,0 +1,56 @@
+import type { ComponentConfig } from './types'
+import { commonProps, createComponentConfigTabs } from './common-props'
+import { getIconSourceOptions, type XFormItem } from 'xkit-ui'
+
+const iconSelectBasicProps: XFormItem[] = [
+  {
+    title: '组件属性',
+    type: 'group',
+    titleClass: 'config-group-title',
+    label: false
+  },
+  {
+    label: '允许清空',
+    name: 'clearable',
+    type: 'switch',
+    defaultValue: true
+  }
+]
+
+const iconSelectDataProps: XFormItem[] = [
+  {
+    title: '图标资源',
+    type: 'group',
+    titleClass: 'config-group-title',
+    label: false
+  },
+  {
+    label: '可用图标库',
+    name: 'iconSources',
+    type: 'x-checkboxes',
+    options: getIconSourceOptions,
+    showLoading: false
+  }
+]
+
+export const iconSelectComponentConfig: ComponentConfig = {
+  label: '图标选择器',
+  value: 'x-icon-select',
+  icon: 'ri-remixicon-line',
+  scaffold: {
+    type: 'x-icon-select',
+    label: '图标选择器',
+    clearable: true,
+    iconSources: []
+  },
+  replace: {
+    groups: ['icon']
+  },
+  configTabs: createComponentConfigTabs({
+    basic: iconSelectBasicProps,
+    data: iconSelectDataProps
+  }),
+  configSchema: {
+    body: [...commonProps, ...iconSelectBasicProps, ...iconSelectDataProps]
+  }
+}