@farris/ui-vue/components/list-nav/index.umd.cjs

Farris Vue, a Farris Design based Vue3 component library.

(function(f,a){typeof exports=="object"&&typeof module<"u"?a(exports,require("vue"),require("../common/index.umd.js"),require("../dynamic-resolver/index.umd.js"),require("../designer-canvas/index.umd.js"),require("lodash-es")):typeof define=="function"&&define.amd?define(["exports","vue","../common/index.umd.js","../dynamic-resolver/index.umd.js","../designer-canvas/index.umd.js","lodash-es"],a):(f=typeof globalThis<"u"?globalThis:f||self,a(f["list-nav"]={},f.Vue,f.common,f.dynamicResolver,f.designerCanvas,f.LodashES))})(this,function(f,a,y,I,b,M){"use strict";var z=Object.defineProperty;var j=(f,a,y)=>a in f?z(f,a,{enumerable:!0,configurable:!0,writable:!0,value:y}):f[a]=y;var g=(f,a,y)=>j(f,typeof a!="symbol"?a+"":a,y);function S(u,e){return{size:e.width||e.height||""}}const N=new Map([["appearance",I.resolveAppearance],["size",S]]);function P(u,e,t){return e}const T={$schema:"https://json-schema.org/draft/2020-12/schema",$id:"https://farris-design.gitee.io/list-nav.schema.json",title:"list-nav",description:"A Farris Container Component",type:"object",properties:{id:{description:"The unique identifier for a list-nav",type:"string"},type:{description:"The type string of list-nav component",type:"string",default:"list-nav"},appearance:{description:"",type:"object",properties:{class:{type:"string"},style:{type:"string"}},default:{}},contents:{description:"",type:"array",default:[]},size:{description:"",type:"object",properties:{width:{type:"number"},height:{type:"number"}},default:null},visible:{description:"",type:"boolean",default:!0},position:{description:"",type:"string",default:"left"}},required:["id","type","contents"]},C={customClass:{type:String,default:""},customStyle:{type:String,default:""},position:{Type:String,default:"left"},title:{Type:String,default:""},size:{Type:Number||String,default:218},collapsible:{Type:Boolean,default:!0},folded:{Type:Boolean,default:!1},disabled:{Type:Boolean,default:!1},draggable:{Type:Boolean,default:!1}},w=I.createPropsResolver(C,T,N,P),E=a.defineComponent({name:"FListNav",props:C,emits:["collapse"],setup(u,e){const t=a.ref(u.position),s=a.ref(u.title),i=a.ref(u.folded),r=a.ref(!1);function n(l){l&&l.stopPropagation(),!u.disabled&&(r.value=!0,i.value=!i.value,e.emit("collapse",i.value))}const d=a.computed(()=>{const l={},c=["top","bottom"].indexOf(t.value)>-1?"height":"width";return l[c]=i.value?"0px":u.size+"px",l}),o=a.computed(()=>{const l={"f-list-nav":!0,"f-list-nav-top":t.value==="top","f-list-nav-left":t.value==="left","f-list-nav-right":t.value==="right","f-list-nav-bottom":t.value==="bottom"};return y.getCustomClass(l,u.customClass)});return()=>a.createVNode("div",{class:o.value,style:u.customStyle},[a.createVNode("div",{class:"f-list-nav-in",style:d.value},[a.createVNode("div",{class:"f-list-nav-main"},[e.slots.navHeader&&a.createVNode("div",{class:"f-list-nav-header"},[e.slots.navHeader()]),!e.slots.navHeader&&s.value&&a.createVNode("div",{class:"f-list-nav-header"},[a.createVNode("div",{class:"f-list-nav-title"},[s.value])]),e.slots.default&&a.createVNode("div",{class:"f-list-nav-content"},[e.slots.default()]),e.slots.navContent&&a.createVNode("div",{class:"f-list-nav-content"},[e.slots.navContent()]),e.slots.navFooter&&a.createVNode("div",{class:"f-list-nav-footer"},[e.slots.navFooter()])]),u.collapsible&&a.createVNode("div",{class:["f-list-nav-toggle-sidebar",{disabled:u.disabled,active:i.value,"splitter-pane-collapse-animate":r.value}],onClick:l=>n(l)},[a.createVNode("span",{class:"triangle"},null)])])])}}),R=a.ref(0);function F(u){const{formSchemaUtils:e,formStateMachineUtils:t}=u;function s(o,l=""){return{path:l+o.code,field:o.id,fullPath:o.code}}function i(o,l=""){const c=e.getViewModelById(o);return c?c.states.map(p=>s(p,l)):[]}function r(o){const l=e.getRootViewModelId(),c=i(o);if(o===l)return c;const p=i(l,"root-component.");return[...c,...p]}function n(o){return o.binding&&o.binding.path||o.id||""}function d(){return t&&t.getRenderStates()||[]}return{getVariables:r,getControlName:n,getStateMachines:d}}class k{constructor(e){g(this,"sessionVariables",[{key:"CurrentSysOrgName",name:"当前组织Name",description:"当前组织Name"},{key:"CurrentSysOrgId",name:"当前组织Id",description:"当前组织Id"},{key:"CurrentUserName",name:"当前用户Name",description:"当前用户Name"},{key:"CurrentUserCode",name:"当前用户Code",description:"当前用户Code"},{key:"CurrentUserId",name:"当前用户Id",description:"当前用户Id"},{key:"CurrentLanguage",name:"当前语言编号",description:"当前登录的语言编号，例如简体中文返回'zh-CHS'，英文返回'en'，繁体中文'zh-CHT'"}]);g(this,"expressionNames",{compute:"计算表达式",dependency:"依赖表达式",validate:"验证表达式",dataPicking:"帮助前表达式",visible:"可见表达式",readonly:"只读表达式",required:"必填表达式"});g(this,"getExpressionConverter",(e,t)=>({convertFrom:(s,i,r,n)=>{const d=r.getExpressionRuleValue(e,t||i);return d&&d.value||""},convertTo:(s,i,r,n,d)=>{var o;if(i==="dataPicking"&&(r!=null&&r.target)){const l=`${r.target}_dataPicking`;((o=r.rules)==null?void 0:o.some(p=>p.id===l&&p.value))?s.dictPickingExpressionId=l:delete s.dictPickingExpressionId}n.updateExpression(r)}}));this.formSchemaService=e}getExpressionRule(e,t){const s=this.getExpressionData();if(!s)return"";const i=s.find(n=>n.target===e);if(!i)return"";const r=i.rules.find(n=>n.type===t);return r||""}getContextFormVariables(){const{module:e}=this.formSchemaService.getFormSchema();if(!e.viewmodels||e.viewmodels.length===0)return[];const t=this.formSchemaService.getRootViewModelId(),s=this.formSchemaService.getViewModelById(t);if(!s||!s.states||s.states.length===0)return[];const i=[];return s.states.filter(r=>r.category==="remote").forEach(r=>{i.push({key:r.code,name:r.name,description:r.name,category:r.category})}),i}createTreeNode(e,t,s="label"){return{id:e.id,name:e.name,bindingPath:e[s],parents:t,type:"field"}}buildEntityFieldsTreeData(e=null,t){const s=[];return e==null||e.forEach(i=>{var d;const r=this.createTreeNode(i,t);let n=[];(d=i.type)!=null&&d.fields&&(n=this.buildEntityFieldsTreeData(i.type.fields,[...t,i.label])),s.push({data:r,children:n,expanded:!0})}),s}buildChildEntityTreeData(e=null,t){const s=[];return e==null||e.forEach(i=>{var o,l;const r=this.createTreeNode(i,t);r.type="entity";const n=this.buildEntityFieldsTreeData((o=i.type)==null?void 0:o.fields,[...t,i.label]),d=this.buildChildEntityTreeData((l=i.type)==null?void 0:l.entities,[...t,i.label]);d!=null&&d.length&&(n==null||n.push(...d)),s.push({data:r,children:n||[],expanded:!0})}),s}getEntitiesTreeData(){const e=this.formSchemaService.getSchemaEntities();if(!(e!=null&&e.length))return[];const t=e[0];if(!(t!=null&&t.type))return[];const s=this.buildEntityFieldsTreeData(t.type.fields,[t.code]),i=this.buildChildEntityTreeData(t.type.entities,[t.code]);return i!=null&&i.length&&(s==null||s.push(...i)),{entityCode:t.code,fields:[{data:this.createTreeNode(t,[],"code"),children:s||[]}]}}getEntitiesAndVariables(){return{entities:this.getEntitiesTreeData(),variables:{session:{name:"系统变量",items:this.sessionVariables,visible:!1},forms:{name:"表单变量",items:this.getContextFormVariables(),visible:!0}}}}onBeforeOpenExpression(e,t,s){const i=s==="Field"?e.binding.field:e.id,r=this.getExpressionRule(i,t),n=this.getEntitiesAndVariables(),d={message:["validate","required","dataPicking"].includes(t)&&r?r.message:"",...n};return r.messageType!=null&&(d.messageType=r.messageType),d}buildRule(e,t,s,i){const{expression:r,message:n,messageType:d}=t,o={id:`${e}_${s}`,type:s,value:r};return(s==="validate"||s==="dataPicking"||s==="required")&&(o.message=n),s==="dataPicking"&&(o.messageType=d),s==="validate"&&i&&(o.elementId=i),o}getExpressionData(){const{expressions:e}=this.formSchemaService.getFormSchema().module;return e||[]}updateExpression(e,t,s,i){const r=t==="Field"?e.binding.field:e.id,n=this.buildRule(r,s,i,e.type==="form-group"?e.id:"");let o=this.getExpressionData().find(c=>c.targetType===t&&c.target===r);const l=c=>c.value.trim()==="";if(o){const c=o.rules.find(p=>p.id===n.id);if(c)l(n)?o.rules=o.rules.filter(p=>p.id!==n.id):(Object.assign(c,n),i==="validate"&&e.type==="form-group"&&(c.elementId=e.id));else{if(l(n))return null;o.rules=o.rules||[],o.rules.push(n)}}else{if(l(n))return null;o={target:`${r}`,rules:[n],targetType:t}}return o}getExpressionEditorOptions(e,t,s,i){return s.reduce((r,n)=>{var o,l;const d=t==="Field"?(o=e==null?void 0:e.binding)==null?void 0:o.field:e.id;return r[n]={hide:t==="Field"?!!((l=e==null?void 0:e.binding)!=null&&l.field):!1,description:"",title:this.expressionNames[n],type:"string",$converter:this.getExpressionConverter(d),refreshPanelAfterChanged:!0,editor:{type:"expression-editor",singleExpand:!1,dialogTitle:`${this.expressionNames[n]}编辑器`,showMessage:n==="validate"||n==="dataPicking"||n==="required",showMessageType:n==="dataPicking",beforeOpen:()=>this.onBeforeOpenExpression(e,n,t),onSubmitModal:c=>{const p=this.updateExpression(e,t,c,n);if(i){const m=this.buildRule(d,c,n);i(m)}return p}}},r},{})}getExpressionInfo(e,t,s){const i=t==="Field"?e.binding.field:e.id,r=this.getExpressionRule(i,s),n={value:r&&r.value,targetId:i,targetType:t,expressionType:s};return r&&r.message&&(n.message=r.message),n}getExpressionConfig(e,t,s=["compute","dependency","validate"],i){return{description:"表达式",title:"表达式",hide:!e.binding,properties:{...this.getExpressionEditorOptions(e,t,s,i)}}}getExpressionOptions(e,t,s){const i=this.getExpressionInfo(e,t,s);return{dialogTitle:`${this.expressionNames[s]||"表达式"}编辑器`,singleExpand:!1,showMessage:s==="required",beforeOpen:()=>this.onBeforeOpenExpression(e,s,t),expressionInfo:i}}}class U{constructor(e,t){g(this,"componentId");g(this,"viewModelId");g(this,"eventsEditorUtils");g(this,"formSchemaUtils");g(this,"formMetadataConverter");g(this,"designViewModelUtils");g(this,"designViewModelField");g(this,"controlCreatorUtils");g(this,"designerHostService");g(this,"designerContext");g(this,"modalService",null);g(this,"formRule",null);g(this,"schemaService",null);g(this,"metadataService",null);g(this,"propertyConfig",{type:"object",categories:{}});g(this,"expressionProperty");var s;this.componentId=e,this.designerHostService=t,this.eventsEditorUtils=t.eventsEditorUtils,this.formSchemaUtils=t.formSchemaUtils,this.formMetadataConverter=t.formMetadataConverter,this.viewModelId=((s=this.formSchemaUtils)==null?void 0:s.getViewModelIdByComponentId(e))||"",this.designViewModelUtils=t.designViewModelUtils,this.controlCreatorUtils=t.controlCreatorUtils,this.metadataService=t.metadataService,this.schemaService=t.schemaService,this.designerContext=t.designerContext,this.modalService=t.modalService,this.expressionProperty=new k(this.formSchemaUtils)}getFormDesignerInstance(){var e,t;return(t=(e=this.designerContext)==null?void 0:e.instances)==null?void 0:t.formDesigner.value}getTableInfo(){var e;return(e=this.schemaService)==null?void 0:e.getTableInfoByViewModelId(this.viewModelId)}setDesignViewModelField(e){var s;const t=e.binding&&e.binding.type==="Form"&&e.binding.field;if(t){if(!this.designViewModelField){const i=this.designViewModelUtils.getDgViewModel(this.viewModelId);this.designViewModelField=i.fields.find(r=>r.id===t)}e.updateOn=(s=this.designViewModelField)==null?void 0:s.updateOn}}getBasicPropConfig(e){return{description:"Basic Information",title:"基本信息",properties:{id:{description:"组件标识",title:"标识",type:"string",readonly:!0},type:{description:"组件类型",title:"控件类型",type:"select",editor:{type:"combo-list",textField:"name",valueField:"value",idField:"value",editable:!1,data:[{value:e.type,name:b.DgControl[e.type]&&b.DgControl[e.type].name}]}}}}}getAppearanceConfig(e=null,t={},s){const i={title:"外观",description:"Appearance"},r={class:{title:"class样式",type:"string",description:"组件的CSS样式",$converter:"/converter/appearance.converter",parentPropertyID:"appearance"},style:{title:"style样式",type:"string",description:"组件的样式",$converter:"/converter/appearance.converter",parentPropertyID:"appearance"}};for(const n in t)r[n]=Object.assign(r[n]||{},t[n]);return{...i,properties:{...r},setPropertyRelates(n,d){if(n){switch(n&&n.propertyID){case"class":case"style":{b.canvasChanged.value++;break}}s&&s(n,e,d)}}}}getPropertyEditorParams(e,t=[],s="visible",i={},r={},n=""){const{getVariables:d,getControlName:o,getStateMachines:l}=F(this.designerHostService),c=this.getRealTargetType(e),p=t&&t.length>0?t:["Const","Variable","StateMachine","Expression"],m={type:"property-editor",propertyTypes:p};return p.map(v=>{switch(v){case"Const":Object.assign(m,{constType:"enum",constEnums:[{id:!0,name:"是"},{id:!1,name:"否"}]},i);break;case"Expression":m.expressionConfig=this.getExpressionOptions(e,c,n||s);break;case"StateMachine":m.stateMachines=l();break;case"Variable":Object.assign(m,{controlName:o(e),newVariablePrefix:"is",newVariableType:"Boolean",variables:d(this.viewModelId),parentComponentId:this.componentId==="root-component"?"":"root-component",onBeforeOpenVariables:h=>{h.value=d(this.viewModelId)}},r),this.designerContext.designerMode==="PC_RTC"&&(m.newVariablePrefix="ext_"+m.newVariablePrefix);break}}),m}getVisibleProperty(e,t=""){var r;let s=["Const","Variable","StateMachine","Expression"];return t==="gridFieldEditor"?s=["Const","Expression"]:t==="form-group"&&!((r=e.binding)!=null&&r.field)&&(s=["Const","Variable","StateMachine"]),{visible:{title:"是否可见",type:"boolean",description:"运行时组件是否可见",editor:this.getPropertyEditorParams(e,s,"visible")}}}getBehaviorConfig(e,t="",s={},i){const r={title:"行为",description:""},n=this.getVisibleProperty(e,t);for(const o in s)n[o]=Object.assign(n[o]||{},s[o]);const d=this;return{...r,properties:{...n},setPropertyRelates(o,l){if(o){switch(o.propertyID){case"disabled":case"readonly":case"visible":d.afterMutilEditorChanged(e,o);break}i&&i(o,l)}}}}afterMutilEditorChanged(e,t){this.addNewVariableToViewModel(t,this.viewModelId),this.updateExpressionValue(t,e),this.clearExpression(t,e)}updateElementByParentContainer(e,t){const s=t&&t.parent&&t.parent.schema;if(!s)return;const i=s.contents.findIndex(n=>n.id===e),r=M.cloneDeep(s.contents[i]);s.contents.splice(i,1),s.contents.splice(i,0,r),b.refreshCanvas()}addNewVariableToViewModel(e,t){const s=e.propertyValue;if(!(s&&typeof s=="object")||!(s.type==="Variable"&&s.isNewVariable))return;const n={id:s.field,category:"locale",code:s.fullPath,name:s.fullPath,type:s.newVariableType||"String",isRtcVariable:this.designerContext.designerMode==="PC_RTC"?!0:void 0};delete s.newVariableType,delete s.isNewVariable,this.formSchemaUtils.getVariableByCode(n.code)||this.formSchemaUtils.getViewModelById("root-viewmodel").states.push(n)}getExpressions(){let e=[];return this.formRule?(this.formRule.expressions=this.formRule.expressions||[],e=this.formRule.expressions||[]):e=this.formSchemaUtils.getExpressions(),e}updateExpressionValue(e,t){const s=e.propertyValue;if(!((s&&s.type)==="Expression"&&s.expressionInfo))return;const{expressionId:n,expressionInfo:d}=s,{targetId:o,targetType:l,expressionType:c,value:p,message:m}=d,v=this.getExpressions();let h=v.find(V=>V.target===o);h||(h={target:o,rules:[],targetType:l},v.push(h));const x=h.rules.find(V=>V.type===c);if(x)x.value=p,x.message=m,(c==="minDate"||c==="maxDate"||c==="defaultTime")&&(x.elementId=t.id);else{const V={id:n,type:c,value:p,message:m,elementId:t.id};h.rules.push(V)}delete s.expressionInfo}clearExpression(e,t){const s=e.propertyValue;if(s&&s.type==="Expression")return;const r=e.propertyID,n=this.getExpressions(),d=t.binding?t.binding.field:t.id,o=n.find(l=>l.target===d);!o||!o.rules||(o.rules=o.rules.filter(l=>l.type!==r))}getExpressionOptions(e,t,s){return this.expressionProperty.getExpressionOptions(e,t,s)}getRealTargetType(e){return["response-toolbar-item","tab-toolbar-item","section-toolbar-item","drawer-toolbar-item"].indexOf(e.type)>-1?"Button":e.binding&&e.binding.field?"Field":"Container"}createBaseEventProperty(e){const t={};return t[this.viewModelId]={type:"events-editor",editor:{initialData:e,viewSourceHandle:s=>{var i;((i=s.controller)==null?void 0:i.label.indexOf(this.formSchemaUtils.getModule().code))>-1&&this.eventsEditorUtils.jumpToMethod(s)}}},t}}class B extends U{getPropertyConfig(e){return this.propertyConfig.categories.basic=this.getBasicPropConfig(e),this.propertyConfig.categories.appearance=this.getAppearanceConfig(e),this.propertyConfig}getAppearanceConfig(e){return super.getAppearanceConfig(e,{width:{title:"宽度",type:"number",editor:{nullable:!0,min:0,precision:0,needValid:!0},$converter:"/converter/size.converter",parentPropertyID:"size"},height:{title:"高度",type:"number",editor:{nullable:!0,min:0,precision:0,needValid:!0},$converter:"/converter/size.converter",parentPropertyID:"size",visible:!1}},(s,i,r)=>{switch(s.propertyID){case"width":case"height":R.value++;break}})}}function $(u,e){const t=new b.UseTemplateDragAndDropRules,{canAccept:s}=t.getTemplateRule(u,e);function i(c){var m,v,h;return!(!b.useDragulaCommonRule().basalDragulaRuleForContainer(c,e)||!s||((m=u.schema.contents)==null?void 0:m.length)===1&&((h=(v=u.schema)==null?void 0:v.contents[0])==null?void 0:h.type)===b.DgControl["external-container"].type)}function r(){return"display: flex;flex-direction:column;height:100%"}function n(){return!1}function d(){return!1}function o(){return!0}function l(c){const p=new B(c,e),{schema:m}=u;return p.getPropertyConfig(m)}return{canAccepts:i,getStyles:r,checkCanMoveComponent:n,checkCanDeleteComponent:d,hideNestedPaddingInDesginerView:o,getPropsConfig:l}}const O=a.defineComponent({name:"FListNavDesign",props:C,emits:[],setup(u,e){const t=a.ref(),s=a.inject("designer-host-service"),i=a.inject("design-item-context"),r=$(i,s),n=b.useDesignerComponent(t,i,r),d=a.ref(u.position),o=a.ref(u.title),l=a.ref(!1),c=a.ref(!1),p=a.computed(()=>{const h={},x=["top","bottom"].indexOf(d.value)>-1?"height":"width";return h[x]=l.value?"0px":u.size+"px",h});a.onMounted(()=>{t.value.componentInstance=n}),e.expose(n.value);function m(h){h&&h.stopPropagation(),!u.disabled&&(c.value=!0,l.value=!l.value)}const v=a.computed(()=>({"f-list-nav-main":!0,"d-none":l.value}));return()=>a.createVNode("div",{class:`f-list-nav f-list-nav-${d.value}`},[a.createVNode("div",{class:"f-list-nav-in",style:p.value},[a.createVNode("div",{class:v.value},[e.slots.navHeader&&a.createVNode("div",{class:"f-list-nav-header"},[e.slots.navHeader()]),!e.slots.navHeader&&o.value&&a.createVNode("div",{class:"f-list-nav-header"},[a.createVNode("div",{class:"f-list-nav-title"},[o.value])]),e.slots.default&&a.createVNode("div",{class:"f-list-nav-content drag-container",ref:t,"data-dragref":`${i.schema.id}-container`},[e.slots.default()]),e.slots.navContent&&a.createVNode("div",{class:"f-list-nav-content"},[e.slots.navContent()]),e.slots.navFooter&&a.createVNode("div",{class:"f-list-nav-footer"},[e.slots.navFooter()])]),u.collapsible&&a.createVNode("div",{class:["f-list-nav-toggle-sidebar",{disabled:u.disabled,active:l.value,"splitter-pane-collapse-animate":c.value}],onClick:h=>m(h)},[a.createVNode("span",{class:"triangle"},null)])])])}}),A={install(u){u.component(E.name,E)},register(u,e,t,s){u["list-nav"]=E,e["list-nav"]=w},registerDesigner(u,e,t){u["list-nav"]=O,e["list-nav"]=w}};f.FListNav=E,f.default=A,f.listNavProps=C,f.propsResolver=w,Object.defineProperties(f,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});