@farris/ui-vue/components/binding-selector/index.umd.cjs

Farris Vue, a Farris Design based Vue3 component library.

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