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

Farris Vue, a Farris Design based Vue3 component library.

(function(C,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):(C=typeof globalThis<"u"?globalThis:C||self,e(C["property-editor"]={},C.Vue,C.dynamicResolver,C.comboList,C.numberSpinner,C.FDatePicker,C.FTimePicker,C.common,C.expressionEditor,C.LodashES))})(this,function(C,e,j,w,$,I,D,E,q,F){"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 d=e.ref(!1),u=e.ref(t.constType),f=e.ref(t.constEnums),r=e.ref(t.constDateTime),o=e.ref(t.constTime),{getPropertyValue:i,triggerValueChange:a}=s,p=i("Const"),b=e.computed(()=>l=>l===u.value);e.watch(()=>t.constDateTime,l=>{r.value=l});function V(l){a(l)}function v(l){V(l)}function g(l){if(!l||l.length<1)return;const x=l[0].id;V(x)}function n(){return e.createVNode($.FNumberSpinner,{nullable:!0,readonly:d.value,modelValue:p.value,"onUpdate:modelValue":l=>p.value=l,onChange:v},null)}e.watch(()=>t.constEnums,l=>{f.value=l});function y(){return e.createVNode(w.FComboList,{key:"const-combo-list",modelValue:p.value,"onUpdate:modelValue":l=>p.value=l,placeholder:"",viewType:"text",enableClear:!1,valueField:"id",textField:"name",data:f.value,editable:!1,readonly:d.value,onChange:g},null)}function m(){var l,x,h,T,N,k,R;return e.createVNode(I,{modelValue:p.value,"onUpdate:modelValue":te=>p.value=te,onDatePicked:V,onClear:()=>V(null),enableClear:(l=r.value)==null?void 0:l.enableClear,selectMode:(x=r.value)==null?void 0:x.selectMode,displayFormat:(h=r.value)==null?void 0:h.displayFormat,valueFormat:(T=r.value)==null?void 0:T.valueFormat,minDate:(N=r.value)==null?void 0:N.minDate,maxDate:(k=r.value)==null?void 0:k.maxDate,showTime:(R=r.value)==null?void 0:R.showTime},null)}function P(){var l,x,h;return e.createVNode(D,{modelValue:p.value,"onUpdate:modelValue":T=>p.value=T,hourStep:(l=o.value)==null?void 0:l.hourStep,minuteStep:(x=o.value)==null?void 0:x.minuteStep,secondStep:(h=o.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")&&n(),b.value("enum")&&y(),b.value("date-picker")&&m(),b.value("time-picker")&&P()])}function Y(t,c,s){const d=e.ref(t.newVariablePrefix),u=e.ref(t.newVariableType),f=e.ref(t.id),r=e.ref(t.controlName),o=e.ref(t.variables),{getPropertyValue:i}=s;function a(n){return n[0].toUpperCase()+n.slice(1)}function p(n){return n[0].toLowerCase()+n.slice(1)}function b(n){return n.replace(/[-_](.)/g,(y,m)=>m.toUpperCase())}function V(){const n=d.value&&!d.value.endsWith("_")?a(r.value):p(r.value),y=a(f.value);let m=`${n}${y}`;m=b(m),m=`${d.value}${m}`;const{guid:P}=E.useGuid();return{type:"Variable",path:t.parentComponentId?`${t.parentComponentId}.${m}`:m,field:P(),fullPath:m,isNewVariable:!0,newVariableType:u.value}}function v(n){return o.value.find(m=>m.path===n)}function g(){const n=i("Variable");return n.value||(n.value={type:"Variable",field:"",path:"",fullPath:""}),n}return{generateVariable:V,getVariableByPath:v,getVariableValue:g}}function z(t,c,s){const d=e.ref(!1),u=e.ref(t.variables),f=e.ref(t.controlName),r=e.ref(!!f.value),{generateVariable:o,getVariableByPath:i,getVariableValue:a}=Y(t,c,s),{triggerValueChange:p}=s,b=a(),V=e.ref(b.value.field),v=e.computed(()=>[{"form-control-select-show":r.value},{"form-control-select-hide":!r.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,p(b.value)}function n(){const h=o(),T=i(h.path);T?g(T):(u.value.push(h),g(h))}const y=()=>(c.emit("beforeOpenVariables",u),Promise.resolve(!0));function m(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(){p(null)}function l(){return e.createVNode(w.FComboList,{key:"variable-combo-list",class:v.value,modelValue:V.value,"onUpdate:modelValue":h=>V.value=h,placeholder:"",viewType:"text",enableClear:t.enableClear,valueField:"field",idField:"field",textField:"fullPath",data:u.value,beforeOpen:y,readonly:d.value,editable:!1,onClear:P,onChange:m},null)}function x(){return e.createVNode("div",{class:"f-property-editor-variable-add-button"},[e.createVNode("button",{title:"新增变量",class:"f-variable-button",onClick:n},[e.createVNode("span",{class:"f-icon f-icon-add",style:"margin:unset;"},null)])])}return()=>e.createVNode("div",{class:"f-property-editor-variable-container"},[l(),r.value&&x()])}function G(t,c,s){const d=/^(?:(!)?)viewModel\.stateMachine\['([^']+)'\]$/,{getPropertyValue:u}=s;function f(o){if(!(typeof o.value=="string"))return;const a=o.value.match(d);if(!a||a.length<3)return;const b={type:"StateMachine",status:a[1]!=="!",field:a[2]};o.value=b,s.triggerValueChange(b)}function r(){const o=u("StateMachine");return o.value?(f(o),o):(o.value={type:"StateMachine",field:"",status:!1},o)}return{getStateMachineValue:r}}function H(t,c,s){const d=e.ref(!1),u=e.ref(t.stateMachines),{getStateMachineValue:f}=G(t,c,s),{triggerValueChange:r}=s,o=f(),i=e.ref(o.value.field),a=e.ref(o.value.status);function p(){a.value=!a.value,o.value.status=a.value,r(o.value)}function b(g){if(!g||g.length<1)return;const n=g[0];o.value.field=n.id,r(o.value)}function V(){return e.createVNode("div",{class:"f-stateMachine-status",onClick:p},[a.value?"是":"非"])}function v(){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:u.value,editable:!1,readonly:d.value,onChange:b},null)])}return()=>e.createVNode("div",{class:"f-property-editor-stateMachine-container"},[V(),v()])}function W(t,c,s){const d=e.ref(!1),{getPropertyValue:u,triggerValueChange:f}=s,r=u("Custom");function o(i){const a=i.target.value;f(a)}return()=>e.createVNode("div",{class:"f-property-editor-customize-container"},[e.withDirectives(e.createVNode("input",{class:"form-control",placeholder:"输入自定义内容","onUpdate:modelValue":i=>r.value=i,onChange:o,disabled:d.value},null),[[e.vModelText,r.value]])])}function J(t,c,s){const{getPropertyValue:d}=s,u=t.id;function f(i){return i+"_"+u}function r(i){return{type:"Expression",expressionId:f((i==null?void 0:i.targetId)||""),expressionInfo:i}}function o(){const{expressionInfo:i={value:"",targetId:"",targetType:"",expressionType:""}}=t.expressionConfig,a=d("Expression");return a.value?(a.value.expressionInfo=i,a.value.expressionId=f(i==null?void 0:i.targetId),a):(a.value=r(i),a)}return{getExpressionValue:o}}function K(t,c,s){const d=e.ref(!1),{triggerValueChange:u}=s,{getExpressionValue:f}=J(t,c,s);let r=f();const{expressionInfo:o}=r.value,i=e.ref(o.value),a=e.ref(o.message),p=e.ref(t.expressionConfig);e.watch(()=>[t.expressionConfig],()=>{p.value=t.expressionConfig,r=f(),i.value=r.value.expressionInfo.value});function b({expression:v,message:g}){!v&&!t.enableClear||(r.value.expressionInfo.value=v,g?r.value.expressionInfo.message=g:delete r.value.expressionInfo.message,u(r.value))}function V({expressionValue:v,notifyService:g}){return v?!0:(g.warning({message:"请先配置表达式",position:"top-center"}),!1)}return()=>e.createVNode("div",{class:"f-property-editor-expression-container"},[e.createVNode(q.FExpressionTextbox,e.mergeProps(p.value,{modelValue:i.value,"onUpdate:modelValue":v=>i.value=v,validateMessage:a.value,enableClear:t.enableClear,readonly:d.value,beforeSubmit:V,onSubmitModal:b}),null)])}function Q(t,c,s){const d=e.ref(t.modelValue),u=new Map;u.set(s,e.ref(F.cloneDeep(d.value)));function f(i){c.emit("valueChange",F.cloneDeep(i))}function r(i){const a=u.get(i);if(a)return a;const p=e.ref();return u.set(i,p),p}function o(i,a){switch(i){case"Const":return a!==void 0;case"Variable":return a&&a.field;case"Custom":return!0;case"Expression":return a&&a.expressionInfo&&a.expressionInfo.value;case"StateMachine":return a&&a.field}}return{triggerValueChange:f,getPropertyValue:r,isPropertyValueValid:o}}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),d=e.ref(t.constEnums),u=e.ref(t.propertyTypes),f=e.ref([]),r=e.ref();function o(){const n=u.value;return f.value=X.filter(y=>n.includes(y.id)),f}function i(n){return typeof n!="string"?!1:/^(?:(!)?)viewModel\.stateMachine\['([^']+)'\]$/.test(n)}function a(n){const y=u.value,m=y.includes("Const")&&s.value==="enum"&&d.value.findIndex(l=>l.id===n)>-1,P=y.includes("Const")&&s.value==="number"&&typeof n=="number";return m||P}function p(n){return u.value.includes("Custom")&&typeof n=="string"}function b(n){if(n&&typeof n=="object")return n.type}function V(n){const y=new Map([["Const",a],["StateMachine",i],["Custom",p]]);for(const[m,P]of y.entries())if(P(n))return m}function v(){const n=t.modelValue,y=u.value[0],m=b(n),P=V(n);return m||P||y}function g(){return r.value=v(),r}return e.watch(()=>t.propertyTypes,n=>{u.value=n,o(),(!n||!n.includes(r.value))&&(r.value=v())}),e.watch(()=>t.constEnums,n=>{d.value=n}),e.watch(()=>t.constType,n=>{s.value=n}),{getAllowedPropertyTypeItems:o,getCurrentPropertyType:g}}const M=e.defineComponent({name:"FPropertyEditor",props:S,emits:["valueChange","beforeOpenVariables"],setup(t,c){const s=e.ref(!1),{getAllowedPropertyTypeItems:d,getCurrentPropertyType:u}=Z(t),f=d(),r=u(),o=Q(t,c,r.value),{getPropertyValue:i,triggerValueChange:a,isPropertyValueValid:p}=o,b=_(t,c,o),V=z(t,c,o),v=W(t,c,o),g=H(t,c,o),n=K(t,c,o),y=e.computed(()=>x=>x===r.value);c.expose({currentPropertyType:r});function m(){const x=i(r.value);p(r.value,x.value)&&a(x.value),r.value==="Const"&&(t.constType==="time-picker"||t.constType==="date-picker")&&x.value===void 0&&a("")}function P(){return e.createVNode("div",{class:"f-property-editor-left"},[e.createVNode(w.FComboList,{modelValue:r.value,"onUpdate:modelValue":x=>r.value=x,placeholder:"",enableClear:!1,valueField:"id",textField:"name",data:f.value,editable:!1,readonly:s.value,onChange:m},null)])}function l(){return e.createVNode("div",{class:"f-property-editor-right"},[y.value("Const")&&b(),y.value("Variable")&&V(),y.value("Custom")&&v(),y.value("StateMachine")&&g(),y.value("Expression")&&n()])}return()=>e.createVNode("div",{class:"f-property-editor-container clearfix"},[P(),l()])}});M.register=(t,c,s,d)=>{t["property-editor"]=M,c["property-editor"]=O};const ee=E.withInstall(M);C.FPropertyEditor=M,C.default=ee,C.propertyEditorProps=S,C.propsResolver=O,Object.defineProperties(C,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});