xkit-editor 2.0.0-alpha.0

package/src/component-configs/options-config.ts

@@ -0,0 +1,12 @@
+import { markRaw } from 'vue'
+import type { XFormItem } from 'xkit-ui'
+import OptionsEditor from '../components/options/options-editor.vue'
+
+export const optionsConfigItem: XFormItem = {
+  title: '选项配置',
+  name: 'options',
+  type: 'custom',
+  component: markRaw(OptionsEditor),
+  titleClass: 'config-group-title',
+  label: false
+}

package/src/component-configs/radio.ts

@@ -0,0 +1,26 @@
+import type { ComponentConfig } from './types'
+import { commonProps, createComponentConfigTabs } from './common-props'
+import { optionsConfigItem } from './options-config'
+
+export const radioComponentConfig: ComponentConfig = {
+  label: '单选框',
+  value: 'x-radios',
+  icon: 'ri-radio-button-line',
+  scaffold: {
+    type: 'x-radios',
+    label: '单选框',
+    options: [
+      { label: '选项一', value: '1' },
+      { label: '选项二', value: '2' }
+    ]
+  },
+  replace: {
+    groups: ['options']
+  },
+  configTabs: createComponentConfigTabs({
+    data: [optionsConfigItem]
+  }),
+  configSchema: {
+    body: [...commonProps, optionsConfigItem]
+  }
+}

package/src/component-configs/select.ts

@@ -0,0 +1,42 @@
+import type { ComponentConfig } from './types'
+import { commonProps, createComponentConfigTabs } from './common-props'
+import { optionsConfigItem } from './options-config'
+import type { XFormItem } from 'xkit-ui'
+
+const selectBasicProps: XFormItem[] = [
+  {
+    title: '组件属性',
+    type: 'group',
+    titleClass: 'config-group-title',
+    label: false
+  },
+  {
+    label: '占位提示',
+    name: 'placeholder',
+    type: 'input'
+  }
+]
+
+export const selectComponentConfig: ComponentConfig = {
+  label: '下拉框',
+  value: 'select',
+  icon: 'ri-list-check',
+  scaffold: {
+    type: 'select',
+    label: '下拉框',
+    options: [
+      { label: '选项一', value: '1' },
+      { label: '选项二', value: '2' }
+    ]
+  },
+  replace: {
+    groups: ['options', 'placeholder']
+  },
+  configTabs: createComponentConfigTabs({
+    basic: selectBasicProps,
+    data: [optionsConfigItem]
+  }),
+  configSchema: {
+    body: [...commonProps, ...selectBasicProps, optionsConfigItem]
+  }
+}

package/src/component-configs/switch.ts

@@ -0,0 +1,19 @@
+import type { ComponentConfig } from './types'
+import { commonProps, createComponentConfigTabs } from './common-props'
+
+export const switchComponentConfig: ComponentConfig = {
+  label: '开关',
+  value: 'switch',
+  icon: 'ri-toggle-line',
+  scaffold: {
+    type: 'switch',
+    label: '开关'
+  },
+  replace: {
+    groups: []
+  },
+  configTabs: createComponentConfigTabs({}),
+  configSchema: {
+    body: [...commonProps]
+  }
+}

package/src/component-configs/textarea.ts

@@ -0,0 +1,84 @@
+import type { ComponentConfig } from './types'
+import { commonProps, createComponentConfigTabs } from './common-props'
+import type { XFormItem } from 'xkit-ui'
+
+const textareaBasicProps: XFormItem[] = [
+  {
+    title: '组件属性',
+    type: 'group',
+    titleClass: 'config-group-title',
+    label: false
+  },
+  {
+    label: '占位提示',
+    name: 'placeholder',
+    type: 'input'
+  },
+  {
+    label: '行数',
+    name: 'rows',
+    type: 'input-number',
+    min: 1,
+    step: 1,
+    controlsPosition: 'right'
+  },
+  {
+    label: '最大长度',
+    name: 'maxlength',
+    type: 'input-number',
+    min: 0,
+    step: 1,
+    controlsPosition: 'right'
+  },
+  {
+    label: '显示字数',
+    name: 'showWordLimit',
+    type: 'switch'
+  },
+  {
+    label: '自适应高度',
+    name: 'autosize',
+    type: 'switch'
+  },
+  {
+    label: '缩放方式',
+    name: 'resize',
+    type: 'x-radios',
+    mode: 'button',
+    size: 'small',
+    options: [
+      { label: '默认', value: '' },
+      { label: '禁止', value: 'none' },
+      { label: '双向', value: 'both' },
+      { label: '横向', value: 'horizontal' },
+      { label: '纵向', value: 'vertical' }
+    ],
+    pipeIn(value: string | undefined) {
+      return value ?? ''
+    },
+    pipeOut(value: string) {
+      return value || undefined
+    }
+  }
+]
+
+export const textareaComponentConfig: ComponentConfig = {
+  label: '多行文本输入框',
+  value: 'textarea',
+  icon: 'ri-align-left',
+  scaffold: {
+    type: 'textarea',
+    label: '多行文本',
+    placeholder: '请输入内容',
+    rows: 3
+  },
+  replace: {
+    groups: ['placeholder', 'lengthLimit']
+  },
+  configTabs: createComponentConfigTabs({
+    basic: textareaBasicProps
+  }),
+  configSchema: {
+    body: [...commonProps, ...textareaBasicProps]
+  }
+}

package/src/component-configs/types.ts

@@ -0,0 +1,37 @@
+import type { XFormItem } from 'xkit-ui'
+
+export type EditorConfigTabKey = 'basic' | 'layout' | 'data' | 'operation' | 'validation' | 'advanced'
+export type ComponentReplaceGroup = 'placeholder' | 'lengthLimit' | 'options' | 'numeric' | 'date' | 'upload' | 'icon' | 'collection'
+
+export interface EditorConfigTab {
+  key: EditorConfigTabKey
+  label?: string
+  body: XFormItem[]
+}
+
+export interface ComponentReplaceContext {
+  source: Record<string, any>
+  targetScaffold: Record<string, any>
+  sourceConfig: ComponentConfig
+  targetConfig: ComponentConfig
+}
+
+export interface ComponentReplaceConfig {
+  groups?: ComponentReplaceGroup[]
+  keep?: string[]
+  drop?: string[]
+  migrate?: (ctx: ComponentReplaceContext) => Record<string, any>
+}
+
+export interface ComponentConfig {
+  label: string
+  value: string
+  icon: string
+  editorKind?: 'leaf' | 'container'
+  scaffold: Record<string, unknown>
+  replace?: ComponentReplaceConfig
+  configTabs?: EditorConfigTab[]
+  configSchema: {
+    body: XFormItem[]
+  }
+}