vxe-pc-ui
Version:
A vue based PC component library
1 lines • 16.6 kB
JavaScript
;Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_ui=require("../../ui"),_xeUtils=_interopRequireDefault(require("xe-utils")),_vn=require("../../ui/src/vn"),_dom=require("../../ui/src/dom"),_loading=_interopRequireDefault(require("../../loading/src/loading"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function getNodeUniqueId(){return _xeUtils.default.uniqueId("node_")}var _default=exports.default=(0,_vue.defineComponent)({name:"VxeTree",props:{data:Array,height:[String,Number],minHeight:{type:[String,Number],default:()=>(0,_ui.getConfig)().tree.minHeight},loading:Boolean,loadingConfig:Object,accordion:{type:Boolean,default:()=>(0,_ui.getConfig)().tree.accordion},childrenField:{type:String,default:()=>(0,_ui.getConfig)().tree.childrenField},valueField:{type:String,default:()=>(0,_ui.getConfig)().tree.valueField},keyField:{type:String,default:()=>(0,_ui.getConfig)().tree.keyField},parentField:{type:String,default:()=>(0,_ui.getConfig)().tree.parentField},titleField:{type:String,default:()=>(0,_ui.getConfig)().tree.titleField},hasChildField:{type:String,default:()=>(0,_ui.getConfig)().tree.hasChildField},transform:Boolean,isCurrent:Boolean,isHover:Boolean,expandAll:Boolean,showLine:{type:Boolean,default:()=>(0,_ui.getConfig)().tree.showLine},trigger:String,indent:{type:Number,default:()=>(0,_ui.getConfig)().tree.indent},showRadio:{type:Boolean,default:()=>(0,_ui.getConfig)().tree.showRadio},checkNodeKey:{type:[String,Number],default:()=>(0,_ui.getConfig)().tree.checkNodeKey},radioConfig:Object,showCheckbox:{type:Boolean,default:()=>(0,_ui.getConfig)().tree.showCheckbox},checkNodeKeys:{type:Array,default:()=>(0,_ui.getConfig)().tree.checkNodeKeys},checkboxConfig:Object,nodeConfig:Object,lazy:Boolean,toggleMethod:Function,loadMethod:Function,showIcon:{type:Boolean,default:!0},iconOpen:{type:String,default:()=>(0,_ui.getConfig)().tree.iconOpen},iconClose:{type:String,default:()=>(0,_ui.getConfig)().tree.iconClose},iconLoaded:{type:String,default:()=>(0,_ui.getConfig)().tree.iconLoaded},size:{type:String,default:()=>(0,_ui.getConfig)().tree.size||(0,_ui.getConfig)().size}},emits:["update:modelValue","update:checkNodeKey","update:checkNodeKeys","node-click","node-dblclick","current-change","radio-change","checkbox-change","load-success","load-error"],setup(O,e){const{emit:n,slots:w}=e;var t=_xeUtils.default.uniqueId();const y=(0,_ui.useSize)(O)["computeSize"],c=(0,_vue.ref)(),R=(0,_vue.reactive)({currentNode:null,nodeMaps:{},selectRadioKey:O.checkNodeKey,treeList:[],treeExpandedMaps:{},treeExpandLazyLoadedMaps:{},selectCheckboxMaps:{},indeterminateCheckboxMaps:{}}),s={},E={refElem:c},P=(0,_vue.computed)(()=>O.titleField||"title"),u=(0,_vue.computed)(()=>O.keyField||"id"),h=(0,_vue.computed)(()=>{var e=u.value;return O.valueField||e}),N=(0,_vue.computed)(()=>O.parentField||"parentId"),T=(0,_vue.computed)(()=>O.childrenField||"children"),K=(0,_vue.computed)(()=>O.hasChildField||"hasChild"),m=(0,_vue.computed)(()=>{var e=v.value["isCurrent"];return _xeUtils.default.isBoolean(e)?e:O.isCurrent}),b=(0,_vue.computed)(()=>{var e=v.value["isHover"];return _xeUtils.default.isBoolean(e)?e:O.isHover}),B=(0,_vue.computed)(()=>Object.assign({showIcon:!0},(0,_ui.getConfig)().tree.radioConfig,O.radioConfig)),j=(0,_vue.computed)(()=>Object.assign({showIcon:!0},(0,_ui.getConfig)().tree.checkboxConfig,O.checkboxConfig)),v=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().tree.nodeConfig,O.nodeConfig)),M=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().tree.loadingConfig,O.loadingConfig)),L=(0,_vue.computed)(()=>{var{height:e,minHeight:t}=O,a={};return e&&(a.height=(0,_dom.toCssUnit)(e)),t&&(a.minHeight=(0,_dom.toCssUnit)(t)),a}),U={computeRadioOpts:B,computeCheckboxOpts:j,computeNodeOpts:v},p={xID:t,props:O,context:e,internalData:s,reactData:R,getRefMaps:()=>E,getComputeMaps:()=>U},z=e=>{var t=h.value,e=_xeUtils.default.get(e,t);return _xeUtils.default.eqNull(e)?"":encodeURIComponent(e)};const a=e=>{var t=R["selectRadioKey"];return t===e};const A=e=>{var t=R["selectCheckboxMaps"];return!!t[e]};const D=e=>{var t=R["indeterminateCheckboxMaps"];return!!t[e]};const I=e=>{n("update:checkNodeKeys",e)},$=e=>{n("update:checkNodeKey",e)};const l=(e,t)=>{const a=Object.assign({},R.selectCheckboxMaps);e.forEach(e=>{t?a[e]=!0:a[e]&&delete a[e]}),R.selectCheckboxMaps=a},o=e=>{const t={};e&&e.forEach(e=>{t[e]=!0}),R.selectCheckboxMaps=t},d=(e,t,a)=>{t?a[e]||(a[e]=!0):a[e]&&delete a[e]},S=(e,t,a)=>{n(e,(0,_ui.createEvent)(a,{$tree:p},t))},g={dispatchEvent:S,clearCurrentNode(){return(R.currentNode=null,_vue.nextTick)()},getCurrentNodeId(){var e=R["currentNode"];return e?z(e):null},getCurrentNode(){var{currentNode:e,nodeMaps:t}=R;if(e){t=t[z(e)];if(t)return t.item}return null},setCurrentNodeId(e){var t=R["nodeMaps"],t=t[e];return R.currentNode=t?t.item:null,(0,_vue.nextTick)()},setCurrentNode(e){return R.currentNode=e,(0,_vue.nextTick)()},clearRadioNode(){return(R.selectRadioKey=null,_vue.nextTick)()},getRadioNodeId(){return R.selectRadioKey||null},getRadioNode(){var{selectRadioKey:e,nodeMaps:t}=R;if(e){t=t[e];if(t)return t.item}return null},setRadioNodeId(e){return R.selectRadioKey=e,(0,_vue.nextTick)()},setRadioNode:e=>(e&&(R.selectRadioKey=z(e)),(0,_vue.nextTick)()),setCheckboxNode:(e,t)=>(e&&(_xeUtils.default.isArray(e)||(e=[e]),l(e.map(e=>z(e)),t)),(0,_vue.nextTick)()),setCheckboxByNodeId:(e,t)=>(e&&(_xeUtils.default.isArray(e)||(e=[e]),l(e,t)),(0,_vue.nextTick)()),getCheckboxNodeIds(){var e=R["selectCheckboxMaps"];return Object.keys(e)},getCheckboxNodes(){const{nodeMaps:a,selectCheckboxMaps:e}=R,n=[];return _xeUtils.default.each(e,(e,t)=>{t=a[t];t&&n.push(t.item)}),n},clearCheckboxNode(){return R.selectCheckboxMaps={},(0,_vue.nextTick)()},setAllCheckboxNode(e){const t={};var a=T.value;return e&&_xeUtils.default.eachTree(R.treeList,e=>{e=z(e);t[e]=!0},{children:a}),R.selectCheckboxMaps=t,(0,_vue.nextTick)()},clearExpandNode(){return g.clearAllExpandNode()},clearAllExpandNode(){return _xeUtils.default.each(R.nodeMaps,e=>{e.treeLoaded=!1}),R.treeExpandedMaps={},(0,_vue.nextTick)()},setExpandByNodeId(e,t){const a=Object.assign({},R.treeExpandedMaps);return e&&((e=_xeUtils.default.isArray(e)?e:[e]).forEach(e=>{d(e,t,a)}),R.treeExpandedMaps=a),(0,_vue.nextTick)()},getExpandNodeIds(){var e=R["treeExpandedMaps"];return Object.keys(e)},getExpandNodes(){const{nodeMaps:a,treeExpandedMaps:e}=R,n=[];return _xeUtils.default.each(e,(e,t)=>{t=a[t];t&&n.push(t.item)}),n},setExpandNode(e,t){const a=Object.assign({},R.treeExpandedMaps);return e&&((e=_xeUtils.default.isArray(e)?e:[e]).forEach(e=>{e=z(e);d(e,t,a)}),R.treeExpandedMaps=a),(0,_vue.nextTick)()},toggleExpandByNodeId(e){const t=Object.assign({},R.treeExpandedMaps);return e&&((e=_xeUtils.default.isArray(e)?e:[e]).forEach(e=>{d(e,!t[e],t)}),R.treeExpandedMaps=t),(0,_vue.nextTick)()},toggleExpandNode(e){const t=Object.assign({},R.treeExpandedMaps);return e&&((e=_xeUtils.default.isArray(e)?e:[e]).forEach(e=>{e=z(e);d(e,!t[e],t)}),R.treeExpandedMaps=t),(0,_vue.nextTick)()},setAllExpandNode(e){const a={},n=T.value;return e&&_xeUtils.default.eachTree(R.treeList,e=>{var t=_xeUtils.default.get(e,n);t&&t.length&&(t=z(e),a[t]=!0)},{children:n}),R.treeExpandedMaps=a,(0,_vue.nextTick)()},reloadExpandNode(e){var t=O["lazy"];return t?(g.clearExpandLoaded(e),_(e)):(0,_vue.nextTick)()},clearExpandLoaded(e){var t=O["lazy"],a=R["nodeMaps"];return t&&(t=a[z(e)])&&(t.treeLoaded=!1),(0,_vue.nextTick)()},loadChildrenNode(r,e){const{lazy:t,transform:a}=O,i=R["nodeMaps"];if(!t)return Promise.resolve([]);const n=T.value,l=i[z(r)],s=l?l.level:0,c=l?l.nodes:[];return(e=>{const a=h.value;return Promise.resolve(e.map(e=>{var t,e=Object.assign({},e);return z(e)||(t=getNodeUniqueId(),_xeUtils.default.set(e,a,t)),e}))})(e).then(e=>(_xeUtils.default.eachTree(e,(e,t,a,n,o,d)=>{e=z(e);i[e]={item:r,itemIndex:-1,items:a,parent:o||l.item,nodes:c.concat(d),level:s+d.length,lineCount:0,treeLoaded:!1}},{children:n}),r[n]=e,a&&(r[n]=e),x(r),e))},isExpandByNode:e=>{var t=R["treeExpandedMaps"];return!!t[z(e)]},isCheckedByRadioNodeId:a,isCheckedByRadioNode:e=>a(z(e)),isCheckedByCheckboxNodeId:A,isIndeterminateByCheckboxNode:e=>D(z(e)),isCheckedByCheckboxNode:e=>A(z(e)),getCheckboxIndeterminateNodes(){const{treeList:e,indeterminateCheckboxMaps:t}=R,a=[];return _xeUtils.default.eachTree(e,e=>{t[z(e)]&&a.push(e)}),a}},r=e=>{var{expandAll:t,transform:a}=O,n=s["initialized"],o=u.value,d=N.value,r=T.value;R.treeList=a?_xeUtils.default.toArrayTree(e,{key:o,parentKey:d,mapChildren:r}):e?e.slice(0):[];{a=R.treeList;const i=h.value,l=(o=T.value,{});_xeUtils.default.eachTree(a,(e,t,a,n,o,d)=>{let r=z(e);r||(r=getNodeUniqueId(),_xeUtils.default.set(e,i,r)),l[r]={item:e,itemIndex:t,items:a,parent:o,nodes:d,level:d.length,lineCount:0,treeLoaded:!1}},{children:o}),R.nodeMaps=l}t&&!n&&e&&e.length&&(s.initialized=!0,p.setAllExpandNode(!0))},i=(e,n,o)=>{var t=R["treeExpandedMaps"],a=T.value,d=z(e);o.lineCount++,t[d]&&_xeUtils.default.arrayEach(e[a],(e,t,a)=>{(!n||t<a.length-1)&&i(e,!1,o)})},x=e=>{const a=R["nodeMaps"];e&&(e=z(e),e=a[e])&&_xeUtils.default.lastArrayEach(e.nodes,e=>{var t=z(e),t=a[t];t&&(t.lineCount=0,i(e,!0,t))})},X=(e,t)=>{var{showRadio:a,showCheckbox:n,trigger:o}=O,d=B.value,r=j.value;let i=!1,l=!1,s=!1,c=!1;m.value?(i=!0,((e,t)=>{e.preventDefault();const a=v.value,{currentMethod:n,trigger:o}=a,d=T.value,r=_xeUtils.default.get(t,d),i=r&&r.length;let l=!!n;if(o==="child"){if(i)return}else if(o==="parent")if(!i)return;if(n)l=!n({node:t});var s;l||(s=!0,R.currentNode=t,S("current-change",{node:t,checked:!0},e))})(e,t)):R.currentNode&&(R.currentNode=null),"node"===o&&(c=!0,F(e,t)),a&&"node"===d.trigger&&(l=!0,H(e,t)),n&&"node"===r.trigger&&(s=!0,q(e,t)),S("node-click",{node:t,triggerCurrent:i,triggerRadio:l,triggerCheckbox:s,triggerExpand:c},e)},_=d=>{var e=j.value;const r=O["loadMethod"],i=e["checkStrictly"];return new Promise(e=>{if(r){var t=Object.assign({},R.treeExpandLazyLoadedMaps),a=R["nodeMaps"];const n=z(d),o=a[n];t[n]=!0,R.treeExpandLazyLoadedMaps=t,Promise.resolve(r({$tree:p,node:d})).then(a=>{var e=R["treeExpandLazyLoadedMaps"];if(o.treeLoaded=!0,e[n]&&(e[n]=!1),a=_xeUtils.default.isArray(a)?a:[])return g.loadChildrenNode(d,a).then(e=>{var t=Object.assign({},R.treeExpandedMaps);return e.length&&!t[n]&&(t[n]=!0),R.treeExpandedMaps=t,!i&&g.isCheckedByCheckboxNodeId(n)&&l(e.map(e=>z(e)),!0),x(d),S("load-success",{node:d,data:a},new Event("load-success")),(0,_vue.nextTick)()});x(d),S("load-success",{node:d,data:a},new Event("load-success"))}).catch(e=>{var t=R["treeExpandLazyLoadedMaps"];o.treeLoaded=!1,t[n]&&(t[n]=!1),x(d),S("load-error",{node:d,data:e},new Event("load-error"))}).finally(()=>(0,_vue.nextTick)())}else e()})},G=(e,t)=>{const{lazy:n,accordion:a,toggleMethod:o}=O,{nodeMaps:d,treeExpandLazyLoadedMaps:r}=R,i=Object.assign({},R.treeExpandedMaps),l=T.value,s=K.value,c=[];let u=o?e.filter(e=>o({$tree:p,expanded:t,node:e})):e;a&&(u=u.length?[u[u.length-1]]:[],e=z(u[0]),e=d[e])&&e.items.forEach(e=>{e=z(e);i[e]&&delete i[e]});const h=[];return t?u.forEach(e=>{var t,a=z(e);i[a]||(t=d[a],n&&e[s]&&!t.treeLoaded&&!r[a]?c.push(_(e)):e[l]&&e[l].length&&(i[a]=!0,h.push(e)))}):u.forEach(e=>{var t=z(e);i[t]&&(delete i[t],h.push(e))}),R.treeExpandedMaps=i,h.forEach(x),Promise.all(c)},F=(e,t)=>{var a=O["lazy"],{treeExpandedMaps:n,treeExpandLazyLoadedMaps:o}=R,d=z(t),n=!n[d];e.stopPropagation(),a&&o[d]||G([t],n)},f=(e,o,d)=>{var t=T.value,t=_xeUtils.default.get(e,t),e=z(e);if(t&&t.length){let a=!1,n=0;t.forEach(e=>{var e=z(e),t=o[e];(t||d[e])&&(t&&n++,a=!0)}),n===t.length?(o[e]||(o[e]=!0),d[e]&&delete d[e]):(o[e]&&delete o[e],d[e]=a)}else d[e]&&delete d[e]},J=()=>{var e=R["treeList"];const l=T.value;var t=j.value["checkStrictly"];if(!t){const s=Object.assign({},R.selectCheckboxMaps),c={};_xeUtils.default.eachTree(e,(e,t,a,n,o,d)=>{var r=_xeUtils.default.get(e,l);if(r&&r.length||f(e,s,c),t===a.length-1)for(let e=d.length-2;0<=e;e--){var i=d[e];f(i,s,c)}}),R.selectCheckboxMaps=s,R.indeterminateCheckboxMaps=c}},q=(e,a)=>{e.preventDefault(),e.stopPropagation();var{checkStrictly:n,checkMethod:o}=j.value;let t=!!o;if(!(t=o?!o({node:a}):t)){const r=Object.assign({},R.selectCheckboxMaps);var o=T.value,d=z(a);let t=!1;r[d]?delete r[d]:(t=!0,r[d]=t),n||_xeUtils.default.eachTree(_xeUtils.default.get(a,o),e=>{e=z(e);t?r[e]||(r[e]=!0):r[e]&&delete r[e]},{children:o}),R.selectCheckboxMaps=r,J();d=Object.keys(R.selectCheckboxMaps);I(d),S("checkbox-change",{node:a,value:d,checked:t},e)}},H=(e,t)=>{e.preventDefault(),e.stopPropagation();var a=B.value["checkMethod"];let n=!!a;(n=a?!a({node:t}):n)||(a=z(t),R.selectRadioKey=a,$(a),S("radio-change",{node:t,value:a,checked:!0},e))};Object.assign(p,g,{});const V=a=>{var{lazy:e,showRadio:t,showCheckbox:n,showLine:o,indent:d,iconOpen:r,iconClose:i,iconLoaded:l,showIcon:s}=O,{nodeMaps:c,treeExpandedMaps:u,currentNode:h,selectRadioKey:v,treeExpandLazyLoadedMaps:p}=R,g=T.value,x=P.value,_=K.value,g=_xeUtils.default.get(a,g),f=g&&g.length,C=w.icon,k=w.title,y=w.extra,E=z(a),N=u[E],c=c[E],x=_xeUtils.default.get(a,x);const m=[];f&&u[E]&&(o&&m.push((0,_vue.h)("div",{key:"line",class:"vxe-tree--node-child-line",style:{height:`calc(${c.lineCount} * var(--vxe-ui-tree-node-height) - var(--vxe-ui-tree-node-height) / 2)`,left:(c.level+1)*(d||1)+"px"}})),g.forEach(e=>{m.push(V(e))}));let b=!1,M=(t&&(b=E==v),!1),L=(n&&(M=A(E)),!1),U=!1,I=!1;return e&&(U=!!p[E],L=a[_],I=!!c.treeLoaded),(0,_vue.h)("div",{class:["vxe-tree--node-wrapper","node--level-"+c.level],nodeid:E},[(0,_vue.h)("div",{class:["vxe-tree--node-item",{"is--current":h&&E===z(h),"is-radio--checked":b,"is-checkbox--checked":M}],style:{paddingLeft:(c.level-1)*(d||1)+"px"},onClick(e){X(e,a)},onDblclick(e){var t;e=e,t=a,S("node-dblclick",{node:t},e)}},[s||o?(0,_vue.h)("div",{class:"vxe-tree--node-item-switcher"},s&&(!e||I?f:L)?[(0,_vue.h)("div",{class:"vxe-tree--node-item-icon",onClick(e){F(e,a)}},C?C({node:a,isExpand:N}):[(0,_vue.h)("i",{class:U?l||(0,_ui.getIcon)().TREE_NODE_LOADED:N?r||(0,_ui.getIcon)().TREE_NODE_OPEN:i||(0,_ui.getIcon)().TREE_NODE_CLOSE})])]:[]):(0,_vue.createCommentVNode)(),((t,e)=>{var a=O["showRadio"],{showIcon:n,checkMethod:o,visibleMethod:d}=B.value,d=!d||d({node:t});let r=!!o;return a&&n&&d?(o&&(r=!o({node:t})),(0,_vue.h)("div",{class:["vxe-tree--radio-option",{"is--checked":e,"is--disabled":r}],onClick:e=>{r||H(e,t)}},[(0,_vue.h)("span",{class:["vxe-radio--icon",e?(0,_ui.getIcon)().RADIO_CHECKED:(0,_ui.getIcon)().RADIO_UNCHECKED]})])):(0,_vue.createCommentVNode)()})(a,b),((t,e,a)=>{var n=O["showCheckbox"],{showIcon:o,checkMethod:d,visibleMethod:r}=j.value,e=D(e),r=!r||r({node:t});let i=!!d;return n&&o&&r?(d&&(i=!d({node:t})),(0,_vue.h)("div",{class:["vxe-tree--checkbox-option",{"is--checked":a,"is--indeterminate":e,"is--disabled":i}],onClick:e=>{i||q(e,t)}},[(0,_vue.h)("span",{class:["vxe-checkbox--icon",e?(0,_ui.getIcon)().CHECKBOX_INDETERMINATE:a?(0,_ui.getIcon)().CHECKBOX_CHECKED:(0,_ui.getIcon)().CHECKBOX_UNCHECKED]})])):(0,_vue.createCommentVNode)()})(a,E,M),(0,_vue.h)("div",{class:"vxe-tree--node-item-inner"},[(0,_vue.h)("div",{class:"vxe-tree--node-item-title"},k?(0,_vn.getSlotVNs)(k({node:a,isExpand:N})):""+x),y?(0,_vue.h)("div",{class:"vxe-tree--node-item-extra"},(0,_vn.getSlotVNs)(y({node:a,isExpand:N}))):(0,_vue.createCommentVNode)()])]),f&&u[E]?(0,_vue.h)("div",{class:"vxe-tree--node-child-wrapper"},m):(0,_vue.createCommentVNode)()])};const C=(0,_vue.ref)(0),k=((0,_vue.watch)(()=>O.data?O.data.length:0,()=>{C.value++}),(0,_vue.watch)(()=>O.data,()=>{C.value++}),(0,_vue.watch)(C,()=>{r(O.data||[])}),(0,_vue.watch)(()=>O.checkNodeKey,e=>{R.selectRadioKey=e}),(0,_vue.ref)(0));return(0,_vue.watch)(()=>O.checkNodeKeys?O.checkNodeKeys.length:0,()=>{k.value++}),(0,_vue.watch)(()=>O.checkNodeKeys,()=>{k.value++}),(0,_vue.watch)(k,()=>{o(O.checkNodeKeys||[])}),(0,_vue.onUnmounted)(()=>{R.treeList=[],R.treeExpandedMaps={},R.nodeMaps={}}),r(O.data||[]),o(O.checkNodeKeys||[]),p.renderVN=()=>{var{loading:e,trigger:t,showLine:a}=O,n=y.value,o=B.value,d=j.value,r=L.value,i=M.value,l=b.value;const s=w.loading;return(0,_vue.h)("div",{ref:c,class:["vxe-tree",{["size--"+n]:n,"show--line":a,"checkbox--highlight":d.highlight,"radio--highlight":o.highlight,"node--hover":l,"node--trigger":"node"===t,"is--loading":e}],style:r},[(n=R.treeList,(0,_vue.h)("div",{class:"vxe-tree--node-list-wrapper"},n.map(e=>V(e)))),(0,_vue.h)(_loading.default,{class:"vxe-tree--loading",modelValue:e,icon:i.icon,text:i.text},s?{default:()=>s({$tree:p})}:{})])},p},render(){return this.renderVN()}});