@uzum-tech/ui 1.5.3 → 1.5.4

package/es/tag/src/Tag.d.ts

@@ -11,8 +11,13 @@ export declare const tagProps: {
         type: PropType<boolean | undefined>;
         default: undefined;
     };
+    size: {
+        type: PropType<"small" | "medium" | "large">;
+        default: string;
+    };
     checked: BooleanConstructor;
     checkable: BooleanConstructor;
+    outline: BooleanConstructor;
     strong: BooleanConstructor;
     triggerClickOnClose: BooleanConstructor;
     onClose: PropType<MaybeArray<(e: MouseEvent) => void>>;
@@ -35,10 +40,6 @@ export declare const tagProps: {
         readonly default: "default";
     };
     round: BooleanConstructor;
-    size: {
-        readonly type: PropType<"tiny" | "small" | "medium" | "large">;
-        readonly default: "medium";
-    };
     closable: {
         readonly type: PropType<boolean | undefined>;
         readonly default: undefined;
@@ -80,6 +81,7 @@ export declare const tagProps: {
         textColorPressedCheckable: string;
         textColorChecked: string;
         colorCheckable: string;
+        colorCheckableOutline: string;
         colorHoverCheckable: string;
         colorPressedCheckable: string;
         colorChecked: string;
@@ -183,6 +185,7 @@ export declare const tagProps: {
         textColorPressedCheckable: string;
         textColorChecked: string;
         colorCheckable: string;
+        colorCheckableOutline: string;
         colorHoverCheckable: string;
         colorPressedCheckable: string;
         colorChecked: string;
@@ -286,6 +289,7 @@ export declare const tagProps: {
         textColorPressedCheckable: string;
         textColorChecked: string;
         colorCheckable: string;
+        colorCheckableOutline: string;
         colorHoverCheckable: string;
         colorPressedCheckable: string;
         colorChecked: string;
@@ -367,8 +371,13 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<boolean | undefined>;
         default: undefined;
     };
+    size: {
+        type: PropType<"small" | "medium" | "large">;
+        default: string;
+    };
     checked: BooleanConstructor;
     checkable: BooleanConstructor;
+    outline: BooleanConstructor;
     strong: BooleanConstructor;
     triggerClickOnClose: BooleanConstructor;
     onClose: PropType<MaybeArray<(e: MouseEvent) => void>>;
@@ -391,10 +400,6 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: "default";
     };
     round: BooleanConstructor;
-    size: {
-        readonly type: PropType<"tiny" | "small" | "medium" | "large">;
-        readonly default: "medium";
-    };
     closable: {
         readonly type: PropType<boolean | undefined>;
         readonly default: undefined;
@@ -436,6 +441,7 @@ declare const _default: import("vue").DefineComponent<{
         textColorPressedCheckable: string;
         textColorChecked: string;
         colorCheckable: string;
+        colorCheckableOutline: string;
         colorHoverCheckable: string;
         colorPressedCheckable: string;
         colorChecked: string;
@@ -539,6 +545,7 @@ declare const _default: import("vue").DefineComponent<{
         textColorPressedCheckable: string;
         textColorChecked: string;
         colorCheckable: string;
+        colorCheckableOutline: string;
         colorHoverCheckable: string;
         colorPressedCheckable: string;
         colorChecked: string;
@@ -642,6 +649,7 @@ declare const _default: import("vue").DefineComponent<{
         textColorPressedCheckable: string;
         textColorChecked: string;
         colorCheckable: string;
+        colorCheckableOutline: string;
         colorHoverCheckable: string;
         colorPressedCheckable: string;
         colorChecked: string;
@@ -739,6 +747,7 @@ declare const _default: import("vue").DefineComponent<{
         '--u-close-size': string;
         '--u-color': string;
         '--u-color-checkable': string;
+        '--u-color-checkable-outline': string;
         '--u-color-checked': string;
         '--u-color-checked-hover': string;
         '--u-color-checked-pressed': string;
@@ -762,8 +771,13 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<boolean | undefined>;
         default: undefined;
     };
+    size: {
+        type: PropType<"small" | "medium" | "large">;
+        default: string;
+    };
     checked: BooleanConstructor;
     checkable: BooleanConstructor;
+    outline: BooleanConstructor;
     strong: BooleanConstructor;
     triggerClickOnClose: BooleanConstructor;
     onClose: PropType<MaybeArray<(e: MouseEvent) => void>>;
@@ -786,10 +800,6 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: "default";
     };
     round: BooleanConstructor;
-    size: {
-        readonly type: PropType<"tiny" | "small" | "medium" | "large">;
-        readonly default: "medium";
-    };
     closable: {
         readonly type: PropType<boolean | undefined>;
         readonly default: undefined;
@@ -831,6 +841,7 @@ declare const _default: import("vue").DefineComponent<{
         textColorPressedCheckable: string;
         textColorChecked: string;
         colorCheckable: string;
+        colorCheckableOutline: string;
         colorHoverCheckable: string;
         colorPressedCheckable: string;
         colorChecked: string;
@@ -934,6 +945,7 @@ declare const _default: import("vue").DefineComponent<{
         textColorPressedCheckable: string;
         textColorChecked: string;
         colorCheckable: string;
+        colorCheckableOutline: string;
         colorHoverCheckable: string;
         colorPressedCheckable: string;
         colorChecked: string;
@@ -1037,6 +1049,7 @@ declare const _default: import("vue").DefineComponent<{
         textColorPressedCheckable: string;
         textColorChecked: string;
         colorCheckable: string;
+        colorCheckableOutline: string;
         colorHoverCheckable: string;
         colorPressedCheckable: string;
         colorChecked: string;
@@ -1111,11 +1124,12 @@ declare const _default: import("vue").DefineComponent<{
     type: "default" | "tertiary" | "primary" | "info" | "success" | "warning" | "error";
     disabled: boolean | undefined;
     bordered: boolean | undefined;
-    size: "small" | "tiny" | "medium" | "large";
+    size: "small" | "medium" | "large";
     checked: boolean;
     round: boolean;
     closable: boolean | undefined;
     strong: boolean;
+    outline: boolean;
     checkable: boolean;
     triggerClickOnClose: boolean;
     internalCloseFocusable: boolean;

package/es/tag/src/Tag.js

@@ -9,7 +9,10 @@ import style from './styles/index.cssr';
 export const tagProps = Object.assign(Object.assign(Object.assign({}, useTheme.props), commonProps), { bordered: {
         type: Boolean,
         default: undefined
-    }, checked: Boolean, checkable: Boolean, strong: Boolean, triggerClickOnClose: Boolean, onClose: [Array, Function], onMouseenter: Function, onMouseleave: Function, 'onUpdate:checked': Function, onUpdateChecked: Function, 
+    }, size: {
+        type: String,
+        default: 'large'
+    }, checked: Boolean, checkable: Boolean, outline: Boolean, strong: Boolean, triggerClickOnClose: Boolean, onClose: [Array, Function], onMouseenter: Function, onMouseleave: Function, 'onUpdate:checked': Function, onUpdateChecked: Function, 
     // private
     internalCloseFocusable: {
         type: Boolean,
@@ -72,7 +75,7 @@ export default defineComponent({
         const rtlEnabledRef = useRtl('Tag', mergedRtlRef, mergedClsPrefixRef);
         const cssVarsRef = computed(() => {
             const { type, size, color: { color, textColor } = {} } = props;
-            const { common: { cubicBezierEaseInOut }, self: { closeMargin, closeMarginRtl, borderRadius, opacityDisabled, textColorCheckable, textColorHoverCheckable, textColorPressedCheckable, textColorChecked, colorCheckable, colorHoverCheckable, colorPressedCheckable, colorChecked, colorCheckedHover, colorCheckedPressed, closeBorderRadius, fontWeightStrong, fontWeight, [createKey('padding', size)]: padding, [createKey('colorBordered', type)]: colorBordered, [createKey('closeSize', size)]: closeSize, [createKey('closeIconSize', size)]: closeIconSize, [createKey('fontSize', size)]: fontSize, [createKey('height', size)]: height, [createKey('color', type)]: typedColor, [createKey('textColor', type)]: typeTextColor, [createKey('border', type)]: border, [createKey('closeIconColor', type)]: closeIconColor, [createKey('closeIconColorHover', type)]: closeIconColorHover, [createKey('closeIconColorPressed', type)]: closeIconColorPressed, [createKey('closeColorHover', type)]: closeColorHover, [createKey('closeColorPressed', type)]: closeColorPressed } } = themeRef.value;
+            const { common: { cubicBezierEaseInOut }, self: { closeMargin, closeMarginRtl, borderRadius, opacityDisabled, textColorCheckable, textColorHoverCheckable, textColorPressedCheckable, textColorChecked, colorCheckable, colorCheckableOutline, colorHoverCheckable, colorPressedCheckable, colorChecked, colorCheckedHover, colorCheckedPressed, closeBorderRadius, fontWeightStrong, fontWeight, [createKey('padding', size)]: padding, [createKey('colorBordered', type)]: colorBordered, [createKey('closeSize', size)]: closeSize, [createKey('closeIconSize', size)]: closeIconSize, [createKey('fontSize', size)]: fontSize, [createKey('height', size)]: height, [createKey('color', type)]: typedColor, [createKey('textColor', type)]: typeTextColor, [createKey('border', type)]: border, [createKey('closeIconColor', type)]: closeIconColor, [createKey('closeIconColorHover', type)]: closeIconColorHover, [createKey('closeIconColorPressed', type)]: closeIconColorPressed, [createKey('closeColorHover', type)]: closeColorHover, [createKey('closeColorPressed', type)]: closeColorPressed } } = themeRef.value;
             return {
                 '--u-font-weight-strong': fontWeightStrong,
                 '--u-font-weight': fontWeight,
@@ -93,6 +96,7 @@ export default defineComponent({
                 '--u-close-size': closeSize,
                 '--u-color': color || (mergedBorderedRef.value ? colorBordered : typedColor),
                 '--u-color-checkable': colorCheckable,
+                '--u-color-checkable-outline': colorCheckableOutline,
                 '--u-color-checked': colorChecked,
                 '--u-color-checked-hover': colorCheckedHover,
                 '--u-color-checked-pressed': colorCheckedPressed,
@@ -144,6 +148,7 @@ export default defineComponent({
                     [`${mergedClsPrefix}-tag--strong`]: this.strong,
                     [`${mergedClsPrefix}-tag--disabled`]: this.disabled,
                     [`${mergedClsPrefix}-tag--checkable`]: this.checkable,
+                    [`${mergedClsPrefix}-tag--outline`]: this.checkable && this.outline,
                     [`${mergedClsPrefix}-tag--checked`]: this.checkable && this.checked,
                     [`${mergedClsPrefix}-tag--round`]: round,
                     [`${mergedClsPrefix}-tag--avatar`]: avatarNode,

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

@@ -50,7 +50,9 @@ export default cB('tag', `
  font-weight: var(--u-font-weight);
 `, [cM('strong', `
  font-weight: var(--u-font-weight-strong);
- `), cE('border', `
+ `), cM('closable', [cE('content', `
+ padding-left: 4px;
+ `)]), cE('border', `
  pointer-events: none;
  position: absolute;
  left: 0;
@@ -95,7 +97,11 @@ export default cB('tag', `
  padding: 0px 8px;
  background-color: var(--u-color-checkable);
  transition: border-color .3s var(--u-bezier);
- `, [cNotM('disabled', [c('&:hover', 'background-color: var(--u-color-hover-checkable);', [cNotM('checked', 'color: var(--u-text-color-hover-checkable);')]), c('&:focus', `
+ `, [cE('border', `
+ border: unset;
+ `), cE('content', `
+ padding-left: 0px;
+ `), cNotM('disabled', [c('&:hover', 'background-color: var(--u-color-hover-checkable);', [cNotM('checked', 'color: var(--u-text-color-hover-checkable);')]), c('&:focus', `
  background-color: var(--u-color-pressed-checkable); 
  transition: border-color .3s var(--u-bezier);`, [cNotM('checked', 'color: var(--u-text-color-pressed-checkable);')]), c('&:active', `
  background-color: var(--u-color-pressed-checkable); 
@@ -105,4 +111,8 @@ export default cB('tag', `
  `, [cE('border', `
  border-color: var(--u-color-checked);
  transition: none;
- `), cNotM('disabled', [c('&:hover', 'background-color: var(--u-color-checked-hover);'), c('&:focus', 'background-color: var(--u-color-checked-hover);'), c('&:active', 'background-color: var(--u-color-checked-pressed);')])])])]);
+ `), cNotM('disabled', [c('&:hover', 'background-color: var(--u-color-checked-hover);'), c('&:focus', 'background-color: var(--u-color-checked-hover);'), c('&:active', 'background-color: var(--u-color-checked-pressed);')])])]), cM('outline', `
+ background-color: var(--u-color-checkable-outline);
+ `, [cE('border', `
+ border: var(--u-border);
+ `)])]);

package/es/tag/styles/light.d.ts

@@ -33,6 +33,7 @@ export declare const self: (vars: ThemeCommonVars) => {
     textColorPressedCheckable: string;
     textColorChecked: string;
     colorCheckable: string;
+    colorCheckableOutline: string;
     colorHoverCheckable: string;
     colorPressedCheckable: string;
     colorChecked: string;

package/es/tag/styles/light.js

@@ -12,14 +12,14 @@ export const self = (vars) => {
         closeSizeSmall: '14px',
         closeSizeMedium: '16px',
         closeSizeLarge: '18px',
-        paddingTiny: '2px 6px 2px 10px',
-        paddingSmall: '2px 6px 2px 10px',
-        paddingMedium: '2px 6px 2px 10px',
-        paddingLarge: '2px 6px 2px 10px',
+        paddingTiny: '2px 6px',
+        paddingSmall: '2px 6px',
+        paddingMedium: '2px 6px',
+        paddingLarge: '6px 8px',
         closeMargin: '0 0 0 4px',
         closeMarginRtl: '0 4px 0 0',
         closeBorderRadius: borderRadius,
-        heightTiny: '16px',
+        heightTiny: '20px',
         heightSmall: '20px',
         heightMedium: '24px',
         heightLarge: '32px',
@@ -36,7 +36,8 @@ export const self = (vars) => {
         textColorHoverCheckable: textPrimary,
         textColorPressedCheckable: textPrimary,
         textColorChecked: textQuaternary,
-        colorCheckable: elementsSecondary,
+        colorCheckable: elementsQuaternary,
+        colorCheckableOutline: elementsSecondary,
         colorHoverCheckable: elementsQuaternary,
         colorPressedCheckable: elementsQuaternary,
         colorChecked: elementsPrimary,

package/es/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.5.3";
+declare const _default: "1.5.4";
 export default _default;

package/es/version.js

@@ -1 +1 @@
-export default '1.5.3';
+export default '1.5.4';

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

@@ -9,7 +9,7 @@ export declare const collapseProps: {
     readonly expandedNames: PropType<string | number | Array<string | number> | null>;
     readonly arrowPlacement: {
         readonly type: PropType<ArrowPlacement>;
-        readonly default: "left";
+        readonly default: "right-edge";
     };
     readonly accordion: {
         readonly type: BooleanConstructor;
@@ -40,8 +40,11 @@ export declare const collapseProps: {
         arrowSize: string;
         arrowColor: string;
         arrowColorDisabled: string;
-        itemMargin: 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;
@@ -56,8 +59,11 @@ export declare const collapseProps: {
         arrowSize: string;
         arrowColor: string;
         arrowColorDisabled: string;
-        itemMargin: 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;
@@ -72,8 +78,11 @@ export declare const collapseProps: {
         arrowSize: string;
         arrowColor: string;
         arrowColorDisabled: string;
-        itemMargin: string;
         titlePadding: string;
+        backgroundColor: string;
+        borderRadius: string;
+        padding: string;
+        boxSizing: string;
     }, any>>>;
 };
 export type CollapseProps = ExtractPublicPropTypes<typeof collapseProps>;
@@ -93,7 +102,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly expandedNames: PropType<string | number | Array<string | number> | null>;
     readonly arrowPlacement: {
         readonly type: PropType<ArrowPlacement>;
-        readonly default: "left";
+        readonly default: "right-edge";
     };
     readonly accordion: {
         readonly type: BooleanConstructor;
@@ -124,8 +133,11 @@ declare const _default: import("vue").DefineComponent<{
         arrowSize: string;
         arrowColor: string;
         arrowColorDisabled: string;
-        itemMargin: 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;
@@ -140,8 +152,11 @@ declare const _default: import("vue").DefineComponent<{
         arrowSize: string;
         arrowColor: string;
         arrowColorDisabled: string;
-        itemMargin: 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;
@@ -156,8 +171,11 @@ declare const _default: import("vue").DefineComponent<{
         arrowSize: string;
         arrowColor: string;
         arrowColorDisabled: string;
-        itemMargin: string;
         titlePadding: string;
+        backgroundColor: string;
+        borderRadius: string;
+        padding: string;
+        boxSizing: string;
     }, any>>>;
 }, {
     rtlEnabled: Ref<import("../../config-provider/src/internal-interface").RtlItem | undefined> | undefined;
@@ -176,8 +194,11 @@ declare const _default: import("vue").DefineComponent<{
             arrowSize: string;
             arrowColor: string;
             arrowColorDisabled: string;
-            itemMargin: string;
             titlePadding: string;
+            backgroundColor: string;
+            borderRadius: string;
+            padding: string;
+            boxSizing: string;
         };
         peers: any;
         peerOverrides: {
@@ -200,7 +221,10 @@ declare const _default: import("vue").DefineComponent<{
         '--u-arrow-size': string;
         '--u-arrow-color': string;
         '--u-arrow-color-disabled': string;
-        '--u-item-margin': string;
+        '--u-background-color': string;
+        '--u-border-radius': string;
+        '--u-padding': string;
+        '--u-box-sizing': string;
     }> | undefined;
     themeClass: Ref<string> | undefined;
     onRender: (() => void) | undefined;
@@ -212,7 +236,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly expandedNames: PropType<string | number | Array<string | number> | null>;
     readonly arrowPlacement: {
         readonly type: PropType<ArrowPlacement>;
-        readonly default: "left";
+        readonly default: "right-edge";
     };
     readonly accordion: {
         readonly type: BooleanConstructor;
@@ -243,8 +267,11 @@ declare const _default: import("vue").DefineComponent<{
         arrowSize: string;
         arrowColor: string;
         arrowColorDisabled: string;
-        itemMargin: 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;
@@ -259,8 +286,11 @@ declare const _default: import("vue").DefineComponent<{
         arrowSize: string;
         arrowColor: string;
         arrowColorDisabled: string;
-        itemMargin: 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;
@@ -275,8 +305,11 @@ declare const _default: import("vue").DefineComponent<{
         arrowSize: string;
         arrowColor: string;
         arrowColorDisabled: string;
-        itemMargin: string;
         titlePadding: string;
+        backgroundColor: string;
+        borderRadius: string;
+        padding: string;
+        boxSizing: string;
     }, any>>>;
 }>>, {
     readonly displayDirective: "show" | "if";

package/lib/collapse/src/Collapse.js

@@ -16,7 +16,7 @@ exports.collapseProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props
         default: null
     }, expandedNames: [Array, String], arrowPlacement: {
         type: String,
-        default: 'left'
+        default: 'right-edge'
     }, accordion: {
         type: Boolean,
         default: false
@@ -107,7 +107,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, itemMargin, lineHeight, titleLineHeight, arrowSize } } = themeRef.value;
+            const { common: { cubicBezierEaseInOut }, self: { titleFontWeight, dividerColor, titlePadding, titleTextColor, titleTextColorDisabled, textColor, arrowColor, fontSize, titleFontSize, arrowColorDisabled, lineHeight, titleLineHeight, arrowSize, backgroundColor, borderRadius, padding, boxSizing } } = themeRef.value;
             return {
                 '--u-font-size': fontSize,
                 '--u-bezier': cubicBezierEaseInOut,
@@ -123,7 +123,10 @@ exports.default = (0, vue_1.defineComponent)({
                 '--u-arrow-size': arrowSize,
                 '--u-arrow-color': arrowColor,
                 '--u-arrow-color-disabled': arrowColorDisabled,
-                '--u-item-margin': itemMargin
+                '--u-background-color': backgroundColor,
+                '--u-border-radius': borderRadius,
+                '--u-padding': padding,
+                '--u-box-sizing': boxSizing
             };
         });
         const themeClassHandle = inlineThemeDisabled

package/lib/collapse/src/CollapseItem.js

@@ -67,6 +67,7 @@ exports.default = (0, vue_1.defineComponent)({
                 return collapseProps.arrowPlacement;
             }),
             handleClick(e) {
+                e.stopPropagation();
                 if (UCollapse && !props.disabled) {
                     UCollapse.toggleItem(collapsedRef.value, mergedNameRef.value, e);
                 }
@@ -91,12 +92,12 @@ exports.default = (0, vue_1.defineComponent)({
                 `${mergedClsPrefix}-collapse-item--${arrowPlacement}-arrow-placement`,
                 disabled && `${mergedClsPrefix}-collapse-item--disabled`,
                 !collapsed && `${mergedClsPrefix}-collapse-item--active`
-            ] },
+            ], onClick: this.handleClick },
             (0, vue_1.h)("div", { class: [
                     `${mergedClsPrefix}-collapse-item__header`,
                     !collapsed && `${mergedClsPrefix}-collapse-item__header--active`
                 ] },
-                (0, vue_1.h)("div", { class: `${mergedClsPrefix}-collapse-item__header-main`, 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))),

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

@@ -17,15 +17,24 @@ const fade_in_height_expand_cssr_1 = require("../../../_styles/transitions/fade-
 // --u-arrow-color
 // --u-arrow-color-disabled
 // --u-title-text-color-disabled
-// --u-item-margin
-exports.default = (0, cssr_1.cB)('collapse', 'width: 100%;', [(0, cssr_1.cB)('collapse-item', `
+// --u-background-color
+// --u-border-radius
+// --u-padding
+// --u-box-sizing
+exports.default = (0, cssr_1.cB)('collapse', `
+ width: 100%;
+ background-color: var(--u-background-color);
+ border-radius: var(--u-border-radius);
+ box-sizing: var(--u-box-sizing);
+ `, [(0, cssr_1.cB)('collapse-item', `
  font-size: var(--u-font-size);
  line-height: var(--u-line-height);
  color: var(--u-text-color);
  transition:
  color .3s var(--u-bezier),
  border-color .3s var(--u-bezier);
- margin: var(--u-item-margin);
+ padding: var(--u-padding);
+ cursor: pointer;
  `, [(0, cssr_1.cM)('disabled', [(0, cssr_1.cE)('header', 'cursor: not-allowed;', [(0, cssr_1.cE)('header-main', `
  color: var(--u-title-text-color-disabled);
  `), (0, cssr_1.cB)('collapse-item-arrow', `
@@ -33,9 +42,22 @@ exports.default = (0, cssr_1.cB)('collapse', 'width: 100%;', [(0, cssr_1.cB)('co
  `)])]), (0, cssr_1.cB)('collapse-item', 'margin-left: 32px;'), (0, cssr_1.c)('&:first-child', 'margin-top: 0;'), (0, cssr_1.c)('&:first-child >', [(0, cssr_1.cE)('header', 'padding-top: 0;')]), (0, cssr_1.cM)('left-arrow-placement', [(0, cssr_1.cE)('header', [(0, cssr_1.cB)('collapse-item-arrow', 'margin-right: 4px;')])]), (0, cssr_1.cM)('right-arrow-placement', [(0, cssr_1.cE)('header', [(0, cssr_1.cB)('collapse-item-arrow', `
  margin-left: 4px;
  order: 1;
- `)])]), (0, cssr_1.cM)('right-edge-arrow-placement', [(0, cssr_1.cE)('header', [(0, cssr_1.cB)('collapse-item-arrow', 'margin-left: auto;')])]), (0, cssr_1.cE)('content-wrapper', [(0, cssr_1.cE)('content-inner', 'padding-top: 16px;'), (0, fade_in_height_expand_cssr_1.fadeInHeightExpandTransition)({
+ `)])]), (0, cssr_1.cM)('right-edge-arrow-placement', [(0, cssr_1.cE)('header', [(0, cssr_1.cB)('collapse-item-arrow', `
+ margin-left: auto;
+ display: flex;
+ width: 28px;
+ height: 28px;
+ justify-content: center;
+ align-items: center;
+ border-radius: 100px;
+ background: #F3F4F6;
+ `, [(0, cssr_1.cB)('base-icon', `
+ transform: scaleY(1) rotate(90deg);
+ transition:
+ transform .15s var(--u-bezier)
+ `)])])]), (0, cssr_1.cE)('content-wrapper', [(0, cssr_1.cE)('content-inner', 'padding-top: 16px;'), (0, fade_in_height_expand_cssr_1.fadeInHeightExpandTransition)({
   duration: '0.15s'
-})]), (0, cssr_1.cM)('active', [(0, cssr_1.cE)('header', [(0, cssr_1.cM)('active', [(0, cssr_1.cB)('collapse-item-arrow', 'transform: rotate(90deg);')])])]), (0, cssr_1.c)('&:not(:first-child)', 'border-top: 1px solid var(--u-divider-color);'), (0, cssr_1.cE)('header', `
+})]), (0, cssr_1.cM)('active', [(0, cssr_1.cE)('header', [(0, cssr_1.cM)('active', [(0, cssr_1.cB)('collapse-item-arrow', [(0, cssr_1.cB)('base-icon', 'transform: scaleY(-1) rotate(90deg)')])])])]), (0, cssr_1.cE)('header', `
  font-size: var(--u-title-font-size);
  line-height: var(--u-title-line-height);
  display: flex;
@@ -43,9 +65,7 @@ exports.default = (0, cssr_1.cB)('collapse', 'width: 100%;', [(0, cssr_1.cB)('co
  align-items: center;
  transition: color .3s var(--u-bezier);
  position: relative;
- padding: var(--u-title-padding);
  color: var(--u-title-text-color);
- cursor: pointer;
  `, [(0, cssr_1.cE)('header-main', `
  display: flex;
  flex-wrap: nowrap;

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

@@ -13,8 +13,11 @@ export declare const self: (vars: ThemeCommonVars) => {
     arrowSize: string;
     arrowColor: string;
     arrowColorDisabled: string;
-    itemMargin: string;
     titlePadding: string;
+    backgroundColor: string;
+    borderRadius: string;
+    padding: string;
+    boxSizing: 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 } = vars;
+    const { fontWeight, fontBodyLarge, lineHeightBodyLarge, elementsQuaternary, textPrimary, textSecondary, fontBodyMedium, lineHeightBodyMedium, iconSmall, containerPrimary } = vars;
     return {
         titleFontSize: fontBodyLarge,
         titleLineHeight: lineHeightBodyLarge,
@@ -17,8 +17,11 @@ const self = (vars) => {
         arrowSize: iconSmall,
         arrowColor: textPrimary,
         arrowColorDisabled: textSecondary,
-        itemMargin: '16px 0 0 0',
-        titlePadding: '16px 0 0 0'
+        titlePadding: '16px 0 0 0',
+        backgroundColor: containerPrimary,
+        borderRadius: '20px',
+        padding: '24px',
+        boxSizing: 'border-box'
     };
 };
 exports.self = self;

package/lib/data-table/src/DataTable.d.ts

@@ -91,6 +91,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: import("vue").PropType<import("../../_internal").BaseLoadingExposedProps>;
         readonly default: {};
     };
+    readonly emptyProps: import("vue").PropType<Partial<import("../..").EmptyProps>>;
     readonly onLoad: import("vue").PropType<import("./interface").DataTableOnLoad>;
     readonly 'onUpdate:page': import("vue").PropType<import("../../pagination").PaginationProps["onUpdate:page"]>;
     readonly onUpdatePage: import("vue").PropType<import("../../pagination").PaginationProps["onUpdate:page"]>;
@@ -4368,6 +4369,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: import("vue").PropType<import("../../_internal").BaseLoadingExposedProps>;
         readonly default: {};
     };
+    readonly emptyProps: import("vue").PropType<Partial<import("../..").EmptyProps>>;
     readonly onLoad: import("vue").PropType<import("./interface").DataTableOnLoad>;
     readonly 'onUpdate:page': import("vue").PropType<import("../../pagination").PaginationProps["onUpdate:page"]>;
     readonly onUpdatePage: import("vue").PropType<import("../../pagination").PaginationProps["onUpdate:page"]>;

package/lib/data-table/src/DataTable.js

@@ -305,6 +305,7 @@ exports.default = (0, vue_1.defineComponent)({
             handleTableBodyScroll,
             setHeaderScrollLeft,
             renderCell: (0, vue_1.toRef)(props, 'renderCell'),
+            emptyPropsRef: (0, vue_1.toRef)(props, 'emptyProps'),
             handleEdit
         });
         const exposedMethods = {

package/lib/data-table/src/TableParts/Body.d.ts

@@ -1430,6 +1430,7 @@ declare const _default: import("vue").DefineComponent<{
     }) => void;
     handleUpdateExpanded: (key: RowKey, tmNode: TmNode | null) => void;
     renderCell: import("vue").Ref<((value: any, rowData: object, column: import("../interface").TableBaseColumn) => import("vue").VNodeChild) | undefined>;
+    emptyPropsRef: import("vue").Ref<Partial<import("../../../empty").EmptyProps> | undefined>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "edit"[], "edit", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     onEdit: PropType<(value: string, row: string, key: string) => void>;
     onResize: PropType<(e: ResizeObserverEntry) => void>;