@uzum-tech/ui 1.5.1 → 1.5.2

package/es/_internal/typography/src/styles/text.cssr.js

@@ -71,7 +71,6 @@ export default cB('text', `
  `), c('p&', `
  box-sizing: border-box;
  transition: color .3s var(--u-bezier);
- margin: var(--u-margin);
  font-size: var(--u-font-size);
  line-height: var(--u-line-height);
  color: var(--u-text-color);

package/es/_internal/typography/styles/light.js

@@ -2,7 +2,7 @@ import { commonLight } from '../../../styles';
 export const self = (vars) => {
     const { borderRadiusSmall, brandPrimary500, elementsQuaternary, textPrimary, brandQuaternary500, staticRed, staticOrange, staticGreen, elementsTertiary, fontBodyMedium, lineHeightBodyMedium, codeBorder } = vars;
     return {
-        margin: '16px 0 16px 0',
+        margin: '0px',
         aTextColor: brandPrimary500,
         blockquoteTextColor: textPrimary,
         blockquotePrefixColor: elementsQuaternary,

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

@@ -24,6 +24,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: () => never[];
     };
     readonly loading: BooleanConstructor;
+    readonly loadingSkeleton: BooleanConstructor;
     readonly bordered: {
         readonly type: import("vue").PropType<boolean | undefined>;
         readonly default: undefined;
@@ -4295,6 +4296,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: () => never[];
     };
     readonly loading: BooleanConstructor;
+    readonly loadingSkeleton: BooleanConstructor;
     readonly bordered: {
         readonly type: import("vue").PropType<boolean | undefined>;
         readonly default: undefined;
@@ -7145,6 +7147,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly virtualScroll: boolean;
     readonly tableLayout: "auto" | "fixed";
     readonly columns: import("./interface").TableColumns<any>;
+    readonly loadingSkeleton: boolean;
     readonly remote: boolean;
     readonly paginateSinglePage: boolean;
     readonly bottomBordered: boolean | undefined;

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

@@ -253,6 +253,7 @@ export default defineComponent({
             mergedSortStateRef,
             mergedFilterStateRef,
             loadingRef: toRef(props, 'loading'),
+            loadingSkeletonRef: toRef(props, 'loadingSkeleton'),
             rowClassNameRef: toRef(props, 'rowClassName'),
             mergedCheckedRowKeySetRef,
             mergedExpandedRowKeysRef,

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

@@ -1376,6 +1376,7 @@ declare const _default: import("vue").DefineComponent<{
     scrollX: import("vue").Ref<string | number | undefined>;
     cols: import("vue").Ref<ColItem[]>;
     loading: import("vue").Ref<boolean>;
+    loadingSkeleton: import("vue").Ref<boolean>;
     bodyShowHeaderOnly: import("vue").ComputedRef<boolean>;
     shouldDisplaySomeTablePart: import("vue").ComputedRef<boolean>;
     empty: import("vue").ComputedRef<boolean>;

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

@@ -94,7 +94,7 @@ export default 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, 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
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
          } = inject(dataTableInjectionKey);
         const scrollbarInstRef = ref(null);
@@ -304,7 +304,7 @@ export default defineComponent({
             componentId,
             scrollbarInstRef,
             virtualListRef,
-            emptyElRef, summary: summaryRef, mergedClsPrefix: mergedClsPrefixRef, mergedTheme: mergedThemeRef, scrollX: scrollXRef, cols: colsRef, loading: loadingRef, bodyShowHeaderOnly: bodyShowHeaderOnlyRef, shouldDisplaySomeTablePart: shouldDisplaySomeTablePartRef, empty: emptyRef, paginatedDataAndInfo: computed(() => {
+            emptyElRef, summary: summaryRef, mergedClsPrefix: mergedClsPrefixRef, mergedTheme: mergedThemeRef, scrollX: scrollXRef, cols: colsRef, loading: loadingRef, loadingSkeleton: loadingSkeletonRef, bodyShowHeaderOnly: bodyShowHeaderOnlyRef, shouldDisplaySomeTablePart: shouldDisplaySomeTablePartRef, empty: emptyRef, paginatedDataAndInfo: computed(() => {
                 const { value: striped } = stripedRef;
                 let hasChildren = false;
                 const data = paginatedDataRef.value.map(striped
@@ -591,7 +591,7 @@ export default defineComponent({
                         } },
                         h("colgroup", null, cols.map((col) => (h("col", { key: col.key, style: col.style })))),
                         this.showHeader ? h(TableHeader, { discrete: false }) : null,
-                        this.loading ? (h(BodySkeleton, null)) : !this.empty ? (h("tbody", { "data-u-id": componentId, class: `${mergedClsPrefix}-data-table-tbody` }, displayedData.map((rowInfo, displayedRowIndex) => {
+                        this.loadingSkeleton ? (h(BodySkeleton, null)) : !this.empty ? (h("tbody", { "data-u-id": componentId, class: `${mergedClsPrefix}-data-table-tbody` }, displayedData.map((rowInfo, displayedRowIndex) => {
                             return renderRow(rowInfo, displayedRowIndex, false);
                         }))) : null));
                 }

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

@@ -34,6 +34,7 @@ export declare const dataTableProps: {
         readonly default: () => never[];
     };
     readonly loading: BooleanConstructor;
+    readonly loadingSkeleton: BooleanConstructor;
     readonly bordered: {
         readonly type: PropType<boolean | undefined>;
         readonly default: undefined;
@@ -3035,6 +3036,7 @@ export interface DataTableInjection {
     mergedSortStateRef: Ref<SortState[]>;
     mergedFilterStateRef: Ref<FilterState>;
     loadingRef: Ref<boolean>;
+    loadingSkeletonRef: Ref<boolean>;
     rowClassNameRef: Ref<string | CreateRowClassName | undefined>;
     mergedCheckedRowKeySetRef: Ref<Set<RowKey>>;
     mergedInderminateRowKeySetRef: Ref<Set<RowKey>>;

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

@@ -14,7 +14,7 @@ export const dataTableProps = Object.assign(Object.assign({}, useTheme.props), {
     }, rowClassName: [String, Function], rowProps: Function, rowKey: Function, summary: [Function], data: {
         type: Array,
         default: () => []
-    }, loading: Boolean, bordered: {
+    }, loading: Boolean, loadingSkeleton: Boolean, bordered: {
         type: Boolean,
         default: undefined
     }, bottomBordered: {

package/es/list/src/List.d.ts

@@ -1,4 +1,8 @@
 declare const _default: import("vue").DefineComponent<{
+    size: {
+        type: import("vue").PropType<import("./interface").Size>;
+        default: string;
+    };
     showIcon: {
         type: BooleanConstructor;
         default: boolean;
@@ -48,18 +52,12 @@ declare const _default: import("vue").DefineComponent<{
     icon: import("./interface").RenderableProp;
     avatar: import("./interface").RenderableProp;
     theme: import("vue").PropType<import("../../_mixins").Theme<"List", {
-        padding: string;
         iconSize: string;
         iconSpace: string;
         suffixSpace: string;
         prefixSpace: string;
-        titleSize: string;
-        titleLineHeight: string;
-        subtitleSize: string;
-        subtitleLineHeight: string;
         subtitleColor: string;
         avatarSpace: string;
-        minHeight: string;
         colorFocus: string;
         pressedScale: string;
         textColorDisabled: string;
@@ -73,22 +71,19 @@ declare const _default: import("vue").DefineComponent<{
         borderColor: string;
         borderColorModal: string;
         borderColorPopover: string;
-        borderRadius: string;
-        fontSize: string;
+        borderRadiusLarge: string;
+        borderRadiusMedium: string;
+        borderRadiusSmall: string;
+        padding: string;
+        suffixSize: string;
     }, any>>;
     themeOverrides: import("vue").PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"List", {
-        padding: string;
         iconSize: string;
         iconSpace: string;
         suffixSpace: string;
         prefixSpace: string;
-        titleSize: string;
-        titleLineHeight: string;
-        subtitleSize: string;
-        subtitleLineHeight: string;
         subtitleColor: string;
         avatarSpace: string;
-        minHeight: string;
         colorFocus: string;
         pressedScale: string;
         textColorDisabled: string;
@@ -102,22 +97,19 @@ declare const _default: import("vue").DefineComponent<{
         borderColor: string;
         borderColorModal: string;
         borderColorPopover: string;
-        borderRadius: string;
-        fontSize: string;
+        borderRadiusLarge: string;
+        borderRadiusMedium: string;
+        borderRadiusSmall: string;
+        padding: string;
+        suffixSize: string;
     }, any>>>;
     builtinThemeOverrides: import("vue").PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"List", {
-        padding: string;
         iconSize: string;
         iconSpace: string;
         suffixSpace: string;
         prefixSpace: string;
-        titleSize: string;
-        titleLineHeight: string;
-        subtitleSize: string;
-        subtitleLineHeight: string;
         subtitleColor: string;
         avatarSpace: string;
-        minHeight: string;
         colorFocus: string;
         pressedScale: string;
         textColorDisabled: string;
@@ -131,14 +123,16 @@ declare const _default: import("vue").DefineComponent<{
         borderColor: string;
         borderColorModal: string;
         borderColorPopover: string;
-        borderRadius: string;
-        fontSize: string;
+        borderRadiusLarge: string;
+        borderRadiusMedium: string;
+        borderRadiusSmall: string;
+        padding: string;
+        suffixSize: string;
     }, any>>>;
 }, {
     mergedClsPrefix: import("vue").Ref<string>;
     rtlEnabled: import("vue").Ref<import("../../config-provider/src/internal-interface").RtlItem | undefined> | undefined;
     cssVars: import("vue").ComputedRef<{
-        '--u-font-size': string;
         '--u-bezier': string;
         '--u-text-color': string;
         '--u-color': string;
@@ -151,25 +145,25 @@ declare const _default: import("vue").DefineComponent<{
         '--u-color-hover': string;
         '--u-color-hover-modal': string;
         '--u-color-hover-popover': string;
-        '--u-padding': string;
         '--u-icon-size': string;
         '--u-icon-space': string;
         '--u-suffix-space': string;
         '--u-prefix-space': string;
-        '--u-title-size': string;
-        '--u-title-line-height': string;
-        '--u-subtitle-size': string;
-        '--u-subtitle-line-height': string;
         '--u-subtitle-color': string;
         '--u-avatar-space': string;
-        '--u-min-height': string;
         '--u-color-focus': string;
         '--u-pressed-scale': string;
         '--u-text-color-disabled': string;
+        '--u-padding': string;
+        '--u-suffix-size': 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<import("vue").ExtractPropTypes<{
+    size: {
+        type: import("vue").PropType<import("./interface").Size>;
+        default: string;
+    };
     showIcon: {
         type: BooleanConstructor;
         default: boolean;
@@ -219,18 +213,12 @@ declare const _default: import("vue").DefineComponent<{
     icon: import("./interface").RenderableProp;
     avatar: import("./interface").RenderableProp;
     theme: import("vue").PropType<import("../../_mixins").Theme<"List", {
-        padding: string;
         iconSize: string;
         iconSpace: string;
         suffixSpace: string;
         prefixSpace: string;
-        titleSize: string;
-        titleLineHeight: string;
-        subtitleSize: string;
-        subtitleLineHeight: string;
         subtitleColor: string;
         avatarSpace: string;
-        minHeight: string;
         colorFocus: string;
         pressedScale: string;
         textColorDisabled: string;
@@ -244,22 +232,19 @@ declare const _default: import("vue").DefineComponent<{
         borderColor: string;
         borderColorModal: string;
         borderColorPopover: string;
-        borderRadius: string;
-        fontSize: string;
+        borderRadiusLarge: string;
+        borderRadiusMedium: string;
+        borderRadiusSmall: string;
+        padding: string;
+        suffixSize: string;
     }, any>>;
     themeOverrides: import("vue").PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"List", {
-        padding: string;
         iconSize: string;
         iconSpace: string;
         suffixSpace: string;
         prefixSpace: string;
-        titleSize: string;
-        titleLineHeight: string;
-        subtitleSize: string;
-        subtitleLineHeight: string;
         subtitleColor: string;
         avatarSpace: string;
-        minHeight: string;
         colorFocus: string;
         pressedScale: string;
         textColorDisabled: string;
@@ -273,22 +258,19 @@ declare const _default: import("vue").DefineComponent<{
         borderColor: string;
         borderColorModal: string;
         borderColorPopover: string;
-        borderRadius: string;
-        fontSize: string;
+        borderRadiusLarge: string;
+        borderRadiusMedium: string;
+        borderRadiusSmall: string;
+        padding: string;
+        suffixSize: string;
     }, any>>>;
     builtinThemeOverrides: import("vue").PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"List", {
-        padding: string;
         iconSize: string;
         iconSpace: string;
         suffixSpace: string;
         prefixSpace: string;
-        titleSize: string;
-        titleLineHeight: string;
-        subtitleSize: string;
-        subtitleLineHeight: string;
         subtitleColor: string;
         avatarSpace: string;
-        minHeight: string;
         colorFocus: string;
         pressedScale: string;
         textColorDisabled: string;
@@ -302,8 +284,11 @@ declare const _default: import("vue").DefineComponent<{
         borderColor: string;
         borderColorModal: string;
         borderColorPopover: string;
-        borderRadius: string;
-        fontSize: string;
+        borderRadiusLarge: string;
+        borderRadiusMedium: string;
+        borderRadiusSmall: string;
+        padding: string;
+        suffixSize: string;
     }, any>>>;
 }>>, {
     onFocus: import("../../_utils").ArrayFocusHandler | undefined;
@@ -318,6 +303,7 @@ declare const _default: import("vue").DefineComponent<{
     bordered: boolean;
     tag: string;
     showIcon: boolean;
+    size: import("./interface").Size;
     header: import("./interface").RenderableType;
     loadingSkeleton: boolean;
     rounded: boolean;

package/es/list/src/List.js

@@ -3,6 +3,7 @@ import { useConfig, useTheme, useThemeClass, useRtl } from '../../_mixins';
 import { listLight } from '../styles';
 import style from './styles/index.cssr';
 import { listProps, listInjectionKey, listItemPropsBoolean, listItemPropsRenderable } from './props';
+import { createKey } from '../../_utils';
 export default defineComponent({
     name: 'List',
     props: listProps,
@@ -18,11 +19,10 @@ export default defineComponent({
             acc[item] = toRef(props, item);
             return acc;
         }, {});
-        provide(listInjectionKey, Object.assign(Object.assign(Object.assign({}, booleanInjectedRefs), renderableInjectedRefs), { tag: toRef(props, 'itemTag'), mergedClsPrefix: mergedClsPrefixRef, onClick: toRef(props, 'onClick'), onKeypress: toRef(props, 'onKeypress'), onPress: toRef(props, 'onPress'), onBlur: toRef(props, 'onBlur'), onFocus: toRef(props, 'onFocus'), bordered: toRef(props, 'bordered'), clickable: toRef(props, 'clickable'), showDivider: toRef(props, 'showDivider') }));
+        provide(listInjectionKey, Object.assign(Object.assign(Object.assign({}, booleanInjectedRefs), renderableInjectedRefs), { tag: toRef(props, 'itemTag'), mergedClsPrefix: mergedClsPrefixRef, onClick: toRef(props, 'onClick'), onKeypress: toRef(props, 'onKeypress'), onPress: toRef(props, 'onPress'), onBlur: toRef(props, 'onBlur'), onFocus: toRef(props, 'onFocus'), bordered: toRef(props, 'bordered'), clickable: toRef(props, 'clickable'), showDivider: toRef(props, 'showDivider'), size: toRef(props, 'size') }));
         const cssVarsRef = computed(() => {
-            const { common: { cubicBezierEaseInOut }, self: { fontSize, textColor, color, colorModal, colorPopover, borderColor, borderColorModal, borderColorPopover, borderRadius, colorHover, colorHoverModal, colorHoverPopover, padding, iconSize, iconSpace, suffixSpace, prefixSpace, titleSize, titleLineHeight, subtitleSize, subtitleLineHeight, subtitleColor, avatarSpace, minHeight, colorFocus, pressedScale, textColorDisabled } } = themeRef.value;
+            const { common: { cubicBezierEaseInOut }, self: { textColor, color, colorModal, colorPopover, borderColor, borderColorModal, borderColorPopover, colorHover, colorHoverModal, colorHoverPopover, padding, iconSize, iconSpace, suffixSpace, prefixSpace, subtitleColor, avatarSpace, colorFocus, pressedScale, textColorDisabled, suffixSize, [createKey('borderRadius', props.size)]: borderRadius } } = themeRef.value;
             return {
-                '--u-font-size': fontSize,
                 '--u-bezier': cubicBezierEaseInOut,
                 '--u-text-color': textColor,
                 '--u-color': color,
@@ -35,21 +35,17 @@ export default defineComponent({
                 '--u-color-hover': colorHover,
                 '--u-color-hover-modal': colorHoverModal,
                 '--u-color-hover-popover': colorHoverPopover,
-                '--u-padding': padding,
                 '--u-icon-size': iconSize,
                 '--u-icon-space': iconSpace,
                 '--u-suffix-space': suffixSpace,
                 '--u-prefix-space': prefixSpace,
-                '--u-title-size': titleSize,
-                '--u-title-line-height': titleLineHeight,
-                '--u-subtitle-size': subtitleSize,
-                '--u-subtitle-line-height': subtitleLineHeight,
                 '--u-subtitle-color': subtitleColor,
                 '--u-avatar-space': avatarSpace,
-                '--u-min-height': minHeight,
                 '--u-color-focus': colorFocus,
                 '--u-pressed-scale': pressedScale,
-                '--u-text-color-disabled': textColorDisabled
+                '--u-text-color-disabled': textColorDisabled,
+                '--u-padding': padding,
+                '--u-suffix-size': suffixSize
             };
         });
         const themeClassHandle = inlineThemeDisabled

package/es/list/src/ListItem.d.ts

@@ -1,11 +1,45 @@
-import { ComputedRef, Slot } from 'vue';
+import { ComputedRef, Slot, Component } from 'vue';
 import { ArrayEmptyHandler, ArrayKeyboardHandler, ArrayMouseHandler, KeyboardEventHandler, ArrayFocusHandler, MouseEventHandler } from '../../_utils';
-import { ListItemPropsRenderable, RenderableType } from './interface';
+import { HeaderPropObject, DescriptionPropsObject } from './props';
+import { Size } from './interface';
 declare const _default: import("vue").DefineComponent<{
+    avatar: {
+        type: import("vue").PropType<import("../../avatar").AvatarProps & {
+            icon: Component;
+            hasBadge?: boolean;
+        }>;
+        default: () => {};
+    };
+    badge: {
+        type: import("vue").PropType<import("../../badge").BadgeProps>;
+        default: () => {};
+    };
     tag: {
         type: StringConstructor;
         default: undefined;
     };
+    prefixAlign: {
+        type: import("vue").PropType<"start" | "center" | "end">;
+        default: string;
+    };
+    suffixAlign: {
+        type: import("vue").PropType<"start" | "center" | "end">;
+        default: string;
+    };
+    loadingPrefix: BooleanConstructor;
+    loadingSuffix: BooleanConstructor;
+    header: {
+        type: import("vue").PropType<HeaderPropObject>;
+    };
+    description: {
+        type: import("vue").PropType<DescriptionPropsObject>;
+    };
+    headerSide: {
+        type: import("vue").PropType<HeaderPropObject>;
+    };
+    descriptionSide: {
+        type: import("vue").PropType<DescriptionPropsObject>;
+    };
     onClick: {
         type: import("vue").PropType<ArrayMouseHandler | undefined>;
         default: undefined;
@@ -34,24 +68,16 @@ declare const _default: import("vue").DefineComponent<{
     disabled: import("./interface").BooleanProp;
     loading: import("./interface").BooleanProp;
     loadingSkeleton: import("./interface").BooleanProp;
-    header: import("./interface").RenderableProp;
-    description: import("./interface").RenderableProp;
-    headerSide: import("./interface").RenderableProp;
-    descriptionSide: import("./interface").RenderableProp;
     icon: import("./interface").RenderableProp;
-    avatar: import("./interface").RenderableProp;
 }, {
     mergedClsPrefix: import("vue").Ref<string>;
-    mergedShowIcon: ComputedRef<boolean | undefined>;
-    mergedDescriptionFirst: ComputedRef<boolean | undefined>;
-    mergedColumnsEven: ComputedRef<boolean | undefined>;
-    mergedRounded: ComputedRef<boolean | undefined>;
+    mergedHoverable: ComputedRef<boolean | undefined>;
     mergedDisabled: ComputedRef<boolean | undefined>;
     mergedLoading: ComputedRef<boolean | undefined>;
-    mergedLoadingSkeleton: ComputedRef<boolean | undefined>;
-    mergedHoverable: ComputedRef<boolean | undefined>;
+    mergedShowIcon: ComputedRef<boolean | undefined>;
+    mergedRounded: ComputedRef<boolean | undefined>;
     mergedTag: ComputedRef<string | undefined>;
-    resolveFirst: (name: keyof ListItemPropsRenderable) => Slot | RenderableType | null;
+    resolveSlot: (name: string) => Slot | null;
     hasFocus: ComputedRef<boolean | undefined>;
     isPressed: import("vue").Ref<boolean>;
     handleClick: MouseEventHandler;
@@ -60,11 +86,45 @@ declare const _default: import("vue").DefineComponent<{
     handleFocus: (e: FocusEvent) => void;
     bordered: import("vue").Ref<boolean>;
     showDivider: import("vue").Ref<boolean>;
+    size: import("vue").Ref<Size>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    avatar: {
+        type: import("vue").PropType<import("../../avatar").AvatarProps & {
+            icon: Component;
+            hasBadge?: boolean;
+        }>;
+        default: () => {};
+    };
+    badge: {
+        type: import("vue").PropType<import("../../badge").BadgeProps>;
+        default: () => {};
+    };
     tag: {
         type: StringConstructor;
         default: undefined;
     };
+    prefixAlign: {
+        type: import("vue").PropType<"start" | "center" | "end">;
+        default: string;
+    };
+    suffixAlign: {
+        type: import("vue").PropType<"start" | "center" | "end">;
+        default: string;
+    };
+    loadingPrefix: BooleanConstructor;
+    loadingSuffix: BooleanConstructor;
+    header: {
+        type: import("vue").PropType<HeaderPropObject>;
+    };
+    description: {
+        type: import("vue").PropType<DescriptionPropsObject>;
+    };
+    headerSide: {
+        type: import("vue").PropType<HeaderPropObject>;
+    };
+    descriptionSide: {
+        type: import("vue").PropType<DescriptionPropsObject>;
+    };
     onClick: {
         type: import("vue").PropType<ArrayMouseHandler | undefined>;
         default: undefined;
@@ -93,32 +153,31 @@ declare const _default: import("vue").DefineComponent<{
     disabled: import("./interface").BooleanProp;
     loading: import("./interface").BooleanProp;
     loadingSkeleton: import("./interface").BooleanProp;
-    header: import("./interface").RenderableProp;
-    description: import("./interface").RenderableProp;
-    headerSide: import("./interface").RenderableProp;
-    descriptionSide: import("./interface").RenderableProp;
     icon: import("./interface").RenderableProp;
-    avatar: import("./interface").RenderableProp;
 }>>, {
     onFocus: ArrayFocusHandler | undefined;
     onBlur: ArrayFocusHandler | undefined;
     onKeypress: ArrayKeyboardHandler | undefined;
     onClick: ArrayMouseHandler | undefined;
-    icon: RenderableType;
-    avatar: RenderableType;
+    icon: import("./interface").RenderableType;
+    avatar: import("../../avatar").AvatarProps & {
+        icon: Component;
+        hasBadge?: boolean;
+    };
     disabled: boolean;
     loading: boolean;
-    description: RenderableType;
     tag: string;
     showIcon: boolean;
-    header: RenderableType;
+    badge: import("../../badge").BadgeProps;
     loadingSkeleton: boolean;
     rounded: boolean;
     hoverable: boolean;
     descriptionFirst: boolean;
     columnsEven: boolean;
-    headerSide: RenderableType;
-    descriptionSide: RenderableType;
     onPress: ArrayEmptyHandler | undefined;
+    prefixAlign: "center" | "end" | "start";
+    suffixAlign: "center" | "end" | "start";
+    loadingPrefix: boolean;
+    loadingSuffix: boolean;
 }, {}>;
 export default _default;