vant 3.4.5 → 4.0.0-alpha.1

package/es/tag/index.less

@@ -1,22 +1,20 @@
-@import './var.less';
-
-:root {
-  --van-tag-padding: @tag-padding;
-  --van-tag-text-color: @tag-text-color;
-  --van-tag-font-size: @tag-font-size;
-  --van-tag-border-radius: @tag-border-radius;
-  --van-tag-line-height: @tag-line-height;
-  --van-tag-medium-padding: @tag-medium-padding;
-  --van-tag-large-padding: @tag-large-padding;
-  --van-tag-large-border-radius: @tag-large-border-radius;
-  --van-tag-large-font-size: @tag-large-font-size;
-  --van-tag-round-border-radius: @tag-round-border-radius;
-  --van-tag-danger-color: @tag-danger-color;
-  --van-tag-primary-color: @tag-primary-color;
-  --van-tag-success-color: @tag-success-color;
-  --van-tag-warning-color: @tag-warning-color;
-  --van-tag-default-color: @tag-default-color;
-  --van-tag-plain-background-color: @tag-plain-background-color;
+body {
+  --van-tag-padding: 0 var(--van-padding-base);
+  --van-tag-text-color: var(--van-white);
+  --van-tag-font-size: var(--van-font-size-sm);
+  --van-tag-radius: 2px;
+  --van-tag-line-height: 16px;
+  --van-tag-medium-padding: 2px 6px;
+  --van-tag-large-padding: var(--van-padding-base) var(--van-padding-xs);
+  --van-tag-large-radius: var(--van-radius-md);
+  --van-tag-large-font-size: var(--van-font-size-md);
+  --van-tag-round-radius: var(--van-radius-max);
+  --van-tag-danger-color: var(--van-danger-color);
+  --van-tag-primary-color: var(--van-primary-color);
+  --van-tag-success-color: var(--van-success-color);
+  --van-tag-warning-color: var(--van-warning-color);
+  --van-tag-default-color: var(--van-gray-6);
+  --van-tag-plain-background: var(--van-background-2);
 }
 
 .van-tag {
@@ -27,7 +25,7 @@
   color: var(--van-tag-text-color);
   font-size: var(--van-tag-font-size);
   line-height: var(--van-tag-line-height);
-  border-radius: var(--van-tag-border-radius);
+  border-radius: var(--van-tag-radius);
 
   &--default {
     background: var(--van-tag-default-color);
@@ -70,7 +68,7 @@
   }
 
   &--plain {
-    background: var(--van-tag-plain-background-color);
+    background: var(--van-tag-plain-background);
     border-color: currentColor;
 
     &::before {
@@ -94,12 +92,11 @@
   &--large {
     padding: var(--van-tag-large-padding);
     font-size: var(--van-tag-large-font-size);
-    border-radius: var(--van-tag-large-border-radius);
+    border-radius: var(--van-tag-large-radius);
   }
 
   &--mark {
-    border-radius: 0 var(--van-tag-round-border-radius)
-      var(--van-tag-round-border-radius) 0;
+    border-radius: 0 var(--van-tag-round-radius) var(--van-tag-round-radius) 0;
 
     &::after {
       display: block;
@@ -109,7 +106,7 @@
   }
 
   &--round {
-    border-radius: var(--van-tag-round-border-radius);
+    border-radius: var(--van-tag-round-radius);
   }
 
   &__close {

package/es/time-picker/TimePicker.d.ts

@@ -0,0 +1,214 @@
+import { type PropType, type ExtractPropTypes } from 'vue';
+export declare type TimePickerColumnType = 'hour' | 'minute' | 'second';
+declare const timePickerProps: {
+    title: StringConstructor;
+    loading: BooleanConstructor;
+    readonly: BooleanConstructor;
+    allowHtml: BooleanConstructor;
+    optionHeight: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    showToolbar: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    swipeDuration: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    visibleOptionNum: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    cancelButtonText: StringConstructor;
+    confirmButtonText: StringConstructor;
+} & {
+    modelValue: {
+        type: PropType<string[]>;
+        default: () => never[];
+    };
+    filter: PropType<(columnType: string, options: import("../picker").PickerOption[]) => import("../picker").PickerOption[]>;
+    formatter: {
+        type: PropType<(type: string, option: import("../picker").PickerOption) => import("../picker").PickerOption>;
+        default: (type: string, option: import("../picker").PickerOption) => import("../picker").PickerOption;
+    };
+} & {
+    minHour: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    maxHour: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    minMinute: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    maxMinute: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    minSecond: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    maxSecond: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    columnsType: {
+        type: PropType<TimePickerColumnType[]>;
+        default: () => string[];
+    };
+};
+export declare type TimePickerProps = ExtractPropTypes<typeof timePickerProps>;
+declare const _default: import("vue").DefineComponent<{
+    title: StringConstructor;
+    loading: BooleanConstructor;
+    readonly: BooleanConstructor;
+    allowHtml: BooleanConstructor;
+    optionHeight: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    showToolbar: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    swipeDuration: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    visibleOptionNum: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    cancelButtonText: StringConstructor;
+    confirmButtonText: StringConstructor;
+} & {
+    modelValue: {
+        type: PropType<string[]>;
+        default: () => never[];
+    };
+    filter: PropType<(columnType: string, options: import("../picker").PickerOption[]) => import("../picker").PickerOption[]>;
+    formatter: {
+        type: PropType<(type: string, option: import("../picker").PickerOption) => import("../picker").PickerOption>;
+        default: (type: string, option: import("../picker").PickerOption) => import("../picker").PickerOption;
+    };
+} & {
+    minHour: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    maxHour: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    minMinute: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    maxMinute: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    minSecond: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    maxSecond: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    columnsType: {
+        type: PropType<TimePickerColumnType[]>;
+        default: () => string[];
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "change" | "cancel" | "confirm")[], "update:modelValue" | "change" | "cancel" | "confirm", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+    title: StringConstructor;
+    loading: BooleanConstructor;
+    readonly: BooleanConstructor;
+    allowHtml: BooleanConstructor;
+    optionHeight: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    showToolbar: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    swipeDuration: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    visibleOptionNum: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    cancelButtonText: StringConstructor;
+    confirmButtonText: StringConstructor;
+} & {
+    modelValue: {
+        type: PropType<string[]>;
+        default: () => never[];
+    };
+    filter: PropType<(columnType: string, options: import("../picker").PickerOption[]) => import("../picker").PickerOption[]>;
+    formatter: {
+        type: PropType<(type: string, option: import("../picker").PickerOption) => import("../picker").PickerOption>;
+        default: (type: string, option: import("../picker").PickerOption) => import("../picker").PickerOption;
+    };
+} & {
+    minHour: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    maxHour: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    minMinute: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    maxMinute: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    minSecond: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    maxSecond: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    columnsType: {
+        type: PropType<TimePickerColumnType[]>;
+        default: () => string[];
+    };
+}>> & {
+    onChange?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onCancel?: ((...args: any[]) => any) | undefined;
+    onConfirm?: ((...args: any[]) => any) | undefined;
+}, {
+    formatter: (type: string, option: import("../picker").PickerOption) => import("../picker").PickerOption;
+    modelValue: string[];
+    readonly: boolean;
+    loading: boolean;
+    allowHtml: boolean;
+    optionHeight: string | number;
+    showToolbar: boolean;
+    swipeDuration: string | number;
+    visibleOptionNum: string | number;
+    columnsType: TimePickerColumnType[];
+    minHour: string | number;
+    maxHour: string | number;
+    minMinute: string | number;
+    maxMinute: string | number;
+    minSecond: string | number;
+    maxSecond: string | number;
+}>;
+export default _default;

package/es/time-picker/TimePicker.js

@@ -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";
+import { genOptions, sharedProps, pickerInheritKeys } from "../date-picker/utils";
+import { Picker } from "../picker";
+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/{lib/datetime-picker/TimePicker.d.ts → es/time-picker/index.d.ts}

@@ -1,9 +1,10 @@
-declare const _default: import("vue").DefineComponent<{
+import { TimePickerProps } from './TimePicker';
+export declare const TimePicker: import("../utils").WithInstall<import("vue").DefineComponent<{
     title: StringConstructor;
     loading: BooleanConstructor;
     readonly: BooleanConstructor;
     allowHtml: BooleanConstructor;
-    itemHeight: {
+    optionHeight: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
@@ -15,18 +16,21 @@ declare const _default: import("vue").DefineComponent<{
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
-    visibleItemCount: {
+    visibleOptionNum: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
     cancelButtonText: StringConstructor;
     confirmButtonText: StringConstructor;
 } & {
-    filter: import("vue").PropType<(type: string, values: string[]) => string[]>;
-    columnsOrder: import("vue").PropType<import("./types").DatetimePickerColumnType[]>;
+    modelValue: {
+        type: import("vue").PropType<string[]>;
+        default: () => never[];
+    };
+    filter: import("vue").PropType<(columnType: string, options: import("..").PickerOption[]) => import("..").PickerOption[]>;
     formatter: {
-        type: import("vue").PropType<(type: string, value: string) => string>;
-        default: (type: string, value: string) => string;
+        type: import("vue").PropType<(type: string, option: import("..").PickerOption) => import("..").PickerOption>;
+        default: (type: string, option: import("..").PickerOption) => import("..").PickerOption;
     };
 } & {
     minHour: {
@@ -45,13 +49,24 @@ declare const _default: import("vue").DefineComponent<{
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
-    modelValue: StringConstructor;
+    minSecond: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    maxSecond: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    columnsType: {
+        type: import("vue").PropType<import("./TimePicker").TimePickerColumnType[]>;
+        default: () => string[];
+    };
 }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "change" | "cancel" | "confirm")[], "update:modelValue" | "change" | "cancel" | "confirm", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     title: StringConstructor;
     loading: BooleanConstructor;
     readonly: BooleanConstructor;
     allowHtml: BooleanConstructor;
-    itemHeight: {
+    optionHeight: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
@@ -63,18 +78,21 @@ declare const _default: import("vue").DefineComponent<{
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
-    visibleItemCount: {
+    visibleOptionNum: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
     cancelButtonText: StringConstructor;
     confirmButtonText: StringConstructor;
 } & {
-    filter: import("vue").PropType<(type: string, values: string[]) => string[]>;
-    columnsOrder: import("vue").PropType<import("./types").DatetimePickerColumnType[]>;
+    modelValue: {
+        type: import("vue").PropType<string[]>;
+        default: () => never[];
+    };
+    filter: import("vue").PropType<(columnType: string, options: import("..").PickerOption[]) => import("..").PickerOption[]>;
     formatter: {
-        type: import("vue").PropType<(type: string, value: string) => string>;
-        default: (type: string, value: string) => string;
+        type: import("vue").PropType<(type: string, option: import("..").PickerOption) => import("..").PickerOption>;
+        default: (type: string, option: import("..").PickerOption) => import("..").PickerOption;
     };
 } & {
     minHour: {
@@ -93,24 +111,46 @@ declare const _default: import("vue").DefineComponent<{
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
-    modelValue: StringConstructor;
+    minSecond: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    maxSecond: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    columnsType: {
+        type: import("vue").PropType<import("./TimePicker").TimePickerColumnType[]>;
+        default: () => string[];
+    };
 }>> & {
     onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onCancel?: ((...args: any[]) => any) | undefined;
     onConfirm?: ((...args: any[]) => any) | undefined;
 }, {
-    formatter: (type: string, value: string) => string;
+    formatter: (type: string, option: import("..").PickerOption) => import("..").PickerOption;
+    modelValue: string[];
     readonly: boolean;
     loading: boolean;
     allowHtml: boolean;
-    itemHeight: string | number;
+    optionHeight: string | number;
     showToolbar: boolean;
     swipeDuration: string | number;
-    visibleItemCount: string | number;
+    visibleOptionNum: string | number;
+    columnsType: import("./TimePicker").TimePickerColumnType[];
     minHour: string | number;
     maxHour: string | number;
     minMinute: string | number;
     maxMinute: string | number;
-}>;
-export default _default;
+    minSecond: string | number;
+    maxSecond: string | number;
+}>>;
+export default TimePicker;
+export type { TimePickerProps };
+export type { TimePickerColumnType } from './TimePicker';
+declare module 'vue' {
+    interface GlobalComponents {
+        VanTimePicker: typeof TimePicker;
+    }
+}

package/es/time-picker/index.js

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

package/es/time-picker/style/index.js

@@ -0,0 +1,3 @@
+import "../../style/base.css";
+import "../../loading/index.css";
+import "../../picker/index.css";

package/es/time-picker/style/less.js

@@ -0,0 +1,3 @@
+import "../../style/base.less";
+import "../../loading/index.less";
+import "../../picker/index.less";

package/es/toast/Toast.js

@@ -82,6 +82,7 @@ var stdin_default = defineComponent({
       } = props;
       if (isDef(message) && message !== "") {
         return type === "html" ? _createVNode("div", {
+          "key": 0,
           "class": bem("text"),
           "innerHTML": String(message)
         }, null) : _createVNode("div", {

package/es/toast/index.css

@@ -1 +1 @@
-:root{--van-toast-max-width: 70%;--van-toast-font-size: var(--van-font-size-md);--van-toast-text-color: var(--van-white);--van-toast-loading-icon-color: var(--van-white);--van-toast-line-height: var(--van-line-height-md);--van-toast-border-radius: var(--van-border-radius-lg);--van-toast-background-color: rgba(0, 0, 0, .7);--van-toast-icon-size: 36px;--van-toast-text-min-width: 96px;--van-toast-text-padding: var(--van-padding-xs) var(--van-padding-sm);--van-toast-default-padding: var(--van-padding-md);--van-toast-default-width: 88px;--van-toast-default-min-height: 88px;--van-toast-position-top-distance: 20%;--van-toast-position-bottom-distance: 20%}.van-toast{display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:content-box;transition:all var(--van-animation-duration-fast);width:var(--van-toast-default-width);max-width:var(--van-toast-max-width);min-height:var(--van-toast-default-min-height);padding:var(--van-toast-default-padding);color:var(--van-toast-text-color);font-size:var(--van-toast-font-size);line-height:var(--van-toast-line-height);white-space:pre-wrap;text-align:center;word-break:break-all;background:var(--van-toast-background-color);border-radius:var(--van-toast-border-radius)}.van-toast--unclickable{overflow:hidden;cursor:not-allowed}.van-toast--unclickable *{pointer-events:none}.van-toast--text,.van-toast--html{width:-webkit-fit-content;width:fit-content;min-width:var(--van-toast-text-min-width);min-height:0;padding:var(--van-toast-text-padding)}.van-toast--text .van-toast__text,.van-toast--html .van-toast__text{margin-top:0}.van-toast--top{top:var(--van-toast-position-top-distance)}.van-toast--bottom{top:auto;bottom:var(--van-toast-position-bottom-distance)}.van-toast__icon{font-size:var(--van-toast-icon-size)}.van-toast__loading{padding:var(--van-padding-base);color:var(--van-toast-loading-icon-color)}.van-toast__text{margin-top:var(--van-padding-xs)}
+body{--van-toast-max-width: 70%;--van-toast-font-size: var(--van-font-size-md);--van-toast-text-color: var(--van-white);--van-toast-loading-icon-color: var(--van-white);--van-toast-line-height: var(--van-line-height-md);--van-toast-radius: var(--van-radius-lg);--van-toast-background: rgba(0, 0, 0, .7);--van-toast-icon-size: 36px;--van-toast-text-min-width: 96px;--van-toast-text-padding: var(--van-padding-xs) var(--van-padding-sm);--van-toast-default-padding: var(--van-padding-md);--van-toast-default-width: 88px;--van-toast-default-min-height: 88px;--van-toast-position-top-distance: 20%;--van-toast-position-bottom-distance: 20%}.van-toast{display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:content-box;transition:all var(--van-duration-fast);width:var(--van-toast-default-width);max-width:var(--van-toast-max-width);min-height:var(--van-toast-default-min-height);padding:var(--van-toast-default-padding);color:var(--van-toast-text-color);font-size:var(--van-toast-font-size);line-height:var(--van-toast-line-height);white-space:pre-wrap;text-align:center;word-break:break-all;background:var(--van-toast-background);border-radius:var(--van-toast-radius)}.van-toast--unclickable{overflow:hidden;cursor:not-allowed}.van-toast--unclickable *{pointer-events:none}.van-toast--text,.van-toast--html{width:-webkit-fit-content;width:fit-content;min-width:var(--van-toast-text-min-width);min-height:0;padding:var(--van-toast-text-padding)}.van-toast--text .van-toast__text,.van-toast--html .van-toast__text{margin-top:0}.van-toast--top{top:var(--van-toast-position-top-distance)}.van-toast--bottom{top:auto;bottom:var(--van-toast-position-bottom-distance)}.van-toast__icon{font-size:var(--van-toast-icon-size)}.van-toast__loading{padding:var(--van-padding-base);color:var(--van-toast-loading-icon-color)}.van-toast__text{margin-top:var(--van-padding-xs)}

package/es/toast/index.less

@@ -1,21 +1,19 @@
-@import './var.less';
-
-:root {
-  --van-toast-max-width: @toast-max-width;
-  --van-toast-font-size: @toast-font-size;
-  --van-toast-text-color: @toast-text-color;
-  --van-toast-loading-icon-color: @toast-loading-icon-color;
-  --van-toast-line-height: @toast-line-height;
-  --van-toast-border-radius: @toast-border-radius;
-  --van-toast-background-color: @toast-background-color;
-  --van-toast-icon-size: @toast-icon-size;
-  --van-toast-text-min-width: @toast-text-min-width;
-  --van-toast-text-padding: @toast-text-padding;
-  --van-toast-default-padding: @toast-default-padding;
-  --van-toast-default-width: @toast-default-width;
-  --van-toast-default-min-height: @toast-default-min-height;
-  --van-toast-position-top-distance: @toast-position-top-distance;
-  --van-toast-position-bottom-distance: @toast-position-bottom-distance;
+body {
+  --van-toast-max-width: 70%;
+  --van-toast-font-size: var(--van-font-size-md);
+  --van-toast-text-color: var(--van-white);
+  --van-toast-loading-icon-color: var(--van-white);
+  --van-toast-line-height: var(--van-line-height-md);
+  --van-toast-radius: var(--van-radius-lg);
+  --van-toast-background: rgba(0, 0, 0, 0.7);
+  --van-toast-icon-size: 36px;
+  --van-toast-text-min-width: 96px;
+  --van-toast-text-padding: var(--van-padding-xs) var(--van-padding-sm);
+  --van-toast-default-padding: var(--van-padding-md);
+  --van-toast-default-width: 88px;
+  --van-toast-default-min-height: 88px;
+  --van-toast-position-top-distance: 20%;
+  --van-toast-position-bottom-distance: 20%;
 }
 
 .van-toast {
@@ -24,7 +22,7 @@
   align-items: center;
   justify-content: center;
   box-sizing: content-box;
-  transition: all var(--van-animation-duration-fast);
+  transition: all var(--van-duration-fast);
 
   // hack for avoid max-width when use left & fixed
   width: var(--van-toast-default-width);
@@ -40,8 +38,8 @@
   text-align: center;
   // https://github.com/youzan/vant/issues/8959
   word-break: break-all;
-  background: var(--van-toast-background-color);
-  border-radius: var(--van-toast-border-radius);
+  background: var(--van-toast-background);
+  border-radius: var(--van-toast-radius);
 
   &--unclickable {
     // lock scroll

package/es/tree-select/TreeSelect.d.ts

@@ -64,7 +64,7 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<string | number | (string | number)[]>;
         default: number;
     };
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click-item" | "click-nav" | "update:activeId" | "update:mainActiveIndex")[], "click-item" | "click-nav" | "update:activeId" | "update:mainActiveIndex", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("clickItem" | "clickNav" | "update:activeId" | "update:mainActiveIndex")[], "clickItem" | "clickNav" | "update:activeId" | "update:mainActiveIndex", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
     max: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
@@ -90,8 +90,8 @@ declare const _default: import("vue").DefineComponent<{
         default: number;
     };
 }>> & {
-    "onClick-item"?: ((...args: any[]) => any) | undefined;
-    "onClick-nav"?: ((...args: any[]) => any) | undefined;
+    onClickItem?: ((...args: any[]) => any) | undefined;
+    onClickNav?: ((...args: any[]) => any) | undefined;
     "onUpdate:activeId"?: ((...args: any[]) => any) | undefined;
     "onUpdate:mainActiveIndex"?: ((...args: any[]) => any) | undefined;
 }, {

package/es/tree-select/TreeSelect.js

@@ -19,7 +19,7 @@ const treeSelectProps = {
 var stdin_default = defineComponent({
   name,
   props: treeSelectProps,
-  emits: ["click-nav", "click-item", "update:activeId", "update:mainActiveIndex"],
+  emits: ["clickNav", "clickItem", "update:activeId", "update:mainActiveIndex"],
   setup(props, {
     emit,
     slots
@@ -43,7 +43,7 @@ var stdin_default = defineComponent({
           activeId = item.id;
         }
         emit("update:activeId", activeId);
-        emit("click-item", item);
+        emit("clickItem", item);
       };
       return _createVNode("div", {
         "key": item.id,
@@ -60,7 +60,7 @@ var stdin_default = defineComponent({
     const onSidebarChange = (index) => {
       emit("update:mainActiveIndex", index);
     };
-    const onClickSidebarItem = (index) => emit("click-nav", index);
+    const onClickSidebarItem = (index) => emit("clickNav", index);
     const renderSidebar = () => {
       const Items = props.items.map((item) => _createVNode(SidebarItem, {
         "dot": item.dot,