@uzum-tech/ui 2.0.6 → 2.0.8

package/dist/index.js

@@ -11174,7 +11174,7 @@
    * @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);
@@ -14810,13 +14810,6 @@
     ))
   );
 
-  var SwitcherIcon = vue.defineComponent({
-    name: "Switcher",
-    render() {
-      return /* @__PURE__ */ vue.h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, /* @__PURE__ */ vue.h("path", { d: "M12 8l10 8l-10 8z" }));
-    }
-  });
-
   var TimeIcon = replaceable(
     "time",
     /* @__PURE__ */ vue.h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512" }, /* @__PURE__ */ vue.h(
@@ -49221,6 +49214,8 @@
       nodeColorPressed: elementsQuaternary,
       nodeColorActive: brandPrimary100,
       arrowColor: elementsPrimary,
+      switcherColor: elementsTertiary,
+      switcherSize: "22px",
       nodeTextColor: textPrimary,
       nodeTextColorDisabled: textSecondary,
       loadingColor: elementsPrimary,
@@ -108203,6 +108198,16 @@
         treeInjectionKey,
         null
       );
+      const renderSwitchIcon = () => {
+        const { value: renderSwitcherIcon } = renderSwitcherIconRef;
+        return /* @__PURE__ */ vue.h(UIconSwitchTransition, null, {
+          default: () => renderSwitcherIcon ? renderSwitcherIcon({
+            expanded: props.expanded,
+            selected: props.selected,
+            option: props.tmNode.rawNode
+          }) : /* @__PURE__ */ vue.h(UBaseIcon, { clsPrefix: props.clsPrefix, key: "switcher" }, { default: () => /* @__PURE__ */ vue.h(ChevronRightIcon, null) })
+        });
+      };
       return () => {
         const { clsPrefix, expanded, hide, indent, onClick } = props;
         return /* @__PURE__ */ vue.h(
@@ -108217,28 +108222,16 @@
             style: { width: `${indent}px` },
             onClick
           },
-          /* @__PURE__ */ vue.h("div", { class: `${clsPrefix}-tree-node-switcher__icon` }, /* @__PURE__ */ vue.h(UIconSwitchTransition, null, {
-            default: () => {
-              if (props.loading) {
-                return /* @__PURE__ */ vue.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__ */ vue.h(UBaseIcon, { clsPrefix, key: "switcher" }, { default: () => /* @__PURE__ */ vue.h(SwitcherIcon, null) });
+          /* @__PURE__ */ vue.h("div", { class: `${clsPrefix}-tree-node-switcher__icon` }, props.loading ? /* @__PURE__ */ vue.h(
+            UBaseLoading,
+            {
+              clsPrefix,
+              key: "loading",
+              radius: 85,
+              strokeWidth: 20,
+              ...spinPropsRef?.value
             }
-          }))
+          ) : renderSwitchIcon())
         );
       };
     }
@@ -108926,19 +108919,20 @@
     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);
@@ -109075,7 +109069,7 @@
     scrollbarProps: Object,
     indent: {
       type: Number,
-      default: 24
+      default: 36
     },
     allowDrop: {
       type: Function,
@@ -109111,6 +109105,7 @@
     "onUpdate:checkedKeys": [Function, Array],
     onUpdateSelectedKeys: [Function, Array],
     "onUpdate:selectedKeys": [Function, Array],
+    onScroll: [Function, Array],
     ...treeSharedProps,
     // internal props for tree-select
     internalTreeSelect: Boolean,
@@ -109850,8 +109845,8 @@
         }
         doDragLeave({ event, node: node.rawNode });
       }
-      function handleDragLeaveTree(e) {
-        if (e.target !== e.currentTarget)
+      function handleDragLeaveTree(event) {
+        if (event.target !== event.currentTarget)
           return;
         resetDropState();
       }
@@ -110048,22 +110043,26 @@
         });
         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;
         }
@@ -110176,6 +110175,8 @@
             nodeColorPressed,
             nodeColorActive,
             arrowColor,
+            switcherColor,
+            switcherSize,
             loadingColor,
             nodeTextColor,
             nodeTextColorDisabled,
@@ -110192,6 +110193,8 @@
         );
         return {
           "--u-arrow-color": arrowColor,
+          "--u-switcher-color": switcherColor,
+          "--u-switcher-size": switcherSize,
           "--u-loading-color": loadingColor,
           "--u-bezier": cubicBezierEaseInOut,
           "--u-font-size": fontSize,
@@ -110340,6 +110343,7 @@
             ...scrollbarProps,
             class: treeClass,
             tabindex,
+            onScroll: this.handleScroll,
             onKeydown: mergedFocusable ? handleKeydown : void 0,
             onFocusout: mergedFocusable ? handleFocusout : void 0,
             style: this.cssVars,
@@ -110383,6 +110387,34 @@
     }
   });
 
+  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;
@@ -110466,6 +110498,7 @@
     loading: Boolean,
     maxTagCount: [String, Number],
     multiple: Boolean,
+    remote: Boolean,
     showPath: Boolean,
     separator: {
       type: String,
@@ -110501,6 +110534,9 @@
     nodeProps: Function,
     onBlur: Function,
     onFocus: Function,
+    onScroll: [Function, Array],
+    onScrollOptionEnd: [Function, Array],
+    onSearch: [Function, Array],
     onLoad: Function,
     onUpdateShow: [Function, Array],
     onUpdateValue: [Function, Array],
@@ -110551,15 +110587,16 @@
       const controlledShowRef = vue.toRef(props, "show");
       const mergedShowRef = useMergedState(controlledShowRef, uncontrolledShowRef);
       const patternRef = vue.ref("");
+      const treePatternRef = vue.computed(() => {
+        return props.remote ? "" : patternRef.value;
+      });
       const mergedFilterRef = vue.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 = vue.computed(
@@ -110589,6 +110626,7 @@
         uncontrolledExpandedKeysRef
       );
       const focusedRef = vue.ref(false);
+      let visibleRootEndKeys = /* @__PURE__ */ new Set();
       const mergedPlaceholderRef = vue.computed(() => {
         const { placeholder } = props;
         if (placeholder !== void 0)
@@ -110731,17 +110769,17 @@
         }
         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() {
@@ -110758,11 +110796,12 @@
       }
       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();
           }
@@ -110810,34 +110849,34 @@
           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();
@@ -110890,20 +110929,24 @@
           }
         }
       }
-      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();
@@ -110911,17 +110954,17 @@
           } 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();
           }
         }
@@ -110930,9 +110973,35 @@
         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 = vue.computed(() => {
         const { renderTag } = props;
@@ -111064,6 +111133,7 @@
         selectedOption: selectedOptionRef,
         selectedOptions: selectedOptionsRef,
         pattern: patternRef,
+        treePattern: treePatternRef,
         pendingNodeKey: pendingNodeKeyRef,
         mergedCascade: mergedCascadeRef,
         mergedFilter: mergedFilterRef,
@@ -111085,6 +111155,7 @@
         handleKeydown,
         handleTabOut,
         handleMenuMousedown,
+        handleTreeScroll,
         mergedTheme: themeRef,
         cssVars: inlineThemeDisabled ? void 0 : cssVarsRef,
         themeClass: themeClassHandle?.themeClass,
@@ -111195,7 +111266,7 @@
                             allowCheckingNotLoaded: this.allowCheckingNotLoaded,
                             showIrrelevantNodes: false,
                             animated: false,
-                            pattern: this.pattern,
+                            pattern: this.treePattern,
                             filter: this.mergedFilter,
                             data: options,
                             cancelable: multiple,
@@ -111245,7 +111316,8 @@
                             onLoad: this.onLoad,
                             onUpdateCheckedKeys: this.handleUpdateCheckedKeys,
                             onUpdateIndeterminateKeys: this.handleUpdateIndeterminateKeys,
-                            onUpdateExpandedKeys: this.doUpdateExpandedKeys
+                            onUpdateExpandedKeys: this.doUpdateExpandedKeys,
+                            onScroll: this.handleTreeScroll
                           }
                         ),
                         resolveWrappedSlot($slots.action, (children) => {
@@ -113173,7 +113245,7 @@
     });
   }
 
-  var version = "2.0.6";
+  var version = "2.0.8";
 
   function create({
     componentPrefix = "U",