@uzum-tech/ui 1.12.8 → 1.12.10

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

@@ -77,8 +77,12 @@ export default c([cB('button', `
   borderColor: 'var(--u-border-color-hover)'
 })]), c('&:active', [cE('state-border', {
   borderColor: 'var(--u-border-color-pressed)'
+})]), c('&:hover, &:active, &:focus', [cE('border', {
+  borderColor: 'transparent'
 })]), cM('pressed', [cE('state-border', {
   borderColor: 'var(--u-border-color-pressed)'
+}), cE('border', {
+  borderColor: 'transparent'
 })])])]), cM('disabled', {
   backgroundColor: 'var(--u-color-disabled)',
   color: 'var(--u-text-color-disabled)'
@@ -89,6 +93,8 @@ export default c([cB('button', `
   color: 'var(--u-text-color-focus)'
 }, [cE('state-border', {
   border: 'var(--u-border-focus)'
+}), cE('border', {
+  borderColor: 'transparent'
 })]), c('&:focus-visible', {
   backgroundColor: 'var(--u-color)',
   color: 'var(--u-text-color)',
@@ -100,16 +106,22 @@ export default c([cB('button', `
   color: 'var(--u-text-color-hover)'
 }, [cE('state-border', {
   border: 'var(--u-border-hover)'
+}), cE('border', {
+  borderColor: 'transparent'
 })]), c('&:active', {
   backgroundColor: 'var(--u-color-pressed)',
   color: 'var(--u-text-color-pressed)'
 }, [cE('state-border', {
   border: 'var(--u-border-pressed)'
+}), cE('border', {
+  borderColor: 'transparent'
 })]), cM('pressed', {
   backgroundColor: 'var(--u-color-pressed)',
   color: 'var(--u-text-color-pressed)'
 }, [cE('state-border', {
   border: 'var(--u-border-pressed)'
+}), cE('border', {
+  borderColor: 'transparent'
 })])]), cM('loading', 'cursor: wait;'), cE('loading', null, [cM('skeleton', {
   width: 'calc(100% + 2px)',
   height: 'calc(100% + 2px)',

package/es/header/src/HeaderNavigation.js

@@ -20,7 +20,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { h, defineComponent, computed, ref, watch, nextTick, onMounted, onBeforeUnmount } from 'vue';
 import { call } from '../../_utils';
-import { renderOptionLabel, renderBadge, getMenuItemKey, isDividerOption, isGroupOption, isColumnOption, isNotNull } from './utils';
+import { renderOptionLabel, renderBadge, getMenuItemKey, isDividerOption, isGroupOption, isColumnOption, isNotNull, isLeafMenuOption } from './utils';
 export const headerNavigationProps = {
     menuOptions: {
         type: Array,
@@ -174,29 +174,46 @@ export default defineComponent({
                 renderBadge(option, `${blockClass}__badge`)));
         };
         const renderMenuColumn = (option, key, asSection = false) => {
-            var _a, _b, _c, _d;
+            var _a, _b, _c, _d, _e;
             if (isDividerOption(option)) {
                 return asSection ? (h("div", { key: key, class: `${blockClass}__menu-divider`, role: "separator" })) : (h("div", { key: key, class: `${blockClass}__menu-divider`, role: "separator" }));
             }
             if (isColumnOption(option)) {
-                const sections = (_b = (_a = option.children) === null || _a === void 0 ? void 0 : _a.map((child, index) => renderMenuColumn(child, `${key}-section-${index}`, true))) !== null && _b !== void 0 ? _b : [];
+                const children = (_a = option.children) !== null && _a !== void 0 ? _a : [];
+                const hasGroup = children.some(isGroupOption);
+                if (!hasGroup) {
+                    const items = children
+                        .filter(isLeafMenuOption)
+                        .map((child, index) => renderMenuItem(child, `${key}-item-${index}`))
+                        .filter(isNotNull);
+                    if (!items.length)
+                        return null;
+                    return (h("div", { key: key, class: `${blockClass}__menu-column` },
+                        h("div", { class: `${blockClass}__menu-column-list` }, items)));
+                }
+                const sections = (_c = (_b = option.children) === null || _b === void 0 ? void 0 : _b.map((child, index) => renderMenuColumn(child, `${key}-section-${index}`, true))) !== null && _c !== void 0 ? _c : [];
                 const content = sections.filter(isNotNull);
                 if (!content.length)
                     return null;
                 return (h("div", { key: key, class: `${blockClass}__menu-column` }, content));
             }
             if (isGroupOption(option)) {
-                const children = (_d = (_c = option.children) === null || _c === void 0 ? void 0 : _c.map((child, index) => renderMenuItem(child, `${key}-item-${index}`))) !== null && _d !== void 0 ? _d : [];
+                const hasChildren = option.children && option.children.length > 0;
+                if (!hasChildren) {
+                    return (h("div", { key: key, class: `${blockClass}__menu-column-section` },
+                        h("div", { class: `${blockClass}__menu-column-title`, role: option.onClick ? 'button' : undefined, tabindex: option.onClick && !option.disabled ? 0 : undefined, onClick: option.onClick }, renderOptionLabel(option))));
+                }
+                const children = (_e = (_d = option.children) === null || _d === void 0 ? void 0 : _d.map((child, index) => renderMenuItem(child, `${key}-item-${index}`))) !== null && _e !== void 0 ? _e : [];
                 const content = children.filter(isNotNull);
                 if (!content.length)
                     return null;
                 if (asSection) {
                     return (h("div", { key: key, class: `${blockClass}__menu-column-section` },
-                        h("div", { class: `${blockClass}__menu-column-title` }, renderOptionLabel(option)),
+                        h("div", { class: `${blockClass}__menu-column-title`, role: option.onClick ? 'button' : undefined, tabindex: option.onClick && !option.disabled ? 0 : undefined, onClick: option.onClick }, renderOptionLabel(option)),
                         h("div", { class: `${blockClass}__menu-column-list` }, content)));
                 }
                 return (h("div", { key: key, class: `${blockClass}__menu-column` },
-                    h("div", { class: `${blockClass}__menu-column-title` }, renderOptionLabel(option)),
+                    h("div", { class: `${blockClass}__menu-column-title`, role: option.onClick ? 'button' : undefined, tabindex: option.onClick && !option.disabled ? 0 : undefined, onClick: option.onClick }, renderOptionLabel(option)),
                     h("div", { class: `${blockClass}__menu-column-list` }, content)));
             }
             return (h("div", { key: key, class: [

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

@@ -2,8 +2,6 @@ import { type VNodeChild } from 'vue';
 import type { MenuOption as BaseMenuOption, MenuGroupOption, MenuDividerOption, Key } from '../../menu/src/interface';
 import type { TabsProps } from '../../tabs';
 import { ImageProps } from '../../image';
-export type HeaderMenuGroupOption = MenuGroupOption;
-export type HeaderMenuDividerOption = MenuDividerOption;
 export interface HeaderProps {
     menuOptions?: HeaderMenuOption[];
     langOptions?: LangOption[];
@@ -46,6 +44,10 @@ export interface HeaderSearchResult {
     onClick?: () => void;
     disabled?: boolean;
 }
+export type HeaderMenuGroupOption = MenuGroupOption & {
+    onClick?: () => void;
+};
+export type HeaderMenuDividerOption = MenuDividerOption;
 export type HeaderSearchHandler = (query: string) => Promise<HeaderSearchResult[]> | HeaderSearchResult[];
 export type HeaderMenuChildOption = HeaderMenuColumnOption | HeaderMenuGroupOption | HeaderMenuDividerOption | HeaderMenuOption;
 export type HeaderMenuOption = Omit<BaseMenuOption, 'children'> & {

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

@@ -172,6 +172,7 @@ export default cB('header', `
  left: 40%;
  transform: translateX(-40%);
  z-index: 1000;
+ cursor: default;
  `), cE('tab-pane', `
  padding: 0;
  `), cE('menu-card', `
@@ -184,7 +185,7 @@ export default cB('header', `
  `), cE('menu-column', `
  display: flex;
  flex-direction: column;
- gap: 16px;
+ gap: 32px;
  `, [cM('single', `
  gap: 8px;
  `)]), cE('menu-column-section', `
@@ -199,6 +200,9 @@ export default cB('header', `
  font-size: var(--u-font-title-small);
  font-weight: 600;
  color: var(--u-header-card-title-color);
+ cursor: text;
+ `), cE('menu-column-title[role="button"]', `
+ cursor: pointer;
  `), cE('menu-column-list', `
  display: flex;
  flex-direction: column;

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

@@ -5,8 +5,9 @@ export declare function renderOptionLabel(option: HeaderMenuOption | HeaderMenuG
 export declare function renderBadge(option: HeaderMenuOption | HeaderMenuGroupOption, className: string): VNodeChild | null;
 export declare function getMenuItemKey(option: HeaderMenuOption, index: number): string | number;
 export declare function hasChildren(option: HeaderMenuOption): boolean;
-export declare function isGroupOption(option: HeaderMenuOption): option is HeaderMenuGroupOption;
+export declare function isGroupOption(option: HeaderMenuOption | HeaderMenuChildOption): option is HeaderMenuGroupOption;
 export declare function isDividerOption(option: HeaderMenuChildOption): option is HeaderMenuDividerOption;
 export declare function isColumnOption(option: HeaderMenuChildOption): option is HeaderMenuColumnOption;
 export declare function isNotNull<T>(value: T | null): value is T;
 export declare function resolvePlacement(placement: HeaderMenuPlacement): TabsProps['placement'];
+export declare function isLeafMenuOption(option: HeaderMenuChildOption): option is Exclude<HeaderMenuChildOption, HeaderMenuColumnOption>;

package/es/header/src/utils.js

@@ -45,3 +45,6 @@ export function resolvePlacement(placement) {
             return placement;
     }
 }
+export function isLeafMenuOption(option) {
+    return option.type !== 'column';
+}

package/es/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.12.8";
+declare const _default: "1.12.10";
 export default _default;

package/es/version.js

@@ -1 +1 @@
-export default '1.12.8';
+export default '1.12.10';

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

@@ -82,8 +82,12 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('button', `
   borderColor: 'var(--u-border-color-hover)'
 })]), (0, cssr_1.c)('&:active', [(0, cssr_1.cE)('state-border', {
   borderColor: 'var(--u-border-color-pressed)'
+})]), (0, cssr_1.c)('&:hover, &:active, &:focus', [(0, cssr_1.cE)('border', {
+  borderColor: 'transparent'
 })]), (0, cssr_1.cM)('pressed', [(0, cssr_1.cE)('state-border', {
   borderColor: 'var(--u-border-color-pressed)'
+}), (0, cssr_1.cE)('border', {
+  borderColor: 'transparent'
 })])])]), (0, cssr_1.cM)('disabled', {
   backgroundColor: 'var(--u-color-disabled)',
   color: 'var(--u-text-color-disabled)'
@@ -94,6 +98,8 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('button', `
   color: 'var(--u-text-color-focus)'
 }, [(0, cssr_1.cE)('state-border', {
   border: 'var(--u-border-focus)'
+}), (0, cssr_1.cE)('border', {
+  borderColor: 'transparent'
 })]), (0, cssr_1.c)('&:focus-visible', {
   backgroundColor: 'var(--u-color)',
   color: 'var(--u-text-color)',
@@ -105,16 +111,22 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('button', `
   color: 'var(--u-text-color-hover)'
 }, [(0, cssr_1.cE)('state-border', {
   border: 'var(--u-border-hover)'
+}), (0, cssr_1.cE)('border', {
+  borderColor: 'transparent'
 })]), (0, cssr_1.c)('&:active', {
   backgroundColor: 'var(--u-color-pressed)',
   color: 'var(--u-text-color-pressed)'
 }, [(0, cssr_1.cE)('state-border', {
   border: 'var(--u-border-pressed)'
+}), (0, cssr_1.cE)('border', {
+  borderColor: 'transparent'
 })]), (0, cssr_1.cM)('pressed', {
   backgroundColor: 'var(--u-color-pressed)',
   color: 'var(--u-text-color-pressed)'
 }, [(0, cssr_1.cE)('state-border', {
   border: 'var(--u-border-pressed)'
+}), (0, cssr_1.cE)('border', {
+  borderColor: 'transparent'
 })])]), (0, cssr_1.cM)('loading', 'cursor: wait;'), (0, cssr_1.cE)('loading', null, [(0, cssr_1.cM)('skeleton', {
   width: 'calc(100% + 2px)',
   height: 'calc(100% + 2px)',

package/lib/header/src/HeaderNavigation.js

@@ -177,29 +177,46 @@ exports.default = (0, vue_1.defineComponent)({
                 (0, utils_1.renderBadge)(option, `${blockClass}__badge`)));
         };
         const renderMenuColumn = (option, key, asSection = false) => {
-            var _a, _b, _c, _d;
+            var _a, _b, _c, _d, _e;
             if ((0, utils_1.isDividerOption)(option)) {
                 return asSection ? ((0, vue_1.h)("div", { key: key, class: `${blockClass}__menu-divider`, role: "separator" })) : ((0, vue_1.h)("div", { key: key, class: `${blockClass}__menu-divider`, role: "separator" }));
             }
             if ((0, utils_1.isColumnOption)(option)) {
-                const sections = (_b = (_a = option.children) === null || _a === void 0 ? void 0 : _a.map((child, index) => renderMenuColumn(child, `${key}-section-${index}`, true))) !== null && _b !== void 0 ? _b : [];
+                const children = (_a = option.children) !== null && _a !== void 0 ? _a : [];
+                const hasGroup = children.some(utils_1.isGroupOption);
+                if (!hasGroup) {
+                    const items = children
+                        .filter(utils_1.isLeafMenuOption)
+                        .map((child, index) => renderMenuItem(child, `${key}-item-${index}`))
+                        .filter(utils_1.isNotNull);
+                    if (!items.length)
+                        return null;
+                    return ((0, vue_1.h)("div", { key: key, class: `${blockClass}__menu-column` },
+                        (0, vue_1.h)("div", { class: `${blockClass}__menu-column-list` }, items)));
+                }
+                const sections = (_c = (_b = option.children) === null || _b === void 0 ? void 0 : _b.map((child, index) => renderMenuColumn(child, `${key}-section-${index}`, true))) !== null && _c !== void 0 ? _c : [];
                 const content = sections.filter(utils_1.isNotNull);
                 if (!content.length)
                     return null;
                 return ((0, vue_1.h)("div", { key: key, class: `${blockClass}__menu-column` }, content));
             }
             if ((0, utils_1.isGroupOption)(option)) {
-                const children = (_d = (_c = option.children) === null || _c === void 0 ? void 0 : _c.map((child, index) => renderMenuItem(child, `${key}-item-${index}`))) !== null && _d !== void 0 ? _d : [];
+                const hasChildren = option.children && option.children.length > 0;
+                if (!hasChildren) {
+                    return ((0, vue_1.h)("div", { key: key, class: `${blockClass}__menu-column-section` },
+                        (0, vue_1.h)("div", { class: `${blockClass}__menu-column-title`, role: option.onClick ? 'button' : undefined, tabindex: option.onClick && !option.disabled ? 0 : undefined, onClick: option.onClick }, (0, utils_1.renderOptionLabel)(option))));
+                }
+                const children = (_e = (_d = option.children) === null || _d === void 0 ? void 0 : _d.map((child, index) => renderMenuItem(child, `${key}-item-${index}`))) !== null && _e !== void 0 ? _e : [];
                 const content = children.filter(utils_1.isNotNull);
                 if (!content.length)
                     return null;
                 if (asSection) {
                     return ((0, vue_1.h)("div", { key: key, class: `${blockClass}__menu-column-section` },
-                        (0, vue_1.h)("div", { class: `${blockClass}__menu-column-title` }, (0, utils_1.renderOptionLabel)(option)),
+                        (0, vue_1.h)("div", { class: `${blockClass}__menu-column-title`, role: option.onClick ? 'button' : undefined, tabindex: option.onClick && !option.disabled ? 0 : undefined, onClick: option.onClick }, (0, utils_1.renderOptionLabel)(option)),
                         (0, vue_1.h)("div", { class: `${blockClass}__menu-column-list` }, content)));
                 }
                 return ((0, vue_1.h)("div", { key: key, class: `${blockClass}__menu-column` },
-                    (0, vue_1.h)("div", { class: `${blockClass}__menu-column-title` }, (0, utils_1.renderOptionLabel)(option)),
+                    (0, vue_1.h)("div", { class: `${blockClass}__menu-column-title`, role: option.onClick ? 'button' : undefined, tabindex: option.onClick && !option.disabled ? 0 : undefined, onClick: option.onClick }, (0, utils_1.renderOptionLabel)(option)),
                     (0, vue_1.h)("div", { class: `${blockClass}__menu-column-list` }, content)));
             }
             return ((0, vue_1.h)("div", { key: key, class: [

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

@@ -2,8 +2,6 @@ import { type VNodeChild } from 'vue';
 import type { MenuOption as BaseMenuOption, MenuGroupOption, MenuDividerOption, Key } from '../../menu/src/interface';
 import type { TabsProps } from '../../tabs';
 import { ImageProps } from '../../image';
-export type HeaderMenuGroupOption = MenuGroupOption;
-export type HeaderMenuDividerOption = MenuDividerOption;
 export interface HeaderProps {
     menuOptions?: HeaderMenuOption[];
     langOptions?: LangOption[];
@@ -46,6 +44,10 @@ export interface HeaderSearchResult {
     onClick?: () => void;
     disabled?: boolean;
 }
+export type HeaderMenuGroupOption = MenuGroupOption & {
+    onClick?: () => void;
+};
+export type HeaderMenuDividerOption = MenuDividerOption;
 export type HeaderSearchHandler = (query: string) => Promise<HeaderSearchResult[]> | HeaderSearchResult[];
 export type HeaderMenuChildOption = HeaderMenuColumnOption | HeaderMenuGroupOption | HeaderMenuDividerOption | HeaderMenuOption;
 export type HeaderMenuOption = Omit<BaseMenuOption, 'children'> & {

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

@@ -178,6 +178,7 @@ exports.default = (0, cssr_1.cB)('header', `
  left: 40%;
  transform: translateX(-40%);
  z-index: 1000;
+ cursor: default;
  `), (0, cssr_1.cE)('tab-pane', `
  padding: 0;
  `), (0, cssr_1.cE)('menu-card', `
@@ -190,7 +191,7 @@ exports.default = (0, cssr_1.cB)('header', `
  `), (0, cssr_1.cE)('menu-column', `
  display: flex;
  flex-direction: column;
- gap: 16px;
+ gap: 32px;
  `, [(0, cssr_1.cM)('single', `
  gap: 8px;
  `)]), (0, cssr_1.cE)('menu-column-section', `
@@ -205,6 +206,9 @@ exports.default = (0, cssr_1.cB)('header', `
  font-size: var(--u-font-title-small);
  font-weight: 600;
  color: var(--u-header-card-title-color);
+ cursor: text;
+ `), (0, cssr_1.cE)('menu-column-title[role="button"]', `
+ cursor: pointer;
  `), (0, cssr_1.cE)('menu-column-list', `
  display: flex;
  flex-direction: column;

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

@@ -5,8 +5,9 @@ export declare function renderOptionLabel(option: HeaderMenuOption | HeaderMenuG
 export declare function renderBadge(option: HeaderMenuOption | HeaderMenuGroupOption, className: string): VNodeChild | null;
 export declare function getMenuItemKey(option: HeaderMenuOption, index: number): string | number;
 export declare function hasChildren(option: HeaderMenuOption): boolean;
-export declare function isGroupOption(option: HeaderMenuOption): option is HeaderMenuGroupOption;
+export declare function isGroupOption(option: HeaderMenuOption | HeaderMenuChildOption): option is HeaderMenuGroupOption;
 export declare function isDividerOption(option: HeaderMenuChildOption): option is HeaderMenuDividerOption;
 export declare function isColumnOption(option: HeaderMenuChildOption): option is HeaderMenuColumnOption;
 export declare function isNotNull<T>(value: T | null): value is T;
 export declare function resolvePlacement(placement: HeaderMenuPlacement): TabsProps['placement'];
+export declare function isLeafMenuOption(option: HeaderMenuChildOption): option is Exclude<HeaderMenuChildOption, HeaderMenuColumnOption>;

package/lib/header/src/utils.js

@@ -9,6 +9,7 @@ exports.isDividerOption = isDividerOption;
 exports.isColumnOption = isColumnOption;
 exports.isNotNull = isNotNull;
 exports.resolvePlacement = resolvePlacement;
+exports.isLeafMenuOption = isLeafMenuOption;
 const vue_1 = require("vue");
 function renderOptionLabel(option) {
     var _a;
@@ -56,3 +57,6 @@ function resolvePlacement(placement) {
             return placement;
     }
 }
+function isLeafMenuOption(option) {
+    return option.type !== 'column';
+}

package/lib/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.12.8";
+declare const _default: "1.12.10";
 export default _default;

package/lib/version.js

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

package/package.json

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