vant 4.0.0-alpha.3 → 4.0.0-beta.1

package/es/image/Image.js

@@ -1,149 +0,0 @@
-import { withDirectives as _withDirectives, mergeProps as _mergeProps, resolveDirective as _resolveDirective, createVNode as _createVNode } from "vue";
-import { ref, watch, computed, nextTick, onBeforeUnmount, defineComponent, getCurrentInstance } from "vue";
-import { isDef, addUnit, inBrowser, truthProp, numericProp, makeStringProp, createNamespace } from "../utils";
-import { Icon } from "../icon";
-const [name, bem] = createNamespace("image");
-const imageProps = {
-  src: String,
-  alt: String,
-  fit: String,
-  position: 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")
-};
-var stdin_default = defineComponent({
-  name,
-  props: imageProps,
-  emits: ["load", "error"],
-  setup(props, {
-    emit,
-    slots
-  }) {
-    const error = ref(false);
-    const loading = ref(true);
-    const imageRef = ref();
-    const {
-      $Lazyload
-    } = getCurrentInstance().proxy;
-    const style = computed(() => {
-      const style2 = {
-        width: addUnit(props.width),
-        height: addUnit(props.height)
-      };
-      if (isDef(props.radius)) {
-        style2.overflow = "hidden";
-        style2.borderRadius = addUnit(props.radius);
-      }
-      return style2;
-    });
-    watch(() => props.src, () => {
-      error.value = false;
-      loading.value = true;
-    });
-    const onLoad = (event) => {
-      loading.value = false;
-      emit("load", event);
-    };
-    const onError = (event) => {
-      error.value = true;
-      loading.value = false;
-      emit("error", event);
-    };
-    const renderIcon = (name2, className, slot) => {
-      if (slot) {
-        return slot();
-      }
-      return _createVNode(Icon, {
-        "name": name2,
-        "size": props.iconSize,
-        "class": className,
-        "classPrefix": props.iconPrefix
-      }, null);
-    };
-    const renderPlaceholder = () => {
-      if (loading.value && props.showLoading) {
-        return _createVNode("div", {
-          "class": bem("loading")
-        }, [renderIcon(props.loadingIcon, bem("loading-icon"), slots.loading)]);
-      }
-      if (error.value && props.showError) {
-        return _createVNode("div", {
-          "class": bem("error")
-        }, [renderIcon(props.errorIcon, bem("error-icon"), slots.error)]);
-      }
-    };
-    const renderImage = () => {
-      if (error.value || !props.src) {
-        return;
-      }
-      const attrs = {
-        alt: props.alt,
-        class: bem("img"),
-        style: {
-          objectFit: props.fit,
-          objectPosition: props.position
-        }
-      };
-      if (props.lazyLoad) {
-        return _withDirectives(_createVNode("img", _mergeProps({
-          "ref": imageRef
-        }, attrs), null), [[_resolveDirective("lazy"), props.src]]);
-      }
-      return _createVNode("img", _mergeProps({
-        "src": props.src,
-        "onLoad": onLoad,
-        "onError": onError
-      }, attrs), null);
-    };
-    const onLazyLoaded = ({
-      el
-    }) => {
-      const check = () => {
-        if (el === imageRef.value && loading.value) {
-          onLoad();
-        }
-      };
-      if (imageRef.value) {
-        check();
-      } else {
-        nextTick(check);
-      }
-    };
-    const onLazyLoadError = ({
-      el
-    }) => {
-      if (el === imageRef.value && !error.value) {
-        onError();
-      }
-    };
-    if ($Lazyload && inBrowser) {
-      $Lazyload.$on("loaded", onLazyLoaded);
-      $Lazyload.$on("error", onLazyLoadError);
-      onBeforeUnmount(() => {
-        $Lazyload.$off("loaded", onLazyLoaded);
-        $Lazyload.$off("error", onLazyLoadError);
-      });
-    }
-    return () => {
-      var _a;
-      return _createVNode("div", {
-        "class": bem({
-          round: props.round
-        }),
-        "style": style.value
-      }, [renderImage(), renderPlaceholder(), (_a = slots.default) == null ? void 0 : _a.call(slots)]);
-    };
-  }
-});
-export {
-  stdin_default as default
-};

package/es/image/index.js

@@ -1,8 +0,0 @@
-import { withInstall } from "../utils";
-import _Image from "./Image";
-const Image = withInstall(_Image);
-var stdin_default = Image;
-export {
-  Image,
-  stdin_default as default
-};

package/es/image/index.less

@@ -1,55 +0,0 @@
-body {
-  --van-image-placeholder-text-color: var(--van-text-color-2);
-  --van-image-placeholder-font-size: var(--van-font-size-md);
-  --van-image-placeholder-background: var(--van-background);
-  --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;
-
-  &--round {
-    overflow: hidden;
-    border-radius: var(--van-radius-max);
-
-    .van-image__img {
-      border-radius: inherit;
-    }
-  }
-
-  &__img,
-  &__error,
-  &__loading {
-    display: block;
-    width: 100%;
-    height: 100%;
-  }
-
-  &__error,
-  &__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);
-  }
-
-  &__loading-icon {
-    color: var(--van-image-loading-icon-color);
-    font-size: var(--van-image-loading-icon-size);
-  }
-
-  &__error-icon {
-    color: var(--van-image-error-icon-color);
-    font-size: var(--van-image-error-icon-size);
-  }
-}

package/es/image/style/less.d.ts

@@ -1 +0,0 @@
-export {};

package/es/image/style/less.js

@@ -1,4 +0,0 @@
-import "../../style/base.less";
-import "../../badge/index.less";
-import "../../icon/index.less";
-import "../index.less";

package/es/image-preview/ImagePreview.js

@@ -1,161 +0,0 @@
-import { mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
-import { ref, watch, nextTick, reactive, onMounted, defineComponent } from "vue";
-import { pick, truthProp, unknownProp, windowWidth, windowHeight, makeArrayProp, makeStringProp, makeNumericProp, callInterceptor, createNamespace, HAPTICS_FEEDBACK } from "../utils";
-import { useRect } from "@vant/use";
-import { useExpose } from "../composables/use-expose";
-import { Icon } from "../icon";
-import { Swipe } from "../swipe";
-import { Popup } from "../popup";
-import ImagePreviewItem from "./ImagePreviewItem";
-const [name, bem] = createNamespace("image-preview");
-const popupProps = ["show", "transition", "overlayStyle", "closeOnPopstate"];
-const imagePreviewProps = {
-  show: Boolean,
-  loop: truthProp,
-  images: makeArrayProp(),
-  minZoom: makeNumericProp(1 / 3),
-  maxZoom: makeNumericProp(3),
-  overlay: truthProp,
-  closeable: Boolean,
-  showIndex: truthProp,
-  className: unknownProp,
-  closeIcon: makeStringProp("clear"),
-  transition: String,
-  beforeClose: Function,
-  overlayClass: unknownProp,
-  overlayStyle: Object,
-  swipeDuration: makeNumericProp(300),
-  startPosition: makeNumericProp(0),
-  showIndicators: Boolean,
-  closeOnPopstate: truthProp,
-  closeIconPosition: makeStringProp("top-right")
-};
-var stdin_default = defineComponent({
-  name,
-  props: imagePreviewProps,
-  emits: ["scale", "close", "closed", "change", "update:show"],
-  setup(props, {
-    emit,
-    slots
-  }) {
-    const swipeRef = ref();
-    const state = reactive({
-      active: 0,
-      rootWidth: 0,
-      rootHeight: 0
-    });
-    const resize = () => {
-      if (swipeRef.value) {
-        const rect = useRect(swipeRef.value.$el);
-        state.rootWidth = rect.width;
-        state.rootHeight = rect.height;
-        swipeRef.value.resize();
-      }
-    };
-    const emitScale = (args) => emit("scale", args);
-    const updateShow = (show) => emit("update:show", show);
-    const emitClose = () => {
-      callInterceptor(props.beforeClose, {
-        args: [state.active],
-        done: () => updateShow(false)
-      });
-    };
-    const setActive = (active) => {
-      if (active !== state.active) {
-        state.active = active;
-        emit("change", active);
-      }
-    };
-    const renderIndex = () => {
-      if (props.showIndex) {
-        return _createVNode("div", {
-          "class": bem("index")
-        }, [slots.index ? slots.index({
-          index: state.active
-        }) : `${state.active + 1} / ${props.images.length}`]);
-      }
-    };
-    const renderCover = () => {
-      if (slots.cover) {
-        return _createVNode("div", {
-          "class": bem("cover")
-        }, [slots.cover()]);
-      }
-    };
-    const renderImages = () => _createVNode(Swipe, {
-      "ref": swipeRef,
-      "lazyRender": true,
-      "loop": props.loop,
-      "class": bem("swipe"),
-      "duration": props.swipeDuration,
-      "initialSwipe": props.startPosition,
-      "showIndicators": props.showIndicators,
-      "indicatorColor": "white",
-      "onChange": setActive
-    }, {
-      default: () => [props.images.map((image) => _createVNode(ImagePreviewItem, {
-        "src": image,
-        "show": props.show,
-        "active": state.active,
-        "maxZoom": props.maxZoom,
-        "minZoom": props.minZoom,
-        "rootWidth": state.rootWidth,
-        "rootHeight": state.rootHeight,
-        "onScale": emitScale,
-        "onClose": emitClose
-      }, null))]
-    });
-    const renderClose = () => {
-      if (props.closeable) {
-        return _createVNode(Icon, {
-          "role": "button",
-          "name": props.closeIcon,
-          "class": [bem("close-icon", props.closeIconPosition), HAPTICS_FEEDBACK],
-          "onClick": emitClose
-        }, null);
-      }
-    };
-    const onClosed = () => emit("closed");
-    const swipeTo = (index, options) => {
-      var _a;
-      return (_a = swipeRef.value) == null ? void 0 : _a.swipeTo(index, options);
-    };
-    useExpose({
-      swipeTo
-    });
-    onMounted(resize);
-    watch([windowWidth, windowHeight], resize);
-    watch(() => props.startPosition, (value) => setActive(+value));
-    watch(() => props.show, (value) => {
-      const {
-        images,
-        startPosition
-      } = props;
-      if (value) {
-        setActive(+startPosition);
-        nextTick(() => {
-          resize();
-          swipeTo(+startPosition, {
-            immediate: true
-          });
-        });
-      } else {
-        emit("close", {
-          index: state.active,
-          url: images[state.active]
-        });
-      }
-    });
-    return () => _createVNode(Popup, _mergeProps({
-      "class": [bem(), props.className],
-      "overlayClass": [bem("overlay"), props.overlayClass],
-      "onClosed": onClosed,
-      "onUpdate:show": updateShow
-    }, pick(props, popupProps)), {
-      default: () => [renderClose(), renderImages(), renderIndex(), renderCover()]
-    });
-  }
-});
-export {
-  stdin_default as default
-};

package/es/image-preview/ImagePreviewItem.js

@@ -1,248 +0,0 @@
-import { createVNode as _createVNode } from "vue";
-import { watch, computed, reactive, defineComponent } from "vue";
-import { clamp, numericProp, preventDefault, createNamespace, makeRequiredProp } from "../utils";
-import { useTouch } from "../composables/use-touch";
-import { Image } from "../image";
-import { Loading } from "../loading";
-import { SwipeItem } from "../swipe-item";
-const getDistance = (touches) => Math.sqrt((touches[0].clientX - touches[1].clientX) ** 2 + (touches[0].clientY - touches[1].clientY) ** 2);
-const bem = createNamespace("image-preview")[1];
-var stdin_default = defineComponent({
-  props: {
-    src: String,
-    show: Boolean,
-    active: Number,
-    minZoom: makeRequiredProp(numericProp),
-    maxZoom: makeRequiredProp(numericProp),
-    rootWidth: makeRequiredProp(Number),
-    rootHeight: makeRequiredProp(Number)
-  },
-  emits: ["scale", "close"],
-  setup(props, {
-    emit
-  }) {
-    const state = reactive({
-      scale: 1,
-      moveX: 0,
-      moveY: 0,
-      moving: false,
-      zooming: false,
-      imageRatio: 0,
-      displayWidth: 0,
-      displayHeight: 0
-    });
-    const touch = useTouch();
-    const vertical = computed(() => {
-      const {
-        rootWidth,
-        rootHeight
-      } = props;
-      const rootRatio = rootHeight / rootWidth;
-      return state.imageRatio > rootRatio;
-    });
-    const imageStyle = computed(() => {
-      const {
-        scale,
-        moveX,
-        moveY,
-        moving,
-        zooming
-      } = state;
-      const style = {
-        transitionDuration: zooming || moving ? "0s" : ".3s"
-      };
-      if (scale !== 1) {
-        const offsetX = moveX / scale;
-        const offsetY = moveY / scale;
-        style.transform = `scale(${scale}, ${scale}) translate(${offsetX}px, ${offsetY}px)`;
-      }
-      return style;
-    });
-    const maxMoveX = computed(() => {
-      if (state.imageRatio) {
-        const {
-          rootWidth,
-          rootHeight
-        } = props;
-        const displayWidth = vertical.value ? rootHeight / state.imageRatio : rootWidth;
-        return Math.max(0, (state.scale * displayWidth - rootWidth) / 2);
-      }
-      return 0;
-    });
-    const maxMoveY = computed(() => {
-      if (state.imageRatio) {
-        const {
-          rootWidth,
-          rootHeight
-        } = props;
-        const displayHeight = vertical.value ? rootHeight : rootWidth * state.imageRatio;
-        return Math.max(0, (state.scale * displayHeight - rootHeight) / 2);
-      }
-      return 0;
-    });
-    const setScale = (scale) => {
-      scale = clamp(scale, +props.minZoom, +props.maxZoom + 1);
-      if (scale !== state.scale) {
-        state.scale = scale;
-        emit("scale", {
-          scale,
-          index: props.active
-        });
-      }
-    };
-    const resetScale = () => {
-      setScale(1);
-      state.moveX = 0;
-      state.moveY = 0;
-    };
-    const toggleScale = () => {
-      const scale = state.scale > 1 ? 1 : 2;
-      setScale(scale);
-      state.moveX = 0;
-      state.moveY = 0;
-    };
-    let fingerNum;
-    let startMoveX;
-    let startMoveY;
-    let startScale;
-    let startDistance;
-    let doubleTapTimer;
-    let touchStartTime;
-    const onTouchStart = (event) => {
-      const {
-        touches
-      } = event;
-      const {
-        offsetX
-      } = touch;
-      touch.start(event);
-      fingerNum = touches.length;
-      startMoveX = state.moveX;
-      startMoveY = state.moveY;
-      touchStartTime = Date.now();
-      state.moving = fingerNum === 1 && state.scale !== 1;
-      state.zooming = fingerNum === 2 && !offsetX.value;
-      if (state.zooming) {
-        startScale = state.scale;
-        startDistance = getDistance(event.touches);
-      }
-    };
-    const onTouchMove = (event) => {
-      const {
-        touches
-      } = event;
-      touch.move(event);
-      if (state.moving || state.zooming) {
-        preventDefault(event, true);
-      }
-      if (state.moving) {
-        const {
-          deltaX,
-          deltaY
-        } = touch;
-        const moveX = deltaX.value + startMoveX;
-        const moveY = deltaY.value + startMoveY;
-        state.moveX = clamp(moveX, -maxMoveX.value, maxMoveX.value);
-        state.moveY = clamp(moveY, -maxMoveY.value, maxMoveY.value);
-      }
-      if (state.zooming && touches.length === 2) {
-        const distance = getDistance(touches);
-        const scale = startScale * distance / startDistance;
-        setScale(scale);
-      }
-    };
-    const checkTap = () => {
-      if (fingerNum > 1) {
-        return;
-      }
-      const {
-        offsetX,
-        offsetY
-      } = touch;
-      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");
-            doubleTapTimer = null;
-          }, TAP_TIME);
-        }
-      }
-    };
-    const onTouchEnd = (event) => {
-      let stopPropagation = false;
-      if (state.moving || state.zooming) {
-        stopPropagation = true;
-        if (state.moving && startMoveX === state.moveX && startMoveY === state.moveY) {
-          stopPropagation = false;
-        }
-        if (!event.touches.length) {
-          if (state.zooming) {
-            state.moveX = clamp(state.moveX, -maxMoveX.value, maxMoveX.value);
-            state.moveY = clamp(state.moveY, -maxMoveY.value, maxMoveY.value);
-            state.zooming = false;
-          }
-          state.moving = false;
-          startMoveX = 0;
-          startMoveY = 0;
-          startScale = 1;
-          if (state.scale < 1) {
-            resetScale();
-          }
-          if (state.scale > props.maxZoom) {
-            state.scale = +props.maxZoom;
-          }
-        }
-      }
-      preventDefault(event, stopPropagation);
-      checkTap();
-      touch.reset();
-    };
-    const onLoad = (event) => {
-      const {
-        naturalWidth,
-        naturalHeight
-      } = event.target;
-      state.imageRatio = naturalHeight / naturalWidth;
-    };
-    watch(() => props.active, resetScale);
-    watch(() => props.show, (value) => {
-      if (!value) {
-        resetScale();
-      }
-    });
-    return () => {
-      const imageSlots = {
-        loading: () => _createVNode(Loading, {
-          "type": "spinner"
-        }, null)
-      };
-      return _createVNode(SwipeItem, {
-        "class": bem("swipe-item"),
-        "onTouchstart": onTouchStart,
-        "onTouchmove": onTouchMove,
-        "onTouchend": onTouchEnd,
-        "onTouchcancel": onTouchEnd
-      }, {
-        default: () => [_createVNode(Image, {
-          "src": props.src,
-          "fit": "contain",
-          "class": bem("image", {
-            vertical: vertical.value
-          }),
-          "style": imageStyle.value,
-          "onLoad": onLoad
-        }, imageSlots)]
-      });
-    };
-  }
-});
-export {
-  stdin_default as default
-};

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

@@ -1,68 +0,0 @@
-import { createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
-import { extend, inBrowser, withInstall } from "../utils";
-import { mountComponent, usePopupState } from "../utils/mount-component";
-import VanImagePreview from "./ImagePreview";
-let instance;
-const defaultConfig = {
-  loop: true,
-  images: [],
-  maxZoom: 3,
-  minZoom: 1 / 3,
-  onScale: void 0,
-  onClose: void 0,
-  onChange: void 0,
-  teleport: "body",
-  className: "",
-  showIndex: true,
-  closeable: false,
-  closeIcon: "clear",
-  transition: void 0,
-  beforeClose: void 0,
-  overlayStyle: void 0,
-  overlayClass: void 0,
-  startPosition: 0,
-  swipeDuration: 300,
-  showIndicators: false,
-  closeOnPopstate: true,
-  closeIconPosition: "top-right"
-};
-function initInstance() {
-  ({
-    instance
-  } = mountComponent({
-    setup() {
-      const {
-        state,
-        toggle
-      } = usePopupState();
-      const onClosed = () => {
-        state.images = [];
-      };
-      return () => _createVNode(VanImagePreview, _mergeProps(state, {
-        "onClosed": onClosed,
-        "onUpdate:show": toggle
-      }), null);
-    }
-  }));
-}
-const ImagePreview = (options, startPosition = 0) => {
-  if (!inBrowser) {
-    return;
-  }
-  if (!instance) {
-    initInstance();
-  }
-  options = Array.isArray(options) ? {
-    images: options,
-    startPosition
-  } : options;
-  instance.open(extend({}, defaultConfig, options));
-  return instance;
-};
-ImagePreview.Component = withInstall(VanImagePreview);
-ImagePreview.install = (app) => {
-  app.use(ImagePreview.Component);
-};
-export {
-  ImagePreview
-};

package/es/image-preview/index.js

@@ -1,6 +0,0 @@
-import { ImagePreview } from "./function-call";
-var stdin_default = ImagePreview;
-export {
-  ImagePreview,
-  stdin_default as default
-};