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

Farris Vue, a Farris Design based Vue3 component library.

(function(p,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("../dynamic-resolver/index.umd.js"),require("../button-edit/index.umd.js"),require("../notify/index.umd.js"),require("../event-parameter/index.umd.js"),require("../common/index.umd.js")):typeof define=="function"&&define.amd?define(["exports","vue","../dynamic-resolver/index.umd.js","../button-edit/index.umd.js","../notify/index.umd.js","../event-parameter/index.umd.js","../common/index.umd.js"],e):(p=typeof globalThis<"u"?globalThis:p||self,e(p["json-editor"]={},p.Vue,p.dynamicResolver,p.FButtonEdit,p.notify,p.FEventParameter,p.common))})(this,function(p,e,B,E,A,S,w){"use strict";const J={$schema:"https://json-schema.org/draft/2020-12/schema",$id:"https://farris-design.gitee.io/json-editor.schema.json",title:"json-editor",description:"A Farris Component",type:"object",properties:{type:{description:"The type string of json-editor",type:"string",default:"json-editor"},parameterDescriptors:{description:"Description of parameters to be configured",type:"array",default:[]},formContextData:{description:"Form context data",type:"object",default:{}},beforeOpen:{description:"Before opening the configuration dialog, the callback function is executed",type:"function",default:null},dialogTitle:{description:"Title of the dialog modal",type:"string",default:"JSON编辑器"},keyColumnTitle:{description:"Title for the key column in the table",type:"string",default:"键"},valueColumnTitle:{description:"Title for the value column in the table",type:"string",default:"值"},operationColumnTitle:{description:"Title for the operation column",type:"string",default:"操作"},keyColumnPlaceholder:{description:"Placeholder text for key input fields",type:"string",default:""},valueColumnPlaceholder:{description:"Placeholder text for value input fields",type:"string",default:""},addButtonText:{description:"Text displayed on the add new row button",type:"string",default:"添加"}},required:["id","type"],ignore:[]},M=new Map([]);function R(t,r,d){return r}const F={modelValue:{type:String,default:""},parameterDescriptors:{type:Array,default:[]},formContextData:{type:Object,default:{}},beforeOpen:{type:Function,default:null},dialogTitle:{type:String,default:"JSON编辑器"},keyColumnTitle:{type:String,default:"键"},valueColumnTitle:{type:String,default:"值"},operationColumnTitle:{type:String,default:"操作"},keyColumnPlaceholder:{type:String,default:""},valueColumnPlaceholder:{type:String,default:""},addButtonText:{type:String,default:"添加"}},k=B.createPropsResolver(F,J,M,R);function q(t,r,d){const l=e.inject(A.F_NOTIFY_SERVICE_TOKEN,null),{formContextData:m,parameterDescriptors:y,initialize:c,hasDuplicateParameter:V,getNewValue:b}=d;function g(s){r.emit("change",s),r.emit("update:modelValue",s)}function v(){if(V())return l==null||l.warning({message:`配置中存在重复的${t.keyColumnTitle}，请修改。`,position:"top-center"}),!1;const s=b();return g(s),!0}const j=e.reactive({title:t.dialogTitle,width:675,height:500,fitContent:!1,showHeader:!0,showCloseButton:!0,showMaxButton:!1,resizeable:!1,draggable:!0,closedCallback:()=>{},buttons:[{class:"btn btn-secondary",text:"取消",handle:()=>!0},{class:"btn btn-primary",text:"确定",handle:()=>v()}]});function a(){g("")}function u(){if(c(),typeof t.beforeOpen=="function"){const s=t.beforeOpen();if(!s)return;s.then(h=>{const f=h==null?void 0:h.formContextData;m.value=f||m.value||{};const P=h==null?void 0:h.parameterDescriptors;y.value=P||y.value||[]})}}return{modalConfigs:j,beforeOpenModalDialog:u,onClear:a,changeValue:g}}const I={options:{type:Array,default:[]},idField:{type:String,default:"id"},valueField:{type:String,default:"id"},textField:{type:String,default:"name"},titleField:{type:String,default:"name"}},$=e.defineComponent({name:"FEditableComboPopupContainer",props:I,emits:["select","close"],setup(t,r){const d=e.computed(()=>t.options.length===0);function l(a){r.emit("select",a)}function m(){r.emit("close")}function y(a){return a[t.idField]}function c(a){return a[t.textField]}function V(a){return a[t.titleField]||""}function b(){return e.createVNode("div",{class:"fv-editable-combo-list-close",onClick:m},[e.createVNode("span",null,[e.createTextVNode("关闭")])])}function g(a){return e.createVNode("div",{class:"fv-editable-combo-list-item",key:y(a),title:V(a),onClick:()=>l(a)},[e.createVNode("span",null,[c(a)])])}function v(){return t.options.map(a=>g(a))}function j(){return e.createVNode("div",{class:"fv-editable-combo-list-placeholder"},[e.createVNode("span",null,[e.createTextVNode("无选项")])])}return()=>e.createVNode("div",{class:"fv-editable-combo-list"},[d.value&&j(),v(),b()])}}),_={modelValue:{type:String,default:""},options:{type:Array,default:[]},idField:{type:String,default:"id"},valueField:{type:String,default:"id"},textField:{type:String,default:"name"},titleField:{type:String,default:"name"},placeholder:{type:String,default:"请选择"},dropDownIcon:{type:String,default:'<span class="f-icon f-icon-arrow-60-down"></span>'},autoApply:{type:Boolean,default:!0},filterOnType:{type:Boolean,default:!0}},K=e.defineComponent({name:"FEditableCombo",props:_,emits:["update:modelValue","select"],setup(t,r){const d=e.ref(),l=e.ref(""),m=e.computed(()=>Array.isArray(t.options)?t.options.filter(u=>{if(!u||typeof u!="object")return!1;const s=u[t.valueField]||"";return typeof s!="string"?!1:s.includes(l.value)}):[]),y=e.computed(()=>m.value.length>0);function c(u){var s,h;u?(s=d.value)==null||s.showPopup():(h=d.value)==null||h.hidePopup()}function V(u){if(u.code==="Escape"){c(!1);return}t.filterOnType&&(l.value=t.modelValue,y.value?c(!0):c(!1))}function b(){l.value=""}function g(){b(),y.value&&c(!0)}function v(){b()}function j(u){r.emit("update:modelValue",u)}function a(u){if(r.emit("select",u),t.autoApply){const s=u[t.valueField];j(s)}c(!1)}return()=>e.createVNode(E,{ref:d,modelValue:t.modelValue,"onUpdate:modelValue":j,editable:!0,enableClear:!0,placeholder:t.placeholder,buttonContent:t.dropDownIcon,placement:"auto",popupClass:"fv-editable-combo-popup",onClick:g,onClickButton:v,onKeyup:V},{default:()=>[e.createVNode($,{options:m.value,idField:t.idField,valueField:t.valueField,textField:t.textField,titleField:t.titleField,onSelect:a,onClose:()=>c(!1)},null)]})}}),U={useParametersComposition:{type:Object,require:!0},jsonEditorProps:{type:Object,default:{}},formContextData:{type:Object,default:{}}},z=e.defineComponent({name:"FJsonEditorModalContainer",props:U,emits:[],setup(t){const{parameterItems:r,parameterCodeOptions:d,appendNewParameter:l,deleteParameterById:m,onParameterCodeChanged:y}=t.useParametersComposition,c=e.computed(()=>r.value.length===0),V=e.computed(()=>!c.value);function b(){return e.createVNode("div",{class:"fv-json-editor-header"},[e.createVNode("div",{class:"fv-json-editor-key-col"},[t.jsonEditorProps.keyColumnTitle]),e.createVNode("div",{class:"fv-json-editor-value-col"},[t.jsonEditorProps.valueColumnTitle]),e.createVNode("div",{class:"fv-json-editor-operation-col"},[t.jsonEditorProps.operationColumnTitle])])}function g(){return e.createVNode("div",{class:"fv-json-editor-placeholder"},[e.createVNode("div",{class:"fv-json-editor-default-add-button",onClick:l},[e.createVNode("span",{class:"fv-json-editor-default-add-icon f-icon f-icon-add"},null),e.createVNode("span",{class:"fv-json-editor-default-add-text"},[t.jsonEditorProps.addButtonText])])])}function v(f){return e.createVNode(K,{modelValue:f.code,"onUpdate:modelValue":[P=>f.code=P,()=>y(f.id)],options:d.value,placeholder:t.jsonEditorProps.keyColumnPlaceholder},null)}function j(f){var P,N,D;return e.createVNode(S,{modelValue:f.value,"onUpdate:modelValue":O=>f.value=O,editorType:f.editorType,fieldData:(P=t.formContextData)==null?void 0:P.fieldData,varData:(N=t.formContextData)==null?void 0:N.varData,formData:(D=t.formContextData)==null?void 0:D.formData},null)}function a(f){return e.createVNode("div",{class:"fv-json-editor-row"},[e.createVNode("div",{class:"fv-json-editor-key-col"},[v(f)]),e.createVNode("div",{class:"fv-json-editor-value-col"},[j(f)]),e.createVNode("div",{class:"fv-json-editor-operation-col"},[e.createVNode("div",{class:"fv-json-editor-delete-button"},[e.createVNode("span",{class:"fv-json-editor-delete-icon f-icon f-icon-yxs_delete",onClick:()=>m(f.id)},null)])])])}function u(){return r.value.map(f=>a(f))}function s(){return e.createVNode("div",{class:"fv-json-editor-add-button",onClick:l},[e.createVNode("span",{class:"fv-json-editor-add-icon f-icon f-icon-add"},null),e.createVNode("span",{class:"fv-json-editor-add-text"},[t.jsonEditorProps.addButtonText])])}function h(){return e.createVNode("div",{class:"fv-json-editor-body"},[c.value&&g(),u(),V.value&&s()])}return()=>e.createVNode("div",{class:"fv-json-editor"},[b(),h()])}});function H(t){const r=e.ref([]),d=e.ref([]),l=e.ref(t.parameterDescriptors||[]);e.watch(()=>t.parameterDescriptors,o=>{l.value=o});const{guid:m}=w.useGuid();function y(o){if(r.value=[],d.value=[],!b(o))return;const n=JSON.parse(o);Object.keys(n).forEach(i=>{const C=m(),x=a(i);r.value.push(e.reactive({id:C,code:i,value:g(n[i],C),editorType:x}))})}e.watch(()=>t.modelValue,o=>y(o));function c(){y(t.modelValue)}function V(){const o={};return r.value.forEach(i=>{const C=i==null?void 0:i.code;C&&C.trim().length>0&&(o[C]=v(i.value,i.id))}),Object.keys(o).length===0?"":JSON.stringify(o)}function b(o){try{const n=JSON.parse(o);if(!n||typeof n!="object"||Array.isArray(n))return!1}catch{return!1}return!0}function g(o,n){return typeof o=="object"?(d.value.push(n),JSON.stringify(o)):o}function v(o,n){if(o&&typeof o=="string"&&d.value.includes(n))try{o=JSON.parse(o)}catch{return o}return o===void 0?"":o}function j(o){const n=l.value;return!o||!n?void 0:n.find(C=>C.id===o)}function a(o){const n=j(o);return n==null?void 0:n.editorType}function u(o){if(!o)return"";switch(o){case S.EditorType.Switch:return!1;default:return""}}function s(o){const n=j(o);if(!n)return;const{editorType:i,defaultValue:C}=n;return C!==void 0?C:u(i)}function h(){const o=new Set;for(const n of r.value){const i=n==null?void 0:n.code;if(!(!i||i.trim().length===0)){if(o.has(i))return!0;o.add(i)}}return!1}function f(o){const n=r.value.find(G=>G.id===o);if(!n)return;const i=n.code;if(!i)return;const C=a(i);n.editorType=C||void 0;let x=s(i);x=g(x,o),n.value=x}function P(o){const n=r.value.findIndex(i=>i.id===o);n>=0&&r.value.splice(n,1)}function N(){r.value.push(e.reactive({id:m(),code:"",value:"",editorType:void 0}))}const D=e.computed(()=>l.value.map(o=>{let n=o.label;return o.description&&(n+=`（${o.description}）`),{id:o.id,name:n}})),O=e.ref(t.formContextData);return{parameterItems:r,parameterCodeOptions:D,formContextData:O,parameterDescriptors:l,initialize:c,onParameterCodeChanged:f,hasDuplicateParameter:h,deleteParameterById:P,appendNewParameter:N,getNewValue:V}}const T=e.defineComponent({name:"FJsonEditor",props:F,emits:["change","update:modelValue"],setup(t,r){const d=H(t),{modalConfigs:l,onClear:m,beforeOpenModalDialog:y,changeValue:c}=q(t,r,d),{formContextData:V}=d;return()=>e.createVNode(E.FButtonEdit,{modelValue:t.modelValue,enableClear:!0,buttonBehavior:"Modal",modalOptions:l,beforeOpen:y,onClear:m,"onUpdate:modelValue":c},{default:()=>[e.createVNode(z,{useParametersComposition:d,jsonEditorProps:t,formContextData:V.value},null)]})}});T.register=(t,r,d,l)=>{t["json-editor"]=T,r["json-editor"]=k};const L=w.withInstall(T);p.FJsonEditor=T,p.default=L,p.jsonEditorProps=F,p.propsResolver=k,Object.defineProperties(p,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});