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

package/es/tabbar-item/TabbarItem.js

@@ -1,120 +0,0 @@
-import { mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
-import { computed, defineComponent, getCurrentInstance } from "vue";
-import { createNamespace, extend, isObject, numericProp } from "../utils";
-import { TABBAR_KEY } from "../tabbar/Tabbar";
-import { useParent } from "@vant/use";
-import { routeProps, useRoute } from "../composables/use-route";
-import { Icon } from "../icon";
-import { Badge } from "../badge";
-const [name, bem] = createNamespace("tabbar-item");
-const tabbarItemProps = extend({}, routeProps, {
-  dot: Boolean,
-  icon: String,
-  name: numericProp,
-  badge: numericProp,
-  badgeProps: Object,
-  iconPrefix: String
-});
-var stdin_default = defineComponent({
-  name,
-  props: tabbarItemProps,
-  emits: ["click"],
-  setup(props, {
-    emit,
-    slots
-  }) {
-    const route = useRoute();
-    const vm = getCurrentInstance().proxy;
-    const {
-      parent,
-      index
-    } = useParent(TABBAR_KEY);
-    if (!parent) {
-      if (process.env.NODE_ENV !== "production") {
-        console.error("[Vant] <TabbarItem> must be a child component of <Tabbar>.");
-      }
-      return;
-    }
-    const active = computed(() => {
-      var _a;
-      const {
-        route: route2,
-        modelValue
-      } = parent.props;
-      if (route2 && "$route" in vm) {
-        const {
-          $route
-        } = vm;
-        const {
-          to
-        } = props;
-        const config = isObject(to) ? to : {
-          path: to
-        };
-        return !!$route.matched.find((val) => {
-          const pathMatched = "path" in config && config.path === val.path;
-          const nameMatched = "name" in config && config.name === val.name;
-          return pathMatched || nameMatched;
-        });
-      }
-      return ((_a = props.name) != null ? _a : index.value) === modelValue;
-    });
-    const onClick = (event) => {
-      var _a;
-      if (!active.value) {
-        parent.setActive((_a = props.name) != null ? _a : index.value, route);
-      }
-      emit("click", event);
-    };
-    const renderIcon = () => {
-      if (slots.icon) {
-        return slots.icon({
-          active: active.value
-        });
-      }
-      if (props.icon) {
-        return _createVNode(Icon, {
-          "name": props.icon,
-          "classPrefix": props.iconPrefix
-        }, null);
-      }
-    };
-    return () => {
-      var _a;
-      const {
-        dot,
-        badge
-      } = props;
-      const {
-        activeColor,
-        inactiveColor
-      } = parent.props;
-      const color = active.value ? activeColor : inactiveColor;
-      return _createVNode("div", {
-        "role": "tab",
-        "class": bem({
-          active: active.value
-        }),
-        "style": {
-          color
-        },
-        "tabindex": 0,
-        "aria-selected": active.value,
-        "onClick": onClick
-      }, [_createVNode(Badge, _mergeProps({
-        "dot": dot,
-        "class": bem("icon"),
-        "content": badge
-      }, props.badgeProps), {
-        default: renderIcon
-      }), _createVNode("div", {
-        "class": bem("text")
-      }, [(_a = slots.default) == null ? void 0 : _a.call(slots, {
-        active: active.value
-      })])]);
-    };
-  }
-});
-export {
-  stdin_default as default
-};

package/es/tabbar-item/index.js

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

package/es/tabbar-item/index.less

@@ -1,44 +0,0 @@
-body {
-  --van-tabbar-item-font-size: var(--van-font-size-sm);
-  --van-tabbar-item-text-color: var(--van-text-color);
-  --van-tabbar-item-active-color: var(--van-primary-color);
-  --van-tabbar-item-active-background: var(--van-background-2);
-  --van-tabbar-item-line-height: 1;
-  --van-tabbar-item-icon-size: 22px;
-  --van-tabbar-item-icon-margin-bottom: var(--van-padding-base);
-}
-
-.van-tabbar-item {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  color: var(--van-tabbar-item-text-color);
-  font-size: var(--van-tabbar-item-font-size);
-  line-height: var(--van-tabbar-item-line-height);
-  cursor: pointer;
-
-  &__icon {
-    margin-bottom: var(--van-tabbar-item-icon-margin-bottom);
-    font-size: var(--van-tabbar-item-icon-size);
-
-    .van-icon {
-      display: block;
-    }
-
-    .van-badge {
-      margin-top: var(--van-padding-base);
-    }
-
-    img {
-      display: block;
-      height: 20px;
-    }
-  }
-
-  &--active {
-    color: var(--van-tabbar-item-active-color);
-    background-color: var(--van-tabbar-item-active-background);
-  }
-}

package/es/tabbar-item/style/less.d.ts

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

package/es/tabbar-item/style/less.js

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

package/es/tabs/Tabs.js

@@ -1,352 +0,0 @@
-import { createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
-import { ref, watch, computed, reactive, nextTick, onActivated, defineComponent } from "vue";
-import { pick, isDef, addUnit, isHidden, unitToPx, truthProp, numericProp, windowWidth, getElementTop, makeStringProp, callInterceptor, createNamespace, makeNumericProp, setRootScrollTop, BORDER_TOP_BOTTOM } from "../utils";
-import { scrollLeftTo, scrollTopTo } from "./utils";
-import { useRect, useChildren, useScrollParent, useEventListener, onMountedOrActivated } from "@vant/use";
-import { useId } from "../composables/use-id";
-import { route } from "../composables/use-route";
-import { useRefs } from "../composables/use-refs";
-import { useExpose } from "../composables/use-expose";
-import { onPopupReopen } from "../composables/on-popup-reopen";
-import { Sticky } from "../sticky";
-import TabsTitle from "./TabsTitle";
-import TabsContent from "./TabsContent";
-const [name, bem] = createNamespace("tabs");
-const tabsProps = {
-  type: makeStringProp("line"),
-  color: String,
-  border: Boolean,
-  sticky: Boolean,
-  shrink: Boolean,
-  active: makeNumericProp(0),
-  duration: makeNumericProp(0.3),
-  animated: Boolean,
-  ellipsis: truthProp,
-  swipeable: Boolean,
-  scrollspy: Boolean,
-  offsetTop: makeNumericProp(0),
-  background: String,
-  lazyRender: truthProp,
-  lineWidth: numericProp,
-  lineHeight: numericProp,
-  beforeChange: Function,
-  swipeThreshold: makeNumericProp(5),
-  titleActiveColor: String,
-  titleInactiveColor: String
-};
-const TABS_KEY = Symbol(name);
-var stdin_default = defineComponent({
-  name,
-  props: tabsProps,
-  emits: ["change", "scroll", "rendered", "clickTab", "update:active"],
-  setup(props, {
-    emit,
-    slots
-  }) {
-    let tabHeight;
-    let lockScroll;
-    let stickyFixed;
-    const root = ref();
-    const navRef = ref();
-    const wrapRef = ref();
-    const id = useId();
-    const scroller = useScrollParent(root);
-    const [titleRefs, setTitleRefs] = useRefs();
-    const {
-      children,
-      linkChildren
-    } = useChildren(TABS_KEY);
-    const state = reactive({
-      inited: false,
-      position: "",
-      lineStyle: {},
-      currentIndex: -1
-    });
-    const scrollable = computed(() => children.length > props.swipeThreshold || !props.ellipsis || props.shrink);
-    const navStyle = computed(() => ({
-      borderColor: props.color,
-      background: props.background
-    }));
-    const getTabName = (tab, index) => {
-      var _a;
-      return (_a = tab.name) != null ? _a : index;
-    };
-    const currentName = computed(() => {
-      const activeTab = children[state.currentIndex];
-      if (activeTab) {
-        return getTabName(activeTab, state.currentIndex);
-      }
-    });
-    const offsetTopPx = computed(() => unitToPx(props.offsetTop));
-    const scrollOffset = computed(() => {
-      if (props.sticky) {
-        return offsetTopPx.value + tabHeight;
-      }
-      return 0;
-    });
-    const scrollIntoView = (immediate) => {
-      const nav = navRef.value;
-      const titles = titleRefs.value;
-      if (!scrollable.value || !nav || !titles || !titles[state.currentIndex]) {
-        return;
-      }
-      const title = titles[state.currentIndex].$el;
-      const to = title.offsetLeft - (nav.offsetWidth - title.offsetWidth) / 2;
-      scrollLeftTo(nav, to, immediate ? 0 : +props.duration);
-    };
-    const setLine = () => {
-      const shouldAnimate = state.inited;
-      nextTick(() => {
-        const titles = titleRefs.value;
-        if (!titles || !titles[state.currentIndex] || props.type !== "line" || isHidden(root.value)) {
-          return;
-        }
-        const title = titles[state.currentIndex].$el;
-        const {
-          lineWidth,
-          lineHeight
-        } = props;
-        const left = title.offsetLeft + title.offsetWidth / 2;
-        const lineStyle = {
-          width: addUnit(lineWidth),
-          backgroundColor: props.color,
-          transform: `translateX(${left}px) translateX(-50%)`
-        };
-        if (shouldAnimate) {
-          lineStyle.transitionDuration = `${props.duration}s`;
-        }
-        if (isDef(lineHeight)) {
-          const height = addUnit(lineHeight);
-          lineStyle.height = height;
-          lineStyle.borderRadius = height;
-        }
-        state.lineStyle = lineStyle;
-      });
-    };
-    const findAvailableTab = (index) => {
-      const diff = index < state.currentIndex ? -1 : 1;
-      while (index >= 0 && index < children.length) {
-        if (!children[index].disabled) {
-          return index;
-        }
-        index += diff;
-      }
-    };
-    const setCurrentIndex = (currentIndex) => {
-      const newIndex = findAvailableTab(currentIndex);
-      if (!isDef(newIndex)) {
-        return;
-      }
-      const newTab = children[newIndex];
-      const newName = getTabName(newTab, newIndex);
-      const shouldEmitChange = state.currentIndex !== null;
-      state.currentIndex = newIndex;
-      if (newName !== props.active) {
-        emit("update:active", newName);
-        if (shouldEmitChange) {
-          emit("change", newName, newTab.title);
-        }
-      }
-    };
-    const setCurrentIndexByName = (name2) => {
-      const matched = children.find((tab, index2) => getTabName(tab, index2) === name2);
-      const index = matched ? children.indexOf(matched) : 0;
-      setCurrentIndex(index);
-    };
-    const scrollToCurrentContent = (immediate = false) => {
-      if (props.scrollspy) {
-        const target = children[state.currentIndex].$el;
-        if (target && scroller.value) {
-          const to = getElementTop(target, scroller.value) - scrollOffset.value;
-          lockScroll = true;
-          scrollTopTo(scroller.value, to, immediate ? 0 : +props.duration, () => {
-            lockScroll = false;
-          });
-        }
-      }
-    };
-    const onClickTab = (item, index, event) => {
-      const {
-        title,
-        disabled
-      } = children[index];
-      const name2 = getTabName(children[index], index);
-      if (!disabled) {
-        callInterceptor(props.beforeChange, {
-          args: [name2],
-          done: () => {
-            setCurrentIndex(index);
-            scrollToCurrentContent();
-          }
-        });
-        route(item);
-      }
-      emit("clickTab", {
-        name: name2,
-        title,
-        event,
-        disabled
-      });
-    };
-    const onStickyScroll = (params) => {
-      stickyFixed = params.isFixed;
-      emit("scroll", params);
-    };
-    const scrollTo = (name2) => {
-      nextTick(() => {
-        setCurrentIndexByName(name2);
-        scrollToCurrentContent(true);
-      });
-    };
-    const getCurrentIndexOnScroll = () => {
-      for (let index = 0; index < children.length; index++) {
-        const {
-          top
-        } = useRect(children[index].$el);
-        if (top > scrollOffset.value) {
-          return index === 0 ? 0 : index - 1;
-        }
-      }
-      return children.length - 1;
-    };
-    const onScroll = () => {
-      if (props.scrollspy && !lockScroll) {
-        const index = getCurrentIndexOnScroll();
-        setCurrentIndex(index);
-      }
-    };
-    const renderNav = () => children.map((item, index) => _createVNode(TabsTitle, _mergeProps({
-      "key": item.id,
-      "id": `${id}-${index}`,
-      "ref": setTitleRefs(index),
-      "type": props.type,
-      "color": props.color,
-      "style": item.titleStyle,
-      "class": item.titleClass,
-      "shrink": props.shrink,
-      "isActive": index === state.currentIndex,
-      "controls": item.id,
-      "scrollable": scrollable.value,
-      "activeColor": props.titleActiveColor,
-      "inactiveColor": props.titleInactiveColor,
-      "onClick": (event) => onClickTab(item, index, event)
-    }, pick(item, ["dot", "badge", "title", "disabled", "showZeroBadge"])), {
-      title: item.$slots.title
-    }));
-    const renderLine = () => {
-      if (props.type === "line" && children.length) {
-        return _createVNode("div", {
-          "class": bem("line"),
-          "style": state.lineStyle
-        }, null);
-      }
-    };
-    const renderHeader = () => {
-      var _a, _b;
-      const {
-        type,
-        border
-      } = props;
-      return _createVNode("div", {
-        "ref": wrapRef,
-        "class": [bem("wrap"), {
-          [BORDER_TOP_BOTTOM]: type === "line" && border
-        }]
-      }, [_createVNode("div", {
-        "ref": navRef,
-        "role": "tablist",
-        "class": bem("nav", [type, {
-          shrink: props.shrink,
-          complete: scrollable.value
-        }]),
-        "style": navStyle.value,
-        "aria-orientation": "horizontal"
-      }, [(_a = slots["nav-left"]) == null ? void 0 : _a.call(slots), renderNav(), renderLine(), (_b = slots["nav-right"]) == null ? void 0 : _b.call(slots)])]);
-    };
-    watch([() => props.color, windowWidth], setLine);
-    watch(() => props.active, (value) => {
-      if (value !== currentName.value) {
-        setCurrentIndexByName(value);
-      }
-    });
-    watch(() => children.length, () => {
-      if (state.inited) {
-        setCurrentIndexByName(props.active);
-        setLine();
-        nextTick(() => {
-          scrollIntoView(true);
-        });
-      }
-    });
-    watch(() => state.currentIndex, () => {
-      scrollIntoView();
-      setLine();
-      if (stickyFixed && !props.scrollspy) {
-        setRootScrollTop(Math.ceil(getElementTop(root.value) - offsetTopPx.value));
-      }
-    });
-    const init = () => {
-      setCurrentIndexByName(props.active);
-      nextTick(() => {
-        state.inited = true;
-        if (wrapRef.value) {
-          tabHeight = useRect(wrapRef.value).height;
-        }
-        scrollIntoView(true);
-      });
-    };
-    const onRendered = (name2, title) => emit("rendered", name2, title);
-    useExpose({
-      resize: setLine,
-      scrollTo
-    });
-    onActivated(setLine);
-    onPopupReopen(setLine);
-    onMountedOrActivated(init);
-    useEventListener("scroll", onScroll, {
-      target: scroller
-    });
-    linkChildren({
-      id,
-      props,
-      setLine,
-      onRendered,
-      currentName,
-      scrollIntoView
-    });
-    return () => {
-      var _a;
-      return _createVNode("div", {
-        "ref": root,
-        "class": bem([props.type])
-      }, [props.sticky ? _createVNode(Sticky, {
-        "container": root.value,
-        "offsetTop": offsetTopPx.value,
-        "onScroll": onStickyScroll
-      }, {
-        default: () => {
-          var _a2;
-          return [renderHeader(), (_a2 = slots["nav-bottom"]) == null ? void 0 : _a2.call(slots)];
-        }
-      }) : [renderHeader(), (_a = slots["nav-bottom"]) == null ? void 0 : _a.call(slots)], _createVNode(TabsContent, {
-        "count": children.length,
-        "inited": state.inited,
-        "animated": props.animated,
-        "duration": props.duration,
-        "swipeable": props.swipeable,
-        "lazyRender": props.lazyRender,
-        "currentIndex": state.currentIndex,
-        "onChange": setCurrentIndex
-      }, {
-        default: () => {
-          var _a2;
-          return [(_a2 = slots.default) == null ? void 0 : _a2.call(slots)];
-        }
-      })]);
-    };
-  }
-});
-export {
-  TABS_KEY,
-  stdin_default as default
-};

package/es/tabs/TabsContent.js

@@ -1,64 +0,0 @@
-import { createVNode as _createVNode } from "vue";
-import { ref, watch, onMounted, defineComponent } from "vue";
-import { numericProp, makeRequiredProp, createNamespace } from "../utils";
-import { Swipe } from "../swipe";
-const [name, bem] = createNamespace("tabs");
-var stdin_default = defineComponent({
-  name,
-  props: {
-    count: makeRequiredProp(Number),
-    inited: Boolean,
-    animated: Boolean,
-    duration: makeRequiredProp(numericProp),
-    swipeable: Boolean,
-    lazyRender: Boolean,
-    currentIndex: makeRequiredProp(Number)
-  },
-  emits: ["change"],
-  setup(props, {
-    emit,
-    slots
-  }) {
-    const swipeRef = ref();
-    const onChange = (index) => emit("change", index);
-    const renderChildren = () => {
-      var _a;
-      const Content = (_a = slots.default) == null ? void 0 : _a.call(slots);
-      if (props.animated || props.swipeable) {
-        return _createVNode(Swipe, {
-          "ref": swipeRef,
-          "loop": false,
-          "class": bem("track"),
-          "duration": +props.duration * 1e3,
-          "touchable": props.swipeable,
-          "lazyRender": props.lazyRender,
-          "showIndicators": false,
-          "onChange": onChange
-        }, {
-          default: () => [Content]
-        });
-      }
-      return Content;
-    };
-    const swipeToCurrentTab = (index) => {
-      const swipe = swipeRef.value;
-      if (swipe && swipe.state.active !== index) {
-        swipe.swipeTo(index, {
-          immediate: !props.inited
-        });
-      }
-    };
-    watch(() => props.currentIndex, swipeToCurrentTab);
-    onMounted(() => {
-      swipeToCurrentTab(props.currentIndex);
-    });
-    return () => _createVNode("div", {
-      "class": bem("content", {
-        animated: props.animated || props.swipeable
-      })
-    }, [renderChildren()]);
-  }
-});
-export {
-  stdin_default as default
-};

package/es/tabs/TabsTitle.js

@@ -1,90 +0,0 @@
-import { createVNode as _createVNode } from "vue";
-import { computed, defineComponent } from "vue";
-import { isDef, truthProp, numericProp, createNamespace } from "../utils";
-import { Badge } from "../badge";
-const [name, bem] = createNamespace("tab");
-var stdin_default = defineComponent({
-  name,
-  props: {
-    id: String,
-    dot: Boolean,
-    type: String,
-    color: String,
-    title: String,
-    badge: numericProp,
-    shrink: Boolean,
-    isActive: Boolean,
-    disabled: Boolean,
-    controls: String,
-    scrollable: Boolean,
-    activeColor: String,
-    inactiveColor: String,
-    showZeroBadge: truthProp
-  },
-  setup(props, {
-    slots
-  }) {
-    const style = computed(() => {
-      const style2 = {};
-      const {
-        type,
-        color,
-        disabled,
-        isActive,
-        activeColor,
-        inactiveColor
-      } = props;
-      const isCard = type === "card";
-      if (color && isCard) {
-        style2.borderColor = color;
-        if (!disabled) {
-          if (isActive) {
-            style2.backgroundColor = color;
-          } else {
-            style2.color = color;
-          }
-        }
-      }
-      const titleColor = isActive ? activeColor : inactiveColor;
-      if (titleColor) {
-        style2.color = titleColor;
-      }
-      return style2;
-    });
-    const renderText = () => {
-      const Text = _createVNode("span", {
-        "class": bem("text", {
-          ellipsis: !props.scrollable
-        })
-      }, [slots.title ? slots.title() : props.title]);
-      if (props.dot || isDef(props.badge) && props.badge !== "") {
-        return _createVNode(Badge, {
-          "dot": props.dot,
-          "content": props.badge,
-          "showZero": props.showZeroBadge
-        }, {
-          default: () => [Text]
-        });
-      }
-      return Text;
-    };
-    return () => _createVNode("div", {
-      "id": props.id,
-      "role": "tab",
-      "class": [bem([props.type, {
-        grow: props.scrollable && !props.shrink,
-        shrink: props.shrink,
-        active: props.isActive,
-        disabled: props.disabled
-      }])],
-      "style": style.value,
-      "tabindex": props.disabled ? void 0 : props.isActive ? 0 : -1,
-      "aria-selected": props.isActive,
-      "aria-disabled": props.disabled || void 0,
-      "aria-controls": props.controls
-    }, [renderText()]);
-  }
-});
-export {
-  stdin_default as default
-};

package/es/tabs/index.js

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