yc-design-vue 2.2.2 → 2.2.3

package/es/DatePicker/component/PickerPanel.vue3.js

@@ -0,0 +1,5 @@
+import _sfc_main from "./PickerPanel.vue.js";
+/* empty css                 */
+export {
+  _sfc_main as default
+};

package/es/DatePicker/hooks/useContext.d.ts

@@ -0,0 +1,19 @@
+import { Ref } from 'vue';
+import { RecordType } from '../../_shared/type';
+import { DatePickerValue } from '../type';
+export interface PickerInputContext {
+    props: RecordType;
+    computedVisible: Ref<boolean>;
+    formatValue: Ref<string>;
+    showClearBtn: Ref<boolean>;
+    onClear: () => void;
+}
+export default function usePickerInputContext(): {
+    provide: (context: {
+        computedValue: Ref<DatePickerValue | DatePickerValue[]>;
+        computedVisible: Ref<boolean>;
+        formatValue: Ref<string>;
+        emits: (...args: any) => void;
+    }, props: RecordType) => void;
+    inject: () => PickerInputContext;
+};

package/es/DatePicker/hooks/useContext.js

@@ -0,0 +1,37 @@
+import { toRefs, provide, computed, inject, ref } from "vue";
+const PICKER_TRIGGER_CONTEXT = "picker--context";
+function usePickerInputContext() {
+  const provide$1 = (context, props) => {
+    const { computedVisible, computedValue, formatValue, emits } = context;
+    const { allowClear, disabled } = toRefs(props);
+    provide(PICKER_TRIGGER_CONTEXT, {
+      computedVisible,
+      formatValue,
+      props,
+      showClearBtn: computed(() => {
+        return !!computedValue.value && allowClear.value && !disabled.value;
+      }),
+      onClear: () => {
+        computedValue.value = "";
+        emits("clear");
+      }
+    });
+  };
+  const inject$1 = () => {
+    return inject(PICKER_TRIGGER_CONTEXT, {
+      computedVisible: ref(false),
+      formatValue: ref(""),
+      showClearBtn: ref(false),
+      props: ref({}),
+      onClear: () => {
+      }
+    });
+  };
+  return {
+    provide: provide$1,
+    inject: inject$1
+  };
+}
+export {
+  usePickerInputContext as default
+};

package/es/DatePicker/hooks/userPicker.d.ts

@@ -0,0 +1,44 @@
+import { BasePickerEmits, DatePickerValue, DayStartOfWeek, ShortcutType } from '../type';
+import { RecordType } from '../../_shared/type';
+export type YearData = {
+    label: string;
+    value: Date;
+};
+export interface DayData {
+    label: string;
+    value: Date;
+}
+export interface WeekData {
+    label: number;
+    value: Date;
+    time: DayData[];
+}
+export default function usePicker(params: {
+    props: RecordType;
+    emits: BasePickerEmits;
+}): {
+    formatValue: import('vue').ComputedRef<string>;
+    computedValue: import('vue').WritableComputedRef<DatePickerValue, DatePickerValue>;
+    computedVisible: import('vue').WritableComputedRef<boolean, boolean>;
+    computedPickerValue: import('vue').WritableComputedRef<DatePickerValue, DatePickerValue>;
+    dayStartOfWeek: import('vue').Ref<any, any>;
+    locale: import('vue').Ref<any, any>;
+    abbreviation: import('vue').Ref<any, any>;
+    showYearPicker: import('vue').Ref<boolean, boolean>;
+    showMonthPicker: import('vue').Ref<boolean, boolean>;
+    curMonth: import('vue').Ref<number, number>;
+    curYear: import('vue').Ref<number, number>;
+    DefinePanel: import('@vueuse/core').DefineTemplateComponent<Record<string, any>, Record<"default", undefined>>;
+    ReusePanel: import('@vueuse/core').ReuseTemplateComponent<Record<string, any>, Record<"default", undefined>>;
+    t: (key: string, ...args: any[]) => string;
+    getDateFromFormat: (val: DatePickerValue) => Date | "";
+    getFormatFromDate: (val: Date) => string | number | Date;
+    getRangeOfYear: (curYear: number) => {
+        range: YearData[][];
+        startYear: number;
+    };
+    getWeeksOfMonth: (year: number, month: number, startOfWeek?: DayStartOfWeek) => WeekData[];
+    handleSelect: (date: Date) => void;
+    handleConfirm: () => Promise<void>;
+    handleShortcut: (shortcut: ShortcutType, hover: boolean) => void;
+};

package/es/DatePicker/hooks/userPicker.js

@@ -0,0 +1,221 @@
+import { toRefs, computed, ref, watch } from "vue";
+import { createReusableTemplate } from "../../node_modules/@vueuse/core/index.js";
+import "../../node_modules/b-tween/dist/b-tween.es.js";
+import dayjs from "../../node_modules/dayjs/dayjs.min.js";
+import "../../node_modules/tinycolor2/esm/tinycolor.js";
+import "../../node_modules/dayjs/plugin/duration.js";
+import "../../node_modules/dayjs/plugin/toObject.js";
+import "../../node_modules/dayjs/plugin/isSameOrAfter.js";
+import "../../node_modules/dayjs/plugin/isSameOrBefore.js";
+import { sleep } from "../../_shared/utils/dom.js";
+import { isUndefined, isString } from "../../_shared/utils/is.js";
+import { useControlValue } from "../../_shared/utils/hooks.js";
+import { useI18n } from "../../_shared/utils/locale.js";
+import "../../_shared/utils/time.js";
+import usePickerInputContext from "./useContext.js";
+import isoWeek from "../../node_modules/dayjs/plugin/isoWeek.js";
+dayjs.extend(isoWeek);
+function usePicker(params) {
+  const { props, emits } = params;
+  const {
+    modelValue,
+    defaultValue,
+    popupVisible,
+    defaultPopupVisible,
+    pickerValue,
+    defaultPickerValue,
+    format,
+    valueFormat,
+    dayStartOfWeek,
+    showConfirmBtn,
+    locale,
+    abbreviation
+  } = toRefs(props);
+  const computedValue = useControlValue(
+    modelValue,
+    defaultValue.value,
+    (val, controlValue) => {
+      const date = getFormatFromDate(val);
+      controlValue.value = date;
+      emits("update:modelValue", date);
+    }
+  );
+  const computedVisible = useControlValue(
+    popupVisible,
+    defaultPopupVisible.value,
+    (val) => {
+      emits("popup-visible-change", val);
+      emits("update:popupVisible", val);
+    }
+  );
+  const computedPickerValue = useControlValue(
+    pickerValue,
+    defaultPickerValue.value,
+    (val) => {
+      emits("update:pickerValue", val);
+    }
+  );
+  const formatValue = computed(() => {
+    const date = getDateFromFormat(computedValue.value);
+    if (!date) return "";
+    return format.value && computedValue.value ? dayjs(date).format(format.value) : computedValue.value;
+  });
+  const { define: DefinePanel, reuse: ReusePanel } = createReusableTemplate();
+  const { t } = useI18n();
+  let oldDate;
+  let selectDate;
+  let isConfirm = false;
+  const curYear = ref(0);
+  const curMonth = ref(0);
+  const showYearPicker = ref(false);
+  const showMonthPicker = ref(false);
+  watch(
+    () => computedVisible.value,
+    (val) => {
+      if (val) {
+        isConfirm = false;
+        oldDate = computedValue.value ? getDateFromFormat(computedValue.value) : computedValue.value;
+      } else {
+        showYearPicker.value = false;
+        showMonthPicker.value = false;
+        if (!showConfirmBtn.value || isConfirm || isUndefined(oldDate)) return;
+        computedValue.value = oldDate;
+      }
+    },
+    {
+      immediate: true
+    }
+  );
+  const handleShortcut = (shortcut, hover) => {
+    if (!hover) {
+      emits("select-shortcut", shortcut);
+    }
+    if (shortcut.value) {
+      computedValue.value = shortcut.value;
+    }
+    if (hover) return;
+    isConfirm = true;
+    computedVisible.value = false;
+  };
+  const handleSelect = (date) => {
+    computedValue.value = date;
+    selectDate = date;
+    const dateString = dayjs(date).format("YYYY-MM-DD");
+    emits("select", computedValue.value, date, dateString);
+    if (showConfirmBtn.value) return;
+    emits("change", computedValue.value, date, dateString);
+  };
+  const handleConfirm = async () => {
+    isConfirm = true;
+    const dateString = dayjs(selectDate).format("YYYY-MM-DD");
+    emits("change", computedValue.value, selectDate, dateString);
+    emits("ok", computedValue.value, selectDate, dateString);
+    await sleep(0);
+    computedVisible.value = false;
+  };
+  const getDateFromFormat = (val) => {
+    if (!val) return "";
+    let date;
+    if (["timestamp", "Date"].includes(valueFormat.value) || !isString(val)) {
+      date = dayjs(val);
+    } else {
+      date = dayjs(val, valueFormat.value);
+    }
+    if (!date.isValid()) return "";
+    return date.toDate();
+  };
+  const getFormatFromDate = (val) => {
+    if (!val || !dayjs(val).isValid()) return "";
+    const date = val;
+    if (valueFormat.value == "timestamp") {
+      return dayjs(date).valueOf();
+    }
+    if (valueFormat.value != "Date") {
+      return dayjs(date).format(valueFormat.value);
+    }
+    return date;
+  };
+  const getRangeOfYear = (curYear2) => {
+    const decadeStartYear = Math.floor(curYear2 / 10) * 10;
+    const startYear = decadeStartYear - 1;
+    const flatYearArray = Array.from({ length: 12 }, (_, i) => {
+      const year = startYear + i;
+      return {
+        label: year.toString(),
+        value: dayjs().year(year).startOf("year").toDate()
+      };
+    });
+    const grid = [];
+    const columns = 3;
+    for (let i = 0; i < flatYearArray.length; i += columns) {
+      const chunk = flatYearArray.slice(i, i + columns);
+      grid.push(chunk);
+    }
+    return {
+      range: grid,
+      startYear: decadeStartYear
+    };
+  };
+  const getWeeksOfMonth = (year, month, startOfWeek = dayStartOfWeek.value) => {
+    const firstDayOfMonth = dayjs(new Date(year, month, 1));
+    const weekData = [];
+    const dayOfWeekOfFirst = firstDayOfMonth.toDate().getDay();
+    const offset = (dayOfWeekOfFirst - startOfWeek + 7) % 7;
+    let currentDay = firstDayOfMonth.subtract(offset, "day");
+    for (let i = 0; i < 6; i++) {
+      const daysOfWeek = [];
+      const weekRowStartDate = currentDay;
+      for (let j = 0; j < 7; j++) {
+        daysOfWeek.push({
+          label: String(currentDay.date()),
+          value: currentDay.toDate()
+        });
+        currentDay = currentDay.add(1, "day");
+      }
+      const representativeDayOfWeek = weekRowStartDate.add(3, "day");
+      const correctIsoWeek = representativeDayOfWeek.isoWeek();
+      const mondayOfCorrectIsoWeek = representativeDayOfWeek.startOf("isoWeek").toDate();
+      weekData.push({
+        label: correctIsoWeek,
+        value: mondayOfCorrectIsoWeek,
+        time: daysOfWeek
+      });
+    }
+    return weekData;
+  };
+  usePickerInputContext().provide(
+    {
+      computedValue,
+      computedVisible,
+      formatValue,
+      emits
+    },
+    props
+  );
+  return {
+    formatValue,
+    computedValue,
+    computedVisible,
+    computedPickerValue,
+    dayStartOfWeek,
+    locale,
+    abbreviation,
+    showYearPicker,
+    showMonthPicker,
+    curMonth,
+    curYear,
+    DefinePanel,
+    ReusePanel,
+    t,
+    getDateFromFormat,
+    getFormatFromDate,
+    getRangeOfYear,
+    getWeeksOfMonth,
+    handleSelect,
+    handleConfirm,
+    handleShortcut
+  };
+}
+export {
+  usePicker as default
+};

package/es/DatePicker/index.css

@@ -0,0 +1,3 @@
+.yc-panel-year,.yc-panel-month,.yc-panel-week{width:265px;display:flex;flex-direction:column}.yc-panel-year .yc-picker-header,.yc-panel-month .yc-picker-header,.yc-panel-week .yc-picker-header{padding:8px 16px;border-bottom:1px solid var(--color-neutral-3);display:flex}.yc-panel-year .yc-picker-header .yc-picker-header-icon,.yc-panel-month .yc-picker-header .yc-picker-header-icon,.yc-panel-week .yc-picker-header .yc-picker-header-icon{cursor:pointer;width:24px;height:24px;margin-right:2px;margin-left:2px;color:var(--color-text-2);font-size:12px;line-height:24px;text-align:center;background-color:var(--color-bg-popup);border-radius:50%;transition:all .1s cubic-bezier(0, 0, 1, 1);user-select:none}.yc-panel-year .yc-picker-header .yc-picker-header-icon:hover,.yc-panel-month .yc-picker-header .yc-picker-header-icon:hover,.yc-panel-week .yc-picker-header .yc-picker-header-icon:hover{background-color:var(--color-fill-3)}.yc-panel-year .yc-picker-header .yc-picker-header-title,.yc-panel-month .yc-picker-header .yc-picker-header-title,.yc-panel-week .yc-picker-header .yc-picker-header-title{flex:1;color:var(--color-text-1);font-size:14px;line-height:24px;display:flex;justify-content:center;align-items:center}.yc-panel-year .yc-picker-header .yc-picker-header-title .yc-picker-header-label,.yc-panel-month .yc-picker-header .yc-picker-header-title .yc-picker-header-label,.yc-panel-week .yc-picker-header .yc-picker-header-title .yc-picker-header-label{cursor:pointer;padding:2px;border-radius:2px;transition:all .1s}.yc-panel-year .yc-picker-header .yc-picker-header-title .yc-picker-header-label:hover,.yc-panel-month .yc-picker-header .yc-picker-header-title .yc-picker-header-label:hover,.yc-panel-week .yc-picker-header .yc-picker-header-title .yc-picker-header-label:hover{background-color:var(--color-fill-3)}.yc-panel-year .yc-picker-body,.yc-panel-month .yc-picker-body,.yc-panel-week .yc-picker-body{padding:14px 16px}.yc-panel-year .yc-picker-body .yc-picker-row,.yc-panel-month .yc-picker-body .yc-picker-row,.yc-panel-week .yc-picker-body .yc-picker-row{padding:2px 0;display:flex}.yc-panel-week{width:298px}.yc-panel-week .yc-picker-week-list{width:100%;padding:14px 16px 0 16px;display:flex}.yc-panel-week .yc-picker-week-list .yc-picker-week-list-item{flex:1;height:32px;padding:0;color:#7d7d7f;font-weight:400;display:flex;justify-content:center;align-items:center}.yc-panel-week .yc-picker-body .yc-picker-week-row:not(.yc-picker-week-row-selected):not(
+          .yc-picker-week-row-disabled
+        ):hover .yc-picker-cell:not(:first-child) .yc-picker-date .yc-picker-date-value{background-color:var(--color-fill-3)}.yc-panel-week .yc-picker-body .yc-picker-week-row .yc-picker-cell .yc-picker-date{padding-left:0;padding-right:0}.yc-panel-week .yc-picker-body .yc-picker-week-row .yc-picker-cell .yc-picker-date .yc-picker-date-value{border-radius:0}.yc-panel-week .yc-picker-body .yc-picker-week-row .yc-week-picker-cell-first .yc-picker-date{border-top-left-radius:24px;border-bottom-left-radius:24px}.yc-panel-week .yc-picker-body .yc-picker-week-row .yc-week-picker-cell-first .yc-picker-date .yc-picker-date-value{border-top-left-radius:24px;border-bottom-left-radius:24px}.yc-panel-week .yc-picker-body .yc-picker-week-row .yc-week-picker-cell-last .yc-picker-date{border-top-right-radius:24px;border-bottom-right-radius:24px}.yc-panel-week .yc-picker-body .yc-picker-week-row .yc-week-picker-cell-last .yc-picker-date .yc-picker-date-value{border-top-right-radius:24px;border-bottom-right-radius:24px}.yc-panel-week .yc-picker-body .yc-picker-week-row-selected .yc-picker-cell:not(:first-child) .yc-picker-date .yc-picker-date-value{background-color:rgb(var(--primary-6));color:var(--color-white);transition:background-color .1s cubic-bezier(0, 0, 1, 1)}.yc-panel-week .yc-picker-body .yc-picker-week-row-selected.yc-picker-week-row-disabled .yc-picker-cell:not(:first-child) .yc-picker-date .yc-picker-date-value{background-color:var(--color-link-light-3);color:var(--color-white)}.yc-panel-week .yc-picker-body .yc-picker-week-row-disabled .yc-picker-cell:not(:first-child) .yc-picker-date{cursor:not-allowed;background-color:var(--color-fill-1)}.yc-panel-week .yc-picker-body .yc-picker-week-row-disabled .yc-picker-cell:not(:first-child) .yc-picker-date .yc-picker-date-value{cursor:not-allowed;background-color:transparent;color:var(--color-text-4)}.yc-picker-container{overflow:hidden;min-height:60px;background-color:var(--color-bg-popup);border:1px solid var(--color-neutral-3);border-radius:var(--border-radius-medium);box-shadow:0 2px 5px #0000001a;display:flex}.yc-picker-container .yc-picker-panel-wrapper .yc-picker-footer{width:min-content;min-width:100%}.yc-picker-container .yc-picker-panel-wrapper .yc-picker-footer .yc-picker-footer-extra-wrapper{padding:8px 24px;border-top:1px solid var(--color-neutral-3);color:var(--color-text-1);font-size:12px}.yc-picker-container .yc-picker-panel-wrapper .yc-picker-footer .yc-picker-footer-btn-wrapper{padding:8px;border-top:1px solid var(--color-neutral-3);display:flex;align-items:center;justify-content:flex-end;gap:10px}.yc-picker-container .yc-picker-shortcuts{overflow-y:auto;padding:10px 8px;flex:1;display:flex;flex-direction:column;gap:5px}.yc-picker-container .yc-picker-shortcuts.yc-picker-shortcuts-left{border-right:1px solid var(--color-neutral-3)}.yc-picker-container .yc-picker-shortcuts.yc-picker-shortcuts-right{border-left:1px solid var(--color-neutral-3)}.yc-picker-container .yc-picker-shortcuts.yc-picker-shortcuts-bottom{padding:0;overflow:hidden;flex-direction:row;flex-wrap:wrap;gap:5px 10px}.yc-picker-container-shortcuts-right{flex-direction:row-reverse}.yc-picker-container-shortcuts-bottom{flex-direction:row-reverse}.yc-picker-container-shortcuts-bottom .yc-picker-panel-wrapper .yc-picker-footer .yc-picker-footer-btn-wrapper{justify-content:space-between}.yc-picker-cell{flex:1}.yc-picker-cell .yc-picker-date{cursor:pointer;width:100%;height:100%;padding:4px;display:flex;justify-content:center}.yc-picker-cell .yc-picker-date .yc-picker-date-value{cursor:pointer;height:24px;width:100%;border-radius:24px;color:var(--color-text-4);font-size:14px;line-height:24px;text-align:center}.yc-picker-cell-in-view .yc-picker-date .yc-picker-date-value{color:var(--color-text-1);font-weight:500}.yc-picker-cell-today{position:relative}.yc-picker-cell-today:after{position:absolute;bottom:-2px;left:50%;display:block;width:4px;height:4px;margin-left:-2px;background-color:rgb(var(--primary-6));border-radius:50%;content:''}.yc-picker-cell-selected .yc-picker-date .yc-picker-date-value{color:var(--color-white);background-color:rgb(var(--primary-6));transition:background-color .1s cubic-bezier(0, 0, 1, 1)}.yc-picker-cell-disabled .yc-picker-date{background-color:var(--color-fill-1);cursor:not-allowed}.yc-picker-cell-disabled .yc-picker-date .yc-picker-date-value{color:var(--color-text-4);background-color:transparent;cursor:not-allowed}.yc-picker-cell-hoverable.yc-picker-cell-in-view:not(.yc-picker-cell-selected):not(.yc-picker-cell-disabled) .yc-picker-date .yc-picker-date-value:hover{color:var(--color-text-1);background-color:var(--color-fill-3)}.yc-picker-allow-clear:not(.yc-input-disabled):hover .yc-icon-button{display:flex}.yc-picker-allow-clear:not(.yc-input-disabled):hover .yc-picker-suffix-icon{display:none}.yc-picker-allow-clear .yc-icon-button{font-size:16px;display:none}.yc-picker-allow-clear .yc-picker-suffix-icon{font-size:16px;height:100%;display:flex;justify-content:center;align-items:center}

package/es/DatePicker/index.d.ts

@@ -0,0 +1,38 @@
+import { App } from 'vue';
+import { default as _DatePicker } from './YcDatePicker.vue';
+import { default as _RangePicker } from './PickerRange.vue';
+import { default as _YearPicker } from './YcYearPicker.vue';
+import { default as _MonthPicker } from './YcMonthPicker.vue';
+import { default as _WeekPicker } from './YcWeekPicker.vue';
+export type DatePickerInstance = InstanceType<typeof _DatePicker>;
+export type RangePickerInstance = InstanceType<typeof _RangePicker>;
+export type YearPickerInstance = InstanceType<typeof _YearPicker>;
+export type MonthPickerInstance = InstanceType<typeof _MonthPicker>;
+export type WeekPickerInstance = InstanceType<typeof _WeekPicker>;
+export * from './type';
+declare const DatePicker: {
+    new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {}, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, HTMLDivElement, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, {}>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import('vue').ComponentOptionsBase<Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & {
+    install: (app: App) => void;
+};
+export { _RangePicker as RangePicker, _YearPicker as YearPicker, _MonthPicker as MonthPicker, _WeekPicker as WeekPicker, };
+declare module 'vue' {
+    interface GlobalComponents {
+        YcDatePicker: typeof DatePicker;
+        YcRangePicker: typeof _RangePicker;
+        YcYearPicker: typeof _YearPicker;
+        YcMonthPicker: typeof _MonthPicker;
+        YcWeekPicker: typeof _WeekPicker;
+    }
+}
+export default DatePicker;

package/es/DatePicker/index.js

@@ -0,0 +1,23 @@
+import _sfc_main from "./YcDatePicker.vue.js";
+import _sfc_main$1 from "./PickerRange.vue.js";
+import _sfc_main$2 from "./YcYearPicker.vue.js";
+/* empty css                  */
+import _sfc_main$3 from "./YcMonthPicker.vue.js";
+/* empty css                   */
+import _WeekPicker from "./YcWeekPicker.vue.js";
+const DatePicker = Object.assign(_sfc_main, {
+  install: (app) => {
+    app.component("Yc" + _sfc_main.name, _sfc_main);
+    app.component("Yc" + _sfc_main$1.name, _sfc_main$1);
+    app.component("Yc" + _sfc_main$2.name, _sfc_main$2);
+    app.component("Yc" + _sfc_main$3.name, _sfc_main$3);
+    app.component("Yc" + _WeekPicker.name, _WeekPicker);
+  }
+});
+export {
+  _sfc_main$3 as MonthPicker,
+  _sfc_main$1 as RangePicker,
+  _WeekPicker as WeekPicker,
+  _sfc_main$2 as YearPicker,
+  DatePicker as default
+};

package/es/DatePicker/type.d.ts

@@ -0,0 +1,104 @@
+import { VNode } from 'vue';
+import { PopupContainer, Position, Size } from '../_shared/type';
+import { TriggerProps } from '../Trigger';
+import { TimePickerProps } from '../TimePicker';
+export interface BasePickerProps {
+    locale?: Record<string, any>;
+    hideTrigger?: boolean;
+    allowClear?: boolean;
+    readonly?: boolean;
+    error?: boolean;
+    size?: Size;
+    shortcuts?: ShortcutType[];
+    shortcutsPosition?: ShortcutsPosition;
+    position?: DatePickerPosition;
+    popupVisible?: boolean;
+    defaultPopupVisible?: boolean;
+    triggerProps?: TriggerProps;
+    unmountOnClose?: boolean;
+    placeholder?: string;
+    disabled?: boolean;
+    disabledDate?: DisabledDate;
+    disabledTime?: DisabledTime;
+    pickerValue?: DatePickerValue;
+    defaultPickerValue?: DatePickerValue;
+    popupContainer?: PopupContainer;
+    valueFormat?: ValueFormat;
+    format?: string;
+    previewShortcut?: boolean;
+    showConfirmBtn?: boolean;
+    disabledInput?: boolean;
+    abbreviation?: boolean;
+}
+export interface BasePickerEmits {
+    (e: 'update:popupVisible', value: boolean): void;
+    (e: 'update:pickerValue', value: DatePickerValue): void;
+    (e: 'change', value: DatePickerValue, date: Date, dateString: string): void;
+    (e: 'select', value: DatePickerValue, date: Date, dateString: string): void;
+    (e: 'ok', value: DatePickerValue, date: Date, dateString: string): void;
+    (e: 'picker-value-change', value: DatePickerValue, date: Date, dateString: string): void;
+    (e: 'popup-visible-change', visible: boolean): void;
+    (e: 'clear'): void;
+    (e: 'select-shortcut', shortcut: ShortcutType): void;
+}
+export interface BasePickerSlots {
+    prefix?: () => VNode[];
+    'suffix-icon'?: () => VNode[];
+    'icon-next-double'?: () => VNode[];
+    'icon-prev-double'?: () => VNode[];
+    'icon-next'?: () => VNode[];
+    'icon-prev'?: () => VNode[];
+    cell?: (scope: {
+        date: Date;
+    }) => VNode[];
+    extra?: () => VNode[];
+}
+export interface YearPickerProps extends BasePickerProps {
+    modelValue?: DatePickerValue;
+    defaultValue?: DatePickerValue;
+}
+export interface YearPickerEmits extends BasePickerEmits {
+    (e: 'update:modelValue', value: DatePickerValue): void;
+}
+export interface MonthPickerProps extends BasePickerProps {
+    modelValue?: DatePickerValue;
+    defaultValue?: DatePickerValue;
+}
+export interface MonthPickerEmits extends BasePickerEmits {
+    (e: 'update:modelValue', value: DatePickerValue): void;
+}
+export interface WeekPickerProps extends BasePickerProps {
+    modelValue?: DatePickerValue;
+    defaultValue?: DatePickerValue;
+    dayStartOfWeek?: DayStartOfWeek;
+}
+export interface WeekPickerEmits extends BasePickerEmits {
+    (e: 'update:modelValue', value: DatePickerValue): void;
+}
+export interface DatePickerProps extends BasePickerProps {
+    modelValue?: DatePickerValue;
+    defaultValue?: DatePickerValue;
+    dayStartOfWeek?: DayStartOfWeek;
+    showTime?: boolean;
+    timePickerProps?: TimePickerProps;
+    showNowBtn?: boolean;
+}
+export interface DatePickerEmits extends BasePickerEmits {
+    (e: 'update:modelValue', value: DatePickerValue): void;
+}
+export type DatePickerValue = Date | string | number;
+export type DatePickerPosition = 'top' | 'tl' | 'tr' | 'bottom' | 'bl' | 'br';
+export type DayStartOfWeek = 0 | 1 | 2 | 3 | 4 | 5 | 6;
+export type ValueFormat = 'timestamp' | 'Date' | string;
+export type ShortcutsPosition = Exclude<Position, 'top'>;
+export type DisabledDate = (current: Date) => boolean;
+export type DisabledTime = (current: Date) => {
+    disabledHours?: () => number[];
+    disabledMinutes?: () => number[];
+    disabledSeconds?: () => number[];
+};
+export type ShortcutType = {
+    label: string | number | (() => VNode);
+    value: Date | Date[] | (() => Date | Date[]);
+    format: string;
+};

package/es/Drawer/DrawerService.vue.js

@@ -17,7 +17,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "DrawerService",
   props: {
     placement: { default: "right" },
-    title: { type: [String, Array, Function], default: "" },
+    title: { type: [String, Number, Array, Function], default: "" },
     mask: { type: Boolean, default: true },
     maskClosable: { type: Boolean, default: true },
     closable: { type: Boolean, default: true },

package/es/Grid/hooks/useContext.d.ts

@@ -9,11 +9,15 @@ export type SpanMap = Map<string, {
 export type GutterValue = GridRowGutter | [GridRowGutter, GridRowGutter];
 export default function useGridContext(): {
     provide: (props: RecordType) => {
+        rowGap: import('vue').ComputedRef<string | number | undefined>;
         breakpoint: Ref<BreakpointName, BreakpointName>;
+        gutter: import('vue').ComputedRef<number[]>;
+        div: Ref<any, any>;
+        spanMap: any;
         cols: import('vue').ComputedRef<number>;
         colGap: import('vue').ComputedRef<number>;
-        rowGap: import('vue').ComputedRef<string | number | undefined>;
-        gutter: import('vue').ComputedRef<number[]>;
+        collapsed: Ref<any, any>;
+        collapsedRows: Ref<any, any>;
     };
     inject: () => {
         collectSpan: (span: Ref<number>, suffix: Ref<boolean>) => {

package/es/Grid/hooks/useContext.js

@@ -40,7 +40,7 @@ function useGridContext() {
       ) : [getBreakpointValue(breakpoint.value, _gutter.value, 0), 0];
       return result;
     });
-    provide(GRID_CONTEXT_KEY, {
+    const context = {
       breakpoint,
       gutter,
       div,
@@ -49,13 +49,11 @@ function useGridContext() {
       colGap,
       collapsed,
       collapsedRows
-    });
+    };
+    provide(GRID_CONTEXT_KEY, context);
     return {
-      breakpoint,
-      cols,
-      colGap,
-      rowGap,
-      gutter
+      ...context,
+      rowGap
     };
   };
   const inject$1 = () => {

package/es/Menu/hooks/useContext.d.ts

@@ -39,12 +39,27 @@ export declare function isMenuItemActive(menuTree: MenuTreeNode[], currentPath:
 export declare const getPopupMaxHeight: (popupMaxHeight: PopupMaxHeight) => number | undefined;
 export default function useMenuContext(): {
     provide: (props: RecordType, emits: MenuEmits, menuRef: Ref<HTMLDivElement | undefined>) => {
-        theme: import('vue').ComputedRef<import('../../_shared/type').Theme>;
-        computedCollapsed: import('vue').WritableComputedRef<boolean, boolean>;
         breakpoint: Ref<import('../../_shared/type').BreakpointName, import('../../_shared/type').BreakpointName>;
         collapsedWidth: import('vue').ComputedRef<string>;
+        computedSelectedKeys: import('vue').WritableComputedRef<string, string>;
+        computedOpenKeys: import('vue').WritableComputedRef<string[], string[]>;
+        computedCollapsed: import('vue').WritableComputedRef<boolean, boolean>;
+        levelIndent: Ref<number, number>;
+        accordion: Ref<boolean, boolean>;
+        autoOpen: Ref<boolean, boolean>;
+        triggerProps: Ref<TriggerProps, TriggerProps>;
+        tooltipProps: Ref<TooltipProps, TooltipProps>;
+        mode: Ref<Direction, Direction>;
+        autoOpenSelected: Ref<boolean, boolean>;
+        popupMaxHeight: import('vue').ComputedRef<number | undefined>;
+        autoScrollIntoView: Ref<boolean, boolean>;
+        scrollConfig: Ref<ScrollIntoViewOptions, ScrollIntoViewOptions>;
+        theme: import('vue').ComputedRef<import('../../_shared/type').Theme>;
+        menuTreeNodes: import('vue').ComputedRef<MenuTreeNode[]>;
         menuTree: import('vue').ComputedRef<MenuTreeNode[]>;
         max: Ref<number, number>;
+        menuItemWidths: Ref<number[], number[]>;
+        emits: MenuEmits;
     };
     inject: () => MenuContext;
 };

package/es/Menu/hooks/useContext.js

@@ -193,7 +193,7 @@ function useMenuContext() {
       menuTree,
       mode
     });
-    provide(MENU_CONTEXT_KEY, {
+    const context = {
       computedSelectedKeys,
       computedOpenKeys,
       computedCollapsed,
@@ -213,14 +213,12 @@ function useMenuContext() {
       max,
       menuItemWidths,
       emits
-    });
+    };
+    provide(MENU_CONTEXT_KEY, context);
     return {
-      theme,
-      computedCollapsed,
+      ...context,
       breakpoint,
-      collapsedWidth: computed(() => valueToPx(collapsedWidth.value)),
-      menuTree,
-      max
+      collapsedWidth: computed(() => valueToPx(collapsedWidth.value))
     };
   };
   const inject$1 = () => {

package/es/Message/Message.vue.js

@@ -28,7 +28,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "Message",
   props: {
     type: { default: "info" },
-    content: { type: [String, Array, Function], default: "" },
+    content: { type: [String, Number, Array, Function], default: "" },
     id: { default: "" },
     icon: { type: Function, default: void 0 },
     showIcon: { type: Boolean, default: true },

package/es/Modal/ModalService.vue.js

@@ -25,7 +25,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     width: { default: 520 },
     top: { default: 100 },
     mask: { type: Boolean, default: true },
-    title: { type: [String, Array, Function], default: "" },
+    title: { type: [String, Number, Array, Function], default: "" },
     titleAlign: { default: "center" },
     alignCenter: { type: Boolean, default: true },
     unmountOnClose: { type: Boolean, default: false },
@@ -67,7 +67,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     onBeforeOk: { type: Function, default: () => {
       return true;
     } },
-    content: { type: [String, Array, Function], default: "" },
+    content: { type: [String, Number, Array, Function], default: "" },
     type: {},
     onOk: {},
     onCancel: {},

package/es/Notification/Notification.vue.js

@@ -42,8 +42,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "Notification",
   props: {
     type: { default: "info" },
-    content: { type: [String, Array, Function], default: "" },
-    title: { type: [String, Array, Function], default: "" },
+    content: { type: [String, Number, Array, Function], default: "" },
+    title: { type: [String, Number, Array, Function], default: "" },
     icon: { type: Function, default: void 0 },
     id: { default: "" },
     style: { default: () => {