@uzum-tech/ui 1.12.14 → 1.12.16

package/es/_internal/icons/Logout.js

@@ -1,4 +1,4 @@
 import { h } from 'vue';
 import { replaceable } from './replaceable';
 export default replaceable('logout', h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" },
-    h("path", { d: "M16 17L21 12M21 12L16 7M21 12H9M9 3H7.8C6.11984 3 5.27976 3 4.63803 3.32698C4.07354 3.6146 3.6146 4.07354 3.32698 4.63803C3 5.27976 3 6.11984 3 7.8V16.2C3 17.8802 3 18.7202 3.32698 19.362C3.6146 19.9265 4.07354 20.3854 4.63803 20.673C5.27976 21 6.11984 21 7.8 21H9", stroke: "#101010", "stroke-width": "1.66667", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+    h("path", { d: "M16 17L21 12M21 12L16 7M21 12H9M9 3H7.8C6.11984 3 5.27976 3 4.63803 3.32698C4.07354 3.6146 3.6146 4.07354 3.32698 4.63803C3 5.27976 3 6.11984 3 7.8V16.2C3 17.8802 3 18.7202 3.32698 19.362C3.6146 19.9265 4.07354 20.3854 4.63803 20.673C5.27976 21 6.11984 21 7.8 21H9", stroke: "currentColor", "stroke-width": "1.66667", "stroke-linecap": "round", "stroke-linejoin": "round" })));

package/es/config-provider/src/ConfigProvider.js

@@ -97,20 +97,24 @@ export default defineComponent({
             if (!mergedMap)
                 return;
             const currentWidth = windowWidthRef.value;
-            const breakpointWidths = Object.keys(mergedMap).map(Number);
+            const breakpointWidths = Object.keys(mergedMap)
+                .map(Number)
+                .sort((leftWidth, rightWidth) => leftWidth - rightWidth);
             let matchingBreakpoints;
             if (mode === 'mobile-first') {
-                matchingBreakpoints = breakpointWidths
-                    .filter((width) => width >= currentWidth)
-                    .sort((leftWidth, rightWidth) => leftWidth - rightWidth);
+                matchingBreakpoints = breakpointWidths.filter((width) => width >= currentWidth);
+                if (matchingBreakpoints.length === 0) {
+                    matchingBreakpoints = [breakpointWidths[breakpointWidths.length - 1]];
+                }
             }
             else {
                 matchingBreakpoints = breakpointWidths
                     .filter((width) => width <= currentWidth)
-                    .sort((leftWidth, rightWidth) => rightWidth - leftWidth);
+                    .reverse();
+                if (matchingBreakpoints.length === 0) {
+                    matchingBreakpoints = [breakpointWidths[0]];
+                }
             }
-            if (matchingBreakpoints.length === 0)
-                return;
             const activeBreakpoint = matchingBreakpoints[0];
             return mergedMap[activeBreakpoint];
         };

package/es/config-provider/src/internal-interface.d.ts

@@ -188,6 +188,7 @@ import { CropTheme } from '../../crop/styles';
 import { SafeTopScrollbarTheme } from '../../_internal/safe-top-scrollbar/styles';
 import { HeaderTheme } from '../../header/styles';
 import { QrCodeTheme } from '../../qr-code/styles';
+import { HeaderProps } from '../../header';
 export interface GlobalThemeWithoutCommon {
     Alert?: AlertTheme;
     Anchor?: AnchorTheme;
@@ -385,6 +386,7 @@ export interface GlobalComponentConfig {
     CardList?: CardListProps;
     Chat?: ChatProps;
     Text?: TextProps;
+    Header?: HeaderProps;
     InputOtp?: InputOtpProps;
 }
 export interface GlobalIconConfig {

package/es/header/src/Header.d.ts

@@ -43,6 +43,10 @@ export declare const headerProps: {
         type: PropType<HeaderPropsInterface["responsive"]>;
         default: boolean;
     };
+    isMobile: {
+        type: PropType<HeaderPropsInterface["isMobile"]>;
+        default: boolean;
+    };
     mobileMenuType: {
         type: PropType<"drawer" | "dropdown">;
         default: string;
@@ -213,6 +217,10 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<HeaderPropsInterface["responsive"]>;
         default: boolean;
     };
+    isMobile: {
+        type: PropType<HeaderPropsInterface["isMobile"]>;
+        default: boolean;
+    };
     mobileMenuType: {
         type: PropType<"drawer" | "dropdown">;
         default: string;
@@ -388,7 +396,7 @@ declare const _default: import("vue").DefineComponent<{
         key: string | number;
         icon?: (() => import("vue").VNodeChild) | undefined;
     }>;
-    isMobile: ComputedRef<boolean>;
+    isMobile: import("vue").Ref<boolean | undefined>;
     mobileMenuVisible: import("vue").Ref<boolean>;
     searchVisible: import("vue").Ref<boolean>;
     handleSelectLang: (key: string | number) => void;
@@ -448,6 +456,10 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<HeaderPropsInterface["responsive"]>;
         default: boolean;
     };
+    isMobile: {
+        type: PropType<HeaderPropsInterface["isMobile"]>;
+        default: boolean;
+    };
     mobileMenuType: {
         type: PropType<"drawer" | "dropdown">;
         default: string;
@@ -596,6 +608,7 @@ declare const _default: import("vue").DefineComponent<{
     menuCardMinColumnWidth: string | number | undefined;
     logoSrc: string | undefined;
     logoAlt: string | undefined;
+    isMobile: boolean | undefined;
     mobileActionsCollapse: boolean | undefined;
     mobileShowFooterActions: boolean | undefined;
     mobilePrimaryActionText: string | undefined;

package/es/header/src/Header.js

@@ -14,7 +14,6 @@ import { useConfig, useTheme, useThemeClass } from '../../_mixins';
 import { headerLight } from '../styles';
 import { formatLength, resolveWrappedSlot, call } from '../../_utils';
 import { getMenuItemKey } from './utils';
-import { useIsMobile } from '../../_utils/composable/composables';
 import { UIcon } from '../../icon';
 import HeaderNavigation from './HeaderNavigation';
 import HeaderMobile from './mobile/HeaderMobile';
@@ -67,6 +66,9 @@ export const headerProps = Object.assign(Object.assign({}, useTheme.props), { me
     }, responsive: {
         type: Boolean,
         default: true
+    }, isMobile: {
+        type: Boolean,
+        default: true
     }, mobileMenuType: {
         type: String,
         default: 'drawer'
@@ -103,7 +105,7 @@ export default defineComponent({
         var _a, _b, _c;
         const { mergedClsPrefixRef } = useConfig(props);
         const themeRef = useTheme('Header', '-header', style, headerLight, props, mergedClsPrefixRef);
-        const isMobileRef = useIsMobile();
+        const isMobileRef = toRef(props, 'isMobile');
         const mobileMenuVisibleRef = ref(false);
         const searchVisibleRef = ref(false);
         onBeforeMount(() => {

package/es/header/src/HeaderActions.d.ts

@@ -114,7 +114,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly onSearchResultSelect: PropType<(result: HeaderSearchResult) => void>;
 }>>, {
     readonly responsive: boolean;
-    readonly mobileActionsCollapse: boolean;
     readonly isMobile: boolean;
+    readonly mobileActionsCollapse: boolean;
 }, {}>;
 export default _default;

package/es/header/src/interface.d.ts

@@ -16,6 +16,7 @@ export interface HeaderProps {
     logoAlt?: string;
     logoProps?: Partial<ImageProps>;
     responsive?: boolean;
+    isMobile?: boolean;
     mobileMenuType?: 'drawer' | 'dropdown';
     mobileActionsCollapse?: boolean;
     mobileShowFooterActions?: boolean;

package/es/header/src/mobile/HeaderMobile.d.ts

@@ -207,8 +207,8 @@ declare const _default: import("vue").DefineComponent<{
 }>>, {
     readonly primaryActionText: string;
     readonly secondaryActionText: string;
-    readonly visible: boolean;
     readonly menuOptions: NormalizedMenuItem[];
+    readonly visible: boolean;
     readonly menuType: "drawer" | "dropdown";
     readonly drawerPlacement: "left" | "right";
     readonly drawerWidth: string;

package/es/header/src/styles/index.cssr.js

@@ -17,12 +17,12 @@ export default cB('header', `
  `), cE('logo', [c('img', `
  max-height: 24px;
  `)])]), cM('desktop', [cE('inner-wrapper', `
- width: 1300px;
+ width: 100%;
+ max-width: 1300px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
- gap: var(--u-header-navigation-gap);
  padding: 0;
  position: relative;
  height: 80px;
@@ -31,12 +31,14 @@ export default cB('header', `
  display: flex;
  align-items: center;
  justify-content: space-between;
- gap: 60px;
+ flex: 1;
  height: 100%;
  `)]), cE('inner', `
+ width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
+ justify-content: center;
  gap: var(--u-header-navigation-gap);
  padding: 0;
  position: relative;
@@ -73,7 +75,6 @@ export default cB('header', `
  position: relative;
  display: inline-flex;
  align-items: center;
- gap: var(--u-header-action-gap);
  flex-shrink: 0;
  height: 100%;
  `, [cE('actions-block', `

package/es/modal/src/Modal.js

@@ -1,4 +1,4 @@
-import { h, withDirectives, Transition, ref, computed, defineComponent, provide, toRef, inject } from 'vue';
+import { h, withDirectives, Transition, ref, computed, defineComponent, provide, toRef, inject, nextTick } from 'vue';
 import { zindexable } from 'vdirs';
 import { useIsMounted, useClicked, useClickPosition } from 'vooks';
 import { VLazyTeleport } from 'vueuc';
@@ -124,6 +124,13 @@ export default defineComponent({
             const { onBeforeLeave, onBeforeHide } = props;
             if (onBeforeLeave)
                 call(onBeforeLeave);
+            void nextTick(() => {
+                if (document.activeElement &&
+                    document.activeElement !== document.body) {
+                    ;
+                    document.activeElement.blur();
+                }
+            });
             // deprecated
             if (onBeforeHide)
                 onBeforeHide();
@@ -132,6 +139,13 @@ export default defineComponent({
             const { onAfterLeave, onAfterHide } = props;
             if (onAfterLeave)
                 call(onAfterLeave);
+            void nextTick(() => {
+                if (document.activeElement &&
+                    document.activeElement !== document.body) {
+                    ;
+                    document.activeElement.blur();
+                }
+            });
             // deprecated
             if (onAfterHide)
                 onAfterHide();

package/es/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.12.14";
+declare const _default: "1.12.16";
 export default _default;

package/es/version.js

@@ -1 +1 @@
-export default '1.12.14';
+export default '1.12.16';

package/lib/_internal/icons/Logout.js

@@ -3,4 +3,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const vue_1 = require("vue");
 const replaceable_1 = require("./replaceable");
 exports.default = (0, replaceable_1.replaceable)('logout', (0, vue_1.h)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" },
-    (0, vue_1.h)("path", { d: "M16 17L21 12M21 12L16 7M21 12H9M9 3H7.8C6.11984 3 5.27976 3 4.63803 3.32698C4.07354 3.6146 3.6146 4.07354 3.32698 4.63803C3 5.27976 3 6.11984 3 7.8V16.2C3 17.8802 3 18.7202 3.32698 19.362C3.6146 19.9265 4.07354 20.3854 4.63803 20.673C5.27976 21 6.11984 21 7.8 21H9", stroke: "#101010", "stroke-width": "1.66667", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+    (0, vue_1.h)("path", { d: "M16 17L21 12M21 12L16 7M21 12H9M9 3H7.8C6.11984 3 5.27976 3 4.63803 3.32698C4.07354 3.6146 3.6146 4.07354 3.32698 4.63803C3 5.27976 3 6.11984 3 7.8V16.2C3 17.8802 3 18.7202 3.32698 19.362C3.6146 19.9265 4.07354 20.3854 4.63803 20.673C5.27976 21 6.11984 21 7.8 21H9", stroke: "currentColor", "stroke-width": "1.66667", "stroke-linecap": "round", "stroke-linejoin": "round" })));

package/lib/config-provider/src/ConfigProvider.js

@@ -100,20 +100,24 @@ exports.default = (0, vue_1.defineComponent)({
             if (!mergedMap)
                 return;
             const currentWidth = windowWidthRef.value;
-            const breakpointWidths = Object.keys(mergedMap).map(Number);
+            const breakpointWidths = Object.keys(mergedMap)
+                .map(Number)
+                .sort((leftWidth, rightWidth) => leftWidth - rightWidth);
             let matchingBreakpoints;
             if (mode === 'mobile-first') {
-                matchingBreakpoints = breakpointWidths
-                    .filter((width) => width >= currentWidth)
-                    .sort((leftWidth, rightWidth) => leftWidth - rightWidth);
+                matchingBreakpoints = breakpointWidths.filter((width) => width >= currentWidth);
+                if (matchingBreakpoints.length === 0) {
+                    matchingBreakpoints = [breakpointWidths[breakpointWidths.length - 1]];
+                }
             }
             else {
                 matchingBreakpoints = breakpointWidths
                     .filter((width) => width <= currentWidth)
-                    .sort((leftWidth, rightWidth) => rightWidth - leftWidth);
+                    .reverse();
+                if (matchingBreakpoints.length === 0) {
+                    matchingBreakpoints = [breakpointWidths[0]];
+                }
             }
-            if (matchingBreakpoints.length === 0)
-                return;
             const activeBreakpoint = matchingBreakpoints[0];
             return mergedMap[activeBreakpoint];
         };

package/lib/config-provider/src/internal-interface.d.ts

@@ -188,6 +188,7 @@ import { CropTheme } from '../../crop/styles';
 import { SafeTopScrollbarTheme } from '../../_internal/safe-top-scrollbar/styles';
 import { HeaderTheme } from '../../header/styles';
 import { QrCodeTheme } from '../../qr-code/styles';
+import { HeaderProps } from '../../header';
 export interface GlobalThemeWithoutCommon {
     Alert?: AlertTheme;
     Anchor?: AnchorTheme;
@@ -385,6 +386,7 @@ export interface GlobalComponentConfig {
     CardList?: CardListProps;
     Chat?: ChatProps;
     Text?: TextProps;
+    Header?: HeaderProps;
     InputOtp?: InputOtpProps;
 }
 export interface GlobalIconConfig {

package/lib/header/src/Header.d.ts

@@ -43,6 +43,10 @@ export declare const headerProps: {
         type: PropType<HeaderPropsInterface["responsive"]>;
         default: boolean;
     };
+    isMobile: {
+        type: PropType<HeaderPropsInterface["isMobile"]>;
+        default: boolean;
+    };
     mobileMenuType: {
         type: PropType<"drawer" | "dropdown">;
         default: string;
@@ -213,6 +217,10 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<HeaderPropsInterface["responsive"]>;
         default: boolean;
     };
+    isMobile: {
+        type: PropType<HeaderPropsInterface["isMobile"]>;
+        default: boolean;
+    };
     mobileMenuType: {
         type: PropType<"drawer" | "dropdown">;
         default: string;
@@ -388,7 +396,7 @@ declare const _default: import("vue").DefineComponent<{
         key: string | number;
         icon?: (() => import("vue").VNodeChild) | undefined;
     }>;
-    isMobile: ComputedRef<boolean>;
+    isMobile: import("vue").Ref<boolean | undefined>;
     mobileMenuVisible: import("vue").Ref<boolean>;
     searchVisible: import("vue").Ref<boolean>;
     handleSelectLang: (key: string | number) => void;
@@ -448,6 +456,10 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<HeaderPropsInterface["responsive"]>;
         default: boolean;
     };
+    isMobile: {
+        type: PropType<HeaderPropsInterface["isMobile"]>;
+        default: boolean;
+    };
     mobileMenuType: {
         type: PropType<"drawer" | "dropdown">;
         default: string;
@@ -596,6 +608,7 @@ declare const _default: import("vue").DefineComponent<{
     menuCardMinColumnWidth: string | number | undefined;
     logoSrc: string | undefined;
     logoAlt: string | undefined;
+    isMobile: boolean | undefined;
     mobileActionsCollapse: boolean | undefined;
     mobileShowFooterActions: boolean | undefined;
     mobilePrimaryActionText: string | undefined;

package/lib/header/src/Header.js

@@ -43,7 +43,6 @@ const _mixins_1 = require("../../_mixins");
 const styles_1 = require("../styles");
 const _utils_1 = require("../../_utils");
 const utils_1 = require("./utils");
-const composables_1 = require("../../_utils/composable/composables");
 const icon_1 = require("../../icon");
 const HeaderNavigation_1 = __importDefault(require("./HeaderNavigation"));
 const HeaderMobile_1 = __importDefault(require("./mobile/HeaderMobile"));
@@ -96,6 +95,9 @@ exports.headerProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props),
     }, responsive: {
         type: Boolean,
         default: true
+    }, isMobile: {
+        type: Boolean,
+        default: true
     }, mobileMenuType: {
         type: String,
         default: 'drawer'
@@ -132,7 +134,7 @@ exports.default = (0, vue_1.defineComponent)({
         var _a, _b, _c;
         const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
         const themeRef = (0, _mixins_1.useTheme)('Header', '-header', index_cssr_1.default, styles_1.headerLight, props, mergedClsPrefixRef);
-        const isMobileRef = (0, composables_1.useIsMobile)();
+        const isMobileRef = (0, vue_1.toRef)(props, 'isMobile');
         const mobileMenuVisibleRef = (0, vue_1.ref)(false);
         const searchVisibleRef = (0, vue_1.ref)(false);
         (0, vue_1.onBeforeMount)(() => {

package/lib/header/src/HeaderActions.d.ts

@@ -114,7 +114,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly onSearchResultSelect: PropType<(result: HeaderSearchResult) => void>;
 }>>, {
     readonly responsive: boolean;
-    readonly mobileActionsCollapse: boolean;
     readonly isMobile: boolean;
+    readonly mobileActionsCollapse: boolean;
 }, {}>;
 export default _default;

package/lib/header/src/interface.d.ts

@@ -16,6 +16,7 @@ export interface HeaderProps {
     logoAlt?: string;
     logoProps?: Partial<ImageProps>;
     responsive?: boolean;
+    isMobile?: boolean;
     mobileMenuType?: 'drawer' | 'dropdown';
     mobileActionsCollapse?: boolean;
     mobileShowFooterActions?: boolean;

package/lib/header/src/mobile/HeaderMobile.d.ts

@@ -207,8 +207,8 @@ declare const _default: import("vue").DefineComponent<{
 }>>, {
     readonly primaryActionText: string;
     readonly secondaryActionText: string;
-    readonly visible: boolean;
     readonly menuOptions: NormalizedMenuItem[];
+    readonly visible: boolean;
     readonly menuType: "drawer" | "dropdown";
     readonly drawerPlacement: "left" | "right";
     readonly drawerWidth: string;

package/lib/header/src/styles/index.cssr.js

@@ -23,12 +23,12 @@ exports.default = (0, cssr_1.cB)('header', `
  `), (0, cssr_1.cE)('logo', [(0, cssr_1.c)('img', `
  max-height: 24px;
  `)])]), (0, cssr_1.cM)('desktop', [(0, cssr_1.cE)('inner-wrapper', `
- width: 1300px;
+ width: 100%;
+ max-width: 1300px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
- gap: var(--u-header-navigation-gap);
  padding: 0;
  position: relative;
  height: 80px;
@@ -37,12 +37,14 @@ exports.default = (0, cssr_1.cB)('header', `
  display: flex;
  align-items: center;
  justify-content: space-between;
- gap: 60px;
+ flex: 1;
  height: 100%;
  `)]), (0, cssr_1.cE)('inner', `
+ width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
+ justify-content: center;
  gap: var(--u-header-navigation-gap);
  padding: 0;
  position: relative;
@@ -79,7 +81,6 @@ exports.default = (0, cssr_1.cB)('header', `
  position: relative;
  display: inline-flex;
  align-items: center;
- gap: var(--u-header-action-gap);
  flex-shrink: 0;
  height: 100%;
  `, [(0, cssr_1.cE)('actions-block', `

package/lib/modal/src/Modal.js

@@ -130,6 +130,13 @@ exports.default = (0, vue_1.defineComponent)({
             const { onBeforeLeave, onBeforeHide } = props;
             if (onBeforeLeave)
                 (0, _utils_1.call)(onBeforeLeave);
+            void (0, vue_1.nextTick)(() => {
+                if (document.activeElement &&
+                    document.activeElement !== document.body) {
+                    ;
+                    document.activeElement.blur();
+                }
+            });
             // deprecated
             if (onBeforeHide)
                 onBeforeHide();
@@ -138,6 +145,13 @@ exports.default = (0, vue_1.defineComponent)({
             const { onAfterLeave, onAfterHide } = props;
             if (onAfterLeave)
                 (0, _utils_1.call)(onAfterLeave);
+            void (0, vue_1.nextTick)(() => {
+                if (document.activeElement &&
+                    document.activeElement !== document.body) {
+                    ;
+                    document.activeElement.blur();
+                }
+            });
             // deprecated
             if (onAfterHide)
                 onAfterHide();

package/lib/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.12.14";
+declare const _default: "1.12.16";
 export default _default;

package/lib/version.js

@@ -1,3 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = '1.12.14';
+exports.default = '1.12.16';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uzum-tech/ui",
-  "version": "1.12.14",
+  "version": "1.12.16",
   "description": "A Vue 3 Component Library. Fairly Complete, Theme Customizable, Uses TypeScript, Fast",
   "main": "lib/index.js",
   "module": "es/index.js",

package/web-types.json

@@ -2,7 +2,7 @@
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "framework": "vue",
   "name": "@uzum-tech/ui",
-  "version": "1.12.14",
+  "version": "1.12.16",
   "js-types-syntax": "typescript",
   "contributions": {
     "html": {
@@ -18375,6 +18375,11 @@
               "description": "Enable responsive/mobile adaptation.",
               "default": "true"
             },
+            {
+              "name": "is-mobile",
+              "doc-url": "https://uzum-ui.kapitalbank.uz/en-US/os-theme/components/header",
+              "type": "boolean"
+            },
             {
               "name": "mobile-menu-type",
               "doc-url": "https://uzum-ui.kapitalbank.uz/en-US/os-theme/components/header",