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

package/es/time-picker/TimePicker.mjs

@@ -0,0 +1,71 @@
+import { createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
+import { ref, watch, computed, defineComponent } from "vue";
+import { pick, extend, createNamespace, makeNumericProp, isSameValue } from "../utils/index.mjs";
+import { genOptions, sharedProps, pickerInheritKeys } from "../date-picker/utils.mjs";
+import { Picker } from "../picker/index.mjs";
+const [name] = createNamespace("time-picker");
+const timePickerProps = extend({}, sharedProps, {
+  minHour: makeNumericProp(0),
+  maxHour: makeNumericProp(23),
+  minMinute: makeNumericProp(0),
+  maxMinute: makeNumericProp(59),
+  minSecond: makeNumericProp(0),
+  maxSecond: makeNumericProp(59),
+  columnsType: {
+    type: Array,
+    default: () => ["hour", "minute"]
+  }
+});
+var stdin_default = defineComponent({
+  name,
+  props: timePickerProps,
+  emits: ["confirm", "cancel", "change", "update:modelValue"],
+  setup(props, {
+    emit,
+    slots
+  }) {
+    const currentValues = ref(props.modelValue);
+    const columns = computed(() => props.columnsType.map((type) => {
+      const {
+        filter,
+        formatter
+      } = props;
+      switch (type) {
+        case "hour":
+          return genOptions(+props.minHour, +props.maxHour, type, formatter, filter);
+        case "minute":
+          return genOptions(+props.minMinute, +props.maxMinute, type, formatter, filter);
+        case "second":
+          return genOptions(+props.minSecond, +props.maxSecond, type, formatter, filter);
+        default:
+          throw new Error(`[Vant] DatePicker: unsupported columns type: ${type}`);
+      }
+    }));
+    watch(currentValues, (newValues) => {
+      if (!isSameValue(newValues, props.modelValue)) {
+        emit("update:modelValue", newValues);
+      }
+    }, {
+      immediate: true
+    });
+    watch(() => props.modelValue, (newValues) => {
+      if (!isSameValue(newValues, currentValues.value)) {
+        currentValues.value = newValues;
+      }
+    });
+    const onChange = (...args) => emit("change", ...args);
+    const onCancel = (...args) => emit("cancel", ...args);
+    const onConfirm = (...args) => emit("confirm", ...args);
+    return () => _createVNode(Picker, _mergeProps({
+      "modelValue": currentValues.value,
+      "onUpdate:modelValue": ($event) => currentValues.value = $event,
+      "columns": columns.value,
+      "onChange": onChange,
+      "onCancel": onCancel,
+      "onConfirm": onConfirm
+    }, pick(props, pickerInheritKeys)), slots);
+  }
+});
+export {
+  stdin_default as default
+};

package/es/time-picker/index.mjs

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

package/es/toast/Toast.mjs

@@ -0,0 +1,119 @@
+import { mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
+import { watch, onMounted, onUnmounted, defineComponent } from "vue";
+import { pick, isDef, unknownProp, numericProp, makeStringProp, makeNumberProp, createNamespace } from "../utils/index.mjs";
+import { lockClick } from "./lock-click.mjs";
+import { Icon } from "../icon/index.mjs";
+import { Popup } from "../popup/index.mjs";
+import { Loading } from "../loading/index.mjs";
+const [name, bem] = createNamespace("toast");
+const popupInheritProps = ["show", "overlay", "teleport", "transition", "overlayClass", "overlayStyle", "closeOnClickOverlay"];
+const toastProps = {
+  icon: String,
+  show: Boolean,
+  type: makeStringProp("text"),
+  overlay: Boolean,
+  message: numericProp,
+  iconSize: numericProp,
+  duration: makeNumberProp(2e3),
+  position: makeStringProp("middle"),
+  teleport: [String, Object],
+  className: unknownProp,
+  iconPrefix: String,
+  transition: makeStringProp("van-fade"),
+  loadingType: String,
+  forbidClick: Boolean,
+  overlayClass: unknownProp,
+  overlayStyle: Object,
+  closeOnClick: Boolean,
+  closeOnClickOverlay: Boolean
+};
+var stdin_default = defineComponent({
+  name,
+  props: toastProps,
+  emits: ["update:show"],
+  setup(props, {
+    emit
+  }) {
+    let timer;
+    let clickable = false;
+    const toggleClickable = () => {
+      const newValue = props.show && props.forbidClick;
+      if (clickable !== newValue) {
+        clickable = newValue;
+        lockClick(clickable);
+      }
+    };
+    const updateShow = (show) => emit("update:show", show);
+    const onClick = () => {
+      if (props.closeOnClick) {
+        updateShow(false);
+      }
+    };
+    const clearTimer = () => clearTimeout(timer);
+    const renderIcon = () => {
+      const {
+        icon,
+        type,
+        iconSize,
+        iconPrefix,
+        loadingType
+      } = props;
+      const hasIcon = icon || type === "success" || type === "fail";
+      if (hasIcon) {
+        return _createVNode(Icon, {
+          "name": icon || type,
+          "size": iconSize,
+          "class": bem("icon"),
+          "classPrefix": iconPrefix
+        }, null);
+      }
+      if (type === "loading") {
+        return _createVNode(Loading, {
+          "class": bem("loading"),
+          "size": iconSize,
+          "type": loadingType
+        }, null);
+      }
+    };
+    const renderMessage = () => {
+      const {
+        type,
+        message
+      } = props;
+      if (isDef(message) && message !== "") {
+        return type === "html" ? _createVNode("div", {
+          "key": 0,
+          "class": bem("text"),
+          "innerHTML": String(message)
+        }, null) : _createVNode("div", {
+          "class": bem("text")
+        }, [message]);
+      }
+    };
+    watch(() => [props.show, props.forbidClick], toggleClickable);
+    watch(() => [props.show, props.type, props.message, props.duration], () => {
+      clearTimer();
+      if (props.show && props.duration > 0) {
+        timer = setTimeout(() => {
+          updateShow(false);
+        }, props.duration);
+      }
+    });
+    onMounted(toggleClickable);
+    onUnmounted(toggleClickable);
+    return () => _createVNode(Popup, _mergeProps({
+      "class": [bem([props.position, {
+        [props.type]: !props.icon
+      }]), props.className],
+      "lockScroll": false,
+      "onClick": onClick,
+      "onClosed": clearTimer,
+      "onUpdate:show": updateShow
+    }, pick(props, popupInheritProps)), {
+      default: () => [renderIcon(), renderMessage()]
+    });
+  }
+});
+export {
+  stdin_default as default
+};

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

@@ -1,18 +1,10 @@
-import { type App } from 'vue';
-import { type ComponentInstance } from '../utils';
-import type { ToastType, ToastOptions } from './types';
-declare function Toast(options?: string | ToastOptions): ComponentInstance;
-declare namespace Toast {
-    var loading: (options: string | ToastOptions) => ComponentInstance;
-    var success: (options: string | ToastOptions) => ComponentInstance;
-    var fail: (options: string | ToastOptions) => ComponentInstance;
-    var clear: (all?: boolean | undefined) => void;
-    var setDefaultOptions: {
-        (options: ToastOptions): void;
-        (type: ToastType, options: ToastOptions): void;
-    };
-    var resetDefaultOptions: (type?: ToastType | undefined) => void;
-    var allowMultiple: (value?: boolean) => void;
-    var install: (app: App<any>) => void;
-}
-export { Toast };
+import type { ToastType, ToastOptions, ToastWrapperInstance } from './types';
+export declare function showToast(options?: string | ToastOptions): ToastWrapperInstance;
+export declare const showLoadingToast: (options: string | ToastOptions) => ToastWrapperInstance;
+export declare const showSuccessToast: (options: string | ToastOptions) => ToastWrapperInstance;
+export declare const showFailToast: (options: string | ToastOptions) => ToastWrapperInstance;
+export declare const closeToast: (all?: boolean) => void;
+export declare function setToastDefaultOptions(options: ToastOptions): void;
+export declare function setToastDefaultOptions(type: ToastType, options: ToastOptions): void;
+export declare const resetToastDefaultOptions: (type?: ToastType) => void;
+export declare const allowMultipleToast: (value?: boolean) => void;

package/es/toast/function-call.mjs

@@ -0,0 +1,142 @@
+import { createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
+import { ref, watch, getCurrentInstance } from "vue";
+import { extend, isObject, inBrowser } from "../utils/index.mjs";
+import { mountComponent, usePopupState } from "../utils/mount-component.mjs";
+import VanToast from "./Toast.mjs";
+const defaultOptions = {
+  icon: "",
+  type: "text",
+  message: "",
+  className: "",
+  overlay: false,
+  onClose: void 0,
+  onOpened: void 0,
+  duration: 2e3,
+  teleport: "body",
+  iconSize: void 0,
+  iconPrefix: void 0,
+  position: "middle",
+  transition: "van-fade",
+  forbidClick: false,
+  loadingType: void 0,
+  overlayClass: "",
+  overlayStyle: void 0,
+  closeOnClick: false,
+  closeOnClickOverlay: false
+};
+let queue = [];
+let allowMultiple = false;
+let currentOptions = extend({}, defaultOptions);
+const defaultOptionsMap = /* @__PURE__ */ new Map();
+function parseOptions(message) {
+  if (isObject(message)) {
+    return message;
+  }
+  return {
+    message
+  };
+}
+function createInstance() {
+  const {
+    instance,
+    unmount
+  } = mountComponent({
+    setup() {
+      const message = ref("");
+      const {
+        open,
+        state,
+        close,
+        toggle
+      } = usePopupState();
+      const onClosed = () => {
+        if (allowMultiple) {
+          queue = queue.filter((item) => item !== instance);
+          unmount();
+        }
+      };
+      const render = () => {
+        const attrs = {
+          onClosed,
+          "onUpdate:show": toggle
+        };
+        return _createVNode(VanToast, _mergeProps(state, attrs), null);
+      };
+      watch(message, (val) => {
+        state.message = val;
+      });
+      getCurrentInstance().render = render;
+      return {
+        open,
+        close,
+        message
+      };
+    }
+  });
+  return instance;
+}
+function getInstance() {
+  if (!queue.length || allowMultiple) {
+    const instance = createInstance();
+    queue.push(instance);
+  }
+  return queue[queue.length - 1];
+}
+function showToast(options = {}) {
+  if (!inBrowser) {
+    return {};
+  }
+  const toast = getInstance();
+  const parsedOptions = parseOptions(options);
+  toast.open(extend({}, currentOptions, defaultOptionsMap.get(parsedOptions.type || currentOptions.type), parsedOptions));
+  return toast;
+}
+const createMethod = (type) => (options) => showToast(extend({
+  type
+}, parseOptions(options)));
+const showLoadingToast = createMethod("loading");
+const showSuccessToast = createMethod("success");
+const showFailToast = createMethod("fail");
+const closeToast = (all) => {
+  var _a;
+  if (queue.length) {
+    if (all) {
+      queue.forEach((toast) => {
+        toast.close();
+      });
+      queue = [];
+    } else if (!allowMultiple) {
+      queue[0].close();
+    } else {
+      (_a = queue.shift()) == null ? void 0 : _a.close();
+    }
+  }
+};
+function setToastDefaultOptions(type, options) {
+  if (typeof type === "string") {
+    defaultOptionsMap.set(type, options);
+  } else {
+    extend(currentOptions, type);
+  }
+}
+const resetToastDefaultOptions = (type) => {
+  if (typeof type === "string") {
+    defaultOptionsMap.delete(type);
+  } else {
+    currentOptions = extend({}, defaultOptions);
+    defaultOptionsMap.clear();
+  }
+};
+const allowMultipleToast = (value = true) => {
+  allowMultiple = value;
+};
+export {
+  allowMultipleToast,
+  closeToast,
+  resetToastDefaultOptions,
+  setToastDefaultOptions,
+  showFailToast,
+  showLoadingToast,
+  showSuccessToast,
+  showToast
+};

package/es/toast/index.d.ts

@@ -1,5 +1,79 @@
-import { Toast } from './function-call';
+export declare const Toast: import("../utils").WithInstall<import("vue").DefineComponent<{
+    icon: StringConstructor;
+    show: BooleanConstructor;
+    type: {
+        type: import("vue").PropType<import("./types").ToastType>;
+        default: import("./types").ToastType;
+    };
+    overlay: BooleanConstructor;
+    message: (NumberConstructor | StringConstructor)[];
+    iconSize: (NumberConstructor | StringConstructor)[];
+    duration: {
+        type: NumberConstructor;
+        default: number;
+    };
+    position: {
+        type: import("vue").PropType<import("./types").ToastPosition>;
+        default: import("./types").ToastPosition;
+    };
+    teleport: import("vue").PropType<string | import("vue").RendererElement | null | undefined>;
+    className: import("vue").PropType<unknown>;
+    iconPrefix: StringConstructor;
+    transition: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    loadingType: import("vue").PropType<import("..").LoadingType>;
+    forbidClick: BooleanConstructor;
+    overlayClass: import("vue").PropType<unknown>;
+    overlayStyle: import("vue").PropType<import("vue").CSSProperties>;
+    closeOnClick: BooleanConstructor;
+    closeOnClickOverlay: 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<{
+    icon: StringConstructor;
+    show: BooleanConstructor;
+    type: {
+        type: import("vue").PropType<import("./types").ToastType>;
+        default: import("./types").ToastType;
+    };
+    overlay: BooleanConstructor;
+    message: (NumberConstructor | StringConstructor)[];
+    iconSize: (NumberConstructor | StringConstructor)[];
+    duration: {
+        type: NumberConstructor;
+        default: number;
+    };
+    position: {
+        type: import("vue").PropType<import("./types").ToastPosition>;
+        default: import("./types").ToastPosition;
+    };
+    teleport: import("vue").PropType<string | import("vue").RendererElement | null | undefined>;
+    className: import("vue").PropType<unknown>;
+    iconPrefix: StringConstructor;
+    transition: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    loadingType: import("vue").PropType<import("..").LoadingType>;
+    forbidClick: BooleanConstructor;
+    overlayClass: import("vue").PropType<unknown>;
+    overlayStyle: import("vue").PropType<import("vue").CSSProperties>;
+    closeOnClick: BooleanConstructor;
+    closeOnClickOverlay: BooleanConstructor;
+}>> & {
+    "onUpdate:show"?: ((...args: any[]) => any) | undefined;
+}, {
+    type: import("./types").ToastType;
+    position: import("./types").ToastPosition;
+    overlay: boolean;
+    show: boolean;
+    duration: number;
+    closeOnClickOverlay: boolean;
+    transition: string;
+    forbidClick: boolean;
+    closeOnClick: boolean;
+}>>;
 export default Toast;
-export { Toast };
+export { showToast, closeToast, showFailToast, showLoadingToast, showSuccessToast, allowMultipleToast, setToastDefaultOptions, resetToastDefaultOptions, } from './function-call';
 export type { ToastProps } from './Toast';
 export type { ToastType, ToastOptions, ToastPosition } from './types';

package/es/toast/index.mjs

@@ -0,0 +1,26 @@
+import { withInstall } from "../utils/index.mjs";
+import _Toast from "./Toast.mjs";
+const Toast = withInstall(_Toast);
+var stdin_default = Toast;
+import {
+  showToast,
+  closeToast,
+  showFailToast,
+  showLoadingToast,
+  showSuccessToast,
+  allowMultipleToast,
+  setToastDefaultOptions,
+  resetToastDefaultOptions
+} from "./function-call.mjs";
+export {
+  Toast,
+  allowMultipleToast,
+  closeToast,
+  stdin_default as default,
+  resetToastDefaultOptions,
+  setToastDefaultOptions,
+  showFailToast,
+  showLoadingToast,
+  showSuccessToast,
+  showToast
+};

package/es/toast/types.d.ts

@@ -1,5 +1,4 @@
-import { Toast } from './function-call';
-import type { TeleportProps } from 'vue';
+import type { ComponentPublicInstance, TeleportProps } from 'vue';
 import type { LoadingType } from '../loading';
 import type { Numeric } from '../utils';
 export declare type ToastType = 'text' | 'loading' | 'success' | 'fail' | 'html';
@@ -26,8 +25,12 @@ export declare type ToastOptions = {
     overlayStyle?: Record<string, any>;
     closeOnClickOverlay?: boolean;
 };
-declare module '@vue/runtime-core' {
-    interface ComponentCustomProperties {
-        $toast: typeof Toast;
-    }
-}
+export declare type ToastWrapperInstance = ComponentPublicInstance<{
+    message: Numeric;
+}, {
+    close: () => void;
+    /**
+     * @private
+     */
+    open: (props: Record<string, any>) => void;
+}>;

package/es/tree-select/TreeSelect.mjs

@@ -0,0 +1,102 @@
+import { createVNode as _createVNode } from "vue";
+import { defineComponent } from "vue";
+import { addUnit, makeArrayProp, makeStringProp, makeNumericProp, createNamespace } from "../utils/index.mjs";
+import { Icon } from "../icon/index.mjs";
+import { Sidebar } from "../sidebar/index.mjs";
+import { SidebarItem } from "../sidebar-item/index.mjs";
+const [name, bem] = createNamespace("tree-select");
+const treeSelectProps = {
+  max: makeNumericProp(Infinity),
+  items: makeArrayProp(),
+  height: makeNumericProp(300),
+  selectedIcon: makeStringProp("success"),
+  mainActiveIndex: makeNumericProp(0),
+  activeId: {
+    type: [Number, String, Array],
+    default: 0
+  }
+};
+var stdin_default = defineComponent({
+  name,
+  props: treeSelectProps,
+  emits: ["clickNav", "clickItem", "update:activeId", "update:mainActiveIndex"],
+  setup(props, {
+    emit,
+    slots
+  }) {
+    const isActiveItem = (id) => Array.isArray(props.activeId) ? props.activeId.includes(id) : props.activeId === id;
+    const renderSubItem = (item) => {
+      const onClick = () => {
+        if (item.disabled) {
+          return;
+        }
+        let activeId;
+        if (Array.isArray(props.activeId)) {
+          activeId = props.activeId.slice();
+          const index = activeId.indexOf(item.id);
+          if (index !== -1) {
+            activeId.splice(index, 1);
+          } else if (activeId.length < props.max) {
+            activeId.push(item.id);
+          }
+        } else {
+          activeId = item.id;
+        }
+        emit("update:activeId", activeId);
+        emit("clickItem", item);
+      };
+      return _createVNode("div", {
+        "key": item.id,
+        "class": ["van-ellipsis", bem("item", {
+          active: isActiveItem(item.id),
+          disabled: item.disabled
+        })],
+        "onClick": onClick
+      }, [item.text, isActiveItem(item.id) && _createVNode(Icon, {
+        "name": props.selectedIcon,
+        "class": bem("selected")
+      }, null)]);
+    };
+    const onSidebarChange = (index) => {
+      emit("update:mainActiveIndex", index);
+    };
+    const onClickSidebarItem = (index) => emit("clickNav", index);
+    const renderSidebar = () => {
+      const Items = props.items.map((item) => _createVNode(SidebarItem, {
+        "dot": item.dot,
+        "title": item.text,
+        "badge": item.badge,
+        "class": [bem("nav-item"), item.className],
+        "disabled": item.disabled,
+        "onClick": onClickSidebarItem
+      }, null));
+      return _createVNode(Sidebar, {
+        "class": bem("nav"),
+        "modelValue": props.mainActiveIndex,
+        "onChange": onSidebarChange
+      }, {
+        default: () => [Items]
+      });
+    };
+    const renderContent = () => {
+      if (slots.content) {
+        return slots.content();
+      }
+      const selected = props.items[+props.mainActiveIndex] || {};
+      if (selected.children) {
+        return selected.children.map(renderSubItem);
+      }
+    };
+    return () => _createVNode("div", {
+      "class": bem(),
+      "style": {
+        height: addUnit(props.height)
+      }
+    }, [renderSidebar(), _createVNode("div", {
+      "class": bem("content")
+    }, [renderContent()])]);
+  }
+});
+export {
+  stdin_default as default
+};

package/es/tree-select/index.mjs

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

package/es/uploader/Uploader.d.ts

@@ -54,7 +54,7 @@ declare const uploaderProps: {
         type: BooleanConstructor;
         default: true;
     };
-    previewOptions: PropType<ImagePreviewOptions>;
+    previewOptions: PropType<Partial<ImagePreviewOptions>>;
     previewFullImage: {
         type: BooleanConstructor;
         default: true;
@@ -116,7 +116,7 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: true;
     };
-    previewOptions: PropType<ImagePreviewOptions>;
+    previewOptions: PropType<Partial<ImagePreviewOptions>>;
     previewFullImage: {
         type: BooleanConstructor;
         default: true;
@@ -176,7 +176,7 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: true;
     };
-    previewOptions: PropType<ImagePreviewOptions>;
+    previewOptions: PropType<Partial<ImagePreviewOptions>>;
     previewFullImage: {
         type: BooleanConstructor;
         default: true;