@uzum-tech/ui 2.0.6 → 2.0.8

package/dist/index.mjs

@@ -11170,7 +11170,7 @@ function setCacheAdd(value) {
  * @name has
  * @memberOf SetCache
  * @param {*} value The value to search for.
- * @returns {number} Returns `true` if `value` is found, else `false`.
+ * @returns {boolean} Returns `true` if `value` is found, else `false`.
  */
 function setCacheHas(value) {
   return this.__data__.has(value);
@@ -14806,13 +14806,6 @@ var SuccessIcon = replaceable(
   ))
 );
 
-var SwitcherIcon = defineComponent({
-  name: "Switcher",
-  render() {
-    return /* @__PURE__ */ h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, /* @__PURE__ */ h("path", { d: "M12 8l10 8l-10 8z" }));
-  }
-});
-
 var TimeIcon = replaceable(
   "time",
   /* @__PURE__ */ h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512" }, /* @__PURE__ */ h(
@@ -49217,6 +49210,8 @@ function self$g(vars) {
     nodeColorPressed: elementsQuaternary,
     nodeColorActive: brandPrimary100,
     arrowColor: elementsPrimary,
+    switcherColor: elementsTertiary,
+    switcherSize: "22px",
     nodeTextColor: textPrimary,
     nodeTextColorDisabled: textSecondary,
     loadingColor: elementsPrimary,
@@ -108199,6 +108194,16 @@ var UTreeNodeSwitcher = defineComponent({
       treeInjectionKey,
       null
     );
+    const renderSwitchIcon = () => {
+      const { value: renderSwitcherIcon } = renderSwitcherIconRef;
+      return /* @__PURE__ */ h(UIconSwitchTransition, null, {
+        default: () => renderSwitcherIcon ? renderSwitcherIcon({
+          expanded: props.expanded,
+          selected: props.selected,
+          option: props.tmNode.rawNode
+        }) : /* @__PURE__ */ h(UBaseIcon, { clsPrefix: props.clsPrefix, key: "switcher" }, { default: () => /* @__PURE__ */ h(ChevronRightIcon, null) })
+      });
+    };
     return () => {
       const { clsPrefix, expanded, hide, indent, onClick } = props;
       return /* @__PURE__ */ h(
@@ -108213,28 +108218,16 @@ var UTreeNodeSwitcher = defineComponent({
           style: { width: `${indent}px` },
           onClick
         },
-        /* @__PURE__ */ h("div", { class: `${clsPrefix}-tree-node-switcher__icon` }, /* @__PURE__ */ h(UIconSwitchTransition, null, {
-          default: () => {
-            if (props.loading) {
-              return /* @__PURE__ */ h(
-                UBaseLoading,
-                {
-                  clsPrefix,
-                  key: "loading",
-                  radius: 85,
-                  strokeWidth: 20,
-                  ...spinPropsRef?.value
-                }
-              );
-            }
-            const { value: renderSwitcherIcon } = renderSwitcherIconRef;
-            return renderSwitcherIcon ? renderSwitcherIcon({
-              expanded: props.expanded,
-              selected: props.selected,
-              option: props.tmNode.rawNode
-            }) : /* @__PURE__ */ h(UBaseIcon, { clsPrefix, key: "switcher" }, { default: () => /* @__PURE__ */ h(SwitcherIcon, null) });
+        /* @__PURE__ */ h("div", { class: `${clsPrefix}-tree-node-switcher__icon` }, props.loading ? /* @__PURE__ */ h(
+          UBaseLoading,
+          {
+            clsPrefix,
+            key: "loading",
+            radius: 85,
+            strokeWidth: 20,
+            ...spinPropsRef?.value
           }
-        }))
+        ) : renderSwitchIcon())
       );
     };
   }
@@ -108922,19 +108915,20 @@ var style$3 = cB("tree", `
     vertical-align: bottom;
   `, [cE("icon", `
       position: relative;
-      height: 14px;
-      width: 14px;
+      height: var(--u-switcher-size);
+      width: var(--u-switcher-size);
       display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 50%;
       color: var(--u-arrow-color);
-      transition: color .3s var(--u-bezier);
+      background-color: var(--u-switcher-color);
+      transition:
+        color .3s var(--u-bezier),
+        background-color .3s var(--u-bezier);
       font-size: 14px;
     `, [cB("icon", [iconSwitchTransitionNode]), cB("base-loading", `
         color: var(--u-loading-color);
-        position: absolute;
-        left: 0;
-        top: 0;
-        right: 0;
-        bottom: 0;
       `, [iconSwitchTransitionNode]), cB("base-icon", [iconSwitchTransitionNode])]), cM("hide", "visibility: hidden;"), cM("expanded", "transform: rotate(90deg);")]), cB("tree-node-checkbox", `
     display: inline-flex;
     height: var(--u-node-content-height);
@@ -109071,7 +109065,7 @@ const treeProps = {
   scrollbarProps: Object,
   indent: {
     type: Number,
-    default: 24
+    default: 36
   },
   allowDrop: {
     type: Function,
@@ -109107,6 +109101,7 @@ const treeProps = {
   "onUpdate:checkedKeys": [Function, Array],
   onUpdateSelectedKeys: [Function, Array],
   "onUpdate:selectedKeys": [Function, Array],
+  onScroll: [Function, Array],
   ...treeSharedProps,
   // internal props for tree-select
   internalTreeSelect: Boolean,
@@ -109846,8 +109841,8 @@ var _UTree = defineComponent({
       }
       doDragLeave({ event, node: node.rawNode });
     }
-    function handleDragLeaveTree(e) {
-      if (e.target !== e.currentTarget)
+    function handleDragLeaveTree(event) {
+      if (event.target !== event.currentTarget)
         return;
       resetDropState();
     }
@@ -110044,22 +110039,26 @@ var _UTree = defineComponent({
       });
       resetDndState();
     }
-    function handleScroll() {
+    function doScroll(event) {
+      props.onScroll && call(props.onScroll, event);
+    }
+    function handleScroll(event) {
       syncScrollbar();
+      doScroll(event);
     }
     function handleResize() {
       syncScrollbar();
     }
-    function handleFocusout(e) {
+    function handleFocusout(event) {
       if (props.virtualScroll || props.internalScrollable) {
         const { value: scrollbarInst } = scrollbarInstRef;
-        if (scrollbarInst?.containerRef?.contains(e.relatedTarget)) {
+        if (scrollbarInst?.containerRef?.contains(event.relatedTarget)) {
           return;
         }
         pendingNodeKeyRef.value = null;
       } else {
         const { value: selfEl } = selfElRef;
-        if (selfEl?.contains(e.relatedTarget))
+        if (selfEl?.contains(event.relatedTarget))
           return;
         pendingNodeKeyRef.value = null;
       }
@@ -110172,6 +110171,8 @@ var _UTree = defineComponent({
           nodeColorPressed,
           nodeColorActive,
           arrowColor,
+          switcherColor,
+          switcherSize,
           loadingColor,
           nodeTextColor,
           nodeTextColorDisabled,
@@ -110188,6 +110189,8 @@ var _UTree = defineComponent({
       );
       return {
         "--u-arrow-color": arrowColor,
+        "--u-switcher-color": switcherColor,
+        "--u-switcher-size": switcherSize,
         "--u-loading-color": loadingColor,
         "--u-bezier": cubicBezierEaseInOut,
         "--u-font-size": fontSize,
@@ -110336,6 +110339,7 @@ var _UTree = defineComponent({
           ...scrollbarProps,
           class: treeClass,
           tabindex,
+          onScroll: this.handleScroll,
           onKeydown: mergedFocusable ? handleKeydown : void 0,
           onFocusout: mergedFocusable ? handleFocusout : void 0,
           style: this.cssVars,
@@ -110379,6 +110383,34 @@ var _UTree = defineComponent({
   }
 });
 
+function isVerticallyVisibleWithin(element, containerRect) {
+  const elementRect = element.getBoundingClientRect();
+  return elementRect.top < containerRect.bottom && elementRect.bottom > containerRect.top;
+}
+function scanReachedRootOptions(scrollElement, rootNodes, expandedKeys, previousVisibleKeys) {
+  const containerRect = scrollElement.getBoundingClientRect();
+  const visibleKeys = /* @__PURE__ */new Set();
+  const reachedOptions = [];
+  for (const rootNode of rootNodes) {
+    const {
+      children
+    } = rootNode;
+    if (!children?.length || !expandedKeys?.includes(rootNode.key)) continue;
+    const lastChild = children[children.length - 1];
+    const lastChildElement = scrollElement.querySelector(`[data-key="${createDataKey(lastChild.key)}"]`);
+    const isHiddenOrMissing = !lastChildElement || !isVerticallyVisibleWithin(lastChildElement, containerRect);
+    if (isHiddenOrMissing) continue;
+    visibleKeys.add(rootNode.key);
+    if (!previousVisibleKeys.has(rootNode.key)) {
+      reachedOptions.push(rootNode.rawNode);
+    }
+  }
+  return {
+    reachedOptions,
+    visibleKeys
+  };
+}
+
 var style$2 = c$1([cB("tree-select", `
     z-index: auto;
     outline: none;
@@ -110462,6 +110494,7 @@ const treeSelectProps = {
   loading: Boolean,
   maxTagCount: [String, Number],
   multiple: Boolean,
+  remote: Boolean,
   showPath: Boolean,
   separator: {
     type: String,
@@ -110497,6 +110530,9 @@ const treeSelectProps = {
   nodeProps: Function,
   onBlur: Function,
   onFocus: Function,
+  onScroll: [Function, Array],
+  onScrollOptionEnd: [Function, Array],
+  onSearch: [Function, Array],
   onLoad: Function,
   onUpdateShow: [Function, Array],
   onUpdateValue: [Function, Array],
@@ -110547,15 +110583,16 @@ var _UTreeSelect = defineComponent({
     const controlledShowRef = toRef(props, "show");
     const mergedShowRef = useMergedState(controlledShowRef, uncontrolledShowRef);
     const patternRef = ref("");
+    const treePatternRef = computed(() => {
+      return props.remote ? "" : patternRef.value;
+    });
     const mergedFilterRef = computed(() => {
-      const { filter } = props;
-      if (filter)
-        return filter;
-      const { labelField } = props;
+      if (props.filter)
+        return props.filter;
       return (pattern, node) => {
         if (!pattern.length)
           return true;
-        return node[labelField].toLowerCase().includes(pattern.toLowerCase());
+        return node[props.labelField].toLowerCase().includes(pattern.toLowerCase());
       };
     });
     const dataTreeMateRef = computed(
@@ -110585,6 +110622,7 @@ var _UTreeSelect = defineComponent({
       uncontrolledExpandedKeysRef
     );
     const focusedRef = ref(false);
+    let visibleRootEndKeys = /* @__PURE__ */ new Set();
     const mergedPlaceholderRef = computed(() => {
       const { placeholder } = props;
       if (placeholder !== void 0)
@@ -110727,17 +110765,17 @@ var _UTreeSelect = defineComponent({
       }
       uncontrolledExpandedKeysRef.value = keys;
     }
-    function doFocus(e) {
+    function doFocus(event) {
       const { onFocus } = props;
       if (onFocus)
-        onFocus(e);
+        onFocus(event);
       triggerFormFocus();
     }
-    function doBlur(e) {
+    function doBlur(event) {
       closeMenu();
       const { onBlur } = props;
       if (onBlur)
-        onBlur(e);
+        onBlur(event);
       triggerFormBlur();
     }
     function closeMenu() {
@@ -110754,11 +110792,12 @@ var _UTreeSelect = defineComponent({
     }
     function handleMenuLeave() {
       patternRef.value = "";
+      visibleRootEndKeys = /* @__PURE__ */ new Set();
     }
-    function handleMenuClickoutside(e) {
+    function handleMenuClickoutside(event) {
       if (mergedShowRef.value) {
         if (!triggerInstRef.value?.$el.contains(
-          getPreciseEventTarget(e)
+          getPreciseEventTarget(event)
         )) {
           closeMenu();
         }
@@ -110806,34 +110845,34 @@ var _UTreeSelect = defineComponent({
         doUpdateIndeterminateKeys(keys, getOptionsByKeys(keys));
       }
     }
-    function handleTriggerFocus(e) {
-      if (menuElRef.value?.contains(e.relatedTarget))
+    function handleTriggerFocus(event) {
+      if (menuElRef.value?.contains(event.relatedTarget))
         return;
       focusedRef.value = true;
-      doFocus(e);
+      doFocus(event);
     }
-    function handleTriggerBlur(e) {
-      if (menuElRef.value?.contains(e.relatedTarget))
+    function handleTriggerBlur(event) {
+      if (menuElRef.value?.contains(event.relatedTarget))
         return;
       focusedRef.value = false;
-      doBlur(e);
+      doBlur(event);
     }
-    function handleMenuFocusin(e) {
-      if (menuElRef.value?.contains(e.relatedTarget) || triggerInstRef.value?.$el?.contains(e.relatedTarget)) {
+    function handleMenuFocusin(event) {
+      if (menuElRef.value?.contains(event.relatedTarget) || triggerInstRef.value?.$el?.contains(event.relatedTarget)) {
         return;
       }
       focusedRef.value = true;
-      doFocus(e);
+      doFocus(event);
     }
-    function handleMenuFocusout(e) {
-      if (menuElRef.value?.contains(e.relatedTarget) || triggerInstRef.value?.$el?.contains(e.relatedTarget)) {
+    function handleMenuFocusout(event) {
+      if (menuElRef.value?.contains(event.relatedTarget) || triggerInstRef.value?.$el?.contains(event.relatedTarget)) {
         return;
       }
       focusedRef.value = false;
-      doBlur(e);
+      doBlur(event);
     }
-    function handleClear(e) {
-      e.stopPropagation();
+    function handleClear(event) {
+      event.stopPropagation();
       const { multiple } = props;
       if (!multiple && props.filterable) {
         closeMenu();
@@ -110886,20 +110925,24 @@ var _UTreeSelect = defineComponent({
         }
       }
     }
-    function handlePatternInput(e) {
-      const { value } = e.target;
+    function doSearch(value) {
+      props.onSearch && call(props.onSearch, value);
+    }
+    function handlePatternInput(event) {
+      const { value } = event.target;
       patternRef.value = value;
+      doSearch(value);
     }
-    function treeHandleKeydown(e) {
+    function treeHandleKeydown(event) {
       const { value: treeInst } = treeInstRef;
       if (treeInst) {
-        treeInst.handleKeydown(e);
+        treeInst.handleKeydown(event);
       }
     }
-    function handleKeydown(e) {
-      if (e.key === "Enter") {
+    function handleKeydown(event) {
+      if (event.key === "Enter") {
         if (mergedShowRef.value) {
-          treeHandleKeydown(e);
+          treeHandleKeydown(event);
           if (!props.multiple) {
             closeMenu();
             focusSelection();
@@ -110907,17 +110950,17 @@ var _UTreeSelect = defineComponent({
         } else {
           openMenu();
         }
-        e.preventDefault();
-      } else if (e.key === "Escape") {
+        event.preventDefault();
+      } else if (event.key === "Escape") {
         if (mergedShowRef.value) {
-          markEventEffectPerformed(e);
+          markEventEffectPerformed(event);
           closeMenu();
           focusSelection();
         }
       } else {
         if (mergedShowRef.value) {
-          treeHandleKeydown(e);
-        } else if (e.key === "ArrowDown") {
+          treeHandleKeydown(event);
+        } else if (event.key === "ArrowDown") {
           openMenu();
         }
       }
@@ -110926,9 +110969,35 @@ var _UTreeSelect = defineComponent({
       closeMenu();
       focusSelection();
     }
-    function handleMenuMousedown(e) {
-      if (!happensIn(e, "action"))
-        e.preventDefault();
+    function handleMenuMousedown(event) {
+      if (!happensIn(event, "action"))
+        event.preventDefault();
+    }
+    function doScroll(event) {
+      const { onScroll } = props;
+      if (onScroll)
+        call(onScroll, event);
+    }
+    function doScrollOptionEnd(option, event) {
+      props.onScrollOptionEnd && call(props.onScrollOptionEnd, option, event);
+    }
+    function handleTreeScroll(event) {
+      doScroll(event);
+      if (!props.onScrollOptionEnd)
+        return;
+      const scrollElement = event.currentTarget || event.target;
+      if (!scrollElement)
+        return;
+      const { reachedOptions, visibleKeys } = scanReachedRootOptions(
+        scrollElement,
+        dataTreeMateRef.value.treeNodes,
+        mergedExpandedKeysRef.value,
+        visibleRootEndKeys
+      );
+      visibleRootEndKeys = visibleKeys;
+      for (const reachedOption of reachedOptions) {
+        doScrollOptionEnd(reachedOption, event);
+      }
     }
     const selectionRenderTagRef = computed(() => {
       const { renderTag } = props;
@@ -111060,6 +111129,7 @@ var _UTreeSelect = defineComponent({
       selectedOption: selectedOptionRef,
       selectedOptions: selectedOptionsRef,
       pattern: patternRef,
+      treePattern: treePatternRef,
       pendingNodeKey: pendingNodeKeyRef,
       mergedCascade: mergedCascadeRef,
       mergedFilter: mergedFilterRef,
@@ -111081,6 +111151,7 @@ var _UTreeSelect = defineComponent({
       handleKeydown,
       handleTabOut,
       handleMenuMousedown,
+      handleTreeScroll,
       mergedTheme: themeRef,
       cssVars: inlineThemeDisabled ? void 0 : cssVarsRef,
       themeClass: themeClassHandle?.themeClass,
@@ -111191,7 +111262,7 @@ var _UTreeSelect = defineComponent({
                           allowCheckingNotLoaded: this.allowCheckingNotLoaded,
                           showIrrelevantNodes: false,
                           animated: false,
-                          pattern: this.pattern,
+                          pattern: this.treePattern,
                           filter: this.mergedFilter,
                           data: options,
                           cancelable: multiple,
@@ -111241,7 +111312,8 @@ var _UTreeSelect = defineComponent({
                           onLoad: this.onLoad,
                           onUpdateCheckedKeys: this.handleUpdateCheckedKeys,
                           onUpdateIndeterminateKeys: this.handleUpdateIndeterminateKeys,
-                          onUpdateExpandedKeys: this.doUpdateExpandedKeys
+                          onUpdateExpandedKeys: this.doUpdateExpandedKeys,
+                          onScroll: this.handleTreeScroll
                         }
                       ),
                       resolveWrappedSlot($slots.action, (children) => {
@@ -113169,7 +113241,7 @@ function useThemeVars() {
   });
 }
 
-var version = "2.0.6";
+var version = "2.0.8";
 
 function create({
   componentPrefix = "U",