@uzum-tech/ui 1.12.22 → 1.13.1

package/lib/_styles/common/dark.js

@@ -4,6 +4,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const _common_1 = __importDefault(require("./_common"));
-const derived = Object.assign(Object.assign({ name: 'common' }, _common_1.default), { scrollbarColor: 'rgba(255, 255, 255, 0.25)', scrollbarColorHover: 'rgba(255, 255, 255, 0.4)', scrollbarWidth: '5px', scrollbarHeight: '5px', scrollbarBorderRadius: '5px', opacityDisabled: '0.5', brand150: '#FFF3D3', brand350: '#F1F9DF', brand550: '#FFF3F4', brandPrimary50: '#2B204E', brandPrimary100: '#412A89', brandPrimary200: '#6A40ED', brandPrimary300: '#BBA2FD', brandPrimary400: '#7748F1', brandPrimary500: '#8967F1', brandPrimary550: '#6607DF', brandPrimary600: '#5D46A6', brandSecondary400: '#FFF8E3', brandSecondary500: '#FFFF54', brandSecondary300: '#FDF5A6', brandSecondary600: '#F9DE6D', brandTertiary500: '#C4ED70', brandTertiary300: '#DCF0AF', brandTertiary600: '#9DED70', brandQuaternary500: '#90DDFB', brandQuaternary300: '#C5ECFD', brandQuaternary600: '#54B8F9', brandQuinary500: '#EC616A', brandQuinary300: '#F19EDA', brandQuinary600: '#EA3E68', brandQuinary100: '#FAD6D9', surfacePrimary: '#101010', surfaceSecondary: '#1D1D1D', containerPrimary: '#1D1D1D', containerSecondary: '#313135', textPrimary: '#F3F4F6', textSecondary: '#808080', textTertiary: '#999999', textQuaternary: '#101010', textBrand: '#F3F4F6', elementsPrimary: '#F3F4F6', elementsSecondary: '#101010', elementsTertiary: '#222222', elementsQuaternary: '#424247', elementsQuinary: '#707479', elementsDarkQuinary: '#919396', elementsSenary: '#DFDFDF', elementsOnContainer: '#101010', transparencyPrimary: 'rgba(255, 255, 255, 0.1)', transparencySecondary: 'rgba(255, 255, 255, 0.07)', transparencyTertiary: 'rgba(255, 255, 255, 0.16)', transparencyQuinary: 'rgba(255, 255, 255, 0.32)', transparencyModal: 'rgba(0, 0, 0, 0.75)', staticBlack: '#101010', staticDarkGrey: '#2C2C2D', staticWhite: '#FFFFFF', staticRed: '#F24835', staticOrange: '#F48C2C', staticGreen: '#09B849', staticDeepBlue: '#2F53CD', staticErrorAccent: '#CB0000', shadowDepth2: '0 0 0 1px #424247', shadowDepth: '0px 8px 8px 0px rgba(255, 255, 255, 0.25)' // В дизайне тень вообще отсутствует, пока что пусть побудет визуально как border
+const derived = Object.assign(Object.assign({ name: 'common' }, _common_1.default), { scrollbarColor: 'rgba(255, 255, 255, 0.25)', scrollbarColorHover: 'rgba(255, 255, 255, 0.4)', scrollbarWidth: '5px', scrollbarHeight: '5px', scrollbarBorderRadius: '5px', opacityDisabled: '0.5', brand150: '#FFF3D3', brand350: '#F1F9DF', brand550: '#FFF3F4', brandPrimary10: '#F3F2F9', brandPrimary50: '#2B204E', brandPrimary100: '#412A89', brandPrimary200: '#6A40ED', brandPrimary300: '#BBA2FD', brandPrimary400: '#7748F1', brandPrimary500: '#8967F1', brandPrimary550: '#6607DF', brandPrimary600: '#5D46A6', brandSecondary400: '#FFF8E3', brandSecondary500: '#FFFF54', brandSecondary300: '#FDF5A6', brandSecondary600: '#F9DE6D', brandTertiary500: '#C4ED70', brandTertiary300: '#DCF0AF', brandTertiary600: '#9DED70', brandQuaternary500: '#90DDFB', brandQuaternary300: '#C5ECFD', brandQuaternary600: '#54B8F9', brandQuinary500: '#EC616A', brandQuinary300: '#F19EDA', brandQuinary600: '#EA3E68', brandQuinary100: '#FAD6D9', surfacePrimary: '#101010', surfaceSecondary: '#1D1D1D', containerPrimary: '#1D1D1D', containerSecondary: '#313135', textPrimary: '#F3F4F6', textSecondary: '#808080', textTertiary: '#999999', textQuaternary: '#101010', textBrand: '#F3F4F6', elementsPrimary: '#F3F4F6', elementsSecondary: '#101010', elementsTertiary: '#222222', elementsQuaternary: '#424247', elementsQuinary: '#707479', elementsDarkQuinary: '#919396', elementsSenary: '#DFDFDF', elementsOnContainer: '#101010', transparencyPrimary: 'rgba(255, 255, 255, 0.1)', transparencySecondary: 'rgba(255, 255, 255, 0.07)', transparencyTertiary: 'rgba(255, 255, 255, 0.16)', transparencyQuinary: 'rgba(255, 255, 255, 0.32)', transparencyModal: 'rgba(0, 0, 0, 0.75)', staticBlack: '#101010', staticDarkGrey: '#2C2C2D', staticWhite: '#FFFFFF', staticRed: '#F24835', staticOrange: '#F48C2C', staticGreen: '#09B849', staticDeepBlue: '#2F53CD', staticErrorAccent: '#CB0000', shadowDepth2: '0 0 0 1px #424247', shadowDepth: '0px 8px 8px 0px rgba(255, 255, 255, 0.25)' // В дизайне тень вообще отсутствует, пока что пусть побудет визуально как border
  });
 exports.default = derived;

package/lib/_styles/common/light.d.ts

@@ -8,6 +8,7 @@ declare const derived: {
     brand150: string;
     brand350: string;
     brand550: string;
+    brandPrimary10: string;
     brandPrimary50: string;
     brandPrimary100: string;
     brandPrimary200: string;

package/lib/_styles/common/light.js

@@ -4,5 +4,5 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const _common_1 = __importDefault(require("./_common"));
-const derived = Object.assign(Object.assign({ name: 'common' }, _common_1.default), { scrollbarColor: 'rgba(0, 0, 0, 0.25)', scrollbarColorHover: 'rgba(0, 0, 0, 0.4)', scrollbarWidth: '5px', scrollbarHeight: '5px', scrollbarBorderRadius: '5px', opacityDisabled: '0.5', brand150: '#FFF3D3', brand350: '#F1F9DF', brand550: '#FFF3F4', brandPrimary50: '#F8F2FF', brandPrimary100: '#EAE2FF', brandPrimary200: '#DACCFF', brandPrimary300: '#BBA2FD', brandPrimary400: '#7748F1', brandPrimary500: '#7000FF', brandPrimary550: '#6607DF', brandPrimary600: '#5B34C1', brandSecondary400: '#FFF8E3', brandSecondary500: '#FFFF54', brandSecondary300: '#FDF5A6', brandSecondary600: '#F9DE6D', brandTertiary500: '#C4ED70', brandTertiary300: '#DCF0AF', brandTertiary600: '#9DED70', brandQuaternary500: '#90DDFB', brandQuaternary300: '#C5ECFD', brandQuaternary600: '#54B8F9', brandQuinary500: '#EC616A', brandQuinary300: '#F19EDA', brandQuinary600: '#EA3E68', brandQuinary100: '#FAD6D9', surfacePrimary: '#fff', surfaceSecondary: '#1d1d1d', containerPrimary: '#fff', containerSecondary: '#F3F4F6', textPrimary: '#101010', textSecondary: '#808080', textTertiary: '#999999', textQuaternary: '#FFFFFF', textBrand: '#7000FF', elementsPrimary: '#101010', elementsSecondary: '#fff', elementsTertiary: '#F3F4F6', elementsQuaternary: '#E7E8EA', elementsQuinary: '#C5C7CA', elementsDarkQuinary: '#919396', elementsSenary: '#4E4D4D', elementsOnContainer: '#fff', transparencyPrimary: 'rgba(0, 0, 0, 0.35)', transparencySecondary: 'rgba(0, 0, 0, 0.07)', transparencyTertiary: 'rgba(255, 255, 255, 0.16)', transparencyQuinary: 'rgba(255, 255, 255, 0.32)', transparencyModal: 'rgba(0, 0, 0, 0.40)', staticBlack: '#101010', staticDarkGrey: '#2C2C2D', staticWhite: '#FFFFFF', staticRed: '#F24835', staticOrange: '#F48C2C', staticGreen: '#09B849', staticDeepBlue: '#2F53CD', staticErrorAccent: '#CB0000', shadowDepth2: '0px 20px 80px 0px rgba(0, 0, 0, 0.07)', shadowDepth: '0px 8px 8px 0px rgba(0, 0, 0, 0.25)' });
+const derived = Object.assign(Object.assign({ name: 'common' }, _common_1.default), { scrollbarColor: 'rgba(0, 0, 0, 0.25)', scrollbarColorHover: 'rgba(0, 0, 0, 0.4)', scrollbarWidth: '5px', scrollbarHeight: '5px', scrollbarBorderRadius: '5px', opacityDisabled: '0.5', brand150: '#FFF3D3', brand350: '#F1F9DF', brand550: '#FFF3F4', brandPrimary10: '#F3F2F9', brandPrimary50: '#F8F2FF', brandPrimary100: '#EAE2FF', brandPrimary200: '#DACCFF', brandPrimary300: '#BBA2FD', brandPrimary400: '#7748F1', brandPrimary500: '#7000FF', brandPrimary550: '#6607DF', brandPrimary600: '#5B34C1', brandSecondary400: '#FFF8E3', brandSecondary500: '#FFFF54', brandSecondary300: '#FDF5A6', brandSecondary600: '#F9DE6D', brandTertiary500: '#C4ED70', brandTertiary300: '#DCF0AF', brandTertiary600: '#9DED70', brandQuaternary500: '#90DDFB', brandQuaternary300: '#C5ECFD', brandQuaternary600: '#54B8F9', brandQuinary500: '#EC616A', brandQuinary300: '#F19EDA', brandQuinary600: '#EA3E68', brandQuinary100: '#FAD6D9', surfacePrimary: '#fff', surfaceSecondary: '#1d1d1d', containerPrimary: '#fff', containerSecondary: '#F3F4F6', textPrimary: '#101010', textSecondary: '#808080', textTertiary: '#999999', textQuaternary: '#FFFFFF', textBrand: '#7000FF', elementsPrimary: '#101010', elementsSecondary: '#fff', elementsTertiary: '#F3F4F6', elementsQuaternary: '#E7E8EA', elementsQuinary: '#C5C7CA', elementsDarkQuinary: '#919396', elementsSenary: '#4E4D4D', elementsOnContainer: '#fff', transparencyPrimary: 'rgba(0, 0, 0, 0.35)', transparencySecondary: 'rgba(0, 0, 0, 0.07)', transparencyTertiary: 'rgba(255, 255, 255, 0.16)', transparencyQuinary: 'rgba(255, 255, 255, 0.32)', transparencyModal: 'rgba(0, 0, 0, 0.40)', staticBlack: '#101010', staticDarkGrey: '#2C2C2D', staticWhite: '#FFFFFF', staticRed: '#F24835', staticOrange: '#F48C2C', staticGreen: '#09B849', staticDeepBlue: '#2F53CD', staticErrorAccent: '#CB0000', shadowDepth2: '0px 20px 80px 0px rgba(0, 0, 0, 0.07)', shadowDepth: '0px 8px 8px 0px rgba(0, 0, 0, 0.25)' });
 exports.default = derived;

package/lib/chat/src/ChatMessages.js

@@ -214,7 +214,12 @@ exports.default = (0, vue_1.defineComponent)({
                         ? `${mergedClsPrefixRef.value}-chat-main__message--own`
                         : `${mergedClsPrefixRef.value}-chat-main__message--other`
                 ] },
-                (0, vue_1.h)("div", { class: `${mergedClsPrefixRef.value}-chat-main__message-wrapper` },
+                (0, vue_1.h)("div", { class: [
+                        `${mergedClsPrefixRef.value}-chat-main__message-wrapper`,
+                        isOwn
+                            ? `${mergedClsPrefixRef.value}-chat-main__message-wrapper--own`
+                            : `${mergedClsPrefixRef.value}-chat-main__message-wrapper--other`
+                    ] },
                     hasBubbleActionsSlot ? ((0, vue_1.h)("div", { onContextmenu: (e) => {
                             e.preventDefault();
                             contextMenuShow.value = false;

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

@@ -229,7 +229,11 @@ exports.default = (0, cssr_1.cB)('chat', `
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
- `), (0, cssr_1.cE)('message-bubble', `
+ `, [(0, cssr_1.cM)('own', `
+ align-items: flex-end;
+ `), (0, cssr_1.cM)('other', `
+ align-items: flex-start;
+ `)]), (0, cssr_1.cE)('message-bubble', `
  border-radius: 18px;
  font-size: 14px;
  line-height: 20px;

package/lib/collapse/index.d.ts

@@ -1,4 +1,5 @@
-export { default as UCollapse, collapseProps } from './src/Collapse';
-export { default as UCollapseItem, collapseItemProps } from './src/CollapseItem';
-export type { CollapseProps } from './src/Collapse';
-export type { CollapseItemProps } from './src/CollapseItem';
+export { collapseProps } from './src/props/collapse.props';
+export { default as UCollapse } from './src/Collapse';
+export { collapseItemProps } from './src/props/collapseItem.props';
+export { default as UCollapseItem } from './src/CollapseItem';
+export type { CollapseProps, CollapseSlots, CollapseItemProps, CollapseItemSlots, ArrowPlacement, CollapseArrowSlotProps, CollapseExpandedName, CollapseExpandedNames, CollapseItemArrowSlotProps, CollapseItemHeaderExtraSlotProps, CollapseItemHeaderSlotProps, CollapseTriggerArea, HeaderClickInfo, OnItemHeaderClick, OnItemHeaderClickImpl, OnUpdateExpandedNames, OnUpdateExpandedNamesImpl, UCollapseInjection } from './src/interface';

package/lib/collapse/index.js

@@ -3,10 +3,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.collapseItemProps = exports.UCollapseItem = exports.collapseProps = exports.UCollapse = void 0;
+exports.UCollapseItem = exports.collapseItemProps = exports.UCollapse = exports.collapseProps = void 0;
+var collapse_props_1 = require("./src/props/collapse.props");
+Object.defineProperty(exports, "collapseProps", { enumerable: true, get: function () { return collapse_props_1.collapseProps; } });
 var Collapse_1 = require("./src/Collapse");
 Object.defineProperty(exports, "UCollapse", { enumerable: true, get: function () { return __importDefault(Collapse_1).default; } });
-Object.defineProperty(exports, "collapseProps", { enumerable: true, get: function () { return Collapse_1.collapseProps; } });
+var collapseItem_props_1 = require("./src/props/collapseItem.props");
+Object.defineProperty(exports, "collapseItemProps", { enumerable: true, get: function () { return collapseItem_props_1.collapseItemProps; } });
 var CollapseItem_1 = require("./src/CollapseItem");
 Object.defineProperty(exports, "UCollapseItem", { enumerable: true, get: function () { return __importDefault(CollapseItem_1).default; } });
-Object.defineProperty(exports, "collapseItemProps", { enumerable: true, get: function () { return CollapseItem_1.collapseItemProps; } });

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

@@ -1,107 +1,13 @@
-import { type PropType, type Ref, type ExtractPropTypes, type Slots } from 'vue';
-import type { MaybeArray, ExtractPublicPropTypes } from '../../_utils';
-import type { OnItemHeaderClick, OnUpdateExpandedNames, ArrowPlacement } from './interface';
-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 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;
-    }, 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;
-    }, 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;
-    }, any>>>;
-};
-export type CollapseProps = ExtractPublicPropTypes<typeof collapseProps>;
-export interface UCollapseInjection {
-    props: ExtractPropTypes<typeof collapseProps>;
-    expandedNamesRef: Ref<string | number | Array<string | number> | null>;
-    mergedClsPrefixRef: Ref<string>;
-    slots: Slots;
-    toggleItem: (collapse: boolean, name: string | number, event: MouseEvent) => void;
-}
+import type { UCollapseInjection } from './types/collapse.types';
 export declare const collapseInjectionKey: import("vue").InjectionKey<UCollapseInjection>;
 declare const _default: import("vue").DefineComponent<{
     readonly defaultExpandedNames: {
-        readonly type: PropType<string | number | Array<string | number> | null>;
+        readonly type: import("vue").PropType<string | number | Array<string | number> | null>;
         readonly default: null;
     };
-    readonly expandedNames: PropType<string | number | Array<string | number> | null>;
+    readonly expandedNames: import("vue").PropType<string | number | Array<string | number> | null>;
     readonly arrowPlacement: {
-        readonly type: PropType<ArrowPlacement>;
+        readonly type: import("vue").PropType<import("./types/collapse.types").ArrowPlacement>;
         readonly default: "right-edge";
     };
     readonly accordion: {
@@ -109,18 +15,22 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: false;
     };
     readonly displayDirective: {
-        readonly type: PropType<"if" | "show">;
+        readonly type: import("vue").PropType<"if" | "show">;
         readonly default: "if";
     };
-    readonly onItemHeaderClick: PropType<MaybeArray<OnItemHeaderClick>>;
-    readonly 'onUpdate:expandedNames': PropType<MaybeArray<OnUpdateExpandedNames>>;
-    readonly onUpdateExpandedNames: PropType<MaybeArray<OnUpdateExpandedNames>>;
+    readonly triggerAreas: {
+        readonly type: import("vue").PropType<import("./types/collapse.types").CollapseTriggerArea[]>;
+        readonly default: () => string[];
+    };
+    readonly onItemHeaderClick: import("vue").PropType<import("../../_utils").MaybeArray<import("./types/collapse.types").OnItemHeaderClick>>;
+    readonly 'onUpdate:expandedNames': import("vue").PropType<import("../../_utils").MaybeArray<import("./types/collapse.types").OnUpdateExpandedNames>>;
+    readonly onUpdateExpandedNames: import("vue").PropType<import("../../_utils").MaybeArray<import("./types/collapse.types").OnUpdateExpandedNames>>;
     readonly onExpandedNamesChange: {
-        readonly type: PropType<MaybeArray<OnUpdateExpandedNames> | undefined>;
+        readonly type: import("vue").PropType<import("../../_utils").MaybeArray<import("./types/collapse.types").OnUpdateExpandedNames> | undefined>;
         readonly validator: () => boolean;
         readonly default: undefined;
     };
-    readonly theme: PropType<import("../../_mixins").Theme<"Collapse", {
+    readonly theme: import("vue").PropType<import("../../_mixins").Theme<"Collapse", {
         titleFontSize: string;
         titleLineHeight: string;
         titleFontWeight: string;
@@ -138,8 +48,11 @@ declare const _default: import("vue").DefineComponent<{
         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", {
+    readonly themeOverrides: import("vue").PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Collapse", {
         titleFontSize: string;
         titleLineHeight: string;
         titleFontWeight: string;
@@ -157,8 +70,11 @@ declare const _default: import("vue").DefineComponent<{
         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", {
+    readonly builtinThemeOverrides: import("vue").PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Collapse", {
         titleFontSize: string;
         titleLineHeight: string;
         titleFontWeight: string;
@@ -176,9 +92,12 @@ declare const _default: import("vue").DefineComponent<{
         borderRadius: string;
         padding: string;
         boxSizing: string;
+        iconBorder: string;
+        iconBorderRadius: string;
+        iconBackground: string;
     }, any>>>;
 }, {
-    rtlEnabled: Ref<import("../../config-provider/src/internal-interface").RtlItem | undefined> | undefined;
+    rtlEnabled: import("vue").Ref<import("../../config-provider/src/internal-interface").RtlItem | undefined> | undefined;
     mergedTheme: import("vue").ComputedRef<{
         common: import("../..").ThemeCommonVars;
         self: {
@@ -199,13 +118,16 @@ declare const _default: import("vue").DefineComponent<{
             borderRadius: string;
             padding: string;
             boxSizing: string;
+            iconBorder: string;
+            iconBorderRadius: string;
+            iconBackground: string;
         };
         peers: any;
         peerOverrides: {
             [x: string]: any;
         };
     }>;
-    mergedClsPrefix: Ref<string>;
+    mergedClsPrefix: import("vue").Ref<string>;
     cssVars: import("vue").ComputedRef<{
         '--u-font-size': string;
         '--u-bezier': string;
@@ -225,17 +147,20 @@ declare const _default: import("vue").DefineComponent<{
         '--u-border-radius': string;
         '--u-padding': string;
         '--u-box-sizing': string;
+        '--u-icon-border': string;
+        '--u-icon-border-radius': string;
+        '--u-icon-background': string;
     }> | undefined;
-    themeClass: Ref<string> | undefined;
+    themeClass: import("vue").Ref<string> | undefined;
     onRender: (() => void) | undefined;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     readonly defaultExpandedNames: {
-        readonly type: PropType<string | number | Array<string | number> | null>;
+        readonly type: import("vue").PropType<string | number | Array<string | number> | null>;
         readonly default: null;
     };
-    readonly expandedNames: PropType<string | number | Array<string | number> | null>;
+    readonly expandedNames: import("vue").PropType<string | number | Array<string | number> | null>;
     readonly arrowPlacement: {
-        readonly type: PropType<ArrowPlacement>;
+        readonly type: import("vue").PropType<import("./types/collapse.types").ArrowPlacement>;
         readonly default: "right-edge";
     };
     readonly accordion: {
@@ -243,18 +168,22 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: false;
     };
     readonly displayDirective: {
-        readonly type: PropType<"if" | "show">;
+        readonly type: import("vue").PropType<"if" | "show">;
         readonly default: "if";
     };
-    readonly onItemHeaderClick: PropType<MaybeArray<OnItemHeaderClick>>;
-    readonly 'onUpdate:expandedNames': PropType<MaybeArray<OnUpdateExpandedNames>>;
-    readonly onUpdateExpandedNames: PropType<MaybeArray<OnUpdateExpandedNames>>;
+    readonly triggerAreas: {
+        readonly type: import("vue").PropType<import("./types/collapse.types").CollapseTriggerArea[]>;
+        readonly default: () => string[];
+    };
+    readonly onItemHeaderClick: import("vue").PropType<import("../../_utils").MaybeArray<import("./types/collapse.types").OnItemHeaderClick>>;
+    readonly 'onUpdate:expandedNames': import("vue").PropType<import("../../_utils").MaybeArray<import("./types/collapse.types").OnUpdateExpandedNames>>;
+    readonly onUpdateExpandedNames: import("vue").PropType<import("../../_utils").MaybeArray<import("./types/collapse.types").OnUpdateExpandedNames>>;
     readonly onExpandedNamesChange: {
-        readonly type: PropType<MaybeArray<OnUpdateExpandedNames> | undefined>;
+        readonly type: import("vue").PropType<import("../../_utils").MaybeArray<import("./types/collapse.types").OnUpdateExpandedNames> | undefined>;
         readonly validator: () => boolean;
         readonly default: undefined;
     };
-    readonly theme: PropType<import("../../_mixins").Theme<"Collapse", {
+    readonly theme: import("vue").PropType<import("../../_mixins").Theme<"Collapse", {
         titleFontSize: string;
         titleLineHeight: string;
         titleFontWeight: string;
@@ -272,8 +201,11 @@ declare const _default: import("vue").DefineComponent<{
         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", {
+    readonly themeOverrides: import("vue").PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Collapse", {
         titleFontSize: string;
         titleLineHeight: string;
         titleFontWeight: string;
@@ -291,8 +223,11 @@ declare const _default: import("vue").DefineComponent<{
         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", {
+    readonly builtinThemeOverrides: import("vue").PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Collapse", {
         titleFontSize: string;
         titleLineHeight: string;
         titleFontWeight: string;
@@ -310,12 +245,16 @@ declare const _default: import("vue").DefineComponent<{
         borderRadius: string;
         padding: string;
         boxSizing: string;
+        iconBorder: string;
+        iconBorderRadius: string;
+        iconBackground: string;
     }, any>>>;
 }>>, {
     readonly defaultExpandedNames: string | number | (string | number)[] | null;
-    readonly arrowPlacement: ArrowPlacement;
+    readonly arrowPlacement: import("./types/collapse.types").ArrowPlacement;
     readonly accordion: boolean;
     readonly displayDirective: "show" | "if";
-    readonly onExpandedNamesChange: MaybeArray<OnUpdateExpandedNames> | undefined;
+    readonly triggerAreas: import("./types/collapse.types").CollapseTriggerArea[];
+    readonly onExpandedNamesChange: import("../../_utils").MaybeArray<import("./types/collapse.types").OnUpdateExpandedNames> | undefined;
 }, {}>;
 export default _default;

package/lib/collapse/src/Collapse.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.collapseInjectionKey = exports.collapseProps = void 0;
+exports.collapseInjectionKey = void 0;
 const vue_1 = require("vue");
 const vooks_1 = require("vooks");
 const _mixins_1 = require("../../_mixins");
@@ -11,34 +11,11 @@ const _utils_1 = require("../../_utils");
 const styles_1 = require("../styles");
 const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
 const use_rtl_1 = require("../../_mixins/use-rtl");
-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'
-    }, 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
-    } });
+const collapse_props_1 = require("./props/collapse.props");
 exports.collapseInjectionKey = (0, _utils_1.createInjectionKey)('u-collapse');
 exports.default = (0, vue_1.defineComponent)({
     name: 'Collapse',
-    props: exports.collapseProps,
+    props: collapse_props_1.collapseProps,
     setup(props, { slots }) {
         const { mergedClsPrefixRef, inlineThemeDisabled, mergedRtlRef } = (0, _mixins_1.useConfig)(props);
         const uncontrolledExpandedNamesRef = (0, vue_1.ref)(props.defaultExpandedNames);
@@ -107,7 +84,7 @@ exports.default = (0, vue_1.defineComponent)({
         });
         const rtlEnabledRef = (0, use_rtl_1.useRtl)('Collapse', mergedRtlRef, mergedClsPrefixRef);
         const cssVarsRef = (0, vue_1.computed)(() => {
-            const { common: { cubicBezierEaseInOut }, self: { titleFontWeight, dividerColor, titlePadding, titleTextColor, titleTextColorDisabled, textColor, arrowColor, fontSize, titleFontSize, arrowColorDisabled, lineHeight, titleLineHeight, arrowSize, backgroundColor, borderRadius, padding, boxSizing } } = themeRef.value;
+            const { common: { cubicBezierEaseInOut }, self: { titleFontWeight, dividerColor, titlePadding, titleTextColor, titleTextColorDisabled, textColor, arrowColor, fontSize, titleFontSize, arrowColorDisabled, lineHeight, titleLineHeight, arrowSize, backgroundColor, borderRadius, padding, boxSizing, iconBorder, iconBorderRadius, iconBackground } } = themeRef.value;
             return {
                 '--u-font-size': fontSize,
                 '--u-bezier': cubicBezierEaseInOut,
@@ -126,7 +103,10 @@ exports.default = (0, vue_1.defineComponent)({
                 '--u-background-color': backgroundColor,
                 '--u-border-radius': borderRadius,
                 '--u-padding': padding,
-                '--u-box-sizing': boxSizing
+                '--u-box-sizing': boxSizing,
+                '--u-icon-border': iconBorder,
+                '--u-icon-border-radius': iconBorderRadius,
+                '--u-icon-background': iconBackground
             };
         });
         const themeClassHandle = inlineThemeDisabled

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

@@ -1,34 +1,24 @@
-import { type PropType } from 'vue';
-import type { ExtractPublicPropTypes } from '../../_utils';
-import { ArrowPlacement } from './interface';
-export declare const collapseItemProps: {
-    readonly title: StringConstructor;
-    readonly name: PropType<string | number>;
-    readonly disabled: BooleanConstructor;
-    readonly displayDirective: PropType<"if" | "show">;
-};
-export type CollapseItemProps = ExtractPublicPropTypes<typeof collapseItemProps>;
+import { ArrowPlacement, CollapseTriggerArea } from './types/collapse.types';
 declare const _default: import("vue").DefineComponent<{
     readonly title: StringConstructor;
-    readonly name: PropType<string | number>;
+    readonly name: import("vue").PropType<string | number>;
     readonly disabled: BooleanConstructor;
-    readonly displayDirective: PropType<"if" | "show">;
+    readonly displayDirective: import("vue").PropType<"if" | "show">;
 }, {
     rtlEnabled: import("vue").Ref<import("../../config-provider/src/internal-interface").RtlItem | undefined> | undefined;
-    collapseSlots: Readonly<{
-        [name: string]: import("vue").Slot<any> | undefined;
-    }>;
+    collapseSlots: import("./types/collapse.types").CollapseSlots;
     randomName: string;
     mergedClsPrefix: import("vue").Ref<string>;
     collapsed: import("vue").ComputedRef<boolean>;
+    triggerAreas: import("vue").Ref<CollapseTriggerArea[]>;
     mergedDisplayDirective: import("vue").ComputedRef<"show" | "if">;
     arrowPlacement: import("vue").ComputedRef<ArrowPlacement>;
-    handleClick(e: MouseEvent): void;
+    handleClick(event: MouseEvent): void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     readonly title: StringConstructor;
-    readonly name: PropType<string | number>;
+    readonly name: import("vue").PropType<string | number>;
     readonly disabled: BooleanConstructor;
-    readonly displayDirective: PropType<"if" | "show">;
+    readonly displayDirective: import("vue").PropType<"if" | "show">;
 }>>, {
     readonly disabled: boolean;
 }, {}>;

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)));
     }