@farris/ui-vue/components/designer-outline/index.umd.cjs

Farris Vue, a Farris Design based Vue3 component library.

(function(s,u){typeof exports=="object"&&typeof module<"u"?u(exports,require("vue"),require("../tree-view/index.umd.js"),require("../designer-canvas/index.umd.js"),require("lodash-es")):typeof define=="function"&&define.amd?define(["exports","vue","../tree-view/index.umd.js","../designer-canvas/index.umd.js","lodash-es"],u):(s=typeof globalThis<"u"?globalThis:s||self,u(s["designer-outline"]={},s.Vue,s.treeView,s.designerCanvas,s.LodashES))})(this,function(s,u,P,V,B){"use strict";const D={data:{type:Object,default:[]},selectable:{type:Boolean,default:!1},autoCheckChildren:{type:Boolean,default:!0},cascade:{type:Boolean,default:!0},showTreeNodeIcons:{type:Boolean,default:!0},showLines:{type:Boolean,default:!1},newDataItem:{type:Object,default:{}},lineColor:{type:String,default:"#9399a0"},cellHeight:{type:Number,default:28},dgControl:{type:Object,default:{}}};var h=(n=>(n.Frame="frame",n.dataGrid="data-grid",n.listView="list-view",n.form="form",n.uploader="uploader",n.calendar="calendar",n.page="page",n))(h||{});function L(n,S){const c=u.inject("designerContext"),f=c&&c.dgControl?c.dgControl:V.DgControl,N=u.ref(""),w=u.ref("");function O(e){var o,y,g,F;let i="controlIcon fd-i-Family ",t="";switch(e==null?void 0:e.type){case"form-group":{t=((o=f[e.type])==null?void 0:o.icon)||((y=e.editor)==null?void 0:y.type)||"",(g=f[e.editor.type])!=null&&g.icon&&(t=f[e.editor.type].icon);break}default:t=((F=f[e.type])==null?void 0:F.icon)||e.type}const r=`fd_pc-${t}`;return i+=r,i}function T(e,i){var o;let t=e.id;const r=i==null?void 0:i.contents;if((i==null?void 0:i.type)==="splitter"&&r&&r.length===2){const y=i.direction!=="column";e.id===((o=r[0])==null?void 0:o.id)?t=y?"左侧区域":"上方区域":t=y?"右侧区域":"下方区域"}return t}function b(e){if(e.isLikeCardContainer)return"区块";const i=e.appearance&&e.appearance.class||"",t=i.split(" ");return e.id==="page-header"&&i&&i==="f-page-header"?"页头":t.includes("f-page-header-base")?"页头容器":t.includes("f-page-header-extend")?"页头扩展容器":t.includes("f-title")?"标题容器":t.includes("f-page")?"根容器":t.includes("f-page-main")?"内容区域":t.includes("f-scrollspy-content")&&e.isScrollspyContainer?"滚动监听容器":t.includes("f-grid-is-sub")?"表格容器":t.includes("f-filter-container")?"筛选条容器":"容器"}function k(e){const{componentType:i}=e;switch(i){case h.Frame:return"根组件";case h.dataGrid:return(n==null?void 0:n.formSchemaUtils.selectNode(e,r=>r.type===(f["tree-grid"]&&f["tree-grid"].type)))?"树表格组件":"表格组件";case h.uploader:return"附件组件";case h.listView:return"列表视图组件";case h.form:return"卡片组件";case h.calendar:return"日历组件";case h.page:return e.name||"页面";default:return"组件"}}function a(e,i){const t=e.name||e.text||e.label||e.title||e.mainTitle;if(e.type!=="component"&&t&&typeof t=="string")return t.trim();switch(e.type){case"content-container":return b(e);case"splitter-pane":return T(e,i);case"component":return k(e);default:return f[e.type]&&f[e.type].name||e.id}}function l(e,i){const t=e.length?e[0]:null;if(!t)return;w.value="",N.value=t.originalId;const r=t?`${t.originalId}-design-item`:"",o=document.getElementById(r);o&&o.click(),S.emit("selectionChanged",t)}function d(e){if(!e)return;const i=`${e}-design-item`,t=document.getElementById(i);t&&t.click()}return{getIcon:O,getTitle:a,onChanged:l,currentSelectedNodeId:N,currentSelectedOutsideNodeId:w,triggerOutsideClick:d}}function R(n,S){const{getIcon:c,getTitle:f}=S;function N(a,l,d,e,i){var r;const t=(r=n.data.module)==null?void 0:r.components.find(o=>o.id===a.component);t&&w([t],l,d,e,i)}function w(a,l,d,e,i){return a.forEach(t=>{if(t.type==="component"&&(i=t.id),t.type==="component-ref"){N(t,l,d,e,i);return}const r={originalId:t.id,layer:d,originalParent:e==null?void 0:e.id,componentId:i,name:f(t,e),type:t.type,controlIcon:c(t),rawSchema:t};l.push(B.cloneDeep(r)),(t.contents||t.buttons)&&w(t.contents||t.buttons,l,d+1,t,i)}),l}function O(a){const l=[],d=a.find(r=>r.layer===0);a=a.filter(r=>r.layer!==0),l.push(d);let e=d.originalId,i=0,t=1e3;for(;a.length!==0||t===0;){const r=a.find(o=>o.originalParent===e);r?(l.push(r),e=r.originalId,a=a.filter(o=>o.originalId!==e),i=0):(i-=1,e=l.slice(i)[0].originalId),t-=1}return l}function T(a){return a.forEach((l,d)=>{l.id=(d+1).toString()}),a.forEach(l=>{var d;l.parent=((d=a.find(e=>e.originalId===l.originalParent))==null?void 0:d.id)||""}),a.forEach(l=>{l.hasChildren=a.findIndex(d=>d.parent===l.id)>0}),a}function b(a){const l={originalId:n.data.module.id,layer:0,originalParent:null,name:"页面",type:"module",controlIcon:"controlIcon fd-i-Family fd_pc-module",rawSchema:n.data.module},d=[];return a.forEach(e=>{e[0].originalParent=l.originalId,d.push(...e)}),d.unshift(l),d}function k(){const a=n.data.module?u.ref(n.data.module.components):u.ref([n.data]);if(!a.value)return;const l=[];a.value.forEach(t=>{if(t){const r=[];r.push(t);const g=w(r,[],1,null,t.id);l.push(g)}});const d=b(l),e=O(d);return T(e)}return{getData:k}}const p=u.defineComponent({name:"FDesignerOutline",props:D,emits:["outputValue","currentEvent","selectionChanged"],setup(n,S){const c=u.ref(),f=u.ref(n.selectable),N=u.ref(n.autoCheckChildren),w=u.ref(n.cascade),O=u.ref(n.showTreeNodeIcons),T=u.ref(n.showLines),b=u.ref(n.newDataItem),k=u.ref(n.lineColor),a=u.ref(n.cellHeight),l=u.ref([{field:"name",title:"",dataType:"string"}]),d=u.inject("designer-host-service"),e=L(d,S),{onChanged:i,currentSelectedNodeId:t,currentSelectedOutsideNodeId:r,triggerOutsideClick:o}=e,{getData:y}=R(n,e);let g=y();function F(){var C,x,E,v;if(g=y(),c.value&&c.value.updateDataSource){if(c.value.updateDataSource(g),r.value){(x=(C=c.value).emptyCurrentRowId)==null||x.call(C),o(r.value);return}t&&((v=(E=c.value).emptyCurrentRowId)==null||v.call(E),j({id:t.value}))}}function j(C){var x,E;if(!C&&c.value&&((E=(x=c.value).emptyCurrentRowId)==null||E.call(x)),C&&c.value&&c.value.selectItem){const v=g.find(q=>q.originalId===C.id);v?(c.value.selectRowById(v.id),t&&(t.value=v.originalId),c.value.activeRowById(v.id),r.value=""):t&&(t.value="",r.value=C.id)}}return S.expose({selectControlTreeNode:j,refreshControlTree:F}),u.onMounted(()=>{g.length&&c.value&&j({id:g[0].originalId})}),()=>u.createVNode("div",{class:"designer-control-tree"},[u.createVNode(P.FTreeView,{ref:c,data:g,columns:l.value,selectable:f.value,columnOption:{fitColumns:!0,fitMode:"expand"},autoCheckChildren:N.value,cascade:w.value,showTreeNodeIcons:O.value,showLines:T.value,newDataItem:b.value,lineColor:k.value,cellHeight:a.value,fit:!1,autoHeight:!0,iconField:"controlIcon",virtualized:!0,onSelectionChange:i},null)])}});s.ComponentType=h,s.FDesignerOutline=p,s.designerOutlineProps=D,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})});