@uzum-tech/ui 1.5.1 → 1.5.2

package/dist/index.js

@@ -34211,6 +34211,7 @@
         fontBodyMedium,
         textQuaternary,
         elementsPrimary,
+        elementsSecondary,
         elementsSenary,
         elementsQuinary,
         textPrimary,
@@ -34262,7 +34263,7 @@
         textColorHoverCheckable: textPrimary,
         textColorPressedCheckable: textPrimary,
         textColorChecked: textQuaternary,
-        colorCheckable: elementsTertiary,
+        colorCheckable: elementsSecondary,
         colorHoverCheckable: elementsQuaternary,
         colorPressedCheckable: elementsQuaternary,
         colorChecked: elementsPrimary,
@@ -34494,6 +34495,7 @@
     cursor: pointer;
     box-shadow: none;
     color: var(--u-text-color-checkable);
+    padding: 0px 8px;
     background-color: var(--u-color-checkable);
     transition: border-color .3s var(--u-bezier);
   `, [cNotM("disabled", [c$1("&:hover", "background-color: var(--u-color-hover-checkable);", [cNotM("checked", "color: var(--u-text-color-hover-checkable);")]), c$1("&:focus", `
@@ -34503,7 +34505,10 @@
       transition: border-color .3s var(--u-bezier);`, [cNotM("checked", "color: var(--u-text-color-pressed-checkable);")])]), cM("checked", `
       color: var(--u-text-color-checked);
       background-color: var(--u-color-checked);
-    `, [cNotM("disabled", [c$1("&:hover", "background-color: var(--u-color-checked-hover);"), c$1("&:focus", "background-color: var(--u-color-checked-hover);"), c$1("&:active", "background-color: var(--u-color-checked-pressed);")])])])]);
+    `, [cE("border", `
+        border-color: var(--u-color-checked);
+        transition: none;
+      `), cNotM("disabled", [c$1("&:hover", "background-color: var(--u-color-checked-hover);"), c$1("&:focus", "background-color: var(--u-color-checked-hover);"), c$1("&:active", "background-color: var(--u-color-checked-pressed);")])])])]);
 
     const tagProps = {
       ...useTheme.props,
@@ -40050,32 +40055,24 @@
     const self$C = vars => {
       const {
         borderRadius,
+        borderRadiusMedium,
+        borderRadiusSmall,
         iconMedium,
-        fontBodyLarge,
-        lineHeightBodyLarge,
-        lineHeightBodyMedium,
         textSecondary,
         iconSmall,
         elementsQuaternary,
         textTertiary,
         textPrimary,
-        fontBodyMedium,
         containerPrimary,
         elementsTertiary
       } = vars;
       return {
-        padding: "8px 24px",
         iconSize: iconMedium,
         iconSpace: "16px",
         suffixSpace: "20px",
         prefixSpace: "20px",
-        titleSize: fontBodyLarge,
-        titleLineHeight: lineHeightBodyLarge,
-        subtitleSize: fontBodyMedium,
-        subtitleLineHeight: lineHeightBodyMedium,
         subtitleColor: textSecondary,
         avatarSpace: iconSmall,
-        minHeight: "64px",
         colorFocus: elementsQuaternary,
         pressedScale: "0.98",
         textColorDisabled: textTertiary,
@@ -40089,8 +40086,11 @@
         borderColor: elementsQuaternary,
         borderColorModal: elementsQuaternary,
         borderColorPopover: elementsQuaternary,
-        borderRadius,
-        fontSize: fontBodyMedium
+        borderRadiusLarge: borderRadius,
+        borderRadiusMedium,
+        borderRadiusSmall,
+        padding: "12px 24px",
+        suffixSize: "24px"
       };
     };
     const listLight = {
@@ -41765,7 +41765,7 @@
         codeBorder
       } = vars;
       return {
-        margin: "16px 0 16px 0",
+        margin: "0px",
         aTextColor: brandPrimary500,
         blockquoteTextColor: textPrimary,
         blockquotePrefixColor: elementsQuaternary,
@@ -41853,7 +41853,6 @@
   `), c$1("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);
@@ -47910,7 +47909,7 @@
       textColor: String,
       offset: Array
     };
-    var Badge = vue.defineComponent({
+    var UBadge = vue.defineComponent({
       name: "Badge",
       props: badgeProps,
       setup(props, { slots }) {
@@ -65039,6 +65038,7 @@
         default: () => []
       },
       loading: Boolean,
+      loadingSkeleton: Boolean,
       bordered: {
         type: Boolean,
         default: void 0
@@ -86118,6 +86118,7 @@
           maxHeightRef,
           stripedRef,
           loadingRef,
+          loadingSkeletonRef,
           onLoadRef,
           loadingKeySetRef,
           expandableRef,
@@ -86344,6 +86345,7 @@
           scrollX: scrollXRef,
           cols: colsRef,
           loading: loadingRef,
+          loadingSkeleton: loadingSkeletonRef,
           bodyShowHeaderOnly: bodyShowHeaderOnlyRef,
           shouldDisplaySomeTablePart: shouldDisplaySomeTablePartRef,
           empty: emptyRef,
@@ -86775,7 +86777,7 @@
                   },
                   /* @__PURE__ */ vue.h("colgroup", null, cols.map((col) => /* @__PURE__ */ vue.h("col", { key: col.key, style: col.style }))),
                   this.showHeader ? /* @__PURE__ */ vue.h(TableHeader, { discrete: false }) : null,
-                  this.loading ? /* @__PURE__ */ vue.h(BodySkeleton, null) : !this.empty ? /* @__PURE__ */ vue.h(
+                  this.loadingSkeleton ? /* @__PURE__ */ vue.h(BodySkeleton, null) : !this.empty ? /* @__PURE__ */ vue.h(
                     "tbody",
                     {
                       "data-u-id": componentId,
@@ -88733,6 +88735,7 @@
           mergedSortStateRef,
           mergedFilterStateRef,
           loadingRef: vue.toRef(props, "loading"),
+          loadingSkeletonRef: vue.toRef(props, "loadingSkeleton"),
           rowClassNameRef: vue.toRef(props, "rowClassName"),
           mergedCheckedRowKeySetRef,
           mergedExpandedRowKeysRef,
@@ -106956,7 +106959,7 @@
     justify-content: space-between;
   `)]);
 
-    const headerProps$1 = {
+    const headerProps$2 = {
       position: positionProp,
       inverted: Boolean,
       bordered: {
@@ -106968,7 +106971,7 @@
       name: "LayoutHeader",
       props: {
         ...useTheme.props,
-        ...headerProps$1
+        ...headerProps$2
       },
       setup(props) {
         const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props);
@@ -108798,13 +108801,18 @@
       }
     });
 
-    var style$w = c$1([cB("list", `
+    var style$w = c$1([cB("align-start", `
+    align-self: self-start;
+  `), cB("align-center", `
+    align-self: center;
+  `), cB("align-end", `
+    align-self: self-end;
+  `), cB("list", `
     --u-merged-border-color: var(--u-border-color);
     --u-merged-color: var(--u-color);
     --u-merged-color-focus: var(--u-color-focus);
     --u-merged-color-hover: var(--u-color-hover);
     margin: 0;
-    font-size: var(--u-font-size);
     transition:
       background-color .3s var(--u-bezier),
       color .3s var(--u-bezier),
@@ -108815,17 +108823,10 @@
     background-color: var(--u-merged-color);
   `, [cM("clickable", [cB("list-item", `
         cursor: pointer;
-      `)]), cM("bordered", `
-      border: 1px solid var(--u-merged-border-color);
-      border-radius: var(--u-border-radius);
-    `, [cB("list-item", [c$1("&:first-child", `
-          border-radius: var(--u-border-radius);
-          border-bottom-left-radius: 0;
-          border-bottom-right-radius: 0;
-        `), c$1("&:last-child", `
-          border-radius: var(--u-border-radius);
-          border-top-left-radius: 0;
-          border-top-right-radius: 0;
+      `)]), cM("bordered", [cB("list-item", `
+        border-bottom: 1px solid var(--u-merged-border-color);
+        `, [c$1("&:last-child", `
+          border: none;
         `)])]), cE("header, footer", `
       padding: var(--u-padding);
       padding-left: 0px;
@@ -108845,11 +108846,10 @@
     position: relative;
     outline: none;
     display: flex;
-    align-items: center;
     padding: var(--u-padding);
-    padding-left: 0;
-    padding-right: 0;
-  `, [cE("main", `
+  `, [cB("skeleton", `
+      height: 24px
+    `), cE("main", `
       flex: 1;
     `), c$1("&:focus", `
       outline: none;
@@ -108864,81 +108864,43 @@
       left: 0;
     `), cE("icon", `
       display: flex;
-      font-size: var(--u-icon-size);
       margin-left: var(--u-icon-space);
     `), cE("suffix", `
       margin-left: var(--u-suffix-space);
+      font-size: var(--u-suffix-size);
+      align-self: center;
     `), cE("prefix", `
       margin-right: var(--u-prefix-space);
+      display: flex;
     `), cE("content", `
-      flex-grow: 1;
-      padding: 0;
       display: flex;
       flex-direction: column;
-      align-items: stretch;
+      gap: 4px;
     `, [cM("right", `
-        margin-left: auto;
         text-align: right;
-        align-items: flex-end;
-      `, [cE("title", `
-          font-weight: 600;
-        `)]), c$1("+", [cE("content", `
-          margin-left: 24px;
-          flex-grow: 0;
-        `)])]), cE("text", `
-      flex-grow: 1;
-      display: flex;
-      align-items: flex-start;
+      `), cM("full", {
+      width: "100%"
+    })]), cE("text", `
+      display: grid;
+      gap: 16px;
+      grid-template-columns: 1fr 1fr;
+      height: 100%
     `), cE("title", `
-      padding-top: 4px;
       flex-grow: 1;
-      margin-bottom: 4px;
-      font-size: var(--u-title-size);
-      font-weight: 500;
-      line-height: var(--u-title-line-height);
-    `, [c$1("&:last-child", `
-        margin-bottom: 0;
-      `)]), cE("subtitle", `
-      padding-bottom: 4px;
+    `), cE("subtitle", `
       flex-grow: 1;
-      font-size: var(--u-subtitle-size);
-      font-weight: 500;
-      line-height: var(--u-subtitle-line-height);
       color: var(--u-subtitle-color);
     `), cE("subtitle,title", [c$1("&:last-child:first-child", `
-        padding: 12px 0;
-      `)]), cE("avatar", `
-      display: flex;
-      margin-right: var(--u-avatar-space);
-    `), c$1("&:last-child", [cE("divider", `
+      `)]), c$1("&:last-child", [cE("divider", `
         display: none;
       `)]), cM("default", `
-      min-height: var(--u-min-height);
       padding: var(--u-padding);
     `, [cE("main", `
-        display: flex;
+        display: none;
         align-items: center;
-      `)]), cM("description-first", [cE("title", `
-        padding-top: 0;
-        padding-bottom: 4px;
-        order: 1;
-        margin-top: 4px;
-        margin-bottom: 0px;
-      `, [c$1("&:last-child", `
-          margin-top: 0;
-        `)]), cE("subtitle", `
-        padding-bottom: 0;
-        padding-top: 4px;
-      `)]), cM("columns-even", [cE("content", [cM("right", `
-          flex-grow: 1;
-          text-align: left;
-          align-items: stretch;
-        `)])]), cM("bordered", `
-      padding: var(--u-padding);
-    `), cNotM("loading", [cNotM("disabled", [cNotM("loading-skeleton", [cM("hoverable", `
+      `)]), cNotM("loading", [cNotM("disabled", [cNotM("loading-skeleton", [cM("hoverable", `
             cursor: pointer;
             user-select: none;
-            padding: var(--u-padding);
           `, [c$1("&:hover", `
               background: var(--u-merged-color-hover);
             `), c$1("&:focus,&:active", `
@@ -108951,26 +108913,7 @@
       border-radius: var(--u-border-radius);
     `), cM("disabled", [cE("text, subtitle", `
         color: var(--u-text-color-disabled);
-      `)]), cM("loading-skeleton", [cE("content", `
-        padding: 5px 0;
-      `), cE("content--left", `
-        flex-grow: 0;
-        width: calc(66.38% - 8px);
-      `), cE("content--right", `
-        flex-grow: 0;
-        width: calc(33.62% - 8px);
-      `), cE("title,subtitle", [c$1("&:first-child:last-child", `
-          padding: 0;
-        `)]), cE("title", `
-        margin-bottom: 8px;
-      `, [c$1("&:last-child", `
-          margin-bottom: 0;
-        `)]), cM("description-first", [cE("title", `
-          margin-bottom: 0;
-          margin-top: 8px;
-        `, [c$1("&:last-child", `
-            margin-top: 0;
-          `)])])])]), insideModal(cB("list", `
+      `)])]), insideModal(cB("list", `
       --u-merged-color-hover: var(--u-color-hover-modal);
       --u-merged-color: var(--u-color-modal);
       --u-merged-border-color: var(--u-border-color-modal);
@@ -108980,7 +108923,7 @@
       --u-merged-border-color: var(--u-border-color-popover);
     `))]);
 
-    const listItemPropsBoolean = ["showIcon", "descriptionFirst", "columnsEven", "hoverable", "rounded", "disabled", "loading", "loadingSkeleton"];
+    const listItemPropsBoolean = ["showIcon", "descriptionFirst", "columnsEven", "hoverable", "rounded", "disabled", "loading"];
     const listItemPropsRenderable = ["header", "description", "headerSide", "descriptionSide", "icon", "avatar"];
     const booleanDefault = {};
     const renderableDefault = {};
@@ -109020,17 +108963,49 @@
         default: void 0
       }
     };
+    const headerProps$1 = {
+      type: Object
+    };
+    const descriptionProps = {
+      type: Object
+    };
     const listItemProps = {
       ...listItemBaseProps,
+      avatar: {
+        type: Object,
+        default: () => ({})
+      },
+      badge: {
+        type: Object,
+        default: () => ({})
+      },
       tag: {
         type: String,
         default: void 0
-      }
+      },
+      prefixAlign: {
+        type: String,
+        default: "start"
+      },
+      suffixAlign: {
+        type: String,
+        default: "start"
+      },
+      loadingPrefix: Boolean,
+      loadingSuffix: Boolean,
+      header: headerProps$1,
+      description: descriptionProps,
+      headerSide: headerProps$1,
+      descriptionSide: descriptionProps
     };
     const listProps = {
       ...useTheme.props,
       // all of the ListItem props is should be in the List component
       ...listItemBaseProps,
+      size: {
+        type: [String],
+        default: "medium"
+      },
       showIcon: {
         type: Boolean,
         default: true
@@ -109083,13 +109058,13 @@
           onFocus: vue.toRef(props, "onFocus"),
           bordered: vue.toRef(props, "bordered"),
           clickable: vue.toRef(props, "clickable"),
-          showDivider: vue.toRef(props, "showDivider")
+          showDivider: vue.toRef(props, "showDivider"),
+          size: vue.toRef(props, "size")
         });
         const cssVarsRef = vue.computed(() => {
           const {
             common: { cubicBezierEaseInOut },
             self: {
-              fontSize,
               textColor,
               color,
               colorModal,
@@ -109097,7 +109072,6 @@
               borderColor,
               borderColorModal,
               borderColorPopover,
-              borderRadius,
               colorHover,
               colorHoverModal,
               colorHoverPopover,
@@ -109106,20 +109080,16 @@
               iconSpace,
               suffixSpace,
               prefixSpace,
-              titleSize,
-              titleLineHeight,
-              subtitleSize,
-              subtitleLineHeight,
               subtitleColor,
               avatarSpace,
-              minHeight,
               colorFocus,
               pressedScale,
-              textColorDisabled
+              textColorDisabled,
+              suffixSize,
+              [createKey("borderRadius", props.size)]: borderRadius
             }
           } = themeRef.value;
           return {
-            "--u-font-size": fontSize,
             "--u-bezier": cubicBezierEaseInOut,
             "--u-text-color": textColor,
             "--u-color": color,
@@ -109132,21 +109102,17 @@
             "--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 ? useThemeClass("list", void 0, cssVarsRef, props) : void 0;
@@ -109185,7 +109151,9 @@
 
     var ListItem = vue.defineComponent({
       name: "ListItem",
-      props: listItemProps,
+      props: {
+        ...listItemProps
+      },
       setup(props, { slots }) {
         const listInjection = vue.inject(listInjectionKey, null);
         if (!listInjection) {
@@ -109204,22 +109172,21 @@
         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 = vue.computed(() => {
-          return !mergedDisabled.value && mergedHoverable.value;
-        });
+        const hasFocus = vue.computed(
+          () => !mergedDisabled.value && mergedHoverable.value
+        );
         const isPressed = vue.ref(false);
         const handleClick = (e) => {
           if (!mergedDisabled.value) {
             if (mergedClickHandler.value) call(mergedClickHandler.value, e);
-            if (e.which === 1 || e.button === 0) {
-              handlePress("mouseup");
-            }
+            if (e.which === 1 || e.button === 0) handlePress("mouseup");
           }
         };
         const handleKeyPress = (e) => {
@@ -109227,27 +109194,23 @@
             const { code } = e;
             if (code === "Enter" || code === "Space" || code === "NumpadEnter") {
               e.preventDefault();
-              if (!e.repeat) {
-                handlePress("keyup");
-              }
+              if (!e.repeat) handlePress("keyup");
             }
             if (mergedKeypressHandler.value) call(mergedKeypressHandler.value, e);
           }
         };
         const handleBlur = (e) => {
-          if (hasFocus.value) {
-            if (mergedBlurHandler.value) call(mergedBlurHandler.value, e);
+          if (hasFocus.value && mergedBlurHandler.value) {
+            call(mergedBlurHandler.value, e);
           }
         };
         const handleFocus = (e) => {
-          if (hasFocus.value) {
-            if (mergedFocusHandler.value) call(mergedFocusHandler.value, e);
+          if (hasFocus.value && mergedFocusHandler.value) {
+            call(mergedFocusHandler.value, e);
           }
         };
         const handlePress = (eventName) => {
-          if (mergedDisabled.value || mergedLoading.value || mergedLoadingSkeleton.value) {
-            return;
-          }
+          if (mergedDisabled.value || mergedLoading.value) return;
           if (mergedPressHandler.value) call(mergedPressHandler.value);
           if (hasFocus.value) {
             isPressed.value = true;
@@ -109256,29 +109219,20 @@
               () => {
                 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,
@@ -109286,14 +109240,25 @@
           handleBlur,
           handleFocus,
           bordered: listInjection.bordered,
-          showDivider: listInjection.showDivider
+          showDivider: listInjection.showDivider,
+          size: listInjection.size
         };
       },
       render() {
-        const { $slots, mergedClsPrefix, resolveFirst, showDivider } = this;
+        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`,
@@ -109307,139 +109272,170 @@
           onBlur: this.handleBlur,
           onFocus: this.handleFocus
         };
-        const prefixNode = $slots.prefix && /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefix}-list-item__prefix` }, $slots.prefix());
-        const suffixNode = $slots.suffix && /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefix}-list-item__suffix` }, $slots.suffix());
-        if ($slots.default) {
-          return vue.h(
-            mergedTag,
+        function renderIcon(icon) {
+          return () => vue.h(UIcon, null, { default: () => vue.h(icon) });
+        }
+        const renderAvatar = () => {
+          if (!Object.values(this.avatar).length) return null;
+          const Avatar = /* @__PURE__ */ vue.h(UAvatar, { size, ...this.avatar, ...{ icon: void 0 } }, renderIcon(this.avatar.icon));
+          return this.avatar.hasBadge ? /* @__PURE__ */ vue.h(UBadge, { ...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() ? /* @__PURE__ */ vue.h(
+          "div",
+          {
+            class: `${mergedClsPrefix}-list-item__prefix ${mergedClsPrefix}-align-${prefixAlign}`
+          },
+          skeletonOn || this.loadingPrefix ? /* @__PURE__ */ vue.h(
+            UBaseSkeleton,
             {
-              class: [...sharedCls],
-              ...sharedAttrs
-            },
-            [
-              prefixNode,
-              /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefix}-list-item__main` }, $slots.default()),
-              suffixNode,
-              showDivider && /* @__PURE__ */ vue.h("hr", { class: `${mergedClsPrefix}-list-item__divider` })
-            ]
-          );
-        } 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 = /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefix}-list-item__icon` }, /* @__PURE__ */ vue.h(
-              UBaseLoading,
-              {
-                clsPrefix: mergedClsPrefix,
-                key: "loading",
-                strokeWidth: 20
-              }
-            ));
+              width: `${prefixSkeletonSize}px`,
+              height: `${prefixSkeletonSize}px`,
+              style: { borderRadius: `${prefixSkeletonborderRadius}px` }
+            }
+          ) : $slots.prefix ? $slots.prefix() : renderAvatar()
+        ) : null;
+        const header = this.header?.text || resolveSlot("header");
+        const description = this.description?.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 && /* @__PURE__ */ vue.h(
-              UBaseSkeleton,
-              {
-                class: `${mergedClsPrefix}-list-item__avatar`,
-                circle: true,
-                height: "48px"
-              }
-            );
-            headerNode = resolveHeader && /* @__PURE__ */ vue.h(
-              UBaseSkeleton,
-              {
-                class: `${mergedClsPrefix}-list-item__title`,
-                text: true,
-                sharp: false,
-                style: "border-radius: 4px;"
-              }
-            );
-            descriptionNode = resolveDescription && /* @__PURE__ */ vue.h(
-              UBaseSkeleton,
-              {
-                class: `${mergedClsPrefix}-list-item__subtitle`,
-                text: true,
-                sharp: false,
-                width: "82%",
-                style: "border-radius: 4px;"
-              }
-            );
-            headerSideNode = resolveHeaderSide && /* @__PURE__ */ vue.h(
-              UBaseSkeleton,
-              {
-                class: `${mergedClsPrefix}-list-item__title`,
-                text: true,
-                sharp: false,
-                width: "60%",
-                style: "border-radius: 4px;"
-              }
-            );
-            descriptionSideNode = resolveDescriptionSide && /* @__PURE__ */ vue.h(
-              UBaseSkeleton,
-              {
-                class: `${mergedClsPrefix}-list-item__subtitle`,
-                text: true,
-                sharp: false,
-                style: "border-radius: 4px;"
-              }
-            );
-            iconNode = resolveIcon && /* @__PURE__ */ vue.h(
+        };
+        const defaultHeaderProps = {
+          position: "top",
+          variant: textVariant[size].title,
+          align: "center",
+          skeleton: {
+            sharp: false,
+            height: "24px"
+          }
+        };
+        const defaultDescriptionProps = {
+          position: "bottom",
+          variant: textVariant[size].subtitle,
+          skeleton: {
+            sharp: false,
+            height: "24px"
+          }
+        };
+        const headerProps = {
+          ...defaultHeaderProps,
+          ...this.header,
+          skeleton: {
+            ...defaultHeaderProps.skeleton,
+            ...this.header?.skeleton
+          }
+        };
+        const descriptionProps = {
+          ...defaultDescriptionProps,
+          ...this.description,
+          skeleton: {
+            ...defaultDescriptionProps.skeleton,
+            ...this.description?.skeleton
+          }
+        };
+        function renderTextNode(content, props, classSuffix) {
+          return content ? /* @__PURE__ */ vue.h(
+            InternalUText,
+            {
+              ...props,
+              text: void 0,
+              align: void 0,
+              skeleton: void 0,
+              class: `${mergedClsPrefix}-list-item__${classSuffix}`
+            },
+            skeletonOn || props?.loading ? /* @__PURE__ */ vue.h(
               UBaseSkeleton,
               {
-                class: `${mergedClsPrefix}-list-item__icon`,
-                circle: true,
-                height: "24px"
+                ...props.skeletonPro,
+                style: { borderRadius: "6px" }
               }
-            );
-          } else {
-            avatarNode = resolveAvatar && /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefix}-list-item__avatar` }, resolveAvatar());
-            headerNode = resolveHeader && /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefix}-list-item__title` }, resolveHeader());
-            descriptionNode = resolveDescription && /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefix}-list-item__subtitle` }, resolveDescription());
-            headerSideNode = resolveHeaderSide && /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefix}-list-item__title` }, resolveHeaderSide());
-            descriptionSideNode = resolveDescriptionSide && /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefix}-list-item__subtitle` }, resolveDescriptionSide());
-            iconNode = this.mergedShowIcon ? /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefix}-list-item__icon` }, resolveIcon ? /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefix}-list-item__subtitle` }, resolveIcon()) : /* @__PURE__ */ vue.h(UBaseIcon, { clsPrefix: mergedClsPrefix }, () => /* @__PURE__ */ vue.h(ChevronRightIcon, null))) : null;
-          }
-          const leftNode = headerNode || descriptionNode ? /* @__PURE__ */ vue.h(
-            "div",
-            {
-              class: `${mergedClsPrefix}-list-item__content ${mergedClsPrefix}-list-item__content--left`
-            },
-            headerNode,
-            descriptionNode
-          ) : null;
-          const rightNode = headerSideNode || descriptionSideNode ? /* @__PURE__ */ vue.h(
-            "div",
-            {
-              class: `${mergedClsPrefix}-list-item__content ${mergedClsPrefix}-list-item__content--right`
-            },
-            headerSideNode,
-            descriptionSideNode
+            ) : typeof content === "string" ? props.text : content()
           ) : null;
-          return vue.h(
-            mergedTag,
-            {
-              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,
-              /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefix}-list-item__main` }, avatarNode, /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefix}-list-item__text` }, leftNode, rightNode), iconNode),
-              suffixNode,
-              showDivider && /* @__PURE__ */ vue.h("hr", { class: `${mergedClsPrefix}-list-item__divider` })
-            ]
-          );
         }
+        const headerNode = renderTextNode(header, headerProps, "title");
+        const descriptionNode = renderTextNode(
+          description,
+          descriptionProps,
+          "subtitle"
+        );
+        const headerSide = this.headerSide?.text || resolveSlot("headerSide");
+        const descriptionSide = this.descriptionSide?.text || resolveSlot("descriptionSide");
+        const hasRight = !!(headerSide || descriptionSide);
+        const headerSideProps = { ...defaultHeaderProps, ...this.headerSide };
+        const descriptionSideProps = {
+          ...defaultDescriptionProps,
+          ...this.descriptionSide
+        };
+        const headerSideNode = renderTextNode(headerSide, headerSideProps, "title");
+        const descriptionSideNode = renderTextNode(
+          descriptionSide,
+          descriptionSideProps,
+          "subtitle"
+        );
+        const leftNode = hasLeft ? /* @__PURE__ */ vue.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?.position === "top" && descriptionProps.position === "bottom" ? [headerNode, descriptionNode] : [descriptionNode, headerNode]
+        ) : null;
+        const rightNode = hasRight ? /* @__PURE__ */ vue.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?.position === "top" && descriptionSideProps.position === "bottom" ? [headerSideNode, descriptionSideNode] : [descriptionSideNode, headerSideNode]
+        ) : null;
+        const suffixIcon = !skeletonOn && this.mergedShowIcon ? /* @__PURE__ */ vue.h(UBaseIcon, { clsPrefix: mergedClsPrefix }, () => /* @__PURE__ */ vue.h(ChevronRightIcon, null)) : null;
+        const suffixSkeletonSize = 24;
+        const suffixNode = /* @__PURE__ */ vue.h(
+          "div",
+          {
+            class: `${mergedClsPrefix}-list-item__suffix ${mergedClsPrefix}-align-${suffixAlign}`
+          },
+          (skeletonOn || this.loadingSuffix) && this.mergedShowIcon ? /* @__PURE__ */ vue.h(
+            UBaseSkeleton,
+            {
+              width: `${suffixSkeletonSize}px`,
+              height: `${suffixSkeletonSize}px`,
+              circle: true
+            }
+          ) : [$slots.suffix ? $slots.suffix() : suffixIcon]
+        );
+        return vue.h(mergedTag, { class: sharedCls, ...sharedAttrs }, [
+          prefixNode,
+          /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefix}-list-item__main` }, /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefix}-list-item__text` }, $slots.default ? $slots.default() : [leftNode, rightNode])),
+          suffixNode,
+          showDivider && /* @__PURE__ */ vue.h("hr", { class: `${mergedClsPrefix}-list-item__divider` })
+        ]);
       }
     });
 
@@ -124141,30 +124137,32 @@
               !this.vertical && !imageCardTypes.includes(listType) && `${clsPrefix}-upload-file-loader--default`
             ]
           },
-          /* @__PURE__ */ vue.h(
-            "div",
-            {
-              class: [
-                `${clsPrefix}-upload-file`,
-                `${clsPrefix}-upload-file--${this.progressStatus}-status`,
-                file.url && file.status !== "error" && imageCardTypes.includes(listType) && `${clsPrefix}-upload-file--with-url`,
-                `${clsPrefix}-upload-file--${listType === "image" || listType === "image-card" ? "image-card" : "text"}-type`
-              ]
-            },
-            /* @__PURE__ */ vue.h(
+          {
+            default: () => /* @__PURE__ */ vue.h(
               "div",
               {
                 class: [
-                  `${clsPrefix}-upload-file-info`,
-                  imageCardTypes.includes(listType) && `${clsPrefix}-upload-file-info--vertical`
+                  `${clsPrefix}-upload-file`,
+                  `${clsPrefix}-upload-file--${this.progressStatus}-status`,
+                  file.url && file.status !== "error" && imageCardTypes.includes(listType) && `${clsPrefix}-upload-file--with-url`,
+                  `${clsPrefix}-upload-file--${listType === "image" || listType === "image-card" ? "image-card" : "text"}-type`
                 ]
               },
-              icon,
-              /* @__PURE__ */ vue.h("div", { class: `${clsPrefix}-upload-file-info__name` }, /* @__PURE__ */ vue.h(vue.Fragment, null, /* @__PURE__ */ vue.h("span", { onClick: this.handlePreviewClick }, this.$slots["upload-file-title"] ? this.$slots["upload-file-title"]({ file }) : file.name), /* @__PURE__ */ vue.h("span", { onClick: this.handlePreviewClick }, this.$slots["upload-file-subtitle"] ? this.$slots["upload-file-subtitle"]({ file }) : ""))),
-              actionsNode
-            ),
-            this.showProgress && /* @__PURE__ */ vue.h("div", { class: `${clsPrefix}-upload-file-overlay` })
-          )
+              /* @__PURE__ */ vue.h(
+                "div",
+                {
+                  class: [
+                    `${clsPrefix}-upload-file-info`,
+                    imageCardTypes.includes(listType) && `${clsPrefix}-upload-file-info--vertical`
+                  ]
+                },
+                icon,
+                /* @__PURE__ */ vue.h("div", { class: `${clsPrefix}-upload-file-info__name` }, /* @__PURE__ */ vue.h(vue.Fragment, null, /* @__PURE__ */ vue.h("span", { onClick: this.handlePreviewClick }, this.$slots["upload-file-title"] ? this.$slots["upload-file-title"]({ file }) : file.name), /* @__PURE__ */ vue.h("span", { onClick: this.handlePreviewClick }, this.$slots["upload-file-subtitle"] ? this.$slots["upload-file-subtitle"]({ file }) : ""))),
+                actionsNode
+              ),
+              this.showProgress && /* @__PURE__ */ vue.h("div", { class: `${clsPrefix}-upload-file-overlay` })
+            )
+          }
         );
       }
     });
@@ -126215,7 +126213,7 @@
         UAvatar: UAvatar,
         UAvatarGroup: AvatarGroup,
         UBackTop: BackTop,
-        UBadge: Badge,
+        UBadge: UBadge,
         UBlockquote: blockquote,
         UBreadcrumb: Breadcrumb,
         UBreadcrumbItem: BreadcrumbItem,
@@ -126425,7 +126423,7 @@
         inputProps: inputProps,
         layoutContentProps: layoutProps,
         layoutFooterProps: layoutFooterProps,
-        layoutHeaderProps: headerProps$1,
+        layoutHeaderProps: headerProps$2,
         layoutProps: layoutProps,
         layoutSiderProps: layoutSiderProps,
         legacyTransferProps: transferProps$1,
@@ -126489,7 +126487,7 @@
         watermarkProps: watermarkProps
     });
 
-    var version = "1.5.1";
+    var version = "1.5.2";
 
     function create({
       componentPrefix = "U",
@@ -127301,7 +127299,7 @@
     exports.UAvatar = UAvatar;
     exports.UAvatarGroup = AvatarGroup;
     exports.UBackTop = BackTop;
-    exports.UBadge = Badge;
+    exports.UBadge = UBadge;
     exports.UBlockquote = blockquote;
     exports.UBreadcrumb = Breadcrumb;
     exports.UBreadcrumbItem = BreadcrumbItem;
@@ -127597,7 +127595,7 @@
     exports.layoutContentProps = layoutProps;
     exports.layoutDark = layoutDark;
     exports.layoutFooterProps = layoutFooterProps;
-    exports.layoutHeaderProps = headerProps$1;
+    exports.layoutHeaderProps = headerProps$2;
     exports.layoutProps = layoutProps;
     exports.layoutSiderProps = layoutSiderProps;
     exports.legacyTransferProps = transferProps$1;