@farris/ui-vue/components/external-container/index.umd.cjs

Farris Vue, a Farris Design based Vue3 component library.

(function(l,o){typeof exports=="object"&&typeof module<"u"?o(exports,require("vue"),require("../dynamic-resolver/index.umd.js"),require("../designer-canvas/index.umd.js"),require("../common/index.umd.js"),require("../property-panel/index.umd.js"),require("../schema-selector/index.umd.js"),require("../notify/index.umd.js")):typeof define=="function"&&define.amd?define(["exports","vue","../dynamic-resolver/index.umd.js","../designer-canvas/index.umd.js","../common/index.umd.js","../property-panel/index.umd.js","../schema-selector/index.umd.js","../notify/index.umd.js"],o):(l=typeof globalThis<"u"?globalThis:l||self,o(l["external-container"]={},l.Vue,l.dynamicResolver,l.designerCanvas,l.common,l.propertyPanel,l.schemaSelector,l.notify))})(this,function(l,o,M,P,w,R,q,D){"use strict";const E=new Map([["appearance",M.resolveAppearance]]);function k(i,t,e,n){const a=e.parentComponentInstance;return a&&n&&(a.schema.type===P.DgControl["list-nav"].type?t.appearance={class:"position-relative h-100"}:t.appearance={class:"position-relative",style:"height:300px"}),t}const $={$schema:"https://json-schema.org/draft/2020-12/schema",$id:"https://farris-design.gitee.io/external-container.schema.json",title:"external-container",description:"A Farris Visual Component",type:"object",properties:{id:{description:"The unique identifier for a external-container",type:"string"},type:{description:"The type string of external-container",type:"string",default:"external-container"},appearance:{description:"",type:"object",properties:{class:{type:"string"},style:{type:"string",default:""}},default:{}},visible:{description:"",type:"boolean",default:!0},url:{description:"The url that load the schema from",type:"string"},externalComponent:{description:"The unique identifier for component",type:"ojbect",default:{}}},required:["id","type","externalComponent"]},y={customClass:{type:String,default:""},componentType:{type:String,default:""},url:{type:String,default:""},schema:{type:Object},useIsolateJs:{type:Boolean,default:!1},externalComponent:{type:Object,default:{}}},b=M.createPropsResolver(y,$,E,k),x=o.defineComponent({name:"FExternalContainer",props:y,emits:[],setup(i,t){return()=>o.createVNode("div",{class:i.customClass},[t.slots.default&&t.slots.default()])}}),U={convertFrom:(i,t)=>{var e;return(e=i.externalComponent)==null?void 0:e.name},convertTo:(i,t,e)=>{e&&(i.externalComponent||(i.externalComponent={}),Object.assign(i.externalComponent,{id:e.id,nameSpace:e.nameSpace,code:e.code,name:e.name,fileName:e.fileName,bizobjectID:e.bizobjectID,relativePath:e.relativePath,projectName:e.projectName}))}};class V extends R.BaseControlProperty{constructor(t,e){super(t,e)}getPropertyConfig(t,e){return this.propertyConfig.categories.basic=this.getBasicPropConfig(t),this.propertyConfig.categories.appearance=this.getAppearanceConfig(t),this.propertyConfig.categories.content=this.getContentConfig(),this.propertyConfig.categories.eventsEditor=this.getEventPropConfig(t),this.propertyConfig}getContentConfig(){const t=this;return o.inject("FLoadingService"),{description:"外部表单",title:"内容",properties:{externalComponent:{description:"引入的外部表单",title:"引入表单",type:"string",editor:{type:"schema-selector",title:"选择表单",requiredTip:"请选择表单",modalHeight:600,modalWidth:950,editorParams:{formBasicInfo:this.formSchemaUtils.getFormMetadataBasicInfo()},viewOptions:[{id:"recommend",title:"推荐",type:"Card",dataSource:"Recommand",pagination:!1},{id:"total",title:"全部",type:"Card",dataSource:"Total",pagination:!1}],repositoryToken:w.FormSchemaRepositorySymbol,validateFunction:e=>{if(e.id)return t.checkFormValidtion(e)}},$converter:U}}}}checkFormValidtion(t){const e=this.designerHostService.formSchemaUtils.getFormMetadataBasicInfo();return this.designerHostService.metadataService.getPickMetadata(e.relativePath,t).then(n=>{const u=JSON.parse(n==null?void 0:n.metadata.content).Contents,{templateId:d,name:C}=u.module;if(["list-component","tree-component"].includes(d))return!0;const m=`表单【${C}】不属于组件类模板，无法被导入到当前表单。`;return this.designerHostService.messagerService.warning(m),!1},n=>(this.designerHostService.exception((n==null?void 0:n.error)||`查询表单【${t.name}】失败`),!1))}getEventPropConfig(t){const e=[{label:"onCommunication",name:"通讯事件"}],n=this,a=n.eventsEditorUtils.formProperties(t,n.viewModelId,e),u={};return u[n.viewModelId]={type:"events-editor",editor:{initialData:a}},{title:"事件",hideTitle:!0,properties:u,refreshPanelAfterChanged:!0,tabId:"commands",tabName:"交互",setPropertyRelates(d,C){const m=d.propertyValue;delete t[n.viewModelId],m&&(m.setPropertyRelates=this.setPropertyRelates,n.eventsEditorUtils.saveRelatedParameters(t,n.viewModelId,m.events,m))}}}}function O(i,t){const e=i.schema;function n(){return!1}function a(){return!0}function u(){return!0}function d(){return!0}function C(){return"position:relative;padding:0 !important;border:0;"}function m(r){return new V(r,t).getPropertyConfig(e,i.componentInstance.value)}function S(){t!=null&&t.formSchemaUtils&&t.formSchemaUtils.externalFormSchema.delete(i.schema.id)}return{canAccepts:n,checkCanDeleteComponent:a,checkCanMoveComponent:u,hideNestedPaddingInDesginerView:d,getStyles:C,getPropsConfig:m,onRemoveComponent:S}}const J=o.defineComponent({name:"FImportExteranlSchema",emits:["close","submit"],setup(i,t){const e=o.inject("designer-host-service");let n;const a=o.ref(),u=new D.FNotifyService;u.globalConfig={position:"top-center"};const d=e.formSchemaUtils.getFormMetadataBasicInfo(),C=o.ref();async function m(s){const g=e.formSchemaUtils.getFormMetadataBasicInfo();return e.metadataService.getPickMetadata(g.relativePath,s).then(p=>{const c=JSON.parse(p==null?void 0:p.metadata.content).Contents,{templateId:f,name:j}=c.module;if(["list-component","tree-component"].includes(f))return!0;const v=`表单【${j}】不属于组件类模板，无法被导入到当前表单。`;return e.messagerService.warning(v),!1},p=>(e.exception((p==null?void 0:p.error)||`查询表单【${s.name}】失败`),!1))}async function S(){if(!a.value){u.warning("请选择表单");return}if(await m(a.value))return!0}function r(){var g,p;const s={id:a.value.id,nameSpace:a.value.nameSpace,code:a.value.code,name:a.value.name,fileName:a.value.fileName,bizobjectID:a.value.bizobjectID,relativePath:a.value.relativePath,projectName:a.value.projectName};t.emit("submit",s),(g=n==null?void 0:n.modalRef)!=null&&g.value.close&&((p=n==null?void 0:n.modalRef)==null||p.value.close())}function h(){var s,g;(s=n==null?void 0:n.modalRef)!=null&&s.value.close&&((g=n==null?void 0:n.modalRef)==null||g.value.close()),t.emit("close")}function F(s){a.value=s[0]}function N(){const s={formBasicInfo:d};return()=>o.createVNode(q.FSchemaSelector,{ref:C,injectSymbolToken:w.FormSchemaRepositorySymbol,"view-type":"Tabs","view-options":[{id:"recommend",title:"推荐",type:"Card",dataSource:"Recommand",pagination:!1},{id:"total",title:"全部",type:"Card",dataSource:"Total",pagination:!1}],editorParams:s,designerHostService:e,"show-footer":!0,onSelectionChange:F,"validate-function":S,onSubmit:r,onCancel:h},{default:()=>[o.createTextVNode(" ")]})}function I(s){s.stopPropagation(),a.value="",n=e.modalService.open({title:"选择表单",width:950,height:600,fitContent:!1,showButtons:!1,render:N(),enableEsc:!1,draggable:!0})}return()=>o.createVNode("div",{class:"f-import-exteranl-component-button no-drag"},[o.createVNode("div",{class:"f-import-exteranl-component-button-center",onClick:I},[o.createVNode("div",{class:"f-icon f-icon-add mr-2"},null),o.createVNode("span",null,[o.createTextVNode("引入已有表单")])])])}}),T=o.defineComponent({name:"FExternalContainerDesign",props:y,emits:[],setup(i,t){const e=o.ref(),n=o.inject("designer-host-service"),a=o.inject("design-item-context"),u=O(a,n),d=P.useDesignerComponent(e,a,u),C=o.inject("FMessageBoxService"),m=o.inject("FLoadingService"),S=n.formSchemaUtils,r=o.ref(i.externalComponent),h=o.ref(),F=o.computed(()=>{var c,f;return(f=(c=h.value)==null?void 0:c.module)==null?void 0:f.components[0]}),N=o.computed(()=>!h.value);function I(){const c={id:r.value.id,code:r.value.code,name:r.value.name,fileName:r.value.fileName,nameSpace:r.value.nameSpace,content:h.value,nameLanguage:r.value.nameLanguage};S.externalFormSchema.set(d.value.schema.id,c)}async function s(){var f;const c=n.formSchemaUtils.getFormMetadataBasicInfo();if((f=r.value)!=null&&f.id){const j=m==null?void 0:m.show();n.metadataService.getPickMetadata(c.relativePath,r.value).then(v=>{const A=JSON.parse(v==null?void 0:v.metadata.content);h.value=A.Contents,j.value.close(),I()},v=>{C.exception((v==null?void 0:v.error)||`查询表单【${r.value.name}】失败`),j.value.close()})}}o.watch(()=>i.externalComponent,c=>{!r.value||!c||JSON.stringify(r.value)!==JSON.stringify(c)?(r.value=c,s()):r.value=c},{deep:!0}),o.onMounted(()=>{e.value.componentInstance=d,h.value||s()}),t.expose(d.value);function g(){return o.createVNode(o.Fragment,null,[o.createVNode("div",{style:"position: absolute;left: 0;right: 0;bottom: 0;top: 0;z-index: 99;"},null),o.createVNode(P.FDesignerItem,{modelValue:F.value,"onUpdate:modelValue":c=>F.value=c,"complete-form-schema":h.value},null)])}function p(c){var f;d.value.schema.externalComponent=c,r.value=c,s(),(f=a==null?void 0:a.setupContext)==null||f.emit("dragEnd")}function B(){return o.createVNode(J,{onSubmit:p},null)}return()=>o.createVNode("div",{ref:e,style:"height: inherit;"},[N.value?B():g()])}}),z={install(i){i.component(x.name,x)},register(i,t){i["external-container"]=x,t["external-container"]=b},registerDesigner(i,t,e){i["external-container"]=T,t["external-container"]=b}};l.FExternalContainer=x,l.FExternalContainerDesign=T,l.default=z,l.externalContainerProps=y,l.propsResolver=b,Object.defineProperties(l,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});