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

package/es/notify/types.d.ts

@@ -1,4 +1,3 @@
-import { Notify } from './function-call';
 import type { Numeric } from '../utils';
 export declare type NotifyMessage = Numeric;
 export declare type NotifyType = 'primary' | 'success' | 'danger' | 'warning';
@@ -16,8 +15,3 @@ export declare type NotifyOptions = {
     onClose?: () => void;
     onOpened?: () => void;
 };
-declare module '@vue/runtime-core' {
-    interface ComponentCustomProperties {
-        $notify: typeof Notify;
-    }
-}

package/es/number-keyboard/NumberKeyboard.mjs

@@ -0,0 +1,229 @@
+import { withDirectives as _withDirectives, vShow as _vShow, createVNode as _createVNode } from "vue";
+import { ref, watch, computed, Teleport, Transition, defineComponent } from "vue";
+import { truthProp, numericProp, getZIndexStyle, makeStringProp, makeNumericProp, stopPropagation, createNamespace, HAPTICS_FEEDBACK } from "../utils/index.mjs";
+import { useClickAway } from "@vant/use";
+import NumberKeyboardKey from "./NumberKeyboardKey.mjs";
+const [name, bem] = createNamespace("number-keyboard");
+const numberKeyboardProps = {
+  show: Boolean,
+  title: String,
+  theme: makeStringProp("default"),
+  zIndex: numericProp,
+  teleport: [String, Object],
+  maxlength: makeNumericProp(Infinity),
+  modelValue: makeStringProp(""),
+  transition: truthProp,
+  blurOnClose: truthProp,
+  showDeleteKey: truthProp,
+  randomKeyOrder: Boolean,
+  closeButtonText: String,
+  deleteButtonText: String,
+  closeButtonLoading: Boolean,
+  hideOnClickOutside: truthProp,
+  safeAreaInsetBottom: truthProp,
+  extraKey: {
+    type: [String, Array],
+    default: ""
+  }
+};
+function shuffle(array) {
+  for (let i = array.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    const temp = array[i];
+    array[i] = array[j];
+    array[j] = temp;
+  }
+  return array;
+}
+var stdin_default = defineComponent({
+  name,
+  props: numberKeyboardProps,
+  emits: ["show", "hide", "blur", "input", "close", "delete", "update:modelValue"],
+  setup(props, {
+    emit,
+    slots
+  }) {
+    const root = ref();
+    const genBasicKeys = () => {
+      const keys2 = Array(9).fill("").map((_, i) => ({
+        text: i + 1
+      }));
+      if (props.randomKeyOrder) {
+        shuffle(keys2);
+      }
+      return keys2;
+    };
+    const genDefaultKeys = () => [...genBasicKeys(), {
+      text: props.extraKey,
+      type: "extra"
+    }, {
+      text: 0
+    }, {
+      text: props.showDeleteKey ? props.deleteButtonText : "",
+      type: props.showDeleteKey ? "delete" : ""
+    }];
+    const genCustomKeys = () => {
+      const keys2 = genBasicKeys();
+      const {
+        extraKey
+      } = props;
+      const extraKeys = Array.isArray(extraKey) ? extraKey : [extraKey];
+      if (extraKeys.length === 1) {
+        keys2.push({
+          text: 0,
+          wider: true
+        }, {
+          text: extraKeys[0],
+          type: "extra"
+        });
+      } else if (extraKeys.length === 2) {
+        keys2.push({
+          text: extraKeys[0],
+          type: "extra"
+        }, {
+          text: 0
+        }, {
+          text: extraKeys[1],
+          type: "extra"
+        });
+      }
+      return keys2;
+    };
+    const keys = computed(() => props.theme === "custom" ? genCustomKeys() : genDefaultKeys());
+    const onBlur = () => {
+      if (props.show) {
+        emit("blur");
+      }
+    };
+    const onClose = () => {
+      emit("close");
+      if (props.blurOnClose) {
+        onBlur();
+      }
+    };
+    const onAnimationEnd = () => emit(props.show ? "show" : "hide");
+    const onPress = (text, type) => {
+      if (text === "") {
+        if (type === "extra") {
+          onBlur();
+        }
+        return;
+      }
+      const value = props.modelValue;
+      if (type === "delete") {
+        emit("delete");
+        emit("update:modelValue", value.slice(0, value.length - 1));
+      } else if (type === "close") {
+        onClose();
+      } else if (value.length < props.maxlength) {
+        emit("input", text);
+        emit("update:modelValue", value + text);
+      }
+    };
+    const renderTitle = () => {
+      const {
+        title,
+        theme,
+        closeButtonText
+      } = props;
+      const leftSlot = slots["title-left"];
+      const showClose = closeButtonText && theme === "default";
+      const showTitle = title || showClose || leftSlot;
+      if (!showTitle) {
+        return;
+      }
+      return _createVNode("div", {
+        "class": bem("header")
+      }, [leftSlot && _createVNode("span", {
+        "class": bem("title-left")
+      }, [leftSlot()]), title && _createVNode("h2", {
+        "class": bem("title")
+      }, [title]), showClose && _createVNode("button", {
+        "type": "button",
+        "class": [bem("close"), HAPTICS_FEEDBACK],
+        "onClick": onClose
+      }, [closeButtonText])]);
+    };
+    const renderKeys = () => keys.value.map((key) => {
+      const keySlots = {};
+      if (key.type === "delete") {
+        keySlots.default = slots.delete;
+      }
+      if (key.type === "extra") {
+        keySlots.default = slots["extra-key"];
+      }
+      return _createVNode(NumberKeyboardKey, {
+        "key": key.text,
+        "text": key.text,
+        "type": key.type,
+        "wider": key.wider,
+        "color": key.color,
+        "onPress": onPress
+      }, keySlots);
+    });
+    const renderSidebar = () => {
+      if (props.theme === "custom") {
+        return _createVNode("div", {
+          "class": bem("sidebar")
+        }, [props.showDeleteKey && _createVNode(NumberKeyboardKey, {
+          "large": true,
+          "text": props.deleteButtonText,
+          "type": "delete",
+          "onPress": onPress
+        }, {
+          delete: slots.delete
+        }), _createVNode(NumberKeyboardKey, {
+          "large": true,
+          "text": props.closeButtonText,
+          "type": "close",
+          "color": "blue",
+          "loading": props.closeButtonLoading,
+          "onPress": onPress
+        }, null)]);
+      }
+    };
+    watch(() => props.show, (value) => {
+      if (!props.transition) {
+        emit(value ? "show" : "hide");
+      }
+    });
+    if (props.hideOnClickOutside) {
+      useClickAway(root, onBlur, {
+        eventName: "touchstart"
+      });
+    }
+    return () => {
+      const Title = renderTitle();
+      const Content = _createVNode(Transition, {
+        "name": props.transition ? "van-slide-up" : ""
+      }, {
+        default: () => [_withDirectives(_createVNode("div", {
+          "ref": root,
+          "style": getZIndexStyle(props.zIndex),
+          "class": bem({
+            unfit: !props.safeAreaInsetBottom,
+            "with-title": !!Title
+          }),
+          "onTouchstart": stopPropagation,
+          "onAnimationend": onAnimationEnd,
+          "onWebkitAnimationEnd": onAnimationEnd
+        }, [Title, _createVNode("div", {
+          "class": bem("body")
+        }, [_createVNode("div", {
+          "class": bem("keys")
+        }, [renderKeys()]), renderSidebar()])]), [[_vShow, props.show]])]
+      });
+      if (props.teleport) {
+        return _createVNode(Teleport, {
+          "to": props.teleport
+        }, {
+          default: () => [Content]
+        });
+      }
+      return Content;
+    };
+  }
+});
+export {
+  stdin_default as default
+};

package/es/number-keyboard/NumberKeyboardKey.mjs

@@ -0,0 +1,94 @@
+import { createVNode as _createVNode } from "vue";
+import { ref, defineComponent } from "vue";
+import { numericProp, createNamespace, preventDefault } from "../utils/index.mjs";
+import { useTouch } from "../composables/use-touch.mjs";
+import { Loading } from "../loading/index.mjs";
+const [name, bem] = createNamespace("key");
+const CollapseIcon = _createVNode("svg", {
+  "class": bem("collapse-icon"),
+  "viewBox": "0 0 30 24"
+}, [_createVNode("path", {
+  "d": "M26 13h-2v2h2v-2zm-8-3h2V8h-2v2zm2-4h2V4h-2v2zm2 4h4V4h-2v4h-2v2zm-7 14 3-3h-6l3 3zM6 13H4v2h2v-2zm16 0H8v2h14v-2zm-12-3h2V8h-2v2zM28 0l1 1 1 1v15l-1 2H1l-1-2V2l1-1 1-1zm0 2H2v15h26V2zM6 4v2H4V4zm10 2h2V4h-2v2zM8 9v1H4V8zm8 0v1h-2V8zm-6-5v2H8V4zm4 0v2h-2V4z",
+  "fill": "currentColor"
+}, null)]);
+const DeleteIcon = _createVNode("svg", {
+  "class": bem("delete-icon"),
+  "viewBox": "0 0 32 22"
+}, [_createVNode("path", {
+  "d": "M28 0a4 4 0 0 1 4 4v14a4 4 0 0 1-4 4H10.4a2 2 0 0 1-1.4-.6L1 13.1c-.6-.5-.9-1.3-.9-2 0-1 .3-1.7.9-2.2L9 .6a2 2 0 0 1 1.4-.6zm0 2H10.4l-8.2 8.3a1 1 0 0 0-.3.7c0 .3.1.5.3.7l8.2 8.4H28a2 2 0 0 0 2-2V4c0-1.1-.9-2-2-2zm-5 4a1 1 0 0 1 .7.3 1 1 0 0 1 0 1.4L20.4 11l3.3 3.3c.2.2.3.5.3.7 0 .3-.1.5-.3.7a1 1 0 0 1-.7.3 1 1 0 0 1-.7-.3L19 12.4l-3.4 3.3a1 1 0 0 1-.6.3 1 1 0 0 1-.7-.3 1 1 0 0 1-.3-.7c0-.2.1-.5.3-.7l3.3-3.3-3.3-3.3A1 1 0 0 1 14 7c0-.3.1-.5.3-.7A1 1 0 0 1 15 6a1 1 0 0 1 .6.3L19 9.6l3.3-3.3A1 1 0 0 1 23 6z",
+  "fill": "currentColor"
+}, null)]);
+var stdin_default = defineComponent({
+  name,
+  props: {
+    type: String,
+    text: numericProp,
+    color: String,
+    wider: Boolean,
+    large: Boolean,
+    loading: Boolean
+  },
+  emits: ["press"],
+  setup(props, {
+    emit,
+    slots
+  }) {
+    const active = ref(false);
+    const touch = useTouch();
+    const onTouchStart = (event) => {
+      touch.start(event);
+      active.value = true;
+    };
+    const onTouchMove = (event) => {
+      touch.move(event);
+      if (touch.direction.value) {
+        active.value = false;
+      }
+    };
+    const onTouchEnd = (event) => {
+      if (active.value) {
+        if (!slots.default) {
+          preventDefault(event);
+        }
+        active.value = false;
+        emit("press", props.text, props.type);
+      }
+    };
+    const renderContent = () => {
+      if (props.loading) {
+        return _createVNode(Loading, {
+          "class": bem("loading-icon")
+        }, null);
+      }
+      const text = slots.default ? slots.default() : props.text;
+      switch (props.type) {
+        case "delete":
+          return text || DeleteIcon;
+        case "extra":
+          return text || CollapseIcon;
+        default:
+          return text;
+      }
+    };
+    return () => _createVNode("div", {
+      "class": bem("wrapper", {
+        wider: props.wider
+      }),
+      "onTouchstart": onTouchStart,
+      "onTouchmove": onTouchMove,
+      "onTouchend": onTouchEnd,
+      "onTouchcancel": onTouchEnd
+    }, [_createVNode("div", {
+      "role": "button",
+      "tabindex": 0,
+      "class": bem([props.color, {
+        large: props.large,
+        active: active.value,
+        delete: props.type === "delete"
+      }])
+    }, [renderContent()])]);
+  }
+});
+export {
+  stdin_default as default
+};

package/es/number-keyboard/index.mjs

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

package/es/overlay/Overlay.mjs

@@ -0,0 +1,47 @@
+import { withDirectives as _withDirectives, createVNode as _createVNode, vShow as _vShow } from "vue";
+import { Transition, defineComponent } from "vue";
+import { noop, isDef, extend, truthProp, numericProp, unknownProp, preventDefault, createNamespace, getZIndexStyle } from "../utils/index.mjs";
+import { useLazyRender } from "../composables/use-lazy-render.mjs";
+const [name, bem] = createNamespace("overlay");
+const overlayProps = {
+  show: Boolean,
+  zIndex: numericProp,
+  duration: numericProp,
+  className: unknownProp,
+  lockScroll: truthProp,
+  lazyRender: truthProp,
+  customStyle: Object
+};
+var stdin_default = defineComponent({
+  name,
+  props: overlayProps,
+  setup(props, {
+    slots
+  }) {
+    const lazyRender = useLazyRender(() => props.show || !props.lazyRender);
+    const preventTouchMove = (event) => {
+      preventDefault(event, true);
+    };
+    const renderOverlay = lazyRender(() => {
+      var _a;
+      const style = extend(getZIndexStyle(props.zIndex), props.customStyle);
+      if (isDef(props.duration)) {
+        style.animationDuration = `${props.duration}s`;
+      }
+      return _withDirectives(_createVNode("div", {
+        "style": style,
+        "class": [bem(), props.className],
+        "onTouchmove": props.lockScroll ? preventTouchMove : noop
+      }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]), [[_vShow, props.show]]);
+    });
+    return () => _createVNode(Transition, {
+      "name": "van-fade",
+      "appear": true
+    }, {
+      default: renderOverlay
+    });
+  }
+});
+export {
+  stdin_default as default
+};

package/es/overlay/index.mjs

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

package/es/pagination/Pagination.mjs

@@ -0,0 +1,144 @@
+import { createVNode as _createVNode } from "vue";
+import { computed, watchEffect, defineComponent } from "vue";
+import { clamp, makeStringProp, makeNumberProp, makeNumericProp, createNamespace, BORDER_SURROUND } from "../utils/index.mjs";
+const [name, bem, t] = createNamespace("pagination");
+const makePage = (number, text, active) => ({
+  number,
+  text,
+  active
+});
+const paginationProps = {
+  mode: makeStringProp("multi"),
+  prevText: String,
+  nextText: String,
+  pageCount: makeNumericProp(0),
+  modelValue: makeNumberProp(0),
+  totalItems: makeNumericProp(0),
+  showPageSize: makeNumericProp(5),
+  itemsPerPage: makeNumericProp(10),
+  forceEllipses: Boolean
+};
+var stdin_default = defineComponent({
+  name,
+  props: paginationProps,
+  emits: ["change", "update:modelValue"],
+  setup(props, {
+    emit,
+    slots
+  }) {
+    const count = computed(() => {
+      const {
+        pageCount,
+        totalItems,
+        itemsPerPage
+      } = props;
+      const count2 = +pageCount || Math.ceil(+totalItems / +itemsPerPage);
+      return Math.max(1, count2);
+    });
+    const pages = computed(() => {
+      const items = [];
+      const pageCount = count.value;
+      const showPageSize = +props.showPageSize;
+      const {
+        modelValue,
+        forceEllipses
+      } = props;
+      let startPage = 1;
+      let endPage = pageCount;
+      const isMaxSized = showPageSize < pageCount;
+      if (isMaxSized) {
+        startPage = Math.max(modelValue - Math.floor(showPageSize / 2), 1);
+        endPage = startPage + showPageSize - 1;
+        if (endPage > pageCount) {
+          endPage = pageCount;
+          startPage = endPage - showPageSize + 1;
+        }
+      }
+      for (let number = startPage; number <= endPage; number++) {
+        const page = makePage(number, number, number === modelValue);
+        items.push(page);
+      }
+      if (isMaxSized && showPageSize > 0 && forceEllipses) {
+        if (startPage > 1) {
+          const prevPages = makePage(startPage - 1, "...");
+          items.unshift(prevPages);
+        }
+        if (endPage < pageCount) {
+          const nextPages = makePage(endPage + 1, "...");
+          items.push(nextPages);
+        }
+      }
+      return items;
+    });
+    const updateModelValue = (value, emitChange) => {
+      value = clamp(value, 1, count.value);
+      if (props.modelValue !== value) {
+        emit("update:modelValue", value);
+        if (emitChange) {
+          emit("change", value);
+        }
+      }
+    };
+    watchEffect(() => updateModelValue(props.modelValue));
+    const renderDesc = () => _createVNode("li", {
+      "class": bem("page-desc")
+    }, [slots.pageDesc ? slots.pageDesc() : `${props.modelValue}/${count.value}`]);
+    const renderPrevButton = () => {
+      const {
+        mode,
+        modelValue
+      } = props;
+      const slot = slots["prev-text"];
+      const disabled = modelValue === 1;
+      return _createVNode("li", {
+        "class": [bem("item", {
+          disabled,
+          border: mode === "simple",
+          prev: true
+        }), BORDER_SURROUND]
+      }, [_createVNode("button", {
+        "type": "button",
+        "disabled": disabled,
+        "onClick": () => updateModelValue(modelValue - 1, true)
+      }, [slot ? slot() : props.prevText || t("prev")])]);
+    };
+    const renderNextButton = () => {
+      const {
+        mode,
+        modelValue
+      } = props;
+      const slot = slots["next-text"];
+      const disabled = modelValue === count.value;
+      return _createVNode("li", {
+        "class": [bem("item", {
+          disabled,
+          border: mode === "simple",
+          next: true
+        }), BORDER_SURROUND]
+      }, [_createVNode("button", {
+        "type": "button",
+        "disabled": disabled,
+        "onClick": () => updateModelValue(modelValue + 1, true)
+      }, [slot ? slot() : props.nextText || t("next")])]);
+    };
+    const renderPages = () => pages.value.map((page) => _createVNode("li", {
+      "class": [bem("item", {
+        active: page.active,
+        page: true
+      }), BORDER_SURROUND]
+    }, [_createVNode("button", {
+      "type": "button",
+      "aria-current": page.active || void 0,
+      "onClick": () => updateModelValue(page.number, true)
+    }, [slots.page ? slots.page(page) : page.text])]));
+    return () => _createVNode("nav", {
+      "role": "navigation",
+      "class": bem()
+    }, [_createVNode("ul", {
+      "class": bem("items")
+    }, [renderPrevButton(), props.mode === "simple" ? renderDesc() : renderPages(), renderNextButton()])]);
+  }
+});
+export {
+  stdin_default as default
+};

package/es/pagination/index.mjs

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

package/es/password-input/PasswordInput.mjs

@@ -0,0 +1,78 @@
+import { createVNode as _createVNode } from "vue";
+import { defineComponent } from "vue";
+import { addUnit, truthProp, numericProp, BORDER_LEFT, makeStringProp, BORDER_SURROUND, createNamespace, makeNumericProp } from "../utils/index.mjs";
+const [name, bem] = createNamespace("password-input");
+const passwordInputProps = {
+  info: String,
+  mask: truthProp,
+  value: makeStringProp(""),
+  gutter: numericProp,
+  length: makeNumericProp(6),
+  focused: Boolean,
+  errorInfo: String
+};
+var stdin_default = defineComponent({
+  name,
+  props: passwordInputProps,
+  emits: ["focus"],
+  setup(props, {
+    emit
+  }) {
+    const onTouchStart = (event) => {
+      event.stopPropagation();
+      emit("focus", event);
+    };
+    const renderPoints = () => {
+      const Points = [];
+      const {
+        mask,
+        value,
+        length,
+        gutter,
+        focused
+      } = props;
+      for (let i = 0; i < length; i++) {
+        const char = value[i];
+        const showBorder = i !== 0 && !gutter;
+        const showCursor = focused && i === value.length;
+        let style;
+        if (i !== 0 && gutter) {
+          style = {
+            marginLeft: addUnit(gutter)
+          };
+        }
+        Points.push(_createVNode("li", {
+          "class": [{
+            [BORDER_LEFT]: showBorder
+          }, bem("item", {
+            focus: showCursor
+          })],
+          "style": style
+        }, [mask ? _createVNode("i", {
+          "style": {
+            visibility: char ? "visible" : "hidden"
+          }
+        }, null) : char, showCursor && _createVNode("div", {
+          "class": bem("cursor")
+        }, null)]));
+      }
+      return Points;
+    };
+    return () => {
+      const info = props.errorInfo || props.info;
+      return _createVNode("div", {
+        "class": bem()
+      }, [_createVNode("ul", {
+        "class": [bem("security"), {
+          [BORDER_SURROUND]: !props.gutter
+        }],
+        "onTouchstart": onTouchStart
+      }, [renderPoints()]), info && _createVNode("div", {
+        "class": bem(props.errorInfo ? "error-info" : "info")
+      }, [info])]);
+    };
+  }
+});
+export {
+  stdin_default as default
+};

package/es/password-input/index.mjs

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