vant 4.0.0-alpha.2 → 4.0.0-beta.0

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

@@ -1,7 +1,134 @@
-import { ImagePreview } from './function-call';
 import type { ImagePreviewProps } from './ImagePreview';
+export declare const ImagePreview: import("../utils").WithInstall<import("vue").DefineComponent<{
+    show: BooleanConstructor;
+    loop: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    images: {
+        type: import("vue").PropType<string[]>;
+        default: () => never[];
+    };
+    minZoom: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    maxZoom: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    overlay: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    closeable: BooleanConstructor;
+    showIndex: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    className: import("vue").PropType<unknown>;
+    closeIcon: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    transition: StringConstructor;
+    beforeClose: import("vue").PropType<import("../utils").Interceptor>;
+    overlayClass: import("vue").PropType<unknown>;
+    overlayStyle: import("vue").PropType<import("vue").CSSProperties>;
+    swipeDuration: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    startPosition: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    showIndicators: BooleanConstructor;
+    closeOnPopstate: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    closeIconPosition: {
+        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<{
+    show: BooleanConstructor;
+    loop: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    images: {
+        type: import("vue").PropType<string[]>;
+        default: () => never[];
+    };
+    minZoom: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    maxZoom: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    overlay: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    closeable: BooleanConstructor;
+    showIndex: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    className: import("vue").PropType<unknown>;
+    closeIcon: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    transition: StringConstructor;
+    beforeClose: import("vue").PropType<import("../utils").Interceptor>;
+    overlayClass: import("vue").PropType<unknown>;
+    overlayStyle: import("vue").PropType<import("vue").CSSProperties>;
+    swipeDuration: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    startPosition: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    showIndicators: BooleanConstructor;
+    closeOnPopstate: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    closeIconPosition: {
+        type: import("vue").PropType<import("..").PopupCloseIconPosition>;
+        default: import("..").PopupCloseIconPosition;
+    };
+}>> & {
+    onChange?: ((...args: any[]) => any) | undefined;
+    onClose?: ((...args: any[]) => any) | undefined;
+    onClosed?: ((...args: any[]) => any) | undefined;
+    "onUpdate:show"?: ((...args: any[]) => any) | undefined;
+    onScale?: ((...args: any[]) => any) | undefined;
+}, {
+    loop: boolean;
+    overlay: boolean;
+    show: boolean;
+    closeIcon: string;
+    closeable: boolean;
+    closeOnPopstate: boolean;
+    closeIconPosition: import("..").PopupCloseIconPosition;
+    swipeDuration: string | number;
+    showIndicators: boolean;
+    startPosition: string | number;
+    minZoom: string | number;
+    maxZoom: string | number;
+    images: string[];
+    showIndex: boolean;
+}>>;
 export default ImagePreview;
-export { ImagePreview };
+export { showImagePreview } from './function-call';
 export type { ImagePreviewProps };
 export type { ImagePreviewOptions, ImagePreviewInstance, ImagePreviewScaleEventParams, } from './types';
 declare module 'vue' {

package/es/image-preview/index.mjs

@@ -0,0 +1,10 @@
+import { withInstall } from "../utils/index.mjs";
+import _ImagePreview from "./ImagePreview.mjs";
+const ImagePreview = withInstall(_ImagePreview);
+var stdin_default = ImagePreview;
+import { showImagePreview } from "./function-call.mjs";
+export {
+  ImagePreview,
+  stdin_default as default,
+  showImagePreview
+};

package/es/index-anchor/IndexAnchor.mjs

@@ -0,0 +1,87 @@
+import { createVNode as _createVNode } from "vue";
+import { ref, reactive, computed, defineComponent } from "vue";
+import { extend, numericProp, BORDER_BOTTOM, getZIndexStyle, createNamespace } from "../utils/index.mjs";
+import { INDEX_BAR_KEY } from "../index-bar/IndexBar.mjs";
+import { getScrollTop, getRootScrollTop } from "../utils/dom.mjs";
+import { useRect, useParent } from "@vant/use";
+import { useExpose } from "../composables/use-expose.mjs";
+const [name, bem] = createNamespace("index-anchor");
+const indexAnchorProps = {
+  index: numericProp
+};
+var stdin_default = defineComponent({
+  name,
+  props: indexAnchorProps,
+  setup(props, {
+    slots
+  }) {
+    const state = reactive({
+      top: 0,
+      left: null,
+      rect: {
+        top: 0,
+        height: 0
+      },
+      width: null,
+      active: false
+    });
+    const root = ref();
+    const {
+      parent
+    } = useParent(INDEX_BAR_KEY);
+    if (!parent) {
+      if (process.env.NODE_ENV !== "production") {
+        console.error("[Vant] <IndexAnchor> must be a child component of <IndexBar>.");
+      }
+      return;
+    }
+    const isSticky = () => state.active && parent.props.sticky;
+    const anchorStyle = computed(() => {
+      const {
+        zIndex,
+        highlightColor
+      } = parent.props;
+      if (isSticky()) {
+        return extend(getZIndexStyle(zIndex), {
+          left: state.left ? `${state.left}px` : void 0,
+          width: state.width ? `${state.width}px` : void 0,
+          transform: state.top ? `translate3d(0, ${state.top}px, 0)` : void 0,
+          color: highlightColor
+        });
+      }
+    });
+    const getRect = (scrollParent, scrollParentRect) => {
+      const rootRect = useRect(root);
+      state.rect.height = rootRect.height;
+      if (scrollParent === window || scrollParent === document.body) {
+        state.rect.top = rootRect.top + getRootScrollTop();
+      } else {
+        state.rect.top = rootRect.top + getScrollTop(scrollParent) - scrollParentRect.top;
+      }
+      return state.rect;
+    };
+    useExpose({
+      state,
+      getRect
+    });
+    return () => {
+      const sticky = isSticky();
+      return _createVNode("div", {
+        "ref": root,
+        "style": {
+          height: sticky ? `${state.rect.height}px` : void 0
+        }
+      }, [_createVNode("div", {
+        "style": anchorStyle.value,
+        "class": [bem({
+          sticky
+        }), {
+          [BORDER_BOTTOM]: sticky
+        }]
+      }, [slots.default ? slots.default() : props.index])]);
+    };
+  }
+});
+export {
+  stdin_default as default
+};

package/es/index-anchor/index.mjs

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

package/es/index-bar/IndexBar.mjs

@@ -0,0 +1,221 @@
+import { createVNode as _createVNode } from "vue";
+import { ref, watch, computed, nextTick, Teleport, onMounted, defineComponent } from "vue";
+import { isDef, isHidden, truthProp, numericProp, getScrollTop, preventDefault, makeNumberProp, createNamespace, getRootScrollTop, setRootScrollTop } from "../utils/index.mjs";
+import { useRect, useChildren, useScrollParent, useEventListener } from "@vant/use";
+import { useTouch } from "../composables/use-touch.mjs";
+import { useExpose } from "../composables/use-expose.mjs";
+function genAlphabet() {
+  const charCodeOfA = "A".charCodeAt(0);
+  const indexList = Array(26).fill("").map((_, i) => String.fromCharCode(charCodeOfA + i));
+  return indexList;
+}
+const [name, bem] = createNamespace("index-bar");
+const indexBarProps = {
+  sticky: truthProp,
+  zIndex: numericProp,
+  teleport: [String, Object],
+  highlightColor: String,
+  stickyOffsetTop: makeNumberProp(0),
+  indexList: {
+    type: Array,
+    default: genAlphabet
+  }
+};
+const INDEX_BAR_KEY = Symbol(name);
+var stdin_default = defineComponent({
+  name,
+  props: indexBarProps,
+  emits: ["select", "change"],
+  setup(props, {
+    emit,
+    slots
+  }) {
+    const root = ref();
+    const activeAnchor = ref("");
+    const touch = useTouch();
+    const scrollParent = useScrollParent(root);
+    const {
+      children,
+      linkChildren
+    } = useChildren(INDEX_BAR_KEY);
+    let selectActiveIndex;
+    linkChildren({
+      props
+    });
+    const sidebarStyle = computed(() => {
+      if (isDef(props.zIndex)) {
+        return {
+          zIndex: +props.zIndex + 1
+        };
+      }
+    });
+    const highlightStyle = computed(() => {
+      if (props.highlightColor) {
+        return {
+          color: props.highlightColor
+        };
+      }
+    });
+    const getActiveAnchor = (scrollTop, rects) => {
+      for (let i = children.length - 1; i >= 0; i--) {
+        const prevHeight = i > 0 ? rects[i - 1].height : 0;
+        const reachTop = props.sticky ? prevHeight + props.stickyOffsetTop : 0;
+        if (scrollTop + reachTop >= rects[i].top) {
+          return i;
+        }
+      }
+      return -1;
+    };
+    const getMatchAnchor = (index) => children.find((item) => String(item.index) === index);
+    const onScroll = () => {
+      if (isHidden(root)) {
+        return;
+      }
+      const {
+        sticky,
+        indexList
+      } = props;
+      const scrollTop = getScrollTop(scrollParent.value);
+      const scrollParentRect = useRect(scrollParent);
+      const rects = children.map((item) => item.getRect(scrollParent.value, scrollParentRect));
+      let active = -1;
+      if (selectActiveIndex) {
+        const match = getMatchAnchor(selectActiveIndex);
+        if (match) {
+          const rect = match.getRect(scrollParent.value, scrollParentRect);
+          active = getActiveAnchor(rect.top, rects);
+        }
+      } else {
+        active = getActiveAnchor(scrollTop, rects);
+      }
+      activeAnchor.value = indexList[active];
+      if (sticky) {
+        children.forEach((item, index) => {
+          const {
+            state,
+            $el
+          } = item;
+          if (index === active || index === active - 1) {
+            const rect = $el.getBoundingClientRect();
+            state.left = rect.left;
+            state.width = rect.width;
+          } else {
+            state.left = null;
+            state.width = null;
+          }
+          if (index === active) {
+            state.active = true;
+            state.top = Math.max(props.stickyOffsetTop, rects[index].top - scrollTop) + scrollParentRect.top;
+          } else if (index === active - 1 && selectActiveIndex === "") {
+            const activeItemTop = rects[active].top - scrollTop;
+            state.active = activeItemTop > 0;
+            state.top = activeItemTop + scrollParentRect.top - rects[index].height;
+          } else {
+            state.active = false;
+          }
+        });
+      }
+      selectActiveIndex = "";
+    };
+    const init = () => {
+      nextTick(onScroll);
+    };
+    useEventListener("scroll", onScroll, {
+      target: scrollParent
+    });
+    onMounted(init);
+    watch(() => props.indexList, init);
+    watch(activeAnchor, (value) => {
+      if (value) {
+        emit("change", value);
+      }
+    });
+    const renderIndexes = () => props.indexList.map((index) => {
+      const active = index === activeAnchor.value;
+      return _createVNode("span", {
+        "class": bem("index", {
+          active
+        }),
+        "style": active ? highlightStyle.value : void 0,
+        "data-index": index
+      }, [index]);
+    });
+    const scrollTo = (index) => {
+      selectActiveIndex = String(index);
+      const match = getMatchAnchor(selectActiveIndex);
+      if (match) {
+        const scrollTop = getScrollTop(scrollParent.value);
+        const scrollParentRect = useRect(scrollParent);
+        const {
+          offsetHeight
+        } = document.documentElement;
+        if (scrollTop === offsetHeight - scrollParentRect.height) {
+          onScroll();
+          return;
+        }
+        match.$el.scrollIntoView();
+        if (props.sticky && props.stickyOffsetTop) {
+          setRootScrollTop(getRootScrollTop() - props.stickyOffsetTop);
+        }
+        emit("select", match.index);
+      }
+    };
+    const scrollToElement = (element) => {
+      const {
+        index
+      } = element.dataset;
+      if (index) {
+        scrollTo(index);
+      }
+    };
+    const onClickSidebar = (event) => {
+      scrollToElement(event.target);
+    };
+    let touchActiveIndex;
+    const onTouchMove = (event) => {
+      touch.move(event);
+      if (touch.isVertical()) {
+        preventDefault(event);
+        const {
+          clientX,
+          clientY
+        } = event.touches[0];
+        const target = document.elementFromPoint(clientX, clientY);
+        if (target) {
+          const {
+            index
+          } = target.dataset;
+          if (index && touchActiveIndex !== index) {
+            touchActiveIndex = index;
+            scrollToElement(target);
+          }
+        }
+      }
+    };
+    const renderSidebar = () => _createVNode("div", {
+      "class": bem("sidebar"),
+      "style": sidebarStyle.value,
+      "onClick": onClickSidebar,
+      "onTouchstart": touch.start,
+      "onTouchmove": onTouchMove
+    }, [renderIndexes()]);
+    useExpose({
+      scrollTo
+    });
+    return () => {
+      var _a;
+      return _createVNode("div", {
+        "ref": root,
+        "class": bem()
+      }, [props.teleport ? _createVNode(Teleport, {
+        "to": props.teleport
+      }, {
+        default: () => [renderSidebar()]
+      }) : renderSidebar(), (_a = slots.default) == null ? void 0 : _a.call(slots)]);
+    };
+  }
+});
+export {
+  INDEX_BAR_KEY,
+  stdin_default as default
+};

package/es/index-bar/index.mjs

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

package/es/index.d.ts

@@ -91,4 +91,4 @@ declare namespace _default {
 }
 export default _default;
 export function install(app: any): void;
-export const version: "4.0.0-alpha.2";
+export const version: "4.0.0-beta.0";