vxe-design 4.0.8 → 4.1.0

package/es/form-design/index.js

@@ -1,7 +1,7 @@
 import { VxeUI } from '@vxe-ui/core';
 import { checkDependVersion } from '../ui/src/depend';
 import VxeFormDesignComponent from './src/form-design';
-import { useWidgetView, useWidgetName, useSubtableView, useWidgetPropDataSource } from './src/use';
+import { useFormView, useWidgetView, useWidgetName, useSubtableView, useWidgetPropDataSource } from './src/use';
 import './render';
 export const VxeFormDesign = Object.assign({}, VxeFormDesignComponent, {
     install(app) {
@@ -10,6 +10,7 @@ export const VxeFormDesign = Object.assign({}, VxeFormDesignComponent, {
     }
 });
 const formDesignHandle = {
+    useFormView,
     useWidgetName,
     useWidgetView,
     useSubtableView,

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

@@ -40,6 +40,10 @@ export default defineVxeComponent({
             type: Boolean,
             default: () => getConfig().formDesign.showMobile
         },
+        showStyleSetting: {
+            type: Boolean,
+            default: () => getConfig().formDesign.showStyleSetting
+        },
         formRender: Object,
         menuConfig: Object
     },
@@ -406,17 +410,18 @@ export default defineVxeComponent({
         };
         const createSettingForm = () => {
             const { formRender, showPc, showMobile } = props;
-            let conf = getDefaultSettingFormData({
+            const defConf = getDefaultSettingFormData({
                 pcVisible: showPc,
                 mobileVisible: showMobile
             });
+            let customConf = {};
             // 如果为自定义渲染
             if (formRender) {
                 const compConf = renderer.get(formRender.name);
                 const createFormConfig = compConf ? compConf.createFormDesignSettingFormConfig : null;
-                conf = (createFormConfig ? createFormConfig({}) : {}) || {};
+                customConf = (createFormConfig ? createFormConfig({}) : {}) || {};
             }
-            return conf;
+            return Object.assign({}, defConf, customConf);
         };
         const initSettingForm = () => {
             reactData.formData = createSettingForm();
@@ -426,6 +431,7 @@ export default defineVxeComponent({
         };
         Object.assign($xeFormDesign, formDesignMethods, formDesignPrivateMethods);
         const renderLayoutHeader = () => {
+            const { showStyleSetting } = props;
             const titleSlot = slots.title;
             const titlePrefixSlot = slots.titlePrefix || slots['title-prefix'];
             const titleSuffixSlot = slots.titleSuffix || slots['title-suffix'] || slots.extra;
@@ -446,17 +452,19 @@ export default defineVxeComponent({
                             class: 'vxe-form-design--header-extra'
                         }, titleSuffixSlot({}))
                         : renderEmptyElement($xeFormDesign),
-                    h('div', {
-                        class: 'vxe-form-design--header-setting'
-                    }, [
-                        h(VxeUIButtonComponent, {
-                            mode: 'text',
-                            status: 'primary',
-                            icon: getIcon().FORM_DESIGN_STYLE_SETTING,
-                            content: getI18n('vxe.formDesign.styleSetting.btn'),
-                            onClick: openStylePreviewEvent
-                        })
-                    ])
+                    showStyleSetting
+                        ? h('div', {
+                            class: 'vxe-form-design--header-setting'
+                        }, [
+                            h(VxeUIButtonComponent, {
+                                mode: 'text',
+                                status: 'primary',
+                                icon: getIcon().FORM_DESIGN_STYLE_SETTING,
+                                content: getI18n('vxe.formDesign.styleSetting.btn'),
+                                onClick: openStylePreviewEvent
+                            })
+                        ])
+                        : renderEmptyElement($xeFormDesign)
                 ])
             ]);
         };

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

@@ -39,7 +39,7 @@ export default defineVxeComponent({
                 if (renderSettingView) {
                     return h('div', {
                         class: 'vxe-form-design--custom-setting-form-view'
-                    }, getSlotVNs(renderSettingView({}, { $formDesign: $xeFormDesign })));
+                    }, getSlotVNs(renderSettingView(formRender, { formConfig: formData, $formDesign: $xeFormDesign })));
                 }
             }
             return h(DefaultSettingFormComponent, {

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

@@ -0,0 +1,3 @@
+export function useFormView(props) {
+    return props.renderParams;
+}

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

@@ -1,3 +1,4 @@
+export * from './form-view';
 export * from './widget-name';
 export * from './widget-view';
 export * from './widget-subtable-view';

package/es/ui/index.js

@@ -1,11 +1,12 @@
 import { VxeUI } from '@vxe-ui/core';
 const { setConfig, setIcon } = VxeUI;
-VxeUI.designVersion = "4.0.8";
+VxeUI.designVersion = "4.1.0";
 setConfig({
     formDesign: {
         height: 400,
         showHeader: true,
-        showPc: true
+        showPc: true,
+        showStyleSetting: false
     },
     formView: {},
     listDesign: {

package/es/ui/src/log.js

@@ -1,5 +1,5 @@
 import { VxeUI } from '@vxe-ui/core';
 const { log } = VxeUI;
-const version = `design v${"4.0.8"}`;
+const version = `design v${"4.1.0"}`;
 export const warnLog = log.create('warn', version);
 export const errLog = log.create('error', version);

package/lib/form-design/index.js

@@ -17,6 +17,7 @@ const VxeFormDesign = exports.VxeFormDesign = Object.assign({}, _formDesign.defa
   }
 });
 const formDesignHandle = {
+  useFormView: _use.useFormView,
   useWidgetName: _use.useWidgetName,
   useWidgetView: _use.useWidgetView,
   useSubtableView: _use.useSubtableView,

package/lib/form-design/index.min.js

@@ -1 +1 @@
-Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.VxeFormDesign=exports.FormDesign=void 0;var _core=require("@vxe-ui/core"),_depend=require("../ui/src/depend"),_formDesign=_interopRequireDefault(require("./src/form-design")),_use=require("./src/use");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}require("./render");let VxeFormDesign=exports.VxeFormDesign=Object.assign({},_formDesign.default,{install(e){(0,_depend.checkDependVersion)(),e.component(_formDesign.default.name,_formDesign.default)}}),formDesignHandle={useWidgetName:_use.useWidgetName,useWidgetView:_use.useWidgetView,useSubtableView:_use.useSubtableView,useWidgetPropDataSource:_use.useWidgetPropDataSource},FormDesign=(_core.VxeUI.dynamicApp&&_core.VxeUI.dynamicApp.use(VxeFormDesign),_core.VxeUI.component(_formDesign.default),_core.VxeUI.formDesignHandle=formDesignHandle,_core.VxeUI.formDesign=formDesignHandle,exports.FormDesign=VxeFormDesign);var _default=exports.default=VxeFormDesign;
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.VxeFormDesign=exports.FormDesign=void 0;var _core=require("@vxe-ui/core"),_depend=require("../ui/src/depend"),_formDesign=_interopRequireDefault(require("./src/form-design")),_use=require("./src/use");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}require("./render");let VxeFormDesign=exports.VxeFormDesign=Object.assign({},_formDesign.default,{install(e){(0,_depend.checkDependVersion)(),e.component(_formDesign.default.name,_formDesign.default)}}),formDesignHandle={useFormView:_use.useFormView,useWidgetName:_use.useWidgetName,useWidgetView:_use.useWidgetView,useSubtableView:_use.useSubtableView,useWidgetPropDataSource:_use.useWidgetPropDataSource},FormDesign=(_core.VxeUI.dynamicApp&&_core.VxeUI.dynamicApp.use(VxeFormDesign),_core.VxeUI.component(_formDesign.default),_core.VxeUI.formDesignHandle=formDesignHandle,_core.VxeUI.formDesign=formDesignHandle,exports.FormDesign=VxeFormDesign);var _default=exports.default=VxeFormDesign;

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

@@ -58,6 +58,10 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       type: Boolean,
       default: () => getConfig().formDesign.showMobile
     },
+    showStyleSetting: {
+      type: Boolean,
+      default: () => getConfig().formDesign.showStyleSetting
+    },
     formRender: Object,
     menuConfig: Object
   },
@@ -484,17 +488,18 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         showPc,
         showMobile
       } = props;
-      let conf = (0, _defaultSettingData.getDefaultSettingFormData)({
+      const defConf = (0, _defaultSettingData.getDefaultSettingFormData)({
         pcVisible: showPc,
         mobileVisible: showMobile
       });
+      let customConf = {};
       // 如果为自定义渲染
       if (formRender) {
         const compConf = renderer.get(formRender.name);
         const createFormConfig = compConf ? compConf.createFormDesignSettingFormConfig : null;
-        conf = (createFormConfig ? createFormConfig({}) : {}) || {};
+        customConf = (createFormConfig ? createFormConfig({}) : {}) || {};
       }
-      return conf;
+      return Object.assign({}, defConf, customConf);
     };
     const initSettingForm = () => {
       reactData.formData = createSettingForm();
@@ -504,6 +509,9 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     };
     Object.assign($xeFormDesign, formDesignMethods, formDesignPrivateMethods);
     const renderLayoutHeader = () => {
+      const {
+        showStyleSetting
+      } = props;
       const titleSlot = slots.title;
       const titlePrefixSlot = slots.titlePrefix || slots['title-prefix'];
       const titleSuffixSlot = slots.titleSuffix || slots['title-suffix'] || slots.extra;
@@ -517,7 +525,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         class: 'vxe-form-design--header-right'
       }, [titleSuffixSlot ? (0, _vue.h)('div', {
         class: 'vxe-form-design--header-extra'
-      }, titleSuffixSlot({})) : renderEmptyElement($xeFormDesign), (0, _vue.h)('div', {
+      }, titleSuffixSlot({})) : renderEmptyElement($xeFormDesign), showStyleSetting ? (0, _vue.h)('div', {
         class: 'vxe-form-design--header-setting'
       }, [(0, _vue.h)(VxeUIButtonComponent, {
         mode: 'text',
@@ -525,7 +533,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         icon: getIcon().FORM_DESIGN_STYLE_SETTING,
         content: getI18n('vxe.formDesign.styleSetting.btn'),
         onClick: openStylePreviewEvent
-      })])])]);
+      })]) : renderEmptyElement($xeFormDesign)])]);
     };
     const renderVN = () => {
       const {

package/lib/form-design/src/form-design.min.js

@@ -1 +1 @@
-Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_core=require("@vxe-ui/core"),_dom=require("../../ui/src/dom"),_utils=require("../../ui/src/utils"),_widgetInfo=require("./widget-info"),_xeUtils=_interopRequireDefault(require("xe-utils")),_layoutWidget=_interopRequireDefault(require("./layout-widget")),_layoutPreview=_interopRequireDefault(require("./layout-preview")),_layoutSetting=_interopRequireDefault(require("./layout-setting")),_layoutStyle=_interopRequireDefault(require("./layout-style")),_defaultSettingData=require("./default-setting-data");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}let{menus,getConfig,getIcon,getI18n,renderer,createEvent,renderEmptyElement,useFns}=_core.VxeUI,useSize=useFns.useSize;var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeFormDesign",props:{size:{type:String,default:()=>getConfig().formDesign.size||getConfig().size},config:Object,height:{type:[String,Number],default:()=>getConfig().formDesign.height},widgets:{type:Array,default:()=>_xeUtils.default.clone(getConfig().formDesign.widgets)||[]},showHeader:{type:Boolean,default:()=>getConfig().formDesign.showHeader},showPc:{type:Boolean,default:()=>getConfig().formDesign.showPc},showMobile:{type:Boolean,default:()=>getConfig().formDesign.showMobile},formRender:Object,menuConfig:Object},emits:["widget-click","widget-add","widget-copy","widget-remove","widget-drag","widget-menu","menu-click","click-widget","add-widget","copy-widget","remove-widget","drag-widget"],setup(l,e){let d=_core.VxeUI.getComponent("vxe-button"),{emit:r,slots:o}=e;var t=_xeUtils.default.uniqueId();let g=(0,_vue.ref)(),a=(0,_vue.ref)(),u=useSize(l).computeSize,s=(0,_vue.reactive)({formData:{},widgetConfigs:[],widgetObjList:[],dragWidget:null,sortWidget:null,activeWidget:null});var i=(0,_vue.reactive)({});let n={refElem:g},f=(0,_vue.computed)(()=>Object.assign({},getConfig().calendar.menuConfig,l.menuConfig)),c={computeSize:u},v={xID:t,props:l,context:e,reactData:s,internalData:i,getRefMaps:()=>n,getComputeMaps:()=>c},m=e=>new _widgetInfo.FormDesignWidgetInfo(v,e,s.widgetObjList),h=()=>new _widgetInfo.FormDesignWidgetInfo(v,"",s.widgetObjList),p=e=>{var t;e&&({formConfig:e,widgetData:t}=e,e&&_(e),t)&&y(t);let{activeWidget:i,widgetObjList:r}=s;return i?(e=_xeUtils.default.findTree(r,e=>e.id===i.id,{children:"children"}),s.activeWidget=e?e.item:r[0]||null):s.activeWidget=r[0]||null,(0,_vue.nextTick)()};let w=()=>_xeUtils.default.clone(s.formData,!0),_=e=>(s.formData=Object.assign({},S(),e),(0,_vue.nextTick)());let x=()=>{var e=_xeUtils.default.clone(s.widgetObjList,!0);return _xeUtils.default.eachTree(e,e=>{e.model.value=null},{children:"children"}),e},y=e=>(s.widgetObjList=(e||[]).map(e=>(0,_widgetInfo.configToWidget)(e)),(0,_vue.nextTick)()),D=()=>{var e=a.value;return e&&e.openStylePreview(),(0,_vue.nextTick)()},C=()=>(s.widgetObjList=[],U(),(0,_vue.nextTick)()),b=(e,t,i)=>{r(e,createEvent(i,{$formDesign:v},t))};t={dispatchEvent:b,createWidget:m,createEmptyWidget:h,getConfig(){return{formConfig:w(),widgetData:x()}},clearConfig:C,loadConfig:p,reloadConfig:e=>(C(),p(e)),getFormConfig:w,loadFormConfig:_,getWidgetById:e=>{var i=s.widgetObjList;if(e){let t=_xeUtils.default.toNumber(e);e=_xeUtils.default.findTree(i,e=>e&&e.id===t,{children:"children"});if(e)return e.item}return null},getFormData(){var e=s.widgetObjList;let t={};return _xeUtils.default.eachTree(e,e=>{t[e.field]=null},{children:"children"}),t},getWidgetData:x,loadWidgetData:y,refreshPreviewView(){var e=a.value;return e&&e.updatePreviewView(),(0,_vue.nextTick)()},openStyleSetting:D};let W=()=>{var e=l.widgets,t=[];let n=[],d=[],o=[],g=[];renderer.forEach((e,i)=>{e=e.createFormDesignWidgetConfig;if(e){var r=m(i),e=(0,_widgetInfo.getWidgetConfig)(i);let t=(0,_widgetInfo.getWidgetConfigCustomGroup)(i,v);if(t){i=g.find(e=>e.title===t);i?i.children.push(r):g.push({title:t,children:[r]})}else switch(e.group){case"layout":d.push(r);break;case"advanced":o.push(r);break;default:["title"].includes(r.name)||n.push(r)}}}),n.length&&t.push({group:"base",children:n}),d.length&&t.push({group:"layout",children:d}),o.length&&t.push({group:"advanced",children:o}),g.length&&t.push(...g),e&&e.length?s.widgetConfigs=l.widgets.map(e=>({title:e.customGroup,group:e.group,children:e.children?e.children.map(e=>m(e)):[]})):s.widgetConfigs=t},I=i=>{var e=s.widgetObjList;if((0,_widgetInfo.getWidgetConfig)(i).unique){let t=[];_xeUtils.default.eachTree(e,e=>{e.name===i&&t.push(e)},{children:"children"});e=t.length<1;return e||_core.VxeUI.modal&&_core.VxeUI.modal.message({content:getI18n("vxe.formDesign.error.wdFormUni"),status:"error",id:"wdFormUni"}),e}return!0};e={validWidgetUnique:I,handleContextmenuWidget(r,n){var e=l.menuConfig,t=f.value;(e?(0,_utils.isEnableConf)(t):t.enabled)&&({options:e,visibleMethod:t}=t,t&&!t({$formDesign:v,widget:n,options:e})||_core.VxeUI.contextMenu&&_core.VxeUI.contextMenu.openByEvent(r,{options:e,events:{optionClick(e){var t=e.option,i=menus.get(t.code),i=i?i.formDesignMenuMethod:null,t={menu:t,widget:n,$event:r,$formDesign:v};i&&i(t,r),b("menu-click",t,e.$event)}}})),b("widget-menu",{widget:n},r)},handleClickWidget(e,t){t&&t.name&&(e.stopPropagation(),s.activeWidget=t,b("widget-click",{widget:t},e),b("click-widget",{widget:t},e))},handleCopyWidget(e,t){var i,r=s.widgetObjList,n=_xeUtils.default.findTree(r,e=>e.id===t.id,{children:"children"});n&&(e.stopPropagation(),I(t.name))&&(n=n.path,n=Number(n[0]),(i=m(t.name)).title&&(i.title=getI18n("vxe.formDesign.widget.copyTitle",[(""+t.title).replace(getI18n("vxe.formDesign.widget.copyTitle",[""]),"")])),n>=r.length-1?r.push(i):r.splice(n+1,0,i),s.activeWidget=i,s.widgetObjList=[...r],b("widget-copy",{widget:t,newWidget:i},e),b("copy-widget",{widget:i},e))},handleRemoveWidget(e,t){var i,r,n=s.widgetObjList,d=_xeUtils.default.findTree(n,e=>e.id===t.id,{children:"children"});d&&({index:d,parent:i,items:r}=d,e.stopPropagation(),d>=r.length-1?s.activeWidget=r[d-1]:s.activeWidget=r[d+1]||null,i&&"row"===i.name?r[d]=h():r.splice(d,1),s.widgetObjList=[...n],b("widget-remove",{widget:t},e),b("remove-widget",{widget:t},e))}};let S=()=>{var{formRender:e,showPc:t,showMobile:i}=l;let r=(0,_defaultSettingData.getDefaultSettingFormData)({pcVisible:t,mobileVisible:i});return e&&(i=(t=renderer.get(e.name))?t.createFormDesignSettingFormConfig:null,r=(i?i({}):{})||{}),r},U=()=>{s.formData=S()},O=()=>{D()};Object.assign(v,t,e);return v.renderVN=()=>{var{height:e,showHeader:t}=l,i=u.value,r=o.header,n=o.footer;return(0,_vue.h)("div",{ref:g,class:["vxe-form-design",{["size--"+i]:i}],style:e?{height:(0,_dom.toCssUnit)(e)}:null},[t||r?(0,_vue.h)("div",{class:"vxe-form-design--header"},r?r({}):(i=o.title,e=o.titlePrefix||o["title-prefix"],t=o.titleSuffix||o["title-suffix"]||o.extra,(0,_vue.h)("div",{class:"vxe-form-design--header-wrapper"},[(0,_vue.h)("div",{class:"vxe-form-design--header-left"},e?e({}):[]),(0,_vue.h)("div",{class:"vxe-form-design--header-middle"},i?i({}):[]),(0,_vue.h)("div",{class:"vxe-form-design--header-right"},[t?(0,_vue.h)("div",{class:"vxe-form-design--header-extra"},t({})):renderEmptyElement(v),(0,_vue.h)("div",{class:"vxe-form-design--header-setting"},[(0,_vue.h)(d,{mode:"text",status:"primary",icon:getIcon().FORM_DESIGN_STYLE_SETTING,content:getI18n("vxe.formDesign.styleSetting.btn"),onClick:O})])])]))):(0,_vue.createCommentVNode)(),(0,_vue.h)("div",{class:"vxe-form-design--body"},[(0,_vue.h)(_layoutWidget.default),(0,_vue.h)(_layoutPreview.default),(0,_vue.h)(_layoutSetting.default),(0,_vue.h)(_layoutStyle.default,{ref:a})]),n?(0,_vue.h)("div",{class:"vxe-form-design--footer"},n?n({}):[]):(0,_vue.createCommentVNode)()])},(0,_vue.watch)(()=>l.widgets,()=>{W()}),(0,_vue.watch)(()=>l.widgets,()=>{W()}),(0,_vue.watch)(()=>l.config,e=>{p(e||{})}),U(),W(),l.config&&p(l.config),(0,_vue.provide)("$xeFormDesign",v),v},render(){return this.renderVN()}});
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_core=require("@vxe-ui/core"),_dom=require("../../ui/src/dom"),_utils=require("../../ui/src/utils"),_widgetInfo=require("./widget-info"),_xeUtils=_interopRequireDefault(require("xe-utils")),_layoutWidget=_interopRequireDefault(require("./layout-widget")),_layoutPreview=_interopRequireDefault(require("./layout-preview")),_layoutSetting=_interopRequireDefault(require("./layout-setting")),_layoutStyle=_interopRequireDefault(require("./layout-style")),_defaultSettingData=require("./default-setting-data");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}let{menus,getConfig,getIcon,getI18n,renderer,createEvent,renderEmptyElement,useFns}=_core.VxeUI,useSize=useFns.useSize;var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeFormDesign",props:{size:{type:String,default:()=>getConfig().formDesign.size||getConfig().size},config:Object,height:{type:[String,Number],default:()=>getConfig().formDesign.height},widgets:{type:Array,default:()=>_xeUtils.default.clone(getConfig().formDesign.widgets)||[]},showHeader:{type:Boolean,default:()=>getConfig().formDesign.showHeader},showPc:{type:Boolean,default:()=>getConfig().formDesign.showPc},showMobile:{type:Boolean,default:()=>getConfig().formDesign.showMobile},showStyleSetting:{type:Boolean,default:()=>getConfig().formDesign.showStyleSetting},formRender:Object,menuConfig:Object},emits:["widget-click","widget-add","widget-copy","widget-remove","widget-drag","widget-menu","menu-click","click-widget","add-widget","copy-widget","remove-widget","drag-widget"],setup(l,e){let o=_core.VxeUI.getComponent("vxe-button"),{emit:r,slots:d}=e;var t=_xeUtils.default.uniqueId();let g=(0,_vue.ref)(),a=(0,_vue.ref)(),u=useSize(l).computeSize,s=(0,_vue.reactive)({formData:{},widgetConfigs:[],widgetObjList:[],dragWidget:null,sortWidget:null,activeWidget:null});var i=(0,_vue.reactive)({});let n={refElem:g},f=(0,_vue.computed)(()=>Object.assign({},getConfig().calendar.menuConfig,l.menuConfig)),c={computeSize:u},v={xID:t,props:l,context:e,reactData:s,internalData:i,getRefMaps:()=>n,getComputeMaps:()=>c},m=e=>new _widgetInfo.FormDesignWidgetInfo(v,e,s.widgetObjList),h=()=>new _widgetInfo.FormDesignWidgetInfo(v,"",s.widgetObjList),p=e=>{var t;e&&({formConfig:e,widgetData:t}=e,e&&_(e),t)&&y(t);let{activeWidget:i,widgetObjList:r}=s;return i?(e=_xeUtils.default.findTree(r,e=>e.id===i.id,{children:"children"}),s.activeWidget=e?e.item:r[0]||null):s.activeWidget=r[0]||null,(0,_vue.nextTick)()};let w=()=>_xeUtils.default.clone(s.formData,!0),_=e=>(s.formData=Object.assign({},I(),e),(0,_vue.nextTick)());let x=()=>{var e=_xeUtils.default.clone(s.widgetObjList,!0);return _xeUtils.default.eachTree(e,e=>{e.model.value=null},{children:"children"}),e},y=e=>(s.widgetObjList=(e||[]).map(e=>(0,_widgetInfo.configToWidget)(e)),(0,_vue.nextTick)()),D=()=>{var e=a.value;return e&&e.openStylePreview(),(0,_vue.nextTick)()},C=()=>(s.widgetObjList=[],O(),(0,_vue.nextTick)()),b=(e,t,i)=>{r(e,createEvent(i,{$formDesign:v},t))};t={dispatchEvent:b,createWidget:m,createEmptyWidget:h,getConfig(){return{formConfig:w(),widgetData:x()}},clearConfig:C,loadConfig:p,reloadConfig:e=>(C(),p(e)),getFormConfig:w,loadFormConfig:_,getWidgetById:e=>{var i=s.widgetObjList;if(e){let t=_xeUtils.default.toNumber(e);e=_xeUtils.default.findTree(i,e=>e&&e.id===t,{children:"children"});if(e)return e.item}return null},getFormData(){var e=s.widgetObjList;let t={};return _xeUtils.default.eachTree(e,e=>{t[e.field]=null},{children:"children"}),t},getWidgetData:x,loadWidgetData:y,refreshPreviewView(){var e=a.value;return e&&e.updatePreviewView(),(0,_vue.nextTick)()},openStyleSetting:D};let W=()=>{var e=l.widgets,t=[];let n=[],o=[],d=[],g=[];renderer.forEach((e,i)=>{e=e.createFormDesignWidgetConfig;if(e){var r=m(i),e=(0,_widgetInfo.getWidgetConfig)(i);let t=(0,_widgetInfo.getWidgetConfigCustomGroup)(i,v);if(t){i=g.find(e=>e.title===t);i?i.children.push(r):g.push({title:t,children:[r]})}else switch(e.group){case"layout":o.push(r);break;case"advanced":d.push(r);break;default:["title"].includes(r.name)||n.push(r)}}}),n.length&&t.push({group:"base",children:n}),o.length&&t.push({group:"layout",children:o}),d.length&&t.push({group:"advanced",children:d}),g.length&&t.push(...g),e&&e.length?s.widgetConfigs=l.widgets.map(e=>({title:e.customGroup,group:e.group,children:e.children?e.children.map(e=>m(e)):[]})):s.widgetConfigs=t},S=i=>{var e=s.widgetObjList;if((0,_widgetInfo.getWidgetConfig)(i).unique){let t=[];_xeUtils.default.eachTree(e,e=>{e.name===i&&t.push(e)},{children:"children"});e=t.length<1;return e||_core.VxeUI.modal&&_core.VxeUI.modal.message({content:getI18n("vxe.formDesign.error.wdFormUni"),status:"error",id:"wdFormUni"}),e}return!0};e={validWidgetUnique:S,handleContextmenuWidget(r,n){var e=l.menuConfig,t=f.value;(e?(0,_utils.isEnableConf)(t):t.enabled)&&({options:e,visibleMethod:t}=t,t&&!t({$formDesign:v,widget:n,options:e})||_core.VxeUI.contextMenu&&_core.VxeUI.contextMenu.openByEvent(r,{options:e,events:{optionClick(e){var t=e.option,i=menus.get(t.code),i=i?i.formDesignMenuMethod:null,t={menu:t,widget:n,$event:r,$formDesign:v};i&&i(t,r),b("menu-click",t,e.$event)}}})),b("widget-menu",{widget:n},r)},handleClickWidget(e,t){t&&t.name&&(e.stopPropagation(),s.activeWidget=t,b("widget-click",{widget:t},e),b("click-widget",{widget:t},e))},handleCopyWidget(e,t){var i,r=s.widgetObjList,n=_xeUtils.default.findTree(r,e=>e.id===t.id,{children:"children"});n&&(e.stopPropagation(),S(t.name))&&(n=n.path,n=Number(n[0]),(i=m(t.name)).title&&(i.title=getI18n("vxe.formDesign.widget.copyTitle",[(""+t.title).replace(getI18n("vxe.formDesign.widget.copyTitle",[""]),"")])),n>=r.length-1?r.push(i):r.splice(n+1,0,i),s.activeWidget=i,s.widgetObjList=[...r],b("widget-copy",{widget:t,newWidget:i},e),b("copy-widget",{widget:i},e))},handleRemoveWidget(e,t){var i,r,n=s.widgetObjList,o=_xeUtils.default.findTree(n,e=>e.id===t.id,{children:"children"});o&&({index:o,parent:i,items:r}=o,e.stopPropagation(),o>=r.length-1?s.activeWidget=r[o-1]:s.activeWidget=r[o+1]||null,i&&"row"===i.name?r[o]=h():r.splice(o,1),s.widgetObjList=[...n],b("widget-remove",{widget:t},e),b("remove-widget",{widget:t},e))}};let I=()=>{var{formRender:e,showPc:t,showMobile:i}=l,t=(0,_defaultSettingData.getDefaultSettingFormData)({pcVisible:t,mobileVisible:i});let r={};return e&&(e=(i=renderer.get(e.name))?i.createFormDesignSettingFormConfig:null,r=(e?e({}):{})||{}),Object.assign({},t,r)},O=()=>{s.formData=I()},U=()=>{D()};Object.assign(v,t,e);return v.renderVN=()=>{var{height:e,showHeader:t}=l,i=u.value,r=d.header,n=d.footer;return(0,_vue.h)("div",{ref:g,class:["vxe-form-design",{["size--"+i]:i}],style:e?{height:(0,_dom.toCssUnit)(e)}:null},[t||r?(0,_vue.h)("div",{class:"vxe-form-design--header"},r?r({}):(i=l.showStyleSetting,e=d.title,t=d.titlePrefix||d["title-prefix"],r=d.titleSuffix||d["title-suffix"]||d.extra,(0,_vue.h)("div",{class:"vxe-form-design--header-wrapper"},[(0,_vue.h)("div",{class:"vxe-form-design--header-left"},t?t({}):[]),(0,_vue.h)("div",{class:"vxe-form-design--header-middle"},e?e({}):[]),(0,_vue.h)("div",{class:"vxe-form-design--header-right"},[r?(0,_vue.h)("div",{class:"vxe-form-design--header-extra"},r({})):renderEmptyElement(v),i?(0,_vue.h)("div",{class:"vxe-form-design--header-setting"},[(0,_vue.h)(o,{mode:"text",status:"primary",icon:getIcon().FORM_DESIGN_STYLE_SETTING,content:getI18n("vxe.formDesign.styleSetting.btn"),onClick:U})]):renderEmptyElement(v)])]))):(0,_vue.createCommentVNode)(),(0,_vue.h)("div",{class:"vxe-form-design--body"},[(0,_vue.h)(_layoutWidget.default),(0,_vue.h)(_layoutPreview.default),(0,_vue.h)(_layoutSetting.default),(0,_vue.h)(_layoutStyle.default,{ref:a})]),n?(0,_vue.h)("div",{class:"vxe-form-design--footer"},n?n({}):[]):(0,_vue.createCommentVNode)()])},(0,_vue.watch)(()=>l.widgets,()=>{W()}),(0,_vue.watch)(()=>l.widgets,()=>{W()}),(0,_vue.watch)(()=>l.config,e=>{p(e||{})}),O(),W(),l.config&&p(l.config),(0,_vue.provide)("$xeFormDesign",v),v},render(){return this.renderVN()}});

package/lib/form-design/src/layout-setting.js

@@ -60,7 +60,8 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         if (renderSettingView) {
           return (0, _vue.h)('div', {
             class: 'vxe-form-design--custom-setting-form-view'
-          }, (0, _vn.getSlotVNs)(renderSettingView({}, {
+          }, (0, _vn.getSlotVNs)(renderSettingView(formRender, {
+            formConfig: formData,
             $formDesign: $xeFormDesign
           })));
         }

package/lib/form-design/src/layout-setting.min.js

@@ -1 +1 @@
-Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_core=require("@vxe-ui/core"),_vn=require("../../ui/src/vn"),_defaultSettingForm=require("./default-setting-form"),_default=exports.default=(0,_comp.defineVxeComponent)({name:"FormDesignLayoutSetting",props:{},emits:[],setup(){let e=_core.VxeUI.getComponent("vxe-tabs"),t=_core.VxeUI.getComponent("vxe-tab-pane"),r=(0,_vue.inject)("$xeFormDesign",null);if(!r)return()=>[];let{props:i,reactData:n}=r,o=(0,_vue.ref)(1);return(0,_vue.watch)(()=>n.activeWidget,()=>{o.value=1}),()=>(0,_vue.h)("div",{class:"vxe-form-design--setting"},[(0,_vue.h)("div",{class:"vxe-form-design--setting-form"},[(0,_vue.h)(e,{modelValue:o.value,titleWidth:"50%",titleAlign:"center",padding:!0,class:"vxe-form-design--setting-form-tabs","onUpdate:modelValue"(e){o.value=e}},{default(){return[(0,_vue.h)(t,{title:(0,_core.getI18n)("vxe.formDesign.widgetPropTab"),name:1},{default(){return(()=>{var e=n.activeWidget;if(e){var t=_core.renderer.get(e.name),t=t?t.renderFormDesignWidgetFormView:null;if(t)return(0,_vue.h)("div",{class:"vxe-form-design--custom-widget-form-view"},(0,_vn.getSlotVNs)(t(e,{isEditMode:!0,isViewMode:!1,widget:e,$formDesign:r,$formView:null})))}return(0,_vue.createCommentVNode)()})()}}),(0,_vue.h)(t,{title:(0,_core.getI18n)("vxe.formDesign.widgetFormTab"),name:2},{default(){return(()=>{var e=i.formRender,t=n.formData;if(e){e=_core.renderer.get(e.name),e=e?e.renderFormDesignSettingFormView:null;if(e)return(0,_vue.h)("div",{class:"vxe-form-design--custom-setting-form-view"},(0,_vn.getSlotVNs)(e({},{$formDesign:r})))}return(0,_vue.h)(_defaultSettingForm.DefaultSettingFormComponent,{formData:t})})()}})]}})])])}});
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_core=require("@vxe-ui/core"),_vn=require("../../ui/src/vn"),_defaultSettingForm=require("./default-setting-form"),_default=exports.default=(0,_comp.defineVxeComponent)({name:"FormDesignLayoutSetting",props:{},emits:[],setup(){let e=_core.VxeUI.getComponent("vxe-tabs"),t=_core.VxeUI.getComponent("vxe-tab-pane"),i=(0,_vue.inject)("$xeFormDesign",null);if(!i)return()=>[];let{props:n,reactData:o}=i,r=(0,_vue.ref)(1);return(0,_vue.watch)(()=>o.activeWidget,()=>{r.value=1}),()=>(0,_vue.h)("div",{class:"vxe-form-design--setting"},[(0,_vue.h)("div",{class:"vxe-form-design--setting-form"},[(0,_vue.h)(e,{modelValue:r.value,titleWidth:"50%",titleAlign:"center",padding:!0,class:"vxe-form-design--setting-form-tabs","onUpdate:modelValue"(e){r.value=e}},{default(){return[(0,_vue.h)(t,{title:(0,_core.getI18n)("vxe.formDesign.widgetPropTab"),name:1},{default(){return(()=>{var e=o.activeWidget;if(e){var t=_core.renderer.get(e.name),t=t?t.renderFormDesignWidgetFormView:null;if(t)return(0,_vue.h)("div",{class:"vxe-form-design--custom-widget-form-view"},(0,_vn.getSlotVNs)(t(e,{isEditMode:!0,isViewMode:!1,widget:e,$formDesign:i,$formView:null})))}return(0,_vue.createCommentVNode)()})()}}),(0,_vue.h)(t,{title:(0,_core.getI18n)("vxe.formDesign.widgetFormTab"),name:2},{default(){return(()=>{var e=n.formRender,t=o.formData;if(e){var r=_core.renderer.get(e.name),r=r?r.renderFormDesignSettingFormView:null;if(r)return(0,_vue.h)("div",{class:"vxe-form-design--custom-setting-form-view"},(0,_vn.getSlotVNs)(r(e,{formConfig:t,$formDesign:i})))}return(0,_vue.h)(_defaultSettingForm.DefaultSettingFormComponent,{formData:t})})()}})]}})])])}});

package/lib/form-design/src/use/form-view.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFormView = useFormView;
+function useFormView(props) {
+  return props.renderParams;
+}

package/lib/form-design/src/use/form-view.min.js

@@ -0,0 +1 @@
+function useFormView(e){return e.renderParams}Object.defineProperty(exports,"__esModule",{value:!0}),exports.useFormView=useFormView;

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

@@ -3,6 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _formView = require("./form-view");
+Object.keys(_formView).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _formView[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _formView[key];
+    }
+  });
+});
 var _widgetName = require("./widget-name");
 Object.keys(_widgetName).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/lib/form-design/src/use/index.min.js

@@ -1 +1 @@
-Object.defineProperty(exports,"__esModule",{value:!0});var _widgetName=require("./widget-name"),_widgetView=(Object.keys(_widgetName).forEach(function(e){"default"===e||"__esModule"===e||e in exports&&exports[e]===_widgetName[e]||Object.defineProperty(exports,e,{enumerable:!0,get:function(){return _widgetName[e]}})}),require("./widget-view")),_widgetSubtableView=(Object.keys(_widgetView).forEach(function(e){"default"===e||"__esModule"===e||e in exports&&exports[e]===_widgetView[e]||Object.defineProperty(exports,e,{enumerable:!0,get:function(){return _widgetView[e]}})}),require("./widget-subtable-view")),_widgetPropDataSource=(Object.keys(_widgetSubtableView).forEach(function(e){"default"===e||"__esModule"===e||e in exports&&exports[e]===_widgetSubtableView[e]||Object.defineProperty(exports,e,{enumerable:!0,get:function(){return _widgetSubtableView[e]}})}),require("./widget-prop-data-source")),_widgetPropDefaultValue=(Object.keys(_widgetPropDataSource).forEach(function(e){"default"===e||"__esModule"===e||e in exports&&exports[e]===_widgetPropDataSource[e]||Object.defineProperty(exports,e,{enumerable:!0,get:function(){return _widgetPropDataSource[e]}})}),require("./widget-prop-default-value"));Object.keys(_widgetPropDefaultValue).forEach(function(e){"default"===e||"__esModule"===e||e in exports&&exports[e]===_widgetPropDefaultValue[e]||Object.defineProperty(exports,e,{enumerable:!0,get:function(){return _widgetPropDefaultValue[e]}})});
+Object.defineProperty(exports,"__esModule",{value:!0});var _formView=require("./form-view"),_widgetName=(Object.keys(_formView).forEach(function(e){"default"===e||"__esModule"===e||e in exports&&exports[e]===_formView[e]||Object.defineProperty(exports,e,{enumerable:!0,get:function(){return _formView[e]}})}),require("./widget-name")),_widgetView=(Object.keys(_widgetName).forEach(function(e){"default"===e||"__esModule"===e||e in exports&&exports[e]===_widgetName[e]||Object.defineProperty(exports,e,{enumerable:!0,get:function(){return _widgetName[e]}})}),require("./widget-view")),_widgetSubtableView=(Object.keys(_widgetView).forEach(function(e){"default"===e||"__esModule"===e||e in exports&&exports[e]===_widgetView[e]||Object.defineProperty(exports,e,{enumerable:!0,get:function(){return _widgetView[e]}})}),require("./widget-subtable-view")),_widgetPropDataSource=(Object.keys(_widgetSubtableView).forEach(function(e){"default"===e||"__esModule"===e||e in exports&&exports[e]===_widgetSubtableView[e]||Object.defineProperty(exports,e,{enumerable:!0,get:function(){return _widgetSubtableView[e]}})}),require("./widget-prop-data-source")),_widgetPropDefaultValue=(Object.keys(_widgetPropDataSource).forEach(function(e){"default"===e||"__esModule"===e||e in exports&&exports[e]===_widgetPropDataSource[e]||Object.defineProperty(exports,e,{enumerable:!0,get:function(){return _widgetPropDataSource[e]}})}),require("./widget-prop-default-value"));Object.keys(_widgetPropDefaultValue).forEach(function(e){"default"===e||"__esModule"===e||e in exports&&exports[e]===_widgetPropDefaultValue[e]||Object.defineProperty(exports,e,{enumerable:!0,get:function(){return _widgetPropDefaultValue[e]}})});

package/lib/index.umd.js

@@ -2872,12 +2872,13 @@ const {
   setConfig,
   setIcon
 } = core_.VxeUI;
-core_.VxeUI.designVersion = "4.0.8";
+core_.VxeUI.designVersion = "4.1.0";
 setConfig({
   formDesign: {
     height: 400,
     showHeader: true,
-    showPc: true
+    showPc: true,
+    showStyleSetting: false
   },
   formView: {},
   listDesign: {
@@ -2914,7 +2915,7 @@ setIcon({
 const {
   log
 } = core_.VxeUI;
-const version = `design v${"4.0.8"}`;
+const version = `design v${"4.1.0"}`;
 const warnLog = log.create('warn', version);
 const errLog = log.create('error', version);
 ;// ./packages/ui/src/depend.ts
@@ -4393,7 +4394,8 @@ const DefaultSettingFormComponent = defineVxeComponent({
         if (renderSettingView) {
           return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
             class: 'vxe-form-design--custom-setting-form-view'
-          }, getSlotVNs(renderSettingView({}, {
+          }, getSlotVNs(renderSettingView(formRender, {
+            formConfig: formData,
             $formDesign: $xeFormDesign
           })));
         }
@@ -5512,6 +5514,10 @@ const {
       type: Boolean,
       default: () => form_design_getConfig().formDesign.showMobile
     },
+    showStyleSetting: {
+      type: Boolean,
+      default: () => form_design_getConfig().formDesign.showStyleSetting
+    },
     formRender: Object,
     menuConfig: Object
   },
@@ -5938,17 +5944,18 @@ const {
         showPc,
         showMobile
       } = props;
-      let conf = getDefaultSettingFormData({
+      const defConf = getDefaultSettingFormData({
         pcVisible: showPc,
         mobileVisible: showMobile
       });
+      let customConf = {};
       // 如果为自定义渲染
       if (formRender) {
         const compConf = renderer.get(formRender.name);
         const createFormConfig = compConf ? compConf.createFormDesignSettingFormConfig : null;
-        conf = (createFormConfig ? createFormConfig({}) : {}) || {};
+        customConf = (createFormConfig ? createFormConfig({}) : {}) || {};
       }
-      return conf;
+      return Object.assign({}, defConf, customConf);
     };
     const initSettingForm = () => {
       reactData.formData = createSettingForm();
@@ -5958,6 +5965,9 @@ const {
     };
     Object.assign($xeFormDesign, formDesignMethods, formDesignPrivateMethods);
     const renderLayoutHeader = () => {
+      const {
+        showStyleSetting
+      } = props;
       const titleSlot = slots.title;
       const titlePrefixSlot = slots.titlePrefix || slots['title-prefix'];
       const titleSuffixSlot = slots.titleSuffix || slots['title-suffix'] || slots.extra;
@@ -5971,7 +5981,7 @@ const {
         class: 'vxe-form-design--header-right'
       }, [titleSuffixSlot ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         class: 'vxe-form-design--header-extra'
-      }, titleSuffixSlot({})) : renderEmptyElement($xeFormDesign), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+      }, titleSuffixSlot({})) : renderEmptyElement($xeFormDesign), showStyleSetting ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         class: 'vxe-form-design--header-setting'
       }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(VxeUIButtonComponent, {
         mode: 'text',
@@ -5979,7 +5989,7 @@ const {
         icon: form_design_getIcon().FORM_DESIGN_STYLE_SETTING,
         content: form_design_getI18n('vxe.formDesign.styleSetting.btn'),
         onClick: openStylePreviewEvent
-      })])])]);
+      })]) : renderEmptyElement($xeFormDesign)])]);
     };
     const renderVN = () => {
       const {
@@ -6029,6 +6039,10 @@ const {
     return this.renderVN();
   }
 }));
+;// ./packages/form-design/src/use/form-view.ts
+function useFormView(props) {
+  return props.renderParams;
+}
 ;// ./packages/form-design/src/use/widget-name.ts
 
 
@@ -6485,6 +6499,7 @@ function useWidgetPropDefaultValue(props) {
 
 
 
+
 ;// ./packages/form-design/render/util.ts
 
 const {
@@ -11028,6 +11043,7 @@ const VxeFormDesign = Object.assign({}, form_design, {
   }
 });
 const formDesignHandle = {
+  useFormView: useFormView,
   useWidgetName: useWidgetName,
   useWidgetView: useWidgetView,
   useSubtableView: useSubtableView,