@uzum-tech/ui 1.12.20 → 1.12.22

package/dist/index.js

@@ -124753,6 +124753,7 @@
       opacity: .5;
     `), c$1("& .u-tabs-tab--checked", `
       color: var(--u-header-tab-text-color-active);
+      border-color: var(--u-header-tab-indicator-color);
     `), c$1("& .u-tabs-tab:hover", `
       color: var(--u-header-tab-text-color-hover);
     `), c$1("& .u-tabs-bar", `
@@ -124807,6 +124808,7 @@
     background-color: var(--u-header-card-bg-color);
     border-radius: var(--u-header-card-radius);
     padding: var(--u-header-card-padding);
+    box-shadow: var(--u-header-card-shadow);
   `), cE("menu-grid", `
     display: grid;
     gap: var(--u-header-card-gap);
@@ -126020,6 +126022,18 @@
             (child, index) => renderGroupItem(child, item.key, index)
           )));
         };
+        const renderSearchAction = () => {
+          if (this.$slots.search) return this.$slots.search();
+          return /* @__PURE__ */ vue.h(Button, { text: true, onClick: this.onSearchClick }, () => /* @__PURE__ */ vue.h(UIcon, { size: 24 }, () => /* @__PURE__ */ vue.h(SearchIcon, null)));
+        };
+        const renderPreviewAction = () => {
+          if (this.$slots.preview) return this.$slots.preview();
+          return /* @__PURE__ */ vue.h(Button, { text: true, onClick: this.onPreview }, () => /* @__PURE__ */ vue.h(UIcon, { size: 24 }, () => /* @__PURE__ */ vue.h(EyeIcon, null)));
+        };
+        const renderLogoutAction = () => {
+          if (this.$slots.logout) return this.$slots.logout();
+          return /* @__PURE__ */ vue.h(Button, { text: true, onClick: this.onLogout }, () => /* @__PURE__ */ vue.h(UIcon, { size: 24 }, () => /* @__PURE__ */ vue.h(LogoutIcon, null)));
+        };
         const mobileMenuContent = /* @__PURE__ */ vue.h("div", { class: mobileMenuClass, style: this.cssVars }, /* @__PURE__ */ vue.h("div", { class: `${mobileMenuClass}__header` }, this.$slots.actions ? /* @__PURE__ */ vue.h("div", { class: `${mobileMenuClass}__actions` }, this.$slots.actions()) : this.showHeaderActions ? /* @__PURE__ */ vue.h("div", { class: `${mobileMenuClass}__actions` }, /* @__PURE__ */ vue.h(
           UDropdown,
           {
@@ -126054,7 +126068,7 @@
             )
           }
         ), /* @__PURE__ */ vue.h(UFlex, { size: 24 }, {
-          default: () => /* @__PURE__ */ vue.h(vue.Fragment, null, /* @__PURE__ */ vue.h(Button, { text: true, onClick: this.onSearchClick }, () => /* @__PURE__ */ vue.h(UIcon, { size: 24 }, () => /* @__PURE__ */ vue.h(SearchIcon, null))), /* @__PURE__ */ vue.h(Button, { text: true, onClick: this.onPreview }, () => /* @__PURE__ */ vue.h(UIcon, { size: 24 }, () => /* @__PURE__ */ vue.h(EyeIcon, null))), /* @__PURE__ */ vue.h(Button, { text: true, onClick: this.onLogout }, () => /* @__PURE__ */ vue.h(UIcon, { size: 24 }, () => /* @__PURE__ */ vue.h(LogoutIcon, null))))
+          default: () => /* @__PURE__ */ vue.h(vue.Fragment, null, renderSearchAction(), renderPreviewAction(), renderLogoutAction())
         })) : null, /* @__PURE__ */ vue.h(
           Button,
           {
@@ -126193,15 +126207,20 @@
         const search = vue.ref("");
         const searchText = vue.computed(() => localeRef.value.desktopSearchTitle);
         const placeholder = vue.computed(() => localeRef.value.searchPlaceholder);
+        const inputInstRef = vue.ref(null);
+        vue.onMounted(() => {
+          inputInstRef.value?.focus();
+        });
         return {
           search,
           searchText,
-          placeholder
+          placeholder,
+          inputInstRef
         };
       },
       render() {
         const blockClass = `${this.mergedClsPrefix}-header-search-desktop`;
-        return /* @__PURE__ */ vue.h("div", { class: blockClass, style: this.cssVars }, /* @__PURE__ */ vue.h(
+        const content = /* @__PURE__ */ vue.h("div", { class: blockClass, style: this.cssVars }, /* @__PURE__ */ vue.h(
           Button,
           {
             text: true,
@@ -126214,6 +126233,7 @@
         ), /* @__PURE__ */ vue.h(UFlex, { class: `${blockClass}__title`, justify: "space-between" }, /* @__PURE__ */ vue.h(UText, { variant: "title-l-medium", text: this.searchText })), /* @__PURE__ */ vue.h("div", { class: `${blockClass}__content` }, /* @__PURE__ */ vue.h("div", { class: `${blockClass}__input-wrapper` }, /* @__PURE__ */ vue.h(
           UInput,
           {
+            ref: "inputInstRef",
             value: this.searchValue,
             class: `${blockClass}__input`,
             placeholder: this.placeholder,
@@ -126238,6 +126258,15 @@
           cssVars: this.cssVars,
           onSelect: this.onResultSelect
         }));
+        if (!this.onSearchClose) return content;
+        return vue.withDirectives(content, [
+          [
+            clickoutside,
+            this.onSearchClose,
+            void 0,
+            { capture: true }
+          ]
+        ]);
       }
     });
 
@@ -126273,6 +126302,7 @@
         required: false
       },
       cssVars: Object,
+      langDropdownThemeOverrides: Object,
       onSearch: Function,
       onPreview: Function,
       onLogout: Function,
@@ -126356,7 +126386,8 @@
             UDropdown,
             {
               options: this.langOptions,
-              onSelect: this.onLanguageSelect
+              onSelect: this.onLanguageSelect,
+              themeOverrides: this.langDropdownThemeOverrides
             },
             {
               default: () => /* @__PURE__ */ vue.h(
@@ -126484,6 +126515,7 @@
         const searchValue = vue.ref("");
         const searchResults = vue.ref([]);
         const searchLoading = vue.ref(false);
+        const inputInstRef = vue.ref(null);
         const placeholder = vue.computed(() => localeRef.value.searchPlaceholder);
         const handleSearch = async () => {
           const query = searchValue.value.trim();
@@ -126523,11 +126555,15 @@
             void handleSearch();
           }, SEARCH_DEBOUNCE_MS);
         });
+        vue.onMounted(() => {
+          inputInstRef.value?.focus();
+        });
         return {
           placeholder,
           searchValue,
           searchResults,
           searchLoading,
+          inputInstRef,
           handleSearchInput,
           handleSearch,
           handleClose,
@@ -126560,6 +126596,7 @@
           ), /* @__PURE__ */ vue.h("div", { class: `${blockClass}__input-wrapper` }, /* @__PURE__ */ vue.h(UIcon, { size: 20, class: `${blockClass}__input-icon` }, () => /* @__PURE__ */ vue.h(SearchIcon, null)), /* @__PURE__ */ vue.h(
             UInput,
             {
+              ref: "inputInstRef",
               value: this.searchValue,
               placeholder: this.placeholder,
               onKeyup: (e) => {
@@ -126788,6 +126825,7 @@
             "--u-header-card-divider-color": self.cardDividerColor,
             "--u-header-card-gap": self.cardGap,
             "--u-header-card-padding": self.cardPadding,
+            "--u-header-card-shadow": self.cardShadow,
             "--u-header-badge-bg-color": self.badgeBackgroundColor,
             "--u-header-badge-text-color": self.badgeTextColor,
             "--u-header-action-icon-color": self.actionIconColor,
@@ -126992,7 +127030,10 @@
           },
           {
             actions: $slots["mobile-actions"],
-            footer: $slots["mobile-footer"]
+            footer: $slots["mobile-footer"],
+            search: $slots["mobile-search"],
+            preview: $slots["mobile-preview"],
+            logout: $slots["mobile-logout"]
           }
         ) : null;
         const langNode = resolveWrappedSlot($slots.lang, (children) => children);
@@ -128771,7 +128812,7 @@
         watermarkProps: watermarkProps
     });
 
-    var version = "1.12.20";
+    var version = "1.12.22";
 
     function useExposeProxy(targetRef) {
       return new Proxy({}, {