fix(vue3-antd): 修复form label 双冒号问题

修复双冒号，优化playground体验，调整默认form构造函数name名称

fix #46

Author: lljj-x

packages/demo/demo-common/components/EditorHeader.vue

@@ -100,9 +100,10 @@ export default {
             font-size: 26px;
             text-transform: uppercase;
             z-index: 10;
+            margin: 0;
         }
         .logo {
-            vertical-align: top;
+            display: block;
             height: 30px;
         }
     }

packages/demo/demo-v3/src/pages/index/views/Demo/index.vue

@@ -6,13 +6,35 @@
             :show-version="true"
         >
             <div :class="$style.btns">
-                <span style="font-size: 13px;">标签：</span>
-                <el-slider
-                    v-model="formProps.labelWidth"
-                    style="width: 70px; margin-right: 6px;"
-                    size="mini"
-                    :format-tooltip="sliderFormat"
-                ></el-slider>
+                <template v-if="isUseLabelWidth">
+                    <span style="font-size: 13px;">标签：</span>
+                    <el-slider
+                        v-model="formProps.labelWidth"
+                        style="width: 70px; margin-right: 6px;"
+                        size="mini"
+                        :format-tooltip="sliderFormat"
+                    ></el-slider>
+                </template>
+
+                <template v-else>
+                    <span style="font-size: 13px;">labelCol：</span>
+                    <el-slider
+                        v-model="formProps.labelColSpan"
+                        :min="5"
+                        :max="15"
+                        style="width: 70px; margin-right: 6px;"
+                        size="mini"
+                    ></el-slider>
+                    <span style="font-size: 13px;">wrapperCol：</span>
+                    <el-slider
+                        v-model="formProps.wrapperColSpan"
+                        :min="5"
+                        :max="15"
+                        style="width: 70px; margin-right: 6px;"
+                        size="mini"
+                    ></el-slider>
+                </template>
+
                 <el-checkbox
                     v-model="formProps.inline"
                     style="margin-right: 6px;"
@@ -260,11 +282,29 @@ export default {
         pageKey() {
             return this.$route.query.type;
         },
+        isUseLabelWidth() {
+            return this.curVueForm === 'VueElementForm';
+        },
         trueFormProps() {
             if (!this.formProps) return {};
+            const {
+                labelColSpan,
+                wrapperColSpan,
+                labelWidth,
+                ...otherProps
+            } = this.formProps;
             return {
-                ...this.formProps,
-                labelWidth: this.formProps.labelWidth ? `${this.formProps.labelWidth * 4}px` : undefined
+                ...otherProps,
+                ...this.isUseLabelWidth ? {
+                    labelWidth: labelWidth ? `${labelWidth * 4}px` : undefined
+                } : {
+                    labelCol: {
+                        span: labelColSpan
+                    },
+                    wrapperCol: {
+                        span: wrapperColSpan
+                    }
+                }
             };
         },
         trueFormFooter() {
@@ -351,6 +391,8 @@ export default {
                     inline: false,
                     labelPosition: 'top',
                     inlineFooter: false,
+                    labelColSpan: 10,
+                    wrapperColSpan: 12,
                     layoutColumn: 1
                 }
             };

packages/docs/docs/zh/guide/README.md

@@ -200,15 +200,15 @@ Field props配置，如果需要使用 `ui:field` 自定义field 组件，需要
 > 不使用 `ui-schema` `ui:field` 一般不会使用
 
 #### vueUtils
-提供一些内部Vue相关的utils方法，详细的可以 [参见源码](https://github.com/lljj-x/vue-json-schema-form/blob/master/packages/lib/src/JsonSchemaForm/common/vueUtils.js)
+提供一些内部Vue相关的utils方法，详细的可以 [参见源码](https://github.com/lljj-x/vue-json-schema-form/blob/master/packages/lib/utils/vueUtils.js)
 > 不使用 `ui-schema` `ui:field` 一般不会使用
 
 #### formUtils
-提供一些内部Form相关的utils方法，详细的可以 [参见源码](https://github.com/lljj-x/vue-json-schema-form/blob/master/packages/lib/src/JsonSchemaForm/common/formUtils.js)
+提供一些内部Form相关的utils方法，详细的可以 [参见源码](https://github.com/lljj-x/vue-json-schema-form/blob/master/packages/lib/utils/formUtils.js)
 > 不使用 `ui-schema` `ui:field` 一般不会使用
 
 #### schemaValidate
-提供一些内部校验schema相关的方法，详细的可以 [参见源码](https://github.com/lljj-x/vue-json-schema-form/blob/master/packages/lib/src/JsonSchemaForm/common/schema/validate.js)
+提供一些内部校验schema相关的方法，详细的可以 [参见源码](https://github.com/lljj-x/vue-json-schema-form/blob/master/packages/lib/utils/schema/validate.js)
 > 不使用 `ui-schema` `ui:field` 一般不会使用
 
 ## 说明

packages/docs/docs/zh/guide/components.md

@@ -12,7 +12,7 @@
 * [DatePickerWidget](#datepickerwidget)
 * [DateTimePickerWidget](#datetimepickerwidget)
 * [UploadWidget](#uploadwidget)
-* [vue3 ant 特有的](#vue3-ant-特有的)
+* [vue3 ant 特有的](#vue3-ant-特有的全局组件)
 
 
 :::tip
@@ -162,4 +162,6 @@ vue3 ant 由于v-model不使用 `model: modelValue`，所以对常用的组件
 | AutoCompleteWidget   | a-auto-complete        |
 | SliderWidget   | a-slider        |
 | SwitchWidget   | a-switch        |
+| RateWidget   | a-rate        |
+
 

packages/lib/vue2/vue2-core/src/index.js

@@ -32,7 +32,7 @@ export default function createForm(globalOptions = {}) {
     }
 
     return {
-        name: 'ElementForm',
+        name: 'VueForm',
         props: vueProps,
         data() {
             const formData = getDefaultFormState(this.$props.schema, this.$props.value, this.$props.schema);

packages/lib/vue2/vue2-form-element/dist/vueJsonSchemaForm.esm.js

@@ -11522,7 +11522,7 @@ function createForm() {
   }
 
   return {
-    name: 'ElementForm',
+    name: 'VueForm',
     props: vueProps,
     data: function data() {
       var formData = getDefaultFormState(this.$props.schema, this.$props.value, this.$props.schema); // 保持v-model双向数据及时性

packages/lib/vue2/vue2-form-element/dist/vueJsonSchemaForm.esm.min.js

@@ -11530,7 +11530,7 @@
     }
 
     return {
-      name: 'ElementForm',
+      name: 'VueForm',
       props: vueProps,
       data: function data() {
         var formData = getDefaultFormState(this.$props.schema, this.$props.value, this.$props.schema); // 保持v-model双向数据及时性

packages/lib/vue2/vue2-form-element/dist/vueJsonSchemaForm.umd.js

@@ -11522,7 +11522,7 @@ function createForm() {
   }
 
   return {
-    name: 'ElementForm',
+    name: 'VueForm',
     props: vueProps,
     data: function data() {
       var formData = getDefaultFormState(this.$props.schema, this.$props.value, this.$props.schema); // 保持v-model双向数据及时性