UNPKG

vexip-ui

Version:

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

3 lines (2 loc) 9.89 kB
"use strict";const e=require("vue");require("../checkbox/index.cjs");require("../icon/index.cjs");require("../renderer/index.cjs");const M=require("@vexip-ui/config"),F=require("@vexip-ui/hooks"),C=require("@vexip-ui/utils"),Y=require("./symbol.cjs"),S=require("../icon/icon.cjs"),P=require("../checkbox/checkbox.vue2.cjs"),L=require("../renderer/renderer.cjs"),Z=["draggable","aria-disabled","aria-grabbed"],_=["aria-hidden"],ee=e.defineComponent({name:"TreeNode",inheritAttrs:!1,__name:"tree-node",props:{node:{type:Object,default:()=>({})}},setup(o){const d=o,n=e.inject(Y.TREE_STATE),t=M.useNameHelper("tree"),w=M.useIcons(),{isRtl:I}=F.useRtl(),b=e.ref(),T=e.ref(),B=e.computed(()=>d.node.parent?n.nodeStates.get(d.node.parent):void 0);F.useModifier({target:b,passive:!1,onKeyDown:(a,l)=>{n.expanding||C.decide([[()=>l.up||l.down,()=>n.handleHittingChange(l.up?"up":"down")],[()=>l.left||l.right,()=>{var s,q;const r=((s=d.node.children)==null?void 0:s.length)>0;l.right&&d.node.expanded&&r?n.handleHittingChange("down"):l.left&&(!d.node.expanded||!r)?n.handleNodeHitting((q=B.value)==null?void 0:q.el):x(l.right)}],[()=>D.value&&l.space,p],[()=>l.enter,E]],{beforeMatchAny:()=>{a.preventDefault(),a.stopPropagation()},afterMatchAny:l.resetAll})}});const g=e.ref(!n.boundAsyncLoad||d.node.loaded),$=e.ref(n.boundAsyncLoad&&d.node.loadFail),k=e.ref(!1),v=e.ref(!1),u=e.ref(!1),c=e.computed(()=>{var a;return!n.noCascaded&&((a=B.value)==null?void 0:a.disabled)||d.node.disabled}),m=e.computed(()=>{var a;return!n.noCascaded&&((a=B.value)==null?void 0:a.readonly)||d.node.readonly}),H=e.computed(()=>!d.node.matched&&(d.node.childMatched||d.node.upperMatched)),z=e.computed(()=>!!n.linkLine&&d.node.depth>0),O=e.computed(()=>{var a;return{[t.be("node")]:!0,[t.bem("node","last")]:d.node.last,[t.bem("node","focused")]:u.value,[t.bem("node","selected")]:d.node.selected,[t.bem("node","expanded")]:d.node.expanded,[t.bem("node","disabled")]:c.value,[t.bem("node","readonly")]:m.value,[t.bem("node","secondary")]:H.value,[t.bem("node","dragging")]:k.value,[t.bem("node","drag-over")]:v.value,[t.bem("node","link-line")]:z.value,[t.bem("node","no-arrow")]:!f.value,[t.bem("node","is-floor")]:n.floorSelect&&((a=d.node.children)==null?void 0:a.length),[t.bem("node","loaded")]:g.value,[t.bem("node","load-fail")]:$.value}}),A=e.computed(()=>{var s;const a=d.node.isLeaf;let l="auto",r=!1;return C.isNull(a)||a==="auto"?(l="auto",r=n.boundAsyncLoad):l=a,l==="auto"?!((s=d.node.children)!=null&&s.length||r&&!g.value):!!l}),f=e.computed(()=>C.isNull(d.node.arrow)||d.node.arrow==="auto"?n.arrow==="auto"?!A.value:n.arrow:d.node.arrow),D=e.computed(()=>{const a=d.node.checkbox;return C.isNull(a)?n.checkbox:a}),R=e.computed(()=>n.suffixCheckbox),N=e.reactive({el:b,depth:e.computed(()=>d.node.depth),disabled:c,readonly:m});e.watch([()=>n.boundAsyncLoad,()=>d.node.loaded],a=>{g.value=!a[0]||a[1]}),e.watch([()=>n.boundAsyncLoad,()=>d.node.loadFail],a=>{$.value=!a[0]||a[1]}),e.watch(()=>d.node.id,(a,l)=>{n.nodeStates.delete(l),n.nodeStates.set(a,N)}),n.nodeStates.set(d.node.id,N);let h;e.onBeforeUnmount(()=>{clearTimeout(h),n.nodeStates.set(d.node.id,N)});function i(a,l){d.node[a]=l}function j(){n.handleNodeClick(d.node),n.blockEffect&&V()}function K(a){n.handleNodeContextmenu(a,d.node)}function p(a=!d.node.checked){c.value||d.node.checkDisabled||(i("checked",a),i("partial",!1),e.nextTick(()=>{n.computeCheckedState(d.node,a)}))}async function x(a=!d.node.expanded){if(!(n.expanding||d.node.loading||c.value||d.node.expandDisabled||A.value))if(a&&n.boundAsyncLoad&&!g.value){i("loading",!0);const l=await n.handleAsyncLoad(d.node);U(l)}else i("expanded",a),a?n.handleNodeExpand(d.node):n.handleNodeReduce(d.node)}async function E(a=!d.node.selected){if(c.value||d.node.selectDisabled)return;if(n.floorSelect){await x();return}const l=!m.value&&a;(l||!n.keepSelected)&&i("selected",l),m.value||a?n.handleNodeSelect(d.node):(n.multiple||!n.keepSelected)&&n.handleNodeCancel(d.node)}function V(){n.handleLabelClick(d.node),E()}function U(a=!0){var l;i("loading",!1),i("expanded",a!==!1),a!==!1?(i("loaded",!0),i("loadFail",!1),(l=d.node.children)!=null&&l.length?n.handleNodeExpand(d.node):i("arrow",!1)):i("loadFail",!0)}function y(){return{el:b.value,arrow:T.value,node:d.node}}function G(){n.draggable&&(k.value=!0,n.handleNodeDragStart(y()))}function J(a){!n.draggable||!n.dragging||(clearTimeout(h),a.stopPropagation(),a.preventDefault(),v.value=!0,n.handleNodeDragOver(y(),a))}function Q(a){n.draggable&&(clearTimeout(h),a.preventDefault(),h=setTimeout(()=>{v.value=!1},100))}function W(a){!n.draggable||!n.dragging||(clearTimeout(h),a.stopPropagation(),a.preventDefault(),v.value=!1,n.handleNodeDrop(y()))}function X(a){!n.draggable||!n.dragging||(a.stopPropagation(),k.value=!1,n.handleNodeDragEnd(y()))}return(a,l)=>(e.openBlock(),e.createElementBlock("li",e.mergeProps(a.$attrs,{ref_key:"wrapper",ref:b,class:O.value,draggable:e.unref(n).draggable,tabindex:"-1","aria-disabled":c.value,"aria-grabbed":e.unref(n).draggable&&k.value?"true":void 0,style:{[e.unref(t).cv("depth")]:o.node.depth},onClick:e.withModifiers(j,["left"]),onContextmenu:K,onFocus:l[4]||(l[4]=r=>u.value=!0),onBlur:l[5]||(l[5]=r=>u.value=!1),onDragstart:e.withModifiers(G,["stop"]),onDragover:J,onDragleave:Q,onDragend:X,onDrop:W}),[e.renderSlot(a.$slots,"default",{data:o.node.data,node:o.node,depth:o.node.depth,focused:u.value,lineCount:0,lineIndexes:o.node.lineIndexes,toggleCheck:p,toggleExpand:x,toggleSelect:E},()=>[z.value?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.node.lineIndexes,(r,s)=>(e.openBlock(),e.createElementBlock("div",{key:s,class:e.normalizeClass([e.unref(t).be("link-line"),e.unref(t).bem("link-line","vertical"),!s&&e.unref(t).bem("link-line","first")]),style:e.normalizeStyle({[e.unref(t).cv("link-line-index")]:r}),"aria-hidden":"true"},null,6))),128)),e.createElementVNode("div",{class:e.normalizeClass([e.unref(t).be("link-line"),e.unref(t).bem("link-line","horizontal")]),"aria-hidden":"true"},null,2)],64)):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass({[e.unref(t).be("content")]:!0,[e.unref(t).bem("content","effect")]:e.unref(n).blockEffect,[e.unref(t).bem("content","disabled")]:e.unref(n).blockEffect&&(c.value||o.node.selectDisabled)})},[e.createElementVNode("span",{ref_key:"arrowEl",ref:T,class:e.normalizeClass({[e.unref(t).be("arrow")]:!0,[e.unref(t).bem("arrow","transparent")]:!o.node.loading&&!f.value,[e.unref(t).bem("arrow","expanded")]:o.node.expanded,[e.unref(t).bem("arrow","disabled")]:c.value||o.node.expandDisabled}),"aria-hidden":!o.node.loading&&!f.value,onClick:l[0]||(l[0]=e.withModifiers(r=>x(),["stop"]))},[o.node.loading?(e.openBlock(),e.createBlock(e.unref(S),e.mergeProps({key:0},e.unref(w).loading,{label:"loading"}),null,16)):e.renderSlot(a.$slots,"arrow",{key:1,data:o.node.data,node:o.node,depth:o.node.depth,focused:u.value},()=>[e.unref(n).arrowIcon?(e.openBlock(),e.createBlock(e.unref(S),{key:0,icon:e.unref(n).arrowIcon},null,8,["icon"])):(e.openBlock(),e.createBlock(e.unref(S),e.normalizeProps(e.mergeProps({key:1},e.unref(I)?e.unref(w).angleLeft:e.unref(w).angleRight)),null,16))])],10,_),D.value&&!R.value?(e.openBlock(),e.createBlock(e.unref(P),{key:0,inherit:"",class:e.normalizeClass(e.unref(t).be("checkbox")),"tab-index":-1,control:f.value,checked:o.node.checked,disabled:c.value||o.node.checkDisabled,partial:o.node.partial,onClick:l[1]||(l[1]=e.withModifiers(r=>p(),["prevent","stop"]))},null,8,["class","control","checked","disabled","partial"])):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass({[e.unref(t).be("label")]:!0,[e.unref(t).bem("label","effect")]:!e.unref(n).blockEffect,[e.unref(t).bem("label","disabled")]:!e.unref(n).blockEffect&&(c.value||o.node.selectDisabled)}),onClick:l[2]||(l[2]=r=>!e.unref(n).blockEffect&&V())},[e.unref(n).prefixRenderer||a.$slots.prefix?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(e.unref(t).be("prefix"))},[e.unref(n).prefixRenderer?(e.openBlock(),e.createBlock(e.unref(L),{key:0,renderer:e.unref(n).prefixRenderer,data:{node:o.node,depth:o.node.depth,data:o.node.data,focused:u.value}},null,8,["renderer","data"])):e.renderSlot(a.$slots,"prefix",{key:1,data:o.node.data,node:o.node,depth:o.node.depth,focused:u.value})],2)):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(e.unref(t).be("text"))},[e.unref(n).renderer?(e.openBlock(),e.createBlock(e.unref(L),{key:0,renderer:e.unref(n).renderer,data:{node:o.node,depth:o.node.depth,data:o.node.data,focused:u.value}},null,8,["renderer","data"])):e.renderSlot(a.$slots,"label",{key:1,data:o.node.data,node:o.node,depth:o.node.depth,focused:u.value},()=>[e.createTextVNode(e.toDisplayString(o.node.data[e.unref(n).labelKey]),1)])],2),e.unref(n).suffixRenderer||a.$slots.suffix?(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass(e.unref(t).be("suffix"))},[e.unref(n).suffixRenderer?(e.openBlock(),e.createBlock(e.unref(L),{key:0,renderer:e.unref(n).suffixRenderer,data:{node:o.node,depth:o.node.depth,data:o.node.data,focused:u.value}},null,8,["renderer","data"])):e.renderSlot(a.$slots,"suffix",{key:1,data:o.node.data,node:o.node,depth:o.node.depth,focused:u.value})],2)):e.createCommentVNode("",!0)],2),D.value&&R.value?(e.openBlock(),e.createBlock(e.unref(P),{key:1,inherit:"",class:e.normalizeClass([e.unref(t).be("checkbox"),e.unref(t).bem("checkbox","suffix")]),"tab-index":-1,control:f.value,checked:o.node.checked,disabled:c.value||o.node.checkDisabled,partial:o.node.partial,onClick:l[3]||(l[3]=e.withModifiers(r=>p(),["prevent","stop"]))},null,8,["class","control","checked","disabled","partial"])):e.createCommentVNode("",!0)],2)])],16,Z))}});module.exports=ee; //# sourceMappingURL=tree-node.vue2.cjs.map