@uzum-tech/ui 2.3.2 → 2.3.4

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

@@ -0,0 +1,196 @@
+import { defineComponent, h, onMounted, ref } from 'vue';
+import { VirtualList } from 'vueuc';
+import { resolveSlot } from "../../../../_utils/index.mjs";
+import { UEmpty } from "../../../../empty/index.mjs";
+import UInternalLoading from "../../../loading/index.mjs";
+import { UScrollbar } from "../../../scrollbar/index.mjs";
+import USelectGroupHeader from "../SelectGroupHeader.mjs";
+import USelectOption from "../SelectOption.mjs";
+export default defineComponent({
+  name: 'SelectMenuList',
+  props: {
+    clsPrefix: {
+      type: String,
+      required: true
+    },
+    loading: Boolean,
+    empty: Boolean,
+    virtualScroll: {
+      type: Boolean,
+      default: true
+    },
+    scrollable: {
+      type: Boolean,
+      default: true
+    },
+    flattenedNodes: {
+      type: Array,
+      default: () => []
+    },
+    itemSize: {
+      type: Number,
+      required: true
+    },
+    padding: {
+      type: Object,
+      required: true
+    },
+    scrollbarProps: Object,
+    mergedTheme: {
+      type: Object,
+      required: true
+    },
+    mergedRenderEmpty: Function,
+    onScroll: Function
+  },
+  setup(props) {
+    const virtualListRef = ref(null);
+    const scrollbarRef = ref(null);
+    function doScroll(e) {
+      var _a;
+      (_a = props.onScroll) === null || _a === void 0 ? void 0 : _a.call(props, 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 virtualListContainer() {
+      const {
+        value
+      } = virtualListRef;
+      return value === null || value === void 0 ? void 0 : value.listElRef;
+    }
+    function virtualListContent() {
+      const {
+        value
+      } = virtualListRef;
+      return value === null || value === void 0 ? void 0 : value.itemsElRef;
+    }
+    function sync() {
+      var _a;
+      (_a = scrollbarRef.value) === null || _a === void 0 ? void 0 : _a.sync();
+    }
+    function scrollTo(index) {
+      var _a, _b;
+      if (props.virtualScroll) {
+        (_a = virtualListRef.value) === null || _a === void 0 ? void 0 : _a.scrollTo({
+          index
+        });
+      } else {
+        (_b = scrollbarRef.value) === null || _b === void 0 ? void 0 : _b.scrollTo({
+          index,
+          elSize: props.itemSize
+        });
+      }
+    }
+    onMounted(() => {
+      var _a;
+      (_a = scrollbarRef.value) === null || _a === void 0 ? void 0 : _a.sync();
+    });
+    return {
+      virtualListRef,
+      scrollbarRef,
+      doScroll,
+      handleVirtualListScroll,
+      handleVirtualListResize,
+      virtualListContainer,
+      virtualListContent,
+      sync,
+      scrollTo
+    };
+  },
+  render() {
+    const {
+      clsPrefix,
+      virtualScroll,
+      mergedTheme,
+      loading,
+      empty,
+      scrollable,
+      flattenedNodes,
+      itemSize,
+      padding,
+      scrollbarProps,
+      mergedRenderEmpty,
+      $slots
+    } = this;
+    if (loading) {
+      return h("div", {
+        class: `${clsPrefix}-base-select-menu__loading`
+      }, h(UInternalLoading, {
+        clsPrefix: clsPrefix,
+        strokeWidth: 20
+      }));
+    }
+    if (!empty) {
+      return h(UScrollbar, Object.assign({
+        ref: "scrollbarRef",
+        theme: mergedTheme.peers.Scrollbar,
+        themeOverrides: mergedTheme.peerOverrides.Scrollbar,
+        scrollable: scrollable,
+        container: virtualScroll ? this.virtualListContainer : undefined,
+        content: virtualScroll ? this.virtualListContent : undefined,
+        onScroll: virtualScroll ? undefined : this.doScroll
+      }, scrollbarProps), {
+        default: () => {
+          return virtualScroll ? h(VirtualList, {
+            ref: "virtualListRef",
+            class: `${clsPrefix}-virtual-list`,
+            items: flattenedNodes,
+            itemSize: itemSize,
+            showScrollbar: false,
+            paddingTop: padding.top,
+            paddingBottom: 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: padding.top,
+              paddingBottom: padding.bottom
+            }
+          }, flattenedNodes.map(tmNode => tmNode.isGroup ? h(USelectGroupHeader, {
+            key: tmNode.key,
+            clsPrefix: clsPrefix,
+            tmNode: tmNode
+          }) : h(USelectOption, {
+            clsPrefix: clsPrefix,
+            key: tmNode.key,
+            tmNode: tmNode
+          })));
+        }
+      });
+    }
+    return h("div", {
+      class: `${clsPrefix}-base-select-menu__empty`,
+      "data-empty": true,
+      "data-action": true
+    }, resolveSlot($slots.empty, () => {
+      return [(mergedRenderEmpty === null || mergedRenderEmpty === void 0 ? void 0 : mergedRenderEmpty()) || h(UEmpty, {
+        theme: mergedTheme.peers.Empty,
+        themeOverrides: mergedTheme.peerOverrides.Empty
+      })];
+    }));
+  }
+});

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

@@ -0,0 +1,90 @@
+import type { PropType } from 'vue';
+import type { MergedTheme } from '../../../../_mixins';
+import type { InternalSelectMenuTheme } from '../../styles';
+import type { Size } from '../interface';
+export interface SelectMenuSearchInst {
+    focus: () => void;
+}
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    clsPrefix: {
+        type: StringConstructor;
+        required: true;
+    };
+    size: {
+        type: PropType<Size>;
+        default: string;
+    };
+    pattern: {
+        type: StringConstructor;
+        default: string;
+    };
+    searchPlaceholder: StringConstructor;
+    mergedTheme: {
+        type: PropType<MergedTheme<InternalSelectMenuTheme>>;
+        required: true;
+    };
+    onPatternInput: PropType<(value: string) => void>;
+}>, {
+    inputInstRef: import("vue").Ref<{
+        wrapperElRef: HTMLElement | null;
+        textareaElRef: HTMLTextAreaElement | null;
+        inputElRef: HTMLInputElement | null;
+        isCompositing: boolean;
+        blur: () => void;
+        clear: () => void;
+        focus: () => void;
+        select: () => void;
+        activate: () => void;
+        deactivate: () => void;
+        scrollTo: (options: ScrollToOptions) => void;
+    } | null, {
+        wrapperElRef: HTMLElement | null;
+        textareaElRef: HTMLTextAreaElement | null;
+        inputElRef: HTMLInputElement | null;
+        isCompositing: boolean;
+        blur: () => void;
+        clear: () => void;
+        focus: () => void;
+        select: () => void;
+        activate: () => void;
+        deactivate: () => void;
+        scrollTo: (options: ScrollToOptions) => void;
+    } | {
+        wrapperElRef: HTMLElement | null;
+        textareaElRef: HTMLTextAreaElement | null;
+        inputElRef: HTMLInputElement | null;
+        isCompositing: boolean;
+        blur: () => void;
+        clear: () => void;
+        focus: () => void;
+        select: () => void;
+        activate: () => void;
+        deactivate: () => void;
+        scrollTo: (options: ScrollToOptions) => void;
+    } | null>;
+    handleInput: (value: string) => void;
+    focus: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    clsPrefix: {
+        type: StringConstructor;
+        required: true;
+    };
+    size: {
+        type: PropType<Size>;
+        default: string;
+    };
+    pattern: {
+        type: StringConstructor;
+        default: string;
+    };
+    searchPlaceholder: StringConstructor;
+    mergedTheme: {
+        type: PropType<MergedTheme<InternalSelectMenuTheme>>;
+        required: true;
+    };
+    onPatternInput: PropType<(value: string) => void>;
+}>> & Readonly<{}>, {
+    size: Size;
+    pattern: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

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

@@ -0,0 +1,69 @@
+import { defineComponent, h, ref } from 'vue';
+import { UInput } from "../../../../input/index.mjs";
+import { UBaseIcon } from "../../../icon/index.mjs";
+import { SearchIcon } from "../../../icons/index.mjs";
+export default defineComponent({
+  name: 'SelectMenuSearch',
+  props: {
+    clsPrefix: {
+      type: String,
+      required: true
+    },
+    size: {
+      type: String,
+      default: 'medium'
+    },
+    pattern: {
+      type: String,
+      default: ''
+    },
+    searchPlaceholder: String,
+    mergedTheme: {
+      type: Object,
+      required: true
+    },
+    onPatternInput: Function
+  },
+  setup(props) {
+    const inputInstRef = ref(null);
+    function handleInput(value) {
+      var _a;
+      (_a = props.onPatternInput) === null || _a === void 0 ? void 0 : _a.call(props, value);
+    }
+    function focus() {
+      var _a;
+      (_a = inputInstRef.value) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    return {
+      inputInstRef,
+      handleInput,
+      focus
+    };
+  },
+  render() {
+    const {
+      clsPrefix,
+      mergedTheme
+    } = this;
+    return h("div", {
+      class: `${clsPrefix}-base-select-menu__search`,
+      "data-search": true,
+      key: "search"
+    }, h(UInput, {
+      ref: "inputInstRef",
+      value: this.pattern,
+      placeholder: this.searchPlaceholder,
+      theme: mergedTheme.peers.Input,
+      themeOverrides: mergedTheme.peerOverrides.Input,
+      clearable: true,
+      size: this.size === 'large' ? 'medium' : 'small',
+      onUpdateValue: this.handleInput
+    }, {
+      prefix: () => h(UBaseIcon, {
+        clsPrefix: clsPrefix
+      }, {
+        default: () => h(SearchIcon, null)
+      })
+    }));
+  }
+});

package/es/_internal/select-menu/src/SelectOption.d.ts

@@ -16,6 +16,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     account: Ref<boolean, boolean>;
     isGrouped: import("vue").ComputedRef<boolean | null>;
     showCheckmark: Ref<boolean, boolean>;
+    markType: Ref<import("./interface").MarkType, import("./interface").MarkType>;
     nodeProps: Ref<import("./interface").NodeProps | undefined, import("./interface").NodeProps | undefined>;
     isPending: import("vue").ComputedRef<boolean>;
     isSelected: import("vue").ComputedRef<boolean>;

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

@@ -1,10 +1,20 @@
 import { useMemo } from 'vooks';
 import { defineComponent, h, inject, Transition } from 'vue';
 import { mergeEventHandlers, render } from "../../../_utils/index.mjs";
+import { UCheckbox } from "../../../checkbox/index.mjs";
 import UBaseAccountOption from "../../account-option/index.mjs";
 import { UBaseIcon } from "../../icon/index.mjs";
 import { CheckmarkIcon } from "../../icons/index.mjs";
 import { internalSelectionMenuInjectionKey } from "./interface.mjs";
+function renderCheckbox(show, clsPrefix, checked, disabled) {
+  return h("div", {
+    class: `${clsPrefix}-base-select-option__checkbox-wrapper`
+  }, show ? h(UCheckbox, {
+    checked: checked,
+    disabled: disabled,
+    focusable: false
+  }) : null);
+}
 function renderCheckMark(show, clsPrefix) {
   return h("div", {
     class: `${clsPrefix}-base-select-option__check-wrapper`
@@ -43,6 +53,7 @@ export default defineComponent({
       labelFieldRef,
       valueFieldRef,
       showCheckmarkRef,
+      markTypeRef,
       nodePropsRef,
       handleOptionClick,
       handleOptionMouseEnter
@@ -99,6 +110,7 @@ export default defineComponent({
         return parent && parent.rawNode.type === 'group';
       }),
       showCheckmark: showCheckmarkRef,
+      markType: markTypeRef,
       nodeProps: nodePropsRef,
       isPending: isPendingRef,
       isSelected: useMemo(() => {
@@ -139,6 +151,7 @@ export default defineComponent({
       isPending,
       isGrouped,
       showCheckmark,
+      markType,
       nodeProps,
       renderOption,
       renderLabel,
@@ -147,7 +160,8 @@ export default defineComponent({
       handleMouseMove,
       account
     } = this;
-    const checkmark = renderCheckMark(showCheckmark && isSelected, clsPrefix);
+    const useCheckboxMark = markType === 'checkbox';
+    const checkmark = useCheckboxMark ? renderCheckbox(showCheckmark, clsPrefix, isSelected, rawNode.disabled) : renderCheckMark(showCheckmark && isSelected, clsPrefix);
     const label = renderLabel ? renderLabel(rawNode, isSelected) : render(rawNode[this.labelField], rawNode, isSelected);
     const children = account ? [h(UBaseAccountOption, Object.assign({}, rawNode, {
       label: label
@@ -160,7 +174,8 @@ export default defineComponent({
         [`${clsPrefix}-base-select-option--grouped`]: isGrouped,
         [`${clsPrefix}-base-select-option--pending`]: isPending,
         [`${clsPrefix}-base-select-option--show-checkmark`]: showCheckmark,
-        [`${clsPrefix}-base-select-option--account`]: account
+        [`${clsPrefix}-base-select-option--account`]: account,
+        [`${clsPrefix}-base-select-option--mark-checkbox`]: useCheckboxMark
       }],
       style: [(attrs === null || attrs === void 0 ? void 0 : attrs.style) || '', rawNode.style || ''],
       onClick: mergeEventHandlers([handleClick, attrs === null || attrs === void 0 ? void 0 : attrs.onClick]),