vant 3.2.6 → 3.3.1

package/es/image/Image.js

@@ -5,30 +5,32 @@ import { isDef, addUnit, inBrowser, truthProp, numericProp, makeStringProp, crea
 
 import { Icon } from '../icon';
 var [name, bem] = createNamespace('image');
+var imageProps = {
+  src: String,
+  alt: String,
+  fit: String,
+  round: Boolean,
+  width: numericProp,
+  height: numericProp,
+  radius: numericProp,
+  lazyLoad: Boolean,
+  iconSize: numericProp,
+  showError: truthProp,
+  errorIcon: makeStringProp('photo-fail'),
+  iconPrefix: String,
+  showLoading: truthProp,
+  loadingIcon: makeStringProp('photo')
+};
 export default defineComponent({
   name,
-  props: {
-    src: String,
-    alt: String,
-    fit: String,
-    round: Boolean,
-    width: numericProp,
-    height: numericProp,
-    radius: numericProp,
-    lazyLoad: Boolean,
-    iconSize: numericProp,
-    showError: truthProp,
-    errorIcon: makeStringProp('photo-fail'),
-    iconPrefix: String,
-    showLoading: truthProp,
-    loadingIcon: makeStringProp('photo')
-  },
+  props: imageProps,
   emits: ['load', 'error'],
 
-  setup(props, {
-    emit,
-    slots
-  }) {
+  setup(props, _ref) {
+    var {
+      emit,
+      slots
+    } = _ref;
     var error = ref(false);
     var loading = ref(true);
     var imageRef = ref();
@@ -36,15 +38,10 @@ export default defineComponent({
       $Lazyload
     } = getCurrentInstance().proxy;
     var style = computed(() => {
-      var style = {};
-
-      if (isDef(props.width)) {
-        style.width = addUnit(props.width);
-      }
-
-      if (isDef(props.height)) {
-        style.height = addUnit(props.height);
-      }
+      var style = {
+        width: addUnit(props.width),
+        height: addUnit(props.height)
+      };
 
       if (isDef(props.radius)) {
         style.overflow = 'hidden';
@@ -122,17 +119,21 @@ export default defineComponent({
       }, attrs), null);
     };
 
-    var onLazyLoaded = ({
-      el
-    }) => {
+    var onLazyLoaded = _ref2 => {
+      var {
+        el
+      } = _ref2;
+
       if (el === imageRef.value && loading.value) {
         onLoad();
       }
     };
 
-    var onLazyLoadError = ({
-      el
-    }) => {
+    var onLazyLoadError = _ref3 => {
+      var {
+        el
+      } = _ref3;
+
       if (el === imageRef.value && !error.value) {
         onError();
       }

package/es/image/index.css

@@ -1 +1 @@
-:root{--van-image-placeholder-text-color:var(--van-gray-6);--van-image-placeholder-font-size:var(--van-font-size-md);--van-image-placeholder-background-color:var(--van-background-color);--van-image-loading-icon-size:32px;--van-image-loading-icon-color:var(--van-gray-4);--van-image-error-icon-size:32px;--van-image-error-icon-color:var(--van-gray-4)}.van-image{position:relative;display:inline-block}.van-image--round{overflow:hidden;border-radius:var(--van-border-radius-max)}.van-image--round .van-image__img{border-radius:inherit}.van-image__error,.van-image__img,.van-image__loading{display:block;width:100%;height:100%}.van-image__error,.van-image__loading{position:absolute;top:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--van-image-placeholder-text-color);font-size:var(--van-image-placeholder-font-size);background:var(--van-image-placeholder-background-color)}.van-image__loading-icon{color:var(--van-image-loading-icon-color);font-size:var(--van-image-loading-icon-size)}.van-image__error-icon{color:var(--van-image-error-icon-color);font-size:var(--van-image-error-icon-size)}
+:root{--van-image-placeholder-text-color:var(--van-text-color-2);--van-image-placeholder-font-size:var(--van-font-size-md);--van-image-placeholder-background-color:var(--van-background-color);--van-image-loading-icon-size:32px;--van-image-loading-icon-color:var(--van-gray-4);--van-image-error-icon-size:32px;--van-image-error-icon-color:var(--van-gray-4)}.van-image{position:relative;display:inline-block}.van-image--round{overflow:hidden;border-radius:var(--van-border-radius-max)}.van-image--round .van-image__img{border-radius:inherit}.van-image__error,.van-image__img,.van-image__loading{display:block;width:100%;height:100%}.van-image__error,.van-image__loading{position:absolute;top:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--van-image-placeholder-text-color);font-size:var(--van-image-placeholder-font-size);background:var(--van-image-placeholder-background-color)}.van-image__loading-icon{color:var(--van-image-loading-icon-color);font-size:var(--van-image-loading-icon-size)}.van-image__error-icon{color:var(--van-image-error-icon-color);font-size:var(--van-image-error-icon-size)}

package/es/image/index.d.ts

@@ -54,8 +54,8 @@ export declare const Image: import("../utils").WithInstall<import("vue").DefineC
     alt?: string | undefined;
     src?: string | undefined;
     iconSize?: string | number | undefined;
-    radius?: string | number | undefined;
     fit?: import("./Image").ImageFit | undefined;
+    radius?: string | number | undefined;
 }> & {
     onLoad?: ((...args: any[]) => any) | undefined;
     onError?: ((...args: any[]) => any) | undefined;
@@ -68,4 +68,4 @@ export declare const Image: import("../utils").WithInstall<import("vue").DefineC
     loadingIcon: string;
 }>>;
 export default Image;
-export type { ImageFit } from './Image';
+export type { ImageFit, ImageProps } from './Image';

package/es/image/var.less

@@ -1,6 +1,6 @@
 @import '../style/var.less';
 
-@image-placeholder-text-color: var(--van-gray-6);
+@image-placeholder-text-color: var(--van-text-color-2);
 @image-placeholder-font-size: var(--van-font-size-md);
 @image-placeholder-background-color: var(--van-background-color);
 @image-loading-icon-size: 32px;

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

@@ -1,7 +1,7 @@
 import { PropType, CSSProperties, ExtractPropTypes } from 'vue';
 import { Interceptor } from '../utils';
 import { PopupCloseIconPosition } from '../popup';
-declare const props: {
+declare const imagePreviewProps: {
     show: BooleanConstructor;
     loop: {
         type: BooleanConstructor;
@@ -54,7 +54,7 @@ declare const props: {
         default: PopupCloseIconPosition;
     };
 };
-export declare type ImagePreviewProps = ExtractPropTypes<typeof props>;
+export declare type ImagePreviewProps = ExtractPropTypes<typeof imagePreviewProps>;
 declare const _default: import("vue").DefineComponent<{
     show: BooleanConstructor;
     loop: {

package/es/image-preview/ImagePreview.js

@@ -1,9 +1,9 @@
 import { mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
 import { ref, watch, nextTick, reactive, onMounted, defineComponent } from 'vue'; // Utils
 
-import { pick, truthProp, unknownProp, makeArrayProp, makeStringProp, makeNumericProp, callInterceptor, createNamespace } from '../utils'; // Composables
+import { pick, truthProp, unknownProp, windowWidth, windowHeight, makeArrayProp, makeStringProp, makeNumericProp, callInterceptor, createNamespace, HAPTICS_FEEDBACK } from '../utils'; // Composables
 
-import { useRect, useWindowSize } from '@vant/use';
+import { useRect } from '@vant/use';
 import { useExpose } from '../composables/use-expose'; // Components
 
 import { Icon } from '../icon';
@@ -13,7 +13,7 @@ import ImagePreviewItem from './ImagePreviewItem'; // Types
 
 var [name, bem] = createNamespace('image-preview');
 var popupProps = ['show', 'transition', 'overlayStyle', 'closeOnPopstate'];
-var props = {
+var imagePreviewProps = {
   show: Boolean,
   loop: truthProp,
   images: makeArrayProp(),
@@ -35,15 +35,15 @@ var props = {
 };
 export default defineComponent({
   name,
-  props,
+  props: imagePreviewProps,
   emits: ['scale', 'close', 'closed', 'change', 'update:show'],
 
-  setup(props, {
-    emit,
-    slots
-  }) {
+  setup(props, _ref) {
+    var {
+      emit,
+      slots
+    } = _ref;
     var swipeRef = ref();
-    var windowSize = useWindowSize();
     var state = reactive({
       active: 0,
       rootWidth: 0,
@@ -124,7 +124,7 @@ export default defineComponent({
         return _createVNode(Icon, {
           "role": "button",
           "name": props.closeIcon,
-          "class": bem('close-icon', props.closeIconPosition),
+          "class": [bem('close-icon', props.closeIconPosition), HAPTICS_FEEDBACK],
           "onClick": emitClose
         }, null);
       }
@@ -142,7 +142,7 @@ export default defineComponent({
       swipeTo
     });
     onMounted(resize);
-    watch([windowSize.width, windowSize.height], resize);
+    watch([windowWidth, windowHeight], resize);
     watch(() => props.startPosition, value => setActive(+value));
     watch(() => props.show, value => {
       var {

package/es/image-preview/ImagePreviewItem.js

@@ -24,9 +24,10 @@ export default defineComponent({
   },
   emits: ['scale', 'close'],
 
-  setup(props, {
-    emit
-  }) {
+  setup(props, _ref) {
+    var {
+      emit
+    } = _ref;
     var state = reactive({
       scale: 1,
       moveX: 0,

package/es/image-preview/function-call.js

@@ -49,7 +49,11 @@ function initInstance() {
   }));
 }
 
-var ImagePreview = (options, startPosition = 0) => {
+var ImagePreview = function (options, startPosition) {
+  if (startPosition === void 0) {
+    startPosition = 0;
+  }
+
   /* istanbul ignore if */
   if (!inBrowser) {
     return;

package/es/image-preview/index.css

@@ -1 +1 @@
-:root{--van-image-preview-index-text-color:var(--van-white);--van-image-preview-index-font-size:var(--van-font-size-md);--van-image-preview-index-line-height:var(--van-line-height-md);--van-image-preview-index-text-shadow:0 1px 1px var(--van-gray-8);--van-image-preview-overlay-background-color:rgba(0, 0, 0, 0.9);--van-image-preview-close-icon-size:22px;--van-image-preview-close-icon-color:var(--van-gray-5);--van-image-preview-close-icon-active-color:var(--van-gray-6);--van-image-preview-close-icon-margin:var(--van-padding-md);--van-image-preview-close-icon-z-index:1}.van-image-preview{position:fixed;top:0;left:0;width:100%;height:100%;background-color:transparent;transform:none}.van-image-preview__swipe{height:100%}.van-image-preview__swipe-item{display:flex;align-items:center;justify-content:center;overflow:hidden}.van-image-preview__cover{position:absolute;top:0;left:0}.van-image-preview__image{width:100%;transition-property:transform}.van-image-preview__image--vertical{width:auto;height:100%}.van-image-preview__image img{-webkit-user-drag:none}.van-image-preview__image .van-image__error{top:30%;height:40%}.van-image-preview__image .van-image__error-icon{font-size:36px}.van-image-preview__image .van-image__loading{background-color:transparent}.van-image-preview__index{position:absolute;top:var(--van-padding-md);left:50%;color:var(--van-image-preview-index-text-color);font-size:var(--van-image-preview-index-font-size);line-height:var(--van-image-preview-index-line-height);text-shadow:var(--van-image-preview-index-text-shadow);transform:translate(-50%,0)}.van-image-preview__overlay{background:var(--van-image-preview-overlay-background-color)}.van-image-preview__close-icon{position:absolute;z-index:var(--van-image-preview-close-icon-z-index);color:var(--van-image-preview-close-icon-color);font-size:var(--van-image-preview-close-icon-size);cursor:pointer}.van-image-preview__close-icon:active{color:var(--van-image-preview-close-icon-active-color)}.van-image-preview__close-icon--top-left{top:var(--van-image-preview-close-icon-margin);left:var(--van-image-preview-close-icon-margin)}.van-image-preview__close-icon--top-right{top:var(--van-image-preview-close-icon-margin);right:var(--van-image-preview-close-icon-margin)}.van-image-preview__close-icon--bottom-left{bottom:var(--van-image-preview-close-icon-margin);left:var(--van-image-preview-close-icon-margin)}.van-image-preview__close-icon--bottom-right{right:var(--van-image-preview-close-icon-margin);bottom:var(--van-image-preview-close-icon-margin)}
+:root{--van-image-preview-index-text-color:var(--van-white);--van-image-preview-index-font-size:var(--van-font-size-md);--van-image-preview-index-line-height:var(--van-line-height-md);--van-image-preview-index-text-shadow:0 1px 1px var(--van-gray-8);--van-image-preview-overlay-background-color:rgba(0, 0, 0, 0.9);--van-image-preview-close-icon-size:22px;--van-image-preview-close-icon-color:var(--van-gray-5);--van-image-preview-close-icon-margin:var(--van-padding-md);--van-image-preview-close-icon-z-index:1}.van-image-preview{position:fixed;top:0;left:0;width:100%;height:100%;background-color:transparent;transform:none}.van-image-preview__swipe{height:100%}.van-image-preview__swipe-item{display:flex;align-items:center;justify-content:center;overflow:hidden}.van-image-preview__cover{position:absolute;top:0;left:0}.van-image-preview__image{width:100%;transition-property:transform}.van-image-preview__image--vertical{width:auto;height:100%}.van-image-preview__image img{-webkit-user-drag:none}.van-image-preview__image .van-image__error{top:30%;height:40%}.van-image-preview__image .van-image__error-icon{font-size:36px}.van-image-preview__image .van-image__loading{background-color:transparent}.van-image-preview__index{position:absolute;top:var(--van-padding-md);left:50%;color:var(--van-image-preview-index-text-color);font-size:var(--van-image-preview-index-font-size);line-height:var(--van-image-preview-index-line-height);text-shadow:var(--van-image-preview-index-text-shadow);transform:translate(-50%,0)}.van-image-preview__overlay{background:var(--van-image-preview-overlay-background-color)}.van-image-preview__close-icon{position:absolute;z-index:var(--van-image-preview-close-icon-z-index);color:var(--van-image-preview-close-icon-color);font-size:var(--van-image-preview-close-icon-size);cursor:pointer}.van-image-preview__close-icon--top-left{top:var(--van-image-preview-close-icon-margin);left:var(--van-image-preview-close-icon-margin)}.van-image-preview__close-icon--top-right{top:var(--van-image-preview-close-icon-margin);right:var(--van-image-preview-close-icon-margin)}.van-image-preview__close-icon--bottom-left{bottom:var(--van-image-preview-close-icon-margin);left:var(--van-image-preview-close-icon-margin)}.van-image-preview__close-icon--bottom-right{right:var(--van-image-preview-close-icon-margin);bottom:var(--van-image-preview-close-icon-margin)}

package/es/image-preview/index.less

@@ -8,7 +8,6 @@
   --van-image-preview-overlay-background-color: @image-preview-overlay-background-color;
   --van-image-preview-close-icon-size: @image-preview-close-icon-size;
   --van-image-preview-close-icon-color: @image-preview-close-icon-color;
-  --van-image-preview-close-icon-active-color: @image-preview-close-icon-active-color;
   --van-image-preview-close-icon-margin: @image-preview-close-icon-margin;
   --van-image-preview-close-icon-z-index: @image-preview-close-icon-z-index;
 }
@@ -91,10 +90,6 @@
     font-size: var(--van-image-preview-close-icon-size);
     cursor: pointer;
 
-    &:active {
-      color: var(--van-image-preview-close-icon-active-color);
-    }
-
     &--top-left {
       top: var(--van-image-preview-close-icon-margin);
       left: var(--van-image-preview-close-icon-margin);

package/es/image-preview/var.less

@@ -7,6 +7,5 @@
 @image-preview-overlay-background-color: rgba(0, 0, 0, 0.9);
 @image-preview-close-icon-size: 22px;
 @image-preview-close-icon-color: var(--van-gray-5);
-@image-preview-close-icon-active-color: var(--van-gray-6);
 @image-preview-close-icon-margin: var(--van-padding-md);
 @image-preview-close-icon-z-index: 1;

package/es/index-anchor/IndexAnchor.d.ts

@@ -1,3 +1,8 @@
+import { ExtractPropTypes } from 'vue';
+declare const indexAnchorProps: {
+    index: (NumberConstructor | StringConstructor)[];
+};
+export declare type IndexAnchorProps = ExtractPropTypes<typeof indexAnchorProps>;
 declare const _default: import("vue").DefineComponent<{
     index: (NumberConstructor | StringConstructor)[];
 }, (() => JSX.Element) | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("@vue/runtime-core").ComponentCustomProps, Readonly<{

package/es/index-anchor/IndexAnchor.js

@@ -8,15 +8,17 @@ import { getScrollTop, getRootScrollTop } from '../utils/dom'; // Composables
 import { useRect, useParent } from '@vant/use';
 import { useExpose } from '../composables/use-expose';
 var [name, bem] = createNamespace('index-anchor');
+var indexAnchorProps = {
+  index: numericProp
+};
 export default defineComponent({
   name,
-  props: {
-    index: numericProp
-  },
+  props: indexAnchorProps,
 
-  setup(props, {
-    slots
-  }) {
+  setup(props, _ref) {
+    var {
+      slots
+    } = _ref;
     var state = reactive({
       top: 0,
       left: null,

package/es/index-anchor/index.css

@@ -1 +1 @@
-:root{--van-index-anchor-z-index:1;--van-index-anchor-padding:0 var(--van-padding-md);--van-index-anchor-text-color:var(--van-text-color);--van-index-anchor-font-weight:var(--van-font-weight-bold);--van-index-anchor-font-size:var(--van-font-size-md);--van-index-anchor-line-height:32px;--van-index-anchor-background-color:transparent;--van-index-anchor-sticky-text-color:var(--van-danger-color);--van-index-anchor-sticky-background-color:var(--van-white)}.van-index-anchor{z-index:var(--van-index-anchor-z-index);box-sizing:border-box;padding:var(--van-index-anchor-padding);color:var(--van-index-anchor-text-color);font-weight:var(--van-index-anchor-font-weight);font-size:var(--van-index-anchor-font-size);line-height:var(--van-index-anchor-line-height);background:var(--van-index-anchor-background-color)}.van-index-anchor--sticky{position:fixed;top:0;right:0;left:0;color:var(--van-index-anchor-sticky-text-color);background:var(--van-index-anchor-sticky-background-color)}
+:root{--van-index-anchor-z-index:1;--van-index-anchor-padding:0 var(--van-padding-md);--van-index-anchor-text-color:var(--van-text-color);--van-index-anchor-font-weight:var(--van-font-weight-bold);--van-index-anchor-font-size:var(--van-font-size-md);--van-index-anchor-line-height:32px;--van-index-anchor-background-color:transparent;--van-index-anchor-sticky-text-color:var(--van-danger-color);--van-index-anchor-sticky-background-color:var(--van-background-color-light)}.van-index-anchor{z-index:var(--van-index-anchor-z-index);box-sizing:border-box;padding:var(--van-index-anchor-padding);color:var(--van-index-anchor-text-color);font-weight:var(--van-index-anchor-font-weight);font-size:var(--van-index-anchor-font-size);line-height:var(--van-index-anchor-line-height);background:var(--van-index-anchor-background-color)}.van-index-anchor--sticky{position:fixed;top:0;right:0;left:0;color:var(--van-index-anchor-sticky-text-color);background:var(--van-index-anchor-sticky-background-color)}

package/es/index-anchor/index.d.ts

@@ -6,3 +6,4 @@ export declare const IndexAnchor: import("../utils").WithInstall<import("vue").D
     index?: string | number | undefined;
 }>, {}>>;
 export default IndexAnchor;
+export type { IndexAnchorProps } from './IndexAnchor';

package/es/index-anchor/var.less

@@ -8,4 +8,4 @@
 @index-anchor-line-height: 32px;
 @index-anchor-background-color: transparent;
 @index-anchor-sticky-text-color: var(--van-danger-color);
-@index-anchor-sticky-background-color: var(--van-white);
+@index-anchor-sticky-background-color: var(--van-background-color-light);

package/es/index-bar/IndexBar.d.ts

@@ -1,7 +1,7 @@
 import { PropType, InjectionKey, ExtractPropTypes } from 'vue';
 import { IndexBarProvide } from './types';
 declare function genAlphabet(): string[];
-declare const props: {
+declare const indexBarProps: {
     sticky: {
         type: BooleanConstructor;
         default: true;
@@ -18,7 +18,7 @@ declare const props: {
         default: typeof genAlphabet;
     };
 };
-export declare type IndexBarProps = ExtractPropTypes<typeof props>;
+export declare type IndexBarProps = ExtractPropTypes<typeof indexBarProps>;
 export declare const INDEX_BAR_KEY: InjectionKey<IndexBarProvide>;
 declare const _default: import("vue").DefineComponent<{
     sticky: {

package/es/index-bar/IndexBar.js

@@ -14,7 +14,7 @@ function genAlphabet() {
 }
 
 var [name, bem] = createNamespace('index-bar');
-var props = {
+var indexBarProps = {
   sticky: truthProp,
   zIndex: numericProp,
   teleport: [String, Object],
@@ -28,13 +28,14 @@ var props = {
 export var INDEX_BAR_KEY = Symbol(name);
 export default defineComponent({
   name,
-  props,
+  props: indexBarProps,
   emits: ['select', 'change'],
 
-  setup(props, {
-    emit,
-    slots
-  }) {
+  setup(props, _ref) {
+    var {
+      emit,
+      slots
+    } = _ref;
     var root = ref();
     var activeAnchor = ref('');
     var touch = useTouch();

package/es/index.d.ts

@@ -90,4 +90,4 @@ declare namespace _default {
 }
 export default _default;
 export function install(app: any): void;
-export const version: "3.2.6";
+export const version: "3.3.1";

package/es/index.js

@@ -84,7 +84,7 @@ import { Tag } from './tag';
 import { Toast } from './toast';
 import { TreeSelect } from './tree-select';
 import { Uploader } from './uploader';
-var version = '3.2.6';
+var version = '3.3.1';
 
 function install(app) {
   var components = [ActionBar, ActionBarButton, ActionBarIcon, ActionSheet, AddressEdit, AddressList, Area, Badge, Button, Calendar, Card, Cascader, Cell, CellGroup, Checkbox, CheckboxGroup, Circle, Col, Collapse, CollapseItem, ConfigProvider, ContactCard, ContactEdit, ContactList, CountDown, Coupon, CouponCell, CouponList, DatetimePicker, Dialog, Divider, DropdownItem, DropdownMenu, Empty, Field, Form, Grid, GridItem, Icon, Image, ImagePreview, IndexAnchor, IndexBar, List, Loading, Locale, NavBar, NoticeBar, Notify, NumberKeyboard, Overlay, Pagination, PasswordInput, Picker, Popover, Popup, Progress, PullRefresh, Radio, RadioGroup, Rate, Row, Search, ShareSheet, Sidebar, SidebarItem, Skeleton, Slider, Step, Stepper, Steps, Sticky, SubmitBar, Swipe, SwipeCell, SwipeItem, Switch, Tab, Tabbar, TabbarItem, Tabs, Tag, Toast, TreeSelect, Uploader];

package/es/lazyload/index.d.ts

@@ -1,3 +1,3 @@
-import { Lazyload } from '@vant/lazyload';
+import { Lazyload } from './vue-lazyload';
 export default Lazyload;
 export { Lazyload };

package/es/lazyload/index.js

@@ -1,3 +1,3 @@
-import { Lazyload } from '@vant/lazyload';
+import { Lazyload } from './vue-lazyload';
 export default Lazyload;
 export { Lazyload };

package/es/lazyload/vue-lazyload/index.d.ts

@@ -0,0 +1,55 @@
+import type { App } from 'vue';
+
+declare type ListenEvent =
+  | 'scroll'
+  | 'wheel'
+  | 'mousewheel'
+  | 'resize'
+  | 'animationend'
+  | 'transitionend'
+  | 'touchmove';
+
+// eslint-disable-next-line
+declare type Callback = (listener: any, options: LazyloadOptions) => void;
+
+declare type Filter = {
+  webp?: Callback;
+  progressive?: Callback;
+};
+
+declare type Adapter = {
+  error?: Callback;
+  loaded?: Callback;
+  loading?: Callback;
+};
+
+export declare type LazyloadOptions = {
+  error?: string;
+  filter?: Filter;
+  silent?: boolean;
+  adapter?: Adapter;
+  loading?: string;
+  attempt?: number;
+  preLoad?: number;
+  observer?: boolean;
+  lazyImage?: boolean;
+  throttleWait?: number;
+  listenEvents?: ListenEvent[];
+  dispatchEvent?: boolean;
+  lazyComponent?: boolean;
+  observerOptions?: IntersectionObserverInit;
+};
+
+export declare const Lazyload: {
+  install(app: App, options?: LazyloadOptions): void;
+};
+
+declare module '@vue/runtime-core' {
+  interface ComponentCustomProperties {
+    $Lazyload: {
+      $on: (event: string, handler: Callback) => void;
+      $off: (event: string, handler?: Callback) => void;
+      $once: (event: string, handler: Callback) => void;
+    };
+  }
+}

package/es/lazyload/vue-lazyload/index.js

@@ -0,0 +1,46 @@
+/**
+ * This is a fork of [vue-lazyload](https://github.com/hilongjw/vue-lazyload) with Vue 3 support.
+ */
+import Lazy from './lazy';
+import LazyComponent from './lazy-component';
+import LazyContainer from './lazy-container';
+import LazyImage from './lazy-image';
+export var Lazyload = {
+  /*
+   * install function
+   * @param  {App} app
+   * @param  {object} options lazyload options
+   */
+  install(app, options) {
+    if (options === void 0) {
+      options = {};
+    }
+
+    var LazyClass = Lazy();
+    var lazy = new LazyClass(options);
+    var lazyContainer = new LazyContainer({
+      lazy
+    });
+    app.config.globalProperties.$Lazyload = lazy;
+
+    if (options.lazyComponent) {
+      app.component('LazyComponent', LazyComponent(lazy));
+    }
+
+    if (options.lazyImage) {
+      app.component('LazyImage', LazyImage(lazy));
+    }
+
+    app.directive('lazy', {
+      beforeMount: lazy.add.bind(lazy),
+      updated: lazy.update.bind(lazy),
+      unmounted: lazy.remove.bind(lazy)
+    });
+    app.directive('lazy-container', {
+      beforeMount: lazyContainer.bind.bind(lazyContainer),
+      updated: lazyContainer.update.bind(lazyContainer),
+      unmounted: lazyContainer.unbind.bind(lazyContainer)
+    });
+  }
+
+};

package/es/lazyload/vue-lazyload/lazy-component.js

@@ -0,0 +1,53 @@
+import { h } from 'vue';
+import { inBrowser, useRect } from '@vant/use';
+export default (lazy => ({
+  props: {
+    tag: {
+      type: String,
+      default: 'div'
+    }
+  },
+  emits: ['show'],
+
+  render() {
+    return h(this.tag, this.show && this.$slots.default ? this.$slots.default() : null);
+  },
+
+  data() {
+    return {
+      el: null,
+      state: {
+        loaded: false
+      },
+      show: false
+    };
+  },
+
+  mounted() {
+    this.el = this.$el;
+    lazy.addLazyBox(this);
+    lazy.lazyLoadHandler();
+  },
+
+  beforeUnmount() {
+    lazy.removeComponent(this);
+  },
+
+  methods: {
+    checkInView() {
+      var rect = useRect(this.$el);
+      return inBrowser && rect.top < window.innerHeight * lazy.options.preLoad && rect.bottom > 0 && rect.left < window.innerWidth * lazy.options.preLoad && rect.right > 0;
+    },
+
+    load() {
+      this.show = true;
+      this.state.loaded = true;
+      this.$emit('show', this);
+    },
+
+    destroy() {
+      return this.$destroy;
+    }
+
+  }
+}));

package/es/lazyload/vue-lazyload/lazy-container.js

@@ -0,0 +1,98 @@
+/* eslint-disable max-classes-per-file */
+
+/* eslint-disable prefer-object-spread */
+import { remove } from './util';
+var defaultOptions = {
+  selector: 'img'
+};
+
+class LazyContainer {
+  constructor(_ref) {
+    var {
+      el,
+      binding,
+      vnode,
+      lazy
+    } = _ref;
+    this.el = null;
+    this.vnode = vnode;
+    this.binding = binding;
+    this.options = {};
+    this.lazy = lazy;
+    this.queue = [];
+    this.update({
+      el,
+      binding
+    });
+  }
+
+  update(_ref2) {
+    var {
+      el,
+      binding
+    } = _ref2;
+    this.el = el;
+    this.options = Object.assign({}, defaultOptions, binding.value);
+    var imgs = this.getImgs();
+    imgs.forEach(el => {
+      this.lazy.add(el, Object.assign({}, this.binding, {
+        value: {
+          src: 'dataset' in el ? el.dataset.src : el.getAttribute('data-src'),
+          error: ('dataset' in el ? el.dataset.error : el.getAttribute('data-error')) || this.options.error,
+          loading: ('dataset' in el ? el.dataset.loading : el.getAttribute('data-loading')) || this.options.loading
+        }
+      }), this.vnode);
+    });
+  }
+
+  getImgs() {
+    return Array.from(this.el.querySelectorAll(this.options.selector));
+  }
+
+  clear() {
+    var imgs = this.getImgs();
+    imgs.forEach(el => this.lazy.remove(el));
+    this.vnode = null;
+    this.binding = null;
+    this.lazy = null;
+  }
+
+}
+
+export default class LazyContainerManager {
+  constructor(_ref3) {
+    var {
+      lazy
+    } = _ref3;
+    this.lazy = lazy;
+    this.queue = [];
+  }
+
+  bind(el, binding, vnode) {
+    var container = new LazyContainer({
+      el,
+      binding,
+      vnode,
+      lazy: this.lazy
+    });
+    this.queue.push(container);
+  }
+
+  update(el, binding, vnode) {
+    var container = this.queue.find(item => item.el === el);
+    if (!container) return;
+    container.update({
+      el,
+      binding,
+      vnode
+    });
+  }
+
+  unbind(el) {
+    var container = this.queue.find(item => item.el === el);
+    if (!container) return;
+    container.clear();
+    remove(this.queue, container);
+  }
+
+}