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

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

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

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

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

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