@uzum-tech/ui 1.13.0 → 1.13.2

package/es/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/es/collapse/index.js

@@ -1,2 +1,4 @@
-export { default as UCollapse, collapseProps } from './src/Collapse';
-export { default as UCollapseItem, 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';

package/es/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/es/collapse/src/Collapse.js

@@ -1,34 +1,11 @@
 import { computed, h, defineComponent, provide, ref } from 'vue';
 import { useMergedState } from 'vooks';
 import { useConfig, useTheme, useThemeClass } from '../../_mixins';
-import { call, createInjectionKey, warn } from '../../_utils';
+import { call, createInjectionKey } from '../../_utils';
 import { collapseLight } from '../styles';
 import style from './styles/index.cssr';
 import { useRtl } from '../../_mixins/use-rtl';
-export const collapseProps = Object.assign(Object.assign({}, 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') {
-                warn('collapse', '`on-expanded-names-change` is deprecated, please use `on-update:expanded-names` instead.');
-            }
-            return true;
-        },
-        default: undefined
-    } });
+import { collapseProps } from './props/collapse.props';
 export const collapseInjectionKey = createInjectionKey('u-collapse');
 export default defineComponent({
     name: 'Collapse',
@@ -101,7 +78,7 @@ export default defineComponent({
         });
         const rtlEnabledRef = useRtl('Collapse', mergedRtlRef, mergedClsPrefixRef);
         const cssVarsRef = 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,
@@ -120,7 +97,10 @@ export default 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/es/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/es/collapse/src/CollapseItem.js

@@ -1,5 +1,5 @@
-import { h, defineComponent, inject, computed } from 'vue';
-import { createId } from 'seemly';
+import { h, defineComponent, inject, computed, toRef } from 'vue';
+import { createId, happensIn } from 'seemly';
 import { useMemo } from 'vooks';
 import { ChevronRightIcon as ArrowRightIcon, ChevronLeftIcon as ArrowLeftIcon } from '../../_internal/icons';
 import { useRtl } from '../../_mixins/use-rtl';
@@ -8,12 +8,7 @@ import { UBaseIcon } from '../../_internal';
 import { throwError, resolveSlotWithProps, resolveWrappedSlotWithProps } from '../../_utils';
 import { collapseInjectionKey } from './Collapse';
 import UCollapseItemContent from './CollapseItemContent';
-export const collapseItemProps = {
-    title: String,
-    name: [String, Number],
-    disabled: Boolean,
-    displayDirective: String
-};
+import { collapseItemProps } from './props/collapseItem.props';
 export default defineComponent({
     name: 'CollapseItem',
     props: collapseItemProps,
@@ -42,12 +37,26 @@ export default defineComponent({
             return true;
         });
         const rtlEnabledRef = useRtl('Collapse', mergedRtlRef, mergedClsPrefixRef);
+        function clickedOn(event, area) {
+            return 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: toRef(collapseProps, 'triggerAreas'),
             mergedDisplayDirective: computed(() => {
                 const { displayDirective } = props;
                 if (displayDirective) {
@@ -60,41 +69,44 @@ export default defineComponent({
             arrowPlacement: 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 = resolveSlotWithProps($slots.header, { collapsed }, () => [this.title]);
         const headerExtraSlot = $slots['header-extra'] || collapseSlots['header-extra'];
         const arrowSlot = $slots.arrow || collapseSlots.arrow;
-        const arrowNode = (h("div", { class: `${mergedClsPrefix}-collapse-item-arrow`, key: this.rtlEnabled ? 0 : 1 }, resolveSlotWithProps(arrowSlot, { collapsed }, () => {
-            var _a;
-            return [
-                h(UBaseIcon, { clsPrefix: mergedClsPrefix }, {
-                    default: (_a = collapseSlots.expandIcon) !== null && _a !== void 0 ? _a : (() => this.rtlEnabled ? h(ArrowLeftIcon, null) : h(ArrowRightIcon, null))
-                })
-            ];
-        })));
+        const arrowNode = (h("div", { class: `${mergedClsPrefix}-collapse-item-arrow`, key: this.rtlEnabled ? 0 : 1, "data-arrow": true }, resolveSlotWithProps(arrowSlot, { collapsed }, () => [
+            h(UBaseIcon, { clsPrefix: mergedClsPrefix }, {
+                default: () => this.rtlEnabled ? h(ArrowLeftIcon, null) : h(ArrowRightIcon, null)
+            })
+        ])));
         return (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}`;
+                })
+            ] },
             h("div", { class: [
                     `${mergedClsPrefix}-collapse-item__header`,
                     !collapsed && `${mergedClsPrefix}-collapse-item__header--active`
-                ] },
+                ], onClick: this.handleClick },
                 h("div", { class: `${mergedClsPrefix}-collapse-item__header-main` },
                     arrowPlacement !== 'right-edge' && arrowNode,
                     headerNode),
-                resolveWrappedSlotWithProps(headerExtraSlot, { collapsed }, (children) => (h("div", { class: `${mergedClsPrefix}-collapse-item__header-extra`, onClick: this.handleClick }, children))),
+                resolveWrappedSlotWithProps(headerExtraSlot, { collapsed }, (children) => (h("div", { class: `${mergedClsPrefix}-collapse-item__header-extra`, "data-extra": true }, children))),
                 arrowPlacement === 'right-edge' && arrowNode),
             h(UCollapseItemContent, { clsPrefix: mergedClsPrefix, displayDirective: mergedDisplayDirective, show: !collapsed }, $slots)));
     }

package/es/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/es/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>>>;
+};