@uzum-tech/ui 1.5.1 → 1.5.3

package/lib/list/src/ListItem.js

@@ -5,9 +5,12 @@ const _utils_1 = require("../../_utils");
 const props_1 = require("./props");
 const icons_1 = require("../../_internal/icons");
 const _internal_1 = require("../../_internal");
+const avatar_1 = require("../../avatar");
+const icon_1 = require("../../icon");
+const badge_1 = require("../../badge");
 exports.default = (0, vue_1.defineComponent)({
     name: 'ListItem',
-    props: props_1.listItemProps,
+    props: Object.assign({}, props_1.listItemProps),
     setup(props, { slots }) {
         const listInjection = (0, vue_1.inject)(props_1.listInjectionKey, null);
         if (!listInjection) {
@@ -22,23 +25,21 @@ exports.default = (0, vue_1.defineComponent)({
         const mergedHoverable = createRef('hoverable');
         const mergedDisabled = createRef('disabled');
         const mergedLoading = createRef('loading');
-        const mergedLoadingSkeleton = createRef('loadingSkeleton');
+        const mergedShowIcon = createRef('showIcon');
+        const mergedRounded = createRef('rounded');
         const mergedClickHandler = createRef('onClick');
         const mergedKeypressHandler = createRef('onKeypress');
         const mergedPressHandler = createRef('onPress');
         const mergedBlurHandler = createRef('onBlur');
         const mergedFocusHandler = createRef('onFocus');
-        const hasFocus = (0, vue_1.computed)(() => {
-            return !mergedDisabled.value && mergedHoverable.value;
-        });
+        const hasFocus = (0, vue_1.computed)(() => !mergedDisabled.value && mergedHoverable.value);
         const isPressed = (0, vue_1.ref)(false);
         const handleClick = (e) => {
             if (!mergedDisabled.value) {
                 if (mergedClickHandler.value)
                     (0, _utils_1.call)(mergedClickHandler.value, e);
-                if (e.which === 1 || e.button === 0) {
+                if (e.which === 1 || e.button === 0)
                     handlePress('mouseup');
-                }
             }
         };
         const handleKeyPress = (e) => {
@@ -46,61 +47,45 @@ exports.default = (0, vue_1.defineComponent)({
                 const { code } = e;
                 if (code === 'Enter' || code === 'Space' || code === 'NumpadEnter') {
                     e.preventDefault();
-                    if (!e.repeat) {
+                    if (!e.repeat)
                         handlePress('keyup');
-                    }
                 }
                 if (mergedKeypressHandler.value)
                     (0, _utils_1.call)(mergedKeypressHandler.value, e);
             }
         };
         const handleBlur = (e) => {
-            if (hasFocus.value) {
-                if (mergedBlurHandler.value)
-                    (0, _utils_1.call)(mergedBlurHandler.value, e);
+            if (hasFocus.value && mergedBlurHandler.value) {
+                (0, _utils_1.call)(mergedBlurHandler.value, e);
             }
         };
         const handleFocus = (e) => {
-            if (hasFocus.value) {
-                if (mergedFocusHandler.value)
-                    (0, _utils_1.call)(mergedFocusHandler.value, e);
+            if (hasFocus.value && mergedFocusHandler.value) {
+                (0, _utils_1.call)(mergedFocusHandler.value, e);
             }
         };
         const handlePress = (eventName) => {
-            if (mergedDisabled.value ||
-                mergedLoading.value ||
-                mergedLoadingSkeleton.value) {
+            if (mergedDisabled.value || mergedLoading.value)
                 return;
-            }
             if (mergedPressHandler.value)
                 (0, _utils_1.call)(mergedPressHandler.value);
             if (hasFocus.value) {
                 isPressed.value = true;
                 window.addEventListener(eventName, () => {
                     isPressed.value = false;
-                }, {
-                    once: true,
-                    passive: true
-                });
+                }, { once: true, passive: true });
             }
         };
-        const resolveFirst = (name) => {
-            if (!(name in props))
-                return null;
-            return props[name] || slots[name] || listInjection[name].value || null;
-        };
+        const resolveSlot = (name) => slots[name] || null;
         return {
             mergedClsPrefix: listInjection.mergedClsPrefix,
-            mergedShowIcon: createRef('showIcon'),
-            mergedDescriptionFirst: createRef('descriptionFirst'),
-            mergedColumnsEven: createRef('columnsEven'),
-            mergedRounded: createRef('rounded'),
+            mergedHoverable,
             mergedDisabled,
             mergedLoading,
-            mergedLoadingSkeleton,
-            mergedHoverable,
+            mergedShowIcon,
+            mergedRounded,
             mergedTag: createRef('tag'),
-            resolveFirst,
+            resolveSlot,
             hasFocus,
             isPressed,
             handleClick,
@@ -108,14 +93,18 @@ exports.default = (0, vue_1.defineComponent)({
             handleBlur,
             handleFocus,
             bordered: listInjection.bordered,
-            showDivider: listInjection.showDivider
+            showDivider: listInjection.showDivider,
+            size: listInjection.size
         };
     },
     render() {
-        const { $slots, mergedClsPrefix, resolveFirst, showDivider } = this;
+        var _a, _b, _c, _d, _e, _f;
+        const { $slots, mergedClsPrefix, showDivider, prefixAlign, suffixAlign, size, resolveSlot } = this;
         const mergedTag = this.mergedTag || 'ul';
+        const skeletonOn = !!this.mergedLoading;
         const sharedCls = [
             `${mergedClsPrefix}-list-item`,
+            `${mergedClsPrefix}-list-item--${size}`,
             this.mergedHoverable && `${mergedClsPrefix}-list-item--hoverable`,
             this.mergedRounded && `${mergedClsPrefix}-list-item--rounded`,
             this.mergedDisabled && `${mergedClsPrefix}-list-item--disabled`,
@@ -129,70 +118,103 @@ exports.default = (0, vue_1.defineComponent)({
             onBlur: this.handleBlur,
             onFocus: this.handleFocus
         };
-        const prefixNode = $slots.prefix && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-list-item__prefix` }, $slots.prefix()));
-        const suffixNode = $slots.suffix && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-list-item__suffix` }, $slots.suffix()));
-        if ($slots.default) {
-            return (0, vue_1.h)(mergedTag, Object.assign({ class: [...sharedCls] }, sharedAttrs), [
-                prefixNode,
-                (0, vue_1.h)("div", { class: `${mergedClsPrefix}-list-item__main` }, $slots.default()),
-                suffixNode,
-                showDivider && (0, vue_1.h)("hr", { class: `${mergedClsPrefix}-list-item__divider` })
-            ]);
+        function renderIcon(icon) {
+            return () => (0, vue_1.h)(icon_1.UIcon, null, { default: () => (0, vue_1.h)(icon) });
         }
-        else {
-            let avatarNode, headerNode, descriptionNode, headerSideNode, descriptionSideNode, iconNode;
-            const resolveAvatar = resolveFirst('avatar');
-            const resolveHeader = resolveFirst('header');
-            const resolveDescription = resolveFirst('description');
-            const resolveHeaderSide = resolveFirst('headerSide');
-            const resolveDescriptionSide = resolveFirst('descriptionSide');
-            const resolveIcon = resolveFirst('icon');
-            if (this.mergedLoading) {
-                iconNode = ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-list-item__icon` },
-                    (0, vue_1.h)(_internal_1.UBaseLoading, { clsPrefix: mergedClsPrefix, key: "loading", strokeWidth: 20 })));
+        const renderAvatar = () => {
+            if (!Object.values(this.avatar).length)
+                return null;
+            const Avatar = ((0, vue_1.h)(avatar_1.UAvatar, Object.assign({ size: size }, this.avatar, { icon: undefined }), renderIcon(this.avatar.icon)));
+            return this.avatar.hasBadge ? ((0, vue_1.h)(badge_1.UBadge, Object.assign({}, this.badge), { default: () => Avatar })) : (Avatar);
+        };
+        const prefixSkeletonSizes = {
+            large: 54,
+            medium: 48,
+            small: 42
+        };
+        const prefixSkeletonSize = prefixSkeletonSizes[size];
+        const prefixSkeletonborderRadius = this.avatar.circle ? 100 : 12;
+        const prefixNode = $slots.prefix || renderAvatar() ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-list-item__prefix ${mergedClsPrefix}-align-${prefixAlign}` }, skeletonOn || this.loadingPrefix ? ((0, vue_1.h)(_internal_1.UBaseSkeleton, { width: `${prefixSkeletonSize}px`, height: `${prefixSkeletonSize}px`, style: { borderRadius: `${prefixSkeletonborderRadius}px` } })) : $slots.prefix ? ($slots.prefix()) : (renderAvatar()))) : null;
+        const header = ((_a = this.header) === null || _a === void 0 ? void 0 : _a.text) || resolveSlot('header');
+        const description = ((_b = this.description) === null || _b === void 0 ? void 0 : _b.text) || resolveSlot('description');
+        const hasLeft = !!(header || description);
+        const textVariant = {
+            large: {
+                title: 'body-l-medium',
+                subtitle: 'body-m-medium'
+            },
+            medium: {
+                title: 'body-m-medium',
+                subtitle: 'body-s-medium'
+            },
+            small: {
+                title: 'body-l-medium',
+                subtitle: 'body-m-medium'
             }
-            if (this.mergedLoadingSkeleton) {
-                avatarNode = resolveAvatar && ((0, vue_1.h)(_internal_1.UBaseSkeleton, { class: `${mergedClsPrefix}-list-item__avatar`, circle: true, height: "48px" }));
-                headerNode = resolveHeader && ((0, vue_1.h)(_internal_1.UBaseSkeleton, { class: `${mergedClsPrefix}-list-item__title`, text: true, sharp: false, style: "border-radius: 4px;" }));
-                descriptionNode = resolveDescription && ((0, vue_1.h)(_internal_1.UBaseSkeleton, { class: `${mergedClsPrefix}-list-item__subtitle`, text: true, sharp: false, width: "82%", style: "border-radius: 4px;" }));
-                headerSideNode = resolveHeaderSide && ((0, vue_1.h)(_internal_1.UBaseSkeleton, { class: `${mergedClsPrefix}-list-item__title`, text: true, sharp: false, width: "60%", style: "border-radius: 4px;" }));
-                descriptionSideNode = resolveDescriptionSide && ((0, vue_1.h)(_internal_1.UBaseSkeleton, { class: `${mergedClsPrefix}-list-item__subtitle`, text: true, sharp: false, style: "border-radius: 4px;" }));
-                iconNode = resolveIcon && ((0, vue_1.h)(_internal_1.UBaseSkeleton, { class: `${mergedClsPrefix}-list-item__icon`, circle: true, height: "24px" }));
+        };
+        const defaultHeaderProps = {
+            position: 'top',
+            variant: textVariant[size].title,
+            align: 'center',
+            skeleton: {
+                sharp: false,
+                height: '24px'
             }
-            else {
-                avatarNode = resolveAvatar && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-list-item__avatar` }, resolveAvatar()));
-                headerNode = resolveHeader && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-list-item__title` }, resolveHeader()));
-                descriptionNode = resolveDescription && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-list-item__subtitle` }, resolveDescription()));
-                headerSideNode = resolveHeaderSide && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-list-item__title` }, resolveHeaderSide()));
-                descriptionSideNode = resolveDescriptionSide && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-list-item__subtitle` }, resolveDescriptionSide()));
-                iconNode = this.mergedShowIcon ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-list-item__icon` }, resolveIcon ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-list-item__subtitle` }, resolveIcon())) : ((0, vue_1.h)(_internal_1.UBaseIcon, { clsPrefix: mergedClsPrefix }, () => (0, vue_1.h)(icons_1.ChevronRightIcon, null))))) : null;
+        };
+        const defaultDescriptionProps = {
+            position: 'bottom',
+            variant: textVariant[size].subtitle,
+            skeleton: {
+                sharp: false,
+                height: '24px'
             }
-            const leftNode = headerNode || descriptionNode ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-list-item__content ${mergedClsPrefix}-list-item__content--left` },
-                headerNode,
-                descriptionNode)) : null;
-            const rightNode = headerSideNode || descriptionSideNode ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-list-item__content ${mergedClsPrefix}-list-item__content--right` },
-                headerSideNode,
-                descriptionSideNode)) : null;
-            return (0, vue_1.h)(mergedTag, Object.assign({ class: [
-                    ...sharedCls,
-                    `${mergedClsPrefix}-list-item--default`,
-                    this.mergedDescriptionFirst &&
-                        `${mergedClsPrefix}-list-item--description-first`,
-                    this.mergedColumnsEven &&
-                        `${mergedClsPrefix}-list-item--columns-even`,
-                    this.mergedLoadingSkeleton &&
-                        `${mergedClsPrefix}-list-item--loading-skeleton`
-                ] }, sharedAttrs), [
-                prefixNode,
-                (0, vue_1.h)("div", { class: `${mergedClsPrefix}-list-item__main` },
-                    avatarNode,
-                    (0, vue_1.h)("div", { class: `${mergedClsPrefix}-list-item__text` },
-                        leftNode,
-                        rightNode),
-                    iconNode),
-                suffixNode,
-                showDivider && (0, vue_1.h)("hr", { class: `${mergedClsPrefix}-list-item__divider` })
-            ]);
+        };
+        const headerProps = Object.assign(Object.assign(Object.assign({}, defaultHeaderProps), this.header), { skeleton: Object.assign(Object.assign({}, defaultHeaderProps.skeleton), (_c = this.header) === null || _c === void 0 ? void 0 : _c.skeleton) });
+        const descriptionProps = Object.assign(Object.assign(Object.assign({}, defaultDescriptionProps), this.description), { skeleton: Object.assign(Object.assign({}, defaultDescriptionProps.skeleton), (_d = this.description) === null || _d === void 0 ? void 0 : _d.skeleton) });
+        function renderTextNode(content, props, classSuffix) {
+            return content ? ((0, vue_1.h)(_internal_1.InternalUText, Object.assign({}, props, { text: undefined, align: undefined, skeleton: undefined, class: `${mergedClsPrefix}-list-item__${classSuffix}` }), {
+                default: () => skeletonOn || (props === null || props === void 0 ? void 0 : props.loading) ? ((0, vue_1.h)(_internal_1.UBaseSkeleton, Object.assign({}, props.skeletonPro, { style: { borderRadius: '6px' } }))) : typeof content === 'string' ? (props.text) : (content())
+            })) : null;
         }
+        const headerNode = renderTextNode(header, headerProps, 'title');
+        const descriptionNode = renderTextNode(description, descriptionProps, 'subtitle');
+        const headerSide = ((_e = this.headerSide) === null || _e === void 0 ? void 0 : _e.text) || resolveSlot('headerSide');
+        const descriptionSide = ((_f = this.descriptionSide) === null || _f === void 0 ? void 0 : _f.text) || resolveSlot('descriptionSide');
+        const hasRight = !!(headerSide || descriptionSide);
+        const headerSideProps = Object.assign(Object.assign({}, defaultHeaderProps), this.headerSide);
+        const descriptionSideProps = Object.assign(Object.assign({}, defaultDescriptionProps), this.descriptionSide);
+        const headerSideNode = renderTextNode(headerSide, headerSideProps, 'title');
+        const descriptionSideNode = renderTextNode(descriptionSide, descriptionSideProps, 'subtitle');
+        const leftNode = hasLeft ? ((0, vue_1.h)("div", { class: [
+                `${mergedClsPrefix}-list-item__content`,
+                `${mergedClsPrefix}-list-item__content--left`,
+                headerProps.align && `${mergedClsPrefix}-align-${headerProps.align}`,
+                !(headerSide || descriptionSide) &&
+                    `${mergedClsPrefix}-list-item__content--full`
+            ] }, (headerProps === null || headerProps === void 0 ? void 0 : headerProps.position) === 'top' &&
+            descriptionProps.position === 'bottom'
+            ? [headerNode, descriptionNode]
+            : [descriptionNode, headerNode])) : null;
+        const rightNode = hasRight ? ((0, vue_1.h)("div", { class: [
+                `${mergedClsPrefix}-list-item__content`,
+                `${mergedClsPrefix}-list-item__content--right`,
+                headerSideProps.align &&
+                    `${mergedClsPrefix}-align-${headerSideProps.align}`,
+                !(header || description) &&
+                    `${mergedClsPrefix}-list-item__content--full`
+            ] }, (headerSideProps === null || headerSideProps === void 0 ? void 0 : headerSideProps.position) === 'top' &&
+            descriptionSideProps.position === 'bottom'
+            ? [headerSideNode, descriptionSideNode]
+            : [descriptionSideNode, headerSideNode])) : null;
+        const suffixIcon = !skeletonOn && this.mergedShowIcon ? ((0, vue_1.h)(_internal_1.UBaseIcon, { clsPrefix: mergedClsPrefix }, () => (0, vue_1.h)(icons_1.ChevronRightIcon, null))) : null;
+        const suffixSkeletonSize = 24;
+        const suffixNode = ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-list-item__suffix ${mergedClsPrefix}-align-${suffixAlign}` }, (skeletonOn || this.loadingSuffix) && this.mergedShowIcon ? ((0, vue_1.h)(_internal_1.UBaseSkeleton, { width: `${suffixSkeletonSize}px`, height: `${suffixSkeletonSize}px`, circle: true })) : ([$slots.suffix ? $slots.suffix() : suffixIcon])));
+        return (0, vue_1.h)(mergedTag, Object.assign({ class: sharedCls }, sharedAttrs), [
+            prefixNode,
+            (0, vue_1.h)("div", { class: `${mergedClsPrefix}-list-item__main` },
+                (0, vue_1.h)("div", { class: `${mergedClsPrefix}-list-item__text` }, $slots.default ? $slots.default() : [leftNode, rightNode])),
+            suffixNode,
+            showDivider && (0, vue_1.h)("hr", { class: `${mergedClsPrefix}-list-item__divider` })
+        ]);
     }
 });

package/lib/list/src/interface.d.ts

@@ -1,6 +1,7 @@
 import { ExtractPublicPropTypes } from '../../_utils';
 import type { PropType, Ref } from 'vue';
 import { VNodeChild } from 'vue';
+export type Size = 'small' | 'medium' | 'large';
 export interface BooleanProp {
     type: BooleanConstructor;
     default: undefined;

package/lib/list/src/props.d.ts

@@ -1,6 +1,10 @@
 import { ArrayMouseHandler, ArrayKeyboardHandler, ArrayEmptyHandler, ArrayFocusHandler, ExtractPublicPropTypes } from '../../_utils';
-import type { PropType, Ref } from 'vue';
-import { ListItemPropsBoolean, ListItemPropsRenderable, ExtractIntoInjection, ListInjectionBoolean, ListInjectionRenderable } from './interface';
+import type { Component, PropType, Ref } from 'vue';
+import { ListItemPropsBoolean, ListItemPropsRenderable, ExtractIntoInjection, ListInjectionBoolean, ListInjectionRenderable, Size } from './interface';
+import { InternalTextProps } from '../../_internal/typography';
+import { SkeletonProps } from '../../_internal/skeleton';
+import { AvatarProps } from '../../avatar';
+import { BadgeProps } from '../../badge';
 export declare const listItemPropsBoolean: Array<keyof ListItemPropsBoolean>;
 export declare const listItemPropsRenderable: Array<keyof ListItemPropsRenderable>;
 export declare const listItemBaseProps: {
@@ -39,11 +43,55 @@ export declare const listItemBaseProps: {
     icon: import("./interface").RenderableProp;
     avatar: import("./interface").RenderableProp;
 };
+export type HeaderPropObject = InternalTextProps & Partial<{
+    loading: boolean;
+    position: 'top' | 'bottom';
+    skeleton: SkeletonProps;
+    align: 'stretch' | 'start' | 'center' | 'end';
+}>;
+export type DescriptionPropsObject = InternalTextProps & Partial<{
+    loading: boolean;
+    position: 'top' | 'bottom';
+    skeleton: SkeletonProps;
+}>;
 export declare const listItemProps: {
+    avatar: {
+        type: PropType<AvatarProps & {
+            icon: Component;
+            hasBadge?: boolean;
+        }>;
+        default: () => {};
+    };
+    badge: {
+        type: PropType<BadgeProps>;
+        default: () => {};
+    };
     tag: {
         type: StringConstructor;
         default: undefined;
     };
+    prefixAlign: {
+        type: PropType<"start" | "center" | "end">;
+        default: string;
+    };
+    suffixAlign: {
+        type: PropType<"start" | "center" | "end">;
+        default: string;
+    };
+    loadingPrefix: BooleanConstructor;
+    loadingSuffix: BooleanConstructor;
+    header: {
+        type: PropType<HeaderPropObject>;
+    };
+    description: {
+        type: PropType<DescriptionPropsObject>;
+    };
+    headerSide: {
+        type: PropType<HeaderPropObject>;
+    };
+    descriptionSide: {
+        type: PropType<DescriptionPropsObject>;
+    };
     onClick: {
         type: PropType<ArrayMouseHandler | undefined>;
         default: undefined;
@@ -72,14 +120,13 @@ export declare const listItemProps: {
     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;
 };
 export declare const listProps: {
+    size: {
+        type: PropType<Size>;
+        default: string;
+    };
     showIcon: {
         type: BooleanConstructor;
         default: boolean;
@@ -129,18 +176,12 @@ export declare const listProps: {
     icon: import("./interface").RenderableProp;
     avatar: import("./interface").RenderableProp;
     theme: 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;
@@ -154,22 +195,19 @@ export declare const listProps: {
         borderColor: string;
         borderColorModal: string;
         borderColorPopover: string;
-        borderRadius: string;
-        fontSize: string;
+        borderRadiusLarge: string;
+        borderRadiusMedium: string;
+        borderRadiusSmall: string;
+        padding: string;
+        suffixSize: string;
     }, any>>;
     themeOverrides: 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;
@@ -183,22 +221,19 @@ export declare const listProps: {
         borderColor: string;
         borderColorModal: string;
         borderColorPopover: string;
-        borderRadius: string;
-        fontSize: string;
+        borderRadiusLarge: string;
+        borderRadiusMedium: string;
+        borderRadiusSmall: string;
+        padding: string;
+        suffixSize: string;
     }, any>>>;
     builtinThemeOverrides: 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;
@@ -212,8 +247,11 @@ export declare const listProps: {
         borderColor: string;
         borderColorModal: string;
         borderColorPopover: string;
-        borderRadius: string;
-        fontSize: string;
+        borderRadiusLarge: string;
+        borderRadiusMedium: string;
+        borderRadiusSmall: string;
+        padding: string;
+        suffixSize: string;
     }, any>>>;
 };
 export type ListInjection = ExtractIntoInjection<typeof listItemBaseProps> & ListInjectionBoolean & ListInjectionRenderable & {
@@ -222,6 +260,7 @@ export type ListInjection = ExtractIntoInjection<typeof listItemBaseProps> & Lis
     bordered: Ref<boolean>;
     clickable: Ref<boolean>;
     showDivider: Ref<boolean>;
+    size: Ref<Size>;
 };
 export declare const listInjectionKey: import("vue").InjectionKey<ListInjection>;
 export type ListItemProps = ExtractPublicPropTypes<typeof listItemProps>;

package/lib/list/src/props.js

@@ -10,8 +10,7 @@ exports.listItemPropsBoolean = [
     'hoverable',
     'rounded',
     'disabled',
-    'loading',
-    'loadingSkeleton'
+    'loading'
 ];
 exports.listItemPropsRenderable = [
     'header',
@@ -45,11 +44,32 @@ exports.listItemBaseProps = Object.assign(Object.assign(Object.assign({}, export
         type: [Function, Array, undefined],
         default: undefined
     } });
-exports.listItemProps = Object.assign(Object.assign({}, exports.listItemBaseProps), { tag: {
+const headerProps = {
+    type: Object
+};
+const descriptionProps = {
+    type: Object
+};
+exports.listItemProps = Object.assign(Object.assign({}, exports.listItemBaseProps), { avatar: {
+        type: Object,
+        default: () => ({})
+    }, badge: {
+        type: Object,
+        default: () => ({})
+    }, tag: {
         type: String,
         default: undefined
-    } });
-exports.listProps = Object.assign(Object.assign(Object.assign({}, _mixins_1.useTheme.props), exports.listItemBaseProps), { showIcon: {
+    }, prefixAlign: {
+        type: String,
+        default: 'start'
+    }, suffixAlign: {
+        type: String,
+        default: 'start'
+    }, loadingPrefix: Boolean, loadingSuffix: Boolean, header: headerProps, description: descriptionProps, headerSide: headerProps, descriptionSide: descriptionProps });
+exports.listProps = Object.assign(Object.assign(Object.assign({}, _mixins_1.useTheme.props), exports.listItemBaseProps), { size: {
+        type: [String],
+        default: 'medium'
+    }, showIcon: {
         type: Boolean,
         default: true
     }, tag: {