@uzum-tech/ui 1.13.0 → 1.13.2

package/lib/collapse/src/CollapseItem.js

@@ -3,7 +3,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.collapseItemProps = void 0;
 const vue_1 = require("vue");
 const seemly_1 = require("seemly");
 const vooks_1 = require("vooks");
@@ -14,15 +13,10 @@ const _internal_1 = require("../../_internal");
 const _utils_1 = require("../../_utils");
 const Collapse_1 = require("./Collapse");
 const CollapseItemContent_1 = __importDefault(require("./CollapseItemContent"));
-exports.collapseItemProps = {
-    title: String,
-    name: [String, Number],
-    disabled: Boolean,
-    displayDirective: String
-};
+const collapseItem_props_1 = require("./props/collapseItem.props");
 exports.default = (0, vue_1.defineComponent)({
     name: 'CollapseItem',
-    props: exports.collapseItemProps,
+    props: collapseItem_props_1.collapseItemProps,
     setup(props) {
         const { mergedRtlRef } = (0, _mixins_1.useConfig)(props);
         const randomName = (0, seemly_1.createId)();
@@ -48,12 +42,26 @@ exports.default = (0, vue_1.defineComponent)({
             return true;
         });
         const rtlEnabledRef = (0, use_rtl_1.useRtl)('Collapse', mergedRtlRef, mergedClsPrefixRef);
+        function clickedOn(event, area) {
+            return (0, seemly_1.happensIn)(event, area);
+        }
+        function checkClickedPlace(event) {
+            let clickedPlace = 'main';
+            if (clickedOn(event, 'arrow')) {
+                clickedPlace = 'arrow';
+            }
+            if (clickedOn(event, 'extra')) {
+                clickedPlace = 'extra';
+            }
+            return clickedPlace;
+        }
         return {
             rtlEnabled: rtlEnabledRef,
             collapseSlots,
             randomName,
             mergedClsPrefix: mergedClsPrefixRef,
             collapsed: collapsedRef,
+            triggerAreas: (0, vue_1.toRef)(collapseProps, 'triggerAreas'),
             mergedDisplayDirective: (0, vue_1.computed)(() => {
                 const { displayDirective } = props;
                 if (displayDirective) {
@@ -66,41 +74,44 @@ exports.default = (0, vue_1.defineComponent)({
             arrowPlacement: (0, vue_1.computed)(() => {
                 return collapseProps.arrowPlacement;
             }),
-            handleClick(e) {
-                e.stopPropagation();
+            handleClick(event) {
+                const clickedPlace = checkClickedPlace(event);
+                if (!collapseProps.triggerAreas.includes(clickedPlace)) {
+                    return;
+                }
                 if (UCollapse && !props.disabled) {
-                    UCollapse.toggleItem(collapsedRef.value, mergedNameRef.value, e);
+                    UCollapse.toggleItem(collapsedRef.value, mergedNameRef.value, event);
                 }
             }
         };
     },
     render() {
-        const { collapseSlots, $slots, arrowPlacement, collapsed, mergedDisplayDirective, mergedClsPrefix, disabled } = this;
+        const { collapseSlots, $slots, arrowPlacement, collapsed, mergedDisplayDirective, mergedClsPrefix, disabled, triggerAreas } = this;
         const headerNode = (0, _utils_1.resolveSlotWithProps)($slots.header, { collapsed }, () => [this.title]);
         const headerExtraSlot = $slots['header-extra'] || collapseSlots['header-extra'];
         const arrowSlot = $slots.arrow || collapseSlots.arrow;
-        const arrowNode = ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-collapse-item-arrow`, key: this.rtlEnabled ? 0 : 1 }, (0, _utils_1.resolveSlotWithProps)(arrowSlot, { collapsed }, () => {
-            var _a;
-            return [
-                (0, vue_1.h)(_internal_1.UBaseIcon, { clsPrefix: mergedClsPrefix }, {
-                    default: (_a = collapseSlots.expandIcon) !== null && _a !== void 0 ? _a : (() => this.rtlEnabled ? (0, vue_1.h)(icons_1.ChevronLeftIcon, null) : (0, vue_1.h)(icons_1.ChevronRightIcon, null))
-                })
-            ];
-        })));
+        const arrowNode = ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-collapse-item-arrow`, key: this.rtlEnabled ? 0 : 1, "data-arrow": true }, (0, _utils_1.resolveSlotWithProps)(arrowSlot, { collapsed }, () => [
+            (0, vue_1.h)(_internal_1.UBaseIcon, { clsPrefix: mergedClsPrefix }, {
+                default: () => this.rtlEnabled ? (0, vue_1.h)(icons_1.ChevronLeftIcon, null) : (0, vue_1.h)(icons_1.ChevronRightIcon, null)
+            })
+        ])));
         return ((0, vue_1.h)("div", { class: [
                 `${mergedClsPrefix}-collapse-item`,
                 `${mergedClsPrefix}-collapse-item--${arrowPlacement}-arrow-placement`,
                 disabled && `${mergedClsPrefix}-collapse-item--disabled`,
-                !collapsed && `${mergedClsPrefix}-collapse-item--active`
-            ], onClick: this.handleClick },
+                !collapsed && `${mergedClsPrefix}-collapse-item--active`,
+                triggerAreas.map((area) => {
+                    return `${mergedClsPrefix}-collapse-item--trigger-area-${area}`;
+                })
+            ] },
             (0, vue_1.h)("div", { class: [
                     `${mergedClsPrefix}-collapse-item__header`,
                     !collapsed && `${mergedClsPrefix}-collapse-item__header--active`
-                ] },
+                ], onClick: this.handleClick },
                 (0, vue_1.h)("div", { class: `${mergedClsPrefix}-collapse-item__header-main` },
                     arrowPlacement !== 'right-edge' && arrowNode,
                     headerNode),
-                (0, _utils_1.resolveWrappedSlotWithProps)(headerExtraSlot, { collapsed }, (children) => ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-collapse-item__header-extra`, onClick: this.handleClick }, children))),
+                (0, _utils_1.resolveWrappedSlotWithProps)(headerExtraSlot, { collapsed }, (children) => ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-collapse-item__header-extra`, "data-extra": true }, children))),
                 arrowPlacement === 'right-edge' && arrowNode),
             (0, vue_1.h)(CollapseItemContent_1.default, { clsPrefix: mergedClsPrefix, displayDirective: mergedDisplayDirective, show: !collapsed }, $slots)));
     }

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

@@ -1,10 +1 @@
-export type OnUpdateExpandedNames = <T extends string[] & number[] & Array<string | number> & (string | number | null) & (string | null) & (number | null)>(value: T) => void;
-export type OnUpdateExpandedNamesImpl = <T extends string[] | number[] | Array<string | number> | (string | number | null) | (string | null) | (number | null)>(value: T) => void;
-export type OnItemHeaderClick = <T extends string & number & (string | number)>(info: HeaderClickInfo<T>) => void;
-export type OnItemHeaderClickImpl = <T extends string | number | (string | number)>(info: HeaderClickInfo<T>) => void;
-export interface HeaderClickInfo<T> {
-    name: T;
-    expanded: boolean;
-    event: MouseEvent;
-}
-export type ArrowPlacement = 'left' | 'right' | 'right-edge';
+export type { ArrowPlacement, CollapseArrowSlotProps, CollapseExpandedName, CollapseExpandedNames, CollapseItemProps, CollapseItemSlots, CollapseItemArrowSlotProps, CollapseItemHeaderExtraSlotProps, CollapseItemHeaderSlotProps, CollapseProps, CollapseSlots, CollapseTriggerArea, HeaderClickInfo, OnItemHeaderClick, OnItemHeaderClickImpl, OnUpdateExpandedNames, OnUpdateExpandedNamesImpl, UCollapseInjection } from './types/collapse.types';

package/lib/collapse/src/props/collapse.props.d.ts

@@ -0,0 +1,100 @@
+import type { PropType } from 'vue';
+import type { MaybeArray } from '../../../_utils';
+import type { ArrowPlacement, CollapseTriggerArea, OnItemHeaderClick, OnUpdateExpandedNames } from '../types/collapse.types';
+export declare const collapseProps: {
+    readonly defaultExpandedNames: {
+        readonly type: PropType<string | number | Array<string | number> | null>;
+        readonly default: null;
+    };
+    readonly expandedNames: PropType<string | number | Array<string | number> | null>;
+    readonly arrowPlacement: {
+        readonly type: PropType<ArrowPlacement>;
+        readonly default: "right-edge";
+    };
+    readonly accordion: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly displayDirective: {
+        readonly type: PropType<"if" | "show">;
+        readonly default: "if";
+    };
+    readonly triggerAreas: {
+        readonly type: PropType<CollapseTriggerArea[]>;
+        readonly default: () => string[];
+    };
+    readonly onItemHeaderClick: PropType<MaybeArray<OnItemHeaderClick>>;
+    readonly 'onUpdate:expandedNames': PropType<MaybeArray<OnUpdateExpandedNames>>;
+    readonly onUpdateExpandedNames: PropType<MaybeArray<OnUpdateExpandedNames>>;
+    readonly onExpandedNamesChange: {
+        readonly type: PropType<MaybeArray<OnUpdateExpandedNames> | undefined>;
+        readonly validator: () => boolean;
+        readonly default: undefined;
+    };
+    readonly theme: PropType<import("../../../_mixins").Theme<"Collapse", {
+        titleFontSize: string;
+        titleLineHeight: string;
+        titleFontWeight: string;
+        dividerColor: string;
+        titleTextColor: string;
+        titleTextColorDisabled: string;
+        fontSize: string;
+        lineHeight: string;
+        textColor: string;
+        arrowSize: string;
+        arrowColor: string;
+        arrowColorDisabled: string;
+        titlePadding: string;
+        backgroundColor: string;
+        borderRadius: string;
+        padding: string;
+        boxSizing: string;
+        iconBorder: string;
+        iconBorderRadius: string;
+        iconBackground: string;
+    }, any>>;
+    readonly themeOverrides: PropType<import("../../../_mixins/use-theme").ExtractThemeOverrides<import("../../../_mixins").Theme<"Collapse", {
+        titleFontSize: string;
+        titleLineHeight: string;
+        titleFontWeight: string;
+        dividerColor: string;
+        titleTextColor: string;
+        titleTextColorDisabled: string;
+        fontSize: string;
+        lineHeight: string;
+        textColor: string;
+        arrowSize: string;
+        arrowColor: string;
+        arrowColorDisabled: string;
+        titlePadding: string;
+        backgroundColor: string;
+        borderRadius: string;
+        padding: string;
+        boxSizing: string;
+        iconBorder: string;
+        iconBorderRadius: string;
+        iconBackground: string;
+    }, any>>>;
+    readonly builtinThemeOverrides: PropType<import("../../../_mixins/use-theme").ExtractThemeOverrides<import("../../../_mixins").Theme<"Collapse", {
+        titleFontSize: string;
+        titleLineHeight: string;
+        titleFontWeight: string;
+        dividerColor: string;
+        titleTextColor: string;
+        titleTextColorDisabled: string;
+        fontSize: string;
+        lineHeight: string;
+        textColor: string;
+        arrowSize: string;
+        arrowColor: string;
+        arrowColorDisabled: string;
+        titlePadding: string;
+        backgroundColor: string;
+        borderRadius: string;
+        padding: string;
+        boxSizing: string;
+        iconBorder: string;
+        iconBorderRadius: string;
+        iconBackground: string;
+    }, any>>>;
+};

package/lib/collapse/src/props/collapse.props.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.collapseProps = void 0;
+const _mixins_1 = require("../../../_mixins");
+const _utils_1 = require("../../../_utils");
+exports.collapseProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { defaultExpandedNames: {
+        type: [Array, String],
+        default: null
+    }, expandedNames: [Array, String], arrowPlacement: {
+        type: String,
+        default: 'right-edge'
+    }, accordion: {
+        type: Boolean,
+        default: false
+    }, displayDirective: {
+        type: String,
+        default: 'if'
+    }, triggerAreas: {
+        type: Array,
+        default: () => ['main', 'extra', 'arrow']
+    }, onItemHeaderClick: [Function, Array], 'onUpdate:expandedNames': [Function, Array], onUpdateExpandedNames: [Function, Array], 
+    // deprecated
+    onExpandedNamesChange: {
+        type: [Function, Array],
+        validator: () => {
+            if (process.env.NODE_ENV !== 'production') {
+                (0, _utils_1.warn)('collapse', '`on-expanded-names-change` is deprecated, please use `on-update:expanded-names` instead.');
+            }
+            return true;
+        },
+        default: undefined
+    } });

package/lib/collapse/src/props/collapseItem.props.d.ts

@@ -0,0 +1,7 @@
+import type { PropType } from 'vue';
+export declare const collapseItemProps: {
+    readonly title: StringConstructor;
+    readonly name: PropType<string | number>;
+    readonly disabled: BooleanConstructor;
+    readonly displayDirective: PropType<"if" | "show">;
+};

package/lib/collapse/src/props/collapseItem.props.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.collapseItemProps = void 0;
+exports.collapseItemProps = {
+    title: String,
+    name: [String, Number],
+    disabled: Boolean,
+    displayDirective: String
+};

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

@@ -21,6 +21,9 @@ const fade_in_height_expand_cssr_1 = require("../../../_styles/transitions/fade-
 // --u-border-radius
 // --u-padding
 // --u-box-sizing
+// --u-icon-border
+// --u-icon-border-radius
+// --u-icon-background
 exports.default = (0, cssr_1.cB)('collapse', `
  width: 100%;
  background-color: var(--u-background-color);
@@ -49,8 +52,9 @@ exports.default = (0, cssr_1.cB)('collapse', `
  height: 28px;
  justify-content: center;
  align-items: center;
- border-radius: 100px;
- background: #F3F4F6;
+ border: var(--u-icon-border);
+ border-radius: var(--u-icon-border-radius);
+ background: var(--u-icon-background);
  `, [(0, cssr_1.cB)('base-icon', `
  transform: scaleY(1) rotate(90deg);
  transition:

package/lib/collapse/src/types/collapse.types.d.ts

@@ -0,0 +1,55 @@
+import type { Ref, VNode } from 'vue';
+import type { ExtractPublicPropTypes } from '../../../_utils';
+import { collapseItemProps } from '../props/collapseItem.props';
+import { collapseProps } from '../props/collapse.props';
+export type CollapseTriggerArea = 'main' | 'extra' | 'arrow';
+export type CollapseExpandedName = string | number;
+export type CollapseExpandedNames = CollapseExpandedName | CollapseExpandedName[] | null;
+export type OnUpdateExpandedNames = <T extends string[] & number[] & Array<string | number> & (string | number | null) & (string | null) & (number | null)>(value: T) => void;
+export type OnUpdateExpandedNamesImpl = <T extends string[] | number[] | Array<string | number> | (string | number | null) | (string | null) | (number | null)>(value: T) => void;
+export type OnItemHeaderClick = <T extends string & number & (string | number)>(info: HeaderClickInfo<T>) => void;
+export type OnItemHeaderClickImpl = <T extends string | number | (string | number)>(info: HeaderClickInfo<T>) => void;
+export interface HeaderClickInfo<T> {
+    name: T;
+    expanded: boolean;
+    event: MouseEvent;
+}
+export type ArrowPlacement = 'left' | 'right' | 'right-edge';
+export interface CollapseArrowSlotProps {
+    collapsed: boolean;
+}
+export interface CollapseItemHeaderSlotProps {
+    collapsed: boolean;
+}
+export interface CollapseItemHeaderExtraSlotProps {
+    collapsed: boolean;
+}
+export interface CollapseItemArrowSlotProps {
+    collapsed: boolean;
+}
+export interface CollapseSlots {
+    default?: () => VNode[];
+    arrow?: (props: CollapseArrowSlotProps) => VNode[];
+    header?: (props: CollapseItemHeaderSlotProps) => VNode[];
+    'header-extra'?: (props: CollapseItemHeaderExtraSlotProps) => VNode[];
+}
+export interface CollapseItemSlots {
+    default?: () => VNode[];
+    header?: (props: CollapseItemHeaderSlotProps) => VNode[];
+    'header-extra'?: (props: CollapseItemHeaderExtraSlotProps) => VNode[];
+    arrow?: (props: CollapseItemArrowSlotProps) => VNode[];
+}
+export interface UCollapseInjectionProps {
+    triggerAreas: CollapseTriggerArea[];
+    displayDirective: 'if' | 'show';
+    arrowPlacement: ArrowPlacement;
+}
+export interface UCollapseInjection {
+    props: UCollapseInjectionProps;
+    expandedNamesRef: Ref<CollapseExpandedNames>;
+    mergedClsPrefixRef: Ref<string>;
+    slots: CollapseSlots;
+    toggleItem: (collapse: boolean, name: CollapseExpandedName, event: MouseEvent) => void;
+}
+export type CollapseProps = ExtractPublicPropTypes<typeof collapseProps>;
+export type CollapseItemProps = ExtractPublicPropTypes<typeof collapseItemProps>;

package/lib/collapse/src/types/collapse.types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/collapse/styles/light.d.ts

@@ -18,6 +18,9 @@ export declare const self: (vars: ThemeCommonVars) => {
     borderRadius: string;
     padding: string;
     boxSizing: string;
+    iconBorder: string;
+    iconBorderRadius: string;
+    iconBackground: string;
 };
 export type CollapseThemeVars = ReturnType<typeof self>;
 declare const collapseLight: Theme<'Collapse', CollapseThemeVars>;

package/lib/collapse/styles/light.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.self = void 0;
 const common_1 = require("../../_styles/common");
 const self = (vars) => {
-    const { fontWeight, fontBodyLarge, lineHeightBodyLarge, elementsQuaternary, textPrimary, textSecondary, fontBodyMedium, lineHeightBodyMedium, iconSmall, containerPrimary } = vars;
+    const { fontWeight, fontBodyLarge, lineHeightBodyLarge, elementsQuaternary, textPrimary, textSecondary, fontBodyMedium, lineHeightBodyMedium, iconSmall, containerPrimary, elementsTertiary } = vars;
     return {
         titleFontSize: fontBodyLarge,
         titleLineHeight: lineHeightBodyLarge,
@@ -21,7 +21,10 @@ const self = (vars) => {
         backgroundColor: containerPrimary,
         borderRadius: '20px',
         padding: '24px',
-        boxSizing: 'border-box'
+        boxSizing: 'border-box',
+        iconBorder: 'none',
+        iconBorderRadius: '100px',
+        iconBackground: elementsTertiary
     };
 };
 exports.self = self;

package/lib/dropdown/src/Dropdown.d.ts

@@ -1109,6 +1109,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly trigger: import("../../popover").PopoverTrigger;
     readonly labelField: string;
     readonly childrenField: string;
+    readonly arrow: boolean | undefined;
     readonly displayDirective: "show" | "if";
     readonly defaultShow: boolean;
     readonly animated: boolean;
@@ -1126,6 +1127,5 @@ declare const _default: import("vue").DefineComponent<{
     readonly internalInheritedEventHandlers: import("../../popover/src/Popover").TriggerEventHandlers[];
     readonly internalTrapFocus: boolean;
     readonly internalExtraClass: string[];
-    readonly arrow: boolean | undefined;
 }, {}>;
 export default _default;

package/lib/icon-bar/index.d.ts

@@ -1,4 +1,4 @@
-export { default as UIconBar, iconBarProps } from './src/IconBar';
-export type { IconBarProps } from './src/IconBar';
-export { default as UIconBarItem, iconBarItemProps } from './src/IconBarItem';
-export type { IconBarItemProps } from './src/IconBarItem';
+export { default as UIconBar } from './src/IconBar';
+export { default as UIconBarItem } from './src/IconBarItem';
+export { iconBarProps, iconBarItemProps } from './src/interface';
+export type { IconBarProps, IconBarItemProps } from './src/interface';

package/lib/icon-bar/index.js

@@ -3,10 +3,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.iconBarItemProps = exports.UIconBarItem = exports.iconBarProps = exports.UIconBar = void 0;
+exports.iconBarItemProps = exports.iconBarProps = exports.UIconBarItem = exports.UIconBar = void 0;
 var IconBar_1 = require("./src/IconBar");
 Object.defineProperty(exports, "UIconBar", { enumerable: true, get: function () { return __importDefault(IconBar_1).default; } });
-Object.defineProperty(exports, "iconBarProps", { enumerable: true, get: function () { return IconBar_1.iconBarProps; } });
 var IconBarItem_1 = require("./src/IconBarItem");
 Object.defineProperty(exports, "UIconBarItem", { enumerable: true, get: function () { return __importDefault(IconBarItem_1).default; } });
-Object.defineProperty(exports, "iconBarItemProps", { enumerable: true, get: function () { return IconBarItem_1.iconBarItemProps; } });
+var interface_1 = require("./src/interface");
+Object.defineProperty(exports, "iconBarProps", { enumerable: true, get: function () { return interface_1.iconBarProps; } });
+Object.defineProperty(exports, "iconBarItemProps", { enumerable: true, get: function () { return interface_1.iconBarItemProps; } });

package/lib/icon-bar/src/IconBar.d.ts

@@ -1,63 +1,7 @@
-import { ExtractPublicPropTypes, PropType } from 'vue';
-import { IconBarItemProps } from './IconBarItem';
-import { GridProps } from '../../grid';
-export declare const iconBarProps: {
-    readonly items: {
-        readonly type: PropType<IconBarItemProps[]>;
-        readonly default: () => never[];
-    };
-    readonly cols: {
-        readonly type: NumberConstructor;
-        readonly default: 6;
-    };
-    readonly gridProps: {
-        readonly type: PropType<Partial<GridProps>>;
-    };
-    readonly itemSize: PropType<number | string>;
-    readonly theme: PropType<import("../../_mixins").Theme<"IconBar", {
-        itemSize: string;
-        color: string;
-        colorHover: string;
-        itemGap: string;
-        iconSize: string;
-        labelColor: string;
-        labelSizeHover: string;
-        labelColorHover: string;
-        boxShadow: string;
-        span: number;
-        cols: number;
-    }, any>>;
-    readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"IconBar", {
-        itemSize: string;
-        color: string;
-        colorHover: string;
-        itemGap: string;
-        iconSize: string;
-        labelColor: string;
-        labelSizeHover: string;
-        labelColorHover: string;
-        boxShadow: string;
-        span: number;
-        cols: number;
-    }, any>>>;
-    readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"IconBar", {
-        itemSize: string;
-        color: string;
-        colorHover: string;
-        itemGap: string;
-        iconSize: string;
-        labelColor: string;
-        labelSizeHover: string;
-        labelColorHover: string;
-        boxShadow: string;
-        span: number;
-        cols: number;
-    }, any>>>;
-};
-export type IconBarProps = ExtractPublicPropTypes<typeof iconBarProps>;
+import { IconBarItemProps } from './interface';
 declare const _default: import("vue").DefineComponent<{
     readonly items: {
-        readonly type: PropType<IconBarItemProps[]>;
+        readonly type: import("vue").PropType<IconBarItemProps[]>;
         readonly default: () => never[];
     };
     readonly cols: {
@@ -65,10 +9,13 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: 6;
     };
     readonly gridProps: {
-        readonly type: PropType<Partial<GridProps>>;
+        readonly type: import("vue").PropType<Partial<import("../../grid").GridProps>>;
     };
-    readonly itemSize: PropType<number | string>;
-    readonly theme: PropType<import("../../_mixins").Theme<"IconBar", {
+    readonly typographyProps: {
+        readonly type: import("vue").PropType<Partial<import("../..").TextProps>>;
+    };
+    readonly itemSize: import("vue").PropType<number | string>;
+    readonly theme: import("vue").PropType<import("../../_mixins").Theme<"IconBar", {
         itemSize: string;
         color: string;
         colorHover: string;
@@ -81,7 +28,7 @@ declare const _default: import("vue").DefineComponent<{
         span: number;
         cols: number;
     }, any>>;
-    readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"IconBar", {
+    readonly themeOverrides: import("vue").PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"IconBar", {
         itemSize: string;
         color: string;
         colorHover: string;
@@ -94,7 +41,7 @@ declare const _default: import("vue").DefineComponent<{
         span: number;
         cols: number;
     }, any>>>;
-    readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"IconBar", {
+    readonly builtinThemeOverrides: import("vue").PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"IconBar", {
         itemSize: string;
         color: string;
         colorHover: string;
@@ -118,7 +65,7 @@ declare const _default: import("vue").DefineComponent<{
     onRender: (() => void) | undefined;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     readonly items: {
-        readonly type: PropType<IconBarItemProps[]>;
+        readonly type: import("vue").PropType<IconBarItemProps[]>;
         readonly default: () => never[];
     };
     readonly cols: {
@@ -126,10 +73,13 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: 6;
     };
     readonly gridProps: {
-        readonly type: PropType<Partial<GridProps>>;
+        readonly type: import("vue").PropType<Partial<import("../../grid").GridProps>>;
+    };
+    readonly typographyProps: {
+        readonly type: import("vue").PropType<Partial<import("../..").TextProps>>;
     };
-    readonly itemSize: PropType<number | string>;
-    readonly theme: PropType<import("../../_mixins").Theme<"IconBar", {
+    readonly itemSize: import("vue").PropType<number | string>;
+    readonly theme: import("vue").PropType<import("../../_mixins").Theme<"IconBar", {
         itemSize: string;
         color: string;
         colorHover: string;
@@ -142,7 +92,7 @@ declare const _default: import("vue").DefineComponent<{
         span: number;
         cols: number;
     }, any>>;
-    readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"IconBar", {
+    readonly themeOverrides: import("vue").PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"IconBar", {
         itemSize: string;
         color: string;
         colorHover: string;
@@ -155,7 +105,7 @@ declare const _default: import("vue").DefineComponent<{
         span: number;
         cols: number;
     }, any>>>;
-    readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"IconBar", {
+    readonly builtinThemeOverrides: import("vue").PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"IconBar", {
         itemSize: string;
         color: string;
         colorHover: string;

package/lib/icon-bar/src/IconBar.js

@@ -3,28 +3,22 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.iconBarProps = void 0;
 const vue_1 = require("vue");
 const _mixins_1 = require("../../_mixins");
 const styles_1 = require("../styles");
 const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
-const IconBarItem_1 = __importDefault(require("./IconBarItem"));
 const grid_1 = require("../../grid");
 const _utils_1 = require("../../_utils");
-exports.iconBarProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { items: {
-        type: Array,
-        default: () => []
-    }, cols: {
-        type: Number,
-        default: 6
-    }, gridProps: {
-        type: Object
-    }, itemSize: [Number, String] });
+const interface_1 = require("./interface");
+const IconBarItem_1 = __importDefault(require("./IconBarItem"));
 exports.default = (0, vue_1.defineComponent)({
     name: 'IconBar',
-    props: exports.iconBarProps,
+    props: interface_1.iconBarProps,
     setup(props, { slots }) {
         const { mergedClsPrefixRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
+        (0, vue_1.provide)(interface_1.iconBarInjectionKey, {
+            typographyPropsRef: (0, vue_1.toRef)(props, 'typographyProps')
+        });
         const themeRef = (0, _mixins_1.useTheme)('IconBar', '-icon-bar', index_cssr_1.default, styles_1.iconBarLight, props, mergedClsPrefixRef);
         const cssVarsRef = (0, vue_1.computed)(() => {
             const { self: { itemSize } } = themeRef.value;