@farris/ui-vue/components/component/index.umd.cjs

Farris Vue, a Farris Design based Vue3 component library.

(function(h,u){typeof exports=="object"&&typeof module<"u"?u(exports,require("vue"),require("lodash-es"),require("../common/index.umd.js")):typeof define=="function"&&define.amd?define(["exports","vue","lodash-es","../common/index.umd.js"],u):(h=typeof globalThis<"u"?globalThis:h||self,u(h.component={},h.Vue,h.LodashES,h.common))})(this,function(h,u,T,J){"use strict";var fe=Object.defineProperty;var ue=(h,u,T)=>u in h?fe(h,u,{enumerable:!0,configurable:!0,writable:!0,value:T}):h[u]=T;var D=(h,u,T)=>ue(h,typeof u!="symbol"?u+"":u,T);const S={},N={};function j(a){const{properties:e,title:t,ignore:n}=a,r=n&&Array.isArray(n),c=Object.keys(e).reduce((o,d)=>((!r||!n.find(m=>m===d))&&(o[d]=e[d].type==="object"&&e[d].properties?j(e[d]):T.cloneDeep(e[d].default)),o),{});if(t&&(!r||!n.find(o=>o==="id"))){const o=t.toLowerCase().replace(/-/g,"_");c.id=`${o}_${Math.random().toString().slice(2,6)}`}return c}function Q(a){const{properties:e,title:t,required:n}=a;if(n&&Array.isArray(n)){const r=n.reduce((c,o)=>(c[o]=e[o].type==="object"&&e[o].properties?j(e[o]):T.cloneDeep(e[o].default),c),{});if(t&&n.find(c=>c==="id")){const c=t.toLowerCase().replace(/-/g,"_");r.id=`${c}_${Math.random().toString().slice(2,6)}`}return r}return{type:t}}function q(a,e={},t){const n=S[a];if(n){let r=Q(n);const c=N[a];return r=c?c({getSchemaByType:q},r,e,t):r,r}return null}function X(a,e){const t=j(e);return Object.keys(t).reduce((n,r)=>(Object.prototype.hasOwnProperty.call(a,r)&&(n[r]&&T.isPlainObject(n[r])&&T.isPlainObject(a[r]||!a[r])?Object.assign(n[r],a[r]||{}):n[r]=a[r]),n),t),t}function F(a,e){return Object.keys(a).filter(n=>a[n]!=null).reduce((n,r)=>{if(e.has(r)){const c=e.get(r);if(typeof c=="string")n[c]=a[r];else{const o=c(r,a[r],a);Object.assign(n,o)}}else n[r]=a[r];return n},{})}function Y(a,e,t=new Map){const n=X(a,e);return F(n,t)}function Z(a={}){function e(i,s,l,f){if(typeof l=="number")return f[i].length===l;if(typeof l=="object"){const y=Object.keys(l)[0],P=l[y];if(y==="not")return Number(f[i].length)!==Number(P);if(y==="moreThan")return Number(f[i].length)>=Number(P);if(y==="lessThan")return Number(f[i].length)<=Number(P)}return!1}function t(i,s,l,f){return f[i]&&f[i].propertyValue&&String(f[i].propertyValue.value)===String(l)}const n=new Map([["length",e],["getProperty",t]]);Object.keys(a).reduce((i,s)=>(i.set(s,a[s]),i),n);function r(i,s){const l=i;return typeof s=="number"?[{target:l,operator:"length",param:null,value:Number(s)}]:typeof s=="boolean"?[{target:l,operator:"getProperty",param:i,value:!!s}]:typeof s=="object"?Object.keys(s).map(f=>{if(f==="length")return{target:l,operator:"length",param:null,value:s[f]};const y=f,P=s[f];return{target:l,operator:"getProperty",param:y,value:P}}):[]}function c(i){return Object.keys(i).reduce((l,f)=>{const y=r(f,i[f]);return l.push(...y),l},[])}function o(i,s){if(n.has(i.operator)){const l=n.get(i.operator);return l&&l(i.target,i.param,i.value,s)||!1}return!1}function d(i,s){return c(i).reduce((y,P)=>y&&o(P,s),!0)}function m(i,s){const l=Object.keys(i),f=l.includes("allOf"),y=l.includes("anyOf"),P=f||y,V=(P?i[P?f?"allOf":"anyOf":"allOf"]:[i]).map($=>d($,s));return f?!V.includes(!1):V.includes(!0)}return{parseValueSchema:m}}const R={button:{type:"button",name:"按钮"},"response-toolbar":{type:"response-toolbar",name:"工具栏"},"response-toolbar-item":{type:"response-toolbar-item",name:"按钮"},"content-container":{type:"content-container",name:"容器"},"input-group":{type:"input-group",name:"文本"},textarea:{type:"textarea",name:"多行文本"},lookup:{type:"lookup",name:"帮助"},"number-spinner":{type:"number-spinner",name:"数值"},"date-picker":{type:"date-picker",name:"日期"},switch:{type:"switch",name:"开关"},"radio-group":{type:"radio-group",name:"单选组"},"check-box":{type:"check-box",name:"复选框"},"check-group":{type:"check-group",name:"复选框组"},"combo-list":{type:"combo-list",name:"下拉列表"},"response-form":{type:"response-form",name:"卡片面板"},"response-layout":{type:"response-layout",name:"布局容器",icon:"response-layout-3"},"response-layout-item":{type:"response-layout-item",name:"布局",icon:"response-layout-1"},"tree-grid":{type:"tree-grid",name:"树表格"},"tree-grid-column":{type:"tree-grid-column",name:"树表格列"},"data-grid":{type:"data-grid",name:"表格"},"data-grid-column":{type:"data-grid-column",name:"表格列"},module:{type:"Module",name:"模块"},component:{type:"component",name:"组件"},tabs:{type:"tabs",name:"标签页"},"tab-page":{type:"tab-page",name:"标签页项",dependentParentControl:"Tab"},"tab-toolbar-item":{type:"tab-toolbar-item",name:"标签页工具栏按钮"},"time-picker":{type:"time-picker",name:"时间选择"},section:{type:"section",name:"分组面板"},"section-toolbar":{type:"section-toolbar",name:"分组面板工具栏"},"section-toolbar-item":{type:"section-toolbar-item",name:"分组面板按钮"},splitter:{type:"splitter",name:"分栏面板"},"splitter-pane":{type:"splitter-pane",name:"分栏面板项",dependentParentControl:"Splitter"},"component-ref":{type:"component-ref",name:"组件引用节点"},uploader:{type:"uploader",name:"附件上传"},"page-header":{type:"page-header",name:"页头"},"page-footer":{type:"page-footer",name:"页脚"},"tab-toolbar":{type:"tab-toolbar",name:"标签页工具栏"},fieldset:{type:"fieldset",name:"分组"},"query-solution":{type:"query-solution",name:"筛选方案"},drawer:{type:"drawer",name:"抽屉"}},I={},K={};Z();function _(a,e,t=new Map,n=(o,d,m,i)=>d,r={},c=o=>o){return S[e.title]=e,N[e.title]=n,I[e.title]=r,K[e.title]=c,(o={},d=!0)=>{if(!d)return F(o,t);const m=Y(o,e,t),i=Object.keys(a).reduce((s,l)=>(s[l]=a[l].default,s),{});return Object.assign(i,m)}}function H(a,e){return{customClass:e.class,customStyle:e.style}}const W=new Map([["appearance",H]]),x={$schema:"https://json-schema.org/draft/2020-12/schema",$id:"https://farris-design.gitee.io/component.schema.json",title:"component",description:"A Farris Visual Component",type:"object",properties:{id:{description:"The unique identifier for a component",type:"string"},type:{description:"The type string of component",type:"string",default:"component"},componentType:{description:"The type string of component",type:"string"},viewModel:{description:"The viewModel string of component",type:"string"},appearance:{description:"",type:"object",properties:{class:{type:"string"},style:{type:"string"}},default:{}},contents:{description:"",type:"array",default:[]},visible:{description:"",type:"boolean",default:!0},onInit:{description:"初始化事件",type:"string",default:""},onAfterViewInit:{description:"视图初始化后事件",type:"string",default:""}},required:["id","type","contents"]};function G(a,e,t){return e}const A={id:{type:String},customClass:{type:String,default:""},customStyle:{type:String,default:""},componentType:{type:String,default:""},formColumns:{type:Number,default:4}},O=_(A,x,W,G),ee=Object.assign({},A,{componentId:{type:String,default:""}}),B=u.defineComponent({name:"FComponent",props:A,emits:["init","afterViewInit"],setup(a,e){return u.onBeforeMount(()=>{e.emit("init",a.id)}),u.onMounted(()=>{e.emit("afterViewInit",a.id)}),()=>u.createVNode("div",{class:a.customClass},[e.slots.default&&e.slots.default()])}});function te(a,e,t){var U;const n=t&&t.getStyles&&t.getStyles()||"",r=t&&t.getDesignerClass&&t.getDesignerClass()||"",c=u.ref();function o(){return(e==null?void 0:e.schema.componentType)==="frame"?!1:t&&t.checkCanMoveComponent?t.checkCanMoveComponent():!0}function d(){return!1}function m(){return(e==null?void 0:e.schema.componentType)==="frame"?!1:t&&t.checkCanDeleteComponent?t.checkCanDeleteComponent():!0}function i(){return(e==null?void 0:e.schema.componentType)==="frame"?!0:t&&t.hideNestedPaddingInDesginerView?t.hideNestedPaddingInDesginerView():!1}function s(p){if(!p||!p.value)return null;if(p.value.schema&&p.value.schema.type==="component")return p.value;const b=u.ref(p==null?void 0:p.value.parent),v=s(b);return v||null}function l(p=e){var E;if(t!=null&&t.getDraggableDesignItemElement)return t.getDraggableDesignItemElement(p);const{componentInstance:b,designerItemElementRef:v}=p;if(!b||!b.value)return null;const{getCustomButtons:g}=b.value;return b.value.canMove||g&&((E=g())!=null&&E.length)?v:l(p.parent)}function f(p){return!!t&&t.canAccepts(p)}function y(){return(e==null?void 0:e.schema.label)||(e==null?void 0:e.schema.title)||(e==null?void 0:e.schema.name)}function P(){}function w(p,b){var v;!p||!b||(t!=null&&t.onAcceptMovedChildElement&&t.onAcceptMovedChildElement(p,b),(v=e==null?void 0:e.setupContext)==null||v.emit("dragEnd"))}function M(p,b){const{componentType:v}=p;let g=q(v,p,b);t&&t.onResolveNewComponentSchema&&(g=t.onResolveNewComponentSchema(p,g));const E=v.toLowerCase().replace(/-/g,"_");return g&&!g.id&&g.type===v&&(g.id=`${E}_${Math.random().toString().slice(2,6)}`),g}function V(p){p&&t!=null&&t.onChildElementMovedOut&&t.onChildElementMovedOut(p)}function C(...p){if(t&&t.getPropsConfig)return t.getPropsConfig(...p)}function $(){t&&t.onRemoveComponent&&t.onRemoveComponent(),e!=null&&e.schema.contents&&e.schema.contents.map(p=>{let b=p.id;p.type==="component-ref"&&(b=p.component);const v=a.value.querySelectorAll(`#${b}-design-item`);v!=null&&v.length&&Array.from(v).map(g=>{var E;(E=g==null?void 0:g.componentInstance)!=null&&E.value.onRemoveComponent&&g.componentInstance.value.onRemoveComponent()})})}function L(){if(t&&t.getCustomButtons)return t.getCustomButtons()}function k(p){if(t&&t.onPropertyChanged)return t.onPropertyChanged(p)}return c.value={canMove:o(),canSelectParent:d(),canDelete:m(),canNested:!i(),contents:e==null?void 0:e.schema.contents,elementRef:a,parent:(U=e==null?void 0:e.parent)==null?void 0:U.componentInstance,schema:e==null?void 0:e.schema,styles:n,designerClass:r,canAccepts:f,getBelongedComponentInstance:s,getDraggableDesignItemElement:l,getDraggingDisplayText:y,getPropConfig:C,getDragScopeElement:P,onAcceptMovedChildElement:w,onChildElementMovedOut:V,addNewChildComponentSchema:M,triggerBelongedComponentToMoveWhenMoved:!!t&&t.triggerBelongedComponentToMoveWhenMoved||u.ref(!1),triggerBelongedComponentToDeleteWhenDeleted:!!t&&t.triggerBelongedComponentToDeleteWhenDeleted||u.ref(!1),onRemoveComponent:$,getCustomButtons:L,onPropertyChanged:k},c}class ne{getTemplateRule(e,t){const n=t==null?void 0:t.formSchemaUtils,r=n==null?void 0:n.getFormTemplateRule(),c={canAccept:!0,canDelete:!0,canMove:!0};if(!r)return c;const o=this.getComponentContext(e),{componentClassList:d}=o;return d.forEach(m=>{if(!m||!r[m])return;const{canMove:i,canDelete:s,canAccept:l}=r[m];c.canMove=c.canMove&&this.resolveRuleValue(i,o),c.canDelete=c.canDelete&&this.resolveRuleValue(s,o),c.canAccept=c.canAccept&&this.resolveRuleValue(l,o)}),c}resolveRuleValue(e,t){return typeof e=="boolean"?e:this.parseRuleValueSchema(e,t)}parseRuleValueSchema(e,t){const n=e.invalidContext||[];let r=!0;for(const c of n){if(c.firstLevelChild){if(c.firstLevelChild.class){const{firstLevelChildClassList:o}=t;if(o&&!o.includes(c.firstLevelChild.class)){r=!1;continue}}if(c.firstLevelChild.type){const{firstLevelChildSchema:o}=t;if(!o||o.type!==c.firstLevelChild.type){r=!1;continue}}}if(c.secondLevelChild){if(c.secondLevelChild.class){const{secondLevelChildClassList:o}=t;if(o&&!o.includes(c.secondLevelChild.class)){r=!1;continue}}if(c.secondLevelChild.type){const{secondLevelChildSchema:o}=t;if(!o||o.type!==c.secondLevelChild.type){r=!1;continue}}}if(c.parent){if(c.parent.class){const{parentClassList:o}=t;if(o&&!o.includes(c.parent.class)){r=!1;continue}}if(c.parent.type){const{parentSchema:o}=t;if(o&&o.type!==c.parent.type){r=!1;continue}}}r=!0;break}return!r}getComponentContext(e){var w,M,V,C;const t=e.schema,n=t.appearance&&t.appearance.class||"",r=n.split(" ")||[],c=t.contents||[],o=c.length?c[0]:null,d=o&&o.appearance?o.appearance.class:"",m=d?d.split(" "):[],i=(w=o==null?void 0:o.contents)!=null&&w.length?o==null?void 0:o.contents[0]:null,s=i&&i.appearance?i.appearance.class:"",l=s?s.split(" "):[],f=t.type==="component"?(V=(M=e.parent)==null?void 0:M.parent)==null?void 0:V.schema:(C=e.parent)==null?void 0:C.schema,y=f&&f.appearance&&f.appearance.class||"",P=y?y.split(" "):[];return{componentClass:n,componentClassList:r,childContents:c,firstLevelChildSchema:o,firstLevelChildClass:d,firstLevelChildClassList:m,secondLevelChildSchema:i,secondLevelChildClass:s,secondLevelChildClassList:l,parentSchema:f,parentClass:y,parentClassList:P}}}const oe=u.ref(0);function re(){oe.value++}const ae=u.ref(0);class ce{constructor(e,t){D(this,"componentId");D(this,"viewModelId");D(this,"eventsEditorUtils");D(this,"formSchemaUtils");D(this,"formMetadataConverter");D(this,"designViewModelUtils");D(this,"designViewModelField");D(this,"controlCreatorUtils");D(this,"designerHostService");D(this,"schemaService",null);D(this,"metadataService",null);D(this,"propertyConfig",{type:"object",categories:{}});var n;this.componentId=e,this.designerHostService=t,this.eventsEditorUtils=t.eventsEditorUtils,this.formSchemaUtils=t.formSchemaUtils,this.formMetadataConverter=t.formMetadataConverter,this.viewModelId=((n=this.formSchemaUtils)==null?void 0:n.getViewModelIdByComponentId(e))||"",this.designViewModelUtils=t.designViewModelUtils,this.controlCreatorUtils=t.controlCreatorUtils,this.metadataService=t.metadataService,this.schemaService=t.schemaService}getTableInfo(){var e;return(e=this.schemaService)==null?void 0:e.getTableInfoByViewModelId(this.viewModelId)}setDesignViewModelField(e){var n;const t=e.binding&&e.binding.type==="Form"&&e.binding.field;if(t){if(!this.designViewModelField){const r=this.designViewModelUtils.getDgViewModel(this.viewModelId);this.designViewModelField=r.fields.find(c=>c.id===t)}e.updateOn=(n=this.designViewModelField)==null?void 0:n.updateOn}}getBasicPropConfig(e){return{description:"Basic Information",title:"基本信息",properties:{id:{description:"组件标识",title:"标识",type:"string",readonly:!0},type:{description:"组件类型",title:"控件类型",type:"select",editor:{type:"combo-list",textField:"name",valueField:"value",editable:!1,data:[{value:e.type,name:R[e.type].name}]}}}}}getAppearanceConfig(e=null){return{title:"外观",description:"Appearance",properties:{class:{title:"class样式",type:"string",description:"组件的CSS样式",$converter:"/converter/appearance.converter"},style:{title:"style样式",type:"string",description:"组件的样式",$converter:"/converter/appearance.converter"}},setPropertyRelates(t,n){if(t)switch(t&&t.propertyID){case"class":case"style":{ae.value++;break}}}}}updateElementByParentContainer(e,t){const n=t&&t.parent&&t.parent.schema;if(!n)return;const r=n.contents.findIndex(o=>o.id===e),c=T.cloneDeep(n.contents[r]);n.contents.splice(r,1),n.contents.splice(r,0,c),re()}}class ie extends ce{constructor(e,t){super(e,t)}getPropertyConfig(e){return this.propertyConfig.categories.basic=this.getBasicPropConfig(e),this.propertyConfig.categories.appearance=this.getAppearanceConfig(e),this.getEventPropConfig(e),this.propertyConfig}getEventPropConfig(e){const t=[{label:"onInit",name:"初始化事件"},{label:"onAfterViewInit",name:"视图初始化后事件"}],n=this,r=n.eventsEditorUtils.formProperties(e,n.viewModelId,t),c={};c[n.viewModelId]={type:"events-editor",editor:{initialData:r}},this.propertyConfig.categories.eventsEditor={title:"事件",hideTitle:!0,properties:c,refreshPanelAfterChanged:!0,tabId:"commands",tabName:"交互",setPropertyRelates(o,d){const m=o.propertyValue;delete e[n.viewModelId],m&&(m.setPropertyRelates=this.setPropertyRelates,n.eventsEditorUtils.saveRelatedParameters(e,n.viewModelId,m.events,m))}}}}function se(a,e){const t=new ne,{canMove:n,canDelete:r}=t.getTemplateRule(a,e);function c(){return!1}function o(){return r}function d(){return n}function m(){return!1}function i(){return" display: inherit;flex-direction: inherit;margin-bottom:10px"}function s(w){const M=new ie(w,e),{schema:V}=a;return M.getPropertyConfig(V)}function l(){var $,L,k,U;const w=a==null?void 0:a.schema,V=(e==null?void 0:e.formSchemaUtils).getViewModelIdByComponentId(w.id);if(w.componentType!=="data-grid"&&w.componentType!=="form"||!(($=a.componentInstance)!=null&&$.value.parent))return;const C=(L=a.componentInstance)==null?void 0:L.value.parent.schema;if((k=C==null?void 0:C.toolbar)!=null&&k.buttons&&C.toolbar.buttons.length){C.toolbar.buttons.forEach(b=>{const v=b.onClick,g=v&&v.split(".");if(!g||g.length<3)return;g[g.length-2]===V&&(b.needRemove=!0)}),C.toolbar.buttons=C.toolbar.buttons.filter(b=>!b.needRemove);const p=(U=a.componentInstance)==null?void 0:U.value.parent;p.parent&&p.parent.updateToolbarItems&&p.parent.updateToolbarItems()}}function f(){const w=e==null?void 0:e.designViewModelUtils,M=e==null?void 0:e.formSchemaUtils,V=a==null?void 0:a.schema;if(w&&M){const C=M.getViewModelIdByComponentId(V.id);w.deleteViewModelById(C),M.deleteComponent(V.id)}}function y(){const w=e==null?void 0:e.designViewModelUtils,M=e==null?void 0:e.formSchemaUtils,V=a==null?void 0:a.schema,C=M.getViewModelIdByComponentId(V.id);w.getDgViewModel(C).fields.forEach($=>{if(M.getExpressions()&&M.getExpressions().length){const L=M.getExpressions().findIndex(k=>k.fieldId===$.id);L>-1&&M.getExpressions().splice(L,1)}})}function P(){l(),y(),f()}return{canAccepts:c,checkCanDeleteComponent:o,checkCanMoveComponent:d,hideNestedPaddingInDesginerView:m,getStyles:i,getPropsConfig:s,onRemoveComponent:P}}const z=u.defineComponent({name:"FComponetDesign",props:A,emits:["init","afterViewInit"],setup(a,e){const t=u.ref(),n=u.inject("designer-host-service"),r=u.inject("design-item-context"),c=se(r,n),o=te(t,r,c),d=u.computed(()=>{const m={"drag-container":!0};return J.getCustomClass(m,a==null?void 0:a.customClass)});return u.onMounted(()=>{var m,i,s,l;t.value.componentInstance=o,((i=(m=r.parent)==null?void 0:m.schema)==null?void 0:i.type)==="component-ref"&&(o.value.parent=(l=(s=r.parent)==null?void 0:s.parent)==null?void 0:l.componentInstance)}),e.expose(o.value),()=>u.createVNode("div",{ref:t,class:d.value,style:a.customStyle,"data-dragref":`${r.schema.id}-container`},[e.slots.default&&e.slots.default()])}}),le=_({id:{type:String},component:{type:String,default:""}},{$schema:"https://json-schema.org/draft/2020-12/schema",$id:"https://farris-design.gitee.io/component.schema.json",title:"component-ref",description:"A Farris Visual Component",type:"object",properties:{id:{description:"The unique identifier for a Section",type:"string"},type:{description:"The type string of Section component",type:"string",default:"component-ref"},component:{description:"",type:"string",default:""}},required:["id","type","component"]},W,G),pe={install(a){a.component(B.name,B)},register(a,e,t,n){a.component=B,e.component=O},registerDesigner(a,e){a.component=z,e.component=O,e["component-ref"]=le}};h.Component=B,h.ComponentDesign=z,h.componentDesignProps=ee,h.componentProps=A,h.default=pe,h.propsResolver=O,Object.defineProperties(h,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});