vxe-pc-ui 4.0.91 → 4.0.92

package/es/form/src/form.js

@@ -493,11 +493,13 @@ export default defineComponent({
                 return nextTick();
             }
             let fields = [];
-            if (XEUtils.isArray(fieldOrItem)) {
-                fields = fieldOrItem;
-            }
-            else {
-                fields = [fieldOrItem];
+            if (fieldOrItem) {
+                if (XEUtils.isArray(fieldOrItem)) {
+                    fields = fieldOrItem;
+                }
+                else {
+                    fields = [fieldOrItem];
+                }
             }
             return beginValidate(fields.map(field => handleFieldOrItem($xeForm, field)), '', callback);
         };

package/es/form-design/src/form-design.js

@@ -92,7 +92,7 @@ export default defineComponent({
             return XEUtils.clone(reactData.formData, true);
         };
         const loadFormConfig = (data) => {
-            reactData.formData = Object.assign({}, data);
+            reactData.formData = Object.assign({}, createSettingForm(), data);
             return nextTick();
         };
         const getWidgetData = () => {
@@ -127,7 +127,7 @@ export default defineComponent({
             },
             clearConfig() {
                 reactData.widgetObjList = [];
-                createSettingForm();
+                initSettingForm();
                 return nextTick();
             },
             loadConfig,
@@ -301,7 +301,10 @@ export default defineComponent({
                 const createFormConfig = compConf ? compConf.createFormDesignSettingFormConfig : null;
                 formData = (createFormConfig ? createFormConfig({}) : {}) || {};
             }
-            reactData.formData = formData;
+            return formData;
+        };
+        const initSettingForm = () => {
+            reactData.formData = createSettingForm();
         };
         const openStylePreviewEvent = () => {
             openStyleSetting();
@@ -367,7 +370,7 @@ export default defineComponent({
         watch(() => props.config, (value) => {
             loadConfig(value || {});
         });
-        createSettingForm();
+        initSettingForm();
         updateWidgetConfigs();
         if (props.config) {
             loadConfig(props.config);

package/es/form-design/src/form-view.js

@@ -124,7 +124,7 @@ export default defineComponent({
                 { required: true, content: '该填写该字段！' }
             ];
         };
-        const updateItemStatus = (widget, value) => {
+        const updateWidgetStatus = (widget, value) => {
             const { field } = widget;
             const $form = formRef.value;
             if ($form) {
@@ -154,6 +154,17 @@ export default defineComponent({
         const dispatchEvent = (type, params, evnt) => {
             emit(type, createEvent(evnt, { $formView: $xeFormView }, params));
         };
+        const toWidgetFields = (widget) => {
+            if (widget) {
+                if (XEUtils.isArray(widget)) {
+                    return widget.map(item => item.name);
+                }
+                else {
+                    return [widget.name];
+                }
+            }
+            return null;
+        };
         const formViewMethods = {
             dispatchEvent,
             clearConfig,
@@ -161,9 +172,42 @@ export default defineComponent({
             parseConfig,
             loadFormConfig,
             loadWidgetData,
-            updateItemStatus,
+            updateWidgetStatus,
             setItemValue,
-            getItemValue
+            getItemValue,
+            validate() {
+                const $form = formRef.value;
+                if ($form) {
+                    return $form.validate();
+                }
+                return nextTick();
+            },
+            validateWidget(widget) {
+                const $form = formRef.value;
+                if ($form) {
+                    return $form.validateField(toWidgetFields(widget));
+                }
+                return nextTick();
+            },
+            clearValidate(widget) {
+                const $form = formRef.value;
+                if ($form) {
+                    return $form.clearValidate(toWidgetFields(widget));
+                }
+                return nextTick();
+            },
+            reset() {
+                const $form = formRef.value;
+                if ($form) {
+                    return $form.reset();
+                }
+                return nextTick();
+            },
+            /**
+             * 已废弃
+             * @deprecated
+             */
+            updateItemStatus: updateWidgetStatus
         };
         const handleSubmit = (params) => {
             dispatchEvent('submit', params, params.$event);

package/es/form-design/src/layout-style.js

@@ -1,7 +1,7 @@
 import { createCommentVNode, defineComponent, h, inject, ref, reactive, provide } from 'vue';
 import { getIcon, getI18n, renderer } from '@vxe-ui/core';
 import { getSlotVNs } from '../../ui/src/vn';
-import VxeDrawerComponent from '../../drawer/src/drawer';
+import VxeModalComponent from '../../modal/src/modal';
 import VxeTabsComponent from '../../tabs/src/tabs';
 import VxeTabPaneComponent from '../../tabs/src/tab-pane';
 import VxeFormViewComponent from './form-view';
@@ -156,13 +156,15 @@ export default defineComponent({
         };
         const renderVN = () => {
             const { showPc, showMobile } = formDesignProps;
-            return h(VxeDrawerComponent, {
+            return h(VxeModalComponent, {
                 modelValue: settingVisible.value,
                 title: getI18n('vxe.formDesign.styleSetting.title'),
                 height: '90vh',
+                width: '90vw',
+                escClosable: true,
                 maskClosable: true,
                 destroyOnClose: true,
-                position: 'bottom',
+                showMaximize: true,
                 'onUpdate:modelValue'(val) {
                     settingVisible.value = val;
                 }

package/es/form-design/src/use/index.js

@@ -0,0 +1,4 @@
+export * from './widget-name';
+export * from './widget-view';
+export * from './widget-prop-data-source';
+export * from './widget-prop-default-value';

package/es/form-design/src/use/widget-name.js

@@ -0,0 +1,11 @@
+import { computed } from 'vue';
+import XEUtils from 'xe-utils';
+export function useWidgetName(props) {
+    const computeKebabCaseName = computed(() => {
+        const { renderOpts } = props;
+        return renderOpts ? XEUtils.kebabCase(renderOpts.name) : '';
+    });
+    return {
+        computeKebabCaseName
+    };
+}

package/es/form-design/src/{use.js → use/widget-prop-data-source.js}

@@ -1,10 +1,9 @@
-import { h, onMounted, computed, ref, watch } from 'vue';
+import { h, onMounted, ref, watch } from 'vue';
 import { VxeUI, getIcon, getI18n } from '@vxe-ui/core';
-import VxeFormItemComponent from '../../form/src/form-item';
-import VxeButtonComponent from '../../button/src/button';
-import VxeTextareaComponent from '../../textarea/src/textarea';
-import VxeTipComponent from '../../tip/src/tip';
-import XEUtils from 'xe-utils';
+import VxeFormItemComponent from '../../../form/src/form-item';
+import VxeButtonComponent from '../../../button/src/button';
+import VxeTextareaComponent from '../../../textarea/src/textarea';
+import VxeTipComponent from '../../../tip/src/tip';
 export function useWidgetPropDataSource(props, isSubOption) {
     const optionsContent = ref('');
     const expandIndexList = ref([]);
@@ -42,6 +41,19 @@ export function useWidgetPropDataSource(props, isSubOption) {
             expandIndexList.value.push(gIndex);
         }
     };
+    const removeOptionEvent = (item, group) => {
+        const { renderParams } = props;
+        const { widget } = renderParams;
+        const { options } = widget;
+        if (group) {
+            if (group.options) {
+                group.options = group.options.filter(obj => obj !== item);
+            }
+        }
+        else {
+            options.options = options.options.filter(obj => obj !== item);
+        }
+    };
     const confirmBatchAddOptionEvent = () => {
         const { renderParams } = props;
         const { widget } = renderParams;
@@ -131,7 +143,8 @@ export function useWidgetPropDataSource(props, isSubOption) {
             }
         });
     };
-    const renderOption = (item, hasFirstLevel, isExpand, gIndex, hasSub, isFirst, isLast) => {
+    const renderOption = (item, group, isExpand, gIndex, hasSub, isFirst, isLast) => {
+        const hasFirstLevel = !group;
         return h('div', {
             class: ['vxe-form-design--widget-form-item-data-source-option', {
                     'is--first': isFirst,
@@ -160,7 +173,10 @@ export function useWidgetPropDataSource(props, isSubOption) {
             h(VxeButtonComponent, {
                 status: 'danger',
                 mode: 'text',
-                icon: getIcon().FORM_DESIGN_WIDGET_DELETE
+                icon: getIcon().FORM_DESIGN_WIDGET_DELETE,
+                onClick() {
+                    removeOptionEvent(item, group);
+                }
             })
         ]);
     };
@@ -175,15 +191,15 @@ export function useWidgetPropDataSource(props, isSubOption) {
                 const { options } = group;
                 const isExpand = expandIndexList.value.includes(gIndex);
                 if (options && options.length) {
-                    optVNs.push(renderOption(group, true, isExpand, gIndex, true, gIndex === 0, gIndex === groups.length - 1));
+                    optVNs.push(renderOption(group, null, isExpand, gIndex, true, gIndex === 0, gIndex === groups.length - 1));
                     if (isExpand) {
                         optVNs.push(h('div', {
                             class: 'vxe-form-design--widget-form-item-data-source-sub-option'
-                        }, options.map(item => renderOption(item, false, isExpand, 0, false, false, false))));
+                        }, options.map(item => renderOption(item, group, isExpand, 0, false, false, false))));
                     }
                 }
                 else {
-                    optVNs.push(renderOption(group, true, isExpand, gIndex, false, gIndex === 0, gIndex === groups.length - 1));
+                    optVNs.push(renderOption(group, null, isExpand, gIndex, false, gIndex === 0, gIndex === groups.length - 1));
                 }
             });
         }
@@ -226,36 +242,3 @@ export function useWidgetPropDataSource(props, isSubOption) {
         }
     };
 }
-export function useWidgetName(props) {
-    const computeKebabCaseName = computed(() => {
-        const { renderOpts } = props;
-        return renderOpts ? XEUtils.kebabCase(renderOpts.name) : '';
-    });
-    return {
-        computeKebabCaseName
-    };
-}
-export function useWidgetView(props) {
-    const currWidget = computed(() => {
-        const { renderParams } = props;
-        return renderParams.widget;
-    });
-    const widgetModel = computed({
-        get() {
-            const { renderParams } = props;
-            const { $formView, widget } = renderParams;
-            return $formView ? $formView.getItemValue(widget) : null;
-        },
-        set(value) {
-            const { renderParams } = props;
-            const { $formView, widget } = renderParams;
-            if ($formView) {
-                $formView.setItemValue(widget, value);
-            }
-        }
-    });
-    return {
-        currWidget,
-        widgetModel
-    };
-}

package/es/form-design/src/use/widget-prop-default-value.js

@@ -0,0 +1,38 @@
+import { h, ref } from 'vue';
+import VxeFormItemComponent from '../../../form/src/form-item';
+import VxeSelectComponent from '../../../select/src/select';
+import VxeInputComponent from '../../../input/src/input';
+export function useWidgetPropDefaultValue(props) {
+    const defValOptions = ref([
+        { value: 'custom', label: '自定义' }
+        // { value: 'linkage', label: '数据联动' }
+    ]);
+    return {
+        renderDefaultValueFormItem() {
+            const { renderParams } = props;
+            const { widget } = renderParams;
+            const { defaultValue } = widget.options;
+            return h(VxeFormItemComponent, {
+                title: '默认值'
+            }, {
+                default() {
+                    return [
+                        h(VxeSelectComponent, {
+                            modelValue: defaultValue.type,
+                            options: defValOptions.value,
+                            'onUpdate:modelValue'(val) {
+                                defaultValue.type = val;
+                            }
+                        }),
+                        h(VxeInputComponent, {
+                            modelValue: defaultValue.value,
+                            'onUpdate:modelValue'(val) {
+                                defaultValue.value = val;
+                            }
+                        })
+                    ];
+                }
+            });
+        }
+    };
+}

package/es/form-design/src/use/widget-view.js

@@ -0,0 +1,25 @@
+import { computed } from 'vue';
+export function useWidgetView(props) {
+    const currWidget = computed(() => {
+        const { renderParams } = props;
+        return renderParams.widget;
+    });
+    const widgetModel = computed({
+        get() {
+            const { renderParams } = props;
+            const { $formView, widget } = renderParams;
+            return $formView ? $formView.getItemValue(widget) : null;
+        },
+        set(value) {
+            const { renderParams } = props;
+            const { $formView, widget } = renderParams;
+            if ($formView) {
+                $formView.setItemValue(widget, value);
+            }
+        }
+    });
+    return {
+        currWidget,
+        widgetModel
+    };
+}

package/es/form-design/widget-input/input-view.js

@@ -22,7 +22,7 @@ export const WidgetInputViewComponent = defineComponent({
             const { widget } = renderParams;
             if ($xeFormView) {
                 const itemValue = $xeFormView ? $xeFormView.getItemValue(widget) : null;
-                $xeFormView.updateItemStatus(widget, itemValue);
+                $xeFormView.updateWidgetStatus(widget, itemValue);
             }
         };
         return () => {

package/es/form-design/widget-select/select-view.js

@@ -21,7 +21,7 @@ export const WidgetSelectViewComponent = defineComponent({
             const { widget } = renderParams;
             if ($xeFormView) {
                 const itemValue = $xeFormView ? $xeFormView.getItemValue(widget) : null;
-                $xeFormView.updateItemStatus(widget, itemValue);
+                $xeFormView.updateWidgetStatus(widget, itemValue);
             }
         };
         const renderOptions = () => {

package/es/form-design/widget-textarea/textarea-view.js

@@ -22,7 +22,7 @@ export const WidgetTextareaViewComponent = defineComponent({
             const { widget } = renderParams;
             if ($xeFormView) {
                 const itemValue = $xeFormView ? $xeFormView.getItemValue(widget) : null;
-                $xeFormView.updateItemStatus(widget, itemValue);
+                $xeFormView.updateWidgetStatus(widget, itemValue);
             }
         };
         return () => {

package/es/form-design/widget-vxe-checkbox-group/vxe-checkbox-group-view.js

@@ -22,7 +22,7 @@ export const WidgetVxeCheckboxGroupViewComponent = defineComponent({
             const { widget } = renderParams;
             if ($xeFormView) {
                 const itemValue = $xeFormView ? $xeFormView.getItemValue(widget) : null;
-                $xeFormView.updateItemStatus(widget, itemValue);
+                $xeFormView.updateWidgetStatus(widget, itemValue);
             }
         };
         return () => {

package/es/form-design/widget-vxe-date-picker/vxe-date-picker-data.js

@@ -4,7 +4,11 @@ export const getWidgetVxeDatePickerConfig = () => {
         title: handleGetFormDesignWidgetName,
         icon: 'vxe-icon-calendar',
         options: {
-            placeholder: ''
+            placeholder: '',
+            defaultValue: {
+                type: '',
+                value: ''
+            }
         }
     };
 };

package/es/form-design/widget-vxe-date-picker/vxe-date-picker-form.js

@@ -19,6 +19,7 @@ export const WidgetVxeDatePickerFormComponent = defineComponent({
     emits: [],
     setup(props) {
         const { computeKebabCaseName } = useWidgetName(props);
+        // const { renderDefaultValueFormItem } = useWidgetPropDefaultValue(props)
         return () => {
             const { renderParams } = props;
             const { widget } = renderParams;
@@ -49,6 +50,7 @@ export const WidgetVxeDatePickerFormComponent = defineComponent({
                             field: 'placeholder',
                             itemRender: { name: 'VxeInput' }
                         }),
+                        // renderDefaultValueFormItem(),
                         h(VxeFormItemComponent, {
                             title: getI18n('vxe.formDesign.widgetProp.required')
                         }, {

package/es/form-design/widget-vxe-date-picker/vxe-date-picker-view.js

@@ -22,7 +22,7 @@ export const WidgetVxeDatePickerViewComponent = defineComponent({
             const { widget } = renderParams;
             if ($xeFormView) {
                 const itemValue = $xeFormView ? $xeFormView.getItemValue(widget) : null;
-                $xeFormView.updateItemStatus(widget, itemValue);
+                $xeFormView.updateWidgetStatus(widget, itemValue);
             }
         };
         return () => {

package/es/form-design/widget-vxe-input/vxe-input-view.js

@@ -22,7 +22,7 @@ export const WidgetVxeInputViewComponent = defineComponent({
             const { widget } = renderParams;
             if ($xeFormView) {
                 const itemValue = $xeFormView ? $xeFormView.getItemValue(widget) : null;
-                $xeFormView.updateItemStatus(widget, itemValue);
+                $xeFormView.updateWidgetStatus(widget, itemValue);
             }
         };
         return () => {

package/es/form-design/widget-vxe-number-input/vxe-number-input-view.js

@@ -22,7 +22,7 @@ export const WidgetVxeNumberInputViewComponent = defineComponent({
             const { widget } = renderParams;
             if ($xeFormView) {
                 const itemValue = $xeFormView ? $xeFormView.getItemValue(widget) : null;
-                $xeFormView.updateItemStatus(widget, itemValue);
+                $xeFormView.updateWidgetStatus(widget, itemValue);
             }
         };
         return () => {

package/es/form-design/widget-vxe-radio-group/vxe-radio-group-view.js

@@ -22,7 +22,7 @@ export const WidgetVxeRadioGroupViewComponent = defineComponent({
             const { widget } = renderParams;
             if ($xeFormView) {
                 const itemValue = $xeFormView ? $xeFormView.getItemValue(widget) : null;
-                $xeFormView.updateItemStatus(widget, itemValue);
+                $xeFormView.updateWidgetStatus(widget, itemValue);
             }
         };
         return () => {

package/es/form-design/widget-vxe-select/vxe-select-view.js

@@ -23,7 +23,7 @@ export const WidgetVxeSelectViewComponent = defineComponent({
             const { widget } = renderParams;
             if ($xeFormView) {
                 const itemValue = $xeFormView ? $xeFormView.getItemValue(widget) : null;
-                $xeFormView.updateItemStatus(widget, itemValue);
+                $xeFormView.updateWidgetStatus(widget, itemValue);
             }
         };
         return () => {

package/es/form-design/widget-vxe-switch/vxe-switch-view.js

@@ -22,7 +22,7 @@ export const WidgetVxeSwitchViewComponent = defineComponent({
             const { widget } = renderParams;
             if ($xeFormView) {
                 const itemValue = $xeFormView ? $xeFormView.getItemValue(widget) : null;
-                $xeFormView.updateItemStatus(widget, itemValue);
+                $xeFormView.updateWidgetStatus(widget, itemValue);
             }
         };
         return () => {

package/es/form-design/widget-vxe-textarea/vxe-textarea-view.js

@@ -22,7 +22,7 @@ export const WidgetVxeTextareaViewComponent = defineComponent({
             const { widget } = renderParams;
             if ($xeFormView) {
                 const itemValue = $xeFormView ? $xeFormView.getItemValue(widget) : null;
-                $xeFormView.updateItemStatus(widget, itemValue);
+                $xeFormView.updateWidgetStatus(widget, itemValue);
             }
         };
         return () => {

package/es/form-design/widget-vxe-tree-select/vxe-tree-select-view.js

@@ -23,7 +23,7 @@ export const WidgetVxeTreeSelectViewComponent = defineComponent({
             const { widget } = renderParams;
             if ($xeFormView) {
                 const itemValue = $xeFormView ? $xeFormView.getItemValue(widget) : null;
-                $xeFormView.updateItemStatus(widget, itemValue);
+                $xeFormView.updateWidgetStatus(widget, itemValue);
             }
         };
         return () => {

package/es/form-design/widget-vxe-upload-file/vxe-upload-file-view.js

@@ -22,7 +22,7 @@ export const WidgetVxeUploadFileViewComponent = defineComponent({
             const { widget } = renderParams;
             if ($xeFormView) {
                 const itemValue = $xeFormView ? $xeFormView.getItemValue(widget) : null;
-                $xeFormView.updateItemStatus(widget, itemValue);
+                $xeFormView.updateWidgetStatus(widget, itemValue);
             }
         };
         return () => {

package/es/form-design/widget-vxe-upload-image/vxe-upload-image-view.js

@@ -22,7 +22,7 @@ export const WidgetVxeUploadImageViewComponent = defineComponent({
             const { widget } = renderParams;
             if ($xeFormView) {
                 const itemValue = $xeFormView ? $xeFormView.getItemValue(widget) : null;
-                $xeFormView.updateItemStatus(widget, itemValue);
+                $xeFormView.updateWidgetStatus(widget, itemValue);
             }
         };
         return () => {