@uzum-tech/ui 1.5.0 → 1.5.2

package/lib/list/src/List.js

@@ -8,6 +8,7 @@ const _mixins_1 = require("../../_mixins");
 const styles_1 = require("../styles");
 const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
 const props_1 = require("./props");
+const _utils_1 = require("../../_utils");
 exports.default = (0, vue_1.defineComponent)({
     name: 'List',
     props: props_1.listProps,
@@ -23,11 +24,10 @@ exports.default = (0, vue_1.defineComponent)({
             acc[item] = (0, vue_1.toRef)(props, item);
             return acc;
         }, {});
-        (0, vue_1.provide)(props_1.listInjectionKey, Object.assign(Object.assign(Object.assign({}, booleanInjectedRefs), renderableInjectedRefs), { tag: (0, vue_1.toRef)(props, 'itemTag'), mergedClsPrefix: mergedClsPrefixRef, onClick: (0, vue_1.toRef)(props, 'onClick'), onKeypress: (0, vue_1.toRef)(props, 'onKeypress'), onPress: (0, vue_1.toRef)(props, 'onPress'), onBlur: (0, vue_1.toRef)(props, 'onBlur'), onFocus: (0, vue_1.toRef)(props, 'onFocus'), bordered: (0, vue_1.toRef)(props, 'bordered'), clickable: (0, vue_1.toRef)(props, 'clickable'), showDivider: (0, vue_1.toRef)(props, 'showDivider') }));
+        (0, vue_1.provide)(props_1.listInjectionKey, Object.assign(Object.assign(Object.assign({}, booleanInjectedRefs), renderableInjectedRefs), { tag: (0, vue_1.toRef)(props, 'itemTag'), mergedClsPrefix: mergedClsPrefixRef, onClick: (0, vue_1.toRef)(props, 'onClick'), onKeypress: (0, vue_1.toRef)(props, 'onKeypress'), onPress: (0, vue_1.toRef)(props, 'onPress'), onBlur: (0, vue_1.toRef)(props, 'onBlur'), onFocus: (0, vue_1.toRef)(props, 'onFocus'), bordered: (0, vue_1.toRef)(props, 'bordered'), clickable: (0, vue_1.toRef)(props, 'clickable'), showDivider: (0, vue_1.toRef)(props, 'showDivider'), size: (0, vue_1.toRef)(props, 'size') }));
         const cssVarsRef = (0, vue_1.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, [(0, _utils_1.createKey)('borderRadius', props.size)]: borderRadius } } = themeRef.value;
             return {
-                '--u-font-size': fontSize,
                 '--u-bezier': cubicBezierEaseInOut,
                 '--u-text-color': textColor,
                 '--u-color': color,
@@ -40,21 +40,17 @@ exports.default = (0, vue_1.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/lib/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;

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,99 @@ 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), 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}` }), 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;