vant 3.2.8 → 3.3.3-beta.nuxt3

package/es/form/Form.js

@@ -1,7 +1,7 @@
 import { createVNode as _createVNode } from "vue";
 import { defineComponent } from 'vue'; // Utils
 
-import { FORM_KEY, truthProp, numericProp, makeStringProp, createNamespace } from '../utils'; // Composables
+import { FORM_KEY, truthProp, numericProp, preventDefault, makeStringProp, createNamespace } from '../utils'; // Composables
 
 import { useChildren } from '@vant/use';
 import { useExpose } from '../composables/use-expose'; // Types
@@ -146,7 +146,7 @@ export default defineComponent({
     };
 
     var onSubmit = event => {
-      event.preventDefault();
+      preventDefault(event);
       submit();
     };
 

package/es/image/Image.js

@@ -38,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';

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, HAPTICS_FEEDBACK } 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';
@@ -44,7 +44,6 @@ export default defineComponent({
       slots
     } = _ref;
     var swipeRef = ref();
-    var windowSize = useWindowSize();
     var state = reactive({
       active: 0,
       rootWidth: 0,
@@ -143,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/index.d.ts

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

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.8';
+var version = '3.3.2';
 
 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);
+  }
+
+}

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

@@ -0,0 +1,115 @@
+import { useRect } from '@vant/use';
+import { loadImageAsync } from './util';
+import { noop } from '../../utils';
+export default (lazyManager => ({
+  props: {
+    src: [String, Object],
+    tag: {
+      type: String,
+      default: 'img'
+    }
+  },
+
+  render(h) {
+    return h(this.tag, {
+      attrs: {
+        src: this.renderSrc
+      }
+    }, this.$slots.default);
+  },
+
+  data() {
+    return {
+      el: null,
+      options: {
+        src: '',
+        error: '',
+        loading: '',
+        attempt: lazyManager.options.attempt
+      },
+      state: {
+        loaded: false,
+        error: false,
+        attempt: 0
+      },
+      renderSrc: ''
+    };
+  },
+
+  watch: {
+    src() {
+      this.init();
+      lazyManager.addLazyBox(this);
+      lazyManager.lazyLoadHandler();
+    }
+
+  },
+
+  created() {
+    this.init();
+    this.renderSrc = this.options.loading;
+  },
+
+  mounted() {
+    this.el = this.$el;
+    lazyManager.addLazyBox(this);
+    lazyManager.lazyLoadHandler();
+  },
+
+  beforeUnmount() {
+    lazyManager.removeComponent(this);
+  },
+
+  methods: {
+    init() {
+      var {
+        src,
+        loading,
+        error
+      } = lazyManager.valueFormatter(this.src);
+      this.state.loaded = false;
+      this.options.src = src;
+      this.options.error = error;
+      this.options.loading = loading;
+      this.renderSrc = this.options.loading;
+    },
+
+    checkInView() {
+      var rect = useRect(this.$el);
+      return rect.top < window.innerHeight * lazyManager.options.preLoad && rect.bottom > 0 && rect.left < window.innerWidth * lazyManager.options.preLoad && rect.right > 0;
+    },
+
+    load(onFinish) {
+      if (onFinish === void 0) {
+        onFinish = noop;
+      }
+
+      if (this.state.attempt > this.options.attempt - 1 && this.state.error) {
+        if (process.env.NODE_ENV !== 'production' && !lazyManager.options.silent) {
+          console.log("[@vant/lazyload] " + this.options.src + " tried too more than " + this.options.attempt + " times");
+        }
+
+        onFinish();
+        return;
+      }
+
+      var {
+        src
+      } = this.options;
+      loadImageAsync({
+        src
+      }, _ref => {
+        var {
+          src
+        } = _ref;
+        this.renderSrc = src;
+        this.state.loaded = true;
+      }, () => {
+        this.state.attempt++;
+        this.renderSrc = this.options.error;
+        this.state.error = true;
+      });
+    }
+
+  }
+}));