vant 4.0.0-rc.6 → 4.0.0-rc.7

package/es/action-sheet/index.css

@@ -1 +1 @@
-:root{--van-action-sheet-max-height: 80%;--van-action-sheet-header-height: 48px;--van-action-sheet-header-font-size: var(--van-font-size-lg);--van-action-sheet-description-color: var(--van-text-color-2);--van-action-sheet-description-font-size: var(--van-font-size-md);--van-action-sheet-description-line-height: var(--van-line-height-md);--van-action-sheet-item-background: var(--van-background-2);--van-action-sheet-item-font-size: var(--van-font-size-lg);--van-action-sheet-item-line-height: var(--van-line-height-lg);--van-action-sheet-item-text-color: var(--van-text-color);--van-action-sheet-item-disabled-text-color: var(--van-text-color-3);--van-action-sheet-subname-color: var(--van-text-color-2);--van-action-sheet-subname-font-size: var(--van-font-size-sm);--van-action-sheet-subname-line-height: var(--van-line-height-sm);--van-action-sheet-close-icon-size: 22px;--van-action-sheet-close-icon-color: var(--van-gray-5);--van-action-sheet-close-icon-padding: 0 var(--van-padding-md);--van-action-sheet-cancel-text-color: var(--van-gray-7);--van-action-sheet-cancel-padding-top: var(--van-padding-xs);--van-action-sheet-cancel-padding-color: var(--van-background);--van-action-sheet-loading-icon-size: 22px}.van-action-sheet{display:flex;flex-direction:column;max-height:var(--van-action-sheet-max-height);overflow:hidden;color:var(--van-action-sheet-item-text-color)}.van-action-sheet__content{flex:1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch}.van-action-sheet__item,.van-action-sheet__cancel{display:block;width:100%;padding:14px var(--van-padding-md);font-size:var(--van-action-sheet-item-font-size);background:var(--van-action-sheet-item-background);border:none;cursor:pointer}.van-action-sheet__item:active,.van-action-sheet__cancel:active{background-color:var(--van-active-color)}.van-action-sheet__item{line-height:var(--van-action-sheet-item-line-height)}.van-action-sheet__item--loading,.van-action-sheet__item--disabled{color:var(--van-action-sheet-item-disabled-text-color)}.van-action-sheet__item--loading:active,.van-action-sheet__item--disabled:active{background-color:var(--van-action-sheet-item-background)}.van-action-sheet__item--disabled{cursor:not-allowed}.van-action-sheet__item--loading{cursor:default}.van-action-sheet__cancel{flex-shrink:0;box-sizing:border-box;color:var(--van-action-sheet-cancel-text-color)}.van-action-sheet__subname{margin-top:var(--van-padding-xs);color:var(--van-action-sheet-subname-color);font-size:var(--van-action-sheet-subname-font-size);line-height:var(--van-action-sheet-subname-line-height)}.van-action-sheet__gap{display:block;height:var(--van-action-sheet-cancel-padding-top);background:var(--van-action-sheet-cancel-padding-color)}.van-action-sheet__header{flex-shrink:0;font-weight:var(--van-font-bold);font-size:var(--van-action-sheet-header-font-size);line-height:var(--van-action-sheet-header-height);text-align:center}.van-action-sheet__description{position:relative;flex-shrink:0;padding:20px var(--van-padding-md);color:var(--van-action-sheet-description-color);font-size:var(--van-action-sheet-description-font-size);line-height:var(--van-action-sheet-description-line-height);text-align:center}.van-action-sheet__description:after{position:absolute;box-sizing:border-box;content:" ";pointer-events:none;right:var(--van-padding-md);bottom:0;left:var(--van-padding-md);border-bottom:1px solid var(--van-border-color);transform:scaleY(.5)}.van-action-sheet__loading-icon .van-loading__spinner{width:var(--van-action-sheet-loading-icon-size);height:var(--van-action-sheet-loading-icon-size)}.van-action-sheet__close{position:absolute;top:0;right:0;padding:var(--van-action-sheet-close-icon-padding);color:var(--van-action-sheet-close-icon-color);font-size:var(--van-action-sheet-close-icon-size);line-height:inherit}
+:root{--van-action-sheet-max-height: 80%;--van-action-sheet-header-height: 48px;--van-action-sheet-header-font-size: var(--van-font-size-lg);--van-action-sheet-description-color: var(--van-text-color-2);--van-action-sheet-description-font-size: var(--van-font-size-md);--van-action-sheet-description-line-height: var(--van-line-height-md);--van-action-sheet-item-background: var(--van-background-2);--van-action-sheet-item-font-size: var(--van-font-size-lg);--van-action-sheet-item-line-height: var(--van-line-height-lg);--van-action-sheet-item-text-color: var(--van-text-color);--van-action-sheet-item-disabled-text-color: var(--van-text-color-3);--van-action-sheet-subname-color: var(--van-text-color-2);--van-action-sheet-subname-font-size: var(--van-font-size-sm);--van-action-sheet-subname-line-height: var(--van-line-height-sm);--van-action-sheet-close-icon-size: 22px;--van-action-sheet-close-icon-color: var(--van-gray-5);--van-action-sheet-close-icon-padding: 0 var(--van-padding-md);--van-action-sheet-cancel-text-color: var(--van-gray-7);--van-action-sheet-cancel-padding-top: var(--van-padding-xs);--van-action-sheet-cancel-padding-color: var(--van-background);--van-action-sheet-loading-icon-size: 22px}.van-action-sheet{display:flex;flex-direction:column;max-height:var(--van-action-sheet-max-height);overflow:hidden;color:var(--van-action-sheet-item-text-color)}.van-action-sheet__content{flex:1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch}.van-action-sheet__item,.van-action-sheet__cancel{display:block;width:100%;padding:14px var(--van-padding-md);font-size:var(--van-action-sheet-item-font-size);background:var(--van-action-sheet-item-background);border:none;cursor:pointer}.van-action-sheet__item:active,.van-action-sheet__cancel:active{background-color:var(--van-active-color)}.van-action-sheet__item{line-height:var(--van-action-sheet-item-line-height)}.van-action-sheet__item--loading,.van-action-sheet__item--disabled{color:var(--van-action-sheet-item-disabled-text-color)}.van-action-sheet__item--loading:active,.van-action-sheet__item--disabled:active{background-color:var(--van-action-sheet-item-background)}.van-action-sheet__item--disabled{cursor:not-allowed}.van-action-sheet__item--loading{cursor:default}.van-action-sheet__cancel{flex-shrink:0;box-sizing:border-box;color:var(--van-action-sheet-cancel-text-color)}.van-action-sheet__subname{margin-top:var(--van-padding-xs);color:var(--van-action-sheet-subname-color);font-size:var(--van-action-sheet-subname-font-size);line-height:var(--van-action-sheet-subname-line-height)}.van-action-sheet__gap{display:block;height:var(--van-action-sheet-cancel-padding-top);background:var(--van-action-sheet-cancel-padding-color)}.van-action-sheet__header{flex-shrink:0;font-weight:var(--van-font-bold);font-size:var(--van-action-sheet-header-font-size);line-height:var(--van-action-sheet-header-height);text-align:center}.van-action-sheet__description{position:relative;flex-shrink:0;padding:20px var(--van-padding-md);color:var(--van-action-sheet-description-color);font-size:var(--van-action-sheet-description-font-size);line-height:var(--van-action-sheet-description-line-height);text-align:center}.van-action-sheet__description:after{position:absolute;box-sizing:border-box;content:" ";pointer-events:none;right:var(--van-padding-md);bottom:0;left:var(--van-padding-md);border-bottom:1px solid var(--van-border-color);transform:scaleY(.5)}.van-action-sheet__loading-icon .van-loading__spinner{width:var(--van-action-sheet-loading-icon-size);height:var(--van-action-sheet-loading-icon-size)}.van-action-sheet__close{position:absolute;top:0;right:0;z-index:1;padding:var(--van-action-sheet-close-icon-padding);color:var(--van-action-sheet-close-icon-color);font-size:var(--van-action-sheet-close-icon-size);line-height:inherit}

package/es/composables/use-sync-prop-ref.d.ts

@@ -0,0 +1,2 @@
+import { Ref } from 'vue';
+export declare const useSyncPropRef: <T>(getProp: () => T, setProp: (value: T) => void) => Ref<T>;

package/es/composables/use-sync-prop-ref.mjs

@@ -0,0 +1,18 @@
+import { ref, watch } from "vue";
+const useSyncPropRef = (getProp, setProp) => {
+  const propRef = ref(getProp());
+  watch(getProp, (value) => {
+    if (value !== propRef.value) {
+      propRef.value = value;
+    }
+  });
+  watch(propRef, (value) => {
+    if (value !== getProp()) {
+      setProp(value);
+    }
+  });
+  return propRef;
+};
+export {
+  useSyncPropRef
+};

package/es/date-picker/DatePicker.mjs

@@ -80,7 +80,10 @@ var stdin_default = defineComponent({
         case "day":
           return genDayOptions();
         default:
-          throw new Error(`[Vant] DatePicker: unsupported columns type: ${type}`);
+          if (process.env.NODE_ENV !== "production") {
+            throw new Error(`[Vant] DatePicker: unsupported columns type: ${type}`);
+          }
+          return [];
       }
     }));
     watch(currentValues, (newValues) => {

package/es/image-preview/ImagePreview.d.ts

@@ -109,7 +109,7 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<PopupCloseIconPosition>;
         default: PopupCloseIconPosition;
     };
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "close" | "closed" | "update:show" | "scale")[], "change" | "close" | "closed" | "update:show" | "scale", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "close" | "closed" | "update:show" | "scale" | "longPress")[], "change" | "close" | "closed" | "update:show" | "scale" | "longPress", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
     show: BooleanConstructor;
     loop: {
         type: BooleanConstructor;
@@ -168,6 +168,7 @@ declare const _default: import("vue").DefineComponent<{
     onClosed?: ((...args: any[]) => any) | undefined;
     "onUpdate:show"?: ((...args: any[]) => any) | undefined;
     onScale?: ((...args: any[]) => any) | undefined;
+    onLongPress?: ((...args: any[]) => any) | undefined;
 }, {
     loop: boolean;
     overlay: boolean;

package/es/image-preview/ImagePreview.mjs

@@ -33,7 +33,7 @@ const imagePreviewProps = {
 var stdin_default = defineComponent({
   name,
   props: imagePreviewProps,
-  emits: ["scale", "close", "closed", "change", "update:show"],
+  emits: ["scale", "close", "closed", "change", "longPress", "update:show"],
   setup(props, {
     emit,
     slots
@@ -93,7 +93,7 @@ var stdin_default = defineComponent({
       "indicatorColor": "white",
       "onChange": setActive
     }, {
-      default: () => [props.images.map((image) => _createVNode(ImagePreviewItem, {
+      default: () => [props.images.map((image, index) => _createVNode(ImagePreviewItem, {
         "src": image,
         "show": props.show,
         "active": state.active,
@@ -102,7 +102,10 @@ var stdin_default = defineComponent({
         "rootWidth": state.rootWidth,
         "rootHeight": state.rootHeight,
         "onScale": emitScale,
-        "onClose": emitClose
+        "onClose": emitClose,
+        "onLongPress": () => emit("longPress", {
+          index
+        })
       }, {
         image: slots.image
       }))]

package/es/image-preview/ImagePreviewItem.d.ts

@@ -18,7 +18,7 @@ declare const _default: import("vue").DefineComponent<{
         type: NumberConstructor;
         required: true;
     };
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "scale")[], "close" | "scale", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "scale" | "longPress")[], "close" | "scale" | "longPress", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     src: StringConstructor;
     show: BooleanConstructor;
     active: NumberConstructor;
@@ -41,6 +41,7 @@ declare const _default: import("vue").DefineComponent<{
 }>> & {
     onClose?: ((...args: any[]) => any) | undefined;
     onScale?: ((...args: any[]) => any) | undefined;
+    onLongPress?: ((...args: any[]) => any) | undefined;
 }, {
     show: boolean;
 }>;

package/es/image-preview/ImagePreviewItem.mjs

@@ -1,6 +1,6 @@
 import { createVNode as _createVNode } from "vue";
 import { ref, watch, computed, reactive, defineComponent } from "vue";
-import { clamp, numericProp, preventDefault, createNamespace, makeRequiredProp } from "../utils/index.mjs";
+import { clamp, numericProp, preventDefault, createNamespace, makeRequiredProp, LONG_PRESS_START_TIME } from "../utils/index.mjs";
 import { useTouch } from "../composables/use-touch.mjs";
 import { useEventListener } from "@vant/use";
 import { Image } from "../image/index.mjs";
@@ -18,7 +18,7 @@ var stdin_default = defineComponent({
     rootWidth: makeRequiredProp(Number),
     rootHeight: makeRequiredProp(Number)
   },
-  emits: ["scale", "close"],
+  emits: ["scale", "close", "longPress"],
   setup(props, {
     emit,
     slots
@@ -165,16 +165,20 @@ var stdin_default = defineComponent({
       const deltaTime = Date.now() - touchStartTime;
       const TAP_TIME = 250;
       const TAP_OFFSET = 5;
-      if (offsetX.value < TAP_OFFSET && offsetY.value < TAP_OFFSET && deltaTime < TAP_TIME) {
-        if (doubleTapTimer) {
-          clearTimeout(doubleTapTimer);
-          doubleTapTimer = null;
-          toggleScale();
-        } else {
-          doubleTapTimer = setTimeout(() => {
-            emit("close");
+      if (offsetX.value < TAP_OFFSET && offsetY.value < TAP_OFFSET) {
+        if (deltaTime < TAP_TIME) {
+          if (doubleTapTimer) {
+            clearTimeout(doubleTapTimer);
             doubleTapTimer = null;
-          }, TAP_TIME);
+            toggleScale();
+          } else {
+            doubleTapTimer = setTimeout(() => {
+              emit("close");
+              doubleTapTimer = null;
+            }, TAP_TIME);
+          }
+        } else if (deltaTime > LONG_PRESS_START_TIME) {
+          emit("longPress");
         }
       }
     };

package/es/image-preview/index.d.ts

@@ -52,7 +52,7 @@ export declare const ImagePreview: import("../utils").WithInstall<import("vue").
         type: import("vue").PropType<import("..").PopupCloseIconPosition>;
         default: import("..").PopupCloseIconPosition;
     };
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "close" | "closed" | "update:show" | "scale")[], "change" | "close" | "closed" | "update:show" | "scale", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "close" | "closed" | "update:show" | "scale" | "longPress")[], "change" | "close" | "closed" | "update:show" | "scale" | "longPress", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     show: BooleanConstructor;
     loop: {
         type: BooleanConstructor;
@@ -111,6 +111,7 @@ export declare const ImagePreview: import("../utils").WithInstall<import("vue").
     onClosed?: ((...args: any[]) => any) | undefined;
     "onUpdate:show"?: ((...args: any[]) => any) | undefined;
     onScale?: ((...args: any[]) => any) | undefined;
+    onLongPress?: ((...args: any[]) => any) | undefined;
 }, {
     loop: boolean;
     overlay: boolean;

package/es/index.d.ts

@@ -93,4 +93,4 @@ declare namespace _default {
 }
 export default _default;
 export function install(app: any): void;
-export const version: "4.0.0-rc.6";
+export const version: "4.0.0-rc.7";

package/es/index.mjs

@@ -86,7 +86,7 @@ import { TimePicker } from "./time-picker/index.mjs";
 import { Toast } from "./toast/index.mjs";
 import { TreeSelect } from "./tree-select/index.mjs";
 import { Uploader } from "./uploader/index.mjs";
-const version = "4.0.0-rc.6";
+const version = "4.0.0-rc.7";
 function install(app) {
   const components = [
     ActionBar,

package/es/lazyload/vue-lazyload/lazy-image.mjs

@@ -1,6 +1,7 @@
 import { useRect } from "@vant/use";
 import { loadImageAsync } from "./util.mjs";
 import { noop } from "../../utils/index.mjs";
+import { h } from "vue";
 var stdin_default = (lazyManager) => ({
   props: {
     src: [String, Object],
@@ -9,15 +10,14 @@ var stdin_default = (lazyManager) => ({
       default: "img"
     }
   },
-  render(h) {
+  render() {
+    var _a, _b;
     return h(
       this.tag,
       {
-        attrs: {
-          src: this.renderSrc
-        }
+        src: this.renderSrc
       },
-      this.$slots.default
+      (_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a)
     );
   },
   data() {

package/es/picker/Picker.mjs

@@ -1,5 +1,5 @@
 import { mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
-import { ref, watch, computed, defineComponent } from "vue";
+import { ref, watch, computed, nextTick, defineComponent } from "vue";
 import { pick, extend, unitToPx, truthProp, isSameValue, makeArrayProp, preventDefault, makeStringProp, makeNumericProp, BORDER_UNSET_TOP_BOTTOM } from "../utils/index.mjs";
 import { bem, name, isOptionExist, getColumnsType, findOptionByValue, assignDefaultFields, formatCascadeColumns, getFirstEnabledOption } from "./utils.mjs";
 import { useChildren, useEventListener, useParent } from "@vant/use";
@@ -91,7 +91,9 @@ var stdin_default = defineComponent({
     const confirm = () => {
       children.forEach((child) => child.stopMomentum());
       const params = getEventParams();
-      emit("confirm", params);
+      nextTick(() => {
+        emit("confirm", params);
+      });
       return params;
     };
     const cancel = () => emit("cancel", getEventParams());

package/es/picker/PickerColumn.mjs

@@ -55,8 +55,9 @@ var stdin_default = defineComponent({
       }
       currentOffset.value = offset;
     };
+    const isReadonly = () => props.readonly || !props.options.length;
     const onClickOption = (index) => {
-      if (moving || props.readonly) {
+      if (moving || isReadonly()) {
         return;
       }
       transitionEndTrigger = null;
@@ -81,7 +82,7 @@ var stdin_default = defineComponent({
       }
     };
     const onTouchStart = (event) => {
-      if (props.readonly) {
+      if (isReadonly()) {
         return;
       }
       touch.start(event);
@@ -96,7 +97,7 @@ var stdin_default = defineComponent({
       transitionEndTrigger = null;
     };
     const onTouchMove = (event) => {
-      if (props.readonly) {
+      if (isReadonly()) {
         return;
       }
       touch.move(event);
@@ -112,7 +113,7 @@ var stdin_default = defineComponent({
       }
     };
     const onTouchEnd = () => {
-      if (props.readonly) {
+      if (isReadonly()) {
         return;
       }
       const distance = currentOffset.value - momentumOffset;

package/es/popover/Popover.mjs

@@ -3,10 +3,11 @@ import { ref, watch, nextTick, onMounted, watchEffect, onBeforeUnmount, defineCo
 import { createPopper, offsetModifier } from "@vant/popperjs";
 import { pick, extend, truthProp, numericProp, unknownProp, BORDER_BOTTOM, makeArrayProp, makeStringProp, createNamespace } from "../utils/index.mjs";
 import { useClickAway } from "@vant/use";
+import { useSyncPropRef } from "../composables/use-sync-prop-ref.mjs";
 import { Icon } from "../icon/index.mjs";
 import { Popup } from "../popup/index.mjs";
 const [name, bem] = createNamespace("popover");
-const popupProps = ["show", "overlay", "duration", "teleport", "overlayStyle", "overlayClass", "closeOnClickOverlay"];
+const popupProps = ["overlay", "duration", "teleport", "overlayStyle", "overlayClass", "closeOnClickOverlay"];
 const popoverProps = {
   show: Boolean,
   theme: makeStringProp("light"),
@@ -44,6 +45,7 @@ var stdin_default = defineComponent({
     const popupRef = ref();
     const wrapperRef = ref();
     const popoverRef = ref();
+    const show = useSyncPropRef(() => props.show, (value) => emit("update:show", value));
     const getPopoverOptions = () => ({
       placement: props.placement,
       modifiers: [{
@@ -66,7 +68,7 @@ var stdin_default = defineComponent({
     };
     const updateLocation = () => {
       nextTick(() => {
-        if (!props.show) {
+        if (!show.value) {
           return;
         }
         if (!popper) {
@@ -76,10 +78,12 @@ var stdin_default = defineComponent({
         }
       });
     };
-    const updateShow = (value) => emit("update:show", value);
+    const updateShow = (value) => {
+      show.value = value;
+    };
     const onClickWrapper = () => {
       if (props.trigger === "click") {
-        updateShow(!props.show);
+        show.value = !show.value;
       }
     };
     const onClickAction = (action, index) => {
@@ -88,12 +92,12 @@ var stdin_default = defineComponent({
       }
       emit("select", action, index);
       if (props.closeOnClickAction) {
-        updateShow(false);
+        show.value = false;
       }
     };
     const onClickAway = () => {
-      if (props.show && props.closeOnClickOutside && (!props.overlay || props.closeOnClickOverlay)) {
-        updateShow(false);
+      if (show.value && props.closeOnClickOutside && (!props.overlay || props.closeOnClickOverlay)) {
+        show.value = false;
       }
     };
     const renderActionContent = (action, index) => {
@@ -145,7 +149,7 @@ var stdin_default = defineComponent({
         popper = null;
       }
     });
-    watch(() => [props.show, props.offset, props.placement], updateLocation);
+    watch(() => [show.value, props.offset, props.placement], updateLocation);
     useClickAway([wrapperRef, popupRef], onClickAway, {
       eventName: "touchstart"
     });
@@ -157,6 +161,7 @@ var stdin_default = defineComponent({
         "onClick": onClickWrapper
       }, [(_a = slots.reference) == null ? void 0 : _a.call(slots)]), _createVNode(Popup, _mergeProps({
         "ref": popoverRef,
+        "show": show.value,
         "class": bem([props.theme]),
         "position": "",
         "transition": "van-popover-zoom",

package/es/skeleton/Skeleton.d.ts

@@ -1,14 +1,20 @@
 import { type PropType, type ExtractPropTypes } from 'vue';
 import { type Numeric } from '../utils';
-export declare type SkeletonAvatarShape = 'square' | 'round';
+import type { SkeletonAvatarShape } from './types';
 export declare const skeletonProps: {
     row: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
-    title: BooleanConstructor;
     round: BooleanConstructor;
+    title: BooleanConstructor;
+    titleWidth: (NumberConstructor | StringConstructor)[];
     avatar: BooleanConstructor;
+    avatarSize: (NumberConstructor | StringConstructor)[];
+    avatarShape: {
+        type: PropType<SkeletonAvatarShape>;
+        default: SkeletonAvatarShape;
+    };
     loading: {
         type: BooleanConstructor;
         default: true;
@@ -17,12 +23,6 @@ export declare const skeletonProps: {
         type: BooleanConstructor;
         default: true;
     };
-    avatarSize: (NumberConstructor | StringConstructor)[];
-    titleWidth: (NumberConstructor | StringConstructor)[];
-    avatarShape: {
-        type: PropType<SkeletonAvatarShape>;
-        default: SkeletonAvatarShape;
-    };
     rowWidth: {
         type: PropType<Numeric | Numeric[]>;
         default: string;
@@ -34,9 +34,15 @@ declare const _default: import("vue").DefineComponent<{
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
-    title: BooleanConstructor;
     round: BooleanConstructor;
+    title: BooleanConstructor;
+    titleWidth: (NumberConstructor | StringConstructor)[];
     avatar: BooleanConstructor;
+    avatarSize: (NumberConstructor | StringConstructor)[];
+    avatarShape: {
+        type: PropType<SkeletonAvatarShape>;
+        default: SkeletonAvatarShape;
+    };
     loading: {
         type: BooleanConstructor;
         default: true;
@@ -45,12 +51,6 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: true;
     };
-    avatarSize: (NumberConstructor | StringConstructor)[];
-    titleWidth: (NumberConstructor | StringConstructor)[];
-    avatarShape: {
-        type: PropType<SkeletonAvatarShape>;
-        default: SkeletonAvatarShape;
-    };
     rowWidth: {
         type: PropType<Numeric | Numeric[]>;
         default: string;
@@ -62,9 +62,15 @@ declare const _default: import("vue").DefineComponent<{
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
-    title: BooleanConstructor;
     round: BooleanConstructor;
+    title: BooleanConstructor;
+    titleWidth: (NumberConstructor | StringConstructor)[];
     avatar: BooleanConstructor;
+    avatarSize: (NumberConstructor | StringConstructor)[];
+    avatarShape: {
+        type: PropType<SkeletonAvatarShape>;
+        default: SkeletonAvatarShape;
+    };
     loading: {
         type: BooleanConstructor;
         default: true;
@@ -73,12 +79,6 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: true;
     };
-    avatarSize: (NumberConstructor | StringConstructor)[];
-    titleWidth: (NumberConstructor | StringConstructor)[];
-    avatarShape: {
-        type: PropType<SkeletonAvatarShape>;
-        default: SkeletonAvatarShape;
-    };
     rowWidth: {
         type: PropType<Numeric | Numeric[]>;
         default: string;
@@ -89,8 +89,8 @@ declare const _default: import("vue").DefineComponent<{
     round: boolean;
     loading: boolean;
     row: string | number;
-    avatar: boolean;
     avatarShape: SkeletonAvatarShape;
     rowWidth: Numeric | Numeric[];
+    avatar: boolean;
 }>;
 export default _default;

package/es/skeleton/Skeleton.mjs

@@ -1,19 +1,21 @@
-import { mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
+import { mergeProps as _mergeProps, Fragment as _Fragment, createVNode as _createVNode } from "vue";
 import { defineComponent } from "vue";
-import { addUnit, truthProp, numericProp, getSizeStyle, makeStringProp, makeNumericProp, createNamespace } from "../utils/index.mjs";
+import { addUnit, truthProp, numericProp, makeStringProp, makeNumericProp, createNamespace } from "../utils/index.mjs";
+import SkeletonTitle from "./SkeletonTitle.mjs";
+import SkeletonAvatar from "./SkeletonAvatar.mjs";
+import SkeletonParagraph, { DEFAULT_ROW_WIDTH } from "./SkeletonParagraph.mjs";
 const [name, bem] = createNamespace("skeleton");
-const DEFAULT_ROW_WIDTH = "100%";
 const DEFAULT_LAST_ROW_WIDTH = "60%";
 const skeletonProps = {
   row: makeNumericProp(0),
-  title: Boolean,
   round: Boolean,
+  title: Boolean,
+  titleWidth: numericProp,
   avatar: Boolean,
-  loading: truthProp,
-  animate: truthProp,
   avatarSize: numericProp,
-  titleWidth: numericProp,
   avatarShape: makeStringProp("round"),
+  loading: truthProp,
+  animate: truthProp,
   rowWidth: {
     type: [Number, String, Array],
     default: DEFAULT_ROW_WIDTH
@@ -29,19 +31,17 @@ var stdin_default = defineComponent({
   }) {
     const renderAvatar = () => {
       if (props.avatar) {
-        return _createVNode("div", {
-          "class": bem("avatar", props.avatarShape),
-          "style": getSizeStyle(props.avatarSize)
+        return _createVNode(SkeletonAvatar, {
+          "avatarShape": props.avatarShape,
+          "avatarSize": props.avatarSize
         }, null);
       }
     };
     const renderTitle = () => {
       if (props.title) {
-        return _createVNode("h3", {
-          "class": bem("title"),
-          "style": {
-            width: addUnit(props.titleWidth)
-          }
+        return _createVNode(SkeletonTitle, {
+          "round": props.round,
+          "titleWidth": props.titleWidth
         }, null);
       }
     };
@@ -57,12 +57,19 @@ var stdin_default = defineComponent({
       }
       return rowWidth;
     };
-    const renderRows = () => Array(+props.row).fill("").map((_, i) => _createVNode("div", {
-      "class": bem("row"),
-      "style": {
-        width: addUnit(getRowWidth(i))
-      }
+    const renderRows = () => Array(+props.row).fill("").map((_, i) => _createVNode(SkeletonParagraph, {
+      "key": i,
+      "round": props.round,
+      "rowWidth": addUnit(getRowWidth(i))
     }, null));
+    const renderContents = () => {
+      if (slots.template) {
+        return slots.template();
+      }
+      return _createVNode(_Fragment, null, [renderAvatar(), _createVNode("div", {
+        "class": bem("content")
+      }, [renderTitle(), renderRows()])]);
+    };
     return () => {
       var _a;
       if (!props.loading) {
@@ -73,9 +80,7 @@ var stdin_default = defineComponent({
           animate: props.animate,
           round: props.round
         })
-      }, attrs), [renderAvatar(), _createVNode("div", {
-        "class": bem("content")
-      }, [renderTitle(), renderRows()])]);
+      }, attrs), [renderContents()]);
     };
   }
 });

package/es/skeleton/SkeletonAvatar.d.ts

@@ -0,0 +1,26 @@
+import { ExtractPropTypes } from 'vue';
+import type { SkeletonAvatarShape } from './types';
+export declare const skeletonAvatarProps: {
+    avatarSize: (NumberConstructor | StringConstructor)[];
+    avatarShape: {
+        type: import("vue").PropType<SkeletonAvatarShape>;
+        default: SkeletonAvatarShape;
+    };
+};
+export declare type SkeletonAvatarProps = ExtractPropTypes<typeof skeletonAvatarProps>;
+declare const _default: import("vue").DefineComponent<{
+    avatarSize: (NumberConstructor | StringConstructor)[];
+    avatarShape: {
+        type: import("vue").PropType<SkeletonAvatarShape>;
+        default: SkeletonAvatarShape;
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+    avatarSize: (NumberConstructor | StringConstructor)[];
+    avatarShape: {
+        type: import("vue").PropType<SkeletonAvatarShape>;
+        default: SkeletonAvatarShape;
+    };
+}>>, {
+    avatarShape: SkeletonAvatarShape;
+}>;
+export default _default;

package/es/skeleton/SkeletonAvatar.mjs

@@ -0,0 +1,22 @@
+import { createVNode as _createVNode } from "vue";
+import { defineComponent } from "vue";
+import { numericProp, getSizeStyle, makeStringProp, createNamespace } from "../utils/index.mjs";
+const [name, bem] = createNamespace("skeleton-avatar");
+const skeletonAvatarProps = {
+  avatarSize: numericProp,
+  avatarShape: makeStringProp("round")
+};
+var stdin_default = defineComponent({
+  name,
+  props: skeletonAvatarProps,
+  setup(props) {
+    return () => _createVNode("div", {
+      "class": bem([props.avatarShape]),
+      "style": getSizeStyle(props.avatarSize)
+    }, null);
+  }
+});
+export {
+  stdin_default as default,
+  skeletonAvatarProps
+};

package/es/skeleton/SkeletonImage.d.ts

@@ -0,0 +1,26 @@
+import { type ExtractPropTypes } from 'vue';
+import type { SkeletonImageShape } from './types';
+export declare const skeletonImageProps: {
+    imageSize: (NumberConstructor | StringConstructor)[];
+    imageShape: {
+        type: import("vue").PropType<SkeletonImageShape>;
+        default: SkeletonImageShape;
+    };
+};
+export declare type SkeletonImageProps = ExtractPropTypes<typeof skeletonImageProps>;
+declare const _default: import("vue").DefineComponent<{
+    imageSize: (NumberConstructor | StringConstructor)[];
+    imageShape: {
+        type: import("vue").PropType<SkeletonImageShape>;
+        default: SkeletonImageShape;
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+    imageSize: (NumberConstructor | StringConstructor)[];
+    imageShape: {
+        type: import("vue").PropType<SkeletonImageShape>;
+        default: SkeletonImageShape;
+    };
+}>>, {
+    imageShape: SkeletonImageShape;
+}>;
+export default _default;