@uzum-tech/ui 1.5.3 → 1.5.5

package/lib/badge/src/Badge.d.ts

@@ -16,6 +16,7 @@ export declare const badgeProps: {
     readonly processing: BooleanConstructor;
     readonly color: StringConstructor;
     readonly textColor: StringConstructor;
+    readonly dotSize: PropType<string | number>;
     readonly offset: PropType<readonly [number | string, number | string]>;
     readonly theme: PropType<import("../../_mixins").Theme<"Badge", {
         color: string;
@@ -32,6 +33,7 @@ export declare const badgeProps: {
         textColorError: string;
         textColorWarning: string;
         borderColor: string;
+        dotSize: string;
     }, any>>;
     readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Badge", {
         color: string;
@@ -48,6 +50,7 @@ export declare const badgeProps: {
         textColorError: string;
         textColorWarning: string;
         borderColor: string;
+        dotSize: string;
     }, any>>>;
     readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Badge", {
         color: string;
@@ -64,6 +67,7 @@ export declare const badgeProps: {
         textColorError: string;
         textColorWarning: string;
         borderColor: string;
+        dotSize: string;
     }, any>>>;
 };
 export type BadgeProps = ExtractPublicPropTypes<typeof badgeProps>;
@@ -83,6 +87,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly processing: BooleanConstructor;
     readonly color: StringConstructor;
     readonly textColor: StringConstructor;
+    readonly dotSize: PropType<string | number>;
     readonly offset: PropType<readonly [number | string, number | string]>;
     readonly theme: PropType<import("../../_mixins").Theme<"Badge", {
         color: string;
@@ -99,6 +104,7 @@ declare const _default: import("vue").DefineComponent<{
         textColorError: string;
         textColorWarning: string;
         borderColor: string;
+        dotSize: string;
     }, any>>;
     readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Badge", {
         color: string;
@@ -115,6 +121,7 @@ declare const _default: import("vue").DefineComponent<{
         textColorError: string;
         textColorWarning: string;
         borderColor: string;
+        dotSize: string;
     }, any>>>;
     readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Badge", {
         color: string;
@@ -131,6 +138,7 @@ declare const _default: import("vue").DefineComponent<{
         textColorError: string;
         textColorWarning: string;
         borderColor: string;
+        dotSize: string;
     }, any>>>;
 }, {
     rtlEnabled: import("vue").Ref<import("../../config-provider/src/internal-interface").RtlItem | undefined> | undefined;
@@ -147,6 +155,7 @@ declare const _default: import("vue").DefineComponent<{
         '--u-ripple-bezier': string;
         '--u-text-color': string;
         '--u-border-color': string;
+        '--u-dot-size': string;
     }> | undefined;
     themeClass: import("vue").Ref<string> | undefined;
     onRender: (() => void) | undefined;
@@ -169,6 +178,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly processing: BooleanConstructor;
     readonly color: StringConstructor;
     readonly textColor: StringConstructor;
+    readonly dotSize: PropType<string | number>;
     readonly offset: PropType<readonly [number | string, number | string]>;
     readonly theme: PropType<import("../../_mixins").Theme<"Badge", {
         color: string;
@@ -185,6 +195,7 @@ declare const _default: import("vue").DefineComponent<{
         textColorError: string;
         textColorWarning: string;
         borderColor: string;
+        dotSize: string;
     }, any>>;
     readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Badge", {
         color: string;
@@ -201,6 +212,7 @@ declare const _default: import("vue").DefineComponent<{
         textColorError: string;
         textColorWarning: string;
         borderColor: string;
+        dotSize: string;
     }, any>>>;
     readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Badge", {
         color: string;
@@ -217,6 +229,7 @@ declare const _default: import("vue").DefineComponent<{
         textColorError: string;
         textColorWarning: string;
         borderColor: string;
+        dotSize: string;
     }, any>>>;
 }>>, {
     readonly type: "default" | "info" | "success" | "warning" | "error" | "prime";

package/lib/badge/src/Badge.js

@@ -17,7 +17,7 @@ exports.badgeProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props),
     }, show: {
         type: Boolean,
         default: true
-    }, showZero: Boolean, processing: Boolean, color: String, textColor: String, offset: Array });
+    }, showZero: Boolean, processing: Boolean, color: String, textColor: String, dotSize: [String, Number], offset: Array });
 exports.default = (0, vue_1.defineComponent)({
     name: 'Badge',
     props: exports.badgeProps,
@@ -45,7 +45,7 @@ exports.default = (0, vue_1.defineComponent)({
         const rtlEnabledRef = (0, use_rtl_1.useRtl)('Badge', mergedRtlRef, mergedClsPrefixRef);
         const cssVarsRef = (0, vue_1.computed)(() => {
             const { type, color: propColor, textColor: propTextColor } = props;
-            const { common: { cubicBezierEaseInOut, cubicBezierEaseOut }, self: { [(0, _utils_1.createKey)('color', type)]: color, [(0, _utils_1.createKey)('textColor', type)]: textColor, fontSize, borderColor } } = themeRef.value;
+            const { common: { cubicBezierEaseInOut, cubicBezierEaseOut }, self: { [(0, _utils_1.createKey)('color', type)]: color, [(0, _utils_1.createKey)('textColor', type)]: textColor, fontSize, borderColor, dotSize } } = themeRef.value;
             return {
                 '--u-font-size': fontSize,
                 '--u-color': propColor || color,
@@ -53,7 +53,8 @@ exports.default = (0, vue_1.defineComponent)({
                 '--u-bezier': cubicBezierEaseInOut,
                 '--u-ripple-bezier': cubicBezierEaseOut,
                 '--u-text-color': propTextColor || textColor,
-                '--u-border-color': borderColor
+                '--u-border-color': borderColor,
+                '--u-dot-size': (0, _utils_1.resolveSize)(props.dotSize, dotSize)
             };
         });
         const themeClassHandle = inlineThemeDisabled

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

@@ -34,13 +34,14 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.c)('@keyframes badge-wave-spread', {
   transformOrigin: 'left bottom',
   originalTransform: 'translateX(0)'
 })])]), (0, cssr_1.cM)('dot', [(0, cssr_1.cB)('badge-sup', `
- height: 8px;
- width: 8px;
+ height: var(--u-dot-size);
+ width: var(--u-dot-size);
+ justify-content: center;
+ overflow: hidden;
  padding: 0;
- min-width: 8px;
  left: 100%;
  bottom: calc(100% - 4px);
- `, [(0, cssr_1.c)('::before', 'border-radius: 4px;')])]), (0, cssr_1.cB)('badge-sup', `
+ `, [(0, cssr_1.c)('::before', 'border-radius: 4px;'), (0, cssr_1.c)('img', 'width: 100%')])]), (0, cssr_1.cB)('badge-sup', `
  background: var(--u-color);
  transition:
  background-color .3s var(--u-bezier),
@@ -91,8 +92,6 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.c)('@keyframes badge-wave-spread', {
  border-radius: 100px;
  `), (0, cssr_1.cM)('dot', [(0, cssr_1.cB)('badge-sup', `
  transform: none;
- width: 12px;
- height: 12px;
  transform: none;
  left: auto;
  right: 0;

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

@@ -15,6 +15,7 @@ export declare const self: (vars: ThemeCommonVars) => {
     textColorError: string;
     textColorWarning: string;
     borderColor: string;
+    dotSize: string;
 };
 export type BadgeThemeVars = ReturnType<typeof self>;
 declare const badgeLight: Theme<'Badge', BadgeThemeVars>;

package/lib/badge/styles/light.js

@@ -18,7 +18,8 @@ const self = (vars) => {
         textColorSuccess: textQuaternary,
         textColorError: textQuaternary,
         textColorWarning: textQuaternary,
-        borderColor: staticWhite
+        borderColor: staticWhite,
+        dotSize: '12px'
     };
 };
 exports.self = self;

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

package/lib/data-table/src/TableParts/Body.js

@@ -99,7 +99,7 @@ exports.default = (0, vue_1.defineComponent)({
         bodyStyle: Object
     },
     setup(props) {
-        const { slots: dataTableSlots, bodyWidthRef, mergedExpandedRowKeysRef, mergedClsPrefixRef, mergedThemeRef, scrollXRef, colsRef, paginatedDataRef, rawPaginatedDataRef, fixedColumnLeftMapRef, fixedColumnRightMapRef, mergedCurrentPageRef, rowClassNameRef, leftActiveFixedColKeyRef, leftActiveFixedChildrenColKeysRef, rightActiveFixedColKeyRef, rightActiveFixedChildrenColKeysRef, renderExpandRef, hoverKeyRef, summaryRef, mergedSortStateRef, virtualScrollRef, componentId, mergedTableLayoutRef, childTriggerColIndexRef, indentRef, rowPropsRef, maxHeightRef, stripedRef, loadingRef, loadingSkeletonRef, onLoadRef, loadingKeySetRef, expandableRef, stickyExpandedRowsRef, renderExpandIconRef, summaryPlacementRef, treeMateRef, scrollbarPropsRef, setHeaderScrollLeft, doUpdateExpandedRowKeys, handleTableBodyScroll, doCheck, doUncheck, renderCell
+        const { slots: dataTableSlots, bodyWidthRef, mergedExpandedRowKeysRef, mergedClsPrefixRef, mergedThemeRef, scrollXRef, colsRef, paginatedDataRef, rawPaginatedDataRef, fixedColumnLeftMapRef, fixedColumnRightMapRef, mergedCurrentPageRef, rowClassNameRef, leftActiveFixedColKeyRef, leftActiveFixedChildrenColKeysRef, rightActiveFixedColKeyRef, rightActiveFixedChildrenColKeysRef, renderExpandRef, hoverKeyRef, summaryRef, mergedSortStateRef, virtualScrollRef, componentId, mergedTableLayoutRef, childTriggerColIndexRef, indentRef, rowPropsRef, maxHeightRef, stripedRef, loadingRef, loadingSkeletonRef, onLoadRef, loadingKeySetRef, expandableRef, stickyExpandedRowsRef, renderExpandIconRef, summaryPlacementRef, treeMateRef, scrollbarPropsRef, setHeaderScrollLeft, doUpdateExpandedRowKeys, handleTableBodyScroll, doCheck, doUncheck, renderCell, emptyPropsRef
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
          } = (0, vue_1.inject)(interface_1.dataTableInjectionKey);
         const scrollbarInstRef = (0, vue_1.ref)(null);
@@ -347,10 +347,11 @@ exports.default = (0, vue_1.defineComponent)({
             handleCheckboxUpdateChecked,
             handleRadioUpdateChecked,
             handleUpdateExpanded,
-            renderCell }, exposedMethods);
+            renderCell,
+            emptyPropsRef }, exposedMethods);
     },
     render() {
-        const { mergedTheme, scrollX, mergedClsPrefix, virtualScroll, maxHeight, mergedTableLayout, flexHeight, loadingKeySet, onResize, setHeaderScrollLeft } = this;
+        const { mergedTheme, scrollX, mergedClsPrefix, virtualScroll, maxHeight, mergedTableLayout, flexHeight, loadingKeySet, onResize, setHeaderScrollLeft, emptyPropsRef } = this;
         const scrollable = scrollX !== undefined || maxHeight !== undefined || flexHeight;
         // For a basic table with auto layout whose content may overflow we will
         // make it scrollable, which differs from browser's native behavior.
@@ -626,7 +627,7 @@ exports.default = (0, vue_1.defineComponent)({
                     `${mergedClsPrefix}-data-table-empty`,
                     this.loading && `${mergedClsPrefix}-data-table-empty--hide`
                 ], style: this.bodyStyle, ref: "emptyElRef" }, (0, _utils_1.resolveSlot)(this.dataTableSlots.empty, () => [
-                (0, vue_1.h)(empty_1.UEmpty, { size: "large", theme: this.mergedTheme.peers.Empty, themeOverrides: this.mergedTheme.peerOverrides.Empty })
+                (0, vue_1.h)(empty_1.UEmpty, Object.assign({ size: "large", theme: this.mergedTheme.peers.Empty, themeOverrides: this.mergedTheme.peerOverrides.Empty }, emptyPropsRef))
             ])));
             if (this.shouldDisplaySomeTablePart) {
                 return ((0, vue_1.h)(vue_1.Fragment, null,

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

@@ -9,6 +9,7 @@ import type { PaginationProps } from '../../pagination';
 import type { DataTableTheme } from '../styles';
 import type { RowItem, ColItem } from './use-group-header';
 import type { BaseLoadingExposedProps } from '../../_internal';
+import type { EmptyProps } from '../../empty';
 export declare const dataTableProps: {
     readonly onUnstableColumnResize: PropType<(resizedWidth: number, limitedWidth: number, column: TableBaseColumn, getColumnWidth: (key: ColumnKey) => number | undefined) => void>;
     readonly pagination: {
@@ -101,6 +102,7 @@ export declare const dataTableProps: {
         readonly type: PropType<BaseLoadingExposedProps>;
         readonly default: {};
     };
+    readonly emptyProps: PropType<Partial<EmptyProps>>;
     readonly onLoad: PropType<DataTableOnLoad>;
     readonly 'onUpdate:page': PropType<PaginationProps["onUpdate:page"]>;
     readonly onUpdatePage: PropType<PaginationProps["onUpdate:page"]>;
@@ -3083,6 +3085,7 @@ export interface DataTableInjection {
     syncScrollState: (deltaX?: number, deltaY?: number) => void;
     setHeaderScrollLeft: (scrollLeft: number) => void;
     renderCell: Ref<undefined | ((value: any, rowData: object, column: TableBaseColumn) => VNodeChild)>;
+    emptyPropsRef: Ref<Partial<EmptyProps> | undefined>;
     handleEdit: (value: any, row: any, key: string) => void;
 }
 export declare const dataTableInjectionKey: import("vue").InjectionKey<DataTableInjection>;

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

@@ -53,7 +53,7 @@ exports.dataTableProps = Object.assign(Object.assign({}, _mixins_1.useTheme.prop
     }, paginationBehaviorOnFilter: {
         type: String,
         default: 'current'
-    }, scrollbarProps: Object, renderCell: Function, renderExpandIcon: Function, spinProps: { type: Object, default: {} }, onLoad: Function, 'onUpdate:page': [Function, Array], onUpdatePage: [Function, Array], 'onUpdate:pageSize': [Function, Array], onUpdatePageSize: [Function, Array], 'onUpdate:sorter': [Function, Array], onUpdateSorter: [Function, Array], 'onUpdate:filters': [Function, Array], onUpdateFilters: [Function, Array], 'onUpdate:checkedRowKeys': [Function, Array], onUpdateCheckedRowKeys: [Function, Array], 'onUpdate:expandedRowKeys': [Function, Array], onUpdateExpandedRowKeys: [Function, Array], onScroll: Function, 
+    }, scrollbarProps: Object, renderCell: Function, renderExpandIcon: Function, spinProps: { type: Object, default: {} }, emptyProps: Object, onLoad: Function, 'onUpdate:page': [Function, Array], onUpdatePage: [Function, Array], 'onUpdate:pageSize': [Function, Array], onUpdatePageSize: [Function, Array], 'onUpdate:sorter': [Function, Array], onUpdateSorter: [Function, Array], 'onUpdate:filters': [Function, Array], onUpdateFilters: [Function, Array], 'onUpdate:checkedRowKeys': [Function, Array], onUpdateCheckedRowKeys: [Function, Array], 'onUpdate:expandedRowKeys': [Function, Array], onUpdateExpandedRowKeys: [Function, Array], onScroll: Function, 
     // deprecated
     onPageChange: [Function, Array], onPageSizeChange: [Function, Array], onSorterChange: [Function, Array], onFiltersChange: [Function, Array], onCheckedRowKeysChange: [Function, Array] });
 exports.dataTableInjectionKey = (0, _utils_1.createInjectionKey)('u-data-table');

package/lib/date-picker/src/DatePicker.d.ts

@@ -47,6 +47,7 @@ export declare const datePickerProps: {
     readonly shortcuts: PropType<Shortcuts>;
     readonly defaultShortcuts: BooleanConstructor;
     readonly isDateDisabled: PropType<IsDateDisabled>;
+    readonly maxDate: PropType<number | undefined>;
     readonly isTimeDisabled: PropType<IsTimeDisabled>;
     readonly show: {
         readonly type: PropType<boolean | undefined>;
@@ -2148,6 +2149,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly shortcuts: PropType<Shortcuts>;
     readonly defaultShortcuts: BooleanConstructor;
     readonly isDateDisabled: PropType<IsDateDisabled>;
+    readonly maxDate: PropType<number | undefined>;
     readonly isTimeDisabled: PropType<IsTimeDisabled>;
     readonly show: {
         readonly type: PropType<boolean | undefined>;
@@ -5448,6 +5450,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly shortcuts: PropType<Shortcuts>;
     readonly defaultShortcuts: BooleanConstructor;
     readonly isDateDisabled: PropType<IsDateDisabled>;
+    readonly maxDate: PropType<number | undefined>;
     readonly isTimeDisabled: PropType<IsTimeDisabled>;
     readonly show: {
         readonly type: PropType<boolean | undefined>;