@farris/ui-vue/components/property-editor/index.umd.cjs

Farris Vue, a Farris Design based Vue3 component library.

(function(v,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("../dynamic-resolver/index.umd.js"),require("../combo-list/index.umd.js"),require("../number-spinner/index.umd.js"),require("../date-picker/index.umd.js"),require("../time-picker/index.umd.js"),require("../common/index.umd.js"),require("../expression-editor/index.umd.js"),require("lodash-es")):typeof define=="function"&&define.amd?define(["exports","vue","../dynamic-resolver/index.umd.js","../combo-list/index.umd.js","../number-spinner/index.umd.js","../date-picker/index.umd.js","../time-picker/index.umd.js","../common/index.umd.js","../expression-editor/index.umd.js","lodash-es"],e):(v=typeof globalThis<"u"?globalThis:v||self,e(v["property-editor"]={},v.Vue,v.dynamicResolver,v.comboList,v.numberSpinner,v.FDatePicker,v.FTimePicker,v.common,v.expressionEditor,v.LodashES))})(this,function(v,e,j,w,$,I,D,F,q,E){"use strict";const L=new Map([["appearance",j.resolveAppearance]]);function A(t,c,s){return c}const U={$schema:"https://json-schema.org/draft/2020-12/schema",$id:"https://farris-design.gitee.io/property-editor.schema.json",title:"property-editor",description:"A Farris Component",type:"object",properties:{id:{description:"The unique identifier for property-editor",type:"string"},type:{description:"The type string of property-editor",type:"string",default:"property-editor"},appearance:{description:"",type:"object",properties:{class:{type:"string"},style:{type:"string"}},default:{}},binding:{description:"",type:"object",default:{}},disable:{type:"string",default:!1},editable:{description:"",type:"boolean",default:!0},placeholder:{description:"",type:"string",default:""},readonly:{description:"",type:"boolean",default:!1},require:{description:"",type:"boolean",default:!1},tabindex:{description:"",type:"number",default:-1},visible:{description:"",type:"boolean",default:!0},propertyTypes:{description:"",type:"array",default:[]},constEnums:{description:"",type:"array",default:[]},constDateTime:{description:"",type:"object",default:{}},constType:{description:"",type:"string",default:""},variables:{description:"",type:"array",default:[]},controlName:{description:"",type:"string",default:""},newVariablePrefix:{description:"",type:"string",default:""},newVariableType:{description:"",type:"string",default:""},stateMachines:{description:"",type:"array",default:[]},expressionConfig:{description:"",type:"object",default:{}},parentComponentId:{description:"",type:"string",default:""},enableClear:{description:"",type:"boolean",default:!1}},required:["type"],ignore:["id"]},B={title:"property-editor",description:"A Farris Component",type:"object",categories:{basic:{description:"Basic Infomation",title:"基本信息",properties:{id:{description:"组件标识",title:"标识",type:"string",readonly:!0},type:{description:"组件类型",title:"控件类型",type:"select",editor:{type:"waiting for modification",enum:[]}}}}}},S={...{constType:{type:String,default:""},constEnums:{type:Array,default:[]},constDateTime:{type:Object,default:null},constTime:{type:Object,default:null}},...{variables:{type:Array,default:[]},controlName:{type:String,default:""},newVariablePrefix:{type:String,default:""},newVariableType:{type:String,default:""},parentComponentId:{type:String,default:""}},...{},...{stateMachines:{type:Array,default:[]}},...{expressionConfig:{type:Object,default:{}},enableClear:{type:Boolean,default:!1}},id:{Type:String,default:""},modelValue:{type:[Number,String,Boolean,Object]},propertyTypes:{type:Array,default:[]}},O=j.createPropsResolver(S,U,L,A,B);function _(t,c,s){const p=e.ref(!1),l=e.ref(t.constType),m=e.ref(t.constEnums),n=e.ref(t.constDateTime),a=e.ref(t.constTime),{getPropertyValue:i,triggerValueChange:r}=s,d=i("Const"),b=e.computed(()=>u=>u===l.value);e.watch(()=>t.constDateTime,u=>{n.value=u});function V(u){r(u)}function C(u){V(u)}function g(u){if(!u||u.length<1)return;const x=u[0].id;V(x)}function o(){return e.createVNode($.FNumberSpinner,{nullable:!0,readonly:p.value,modelValue:d.value,"onUpdate:modelValue":u=>d.value=u,onChange:C},null)}function f(){return e.createVNode(w.FComboList,{key:"const-combo-list",modelValue:d.value,"onUpdate:modelValue":u=>d.value=u,placeholder:"",viewType:"text",enableClear:!1,valueField:"id",textField:"name",data:m.value,editable:!1,readonly:p.value,onChange:g},null)}function y(){var u,x,h,T,N,k,R;return e.createVNode(I,{modelValue:d.value,"onUpdate:modelValue":te=>d.value=te,onDatePicked:V,onClear:()=>V(null),enableClear:(u=n.value)==null?void 0:u.enableClear,selectMode:(x=n.value)==null?void 0:x.selectMode,displayFormat:(h=n.value)==null?void 0:h.displayFormat,valueFormat:(T=n.value)==null?void 0:T.valueFormat,minDate:(N=n.value)==null?void 0:N.minDate,maxDate:(k=n.value)==null?void 0:k.maxDate,showTime:(R=n.value)==null?void 0:R.showTime},null)}function P(){var u,x,h;return e.createVNode(D,{modelValue:d.value,"onUpdate:modelValue":T=>d.value=T,hourStep:(u=a.value)==null?void 0:u.hourStep,minuteStep:(x=a.value)==null?void 0:x.minuteStep,secondStep:(h=a.value)==null?void 0:h.secondStep,use12Hour:!1,onValueChange:V,onClear:()=>V(null),editable:!1},null)}return()=>e.createVNode("div",{class:"f-property-editor-const-container"},[b.value("number")&&o(),b.value("enum")&&f(),b.value("date-picker")&&y(),b.value("time-picker")&&P()])}function Y(t,c,s){const p=e.ref(t.newVariablePrefix),l=e.ref(t.newVariableType),m=e.ref(t.id),n=e.ref(t.controlName),a=e.ref(t.variables),{getPropertyValue:i}=s;function r(o){return o[0].toUpperCase()+o.slice(1)}function d(o){return o[0].toLowerCase()+o.slice(1)}function b(o){return o.replace(/[-_](.)/g,(f,y)=>y.toUpperCase())}function V(){const o=p.value&&!p.value.endsWith("_")?r(n.value):d(n.value),f=r(m.value);let y=`${o}${f}`;y=b(y),y=`${p.value}${y}`;const{guid:P}=F.useGuid();return{type:"Variable",path:t.parentComponentId?`${t.parentComponentId}.${y}`:y,field:P(),fullPath:y,isNewVariable:!0,newVariableType:l.value}}function C(o){return a.value.find(y=>y.path===o)}function g(){const o=i("Variable");return o.value||(o.value={type:"Variable",field:"",path:"",fullPath:""}),o}return{generateVariable:V,getVariableByPath:C,getVariableValue:g}}function z(t,c,s){const p=e.ref(!1),l=e.ref(t.variables),m=e.ref(t.controlName),n=e.ref(!!m.value),{generateVariable:a,getVariableByPath:i,getVariableValue:r}=Y(t,c,s),{triggerValueChange:d}=s,b=r(),V=e.ref(b.value.field),C=e.computed(()=>[{"form-control-select-show":n.value},{"form-control-select-hide":!n.value}]);function g(h){Object.assign(b.value,{field:h.field,path:h.path,fullPath:h.fullPath,isNewVariable:h.isNewVariable,newVariableType:h.isNewVariable&&h.newVariableType}),V.value=b.value.field,d(b.value)}function o(){const h=a(),T=i(h.path);T?g(T):(l.value.push(h),g(h))}const f=()=>(c.emit("beforeOpenVariables",l),Promise.resolve(!0));function y(h){if(!h||h.length<1)return;const T=h[0],N={path:T.path,fullPath:T.fullPath,field:T.field};g(N)}function P(){d(null)}function u(){return e.createVNode(w.FComboList,{key:"variable-combo-list",class:C.value,modelValue:V.value,"onUpdate:modelValue":h=>V.value=h,placeholder:"",viewType:"text",enableClear:t.enableClear,valueField:"field",idField:"field",textField:"fullPath",data:l.value,beforeOpen:f,readonly:p.value,editable:!1,onClear:P,onChange:y},null)}function x(){return e.createVNode("div",{class:"f-property-editor-variable-add-button"},[e.createVNode("button",{title:"新增变量",class:"f-variable-button",onClick:o},[e.createVNode("span",{class:"f-icon f-icon-add",style:"margin:unset;"},null)])])}return()=>e.createVNode("div",{class:"f-property-editor-variable-container"},[u(),n.value&&x()])}function G(t,c,s){const p=/^(?:(!)?)viewModel\.stateMachine\['([^']+)'\]$/,{getPropertyValue:l}=s;function m(a){if(!(typeof a.value=="string"))return;const r=a.value.match(p);if(!r||r.length<3)return;const b={type:"StateMachine",status:r[1]!=="!",field:r[2]};a.value=b,s.triggerValueChange(b)}function n(){const a=l("StateMachine");return a.value?(m(a),a):(a.value={type:"StateMachine",field:"",status:!1},a)}return{getStateMachineValue:n}}function H(t,c,s){const p=e.ref(!1),l=e.ref(t.stateMachines),{getStateMachineValue:m}=G(t,c,s),{triggerValueChange:n}=s,a=m(),i=e.ref(a.value.field),r=e.ref(a.value.status);function d(){r.value=!r.value,a.value.status=r.value,n(a.value)}function b(g){if(!g||g.length<1)return;const o=g[0];a.value.field=o.id,n(a.value)}function V(){return e.createVNode("div",{class:"f-stateMachine-status",onClick:d},[r.value?"是":"非"])}function C(){return e.createVNode("div",{class:"f-stateMachine-combo-list"},[e.createVNode(w.FComboList,{key:"state-machine-combo-list",modelValue:i.value,"onUpdate:modelValue":g=>i.value=g,placeholder:"",viewType:"text",enableClear:!1,valueField:"id",textField:"name",data:l.value,editable:!1,readonly:p.value,onChange:b},null)])}return()=>e.createVNode("div",{class:"f-property-editor-stateMachine-container"},[V(),C()])}function W(t,c,s){const p=e.ref(!1),{getPropertyValue:l,triggerValueChange:m}=s,n=l("Custom");function a(i){const r=i.target.value;m(r)}return()=>e.createVNode("div",{class:"f-property-editor-customize-container"},[e.withDirectives(e.createVNode("input",{class:"form-control",placeholder:"输入自定义内容","onUpdate:modelValue":i=>n.value=i,onChange:a,disabled:p.value},null),[[e.vModelText,n.value]])])}function J(t,c,s){const{getPropertyValue:p}=s,l=t.id;function m(i){return i+"_"+l}function n(i){return{type:"Expression",expressionId:m((i==null?void 0:i.targetId)||""),expressionInfo:i}}function a(){const{expressionInfo:i={value:"",targetId:"",targetType:"",expressionType:""}}=t.expressionConfig,r=p("Expression");return r.value?(r.value.expressionInfo=i,r.value.expressionId=m(i==null?void 0:i.targetId),r):(r.value=n(i),r)}return{getExpressionValue:a}}function K(t,c,s){const p=e.ref(!1),{triggerValueChange:l}=s,{getExpressionValue:m}=J(t,c,s);let n=m();const{expressionInfo:a}=n.value,i=e.ref(a.value),r=e.ref(a.message),d=e.ref(t.expressionConfig);e.watch(()=>[t.expressionConfig],()=>{d.value=t.expressionConfig,n=m(),i.value=n.value.expressionInfo.value});function b({expression:C,message:g}){!C&&!t.enableClear||(n.value.expressionInfo.value=C,g?n.value.expressionInfo.message=g:delete n.value.expressionInfo.message,l(n.value))}function V({expressionValue:C,notifyService:g}){return C?!0:(g.warning({message:"请先配置表达式",position:"top-center"}),!1)}return()=>e.createVNode("div",{class:"f-property-editor-expression-container"},[e.createVNode(q.FExpressionTextbox,e.mergeProps(d.value,{modelValue:i.value,"onUpdate:modelValue":C=>i.value=C,validateMessage:r.value,enableClear:t.enableClear,readonly:p.value,beforeSubmit:V,onSubmitModal:b}),null)])}function Q(t,c,s){const p=e.ref(t.modelValue),l=new Map;l.set(s,e.ref(E.cloneDeep(p.value)));function m(i){c.emit("valueChange",E.cloneDeep(i))}function n(i){const r=l.get(i);if(r)return r;const d=e.ref();return l.set(i,d),d}function a(i,r){switch(i){case"Const":return r!==void 0;case"Variable":return r&&r.field;case"Custom":return!0;case"Expression":return r&&r.expressionInfo&&r.expressionInfo.value;case"StateMachine":return r&&r.field}}return{triggerValueChange:m,getPropertyValue:n,isPropertyValueValid:a}}const X=[{id:"Const",name:"常量"},{id:"Variable",name:"变量"},{id:"Custom",name:"自定义"},{id:"StateMachine",name:"状态机"},{id:"Expression",name:"表达式"}];function Z(t,c){const s=e.ref(t.constType),p=e.ref(t.constEnums),l=e.ref(t.propertyTypes),m=e.ref([]),n=e.ref();function a(){const o=l.value;return m.value=X.filter(f=>o.includes(f.id)),m}e.watch(()=>[t.propertyTypes],()=>{l.value=t.propertyTypes,a()});function i(o){return typeof o!="string"?!1:/^(?:(!)?)viewModel\.stateMachine\['([^']+)'\]$/.test(o)}function r(o){const f=l.value,y=f.includes("Const")&&s.value==="enum"&&p.value.findIndex(u=>u.id===o)>-1,P=f.includes("Const")&&s.value==="number"&&typeof o=="number";return y||P}function d(o){return l.value.includes("Custom")&&typeof o=="string"}function b(o){if(o&&typeof o=="object")return o.type}function V(o){const f=new Map([["Const",r],["StateMachine",i],["Custom",d]]);for(const[y,P]of f.entries())if(P(o))return y}function C(){const o=t.modelValue,f=l.value[0],y=b(o),P=V(o);return y||P||f}function g(){return n.value||(n.value=C()),n}return{getAllowedPropertyTypeItems:a,getCurrentPropertyType:g}}const M=e.defineComponent({name:"FPropertyEditor",props:S,emits:["valueChange","beforeOpenVariables"],setup(t,c){const s=e.ref(!1),{getAllowedPropertyTypeItems:p,getCurrentPropertyType:l}=Z(t),m=p(),n=l(),a=Q(t,c,n.value),{getPropertyValue:i,triggerValueChange:r,isPropertyValueValid:d}=a,b=_(t,c,a),V=z(t,c,a),C=W(t,c,a),g=H(t,c,a),o=K(t,c,a),f=e.computed(()=>x=>x===n.value);c.expose({currentPropertyType:n});function y(){const x=i(n.value);d(n.value,x.value)&&r(x.value),n.value==="Const"&&(t.constType==="time-picker"||t.constType==="date-picker")&&x.value===void 0&&r("")}function P(){return e.createVNode("div",{class:"f-property-editor-left"},[e.createVNode(w.FComboList,{modelValue:n.value,"onUpdate:modelValue":x=>n.value=x,placeholder:"",enableClear:!1,valueField:"id",textField:"name",data:m.value,editable:!1,readonly:s.value,onChange:y},null)])}function u(){return e.createVNode("div",{class:"f-property-editor-right"},[f.value("Const")&&b(),f.value("Variable")&&V(),f.value("Custom")&&C(),f.value("StateMachine")&&g(),f.value("Expression")&&o()])}return()=>e.createVNode("div",{class:"f-property-editor-container clearfix"},[P(),u()])}});M.register=(t,c,s,p)=>{t["property-editor"]=M,c["property-editor"]=O};const ee=F.withInstall(M);v.FPropertyEditor=M,v.default=ee,v.propertyEditorProps=S,v.propsResolver=O,Object.defineProperties(v,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});