@uzum-tech/ui 0.1.0 → 0.1.1

package/lib/_internal/select-menu/src/SelectMenu.js

@@ -0,0 +1,353 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const vue_1 = require("vue");
+const treemate_1 = require("treemate");
+const vueuc_1 = require("vueuc");
+const seemly_1 = require("seemly");
+const empty_1 = require("../../../empty");
+const scrollbar_1 = require("../../scrollbar");
+const _utils_1 = require("../../../_utils");
+const cssr_1 = require("../../../_utils/cssr");
+const _mixins_1 = require("../../../_mixins");
+const loading_1 = __importDefault(require("../../loading"));
+const focus_detector_1 = __importDefault(require("../../focus-detector"));
+const styles_1 = require("../styles");
+const SelectOption_1 = __importDefault(require("./SelectOption"));
+const SelectGroupHeader_1 = __importDefault(require("./SelectGroupHeader"));
+const interface_1 = require("./interface");
+const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
+exports.default = (0, vue_1.defineComponent)({
+    name: 'InternalSelectMenu',
+    props: Object.assign(Object.assign({}, _mixins_1.useTheme.props), { clsPrefix: {
+            type: String,
+            required: true
+        }, scrollable: {
+            type: Boolean,
+            default: true
+        }, treeMate: {
+            type: Object,
+            required: true
+        }, multiple: 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, 
+        // deprecated
+        onToggle: Function }),
+    setup(props) {
+        const themeRef = (0, _mixins_1.useTheme)('InternalSelectMenu', '-internal-select-menu', index_cssr_1.default, styles_1.internalSelectMenuLight, props, (0, vue_1.toRef)(props, 'clsPrefix'));
+        const selfRef = (0, vue_1.ref)(null);
+        const virtualListRef = (0, vue_1.ref)(null);
+        const scrollbarRef = (0, vue_1.ref)(null);
+        const flattenedNodesRef = (0, vue_1.computed)(() => props.treeMate.getFlattenedNodes());
+        const fIndexGetterRef = (0, vue_1.computed)(() => (0, treemate_1.createIndexGetter)(flattenedNodesRef.value));
+        const pendingNodeRef = (0, vue_1.ref)(null);
+        function initPendingNode() {
+            const { treeMate } = props;
+            let defaultPendingNode = null;
+            const { value } = props;
+            if (value === null) {
+                defaultPendingNode = treeMate.getFirstAvailableNode();
+            }
+            else {
+                if (props.multiple) {
+                    defaultPendingNode = treeMate.getNode((value || [])[(value || []).length - 1]);
+                }
+                else {
+                    defaultPendingNode = treeMate.getNode(value);
+                }
+                if (!defaultPendingNode || defaultPendingNode.disabled) {
+                    defaultPendingNode = treeMate.getFirstAvailableNode();
+                }
+            }
+            if (defaultPendingNode) {
+                setPendingTmNode(defaultPendingNode);
+            }
+            else {
+                setPendingTmNode(null);
+            }
+        }
+        function clearPendingNodeIfInvalid() {
+            const { value: pendingNode } = pendingNodeRef;
+            if (pendingNode && !props.treeMate.getNode(pendingNode.key)) {
+                pendingNodeRef.value = null;
+            }
+        }
+        let initPendingNodeWatchStopHandle;
+        (0, vue_1.watch)(() => props.show, (show) => {
+            if (show) {
+                initPendingNodeWatchStopHandle = (0, vue_1.watch)(() => props.treeMate, () => {
+                    if (props.resetMenuOnOptionsChange) {
+                        if (props.autoPending) {
+                            initPendingNode();
+                        }
+                        else {
+                            clearPendingNodeIfInvalid();
+                        }
+                        void (0, vue_1.nextTick)(scrollToPendingNode);
+                    }
+                    else {
+                        clearPendingNodeIfInvalid();
+                    }
+                }, {
+                    immediate: true
+                });
+            }
+            else {
+                initPendingNodeWatchStopHandle === null || initPendingNodeWatchStopHandle === void 0 ? void 0 : initPendingNodeWatchStopHandle();
+            }
+        }, {
+            immediate: true
+        });
+        (0, vue_1.onBeforeUnmount)(() => {
+            initPendingNodeWatchStopHandle === null || initPendingNodeWatchStopHandle === void 0 ? void 0 : initPendingNodeWatchStopHandle();
+        });
+        const itemSizeRef = (0, vue_1.computed)(() => {
+            return (0, seemly_1.depx)(themeRef.value.self[(0, cssr_1.createKey)('optionHeight', props.size)]);
+        });
+        const paddingRef = (0, vue_1.computed)(() => {
+            return (0, seemly_1.getPadding)(themeRef.value.self[(0, cssr_1.createKey)('padding', props.size)]);
+        });
+        const valueSetRef = (0, vue_1.computed)(() => {
+            if (props.multiple && Array.isArray(props.value)) {
+                return new Set(props.value);
+            }
+            return new Set();
+        });
+        const emptyRef = (0, vue_1.computed)(() => {
+            const tmNodes = flattenedNodesRef.value;
+            return tmNodes && tmNodes.length === 0;
+        });
+        function doToggle(tmNode) {
+            const { onToggle } = props;
+            if (onToggle)
+                onToggle(tmNode);
+        }
+        function doScroll(e) {
+            const { onScroll } = 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 } = pendingNodeRef;
+            if (pendingTmNode)
+                return pendingTmNode;
+            return null;
+        }
+        function handleOptionMouseEnter(e, tmNode) {
+            if (tmNode.disabled)
+                return;
+            setPendingTmNode(tmNode, false);
+        }
+        function handleOptionClick(e, tmNode) {
+            if (tmNode.disabled)
+                return;
+            doToggle(tmNode);
+        }
+        // keyboard related methods
+        function handleKeyUp(e) {
+            var _a;
+            if ((0, seemly_1.happensIn)(e, 'action'))
+                return;
+            (_a = props.onKeyup) === null || _a === void 0 ? void 0 : _a.call(props, e);
+        }
+        function handleKeyDown(e) {
+            var _a;
+            if ((0, seemly_1.happensIn)(e, 'action'))
+                return;
+            (_a = props.onKeydown) === null || _a === void 0 ? void 0 : _a.call(props, e);
+        }
+        function handleMouseDown(e) {
+            var _a;
+            (_a = props.onMousedown) === null || _a === void 0 ? void 0 : _a.call(props, e);
+            if (props.focusable)
+                return;
+            e.preventDefault();
+        }
+        function next() {
+            const { value: pendingTmNode } = pendingNodeRef;
+            if (pendingTmNode) {
+                setPendingTmNode(pendingTmNode.getNext({ loop: true }), true);
+            }
+        }
+        function prev() {
+            const { value: pendingTmNode } = pendingNodeRef;
+            if (pendingTmNode) {
+                setPendingTmNode(pendingTmNode.getPrev({ loop: true }), true);
+            }
+        }
+        function setPendingTmNode(tmNode, doScroll = false) {
+            pendingNodeRef.value = tmNode;
+            if (doScroll)
+                scrollToPendingNode();
+        }
+        function scrollToPendingNode() {
+            var _a, _b;
+            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
+                });
+            }
+        }
+        function handleFocusin(e) {
+            var _a, _b;
+            if ((_a = selfRef.value) === null || _a === void 0 ? void 0 : _a.contains(e.target)) {
+                (_b = props.onFocus) === null || _b === void 0 ? void 0 : _b.call(props, e);
+            }
+        }
+        function handleFocusout(e) {
+            var _a, _b;
+            if (!((_a = selfRef.value) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget))) {
+                (_b = props.onBlur) === null || _b === void 0 ? void 0 : _b.call(props, e);
+            }
+        }
+        (0, vue_1.provide)(interface_1.internalSelectionMenuInjectionKey, {
+            handleOptionMouseEnter,
+            handleOptionClick,
+            valueSetRef,
+            pendingTmNodeRef: pendingNodeRef,
+            nodePropsRef: (0, vue_1.toRef)(props, 'nodeProps'),
+            showCheckmarkRef: (0, vue_1.toRef)(props, 'showCheckmark'),
+            multipleRef: (0, vue_1.toRef)(props, 'multiple'),
+            valueRef: (0, vue_1.toRef)(props, 'value'),
+            renderLabelRef: (0, vue_1.toRef)(props, 'renderLabel'),
+            renderOptionRef: (0, vue_1.toRef)(props, 'renderOption'),
+            labelFieldRef: (0, vue_1.toRef)(props, 'labelField'),
+            valueFieldRef: (0, vue_1.toRef)(props, 'valueField')
+        });
+        (0, vue_1.provide)(interface_1.internalSelectionMenuBodyInjectionKey, selfRef);
+        (0, vue_1.onMounted)(() => {
+            const { value } = scrollbarRef;
+            if (value)
+                value.sync();
+        });
+        const cssVarsRef = (0, vue_1.computed)(() => {
+            const { size } = props;
+            const { common: { cubicBezierEaseInOut }, self: { height, borderRadius, color, groupHeaderTextColor, actionDividerColor, optionTextColorPressed, optionTextColor, optionTextColorDisabled, optionTextColorActive, optionOpacityDisabled, optionGroupHeaderBorderColor, optionCheckColor, actionTextColor, optionColorPending, optionColorActive, loadingColor, loadingSize, optionColorActivePending, [(0, cssr_1.createKey)('optionFontSize', size)]: fontSize, [(0, cssr_1.createKey)('optionHeight', size)]: optionHeight, [(0, cssr_1.createKey)('optionPadding', size)]: optionPadding } } = themeRef.value;
+            return {
+                '--u-height': height,
+                '--u-action-divider-color': actionDividerColor,
+                '--u-action-text-color': actionTextColor,
+                '--u-bezier': cubicBezierEaseInOut,
+                '--u-border-radius': borderRadius,
+                '--u-color': color,
+                '--u-option-font-size': fontSize,
+                '--u-group-header-text-color': groupHeaderTextColor,
+                '--u-group-header-border-color': optionGroupHeaderBorderColor,
+                '--u-option-check-color': optionCheckColor,
+                '--u-option-color-pending': optionColorPending,
+                '--u-option-color-active': optionColorActive,
+                '--u-option-color-active-pending': optionColorActivePending,
+                '--u-option-height': optionHeight,
+                '--u-option-opacity-disabled': optionOpacityDisabled,
+                '--u-option-text-color': optionTextColor,
+                '--u-option-text-color-active': optionTextColorActive,
+                '--u-option-text-color-disabled': optionTextColorDisabled,
+                '--u-option-text-color-pressed': optionTextColorPressed,
+                '--u-option-padding': optionPadding,
+                '--u-option-padding-left': (0, seemly_1.getPadding)(optionPadding, 'left'),
+                '--u-option-padding-right': (0, seemly_1.getPadding)(optionPadding, 'right'),
+                '--u-loading-color': loadingColor,
+                '--u-loading-size': loadingSize
+            };
+        });
+        const { inlineThemeDisabled } = props;
+        const themeClassHandle = inlineThemeDisabled
+            ? (0, _mixins_1.useThemeClass)('internal-select-menu', (0, vue_1.computed)(() => props.size[0]), cssVarsRef, props)
+            : undefined;
+        const exposedProps = {
+            selfRef,
+            next,
+            prev,
+            getPendingTmNode
+        };
+        (0, _utils_1.useOnResize)(selfRef, props.onResize);
+        return Object.assign({ mergedTheme: themeRef, virtualListRef,
+            scrollbarRef, itemSize: itemSizeRef, padding: paddingRef, flattenedNodes: flattenedNodesRef, empty: emptyRef, 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 }, exposedProps);
+    },
+    render() {
+        const { $slots, virtualScroll, clsPrefix, mergedTheme, themeClass, onRender } = this;
+        onRender === null || onRender === void 0 ? void 0 : onRender();
+        return ((0, vue_1.h)("div", { ref: "selfRef", tabindex: this.focusable ? 0 : -1, class: [
+                `${clsPrefix}-base-select-menu`,
+                themeClass,
+                this.multiple && `${clsPrefix}-base-select-menu--multiple`
+            ], style: this.cssVars, onFocusin: this.handleFocusin, onFocusout: this.handleFocusout, onKeyup: this.handleKeyUp, onKeydown: this.handleKeyDown, onMousedown: this.handleMouseDown, onMouseenter: this.onMouseenter, onMouseleave: this.onMouseleave },
+            this.loading ? ((0, vue_1.h)("div", { class: `${clsPrefix}-base-select-menu__loading` },
+                (0, vue_1.h)(loading_1.default, { clsPrefix: clsPrefix, strokeWidth: 20 }))) : !this.empty ? ((0, vue_1.h)(scrollbar_1.UScrollbar, { ref: "scrollbarRef", theme: mergedTheme.peers.Scrollbar, themeOverrides: mergedTheme.peerOverrides.Scrollbar, scrollable: this.scrollable, container: virtualScroll ? this.virtualListContainer : undefined, content: virtualScroll ? this.virtualListContent : undefined, onScroll: virtualScroll ? undefined : this.doScroll }, {
+                default: () => {
+                    return virtualScroll ? ((0, vue_1.h)(vueuc_1.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 ? ((0, vue_1.h)(SelectGroupHeader_1.default, { key: tmNode.key, clsPrefix: clsPrefix, tmNode: tmNode })) : tmNode.ignored ? null : ((0, vue_1.h)(SelectOption_1.default, { clsPrefix: clsPrefix, key: tmNode.key, tmNode: tmNode }));
+                        }
+                    })) : ((0, vue_1.h)("div", { class: `${clsPrefix}-base-select-menu-option-wrapper`, style: {
+                            paddingTop: this.padding.top,
+                            paddingBottom: this.padding.bottom
+                        } }, this.flattenedNodes.map((tmNode) => tmNode.isGroup ? ((0, vue_1.h)(SelectGroupHeader_1.default, { key: tmNode.key, clsPrefix: clsPrefix, tmNode: tmNode })) : ((0, vue_1.h)(SelectOption_1.default, { clsPrefix: clsPrefix, key: tmNode.key, tmNode: tmNode })))));
+                }
+            })) : ((0, vue_1.h)("div", { class: `${clsPrefix}-base-select-menu__empty`, "data-empty": true, "data-action": true }, (0, _utils_1.resolveSlot)($slots.empty, () => [
+                (0, vue_1.h)(empty_1.UEmpty, { theme: mergedTheme.peers.Empty, themeOverrides: mergedTheme.peerOverrides.Empty })
+            ]))),
+            (0, _utils_1.resolveWrappedSlot)($slots.action, (children) => children && [
+                (0, vue_1.h)("div", { class: `${clsPrefix}-base-select-menu__action`, "data-action": true, key: "action" }, children),
+                (0, vue_1.h)(focus_detector_1.default, { onFocus: this.onTabOut, key: "focus-detector" })
+            ])));
+    }
+});

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

@@ -0,0 +1,37 @@
+import { type PropType, type Ref } from 'vue';
+import { type TreeNode } from 'treemate';
+import type { SelectOption } from '../../../select/src/interface';
+import { type RenderLabelImpl, type RenderOptionImpl } from './interface';
+declare const _default: import("vue").DefineComponent<{
+    clsPrefix: {
+        type: StringConstructor;
+        required: true;
+    };
+    tmNode: {
+        type: PropType<TreeNode<SelectOption, SelectOption, SelectOption>>;
+        required: true;
+    };
+}, {
+    multiple: Ref<boolean>;
+    isGrouped: import("vue").ComputedRef<boolean | null>;
+    showCheckmark: Ref<boolean>;
+    nodeProps: Ref<import("./interface").NodeProps | undefined>;
+    isPending: import("vue").ComputedRef<boolean>;
+    isSelected: import("vue").ComputedRef<boolean>;
+    labelField: Ref<string>;
+    renderLabel: Ref<RenderLabelImpl | undefined>;
+    renderOption: Ref<RenderOptionImpl | undefined>;
+    handleMouseMove: (e: MouseEvent) => void;
+    handleMouseEnter: (e: MouseEvent) => void;
+    handleClick: (e: MouseEvent) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    clsPrefix: {
+        type: StringConstructor;
+        required: true;
+    };
+    tmNode: {
+        type: PropType<TreeNode<SelectOption, SelectOption, SelectOption>>;
+        required: true;
+    };
+}>>, {}, {}>;
+export default _default;

package/lib/_internal/select-menu/src/SelectOption.js

@@ -0,0 +1,121 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const vue_1 = require("vue");
+const vooks_1 = require("vooks");
+const _utils_1 = require("../../../_utils");
+const icons_1 = require("../../icons");
+const icon_1 = require("../../icon");
+const interface_1 = require("./interface");
+function renderCheckMark(show, clsPrefix) {
+    return ((0, vue_1.h)(vue_1.Transition, { name: "fade-in-scale-up-transition" }, {
+        default: () => show ? ((0, vue_1.h)(icon_1.UBaseIcon, { clsPrefix: clsPrefix, class: `${clsPrefix}-base-select-option__check` }, {
+            default: () => (0, vue_1.h)(icons_1.CheckmarkIcon)
+        })) : null
+    }));
+}
+exports.default = (0, vue_1.defineComponent)({
+    name: 'UBaseSelectOption',
+    props: {
+        clsPrefix: {
+            type: String,
+            required: true
+        },
+        tmNode: {
+            type: Object,
+            required: true
+        }
+    },
+    setup(props) {
+        const { valueRef, pendingTmNodeRef, multipleRef, valueSetRef, renderLabelRef, renderOptionRef, labelFieldRef, valueFieldRef, showCheckmarkRef, nodePropsRef, handleOptionClick, handleOptionMouseEnter
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+         } = (0, vue_1.inject)(interface_1.internalSelectionMenuInjectionKey);
+        const isPendingRef = (0, vooks_1.useMemo)(() => {
+            const { value: pendingTmNode } = pendingTmNodeRef;
+            if (!pendingTmNode)
+                return false;
+            return props.tmNode.key === pendingTmNode.key;
+        });
+        function handleClick(e) {
+            const { tmNode } = props;
+            if (tmNode.disabled)
+                return;
+            handleOptionClick(e, tmNode);
+        }
+        function handleMouseEnter(e) {
+            const { tmNode } = props;
+            if (tmNode.disabled)
+                return;
+            handleOptionMouseEnter(e, tmNode);
+        }
+        function handleMouseMove(e) {
+            const { tmNode } = props;
+            const { value: isPending } = isPendingRef;
+            if (tmNode.disabled || isPending)
+                return;
+            handleOptionMouseEnter(e, tmNode);
+        }
+        return {
+            multiple: multipleRef,
+            isGrouped: (0, vooks_1.useMemo)(() => {
+                const { tmNode } = props;
+                const { parent } = tmNode;
+                return parent && parent.rawNode.type === 'group';
+            }),
+            showCheckmark: showCheckmarkRef,
+            nodeProps: nodePropsRef,
+            isPending: isPendingRef,
+            isSelected: (0, vooks_1.useMemo)(() => {
+                const { value } = valueRef;
+                const { value: multiple } = multipleRef;
+                if (value === null)
+                    return false;
+                const optionValue = props.tmNode.rawNode[valueFieldRef.value];
+                if (multiple) {
+                    const { value: valueSet } = valueSetRef;
+                    return valueSet.has(optionValue);
+                }
+                else {
+                    return value === optionValue;
+                }
+            }),
+            labelField: labelFieldRef,
+            renderLabel: renderLabelRef,
+            renderOption: renderOptionRef,
+            handleMouseMove,
+            handleMouseEnter,
+            handleClick
+        };
+    },
+    render() {
+        const { clsPrefix, tmNode: { rawNode }, isSelected, isPending, isGrouped, showCheckmark, nodeProps, renderOption, renderLabel, handleClick, handleMouseEnter, handleMouseMove } = this;
+        const checkmark = renderCheckMark(isSelected, clsPrefix);
+        const children = renderLabel
+            ? [renderLabel(rawNode, isSelected), showCheckmark && checkmark]
+            : [
+                (0, _utils_1.render)(rawNode[this.labelField], rawNode, isSelected),
+                showCheckmark && checkmark
+            ];
+        const attrs = nodeProps === null || nodeProps === void 0 ? void 0 : nodeProps(rawNode);
+        const node = ((0, vue_1.h)("div", Object.assign({}, attrs, { class: [
+                `${clsPrefix}-base-select-option`,
+                rawNode.class,
+                attrs === null || attrs === void 0 ? void 0 : attrs.class,
+                {
+                    [`${clsPrefix}-base-select-option--disabled`]: rawNode.disabled,
+                    [`${clsPrefix}-base-select-option--selected`]: isSelected,
+                    [`${clsPrefix}-base-select-option--grouped`]: isGrouped,
+                    [`${clsPrefix}-base-select-option--pending`]: isPending,
+                    [`${clsPrefix}-base-select-option--show-checkmark`]: showCheckmark
+                }
+            ], style: [(attrs === null || attrs === void 0 ? void 0 : attrs.style) || '', rawNode.style || ''], onClick: (0, _utils_1.mergeEventHandlers)([handleClick, attrs === null || attrs === void 0 ? void 0 : attrs.onClick]), onMouseenter: (0, _utils_1.mergeEventHandlers)([
+                handleMouseEnter,
+                attrs === null || attrs === void 0 ? void 0 : attrs.onMouseenter
+            ]), onMousemove: (0, _utils_1.mergeEventHandlers)([handleMouseMove, attrs === null || attrs === void 0 ? void 0 : attrs.onMousemove]) }),
+            (0, vue_1.h)("div", { class: `${clsPrefix}-base-select-option__content` }, children)));
+        return rawNode.render
+            ? rawNode.render({ node, option: rawNode, selected: isSelected })
+            : renderOption
+                ? renderOption({ node, option: rawNode, selected: isSelected })
+                : node;
+    }
+});

package/lib/_internal/select-menu/src/interface.d.ts

@@ -0,0 +1,40 @@
+import type { VNodeChild, Ref, UnwrapRef, VNode, HTMLAttributes } from 'vue';
+import type { TreeNode } from 'treemate';
+import type { SelectBaseOption, SelectGroupOption, SelectIgnoredOption } from '../../../select/src/interface';
+export type Size = 'small' | 'medium' | 'large' | 'huge';
+export type RenderLabel = (option: SelectBaseOption & SelectGroupOption & SelectIgnoredOption, selected: boolean) => VNodeChild;
+export type RenderLabelImpl = (option: SelectBaseOption | SelectGroupOption | SelectIgnoredOption, selected: boolean) => VNodeChild;
+export type RenderOption = (info: {
+    node: VNode;
+    option: SelectBaseOption & SelectGroupOption & SelectIgnoredOption;
+    selected: boolean;
+}) => VNodeChild;
+export type RenderOptionImpl = (info: {
+    node: VNode;
+    option: SelectBaseOption | SelectGroupOption | SelectIgnoredOption;
+    selected: boolean;
+}) => VNodeChild;
+export type NodeProps = (option: SelectBaseOption | SelectGroupOption) => HTMLAttributes & Record<string, unknown>;
+export interface InternalSelectMenuInjection {
+    handleOptionMouseEnter: (e: MouseEvent, tmNode: TreeNode<SelectBaseOption>) => void;
+    handleOptionClick: (e: MouseEvent, tmNode: TreeNode<SelectBaseOption>) => void;
+    showCheckmarkRef: Ref<boolean>;
+    valueSetRef: Ref<Set<number | string>>;
+    pendingTmNodeRef: Ref<TreeNode<SelectBaseOption> | null>;
+    multipleRef: Ref<boolean>;
+    valueRef: Ref<string | number | Array<string | number> | null>;
+    renderLabelRef: Ref<RenderLabel | undefined>;
+    renderOptionRef: Ref<RenderOption | undefined>;
+    labelFieldRef: Ref<string>;
+    valueFieldRef: Ref<string>;
+    nodePropsRef: Ref<NodeProps | undefined>;
+}
+export interface InternalExposedProps {
+    selfRef: Ref<HTMLElement | null>;
+    getPendingTmNode: () => TreeNode<SelectBaseOption> | null;
+    prev: () => void;
+    next: () => void;
+}
+export declare const internalSelectionMenuInjectionKey: import("vue").InjectionKey<InternalSelectMenuInjection>;
+export declare const internalSelectionMenuBodyInjectionKey: import("vue").InjectionKey<Ref<HTMLElement | null>>;
+export type InternalSelectMenuRef = UnwrapRef<InternalExposedProps>;

package/lib/_internal/select-menu/src/interface.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.internalSelectionMenuBodyInjectionKey = exports.internalSelectionMenuInjectionKey = void 0;
+const create_injection_key_1 = require("../../../_utils/vue/create-injection-key");
+exports.internalSelectionMenuInjectionKey = (0, create_injection_key_1.createInjectionKey)('u-internal-select-menu');
+exports.internalSelectionMenuBodyInjectionKey = (0, create_injection_key_1.createInjectionKey)('u-internal-select-menu-body');

package/lib/_internal/select-menu/src/styles/index.cssr.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("css-render").CNode;
+export default _default;

package/lib/_internal/select-menu/src/styles/index.cssr.js

@@ -0,0 +1,114 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+const cssr_1 = require("../../../../_utils/cssr");
+const fade_in_scale_up_cssr_1 = require("../../../../_styles/transitions/fade-in-scale-up.cssr");
+// --u-loading-color
+// --u-loading-size
+// --u-option-padding-right
+exports.default = (0, cssr_1.cB)('base-select-menu', `
+ line-height: 1.5;
+ outline: none;
+ z-index: 0;
+ position: relative;
+ border-radius: var(--u-border-radius);
+ transition:
+ background-color .3s var(--u-bezier),
+ box-shadow .3s var(--u-bezier);
+ background-color: var(--u-color);
+`, [(0, cssr_1.cB)('scrollbar', `
+ max-height: var(--u-height);
+ `), (0, cssr_1.cB)('virtual-list', `
+ max-height: var(--u-height);
+ `), (0, cssr_1.cB)('base-select-option', `
+ min-height: var(--u-option-height);
+ font-size: var(--u-option-font-size);
+ display: flex;
+ align-items: center;
+ `, [(0, cssr_1.cE)('content', `
+ z-index: 1;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ `)]), (0, cssr_1.cB)('base-select-group-header', `
+ min-height: var(--u-option-height);
+ font-size: calc(var(--u-option-font-size) - 2px);
+ font-weight: 500;
+ display: flex;
+ align-items: center;
+ border-bottom: var(--u-group-header-border-color);
+ `), (0, cssr_1.cB)('base-select-menu-option-wrapper', `
+ position: relative;
+ width: 100%;
+ `), (0, cssr_1.cE)('loading, empty', `
+ display: flex;
+ padding: 12px 32px;
+ flex: 1;
+ justify-content: center;
+ `), (0, cssr_1.cE)('loading', `
+ color: var(--u-loading-color);
+ font-size: var(--u-loading-size);
+ `), (0, cssr_1.cE)('action', `
+ padding: 8px var(--u-option-padding-left);
+ font-size: var(--u-option-font-size);
+ transition: 
+ color .3s var(--u-bezier),
+ border-color .3s var(--u-bezier);
+ border-top: 1px solid var(--u-action-divider-color);
+ color: var(--u-action-text-color);
+ `), (0, cssr_1.cB)('base-select-group-header', `
+ position: relative;
+ cursor: default;
+ padding: var(--u-option-padding);
+ color: var(--u-group-header-text-color);
+ `), (0, cssr_1.cB)('base-select-option', `
+ cursor: pointer;
+ position: relative;
+ padding: var(--u-option-padding);
+ transition:
+ color .3s var(--u-bezier),
+ opacity .3s var(--u-bezier);
+ box-sizing: border-box;
+ color: var(--u-option-text-color);
+ opacity: 1;
+ `, [(0, cssr_1.cM)('show-checkmark', `
+ padding-right: calc(var(--u-option-padding-right) + 20px);
+ `), (0, cssr_1.c)('&::before', `
+ content: "";
+ position: absolute;
+ left: 4px;
+ right: 4px;
+ top: 4px;
+ bottom: 4px;
+ border-radius: calc(var(--u-border-radius) - 6px);
+ transition: background-color .3s var(--u-bezier);
+ `), (0, cssr_1.c)('&:active', `
+ color: var(--u-option-text-color-pressed);
+ `), (0, cssr_1.cM)('grouped', `
+ padding-left: var(--u-option-padding-left);
+ `), (0, cssr_1.cM)('pending', [(0, cssr_1.c)('&::before', `
+ background-color: var(--u-option-color-pending);
+ `)]), (0, cssr_1.cM)('selected', `
+ color: var(--u-option-text-color-active);
+ `, [(0, cssr_1.c)('&::before', `
+ background-color: var(--u-option-color-active);
+ `), (0, cssr_1.cM)('pending', [(0, cssr_1.c)('&::before', `
+ background-color: var(--u-option-color-active-pending);
+ `)])]), (0, cssr_1.cM)('disabled', `
+ cursor: not-allowed;
+ `, [(0, cssr_1.cNotM)('selected', `
+ color: var(--u-option-text-color-disabled);
+ `), (0, cssr_1.cM)('selected', `
+ opacity: var(--u-option-opacity-disabled);
+ `)]), (0, cssr_1.cE)('check', `
+ font-size: 16px;
+ position: absolute;
+ right: calc(var(--u-option-padding-right) - 4px);
+ top: calc(50% - 7px);
+ color: var(--u-option-check-color);
+ transition: color .3s var(--u-bezier);
+ `, [(0, fade_in_scale_up_cssr_1.fadeInScaleUpTransition)({
+  enterScale: '0.5'
+})])])]);