amazing-tree 1.2.3 → 1.3.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 [Maxkang]
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,25 +1,28 @@
 # AmazingTree (Vue 3)
 
-> :warning:该组件因设计需求，是非受控组件，组件的拖拽功能会修改树形数据 `props.data`
-> 使用需谨慎
-
 一个高性能、可拖拽、可选择的虚拟滚动树组件，支持泛型类型自动推导，适合在大型数据集下渲染与交互。
 
+> :warning:该组件因设计需求，是非受控组件，组件的拖拽功能会修改树形数据 `props.data`，使用需谨慎
+
 **特性**
 
-- 虚拟滚动渲染，平滑滚动与自动测量行高
+- 虚拟滚动渲染，平滑滚动与自动测量行高（20w节点无压力）
 - 可选中（复选框），支持父子联动或严格模式
+- 可筛选，可快速定位节点
 - 拖拽换位与嵌套，提供前置、后置、内部三种放置方式
-- 泛型组件：从 `data` 推导节点业务类型 `T`，事件与插槽类型随之推导
+- 支持自定义内容（节点插槽和空数据占位插槽）
+- 支持自定义拖拽/释放禁用逻辑
 - 轻量依赖，仅依赖 `vue`
 
 **安装**
 
-- 待发布到 npm 后：`npm i amazing-tree`
-- 当前仓库本地打包：`npm run build:lib`，产物在 `dist/`
+- `npm i amazing-tree`
 
 **使用**
 
+> 导入组件 `import { AmazingTree } from 'amazing-tree'`
+> 导入样式：`import 'amazing-tree/style.css'`
+
 - 基本示例
 
 ```vue
@@ -30,6 +33,12 @@ import 'amazing-tree/style.css'
 
 type NodeItem = { uuid: string; name: string; children?: NodeItem[]; [k: string]: unknown }
 const data = ref<NodeItem[]>([])
+const filterName = ref('')
+const filterNodeMethod = (q: unknown, node: NodeItem) => {
+  const s = String(q || '')
+  if (!s) return true
+  return node.name.includes(s)
+}
 
 function onDrop(drag: NodeItem, target: NodeItem, type: 'prev' | 'next' | 'inner') {
   console.log(drag, target, type)
@@ -40,80 +49,66 @@ function onDrop(drag: NodeItem, target: NodeItem, type: 'prev' | 'next' | 'inner
   <AmazingTree
     :data="data"
     :props="{ value: 'uuid', label: 'name', children: 'children' }"
+    :filter-node-method="filterNodeMethod"
     :show-checkbox="true"
     :check-strictly="false"
     :default-checked-keys="['id-1', 'id-2']"
     @node-drop="onDrop"
   />
+  <input v-model="filterName" placeholder="输入名称筛选" />
+  <button @click="$refs.tree?.filter(filterName)">筛选</button>
 </template>
 ```
 
-> 使用时请显式导入样式：`import 'amazing-tree/style.css'`
-
 **Props**
 
-- `data: T[]` 树数据源
-- `props?: { value: string; label: string; children: string }` 字段映射，默认 `{ value:'value', label:'label', children:'children' }`
-- `allowDrag?: (node: T) => boolean` 是否允许拖拽某节点
-- `allowDrop?: (drag: T, drop: T, type: 'prev'|'next'|'inner') => boolean` 是否允许目标位置
-- `height?: number | string` 容器高度，默认 `100%`
-- `highlightColor?: string` 选中行高亮色，默认 `#1e71ff`
-- `backgroundColor?: string` 背景色，默认 `#1d1d24`
-- `textColor?: string` 文本色，默认 `#c8d3de`
-- `hoverColor?: string` 悬浮色，默认 `#5d90e5`
-- `currentNodeKey?: Key` 当前行的 `value`
-- `defaultExpandedKeys?: Key[]` 默认展开的节点 `value` 列表
-- `defaultExpandAll?: boolean` 是否默认全部展开
-- `draggable?: boolean` 是否允许拖拽，默认 `false`
-- `emptyText?: string` 空状态文案，默认 `暂无数据`
-- `showCheckbox?: boolean` 是否显示复选框，默认 `false`
-- `checkStrictly?: boolean` 选择严格模式，父子不联动，默认 `false`
-- `defaultCheckedKeys?: Key[]` 默认勾选的 `value` 列表，默认 `[]`
-- `disabledChecked?: (node: T) => boolean` 是否禁用当前节点复选框，默认 `false`
+| 属性名                | 说明                        | 类型                                                           | 默认值                                                  | 是否可选 |
+| --------------------- | --------------------------- | -------------------------------------------------------------- | ------------------------------------------------------- | -------- |
+| `data`                | 树数据源                    | `T[]`                                                          | —                                                       | 否       |
+| `props`               | 字段映射                    | `{ value: string; label: string; children: string }`           | `{ value:'value', label:'label', children:'children' }` | 是       |
+| `allowDrag`           | 是否允许拖拽某节点          | `(node: T) => boolean`                                         | —                                                       | 是       |
+| `allowDrop`           | 是否允许目标位置            | `(drag: T, drop: T, type: 'prev'\|'next'\|'inner') => boolean` | —                                                       | 是       |
+| `height`              | 容器高度                    | `number \| string`                                             | `'100%'`                                                | 是       |
+| `highlightColor`      | 选中行高亮色                | `string`                                                       | `'#1e71ff'`                                             | 是       |
+| `backgroundColor`     | 背景色                      | `string`                                                       | `'#1d1d24'`                                             | 是       |
+| `textColor`           | 文本色                      | `string`                                                       | `'#c8d3de'`                                             | 是       |
+| `hoverColor`          | 悬浮色                      | `string`                                                       | `'#5d90e5'`                                             | 是       |
+| `currentNodeKey`      | 当前行的 `value`            | `Key`                                                          | —                                                       | 是       |
+| `defaultExpandedKeys` | 默认展开的节点 `value` 列表 | `Key[]`                                                        | —                                                       | 是       |
+| `defaultExpandAll`    | 是否默认全部展开            | `boolean`                                                      | —                                                       | 是       |
+| `draggable`           | 是否允许拖拽                | `boolean`                                                      | `false`                                                 | 是       |
+| `emptyText`           | 空状态文案                  | `string`                                                       | `'暂无数据'`                                            | 是       |
+| `showCheckbox`        | 是否显示复选框              | `boolean`                                                      | `false`                                                 | 是       |
+| `checkStrictly`       | 选择严格模式，父子不联动    | `boolean`                                                      | `false`                                                 | 是       |
+| `defaultCheckedKeys`  | 默认勾选的 `value` 列表     | `Key[]`                                                        | `[]`                                                    | 是       |
+| `disabledChecked`     | 是否禁用当前节点复选框      | `(node: T) => boolean`                                         | —                                                       | 是       |
+| `filterNodeMethod`    | 过滤方法（返回 false 隐藏） | `(value: unknown, node: T) => boolean`                         | —                                                       | 是       |
 
 **Events**
 
-- `node-click(node: T, ev: MouseEvent)` 点击行
-- `node-contextmenu(node: T, ev: MouseEvent)` 右键菜单
-- `node-drop(drag: T, target: T, type: 'prev'|'next'|'inner')` 拖拽放置
-- `current-change(node: T)` 当前行变化（配合 `currentNodeKey`）
-- `check-change(node: T, checked: boolean)` 勾选框点击时触发；禁用状态不触发
+| 事件名             | 说明                                | 回调参数                                                  |
+| ------------------ | ----------------------------------- | --------------------------------------------------------- |
+| `node-click`       | 点击行                              | `(node: T, ev: MouseEvent)`                               |
+| `node-contextmenu` | 右键菜单                            | `(node: T, ev: MouseEvent)`                               |
+| `node-drop`        | 拖拽放置                            | `(drag: T, target: T, type: 'prev' \| 'next' \| 'inner')` |
+| `current-change`   | 当前行变化（配合 `currentNodeKey`） | `(node: T)`                                               |
+| `check-change`     | 勾选框点击时触发；禁用状态不触发    | `(node: T, checked: boolean)`                             |
 
 **Slots**
 
-- `default`：`{ node: T; data: T; level: number; expanded: boolean; isLeaf: boolean }`
-- `empty`：空状态自定义
-
-**Expose API**
-
-- `getCurrentKey(): Key | null` 获取当前行 `value`
-- `setCurrentKey(id: Key | null): void` 设置当前行并滚动可见
-- `scrollTo(id: Key | null): void` 滚动到指定行（自动展开祖先）
-- `getCheckedKeys(): Key[]` 获取当前勾选集合
-- `setCheckedKeys(keys: Key[]): void` 批量设置勾选（应用联动/严格逻辑）
-- `setChecked(id: Key, checked: boolean): void` 设置单个节点勾选状态
-
-**类型与泛型**
-
-- 组件声明为泛型：`generic="T extends Record<string, unknown>"`
-- `T` 会从 `data: T[]` 自动推导，事件与插槽参数均按 `T` 类型约束
-- 在模板中若需要强类型事件回调，可在脚本中声明具体 `T`（例如 `NodeItem`）并书写对应函数签名
-
-**样式**
-
-- 复选框遵循暗色主题风格，支持禁用态 `cursor:not-allowed`，可通过 CSS 变量定制：
-  - `--vtree-primary` 主色（默认 `#409eff`）
-  - `--vtree-checkbox-*` 系列变量控制背景、边框、禁用与勾选颜色
-
-**构建与发布**
-
-- 开发：`npm run dev`
-- 类型检查：`npm run type-check`
-- 构建应用：`npm run build`
-- 构建库：`npm run build:lib`（生成 `dist/amazing-tree.es.js`、`amazing-tree.cjs.js`、`amazing-tree.umd.js`）
-- 发布到 npm：在确认 `package.json` 中 `name`、`version`、`files`、`exports` 配置正确后执行 `npm publish`
-
-**注意事项**
-
-- 库构建将 `vue` 作为外部依赖，使用方需自行安装 `vue@^3.5`
-- 若需要声明文件（`.d.ts`），可引入 `vite-plugin-dts` 或单独生成并随包发布
+| 插槽名    | 插槽参数                                                                  |
+| --------- | ------------------------------------------------------------------------- |
+| `default` | `{ node: T; data: T; level: number; expanded: boolean; isLeaf: boolean }` |
+| `empty`   | —（空状态自定义）                                                         |
+
+**Exposes**
+
+| 方法名           | 说明                              | 返回类型                              |
+| ---------------- | --------------------------------- | ------------------------------------- |
+| `getCurrentKey`  | 获取当前行 `value`                | `Key \| null`                         |
+| `setCurrentKey`  | 设置当前行并滚动可见              | `(id: Key \| null) => void`           |
+| `scrollTo`       | 滚动到指定行（自动展开祖先）      | `(id: Key \| null) => void`           |
+| `getCheckedKeys` | 获取当前勾选集合                  | `Key[]`                               |
+| `setCheckedKeys` | 批量设置勾选（应用联动/严格逻辑） | `(keys: Key[]) => void`               |
+| `setChecked`     | 设置单个节点勾选状态              | `(id: Key, checked: boolean) => void` |
+| `filter`         | 触发过滤，参数作为回调第 1 个参数 | `(value: unknown) => void`            |

package/dist/amazing-tree.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("vue"),Me=["onMousedown","onClick","onContextmenu"],Ae=["onClick"],Ke=["checked","indeterminate","disabled","onClick"],Ie={class:"amazing-tree-label"},Le={key:1,class:"amazing-tree-empty"},Ne={class:"amazing-tree-empty-inner"},H=28,Re=t.defineComponent({__name:"AmazingTree",props:{data:{},props:{default:()=>({value:"value",label:"label",children:"children"})},allowDrag:{},allowDrop:{},height:{default:void 0},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:{}},emits:["node-click","node-contextmenu","node-drop","current-change","check-change"],setup(m,{expose:j,emit:Y}){const a=m,M=Y,de=t.computed(()=>a.props.value||"value"),ve=t.computed(()=>a.props.label||"label"),_=t.computed(()=>a.props.children||"children"),fe=t.computed(()=>Array.isArray(a.data)?a.data.length===0:!0),y=t.ref(new Set),h=t.ref(new Set),p=t.ref(new Set);function ee(e){return y.value.has(e)}function he(e){y.value.has(e)?y.value.delete(e):y.value.add(e),i.value=C(a.data||[]),t.nextTick(()=>{B(),k()})}function w(e){return e[de.value]}function z(e){const n=e[_.value];return Array.isArray(n)?n:[]}function me(e){return h.value.has(e)}function pe(e){return p.value.has(e)}function G(e,n){if(n?h.value.add(e):h.value.delete(e),p.value.delete(e),!a.checkStrictly){const l=Z(e,a.data||[]);if(l){const o=[l];for(;o.length;){const r=o.pop(),c=w(r);n?h.value.add(c):h.value.delete(c),p.value.delete(c);const f=z(r);for(const s of f)o.push(s)}const u=q(e,a.data||[])||[];for(const r of u){const c=w(r),f=z(r);let s=!0,d=!1;for(const x of f){const $=w(x),re=h.value.has($),ie=p.value.has($);(re||ie)&&(d=!0),(!re||ie)&&(s=!1)}f.length===0?(h.value.has(c),p.value.delete(c)):s?(h.value.add(c),p.value.delete(c)):d?(h.value.delete(c),p.value.add(c)):(h.value.delete(c),p.value.delete(c))}}}}function te(e){h.value=new Set,p.value=new Set;for(const n of e||[])G(n,!0)}function ge(e,n){const l=n.target;a.disabledChecked&&a.disabledChecked(e.node)||(M("check-change",e.node,!!l.checked),G(e.id,!!l.checked))}function C(e){const n=[];function l(o,u,r){for(let c=0;c<o.length;c++){const f=o[c],s=w(f),d=z(f),x=d.length===0;n.push({id:s,node:f,parent:u,level:r,index:c,isLeaf:x}),!x&&y.value.has(s)&&l(d,f,r+1)}}return l(e,null,0),n}const v=t.ref(null),E=t.ref(0),R=t.ref(0),i=t.ref([]),A=t.reactive(new Map),g=t.computed(()=>{let e=0;const n=[];for(const l of i.value){const o=A.get(l.id)||H;e+=o,n.push(e)}return n}),ne=t.computed(()=>{const e=g.value;return e.length?e[e.length-1]:0});function le(e){let n=0,l=g.value.length-1,o=0;for(;n<=l;){const u=n+l>>1;g.value[u]!==void 0&&g.value[u]>=e?(o=u,l=u-1):n=u+1}return o}const K=t.ref(0),b=t.ref(0),I=t.ref(0),J=t.ref(0);function k(){if(R.value=v.value?.clientHeight||0,g.value.length===0||i.value.length===0){K.value=0,b.value=0,I.value=0,J.value=0;return}const e=le(E.value);K.value=Math.max(0,e-3);const n=i.value[K.value],l=n?A.get(n.id)||H:0,u=(g.value[K.value]??0)-l;I.value=Math.max(0,u);let r=K.value;const c=E.value+R.value+3*H;for(;r<i.value.length&&(g.value[r]??0)<c;)r++;b.value=Math.min(i.value.length,r+1);const s=(g.value[b.value-1]??0)-I.value;if(s<R.value&&b.value<i.value.length){let d=b.value,x=s;for(;x<R.value&&d<i.value.length;)d++,x=(g.value[d-1]??0)-I.value;b.value=d}J.value=Math.max(0,ne.value-I.value-((g.value[b.value-1]??0)-I.value))}t.watch([E,()=>a.data,y],()=>{i.value=C(a.data||[]),t.nextTick(B),k()}),t.onMounted(()=>{i.value=C(a.data||[]),t.nextTick(B),k(),a.defaultCheckedKeys&&a.defaultCheckedKeys.length&&te(a.defaultCheckedKeys),v.value&&(V=new ResizeObserver(()=>{R.value=v.value?.clientHeight||0,k()}),V.observe(v.value))});let V=null;t.onUnmounted(()=>{V&&(V.disconnect(),V=null)});const O=t.reactive(new Map);function ke(e,n){n?O.set(e,n):O.delete(e)}function B(){let e=!1;for(const n of i.value.slice(K.value,b.value)){const l=O.get(n.id);if(l){const o=l.offsetHeight;(!A.has(n.id)||A.get(n.id)!==o)&&(A.set(n.id,o),e=!0)}}e&&k()}function xe(){E.value=v.value?.scrollTop||0,k()}const S=t.ref(!1),Q=t.ref(null),D=t.ref(null),T=t.ref(null),X=t.ref(0),L=t.ref(null),F=t.ref(0);let N=null;function P(){N!=null&&(cancelAnimationFrame(N),N=null)}function ae(){if(!S.value||F.value===0){P();return}const e=v.value;if(!e){P();return}const n=e.scrollHeight-e.clientHeight,l=12;e.scrollTop=Math.max(0,Math.min(n,e.scrollTop+F.value*l)),E.value=e.scrollTop,k(),N=requestAnimationFrame(ae)}function ye(){F.value!==0&&N==null&&(N=requestAnimationFrame(ae)),F.value===0&&P()}function W(e){if(e==null)return null;for(const n of i.value)if(n.id===e)return n;return null}function we(e){const n=v.value.getBoundingClientRect(),l=e-n.top+E.value;return le(l)}function Ce(e,n){!a.draggable||n.button!==0||!(!a.allowDrag||a.allowDrag(e.node))||(S.value=!0,Q.value=e.id,X.value=n.clientY,n.preventDefault(),window.addEventListener("mousemove",oe),window.addEventListener("mouseup",ce))}function oe(e){if(!S.value)return;X.value=e.clientY;const n=we(e.clientY),l=i.value[Math.min(Math.max(n,0),i.value.length-1)];if(D.value=l?.id??null,!l){T.value=null;return}const o=g.value[n]??0,u=A.get(l.id)??H,r=o-u,c=v.value.getBoundingClientRect(),s=(e.clientY-c.top+E.value-r)/u;let d="inner";s<.25?d="prev":s>.75&&(d="next");const x=W(Q.value),$=a.allowDrop?!!(x&&a.allowDrop(x.node,l.node,d)):!0;T.value=$?d:null,F.value=e.clientY>c.bottom?1:e.clientY<c.top?-1:0,ye()}function q(e,n,l=[]){for(const o of n){if(w(o)===e)return l;const u=z(o);if(u.length){const r=q(e,u,[...l,o]);if(r)return r}}return null}function Z(e,n){if(e==null)return null;for(const l of n){if(w(l)===e)return l;const o=z(l),u=Z(e,o);if(u)return u}return null}function U(e){const n=[];for(const l of e){n.push(w(l));const o=z(l);o.length&&n.push(...U(o))}return n}function be(e){const n=e.parent;if(n)z(n).splice(e.index,1);else{const l=a.data.findIndex(o=>w(o)===e.id);l>=0&&a.data.splice(l,1)}}function Se(e,n,l){if(l==="inner"){Array.isArray(n.node[_.value])||(n.node[_.value]=[]),n.node[_.value].push(e),y.value.add(n.id);return}const o=n.parent;if(o){const u=z(o),r=n.index+(l==="next"?1:0);u.splice(r,0,e)}else{const u=n.index+(l==="next"?1:0);a.data.splice(u,0,e)}}function ce(){if(window.removeEventListener("mousemove",oe),window.removeEventListener("mouseup",ce),P(),!S.value)return;const e=W(Q.value),n=W(D.value),l=T.value;if(S.value=!1,T.value=null,D.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 f=q(w(o),a.data||[])||[];for(const s of f)if(w(s)===e.id)return}const u=e.node;be(e);const r=C(a.data||[]);i.value=r;const c=W(n.id)||n;Se(u,c,l),i.value=C(a.data||[]),t.nextTick(()=>{B(),k()}),M("node-drop",u,c.node,l)}function Te(e,n){L.value=e.id,M("node-click",e.node,n)}function ze(e,n){M("node-contextmenu",e.node,n)}t.watchEffect(()=>{t.nextTick(B)}),t.watch(()=>a.currentNodeKey,e=>{L.value=e??null},{immediate:!0}),t.watch(()=>a.defaultExpandedKeys,e=>{y.value=new Set(e||[]),i.value=C(a.data||[]),t.nextTick(()=>{B(),k()})},{immediate:!0}),t.watch(()=>a.defaultExpandAll,e=>{e&&(y.value=new Set(U(a.data||[])),i.value=C(a.data||[]),t.nextTick(()=>{B(),k()}))},{immediate:!0}),t.watch(()=>a.data,()=>{a.defaultExpandAll&&(y.value=new Set(U(a.data||[])),i.value=C(a.data||[]),t.nextTick(()=>{B(),k()}));const e=new Set(U(a.data||[]));h.value=new Set([...h.value].filter(n=>e.has(n))),p.value=new Set([...p.value].filter(n=>e.has(n)))});function Ee(e){const n=q(e,a.data||[])||[];for(const l of n)y.value.add(w(l));i.value=C(a.data||[])}function ue(e){e!=null&&(Ee(e),t.nextTick(()=>{const n=i.value.findIndex(c=>c.id===e);if(n<0||!v.value)return;const l=A.get(e)||H,o=(g.value[n]??0)-l,u=v.value.clientHeight,r=Math.max(0,o-Math.max(0,(u-l)/2));v.value.scrollTop=r,E.value=r,k(),t.nextTick(()=>{const c=O.get(e);if(!c||!v.value)return;const f=c.offsetLeft,s=c.offsetWidth,d=v.value.clientWidth,x=Math.max(0,f+Math.max(0,s/2)-Math.max(0,d/2));v.value.scrollLeft=x})}))}function Be(e){L.value=e??null,ue(L.value)}return j({getCurrentKey:()=>L.value,setCurrentKey:Be,scrollTo:ue,getCheckedKeys:()=>Array.from(h.value),setCheckedKeys:te,setChecked:(e,n)=>G(e,n)}),t.watch(L,e=>{const n=Z(e,a.data||[]);n&&M("current-change",n)}),(e,n)=>(t.openBlock(),t.createElementBlock("div",{ref_key:"containerRef",ref:v,class:t.normalizeClass(["amazing-tree",{"is-dragging":S.value}]),style:t.normalizeStyle({height:typeof m.height=="number"?m.height+"px":m.height||"100%","--vtree-bg":m.backgroundColor,"--vtree-text":m.textColor,"--vtree-hover":m.hoverColor}),onScroll:xe},[fe.value?(t.openBlock(),t.createElementBlock("div",Le,[t.renderSlot(e.$slots,"empty",{},()=>[t.createElementVNode("div",Ne,t.toDisplayString(m.emptyText),1)],!0)])):(t.openBlock(),t.createElementBlock(t.Fragment,{key:0},[t.createElementVNode("div",{style:t.normalizeStyle({height:ne.value+"px",position:"relative",minWidth:"100%",width:"max-content"})},[t.createElementVNode("div",{style:t.normalizeStyle({height:I.value+"px"})},null,4),(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(i.value.slice(K.value,b.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":S.value&&D.value===l.id&&T.value==="inner","is-active":L.value===l.id}]),style:t.normalizeStyle({paddingLeft:l.level*16+"px","--active-color":m.highlightColor}),onMousedown:o=>Ce(l,o),onClick:o=>Te(l,o),onContextmenu:t.withModifiers(o=>ze(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}]),onClick:t.withModifiers(o=>!l.isLeaf&&he(l.id),["stop"])},[l.isLeaf?t.createCommentVNode("",!0):(t.openBlock(),t.createElementBlock("span",{key:0,class:t.normalizeClass(["amazing-tree-caret",{expanded:ee(l.id)}])},null,2))],10,Ae),m.showCheckbox?(t.openBlock(),t.createElementBlock("input",{key:0,class:"amazing-tree-checkbox",type:"checkbox",checked:me(l.id),indeterminate:pe(l.id),disabled:a.disabledChecked?a.disabledChecked(l.node):!1,onClick:t.withModifiers(o=>ge(l,o),["stop"])},null,8,Ke)):t.createCommentVNode("",!0),t.renderSlot(e.$slots,"default",{node:l.node,data:l.node,level:l.level,expanded:ee(l.id),isLeaf:l.isLeaf},()=>[t.createElementVNode("span",Ie,t.toDisplayString(l.node[ve.value]),1)],!0)],46,Me),S.value&&D.value===l.id&&(T.value==="prev"||T.value==="next")?(t.openBlock(),t.createElementBlock("div",{key:0,class:t.normalizeClass(["amazing-tree-drop-line",{"is-prev":T.value==="prev","is-next":T.value==="next"}])},null,2)):t.createCommentVNode("",!0)]))),128)),t.createElementVNode("div",{style:t.normalizeStyle({height:J.value+"px"})},null,4)],4),S.value?(t.openBlock(),t.createElementBlock("div",{key:0,class:"amazing-tree-ghost",style:t.normalizeStyle({top:X.value+"px"})},null,4)):t.createCommentVNode("",!0)],64))],38))}}),Ve=(m,j)=>{const Y=m.__vccOpts||m;for(const[a,M]of j)Y[a]=M;return Y},se=Ve(Re,[["__scopeId","data-v-f93b9531"]]);exports.AmazingTree=se;exports.default=se;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("vue"),Ae=["onMousedown","onClick","onContextmenu"],Ke=["onClick"],Ne=["checked","indeterminate","disabled","onClick"],Ie={class:"amazing-tree-label"},Le={key:1,class:"amazing-tree-empty"},Re={class:"amazing-tree-empty-inner"},_=28,Ve=t.defineComponent({__name:"AmazingTree",props:{data:{},props:{default:()=>({value:"value",label:"label",children:"children"})},allowDrag:{},allowDrop:{},height:{default:void 0},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(p,{expose:j,emit:O}){const a=p,B=O,fe=t.computed(()=>a.props.value||"value"),ve=t.computed(()=>a.props.label||"label"),P=t.computed(()=>a.props.children||"children"),he=t.computed(()=>Array.isArray(a.data)?a.data.length===0:!0),k=t.ref(new Set),m=t.ref(new Set),x=t.ref(new Set),Q=t.ref(null);function te(e){return k.value.has(e)}function me(e){k.value.has(e)?k.value.delete(e):k.value.add(e),i.value=C(a.data||[]),t.nextTick(()=>{T(),g()})}function y(e){return e[fe.value]}function b(e){const l=e[P.value];return Array.isArray(l)?l:[]}function pe(e){return m.value.has(e)}function ge(e){return x.value.has(e)}function G(e,l){if(l?m.value.add(e):m.value.delete(e),x.value.delete(e),!a.checkStrictly){const n=ee(e,a.data||[]);if(n){const o=[n];for(;o.length;){const r=o.pop(),c=y(r);l?m.value.add(c):m.value.delete(c),x.value.delete(c);const f=b(r);for(const d of f)o.push(d)}const u=$(e,a.data||[])||[];for(const r of u){const c=y(r),f=b(r);let d=!0,s=!1;for(const h of f){const R=y(h),ie=m.value.has(R),se=x.value.has(R);(ie||se)&&(s=!0),(!ie||se)&&(d=!1)}f.length===0?(m.value.has(c),x.value.delete(c)):d?(m.value.add(c),x.value.delete(c)):s?(m.value.delete(c),x.value.add(c)):(m.value.delete(c),x.value.delete(c))}}}}function le(e){m.value=new Set,x.value=new Set;for(const l of e||[])G(l,!0)}function ke(e,l){const n=l.target;a.disabledChecked&&a.disabledChecked(e.node)||(B("check-change",e.node,!!n.checked),G(e.id,!!n.checked))}function C(e){const l=[];function n(o,u,r){for(let c=0;c<o.length;c++){const f=o[c],d=y(f),s=b(f),h=s.length===0;l.push({id:d,node:f,parent:u,level:r,index:c,isLeaf:h}),!h&&k.value.has(d)&&n(s,f,r+1)}}if(n(e,null,0),a.filterNodeMethod&&Q.value!=null){let o=function(c){const f=y(c),d=b(c);let s=!1;for(const R of d)s=o(R)||s;const h=!!a.filterNodeMethod(Q.value,c);return h&&u.add(f),s&&r.add(f),h||s};const u=new Set,r=new Set;for(const c of e)o(c);return l.filter(c=>u.has(c.id)||r.has(c.id))}return l}const v=t.ref(null),M=t.ref(0),V=t.ref(0),i=t.ref([]),A=t.reactive(new Map),w=t.computed(()=>{let e=0;const l=[];for(const n of i.value){const o=A.get(n.id)||_;e+=o,l.push(e)}return l}),ne=t.computed(()=>{const e=w.value;return e.length?e[e.length-1]:0});function ae(e){let l=0,n=w.value.length-1,o=0;for(;l<=n;){const u=l+n>>1;w.value[u]!==void 0&&w.value[u]>=e?(o=u,n=u-1):l=u+1}return o}const K=t.ref(0),S=t.ref(0),N=t.ref(0),J=t.ref(0);function g(){if(V.value=v.value?.clientHeight||0,w.value.length===0||i.value.length===0){K.value=0,S.value=0,N.value=0,J.value=0;return}const e=ae(M.value);K.value=Math.max(0,e-3);const l=i.value[K.value],n=l?A.get(l.id)||_:0,u=(w.value[K.value]??0)-n;N.value=Math.max(0,u);let r=K.value;const c=M.value+V.value+3*_;for(;r<i.value.length&&(w.value[r]??0)<c;)r++;S.value=Math.min(i.value.length,r+1);const d=(w.value[S.value-1]??0)-N.value;if(d<V.value&&S.value<i.value.length){let s=S.value,h=d;for(;h<V.value&&s<i.value.length;)s++,h=(w.value[s-1]??0)-N.value;S.value=s}J.value=Math.max(0,ne.value-N.value-((w.value[S.value-1]??0)-N.value))}t.watch([M,()=>a.data,k],()=>{i.value=C(a.data||[]),t.nextTick(T),g()}),t.onMounted(()=>{i.value=C(a.data||[]),t.nextTick(T),g(),a.defaultCheckedKeys&&a.defaultCheckedKeys.length&&le(a.defaultCheckedKeys),v.value&&(D=new ResizeObserver(()=>{V.value=v.value?.clientHeight||0,g()}),D.observe(v.value))});let D=null;t.onUnmounted(()=>{D&&(D.disconnect(),D=null)});const W=t.reactive(new Map);function xe(e,l){l?W.set(e,l):W.delete(e)}function T(){let e=!1;for(const l of i.value.slice(K.value,S.value)){const n=W.get(l.id);if(n){const o=n.offsetHeight;(!A.has(l.id)||A.get(l.id)!==o)&&(A.set(l.id,o),e=!0)}}e&&g()}function ye(){M.value=v.value?.scrollTop||0,g()}const z=t.ref(!1),X=t.ref(null),H=t.ref(null),E=t.ref(null),Z=t.ref(0),I=t.ref(null),F=t.ref(0);let L=null;function q(){L!=null&&(cancelAnimationFrame(L),L=null)}function oe(){if(!z.value||F.value===0){q();return}const e=v.value;if(!e){q();return}const l=e.scrollHeight-e.clientHeight,n=12;e.scrollTop=Math.max(0,Math.min(l,e.scrollTop+F.value*n)),M.value=e.scrollTop,g(),L=requestAnimationFrame(oe)}function we(){F.value!==0&&L==null&&(L=requestAnimationFrame(oe)),F.value===0&&q()}function U(e){if(e==null)return null;for(const l of i.value)if(l.id===e)return l;return null}function Ce(e){const l=v.value.getBoundingClientRect(),n=e-l.top+M.value;return ae(n)}function be(e,l){!a.draggable||l.button!==0||!(!a.allowDrag||a.allowDrag(e.node))||(z.value=!0,X.value=e.id,Z.value=l.clientY,l.preventDefault(),window.addEventListener("mousemove",ce),window.addEventListener("mouseup",ue))}function ce(e){if(!z.value)return;Z.value=e.clientY;const l=Ce(e.clientY),n=i.value[Math.min(Math.max(l,0),i.value.length-1)];if(H.value=n?.id??null,!n){E.value=null;return}const o=w.value[l]??0,u=A.get(n.id)??_,r=o-u,c=v.value.getBoundingClientRect(),d=(e.clientY-c.top+M.value-r)/u;let s="inner";d<.25?s="prev":d>.75&&(s="next");const h=U(X.value),R=a.allowDrop?!!(h&&a.allowDrop(h.node,n.node,s)):!0;E.value=R?s:null,F.value=e.clientY>c.bottom?1:e.clientY<c.top?-1:0,we()}function $(e,l,n=[]){for(const o of l){if(y(o)===e)return n;const u=b(o);if(u.length){const r=$(e,u,[...n,o]);if(r)return r}}return null}function ee(e,l){if(e==null)return null;for(const n of l){if(y(n)===e)return n;const o=b(n),u=ee(e,o);if(u)return u}return null}function Y(e){const l=[];for(const n of e){l.push(y(n));const o=b(n);o.length&&l.push(...Y(o))}return l}function Se(e){const l=e.parent;if(l)b(l).splice(e.index,1);else{const n=a.data.findIndex(o=>y(o)===e.id);n>=0&&a.data.splice(n,1)}}function Te(e,l,n){if(n==="inner"){Array.isArray(l.node[P.value])||(l.node[P.value]=[]),l.node[P.value].push(e),k.value.add(l.id);return}const o=l.parent;if(o){const u=b(o),r=l.index+(n==="next"?1:0);u.splice(r,0,e)}else{const u=l.index+(n==="next"?1:0);a.data.splice(u,0,e)}}function ue(){if(window.removeEventListener("mousemove",ce),window.removeEventListener("mouseup",ue),q(),!z.value)return;const e=U(X.value),l=U(H.value),n=E.value;if(z.value=!1,E.value=null,H.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 f=$(y(o),a.data||[])||[];for(const d of f)if(y(d)===e.id)return}const u=e.node;Se(e);const r=C(a.data||[]);i.value=r;const c=U(l.id)||l;Te(u,c,n),i.value=C(a.data||[]),t.nextTick(()=>{T(),g()}),B("node-drop",u,c.node,n)}function ze(e,l){I.value=e.id,B("node-click",e.node,l)}function Ee(e,l){B("node-contextmenu",e.node,l)}t.watchEffect(()=>{t.nextTick(T)}),t.watch(()=>a.currentNodeKey,e=>{I.value=e??null},{immediate:!0}),t.watch(()=>a.defaultExpandedKeys,e=>{k.value=new Set(e||[]),i.value=C(a.data||[]),t.nextTick(()=>{T(),g()})},{immediate:!0}),t.watch(()=>a.defaultExpandAll,e=>{e&&(k.value=new Set(Y(a.data||[])),i.value=C(a.data||[]),t.nextTick(()=>{T(),g()}))},{immediate:!0}),t.watch(()=>a.data,()=>{a.defaultExpandAll&&(k.value=new Set(Y(a.data||[]))),i.value=C(a.data||[]),t.nextTick(()=>{T(),g()});const e=new Set(Y(a.data||[]));m.value=new Set([...m.value].filter(l=>e.has(l))),x.value=new Set([...x.value].filter(l=>e.has(l)))},{deep:!0});function Me(e){const l=$(e,a.data||[])||[];for(const n of l)k.value.add(y(n));i.value=C(a.data||[])}function re(e){e!=null&&(Me(e),t.nextTick(()=>{const l=i.value.findIndex(c=>c.id===e);if(l<0||!v.value)return;const n=A.get(e)||_,o=(w.value[l]??0)-n,u=v.value.clientHeight,r=Math.max(0,o-Math.max(0,(u-n)/2));v.value.scrollTop=r,M.value=r,g(),t.nextTick(()=>{const c=W.get(e);if(!c||!v.value)return;const f=c.offsetLeft,d=c.offsetWidth,s=v.value.clientWidth,h=Math.max(0,f+Math.max(0,d/2)-Math.max(0,s/2));v.value.scrollLeft=h})}))}function Be(e){I.value=e??null,re(I.value)}return j({getCurrentKey:()=>I.value,setCurrentKey:Be,scrollTo:re,getCheckedKeys:()=>Array.from(m.value),setCheckedKeys:le,setChecked:(e,l)=>G(e,l),filter:e=>{Q.value=e,k.value=new Set(Y(a.data||[])),i.value=C(a.data||[]),t.nextTick(()=>{T(),g()})}}),t.watch(I,e=>{const l=ee(e,a.data||[]);l&&B("current-change",l)}),(e,l)=>(t.openBlock(),t.createElementBlock("div",{ref_key:"containerRef",ref:v,class:t.normalizeClass(["amazing-tree",{"is-dragging":z.value}]),style:t.normalizeStyle({height:typeof p.height=="number"?p.height+"px":p.height||"100%","--vtree-bg":p.backgroundColor,"--vtree-text":p.textColor,"--vtree-hover":p.hoverColor}),onScroll:ye},[he.value?(t.openBlock(),t.createElementBlock("div",Le,[t.renderSlot(e.$slots,"empty",{},()=>[t.createElementVNode("div",Re,t.toDisplayString(p.emptyText),1)],!0)])):(t.openBlock(),t.createElementBlock(t.Fragment,{key:0},[t.createElementVNode("div",{style:t.normalizeStyle({height:ne.value+"px",position:"relative",minWidth:"100%",width:"max-content"})},[t.createElementVNode("div",{style:t.normalizeStyle({height:N.value+"px"})},null,4),(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(i.value.slice(K.value,S.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":z.value&&H.value===n.id&&E.value==="inner","is-active":I.value===n.id}]),style:t.normalizeStyle({paddingLeft:n.level*16+"px","--active-color":p.highlightColor}),onMousedown:o=>be(n,o),onClick:o=>ze(n,o),onContextmenu:t.withModifiers(o=>Ee(n,o),["prevent"]),ref_for:!0,ref:o=>xe(n.id,o)},[t.createElementVNode("span",{class:t.normalizeClass(["amazing-tree-caret-box",{"is-leaf":n.isLeaf}]),onClick:t.withModifiers(o=>!n.isLeaf&&me(n.id),["stop"])},[n.isLeaf?t.createCommentVNode("",!0):(t.openBlock(),t.createElementBlock("span",{key:0,class:t.normalizeClass(["amazing-tree-caret",{expanded:te(n.id)}])},null,2))],10,Ke),p.showCheckbox?(t.openBlock(),t.createElementBlock("input",{key:0,class:"amazing-tree-checkbox",type:"checkbox",checked:pe(n.id),indeterminate:ge(n.id),disabled:a.disabledChecked?a.disabledChecked(n.node):!1,onClick:t.withModifiers(o=>ke(n,o),["stop"])},null,8,Ne)):t.createCommentVNode("",!0),t.renderSlot(e.$slots,"default",{node:n.node,data:n.node,level:n.level,expanded:te(n.id),isLeaf:n.isLeaf},()=>[t.createElementVNode("span",Ie,t.toDisplayString(n.node[ve.value]),1)],!0)],46,Ae),z.value&&H.value===n.id&&(E.value==="prev"||E.value==="next")?(t.openBlock(),t.createElementBlock("div",{key:0,class:t.normalizeClass(["amazing-tree-drop-line",{"is-prev":E.value==="prev","is-next":E.value==="next"}])},null,2)):t.createCommentVNode("",!0)]))),128)),t.createElementVNode("div",{style:t.normalizeStyle({height:J.value+"px"})},null,4)],4),z.value?(t.openBlock(),t.createElementBlock("div",{key:0,class:"amazing-tree-ghost",style:t.normalizeStyle({top:Z.value+"px"})},null,4)):t.createCommentVNode("",!0)],64))],38))}}),De=(p,j)=>{const O=p.__vccOpts||p;for(const[a,B]of j)O[a]=B;return O},de=De(Ve,[["__scopeId","data-v-e0a4c022"]]);exports.AmazingTree=de;exports.default=de;

package/dist/amazing-tree.css

@@ -1 +1 @@
-.amazing-tree[data-v-f93b9531]{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-f93b9531],.amazing-tree.is-dragging[data-v-f93b9531] *{-webkit-user-select:none;user-select:none}.amazing-tree[data-v-f93b9531] *{cursor:pointer}.amazing-tree input[type=checkbox][data-v-f93b9531]:disabled{cursor:not-allowed}.amazing-tree .amazing-tree-checkbox[data-v-f93b9531]{-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-f93b9531]:not(:disabled):hover{border-color:var(--vtree-checkbox-hover-border)}.amazing-tree .amazing-tree-checkbox[data-v-f93b9531]:focus-visible{box-shadow:0 0 0 2px #409eff33}.amazing-tree .amazing-tree-checkbox[data-v-f93b9531]:checked{background:var(--vtree-primary);border-color:var(--vtree-primary)}.amazing-tree .amazing-tree-checkbox[data-v-f93b9531]: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-f93b9531]:indeterminate{background:var(--vtree-primary);border-color:var(--vtree-primary)}.amazing-tree .amazing-tree-checkbox[data-v-f93b9531]: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-f93b9531]:disabled{background:var(--vtree-checkbox-disabled-bg);border-color:var(--vtree-checkbox-disabled-border)}.amazing-tree .amazing-tree-checkbox[data-v-f93b9531]:disabled:checked:after{border-color:var(--vtree-checkbox-check-disabled)}.amazing-tree .amazing-tree-checkbox[data-v-f93b9531]:disabled:indeterminate:after{background:var(--vtree-checkbox-check-disabled)}.amazing-tree .amazing-tree-row-wrapper[data-v-f93b9531]{position:relative}.amazing-tree .amazing-tree-row-wrapper .amazing-tree-drop-line[data-v-f93b9531]{position:absolute;left:0;right:0;height:0;border-top:2px solid #409eff}.amazing-tree .amazing-tree-row-wrapper .amazing-tree-drop-line.is-prev[data-v-f93b9531]{top:0}.amazing-tree .amazing-tree-row-wrapper .amazing-tree-drop-line.is-next[data-v-f93b9531]{bottom:0}.amazing-tree .amazing-tree-row[data-v-f93b9531]{display:flex;align-items:center;gap:4px;box-sizing:border-box;min-height:24px;padding:0 8px;white-space:nowrap}.amazing-tree .amazing-tree-row[data-v-f93b9531]:hover{background:var(--vtree-hover)}.amazing-tree .amazing-tree-row.is-active[data-v-f93b9531],.amazing-tree .amazing-tree-row.is-active[data-v-f93b9531]:hover{background:var(--active-color)}.amazing-tree .amazing-tree-row.is-target-inner[data-v-f93b9531]{outline:2px dashed #409eff}.amazing-tree .amazing-tree-row .amazing-tree-caret-box[data-v-f93b9531]{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-f93b9531]{pointer-events:none}.amazing-tree .amazing-tree-row .amazing-tree-caret[data-v-f93b9531]{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-f93b9531]{transform:rotate(0)}.amazing-tree .amazing-tree-row .amazing-tree-label[data-v-f93b9531]{color:inherit}.amazing-tree .amazing-tree-ghost[data-v-f93b9531]{position:fixed;left:16px;width:120px;height:24px;background:#409eff33;border:1px solid #409eff;pointer-events:none}.amazing-tree .amazing-tree-empty[data-v-f93b9531]{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.amazing-tree .amazing-tree-empty[data-v-f93b9531]>*{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.amazing-tree .amazing-tree-empty .amazing-tree-empty-inner[data-v-f93b9531]{color:var(--vtree-text)}[data-v-f93b9531] .amazing-tree::-webkit-scrollbar{width:8px;height:8px}[data-v-f93b9531] .amazing-tree::-webkit-scrollbar-track{background:transparent}[data-v-f93b9531] .amazing-tree::-webkit-scrollbar-thumb{background-color:#9093994d;border-radius:4px}[data-v-f93b9531] .amazing-tree::-webkit-scrollbar-thumb:hover{background-color:#90939980}
+.amazing-tree[data-v-e0a4c022]{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-e0a4c022],.amazing-tree.is-dragging[data-v-e0a4c022] *{-webkit-user-select:none;user-select:none}.amazing-tree[data-v-e0a4c022] *{cursor:pointer}.amazing-tree input[type=checkbox][data-v-e0a4c022]:disabled{cursor:not-allowed}.amazing-tree .amazing-tree-checkbox[data-v-e0a4c022]{-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-e0a4c022]:not(:disabled):hover{border-color:var(--vtree-checkbox-hover-border)}.amazing-tree .amazing-tree-checkbox[data-v-e0a4c022]:focus-visible{box-shadow:0 0 0 2px #409eff33}.amazing-tree .amazing-tree-checkbox[data-v-e0a4c022]:checked{background:var(--vtree-primary);border-color:var(--vtree-primary)}.amazing-tree .amazing-tree-checkbox[data-v-e0a4c022]: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-e0a4c022]:indeterminate{background:var(--vtree-primary);border-color:var(--vtree-primary)}.amazing-tree .amazing-tree-checkbox[data-v-e0a4c022]: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-e0a4c022]:disabled{background:var(--vtree-checkbox-disabled-bg);border-color:var(--vtree-checkbox-disabled-border)}.amazing-tree .amazing-tree-checkbox[data-v-e0a4c022]:disabled:checked:after{border-color:var(--vtree-checkbox-check-disabled)}.amazing-tree .amazing-tree-checkbox[data-v-e0a4c022]:disabled:indeterminate:after{background:var(--vtree-checkbox-check-disabled)}.amazing-tree .amazing-tree-row-wrapper[data-v-e0a4c022]{position:relative}.amazing-tree .amazing-tree-row-wrapper .amazing-tree-drop-line[data-v-e0a4c022]{position:absolute;left:0;right:0;height:0;border-top:2px solid #409eff}.amazing-tree .amazing-tree-row-wrapper .amazing-tree-drop-line.is-prev[data-v-e0a4c022]{top:0}.amazing-tree .amazing-tree-row-wrapper .amazing-tree-drop-line.is-next[data-v-e0a4c022]{bottom:0}.amazing-tree .amazing-tree-row[data-v-e0a4c022]{display:flex;align-items:center;gap:4px;box-sizing:border-box;min-height:24px;padding:0 8px;white-space:nowrap}.amazing-tree .amazing-tree-row[data-v-e0a4c022]:hover{background:var(--vtree-hover)}.amazing-tree .amazing-tree-row.is-active[data-v-e0a4c022],.amazing-tree .amazing-tree-row.is-active[data-v-e0a4c022]:hover{background:var(--active-color)}.amazing-tree .amazing-tree-row.is-target-inner[data-v-e0a4c022]{outline:2px dashed #409eff}.amazing-tree .amazing-tree-row .amazing-tree-caret-box[data-v-e0a4c022]{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-e0a4c022]{pointer-events:none}.amazing-tree .amazing-tree-row .amazing-tree-caret[data-v-e0a4c022]{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-e0a4c022]{transform:rotate(0)}.amazing-tree .amazing-tree-row .amazing-tree-label[data-v-e0a4c022]{color:inherit}.amazing-tree .amazing-tree-ghost[data-v-e0a4c022]{position:fixed;left:16px;width:120px;height:24px;background:#409eff33;border:1px solid #409eff;pointer-events:none}.amazing-tree .amazing-tree-empty[data-v-e0a4c022]{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.amazing-tree .amazing-tree-empty[data-v-e0a4c022]>*{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.amazing-tree .amazing-tree-empty .amazing-tree-empty-inner[data-v-e0a4c022]{color:var(--vtree-text)}[data-v-e0a4c022] .amazing-tree::-webkit-scrollbar{width:8px;height:8px}[data-v-e0a4c022] .amazing-tree::-webkit-scrollbar-track{background:transparent}[data-v-e0a4c022] .amazing-tree::-webkit-scrollbar-thumb{background-color:#9093994d;border-radius:4px}[data-v-e0a4c022] .amazing-tree::-webkit-scrollbar-thumb:hover{background-color:#90939980}

package/dist/amazing-tree.es.js

@@ -1,8 +1,8 @@
-import { defineComponent as Oe, computed as N, ref as s, reactive as we, watch as _, nextTick as C, onMounted as Pe, onUnmounted as Ve, watchEffect as Ue, createElementBlock as z, openBlock as T, normalizeStyle as W, normalizeClass as $, Fragment as ke, createElementVNode as Y, createCommentVNode as ne, renderList as $e, withModifiers as se, renderSlot as Ce, toDisplayString as be } from "vue";
-const qe = ["onMousedown", "onClick", "onContextmenu"], je = ["onClick"], Ge = ["checked", "indeterminate", "disabled", "onClick"], Je = { class: "amazing-tree-label" }, Qe = {
+import { defineComponent as Pe, computed as _, ref as d, reactive as ke, watch as W, nextTick as C, onMounted as Ve, onUnmounted as Ue, watchEffect as $e, createElementBlock as K, openBlock as E, normalizeStyle as O, normalizeClass as Q, Fragment as Ce, createElementVNode as Y, createCommentVNode as ne, renderList as qe, withModifiers as re, renderSlot as be, toDisplayString as Se } from "vue";
+const Qe = ["onMousedown", "onClick", "onContextmenu"], je = ["onClick"], Ge = ["checked", "indeterminate", "disabled", "onClick"], Je = { class: "amazing-tree-label" }, Xe = {
   key: 1,
   class: "amazing-tree-empty"
-}, Xe = { class: "amazing-tree-empty-inner" }, q = 28, Ze = /* @__PURE__ */ Oe({
+}, Ze = { class: "amazing-tree-empty-inner" }, j = 28, et = /* @__PURE__ */ Pe({
   __name: "AmazingTree",
   props: {
     data: {},
@@ -22,417 +22,436 @@ const qe = ["onMousedown", "onClick", "onContextmenu"], je = ["onClick"], Ge = [
     showCheckbox: { type: Boolean, default: !1 },
     checkStrictly: { type: Boolean, default: !1 },
     defaultCheckedKeys: { default: () => [] },
-    disabledChecked: {}
+    disabledChecked: {},
+    filterNodeMethod: {}
   },
   emits: ["node-click", "node-contextmenu", "node-drop", "current-change", "check-change"],
-  setup(g, { expose: le, emit: j }) {
-    const l = g, L = j, Se = N(() => l.props.value || "value"), Me = N(() => l.props.label || "label"), G = N(() => l.props.children || "children"), Ae = N(() => Array.isArray(l.data) ? l.data.length === 0 : !0), w = s(/* @__PURE__ */ new Set()), h = s(/* @__PURE__ */ new Set()), p = s(/* @__PURE__ */ new Set());
-    function re(e) {
-      return w.value.has(e);
-    }
-    function ze(e) {
-      w.value.has(e) ? w.value.delete(e) : w.value.add(e), i.value = b(l.data || []), C(() => {
-        I(), x();
+  setup(g, { expose: le, emit: G }) {
+    const l = g, L = G, Me = _(() => l.props.value || "value"), Ae = _(() => l.props.label || "label"), J = _(() => l.props.children || "children"), ze = _(() => Array.isArray(l.data) ? l.data.length === 0 : !0), x = d(/* @__PURE__ */ new Set()), p = d(/* @__PURE__ */ new Set()), y = d(/* @__PURE__ */ new Set()), ae = d(null);
+    function de(e) {
+      return x.value.has(e);
+    }
+    function Te(e) {
+      x.value.has(e) ? x.value.delete(e) : x.value.add(e), i.value = b(l.data || []), C(() => {
+        A(), m();
       });
     }
-    function k(e) {
-      return e[Se.value];
+    function w(e) {
+      return e[Me.value];
     }
-    function K(e) {
-      const t = e[G.value];
+    function S(e) {
+      const t = e[J.value];
       return Array.isArray(t) ? t : [];
     }
-    function Te(e) {
-      return h.value.has(e);
-    }
     function Ke(e) {
       return p.value.has(e);
     }
-    function ae(e, t) {
-      if (t ? h.value.add(e) : h.value.delete(e), p.value.delete(e), !l.checkStrictly) {
-        const n = ie(e, l.data || []);
+    function Ee(e) {
+      return y.value.has(e);
+    }
+    function oe(e, t) {
+      if (t ? p.value.add(e) : p.value.delete(e), y.value.delete(e), !l.checkStrictly) {
+        const n = se(e, l.data || []);
         if (n) {
           const a = [n];
           for (; a.length; ) {
-            const c = a.pop(), o = k(c);
-            t ? h.value.add(o) : h.value.delete(o), p.value.delete(o);
-            const f = K(c);
-            for (const r of f) a.push(r);
+            const c = a.pop(), o = w(c);
+            t ? p.value.add(o) : p.value.delete(o), y.value.delete(o);
+            const v = S(c);
+            for (const r of v) a.push(r);
           }
-          const u = Z(e, l.data || []) || [];
+          const u = te(e, l.data || []) || [];
           for (const c of u) {
-            const o = k(c), f = K(c);
-            let r = !0, d = !1;
-            for (const y of f) {
-              const te = k(y), xe = h.value.has(te), ye = p.value.has(te);
-              (xe || ye) && (d = !0), (!xe || ye) && (r = !1);
+            const o = w(c), v = S(c);
+            let r = !0, s = !1;
+            for (const h of v) {
+              const N = w(h), ye = p.value.has(N), we = y.value.has(N);
+              (ye || we) && (s = !0), (!ye || we) && (r = !1);
             }
-            f.length === 0 ? (h.value.has(o), p.value.delete(o)) : r ? (h.value.add(o), p.value.delete(o)) : d ? (h.value.delete(o), p.value.add(o)) : (h.value.delete(o), p.value.delete(o));
+            v.length === 0 ? (p.value.has(o), y.value.delete(o)) : r ? (p.value.add(o), y.value.delete(o)) : s ? (p.value.delete(o), y.value.add(o)) : (p.value.delete(o), y.value.delete(o));
           }
         }
       }
     }
-    function de(e) {
-      h.value = /* @__PURE__ */ new Set(), p.value = /* @__PURE__ */ new Set();
-      for (const t of e || []) ae(t, !0);
+    function ve(e) {
+      p.value = /* @__PURE__ */ new Set(), y.value = /* @__PURE__ */ new Set();
+      for (const t of e || []) oe(t, !0);
     }
-    function Ee(e, t) {
+    function Ie(e, t) {
       const n = t.target;
-      l.disabledChecked && l.disabledChecked(e.node) || (L("check-change", e.node, !!n.checked), ae(e.id, !!n.checked));
+      l.disabledChecked && l.disabledChecked(e.node) || (L("check-change", e.node, !!n.checked), oe(e.id, !!n.checked));
     }
     function b(e) {
       const t = [];
       function n(a, u, c) {
         for (let o = 0; o < a.length; o++) {
-          const f = a[o], r = k(f), d = K(f), y = d.length === 0;
-          t.push({ id: r, node: f, parent: u, level: c, index: o, isLeaf: y }), !y && w.value.has(r) && n(d, f, c + 1);
+          const v = a[o], r = w(v), s = S(v), h = s.length === 0;
+          t.push({ id: r, node: v, parent: u, level: c, index: o, isLeaf: h }), !h && x.value.has(r) && n(s, v, c + 1);
         }
       }
-      return n(e, null, 0), t;
+      if (n(e, null, 0), l.filterNodeMethod && ae.value != null) {
+        let a = function(o) {
+          const v = w(o), r = S(o);
+          let s = !1;
+          for (const N of r) s = a(N) || s;
+          const h = !!l.filterNodeMethod(ae.value, o);
+          return h && u.add(v), s && c.add(v), h || s;
+        };
+        const u = /* @__PURE__ */ new Set(), c = /* @__PURE__ */ new Set();
+        for (const o of e) a(o);
+        return t.filter((o) => u.has(o.id) || c.has(o.id));
+      }
+      return t;
     }
-    const v = s(null), E = s(0), O = s(0), i = s([]), R = we(/* @__PURE__ */ new Map()), m = N(() => {
+    const f = d(null), I = d(0), P = d(0), i = d([]), R = ke(/* @__PURE__ */ new Map()), k = _(() => {
       let e = 0;
       const t = [];
       for (const n of i.value) {
-        const a = R.get(n.id) || q;
+        const a = R.get(n.id) || j;
         e += a, t.push(e);
       }
       return t;
-    }), ve = N(() => {
-      const e = m.value;
+    }), fe = _(() => {
+      const e = k.value;
       return e.length ? e[e.length - 1] : 0;
     });
-    function fe(e) {
-      let t = 0, n = m.value.length - 1, a = 0;
+    function he(e) {
+      let t = 0, n = k.value.length - 1, a = 0;
       for (; t <= n; ) {
         const u = t + n >> 1;
-        m.value[u] !== void 0 && m.value[u] >= e ? (a = u, n = u - 1) : t = u + 1;
+        k.value[u] !== void 0 && k.value[u] >= e ? (a = u, n = u - 1) : t = u + 1;
       }
       return a;
     }
-    const B = s(0), S = s(0), D = s(0), oe = s(0);
-    function x() {
-      if (O.value = v.value?.clientHeight || 0, m.value.length === 0 || i.value.length === 0) {
-        B.value = 0, S.value = 0, D.value = 0, oe.value = 0;
+    const B = d(0), M = d(0), H = d(0), ue = d(0);
+    function m() {
+      if (P.value = f.value?.clientHeight || 0, k.value.length === 0 || i.value.length === 0) {
+        B.value = 0, M.value = 0, H.value = 0, ue.value = 0;
         return;
       }
-      const e = fe(E.value);
+      const e = he(I.value);
       B.value = Math.max(0, e - 3);
-      const t = i.value[B.value], n = t ? R.get(t.id) || q : 0, u = (m.value[B.value] ?? 0) - n;
-      D.value = Math.max(0, u);
+      const t = i.value[B.value], n = t ? R.get(t.id) || j : 0, u = (k.value[B.value] ?? 0) - n;
+      H.value = Math.max(0, u);
       let c = B.value;
-      const o = E.value + O.value + 3 * q;
-      for (; c < i.value.length && (m.value[c] ?? 0) < o; ) c++;
-      S.value = Math.min(i.value.length, c + 1);
-      const r = (m.value[S.value - 1] ?? 0) - D.value;
-      if (r < O.value && S.value < i.value.length) {
-        let d = S.value, y = r;
-        for (; y < O.value && d < i.value.length; )
-          d++, y = (m.value[d - 1] ?? 0) - D.value;
-        S.value = d;
+      const o = I.value + P.value + 3 * j;
+      for (; c < i.value.length && (k.value[c] ?? 0) < o; ) c++;
+      M.value = Math.min(i.value.length, c + 1);
+      const r = (k.value[M.value - 1] ?? 0) - H.value;
+      if (r < P.value && M.value < i.value.length) {
+        let s = M.value, h = r;
+        for (; h < P.value && s < i.value.length; )
+          s++, h = (k.value[s - 1] ?? 0) - H.value;
+        M.value = s;
       }
-      oe.value = Math.max(0, ve.value - D.value - ((m.value[S.value - 1] ?? 0) - D.value));
-    }
-    _([E, () => l.data, w], () => {
-      i.value = b(l.data || []), C(I), x();
-    }), Pe(() => {
-      i.value = b(l.data || []), C(I), x(), l.defaultCheckedKeys && l.defaultCheckedKeys.length && de(l.defaultCheckedKeys), v.value && (P = new ResizeObserver(() => {
-        O.value = v.value?.clientHeight || 0, x();
-      }), P.observe(v.value));
+      ue.value = Math.max(0, fe.value - H.value - ((k.value[M.value - 1] ?? 0) - H.value));
+    }
+    W([I, () => l.data, x], () => {
+      i.value = b(l.data || []), C(A), m();
+    }), Ve(() => {
+      i.value = b(l.data || []), C(A), m(), l.defaultCheckedKeys && l.defaultCheckedKeys.length && ve(l.defaultCheckedKeys), f.value && (V = new ResizeObserver(() => {
+        P.value = f.value?.clientHeight || 0, m();
+      }), V.observe(f.value));
     });
-    let P = null;
-    Ve(() => {
-      P && (P.disconnect(), P = null);
+    let V = null;
+    Ue(() => {
+      V && (V.disconnect(), V = null);
     });
-    const J = we(/* @__PURE__ */ new Map());
-    function Ie(e, t) {
-      t ? J.set(e, t) : J.delete(e);
+    const X = ke(/* @__PURE__ */ new Map());
+    function Le(e, t) {
+      t ? X.set(e, t) : X.delete(e);
     }
-    function I() {
+    function A() {
       let e = !1;
-      for (const t of i.value.slice(B.value, S.value)) {
-        const n = J.get(t.id);
+      for (const t of i.value.slice(B.value, M.value)) {
+        const n = X.get(t.id);
         if (n) {
           const a = n.offsetHeight;
           (!R.has(t.id) || R.get(t.id) !== a) && (R.set(t.id, a), e = !0);
         }
       }
-      e && x();
+      e && m();
     }
-    function Le() {
-      E.value = v.value?.scrollTop || 0, x();
+    function Re() {
+      I.value = f.value?.scrollTop || 0, m();
     }
-    const M = s(!1), ue = s(null), V = s(null), A = s(null), ce = s(0), H = s(null), U = s(0);
+    const z = d(!1), ce = d(null), U = d(null), T = d(null), ie = d(0), D = d(null), $ = d(0);
     let F = null;
-    function Q() {
+    function Z() {
       F != null && (cancelAnimationFrame(F), F = null);
     }
-    function he() {
-      if (!M.value || U.value === 0) {
-        Q();
+    function pe() {
+      if (!z.value || $.value === 0) {
+        Z();
         return;
       }
-      const e = v.value;
+      const e = f.value;
       if (!e) {
-        Q();
+        Z();
         return;
       }
       const t = e.scrollHeight - e.clientHeight, n = 12;
-      e.scrollTop = Math.max(0, Math.min(t, e.scrollTop + U.value * n)), E.value = e.scrollTop, x(), F = requestAnimationFrame(he);
+      e.scrollTop = Math.max(0, Math.min(t, e.scrollTop + $.value * n)), I.value = e.scrollTop, m(), F = requestAnimationFrame(pe);
     }
-    function Re() {
-      U.value !== 0 && F == null && (F = requestAnimationFrame(he)), U.value === 0 && Q();
+    function Be() {
+      $.value !== 0 && F == null && (F = requestAnimationFrame(pe)), $.value === 0 && Z();
     }
-    function X(e) {
+    function ee(e) {
       if (e == null) return null;
       for (const t of i.value) if (t.id === e) return t;
       return null;
     }
-    function Be(e) {
-      const t = v.value.getBoundingClientRect(), n = e - t.top + E.value;
-      return fe(n);
+    function He(e) {
+      const t = f.value.getBoundingClientRect(), n = e - t.top + I.value;
+      return he(n);
     }
     function De(e, t) {
-      !l.draggable || t.button !== 0 || !(!l.allowDrag || l.allowDrag(e.node)) || (M.value = !0, ue.value = e.id, ce.value = t.clientY, t.preventDefault(), window.addEventListener("mousemove", ge), window.addEventListener("mouseup", pe));
+      !l.draggable || t.button !== 0 || !(!l.allowDrag || l.allowDrag(e.node)) || (z.value = !0, ce.value = e.id, ie.value = t.clientY, t.preventDefault(), window.addEventListener("mousemove", ge), window.addEventListener("mouseup", me));
     }
     function ge(e) {
-      if (!M.value) return;
-      ce.value = e.clientY;
-      const t = Be(e.clientY), n = i.value[Math.min(Math.max(t, 0), i.value.length - 1)];
-      if (V.value = n?.id ?? null, !n) {
-        A.value = null;
+      if (!z.value) return;
+      ie.value = e.clientY;
+      const t = He(e.clientY), n = i.value[Math.min(Math.max(t, 0), i.value.length - 1)];
+      if (U.value = n?.id ?? null, !n) {
+        T.value = null;
         return;
       }
-      const a = m.value[t] ?? 0, u = R.get(n.id) ?? q, c = a - u, o = v.value.getBoundingClientRect(), r = (e.clientY - o.top + E.value - c) / u;
-      let d = "inner";
-      r < 0.25 ? d = "prev" : r > 0.75 && (d = "next");
-      const y = X(ue.value), te = l.allowDrop ? !!(y && l.allowDrop(y.node, n.node, d)) : !0;
-      A.value = te ? d : null, U.value = e.clientY > o.bottom ? 1 : e.clientY < o.top ? -1 : 0, Re();
+      const a = k.value[t] ?? 0, u = R.get(n.id) ?? j, c = a - u, o = f.value.getBoundingClientRect(), r = (e.clientY - o.top + I.value - c) / u;
+      let s = "inner";
+      r < 0.25 ? s = "prev" : r > 0.75 && (s = "next");
+      const h = ee(ce.value), N = l.allowDrop ? !!(h && l.allowDrop(h.node, n.node, s)) : !0;
+      T.value = N ? s : null, $.value = e.clientY > o.bottom ? 1 : e.clientY < o.top ? -1 : 0, Be();
     }
-    function Z(e, t, n = []) {
+    function te(e, t, n = []) {
       for (const a of t) {
-        if (k(a) === e) return n;
-        const u = K(a);
+        if (w(a) === e) return n;
+        const u = S(a);
         if (u.length) {
-          const c = Z(e, u, [...n, a]);
+          const c = te(e, u, [...n, a]);
           if (c) return c;
         }
       }
       return null;
     }
-    function ie(e, t) {
+    function se(e, t) {
       if (e == null) return null;
       for (const n of t) {
-        if (k(n) === e) return n;
-        const a = K(n), u = ie(e, a);
+        if (w(n) === e) return n;
+        const a = S(n), u = se(e, a);
         if (u) return u;
       }
       return null;
     }
-    function ee(e) {
+    function q(e) {
       const t = [];
       for (const n of e) {
-        t.push(k(n));
-        const a = K(n);
-        a.length && t.push(...ee(a));
+        t.push(w(n));
+        const a = S(n);
+        a.length && t.push(...q(a));
       }
       return t;
     }
-    function He(e) {
+    function Ye(e) {
       const t = e.parent;
       if (t)
-        K(t).splice(e.index, 1);
+        S(t).splice(e.index, 1);
       else {
-        const n = l.data.findIndex((a) => k(a) === e.id);
+        const n = l.data.findIndex((a) => w(a) === e.id);
         n >= 0 && l.data.splice(n, 1);
       }
     }
-    function Ye(e, t, n) {
+    function Fe(e, t, n) {
       if (n === "inner") {
-        Array.isArray(t.node[G.value]) || (t.node[G.value] = []), t.node[G.value].push(e), w.value.add(t.id);
+        Array.isArray(t.node[J.value]) || (t.node[J.value] = []), t.node[J.value].push(e), x.value.add(t.id);
         return;
       }
       const a = t.parent;
       if (a) {
-        const u = K(a), c = t.index + (n === "next" ? 1 : 0);
+        const u = S(a), c = t.index + (n === "next" ? 1 : 0);
         u.splice(c, 0, e);
       } else {
         const u = t.index + (n === "next" ? 1 : 0);
         l.data.splice(u, 0, e);
       }
     }
-    function pe() {
-      if (window.removeEventListener("mousemove", ge), window.removeEventListener("mouseup", pe), Q(), !M.value) return;
-      const e = X(ue.value), t = X(V.value), n = A.value;
-      if (M.value = !1, A.value = null, V.value = null, !e || !t || !n || l.allowDrop && !l.allowDrop(e.node, t.node, n) || e.id === t.id) return;
+    function me() {
+      if (window.removeEventListener("mousemove", ge), window.removeEventListener("mouseup", me), Z(), !z.value) return;
+      const e = ee(ce.value), t = ee(U.value), n = T.value;
+      if (z.value = !1, T.value = null, U.value = null, !e || !t || !n || l.allowDrop && !l.allowDrop(e.node, t.node, n) || e.id === t.id) return;
       const a = n === "inner" ? t.node : t.parent || null;
       if (a) {
-        const f = Z(k(a), l.data || []) || [];
-        for (const r of f) if (k(r) === e.id) return;
+        const v = te(w(a), l.data || []) || [];
+        for (const r of v) if (w(r) === e.id) return;
       }
       const u = e.node;
-      He(e);
+      Ye(e);
       const c = b(l.data || []);
       i.value = c;
-      const o = X(t.id) || t;
-      Ye(u, o, n), i.value = b(l.data || []), C(() => {
-        I(), x();
+      const o = ee(t.id) || t;
+      Fe(u, o, n), i.value = b(l.data || []), C(() => {
+        A(), m();
       }), L("node-drop", u, o.node, n);
     }
-    function Fe(e, t) {
-      H.value = e.id, L("node-click", e.node, t);
-    }
     function Ne(e, t) {
+      D.value = e.id, L("node-click", e.node, t);
+    }
+    function _e(e, t) {
       L("node-contextmenu", e.node, t);
     }
-    Ue(() => {
-      C(I);
-    }), _(
+    $e(() => {
+      C(A);
+    }), W(
       () => l.currentNodeKey,
       (e) => {
-        H.value = e ?? null;
+        D.value = e ?? null;
       },
       { immediate: !0 }
-    ), _(
+    ), W(
       () => l.defaultExpandedKeys,
       (e) => {
-        w.value = new Set(e || []), i.value = b(l.data || []), C(() => {
-          I(), x();
+        x.value = new Set(e || []), i.value = b(l.data || []), C(() => {
+          A(), m();
         });
       },
       { immediate: !0 }
-    ), _(
+    ), W(
       () => l.defaultExpandAll,
       (e) => {
-        e && (w.value = new Set(ee(l.data || [])), i.value = b(l.data || []), C(() => {
-          I(), x();
+        e && (x.value = new Set(q(l.data || [])), i.value = b(l.data || []), C(() => {
+          A(), m();
         }));
       },
       { immediate: !0 }
-    ), _(
+    ), W(
       () => l.data,
       () => {
-        l.defaultExpandAll && (w.value = new Set(ee(l.data || [])), i.value = b(l.data || []), C(() => {
-          I(), x();
-        }));
-        const e = new Set(ee(l.data || []));
-        h.value = new Set([...h.value].filter((t) => e.has(t))), p.value = new Set([...p.value].filter((t) => e.has(t)));
-      }
+        l.defaultExpandAll && (x.value = new Set(q(l.data || []))), i.value = b(l.data || []), C(() => {
+          A(), m();
+        });
+        const e = new Set(q(l.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 _e(e) {
-      const t = Z(e, l.data || []) || [];
-      for (const n of t) w.value.add(k(n));
+    function We(e) {
+      const t = te(e, l.data || []) || [];
+      for (const n of t) x.value.add(w(n));
       i.value = b(l.data || []);
     }
-    function me(e) {
-      e != null && (_e(e), C(() => {
+    function xe(e) {
+      e != null && (We(e), C(() => {
         const t = i.value.findIndex((o) => o.id === e);
-        if (t < 0 || !v.value) return;
-        const n = R.get(e) || q, a = (m.value[t] ?? 0) - n, u = v.value.clientHeight, c = Math.max(0, a - Math.max(0, (u - n) / 2));
-        v.value.scrollTop = c, E.value = c, x(), C(() => {
-          const o = J.get(e);
-          if (!o || !v.value) return;
-          const f = o.offsetLeft, r = o.offsetWidth, d = v.value.clientWidth, y = Math.max(0, f + Math.max(0, r / 2) - Math.max(0, d / 2));
-          v.value.scrollLeft = y;
+        if (t < 0 || !f.value) return;
+        const n = R.get(e) || j, a = (k.value[t] ?? 0) - n, u = f.value.clientHeight, c = Math.max(0, a - Math.max(0, (u - n) / 2));
+        f.value.scrollTop = c, I.value = c, m(), C(() => {
+          const o = X.get(e);
+          if (!o || !f.value) return;
+          const v = o.offsetLeft, r = o.offsetWidth, s = f.value.clientWidth, h = Math.max(0, v + Math.max(0, r / 2) - Math.max(0, s / 2));
+          f.value.scrollLeft = h;
         });
       }));
     }
-    function We(e) {
-      H.value = e ?? null, me(H.value);
+    function Oe(e) {
+      D.value = e ?? null, xe(D.value);
     }
     return le({
-      getCurrentKey: () => H.value,
-      setCurrentKey: We,
-      scrollTo: me,
-      getCheckedKeys: () => Array.from(h.value),
-      setCheckedKeys: de,
-      setChecked: (e, t) => ae(e, t)
-    }), _(H, (e) => {
-      const t = ie(e, l.data || []);
+      getCurrentKey: () => D.value,
+      setCurrentKey: Oe,
+      scrollTo: xe,
+      getCheckedKeys: () => Array.from(p.value),
+      setCheckedKeys: ve,
+      setChecked: (e, t) => oe(e, t),
+      filter: (e) => {
+        ae.value = e, x.value = new Set(q(l.data || [])), i.value = b(l.data || []), C(() => {
+          A(), m();
+        });
+      }
+    }), W(D, (e) => {
+      const t = se(e, l.data || []);
       t && L("current-change", t);
-    }), (e, t) => (T(), z("div", {
+    }), (e, t) => (E(), K("div", {
       ref_key: "containerRef",
-      ref: v,
-      class: $(["amazing-tree", { "is-dragging": M.value }]),
-      style: W({ height: typeof g.height == "number" ? g.height + "px" : g.height || "100%", "--vtree-bg": g.backgroundColor, "--vtree-text": g.textColor, "--vtree-hover": g.hoverColor }),
-      onScroll: Le
+      ref: f,
+      class: Q(["amazing-tree", { "is-dragging": z.value }]),
+      style: O({ height: typeof g.height == "number" ? g.height + "px" : g.height || "100%", "--vtree-bg": g.backgroundColor, "--vtree-text": g.textColor, "--vtree-hover": g.hoverColor }),
+      onScroll: Re
     }, [
-      Ae.value ? (T(), z("div", Qe, [
-        Ce(e.$slots, "empty", {}, () => [
-          Y("div", Xe, be(g.emptyText), 1)
+      ze.value ? (E(), K("div", Xe, [
+        be(e.$slots, "empty", {}, () => [
+          Y("div", Ze, Se(g.emptyText), 1)
         ], !0)
-      ])) : (T(), z(ke, { key: 0 }, [
+      ])) : (E(), K(Ce, { key: 0 }, [
         Y("div", {
-          style: W({ height: ve.value + "px", position: "relative", minWidth: "100%", width: "max-content" })
+          style: O({ height: fe.value + "px", position: "relative", minWidth: "100%", width: "max-content" })
         }, [
           Y("div", {
-            style: W({ height: D.value + "px" })
+            style: O({ height: H.value + "px" })
           }, null, 4),
-          (T(!0), z(ke, null, $e(i.value.slice(B.value, S.value), (n) => (T(), z("div", {
+          (E(!0), K(Ce, null, qe(i.value.slice(B.value, M.value), (n) => (E(), K("div", {
             key: n.id,
             class: "amazing-tree-row-wrapper"
           }, [
             Y("div", {
-              class: $(["amazing-tree-row", { "is-target-inner": M.value && V.value === n.id && A.value === "inner", "is-active": H.value === n.id }]),
-              style: W({ paddingLeft: n.level * 16 + "px", "--active-color": g.highlightColor }),
+              class: Q(["amazing-tree-row", { "is-target-inner": z.value && U.value === n.id && T.value === "inner", "is-active": D.value === n.id }]),
+              style: O({ paddingLeft: n.level * 16 + "px", "--active-color": g.highlightColor }),
               onMousedown: (a) => De(n, a),
-              onClick: (a) => Fe(n, a),
-              onContextmenu: se((a) => Ne(n, a), ["prevent"]),
+              onClick: (a) => Ne(n, a),
+              onContextmenu: re((a) => _e(n, a), ["prevent"]),
               ref_for: !0,
-              ref: (a) => Ie(n.id, a)
+              ref: (a) => Le(n.id, a)
             }, [
               Y("span", {
-                class: $(["amazing-tree-caret-box", { "is-leaf": n.isLeaf }]),
-                onClick: se((a) => !n.isLeaf && ze(n.id), ["stop"])
+                class: Q(["amazing-tree-caret-box", { "is-leaf": n.isLeaf }]),
+                onClick: re((a) => !n.isLeaf && Te(n.id), ["stop"])
               }, [
-                n.isLeaf ? ne("", !0) : (T(), z("span", {
+                n.isLeaf ? ne("", !0) : (E(), K("span", {
                   key: 0,
-                  class: $(["amazing-tree-caret", { expanded: re(n.id) }])
+                  class: Q(["amazing-tree-caret", { expanded: de(n.id) }])
                 }, null, 2))
               ], 10, je),
-              g.showCheckbox ? (T(), z("input", {
+              g.showCheckbox ? (E(), K("input", {
                 key: 0,
                 class: "amazing-tree-checkbox",
                 type: "checkbox",
-                checked: Te(n.id),
-                indeterminate: Ke(n.id),
+                checked: Ke(n.id),
+                indeterminate: Ee(n.id),
                 disabled: l.disabledChecked ? l.disabledChecked(n.node) : !1,
-                onClick: se((a) => Ee(n, a), ["stop"])
+                onClick: re((a) => Ie(n, a), ["stop"])
               }, null, 8, Ge)) : ne("", !0),
-              Ce(e.$slots, "default", {
+              be(e.$slots, "default", {
                 node: n.node,
                 data: n.node,
                 level: n.level,
-                expanded: re(n.id),
+                expanded: de(n.id),
                 isLeaf: n.isLeaf
               }, () => [
-                Y("span", Je, be(n.node[Me.value]), 1)
+                Y("span", Je, Se(n.node[Ae.value]), 1)
               ], !0)
-            ], 46, qe),
-            M.value && V.value === n.id && (A.value === "prev" || A.value === "next") ? (T(), z("div", {
+            ], 46, Qe),
+            z.value && U.value === n.id && (T.value === "prev" || T.value === "next") ? (E(), K("div", {
               key: 0,
-              class: $(["amazing-tree-drop-line", { "is-prev": A.value === "prev", "is-next": A.value === "next" }])
+              class: Q(["amazing-tree-drop-line", { "is-prev": T.value === "prev", "is-next": T.value === "next" }])
             }, null, 2)) : ne("", !0)
           ]))), 128)),
           Y("div", {
-            style: W({ height: oe.value + "px" })
+            style: O({ height: ue.value + "px" })
           }, null, 4)
         ], 4),
-        M.value ? (T(), z("div", {
+        z.value ? (E(), K("div", {
           key: 0,
           class: "amazing-tree-ghost",
-          style: W({ top: ce.value + "px" })
+          style: O({ top: ie.value + "px" })
         }, null, 4)) : ne("", !0)
       ], 64))
     ], 38));
   }
-}), et = (g, le) => {
-  const j = g.__vccOpts || g;
+}), tt = (g, le) => {
+  const G = g.__vccOpts || g;
   for (const [l, L] of le)
-    j[l] = L;
-  return j;
-}, nt = /* @__PURE__ */ et(Ze, [["__scopeId", "data-v-f93b9531"]]);
+    G[l] = L;
+  return G;
+}, lt = /* @__PURE__ */ tt(et, [["__scopeId", "data-v-e0a4c022"]]);
 export {
-  nt as AmazingTree,
-  nt as default
+  lt as AmazingTree,
+  lt as default
 };

package/dist/amazing-tree.umd.js

@@ -1 +1 @@
-(function(z,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(z=typeof globalThis<"u"?globalThis:z||self,t(z.AmazingTree={},z.Vue))})(this,(function(z,t){"use strict";const fe=["onMousedown","onClick","onContextmenu"],he=["onClick"],ve=["checked","indeterminate","disabled","onClick"],me={class:"amazing-tree-label"},pe={key:1,class:"amazing-tree-empty"},ge={class:"amazing-tree-empty-inner"},V=28,te=((m,G)=>{const Y=m.__vccOpts||m;for(const[a,A]of G)Y[a]=A;return Y})(t.defineComponent({__name:"AmazingTree",props:{data:{},props:{default:()=>({value:"value",label:"label",children:"children"})},allowDrag:{},allowDrop:{},height:{default:void 0},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:{}},emits:["node-click","node-contextmenu","node-drop","current-change","check-change"],setup(m,{expose:G,emit:Y}){const a=m,A=Y,ke=t.computed(()=>a.props.value||"value"),xe=t.computed(()=>a.props.label||"label"),O=t.computed(()=>a.props.children||"children"),ye=t.computed(()=>Array.isArray(a.data)?a.data.length===0:!0),y=t.ref(new Set),v=t.ref(new Set),p=t.ref(new Set);function ne(e){return y.value.has(e)}function we(e){y.value.has(e)?y.value.delete(e):y.value.add(e),s.value=C(a.data||[]),t.nextTick(()=>{M(),k()})}function w(e){return e[ke.value]}function E(e){const n=e[O.value];return Array.isArray(n)?n:[]}function Ce(e){return v.value.has(e)}function be(e){return p.value.has(e)}function J(e,n){if(n?v.value.add(e):v.value.delete(e),p.value.delete(e),!a.checkStrictly){const l=ee(e,a.data||[]);if(l){const o=[l];for(;o.length;){const r=o.pop(),c=w(r);n?v.value.add(c):v.value.delete(c),p.value.delete(c);const h=E(r);for(const d of h)o.push(d)}const i=U(e,a.data||[])||[];for(const r of i){const c=w(r),h=E(r);let d=!0,u=!1;for(const x of h){const j=w(x),de=v.value.has(j),ue=p.value.has(j);(de||ue)&&(u=!0),(!de||ue)&&(d=!1)}h.length===0?(v.value.has(c),p.value.delete(c)):d?(v.value.add(c),p.value.delete(c)):u?(v.value.delete(c),p.value.add(c)):(v.value.delete(c),p.value.delete(c))}}}}function le(e){v.value=new Set,p.value=new Set;for(const n of e||[])J(n,!0)}function Se(e,n){const l=n.target;a.disabledChecked&&a.disabledChecked(e.node)||(A("check-change",e.node,!!l.checked),J(e.id,!!l.checked))}function C(e){const n=[];function l(o,i,r){for(let c=0;c<o.length;c++){const h=o[c],d=w(h),u=E(h),x=u.length===0;n.push({id:d,node:h,parent:i,level:r,index:c,isLeaf:x}),!x&&y.value.has(d)&&l(u,h,r+1)}}return l(e,null,0),n}const f=t.ref(null),B=t.ref(0),D=t.ref(0),s=t.ref([]),K=t.reactive(new Map),g=t.computed(()=>{let e=0;const n=[];for(const l of s.value){const o=K.get(l.id)||V;e+=o,n.push(e)}return n}),ae=t.computed(()=>{const e=g.value;return e.length?e[e.length-1]:0});function oe(e){let n=0,l=g.value.length-1,o=0;for(;n<=l;){const i=n+l>>1;g.value[i]!==void 0&&g.value[i]>=e?(o=i,l=i-1):n=i+1}return o}const I=t.ref(0),b=t.ref(0),L=t.ref(0),Q=t.ref(0);function k(){if(D.value=f.value?.clientHeight||0,g.value.length===0||s.value.length===0){I.value=0,b.value=0,L.value=0,Q.value=0;return}const e=oe(B.value);I.value=Math.max(0,e-3);const n=s.value[I.value],l=n?K.get(n.id)||V:0,i=(g.value[I.value]??0)-l;L.value=Math.max(0,i);let r=I.value;const c=B.value+D.value+3*V;for(;r<s.value.length&&(g.value[r]??0)<c;)r++;b.value=Math.min(s.value.length,r+1);const d=(g.value[b.value-1]??0)-L.value;if(d<D.value&&b.value<s.value.length){let u=b.value,x=d;for(;x<D.value&&u<s.value.length;)u++,x=(g.value[u-1]??0)-L.value;b.value=u}Q.value=Math.max(0,ae.value-L.value-((g.value[b.value-1]??0)-L.value))}t.watch([B,()=>a.data,y],()=>{s.value=C(a.data||[]),t.nextTick(M),k()}),t.onMounted(()=>{s.value=C(a.data||[]),t.nextTick(M),k(),a.defaultCheckedKeys&&a.defaultCheckedKeys.length&&le(a.defaultCheckedKeys),f.value&&(_=new ResizeObserver(()=>{D.value=f.value?.clientHeight||0,k()}),_.observe(f.value))});let _=null;t.onUnmounted(()=>{_&&(_.disconnect(),_=null)});const P=t.reactive(new Map);function Te(e,n){n?P.set(e,n):P.delete(e)}function M(){let e=!1;for(const n of s.value.slice(I.value,b.value)){const l=P.get(n.id);if(l){const o=l.offsetHeight;(!K.has(n.id)||K.get(n.id)!==o)&&(K.set(n.id,o),e=!0)}}e&&k()}function ze(){B.value=f.value?.scrollTop||0,k()}const S=t.ref(!1),X=t.ref(null),F=t.ref(null),T=t.ref(null),Z=t.ref(0),N=t.ref(null),H=t.ref(0);let R=null;function W(){R!=null&&(cancelAnimationFrame(R),R=null)}function ce(){if(!S.value||H.value===0){W();return}const e=f.value;if(!e){W();return}const n=e.scrollHeight-e.clientHeight,l=12;e.scrollTop=Math.max(0,Math.min(n,e.scrollTop+H.value*l)),B.value=e.scrollTop,k(),R=requestAnimationFrame(ce)}function Ee(){H.value!==0&&R==null&&(R=requestAnimationFrame(ce)),H.value===0&&W()}function q(e){if(e==null)return null;for(const n of s.value)if(n.id===e)return n;return null}function Be(e){const n=f.value.getBoundingClientRect(),l=e-n.top+B.value;return oe(l)}function Me(e,n){!a.draggable||n.button!==0||!(!a.allowDrag||a.allowDrag(e.node))||(S.value=!0,X.value=e.id,Z.value=n.clientY,n.preventDefault(),window.addEventListener("mousemove",ie),window.addEventListener("mouseup",re))}function ie(e){if(!S.value)return;Z.value=e.clientY;const n=Be(e.clientY),l=s.value[Math.min(Math.max(n,0),s.value.length-1)];if(F.value=l?.id??null,!l){T.value=null;return}const o=g.value[n]??0,i=K.get(l.id)??V,r=o-i,c=f.value.getBoundingClientRect(),d=(e.clientY-c.top+B.value-r)/i;let u="inner";d<.25?u="prev":d>.75&&(u="next");const x=q(X.value),j=a.allowDrop?!!(x&&a.allowDrop(x.node,l.node,u)):!0;T.value=j?u:null,H.value=e.clientY>c.bottom?1:e.clientY<c.top?-1:0,Ee()}function U(e,n,l=[]){for(const o of n){if(w(o)===e)return l;const i=E(o);if(i.length){const r=U(e,i,[...l,o]);if(r)return r}}return null}function ee(e,n){if(e==null)return null;for(const l of n){if(w(l)===e)return l;const o=E(l),i=ee(e,o);if(i)return i}return null}function $(e){const n=[];for(const l of e){n.push(w(l));const o=E(l);o.length&&n.push(...$(o))}return n}function Ae(e){const n=e.parent;if(n)E(n).splice(e.index,1);else{const l=a.data.findIndex(o=>w(o)===e.id);l>=0&&a.data.splice(l,1)}}function Ke(e,n,l){if(l==="inner"){Array.isArray(n.node[O.value])||(n.node[O.value]=[]),n.node[O.value].push(e),y.value.add(n.id);return}const o=n.parent;if(o){const i=E(o),r=n.index+(l==="next"?1:0);i.splice(r,0,e)}else{const i=n.index+(l==="next"?1:0);a.data.splice(i,0,e)}}function re(){if(window.removeEventListener("mousemove",ie),window.removeEventListener("mouseup",re),W(),!S.value)return;const e=q(X.value),n=q(F.value),l=T.value;if(S.value=!1,T.value=null,F.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=U(w(o),a.data||[])||[];for(const d of h)if(w(d)===e.id)return}const i=e.node;Ae(e);const r=C(a.data||[]);s.value=r;const c=q(n.id)||n;Ke(i,c,l),s.value=C(a.data||[]),t.nextTick(()=>{M(),k()}),A("node-drop",i,c.node,l)}function Ie(e,n){N.value=e.id,A("node-click",e.node,n)}function Le(e,n){A("node-contextmenu",e.node,n)}t.watchEffect(()=>{t.nextTick(M)}),t.watch(()=>a.currentNodeKey,e=>{N.value=e??null},{immediate:!0}),t.watch(()=>a.defaultExpandedKeys,e=>{y.value=new Set(e||[]),s.value=C(a.data||[]),t.nextTick(()=>{M(),k()})},{immediate:!0}),t.watch(()=>a.defaultExpandAll,e=>{e&&(y.value=new Set($(a.data||[])),s.value=C(a.data||[]),t.nextTick(()=>{M(),k()}))},{immediate:!0}),t.watch(()=>a.data,()=>{a.defaultExpandAll&&(y.value=new Set($(a.data||[])),s.value=C(a.data||[]),t.nextTick(()=>{M(),k()}));const e=new Set($(a.data||[]));v.value=new Set([...v.value].filter(n=>e.has(n))),p.value=new Set([...p.value].filter(n=>e.has(n)))});function Ne(e){const n=U(e,a.data||[])||[];for(const l of n)y.value.add(w(l));s.value=C(a.data||[])}function se(e){e!=null&&(Ne(e),t.nextTick(()=>{const n=s.value.findIndex(c=>c.id===e);if(n<0||!f.value)return;const l=K.get(e)||V,o=(g.value[n]??0)-l,i=f.value.clientHeight,r=Math.max(0,o-Math.max(0,(i-l)/2));f.value.scrollTop=r,B.value=r,k(),t.nextTick(()=>{const c=P.get(e);if(!c||!f.value)return;const h=c.offsetLeft,d=c.offsetWidth,u=f.value.clientWidth,x=Math.max(0,h+Math.max(0,d/2)-Math.max(0,u/2));f.value.scrollLeft=x})}))}function Re(e){N.value=e??null,se(N.value)}return G({getCurrentKey:()=>N.value,setCurrentKey:Re,scrollTo:se,getCheckedKeys:()=>Array.from(v.value),setCheckedKeys:le,setChecked:(e,n)=>J(e,n)}),t.watch(N,e=>{const n=ee(e,a.data||[]);n&&A("current-change",n)}),(e,n)=>(t.openBlock(),t.createElementBlock("div",{ref_key:"containerRef",ref:f,class:t.normalizeClass(["amazing-tree",{"is-dragging":S.value}]),style:t.normalizeStyle({height:typeof m.height=="number"?m.height+"px":m.height||"100%","--vtree-bg":m.backgroundColor,"--vtree-text":m.textColor,"--vtree-hover":m.hoverColor}),onScroll:ze},[ye.value?(t.openBlock(),t.createElementBlock("div",pe,[t.renderSlot(e.$slots,"empty",{},()=>[t.createElementVNode("div",ge,t.toDisplayString(m.emptyText),1)],!0)])):(t.openBlock(),t.createElementBlock(t.Fragment,{key:0},[t.createElementVNode("div",{style:t.normalizeStyle({height:ae.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(I.value,b.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":S.value&&F.value===l.id&&T.value==="inner","is-active":N.value===l.id}]),style:t.normalizeStyle({paddingLeft:l.level*16+"px","--active-color":m.highlightColor}),onMousedown:o=>Me(l,o),onClick:o=>Ie(l,o),onContextmenu:t.withModifiers(o=>Le(l,o),["prevent"]),ref_for:!0,ref:o=>Te(l.id,o)},[t.createElementVNode("span",{class:t.normalizeClass(["amazing-tree-caret-box",{"is-leaf":l.isLeaf}]),onClick:t.withModifiers(o=>!l.isLeaf&&we(l.id),["stop"])},[l.isLeaf?t.createCommentVNode("",!0):(t.openBlock(),t.createElementBlock("span",{key:0,class:t.normalizeClass(["amazing-tree-caret",{expanded:ne(l.id)}])},null,2))],10,he),m.showCheckbox?(t.openBlock(),t.createElementBlock("input",{key:0,class:"amazing-tree-checkbox",type:"checkbox",checked:Ce(l.id),indeterminate:be(l.id),disabled:a.disabledChecked?a.disabledChecked(l.node):!1,onClick:t.withModifiers(o=>Se(l,o),["stop"])},null,8,ve)):t.createCommentVNode("",!0),t.renderSlot(e.$slots,"default",{node:l.node,data:l.node,level:l.level,expanded:ne(l.id),isLeaf:l.isLeaf},()=>[t.createElementVNode("span",me,t.toDisplayString(l.node[xe.value]),1)],!0)],46,fe),S.value&&F.value===l.id&&(T.value==="prev"||T.value==="next")?(t.openBlock(),t.createElementBlock("div",{key:0,class:t.normalizeClass(["amazing-tree-drop-line",{"is-prev":T.value==="prev","is-next":T.value==="next"}])},null,2)):t.createCommentVNode("",!0)]))),128)),t.createElementVNode("div",{style:t.normalizeStyle({height:Q.value+"px"})},null,4)],4),S.value?(t.openBlock(),t.createElementBlock("div",{key:0,class:"amazing-tree-ghost",style:t.normalizeStyle({top:Z.value+"px"})},null,4)):t.createCommentVNode("",!0)],64))],38))}}),[["__scopeId","data-v-f93b9531"]]);z.AmazingTree=te,z.default=te,Object.defineProperties(z,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));
+(function(M,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(M=typeof globalThis<"u"?globalThis:M||self,t(M.AmazingTree={},M.Vue))})(this,(function(M,t){"use strict";const he=["onMousedown","onClick","onContextmenu"],ve=["onClick"],me=["checked","indeterminate","disabled","onClick"],pe={class:"amazing-tree-label"},ge={key:1,class:"amazing-tree-empty"},ke={class:"amazing-tree-empty-inner"},D=28,ne=((p,Q)=>{const P=p.__vccOpts||p;for(const[a,A]of Q)P[a]=A;return P})(t.defineComponent({__name:"AmazingTree",props:{data:{},props:{default:()=>({value:"value",label:"label",children:"children"})},allowDrag:{},allowDrop:{},height:{default:void 0},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(p,{expose:Q,emit:P}){const a=p,A=P,xe=t.computed(()=>a.props.value||"value"),ye=t.computed(()=>a.props.label||"label"),W=t.computed(()=>a.props.children||"children"),we=t.computed(()=>Array.isArray(a.data)?a.data.length===0:!0),k=t.ref(new Set),m=t.ref(new Set),x=t.ref(new Set),G=t.ref(null);function le(e){return k.value.has(e)}function Ce(e){k.value.has(e)?k.value.delete(e):k.value.add(e),s.value=C(a.data||[]),t.nextTick(()=>{T(),g()})}function y(e){return e[xe.value]}function b(e){const n=e[W.value];return Array.isArray(n)?n:[]}function be(e){return m.value.has(e)}function Se(e){return x.value.has(e)}function J(e,n){if(n?m.value.add(e):m.value.delete(e),x.value.delete(e),!a.checkStrictly){const l=te(e,a.data||[]);if(l){const o=[l];for(;o.length;){const r=o.pop(),c=y(r);n?m.value.add(c):m.value.delete(c),x.value.delete(c);const f=b(r);for(const u of f)o.push(u)}const i=j(e,a.data||[])||[];for(const r of i){const c=y(r),f=b(r);let u=!0,d=!1;for(const v of f){const V=y(v),ue=m.value.has(V),fe=x.value.has(V);(ue||fe)&&(d=!0),(!ue||fe)&&(u=!1)}f.length===0?(m.value.has(c),x.value.delete(c)):u?(m.value.add(c),x.value.delete(c)):d?(m.value.delete(c),x.value.add(c)):(m.value.delete(c),x.value.delete(c))}}}}function ae(e){m.value=new Set,x.value=new Set;for(const n of e||[])J(n,!0)}function Te(e,n){const l=n.target;a.disabledChecked&&a.disabledChecked(e.node)||(A("check-change",e.node,!!l.checked),J(e.id,!!l.checked))}function C(e){const n=[];function l(o,i,r){for(let c=0;c<o.length;c++){const f=o[c],u=y(f),d=b(f),v=d.length===0;n.push({id:u,node:f,parent:i,level:r,index:c,isLeaf:v}),!v&&k.value.has(u)&&l(d,f,r+1)}}if(l(e,null,0),a.filterNodeMethod&&G.value!=null){let o=function(c){const f=y(c),u=b(c);let d=!1;for(const V of u)d=o(V)||d;const v=!!a.filterNodeMethod(G.value,c);return v&&i.add(f),d&&r.add(f),v||d};const i=new Set,r=new Set;for(const c of e)o(c);return n.filter(c=>i.has(c.id)||r.has(c.id))}return n}const h=t.ref(null),B=t.ref(0),H=t.ref(0),s=t.ref([]),K=t.reactive(new Map),w=t.computed(()=>{let e=0;const n=[];for(const l of s.value){const o=K.get(l.id)||D;e+=o,n.push(e)}return n}),oe=t.computed(()=>{const e=w.value;return e.length?e[e.length-1]:0});function ce(e){let n=0,l=w.value.length-1,o=0;for(;n<=l;){const i=n+l>>1;w.value[i]!==void 0&&w.value[i]>=e?(o=i,l=i-1):n=i+1}return o}const N=t.ref(0),S=t.ref(0),I=t.ref(0),X=t.ref(0);function g(){if(H.value=h.value?.clientHeight||0,w.value.length===0||s.value.length===0){N.value=0,S.value=0,I.value=0,X.value=0;return}const e=ce(B.value);N.value=Math.max(0,e-3);const n=s.value[N.value],l=n?K.get(n.id)||D:0,i=(w.value[N.value]??0)-l;I.value=Math.max(0,i);let r=N.value;const c=B.value+H.value+3*D;for(;r<s.value.length&&(w.value[r]??0)<c;)r++;S.value=Math.min(s.value.length,r+1);const u=(w.value[S.value-1]??0)-I.value;if(u<H.value&&S.value<s.value.length){let d=S.value,v=u;for(;v<H.value&&d<s.value.length;)d++,v=(w.value[d-1]??0)-I.value;S.value=d}X.value=Math.max(0,oe.value-I.value-((w.value[S.value-1]??0)-I.value))}t.watch([B,()=>a.data,k],()=>{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&&ae(a.defaultCheckedKeys),h.value&&(_=new ResizeObserver(()=>{H.value=h.value?.clientHeight||0,g()}),_.observe(h.value))});let _=null;t.onUnmounted(()=>{_&&(_.disconnect(),_=null)});const q=t.reactive(new Map);function ze(e,n){n?q.set(e,n):q.delete(e)}function T(){let e=!1;for(const n of s.value.slice(N.value,S.value)){const l=q.get(n.id);if(l){const o=l.offsetHeight;(!K.has(n.id)||K.get(n.id)!==o)&&(K.set(n.id,o),e=!0)}}e&&g()}function Ee(){B.value=h.value?.scrollTop||0,g()}const z=t.ref(!1),Z=t.ref(null),F=t.ref(null),E=t.ref(null),ee=t.ref(0),L=t.ref(null),Y=t.ref(0);let R=null;function U(){R!=null&&(cancelAnimationFrame(R),R=null)}function ie(){if(!z.value||Y.value===0){U();return}const e=h.value;if(!e){U();return}const n=e.scrollHeight-e.clientHeight,l=12;e.scrollTop=Math.max(0,Math.min(n,e.scrollTop+Y.value*l)),B.value=e.scrollTop,g(),R=requestAnimationFrame(ie)}function Me(){Y.value!==0&&R==null&&(R=requestAnimationFrame(ie)),Y.value===0&&U()}function $(e){if(e==null)return null;for(const n of s.value)if(n.id===e)return n;return null}function Be(e){const n=h.value.getBoundingClientRect(),l=e-n.top+B.value;return ce(l)}function Ae(e,n){!a.draggable||n.button!==0||!(!a.allowDrag||a.allowDrag(e.node))||(z.value=!0,Z.value=e.id,ee.value=n.clientY,n.preventDefault(),window.addEventListener("mousemove",re),window.addEventListener("mouseup",se))}function re(e){if(!z.value)return;ee.value=e.clientY;const n=Be(e.clientY),l=s.value[Math.min(Math.max(n,0),s.value.length-1)];if(F.value=l?.id??null,!l){E.value=null;return}const o=w.value[n]??0,i=K.get(l.id)??D,r=o-i,c=h.value.getBoundingClientRect(),u=(e.clientY-c.top+B.value-r)/i;let d="inner";u<.25?d="prev":u>.75&&(d="next");const v=$(Z.value),V=a.allowDrop?!!(v&&a.allowDrop(v.node,l.node,d)):!0;E.value=V?d:null,Y.value=e.clientY>c.bottom?1:e.clientY<c.top?-1:0,Me()}function j(e,n,l=[]){for(const o of n){if(y(o)===e)return l;const i=b(o);if(i.length){const r=j(e,i,[...l,o]);if(r)return r}}return null}function te(e,n){if(e==null)return null;for(const l of n){if(y(l)===e)return l;const o=b(l),i=te(e,o);if(i)return i}return null}function O(e){const n=[];for(const l of e){n.push(y(l));const o=b(l);o.length&&n.push(...O(o))}return n}function Ke(e){const n=e.parent;if(n)b(n).splice(e.index,1);else{const l=a.data.findIndex(o=>y(o)===e.id);l>=0&&a.data.splice(l,1)}}function Ne(e,n,l){if(l==="inner"){Array.isArray(n.node[W.value])||(n.node[W.value]=[]),n.node[W.value].push(e),k.value.add(n.id);return}const o=n.parent;if(o){const i=b(o),r=n.index+(l==="next"?1:0);i.splice(r,0,e)}else{const i=n.index+(l==="next"?1:0);a.data.splice(i,0,e)}}function se(){if(window.removeEventListener("mousemove",re),window.removeEventListener("mouseup",se),U(),!z.value)return;const e=$(Z.value),n=$(F.value),l=E.value;if(z.value=!1,E.value=null,F.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 f=j(y(o),a.data||[])||[];for(const u of f)if(y(u)===e.id)return}const i=e.node;Ke(e);const r=C(a.data||[]);s.value=r;const c=$(n.id)||n;Ne(i,c,l),s.value=C(a.data||[]),t.nextTick(()=>{T(),g()}),A("node-drop",i,c.node,l)}function Ie(e,n){L.value=e.id,A("node-click",e.node,n)}function Le(e,n){A("node-contextmenu",e.node,n)}t.watchEffect(()=>{t.nextTick(T)}),t.watch(()=>a.currentNodeKey,e=>{L.value=e??null},{immediate:!0}),t.watch(()=>a.defaultExpandedKeys,e=>{k.value=new Set(e||[]),s.value=C(a.data||[]),t.nextTick(()=>{T(),g()})},{immediate:!0}),t.watch(()=>a.defaultExpandAll,e=>{e&&(k.value=new Set(O(a.data||[])),s.value=C(a.data||[]),t.nextTick(()=>{T(),g()}))},{immediate:!0}),t.watch(()=>a.data,()=>{a.defaultExpandAll&&(k.value=new Set(O(a.data||[]))),s.value=C(a.data||[]),t.nextTick(()=>{T(),g()});const e=new Set(O(a.data||[]));m.value=new Set([...m.value].filter(n=>e.has(n))),x.value=new Set([...x.value].filter(n=>e.has(n)))},{deep:!0});function Re(e){const n=j(e,a.data||[])||[];for(const l of n)k.value.add(y(l));s.value=C(a.data||[])}function de(e){e!=null&&(Re(e),t.nextTick(()=>{const n=s.value.findIndex(c=>c.id===e);if(n<0||!h.value)return;const l=K.get(e)||D,o=(w.value[n]??0)-l,i=h.value.clientHeight,r=Math.max(0,o-Math.max(0,(i-l)/2));h.value.scrollTop=r,B.value=r,g(),t.nextTick(()=>{const c=q.get(e);if(!c||!h.value)return;const f=c.offsetLeft,u=c.offsetWidth,d=h.value.clientWidth,v=Math.max(0,f+Math.max(0,u/2)-Math.max(0,d/2));h.value.scrollLeft=v})}))}function Ve(e){L.value=e??null,de(L.value)}return Q({getCurrentKey:()=>L.value,setCurrentKey:Ve,scrollTo:de,getCheckedKeys:()=>Array.from(m.value),setCheckedKeys:ae,setChecked:(e,n)=>J(e,n),filter:e=>{G.value=e,k.value=new Set(O(a.data||[])),s.value=C(a.data||[]),t.nextTick(()=>{T(),g()})}}),t.watch(L,e=>{const n=te(e,a.data||[]);n&&A("current-change",n)}),(e,n)=>(t.openBlock(),t.createElementBlock("div",{ref_key:"containerRef",ref:h,class:t.normalizeClass(["amazing-tree",{"is-dragging":z.value}]),style:t.normalizeStyle({height:typeof p.height=="number"?p.height+"px":p.height||"100%","--vtree-bg":p.backgroundColor,"--vtree-text":p.textColor,"--vtree-hover":p.hoverColor}),onScroll:Ee},[we.value?(t.openBlock(),t.createElementBlock("div",ge,[t.renderSlot(e.$slots,"empty",{},()=>[t.createElementVNode("div",ke,t.toDisplayString(p.emptyText),1)],!0)])):(t.openBlock(),t.createElementBlock(t.Fragment,{key:0},[t.createElementVNode("div",{style:t.normalizeStyle({height:oe.value+"px",position:"relative",minWidth:"100%",width:"max-content"})},[t.createElementVNode("div",{style:t.normalizeStyle({height:I.value+"px"})},null,4),(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(s.value.slice(N.value,S.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":z.value&&F.value===l.id&&E.value==="inner","is-active":L.value===l.id}]),style:t.normalizeStyle({paddingLeft:l.level*16+"px","--active-color":p.highlightColor}),onMousedown:o=>Ae(l,o),onClick:o=>Ie(l,o),onContextmenu:t.withModifiers(o=>Le(l,o),["prevent"]),ref_for:!0,ref:o=>ze(l.id,o)},[t.createElementVNode("span",{class:t.normalizeClass(["amazing-tree-caret-box",{"is-leaf":l.isLeaf}]),onClick:t.withModifiers(o=>!l.isLeaf&&Ce(l.id),["stop"])},[l.isLeaf?t.createCommentVNode("",!0):(t.openBlock(),t.createElementBlock("span",{key:0,class:t.normalizeClass(["amazing-tree-caret",{expanded:le(l.id)}])},null,2))],10,ve),p.showCheckbox?(t.openBlock(),t.createElementBlock("input",{key:0,class:"amazing-tree-checkbox",type:"checkbox",checked:be(l.id),indeterminate:Se(l.id),disabled:a.disabledChecked?a.disabledChecked(l.node):!1,onClick:t.withModifiers(o=>Te(l,o),["stop"])},null,8,me)):t.createCommentVNode("",!0),t.renderSlot(e.$slots,"default",{node:l.node,data:l.node,level:l.level,expanded:le(l.id),isLeaf:l.isLeaf},()=>[t.createElementVNode("span",pe,t.toDisplayString(l.node[ye.value]),1)],!0)],46,he),z.value&&F.value===l.id&&(E.value==="prev"||E.value==="next")?(t.openBlock(),t.createElementBlock("div",{key:0,class:t.normalizeClass(["amazing-tree-drop-line",{"is-prev":E.value==="prev","is-next":E.value==="next"}])},null,2)):t.createCommentVNode("",!0)]))),128)),t.createElementVNode("div",{style:t.normalizeStyle({height:X.value+"px"})},null,4)],4),z.value?(t.openBlock(),t.createElementBlock("div",{key:0,class:"amazing-tree-ghost",style:t.normalizeStyle({top:ee.value+"px"})},null,4)):t.createCommentVNode("",!0)],64))],38))}}),[["__scopeId","data-v-e0a4c022"]]);M.AmazingTree=ne,M.default=ne,Object.defineProperties(M,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "amazing-tree",
-  "version": "1.2.3",
+  "version": "1.3.0",
   "private": false,
   "type": "module",
   "engines": {
@@ -54,6 +54,6 @@
   "sideEffects": [
     "dist/*.css"
   ],
-  "author": "maxkang",
+  "author": "Maxkang",
   "style": "./dist/amazing-tree.css"
 }