vant 4.0.0-rc.5 → 4.0.0-rc.7

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;

package/es/skeleton/SkeletonImage.mjs

@@ -0,0 +1,26 @@
+import { createVNode as _createVNode } from "vue";
+import { defineComponent } from "vue";
+import { numericProp, getSizeStyle, makeStringProp, createNamespace } from "../utils/index.mjs";
+import { Icon } from "../icon/index.mjs";
+const [name, bem] = createNamespace("skeleton-image");
+const skeletonImageProps = {
+  imageSize: numericProp,
+  imageShape: makeStringProp("square")
+};
+var stdin_default = defineComponent({
+  name,
+  props: skeletonImageProps,
+  setup(props) {
+    return () => _createVNode("div", {
+      "class": bem([props.imageShape]),
+      "style": getSizeStyle(props.imageSize)
+    }, [_createVNode(Icon, {
+      "name": "photo",
+      "class": bem("icon")
+    }, null)]);
+  }
+});
+export {
+  stdin_default as default,
+  skeletonImageProps
+};

package/es/skeleton/SkeletonParagraph.d.ts

@@ -0,0 +1,27 @@
+import { ExtractPropTypes } from 'vue';
+export declare const DEFAULT_ROW_WIDTH = "100%";
+export declare const skeletonParagraphProps: {
+    round: BooleanConstructor;
+    rowWidth: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: string;
+    };
+};
+export declare type SkeletonParagraphProps = ExtractPropTypes<typeof skeletonParagraphProps>;
+declare const _default: import("vue").DefineComponent<{
+    round: BooleanConstructor;
+    rowWidth: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: string;
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+    round: BooleanConstructor;
+    rowWidth: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: string;
+    };
+}>>, {
+    round: boolean;
+    rowWidth: string | number;
+}>;
+export default _default;

package/es/skeleton/SkeletonParagraph.mjs

@@ -0,0 +1,31 @@
+import { createVNode as _createVNode } from "vue";
+import { defineComponent } from "vue";
+import { createNamespace, numericProp } from "../utils/index.mjs";
+const DEFAULT_ROW_WIDTH = "100%";
+const skeletonParagraphProps = {
+  round: Boolean,
+  rowWidth: {
+    type: numericProp,
+    default: DEFAULT_ROW_WIDTH
+  }
+};
+const [name, bem] = createNamespace("skeleton-paragraph");
+var stdin_default = defineComponent({
+  name,
+  props: skeletonParagraphProps,
+  setup(props) {
+    return () => _createVNode("div", {
+      "class": bem([{
+        round: props.round
+      }]),
+      "style": {
+        width: props.rowWidth
+      }
+    }, null);
+  }
+});
+export {
+  DEFAULT_ROW_WIDTH,
+  stdin_default as default,
+  skeletonParagraphProps
+};

package/es/skeleton/SkeletonTitle.d.ts

@@ -0,0 +1,16 @@
+import { type ExtractPropTypes } from 'vue';
+export declare const skeletonTitleProps: {
+    round: BooleanConstructor;
+    titleWidth: (NumberConstructor | StringConstructor)[];
+};
+export declare type SkeletonTitleProps = ExtractPropTypes<typeof skeletonTitleProps>;
+declare const _default: import("vue").DefineComponent<{
+    round: BooleanConstructor;
+    titleWidth: (NumberConstructor | StringConstructor)[];
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+    round: BooleanConstructor;
+    titleWidth: (NumberConstructor | StringConstructor)[];
+}>>, {
+    round: boolean;
+}>;
+export default _default;

package/es/skeleton/SkeletonTitle.mjs

@@ -0,0 +1,26 @@
+import { createVNode as _createVNode } from "vue";
+import { defineComponent } from "vue";
+import { createNamespace, numericProp, addUnit } from "../utils/index.mjs";
+const [name, bem] = createNamespace("skeleton-title");
+const skeletonTitleProps = {
+  round: Boolean,
+  titleWidth: numericProp
+};
+var stdin_default = defineComponent({
+  name,
+  props: skeletonTitleProps,
+  setup(props) {
+    return () => _createVNode("h3", {
+      "class": bem([{
+        round: props.round
+      }]),
+      "style": {
+        width: addUnit(props.titleWidth)
+      }
+    }, null);
+  }
+});
+export {
+  stdin_default as default,
+  skeletonTitleProps
+};

package/es/skeleton/index.css

@@ -1 +1 @@
-:root{--van-skeleton-row-height: 16px;--van-skeleton-row-background: var(--van-active-color);--van-skeleton-row-margin-top: var(--van-padding-sm);--van-skeleton-title-width: 40%;--van-skeleton-avatar-size: 32px;--van-skeleton-avatar-background: var(--van-active-color);--van-skeleton-duration: 1.2s}.van-skeleton{display:flex;padding:0 var(--van-padding-md)}.van-skeleton__avatar{flex-shrink:0;width:var(--van-skeleton-avatar-size);height:var(--van-skeleton-avatar-size);margin-right:var(--van-padding-md);background:var(--van-skeleton-avatar-background)}.van-skeleton__avatar--round{border-radius:var(--van-radius-max)}.van-skeleton__content{width:100%}.van-skeleton__avatar+.van-skeleton__content{padding-top:var(--van-padding-xs)}.van-skeleton__row,.van-skeleton__title{height:var(--van-skeleton-row-height);background:var(--van-skeleton-row-background)}.van-skeleton__title{width:var(--van-skeleton-title-width);margin:0}.van-skeleton__row:not(:first-child){margin-top:var(--van-skeleton-row-margin-top)}.van-skeleton__title+.van-skeleton__row{margin-top:20px}.van-skeleton--animate{animation:van-skeleton-blink var(--van-skeleton-duration) ease-in-out infinite}.van-skeleton--round .van-skeleton__row,.van-skeleton--round .van-skeleton__title{border-radius:var(--van-radius-max)}@keyframes van-skeleton-blink{50%{opacity:.6}}
+:root{--van-skeleton-paragraph-height: 16px;--van-skeleton-paragraph-background: var(--van-active-color);--van-skeleton-paragraph-margin-top: var(--van-padding-sm);--van-skeleton-title-width: 40%;--van-skeleton-avatar-size: 32px;--van-skeleton-avatar-background: var(--van-active-color);--van-skeleton-image-size: 96px;--van-skeleton-image-radius: 24px;--van-skeleton-duration: 1.2s}.van-skeleton{display:flex;padding:0 var(--van-padding-md)}.van-skeleton-avatar{flex-shrink:0;width:var(--van-skeleton-avatar-size);height:var(--van-skeleton-avatar-size);margin-right:var(--van-padding-md);background:var(--van-skeleton-avatar-background)}.van-skeleton-avatar--round{border-radius:var(--van-radius-max)}.van-skeleton__content{width:100%}.van-skeleton-avatar+.van-skeleton__content{padding-top:var(--van-padding-xs)}.van-skeleton-paragraph,.van-skeleton-title{height:var(--van-skeleton-paragraph-height);background:var(--van-skeleton-paragraph-background)}.van-skeleton-paragraph--round,.van-skeleton-title--round{border-radius:var(--van-radius-max)}.van-skeleton-title{width:var(--van-skeleton-title-width);margin:0}.van-skeleton-paragraph:not(:first-child){margin-top:var(--van-skeleton-paragraph-margin-top)}.van-skeleton-title+.van-skeleton-paragraph{margin-top:20px}.van-skeleton--animate{animation:van-skeleton-blink var(--van-skeleton-duration) ease-in-out infinite}.van-skeleton-image{display:flex;width:var(--van-skeleton-image-size);height:var(--van-skeleton-image-size);align-items:center;justify-content:center;background:var(--van-active-color)}.van-skeleton-image--round{border-radius:var(--van-skeleton-image-radius)}.van-skeleton-image__icon{width:calc(var(--van-skeleton-image-size) / 2);height:calc(var(--van-skeleton-image-size) / 2);font-size:calc(var(--van-skeleton-image-size) / 2);color:var(--van-gray-5)}@keyframes van-skeleton-blink{50%{opacity:.6}}