@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
2 lines (1 loc) • 19.6 kB
JavaScript
(function(p,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue"),require("../button-edit/index.umd.js"),require("../tree-grid/index.umd.js"),require("../radio-group/index.umd.js"),require("../common/index.umd.js"),require("../dynamic-resolver/index.umd.js"),require("../property-panel/index.umd.js"),require("lodash-es"),require("../notify/index.umd.js")):typeof define=="function"&&define.amd?define(["exports","vue","../button-edit/index.umd.js","../tree-grid/index.umd.js","../radio-group/index.umd.js","../common/index.umd.js","../dynamic-resolver/index.umd.js","../property-panel/index.umd.js","lodash-es","../notify/index.umd.js"],t):(p=typeof globalThis<"u"?globalThis:p||self,t(p["binding-selector"]={},p.Vue,p.FButtonEdit,p.FTreeGrid,p.FRadioGroup,p.common,p.dynamicResolver,p.propertyPanel,p.LodashES,p.notify))})(this,function(p,t,k,ie,ae,Y,le,H,z,se){"use strict";var fe=Object.defineProperty;var me=(p,t,k)=>t in p?fe(p,t,{enumerable:!0,configurable:!0,writable:!0,value:k}):p[t]=k;var K=(p,t,k)=>me(p,typeof t!="symbol"?t+"":t,k);const de={$schema:"https://json-schema.org/draft/2020-12/schema",$id:"https://farris-design.gitee.io/binding-selector.schema.json",title:"binding-selector",description:"字段绑定选择器",type:"object",properties:{disabled:{description:"",type:"boolean",default:!1},readonly:{description:"",type:"boolean",default:!1},bindingType:{description:"",type:"object",default:{}},idField:{description:"",type:"string",default:"id"},title:{description:"",type:"string",default:"字段选择器"},modalWidth:{description:"",type:"number",default:800},modalHeight:{description:"",type:"number",default:600},separator:{description:"",type:"string",default:","},bindingData:{description:"",type:"array",default:[]},textField:{description:"",type:"string",default:"code"},editorParams:{description:"",type:"object",default:{}}}},U=[{field:"name",title:"名称"},{field:"bindingField",title:"绑定字段"},{field:"fieldType",title:"字段类型"}],G=[{field:"name",title:"名称"},{field:"code",title:"编号"},{field:"displayTypeName",title:"变量类型"}],J=[{value:"Form",text:"绑定字段"},{value:"LocaleVariable",text:"绑定组件变量"},{value:"RemoteVariable",text:"绑定表单变量"}],L={disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},modelValue:{type:Object,default:null},bindingType:{type:Object,default:{enable:!0,value:"Form",textField:"text",valueField:"value"}},data:{type:Array,default:[]},idField:{type:String,default:"id"},title:{type:String,default:"字段选择器"},modalWidth:{type:Number,default:800},modalHeight:{type:Number,default:600},multiSelect:{type:Boolean,default:!1},separator:{type:String,default:","},bindingData:{type:Array,default:[]},textField:{type:String,default:"code"},beforeOpenDialog:{type:Function,default:null},editorParams:{type:Object,default:null},onFieldSelected:{type:Function,default:null},showCustomFooter:{type:Boolean,default:!1}},Q=le.createPropsResolver(L,de),re={showCloseButton:{type:Boolean,default:!0},position:{type:String,default:"top-center"},timeout:{type:Number,default:3e3},theme:{type:String,default:"bootstrap"},left:{type:Number},right:{type:Number},top:{type:Number},bottom:{type:Number},id:{type:String},animate:{type:String,default:"fadeIn"},options:{type:Object},safeHtml:{type:Boolean,default:!0}},ce={showCloseButton:{type:Boolean,default:!0},animate:{type:String,default:"fadeIn"},options:{type:Object}},W=t.defineComponent({name:"Toast",props:ce,emits:["close","click"],setup:(e,i)=>{const a=t.ref(e.animate),s="fadeOut",o=t.computed(()=>e.options),c=t.ref(!1),u=t.computed(()=>{const g={animated:c.value,toast:!0};return g[e.animate]=!1,g[s]=c.value,g[o.value.type]=!0,o.value.theme&&(g[o.value.theme]=!0),g}),m=t.computed(()=>{const P=`f-icon-${o.value&&o.value.type?o.value.type.replace("toasty-type-",""):"default"}`,N={"f-icon":!0};return N[P]=!0,N}),h=t.computed(()=>o.value.title||o.value.message),F=t.computed(()=>o.value.title&&o.value.message),V=t.computed(()=>!o.value.title&&o.value.message),C=t.computed(()=>e.showCloseButton),b=t.computed(()=>!!o.value.buttons||!!i.slots.default);function x(g){g.stopPropagation(),g.preventDefault(),c.value=!1,setTimeout(()=>{i.emit("close",o.value)},200)}function v(g,w){}function $(g){return`f-preten-link ${g.customClass?g.customClass:""}`}t.watch(a,()=>{a.value});const O=()=>{var g;return t.createVNode(t.Fragment,null,[t.createVNode("div",{class:"after-toast-msg text-right"},[!i.slots.default&&((g=o.value.buttons)==null?void 0:g.map(w=>t.createVNode("span",{class:$(w),onClick:P=>void 0},[w.text]))),i.slots.default&&i.slots.default()])])};return()=>t.createVNode("div",{class:u.value,style:"min-height:44px"},[C.value&&t.createVNode("button",{title:"关闭",class:"toast-close f-btn-icon f-bare",onClick:x},[t.createVNode("span",{class:"f-icon modal_close"},null)]),h.value&&t.createVNode("section",{class:"modal-tips"},[t.createVNode("div",{class:"float-left modal-tips-iconwrap"},[t.createVNode("span",{class:m.value},null)]),t.createVNode("div",{class:"modal-tips-content"},[F.value&&t.createVNode(t.Fragment,null,[t.createVNode("h5",{class:"toast-title modal-tips-title",innerHTML:o.value.title},null),t.createVNode("p",{class:"toast-msg",innerHTML:o.value.message},null),b.value&&O()]),V.value&&(o.value.buttons?t.createVNode("div",{class:"toast-title-btns-wrapper d-flex"},[t.createVNode("h5",{class:"toast-title modal-tips-title only-toast-msg",innerHTML:o.value.message},null),t.createVNode("div",{class:"after-toast-title text-right ml-auto"},[O()])]):t.createVNode("h5",{class:"toast-title modal-tips-title only-toast-msg",innerHTML:o.value.message},null))])])])}}),_=t.defineComponent({name:"Notify",props:re,emits:["close","empty"],setup(e,i){const a=t.computed(()=>({"farris-notify":!0})),s={left:12,right:12,top:20,bottom:12},o=t.ref(),c=t.ref(e.options),u=t.ref(e.showCloseButton),m=t.computed(()=>e.position||"bottom-right"),h=t.computed(()=>e.timeout!=null?e.timeout:3e3),F=t.computed(()=>{const b=e.bottom?e.bottom:s.bottom,x=e.top?e.top:s.top,v={transition:"all 0.2s ease",left:m.value.indexOf("left")>-1?`${e.left?e.left:s.left}px`:"",right:m.value.indexOf("right")>-1?`${e.right?e.right:s.right}px`:"",top:m.value.indexOf("top")>-1?`${x}px`:"",bottom:m.value.indexOf("bottom")>-1?`${b}px`:""};return m.value.indexOf("center")>-1&&(v.left="50%",v.marginLeft="calc(-24rem / 2)",m.value==="center-center"&&(v.top="50%",v.transform="translate(-50%, -50%)")),v});function V(b){i.emit("close")}h.value&&setTimeout(()=>{V()},h.value),i.expose({closeToast:V,container:o,notifyPosition:m});function C(b,x){V()}return()=>t.createVNode("div",{class:a.value,style:F.value,ref:o},[t.createVNode(W,{options:c.value,showCloseButton:u.value,animate:e.animate,onClose:b=>C(b,c.value)},null)])}});class X{constructor(){K(this,"notifyRefs",[]);K(this,"globalConfig",t.reactive({}))}escapeAllHtml(i){if(typeof i!="string"||!i)return"";const a=document.createElement("div");return a.textContent=i||"",a.innerHTML.replace(/ /g," ").replace(/\\n/g,"<br>").replace(/\\t/g," ").replace(/\\r/g,"")}createNotifyInstance(i){const a=this,o=Object.assign({timeout:3e3,position:"bottom-right",showCloseButton:!0,safeHtml:!0},this.globalConfig,{...i}),c=document.createElement("div");c.style.display="contents";const u=t.createApp({setup(){var F;const m=t.ref();function h(){m.value.container.style.transform="scale(0)",setTimeout(()=>{a.updateNotifyPositionForClose(o,m),u.unmount()},220)}if(o.position.indexOf("top")>-1){const V=a.getNotifyInstances(o.position),C=V[V.length-1];if(C){const b=C.value.container.getBoundingClientRect();o.top=b.bottom}}return o.safeHtml&&((F=o.options)!=null&&F.message)&&(o.options.message=a.escapeAllHtml(o.options.message)),t.onUnmounted(()=>{document.body.removeChild(c)}),t.onMounted(()=>{a.updateNotifyPositionForCreate(o,m)}),()=>t.createVNode(t.Transition,{mode:"out-in",name:"fade",appear:!0},{default:()=>[t.createVNode(_,t.mergeProps({ref:m},o,{onClose:h}),null)]})}});return u.provide("NotifyService",this),document.body.appendChild(c),u.mount(c),u}getNotifyInstances(i){return this.notifyRefs.filter(a=>a.value.notifyPosition===i)}updateNotifyPositionForCreate(i,a){if(this.notifyRefs&&this.notifyRefs.length){const s=window.innerHeight;i.position.indexOf("bottom")>-1&&this.getNotifyInstances(i.position).forEach(o=>{const c=o.value.container.getBoundingClientRect();o.value.container.style.bottom=c.height+s-c.bottom+"px"})}this.notifyRefs=[...this.notifyRefs,a]}updateNotifyPositionForClose(i,a){const s=this.notifyRefs.indexOf(a);if(i.position.indexOf("top")>-1){const o=this.getNotifyInstances(i.position),c=o.indexOf(a);o.slice(c+1).forEach(u=>{u.value.container.style.top=u.value.container.offsetTop-u.value.container.offsetHeight+"px"})}s>-1&&this.notifyRefs.splice(s,1)}show(i){return this.createNotifyInstance(i)}buildNotifyProps(i,a){let s="",o="",c,u,m;typeof a=="string"?s=a:a&&(s=a.message||"",o=a.title||"",u=a.position||null,m=a.showCloseButton!=null?a.showCloseButton:null,c=a.timeout!=null?a.timeout:null);const F={options:{type:i,message:s,title:o}};return u!=null&&(F.position=u),m!=null&&(F.showCloseButton=m),c!=null&&(F.timeout=c),F}info(i){const a=this.buildNotifyProps("info",i);return this.show(a)}success(i){const a=this.buildNotifyProps("success",i);return this.show(a)}warning(i){const a=this.buildNotifyProps("warning",i);return this.show(a)}error(i){const a=this.buildNotifyProps("error",i);return this.show(a)}close(i){i&&i.unmount()}closeAll(){this.notifyRefs.forEach(i=>{i==null||i.value.closeToast()}),this.notifyRefs.length=0}}const ue=Symbol("NOTIFY_SERVICE_TOKEN");_.install=e=>{e.component(_.name,_),e.component(W.name,W);const i=new X;e.provide(ue,i),e.provide("FNotifyService",i)};function Z(e){const{designViewModelUtils:i,schemaService:a,formSchemaUtils:s}=e.editorParams.designerHostService,{viewModelId:o}=e.editorParams;let c=[],u=[],m=[];const h=new X;h.globalConfig={position:"top-center"};function F(l){switch(l){case"LocaleVariable":return u;case"RemoteVariable":return m;default:return c}}function V(){c=i.getAllFields2TreeByVMId(o)}function C(){const l=s.getViewModelById(o);if(l.parent){const n=s.getLocaleVariablesByViewModelId(l.parent);n&&n.length&&(n[0].data.name="根组件",u=u.concat(n))}const d=s.getLocaleVariablesByViewModelId(o);u=u.concat(d)}function b(){m=s.getRemoteVariables()}function x(l){var f,y,T;const d=z.merge({},l.rawData,{groupId:null,groupName:null}),n=(f=e.editorParams.componentSchema)==null?void 0:f.binding,r=i.getDgViewModel(o);if(n!=null&&n.field){const S=r.fields.find(j=>j.id===n.field);if(r.removeField([n.field]),S){const{groupId:j,groupName:B,editor:I}=S;z.merge(d,{editor:I,groupId:j,groupName:B})}}r.addField(d),(T=(y=e.editorParams.componentSchema)==null?void 0:y.editor)!=null&&T.type&&r.changeField(d.id,{editor:e.editorParams.componentSchema.editor.type})}function v(l){var f;const d=(f=e.editorParams.componentSchema)==null?void 0:f.binding,n=i.getDgViewModel(o),r={type:"Variable",id:l.id,fieldName:l.code,groupId:"",groupName:""};if(d!=null&&d.field){const y=s.getViewModelById(o),T=y==null?void 0:y.fields.find(S=>S.id===(d==null?void 0:d.field));T&&(r.groupName=T.groupName,r.groupId=T.groupId),n.removeField([d==null?void 0:d.field])}s.addViewModelField(o,r)}function $(l,d){if(!e.editorParams.needSyncToViewModel||!e.editorParams.viewModelId||!e.editorParams.designerHostService)return;const n=e.editorParams.componentSchema.binding;n&&n.field===l.id||(d==="Form"?x(l):v(l))}function O(l){if(!e.editorParams.needSyncToViewModel||!e.editorParams.viewModelId||!e.editorParams.designerHostService)return;const d=e.editorParams.componentSchema.binding;if(!(d&&d.field===l.id)&&s.expressions&&s.expressions.length){const{propertyData:n}=e.editorParams,r=s.expressions.findIndex(f=>f.target===d.field);r>-1&&(s.expressions.splice(r,1),h.warning("切换绑定后，请重新配置表达式"),Object.keys(n).forEach(f=>{n[f]&&n[f].type==="Expression"&&(n[f].expressionId="")}))}}function g(l,d){if(e.editorParams.componentSchema){switch(e.editorParams.componentSchema.binding||(e.editorParams.componentSchema.binding={}),d){case"Form":{e.editorParams.componentSchema.binding.path=l.bindingField,e.editorParams.componentSchema.binding.field=l.id,e.editorParams.componentSchema.binding.fullPath=l.path;break}case"LocaleVariable":{e.editorParams.componentSchema.binding.path=l.viewModelId===o?l.code:"root-component."+l.code,e.editorParams.componentSchema.binding.field=l.id,e.editorParams.componentSchema.binding.fullPath=l.code;break}case"RemoteVariable":{e.editorParams.componentSchema.binding.path="root-component."+l.code,e.editorParams.componentSchema.binding.field=l.id,e.editorParams.componentSchema.binding.fullPath=l.code;break}}return e.editorParams.componentSchema.binding.type=d,e.editorParams.componentSchema.path=l.bindingPath,e.editorParams.componentSchema.binding}}function w(l){const d=l==null?void 0:l.field,n=new Set,r=s.getFormSchema().module,f=s.getViewModelById(o);let T=r.components.find(S=>S.viewModel===o).componentType;return(T==="frame"||T==="table")&&(T="form"),r.viewmodels.forEach(S=>{if(!S.fields||S.fields.length===0)return;const j=r.components.find(I=>I.viewModel===S.id);let{componentType:B}=j;(B==="frame"||B==="table")&&(B="form"),!(B!==T||S.bindTo!==f.bindTo)&&S.fields.forEach(I=>{I.id!==d&&n.add(I.id)})}),n}function P(l){if(!l)return[];const d={},{fieldControlTypeMapping:n}=H.SchemaDOMMapping;for(const r in n){const f=n[r];!f||!f.length||f.forEach(y=>{d[y.key]=d[y.key]||[],d[y.key].push(r)})}return d[l]}function N(){V(),C(),b()}function E(l,d){if(l.multiLanguage)return{fieldType:"multiLanguage",fieldTypeName:"多语言"};const n=d===H.FormBindingType.Form?l.type.name:l.type,r=d===H.FormBindingType.Form?l.type.displayName:l.displayTypeName;return{fieldType:n,fieldTypeName:r}}function A(l,d){var ee,te,ne,oe;if(!(l!=null&&l.length))return h.warning({message:"请先选择数据"}),!1;let n=!0;const r=(ee=e.editorParams)==null?void 0:ee.componentSchema,f=r==null?void 0:r.binding;if(!f)return!0;let y,T=!1;if(f.type===H.FormBindingType.Form){const M=a.getFieldByID(f.field);M&&(y=E(M,H.FormBindingType.Form).fieldType,M.$type===Y.FormSchemaEntityField$Type.ComplexField&&(T=!0))}else{const M=s.getVariableById(f.field);M&&(y=M.type)}const S=l[0],{fieldType:j,fieldTypeName:B}=E(S,d),I="不可以切换成",D="类型字段，请重新选择！";if(T||!y){const M=P((oe=(ne=(te=e.editorParams)==null?void 0:te.componentSchema)==null?void 0:ne.editor)==null?void 0:oe.type);return M&&!M.includes(j)&&(h.warning(`${I}${B}${D}`),n=!1),n}return y&&y!==j?e.editorParams.canChangeFieldType?!0:(h.warning(`${I}${B}${D}`),!1):n}return{initTreeData:N,getTreeDataSource:F,updateViewModel:$,updateComponentSchema:g,resolveOccupiedFields:w,resolveFieldTypesByEditorType:P,checkFieldValiation:A,clearExpresssionConfig:O}}const q=t.defineComponent({name:"FBindingSelectorContainer",props:L,emits:["selected","bindingTypeChange","cancel","submit"],setup(e,i){var A,l,d;const a=t.ref(e.data),s=t.ref(((A=e.modelValue)==null?void 0:A.type)||"Form"),o=t.ref(e.bindingData),c=t.ref(),u=t.ref(),m=t.ref(),{getTreeDataSource:h,initTreeData:F,resolveOccupiedFields:V,resolveFieldTypesByEditorType:C}=Z(e),b=t.ref([]);t.onBeforeMount(()=>{var n,r,f,y,T,S;F(),a.value=h(s.value),(n=e.editorParams)!=null&&n.disableOccupiedFields&&(u.value=V((f=(r=e.editorParams)==null?void 0:r.componentSchema)==null?void 0:f.binding)),m.value=C((S=(T=(y=e.editorParams)==null?void 0:y.componentSchema)==null?void 0:T.editor)==null?void 0:S.type),b.value=s.value==="Form"?U:G}),t.onMounted(()=>{var r,f,y;const n=(y=(f=(r=e.editorParams)==null?void 0:r.componentSchema)==null?void 0:f.binding)==null?void 0:y.field;n&&c.value.selectItemById(n)});const x={"f-utils-fill":!0,"m-2":(l=e.bindingType)==null?void 0:l.enable,"mx-2":!((d=e.bindingType)!=null&&d.enable),border:!0};function v(n){b.value=n==="Form"?U:G,c.value.updateColumns(b.value),a.value=h(n),c.value.updateDataSource(a.value),c.value.clearSelection(),o.value=[],i.emit("selected",[]),i.emit("bindingTypeChange",n)}function $(n){o.value=n,i.emit("selected",n)}function O(){return t.createVNode("div",{class:"px-3"},[t.createVNode(ae,{name:"bindingType",textField:e.bindingType.textField||"text",valueField:e.bindingType.valueField||"value",data:J,modelValue:s.value,"onUpdate:modelValue":n=>s.value=n,onChangeValue:v},null)])}const g={customRowStatus:n=>{var f;if(n.raw.$type&&n.raw.$type!==Y.FormSchemaEntityField$Type.SimpleField||u.value&&u.value.has(n.raw.id))return n.disabled=!0,n;const r=s.value==="Form"?(f=n.raw.type)==null?void 0:f.name:n.raw.type;return r&&m.value&&!m.value.includes(r)?(n.disabled=!0,n):(n.disabled=!1,n)}};function w(){return t.createVNode(ie,{ref:c,fit:!0,data:a.value,idField:e.idField,columns:b.value,rowNumber:{enable:!1},columnOption:{fitColumns:!0},onSelectionChange:$,"row-option":g},null)}function P(){i.emit("cancel")}function N(){if(!o.value||!o.value.length){const n=new se.FNotifyService;return n.globalConfig={position:"top-center"},n.warning({message:"请先选择数据"}),!1}return!0}function E(){N()&&i.emit("submit",{selectedData:o.value[0],bindingType:s.value})}return()=>t.createVNode("div",{class:"h-100 d-flex flex-column"},[e.bindingType.enable&&O(),t.createVNode("div",{class:x,style:"position:relative;border-radius:10px;"},[t.createTextVNode(" "),w()]),e.showCustomFooter?t.createVNode("div",{class:"modal-footer"},[t.createVNode("button",{type:"button",class:"btn btn-secondary",onClick:P},[t.createTextVNode("取消")]),t.createVNode("button",{type:"button",class:"btn btn-primary",onClick:E},[t.createTextVNode("确定")])]):""])}}),R=t.defineComponent({name:"FBindingSelector",props:L,emits:["selected","bindingTypeChanged"],setup(e,i){var w,P;const a='<i class="f-icon f-icon-lookup"></i>',s=t.ref(e.bindingData),o=t.ref(e.data),c=t.ref(),u=t.ref(((w=e.modelValue)==null?void 0:w.type)||"Form"),m=t.ref((P=e.modelValue)==null?void 0:P.path),{updateViewModel:h,updateComponentSchema:F,checkFieldValiation:V,clearExpresssionConfig:C}=Z(e);function b(N){s.value=N}function x(N){u.value=N}function v(N){m.value=N.path}function $(){return t.createVNode(q,{ref:c,data:o.value,onSelected:b,modelValue:e.modelValue,idField:e.idField,bindingData:s.value,onBindingTypeChange:x,editorParams:e.editorParams,bindingType:e.bindingType,showCustomFooter:!1},null)}function O(){return!!V(s.value,u.value)}const g={title:e.title,fitContent:!1,height:e.modalHeight,width:e.modalWidth,buttons:[{name:"cancel",text:"取消",class:"btn btn-secondary",handle:N=>(s.value=[],!0)},{name:"accept",text:"确定",class:"btn btn-primary",handle:N=>{if(!O())return!1;h(s.value[0],u.value);const E=F(s.value[0],u.value);return v(E),C(s.value[0]),e.onFieldSelected&&typeof e.onFieldSelected=="function"&&e.onFieldSelected(E,void 0,s.value[0]),!0}}],resizeable:!1,draggable:!0};return()=>t.createVNode(k,{modelValue:m.value,"onUpdate:modelValue":N=>m.value=N,editable:!1,disabled:e.disabled,readonly:e.readonly,inputType:"text",enableClear:!1,buttonContent:a,buttonBehavior:"Modal",modalOptions:g},{default:()=>[t.createVNode("div",{class:"h-100 d-flex flex-column"},[$()])]})}});R.install=e=>{e.component(R.name,R),e.component(q.name,q)},R.register=(e,i,a,s)=>{e["binding-selector"]=R,i["binding-selector"]=Q},p.BindingSelector=R,p.FBindingSelectorContainer=q,p.bindingSelectorProps=L,p.bindingTypes=J,p.default=R,p.fieldColumns=U,p.propsResolver=Q,p.variableColumns=G,Object.defineProperties(p,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});