amazing-tree 1.3.1 → 1.3.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +28 -21
- package/dist/amazing-tree.cjs.js +1 -1
- package/dist/amazing-tree.css +1 -1
- package/dist/amazing-tree.es.js +268 -258
- package/dist/amazing-tree.umd.js +1 -1
- package/package.json +5 -1
package/README.md
CHANGED
|
@@ -62,27 +62,34 @@ function onDrop(drag: NodeItem, target: NodeItem, type: 'prev' | 'next' | 'inner
|
|
|
62
62
|
|
|
63
63
|
**Props**
|
|
64
64
|
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
|
68
|
-
|
|
|
69
|
-
| `
|
|
70
|
-
| `
|
|
71
|
-
| `
|
|
72
|
-
| `
|
|
73
|
-
| `
|
|
74
|
-
| `
|
|
75
|
-
| `
|
|
76
|
-
| `
|
|
77
|
-
| `
|
|
78
|
-
| `
|
|
79
|
-
| `
|
|
80
|
-
| `
|
|
81
|
-
| `
|
|
82
|
-
| `
|
|
83
|
-
| `
|
|
84
|
-
| `
|
|
85
|
-
| `
|
|
65
|
+
> 类型别名:Key = `string | number`
|
|
66
|
+
|
|
67
|
+
| 属性名 | 说明 | 类型 | 默认值 | 是否可选 |
|
|
68
|
+
| --------------------- | ----------------------------------- | -------------------------------------------------------------- | ------------------------------------------------------- | -------- |
|
|
69
|
+
| `data` | 树数据源 | `T[]` | — | 否 |
|
|
70
|
+
| `props` | 字段映射 | `{ value: string; label: string; children: string }` | `{ value:'value', label:'label', children:'children' }` | 是 |
|
|
71
|
+
| `allowDrag` | 是否允许拖拽某节点 | `(node: T) => boolean` | — | 是 |
|
|
72
|
+
| `allowDrop` | 是否允许目标位置 | `(drag: T, drop: T, type: 'prev'\|'next'\|'inner') => boolean` | — | 是 |
|
|
73
|
+
| `height` | 容器高度(未传时样式回退为`100%`) | `number \| string` | — | 是 |
|
|
74
|
+
| `rowHeight` | 行高(用于虚拟滚动估计) | `number \| string` | `32` | 是 |
|
|
75
|
+
| `dropLineColor` | 拖拽前后置指示线颜色 | `string` | `'#ffd400'` | 是 |
|
|
76
|
+
| `innerDashColor` | 拖拽内部放置虚线颜色 | `string` | `'#ffd400'` | 是 |
|
|
77
|
+
| `siblingZoneRatio` | 行内前后置判定区域比例(0.05–0.49) | `number` | `0.35` | 是 |
|
|
78
|
+
| `dragStartThreshold` | 触发拖拽的最小鼠标位移阈值 | `number` | `4` | 是 |
|
|
79
|
+
| `highlightColor` | 选中行高亮色 | `string` | `'#1e71ff'` | 是 |
|
|
80
|
+
| `backgroundColor` | 背景色 | `string` | `'#1d1d24'` | 是 |
|
|
81
|
+
| `textColor` | 文本色 | `string` | `'#c8d3de'` | 是 |
|
|
82
|
+
| `hoverColor` | 悬浮色 | `string` | `'#5d90e5'` | 是 |
|
|
83
|
+
| `currentNodeKey` | 当前行的 `value` | `Key` | — | 是 |
|
|
84
|
+
| `defaultExpandedKeys` | 默认展开的节点 `value` 列表 | `Key[]` | — | 是 |
|
|
85
|
+
| `defaultExpandAll` | 是否默认全部展开 | `boolean` | `false` | 是 |
|
|
86
|
+
| `draggable` | 是否允许拖拽 | `boolean` | `false` | 是 |
|
|
87
|
+
| `emptyText` | 空状态文案 | `string` | `'暂无数据'` | 是 |
|
|
88
|
+
| `showCheckbox` | 是否显示复选框 | `boolean` | `false` | 是 |
|
|
89
|
+
| `checkStrictly` | 选择严格模式(父子不联动) | `boolean` | `false` | 是 |
|
|
90
|
+
| `defaultCheckedKeys` | 默认勾选的 `value` 列表 | `Key[]` | `[]` | 是 |
|
|
91
|
+
| `disabledChecked` | 是否禁用当前节点复选框 | `(node: T) => boolean` | — | 是 |
|
|
92
|
+
| `filterNodeMethod` | 过滤方法(返回 false 隐藏该节点) | `(value: unknown, node: T) => boolean` | — | 是 |
|
|
86
93
|
|
|
87
94
|
**Events**
|
|
88
95
|
|
package/dist/amazing-tree.cjs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("vue"),De=["onMousedown","onClick","onContextmenu"],Ve=["onClick"],Ye=["checked","indeterminate","disabled","onClick"],Fe={class:"amazing-tree-label"},Oe={key:1,class:"amazing-tree-empty"},Pe={class:"amazing-tree-empty-inner"},We=t.defineComponent({__name:"AmazingTree",props:{data:{},props:{default:()=>({value:"value",label:"label",children:"children"})},allowDrag:{},allowDrop:{},height:{default:void 0},rowHeight:{default:32},dropLineColor:{default:"#ffd400"},innerDashColor:{default:"#ffd400"},siblingZoneRatio:{default:.35},dragStartThreshold:{default:4},highlightColor:{default:"#1e71ff"},backgroundColor:{default:"#1d1d24"},textColor:{default:"#c8d3de"},hoverColor:{default:"#5d90e5"},currentNodeKey:{},defaultExpandedKeys:{},defaultExpandAll:{type:Boolean,default:!1},draggable:{type:Boolean,default:!1},emptyText:{default:"暂无数据"},showCheckbox:{type:Boolean,default:!1},checkStrictly:{type:Boolean,default:!1},defaultCheckedKeys:{default:()=>[]},disabledChecked:{},filterNodeMethod:{}},emits:["node-click","node-contextmenu","node-drop","current-change","check-change"],setup(f,{expose:J,emit:U}){const a=f,K=U,ge=t.computed(()=>a.props.value||"value"),pe=t.computed(()=>a.props.label||"label"),X=t.computed(()=>a.props.children||"children"),we=t.computed(()=>Array.isArray(a.data)?a.data.length===0:!0),w=t.ref(new Set),g=t.ref(new Set),x=t.ref(new Set),_=t.ref(null);function ae(e){return w.value.has(e)}function xe(e){w.value.has(e)?w.value.delete(e):w.value.add(e),i.value=C(a.data||[]),t.nextTick(()=>{T(),p()})}function k(e){return e[ge.value]}function S(e){const l=e[X.value];return Array.isArray(l)?l:[]}function ke(e){return g.value.has(e)}function ye(e){return x.value.has(e)}function ee(e,l){if(l?g.value.add(e):g.value.delete(e),x.value.delete(e),!a.checkStrictly){const n=ne(e,a.data||[]);if(n){const o=[n];for(;o.length;){const c=o.pop(),u=k(c);l?g.value.add(u):g.value.delete(u),x.value.delete(u);const v=S(c);for(const s of v)o.push(s)}const r=Q(e,a.data||[])||[];for(const c of r){const u=k(c),v=S(c);let s=!0,d=!1;for(const m of v){const z=k(m),q=g.value.has(z),G=x.value.has(z);(q||G)&&(d=!0),(!q||G)&&(s=!1)}v.length===0?(g.value.has(u),x.value.delete(u)):s?(g.value.add(u),x.value.delete(u)):d?(g.value.delete(u),x.value.add(u)):(g.value.delete(u),x.value.delete(u))}}}}function oe(e){g.value=new Set,x.value=new Set;for(const l of e||[])ee(l,!0)}function Ce(e,l){const n=l.target;a.disabledChecked&&a.disabledChecked(e.node)||(K("check-change",e.node,!!n.checked),ee(e.id,!!n.checked))}function C(e){const l=[];function n(o,r,c){for(let u=0;u<o.length;u++){const v=o[u],s=k(v),d=S(v),m=d.length===0;l.push({id:s,node:v,parent:r,level:c,index:u,isLeaf:m}),!m&&w.value.has(s)&&n(d,v,c+1)}}if(n(e,null,0),a.filterNodeMethod&&_.value!=null){let o=function(u){const v=k(u),s=S(u);let d=!1;for(const z of s)d=o(z)||d;const m=!!a.filterNodeMethod(_.value,u);return m&&r.add(v),d&&c.add(v),m||d};const r=new Set,c=new Set;for(const u of e)o(u);return l.filter(u=>r.has(u.id)||c.has(u.id))}return l}const h=t.ref(null),E=t.ref(0),D=t.ref(0),i=t.ref([]),N=t.reactive(new Map);function be(e){if(typeof e=="number")return e;if(typeof e=="string"){const l=e.match(/(\d+(\.\d+)?)/);return l?Number(l[1]):32}return 32}const V=be(a.rowHeight),y=t.computed(()=>{let e=0;const l=[];for(const n of i.value){const o=N.get(n.id)||V;e+=o,l.push(e)}return l}),ue=t.computed(()=>{const e=y.value;return e.length?e[e.length-1]:0});function re(e){let l=0,n=y.value.length-1,o=0;for(;l<=n;){const r=l+n>>1;y.value[r]!==void 0&&y.value[r]>=e?(o=r,n=r-1):l=r+1}return o}const H=t.ref(0),M=t.ref(0),R=t.ref(0),te=t.ref(0);function p(){if(D.value=h.value?.clientHeight||0,y.value.length===0||i.value.length===0){H.value=0,M.value=0,R.value=0,te.value=0;return}const e=re(E.value);H.value=Math.max(0,e-3);const l=i.value[H.value],n=l?N.get(l.id)||V:0,r=(y.value[H.value]??0)-n;R.value=Math.max(0,r);let c=H.value;const u=E.value+D.value+3*V;for(;c<i.value.length&&(y.value[c]??0)<u;)c++;M.value=Math.min(i.value.length,c+1);const s=(y.value[M.value-1]??0)-R.value;if(s<D.value&&M.value<i.value.length){let d=M.value,m=s;for(;m<D.value&&d<i.value.length;)d++,m=(y.value[d-1]??0)-R.value;M.value=d}te.value=Math.max(0,ue.value-R.value-((y.value[M.value-1]??0)-R.value))}t.watch([E,()=>a.data,w],()=>{i.value=C(a.data||[]),t.nextTick(T),p()}),t.onMounted(()=>{i.value=C(a.data||[]),t.nextTick(T),p(),a.defaultCheckedKeys&&a.defaultCheckedKeys.length&&oe(a.defaultCheckedKeys),h.value&&(Y=new ResizeObserver(()=>{D.value=h.value?.clientHeight||0,p()}),Y.observe(h.value))});let Y=null;t.onUnmounted(()=>{Y&&(Y.disconnect(),Y=null)});const $=t.reactive(new Map);function Se(e,l){l?$.set(e,l):$.delete(e)}function T(){let e=!1;for(const l of i.value.slice(H.value,M.value)){const n=$.get(l.id);if(n){const o=n.offsetHeight;(!N.has(l.id)||N.get(l.id)!==o)&&(N.set(l.id,o),e=!0)}}e&&p()}function Me(){E.value=h.value?.scrollTop||0,p()}const B=t.ref(!1),F=t.ref(null),L=t.ref(null),b=t.ref(null),le=t.ref(0),O=t.ref(!1),ce=t.ref(0),ie=t.ref(0),A=t.ref(null),P=t.ref(0);let I=null;function Z(){I!=null&&(cancelAnimationFrame(I),I=null)}function se(){if(!B.value||P.value===0){Z();return}const e=h.value;if(!e){Z();return}const l=e.scrollHeight-e.clientHeight,n=12;e.scrollTop=Math.max(0,Math.min(l,e.scrollTop+P.value*n)),E.value=e.scrollTop,p(),I=requestAnimationFrame(se)}function Te(){P.value!==0&&I==null&&(I=requestAnimationFrame(se)),P.value===0&&Z()}function j(e){if(e==null)return null;for(const l of i.value)if(l.id===e)return l;return null}function ze(e){const l=h.value.getBoundingClientRect(),n=e-l.top+E.value;return re(n)}function Ee(e,l){!a.draggable||l.button!==0||!(!a.allowDrag||a.allowDrag(e.node))||(F.value=e.id,le.value=l.clientY,ce.value=l.clientX,ie.value=l.clientY,O.value=!1,l.preventDefault(),window.addEventListener("mousemove",de),window.addEventListener("mouseup",fe))}function de(e){if(F.value==null)return;if(!O.value){const Le=Math.abs(e.clientX-ce.value),Ie=Math.abs(e.clientY-ie.value),he=Math.max(1,a.dragStartThreshold??4);if(Le<he&&Ie<he)return;O.value=!0,B.value=!0}le.value=e.clientY;const l=ze(e.clientY),n=i.value[Math.min(Math.max(l,0),i.value.length-1)];if(L.value=n?.id??null,!n){b.value=null;return}const o=y.value[l]??0,r=N.get(n.id)??V,c=o-r,u=h.value.getBoundingClientRect(),s=(e.clientY-u.top+E.value-c)/r,d=a.siblingZoneRatio??.35,m=Math.max(.05,Math.min(.49,d));let z="inner";s<m?z="prev":s>1-m&&(z="next");const q=j(F.value),G=a.allowDrop?!!(q&&a.allowDrop(q.node,n.node,z)):!0;b.value=G?z:null,P.value=e.clientY>u.bottom?1:e.clientY<u.top?-1:0,Te()}function Q(e,l,n=[]){for(const o of l){if(k(o)===e)return n;const r=S(o);if(r.length){const c=Q(e,r,[...n,o]);if(c)return c}}return null}function ne(e,l){if(e==null)return null;for(const n of l){if(k(n)===e)return n;const o=S(n),r=ne(e,o);if(r)return r}return null}function W(e){const l=[];for(const n of e){l.push(k(n));const o=S(n);o.length&&l.push(...W(o))}return l}function Be(e){const l=e.parent;if(l)S(l).splice(e.index,1);else{const n=a.data.findIndex(o=>k(o)===e.id);n>=0&&a.data.splice(n,1)}}function Ae(e,l,n){if(n==="inner"){Array.isArray(l.node[X.value])||(l.node[X.value]=[]),l.node[X.value].push(e),w.value.add(l.id);return}const o=l.parent;if(o){const r=S(o),c=l.index+(n==="next"?1:0);r.splice(c,0,e)}else{const r=l.index+(n==="next"?1:0);a.data.splice(r,0,e)}}function fe(){if(window.removeEventListener("mousemove",de),window.removeEventListener("mouseup",fe),Z(),!B.value){F.value=null,b.value=null,L.value=null,O.value=!1;return}const e=j(F.value),l=j(L.value),n=b.value;if(B.value=!1,O.value=!1,b.value=null,L.value=null,!e||!l||!n||a.allowDrop&&!a.allowDrop(e.node,l.node,n)||e.id===l.id)return;const o=n==="inner"?l.node:l.parent||null;if(o){const v=Q(k(o),a.data||[])||[];for(const s of v)if(k(s)===e.id)return}const r=e.node;Be(e);const c=C(a.data||[]);i.value=c;const u=j(l.id)||l;Ae(r,u,n),i.value=C(a.data||[]),t.nextTick(()=>{T(),p()}),K("node-drop",r,u.node,n)}function Ke(e,l){A.value=e.id,K("node-click",e.node,l)}function Ne(e,l){A.value=e.id,K("node-contextmenu",e.node,l)}t.watchEffect(()=>{t.nextTick(T)}),t.watch(()=>a.currentNodeKey,e=>{A.value=e??null},{immediate:!0}),t.watch(()=>a.defaultExpandedKeys,e=>{w.value=new Set(e||[]),i.value=C(a.data||[]),t.nextTick(()=>{T(),p()})},{immediate:!0}),t.watch(()=>a.defaultExpandAll,e=>{e&&(w.value=new Set(W(a.data||[])),i.value=C(a.data||[]),t.nextTick(()=>{T(),p()}))},{immediate:!0}),t.watch(()=>a.data,()=>{a.defaultExpandAll&&(w.value=new Set(W(a.data||[]))),i.value=C(a.data||[]),t.nextTick(()=>{T(),p()});const e=new Set(W(a.data||[]));g.value=new Set([...g.value].filter(l=>e.has(l))),x.value=new Set([...x.value].filter(l=>e.has(l)))},{deep:!0});function He(e){const l=Q(e,a.data||[])||[];for(const n of l)w.value.add(k(n));i.value=C(a.data||[])}function ve(e){e!=null&&(He(e),t.nextTick(()=>{const l=i.value.findIndex(u=>u.id===e);if(l<0||!h.value)return;const n=N.get(e)||V,o=(y.value[l]??0)-n,r=h.value.clientHeight,c=Math.max(0,o-Math.max(0,(r-n)/2));h.value.scrollTop=c,E.value=c,p(),t.nextTick(()=>{const u=$.get(e);if(!u||!h.value)return;const v=u.offsetLeft,s=u.offsetWidth,d=h.value.clientWidth,m=Math.max(0,v+Math.max(0,s/2)-Math.max(0,d/2));h.value.scrollLeft=m})}))}function Re(e){A.value=e??null,ve(A.value)}return J({getCurrentKey:()=>A.value,setCurrentKey:Re,scrollTo:ve,getCheckedKeys:()=>Array.from(g.value),setCheckedKeys:oe,setChecked:(e,l)=>ee(e,l),filter:e=>{_.value=e,w.value=new Set(W(a.data||[])),i.value=C(a.data||[]),t.nextTick(()=>{T(),p()})}}),t.watch(A,e=>{const l=ne(e,a.data||[]);l&&K("current-change",l)}),(e,l)=>(t.openBlock(),t.createElementBlock("div",{ref_key:"containerRef",ref:h,class:t.normalizeClass(["amazing-tree",{"is-dragging":B.value}]),style:t.normalizeStyle({height:typeof f.height=="number"?f.height+"px":f.height||"100%","--vtree-bg":f.backgroundColor,"--vtree-text":f.textColor,"--vtree-hover":f.hoverColor,"--vtree-row-height":typeof f.rowHeight=="number"?f.rowHeight+"px":f.rowHeight||"32px","--vtree-drop-line":f.dropLineColor,"--vtree-drop-inner":f.innerDashColor}),onScroll:Me},[we.value?(t.openBlock(),t.createElementBlock("div",Oe,[t.renderSlot(e.$slots,"empty",{},()=>[t.createElementVNode("div",Pe,t.toDisplayString(f.emptyText),1)],!0)])):(t.openBlock(),t.createElementBlock(t.Fragment,{key:0},[t.createElementVNode("div",{style:t.normalizeStyle({height:ue.value+"px",position:"relative",minWidth:"100%",width:"max-content"})},[t.createElementVNode("div",{style:t.normalizeStyle({height:R.value+"px"})},null,4),(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(i.value.slice(H.value,M.value),n=>(t.openBlock(),t.createElementBlock("div",{key:n.id,class:"amazing-tree-row-wrapper"},[t.createElementVNode("div",{class:t.normalizeClass(["amazing-tree-row",{"is-target-inner":B.value&&L.value===n.id&&b.value==="inner","is-active":A.value===n.id}]),style:t.normalizeStyle({paddingLeft:n.level*16+"px","--active-color":f.highlightColor}),onMousedown:o=>Ee(n,o),onClick:o=>Ke(n,o),onContextmenu:t.withModifiers(o=>Ne(n,o),["prevent"]),ref_for:!0,ref:o=>Se(n.id,o)},[t.createElementVNode("span",{class:t.normalizeClass(["amazing-tree-caret-box",{"is-leaf":n.isLeaf}]),onMousedown:l[0]||(l[0]=t.withModifiers(()=>{},["stop"])),onClick:t.withModifiers(o=>!n.isLeaf&&xe(n.id),["stop"])},[n.isLeaf?t.createCommentVNode("",!0):(t.openBlock(),t.createElementBlock("span",{key:0,class:t.normalizeClass(["amazing-tree-caret",{expanded:ae(n.id)}])},null,2))],42,Ve),f.showCheckbox?(t.openBlock(),t.createElementBlock("input",{key:0,class:"amazing-tree-checkbox",type:"checkbox",checked:ke(n.id),onMousedown:l[1]||(l[1]=t.withModifiers(()=>{},["stop"])),indeterminate:ye(n.id),disabled:a.disabledChecked?a.disabledChecked(n.node):!1,onClick:t.withModifiers(o=>Ce(n,o),["stop"])},null,40,Ye)):t.createCommentVNode("",!0),t.renderSlot(e.$slots,"default",{node:n.node,data:n.node,level:n.level,expanded:ae(n.id),isLeaf:n.isLeaf},()=>[t.createElementVNode("span",Fe,t.toDisplayString(n.node[pe.value]),1)],!0)],46,De),B.value&&L.value===n.id&&(b.value==="prev"||b.value==="next")?(t.openBlock(),t.createElementBlock("div",{key:0,class:t.normalizeClass(["amazing-tree-drop-line",{"is-prev":b.value==="prev","is-next":b.value==="next"}])},null,2)):t.createCommentVNode("",!0)]))),128)),t.createElementVNode("div",{style:t.normalizeStyle({height:te.value+"px"})},null,4)],4),B.value?(t.openBlock(),t.createElementBlock("div",{key:0,class:"amazing-tree-ghost",style:t.normalizeStyle({top:le.value+"px"})},null,4)):t.createCommentVNode("",!0)],64))],38))}}),qe=(f,J)=>{const U=f.__vccOpts||f;for(const[a,K]of J)U[a]=K;return U},me=qe(We,[["__scopeId","data-v-fc218005"]]);exports.AmazingTree=me;exports.default=me;
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("vue"),Ye=["onMousedown","onClick","onContextmenu"],Fe=["onClick"],$e=["checked","indeterminate","disabled","onClick"],Oe={class:"amazing-tree-label"},Pe={key:1,class:"amazing-tree-empty"},We={class:"amazing-tree-empty-inner"},qe=l.defineComponent({__name:"AmazingTree",props:{data:{},props:{default:()=>({value:"value",label:"label",children:"children"})},allowDrag:{},allowDrop:{},height:{default:void 0},rowHeight:{default:32},dropLineColor:{default:"#ffd400"},innerDashColor:{default:"#ffd400"},siblingZoneRatio:{default:.35},dragStartThreshold:{default:4},highlightColor:{default:"#1e71ff"},backgroundColor:{default:"#1d1d24"},textColor:{default:"#c8d3de"},hoverColor:{default:"#5d90e5"},currentNodeKey:{},defaultExpandedKeys:{},defaultExpandAll:{type:Boolean,default:!1},draggable:{type:Boolean,default:!1},emptyText:{default:"暂无数据"},showCheckbox:{type:Boolean,default:!1},checkStrictly:{type:Boolean,default:!1},defaultCheckedKeys:{default:()=>[]},disabledChecked:{},filterNodeMethod:{}},emits:["node-click","node-contextmenu","node-drop","current-change","check-change"],setup(v,{expose:ee,emit:X}){const a=v,R=X,xe=l.computed(()=>a.props.value||"value"),we=l.computed(()=>a.props.label||"label"),Z=l.computed(()=>a.props.children||"children"),ye=l.computed(()=>Array.isArray(a.data)?a.data.length===0:!0),N=l.ref(new Set),x=l.ref(new Set),p=l.ref(new Set),y=l.ref(new Set),j=l.ref(null);function re(e){return N.value.has(e.rid)||x.value.has(e.id)}function ke(e){const t=J(e);if(!t)return;const n=t.id;N.value.has(e)||x.value.has(n)?(N.value.delete(e),x.value.delete(n)):N.value.add(e),c.value=S(a.data||[]),l.nextTick(()=>{z(),w()})}function k(e){return e[xe.value]}function E(e){const t=e[Z.value];return Array.isArray(t)?t:[]}function Ce(e){return p.value.has(e)}function be(e){return y.value.has(e)}function te(e,t){if(t?p.value.add(e):p.value.delete(e),y.value.delete(e),!a.checkStrictly){const n=ae(e,a.data||[]);if(n){const o=[n];for(;o.length;){const i=o.pop(),r=k(i);t?p.value.add(r):p.value.delete(r),y.value.delete(r);const s=E(i);for(const d of s)o.push(d)}const u=_(e,a.data||[])||[];for(const i of u){const r=k(i),s=E(i);let d=!0,f=!1;for(const m of s){const g=k(m),b=p.value.has(g),F=y.value.has(g);(b||F)&&(f=!0),(!b||F)&&(d=!1)}s.length===0?(p.value.has(r),y.value.delete(r)):d?(p.value.add(r),y.value.delete(r)):f?(p.value.delete(r),y.value.add(r)):(p.value.delete(r),y.value.delete(r))}}}}function ue(e){p.value=new Set,y.value=new Set;for(const t of e||[])te(t,!0)}function Se(e,t){const n=t.target;a.disabledChecked&&a.disabledChecked(e.node)||(R("check-change",e.node,!!n.checked),te(e.id,!!n.checked))}function S(e){const t=[];function n(o,u,i,r){for(let s=0;s<o.length;s++){const d=o[s],f=k(d),m=E(d),g=m.length===0,b=r?`${r}/${s}`:`${s}`,F={rid:b,id:f,node:d,parent:u,level:i,index:s,isLeaf:g};t.push(F);const oe=N.value.has(b)||x.value.has(f);!g&&oe&&n(m,d,i+1,b)}}if(n(e,null,0,""),a.filterNodeMethod&&j.value!=null){let o=function(r){const s=k(r),d=E(r);let f=!1;for(const g of d)f=o(g)||f;const m=!!a.filterNodeMethod(j.value,r);return m&&u.add(s),f&&i.add(s),m||f};const u=new Set,i=new Set;for(const r of e)o(r);return t.filter(r=>u.has(r.id)||i.has(r.id))}return t}const h=l.ref(null),B=l.ref(0),$=l.ref(0),c=l.ref([]),H=l.reactive(new Map);function Me(e){if(typeof e=="number")return e;if(typeof e=="string"){const t=e.match(/(\d+(\.\d+)?)/);return t?Number(t[1]):32}return 32}const O=Me(a.rowHeight),C=l.computed(()=>{let e=0;const t=[];for(const n of c.value){const o=H.get(n.rid)||O;e+=o,t.push(e)}return t}),ie=l.computed(()=>{const e=C.value;return e.length?e[e.length-1]:0});function ce(e){let t=0,n=C.value.length-1,o=0;for(;t<=n;){const u=t+n>>1;C.value[u]!==void 0&&C.value[u]>=e?(o=u,n=u-1):t=u+1}return o}const L=l.ref(0),T=l.ref(0),I=l.ref(0),le=l.ref(0);function w(){if($.value=h.value?.clientHeight||0,C.value.length===0||c.value.length===0){L.value=0,T.value=0,I.value=0,le.value=0;return}const e=ce(B.value);L.value=Math.max(0,e-3);const t=c.value[L.value],n=t?H.get(t.rid)||O:0,u=(C.value[L.value]??0)-n;I.value=Math.max(0,u);let i=L.value;const r=B.value+$.value+3*O;for(;i<c.value.length&&(C.value[i]??0)<r;)i++;T.value=Math.min(c.value.length,i+1);const d=(C.value[T.value-1]??0)-I.value;if(d<$.value&&T.value<c.value.length){let f=T.value,m=d;for(;m<$.value&&f<c.value.length;)f++,m=(C.value[f-1]??0)-I.value;T.value=f}le.value=Math.max(0,ie.value-I.value-((C.value[T.value-1]??0)-I.value))}l.watch([B,()=>a.data,N,x],()=>{c.value=S(a.data||[]),l.nextTick(z),w()}),l.onMounted(()=>{c.value=S(a.data||[]),l.nextTick(z),w(),a.defaultCheckedKeys&&a.defaultCheckedKeys.length&&ue(a.defaultCheckedKeys),h.value&&(P=new ResizeObserver(()=>{$.value=h.value?.clientHeight||0,w()}),P.observe(h.value))});let P=null;l.onUnmounted(()=>{P&&(P.disconnect(),P=null)});const Q=l.reactive(new Map);function Ee(e,t){t?Q.set(e,t):Q.delete(e)}function z(){let e=!1;for(const t of c.value.slice(L.value,T.value)){const n=Q.get(t.rid);if(n){const o=n.offsetHeight;(!H.has(t.rid)||H.get(t.rid)!==o)&&(H.set(t.rid,o),e=!0)}}e&&w()}function Te(){B.value=h.value?.scrollTop||0,w()}const A=l.ref(!1),W=l.ref(null),D=l.ref(null),M=l.ref(null),ne=l.ref(0),q=l.ref(!1),se=l.ref(0),de=l.ref(0),K=l.ref(null),U=l.ref(0);let V=null;function G(){V!=null&&(cancelAnimationFrame(V),V=null)}function fe(){if(!A.value||U.value===0){G();return}const e=h.value;if(!e){G();return}const t=e.scrollHeight-e.clientHeight,n=12;e.scrollTop=Math.max(0,Math.min(t,e.scrollTop+U.value*n)),B.value=e.scrollTop,w(),V=requestAnimationFrame(fe)}function ze(){U.value!==0&&V==null&&(V=requestAnimationFrame(fe)),U.value===0&&G()}function Be(e){if(e==null)return null;for(const t of c.value)if(t.id===e)return t;return null}function J(e){if(e==null)return null;for(const t of c.value)if(t.rid===e)return t;return null}function Ae(e){const t=h.value.getBoundingClientRect(),n=e-t.top+B.value;return ce(n)}function Ke(e,t){!a.draggable||t.button!==0||!(!a.allowDrag||a.allowDrag(e.node))||(W.value=e.rid,ne.value=t.clientY,se.value=t.clientX,de.value=t.clientY,q.value=!1,t.preventDefault(),window.addEventListener("mousemove",ve),window.addEventListener("mouseup",he))}function ve(e){if(W.value==null)return;if(!q.value){const oe=Math.abs(e.clientX-se.value),Ve=Math.abs(e.clientY-de.value),pe=Math.max(1,a.dragStartThreshold??4);if(oe<pe&&Ve<pe)return;q.value=!0,A.value=!0}ne.value=e.clientY;const t=Ae(e.clientY),n=c.value[Math.min(Math.max(t,0),c.value.length-1)];if(D.value=n?.rid??null,!n){M.value=null;return}const o=C.value[t]??0,u=H.get(n.rid)??O,i=o-u,r=h.value.getBoundingClientRect(),d=(e.clientY-r.top+B.value-i)/u,f=a.siblingZoneRatio??.35,m=Math.max(.05,Math.min(.49,f));let g="inner";d<m?g="prev":d>1-m&&(g="next");const b=J(W.value),F=a.allowDrop?!!(b&&a.allowDrop(b.node,n.node,g)):!0;M.value=F?g:null,U.value=e.clientY>r.bottom?1:e.clientY<r.top?-1:0,ze()}function _(e,t,n=[]){for(const o of t){if(k(o)===e)return n;const u=E(o);if(u.length){const i=_(e,u,[...n,o]);if(i)return i}}return null}function ae(e,t){if(e==null)return null;for(const n of t){if(k(n)===e)return n;const o=E(n),u=ae(e,o);if(u)return u}return null}function Y(e){const t=[];for(const n of e){t.push(k(n));const o=E(n);o.length&&t.push(...Y(o))}return t}function Re(e){const t=e.parent;if(t)E(t).splice(e.index,1);else{const n=a.data.findIndex(o=>k(o)===e.id);n>=0&&a.data.splice(n,1)}}function Ne(e,t,n){if(n==="inner"){Array.isArray(t.node[Z.value])||(t.node[Z.value]=[]),t.node[Z.value].push(e),N.value.add(t.rid);return}const o=t.parent;if(o){const u=E(o),i=t.index+(n==="next"?1:0);u.splice(i,0,e)}else{const u=t.index+(n==="next"?1:0);a.data.splice(u,0,e)}}function he(){if(window.removeEventListener("mousemove",ve),window.removeEventListener("mouseup",he),G(),!A.value){W.value=null,M.value=null,D.value=null,q.value=!1;return}const e=J(W.value),t=J(D.value),n=M.value;if(A.value=!1,q.value=!1,M.value=null,D.value=null,!e||!t||!n||a.allowDrop&&!a.allowDrop(e.node,t.node,n)||e.id===t.id)return;const o=n==="inner"?t.node:t.parent||null;if(o){const s=_(k(o),a.data||[])||[];for(const d of s)if(k(d)===e.id)return}const u=e.node;Re(e);const i=S(a.data||[]);c.value=i;const r=Be(t.id)||t;Ne(u,r,n),c.value=S(a.data||[]),l.nextTick(()=>{z(),w()}),R("node-drop",u,r.node,n)}function He(e,t){K.value=e.id,R("node-click",e.node,t)}function Le(e,t){K.value=e.id,R("node-contextmenu",e.node,t)}l.watchEffect(()=>{l.nextTick(z)}),l.watch(()=>a.currentNodeKey,e=>{K.value=e??null},{immediate:!0}),l.watch(()=>a.defaultExpandedKeys,e=>{x.value=new Set(e||[]),c.value=S(a.data||[]),l.nextTick(()=>{z(),w()})},{immediate:!0}),l.watch(()=>a.defaultExpandAll,e=>{e&&(x.value=new Set(Y(a.data||[])),c.value=S(a.data||[]),l.nextTick(()=>{z(),w()}))},{immediate:!0}),l.watch(()=>a.data,()=>{a.defaultExpandAll&&(x.value=new Set(Y(a.data||[]))),c.value=S(a.data||[]),l.nextTick(()=>{z(),w()});const e=new Set(Y(a.data||[]));p.value=new Set([...p.value].filter(t=>e.has(t))),y.value=new Set([...y.value].filter(t=>e.has(t)))},{deep:!0});function Ie(e){const t=_(e,a.data||[])||[];for(const n of t)x.value.add(k(n));c.value=S(a.data||[])}function me(e){e!=null&&(Ie(e),l.nextTick(()=>{const t=c.value.findIndex(s=>s.id===e);if(t<0||!h.value)return;const n=c.value[t]?.rid,o=(n?H.get(n):void 0)||O,u=(C.value[t]??0)-o,i=h.value.clientHeight,r=Math.max(0,u-Math.max(0,(i-o)/2));h.value.scrollTop=r,B.value=r,w(),l.nextTick(()=>{const s=n||null,d=s?Q.get(s):null;if(!d||!h.value)return;const f=d.offsetLeft,m=d.offsetWidth,g=h.value.clientWidth,b=Math.max(0,f+Math.max(0,m/2)-Math.max(0,g/2));h.value.scrollLeft=b})}))}function De(e){K.value=e??null,me(K.value)}return ee({getCurrentKey:()=>K.value,setCurrentKey:De,scrollTo:me,getCheckedKeys:()=>Array.from(p.value),setCheckedKeys:ue,setChecked:(e,t)=>te(e,t),filter:e=>{!(e==null||typeof e=="string"&&e.trim()==="")&&a.filterNodeMethod?(j.value=e,x.value=new Set(Y(a.data||[]))):(j.value=null,a.defaultExpandAll?x.value=new Set(Y(a.data||[])):a.defaultExpandedKeys&&a.defaultExpandedKeys.length?x.value=new Set(a.defaultExpandedKeys):x.value=new Set),c.value=S(a.data||[]),l.nextTick(()=>{z(),w()})}}),l.watch(K,e=>{const t=ae(e,a.data||[]);t&&R("current-change",t)}),(e,t)=>(l.openBlock(),l.createElementBlock("div",{ref_key:"containerRef",ref:h,class:l.normalizeClass(["amazing-tree",{"is-dragging":A.value}]),style:l.normalizeStyle({height:typeof v.height=="number"?v.height+"px":v.height||"100%","--vtree-bg":v.backgroundColor,"--vtree-text":v.textColor,"--vtree-hover":v.hoverColor,"--vtree-row-height":typeof v.rowHeight=="number"?v.rowHeight+"px":v.rowHeight||"32px","--vtree-drop-line":v.dropLineColor,"--vtree-drop-inner":v.innerDashColor}),onScroll:Te},[ye.value?(l.openBlock(),l.createElementBlock("div",Pe,[l.renderSlot(e.$slots,"empty",{},()=>[l.createElementVNode("div",We,l.toDisplayString(v.emptyText),1)],!0)])):(l.openBlock(),l.createElementBlock(l.Fragment,{key:0},[l.createElementVNode("div",{style:l.normalizeStyle({height:ie.value+"px",position:"relative",minWidth:"100%",width:"max-content"})},[l.createElementVNode("div",{style:l.normalizeStyle({height:I.value+"px"})},null,4),(l.openBlock(!0),l.createElementBlock(l.Fragment,null,l.renderList(c.value.slice(L.value,T.value),n=>(l.openBlock(),l.createElementBlock("div",{key:n.rid,class:"amazing-tree-row-wrapper"},[l.createElementVNode("div",{class:l.normalizeClass(["amazing-tree-row",{"is-target-inner":A.value&&D.value===n.rid&&M.value==="inner","is-active":K.value===n.id}]),style:l.normalizeStyle({paddingLeft:n.level*16+"px","--active-color":v.highlightColor}),onMousedown:o=>Ke(n,o),onClick:o=>He(n,o),onContextmenu:l.withModifiers(o=>Le(n,o),["prevent"]),ref_for:!0,ref:o=>Ee(n.rid,o)},[l.createElementVNode("span",{class:l.normalizeClass(["amazing-tree-caret-box",{"is-leaf":n.isLeaf}]),onMousedown:t[0]||(t[0]=l.withModifiers(()=>{},["stop"])),onClick:l.withModifiers(o=>!n.isLeaf&&ke(n.rid),["stop"])},[n.isLeaf?l.createCommentVNode("",!0):(l.openBlock(),l.createElementBlock("span",{key:0,class:l.normalizeClass(["amazing-tree-caret",{expanded:re(n)}])},null,2))],42,Fe),v.showCheckbox?(l.openBlock(),l.createElementBlock("input",{key:0,class:"amazing-tree-checkbox",type:"checkbox",checked:Ce(n.id),onMousedown:t[1]||(t[1]=l.withModifiers(()=>{},["stop"])),indeterminate:be(n.id),disabled:a.disabledChecked?a.disabledChecked(n.node):!1,onClick:l.withModifiers(o=>Se(n,o),["stop"])},null,40,$e)):l.createCommentVNode("",!0),l.renderSlot(e.$slots,"default",{node:n.node,data:n.node,level:n.level,expanded:re(n),isLeaf:n.isLeaf},()=>[l.createElementVNode("span",Oe,l.toDisplayString(n.node[we.value]),1)],!0)],46,Ye),A.value&&D.value===n.rid&&(M.value==="prev"||M.value==="next")?(l.openBlock(),l.createElementBlock("div",{key:0,class:l.normalizeClass(["amazing-tree-drop-line",{"is-prev":M.value==="prev","is-next":M.value==="next"}])},null,2)):l.createCommentVNode("",!0)]))),128)),l.createElementVNode("div",{style:l.normalizeStyle({height:le.value+"px"})},null,4)],4),A.value?(l.openBlock(),l.createElementBlock("div",{key:0,class:"amazing-tree-ghost",style:l.normalizeStyle({top:ne.value+"px"})},null,4)):l.createCommentVNode("",!0)],64))],38))}}),Ue=(v,ee)=>{const X=v.__vccOpts||v;for(const[a,R]of ee)X[a]=R;return X},ge=Ue(qe,[["__scopeId","data-v-602b5fc5"]]);exports.AmazingTree=ge;exports.default=ge;
|
package/dist/amazing-tree.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.amazing-tree[data-v-
|
|
1
|
+
.amazing-tree[data-v-602b5fc5]{width:100%;overflow:auto;position:relative;background:var(--vtree-bg);color:var(--vtree-text);scrollbar-width:thin;scrollbar-color:rgba(144,147,153,.3) transparent;cursor:pointer;--vtree-primary: #409eff;--vtree-checkbox-bg: #1d1d24;--vtree-checkbox-border: #4c4d4f;--vtree-checkbox-hover-border: #8d8e91;--vtree-checkbox-disabled-bg: #2c2f33;--vtree-checkbox-disabled-border: #5c5f63;--vtree-checkbox-check: #ffffff;--vtree-checkbox-check-disabled: #cfd3dc}.amazing-tree.is-dragging[data-v-602b5fc5],.amazing-tree.is-dragging[data-v-602b5fc5] *{-webkit-user-select:none;user-select:none}.amazing-tree[data-v-602b5fc5] *{cursor:pointer}.amazing-tree input[type=checkbox][data-v-602b5fc5]:disabled{cursor:not-allowed}.amazing-tree .amazing-tree-checkbox[data-v-602b5fc5]{-webkit-appearance:none;appearance:none;position:relative;width:14px;height:14px;border:1px solid var(--vtree-checkbox-border);background:var(--vtree-checkbox-bg);border-radius:2px;outline:none;transition:border-color .12s ease,background-color .12s ease,box-shadow .12s ease;vertical-align:middle;margin-right:6px}.amazing-tree .amazing-tree-checkbox[data-v-602b5fc5]:not(:disabled):hover{border-color:var(--vtree-checkbox-hover-border)}.amazing-tree .amazing-tree-checkbox[data-v-602b5fc5]:focus-visible{box-shadow:0 0 0 2px #409eff33}.amazing-tree .amazing-tree-checkbox[data-v-602b5fc5]:checked{background:var(--vtree-primary);border-color:var(--vtree-primary)}.amazing-tree .amazing-tree-checkbox[data-v-602b5fc5]:checked:after{content:"";position:absolute;left:3px;top:0;width:4px;height:8px;border:2px solid var(--vtree-checkbox-check);border-top:0;border-left:0;transform:rotate(45deg)}.amazing-tree .amazing-tree-checkbox[data-v-602b5fc5]:indeterminate{background:var(--vtree-primary);border-color:var(--vtree-primary)}.amazing-tree .amazing-tree-checkbox[data-v-602b5fc5]:indeterminate:after{content:"";position:absolute;left:2px;top:5px;width:10px;height:2px;background:var(--vtree-checkbox-check);border-radius:1px}.amazing-tree .amazing-tree-checkbox[data-v-602b5fc5]:disabled{background:var(--vtree-checkbox-disabled-bg);border-color:var(--vtree-checkbox-disabled-border)}.amazing-tree .amazing-tree-checkbox[data-v-602b5fc5]:disabled:checked:after{border-color:var(--vtree-checkbox-check-disabled)}.amazing-tree .amazing-tree-checkbox[data-v-602b5fc5]:disabled:indeterminate:after{background:var(--vtree-checkbox-check-disabled)}.amazing-tree .amazing-tree-row-wrapper[data-v-602b5fc5]{position:relative}.amazing-tree .amazing-tree-row-wrapper .amazing-tree-drop-line[data-v-602b5fc5]{position:absolute;left:0;right:0;height:0;border-top:2px solid var(--vtree-drop-line, #ffd400)}.amazing-tree .amazing-tree-row-wrapper .amazing-tree-drop-line.is-prev[data-v-602b5fc5]{top:0}.amazing-tree .amazing-tree-row-wrapper .amazing-tree-drop-line.is-next[data-v-602b5fc5]{bottom:0}.amazing-tree .amazing-tree-row[data-v-602b5fc5]{display:flex;align-items:center;gap:4px;box-sizing:border-box;position:relative;min-height:var(--vtree-row-height, 32px);line-height:var(--vtree-row-height, 32px);padding:0 8px;white-space:nowrap}.amazing-tree .amazing-tree-row[data-v-602b5fc5]:hover{background:var(--vtree-hover)}.amazing-tree .amazing-tree-row.is-active[data-v-602b5fc5],.amazing-tree .amazing-tree-row.is-active[data-v-602b5fc5]:hover{background:var(--active-color)}.amazing-tree .amazing-tree-row.is-target-inner[data-v-602b5fc5]:before,.amazing-tree .amazing-tree-row.is-target-inner[data-v-602b5fc5]:after{content:"";position:absolute;left:0;right:0;pointer-events:none}.amazing-tree .amazing-tree-row.is-target-inner[data-v-602b5fc5]:before{top:0;border-top:2px dashed var(--vtree-drop-inner, #ffd400)}.amazing-tree .amazing-tree-row.is-target-inner[data-v-602b5fc5]:after{bottom:0;border-bottom:2px dashed var(--vtree-drop-inner, #ffd400)}.amazing-tree .amazing-tree-row .amazing-tree-caret-box[data-v-602b5fc5]{display:inline-flex;align-items:center;justify-content:center;height:100%;aspect-ratio:1/1;min-width:16px;margin-right:4px;cursor:pointer}.amazing-tree .amazing-tree-row .amazing-tree-caret-box.is-leaf[data-v-602b5fc5]{pointer-events:none}.amazing-tree .amazing-tree-row .amazing-tree-caret[data-v-602b5fc5]{display:block;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid #909399;transform:rotate(-90deg);transition:transform .1s linear}.amazing-tree .amazing-tree-row .amazing-tree-caret.expanded[data-v-602b5fc5]{transform:rotate(0)}.amazing-tree .amazing-tree-row .amazing-tree-label[data-v-602b5fc5]{color:inherit}.amazing-tree .amazing-tree-ghost[data-v-602b5fc5]{position:fixed;left:16px;width:120px;height:var(--vtree-row-height, 32px);background:#409eff33;border:1px solid #409eff;pointer-events:none}.amazing-tree .amazing-tree-empty[data-v-602b5fc5]{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.amazing-tree .amazing-tree-empty[data-v-602b5fc5]>*{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.amazing-tree .amazing-tree-empty .amazing-tree-empty-inner[data-v-602b5fc5]{color:var(--vtree-text)}[data-v-602b5fc5] .amazing-tree::-webkit-scrollbar{width:8px;height:8px}[data-v-602b5fc5] .amazing-tree::-webkit-scrollbar-track{background:transparent}[data-v-602b5fc5] .amazing-tree::-webkit-scrollbar-thumb{background-color:#9093994d;border-radius:4px}[data-v-602b5fc5] .amazing-tree::-webkit-scrollbar-thumb:hover{background-color:#90939980}
|
package/dist/amazing-tree.es.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
const
|
|
1
|
+
import { defineComponent as Je, computed as U, ref as d, reactive as Ke, watch as X, nextTick as S, onMounted as _e, onUnmounted as et, watchEffect as tt, createElementBlock as R, openBlock as T, normalizeStyle as q, normalizeClass as ee, Fragment as ze, createElementVNode as $, createCommentVNode as se, renderList as nt, withModifiers as te, renderSlot as Ee, toDisplayString as Re } from "vue";
|
|
2
|
+
const lt = ["onMousedown", "onClick", "onContextmenu"], at = ["onClick"], ot = ["checked", "indeterminate", "disabled", "onClick"], ut = { class: "amazing-tree-label" }, it = {
|
|
3
3
|
key: 1,
|
|
4
4
|
class: "amazing-tree-empty"
|
|
5
|
-
},
|
|
5
|
+
}, rt = { class: "amazing-tree-empty-inner" }, st = /* @__PURE__ */ Je({
|
|
6
6
|
__name: "AmazingTree",
|
|
7
7
|
props: {
|
|
8
8
|
data: {},
|
|
@@ -31,76 +31,81 @@ const tt = ["onMousedown", "onClick", "onContextmenu"], nt = ["onClick"], lt = [
|
|
|
31
31
|
filterNodeMethod: {}
|
|
32
32
|
},
|
|
33
33
|
emits: ["node-click", "node-contextmenu", "node-drop", "current-change", "check-change"],
|
|
34
|
-
setup(
|
|
35
|
-
const l =
|
|
36
|
-
function
|
|
37
|
-
return
|
|
38
|
-
}
|
|
39
|
-
function
|
|
40
|
-
|
|
41
|
-
|
|
34
|
+
setup(v, { expose: ce, emit: ne }) {
|
|
35
|
+
const l = v, B = ne, Te = U(() => l.props.value || "value"), He = U(() => l.props.label || "label"), le = U(() => l.props.children || "children"), Le = U(() => Array.isArray(l.data) ? l.data.length === 0 : !0), D = d(/* @__PURE__ */ new Set()), x = d(/* @__PURE__ */ new Set()), p = d(/* @__PURE__ */ new Set()), y = d(/* @__PURE__ */ new Set()), ae = d(null);
|
|
36
|
+
function pe(e) {
|
|
37
|
+
return D.value.has(e.rid) || x.value.has(e.id);
|
|
38
|
+
}
|
|
39
|
+
function Ie(e) {
|
|
40
|
+
const t = ie(e);
|
|
41
|
+
if (!t) return;
|
|
42
|
+
const n = t.id;
|
|
43
|
+
D.value.has(e) || x.value.has(n) ? (D.value.delete(e), x.value.delete(n)) : D.value.add(e), r.value = M(l.data || []), S(() => {
|
|
44
|
+
E(), w();
|
|
42
45
|
});
|
|
43
46
|
}
|
|
44
|
-
function
|
|
45
|
-
return e[
|
|
47
|
+
function k(e) {
|
|
48
|
+
return e[Te.value];
|
|
46
49
|
}
|
|
47
|
-
function
|
|
48
|
-
const t = e[
|
|
50
|
+
function K(e) {
|
|
51
|
+
const t = e[le.value];
|
|
49
52
|
return Array.isArray(t) ? t : [];
|
|
50
53
|
}
|
|
51
|
-
function
|
|
54
|
+
function Be(e) {
|
|
52
55
|
return p.value.has(e);
|
|
53
56
|
}
|
|
54
|
-
function
|
|
55
|
-
return
|
|
57
|
+
function De(e) {
|
|
58
|
+
return y.value.has(e);
|
|
56
59
|
}
|
|
57
|
-
function
|
|
58
|
-
if (t ? p.value.add(e) : p.value.delete(e),
|
|
59
|
-
const n =
|
|
60
|
+
function de(e, t) {
|
|
61
|
+
if (t ? p.value.add(e) : p.value.delete(e), y.value.delete(e), !l.checkStrictly) {
|
|
62
|
+
const n = he(e, l.data || []);
|
|
60
63
|
if (n) {
|
|
61
64
|
const a = [n];
|
|
62
65
|
for (; a.length; ) {
|
|
63
|
-
const i = a.pop(), o =
|
|
64
|
-
t ? p.value.add(o) : p.value.delete(o),
|
|
65
|
-
const
|
|
66
|
-
for (const c of
|
|
66
|
+
const i = a.pop(), o = k(i);
|
|
67
|
+
t ? p.value.add(o) : p.value.delete(o), y.value.delete(o);
|
|
68
|
+
const s = K(i);
|
|
69
|
+
for (const c of s) a.push(c);
|
|
67
70
|
}
|
|
68
|
-
const u =
|
|
71
|
+
const u = re(e, l.data || []) || [];
|
|
69
72
|
for (const i of u) {
|
|
70
|
-
const o =
|
|
71
|
-
let c = !0,
|
|
72
|
-
for (const g of
|
|
73
|
-
const
|
|
74
|
-
(
|
|
73
|
+
const o = k(i), s = K(i);
|
|
74
|
+
let c = !0, f = !1;
|
|
75
|
+
for (const g of s) {
|
|
76
|
+
const m = k(g), b = p.value.has(m), V = y.value.has(m);
|
|
77
|
+
(b || V) && (f = !0), (!b || V) && (c = !1);
|
|
75
78
|
}
|
|
76
|
-
|
|
79
|
+
s.length === 0 ? (p.value.has(o), y.value.delete(o)) : c ? (p.value.add(o), y.value.delete(o)) : f ? (p.value.delete(o), y.value.add(o)) : (p.value.delete(o), y.value.delete(o));
|
|
77
80
|
}
|
|
78
81
|
}
|
|
79
82
|
}
|
|
80
83
|
}
|
|
81
|
-
function
|
|
82
|
-
p.value = /* @__PURE__ */ new Set(),
|
|
83
|
-
for (const t of e || [])
|
|
84
|
+
function me(e) {
|
|
85
|
+
p.value = /* @__PURE__ */ new Set(), y.value = /* @__PURE__ */ new Set();
|
|
86
|
+
for (const t of e || []) de(t, !0);
|
|
84
87
|
}
|
|
85
|
-
function
|
|
88
|
+
function Ye(e, t) {
|
|
86
89
|
const n = t.target;
|
|
87
|
-
l.disabledChecked && l.disabledChecked(e.node) || (
|
|
90
|
+
l.disabledChecked && l.disabledChecked(e.node) || (B("check-change", e.node, !!n.checked), de(e.id, !!n.checked));
|
|
88
91
|
}
|
|
89
|
-
function
|
|
92
|
+
function M(e) {
|
|
90
93
|
const t = [];
|
|
91
|
-
function n(a, u, i) {
|
|
92
|
-
for (let
|
|
93
|
-
const
|
|
94
|
-
t.push(
|
|
94
|
+
function n(a, u, i, o) {
|
|
95
|
+
for (let s = 0; s < a.length; s++) {
|
|
96
|
+
const c = a[s], f = k(c), g = K(c), m = g.length === 0, b = o ? `${o}/${s}` : `${s}`, V = { rid: b, id: f, node: c, parent: u, level: i, index: s, isLeaf: m };
|
|
97
|
+
t.push(V);
|
|
98
|
+
const ge = D.value.has(b) || x.value.has(f);
|
|
99
|
+
!m && ge && n(g, c, i + 1, b);
|
|
95
100
|
}
|
|
96
101
|
}
|
|
97
|
-
if (n(e, null, 0), l.filterNodeMethod &&
|
|
102
|
+
if (n(e, null, 0, ""), l.filterNodeMethod && ae.value != null) {
|
|
98
103
|
let a = function(o) {
|
|
99
|
-
const
|
|
100
|
-
let
|
|
101
|
-
for (const
|
|
102
|
-
const g = !!l.filterNodeMethod(
|
|
103
|
-
return g && u.add(
|
|
104
|
+
const s = k(o), c = K(o);
|
|
105
|
+
let f = !1;
|
|
106
|
+
for (const m of c) f = a(m) || f;
|
|
107
|
+
const g = !!l.filterNodeMethod(ae.value, o);
|
|
108
|
+
return g && u.add(s), f && i.add(s), g || f;
|
|
104
109
|
};
|
|
105
110
|
const u = /* @__PURE__ */ new Set(), i = /* @__PURE__ */ new Set();
|
|
106
111
|
for (const o of e) a(o);
|
|
@@ -108,8 +113,8 @@ const tt = ["onMousedown", "onClick", "onContextmenu"], nt = ["onClick"], lt = [
|
|
|
108
113
|
}
|
|
109
114
|
return t;
|
|
110
115
|
}
|
|
111
|
-
const h =
|
|
112
|
-
function
|
|
116
|
+
const h = d(null), H = d(0), Z = d(0), r = d([]), Y = Ke(/* @__PURE__ */ new Map());
|
|
117
|
+
function Ne(e) {
|
|
113
118
|
if (typeof e == "number") return e;
|
|
114
119
|
if (typeof e == "string") {
|
|
115
120
|
const t = e.match(/(\d+(\.\d+)?)/);
|
|
@@ -117,367 +122,372 @@ const tt = ["onMousedown", "onClick", "onContextmenu"], nt = ["onClick"], lt = [
|
|
|
117
122
|
}
|
|
118
123
|
return 32;
|
|
119
124
|
}
|
|
120
|
-
const
|
|
125
|
+
const Q = Ne(l.rowHeight), C = U(() => {
|
|
121
126
|
let e = 0;
|
|
122
127
|
const t = [];
|
|
123
128
|
for (const n of r.value) {
|
|
124
|
-
const a =
|
|
129
|
+
const a = Y.get(n.rid) || Q;
|
|
125
130
|
e += a, t.push(e);
|
|
126
131
|
}
|
|
127
132
|
return t;
|
|
128
|
-
}),
|
|
129
|
-
const e =
|
|
133
|
+
}), xe = U(() => {
|
|
134
|
+
const e = C.value;
|
|
130
135
|
return e.length ? e[e.length - 1] : 0;
|
|
131
136
|
});
|
|
132
|
-
function
|
|
133
|
-
let t = 0, n =
|
|
137
|
+
function we(e) {
|
|
138
|
+
let t = 0, n = C.value.length - 1, a = 0;
|
|
134
139
|
for (; t <= n; ) {
|
|
135
140
|
const u = t + n >> 1;
|
|
136
|
-
|
|
141
|
+
C.value[u] !== void 0 && C.value[u] >= e ? (a = u, n = u - 1) : t = u + 1;
|
|
137
142
|
}
|
|
138
143
|
return a;
|
|
139
144
|
}
|
|
140
|
-
const
|
|
141
|
-
function
|
|
142
|
-
if (
|
|
143
|
-
|
|
145
|
+
const N = d(0), z = d(0), F = d(0), fe = d(0);
|
|
146
|
+
function w() {
|
|
147
|
+
if (Z.value = h.value?.clientHeight || 0, C.value.length === 0 || r.value.length === 0) {
|
|
148
|
+
N.value = 0, z.value = 0, F.value = 0, fe.value = 0;
|
|
144
149
|
return;
|
|
145
150
|
}
|
|
146
|
-
const e =
|
|
147
|
-
|
|
148
|
-
const t = r.value[
|
|
149
|
-
|
|
150
|
-
let i =
|
|
151
|
-
const o =
|
|
152
|
-
for (; i < r.value.length && (
|
|
153
|
-
|
|
154
|
-
const c = (
|
|
155
|
-
if (c <
|
|
156
|
-
let
|
|
157
|
-
for (; g <
|
|
158
|
-
|
|
159
|
-
|
|
151
|
+
const e = we(H.value);
|
|
152
|
+
N.value = Math.max(0, e - 3);
|
|
153
|
+
const t = r.value[N.value], n = t ? Y.get(t.rid) || Q : 0, u = (C.value[N.value] ?? 0) - n;
|
|
154
|
+
F.value = Math.max(0, u);
|
|
155
|
+
let i = N.value;
|
|
156
|
+
const o = H.value + Z.value + 3 * Q;
|
|
157
|
+
for (; i < r.value.length && (C.value[i] ?? 0) < o; ) i++;
|
|
158
|
+
z.value = Math.min(r.value.length, i + 1);
|
|
159
|
+
const c = (C.value[z.value - 1] ?? 0) - F.value;
|
|
160
|
+
if (c < Z.value && z.value < r.value.length) {
|
|
161
|
+
let f = z.value, g = c;
|
|
162
|
+
for (; g < Z.value && f < r.value.length; )
|
|
163
|
+
f++, g = (C.value[f - 1] ?? 0) - F.value;
|
|
164
|
+
z.value = f;
|
|
160
165
|
}
|
|
161
|
-
|
|
162
|
-
}
|
|
163
|
-
|
|
164
|
-
r.value =
|
|
165
|
-
}),
|
|
166
|
-
r.value =
|
|
167
|
-
|
|
168
|
-
}),
|
|
166
|
+
fe.value = Math.max(0, xe.value - F.value - ((C.value[z.value - 1] ?? 0) - F.value));
|
|
167
|
+
}
|
|
168
|
+
X([H, () => l.data, D, x], () => {
|
|
169
|
+
r.value = M(l.data || []), S(E), w();
|
|
170
|
+
}), _e(() => {
|
|
171
|
+
r.value = M(l.data || []), S(E), w(), l.defaultCheckedKeys && l.defaultCheckedKeys.length && me(l.defaultCheckedKeys), h.value && (j = new ResizeObserver(() => {
|
|
172
|
+
Z.value = h.value?.clientHeight || 0, w();
|
|
173
|
+
}), j.observe(h.value));
|
|
169
174
|
});
|
|
170
|
-
let
|
|
171
|
-
|
|
172
|
-
|
|
175
|
+
let j = null;
|
|
176
|
+
et(() => {
|
|
177
|
+
j && (j.disconnect(), j = null);
|
|
173
178
|
});
|
|
174
|
-
const
|
|
175
|
-
function
|
|
176
|
-
t ?
|
|
179
|
+
const oe = Ke(/* @__PURE__ */ new Map());
|
|
180
|
+
function Fe(e, t) {
|
|
181
|
+
t ? oe.set(e, t) : oe.delete(e);
|
|
177
182
|
}
|
|
178
|
-
function
|
|
183
|
+
function E() {
|
|
179
184
|
let e = !1;
|
|
180
|
-
for (const t of r.value.slice(
|
|
181
|
-
const n =
|
|
185
|
+
for (const t of r.value.slice(N.value, z.value)) {
|
|
186
|
+
const n = oe.get(t.rid);
|
|
182
187
|
if (n) {
|
|
183
188
|
const a = n.offsetHeight;
|
|
184
|
-
(!
|
|
189
|
+
(!Y.has(t.rid) || Y.get(t.rid) !== a) && (Y.set(t.rid, a), e = !0);
|
|
185
190
|
}
|
|
186
191
|
}
|
|
187
|
-
e &&
|
|
192
|
+
e && w();
|
|
188
193
|
}
|
|
189
|
-
function
|
|
190
|
-
|
|
194
|
+
function $e() {
|
|
195
|
+
H.value = h.value?.scrollTop || 0, w();
|
|
191
196
|
}
|
|
192
|
-
const L =
|
|
193
|
-
let
|
|
194
|
-
function
|
|
195
|
-
|
|
197
|
+
const L = d(!1), G = d(null), W = d(null), A = d(null), ve = d(0), J = d(!1), ye = d(0), ke = d(0), I = d(null), _ = d(0);
|
|
198
|
+
let O = null;
|
|
199
|
+
function ue() {
|
|
200
|
+
O != null && (cancelAnimationFrame(O), O = null);
|
|
196
201
|
}
|
|
197
|
-
function
|
|
198
|
-
if (!L.value ||
|
|
199
|
-
|
|
202
|
+
function Ce() {
|
|
203
|
+
if (!L.value || _.value === 0) {
|
|
204
|
+
ue();
|
|
200
205
|
return;
|
|
201
206
|
}
|
|
202
207
|
const e = h.value;
|
|
203
208
|
if (!e) {
|
|
204
|
-
|
|
209
|
+
ue();
|
|
205
210
|
return;
|
|
206
211
|
}
|
|
207
212
|
const t = e.scrollHeight - e.clientHeight, n = 12;
|
|
208
|
-
e.scrollTop = Math.max(0, Math.min(t, e.scrollTop +
|
|
213
|
+
e.scrollTop = Math.max(0, Math.min(t, e.scrollTop + _.value * n)), H.value = e.scrollTop, w(), O = requestAnimationFrame(Ce);
|
|
209
214
|
}
|
|
210
|
-
function
|
|
211
|
-
|
|
215
|
+
function We() {
|
|
216
|
+
_.value !== 0 && O == null && (O = requestAnimationFrame(Ce)), _.value === 0 && ue();
|
|
212
217
|
}
|
|
213
|
-
function
|
|
218
|
+
function Oe(e) {
|
|
214
219
|
if (e == null) return null;
|
|
215
220
|
for (const t of r.value) if (t.id === e) return t;
|
|
216
221
|
return null;
|
|
217
222
|
}
|
|
218
|
-
function
|
|
219
|
-
|
|
220
|
-
|
|
223
|
+
function ie(e) {
|
|
224
|
+
if (e == null) return null;
|
|
225
|
+
for (const t of r.value) if (t.rid === e) return t;
|
|
226
|
+
return null;
|
|
227
|
+
}
|
|
228
|
+
function Pe(e) {
|
|
229
|
+
const t = h.value.getBoundingClientRect(), n = e - t.top + H.value;
|
|
230
|
+
return we(n);
|
|
221
231
|
}
|
|
222
|
-
function
|
|
223
|
-
!l.draggable || t.button !== 0 || !(!l.allowDrag || l.allowDrag(e.node)) || (
|
|
232
|
+
function Ve(e, t) {
|
|
233
|
+
!l.draggable || t.button !== 0 || !(!l.allowDrag || l.allowDrag(e.node)) || (G.value = e.rid, ve.value = t.clientY, ye.value = t.clientX, ke.value = t.clientY, J.value = !1, t.preventDefault(), window.addEventListener("mousemove", be), window.addEventListener("mouseup", Se));
|
|
224
234
|
}
|
|
225
|
-
function
|
|
226
|
-
if (
|
|
227
|
-
if (!
|
|
228
|
-
const
|
|
229
|
-
if (
|
|
230
|
-
|
|
235
|
+
function be(e) {
|
|
236
|
+
if (G.value == null) return;
|
|
237
|
+
if (!J.value) {
|
|
238
|
+
const ge = Math.abs(e.clientX - ye.value), Ge = Math.abs(e.clientY - ke.value), Ae = Math.max(1, l.dragStartThreshold ?? 4);
|
|
239
|
+
if (ge < Ae && Ge < Ae) return;
|
|
240
|
+
J.value = !0, L.value = !0;
|
|
231
241
|
}
|
|
232
|
-
|
|
233
|
-
const t =
|
|
234
|
-
if (
|
|
235
|
-
|
|
242
|
+
ve.value = e.clientY;
|
|
243
|
+
const t = Pe(e.clientY), n = r.value[Math.min(Math.max(t, 0), r.value.length - 1)];
|
|
244
|
+
if (W.value = n?.rid ?? null, !n) {
|
|
245
|
+
A.value = null;
|
|
236
246
|
return;
|
|
237
247
|
}
|
|
238
|
-
const a =
|
|
239
|
-
let
|
|
240
|
-
c < g ?
|
|
241
|
-
const
|
|
242
|
-
|
|
248
|
+
const a = C.value[t] ?? 0, u = Y.get(n.rid) ?? Q, i = a - u, o = h.value.getBoundingClientRect(), c = (e.clientY - o.top + H.value - i) / u, f = l.siblingZoneRatio ?? 0.35, g = Math.max(0.05, Math.min(0.49, f));
|
|
249
|
+
let m = "inner";
|
|
250
|
+
c < g ? m = "prev" : c > 1 - g && (m = "next");
|
|
251
|
+
const b = ie(G.value), V = l.allowDrop ? !!(b && l.allowDrop(b.node, n.node, m)) : !0;
|
|
252
|
+
A.value = V ? m : null, _.value = e.clientY > o.bottom ? 1 : e.clientY < o.top ? -1 : 0, We();
|
|
243
253
|
}
|
|
244
|
-
function
|
|
254
|
+
function re(e, t, n = []) {
|
|
245
255
|
for (const a of t) {
|
|
246
|
-
if (
|
|
247
|
-
const u =
|
|
256
|
+
if (k(a) === e) return n;
|
|
257
|
+
const u = K(a);
|
|
248
258
|
if (u.length) {
|
|
249
|
-
const i =
|
|
259
|
+
const i = re(e, u, [...n, a]);
|
|
250
260
|
if (i) return i;
|
|
251
261
|
}
|
|
252
262
|
}
|
|
253
263
|
return null;
|
|
254
264
|
}
|
|
255
|
-
function
|
|
265
|
+
function he(e, t) {
|
|
256
266
|
if (e == null) return null;
|
|
257
267
|
for (const n of t) {
|
|
258
|
-
if (
|
|
259
|
-
const a =
|
|
268
|
+
if (k(n) === e) return n;
|
|
269
|
+
const a = K(n), u = he(e, a);
|
|
260
270
|
if (u) return u;
|
|
261
271
|
}
|
|
262
272
|
return null;
|
|
263
273
|
}
|
|
264
|
-
function
|
|
274
|
+
function P(e) {
|
|
265
275
|
const t = [];
|
|
266
276
|
for (const n of e) {
|
|
267
|
-
t.push(
|
|
268
|
-
const a =
|
|
269
|
-
a.length && t.push(...
|
|
277
|
+
t.push(k(n));
|
|
278
|
+
const a = K(n);
|
|
279
|
+
a.length && t.push(...P(a));
|
|
270
280
|
}
|
|
271
281
|
return t;
|
|
272
282
|
}
|
|
273
|
-
function
|
|
283
|
+
function Ue(e) {
|
|
274
284
|
const t = e.parent;
|
|
275
285
|
if (t)
|
|
276
|
-
|
|
286
|
+
K(t).splice(e.index, 1);
|
|
277
287
|
else {
|
|
278
|
-
const n = l.data.findIndex((a) =>
|
|
288
|
+
const n = l.data.findIndex((a) => k(a) === e.id);
|
|
279
289
|
n >= 0 && l.data.splice(n, 1);
|
|
280
290
|
}
|
|
281
291
|
}
|
|
282
|
-
function
|
|
292
|
+
function Xe(e, t, n) {
|
|
283
293
|
if (n === "inner") {
|
|
284
|
-
Array.isArray(t.node[
|
|
294
|
+
Array.isArray(t.node[le.value]) || (t.node[le.value] = []), t.node[le.value].push(e), D.value.add(t.rid);
|
|
285
295
|
return;
|
|
286
296
|
}
|
|
287
297
|
const a = t.parent;
|
|
288
298
|
if (a) {
|
|
289
|
-
const u =
|
|
299
|
+
const u = K(a), i = t.index + (n === "next" ? 1 : 0);
|
|
290
300
|
u.splice(i, 0, e);
|
|
291
301
|
} else {
|
|
292
302
|
const u = t.index + (n === "next" ? 1 : 0);
|
|
293
303
|
l.data.splice(u, 0, e);
|
|
294
304
|
}
|
|
295
305
|
}
|
|
296
|
-
function
|
|
297
|
-
if (window.removeEventListener("mousemove",
|
|
298
|
-
|
|
306
|
+
function Se() {
|
|
307
|
+
if (window.removeEventListener("mousemove", be), window.removeEventListener("mouseup", Se), ue(), !L.value) {
|
|
308
|
+
G.value = null, A.value = null, W.value = null, J.value = !1;
|
|
299
309
|
return;
|
|
300
310
|
}
|
|
301
|
-
const e =
|
|
302
|
-
if (L.value = !1,
|
|
311
|
+
const e = ie(G.value), t = ie(W.value), n = A.value;
|
|
312
|
+
if (L.value = !1, J.value = !1, A.value = null, W.value = null, !e || !t || !n || l.allowDrop && !l.allowDrop(e.node, t.node, n) || e.id === t.id) return;
|
|
303
313
|
const a = n === "inner" ? t.node : t.parent || null;
|
|
304
314
|
if (a) {
|
|
305
|
-
const
|
|
306
|
-
for (const c of
|
|
315
|
+
const s = re(k(a), l.data || []) || [];
|
|
316
|
+
for (const c of s) if (k(c) === e.id) return;
|
|
307
317
|
}
|
|
308
318
|
const u = e.node;
|
|
309
|
-
|
|
310
|
-
const i =
|
|
319
|
+
Ue(e);
|
|
320
|
+
const i = M(l.data || []);
|
|
311
321
|
r.value = i;
|
|
312
|
-
const o =
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
}),
|
|
322
|
+
const o = Oe(t.id) || t;
|
|
323
|
+
Xe(u, o, n), r.value = M(l.data || []), S(() => {
|
|
324
|
+
E(), w();
|
|
325
|
+
}), B("node-drop", u, o.node, n);
|
|
316
326
|
}
|
|
317
|
-
function
|
|
318
|
-
|
|
327
|
+
function qe(e, t) {
|
|
328
|
+
I.value = e.id, B("node-click", e.node, t);
|
|
319
329
|
}
|
|
320
|
-
function
|
|
321
|
-
|
|
330
|
+
function Ze(e, t) {
|
|
331
|
+
I.value = e.id, B("node-contextmenu", e.node, t);
|
|
322
332
|
}
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
}),
|
|
333
|
+
tt(() => {
|
|
334
|
+
S(E);
|
|
335
|
+
}), X(
|
|
326
336
|
() => l.currentNodeKey,
|
|
327
337
|
(e) => {
|
|
328
|
-
|
|
338
|
+
I.value = e ?? null;
|
|
329
339
|
},
|
|
330
340
|
{ immediate: !0 }
|
|
331
|
-
),
|
|
341
|
+
), X(
|
|
332
342
|
() => l.defaultExpandedKeys,
|
|
333
343
|
(e) => {
|
|
334
|
-
|
|
335
|
-
|
|
344
|
+
x.value = new Set(e || []), r.value = M(l.data || []), S(() => {
|
|
345
|
+
E(), w();
|
|
336
346
|
});
|
|
337
347
|
},
|
|
338
348
|
{ immediate: !0 }
|
|
339
|
-
),
|
|
349
|
+
), X(
|
|
340
350
|
() => l.defaultExpandAll,
|
|
341
351
|
(e) => {
|
|
342
|
-
e && (
|
|
343
|
-
|
|
352
|
+
e && (x.value = new Set(P(l.data || [])), r.value = M(l.data || []), S(() => {
|
|
353
|
+
E(), w();
|
|
344
354
|
}));
|
|
345
355
|
},
|
|
346
356
|
{ immediate: !0 }
|
|
347
|
-
),
|
|
357
|
+
), X(
|
|
348
358
|
() => l.data,
|
|
349
359
|
() => {
|
|
350
|
-
l.defaultExpandAll && (
|
|
351
|
-
|
|
360
|
+
l.defaultExpandAll && (x.value = new Set(P(l.data || []))), r.value = M(l.data || []), S(() => {
|
|
361
|
+
E(), w();
|
|
352
362
|
});
|
|
353
|
-
const e = new Set(
|
|
354
|
-
p.value = new Set([...p.value].filter((t) => e.has(t))),
|
|
363
|
+
const e = new Set(P(l.data || []));
|
|
364
|
+
p.value = new Set([...p.value].filter((t) => e.has(t))), y.value = new Set([...y.value].filter((t) => e.has(t)));
|
|
355
365
|
},
|
|
356
366
|
{ deep: !0 }
|
|
357
367
|
);
|
|
358
|
-
function
|
|
359
|
-
const t =
|
|
360
|
-
for (const n of t)
|
|
361
|
-
r.value =
|
|
362
|
-
}
|
|
363
|
-
function
|
|
364
|
-
e != null && (
|
|
365
|
-
const t = r.value.findIndex((
|
|
368
|
+
function Qe(e) {
|
|
369
|
+
const t = re(e, l.data || []) || [];
|
|
370
|
+
for (const n of t) x.value.add(k(n));
|
|
371
|
+
r.value = M(l.data || []);
|
|
372
|
+
}
|
|
373
|
+
function Me(e) {
|
|
374
|
+
e != null && (Qe(e), S(() => {
|
|
375
|
+
const t = r.value.findIndex((s) => s.id === e);
|
|
366
376
|
if (t < 0 || !h.value) return;
|
|
367
|
-
const n =
|
|
368
|
-
h.value.scrollTop =
|
|
369
|
-
const
|
|
370
|
-
if (!
|
|
371
|
-
const
|
|
372
|
-
h.value.scrollLeft =
|
|
377
|
+
const n = r.value[t]?.rid, a = (n ? Y.get(n) : void 0) || Q, u = (C.value[t] ?? 0) - a, i = h.value.clientHeight, o = Math.max(0, u - Math.max(0, (i - a) / 2));
|
|
378
|
+
h.value.scrollTop = o, H.value = o, w(), S(() => {
|
|
379
|
+
const s = n || null, c = s ? oe.get(s) : null;
|
|
380
|
+
if (!c || !h.value) return;
|
|
381
|
+
const f = c.offsetLeft, g = c.offsetWidth, m = h.value.clientWidth, b = Math.max(0, f + Math.max(0, g / 2) - Math.max(0, m / 2));
|
|
382
|
+
h.value.scrollLeft = b;
|
|
373
383
|
});
|
|
374
384
|
}));
|
|
375
385
|
}
|
|
376
|
-
function
|
|
377
|
-
|
|
386
|
+
function je(e) {
|
|
387
|
+
I.value = e ?? null, Me(I.value);
|
|
378
388
|
}
|
|
379
|
-
return
|
|
380
|
-
getCurrentKey: () =>
|
|
381
|
-
setCurrentKey:
|
|
382
|
-
scrollTo:
|
|
389
|
+
return ce({
|
|
390
|
+
getCurrentKey: () => I.value,
|
|
391
|
+
setCurrentKey: je,
|
|
392
|
+
scrollTo: Me,
|
|
383
393
|
getCheckedKeys: () => Array.from(p.value),
|
|
384
|
-
setCheckedKeys:
|
|
385
|
-
setChecked: (e, t) =>
|
|
394
|
+
setCheckedKeys: me,
|
|
395
|
+
setChecked: (e, t) => de(e, t),
|
|
386
396
|
filter: (e) => {
|
|
387
|
-
|
|
388
|
-
|
|
397
|
+
!(e == null || typeof e == "string" && e.trim() === "") && l.filterNodeMethod ? (ae.value = e, x.value = new Set(P(l.data || []))) : (ae.value = null, l.defaultExpandAll ? x.value = new Set(P(l.data || [])) : l.defaultExpandedKeys && l.defaultExpandedKeys.length ? x.value = new Set(l.defaultExpandedKeys) : x.value = /* @__PURE__ */ new Set()), r.value = M(l.data || []), S(() => {
|
|
398
|
+
E(), w();
|
|
389
399
|
});
|
|
390
400
|
}
|
|
391
|
-
}),
|
|
392
|
-
const t =
|
|
393
|
-
t &&
|
|
394
|
-
}), (e, t) => (
|
|
401
|
+
}), X(I, (e) => {
|
|
402
|
+
const t = he(e, l.data || []);
|
|
403
|
+
t && B("current-change", t);
|
|
404
|
+
}), (e, t) => (T(), R("div", {
|
|
395
405
|
ref_key: "containerRef",
|
|
396
406
|
ref: h,
|
|
397
|
-
class:
|
|
398
|
-
style:
|
|
399
|
-
onScroll:
|
|
407
|
+
class: ee(["amazing-tree", { "is-dragging": L.value }]),
|
|
408
|
+
style: q({ height: typeof v.height == "number" ? v.height + "px" : v.height || "100%", "--vtree-bg": v.backgroundColor, "--vtree-text": v.textColor, "--vtree-hover": v.hoverColor, "--vtree-row-height": typeof v.rowHeight == "number" ? v.rowHeight + "px" : v.rowHeight || "32px", "--vtree-drop-line": v.dropLineColor, "--vtree-drop-inner": v.innerDashColor }),
|
|
409
|
+
onScroll: $e
|
|
400
410
|
}, [
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
411
|
+
Le.value ? (T(), R("div", it, [
|
|
412
|
+
Ee(e.$slots, "empty", {}, () => [
|
|
413
|
+
$("div", rt, Re(v.emptyText), 1)
|
|
404
414
|
], !0)
|
|
405
|
-
])) : (
|
|
406
|
-
|
|
407
|
-
style:
|
|
415
|
+
])) : (T(), R(ze, { key: 0 }, [
|
|
416
|
+
$("div", {
|
|
417
|
+
style: q({ height: xe.value + "px", position: "relative", minWidth: "100%", width: "max-content" })
|
|
408
418
|
}, [
|
|
409
|
-
|
|
410
|
-
style:
|
|
419
|
+
$("div", {
|
|
420
|
+
style: q({ height: F.value + "px" })
|
|
411
421
|
}, null, 4),
|
|
412
|
-
(
|
|
413
|
-
key: n.
|
|
422
|
+
(T(!0), R(ze, null, nt(r.value.slice(N.value, z.value), (n) => (T(), R("div", {
|
|
423
|
+
key: n.rid,
|
|
414
424
|
class: "amazing-tree-row-wrapper"
|
|
415
425
|
}, [
|
|
416
|
-
|
|
417
|
-
class:
|
|
418
|
-
style:
|
|
419
|
-
onMousedown: (a) =>
|
|
420
|
-
onClick: (a) =>
|
|
421
|
-
onContextmenu:
|
|
426
|
+
$("div", {
|
|
427
|
+
class: ee(["amazing-tree-row", { "is-target-inner": L.value && W.value === n.rid && A.value === "inner", "is-active": I.value === n.id }]),
|
|
428
|
+
style: q({ paddingLeft: n.level * 16 + "px", "--active-color": v.highlightColor }),
|
|
429
|
+
onMousedown: (a) => Ve(n, a),
|
|
430
|
+
onClick: (a) => qe(n, a),
|
|
431
|
+
onContextmenu: te((a) => Ze(n, a), ["prevent"]),
|
|
422
432
|
ref_for: !0,
|
|
423
|
-
ref: (a) =>
|
|
433
|
+
ref: (a) => Fe(n.rid, a)
|
|
424
434
|
}, [
|
|
425
|
-
|
|
426
|
-
class:
|
|
427
|
-
onMousedown: t[0] || (t[0] =
|
|
435
|
+
$("span", {
|
|
436
|
+
class: ee(["amazing-tree-caret-box", { "is-leaf": n.isLeaf }]),
|
|
437
|
+
onMousedown: t[0] || (t[0] = te(() => {
|
|
428
438
|
}, ["stop"])),
|
|
429
|
-
onClick:
|
|
439
|
+
onClick: te((a) => !n.isLeaf && Ie(n.rid), ["stop"])
|
|
430
440
|
}, [
|
|
431
|
-
n.isLeaf ?
|
|
441
|
+
n.isLeaf ? se("", !0) : (T(), R("span", {
|
|
432
442
|
key: 0,
|
|
433
|
-
class:
|
|
443
|
+
class: ee(["amazing-tree-caret", { expanded: pe(n) }])
|
|
434
444
|
}, null, 2))
|
|
435
|
-
], 42,
|
|
436
|
-
|
|
445
|
+
], 42, at),
|
|
446
|
+
v.showCheckbox ? (T(), R("input", {
|
|
437
447
|
key: 0,
|
|
438
448
|
class: "amazing-tree-checkbox",
|
|
439
449
|
type: "checkbox",
|
|
440
|
-
checked:
|
|
441
|
-
onMousedown: t[1] || (t[1] =
|
|
450
|
+
checked: Be(n.id),
|
|
451
|
+
onMousedown: t[1] || (t[1] = te(() => {
|
|
442
452
|
}, ["stop"])),
|
|
443
|
-
indeterminate:
|
|
453
|
+
indeterminate: De(n.id),
|
|
444
454
|
disabled: l.disabledChecked ? l.disabledChecked(n.node) : !1,
|
|
445
|
-
onClick:
|
|
446
|
-
}, null, 40,
|
|
447
|
-
|
|
455
|
+
onClick: te((a) => Ye(n, a), ["stop"])
|
|
456
|
+
}, null, 40, ot)) : se("", !0),
|
|
457
|
+
Ee(e.$slots, "default", {
|
|
448
458
|
node: n.node,
|
|
449
459
|
data: n.node,
|
|
450
460
|
level: n.level,
|
|
451
|
-
expanded:
|
|
461
|
+
expanded: pe(n),
|
|
452
462
|
isLeaf: n.isLeaf
|
|
453
463
|
}, () => [
|
|
454
|
-
|
|
464
|
+
$("span", ut, Re(n.node[He.value]), 1)
|
|
455
465
|
], !0)
|
|
456
|
-
], 46,
|
|
457
|
-
L.value &&
|
|
466
|
+
], 46, lt),
|
|
467
|
+
L.value && W.value === n.rid && (A.value === "prev" || A.value === "next") ? (T(), R("div", {
|
|
458
468
|
key: 0,
|
|
459
|
-
class:
|
|
460
|
-
}, null, 2)) :
|
|
469
|
+
class: ee(["amazing-tree-drop-line", { "is-prev": A.value === "prev", "is-next": A.value === "next" }])
|
|
470
|
+
}, null, 2)) : se("", !0)
|
|
461
471
|
]))), 128)),
|
|
462
|
-
|
|
463
|
-
style:
|
|
472
|
+
$("div", {
|
|
473
|
+
style: q({ height: fe.value + "px" })
|
|
464
474
|
}, null, 4)
|
|
465
475
|
], 4),
|
|
466
|
-
L.value ? (
|
|
476
|
+
L.value ? (T(), R("div", {
|
|
467
477
|
key: 0,
|
|
468
478
|
class: "amazing-tree-ghost",
|
|
469
|
-
style:
|
|
470
|
-
}, null, 4)) :
|
|
479
|
+
style: q({ top: ve.value + "px" })
|
|
480
|
+
}, null, 4)) : se("", !0)
|
|
471
481
|
], 64))
|
|
472
482
|
], 38));
|
|
473
483
|
}
|
|
474
|
-
}),
|
|
475
|
-
const
|
|
476
|
-
for (const [l,
|
|
477
|
-
|
|
478
|
-
return
|
|
479
|
-
},
|
|
484
|
+
}), ct = (v, ce) => {
|
|
485
|
+
const ne = v.__vccOpts || v;
|
|
486
|
+
for (const [l, B] of ce)
|
|
487
|
+
ne[l] = B;
|
|
488
|
+
return ne;
|
|
489
|
+
}, ft = /* @__PURE__ */ ct(st, [["__scopeId", "data-v-602b5fc5"]]);
|
|
480
490
|
export {
|
|
481
|
-
|
|
482
|
-
|
|
491
|
+
ft as AmazingTree,
|
|
492
|
+
ft as default
|
|
483
493
|
};
|
package/dist/amazing-tree.umd.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(E,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(E=typeof globalThis<"u"?globalThis:E||self,t(E.AmazingTree={},E.Vue))})(this,(function(E,t){"use strict";const ge=["onMousedown","onClick","onContextmenu"],xe=["onClick"],we=["checked","indeterminate","disabled","onClick"],ke={class:"amazing-tree-label"},ye={key:1,class:"amazing-tree-empty"},Ce={class:"amazing-tree-empty-inner"},oe=((f,_)=>{const X=f.__vccOpts||f;for(const[a,N]of _)X[a]=N;return X})(t.defineComponent({__name:"AmazingTree",props:{data:{},props:{default:()=>({value:"value",label:"label",children:"children"})},allowDrag:{},allowDrop:{},height:{default:void 0},rowHeight:{default:32},dropLineColor:{default:"#ffd400"},innerDashColor:{default:"#ffd400"},siblingZoneRatio:{default:.35},dragStartThreshold:{default:4},highlightColor:{default:"#1e71ff"},backgroundColor:{default:"#1d1d24"},textColor:{default:"#c8d3de"},hoverColor:{default:"#5d90e5"},currentNodeKey:{},defaultExpandedKeys:{},defaultExpandAll:{type:Boolean,default:!1},draggable:{type:Boolean,default:!1},emptyText:{default:"暂无数据"},showCheckbox:{type:Boolean,default:!1},checkStrictly:{type:Boolean,default:!1},defaultCheckedKeys:{default:()=>[]},disabledChecked:{},filterNodeMethod:{}},emits:["node-click","node-contextmenu","node-drop","current-change","check-change"],setup(f,{expose:_,emit:X}){const a=f,N=X,be=t.computed(()=>a.props.value||"value"),Se=t.computed(()=>a.props.label||"label"),$=t.computed(()=>a.props.children||"children"),Me=t.computed(()=>Array.isArray(a.data)?a.data.length===0:!0),x=t.ref(new Set),p=t.ref(new Set),w=t.ref(new Set),ee=t.ref(null);function re(e){return x.value.has(e)}function Te(e){x.value.has(e)?x.value.delete(e):x.value.add(e),s.value=C(a.data||[]),t.nextTick(()=>{T(),g()})}function k(e){return e[be.value]}function S(e){const n=e[$.value];return Array.isArray(n)?n:[]}function ze(e){return p.value.has(e)}function Ee(e){return w.value.has(e)}function te(e,n){if(n?p.value.add(e):p.value.delete(e),w.value.delete(e),!a.checkStrictly){const l=ae(e,a.data||[]);if(l){const o=[l];for(;o.length;){const c=o.pop(),r=k(c);n?p.value.add(r):p.value.delete(r),w.value.delete(r);const h=S(c);for(const d of h)o.push(d)}const i=G(e,a.data||[])||[];for(const c of i){const r=k(c),h=S(c);let d=!0,u=!1;for(const m of h){const z=k(m),U=p.value.has(z),J=w.value.has(z);(U||J)&&(u=!0),(!U||J)&&(d=!1)}h.length===0?(p.value.has(r),w.value.delete(r)):d?(p.value.add(r),w.value.delete(r)):u?(p.value.delete(r),w.value.add(r)):(p.value.delete(r),w.value.delete(r))}}}}function ie(e){p.value=new Set,w.value=new Set;for(const n of e||[])te(n,!0)}function Be(e,n){const l=n.target;a.disabledChecked&&a.disabledChecked(e.node)||(N("check-change",e.node,!!l.checked),te(e.id,!!l.checked))}function C(e){const n=[];function l(o,i,c){for(let r=0;r<o.length;r++){const h=o[r],d=k(h),u=S(h),m=u.length===0;n.push({id:d,node:h,parent:i,level:c,index:r,isLeaf:m}),!m&&x.value.has(d)&&l(u,h,c+1)}}if(l(e,null,0),a.filterNodeMethod&&ee.value!=null){let o=function(r){const h=k(r),d=S(r);let u=!1;for(const z of d)u=o(z)||u;const m=!!a.filterNodeMethod(ee.value,r);return m&&i.add(h),u&&c.add(h),m||u};const i=new Set,c=new Set;for(const r of e)o(r);return n.filter(r=>i.has(r.id)||c.has(r.id))}return n}const v=t.ref(null),B=t.ref(0),V=t.ref(0),s=t.ref([]),H=t.reactive(new Map);function Ae(e){if(typeof e=="number")return e;if(typeof e=="string"){const n=e.match(/(\d+(\.\d+)?)/);return n?Number(n[1]):32}return 32}const Y=Ae(a.rowHeight),y=t.computed(()=>{let e=0;const n=[];for(const l of s.value){const o=H.get(l.id)||Y;e+=o,n.push(e)}return n}),ce=t.computed(()=>{const e=y.value;return e.length?e[e.length-1]:0});function se(e){let n=0,l=y.value.length-1,o=0;for(;n<=l;){const i=n+l>>1;y.value[i]!==void 0&&y.value[i]>=e?(o=i,l=i-1):n=i+1}return o}const R=t.ref(0),M=t.ref(0),L=t.ref(0),ne=t.ref(0);function g(){if(V.value=v.value?.clientHeight||0,y.value.length===0||s.value.length===0){R.value=0,M.value=0,L.value=0,ne.value=0;return}const e=se(B.value);R.value=Math.max(0,e-3);const n=s.value[R.value],l=n?H.get(n.id)||Y:0,i=(y.value[R.value]??0)-l;L.value=Math.max(0,i);let c=R.value;const r=B.value+V.value+3*Y;for(;c<s.value.length&&(y.value[c]??0)<r;)c++;M.value=Math.min(s.value.length,c+1);const d=(y.value[M.value-1]??0)-L.value;if(d<V.value&&M.value<s.value.length){let u=M.value,m=d;for(;m<V.value&&u<s.value.length;)u++,m=(y.value[u-1]??0)-L.value;M.value=u}ne.value=Math.max(0,ce.value-L.value-((y.value[M.value-1]??0)-L.value))}t.watch([B,()=>a.data,x],()=>{s.value=C(a.data||[]),t.nextTick(T),g()}),t.onMounted(()=>{s.value=C(a.data||[]),t.nextTick(T),g(),a.defaultCheckedKeys&&a.defaultCheckedKeys.length&&ie(a.defaultCheckedKeys),v.value&&(F=new ResizeObserver(()=>{V.value=v.value?.clientHeight||0,g()}),F.observe(v.value))});let F=null;t.onUnmounted(()=>{F&&(F.disconnect(),F=null)});const j=t.reactive(new Map);function Ke(e,n){n?j.set(e,n):j.delete(e)}function T(){let e=!1;for(const n of s.value.slice(R.value,M.value)){const l=j.get(n.id);if(l){const o=l.offsetHeight;(!H.has(n.id)||H.get(n.id)!==o)&&(H.set(n.id,o),e=!0)}}e&&g()}function Ne(){B.value=v.value?.scrollTop||0,g()}const A=t.ref(!1),O=t.ref(null),I=t.ref(null),b=t.ref(null),le=t.ref(0),P=t.ref(!1),de=t.ref(0),ue=t.ref(0),K=t.ref(null),W=t.ref(0);let D=null;function Z(){D!=null&&(cancelAnimationFrame(D),D=null)}function fe(){if(!A.value||W.value===0){Z();return}const e=v.value;if(!e){Z();return}const n=e.scrollHeight-e.clientHeight,l=12;e.scrollTop=Math.max(0,Math.min(n,e.scrollTop+W.value*l)),B.value=e.scrollTop,g(),D=requestAnimationFrame(fe)}function He(){W.value!==0&&D==null&&(D=requestAnimationFrame(fe)),W.value===0&&Z()}function Q(e){if(e==null)return null;for(const n of s.value)if(n.id===e)return n;return null}function Re(e){const n=v.value.getBoundingClientRect(),l=e-n.top+B.value;return se(l)}function Le(e,n){!a.draggable||n.button!==0||!(!a.allowDrag||a.allowDrag(e.node))||(O.value=e.id,le.value=n.clientY,de.value=n.clientX,ue.value=n.clientY,P.value=!1,n.preventDefault(),window.addEventListener("mousemove",he),window.addEventListener("mouseup",ve))}function he(e){if(O.value==null)return;if(!P.value){const Pe=Math.abs(e.clientX-de.value),We=Math.abs(e.clientY-ue.value),pe=Math.max(1,a.dragStartThreshold??4);if(Pe<pe&&We<pe)return;P.value=!0,A.value=!0}le.value=e.clientY;const n=Re(e.clientY),l=s.value[Math.min(Math.max(n,0),s.value.length-1)];if(I.value=l?.id??null,!l){b.value=null;return}const o=y.value[n]??0,i=H.get(l.id)??Y,c=o-i,r=v.value.getBoundingClientRect(),d=(e.clientY-r.top+B.value-c)/i,u=a.siblingZoneRatio??.35,m=Math.max(.05,Math.min(.49,u));let z="inner";d<m?z="prev":d>1-m&&(z="next");const U=Q(O.value),J=a.allowDrop?!!(U&&a.allowDrop(U.node,l.node,z)):!0;b.value=J?z:null,W.value=e.clientY>r.bottom?1:e.clientY<r.top?-1:0,He()}function G(e,n,l=[]){for(const o of n){if(k(o)===e)return l;const i=S(o);if(i.length){const c=G(e,i,[...l,o]);if(c)return c}}return null}function ae(e,n){if(e==null)return null;for(const l of n){if(k(l)===e)return l;const o=S(l),i=ae(e,o);if(i)return i}return null}function q(e){const n=[];for(const l of e){n.push(k(l));const o=S(l);o.length&&n.push(...q(o))}return n}function Ie(e){const n=e.parent;if(n)S(n).splice(e.index,1);else{const l=a.data.findIndex(o=>k(o)===e.id);l>=0&&a.data.splice(l,1)}}function De(e,n,l){if(l==="inner"){Array.isArray(n.node[$.value])||(n.node[$.value]=[]),n.node[$.value].push(e),x.value.add(n.id);return}const o=n.parent;if(o){const i=S(o),c=n.index+(l==="next"?1:0);i.splice(c,0,e)}else{const i=n.index+(l==="next"?1:0);a.data.splice(i,0,e)}}function ve(){if(window.removeEventListener("mousemove",he),window.removeEventListener("mouseup",ve),Z(),!A.value){O.value=null,b.value=null,I.value=null,P.value=!1;return}const e=Q(O.value),n=Q(I.value),l=b.value;if(A.value=!1,P.value=!1,b.value=null,I.value=null,!e||!n||!l||a.allowDrop&&!a.allowDrop(e.node,n.node,l)||e.id===n.id)return;const o=l==="inner"?n.node:n.parent||null;if(o){const h=G(k(o),a.data||[])||[];for(const d of h)if(k(d)===e.id)return}const i=e.node;Ie(e);const c=C(a.data||[]);s.value=c;const r=Q(n.id)||n;De(i,r,l),s.value=C(a.data||[]),t.nextTick(()=>{T(),g()}),N("node-drop",i,r.node,l)}function Ve(e,n){K.value=e.id,N("node-click",e.node,n)}function Ye(e,n){K.value=e.id,N("node-contextmenu",e.node,n)}t.watchEffect(()=>{t.nextTick(T)}),t.watch(()=>a.currentNodeKey,e=>{K.value=e??null},{immediate:!0}),t.watch(()=>a.defaultExpandedKeys,e=>{x.value=new Set(e||[]),s.value=C(a.data||[]),t.nextTick(()=>{T(),g()})},{immediate:!0}),t.watch(()=>a.defaultExpandAll,e=>{e&&(x.value=new Set(q(a.data||[])),s.value=C(a.data||[]),t.nextTick(()=>{T(),g()}))},{immediate:!0}),t.watch(()=>a.data,()=>{a.defaultExpandAll&&(x.value=new Set(q(a.data||[]))),s.value=C(a.data||[]),t.nextTick(()=>{T(),g()});const e=new Set(q(a.data||[]));p.value=new Set([...p.value].filter(n=>e.has(n))),w.value=new Set([...w.value].filter(n=>e.has(n)))},{deep:!0});function Fe(e){const n=G(e,a.data||[])||[];for(const l of n)x.value.add(k(l));s.value=C(a.data||[])}function me(e){e!=null&&(Fe(e),t.nextTick(()=>{const n=s.value.findIndex(r=>r.id===e);if(n<0||!v.value)return;const l=H.get(e)||Y,o=(y.value[n]??0)-l,i=v.value.clientHeight,c=Math.max(0,o-Math.max(0,(i-l)/2));v.value.scrollTop=c,B.value=c,g(),t.nextTick(()=>{const r=j.get(e);if(!r||!v.value)return;const h=r.offsetLeft,d=r.offsetWidth,u=v.value.clientWidth,m=Math.max(0,h+Math.max(0,d/2)-Math.max(0,u/2));v.value.scrollLeft=m})}))}function Oe(e){K.value=e??null,me(K.value)}return _({getCurrentKey:()=>K.value,setCurrentKey:Oe,scrollTo:me,getCheckedKeys:()=>Array.from(p.value),setCheckedKeys:ie,setChecked:(e,n)=>te(e,n),filter:e=>{ee.value=e,x.value=new Set(q(a.data||[])),s.value=C(a.data||[]),t.nextTick(()=>{T(),g()})}}),t.watch(K,e=>{const n=ae(e,a.data||[]);n&&N("current-change",n)}),(e,n)=>(t.openBlock(),t.createElementBlock("div",{ref_key:"containerRef",ref:v,class:t.normalizeClass(["amazing-tree",{"is-dragging":A.value}]),style:t.normalizeStyle({height:typeof f.height=="number"?f.height+"px":f.height||"100%","--vtree-bg":f.backgroundColor,"--vtree-text":f.textColor,"--vtree-hover":f.hoverColor,"--vtree-row-height":typeof f.rowHeight=="number"?f.rowHeight+"px":f.rowHeight||"32px","--vtree-drop-line":f.dropLineColor,"--vtree-drop-inner":f.innerDashColor}),onScroll:Ne},[Me.value?(t.openBlock(),t.createElementBlock("div",ye,[t.renderSlot(e.$slots,"empty",{},()=>[t.createElementVNode("div",Ce,t.toDisplayString(f.emptyText),1)],!0)])):(t.openBlock(),t.createElementBlock(t.Fragment,{key:0},[t.createElementVNode("div",{style:t.normalizeStyle({height:ce.value+"px",position:"relative",minWidth:"100%",width:"max-content"})},[t.createElementVNode("div",{style:t.normalizeStyle({height:L.value+"px"})},null,4),(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(s.value.slice(R.value,M.value),l=>(t.openBlock(),t.createElementBlock("div",{key:l.id,class:"amazing-tree-row-wrapper"},[t.createElementVNode("div",{class:t.normalizeClass(["amazing-tree-row",{"is-target-inner":A.value&&I.value===l.id&&b.value==="inner","is-active":K.value===l.id}]),style:t.normalizeStyle({paddingLeft:l.level*16+"px","--active-color":f.highlightColor}),onMousedown:o=>Le(l,o),onClick:o=>Ve(l,o),onContextmenu:t.withModifiers(o=>Ye(l,o),["prevent"]),ref_for:!0,ref:o=>Ke(l.id,o)},[t.createElementVNode("span",{class:t.normalizeClass(["amazing-tree-caret-box",{"is-leaf":l.isLeaf}]),onMousedown:n[0]||(n[0]=t.withModifiers(()=>{},["stop"])),onClick:t.withModifiers(o=>!l.isLeaf&&Te(l.id),["stop"])},[l.isLeaf?t.createCommentVNode("",!0):(t.openBlock(),t.createElementBlock("span",{key:0,class:t.normalizeClass(["amazing-tree-caret",{expanded:re(l.id)}])},null,2))],42,xe),f.showCheckbox?(t.openBlock(),t.createElementBlock("input",{key:0,class:"amazing-tree-checkbox",type:"checkbox",checked:ze(l.id),onMousedown:n[1]||(n[1]=t.withModifiers(()=>{},["stop"])),indeterminate:Ee(l.id),disabled:a.disabledChecked?a.disabledChecked(l.node):!1,onClick:t.withModifiers(o=>Be(l,o),["stop"])},null,40,we)):t.createCommentVNode("",!0),t.renderSlot(e.$slots,"default",{node:l.node,data:l.node,level:l.level,expanded:re(l.id),isLeaf:l.isLeaf},()=>[t.createElementVNode("span",ke,t.toDisplayString(l.node[Se.value]),1)],!0)],46,ge),A.value&&I.value===l.id&&(b.value==="prev"||b.value==="next")?(t.openBlock(),t.createElementBlock("div",{key:0,class:t.normalizeClass(["amazing-tree-drop-line",{"is-prev":b.value==="prev","is-next":b.value==="next"}])},null,2)):t.createCommentVNode("",!0)]))),128)),t.createElementVNode("div",{style:t.normalizeStyle({height:ne.value+"px"})},null,4)],4),A.value?(t.openBlock(),t.createElementBlock("div",{key:0,class:"amazing-tree-ghost",style:t.normalizeStyle({top:le.value+"px"})},null,4)):t.createCommentVNode("",!0)],64))],38))}}),[["__scopeId","data-v-fc218005"]]);E.AmazingTree=oe,E.default=oe,Object.defineProperties(E,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));
|
|
1
|
+
(function(B,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(B=typeof globalThis<"u"?globalThis:B||self,t(B.AmazingTree={},B.Vue))})(this,(function(B,t){"use strict";const we=["onMousedown","onClick","onContextmenu"],ye=["onClick"],ke=["checked","indeterminate","disabled","onClick"],Ce={class:"amazing-tree-label"},be={key:1,class:"amazing-tree-empty"},Se={class:"amazing-tree-empty-inner"},ie=((h,te)=>{const j=h.__vccOpts||h;for(const[a,N]of te)j[a]=N;return j})(t.defineComponent({__name:"AmazingTree",props:{data:{},props:{default:()=>({value:"value",label:"label",children:"children"})},allowDrag:{},allowDrop:{},height:{default:void 0},rowHeight:{default:32},dropLineColor:{default:"#ffd400"},innerDashColor:{default:"#ffd400"},siblingZoneRatio:{default:.35},dragStartThreshold:{default:4},highlightColor:{default:"#1e71ff"},backgroundColor:{default:"#1d1d24"},textColor:{default:"#c8d3de"},hoverColor:{default:"#5d90e5"},currentNodeKey:{},defaultExpandedKeys:{},defaultExpandAll:{type:Boolean,default:!1},draggable:{type:Boolean,default:!1},emptyText:{default:"暂无数据"},showCheckbox:{type:Boolean,default:!1},checkStrictly:{type:Boolean,default:!1},defaultCheckedKeys:{default:()=>[]},disabledChecked:{},filterNodeMethod:{}},emits:["node-click","node-contextmenu","node-drop","current-change","check-change"],setup(h,{expose:te,emit:j}){const a=h,N=j,Me=t.computed(()=>a.props.value||"value"),Te=t.computed(()=>a.props.label||"label"),Z=t.computed(()=>a.props.children||"children"),Ee=t.computed(()=>Array.isArray(a.data)?a.data.length===0:!0),H=t.ref(new Set),x=t.ref(new Set),p=t.ref(new Set),y=t.ref(new Set),Q=t.ref(null);function ce(e){return H.value.has(e.rid)||x.value.has(e.id)}function ze(e){const n=_(e);if(!n)return;const l=n.id;H.value.has(e)||x.value.has(l)?(H.value.delete(e),x.value.delete(l)):H.value.add(e),s.value=S(a.data||[]),t.nextTick(()=>{z(),w()})}function k(e){return e[Me.value]}function T(e){const n=e[Z.value];return Array.isArray(n)?n:[]}function Be(e){return p.value.has(e)}function Ae(e){return y.value.has(e)}function ne(e,n){if(n?p.value.add(e):p.value.delete(e),y.value.delete(e),!a.checkStrictly){const l=oe(e,a.data||[]);if(l){const o=[l];for(;o.length;){const c=o.pop(),r=k(c);n?p.value.add(r):p.value.delete(r),y.value.delete(r);const d=T(c);for(const u of d)o.push(u)}const i=ee(e,a.data||[])||[];for(const c of i){const r=k(c),d=T(c);let u=!0,f=!1;for(const m of d){const g=k(m),b=p.value.has(g),$=y.value.has(g);(b||$)&&(f=!0),(!b||$)&&(u=!1)}d.length===0?(p.value.has(r),y.value.delete(r)):u?(p.value.add(r),y.value.delete(r)):f?(p.value.delete(r),y.value.add(r)):(p.value.delete(r),y.value.delete(r))}}}}function se(e){p.value=new Set,y.value=new Set;for(const n of e||[])ne(n,!0)}function Ke(e,n){const l=n.target;a.disabledChecked&&a.disabledChecked(e.node)||(N("check-change",e.node,!!l.checked),ne(e.id,!!l.checked))}function S(e){const n=[];function l(o,i,c,r){for(let d=0;d<o.length;d++){const u=o[d],f=k(u),m=T(u),g=m.length===0,b=r?`${r}/${d}`:`${d}`,$={rid:b,id:f,node:u,parent:i,level:c,index:d,isLeaf:g};n.push($);const re=H.value.has(b)||x.value.has(f);!g&&re&&l(m,u,c+1,b)}}if(l(e,null,0,""),a.filterNodeMethod&&Q.value!=null){let o=function(r){const d=k(r),u=T(r);let f=!1;for(const g of u)f=o(g)||f;const m=!!a.filterNodeMethod(Q.value,r);return m&&i.add(d),f&&c.add(d),m||f};const i=new Set,c=new Set;for(const r of e)o(r);return n.filter(r=>i.has(r.id)||c.has(r.id))}return n}const v=t.ref(null),A=t.ref(0),O=t.ref(0),s=t.ref([]),L=t.reactive(new Map);function Re(e){if(typeof e=="number")return e;if(typeof e=="string"){const n=e.match(/(\d+(\.\d+)?)/);return n?Number(n[1]):32}return 32}const P=Re(a.rowHeight),C=t.computed(()=>{let e=0;const n=[];for(const l of s.value){const o=L.get(l.rid)||P;e+=o,n.push(e)}return n}),de=t.computed(()=>{const e=C.value;return e.length?e[e.length-1]:0});function ue(e){let n=0,l=C.value.length-1,o=0;for(;n<=l;){const i=n+l>>1;C.value[i]!==void 0&&C.value[i]>=e?(o=i,l=i-1):n=i+1}return o}const I=t.ref(0),E=t.ref(0),D=t.ref(0),le=t.ref(0);function w(){if(O.value=v.value?.clientHeight||0,C.value.length===0||s.value.length===0){I.value=0,E.value=0,D.value=0,le.value=0;return}const e=ue(A.value);I.value=Math.max(0,e-3);const n=s.value[I.value],l=n?L.get(n.rid)||P:0,i=(C.value[I.value]??0)-l;D.value=Math.max(0,i);let c=I.value;const r=A.value+O.value+3*P;for(;c<s.value.length&&(C.value[c]??0)<r;)c++;E.value=Math.min(s.value.length,c+1);const u=(C.value[E.value-1]??0)-D.value;if(u<O.value&&E.value<s.value.length){let f=E.value,m=u;for(;m<O.value&&f<s.value.length;)f++,m=(C.value[f-1]??0)-D.value;E.value=f}le.value=Math.max(0,de.value-D.value-((C.value[E.value-1]??0)-D.value))}t.watch([A,()=>a.data,H,x],()=>{s.value=S(a.data||[]),t.nextTick(z),w()}),t.onMounted(()=>{s.value=S(a.data||[]),t.nextTick(z),w(),a.defaultCheckedKeys&&a.defaultCheckedKeys.length&&se(a.defaultCheckedKeys),v.value&&(W=new ResizeObserver(()=>{O.value=v.value?.clientHeight||0,w()}),W.observe(v.value))});let W=null;t.onUnmounted(()=>{W&&(W.disconnect(),W=null)});const G=t.reactive(new Map);function Ne(e,n){n?G.set(e,n):G.delete(e)}function z(){let e=!1;for(const n of s.value.slice(I.value,E.value)){const l=G.get(n.rid);if(l){const o=l.offsetHeight;(!L.has(n.rid)||L.get(n.rid)!==o)&&(L.set(n.rid,o),e=!0)}}e&&w()}function He(){A.value=v.value?.scrollTop||0,w()}const K=t.ref(!1),q=t.ref(null),V=t.ref(null),M=t.ref(null),ae=t.ref(0),U=t.ref(!1),fe=t.ref(0),he=t.ref(0),R=t.ref(null),X=t.ref(0);let Y=null;function J(){Y!=null&&(cancelAnimationFrame(Y),Y=null)}function ve(){if(!K.value||X.value===0){J();return}const e=v.value;if(!e){J();return}const n=e.scrollHeight-e.clientHeight,l=12;e.scrollTop=Math.max(0,Math.min(n,e.scrollTop+X.value*l)),A.value=e.scrollTop,w(),Y=requestAnimationFrame(ve)}function Le(){X.value!==0&&Y==null&&(Y=requestAnimationFrame(ve)),X.value===0&&J()}function Ie(e){if(e==null)return null;for(const n of s.value)if(n.id===e)return n;return null}function _(e){if(e==null)return null;for(const n of s.value)if(n.rid===e)return n;return null}function De(e){const n=v.value.getBoundingClientRect(),l=e-n.top+A.value;return ue(l)}function Ve(e,n){!a.draggable||n.button!==0||!(!a.allowDrag||a.allowDrag(e.node))||(q.value=e.rid,ae.value=n.clientY,fe.value=n.clientX,he.value=n.clientY,U.value=!1,n.preventDefault(),window.addEventListener("mousemove",me),window.addEventListener("mouseup",pe))}function me(e){if(q.value==null)return;if(!U.value){const re=Math.abs(e.clientX-fe.value),qe=Math.abs(e.clientY-he.value),xe=Math.max(1,a.dragStartThreshold??4);if(re<xe&&qe<xe)return;U.value=!0,K.value=!0}ae.value=e.clientY;const n=De(e.clientY),l=s.value[Math.min(Math.max(n,0),s.value.length-1)];if(V.value=l?.rid??null,!l){M.value=null;return}const o=C.value[n]??0,i=L.get(l.rid)??P,c=o-i,r=v.value.getBoundingClientRect(),u=(e.clientY-r.top+A.value-c)/i,f=a.siblingZoneRatio??.35,m=Math.max(.05,Math.min(.49,f));let g="inner";u<m?g="prev":u>1-m&&(g="next");const b=_(q.value),$=a.allowDrop?!!(b&&a.allowDrop(b.node,l.node,g)):!0;M.value=$?g:null,X.value=e.clientY>r.bottom?1:e.clientY<r.top?-1:0,Le()}function ee(e,n,l=[]){for(const o of n){if(k(o)===e)return l;const i=T(o);if(i.length){const c=ee(e,i,[...l,o]);if(c)return c}}return null}function oe(e,n){if(e==null)return null;for(const l of n){if(k(l)===e)return l;const o=T(l),i=oe(e,o);if(i)return i}return null}function F(e){const n=[];for(const l of e){n.push(k(l));const o=T(l);o.length&&n.push(...F(o))}return n}function Ye(e){const n=e.parent;if(n)T(n).splice(e.index,1);else{const l=a.data.findIndex(o=>k(o)===e.id);l>=0&&a.data.splice(l,1)}}function Fe(e,n,l){if(l==="inner"){Array.isArray(n.node[Z.value])||(n.node[Z.value]=[]),n.node[Z.value].push(e),H.value.add(n.rid);return}const o=n.parent;if(o){const i=T(o),c=n.index+(l==="next"?1:0);i.splice(c,0,e)}else{const i=n.index+(l==="next"?1:0);a.data.splice(i,0,e)}}function pe(){if(window.removeEventListener("mousemove",me),window.removeEventListener("mouseup",pe),J(),!K.value){q.value=null,M.value=null,V.value=null,U.value=!1;return}const e=_(q.value),n=_(V.value),l=M.value;if(K.value=!1,U.value=!1,M.value=null,V.value=null,!e||!n||!l||a.allowDrop&&!a.allowDrop(e.node,n.node,l)||e.id===n.id)return;const o=l==="inner"?n.node:n.parent||null;if(o){const d=ee(k(o),a.data||[])||[];for(const u of d)if(k(u)===e.id)return}const i=e.node;Ye(e);const c=S(a.data||[]);s.value=c;const r=Ie(n.id)||n;Fe(i,r,l),s.value=S(a.data||[]),t.nextTick(()=>{z(),w()}),N("node-drop",i,r.node,l)}function $e(e,n){R.value=e.id,N("node-click",e.node,n)}function Oe(e,n){R.value=e.id,N("node-contextmenu",e.node,n)}t.watchEffect(()=>{t.nextTick(z)}),t.watch(()=>a.currentNodeKey,e=>{R.value=e??null},{immediate:!0}),t.watch(()=>a.defaultExpandedKeys,e=>{x.value=new Set(e||[]),s.value=S(a.data||[]),t.nextTick(()=>{z(),w()})},{immediate:!0}),t.watch(()=>a.defaultExpandAll,e=>{e&&(x.value=new Set(F(a.data||[])),s.value=S(a.data||[]),t.nextTick(()=>{z(),w()}))},{immediate:!0}),t.watch(()=>a.data,()=>{a.defaultExpandAll&&(x.value=new Set(F(a.data||[]))),s.value=S(a.data||[]),t.nextTick(()=>{z(),w()});const e=new Set(F(a.data||[]));p.value=new Set([...p.value].filter(n=>e.has(n))),y.value=new Set([...y.value].filter(n=>e.has(n)))},{deep:!0});function Pe(e){const n=ee(e,a.data||[])||[];for(const l of n)x.value.add(k(l));s.value=S(a.data||[])}function ge(e){e!=null&&(Pe(e),t.nextTick(()=>{const n=s.value.findIndex(d=>d.id===e);if(n<0||!v.value)return;const l=s.value[n]?.rid,o=(l?L.get(l):void 0)||P,i=(C.value[n]??0)-o,c=v.value.clientHeight,r=Math.max(0,i-Math.max(0,(c-o)/2));v.value.scrollTop=r,A.value=r,w(),t.nextTick(()=>{const d=l||null,u=d?G.get(d):null;if(!u||!v.value)return;const f=u.offsetLeft,m=u.offsetWidth,g=v.value.clientWidth,b=Math.max(0,f+Math.max(0,m/2)-Math.max(0,g/2));v.value.scrollLeft=b})}))}function We(e){R.value=e??null,ge(R.value)}return te({getCurrentKey:()=>R.value,setCurrentKey:We,scrollTo:ge,getCheckedKeys:()=>Array.from(p.value),setCheckedKeys:se,setChecked:(e,n)=>ne(e,n),filter:e=>{!(e==null||typeof e=="string"&&e.trim()==="")&&a.filterNodeMethod?(Q.value=e,x.value=new Set(F(a.data||[]))):(Q.value=null,a.defaultExpandAll?x.value=new Set(F(a.data||[])):a.defaultExpandedKeys&&a.defaultExpandedKeys.length?x.value=new Set(a.defaultExpandedKeys):x.value=new Set),s.value=S(a.data||[]),t.nextTick(()=>{z(),w()})}}),t.watch(R,e=>{const n=oe(e,a.data||[]);n&&N("current-change",n)}),(e,n)=>(t.openBlock(),t.createElementBlock("div",{ref_key:"containerRef",ref:v,class:t.normalizeClass(["amazing-tree",{"is-dragging":K.value}]),style:t.normalizeStyle({height:typeof h.height=="number"?h.height+"px":h.height||"100%","--vtree-bg":h.backgroundColor,"--vtree-text":h.textColor,"--vtree-hover":h.hoverColor,"--vtree-row-height":typeof h.rowHeight=="number"?h.rowHeight+"px":h.rowHeight||"32px","--vtree-drop-line":h.dropLineColor,"--vtree-drop-inner":h.innerDashColor}),onScroll:He},[Ee.value?(t.openBlock(),t.createElementBlock("div",be,[t.renderSlot(e.$slots,"empty",{},()=>[t.createElementVNode("div",Se,t.toDisplayString(h.emptyText),1)],!0)])):(t.openBlock(),t.createElementBlock(t.Fragment,{key:0},[t.createElementVNode("div",{style:t.normalizeStyle({height:de.value+"px",position:"relative",minWidth:"100%",width:"max-content"})},[t.createElementVNode("div",{style:t.normalizeStyle({height:D.value+"px"})},null,4),(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(s.value.slice(I.value,E.value),l=>(t.openBlock(),t.createElementBlock("div",{key:l.rid,class:"amazing-tree-row-wrapper"},[t.createElementVNode("div",{class:t.normalizeClass(["amazing-tree-row",{"is-target-inner":K.value&&V.value===l.rid&&M.value==="inner","is-active":R.value===l.id}]),style:t.normalizeStyle({paddingLeft:l.level*16+"px","--active-color":h.highlightColor}),onMousedown:o=>Ve(l,o),onClick:o=>$e(l,o),onContextmenu:t.withModifiers(o=>Oe(l,o),["prevent"]),ref_for:!0,ref:o=>Ne(l.rid,o)},[t.createElementVNode("span",{class:t.normalizeClass(["amazing-tree-caret-box",{"is-leaf":l.isLeaf}]),onMousedown:n[0]||(n[0]=t.withModifiers(()=>{},["stop"])),onClick:t.withModifiers(o=>!l.isLeaf&&ze(l.rid),["stop"])},[l.isLeaf?t.createCommentVNode("",!0):(t.openBlock(),t.createElementBlock("span",{key:0,class:t.normalizeClass(["amazing-tree-caret",{expanded:ce(l)}])},null,2))],42,ye),h.showCheckbox?(t.openBlock(),t.createElementBlock("input",{key:0,class:"amazing-tree-checkbox",type:"checkbox",checked:Be(l.id),onMousedown:n[1]||(n[1]=t.withModifiers(()=>{},["stop"])),indeterminate:Ae(l.id),disabled:a.disabledChecked?a.disabledChecked(l.node):!1,onClick:t.withModifiers(o=>Ke(l,o),["stop"])},null,40,ke)):t.createCommentVNode("",!0),t.renderSlot(e.$slots,"default",{node:l.node,data:l.node,level:l.level,expanded:ce(l),isLeaf:l.isLeaf},()=>[t.createElementVNode("span",Ce,t.toDisplayString(l.node[Te.value]),1)],!0)],46,we),K.value&&V.value===l.rid&&(M.value==="prev"||M.value==="next")?(t.openBlock(),t.createElementBlock("div",{key:0,class:t.normalizeClass(["amazing-tree-drop-line",{"is-prev":M.value==="prev","is-next":M.value==="next"}])},null,2)):t.createCommentVNode("",!0)]))),128)),t.createElementVNode("div",{style:t.normalizeStyle({height:le.value+"px"})},null,4)],4),K.value?(t.openBlock(),t.createElementBlock("div",{key:0,class:"amazing-tree-ghost",style:t.normalizeStyle({top:ae.value+"px"})},null,4)):t.createCommentVNode("",!0)],64))],38))}}),[["__scopeId","data-v-602b5fc5"]]);B.AmazingTree=ie,B.default=ie,Object.defineProperties(B,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));
|
package/package.json
CHANGED
|
@@ -1,11 +1,15 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "amazing-tree",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.4",
|
|
4
4
|
"private": false,
|
|
5
5
|
"type": "module",
|
|
6
6
|
"engines": {
|
|
7
7
|
"node": "^20.19.0 || >=22.12.0"
|
|
8
8
|
},
|
|
9
|
+
"repository": {
|
|
10
|
+
"type": "git",
|
|
11
|
+
"url": "https://github.com/FE-kang/amazingTree"
|
|
12
|
+
},
|
|
9
13
|
"scripts": {
|
|
10
14
|
"dev": "vite",
|
|
11
15
|
"build": "run-p type-check \"build-only {@}\" --",
|