UNPKG

@farris/ui-vue

Version:

Farris Vue, a Farris Design based Vue3 component library.

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