@uzum-tech/ui 2.3.2 → 2.3.3

package/lib/_internal/select-menu/src/SelectMenuParts/Search.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const vue_1 = require("vue");
+const input_1 = require("../../../../input");
+const icon_1 = require("../../../icon");
+const icons_1 = require("../../../icons");
+exports.default = (0, vue_1.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 = (0, vue_1.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 ((0, vue_1.h)("div", { class: `${clsPrefix}-base-select-menu__search`, "data-search": true, key: "search" },
+            (0, vue_1.h)(input_1.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: () => ((0, vue_1.h)(icon_1.UBaseIcon, { clsPrefix: clsPrefix }, { default: () => (0, vue_1.h)(icons_1.SearchIcon, null) }))
+            })));
+    }
+});

package/lib/_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/lib/_internal/select-menu/src/SelectOption.js

@@ -6,10 +6,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const vooks_1 = require("vooks");
 const vue_1 = require("vue");
 const _utils_1 = require("../../../_utils");
+const checkbox_1 = require("../../../checkbox");
 const account_option_1 = __importDefault(require("../../account-option"));
 const icon_1 = require("../../icon");
 const icons_1 = require("../../icons");
 const interface_1 = require("./interface");
+function renderCheckbox(show, clsPrefix, checked, disabled) {
+    return ((0, vue_1.h)("div", { class: `${clsPrefix}-base-select-option__checkbox-wrapper` }, show ? ((0, vue_1.h)(checkbox_1.UCheckbox, { checked: checked, disabled: disabled, focusable: false })) : null));
+}
 function renderCheckMark(show, clsPrefix) {
     return ((0, vue_1.h)("div", { class: `${clsPrefix}-base-select-option__check-wrapper` },
         (0, vue_1.h)(vue_1.Transition, { name: "fade-in-scale-up-transition" }, {
@@ -31,7 +35,7 @@ exports.default = (0, vue_1.defineComponent)({
         }
     },
     setup(props) {
-        const { valueRef, pendingTmNodeRef, multipleRef, accountRef, valueSetRef, renderLabelRef, renderOptionRef, labelFieldRef, valueFieldRef, showCheckmarkRef, nodePropsRef, handleOptionClick, handleOptionMouseEnter } = (0, vue_1.inject)(interface_1.internalSelectionMenuInjectionKey);
+        const { valueRef, pendingTmNodeRef, multipleRef, accountRef, valueSetRef, renderLabelRef, renderOptionRef, labelFieldRef, valueFieldRef, showCheckmarkRef, markTypeRef, nodePropsRef, handleOptionClick, handleOptionMouseEnter } = (0, vue_1.inject)(interface_1.internalSelectionMenuInjectionKey);
         const isPendingRef = (0, vooks_1.useMemo)(() => {
             const { value: pendingTmNode } = pendingTmNodeRef;
             if (!pendingTmNode) {
@@ -70,6 +74,7 @@ exports.default = (0, vue_1.defineComponent)({
                 return parent && parent.rawNode.type === 'group';
             }),
             showCheckmark: showCheckmarkRef,
+            markType: markTypeRef,
             nodeProps: nodePropsRef,
             isPending: isPendingRef,
             isSelected: (0, vooks_1.useMemo)(() => {
@@ -96,8 +101,11 @@ exports.default = (0, vue_1.defineComponent)({
         };
     },
     render() {
-        const { clsPrefix, tmNode: { rawNode }, isSelected, isPending, isGrouped, showCheckmark, nodeProps, renderOption, renderLabel, handleClick, handleMouseEnter, handleMouseMove, account } = this;
-        const checkmark = renderCheckMark(showCheckmark && isSelected, clsPrefix);
+        const { clsPrefix, tmNode: { rawNode }, isSelected, isPending, isGrouped, showCheckmark, markType, nodeProps, renderOption, renderLabel, handleClick, handleMouseEnter, handleMouseMove, account } = this;
+        const useCheckboxMark = markType === 'checkbox';
+        const checkmark = useCheckboxMark
+            ? renderCheckbox(showCheckmark, clsPrefix, isSelected, rawNode.disabled)
+            : renderCheckMark(showCheckmark && isSelected, clsPrefix);
         const label = renderLabel
             ? renderLabel(rawNode, isSelected)
             : (0, _utils_1.render)(rawNode[this.labelField], rawNode, isSelected);
@@ -115,7 +123,8 @@ exports.default = (0, vue_1.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: (0, _utils_1.mergeEventHandlers)([handleClick, attrs === null || attrs === void 0 ? void 0 : attrs.onClick]), onMouseenter: (0, _utils_1.mergeEventHandlers)([
                 handleMouseEnter,