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

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

@@ -1,184 +1,6 @@
-import { App } from 'vue';
-import type { DialogAction, DialogOptions } from './types';
-declare function Dialog(options: DialogOptions): Promise<unknown>;
-declare namespace Dialog {
-    var defaultOptions: {
-        title: string;
-        width: string;
-        theme: null;
-        message: string;
-        overlay: boolean;
-        callback: null;
-        teleport: string;
-        className: string;
-        allowHtml: boolean;
-        lockScroll: boolean;
-        transition: undefined;
-        beforeClose: null;
-        overlayClass: string;
-        overlayStyle: undefined;
-        messageAlign: string;
-        cancelButtonText: string;
-        cancelButtonColor: null;
-        confirmButtonText: string;
-        confirmButtonColor: null;
-        showConfirmButton: boolean;
-        showCancelButton: boolean;
-        closeOnPopstate: boolean;
-        closeOnClickOverlay: boolean;
-    };
-    var currentOptions: {
-        title: string;
-        width: string;
-        theme: null;
-        message: string;
-        overlay: boolean;
-        callback: null;
-        teleport: string;
-        className: string;
-        allowHtml: boolean;
-        lockScroll: boolean;
-        transition: undefined;
-        beforeClose: null;
-        overlayClass: string;
-        overlayStyle: undefined;
-        messageAlign: string;
-        cancelButtonText: string;
-        cancelButtonColor: null;
-        confirmButtonText: string;
-        confirmButtonColor: null;
-        showConfirmButton: boolean;
-        showCancelButton: boolean;
-        closeOnPopstate: boolean;
-        closeOnClickOverlay: boolean;
-    };
-    var alert: typeof Dialog;
-    var confirm: (options: DialogOptions) => Promise<unknown>;
-    var close: () => void;
-    var setDefaultOptions: (options: DialogOptions) => 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;
-        };
-    } & {
-        title: StringConstructor;
-        theme: import("vue").PropType<import("./types").DialogTheme>;
-        width: (NumberConstructor | StringConstructor)[];
-        message: import("vue").PropType<import("./types").DialogMessage>;
-        callback: import("vue").PropType<(action?: DialogAction | undefined) => void>;
-        allowHtml: BooleanConstructor;
-        className: import("vue").PropType<unknown>;
-        transition: {
-            type: import("vue").PropType<string>;
-            default: string;
-        };
-        messageAlign: import("vue").PropType<import("./types").DialogMessageAlign>;
-        closeOnPopstate: {
-            type: BooleanConstructor;
-            default: true;
-        };
-        showCancelButton: BooleanConstructor;
-        cancelButtonText: StringConstructor;
-        cancelButtonColor: StringConstructor;
-        confirmButtonText: StringConstructor;
-        confirmButtonColor: StringConstructor;
-        showConfirmButton: {
-            type: BooleanConstructor;
-            default: true;
-        };
-        closeOnClickOverlay: BooleanConstructor;
-    }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("keydown" | "update:show" | "cancel" | "confirm")[], "keydown" | "update:show" | "cancel" | "confirm", 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;
-        };
-    } & {
-        title: StringConstructor;
-        theme: import("vue").PropType<import("./types").DialogTheme>;
-        width: (NumberConstructor | StringConstructor)[];
-        message: import("vue").PropType<import("./types").DialogMessage>;
-        callback: import("vue").PropType<(action?: DialogAction | undefined) => void>;
-        allowHtml: BooleanConstructor;
-        className: import("vue").PropType<unknown>;
-        transition: {
-            type: import("vue").PropType<string>;
-            default: string;
-        };
-        messageAlign: import("vue").PropType<import("./types").DialogMessageAlign>;
-        closeOnPopstate: {
-            type: BooleanConstructor;
-            default: true;
-        };
-        showCancelButton: BooleanConstructor;
-        cancelButtonText: StringConstructor;
-        cancelButtonColor: StringConstructor;
-        confirmButtonText: StringConstructor;
-        confirmButtonColor: StringConstructor;
-        showConfirmButton: {
-            type: BooleanConstructor;
-            default: true;
-        };
-        closeOnClickOverlay: BooleanConstructor;
-    }>> & {
-        onKeydown?: ((...args: any[]) => any) | undefined;
-        "onUpdate:show"?: ((...args: any[]) => any) | undefined;
-        onCancel?: ((...args: any[]) => any) | undefined;
-        onConfirm?: ((...args: any[]) => any) | undefined;
-    }, {
-        overlay: boolean;
-        show: boolean;
-        lockScroll: boolean;
-        lazyRender: boolean;
-        transitionAppear: boolean;
-        closeOnClickOverlay: boolean;
-        transition: string;
-        closeOnPopstate: boolean;
-        allowHtml: boolean;
-        showCancelButton: boolean;
-        showConfirmButton: boolean;
-    }>>;
-    var install: (app: App<any>) => void;
-}
-export { Dialog };
+import type { DialogOptions } from './types';
+export declare function showDialog(options: DialogOptions): Promise<unknown>;
+export declare const setDialogDefaultOptions: (options: DialogOptions) => void;
+export declare const resetDialogDefaultOptions: () => void;
+export declare const showConfirmDialog: (options: DialogOptions) => Promise<unknown>;
+export declare const closeDialog: () => void;

package/es/dialog/function-call.mjs

@@ -0,0 +1,85 @@
+import { createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
+import { extend, inBrowser } from "../utils/index.mjs";
+import { mountComponent, usePopupState } from "../utils/mount-component.mjs";
+import Dialog from "./Dialog.mjs";
+let instance;
+const DEFAULT_OPTIONS = {
+  title: "",
+  width: "",
+  theme: null,
+  message: "",
+  overlay: true,
+  callback: null,
+  teleport: "body",
+  className: "",
+  allowHtml: false,
+  lockScroll: true,
+  transition: void 0,
+  beforeClose: null,
+  overlayClass: "",
+  overlayStyle: void 0,
+  messageAlign: "",
+  cancelButtonText: "",
+  cancelButtonColor: null,
+  cancelButtonDisabled: false,
+  confirmButtonText: "",
+  confirmButtonColor: null,
+  confirmButtonDisabled: false,
+  showConfirmButton: true,
+  showCancelButton: false,
+  closeOnPopstate: true,
+  closeOnClickOverlay: false
+};
+let currentOptions = extend({}, DEFAULT_OPTIONS);
+function initInstance() {
+  const Wrapper = {
+    setup() {
+      const {
+        state,
+        toggle
+      } = usePopupState();
+      return () => _createVNode(Dialog, _mergeProps(state, {
+        "onUpdate:show": toggle
+      }), null);
+    }
+  };
+  ({
+    instance
+  } = mountComponent(Wrapper));
+}
+function showDialog(options) {
+  if (!inBrowser) {
+    return Promise.resolve();
+  }
+  return new Promise((resolve, reject) => {
+    if (!instance) {
+      initInstance();
+    }
+    instance.open(extend({}, currentOptions, options, {
+      callback: (action) => {
+        (action === "confirm" ? resolve : reject)(action);
+      }
+    }));
+  });
+}
+const setDialogDefaultOptions = (options) => {
+  extend(currentOptions, options);
+};
+const resetDialogDefaultOptions = () => {
+  currentOptions = extend({}, DEFAULT_OPTIONS);
+};
+const showConfirmDialog = (options) => showDialog(extend({
+  showCancelButton: true
+}, options));
+const closeDialog = () => {
+  if (instance) {
+    instance.toggle(false);
+  }
+};
+export {
+  closeDialog,
+  resetDialogDefaultOptions,
+  setDialogDefaultOptions,
+  showConfirmDialog,
+  showDialog
+};

package/es/dialog/index.d.ts

@@ -1,10 +1,137 @@
-import { Dialog } from './function-call';
+export declare const Dialog: 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;
+    };
+} & {
+    title: StringConstructor;
+    theme: import("vue").PropType<import("./types").DialogTheme>;
+    width: (NumberConstructor | StringConstructor)[];
+    message: import("vue").PropType<import("./types").DialogMessage>;
+    callback: import("vue").PropType<(action?: import("./types").DialogAction | undefined) => void>;
+    allowHtml: BooleanConstructor;
+    className: import("vue").PropType<unknown>;
+    transition: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    messageAlign: import("vue").PropType<import("./types").DialogMessageAlign>;
+    closeOnPopstate: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    showCancelButton: BooleanConstructor;
+    cancelButtonText: StringConstructor;
+    cancelButtonColor: StringConstructor;
+    cancelButtonDisabled: BooleanConstructor;
+    confirmButtonText: StringConstructor;
+    confirmButtonColor: StringConstructor;
+    confirmButtonDisabled: BooleanConstructor;
+    showConfirmButton: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    closeOnClickOverlay: BooleanConstructor;
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("keydown" | "update:show" | "cancel" | "confirm")[], "keydown" | "update:show" | "cancel" | "confirm", 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;
+    };
+} & {
+    title: StringConstructor;
+    theme: import("vue").PropType<import("./types").DialogTheme>;
+    width: (NumberConstructor | StringConstructor)[];
+    message: import("vue").PropType<import("./types").DialogMessage>;
+    callback: import("vue").PropType<(action?: import("./types").DialogAction | undefined) => void>;
+    allowHtml: BooleanConstructor;
+    className: import("vue").PropType<unknown>;
+    transition: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    messageAlign: import("vue").PropType<import("./types").DialogMessageAlign>;
+    closeOnPopstate: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    showCancelButton: BooleanConstructor;
+    cancelButtonText: StringConstructor;
+    cancelButtonColor: StringConstructor;
+    cancelButtonDisabled: BooleanConstructor;
+    confirmButtonText: StringConstructor;
+    confirmButtonColor: StringConstructor;
+    confirmButtonDisabled: BooleanConstructor;
+    showConfirmButton: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    closeOnClickOverlay: BooleanConstructor;
+}>> & {
+    onKeydown?: ((...args: any[]) => any) | undefined;
+    "onUpdate:show"?: ((...args: any[]) => any) | undefined;
+    onCancel?: ((...args: any[]) => any) | undefined;
+    onConfirm?: ((...args: any[]) => any) | undefined;
+}, {
+    overlay: boolean;
+    show: boolean;
+    lockScroll: boolean;
+    lazyRender: boolean;
+    transitionAppear: boolean;
+    closeOnClickOverlay: boolean;
+    transition: string;
+    closeOnPopstate: boolean;
+    allowHtml: boolean;
+    showCancelButton: boolean;
+    cancelButtonDisabled: boolean;
+    confirmButtonDisabled: boolean;
+    showConfirmButton: boolean;
+}>>;
 export default Dialog;
-export { Dialog };
+export { showDialog, closeDialog, showConfirmDialog, setDialogDefaultOptions, resetDialogDefaultOptions, } from './function-call';
 export type { DialogProps } from './Dialog';
 export type { DialogTheme, DialogMessage, DialogOptions, DialogMessageAlign, } from './types';
 declare module 'vue' {
     interface GlobalComponents {
-        VanDialog: typeof Dialog.Component;
+        VanDialog: typeof Dialog;
     }
 }

package/es/dialog/index.mjs

@@ -0,0 +1,20 @@
+import { withInstall } from "../utils/index.mjs";
+import _Dialog from "./Dialog.mjs";
+const Dialog = withInstall(_Dialog);
+var stdin_default = Dialog;
+import {
+  showDialog,
+  closeDialog,
+  showConfirmDialog,
+  setDialogDefaultOptions,
+  resetDialogDefaultOptions
+} from "./function-call.mjs";
+export {
+  Dialog,
+  closeDialog,
+  stdin_default as default,
+  resetDialogDefaultOptions,
+  setDialogDefaultOptions,
+  showConfirmDialog,
+  showDialog
+};

package/es/dialog/types.d.ts

@@ -1,4 +1,3 @@
-import { Dialog } from './function-call';
 import type { CSSProperties, TeleportProps } from 'vue';
 import type { Interceptor, Numeric } from '../utils';
 export declare type DialogTheme = 'default' | 'round-button';
@@ -21,16 +20,13 @@ export declare type DialogOptions = {
     overlayClass?: string;
     overlayStyle?: CSSProperties;
     closeOnPopstate?: boolean;
-    cancelButtonText?: string;
     showCancelButton?: boolean;
     showConfirmButton?: boolean;
+    cancelButtonText?: string;
     cancelButtonColor?: string;
+    cancelButtonDisabled?: boolean;
     confirmButtonText?: string;
     confirmButtonColor?: string;
+    confirmButtonDisabled?: boolean;
     closeOnClickOverlay?: boolean;
 };
-declare module '@vue/runtime-core' {
-    interface ComponentCustomProperties {
-        $dialog: typeof Dialog;
-    }
-}

package/es/divider/Divider.mjs

@@ -0,0 +1,31 @@
+import { createVNode as _createVNode } from "vue";
+import { defineComponent } from "vue";
+import { truthProp, makeStringProp, createNamespace } from "../utils/index.mjs";
+const [name, bem] = createNamespace("divider");
+const dividerProps = {
+  dashed: Boolean,
+  hairline: truthProp,
+  contentPosition: makeStringProp("center")
+};
+var stdin_default = defineComponent({
+  name,
+  props: dividerProps,
+  setup(props, {
+    slots
+  }) {
+    return () => {
+      var _a;
+      return _createVNode("div", {
+        "role": "separator",
+        "class": bem({
+          dashed: props.dashed,
+          hairline: props.hairline,
+          [`content-${props.contentPosition}`]: !!slots.default
+        })
+      }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
+    };
+  }
+});
+export {
+  stdin_default as default
+};

package/es/divider/index.mjs

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

package/es/dropdown-item/DropdownItem.mjs

@@ -0,0 +1,180 @@
+import { withDirectives as _withDirectives, vShow as _vShow, createVNode as _createVNode } from "vue";
+import { reactive, Teleport, defineComponent } from "vue";
+import { truthProp, unknownProp, getZIndexStyle, createNamespace, makeArrayProp } from "../utils/index.mjs";
+import { DROPDOWN_KEY } from "../dropdown-menu/DropdownMenu.mjs";
+import { useParent } from "@vant/use";
+import { useExpose } from "../composables/use-expose.mjs";
+import { Cell } from "../cell/index.mjs";
+import { Icon } from "../icon/index.mjs";
+import { Popup } from "../popup/index.mjs";
+const [name, bem] = createNamespace("dropdown-item");
+const dropdownItemProps = {
+  title: String,
+  options: makeArrayProp(),
+  disabled: Boolean,
+  teleport: [String, Object],
+  lazyRender: truthProp,
+  modelValue: unknownProp,
+  titleClass: unknownProp
+};
+var stdin_default = defineComponent({
+  name,
+  props: dropdownItemProps,
+  emits: ["open", "opened", "close", "closed", "change", "update:modelValue"],
+  setup(props, {
+    emit,
+    slots
+  }) {
+    const state = reactive({
+      showPopup: false,
+      transition: true,
+      showWrapper: false
+    });
+    const {
+      parent,
+      index
+    } = useParent(DROPDOWN_KEY);
+    if (!parent) {
+      if (process.env.NODE_ENV !== "production") {
+        console.error("[Vant] <DropdownItem> must be a child component of <DropdownMenu>.");
+      }
+      return;
+    }
+    const getEmitter = (name2) => () => emit(name2);
+    const onOpen = getEmitter("open");
+    const onClose = getEmitter("close");
+    const onOpened = getEmitter("opened");
+    const onClosed = () => {
+      state.showWrapper = false;
+      emit("closed");
+    };
+    const onClickWrapper = (event) => {
+      if (props.teleport) {
+        event.stopPropagation();
+      }
+    };
+    const toggle = (show = !state.showPopup, options = {}) => {
+      if (show === state.showPopup) {
+        return;
+      }
+      state.showPopup = show;
+      state.transition = !options.immediate;
+      if (show) {
+        state.showWrapper = true;
+      }
+    };
+    const renderTitle = () => {
+      if (slots.title) {
+        return slots.title();
+      }
+      if (props.title) {
+        return props.title;
+      }
+      const match = props.options.find((option) => option.value === props.modelValue);
+      return match ? match.text : "";
+    };
+    const renderOption = (option) => {
+      const {
+        activeColor
+      } = parent.props;
+      const active = option.value === props.modelValue;
+      const onClick = () => {
+        state.showPopup = false;
+        if (option.value !== props.modelValue) {
+          emit("update:modelValue", option.value);
+          emit("change", option.value);
+        }
+      };
+      const renderIcon = () => {
+        if (active) {
+          return _createVNode(Icon, {
+            "class": bem("icon"),
+            "color": activeColor,
+            "name": "success"
+          }, null);
+        }
+      };
+      return _createVNode(Cell, {
+        "role": "menuitem",
+        "key": option.value,
+        "icon": option.icon,
+        "title": option.text,
+        "class": bem("option", {
+          active
+        }),
+        "style": {
+          color: active ? activeColor : ""
+        },
+        "tabindex": active ? 0 : -1,
+        "clickable": true,
+        "onClick": onClick
+      }, {
+        value: renderIcon
+      });
+    };
+    const renderContent = () => {
+      const {
+        offset
+      } = parent;
+      const {
+        zIndex,
+        overlay,
+        duration,
+        direction,
+        closeOnClickOverlay
+      } = parent.props;
+      const style = getZIndexStyle(zIndex);
+      if (direction === "down") {
+        style.top = `${offset.value}px`;
+      } else {
+        style.bottom = `${offset.value}px`;
+      }
+      return _withDirectives(_createVNode("div", {
+        "style": style,
+        "class": bem([direction]),
+        "onClick": onClickWrapper
+      }, [_createVNode(Popup, {
+        "show": state.showPopup,
+        "onUpdate:show": ($event) => state.showPopup = $event,
+        "role": "menu",
+        "class": bem("content"),
+        "overlay": overlay,
+        "position": direction === "down" ? "top" : "bottom",
+        "duration": state.transition ? duration : 0,
+        "lazyRender": props.lazyRender,
+        "overlayStyle": {
+          position: "absolute"
+        },
+        "aria-labelledby": `${parent.id}-${index.value}`,
+        "closeOnClickOverlay": closeOnClickOverlay,
+        "onOpen": onOpen,
+        "onClose": onClose,
+        "onOpened": onOpened,
+        "onClosed": onClosed
+      }, {
+        default: () => {
+          var _a;
+          return [props.options.map(renderOption), (_a = slots.default) == null ? void 0 : _a.call(slots)];
+        }
+      })]), [[_vShow, state.showWrapper]]);
+    };
+    useExpose({
+      state,
+      toggle,
+      renderTitle
+    });
+    return () => {
+      if (props.teleport) {
+        return _createVNode(Teleport, {
+          "to": props.teleport
+        }, {
+          default: () => [renderContent()]
+        });
+      }
+      return renderContent();
+    };
+  }
+});
+export {
+  stdin_default as default
+};