@uzum-tech/ui 2.0.5 → 2.0.7

package/lib/tree-select/src/TreeSelect.js

@@ -19,6 +19,7 @@ const Tree_1 = require("../../tree/src/Tree");
 const utils_1 = require("../../tree/src/utils");
 const styles_1 = require("../styles");
 const interface_1 = require("./interface");
+const scroll_option_end_1 = require("./scroll-option-end");
 const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
 const utils_2 = require("./utils");
 exports.treeSelectProps = Object.assign(Object.assign(Object.assign(Object.assign({}, _mixins_1.useTheme.props), { bordered: {
@@ -54,7 +55,7 @@ exports.treeSelectProps = Object.assign(Object.assign(Object.assign(Object.assig
     }, size: String, value: [String, Number, Array], to: _utils_1.useAdjustedTo.propTo, menuProps: Object, virtualScroll: {
         type: Boolean,
         default: true
-    }, status: String, renderTag: Function }), Tree_1.treeSharedProps), { renderLabel: Function, renderPrefix: Function, renderSuffix: Function, nodeProps: Function, onBlur: Function, onFocus: Function, onLoad: Function, onUpdateShow: [Function, Array], onUpdateValue: [Function, Array], 'onUpdate:value': [Function, Array], 'onUpdate:show': [Function, Array], 
+    }, status: String, renderTag: Function }), Tree_1.treeSharedProps), { renderLabel: Function, renderPrefix: Function, renderSuffix: Function, nodeProps: Function, onBlur: Function, onFocus: Function, onScroll: [Function, Array], onScrollOptionEnd: [Function, Array], onLoad: Function, onUpdateShow: [Function, Array], onUpdateValue: [Function, Array], 'onUpdate:value': [Function, Array], 'onUpdate:show': [Function, Array], 
     /**
      * @deprecated
      */
@@ -117,6 +118,7 @@ exports.default = (0, vue_1.defineComponent)({
         const controlledExpandedKeysRef = (0, vue_1.toRef)(props, 'expandedKeys');
         const mergedExpandedKeysRef = (0, vooks_1.useMergedState)(controlledExpandedKeysRef, uncontrolledExpandedKeysRef);
         const focusedRef = (0, vue_1.ref)(false);
+        let visibleRootEndKeys = new Set();
         const mergedPlaceholderRef = (0, vue_1.computed)(() => {
             const { placeholder } = props;
             if (placeholder !== undefined)
@@ -232,17 +234,17 @@ exports.default = (0, vue_1.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() {
@@ -259,11 +261,12 @@ exports.default = (0, vue_1.defineComponent)({
         }
         function handleMenuLeave() {
             patternRef.value = '';
+            visibleRootEndKeys = new Set();
         }
-        function handleMenuClickoutside(e) {
+        function handleMenuClickoutside(event) {
             var _a;
             if (mergedShowRef.value) {
-                if (!((_a = triggerInstRef.value) === null || _a === void 0 ? void 0 : _a.$el.contains((0, seemly_1.getPreciseEventTarget)(e)))) {
+                if (!((_a = triggerInstRef.value) === null || _a === void 0 ? void 0 : _a.$el.contains((0, seemly_1.getPreciseEventTarget)(event)))) {
                     // outside select, don't need to return focus
                     closeMenu();
                 }
@@ -316,40 +319,40 @@ exports.default = (0, vue_1.defineComponent)({
                 doUpdateIndeterminateKeys(keys, getOptionsByKeys(keys));
             }
         }
-        function handleTriggerFocus(e) {
+        function handleTriggerFocus(event) {
             var _a;
-            if ((_a = menuElRef.value) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget))
+            if ((_a = menuElRef.value) === null || _a === void 0 ? void 0 : _a.contains(event.relatedTarget))
                 return;
             focusedRef.value = true;
-            doFocus(e);
+            doFocus(event);
         }
-        function handleTriggerBlur(e) {
+        function handleTriggerBlur(event) {
             var _a;
-            if ((_a = menuElRef.value) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget))
+            if ((_a = menuElRef.value) === null || _a === void 0 ? void 0 : _a.contains(event.relatedTarget))
                 return;
             focusedRef.value = false;
-            doBlur(e);
+            doBlur(event);
         }
-        function handleMenuFocusin(e) {
+        function handleMenuFocusin(event) {
             var _a, _b, _c;
-            if (((_a = menuElRef.value) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget))
-                || ((_c = (_b = triggerInstRef.value) === null || _b === void 0 ? void 0 : _b.$el) === null || _c === void 0 ? void 0 : _c.contains(e.relatedTarget))) {
+            if (((_a = menuElRef.value) === null || _a === void 0 ? void 0 : _a.contains(event.relatedTarget))
+                || ((_c = (_b = triggerInstRef.value) === null || _b === void 0 ? void 0 : _b.$el) === null || _c === void 0 ? void 0 : _c.contains(event.relatedTarget))) {
                 return;
             }
             focusedRef.value = true;
-            doFocus(e);
+            doFocus(event);
         }
-        function handleMenuFocusout(e) {
+        function handleMenuFocusout(event) {
             var _a, _b, _c;
-            if (((_a = menuElRef.value) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget))
-                || ((_c = (_b = triggerInstRef.value) === null || _b === void 0 ? void 0 : _b.$el) === null || _c === void 0 ? void 0 : _c.contains(e.relatedTarget))) {
+            if (((_a = menuElRef.value) === null || _a === void 0 ? void 0 : _a.contains(event.relatedTarget))
+                || ((_c = (_b = triggerInstRef.value) === null || _b === void 0 ? void 0 : _b.$el) === null || _c === void 0 ? void 0 : _c.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();
@@ -399,20 +402,20 @@ exports.default = (0, vue_1.defineComponent)({
                 }
             }
         }
-        function handlePatternInput(e) {
-            const { value } = e.target;
+        function handlePatternInput(event) {
+            const { value } = event.target;
             patternRef.value = 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();
@@ -421,20 +424,20 @@ exports.default = (0, vue_1.defineComponent)({
                 else {
                     openMenu();
                 }
-                e.preventDefault();
+                event.preventDefault();
             }
-            else if (e.key === 'Escape') {
+            else if (event.key === 'Escape') {
                 if (mergedShowRef.value) {
-                    (0, _utils_1.markEventEffectPerformed)(e);
+                    (0, _utils_1.markEventEffectPerformed)(event);
                     closeMenu();
                     focusSelection();
                 }
             }
             else {
                 if (mergedShowRef.value) {
-                    treeHandleKeydown(e);
+                    treeHandleKeydown(event);
                 }
-                else if (e.key === 'ArrowDown') {
+                else if (event.key === 'ArrowDown') {
                     openMenu();
                 }
             }
@@ -443,11 +446,33 @@ exports.default = (0, vue_1.defineComponent)({
             closeMenu();
             focusSelection();
         }
-        function handleMenuMousedown(e) {
+        function handleMenuMousedown(event) {
             // If there's an action slot later, we need to check if mousedown happens
             // in action panel
-            if (!(0, seemly_1.happensIn)(e, 'action'))
-                e.preventDefault();
+            if (!(0, seemly_1.happensIn)(event, 'action'))
+                event.preventDefault();
+        }
+        function doScroll(event) {
+            const { onScroll } = props;
+            if (onScroll)
+                (0, _utils_1.call)(onScroll, event);
+        }
+        function doScrollOptionEnd(option, event) {
+            props.onScrollOptionEnd && (0, _utils_1.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 } = (0, scroll_option_end_1.scanReachedRootOptions)(scrollElement, dataTreeMateRef.value.treeNodes, mergedExpandedKeysRef.value, visibleRootEndKeys);
+            visibleRootEndKeys = visibleKeys;
+            for (const reachedOption of reachedOptions) {
+                doScrollOptionEnd(reachedOption, event);
+            }
         }
         const selectionRenderTagRef = (0, vue_1.computed)(() => {
             const { renderTag } = props;
@@ -556,7 +581,8 @@ exports.default = (0, vue_1.defineComponent)({
             handlePatternInput,
             handleKeydown,
             handleTabOut,
-            handleMenuMousedown, mergedTheme: themeRef, cssVars: inlineThemeDisabled ? undefined : cssVarsRef, themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass, onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender });
+            handleMenuMousedown,
+            handleTreeScroll, mergedTheme: themeRef, cssVars: inlineThemeDisabled ? undefined : cssVarsRef, themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass, onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender });
     },
     render() {
         const { mergedTheme, mergedClsPrefix, $slots } = this;
@@ -586,7 +612,7 @@ exports.default = (0, vue_1.defineComponent)({
                                     ], tabindex: 0, onMousedown: this.handleMenuMousedown, onKeydown: this.handleKeydown, onFocusin: this.handleMenuFocusin, onFocusout: this.handleMenuFocusout }),
                                     (0, vue_1.h)(tree_1.UTree, { ref: "treeInstRef", blockLine: true, allowCheckingNotLoaded: this.allowCheckingNotLoaded, showIrrelevantNodes: false, animated: false, pattern: this.pattern, filter: this.mergedFilter, data: options, cancelable: multiple, labelField: this.labelField, keyField: this.keyField, disabledField: this.disabledField, childrenField: this.childrenField, theme: mergedTheme.peers.Tree, themeOverrides: mergedTheme.peerOverrides.Tree, defaultExpandAll: this.defaultExpandAll, defaultExpandedKeys: this.defaultExpandedKeys, expandedKeys: this.mergedExpandedKeys, checkedKeys: this.treeCheckedKeys, selectedKeys: this.treeSelectedKeys, checkable: checkable, checkStrategy: this.checkStrategy, cascade: this.mergedCascade, leafOnly: this.leafOnly, multiple: this.multiple, renderLabel: this.renderLabel, renderPrefix: this.renderPrefix, renderSuffix: this.renderSuffix, renderSwitcherIcon: this.renderSwitcherIcon, nodeProps: this.nodeProps, virtualScroll: this.consistentMenuWidth && this.virtualScroll, internalTreeSelect: true, internalUnifySelectCheck: true, internalScrollable: true, internalScrollablePadding: this.menuPadding, internalFocusable: false, internalCheckboxFocusable: false, internalRenderEmpty: () => ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-tree-select-menu__empty` }, (0, _utils_1.resolveSlot)($slots.empty, () => [
                                             (0, vue_1.h)(empty_1.UEmpty, { theme: mergedTheme.peers.Empty, themeOverrides: mergedTheme.peerOverrides.Empty })
-                                        ]))), onLoad: this.onLoad, onUpdateCheckedKeys: this.handleUpdateCheckedKeys, onUpdateIndeterminateKeys: this.handleUpdateIndeterminateKeys, onUpdateExpandedKeys: this.doUpdateExpandedKeys }),
+                                        ]))), onLoad: this.onLoad, onUpdateCheckedKeys: this.handleUpdateCheckedKeys, onUpdateIndeterminateKeys: this.handleUpdateIndeterminateKeys, onUpdateExpandedKeys: this.doUpdateExpandedKeys, onScroll: this.handleTreeScroll }),
                                     (0, _utils_1.resolveWrappedSlot)($slots.action, (children) => {
                                         return children ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-tree-select-menu__action`, "data-action": true }, children)) : null;
                                     }),

package/lib/tree-select/src/interface.d.ts

@@ -1,4 +1,4 @@
-import type { TreeMate, TreeNode } from 'treemate';
+import type { Key, TreeMate, TreeNode } from 'treemate';
 import type { HTMLAttributes, Ref, VNodeChild } from 'vue';
 import type { TreeOption, TreeOptionBase } from '../../tree/src/interface';
 export type TreeSelectOption = Omit<TreeOptionBase, 'checkboxDisabled' | 'isLeaf' | 'children'> & {
@@ -28,6 +28,11 @@ export type OnUpdateValueImpl = (value: string | number | (string | number) | st
 }) => void;
 export type OnUpdateIndeterminateKeysImpl = (value: string | number | (string | number) | string[] | number[] | Array<string | number> | null, option: TreeSelectOption | null | Array<TreeSelectOption | null>) => void;
 export type Value = string | number | Array<string | number> | null;
+export type OnScrollOptionEnd = (option: TreeSelectOption, event: Event) => void;
+export interface ScrollOptionEndScanResult {
+    reachedOptions: TreeSelectOption[];
+    visibleKeys: Set<Key>;
+}
 export interface TreeSelectInjection {
     pendingNodeKeyRef: Ref<string | number | null>;
     dataTreeMate: Ref<TreeMate<TreeOption>>;

package/lib/tree-select/src/scroll-option-end.d.ts

@@ -0,0 +1,3 @@
+import type { Key } from '../../tree/src/interface';
+import type { ScrollOptionEndScanResult, TreeSelectTmNode } from './interface';
+export declare function scanReachedRootOptions(scrollElement: HTMLElement, rootNodes: TreeSelectTmNode[], expandedKeys: Key[] | undefined, previousVisibleKeys: Set<Key>): ScrollOptionEndScanResult;

package/lib/tree-select/src/scroll-option-end.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.scanReachedRootOptions = scanReachedRootOptions;
+const _utils_1 = require("../../_utils");
+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 = new Set();
+    const reachedOptions = [];
+    for (const rootNode of rootNodes) {
+        const { children } = rootNode;
+        if (!(children === null || children === void 0 ? void 0 : children.length) || !(expandedKeys === null || expandedKeys === void 0 ? void 0 : expandedKeys.includes(rootNode.key)))
+            continue;
+        const lastChild = children[children.length - 1];
+        const lastChildElement = scrollElement.querySelector(`[data-key="${(0, _utils_1.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 };
+}

package/lib/tree-select/styles/light.d.ts

@@ -30,6 +30,8 @@ declare const treeSelectLight: import("../../_mixins/use-theme").Theme<"TreeSele
         nodeColorPressed: string;
         nodeColorActive: string;
         arrowColor: string;
+        switcherColor: string;
+        switcherSize: string;
         nodeTextColor: string;
         nodeTextColorDisabled: string;
         loadingColor: string;

package/lib/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "2.0.5";
+declare const _default: "2.0.7";
 export default _default;

package/lib/version.js

@@ -1,3 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = '2.0.5';
+exports.default = '2.0.7';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uzum-tech/ui",
-  "version": "2.0.5",
+  "version": "2.0.7",
   "description": "A Vue 3 Component Library. Fairly Complete, Theme Customizable, Uses TypeScript, Fast",
   "author": {
     "name": "KapitalLab",
@@ -59,7 +59,7 @@
     "build:themes": "tsc -b --force themes/tusimple/tsconfig.esm.json && tsc -b --force themes/tusimple/tsconfig.cjs.json",
     "build:site": "bash ./scripts/pre-build-site/pre-build-site.sh && NODE_ENV=production NODE_OPTIONS=--max-old-space-size=4096 vite build && bash ./scripts/post-build-site/post-build-site.sh",
     "clean": "rimraf site lib es dist node_modules/@uzum-tech/ui themes/tusimple/es themes/tusimple/lib",
-    "release:package": "pnpm run test && pnpm run build:package && npm publish --no-git-checks",
+    "release:package": "npm login && pnpm install && pnpm run test && pnpm run build:package && npm publish --no-git-checks",
     "release:changelog": "tsx scripts/release-changelog.ts",
     "lint": "pnpm run lint:code && pnpm run lint:type",
     "lint:type": "pnpm run lint:src-type && pnpm run lint:demo-type",

package/web-types.json

@@ -2,7 +2,7 @@
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "framework": "vue",
   "name": "@uzum-tech/ui",
-  "version": "2.0.5",
+  "version": "2.0.7",
   "js-types-syntax": "typescript",
   "contributions": {
     "html": {
@@ -15890,6 +15890,26 @@
                   "since": "2.27.0"
                 }
               },
+              {
+                "name": "scroll",
+                "doc-url": "https://uzum-ui.kapitalbank.uz/en-US/os-theme/components/tree-select",
+                "type": "(e: Event) => void",
+                "description": "Callback fired on every scroll of the options menu. Useful for loading options asynchronously.",
+                "default": "undefined",
+                "description-sections": {
+                  "since": "2.0.7"
+                }
+              },
+              {
+                "name": "scroll-option-end",
+                "doc-url": "https://uzum-ui.kapitalbank.uz/en-US/os-theme/components/tree-select",
+                "type": "(option: TreeSelectOption, e: Event) => void",
+                "description": "Callback fired when the last child of a top-level (root) expanded branch becomes visible in the menu. Called per root branch with that root's option.",
+                "default": "undefined",
+                "description-sections": {
+                  "since": "2.0.7"
+                }
+              },
               {
                 "name": "update:expanded-keys",
                 "doc-url": "https://uzum-ui.kapitalbank.uz/en-US/os-theme/components/tree-select",

package/es/_internal/icons/Switcher.mjs

@@ -1,12 +0,0 @@
-import { defineComponent, h } from 'vue';
-export default defineComponent({
-  name: 'Switcher',
-  render() {
-    return h("svg", {
-      xmlns: "http://www.w3.org/2000/svg",
-      viewBox: "0 0 32 32"
-    }, h("path", {
-      d: "M12 8l10 8l-10 8z"
-    }));
-  }
-});

package/lib/_internal/icons/Switcher.js

@@ -1,10 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const vue_1 = require("vue");
-exports.default = (0, vue_1.defineComponent)({
-    name: 'Switcher',
-    render() {
-        return ((0, vue_1.h)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" },
-            (0, vue_1.h)("path", { d: "M12 8l10 8l-10 8z" })));
-    }
-});