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

package/es/nav-bar/NavBar.mjs

@@ -0,0 +1,90 @@
+import { createVNode as _createVNode } from "vue";
+import { ref, defineComponent } from "vue";
+import { truthProp, numericProp, BORDER_BOTTOM, getZIndexStyle, createNamespace, HAPTICS_FEEDBACK } from "../utils/index.mjs";
+import { usePlaceholder } from "../composables/use-placeholder.mjs";
+import { Icon } from "../icon/index.mjs";
+const [name, bem] = createNamespace("nav-bar");
+const navBarProps = {
+  title: String,
+  fixed: Boolean,
+  zIndex: numericProp,
+  border: truthProp,
+  leftText: String,
+  rightText: String,
+  leftArrow: Boolean,
+  placeholder: Boolean,
+  safeAreaInsetTop: Boolean
+};
+var stdin_default = defineComponent({
+  name,
+  props: navBarProps,
+  emits: ["clickLeft", "clickRight"],
+  setup(props, {
+    emit,
+    slots
+  }) {
+    const navBarRef = ref();
+    const renderPlaceholder = usePlaceholder(navBarRef, bem);
+    const onClickLeft = (event) => emit("clickLeft", event);
+    const onClickRight = (event) => emit("clickRight", event);
+    const renderLeft = () => {
+      if (slots.left) {
+        return slots.left();
+      }
+      return [props.leftArrow && _createVNode(Icon, {
+        "class": bem("arrow"),
+        "name": "arrow-left"
+      }, null), props.leftText && _createVNode("span", {
+        "class": bem("text")
+      }, [props.leftText])];
+    };
+    const renderRight = () => {
+      if (slots.right) {
+        return slots.right();
+      }
+      return _createVNode("span", {
+        "class": bem("text")
+      }, [props.rightText]);
+    };
+    const renderNavBar = () => {
+      const {
+        title,
+        fixed,
+        border,
+        zIndex
+      } = props;
+      const style = getZIndexStyle(zIndex);
+      const hasLeft = props.leftArrow || props.leftText || slots.left;
+      const hasRight = props.rightText || slots.right;
+      return _createVNode("div", {
+        "ref": navBarRef,
+        "style": style,
+        "class": [bem({
+          fixed
+        }), {
+          [BORDER_BOTTOM]: border,
+          "van-safe-area-top": props.safeAreaInsetTop
+        }]
+      }, [_createVNode("div", {
+        "class": bem("content")
+      }, [hasLeft && _createVNode("div", {
+        "class": [bem("left"), HAPTICS_FEEDBACK],
+        "onClick": onClickLeft
+      }, [renderLeft()]), _createVNode("div", {
+        "class": [bem("title"), "van-ellipsis"]
+      }, [slots.title ? slots.title() : title]), hasRight && _createVNode("div", {
+        "class": [bem("right"), HAPTICS_FEEDBACK],
+        "onClick": onClickRight
+      }, [renderRight()])])]);
+    };
+    return () => {
+      if (props.fixed && props.placeholder) {
+        return renderPlaceholder(renderNavBar);
+      }
+      return renderNavBar();
+    };
+  }
+});
+export {
+  stdin_default as default
+};

package/es/nav-bar/index.mjs

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

package/es/notice-bar/NoticeBar.mjs

@@ -0,0 +1,165 @@
+import { withDirectives as _withDirectives, vShow as _vShow, createVNode as _createVNode } from "vue";
+import { ref, watch, reactive, defineComponent } from "vue";
+import { isDef, createNamespace, makeNumericProp } from "../utils/index.mjs";
+import { raf, useRect, doubleRaf, useEventListener, onMountedOrActivated } from "@vant/use";
+import { useExpose } from "../composables/use-expose.mjs";
+import { onPopupReopen } from "../composables/on-popup-reopen.mjs";
+import { Icon } from "../icon/index.mjs";
+const [name, bem] = createNamespace("notice-bar");
+const noticeBarProps = {
+  text: String,
+  mode: String,
+  color: String,
+  delay: makeNumericProp(1),
+  speed: makeNumericProp(60),
+  leftIcon: String,
+  wrapable: Boolean,
+  background: String,
+  scrollable: {
+    type: Boolean,
+    default: null
+  }
+};
+var stdin_default = defineComponent({
+  name,
+  props: noticeBarProps,
+  emits: ["close", "replay"],
+  setup(props, {
+    emit,
+    slots
+  }) {
+    let wrapWidth = 0;
+    let contentWidth = 0;
+    let startTimer;
+    const wrapRef = ref();
+    const contentRef = ref();
+    const state = reactive({
+      show: true,
+      offset: 0,
+      duration: 0
+    });
+    const renderLeftIcon = () => {
+      if (slots["left-icon"]) {
+        return slots["left-icon"]();
+      }
+      if (props.leftIcon) {
+        return _createVNode(Icon, {
+          "class": bem("left-icon"),
+          "name": props.leftIcon
+        }, null);
+      }
+    };
+    const getRightIconName = () => {
+      if (props.mode === "closeable") {
+        return "cross";
+      }
+      if (props.mode === "link") {
+        return "arrow";
+      }
+    };
+    const onClickRightIcon = (event) => {
+      if (props.mode === "closeable") {
+        state.show = false;
+        emit("close", event);
+      }
+    };
+    const renderRightIcon = () => {
+      if (slots["right-icon"]) {
+        return slots["right-icon"]();
+      }
+      const name2 = getRightIconName();
+      if (name2) {
+        return _createVNode(Icon, {
+          "name": name2,
+          "class": bem("right-icon"),
+          "onClick": onClickRightIcon
+        }, null);
+      }
+    };
+    const onTransitionEnd = () => {
+      state.offset = wrapWidth;
+      state.duration = 0;
+      raf(() => {
+        doubleRaf(() => {
+          state.offset = -contentWidth;
+          state.duration = (contentWidth + wrapWidth) / +props.speed;
+          emit("replay");
+        });
+      });
+    };
+    const renderMarquee = () => {
+      const ellipsis = props.scrollable === false && !props.wrapable;
+      const style = {
+        transform: state.offset ? `translateX(${state.offset}px)` : "",
+        transitionDuration: `${state.duration}s`
+      };
+      return _createVNode("div", {
+        "ref": wrapRef,
+        "role": "marquee",
+        "class": bem("wrap")
+      }, [_createVNode("div", {
+        "ref": contentRef,
+        "style": style,
+        "class": [bem("content"), {
+          "van-ellipsis": ellipsis
+        }],
+        "onTransitionend": onTransitionEnd
+      }, [slots.default ? slots.default() : props.text])]);
+    };
+    const reset = () => {
+      const {
+        delay,
+        speed,
+        scrollable
+      } = props;
+      const ms = isDef(delay) ? +delay * 1e3 : 0;
+      wrapWidth = 0;
+      contentWidth = 0;
+      state.offset = 0;
+      state.duration = 0;
+      clearTimeout(startTimer);
+      startTimer = setTimeout(() => {
+        if (!wrapRef.value || !contentRef.value || scrollable === false) {
+          return;
+        }
+        const wrapRefWidth = useRect(wrapRef).width;
+        const contentRefWidth = useRect(contentRef).width;
+        if (scrollable || contentRefWidth > wrapRefWidth) {
+          doubleRaf(() => {
+            wrapWidth = wrapRefWidth;
+            contentWidth = contentRefWidth;
+            state.offset = -contentWidth;
+            state.duration = contentWidth / +speed;
+          });
+        }
+      }, ms);
+    };
+    onPopupReopen(reset);
+    onMountedOrActivated(reset);
+    useEventListener("pageshow", reset);
+    useExpose({
+      reset
+    });
+    watch(() => [props.text, props.scrollable], reset);
+    return () => {
+      const {
+        color,
+        wrapable,
+        background
+      } = props;
+      return _withDirectives(_createVNode("div", {
+        "role": "alert",
+        "class": bem({
+          wrapable
+        }),
+        "style": {
+          color,
+          background
+        }
+      }, [renderLeftIcon(), renderMarquee(), renderRightIcon()]), [[_vShow, state.show]]);
+    };
+  }
+});
+export {
+  stdin_default as default
+};

package/es/notice-bar/index.mjs

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

package/es/notify/Notify.mjs

@@ -0,0 +1,44 @@
+import { createVNode as _createVNode } from "vue";
+import { defineComponent } from "vue";
+import { extend, numericProp, unknownProp, makeStringProp, createNamespace } from "../utils/index.mjs";
+import { Popup } from "../popup/index.mjs";
+import { popupSharedProps } from "../popup/shared.mjs";
+const [name, bem] = createNamespace("notify");
+const notifyProps = extend({}, popupSharedProps, {
+  type: makeStringProp("danger"),
+  color: String,
+  message: numericProp,
+  position: makeStringProp("top"),
+  className: unknownProp,
+  background: String,
+  lockScroll: Boolean
+});
+var stdin_default = defineComponent({
+  name,
+  props: notifyProps,
+  emits: ["update:show"],
+  setup(props, {
+    emit,
+    slots
+  }) {
+    const updateShow = (show) => emit("update:show", show);
+    return () => _createVNode(Popup, {
+      "show": props.show,
+      "class": [bem([props.type]), props.className],
+      "style": {
+        color: props.color,
+        background: props.background
+      },
+      "overlay": false,
+      "position": props.position,
+      "duration": 0.2,
+      "lockScroll": props.lockScroll,
+      "onUpdate:show": updateShow
+    }, {
+      default: () => [slots.default ? slots.default() : props.message]
+    });
+  }
+});
+export {
+  stdin_default as default
+};

package/es/notify/function-call.d.ts

@@ -1,102 +1,6 @@
-import { App } from 'vue';
 import { type ComponentInstance } from '../utils';
 import type { NotifyMessage, NotifyOptions } from './types';
-declare function Notify(options: NotifyMessage | NotifyOptions): ComponentInstance | undefined;
-declare namespace Notify {
-    var clear: () => void;
-    var currentOptions: NotifyOptions;
-    var setDefaultOptions: (options: NotifyOptions) => void;
-    var resetDefaultOptions: () => void;
-    var Component: import("../utils").WithInstall<import("vue").DefineComponent<{
-        show: BooleanConstructor;
-        zIndex: (NumberConstructor | StringConstructor)[];
-        overlay: {
-            type: BooleanConstructor;
-            default: true;
-        };
-        duration: (NumberConstructor | StringConstructor)[];
-        teleport: import("vue").PropType<string | import("vue").RendererElement | null | undefined>;
-        lockScroll: {
-            type: BooleanConstructor;
-            default: true;
-        };
-        lazyRender: {
-            type: BooleanConstructor;
-            default: true;
-        };
-        beforeClose: import("vue").PropType<import("../utils").Interceptor>;
-        overlayStyle: import("vue").PropType<import("vue").CSSProperties>;
-        overlayClass: import("vue").PropType<unknown>;
-        transitionAppear: BooleanConstructor;
-        closeOnClickOverlay: {
-            type: BooleanConstructor;
-            default: true;
-        };
-    } & {
-        type: {
-            type: import("vue").PropType<import("./types").NotifyType>;
-            default: import("./types").NotifyType;
-        };
-        color: StringConstructor;
-        message: (NumberConstructor | StringConstructor)[];
-        position: {
-            type: import("vue").PropType<import("./types").NotifyPosition>;
-            default: import("./types").NotifyPosition;
-        };
-        className: import("vue").PropType<unknown>;
-        background: StringConstructor;
-        lockScroll: BooleanConstructor;
-    }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:show"[], "update:show", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-        show: BooleanConstructor;
-        zIndex: (NumberConstructor | StringConstructor)[];
-        overlay: {
-            type: BooleanConstructor;
-            default: true;
-        };
-        duration: (NumberConstructor | StringConstructor)[];
-        teleport: import("vue").PropType<string | import("vue").RendererElement | null | undefined>;
-        lockScroll: {
-            type: BooleanConstructor;
-            default: true;
-        };
-        lazyRender: {
-            type: BooleanConstructor;
-            default: true;
-        };
-        beforeClose: import("vue").PropType<import("../utils").Interceptor>;
-        overlayStyle: import("vue").PropType<import("vue").CSSProperties>;
-        overlayClass: import("vue").PropType<unknown>;
-        transitionAppear: BooleanConstructor;
-        closeOnClickOverlay: {
-            type: BooleanConstructor;
-            default: true;
-        };
-    } & {
-        type: {
-            type: import("vue").PropType<import("./types").NotifyType>;
-            default: import("./types").NotifyType;
-        };
-        color: StringConstructor;
-        message: (NumberConstructor | StringConstructor)[];
-        position: {
-            type: import("vue").PropType<import("./types").NotifyPosition>;
-            default: import("./types").NotifyPosition;
-        };
-        className: import("vue").PropType<unknown>;
-        background: StringConstructor;
-        lockScroll: BooleanConstructor;
-    }>> & {
-        "onUpdate:show"?: ((...args: any[]) => any) | undefined;
-    }, {
-        type: import("./types").NotifyType;
-        position: import("./types").NotifyPosition;
-        overlay: boolean;
-        show: boolean;
-        lockScroll: boolean;
-        lazyRender: boolean;
-        transitionAppear: boolean;
-        closeOnClickOverlay: boolean;
-    }>>;
-    var install: (app: App<any>) => void;
-}
-export { Notify };
+export declare const closeNotify: () => void;
+export declare function showNotify(options: NotifyMessage | NotifyOptions): ComponentInstance | undefined;
+export declare const setNotifyDefaultOptions: (options: NotifyOptions) => NotifyOptions;
+export declare const resetNotifyDefaultOptions: () => void;

package/es/notify/function-call.mjs

@@ -0,0 +1,68 @@
+import { createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
+import { extend, isObject, inBrowser } from "../utils/index.mjs";
+import { mountComponent, usePopupState } from "../utils/mount-component.mjs";
+import VanNotify from "./Notify.mjs";
+let timer;
+let instance;
+const parseOptions = (message) => isObject(message) ? message : {
+  message
+};
+function initInstance() {
+  ({
+    instance
+  } = mountComponent({
+    setup() {
+      const {
+        state,
+        toggle
+      } = usePopupState();
+      return () => _createVNode(VanNotify, _mergeProps(state, {
+        "onUpdate:show": toggle
+      }), null);
+    }
+  }));
+}
+const getDefaultOptions = () => ({
+  type: "danger",
+  color: void 0,
+  message: "",
+  onClose: void 0,
+  onClick: void 0,
+  onOpened: void 0,
+  duration: 3e3,
+  position: void 0,
+  className: "",
+  lockScroll: false,
+  background: void 0
+});
+let currentOptions = getDefaultOptions();
+const closeNotify = () => {
+  if (instance) {
+    instance.toggle(false);
+  }
+};
+function showNotify(options) {
+  if (!inBrowser) {
+    return;
+  }
+  if (!instance) {
+    initInstance();
+  }
+  options = extend({}, currentOptions, parseOptions(options));
+  instance.open(options);
+  clearTimeout(timer);
+  if (options.duration > 0) {
+    timer = window.setTimeout(closeNotify, options.duration);
+  }
+  return instance;
+}
+const setNotifyDefaultOptions = (options) => extend(currentOptions, options);
+const resetNotifyDefaultOptions = () => {
+  currentOptions = getDefaultOptions();
+};
+export {
+  closeNotify,
+  resetNotifyDefaultOptions,
+  setNotifyDefaultOptions,
+  showNotify
+};

package/es/notify/index.d.ts

@@ -1,6 +1,95 @@
-import { Notify } from './function-call';
+export declare const Notify: import("../utils").WithInstall<import("vue").DefineComponent<{
+    show: BooleanConstructor;
+    zIndex: (NumberConstructor | StringConstructor)[];
+    overlay: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    duration: (NumberConstructor | StringConstructor)[];
+    teleport: import("vue").PropType<string | import("vue").RendererElement | null | undefined>;
+    lockScroll: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    lazyRender: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    beforeClose: import("vue").PropType<import("../utils").Interceptor>;
+    overlayStyle: import("vue").PropType<import("vue").CSSProperties>;
+    overlayClass: import("vue").PropType<unknown>;
+    transitionAppear: BooleanConstructor;
+    closeOnClickOverlay: {
+        type: BooleanConstructor;
+        default: true;
+    };
+} & {
+    type: {
+        type: import("vue").PropType<import("./types").NotifyType>;
+        default: import("./types").NotifyType;
+    };
+    color: StringConstructor;
+    message: (NumberConstructor | StringConstructor)[];
+    position: {
+        type: import("vue").PropType<import("./types").NotifyPosition>;
+        default: import("./types").NotifyPosition;
+    };
+    className: import("vue").PropType<unknown>;
+    background: StringConstructor;
+    lockScroll: BooleanConstructor;
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:show"[], "update:show", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    show: BooleanConstructor;
+    zIndex: (NumberConstructor | StringConstructor)[];
+    overlay: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    duration: (NumberConstructor | StringConstructor)[];
+    teleport: import("vue").PropType<string | import("vue").RendererElement | null | undefined>;
+    lockScroll: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    lazyRender: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    beforeClose: import("vue").PropType<import("../utils").Interceptor>;
+    overlayStyle: import("vue").PropType<import("vue").CSSProperties>;
+    overlayClass: import("vue").PropType<unknown>;
+    transitionAppear: BooleanConstructor;
+    closeOnClickOverlay: {
+        type: BooleanConstructor;
+        default: true;
+    };
+} & {
+    type: {
+        type: import("vue").PropType<import("./types").NotifyType>;
+        default: import("./types").NotifyType;
+    };
+    color: StringConstructor;
+    message: (NumberConstructor | StringConstructor)[];
+    position: {
+        type: import("vue").PropType<import("./types").NotifyPosition>;
+        default: import("./types").NotifyPosition;
+    };
+    className: import("vue").PropType<unknown>;
+    background: StringConstructor;
+    lockScroll: BooleanConstructor;
+}>> & {
+    "onUpdate:show"?: ((...args: any[]) => any) | undefined;
+}, {
+    type: import("./types").NotifyType;
+    position: import("./types").NotifyPosition;
+    overlay: boolean;
+    show: boolean;
+    lockScroll: boolean;
+    lazyRender: boolean;
+    transitionAppear: boolean;
+    closeOnClickOverlay: boolean;
+}>>;
 export default Notify;
-export { Notify };
+export { showNotify, closeNotify, setNotifyDefaultOptions, resetNotifyDefaultOptions, } from './function-call';
 export type { NotifyProps } from './Notify';
 export type { NotifyType, NotifyOptions } from './types';
 declare module 'vue' {

package/es/notify/index.mjs

@@ -0,0 +1,18 @@
+import { withInstall } from "../utils/index.mjs";
+import _Notify from "./Notify.mjs";
+const Notify = withInstall(_Notify);
+var stdin_default = Notify;
+import {
+  showNotify,
+  closeNotify,
+  setNotifyDefaultOptions,
+  resetNotifyDefaultOptions
+} from "./function-call.mjs";
+export {
+  Notify,
+  closeNotify,
+  stdin_default as default,
+  resetNotifyDefaultOptions,
+  setNotifyDefaultOptions,
+  showNotify
+};