snail.vue 1.0.47 → 1.0.49

package/dist/snail.vue.js

@@ -1,5 +1,5 @@
 //@ sourceURL=/snail.vue.js
-import { defineComponent, createElementBlock, openBlock, normalizeClass, renderSlot, createTextVNode, shallowRef, computed, normalizeStyle, createElementVNode, toDisplayString, Fragment, renderList, unref, mergeModels, useModel, createCommentVNode, createBlock, nextTick, withDirectives, vModelText, createVNode, createApp, Transition, withCtx, normalizeProps, guardReactiveProps, watch, ref, onErrorCaptured, resolveDynamicComponent, mergeProps, createSlots, onMounted, withModifiers, isRef, getCurrentInstance, useTemplateRef, resolveComponent, onBeforeUnmount, getCurrentScope, onScopeDispose } from 'vue';
+import { defineComponent, createElementBlock, openBlock, normalizeClass, renderSlot, createTextVNode, shallowRef, normalizeStyle, createElementVNode, toDisplayString, Fragment, renderList, unref, mergeModels, useModel, computed, createCommentVNode, createBlock, nextTick, withDirectives, vModelText, createVNode, createApp, Transition, withCtx, normalizeProps, guardReactiveProps, watch, ref, onErrorCaptured, resolveDynamicComponent, mergeProps, createSlots, onMounted, withModifiers, isRef, getCurrentInstance, useTemplateRef, resolveComponent, onBeforeUnmount, getCurrentScope, onScopeDispose } from 'vue';
 import { throwError, isArrayNotEmpty, isStringNotEmpty, isArray, newId, mustFunction, useScope, removeFromArray, mustObject, throwIfFalse, isObject, isNumberNotNaN, mountScope, useScopes, isPromise, wait, script, delay, useTimer, defer, useAsyncScope, useHook, hasAny, throwIfTrue, isFunction, onMountScope } from 'snail.core';
 import { link, css, useObserver, useAnimation } from 'snail.view';
 
@@ -27,8 +27,8 @@ var addLink = href => setTimeout(link.register, 0, href);
 
 addLink("/styles/snail.vue.vue.css");
 
-function getSvgDraw(options) {
-  switch (options.type) {
+function getSvgDraw(iconType, draw) {
+  switch (iconType) {
     case "success":
       return ["M 102.272 613.285 a 48.9258 48.9258 0 0 1 -1.34967 -62.8444 l 26.0656 -31.2113 a 50.6129 50.6129 0 0 1 62.6756 -11.2192 l 199.583 121.218 c 19.4859 11.8097 49.0102 8.26677 65.9655 -8.01371 l 540.714 -519.625 a 40.3216 40.3216 0 0 1 57.9518 1.6871 l 37.9597 43.3583 a 47.5762 47.5762 0 0 1 -0.843545 62.4226 L 452.766 920.675 a 38.4658 38.4658 0 0 1 -56.8553 1.18097 L 102.272 613.285 Z"];
     case "error":
@@ -47,19 +47,23 @@ function getSvgDraw(options) {
       return ["M 780.8 366.933 c 34.1333 -34.1333 34.1333 -93.8667 0 -128 c -38.4 -34.1333 -93.8667 -34.1333 -132.267 0 l -68.2667 68.2667 l 132.267 128 l 68.2667 -68.2667 Z M 541.867 349.867 l -277.333 277.333 L 213.333 806.4 l 179.2 -51.2 l 281.6 -277.333 Z M 469.333 768 h 341.333 v 42.6667 h -341.333 Z"];
     case "arrow":
       return ["M651.3 514.2c0 8.2-3.1 16.4-9.4 22.6L426.4 752.4c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L574 514.2 381.1 321.4c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l215.5 215.5c6.2 6.3 9.4 14.5 9.4 22.6z"];
+    case "plus":
+      return ["M 768 469.333 h -213.333 V 256 c 0 -25.6 -17.0667 -42.6667 -42.6667 -42.6667 s -42.6667 17.0667 -42.6667 42.6667 v 213.333 H 256 c -25.6 0 -42.6667 17.0667 -42.6667 42.6667 s 17.0667 42.6667 42.6667 42.6667 h 213.333 v 213.333 c 0 25.6 17.0667 42.6667 42.6667 42.6667 s 42.6667 -17.0667 42.6667 -42.6667 v -213.333 h 213.333 c 25.6 0 42.6667 -17.0667 42.6667 -42.6667 s -17.0667 -42.6667 -42.6667 -42.6667 Z"];
+    case "subtract":
+      return ["M768 554.666667H256c-25.6 0-42.666667-17.066667-42.666667-42.666667s17.066667-42.666667 42.666667-42.666667h512c25.6 0 42.666667 17.066667 42.666667 42.666667s-17.066667 42.666667-42.666667 42.666667z"];
     case "grip":
       return ["M 384 256 m -42.6667 0 a 42.6667 42.6667 0 1 0 85.3333 0 a 42.6667 42.6667 0 1 0 -85.3333 0 Z", "M 384 426.667 m -42.6667 0 a 42.6667 42.6667 0 1 0 85.3333 0 a 42.6667 42.6667 0 1 0 -85.3333 0 Z", "M 384 597.333 m -42.6667 0 a 42.6667 42.6667 0 1 0 85.3333 0 a 42.6667 42.6667 0 1 0 -85.3333 0 Z", "M 384 768 m -42.6667 0 a 42.6667 42.6667 0 1 0 85.3333 0 a 42.6667 42.6667 0 1 0 -85.3333 0 Z", "M 640 256 m -42.6667 0 a 42.6667 42.6667 0 1 0 85.3333 0 a 42.6667 42.6667 0 1 0 -85.3333 0 Z", "M 640 426.667 m -42.6667 0 a 42.6667 42.6667 0 1 0 85.3333 0 a 42.6667 42.6667 0 1 0 -85.3333 0 Z", "M 640 597.333 m -42.6667 0 a 42.6667 42.6667 0 1 0 85.3333 0 a 42.6667 42.6667 0 1 0 -85.3333 0 Z", "M 640 768 m -42.6667 0 a 42.6667 42.6667 0 1 0 85.3333 0 a 42.6667 42.6667 0 1 0 -85.3333 0 Z"];
     case "custom":
-      return isArrayNotEmpty(options.draw) ? options.draw : isStringNotEmpty(options.draw) ? [options.draw] : throwError("options.draw must be a non-empty string or string array");
+      return isArrayNotEmpty(draw) ? draw : isStringNotEmpty(draw) ? [draw] : throwError("options.draw must be a non-empty string or string array");
     default:
-      throwError(`not support icon type: ${options.type}.`);
+      throwError(`not support icon type: ${iconType}.`);
       break;
   }
 }
 
 const _hoisted_1$f = ["width", "height"];
 const _hoisted_2$a = ["textContent"];
-const _hoisted_3$6 = ["d", "fill"];
+const _hoisted_3$7 = ["fill", "stroke", "stroke-width", "d"];
 var _sfc_main$s = defineComponent({
   ...{
     name: "Icon",
@@ -72,36 +76,31 @@ var _sfc_main$s = defineComponent({
     color: {},
     hoverColor: {},
     size: {},
+    stroke: {},
+    strokeWidth: {},
     draw: {},
     rotate: {}
   },
   setup(__props) {
-    const props = __props;
-    const paths = getSvgDraw(props || {});
-    const colorRef = shallowRef(props.color);
-    const styleRef = computed(() => props.rotate ? `transform: rotate(${props.rotate}deg);` : "");
-    function onMouseEnter() {
-      colorRef.value = props.hoverColor || props.color;
-    }
-    function onMouseLeave() {
-      colorRef.value = props.color;
-    }
+    const isMouseEnterRef = shallowRef(false);
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("svg", {
         class: normalizeClass(["snail-icon", _ctx.type]),
         viewBox: "0 0 1024 1024",
-        width: props.size || 24,
-        height: props.size || 24,
-        style: normalizeStyle(styleRef.value),
-        onMouseenter: onMouseEnter,
-        onMouseleave: onMouseLeave
+        style: normalizeStyle(_ctx.rotate ? `transform: rotate(${_ctx.rotate}deg);` : ""),
+        width: _ctx.size || 24,
+        height: _ctx.size || 24,
+        onMouseenter: _cache[0] || (_cache[0] = $event => isMouseEnterRef.value = true),
+        onMouseleave: _cache[1] || (_cache[1] = $event => isMouseEnterRef.value = false)
       }, [createElementVNode("title", {
-        textContent: toDisplayString(props.title || "")
-      }, null, 8, _hoisted_2$a), (openBlock(true), createElementBlock(Fragment, null, renderList(unref(paths), draw => {
+        textContent: toDisplayString(_ctx.title || "")
+      }, null, 8, _hoisted_2$a), (openBlock(true), createElementBlock(Fragment, null, renderList(unref(getSvgDraw)(_ctx.type, _ctx.draw), draw => {
         return openBlock(), createElementBlock("path", {
-          d: draw,
-          fill: colorRef.value
-        }, null, 8, _hoisted_3$6);
+          fill: isMouseEnterRef.value ? _ctx.hoverColor || _ctx.color : _ctx.color,
+          stroke: _ctx.stroke,
+          "stroke-width": _ctx.strokeWidth,
+          d: draw
+        }, null, 8, _hoisted_3$7);
       }), 256))], 46, _hoisted_1$f);
     };
   }
@@ -109,7 +108,7 @@ var _sfc_main$s = defineComponent({
 
 const _hoisted_1$e = ["onClick"];
 const _hoisted_2$9 = ["type", "checked"];
-const _hoisted_3$5 = ["textContent"];
+const _hoisted_3$6 = ["textContent"];
 const _hoisted_4$4 = ["textContent"];
 var _sfc_main$r = defineComponent({
   ...{
@@ -191,7 +190,7 @@ var _sfc_main$r = defineComponent({
           key: 2,
           class: "item-text",
           textContent: toDisplayString(item.text)
-        }, null, 8, _hoisted_3$5)) : createCommentVNode("", true), item.description ? (openBlock(), createElementBlock("span", {
+        }, null, 8, _hoisted_3$6)) : createCommentVNode("", true), item.description ? (openBlock(), createElementBlock("span", {
           key: 3,
           class: "item-des",
           textContent: toDisplayString(item.description)
@@ -480,23 +479,11 @@ function checkFollow(options) {
 function calcFollowX(options, target, width) {
   const space = isNumberNotNaN(options.spaceX) ? options.spaceX : 0;
   const spaceClient = isNumberNotNaN(options.spaceClient) ? options.spaceClient : 0;
-  if (target.left < spaceClient || target.right + spaceClient > window.innerWidth) {
-    return {
-      strategy: void 0,
-      start: -width
-    };
-  }
   return electPosition(getFollowStrategy(options.followX) || ["start", "end", "after", "before", "center", "ratio"], target.left, target.right, width, window.innerWidth, space, spaceClient);
 }
 function calcFollowY(options, target, height) {
   const space = isNumberNotNaN(options.spaceY) ? options.spaceY : 0;
   const spaceClient = isNumberNotNaN(options.spaceClient) ? options.spaceClient : 0;
-  if (target.top < spaceClient || target.bottom + spaceClient > window.innerHeight) {
-    return {
-      strategy: void 0,
-      start: -height
-    };
-  }
   return electPosition(getFollowStrategy(options.followY) || ["after", "before", "start", "end", "center", "ratio"], target.top, target.bottom, height, window.innerHeight, space, spaceClient);
 }
 function getFollowStrategy(strategy) {
@@ -877,7 +864,8 @@ var _sfc_main$j = defineComponent({
     const {
       onClient,
       onSize,
-      onEvent
+      onEvent,
+      onMutation
     } = useObserver();
     const {
       onTimeout
@@ -900,9 +888,7 @@ var _sfc_main$j = defineComponent({
       if (__props.popupStatus.value == "closed") {
         return;
       }
-      console.group("%cstart run buildFollow:", "color:red");
       const targetRect = __props.extOptions.target.getBoundingClientRect();
-      console.log("-- target:", targetRect, __props.extOptions.target);
       css.operate(rootDom.value, "add", {
         style: {
           width: __props.options.followWidth ? `${targetRect.width}px` : "",
@@ -915,14 +901,12 @@ var _sfc_main$j = defineComponent({
         const rootRect = rootDom.value.getBoundingClientRect();
         {
           const xResult = calcFollowX(__props.options, targetRect, rootRect.width);
-          console.log("-- follow x:", xResult);
           followStyle.left = `${xResult.start}px`;
           xResult.size != void 0 && (followStyle.width = `${xResult.size}px`);
           followExt.followX.value = xResult.strategy;
         }
         {
           const yResult = calcFollowY(__props.options, targetRect, rootRect.height);
-          console.log("-- follow y: ", yResult);
           followStyle.top = `${yResult.start}px`;
           yResult.size != void 0 && (followStyle.height = `${yResult.size}px`);
           followExt.followY.value = yResult.strategy;
@@ -940,9 +924,7 @@ var _sfc_main$j = defineComponent({
           height: rootRect.height
         });
         rootDom.value.classList.remove("initial");
-        console.log("-- content rect: ", rootRect, rootDom.value);
       }
-      console.groupEnd();
     }
     function onRootSize(size) {
       const isChange = preSize.width != size.width || preSize.height != size.height;
@@ -958,7 +940,14 @@ var _sfc_main$j = defineComponent({
         onTimeout(function () {
           onEvent(window, "resize", () => __props.options.closeOnResize ? closePopup(void 0) : rootDom.value && buildFollow());
           onEvent(window, "keyup", evet => __props.options.closeOnEscape && evet.key === "Escape" && followExt.pinned.value != true && closePopup(void 0));
-          onEvent(window, "click", event => __props.options.closeOnMask && rootDom.value != event.target && rootDom.value.contains(event.target) == false && followExt.pinned.value != true && closePopup(void 0));
+          onEvent(window, "click", event => {
+            __props.options.closeOnMask && followExt.pinned.value != true && rootDom.value != event.target && rootDom.value.contains(event.target) == false && closePopup(void 0);
+          });
+          onMutation(rootDom.value, {
+            childList: true,
+            attributes: false,
+            subtree: true
+          }, buildFollow);
         }, 100);
       });
     });
@@ -1151,7 +1140,7 @@ function usePopup() {
     });
   }
   function toast(type, message, options) {
-    popupInCustomContainer(_sfc_main$h, {
+    return popupInCustomContainer(_sfc_main$h, {
       url: "#ToastContainer",
       props: {
         ...(options || Object.create(null)),
@@ -1212,7 +1201,7 @@ const _hoisted_1$9 = {
   class: "snail-empty"
 };
 const _hoisted_2$6 = ["src"];
-const _hoisted_3$4 = ["textContent"];
+const _hoisted_3$5 = ["textContent"];
 var _sfc_main$g = defineComponent({
   ...{
     name: "Empty",
@@ -1232,13 +1221,17 @@ var _sfc_main$g = defineComponent({
       }, null, 8, _hoisted_2$6), renderSlot(_ctx.$slots, "default", {}, () => [createElementVNode("div", {
         class: "message",
         textContent: toDisplayString(props.message || "无数据")
-      }, null, 8, _hoisted_3$4)])]);
+      }, null, 8, _hoisted_3$5)])]);
     };
   }
 });
 
 const _hoisted_1$8 = ["title"];
 const _hoisted_2$5 = ["textContent"];
+const _hoisted_3$4 = {
+  key: 1,
+  class: "select-status"
+};
 var _sfc_main$f = defineComponent({
   ...{
     name: "SelectNode",
@@ -1288,11 +1281,15 @@ var _sfc_main$f = defineComponent({
         key: 0,
         type: "arrow",
         color: "#8a9099"
-      })) : createCommentVNode("", true)], 42, _hoisted_1$8)) : createCommentVNode("", true), showRef.value ? (openBlock(true), createElementBlock(Fragment, {
+      })) : _ctx.multiple == true ? (openBlock(), createElementBlock("div", _hoisted_3$4, [createVNode(_sfc_main$s, {
+        type: "success",
+        color: "white",
+        size: 12
+      })])) : createCommentVNode("", true)], 42, _hoisted_1$8)) : createCommentVNode("", true), showRef.value ? (openBlock(true), createElementBlock(Fragment, {
         key: 1
       }, renderList(unref(showChildrenRef), child => {
         return openBlock(), createBlock(_component_SelectNode, {
-          key: child.id || unref(newId)(),
+          key: _ctx.context.getKey(child),
           multiple: _ctx.multiple,
           item: child,
           context: _ctx.context,
@@ -1320,6 +1317,9 @@ var _sfc_main$e = defineComponent({
     showPath: {
       type: Boolean
     },
+    showClear: {
+      type: Boolean
+    },
     popupStyle: {},
     context: {},
     level: {},
@@ -1335,7 +1335,7 @@ var _sfc_main$e = defineComponent({
     followY: {},
     pinned: {}
   },
-  emits: ["change"],
+  emits: ["clear", "click"],
   setup(__props, _ref) {
     let {
       emit: __emit
@@ -1364,10 +1364,33 @@ var _sfc_main$e = defineComponent({
       "text-tips": itemsRef.value.length == 0,
       "has-group": itemsRef.value.find(node => node.type == "group") != void 0
     }));
+    const needClearButton = props.multiple == true ? props.level == 1 : props.level == 1 && isStringNotEmpty(context.selectedText(false, props.showPath));
+    const showClearButtonRef = computed(() => needClearButton && props.showClear && (props.multiple ? context.selectedText(true, props.showPath) : true));
     const childDestroyTimerRef = shallowRef(void 0);
     var mouseStatus = "Leave";
     var childFollowTargetDom = void 0;
     var childFollowScope = void 0;
+    function watchOptionsChange() {
+      const inValid = props.multiple == true && itemsRef.value && itemsRef.value.some(item => item.children && item.children.length > 0);
+      if (inValid == true) {
+        const message = "select-popup.vue: select item cannot be multi-level when multiple == true";
+        onTimeout(() => {
+          props.closePopup();
+          alert(message);
+          throw new Error(message);
+        }, 0);
+      }
+    }
+    function emitClickEvent() {
+      for (var _len = arguments.length, path = new Array(_len), _key = 0; _key < _len; _key++) {
+        path[_key] = arguments[_key];
+      }
+      if (popupStatus.value != "closed") {
+        path = path.filter(item => item != void 0);
+        emits("click", path);
+        props.multiple || props.closePopup(path);
+      }
+    }
     function destroyChildFollow(onlyTimer) {
       childDestroyTimerRef.value && childDestroyTimerRef.value.destroy();
       childDestroyTimerRef.value = void 0;
@@ -1392,16 +1415,6 @@ var _sfc_main$e = defineComponent({
       destroyChildFollow();
       context.doSearch(text);
     }
-    function onSelected() {
-      if (popupStatus.value != "closed") {
-        for (var _len = arguments.length, path = new Array(_len), _key = 0; _key < _len; _key++) {
-          path[_key] = arguments[_key];
-        }
-        const values = path.filter(item => item != void 0);
-        emits("change", values);
-        props.multiple || props.closePopup(values);
-      }
-    }
     async function onEnterSelectNode(target, node, parent) {
       if (popupStatus.value == "closed") {
         return;
@@ -1424,6 +1437,7 @@ var _sfc_main$e = defineComponent({
             items: node.children,
             context,
             search: void 0,
+            multiple: props.multiple,
             level: props.level + 1,
             popupStyle: props.popupStyle,
             childDestroyTimer: childDestroyTimerRef,
@@ -1431,35 +1445,43 @@ var _sfc_main$e = defineComponent({
           })
         });
         const datas = await childFollowScope;
-        isArrayNotEmpty(datas) && onSelected(parent ? parent : void 0, node, ...datas);
+        isArrayNotEmpty(datas) && emitClickEvent(parent ? parent : void 0, node, ...datas);
         popupStatus.value == "open" && onTimeout(() => mouseStatus != "Enter" && onLeavePopup(), 10);
       }
     }
     function onClickSelectNode(node, parent) {
-      if (node.clickable == true) {
-        onSelected(parent ? parent : void 0, node);
-      }
+      node.clickable && emitClickEvent(parent ? parent : void 0, node);
+    }
+    function onClearAllClick() {
+      emits("clear");
+      props.closePopup([]);
+    }
+    {
+      watcher(() => props.multiple, watchOptionsChange);
+      watcher(itemsRef, watchOptionsChange);
+      watchOptionsChange();
     }
     watcher(pinned, newValue => newValue == true && parentPinned && (parentPinned.value = true));
     watcher(popupStatus, newValue => newValue == "closed" && childFollowScope && childFollowScope.destroy());
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(classRef.value),
-        style: normalizeStyle(props.popupStyle),
+        style: normalizeStyle(_ctx.popupStyle),
         onMouseenter: onEnterPopup,
         onMouseleave: onLeavePopup
       }, [classRef.value["child-popup"] && classRef.value["text-tips"] ? (openBlock(), createElementBlock(Fragment, {
         key: 0
       }, [createTextVNode(" 暂无选项 ")], 64)) : (openBlock(), createElementBlock(Fragment, {
         key: 1
-      }, [props.search ? (openBlock(), createBlock(_sfc_main$o, mergeProps({
+      }, [_ctx.search ? (openBlock(), createBlock(_sfc_main$o, mergeProps({
         key: 0
-      }, props.search, {
-        onSearch
+      }, _ctx.search, {
+        onSearch,
+        key: "select-search"
       }), null, 16)) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList(itemsRef.value, item => {
         return openBlock(), createBlock(_sfc_main$f, {
-          key: item.id || unref(newId)(),
-          multiple: props.multiple,
+          key: unref(context).getKey(item),
+          multiple: _ctx.multiple,
           item,
           context: unref(context),
           "show-children": true,
@@ -1469,20 +1491,28 @@ var _sfc_main$e = defineComponent({
       }), 128)), itemsRef.value.length == 0 ? (openBlock(), createBlock(_sfc_main$g, {
         key: 1,
         message: "无结果"
-      })) : createCommentVNode("", true)], 64))], 38);
+      })) : createCommentVNode("", true), showClearButtonRef.value ? (openBlock(), createElementBlock("div", {
+        key: 2,
+        class: "clear-all",
+        onClick: onClearAllClick
+      }, " 清空已选 ")) : createCommentVNode("", true)], 64))], 38);
     };
   }
 });
 
-function useTreeContext(nodes) {
+function useTreeContext(nodes, activeNodeRef) {
   const failed = shallowRef();
   const patched = shallowRef();
+  const nodeKeyMap = new Map();
   function doSearch(text) {
     text = isStringNotEmpty(text) ? text.toLowerCase() : void 0;
     const result = searchTree(nodes, text);
     failed.value = result.failed;
     patched.value = result.patched;
   }
+  function isActived(node) {
+    return activeNodeRef && activeNodeRef.value == node;
+  }
   function isPatched(node) {
     return patched.value ? patched.value.includes(node) : false;
   }
@@ -1501,12 +1531,18 @@ function useTreeContext(nodes) {
   function getPath(node) {
     return searchPath(nodes, node);
   }
+  function getKey(node) {
+    nodeKeyMap.has(node) || nodeKeyMap.set(node, newId());
+    return nodeKeyMap.get(node);
+  }
   const context = mountScope({
     doSearch,
+    isActived,
     isPatched,
     isShow,
     isShowChildren,
-    getPath
+    getPath,
+    getKey
   }, "ITreeBaseContext");
   context.onDestroy(() => {
     failed.value = void 0;
@@ -1558,7 +1594,7 @@ function useSelectContext(items, selectsRef) {
     return false;
   }
   function selectedText(multiple, showPath) {
-    if (selectsRef.value) {
+    if (selectsRef.value && selectsRef.value.length) {
       return multiple == true || showPath == true ? selectsRef.value.map(item => item.text).join(multiple ? "、" : " / ") : selectsRef.value[selectsRef.value.length - 1].text;
     }
     return "";
@@ -1609,11 +1645,15 @@ var _sfc_main$d = defineComponent({
     showPath: {
       type: Boolean
     },
-    popupStyle: {}
-  }, {
-    "modelValue": {
-      default: []
+    showClear: {
+      type: Boolean
     },
+    popupStyle: {},
+    valuePathDisabled: {
+      type: Boolean
+    }
+  }, {
+    "modelValue": {},
     "modelModifiers": {}
   }),
   emits: mergeModels(["change"], ["update:modelValue"]),
@@ -1631,13 +1671,23 @@ var _sfc_main$d = defineComponent({
       onTimeout
     } = useTimer();
     const rootDom = useTemplateRef("select");
-    const context = useSelectContext(props.items, valuesModel);
-    const selectTextRef = computed(() => context.selectedText(props.multiple, props.showPath));
+    const selectedItemsRef = computed(() => valuesModel.value ? Array.isArray(valuesModel.value) ? valuesModel.value : [valuesModel.value] : []);
+    const context = useSelectContext(props.items, selectedItemsRef);
+    const selectedTextRef = computed(() => context.selectedText(props.multiple, props.showPath));
     const slotOptions = Object.freeze({
       clear
     });
     var followScope = void 0;
     var stopPropagationScope = void 0;
+    function updateModelValue(newValue, eventValues) {
+      if (valuesModel.value != newValue) {
+        valuesModel.value = newValue;
+        nextTick(() => emits("change", eventValues));
+      }
+    }
+    function isSingleValue() {
+      return props.multiple != true && props.valuePathDisabled == true;
+    }
     function destroyFollow() {
       if (followScope != void 0) {
         followScope.destroy();
@@ -1647,19 +1697,19 @@ var _sfc_main$d = defineComponent({
       return false;
     }
     function clear(closeFollow, stopPropagation) {
-      valuesModel.value = [];
       closeFollow && destroyFollow();
       stopPropagationScope && stopPropagationScope.destroy();
       stopPropagationScope = stopPropagation ? onTimeout(() => stopPropagationScope = void 0, 200) : void 0;
+      updateModelValue(isSingleValue() ? void 0 : [], []);
     }
     async function onClick() {
-      if (props.readonly == true || rootDom.value == void 0) {
+      if (props.readonly == true || rootDom.value == void 0 || isArrayNotEmpty(props.items) == false) {
         return;
       }
       if (destroyFollow() == true || stopPropagationScope != void 0) {
         return;
       }
-      const values = valuesModel.value && valuesModel.value.length > 0 ? [...valuesModel.value] : [];
+      const values = [...selectedItemsRef.value];
       props.multiple != true && values.length > 1 && values.splice(0, values.length - 1);
       context.doSearch(void 0);
       followScope = follow(rootDom.value, {
@@ -1677,17 +1727,28 @@ var _sfc_main$d = defineComponent({
           level: 1,
           search: props.search,
           multiple: props.multiple,
+          showClear: props.showClear,
           popupStyle: props.popupStyle,
-          onChange: onSelectItemChange
+          onClick: onSelectItemClick,
+          onClear: () => clear(true, false)
         }
       });
       await followScope;
       followScope = void 0;
     }
-    function onSelectItemChange(items) {
-      items = hasAny(items) ? [...items] : [];
-      valuesModel.value = items;
-      nextTick(() => emits("change", items));
+    function onSelectItemClick(path) {
+      path = hasAny(path) ? [...path] : [];
+      if (props.multiple == true) {
+        const node = path[path.length - 1];
+        if (node) {
+          path = [...selectedItemsRef.value];
+          removeFromArray(path, node) == -1 && path.push(node);
+          updateModelValue(path, path);
+        }
+      } else {
+        const newValue = isSingleValue() ? path[path.length - 1] : path;
+        updateModelValue(newValue, path);
+      }
     }
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
@@ -1698,10 +1759,10 @@ var _sfc_main$d = defineComponent({
         ref: "select"
       }, [props.items && props.items.length > 0 ? (openBlock(), createElementBlock(Fragment, {
         key: 0
-      }, [valuesModel.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_1$7, [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(slotOptions))), () => [createElementVNode("div", {
+      }, [selectedItemsRef.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_1$7, [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(slotOptions))), () => [createElementVNode("div", {
         class: "select-text",
-        title: selectTextRef.value,
-        textContent: toDisplayString(selectTextRef.value)
+        title: selectedTextRef.value,
+        textContent: toDisplayString(selectedTextRef.value)
       }, null, 8, _hoisted_2$4)])])) : (openBlock(), createElementBlock("div", {
         key: 1,
         class: "select-result text-tips",
@@ -1884,6 +1945,7 @@ var _sfc_main$a = defineComponent({
   emits: ["xbar", "left", "right", "ybar", "top", "bottom"],
   setup(__props, _ref) {
     let {
+      expose: __expose,
       emit: __emit
     } = _ref;
     const props = __props;
@@ -1900,6 +1962,18 @@ var _sfc_main$a = defineComponent({
       "scroll-y": props.scrollY == true
     }));
     var preStatus = void 0;
+    __expose({
+      scroll,
+      scrollTo
+    });
+    function scroll(left, top) {
+      left == void 0 || (rootDom.value.scrollLeft += left);
+      top == void 0 || (rootDom.value.scrollTop += top);
+    }
+    function scrollTo(left, top) {
+      left == void 0 || (rootDom.value.scrollLeft = left);
+      top == void 0 || (rootDom.value.scrollTop = top);
+    }
     function refreshScrollInfo() {
       const status = {
         xbar: rootDom.value.scrollWidth > rootDom.value.clientWidth,
@@ -1984,7 +2058,7 @@ var _sfc_main$9 = defineComponent({
       }, props.scroll), {
         default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
         _: 3
-      }, 16), _ctx.$slots.end ? (openBlock(), createElementBlock("div", _hoisted_2$2, [renderSlot(_ctx.$slots, "end")])) : createCommentVNode("", true), _cache[0] || (_cache[0] = createTextVNode(' " '))], 2);
+      }, 16), _ctx.$slots.end ? (openBlock(), createElementBlock("div", _hoisted_2$2, [renderSlot(_ctx.$slots, "end")])) : createCommentVNode("", true)], 2);
     };
   }
 });
@@ -2194,7 +2268,7 @@ const _hoisted_3$1 = {
 };
 const _hoisted_4$1 = {
   key: 1,
-  class: "snail-tree-children",
+  class: "snail-tree-children hidden",
   ref: "children"
 };
 var _sfc_main$4 = defineComponent({
@@ -2222,13 +2296,13 @@ var _sfc_main$4 = defineComponent({
     const {
       transition
     } = useAnimation();
+    const {
+      watcher
+    } = useReactive();
+    const treeNodeDom = useTemplateRef("tree-node");
+    const isHoveredRef = shallowRef(false);
     const showRef = computed(() => __props.context.isShow(__props.node, true));
     const showChildrenRef = computed(() => __props.context.isShowChildren(__props.node, true));
-    const classRef = computed(() => {
-      const array = [`level-${__props.level}`];
-      __props.node.clickable && array.push("clickable");
-      return array;
-    });
     const slotOptions = Object.freeze({
       node: __props.node,
       parent: __props.parent,
@@ -2239,7 +2313,9 @@ var _sfc_main$4 = defineComponent({
     const statusRef = shallowRef("expand");
     const nextLevel = __props.level + 1;
     const childrenDom = useTemplateRef("children");
+    var nodeEmitsDisabled = false;
     function toggleFold() {
+      nodeEmitsDisabled = true;
       switch (statusRef.value) {
         case "expand":
           statusRef.value = "fold";
@@ -2253,7 +2329,7 @@ var _sfc_main$4 = defineComponent({
         const maxHeight = childrenDom.value.scrollHeight;
         transition(childrenDom.value, {
           from: {
-            transition: "height 0.2s ease",
+            transition: `height 0.2s ease`,
             overflow: "hidden",
             height: `${statusRef.value == "fold" ? maxHeight : minHeight}px`
           },
@@ -2268,7 +2344,10 @@ var _sfc_main$4 = defineComponent({
       }
     }
     function onNodeClick(node) {
-      node.clickable == true && emits("click", node, __props.parent ? [__props.parent] : void 0);
+      if (node.clickable == true && nodeEmitsDisabled != true) {
+        emits("click", node, __props.parent ? [__props.parent] : void 0);
+      }
+      nodeEmitsDisabled = false;
     }
     function onNodeDoubleClick() {
       __props.options.foldDisabled != true && toggleFold();
@@ -2277,17 +2356,36 @@ var _sfc_main$4 = defineComponent({
       parents = __props.parent ? [__props.parent, ...parents] : parents;
       emits("click", child, parents);
     }
+    watcher(isHoveredRef, newValue => {
+      treeNodeDom.value.classList.remove("hovered");
+      newValue && treeNodeDom.value.classList.add("hovered");
+    });
+    watcher(() => __props.context.isActived(__props.node), newValue => {
+      treeNodeDom.value.classList.remove("actived");
+      newValue && treeNodeDom.value.classList.add("actived");
+    });
+    onMounted(() => {
+      if (childrenDom.value) {
+        __props.options.expandLevel != void 0 && __props.options.expandLevel < nextLevel && toggleFold();
+        childrenDom.value && childrenDom.value.classList.remove("hidden");
+        nodeEmitsDisabled = false;
+      }
+    });
     return (_ctx, _cache) => {
       const _component_TreeNode = resolveComponent("TreeNode", true);
       return openBlock(), createElementBlock(Fragment, null, [showRef.value ? (openBlock(), createElementBlock("div", {
         key: 0,
-        class: normalizeClass(["snail-tree-node", classRef.value]),
+        class: normalizeClass(["snail-tree-node", _ctx.node.clickable ? "clickable" : "", `level-${_ctx.level}`]),
+        ref: "tree-node",
+        onMouseenter: _cache[0] || (_cache[0] = $event => isHoveredRef.value = true),
+        onMouseleave: _cache[1] || (_cache[1] = $event => isHoveredRef.value = false),
+        onClick: _cache[2] || (_cache[2] = $event => onNodeClick(_ctx.node)),
         onDblclick: onNodeDoubleClick
       }, [_ctx.options.rewrite == true ? renderSlot(_ctx.$slots, "default", normalizeProps(mergeProps({
         key: 0
       }, unref(slotOptions)))) : (openBlock(), createElementBlock(Fragment, {
         key: 1
-      }, [_cache[2] || (_cache[2] = createElementVNode("div", {
+      }, [_cache[4] || (_cache[4] = createElementVNode("div", {
         class: "indent"
       }, null, -1)), _ctx.options.foldDisabled != true ? (openBlock(), createElementBlock("div", _hoisted_1$3, [showChildrenRef.value ? (openBlock(), createBlock(_sfc_main$s, {
         key: 0,
@@ -2300,17 +2398,16 @@ var _sfc_main$4 = defineComponent({
       }, null, 8, ["class"])) : createCommentVNode("", true)])) : createCommentVNode("", true), createElementVNode("div", {
         class: "node-text",
         title: _ctx.node.text,
-        textContent: toDisplayString(_ctx.node.text),
-        onClick: _cache[0] || (_cache[0] = $event => onNodeClick(_ctx.node))
+        textContent: toDisplayString(_ctx.node.text)
       }, null, 8, _hoisted_2$1), createElementVNode("div", _hoisted_3$1, [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(slotOptions))))])], 64))], 34)) : createCommentVNode("", true), showRef.value && showChildrenRef.value ? (openBlock(), createElementBlock("div", _hoisted_4$1, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.node.children, child => {
         return openBlock(), createBlock(_component_TreeNode, {
-          key: child.id || unref(newId)(),
+          key: _ctx.context.getKey(child),
           node: child,
           parent: _ctx.node,
           level: nextLevel,
           options: _ctx.options,
           context: _ctx.context,
-          onClick: _cache[1] || (_cache[1] = (node, parents) => onChildNodeClick(node, parents))
+          onClick: _cache[3] || (_cache[3] = (node, parents) => onChildNodeClick(node, parents))
         }, {
           default: withCtx(slotProps => [renderSlot(_ctx.$slots, "default", mergeProps({
             ref_for: true
@@ -2344,14 +2441,20 @@ var _sfc_main$3 = defineComponent({
     } = _ref;
     const props = __props;
     const emits = __emit;
-    const context = useTreeContext(props.nodes);
+    const activedNodeRef = shallowRef(void 0);
+    const context = useTreeContext(props.nodes, activedNodeRef);
     __expose({
-      context
+      context,
+      onTreeNodeClick
     });
     function onSearch(text) {
       context.doSearch(text);
       emits("searched", text);
     }
+    function onTreeNodeClick(node, parents) {
+      activedNodeRef.value = node;
+      emits("click", node, parents);
+    }
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$2, [props.search ? (openBlock(), createBlock(_sfc_main$o, mergeProps({
         key: 0
@@ -2362,19 +2465,19 @@ var _sfc_main$3 = defineComponent({
       }, {
         default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(props.nodes || [], node => {
           return openBlock(), createBlock(_sfc_main$4, {
-            key: node.id || unref(newId)(),
+            key: unref(context).getKey(node),
             node,
             parent: void 0,
             level: 1,
             options: props.nodeOptions,
             context: unref(context),
-            onClick: (node2, parents) => emits("click", node2, parents)
+            onClick: onTreeNodeClick
           }, {
             default: withCtx(slotProps => [renderSlot(_ctx.$slots, "default", mergeProps({
               ref_for: true
             }, slotProps))]),
             _: 2
-          }, 1032, ["node", "options", "context", "onClick"]);
+          }, 1032, ["node", "options", "context"]);
         }), 128))]),
         _: 3
       })]);