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

package/es/image-preview/index.less

@@ -1,110 +0,0 @@
-body {
-  --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: 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;
-
-  &__swipe {
-    height: 100%;
-
-    &-item {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      overflow: hidden;
-    }
-  }
-
-  &__cover {
-    position: absolute;
-    top: 0;
-    left: 0;
-  }
-
-  &__image {
-    width: 100%;
-    transition-property: transform;
-
-    &--vertical {
-      width: auto;
-      height: 100%;
-    }
-
-    img {
-      // disable desktop browser image drag
-      -webkit-user-drag: none;
-    }
-
-    .van-image {
-      &__error {
-        top: 30%;
-        height: 40%;
-      }
-
-      &__error-icon {
-        font-size: 36px;
-      }
-
-      &__loading {
-        background-color: transparent;
-      }
-    }
-  }
-
-  &__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);
-  }
-
-  &__overlay {
-    background: var(--van-image-preview-overlay-background);
-  }
-
-  &__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);
-
-    &--top-left {
-      top: var(--van-image-preview-close-icon-margin);
-      left: var(--van-image-preview-close-icon-margin);
-    }
-
-    &--top-right {
-      top: var(--van-image-preview-close-icon-margin);
-      right: var(--van-image-preview-close-icon-margin);
-    }
-
-    &--bottom-left {
-      bottom: var(--van-image-preview-close-icon-margin);
-      left: var(--van-image-preview-close-icon-margin);
-    }
-
-    &--bottom-right {
-      right: var(--van-image-preview-close-icon-margin);
-      bottom: var(--van-image-preview-close-icon-margin);
-    }
-  }
-}

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

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

package/es/image-preview/style/less.js

@@ -1,10 +0,0 @@
-import "../../style/base.less";
-import "../../badge/index.less";
-import "../../icon/index.less";
-import "../../image/index.less";
-import "../../loading/index.less";
-import "../../overlay/index.less";
-import "../../popup/index.less";
-import "../../swipe/index.less";
-import "../../swipe-item/index.less";
-import "../index.less";

package/es/index-anchor/IndexAnchor.js

@@ -1,87 +0,0 @@
-import { createVNode as _createVNode } from "vue";
-import { ref, reactive, computed, defineComponent } from "vue";
-import { extend, numericProp, BORDER_BOTTOM, getZIndexStyle, createNamespace } from "../utils";
-import { INDEX_BAR_KEY } from "../index-bar/IndexBar";
-import { getScrollTop, getRootScrollTop } from "../utils/dom";
-import { useRect, useParent } from "@vant/use";
-import { useExpose } from "../composables/use-expose";
-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.js

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

package/es/index-anchor/index.less

@@ -1,31 +0,0 @@
-body {
-  --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-bold);
-  --van-index-anchor-font-size: var(--van-font-size-md);
-  --van-index-anchor-line-height: 32px;
-  --van-index-anchor-background: transparent;
-  --van-index-anchor-sticky-text-color: var(--van-primary-color);
-  --van-index-anchor-sticky-background: var(--van-background-2);
-}
-
-.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);
-
-  &--sticky {
-    position: fixed;
-    top: 0;
-    right: 0;
-    left: 0;
-    color: var(--van-index-anchor-sticky-text-color);
-    background: var(--van-index-anchor-sticky-background);
-  }
-}

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

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

package/es/index-anchor/style/less.js

@@ -1,3 +0,0 @@
-import "../../style/base.less";
-import "../../index-bar/index.less";
-import "../index.less";

package/es/index-bar/IndexBar.js

@@ -1,221 +0,0 @@
-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";
-import { useRect, useChildren, useScrollParent, useEventListener } from "@vant/use";
-import { useTouch } from "../composables/use-touch";
-import { useExpose } from "../composables/use-expose";
-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.js

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

package/es/index-bar/index.less

@@ -1,33 +0,0 @@
-body {
-  --van-index-bar-sidebar-z-index: 2;
-  --van-index-bar-index-font-size: var(--van-font-size-xs);
-  --van-index-bar-index-line-height: var(--van-line-height-xs);
-  --van-index-bar-index-active-color: var(--van-primary-color);
-}
-
-.van-index-bar {
-  &__sidebar {
-    position: fixed;
-    top: 50%;
-    right: 0;
-    z-index: var(--van-index-bar-sidebar-z-index);
-    display: flex;
-    flex-direction: column;
-    text-align: center;
-    transform: translateY(-50%);
-    cursor: pointer;
-    user-select: none;
-  }
-
-  &__index {
-    padding: 0 var(--van-padding-xs) 0 var(--van-padding-md);
-    font-weight: var(--van-font-bold);
-    font-size: var(--van-index-bar-index-font-size);
-    line-height: var(--van-index-bar-index-line-height);
-
-    &--active {
-      color: var(--van-index-bar-index-active-color);
-      font-weight: bold;
-    }
-  }
-}

package/es/index-bar/style/less.d.ts

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

package/es/index-bar/style/less.js

@@ -1,2 +0,0 @@
-import "../../style/base.less";
-import "../index.less";