vant 3.4.2 → 4.0.0-alpha.0

package/es/coupon/index.less

@@ -1,35 +1,34 @@
-@import './var.less';
 @import '../style/mixins/ellipsis';
 
-:root {
-  --van-coupon-margin: @coupon-margin;
-  --van-coupon-content-height: @coupon-content-height;
-  --van-coupon-content-padding: @coupon-content-padding;
-  --van-coupon-content-text-color: @coupon-content-text-color;
-  --van-coupon-background-color: @coupon-background-color;
-  --van-coupon-active-background-color: @coupon-active-background-color;
-  --van-coupon-border-radius: @coupon-border-radius;
-  --van-coupon-box-shadow: @coupon-box-shadow;
-  --van-coupon-head-width: @coupon-head-width;
-  --van-coupon-amount-color: @coupon-amount-color;
-  --van-coupon-amount-font-size: @coupon-amount-font-size;
-  --van-coupon-currency-font-size: @coupon-currency-font-size;
-  --van-coupon-name-font-size: @coupon-name-font-size;
-  --van-coupon-disabled-text-color: @coupon-disabled-text-color;
-  --van-coupon-description-padding: @coupon-description-padding;
-  --van-coupon-description-border-color: @coupon-description-border-color;
-  --van-coupon-corner-checkbox-icon-color: @coupon-corner-checkbox-icon-color;
+body {
+  --van-coupon-margin: 0 var(--van-padding-sm) var(--van-padding-sm);
+  --van-coupon-content-height: 84px;
+  --van-coupon-content-padding: 14px 0;
+  --van-coupon-content-text-color: var(--van-text-color);
+  --van-coupon-background: var(--van-background-2);
+  --van-coupon-active-background: var(--van-active-color);
+  --van-coupon-radius: var(--van-radius-lg);
+  --van-coupon-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
+  --van-coupon-head-width: 96px;
+  --van-coupon-amount-color: var(--van-primary-color);
+  --van-coupon-amount-font-size: 30px;
+  --van-coupon-currency-font-size: 40%;
+  --van-coupon-name-font-size: var(--van-font-size-md);
+  --van-coupon-disabled-text-color: var(--van-text-color-2);
+  --van-coupon-description-padding: var(--van-padding-xs) var(--van-padding-md);
+  --van-coupon-description-border-color: var(--van-border-color);
+  --van-coupon-checkbox-color: var(--van-primary-color);
 }
 
 .van-coupon {
   margin: var(--van-coupon-margin);
   overflow: hidden;
-  background: var(--van-coupon-background-color);
-  border-radius: var(--van-coupon-border-radius);
-  box-shadow: var(--van-coupon-box-shadow);
+  background: var(--van-coupon-background);
+  border-radius: var(--van-coupon-radius);
+  box-shadow: var(--van-coupon-shadow);
 
   &:active {
-    background-color: var(--van-coupon-active-background-color);
+    background-color: var(--van-coupon-active-background);
   }
 
   &__content {
@@ -58,12 +57,11 @@
 
   &__amount {
     margin-bottom: 6px;
-    font-weight: var(--van-font-weight-bold);
+    font-weight: var(--van-font-bold);
     font-size: var(--van-coupon-amount-font-size);
     .ellipsis();
 
     span {
-      font-weight: normal;
       font-size: var(--van-coupon-currency-font-size);
 
       &:not(:empty) {
@@ -81,13 +79,12 @@
   &__body {
     position: relative;
     flex: 1;
-    border-radius: 0 var(--van-coupon-border-radius)
-      var(--van-coupon-border-radius) 0;
+    border-radius: 0 var(--van-coupon-radius) var(--van-coupon-radius) 0;
   }
 
   &__name {
     margin-bottom: 10px;
-    font-weight: bold;
+    font-weight: var(--van-font-bold);
     font-size: var(--van-coupon-name-font-size);
     line-height: var(--van-line-height-md);
   }
@@ -103,8 +100,8 @@
     bottom: 0;
 
     .van-checkbox__icon--checked .van-icon {
-      background-color: var(--van-coupon-corner-checkbox-icon-color);
-      border-color: var(--van-coupon-corner-checkbox-icon-color);
+      background-color: var(--van-coupon-checkbox-color);
+      border-color: var(--van-coupon-checkbox-color);
     }
   }
 
@@ -116,7 +113,7 @@
 
   &--disabled {
     &:active {
-      background-color: var(--van-coupon-background-color);
+      background-color: var(--van-coupon-background);
     }
 
     .van-coupon-item__content {

package/es/coupon-cell/index.css

@@ -1 +1 @@
-:root{--van-coupon-cell-selected-text-color: var(--van-text-color)}.van-coupon-cell__value--selected{color:var(--van-coupon-cell-selected-text-color)}
+body{--van-coupon-cell-selected-text-color: var(--van-text-color)}.van-coupon-cell__value--selected{color:var(--van-coupon-cell-selected-text-color)}

package/es/coupon-cell/index.less

@@ -1,7 +1,5 @@
-@import './var.less';
-
-:root {
-  --van-coupon-cell-selected-text-color: @coupon-cell-selected-text-color;
+body {
+  --van-coupon-cell-selected-text-color: var(--van-text-color);
 }
 
 .van-coupon-cell {

package/es/coupon-list/CouponList.js

@@ -83,7 +83,7 @@ var stdin_default = defineComponent({
           "maxlength": "20"
         }, null), _createVNode(Button, {
           "plain": true,
-          "type": "danger",
+          "type": "primary",
           "class": bem("exchange"),
           "text": props.exchangeButtonText || t("exchange"),
           "loading": props.exchangeButtonLoading,
@@ -172,7 +172,7 @@ var stdin_default = defineComponent({
     }, [_withDirectives(_createVNode(Button, {
       "round": true,
       "block": true,
-      "type": "danger",
+      "type": "primary",
       "class": bem("close"),
       "text": props.closeButtonText || t("close"),
       "onClick": () => emit("change", -1)

package/es/coupon-list/index.css

@@ -1 +1 @@
-:root{--van-coupon-list-background-color: var(--van-background-color);--van-coupon-list-field-padding: 5px 0 5px var(--van-padding-md);--van-coupon-list-exchange-button-height: 32px;--van-coupon-list-close-button-height: 40px;--van-coupon-list-empty-image-size: 200px;--van-coupon-list-empty-tip-color: var(--van-text-color-2);--van-coupon-list-empty-tip-font-size: var(--van-font-size-md);--van-coupon-list-empty-tip-line-height: var(--van-line-height-md)}.van-coupon-list{position:relative;height:100%;background:var(--van-coupon-list-background-color)}.van-coupon-list__field{padding:var(--van-coupon-list-field-padding)}.van-coupon-list__field .van-field__body{height:34px;padding-left:var(--van-padding-sm);line-height:34px;background:var(--van-gray-1);border-radius:17px}.van-coupon-list__field .van-field__body::-webkit-input-placeholder{color:var(--van-text-color-3)}.van-coupon-list__field .van-field__body::placeholder{color:var(--van-text-color-3)}.van-coupon-list__field .van-field__clear{margin-right:0}.van-coupon-list__exchange-bar{display:flex;align-items:center;background-color:var(--van-background-color-light)}.van-coupon-list__exchange{flex:none;height:var(--van-coupon-list-exchange-button-height);font-size:var(--van-font-size-lg);line-height:calc(var(--van-coupon-list-exchange-button-height) - 2px);border:0}.van-coupon-list .van-tabs__wrap{box-shadow:0 6px 12px -12px var(--van-gray-6)}.van-coupon-list__list{box-sizing:border-box;padding:var(--van-padding-md) 0 var(--van-padding-lg);overflow-y:auto;-webkit-overflow-scrolling:touch}.van-coupon-list__list--with-bottom{padding-bottom:50px}.van-coupon-list__bottom{position:absolute;bottom:0;left:0;z-index:999;box-sizing:border-box;width:100%;padding:5px var(--van-padding-md);font-weight:var(--van-font-weight-bold);background-color:var(--van-background-color-light)}.van-coupon-list__close{height:var(--van-coupon-list-close-button-height)}.van-coupon-list__empty{padding-top:60px;text-align:center}.van-coupon-list__empty p{margin:var(--van-padding-md) 0;color:var(--van-coupon-list-empty-tip-color);font-size:var(--van-coupon-list-empty-tip-font-size);line-height:var(--van-coupon-list-empty-tip-line-height)}.van-coupon-list__empty img{width:var(--van-coupon-list-empty-image-size);height:var(--van-coupon-list-empty-image-size)}
+body{--van-coupon-list-background: var(--van-background);--van-coupon-list-field-padding: 5px 0 5px var(--van-padding-md);--van-coupon-list-exchange-button-height: 32px;--van-coupon-list-close-button-height: 40px;--van-coupon-list-empty-image-size: 200px;--van-coupon-list-empty-tip-color: var(--van-text-color-2);--van-coupon-list-empty-tip-font-size: var(--van-font-size-md);--van-coupon-list-empty-tip-line-height: var(--van-line-height-md)}.van-coupon-list{position:relative;height:100%;background:var(--van-coupon-list-background)}.van-coupon-list__field{padding:var(--van-coupon-list-field-padding)}.van-coupon-list__field .van-field__body{height:34px;padding-left:var(--van-padding-sm);line-height:34px;background:var(--van-background);border-radius:var(--van-radius-max)}.van-coupon-list__field .van-field__body::-webkit-input-placeholder{color:var(--van-text-color-3)}.van-coupon-list__field .van-field__body::placeholder{color:var(--van-text-color-3)}.van-coupon-list__field .van-field__clear{margin-right:0}.van-coupon-list__exchange-bar{display:flex;align-items:center;background-color:var(--van-background-2)}.van-coupon-list__exchange{flex:none;height:var(--van-coupon-list-exchange-button-height);font-size:var(--van-font-size-lg);line-height:calc(var(--van-coupon-list-exchange-button-height) - 2px);border:0}.van-coupon-list .van-tabs__wrap{box-shadow:0 6px 12px -12px var(--van-gray-6)}.van-coupon-list__list{box-sizing:border-box;padding:var(--van-padding-md) 0 var(--van-padding-lg);overflow-y:auto;-webkit-overflow-scrolling:touch}.van-coupon-list__list--with-bottom{padding-bottom:50px}.van-coupon-list__bottom{position:absolute;bottom:0;left:0;z-index:999;box-sizing:border-box;width:100%;padding:5px var(--van-padding-md);font-weight:var(--van-font-bold);background-color:var(--van-background-2)}.van-coupon-list__close{height:var(--van-coupon-list-close-button-height)}.van-coupon-list__empty{padding-top:60px;text-align:center}.van-coupon-list__empty p{margin:var(--van-padding-md) 0;color:var(--van-coupon-list-empty-tip-color);font-size:var(--van-coupon-list-empty-tip-font-size);line-height:var(--van-coupon-list-empty-tip-line-height)}.van-coupon-list__empty img{width:var(--van-coupon-list-empty-image-size);height:var(--van-coupon-list-empty-image-size)}

package/es/coupon-list/index.less

@@ -1,20 +1,18 @@
-@import './var.less';
-
-:root {
-  --van-coupon-list-background-color: @coupon-list-background-color;
-  --van-coupon-list-field-padding: @coupon-list-field-padding;
-  --van-coupon-list-exchange-button-height: @coupon-list-exchange-button-height;
-  --van-coupon-list-close-button-height: @coupon-list-close-button-height;
-  --van-coupon-list-empty-image-size: @coupon-list-empty-image-size;
-  --van-coupon-list-empty-tip-color: @coupon-list-empty-tip-color;
-  --van-coupon-list-empty-tip-font-size: @coupon-list-empty-tip-font-size;
-  --van-coupon-list-empty-tip-line-height: @coupon-list-empty-tip-line-height;
+body {
+  --van-coupon-list-background: var(--van-background);
+  --van-coupon-list-field-padding: 5px 0 5px var(--van-padding-md);
+  --van-coupon-list-exchange-button-height: 32px;
+  --van-coupon-list-close-button-height: 40px;
+  --van-coupon-list-empty-image-size: 200px;
+  --van-coupon-list-empty-tip-color: var(--van-text-color-2);
+  --van-coupon-list-empty-tip-font-size: var(--van-font-size-md);
+  --van-coupon-list-empty-tip-line-height: var(--van-line-height-md);
 }
 
 .van-coupon-list {
   position: relative;
   height: 100%;
-  background: var(--van-coupon-list-background-color);
+  background: var(--van-coupon-list-background);
 
   &__field {
     padding: var(--van-coupon-list-field-padding);
@@ -23,8 +21,8 @@
       height: 34px;
       padding-left: var(--van-padding-sm);
       line-height: 34px;
-      background: var(--van-gray-1);
-      border-radius: 17px;
+      background: var(--van-background);
+      border-radius: var(--van-radius-max);
 
       &::placeholder {
         color: var(--van-text-color-3);
@@ -39,7 +37,7 @@
   &__exchange-bar {
     display: flex;
     align-items: center;
-    background-color: var(--van-background-color-light);
+    background-color: var(--van-background-2);
   }
 
   &__exchange {
@@ -73,8 +71,8 @@
     box-sizing: border-box;
     width: 100%;
     padding: 5px var(--van-padding-md);
-    font-weight: var(--van-font-weight-bold);
-    background-color: var(--van-background-color-light);
+    font-weight: var(--van-font-bold);
+    background-color: var(--van-background-2);
   }
 
   &__close {

package/es/date-picker/DatePicker.d.ts

@@ -0,0 +1,168 @@
+import { type PropType, type ExtractPropTypes } from 'vue';
+export declare type DatePickerColumnType = 'year' | 'month' | 'day';
+declare const datePickerProps: {
+    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;
+    };
+} & {
+    columnsType: {
+        type: PropType<DatePickerColumnType[]>;
+        default: () => string[];
+    };
+    minDate: {
+        type: DateConstructor;
+        default: () => Date;
+        validator: (val: unknown) => val is Date;
+    };
+    maxDate: {
+        type: DateConstructor;
+        default: () => Date;
+        validator: (val: unknown) => val is Date;
+    };
+};
+export declare type DatePickerProps = ExtractPropTypes<typeof datePickerProps>;
+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;
+    };
+} & {
+    columnsType: {
+        type: PropType<DatePickerColumnType[]>;
+        default: () => string[];
+    };
+    minDate: {
+        type: DateConstructor;
+        default: () => Date;
+        validator: (val: unknown) => val is Date;
+    };
+    maxDate: {
+        type: DateConstructor;
+        default: () => Date;
+        validator: (val: unknown) => val is Date;
+    };
+}, () => 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;
+    };
+} & {
+    columnsType: {
+        type: PropType<DatePickerColumnType[]>;
+        default: () => string[];
+    };
+    minDate: {
+        type: DateConstructor;
+        default: () => Date;
+        validator: (val: unknown) => val is Date;
+    };
+    maxDate: {
+        type: DateConstructor;
+        default: () => Date;
+        validator: (val: unknown) => val is Date;
+    };
+}>> & {
+    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;
+    minDate: Date;
+    maxDate: Date;
+    columnsType: DatePickerColumnType[];
+}>;
+export default _default;

package/es/date-picker/DatePicker.js

@@ -0,0 +1,111 @@
+import { createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
+import { ref, watch, computed, defineComponent } from "vue";
+import { pick, extend, isDate, isSameValue, createNamespace } from "../utils";
+import { genOptions, sharedProps, getMonthEndDay, pickerInheritKeys } from "./utils";
+import { Picker } from "../picker";
+const currentYear = new Date().getFullYear();
+const [name] = createNamespace("date-picker");
+const datePickerProps = extend({}, sharedProps, {
+  columnsType: {
+    type: Array,
+    default: () => ["year", "month", "day"]
+  },
+  minDate: {
+    type: Date,
+    default: () => new Date(currentYear - 10, 0, 1),
+    validator: isDate
+  },
+  maxDate: {
+    type: Date,
+    default: () => new Date(currentYear + 10, 11, 31),
+    validator: isDate
+  }
+});
+var stdin_default = defineComponent({
+  name,
+  props: datePickerProps,
+  emits: ["confirm", "cancel", "change", "update:modelValue"],
+  setup(props, {
+    emit,
+    slots
+  }) {
+    const currentValues = ref(props.modelValue);
+    const genYearOptions = () => {
+      const minYear = props.minDate.getFullYear();
+      const maxYear = props.maxDate.getFullYear();
+      return genOptions(minYear, maxYear, "year", props.formatter, props.filter);
+    };
+    const isMaxYear = (year) => year === props.maxDate.getFullYear();
+    const isMaxMonth = (month) => month === props.maxDate.getMonth() + 1;
+    const getValue = (type) => {
+      const {
+        minDate,
+        columnsType
+      } = props;
+      const index = columnsType.indexOf(type);
+      const value = currentValues.value[index];
+      if (value) {
+        return +value;
+      }
+      switch (type) {
+        case "year":
+          return minDate.getFullYear();
+        case "month":
+          return minDate.getMonth() + 1;
+        case "day":
+          return minDate.getDate();
+      }
+    };
+    const genMonthOptions = () => {
+      if (isMaxYear(getValue("year"))) {
+        return genOptions(1, props.maxDate.getMonth() + 1, "month", props.formatter, props.filter);
+      }
+      return genOptions(1, 12, "month", props.formatter, props.filter);
+    };
+    const genDayOptions = () => {
+      const year = getValue("year");
+      const month = getValue("month");
+      let maxDate = getMonthEndDay(year, month);
+      if (isMaxYear(year) && isMaxMonth(month)) {
+        maxDate = props.maxDate.getDate();
+      }
+      return genOptions(1, maxDate, "day", props.formatter, props.filter);
+    };
+    const columns = computed(() => props.columnsType.map((type) => {
+      switch (type) {
+        case "year":
+          return genYearOptions();
+        case "month":
+          return genMonthOptions();
+        case "day":
+          return genDayOptions();
+        default:
+          throw new Error(`[Vant] DatePicker: unsupported columns type: ${type}`);
+      }
+    }));
+    watch(currentValues, (newValues) => {
+      if (isSameValue(newValues, props.modelValue)) {
+        emit("update:modelValue", newValues);
+      }
+    });
+    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/{datetime-picker/DatePicker.d.ts → date-picker/index.d.ts}

@@ -1,10 +1,10 @@
-import { DatetimePickerColumnType, DatetimePickerType } from './types';
-declare const _default: import("vue").DefineComponent<{
+import { DatePickerProps } from './DatePicker';
+export declare const DatePicker: import("../utils").WithInstall<import("vue").DefineComponent<{
     title: StringConstructor;
     loading: BooleanConstructor;
     readonly: BooleanConstructor;
     allowHtml: BooleanConstructor;
-    itemHeight: {
+    optionHeight: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
@@ -16,25 +16,27 @@ 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<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;
     };
 } & {
-    type: {
-        type: import("vue").PropType<DatetimePickerType>;
-        default: DatetimePickerType;
+    columnsType: {
+        type: import("vue").PropType<import("./DatePicker").DatePickerColumnType[]>;
+        default: () => string[];
     };
-    modelValue: DateConstructor;
     minDate: {
         type: DateConstructor;
         default: () => Date;
@@ -50,7 +52,7 @@ declare const _default: import("vue").DefineComponent<{
     loading: BooleanConstructor;
     readonly: BooleanConstructor;
     allowHtml: BooleanConstructor;
-    itemHeight: {
+    optionHeight: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
@@ -62,25 +64,27 @@ 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<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;
     };
 } & {
-    type: {
-        type: import("vue").PropType<DatetimePickerType>;
-        default: DatetimePickerType;
+    columnsType: {
+        type: import("vue").PropType<import("./DatePicker").DatePickerColumnType[]>;
+        default: () => string[];
     };
-    modelValue: DateConstructor;
     minDate: {
         type: DateConstructor;
         default: () => Date;
@@ -97,16 +101,24 @@ declare const _default: import("vue").DefineComponent<{
     onCancel?: ((...args: any[]) => any) | undefined;
     onConfirm?: ((...args: any[]) => any) | undefined;
 }, {
-    type: DatetimePickerType;
-    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;
     minDate: Date;
     maxDate: Date;
-}>;
-export default _default;
+    columnsType: import("./DatePicker").DatePickerColumnType[];
+}>>;
+export default DatePicker;
+export type { DatePickerProps };
+export type { DatePickerColumnType } from './DatePicker';
+declare module 'vue' {
+    interface GlobalComponents {
+        VanDatePicker: typeof DatePicker;
+    }
+}

package/es/date-picker/index.js

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