@epic-designer/antd 1.1.0 → 1.1.2-beta.0

package/src/date-picker/index.ts

@@ -7,25 +7,56 @@ export default {
     attribute: [
       {
         field: 'field',
-        label: '字段名',
-        type: 'input',
+        label: '数据字段',
+        type: 'EpField',
       },
       {
-        componentProps: {
-          placeholder: '请输入',
-        },
         field: 'label',
         label: '标题',
+        props: {
+          placeholder: '请输入',
+        },
         type: 'input',
       },
       {
-        field: 'componentProps.defaultValue',
+        field: 'props.defaultValue',
         label: '默认值',
         type: 'date',
       },
       {
         changeSync: true,
-        componentProps: {
+        field: 'props.type',
+        label: '日期类型',
+        onChange({ value, values }) {
+          values.props.defaultValue = null;
+          values.props.placeholder = [
+            'daterange',
+            'monthrange',
+            'quarterrange',
+            'weekrange',
+            'yearrange',
+          ].includes(value)
+            ? ['请输入', '请输入']
+            : '请输入';
+
+          if (['date', 'daterange'].includes(value)) {
+            values.props.format = 'YYYY-MM-DD';
+            values.props.valueFormat = 'YYYY-MM-DD';
+          } else if (['week', 'weekrange'].includes(value)) {
+            values.props.format = 'ww [周]';
+            values.props.valueFormat = 'YYYY-MM-DD';
+          } else if (['month', 'monthrange'].includes(value)) {
+            values.props.format = 'YYYY-MM';
+            values.props.valueFormat = 'YYYY-MM';
+          } else if (['quarter', 'quarterrange'].includes(value)) {
+            values.props.format = 'YYYY-Q季度';
+            values.props.valueFormat = 'YYYY-Q季度';
+          } else if (['"yearrange"', 'year'].includes(value)) {
+            values.props.format = 'YYYY';
+            values.props.valueFormat = 'YYYY';
+          }
+        },
+        props: {
           options: [
             {
               label: '日期',
@@ -69,62 +100,31 @@ export default {
             },
           ],
         },
-        field: 'componentProps.type',
-        label: '日期类型',
-        onChange({ value, values }) {
-          values.componentProps.defaultValue = null;
-          values.componentProps.placeholder = [
-            'daterange',
-            'monthrange',
-            'quarterrange',
-            'weekrange',
-            'yearrange',
-          ].includes(value)
-            ? ['请输入', '请输入']
-            : '请输入';
-
-          if (['date', 'daterange'].includes(value)) {
-            values.componentProps.format = 'YYYY-MM-DD';
-            values.componentProps.valueFormat = 'YYYY-MM-DD';
-          } else if (['week', 'weekrange'].includes(value)) {
-            values.componentProps.format = 'ww [周]';
-            values.componentProps.valueFormat = 'YYYY-MM-DD';
-          } else if (['month', 'monthrange'].includes(value)) {
-            values.componentProps.format = 'YYYY-MM';
-            values.componentProps.valueFormat = 'YYYY-MM';
-          } else if (['quarter', 'quarterrange'].includes(value)) {
-            values.componentProps.format = 'YYYY-Q季度';
-            values.componentProps.valueFormat = 'YYYY-Q季度';
-          } else if (['"yearrange"', 'year'].includes(value)) {
-            values.componentProps.format = 'YYYY';
-            values.componentProps.valueFormat = 'YYYY';
-          }
-        },
         type: 'select',
       },
       {
-        field: 'componentProps.showTime',
+        field: 'props.showTime',
         label: '增加时间选择',
         onChange: ({ value, values }) => {
           if (value) {
-            values.componentProps.valueFormat = 'YYYY-MM-DD HH:mm:ss';
-            values.componentProps.format = 'YYYY-MM-DD HH:mm:ss';
+            values.props.valueFormat = 'YYYY-MM-DD HH:mm:ss';
+            values.props.format = 'YYYY-MM-DD HH:mm:ss';
           } else {
-            values.componentProps.valueFormat = 'YYYY-MM-DD';
-            values.componentProps.format = 'YYYY-MM-DD';
+            values.props.valueFormat = 'YYYY-MM-DD';
+            values.props.format = 'YYYY-MM-DD';
           }
         },
         show({ values }) {
-          return ['date', 'daterange'].includes(values.componentProps.type);
+          return ['date', 'daterange'].includes(values.props.type);
         },
         type: 'switch',
       },
       {
-        componentProps: {
+        field: 'props.placeholder',
+        label: '占位内容',
+        props: {
           placeholder: '请输入',
         },
-        field: 'componentProps.placeholder',
-        label: '占位内容',
         show: ({ values }) =>
           ![
             'daterange',
@@ -132,15 +132,15 @@ export default {
             'quarterrange',
             'weekrange',
             'yearrange',
-          ].includes(values.componentProps.type),
+          ].includes(values.props.type),
         type: 'input',
       },
       {
-        componentProps: {
+        field: 'props.placeholder.0',
+        label: '开始占位符',
+        props: {
           placeholder: '请输入',
         },
-        field: 'componentProps.placeholder.0',
-        label: '开始占位符',
         show: ({ values }) =>
           [
             'daterange',
@@ -148,16 +148,16 @@ export default {
             'quarterrange',
             'weekrange',
             'yearrange',
-          ].includes(values.componentProps.type),
+          ].includes(values.props.type),
         type: 'input',
       },
 
       {
-        componentProps: {
+        field: 'props.placeholder.1',
+        label: '结束占位符',
+        props: {
           placeholder: '请输入',
         },
-        field: 'componentProps.placeholder.1',
-        label: '结束占位符',
         show: ({ values }) =>
           [
             'daterange',
@@ -165,27 +165,29 @@ export default {
             'quarterrange',
             'weekrange',
             'yearrange',
-          ].includes(values.componentProps.type),
+          ].includes(values.props.type),
         type: 'input',
       },
       {
-        componentProps: {
+        field: 'props.format',
+        label: '显示格式',
+        props: {
           placeholder: '请输入',
         },
-        field: 'componentProps.format',
-        label: '显示格式',
         type: 'input',
       },
       {
-        componentProps: {
+        field: 'props.valueFormat',
+        label: '数据格式',
+        props: {
           placeholder: '请输入',
         },
-        field: 'componentProps.valueFormat',
-        label: '数据格式',
         type: 'input',
       },
       {
-        componentProps: {
+        field: 'props.size',
+        label: '尺寸',
+        props: {
           allowClear: true,
           options: [
             {
@@ -203,13 +205,13 @@ export default {
           ],
           placeholder: '请选择',
         },
-        field: 'componentProps.size',
-        label: '尺寸',
         type: 'select',
       },
 
       {
-        componentProps: {
+        field: 'props.placement',
+        label: '弹出框位置',
+        props: {
           allowClear: true,
           options: [
             {
@@ -231,36 +233,34 @@ export default {
           ],
           placeholder: '请选择',
         },
-        field: 'componentProps.placement',
-        label: '弹出框位置',
         type: 'select',
       },
       {
-        componentProps: {
+        field: 'props.bordered',
+        label: '无边框',
+        props: {
           checkedValue: false,
           unCheckedValue: true,
         },
-        field: 'componentProps.bordered',
-        label: '无边框',
         type: 'switch',
       },
       {
-        field: 'componentProps.inputReadOnly',
+        field: 'props.inputReadOnly',
         label: '禁止键盘输入',
         type: 'switch',
       },
       {
-        field: 'componentProps.allowClear',
+        field: 'props.allowClear',
         label: '可清空',
         type: 'switch',
       },
       {
-        field: 'componentProps.disabled',
+        field: 'props.disabled',
         label: '禁用',
         type: 'switch',
       },
       {
-        field: 'componentProps.hidden',
+        field: 'props.hidden',
         label: '隐藏',
         type: 'switch',
       },
@@ -284,15 +284,15 @@ export default {
     ],
   },
   defaultSchema: {
-    componentProps: {
+    field: 'date',
+    input: true,
+    label: '日期选择器',
+    props: {
       format: 'YYYY-MM-DD',
       placeholder: '请选择',
       type: 'date',
       valueFormat: 'YYYY-MM-DD',
     },
-    field: 'date',
-    input: true,
-    label: '日期选择器',
     type: 'date',
   },
   groupName: '表单',

package/src/form/form.vue

@@ -36,7 +36,7 @@ const form = ref<FormInstance | null>(null);
 const forms = inject<{ [name: string]: any }>('forms', {});
 const formData = pageManager.setFormData(
   {},
-  props.componentSchema?.componentProps?.name,
+  props.componentSchema?.props?.name,
 );
 provide('formData', formData);
 
@@ -76,7 +76,7 @@ const mountedForm = (vNode: VNode) => {
 
   if (props.componentSchema?.type === 'form' && forms.value && form.value) {
     const name =
-      props.componentSchema?.componentProps?.name ??
+      props.componentSchema?.props?.name ??
       props.componentSchema?.name ??
       ('default' as string);
 
@@ -88,8 +88,8 @@ const mountedForm = (vNode: VNode) => {
   }
 };
 
-const componentProps = computed(() => {
-  const recordProps = props.componentSchema!.componentProps;
+const formProps = computed(() => {
+  const recordProps = props.componentSchema!.props;
   let labelCol = recordProps.labelCol;
   let wrapperCol = recordProps.wrapperCol;
   if (recordProps.layout === 'vertical') {
@@ -132,7 +132,7 @@ defineExpose({
 <template>
   <Form
     :model="formData"
-    v-bind="componentProps"
+    v-bind="formProps"
     @finish="onFinish"
     @vue:mounted="mountedForm"
   >

package/src/form/index.ts

@@ -19,12 +19,14 @@ export default {
     ],
     attribute: [
       {
-        field: 'componentProps.name',
+        field: 'props.name',
         label: 'Name',
         type: 'input',
       },
       {
-        componentProps: {
+        field: 'props.layout',
+        label: '表单布局',
+        props: {
           allowClear: true,
           'option-type': 'button',
           options: [
@@ -43,12 +45,12 @@ export default {
           ],
           placeholder: '请选择',
         },
-        field: 'componentProps.layout',
-        label: '表单布局',
         type: 'radio',
       },
       {
-        componentProps: {
+        field: 'props.labelLayout',
+        label: '标签布局',
+        props: {
           'option-type': 'button',
           options: [
             {
@@ -61,42 +63,42 @@ export default {
             },
           ],
         },
-        field: 'componentProps.labelLayout',
-        label: '标签布局',
         type: 'radio',
       },
       {
-        field: 'componentProps.labelWidth',
+        field: 'props.labelWidth',
         label: '标签宽度',
         show: ({ values }) => {
-          return values.componentProps?.labelLayout === 'fixed';
+          return values.props?.labelLayout === 'fixed';
         },
         type: 'EInputSize',
       },
       {
-        componentProps: {
+        field: 'props.labelCol.span',
+        label: '标签占比',
+        props: {
           placeholder: '请输入',
         },
-        field: 'componentProps.labelCol.span',
-        label: '标签占比',
         show: ({ values }) => {
-          return values.componentProps?.labelLayout === 'flex';
+          return values.props?.labelLayout === 'flex';
         },
         type: 'input',
       },
       {
-        componentProps: {
+        field: 'props.wrapperCol.span',
+        label: '控件占比',
+        props: {
           placeholder: '请输入',
         },
-        field: 'componentProps.wrapperCol.span',
-        label: '控件占比',
         show: ({ values }) => {
-          return values.componentProps?.labelLayout === 'flex';
+          return values.props?.labelLayout === 'flex';
         },
         type: 'input',
       },
       {
-        componentProps: {
+        field: 'props.labelAlign',
+        label: '标签对齐',
+        props: {
           'option-type': 'button',
           options: [
             {
@@ -109,12 +111,13 @@ export default {
             },
           ],
         },
-        field: 'componentProps.labelAlign',
-        label: '标签对齐',
         type: 'radio',
       },
       {
-        componentProps: {
+        defaultValue: 'default',
+        field: 'props.size',
+        label: '尺寸',
+        props: {
           allowClear: true,
           options: [
             {
@@ -132,50 +135,48 @@ export default {
           ],
           placeholder: '请选择',
         },
-        defaultValue: 'default',
-        field: 'componentProps.size',
-        label: '尺寸',
         type: 'select',
       },
       {
-        componentProps: {
+        field: 'props.colon',
+        label: '隐藏冒号',
+        props: {
           checkedValue: false,
           unCheckedValue: true,
         },
-        field: 'componentProps.colon',
-        label: '隐藏冒号',
         type: 'switch',
       },
       {
-        field: 'componentProps.hideRequiredMark',
+        field: 'props.hideRequiredMark',
         label: '隐藏必须标志',
         type: 'switch',
       },
 
       {
-        field: 'componentProps.labelWrap',
+        field: 'props.labelWrap',
         label: '标签文本换行',
         type: 'switch',
       },
       {
-        field: 'componentProps.scrollToFirstError',
+        field: 'props.scrollToFirstError',
         label: '滚动校验错误处',
         type: 'switch',
       },
       {
-        field: 'componentProps.disabled',
+        field: 'props.disabled',
         label: '禁用',
         type: 'switch',
       },
       {
-        field: 'componentProps.hidden',
+        field: 'props.hidden',
         label: '隐藏',
         type: 'switch',
       },
     ],
   },
   defaultSchema: {
-    componentProps: {
+    label: '表单',
+    props: {
       labelCol: {
         span: 5,
       },
@@ -186,7 +187,6 @@ export default {
         span: 19,
       },
     },
-    label: '表单',
     type: 'form',
     children: [],
   },

package/src/index.ts

@@ -17,13 +17,14 @@ import Form from './form';
 import FormItem from './form-item';
 import Input from './input';
 import InputNumber from './input-number';
-import InputPassword from './input-password';
 import Modal from './modal';
 import Radio from './radio';
 import Row from './row';
 import Select from './select';
 import Slider from './slider';
 import Switch from './switch';
+import TabsPane from './tab-pane';
+import Tabs from './tabs';
 import Textarea from './textarea';
 import TimePicker from './time-picker';
 import UploadFile from './upload-file';
@@ -74,14 +75,6 @@ export function setupAntd(pluginManager: PluginManager = pManager): void {
     'CollapseItem',
     async () => (await import('ant-design-vue')).CollapsePanel,
   );
-  pluginManager.component.add(
-    'Tabs',
-    async () => (await import('ant-design-vue')).Tabs,
-  );
-  pluginManager.component.add(
-    'TabPane',
-    async () => (await import('ant-design-vue')).TabPane,
-  );
 
   const componentArray = [
     Form,
@@ -89,7 +82,6 @@ export function setupAntd(pluginManager: PluginManager = pManager): void {
     Input,
     Textarea,
     InputNumber,
-    InputPassword,
     Radio,
     Checkbox,
     Select,
@@ -106,14 +98,14 @@ export function setupAntd(pluginManager: PluginManager = pManager): void {
     Row,
     Col,
     Modal,
+    Tabs,
+    TabsPane,
   ];
 
   // 更新默认上传地址
   watchEffect(() => {
-    UploadImage.defaultSchema.componentProps.action =
-      pluginManager.global.uploadImage;
-    UploadFile.defaultSchema.componentProps.action =
-      pluginManager.global.uploadFile;
+    UploadImage.defaultSchema.props.action = pluginManager.global.uploadImage;
+    UploadFile.defaultSchema.props.action = pluginManager.global.uploadFile;
   });
 
   componentArray.forEach((item) => {
@@ -130,5 +122,5 @@ export function setupAntd(pluginManager: PluginManager = pManager): void {
   };
 
   // ui初始化完成。
-  pluginManager.setInitialized(true);
+  pluginManager.designer.setInitialized(true);
 }

package/src/input/index.ts

@@ -21,8 +21,8 @@ export default {
     attribute: [
       {
         field: 'field',
-        label: '字段名',
-        type: 'input',
+        label: '数据字段',
+        type: 'EpField',
       },
       {
         field: 'label',
@@ -30,20 +30,22 @@ export default {
         type: 'input',
       },
       {
-        field: 'componentProps.placeholder',
+        field: 'props.placeholder',
         label: '占位内容',
         type: 'input',
       },
       {
-        componentProps: {
+        field: 'props.defaultValue',
+        label: '默认值',
+        props: {
           placeholder: '请输入',
         },
-        field: 'componentProps.defaultValue',
-        label: '默认值',
         type: 'input',
       },
       {
-        componentProps: {
+        field: 'props.type',
+        label: '输入类型',
+        props: {
           allowClear: true,
           options: [
             {
@@ -61,12 +63,12 @@ export default {
           ],
           placeholder: '请选择',
         },
-        field: 'componentProps.type',
-        label: '输入类型',
         type: 'select',
       },
       {
-        componentProps: {
+        field: 'props.size',
+        label: '尺寸',
+        props: {
           allowClear: true,
           options: [
             {
@@ -84,44 +86,42 @@ export default {
           ],
           placeholder: '请选择',
         },
-        field: 'componentProps.size',
-        label: '尺寸',
         type: 'select',
       },
       {
-        componentProps: {
+        field: 'props.bordered',
+        label: '无边框',
+        props: {
           checkedValue: false,
           unCheckedValue: true,
         },
-        field: 'componentProps.bordered',
-        label: '无边框',
         type: 'switch',
       },
       {
-        componentProps: {
+        field: 'props.maxlength',
+        label: '最大输入长度',
+        props: {
           placeholder: '请输入',
         },
-        field: 'componentProps.maxlength',
-        label: '最大输入长度',
         type: 'number',
       },
       {
-        field: 'componentProps.showCount',
+        field: 'props.showCount',
         label: '展示字数',
         type: 'switch',
       },
       {
-        field: 'componentProps.allowClear',
+        field: 'props.allowClear',
         label: '可清空',
         type: 'switch',
       },
       {
-        field: 'componentProps.disabled',
+        field: 'props.disabled',
         label: '禁用',
         type: 'switch',
       },
       {
-        field: 'componentProps.hidden',
+        field: 'props.hidden',
         label: '隐藏',
         type: 'switch',
       },
@@ -157,12 +157,12 @@ export default {
     ],
   },
   defaultSchema: {
-    componentProps: {
-      placeholder: '请输入',
-    },
     field: 'input',
     input: true,
     label: '输入框',
+    props: {
+      placeholder: '请输入',
+    },
     type: 'input',
   },
   groupName: '表单',