@uzum-tech/ui 1.12.16 → 1.12.18

package/dist/index.js

@@ -63971,6 +63971,7 @@
       },
       scrollbarProps: Object,
       renderCell: Function,
+      defaultEmptyValue: [String, Function],
       renderExpandIcon: Function,
       spinProps: {
         type: Object,
@@ -83477,7 +83478,8 @@
           type: Object,
           required: true
         },
-        renderCell: Function
+        renderCell: Function,
+        defaultEmptyValue: [String, Function]
       },
       render() {
         const { isSummary, column, row, renderCell } = this;
@@ -83488,12 +83490,25 @@
         const isEditable = typeof editable === "function" ? editable(row) : editable;
         if (render && !isSummary) {
           let cellValue = render(row, this.index);
-          if (mask && cellValue !== null && cellValue !== void 0) {
-            if (typeof cellValue === "string" || typeof cellValue === "number") {
-              cellValue = processMaskedValue(cellValue, mask);
+          if (cellValue == null || cellValue === false) {
+            const { defaultEmptyValue } = this;
+            if (defaultEmptyValue !== void 0) {
+              if (typeof defaultEmptyValue === "function") {
+                cell = defaultEmptyValue();
+              } else {
+                cell = defaultEmptyValue;
+              }
+            } else {
+              cell = "";
+            }
+          } else {
+            if (mask && cellValue !== null && cellValue !== void 0) {
+              if (typeof cellValue === "string" || typeof cellValue === "number") {
+                cellValue = processMaskedValue(cellValue, mask);
+              }
             }
+            cell = cellValue;
           }
-          cell = cellValue;
         } else if (isEditable && !isSummary) {
           const { placeholder } = column;
           const rawValue = String(row[key] || "");
@@ -83603,16 +83618,42 @@
             if (mask && cellValue !== null && cellValue !== void 0) {
               cellValue = processMaskedValue(String(cellValue), mask);
             }
-            cell = String(cellValue);
+            if (cellValue === null || cellValue === void 0 || cellValue === false) {
+              const { defaultEmptyValue } = this;
+              if (defaultEmptyValue !== void 0) {
+                if (typeof defaultEmptyValue === "function") {
+                  cell = defaultEmptyValue();
+                } else {
+                  cell = defaultEmptyValue;
+                }
+              } else {
+                cell = "";
+              }
+            } else {
+              cell = String(cellValue);
+            }
           } else {
             let cellValue = renderCell ? renderCell(get(row, key), row, column) : get(row, key);
             if (cellValue && typeof cellValue === "object" && "type" in cellValue) {
               cell = cellValue;
             } else {
-              if (mask && cellValue !== null && cellValue !== void 0) {
-                cellValue = processMaskedValue(cellValue, mask);
+              if (cellValue === null || cellValue === void 0 || cellValue === false) {
+                const { defaultEmptyValue } = this;
+                if (defaultEmptyValue !== void 0) {
+                  if (typeof defaultEmptyValue === "function") {
+                    cell = defaultEmptyValue();
+                  } else {
+                    cell = defaultEmptyValue;
+                  }
+                } else {
+                  cell = "";
+                }
+              } else {
+                if (mask && cellValue !== null && cellValue !== void 0) {
+                  cellValue = processMaskedValue(cellValue, mask);
+                }
+                cell = String(cellValue);
               }
-              cell = String(cellValue);
             }
           }
         }
@@ -83977,6 +84018,7 @@
           doCheck,
           doUncheck,
           renderCell,
+          defaultEmptyValueRef,
           emptyPropsRef
           // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         } = vue.inject(dataTableInjectionKey);
@@ -84252,6 +84294,7 @@
           handleRadioUpdateChecked,
           handleUpdateExpanded,
           renderCell,
+          defaultEmptyValueRef,
           emptyPropsRef,
           ...exposedMethods
         };
@@ -84606,6 +84649,7 @@
                           isSummary,
                           mergedTheme: mergedTheme2,
                           renderCell: this.renderCell,
+                          defaultEmptyValue: this.defaultEmptyValueRef,
                           onEdit: (value, row2, key) => {
                             this.$emit("edit", value, row2, key);
                           }
@@ -86643,6 +86687,7 @@
           handleTableBodyScroll,
           setHeaderScrollLeft,
           renderCell: vue.toRef(props, "renderCell"),
+          defaultEmptyValueRef: vue.toRef(props, "defaultEmptyValue"),
           emptyPropsRef: vue.toRef(props, "emptyProps"),
           handleEdit
         });
@@ -124706,6 +124751,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 +125295,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++) {
+        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,8 +125357,13 @@
         type: String,
         required: true
       },
+      activeMenuKey: {
+        type: [String, Number],
+        default: null
+      },
       "onUpdate:menuValue": [Function, Array],
-      onUpdateMenuValue: [Function, Array]
+      onUpdateMenuValue: [Function, Array],
+      onUpdateActiveMenuKey: Function
     };
     var HeaderNavigation = vue.defineComponent({
       name: "HeaderNavigation",
@@ -125301,11 +125380,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 +125421,15 @@
           if (onUpdateMenuValue) call(onUpdateMenuValue, value);
           if (_onUpdateMenuValue) call(_onUpdateMenuValue, value);
         }
+        function setActiveMenuKey(key = null) {
+          if (props.onUpdateActiveMenuKey) {
+            props.onUpdateActiveMenuKey(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 +125469,10 @@
           navRef,
           setTabRef,
           indicatorStyle: indicatorStyleRef,
-          hoveredKey: hoveredKeyRef
+          hoveredKey: hoveredKeyRef,
+          setActiveMenuKey,
+          handleMenuItemClick,
+          checkedTopMenuKey
         };
       },
       render() {
@@ -125409,7 +125504,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 +125558,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 +125578,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 +125592,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 +125719,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 +125732,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 +125754,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 +126599,9 @@
         type: Array,
         default: () => defaultLangOptions
       },
-      defaultLang: [String, Number],
+      defaultLang: {
+        type: [String, Number]
+      },
       menuPlacement: {
         type: String,
         default: "horizontal"
@@ -126501,8 +126610,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: () => ({})
@@ -126553,7 +126667,9 @@
       },
       onSearch: Function,
       "onUpdate:menuValue": [Function, Array],
-      onUpdateMenuValue: [Function, Array]
+      onUpdateMenuValue: [Function, Array],
+      "onUpdate:activeMenuKey": [Function, Array],
+      onUpdateActiveMenuKey: [Function, Array]
     };
     var Header = vue.defineComponent({
       name: "Header",
@@ -126566,7 +126682,8 @@
         "language-select",
         "logo-click",
         "mobile-primary-action",
-        "mobile-secondary-action"
+        "mobile-secondary-action",
+        "update:activeMenuKey"
       ],
       setup(props, { emit }) {
         const { mergedClsPrefixRef } = useConfig(props);
@@ -126581,6 +126698,12 @@
         const isMobileRef = vue.toRef(props, "isMobile");
         const mobileMenuVisibleRef = vue.ref(false);
         const searchVisibleRef = vue.ref(false);
+        const controlledActiveMenuKeyRef = vue.toRef(props, "activeMenuKey");
+        const uncontrolledActiveMenuKeyRef = vue.ref(null);
+        const mergedActiveMenuKeyRef = useMergedState(
+          controlledActiveMenuKeyRef,
+          uncontrolledActiveMenuKeyRef
+        );
         vue.onBeforeMount(() => {
           headerMobileMenuStyle.mount({
             id: `${mergedClsPrefixRef.value}-header-mobile-menu`,
@@ -126603,9 +126726,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
@@ -126733,6 +126854,14 @@
         function handleLogoClick() {
           emit("logo-click");
         }
+        function handleUpdateActiveMenuKey(value) {
+          uncontrolledActiveMenuKeyRef.value = value;
+          emit("update:activeMenuKey", value);
+          const { onUpdateActiveMenuKey } = props;
+          const { "onUpdate:activeMenuKey": _onUpdateActiveMenuKey } = props;
+          if (onUpdateActiveMenuKey) call(onUpdateActiveMenuKey, value);
+          if (_onUpdateActiveMenuKey) call(_onUpdateActiveMenuKey, value);
+        }
         return {
           mergedClsPrefix: mergedClsPrefixRef,
           cssVars: cssVarsRef,
@@ -126743,6 +126872,9 @@
           isMobile: isMobileRef,
           mobileMenuVisible: mobileMenuVisibleRef,
           searchVisible: searchVisibleRef,
+          menuPaneClass,
+          menuPaneWrapperClass,
+          mergedActiveMenuKey: mergedActiveMenuKeyRef,
           handleSelectLang,
           handleMenuValueUpdate,
           handleSearchClick,
@@ -126757,8 +126889,7 @@
           handleMobileMenuItemClick,
           handleMobilePrimaryAction,
           handleMobileSecondaryAction,
-          menuPaneClass,
-          menuPaneWrapperClass,
+          handleUpdateActiveMenuKey,
           onRender: themeClassHandle?.onRender
         };
       },
@@ -126805,7 +126936,9 @@
             mergedClsPrefix,
             menuPaneClass: this.menuPaneClass,
             menuPaneWrapperClass: this.menuPaneWrapperClass,
-            onUpdateMenuValue: this.handleMenuValueUpdate
+            activeMenuKey: this.mergedActiveMenuKey,
+            onUpdateMenuValue: this.handleMenuValueUpdate,
+            onUpdateActiveMenuKey: this.handleUpdateActiveMenuKey
           }
         );
         const mobileNode = this.responsive && this.isMobile ? /* @__PURE__ */ vue.h(
@@ -128552,6 +128685,7 @@
         renderBadge: renderBadge,
         renderOptionLabel: renderOptionLabel,
         resolvePlacement: resolvePlacement,
+        resolveTopLevelMenuKey: resolveTopLevelMenuKey,
         resultProps: resultProps,
         rowProps: rowProps,
         safeTopScrollbarProps: safeTopScrollbarProps,
@@ -128593,7 +128727,7 @@
         watermarkProps: watermarkProps
     });
 
-    var version = "1.12.16";
+    var version = "1.12.18";
 
     function useExposeProxy(targetRef) {
       return new Proxy({}, {
@@ -129843,6 +129977,7 @@
     exports.renderBadge = renderBadge;
     exports.renderOptionLabel = renderOptionLabel;
     exports.resolvePlacement = resolvePlacement;
+    exports.resolveTopLevelMenuKey = resolveTopLevelMenuKey;
     exports.resultDark = resultDark;
     exports.resultProps = resultProps;
     exports.rowProps = rowProps;