@uzum-tech/ui 2.3.2 → 2.3.4

package/es/_internal/select-menu/src/SelectMenu.mjs

@@ -1,101 +1,30 @@
 import { depx, getPadding, happensIn } from 'seemly';
 import { createIndexGetter } from 'treemate';
-import { computed, defineComponent, h, nextTick, onBeforeUnmount, onMounted, provide, ref, toRef, watch } from 'vue';
-import { VirtualList } from 'vueuc';
+import { computed, defineComponent, h, nextTick, onBeforeUnmount, provide, ref, toRef, watch } from 'vue';
 import { useConfig, useTheme, useThemeClass } from "../../../_mixins/index.mjs";
-import { resolveSlot, resolveWrappedSlot, useOnResize } from "../../../_utils/index.mjs";
+import { isSlotEmpty, useOnResize } from "../../../_utils/index.mjs";
 import { createKey } from "../../../_utils/cssr/index.mjs";
-import { UEmpty } from "../../../empty/index.mjs";
-import UFocusDetector from "../../focus-detector/index.mjs";
-import UInternalLoading from "../../loading/index.mjs";
-import { UScrollbar } from "../../scrollbar/index.mjs";
 import { internalSelectMenuLight } from "../styles/index.mjs";
-import { internalSelectionMenuBodyInjectionKey, internalSelectionMenuInjectionKey } from "./interface.mjs";
-import USelectGroupHeader from "./SelectGroupHeader.mjs";
-import USelectOption from "./SelectOption.mjs";
+import { internalSelectionMenuBodyInjectionKey, internalSelectionMenuInjectionKey, internalSelectMenuProps } from "./interface.mjs";
+import SelectMenuAction from "./SelectMenuParts/Action.mjs";
+import SelectMenuHeader from "./SelectMenuParts/Header.mjs";
+import SelectMenuList from "./SelectMenuParts/List.mjs";
+import SelectMenuSearch from "./SelectMenuParts/Search.mjs";
 import style from "./styles/index.cssr.mjs";
 export default defineComponent({
   name: 'InternalSelectMenu',
-  props: Object.assign(Object.assign({}, useTheme.props), {
-    clsPrefix: {
-      type: String,
-      required: true
-    },
-    scrollable: {
-      type: Boolean,
-      default: true
-    },
-    treeMate: {
-      type: Object,
-      required: true
-    },
-    multiple: Boolean,
-    account: Boolean,
-    size: {
-      type: String,
-      default: 'medium'
-    },
-    value: {
-      type: [String, Number, Array],
-      default: null
-    },
-    autoPending: Boolean,
-    virtualScroll: {
-      type: Boolean,
-      default: true
-    },
-    // show is used to toggle pending state initialization
-    show: {
-      type: Boolean,
-      default: true
-    },
-    labelField: {
-      type: String,
-      default: 'label'
-    },
-    valueField: {
-      type: String,
-      default: 'value'
-    },
-    loading: Boolean,
-    focusable: Boolean,
-    renderLabel: Function,
-    renderOption: Function,
-    nodeProps: Function,
-    showCheckmark: {
-      type: Boolean,
-      default: true
-    },
-    onMousedown: Function,
-    onScroll: Function,
-    onFocus: Function,
-    onBlur: Function,
-    onKeyup: Function,
-    onKeydown: Function,
-    onTabOut: Function,
-    onMouseenter: Function,
-    onMouseleave: Function,
-    onResize: Function,
-    resetMenuOnOptionsChange: {
-      type: Boolean,
-      default: true
-    },
-    inlineThemeDisabled: Boolean,
-    scrollbarProps: Object,
-    // deprecated
-    onToggle: Function
-  }),
+  props: internalSelectMenuProps,
   setup(props) {
     const {
       mergedComponentPropsRef
     } = useConfig(props);
     const themeRef = useTheme('InternalSelectMenu', '-internal-select-menu', style, internalSelectMenuLight, props, toRef(props, 'clsPrefix'));
     const selfRef = ref(null);
-    const virtualListRef = ref(null);
-    const scrollbarRef = ref(null);
+    const listPartRef = ref(null);
+    const searchPartRef = ref(null);
+    const pendingNodeRef = ref(null);
     const flattenedNodesRef = computed(() => props.treeMate.getFlattenedNodes());
     const fIndexGetterRef = computed(() => createIndexGetter(flattenedNodesRef.value));
-    const pendingNodeRef = ref(null);
     function initPendingNode() {
       const {
         treeMate
@@ -188,16 +117,6 @@ export default defineComponent({
       } = props;
       if (onScroll) onScroll(e);
     }
-    // required, scroller sync need to be triggered manually
-    function handleVirtualListScroll(e) {
-      var _a;
-      (_a = scrollbarRef.value) === null || _a === void 0 ? void 0 : _a.sync();
-      doScroll(e);
-    }
-    function handleVirtualListResize() {
-      var _a;
-      (_a = scrollbarRef.value) === null || _a === void 0 ? void 0 : _a.sync();
-    }
     function getPendingTmNode() {
       const {
         value: pendingTmNode
@@ -255,21 +174,16 @@ export default defineComponent({
       if (doScroll) scrollToPendingNode();
     }
     function scrollToPendingNode() {
-      var _a, _b;
+      var _a;
       const tmNode = pendingNodeRef.value;
       if (!tmNode) return;
       const fIndex = fIndexGetterRef.value(tmNode.key);
       if (fIndex === null) return;
-      if (props.virtualScroll) {
-        (_a = virtualListRef.value) === null || _a === void 0 ? void 0 : _a.scrollTo({
-          index: fIndex
-        });
-      } else {
-        (_b = scrollbarRef.value) === null || _b === void 0 ? void 0 : _b.scrollTo({
-          index: fIndex,
-          elSize: itemSizeRef.value
-        });
-      }
+      (_a = listPartRef.value) === null || _a === void 0 ? void 0 : _a.scrollTo(fIndex);
+    }
+    function focusSearchInput() {
+      var _a;
+      (_a = searchPartRef.value) === null || _a === void 0 ? void 0 : _a.focus();
     }
     function handleFocusin(e) {
       var _a, _b;
@@ -290,6 +204,7 @@ export default defineComponent({
       pendingTmNodeRef: pendingNodeRef,
       nodePropsRef: toRef(props, 'nodeProps'),
       showCheckmarkRef: toRef(props, 'showCheckmark'),
+      markTypeRef: toRef(props, 'markType'),
       multipleRef: toRef(props, 'multiple'),
       accountRef: toRef(props, 'account'),
       valueRef: toRef(props, 'value'),
@@ -299,12 +214,6 @@ export default defineComponent({
       valueFieldRef: toRef(props, 'valueField')
     });
     provide(internalSelectionMenuBodyInjectionKey, selfRef);
-    onMounted(() => {
-      const {
-        value
-      } = scrollbarRef;
-      if (value) value.sync();
-    });
     const cssVarsRef = computed(() => {
       const {
         size
@@ -374,38 +283,25 @@ export default defineComponent({
       selfRef,
       next,
       prev,
-      getPendingTmNode
+      getPendingTmNode,
+      focusSearchInput
     };
     useOnResize(selfRef, props.onResize);
     return Object.assign({
       mergedTheme: themeRef,
-      virtualListRef,
-      scrollbarRef,
+      listPartRef,
+      searchPartRef,
       itemSize: itemSizeRef,
       padding: paddingRef,
       flattenedNodes: flattenedNodesRef,
       empty: emptyRef,
       mergedRenderEmpty: mergedRenderEmptyRef,
-      virtualListContainer() {
-        const {
-          value
-        } = virtualListRef;
-        return value === null || value === void 0 ? void 0 : value.listElRef;
-      },
-      virtualListContent() {
-        const {
-          value
-        } = virtualListRef;
-        return value === null || value === void 0 ? void 0 : value.itemsElRef;
-      },
       doScroll,
       handleFocusin,
       handleFocusout,
       handleKeyUp,
       handleKeyDown,
       handleMouseDown,
-      handleVirtualListResize,
-      handleVirtualListScroll,
       cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
       themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
       onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender
@@ -414,17 +310,17 @@ export default defineComponent({
   render() {
     const {
       $slots,
-      virtualScroll,
       clsPrefix,
       mergedTheme,
       themeClass,
       onRender
     } = this;
     onRender === null || onRender === void 0 ? void 0 : onRender();
+    const hasFooter = !isSlotEmpty($slots.action);
     return h("div", {
       ref: "selfRef",
       tabindex: this.focusable ? 0 : -1,
-      class: [`${clsPrefix}-base-select-menu`, themeClass, this.multiple && `${clsPrefix}-base-select-menu--multiple`],
+      class: [`${clsPrefix}-base-select-menu`, themeClass, this.multiple && `${clsPrefix}-base-select-menu--multiple`, this.filterable && `${clsPrefix}-base-select-menu--has-search`, hasFooter && `${clsPrefix}-base-select-menu--has-footer`],
       style: this.cssVars,
       onFocusin: this.handleFocusin,
       onFocusout: this.handleFocusout,
@@ -433,83 +329,39 @@ export default defineComponent({
       onMousedown: this.handleMouseDown,
       onMouseenter: this.onMouseenter,
       onMouseleave: this.onMouseleave
-    }, resolveWrappedSlot($slots.header, children => children && h("div", {
-      class: `${clsPrefix}-base-select-menu__header`,
-      "data-header": true,
-      key: "header"
-    }, children)), this.loading ? h("div", {
-      class: `${clsPrefix}-base-select-menu__loading`
-    }, h(UInternalLoading, {
+    }, this.filterable ? h(SelectMenuSearch, {
+      ref: "searchPartRef",
       clsPrefix: clsPrefix,
-      strokeWidth: 20
-    })) : !this.empty ? h(UScrollbar, Object.assign({
-      ref: "scrollbarRef",
-      theme: mergedTheme.peers.Scrollbar,
-      themeOverrides: mergedTheme.peerOverrides.Scrollbar,
+      size: this.size,
+      pattern: this.pattern,
+      searchPlaceholder: this.searchPlaceholder,
+      mergedTheme: mergedTheme,
+      onPatternInput: this.onPatternInput
+    }) : null, h(SelectMenuHeader, {
+      clsPrefix: clsPrefix
+    }, {
+      default: $slots.header
+    }), h(SelectMenuList, {
+      ref: "listPartRef",
+      clsPrefix: clsPrefix,
+      loading: this.loading,
+      empty: this.empty,
+      virtualScroll: this.virtualScroll,
       scrollable: this.scrollable,
-      container: virtualScroll ? this.virtualListContainer : undefined,
-      content: virtualScroll ? this.virtualListContent : undefined,
-      onScroll: virtualScroll ? undefined : this.doScroll
-    }, this.scrollbarProps), {
-      default: () => {
-        return virtualScroll ? h(VirtualList, {
-          ref: "virtualListRef",
-          class: `${clsPrefix}-virtual-list`,
-          items: this.flattenedNodes,
-          itemSize: this.itemSize,
-          showScrollbar: false,
-          paddingTop: this.padding.top,
-          paddingBottom: this.padding.bottom,
-          onResize: this.handleVirtualListResize,
-          onScroll: this.handleVirtualListScroll,
-          itemResizable: true
-        }, {
-          default: ({
-            item: tmNode
-          }) => {
-            return tmNode.isGroup ? h(USelectGroupHeader, {
-              key: tmNode.key,
-              clsPrefix: clsPrefix,
-              tmNode: tmNode
-            }) : tmNode.ignored ? null : h(USelectOption, {
-              clsPrefix: clsPrefix,
-              key: tmNode.key,
-              tmNode: tmNode
-            });
-          }
-        }) : h("div", {
-          class: `${clsPrefix}-base-select-menu-option-wrapper`,
-          style: {
-            paddingTop: this.padding.top,
-            paddingBottom: this.padding.bottom
-          }
-        }, this.flattenedNodes.map(tmNode => tmNode.isGroup ? h(USelectGroupHeader, {
-          key: tmNode.key,
-          clsPrefix: clsPrefix,
-          tmNode: tmNode
-        }) : h(USelectOption, {
-          clsPrefix: clsPrefix,
-          key: tmNode.key,
-          tmNode: tmNode
-        })));
-      }
-    }) : h("div", {
-      class: `${clsPrefix}-base-select-menu__empty`,
-      "data-empty": true,
-      "data-action": true
-    }, resolveSlot($slots.empty, () => {
-      var _a;
-      return [((_a = this.mergedRenderEmpty) === null || _a === void 0 ? void 0 : _a.call(this)) || h(UEmpty, {
-        theme: mergedTheme.peers.Empty,
-        themeOverrides: mergedTheme.peerOverrides.Empty
-      })];
-    })), resolveWrappedSlot($slots.action, children => children && [h("div", {
-      class: `${clsPrefix}-base-select-menu__action`,
-      "data-action": true,
-      key: "action"
-    }, children), h(UFocusDetector, {
-      onFocus: this.onTabOut,
-      key: "focus-detector"
-    })]));
+      flattenedNodes: this.flattenedNodes,
+      itemSize: this.itemSize,
+      padding: this.padding,
+      scrollbarProps: this.scrollbarProps,
+      mergedTheme: mergedTheme,
+      mergedRenderEmpty: this.mergedRenderEmpty,
+      onScroll: this.doScroll
+    }, {
+      empty: $slots.empty
+    }), h(SelectMenuAction, {
+      clsPrefix: clsPrefix,
+      onTabOut: this.onTabOut
+    }, {
+      default: $slots.action
+    }));
   }
 });

package/es/_internal/select-menu/src/SelectMenuParts/Action.d.ts

@@ -0,0 +1,15 @@
+import type { PropType } from 'vue';
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    clsPrefix: {
+        type: StringConstructor;
+        required: true;
+    };
+    onTabOut: PropType<() => void>;
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    clsPrefix: {
+        type: StringConstructor;
+        required: true;
+    };
+    onTabOut: PropType<() => void>;
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/es/_internal/select-menu/src/SelectMenuParts/Action.mjs

@@ -0,0 +1,28 @@
+import { defineComponent, h } from 'vue';
+import { resolveWrappedSlot } from "../../../../_utils/index.mjs";
+import UFocusDetector from "../../../focus-detector/index.mjs";
+export default defineComponent({
+  name: 'SelectMenuAction',
+  props: {
+    clsPrefix: {
+      type: String,
+      required: true
+    },
+    onTabOut: Function
+  },
+  render() {
+    const {
+      clsPrefix,
+      onTabOut,
+      $slots
+    } = this;
+    return resolveWrappedSlot($slots.default, children => children && [h("div", {
+      class: `${clsPrefix}-base-select-menu__action`,
+      "data-action": true,
+      key: "action"
+    }, children), h(UFocusDetector, {
+      onFocus: onTabOut,
+      key: "focus-detector"
+    })]);
+  }
+});

package/es/_internal/select-menu/src/SelectMenuParts/Header.d.ts

@@ -0,0 +1,12 @@
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    clsPrefix: {
+        type: StringConstructor;
+        required: true;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    clsPrefix: {
+        type: StringConstructor;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/es/_internal/select-menu/src/SelectMenuParts/Header.mjs

@@ -0,0 +1,22 @@
+import { defineComponent, h } from 'vue';
+import { resolveWrappedSlot } from "../../../../_utils/index.mjs";
+export default defineComponent({
+  name: 'SelectMenuHeader',
+  props: {
+    clsPrefix: {
+      type: String,
+      required: true
+    }
+  },
+  render() {
+    const {
+      clsPrefix,
+      $slots
+    } = this;
+    return resolveWrappedSlot($slots.default, children => children && h("div", {
+      class: `${clsPrefix}-base-select-menu__header`,
+      "data-header": true,
+      key: "header"
+    }, children));
+  }
+});

package/es/_internal/select-menu/src/SelectMenuParts/List.d.ts

@@ -0,0 +1,129 @@
+import type { Margin } from 'seemly';
+import type { TreeNode } from 'treemate';
+import type { PropType, VNodeChild } from 'vue';
+import type { VirtualListInst } from 'vueuc';
+import type { MergedTheme } from '../../../../_mixins';
+import type { SelectGroupOption, SelectIgnoredOption, SelectTreeMate } from '../../../../select/src/interface';
+import type { ScrollbarInst } from '../../../scrollbar';
+import type { ScrollbarProps } from '../../../scrollbar/src/Scrollbar';
+import type { InternalSelectMenuTheme } from '../../styles';
+export interface SelectMenuListInst {
+    sync: () => void;
+    scrollTo: (index: number) => void;
+}
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    clsPrefix: {
+        type: StringConstructor;
+        required: true;
+    };
+    loading: BooleanConstructor;
+    empty: BooleanConstructor;
+    virtualScroll: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    scrollable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    flattenedNodes: {
+        type: PropType<ReturnType<SelectTreeMate["getFlattenedNodes"]>>;
+        default: () => never[];
+    };
+    itemSize: {
+        type: NumberConstructor;
+        required: true;
+    };
+    padding: {
+        type: PropType<Margin>;
+        required: true;
+    };
+    scrollbarProps: PropType<ScrollbarProps>;
+    mergedTheme: {
+        type: PropType<MergedTheme<InternalSelectMenuTheme>>;
+        required: true;
+    };
+    mergedRenderEmpty: PropType<() => VNodeChild>;
+    onScroll: PropType<(e: Event) => void>;
+}>, {
+    virtualListRef: import("vue").Ref<{
+        listElRef: HTMLElement;
+        itemsElRef: HTMLElement | null;
+        scrollTo: import("vueuc").VVirtualListScrollTo;
+    } | null, VirtualListInst | {
+        listElRef: HTMLElement;
+        itemsElRef: HTMLElement | null;
+        scrollTo: import("vueuc").VVirtualListScrollTo;
+    } | null>;
+    scrollbarRef: import("vue").Ref<{
+        $el: HTMLElement;
+        containerRef: HTMLElement | null;
+        contentRef: HTMLElement | null;
+        containerScrollTop: number;
+        syncUnifiedContainer: () => void;
+        scrollTo: import("../../../scrollbar/src/Scrollbar").ScrollTo;
+        scrollBy: import("../../../scrollbar/src/Scrollbar").ScrollBy;
+        sync: () => void;
+        handleMouseEnterWrapper: () => void;
+        handleMouseLeaveWrapper: () => void;
+    } | null, ScrollbarInst | {
+        $el: HTMLElement;
+        containerRef: HTMLElement | null;
+        contentRef: HTMLElement | null;
+        containerScrollTop: number;
+        syncUnifiedContainer: () => void;
+        scrollTo: import("../../../scrollbar/src/Scrollbar").ScrollTo;
+        scrollBy: import("../../../scrollbar/src/Scrollbar").ScrollBy;
+        sync: () => void;
+        handleMouseEnterWrapper: () => void;
+        handleMouseLeaveWrapper: () => void;
+    } | null>;
+    doScroll: (e: Event) => void;
+    handleVirtualListScroll: (e: Event) => void;
+    handleVirtualListResize: () => void;
+    virtualListContainer: () => HTMLElement;
+    virtualListContent: () => HTMLElement;
+    sync: () => void;
+    scrollTo: (index: number) => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    clsPrefix: {
+        type: StringConstructor;
+        required: true;
+    };
+    loading: BooleanConstructor;
+    empty: BooleanConstructor;
+    virtualScroll: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    scrollable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    flattenedNodes: {
+        type: PropType<ReturnType<SelectTreeMate["getFlattenedNodes"]>>;
+        default: () => never[];
+    };
+    itemSize: {
+        type: NumberConstructor;
+        required: true;
+    };
+    padding: {
+        type: PropType<Margin>;
+        required: true;
+    };
+    scrollbarProps: PropType<ScrollbarProps>;
+    mergedTheme: {
+        type: PropType<MergedTheme<InternalSelectMenuTheme>>;
+        required: true;
+    };
+    mergedRenderEmpty: PropType<() => VNodeChild>;
+    onScroll: PropType<(e: Event) => void>;
+}>> & Readonly<{}>, {
+    loading: boolean;
+    scrollable: boolean;
+    virtualScroll: boolean;
+    empty: boolean;
+    flattenedNodes: TreeNode<import("../../../../select/src/interface").SelectBaseOption<string | number, string | ((option: import("../../../../select/src/interface").SelectBaseOption<string | number, string | /*elided*/ any>, selected: boolean) => VNodeChild)>, SelectGroupOption, SelectIgnoredOption>[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;