@uzum-tech/ui 1.12.16 → 1.12.17

package/dist/index.js

@@ -124706,6 +124706,8 @@
       cursor: not-allowed;
       pointer-events: none;
       opacity: .5;
+    `), c$1("& .u-tabs-tab--checked", `
+      color: var(--u-header-tab-text-color-active);
     `), c$1("& .u-tabs-tab:hover", `
       color: var(--u-header-tab-text-color-hover);
     `), c$1("& .u-tabs-bar", `
@@ -125248,6 +125250,33 @@
     function isLeafMenuOption(option) {
       return option.type !== "column";
     }
+    function isMenuValueInChildren(children, value) {
+      if (!children || children.length === 0) return false;
+      for (const child of children) {
+        if (isDividerOption(child)) continue;
+        if (isColumnOption(child)) {
+          if (isMenuValueInChildren(child.children, value)) return true;
+          continue;
+        }
+        if (child.key === value) return true;
+        if (isGroupOption(child) || hasChildren(child)) {
+          if (isMenuValueInChildren(child.children, value)) return true;
+        }
+      }
+      return false;
+    }
+    function resolveTopLevelMenuKey(menuOptions, activeMenuKey) {
+      if (activeMenuKey === null || activeMenuKey === void 0) return null;
+      for (let index = 0; index < menuOptions.length; index += 1) {
+        const option = menuOptions[index];
+        const optionKey = getMenuItemKey(option, index);
+        if (optionKey === activeMenuKey) return optionKey;
+        if (isMenuValueInChildren(option.children, activeMenuKey)) {
+          return optionKey;
+        }
+      }
+      return null;
+    }
 
     const headerNavigationProps = {
       menuOptions: {
@@ -125283,6 +125312,10 @@
         type: String,
         required: true
       },
+      activeMenuKey: {
+        type: [String, Number],
+        default: null
+      },
       "onUpdate:menuValue": [Function, Array],
       onUpdateMenuValue: [Function, Array]
     };
@@ -125301,11 +125334,15 @@
           navRef.value = el;
         };
         const hoveredKeyRef = vue.ref(null);
+        const activeMenuKeyRef = vue.toRef(props.activeMenuKey);
         const tabRefs = vue.ref({});
         const indicatorStyleRef = vue.ref({
           width: "0px",
           transform: "translateX(0)"
         });
+        const checkedTopMenuKey = vue.computed(() => {
+          return resolveTopLevelMenuKey(props.menuOptions, activeMenuKeyRef.value) ?? void 0;
+        });
         function updateIndicator() {
           const navEl = navRef.value;
           if (!navEl) return;
@@ -125338,6 +125375,13 @@
           if (onUpdateMenuValue) call(onUpdateMenuValue, value);
           if (_onUpdateMenuValue) call(_onUpdateMenuValue, value);
         }
+        function setActiveMenuKey(key = null) {
+          activeMenuKeyRef.value = key;
+        }
+        function handleMenuItemClick(option) {
+          setActiveMenuKey(option?.key);
+          if (option.onClick) option?.onClick();
+        }
         vue.onMounted(async () => {
           await vue.nextTick(updateIndicator);
           window.addEventListener("resize", updateIndicator);
@@ -125377,7 +125421,11 @@
           navRef,
           setTabRef,
           indicatorStyle: indicatorStyleRef,
-          hoveredKey: hoveredKeyRef
+          hoveredKey: hoveredKeyRef,
+          activeMenuKey: activeMenuKeyRef,
+          setActiveMenuKey,
+          handleMenuItemClick,
+          checkedTopMenuKey
         };
       },
       render() {
@@ -125409,7 +125457,10 @@
               ],
               role: "button",
               tabindex: option.disabled ? void 0 : 0,
-              onClick: option.onClick,
+              onClick: (event) => {
+                event.stopPropagation();
+                this.handleMenuItemClick(option);
+              },
               ...$props
             },
             /* @__PURE__ */ vue.h("span", { class: `${blockClass}__menu-item-main` }, icon ? /* @__PURE__ */ vue.h("span", { class: `${blockClass}__menu-item-icon` }, icon) : null, /* @__PURE__ */ vue.h("span", { class: `${blockClass}__menu-item-label` }, renderOptionLabel(option))),
@@ -125460,7 +125511,10 @@
                   class: `${blockClass}__menu-column-title`,
                   role: option.onClick ? "button" : void 0,
                   tabindex: option.onClick && !option.disabled ? 0 : void 0,
-                  onClick: option.onClick
+                  onClick: (event) => {
+                    event.stopPropagation();
+                    this.handleMenuItemClick(option);
+                  }
                 },
                 renderOptionLabel(option)
               ));
@@ -125477,7 +125531,10 @@
                   class: `${blockClass}__menu-column-title`,
                   role: option.onClick ? "button" : void 0,
                   tabindex: option.onClick && !option.disabled ? 0 : void 0,
-                  onClick: option.onClick
+                  onClick: (event) => {
+                    event.stopPropagation();
+                    this.handleMenuItemClick(option);
+                  }
                 },
                 renderOptionLabel(option)
               ), /* @__PURE__ */ vue.h("div", { class: `${blockClass}__menu-column-list` }, content));
@@ -125488,7 +125545,10 @@
                 class: `${blockClass}__menu-column-title`,
                 role: option.onClick ? "button" : void 0,
                 tabindex: option.onClick && !option.disabled ? 0 : void 0,
-                onClick: option.onClick
+                onClick: (event) => {
+                  event.stopPropagation();
+                  this.handleMenuItemClick(option);
+                }
               },
               renderOptionLabel(option)
             ), /* @__PURE__ */ vue.h("div", { class: `${blockClass}__menu-column-list` }, content));
@@ -125612,6 +125672,7 @@
                 /* @__PURE__ */ vue.h("div", { class: "u-tabs-pad", style: { width: tabsPaddingValue } }),
                 menuItems.map((item, index) => {
                   const isActive = activeValue === item.key;
+                  const isChecked = this.checkedTopMenuKey === item.key;
                   const isOpen = isHoverTrigger ? this.hoveredKey === item.key : isActive;
                   const isDisabled = !!item.option.disabled;
                   const icon = typeof item.option.icon === "function" ? item.option.icon() : item.option.icon;
@@ -125624,7 +125685,8 @@
                         "u-tabs-tab",
                         `${blockClass}__tab`,
                         isActive && "u-tabs-tab--active",
-                        isDisabled && "u-tabs-tab--disabled"
+                        isDisabled && "u-tabs-tab--disabled",
+                        isChecked && "u-tabs-tab--checked"
                       ],
                       ref: this.setTabRef(item.key),
                       role: "tab",
@@ -125645,9 +125707,7 @@
                         if (!isHoverTrigger) {
                           emitUpdate(item.key);
                         }
-                        if (item.option.onClick) {
-                          item.option.onClick();
-                        }
+                        this.handleMenuItemClick(item.option);
                       } : void 0
                     },
                     icon ? /* @__PURE__ */ vue.h("span", { class: `${blockClass}__tab-icon` }, icon) : null,
@@ -126492,7 +126552,9 @@
         type: Array,
         default: () => defaultLangOptions
       },
-      defaultLang: [String, Number],
+      defaultLang: {
+        type: [String, Number]
+      },
       menuPlacement: {
         type: String,
         default: "horizontal"
@@ -126501,8 +126563,13 @@
         type: String,
         default: "hover"
       },
-      menuValue: [String, Number],
-      defaultMenuValue: [String, Number],
+      menuValue: {
+        type: [String, Number]
+      },
+      activeMenuKey: {
+        type: [String, Number],
+        default: null
+      },
       menuTabsProps: {
         type: Object,
         default: () => ({})
@@ -126603,9 +126670,7 @@
           props.langOptions?.find((opt) => opt.key === props.defaultLang) || props.langOptions?.[0] || defaultLangOptions[0]
         );
         const controlledMenuValueRef = vue.toRef(props, "menuValue");
-        const uncontrolledMenuValueRef = vue.ref(
-          props.defaultMenuValue ?? null
-        );
+        const uncontrolledMenuValueRef = vue.ref(null);
         const mergedMenuValueRef = useMergedState(
           controlledMenuValueRef,
           uncontrolledMenuValueRef
@@ -126805,6 +126870,7 @@
             mergedClsPrefix,
             menuPaneClass: this.menuPaneClass,
             menuPaneWrapperClass: this.menuPaneWrapperClass,
+            activeMenuKey: this.activeMenuKey,
             onUpdateMenuValue: this.handleMenuValueUpdate
           }
         );
@@ -128552,6 +128618,7 @@
         renderBadge: renderBadge,
         renderOptionLabel: renderOptionLabel,
         resolvePlacement: resolvePlacement,
+        resolveTopLevelMenuKey: resolveTopLevelMenuKey,
         resultProps: resultProps,
         rowProps: rowProps,
         safeTopScrollbarProps: safeTopScrollbarProps,
@@ -128593,7 +128660,7 @@
         watermarkProps: watermarkProps
     });
 
-    var version = "1.12.16";
+    var version = "1.12.17";
 
     function useExposeProxy(targetRef) {
       return new Proxy({}, {
@@ -129843,6 +129910,7 @@
     exports.renderBadge = renderBadge;
     exports.renderOptionLabel = renderOptionLabel;
     exports.resolvePlacement = resolvePlacement;
+    exports.resolveTopLevelMenuKey = resolveTopLevelMenuKey;
     exports.resultDark = resultDark;
     exports.resultProps = resultProps;
     exports.rowProps = rowProps;