feat: initial commit - Phase 1 & 2 core features

This commit is contained in:
hiderfong
2026-04-22 17:07:33 +08:00
commit 1773bda06b
25005 changed files with 6252106 additions and 0 deletions
+10
View File
@@ -0,0 +1,10 @@
import { SFCWithInstall } from "../../utils/vue/typescript.js";
import "../../utils/index.js";
import { CalendarDateType, CalendarEmits, CalendarProps, CalendarPropsPublic, calendarEmits, calendarProps } from "./src/calendar.js";
import { _default } from "./src/calendar.vue.js";
import { CalendarDateTableInstance, CalendarInstance, DateTableInstance } from "./src/instance.js";
//#region ../../packages/components/calendar/index.d.ts
declare const ElCalendar: SFCWithInstall<typeof _default>;
//#endregion
export { type CalendarDateTableInstance, CalendarDateType, CalendarEmits, type CalendarInstance, CalendarProps, CalendarPropsPublic, type DateTableInstance, ElCalendar, ElCalendar as default, calendarEmits, calendarProps };
+10
View File
@@ -0,0 +1,10 @@
import { withInstall } from "../../utils/vue/install.mjs";
import { calendarEmits, calendarProps } from "./src/calendar.mjs";
import calendar_default from "./src/calendar2.mjs";
//#region ../../packages/components/calendar/index.ts
const ElCalendar = withInstall(calendar_default);
//#endregion
export { ElCalendar, ElCalendar as default, calendarEmits, calendarProps };
//# sourceMappingURL=index.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"index.mjs","names":["Calendar"],"sources":["../../../../../packages/components/calendar/index.ts"],"sourcesContent":["import { withInstall } from '@element-plus/utils'\nimport Calendar from './src/calendar.vue'\n\nimport type { SFCWithInstall } from '@element-plus/utils'\n\nexport const ElCalendar: SFCWithInstall<typeof Calendar> = withInstall(Calendar)\nexport default ElCalendar\n\nexport * from './src/calendar'\nexport type {\n CalendarDateTableInstance,\n DateTableInstance,\n CalendarInstance,\n} from './src/instance'\n"],"mappings":";;;;;AAKA,MAAa,aAA8C,YAAYA,iBAAS"}
@@ -0,0 +1,61 @@
import { EpPropFinalized } from "../../../utils/vue/props/types.js";
import "../../../utils/index.js";
import * as vue from "vue";
import { ExtractPublicPropTypes } from "vue";
//#region ../../packages/components/calendar/src/calendar.d.ts
type CalendarDateType = 'prev-month' | 'next-month' | 'prev-year' | 'next-year' | 'today';
interface CalendarProps {
/**
* @description binding value
*/
modelValue?: Date;
/**
* @description time range, including start time and end time.
* Start time must be start day of week, end time must be end day of week, the time span cannot exceed two months.
*/
range?: [Date, Date];
/**
* @description type of the controller for the Calendar header
*/
controllerType?: 'button' | 'select';
/**
* @description format label when `controller-type` is 'select'
*/
formatter?: (value: number, type: 'year' | 'month') => string | number;
}
/**
* @deprecated Removed after 3.0.0, Use `CalendarProps` instead.
*/
declare const calendarProps: {
readonly modelValue: {
readonly type: vue.PropType<Date>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly range: {
readonly type: vue.PropType<[Date, Date]>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly controllerType: EpPropFinalized<StringConstructor, "select" | "button", unknown, "button", boolean>;
readonly formatter: {
readonly type: vue.PropType<(value: number, type: "year" | "month") => string | number>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
};
/**
* @deprecated Removed after 3.0.0, Use `CalendarProps` instead.
*/
type CalendarPropsPublic = ExtractPublicPropTypes<typeof calendarProps>;
declare const calendarEmits: {
"update:modelValue": (value: Date) => boolean;
input: (value: Date) => boolean;
};
type CalendarEmits = typeof calendarEmits;
//#endregion
export { CalendarDateType, CalendarEmits, CalendarProps, CalendarPropsPublic, calendarEmits, calendarProps };
@@ -0,0 +1,30 @@
import { INPUT_EVENT, UPDATE_MODEL_EVENT } from "../../../constants/event.mjs";
import { isArray, isDate } from "../../../utils/types.mjs";
import { buildProps, definePropType } from "../../../utils/vue/props/runtime.mjs";
//#region ../../packages/components/calendar/src/calendar.ts
const isValidRange = (range) => isArray(range) && range.length === 2 && range.every((item) => isDate(item));
/**
* @deprecated Removed after 3.0.0, Use `CalendarProps` instead.
*/
const calendarProps = buildProps({
modelValue: { type: Date },
range: {
type: definePropType(Array),
validator: isValidRange
},
controllerType: {
type: String,
values: ["button", "select"],
default: "button"
},
formatter: { type: definePropType(Function) }
});
const calendarEmits = {
[UPDATE_MODEL_EVENT]: (value) => isDate(value),
[INPUT_EVENT]: (value) => isDate(value)
};
//#endregion
export { calendarEmits, calendarProps };
//# sourceMappingURL=calendar.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"calendar.mjs","names":[],"sources":["../../../../../../packages/components/calendar/src/calendar.ts"],"sourcesContent":["import {\n buildProps,\n definePropType,\n isArray,\n isDate,\n} from '@element-plus/utils'\nimport { INPUT_EVENT, UPDATE_MODEL_EVENT } from '@element-plus/constants'\n\nimport type { ExtractPublicPropTypes } from 'vue'\n\nexport type CalendarDateType =\n | 'prev-month'\n | 'next-month'\n | 'prev-year'\n | 'next-year'\n | 'today'\n\nconst isValidRange = (range: unknown): range is [Date, Date] =>\n isArray(range) && range.length === 2 && range.every((item) => isDate(item))\n\nexport interface CalendarProps {\n /**\n * @description binding value\n */\n modelValue?: Date\n /**\n * @description time range, including start time and end time.\n * Start time must be start day of week, end time must be end day of week, the time span cannot exceed two months.\n */\n range?: [Date, Date]\n /**\n * @description type of the controller for the Calendar header\n */\n controllerType?: 'button' | 'select'\n /**\n * @description format label when `controller-type` is 'select'\n */\n formatter?: (value: number, type: 'year' | 'month') => string | number\n}\n\n/**\n * @deprecated Removed after 3.0.0, Use `CalendarProps` instead.\n */\nexport const calendarProps = buildProps({\n /**\n * @description binding value\n */\n modelValue: {\n type: Date,\n },\n /**\n * @description time range, including start time and end time.\n * Start time must be start day of week, end time must be end day of week, the time span cannot exceed two months.\n */\n range: {\n type: definePropType<[Date, Date]>(Array),\n validator: isValidRange,\n },\n /**\n * @description type of the controller for the Calendar header\n */\n controllerType: {\n type: String,\n values: ['button', 'select'],\n default: 'button',\n },\n /**\n * @description format label when `controller-type` is 'select'\n */\n formatter: {\n type: definePropType<\n (value: number, type: 'year' | 'month') => string | number\n >(Function),\n },\n} as const)\n\n/**\n * @deprecated Removed after 3.0.0, Use `CalendarProps` instead.\n */\nexport type CalendarPropsPublic = ExtractPublicPropTypes<typeof calendarProps>\n\nexport const calendarEmits = {\n [UPDATE_MODEL_EVENT]: (value: Date) => isDate(value),\n [INPUT_EVENT]: (value: Date) => isDate(value),\n}\nexport type CalendarEmits = typeof calendarEmits\n"],"mappings":";;;;;AAiBA,MAAM,gBAAgB,UACpB,QAAQ,MAAM,IAAI,MAAM,WAAW,KAAK,MAAM,OAAO,SAAS,OAAO,KAAK,CAAC;;;;AAyB7E,MAAa,gBAAgB,WAAW;CAItC,YAAY,EACV,MAAM,MACP;CAKD,OAAO;EACL,MAAM,eAA6B,MAAM;EACzC,WAAW;EACZ;CAID,gBAAgB;EACd,MAAM;EACN,QAAQ,CAAC,UAAU,SAAS;EAC5B,SAAS;EACV;CAID,WAAW,EACT,MAAM,eAEJ,SAAS,EACZ;CACF,CAAU;AAOX,MAAa,gBAAgB;EAC1B,sBAAsB,UAAgB,OAAO,MAAM;EACnD,eAAe,UAAgB,OAAO,MAAM;CAC9C"}
@@ -0,0 +1,52 @@
import { CalendarDateType, CalendarProps } from "./calendar.js";
import * as vue from "vue";
import * as dayjs$1 from "dayjs";
//#region ../../packages/components/calendar/src/calendar.vue.d.ts
declare var __VLS_1: {
date: string;
}, __VLS_49: {
data: {
isSelected: boolean;
type: string;
day: string;
date: Date;
};
}, __VLS_60: {
data: {
isSelected: boolean;
type: string;
day: string;
date: Date;
};
};
type __VLS_Slots = {} & {
header?: (props: typeof __VLS_1) => any;
} & {
'date-cell'?: (props: typeof __VLS_49) => any;
} & {
'date-cell'?: (props: typeof __VLS_60) => any;
};
declare const __VLS_base: vue.DefineComponent<CalendarProps, {
/** @description currently selected date */selectedDay: vue.WritableComputedRef<dayjs$1.Dayjs | undefined, dayjs$1.Dayjs | undefined>; /** @description select a specific date */
pickDay: (day: dayjs$1.Dayjs) => void; /** @description select date */
selectDate: (type: CalendarDateType) => void; /** @description Calculate the validate date range according to the start and end dates */
calculateValidatedDateRange: (startDayjs: dayjs$1.Dayjs, endDayjs: dayjs$1.Dayjs) => [dayjs$1.Dayjs, dayjs$1.Dayjs][];
}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
"update:modelValue": (value: Date) => void;
input: (value: Date) => void;
}, string, vue.PublicProps, Readonly<CalendarProps> & Readonly<{
onInput?: ((value: Date) => any) | undefined;
"onUpdate:modelValue"?: ((value: Date) => any) | undefined;
}>, {
controllerType: "button" | "select";
}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
declare const _default: typeof __VLS_export;
type __VLS_WithSlots<T, S> = T & {
new (): {
$slots: S;
};
};
//#endregion
export { _default };
@@ -0,0 +1,115 @@
import { useLocale } from "../../../hooks/use-locale/index.mjs";
import { useNamespace } from "../../../hooks/use-namespace/index.mjs";
import { ElButton, ElButtonGroup } from "../../button/index.mjs";
import { calendarEmits, calendarProps } from "./calendar.mjs";
import date_table_default from "./date-table2.mjs";
import { useCalendar } from "./use-calendar.mjs";
import select_controller_default from "./select-controller2.mjs";
import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, guardReactiveProps, mergeProps, normalizeClass, normalizeProps, openBlock, renderList, renderSlot, toDisplayString, unref, withCtx } from "vue";
//#region ../../packages/components/calendar/src/calendar.vue?vue&type=script&setup=true&lang.ts
const COMPONENT_NAME = "ElCalendar";
var calendar_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
name: COMPONENT_NAME,
__name: "calendar",
props: calendarProps,
emits: calendarEmits,
setup(__props, { expose: __expose, emit: __emit }) {
const ns = useNamespace("calendar");
const { calculateValidatedDateRange, date, pickDay, realSelectedDay, selectDate, validatedRange, handleDateChange } = useCalendar(__props, __emit, COMPONENT_NAME);
const { t } = useLocale();
const i18nDate = computed(() => {
const pickedMonth = `el.datepicker.month${date.value.format("M")}`;
return `${date.value.year()} ${t("el.datepicker.year")} ${t(pickedMonth)}`;
});
__expose({
selectedDay: realSelectedDay,
pickDay,
selectDate,
calculateValidatedDateRange
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", { class: normalizeClass(unref(ns).b()) }, [createElementVNode("div", { class: normalizeClass(unref(ns).e("header")) }, [renderSlot(_ctx.$slots, "header", { date: i18nDate.value }, () => [createElementVNode("div", { class: normalizeClass(unref(ns).e("title")) }, toDisplayString(i18nDate.value), 3), unref(validatedRange).length === 0 && __props.controllerType === "button" ? (openBlock(), createElementBlock("div", {
key: 0,
class: normalizeClass(unref(ns).e("button-group"))
}, [createVNode(unref(ElButtonGroup), null, {
default: withCtx(() => [
createVNode(unref(ElButton), {
size: "small",
onClick: _cache[0] || (_cache[0] = ($event) => unref(selectDate)("prev-month"))
}, {
default: withCtx(() => [createTextVNode(toDisplayString(unref(t)("el.datepicker.prevMonth")), 1)]),
_: 1
}),
createVNode(unref(ElButton), {
size: "small",
onClick: _cache[1] || (_cache[1] = ($event) => unref(selectDate)("today"))
}, {
default: withCtx(() => [createTextVNode(toDisplayString(unref(t)("el.datepicker.today")), 1)]),
_: 1
}),
createVNode(unref(ElButton), {
size: "small",
onClick: _cache[2] || (_cache[2] = ($event) => unref(selectDate)("next-month"))
}, {
default: withCtx(() => [createTextVNode(toDisplayString(unref(t)("el.datepicker.nextMonth")), 1)]),
_: 1
})
]),
_: 1
})], 2)) : unref(validatedRange).length === 0 && __props.controllerType === "select" ? (openBlock(), createElementBlock("div", {
key: 1,
class: normalizeClass(unref(ns).e("select-controller"))
}, [createVNode(select_controller_default, {
date: unref(date),
formatter: __props.formatter,
onDateChange: unref(handleDateChange)
}, null, 8, [
"date",
"formatter",
"onDateChange"
])], 2)) : createCommentVNode("v-if", true)])], 2), unref(validatedRange).length === 0 ? (openBlock(), createElementBlock("div", {
key: 0,
class: normalizeClass(unref(ns).e("body"))
}, [createVNode(date_table_default, {
date: unref(date),
"selected-day": unref(realSelectedDay),
onPick: unref(pickDay)
}, createSlots({ _: 2 }, [_ctx.$slots["date-cell"] ? {
name: "date-cell",
fn: withCtx((data) => [renderSlot(_ctx.$slots, "date-cell", normalizeProps(guardReactiveProps(data)))]),
key: "0"
} : void 0]), 1032, [
"date",
"selected-day",
"onPick"
])], 2)) : (openBlock(), createElementBlock("div", {
key: 1,
class: normalizeClass(unref(ns).e("body"))
}, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(validatedRange), (range_, index) => {
return openBlock(), createBlock(date_table_default, {
key: index,
date: range_[0],
"selected-day": unref(realSelectedDay),
range: range_,
"hide-header": index !== 0,
onPick: unref(pickDay)
}, createSlots({ _: 2 }, [_ctx.$slots["date-cell"] ? {
name: "date-cell",
fn: withCtx((data) => [renderSlot(_ctx.$slots, "date-cell", mergeProps({ ref_for: true }, data))]),
key: "0"
} : void 0]), 1032, [
"date",
"selected-day",
"range",
"hide-header",
"onPick"
]);
}), 128))], 2))], 2);
};
}
});
//#endregion
export { calendar_vue_vue_type_script_setup_true_lang_default as default };
//# sourceMappingURL=calendar.vue_vue_type_script_setup_true_lang.mjs.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,8 @@
import calendar_vue_vue_type_script_setup_true_lang_default from "./calendar.vue_vue_type_script_setup_true_lang.mjs";
//#region ../../packages/components/calendar/src/calendar.vue
var calendar_default = calendar_vue_vue_type_script_setup_true_lang_default;
//#endregion
export { calendar_default as default };
//# sourceMappingURL=calendar2.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"calendar2.mjs","names":[],"sources":["../../../../../../packages/components/calendar/src/calendar.vue"],"sourcesContent":["<template>\n <div :class=\"ns.b()\">\n <div :class=\"ns.e('header')\">\n <slot name=\"header\" :date=\"i18nDate\">\n <div :class=\"ns.e('title')\">{{ i18nDate }}</div>\n <div\n v-if=\"validatedRange.length === 0 && controllerType === 'button'\"\n :class=\"ns.e('button-group')\"\n >\n <el-button-group>\n <el-button size=\"small\" @click=\"selectDate('prev-month')\">\n {{ t('el.datepicker.prevMonth') }}\n </el-button>\n <el-button size=\"small\" @click=\"selectDate('today')\">\n {{ t('el.datepicker.today') }}\n </el-button>\n <el-button size=\"small\" @click=\"selectDate('next-month')\">\n {{ t('el.datepicker.nextMonth') }}\n </el-button>\n </el-button-group>\n </div>\n <div\n v-else-if=\"validatedRange.length === 0 && controllerType === 'select'\"\n :class=\"ns.e('select-controller')\"\n >\n <select-controller\n :date=\"date\"\n :formatter=\"formatter\"\n @date-change=\"handleDateChange\"\n />\n </div>\n </slot>\n </div>\n <div v-if=\"validatedRange.length === 0\" :class=\"ns.e('body')\">\n <date-table :date=\"date\" :selected-day=\"realSelectedDay\" @pick=\"pickDay\">\n <template v-if=\"$slots['date-cell']\" #date-cell=\"data\">\n <slot name=\"date-cell\" v-bind=\"data\" />\n </template>\n </date-table>\n </div>\n <div v-else :class=\"ns.e('body')\">\n <date-table\n v-for=\"(range_, index) in validatedRange\"\n :key=\"index\"\n :date=\"range_[0]\"\n :selected-day=\"realSelectedDay\"\n :range=\"range_\"\n :hide-header=\"index !== 0\"\n @pick=\"pickDay\"\n >\n <template v-if=\"$slots['date-cell']\" #date-cell=\"data\">\n <slot name=\"date-cell\" v-bind=\"data\" />\n </template>\n </date-table>\n </div>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed } from 'vue'\nimport { ElButton, ElButtonGroup } from '@element-plus/components/button'\nimport { useLocale, useNamespace } from '@element-plus/hooks'\nimport DateTable from './date-table.vue'\nimport { useCalendar } from './use-calendar'\nimport { calendarEmits } from './calendar'\nimport SelectController from './select-controller.vue'\n\nimport type { CalendarProps } from './calendar'\n\nconst ns = useNamespace('calendar')\n\nconst COMPONENT_NAME = 'ElCalendar'\ndefineOptions({\n name: COMPONENT_NAME,\n})\n\nconst props = withDefaults(defineProps<CalendarProps>(), {\n controllerType: 'button',\n})\nconst emit = defineEmits(calendarEmits)\n\nconst {\n calculateValidatedDateRange,\n date,\n pickDay,\n realSelectedDay,\n selectDate,\n validatedRange,\n handleDateChange,\n} = useCalendar(props, emit, COMPONENT_NAME)\n\nconst { t } = useLocale()\n\nconst i18nDate = computed(() => {\n const pickedMonth = `el.datepicker.month${date.value.format('M')}`\n return `${date.value.year()} ${t('el.datepicker.year')} ${t(pickedMonth)}`\n})\n\ndefineExpose({\n /** @description currently selected date */\n selectedDay: realSelectedDay,\n /** @description select a specific date */\n pickDay,\n /** @description select date */\n selectDate,\n /** @description Calculate the validate date range according to the start and end dates */\n calculateValidatedDateRange,\n})\n</script>\n"],"mappings":""}
@@ -0,0 +1,14 @@
import "../../../utils/index.js";
import { ExtractPublicPropTypes } from "vue";
import { Dayjs } from "dayjs";
//#region ../../packages/components/calendar/src/date-table.d.ts
type CalendarDateCellType = 'next' | 'prev' | 'current';
interface DateTableProps {
selectedDay?: Dayjs;
range?: [Dayjs, Dayjs];
date: Dayjs;
hideHeader?: boolean;
}
//#endregion
export { CalendarDateCellType, DateTableProps };
@@ -0,0 +1,33 @@
import { isObject } from "../../../utils/types.mjs";
import { buildProps, definePropType } from "../../../utils/vue/props/runtime.mjs";
import { rangeArr } from "../../time-picker/src/utils.mjs";
//#region ../../packages/components/calendar/src/date-table.ts
const getPrevMonthLastDays = (date, count) => {
const lastDay = date.subtract(1, "month").endOf("month").date();
return rangeArr(count).map((_, index) => lastDay - (count - index - 1));
};
const getMonthDays = (date) => {
return rangeArr(date.daysInMonth()).map((_, index) => index + 1);
};
const toNestedArr = (days) => rangeArr(days.length / 7).map((index) => {
const start = index * 7;
return days.slice(start, start + 7);
});
/**
* @deprecated Removed after 3.0.0, Use `DateTableProps` instead.
*/
const dateTableProps = buildProps({
selectedDay: { type: definePropType(Object) },
range: { type: definePropType(Array) },
date: {
type: definePropType(Object),
required: true
},
hideHeader: { type: Boolean }
});
const dateTableEmits = { pick: (value) => isObject(value) };
//#endregion
export { dateTableEmits, dateTableProps, getMonthDays, getPrevMonthLastDays, toNestedArr };
//# sourceMappingURL=date-table.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"date-table.mjs","names":[],"sources":["../../../../../../packages/components/calendar/src/date-table.ts"],"sourcesContent":["import { buildProps, definePropType, isObject } from '@element-plus/utils'\nimport { rangeArr } from '@element-plus/components/time-picker'\n\nimport type { ExtractPublicPropTypes } from 'vue'\nimport type { Dayjs } from 'dayjs'\n\nexport type CalendarDateCellType = 'next' | 'prev' | 'current'\nexport type CalendarDateCell = {\n text: number\n type: CalendarDateCellType\n}\n\nexport const getPrevMonthLastDays = (date: Dayjs, count: number) => {\n const lastDay = date.subtract(1, 'month').endOf('month').date()\n return rangeArr(count).map((_, index) => lastDay - (count - index - 1))\n}\n\nexport const getMonthDays = (date: Dayjs) => {\n const days = date.daysInMonth()\n return rangeArr(days).map((_, index) => index + 1)\n}\n\nexport const toNestedArr = (days: CalendarDateCell[]) =>\n rangeArr(days.length / 7).map((index) => {\n const start = index * 7\n return days.slice(start, start + 7)\n })\n\nexport interface DateTableProps {\n selectedDay?: Dayjs\n range?: [Dayjs, Dayjs]\n date: Dayjs\n hideHeader?: boolean\n}\n\n/**\n * @deprecated Removed after 3.0.0, Use `DateTableProps` instead.\n */\nexport const dateTableProps = buildProps({\n selectedDay: {\n type: definePropType<Dayjs>(Object),\n },\n range: {\n type: definePropType<[Dayjs, Dayjs]>(Array),\n },\n date: {\n type: definePropType<Dayjs>(Object),\n required: true,\n },\n hideHeader: {\n type: Boolean,\n },\n} as const)\n\n/**\n * @deprecated Removed after 3.0.0, Use `DateTableProps` instead.\n */\nexport type DateTablePropsPublic = ExtractPublicPropTypes<typeof dateTableProps>\n\nexport const dateTableEmits = {\n pick: (value: Dayjs) => isObject(value),\n}\nexport type DateTableEmits = typeof dateTableEmits\n"],"mappings":";;;;;AAYA,MAAa,wBAAwB,MAAa,UAAkB;CAClE,MAAM,UAAU,KAAK,SAAS,GAAG,QAAQ,CAAC,MAAM,QAAQ,CAAC,MAAM;AAC/D,QAAO,SAAS,MAAM,CAAC,KAAK,GAAG,UAAU,WAAW,QAAQ,QAAQ,GAAG;;AAGzE,MAAa,gBAAgB,SAAgB;AAE3C,QAAO,SADM,KAAK,aAAa,CACV,CAAC,KAAK,GAAG,UAAU,QAAQ,EAAE;;AAGpD,MAAa,eAAe,SAC1B,SAAS,KAAK,SAAS,EAAE,CAAC,KAAK,UAAU;CACvC,MAAM,QAAQ,QAAQ;AACtB,QAAO,KAAK,MAAM,OAAO,QAAQ,EAAE;EACnC;;;;AAYJ,MAAa,iBAAiB,WAAW;CACvC,aAAa,EACX,MAAM,eAAsB,OAAO,EACpC;CACD,OAAO,EACL,MAAM,eAA+B,MAAM,EAC5C;CACD,MAAM;EACJ,MAAM,eAAsB,OAAO;EACnC,UAAU;EACX;CACD,YAAY,EACV,MAAM,SACP;CACF,CAAU;AAOX,MAAa,iBAAiB,EAC5B,OAAO,UAAiB,SAAS,MAAM,EACxC"}
@@ -0,0 +1,32 @@
import { CalendarDateCellType, DateTableProps } from "./date-table.js";
import * as vue from "vue";
import * as dayjs$1 from "dayjs";
//#region ../../packages/components/calendar/src/date-table.vue.d.ts
declare var __VLS_1: {
data: {
isSelected: boolean;
type: string;
day: string;
date: Date;
};
};
type __VLS_Slots = {} & {
'date-cell'?: (props: typeof __VLS_1) => any;
};
declare const __VLS_base: vue.DefineComponent<DateTableProps, {
/** @description toggle date panel */getFormattedDate: (day: number, type: CalendarDateCellType) => dayjs$1.Dayjs;
}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
pick: (value: dayjs$1.Dayjs) => void;
}, string, vue.PublicProps, Readonly<DateTableProps> & Readonly<{
onPick?: ((value: dayjs$1.Dayjs) => any) | undefined;
}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
declare const _default: typeof __VLS_export;
type __VLS_WithSlots<T, S> = T & {
new (): {
$slots: S;
};
};
//#endregion
export { _default };
@@ -0,0 +1,60 @@
import { useNamespace } from "../../../hooks/use-namespace/index.mjs";
import { dateTableEmits, dateTableProps } from "./date-table.mjs";
import { useDateTable } from "./use-date-table.mjs";
import { Fragment, createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock, renderList, renderSlot, toDisplayString, unref } from "vue";
//#region ../../packages/components/calendar/src/date-table.vue?vue&type=script&setup=true&lang.ts
const _hoisted_1 = { key: 0 };
const _hoisted_2 = ["onClick"];
var date_table_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
name: "DateTable",
__name: "date-table",
props: dateTableProps,
emits: dateTableEmits,
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const { isInRange, now, rows, weekDays, getFormattedDate, handlePickDay, getSlotData } = useDateTable(props, __emit);
const nsTable = useNamespace("calendar-table");
const nsDay = useNamespace("calendar-day");
const getCellClass = ({ text, type }) => {
const classes = [type];
if (type === "current") {
const date = getFormattedDate(text, type);
if (date.isSame(props.selectedDay, "day")) classes.push(nsDay.is("selected"));
if (date.isSame(now, "day")) classes.push(nsDay.is("today"));
}
return classes;
};
__expose({ getFormattedDate });
return (_ctx, _cache) => {
return openBlock(), createElementBlock("table", {
class: normalizeClass([unref(nsTable).b(), unref(nsTable).is("range", unref(isInRange))]),
cellspacing: "0",
cellpadding: "0"
}, [!__props.hideHeader ? (openBlock(), createElementBlock("thead", _hoisted_1, [createElementVNode("tr", null, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(weekDays), (day) => {
return openBlock(), createElementBlock("th", {
key: day,
scope: "col"
}, toDisplayString(day), 1);
}), 128))])])) : createCommentVNode("v-if", true), createElementVNode("tbody", null, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(rows), (row, index) => {
return openBlock(), createElementBlock("tr", {
key: index,
class: normalizeClass({
[unref(nsTable).e("row")]: true,
[unref(nsTable).em("row", "hide-border")]: index === 0 && __props.hideHeader
})
}, [(openBlock(true), createElementBlock(Fragment, null, renderList(row, (cell, key) => {
return openBlock(), createElementBlock("td", {
key,
class: normalizeClass(getCellClass(cell)),
onClick: ($event) => unref(handlePickDay)(cell)
}, [createElementVNode("div", { class: normalizeClass(unref(nsDay).b()) }, [renderSlot(_ctx.$slots, "date-cell", { data: unref(getSlotData)(cell) }, () => [createElementVNode("span", null, toDisplayString(cell.text), 1)])], 2)], 10, _hoisted_2);
}), 128))], 2);
}), 128))])], 2);
};
}
});
//#endregion
export { date_table_vue_vue_type_script_setup_true_lang_default as default };
//# sourceMappingURL=date-table.vue_vue_type_script_setup_true_lang.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"date-table.vue_vue_type_script_setup_true_lang.mjs","names":[],"sources":["../../../../../../packages/components/calendar/src/date-table.vue"],"sourcesContent":["<template>\n <table\n :class=\"[nsTable.b(), nsTable.is('range', isInRange)]\"\n cellspacing=\"0\"\n cellpadding=\"0\"\n >\n <thead v-if=\"!hideHeader\">\n <tr>\n <th v-for=\"day in weekDays\" :key=\"day\" scope=\"col\">{{ day }}</th>\n </tr>\n </thead>\n\n <tbody>\n <tr\n v-for=\"(row, index) in rows\"\n :key=\"index\"\n :class=\"{\n [nsTable.e('row')]: true,\n [nsTable.em('row', 'hide-border')]: index === 0 && hideHeader,\n }\"\n >\n <td\n v-for=\"(cell, key) in row\"\n :key=\"key\"\n :class=\"getCellClass(cell)\"\n @click=\"handlePickDay(cell)\"\n >\n <div :class=\"nsDay.b()\">\n <slot name=\"date-cell\" :data=\"getSlotData(cell)\">\n <span>{{ cell.text }}</span>\n </slot>\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useNamespace } from '@element-plus/hooks'\nimport { dateTableEmits } from './date-table'\nimport { useDateTable } from './use-date-table'\n\nimport type { CalendarDateCell, DateTableProps } from './date-table'\n\ndefineOptions({\n name: 'DateTable',\n})\n\nconst props = defineProps<DateTableProps>()\nconst emit = defineEmits(dateTableEmits)\n\nconst {\n isInRange,\n now,\n rows,\n weekDays,\n getFormattedDate,\n handlePickDay,\n getSlotData,\n} = useDateTable(props, emit)\n\nconst nsTable = useNamespace('calendar-table')\nconst nsDay = useNamespace('calendar-day')\n\nconst getCellClass = ({ text, type }: CalendarDateCell) => {\n const classes: string[] = [type]\n if (type === 'current') {\n const date = getFormattedDate(text, type)\n if (date.isSame(props.selectedDay, 'day')) {\n classes.push(nsDay.is('selected'))\n }\n if (date.isSame(now, 'day')) {\n classes.push(nsDay.is('today'))\n }\n }\n return classes\n}\n\ndefineExpose({\n /** @description toggle date panel */\n getFormattedDate,\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;EAiDA,MAAM,QAAQ;EAGd,MAAM,EACJ,WACA,KACA,MACA,UACA,kBACA,eACA,gBACE,aAAa,OAVJ,OAUe;EAE5B,MAAM,UAAU,aAAa,iBAAgB;EAC7C,MAAM,QAAQ,aAAa,eAAc;EAEzC,MAAM,gBAAgB,EAAE,MAAM,WAA6B;GACzD,MAAM,UAAoB,CAAC,KAAI;AAC/B,OAAI,SAAS,WAAW;IACtB,MAAM,OAAO,iBAAiB,MAAM,KAAI;AACxC,QAAI,KAAK,OAAO,MAAM,aAAa,MAAM,CACvC,SAAQ,KAAK,MAAM,GAAG,WAAW,CAAA;AAEnC,QAAI,KAAK,OAAO,KAAK,MAAM,CACzB,SAAQ,KAAK,MAAM,GAAG,QAAQ,CAAA;;AAGlC,UAAO;;AAGT,WAAa,EAEX,kBACD,CAAA;;uBAjFC,mBAkCQ,SAAA;IAjCL,OAAK,eAAA,CAAG,MAAA,QAAO,CAAC,GAAC,EAAI,MAAA,QAAO,CAAC,GAAE,SAAU,MAAA,UAAS,CAAA,CAAA,CAAA;IACnD,aAAY;IACZ,aAAY;QAEE,QAAA,2BAAd,mBAIQ,SAAA,YAAA,CAHN,mBAEK,MAAA,MAAA,mBADH,mBAAiE,UAAA,MAAA,WAA/C,MAAA,SAAQ,GAAf,QAAG;wBAAd,mBAAiE,MAAA;KAApC,KAAK;KAAK,OAAM;uBAAS,IAAG,EAAA,EAAA;sDAI7D,mBAsBQ,SAAA,MAAA,mBArBN,mBAoBK,UAAA,MAAA,WAnBoB,MAAA,KAAI,GAAnB,KAAK,UAAK;wBADpB,mBAoBK,MAAA;KAlBF,KAAK;KACL,OAAK,eAAA;OAAe,MAAA,QAAO,CAAC,EAAC,MAAA,GAAA;OAA2B,MAAA,QAAO,CAAC,GAAE,OAAA,cAAA,GAAyB,UAAK,KAAU,QAAA;;0BAK3G,mBAWK,UAAA,MAAA,WAVmB,MAAd,MAAM,QAAG;yBADnB,mBAWK,MAAA;MATG;MACL,OAAK,eAAE,aAAa,KAAI,CAAA;MACxB,UAAK,WAAE,MAAA,cAAa,CAAC,KAAI;SAE1B,mBAIM,OAAA,EAJA,OAAK,eAAE,MAAA,MAAK,CAAC,GAAC,CAAA,KAClB,WAEO,KAAA,QAAA,aAAA,EAFiB,MAAM,MAAA,YAAW,CAAC,KAAI,UAEvC,CADL,mBAA4B,QAAA,MAAA,gBAAnB,KAAK,KAAI,EAAA,EAAA"}
@@ -0,0 +1,8 @@
import date_table_vue_vue_type_script_setup_true_lang_default from "./date-table.vue_vue_type_script_setup_true_lang.mjs";
//#region ../../packages/components/calendar/src/date-table.vue
var date_table_default = date_table_vue_vue_type_script_setup_true_lang_default;
//#endregion
export { date_table_default as default };
//# sourceMappingURL=date-table2.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"date-table2.mjs","names":[],"sources":["../../../../../../packages/components/calendar/src/date-table.vue"],"sourcesContent":["<template>\n <table\n :class=\"[nsTable.b(), nsTable.is('range', isInRange)]\"\n cellspacing=\"0\"\n cellpadding=\"0\"\n >\n <thead v-if=\"!hideHeader\">\n <tr>\n <th v-for=\"day in weekDays\" :key=\"day\" scope=\"col\">{{ day }}</th>\n </tr>\n </thead>\n\n <tbody>\n <tr\n v-for=\"(row, index) in rows\"\n :key=\"index\"\n :class=\"{\n [nsTable.e('row')]: true,\n [nsTable.em('row', 'hide-border')]: index === 0 && hideHeader,\n }\"\n >\n <td\n v-for=\"(cell, key) in row\"\n :key=\"key\"\n :class=\"getCellClass(cell)\"\n @click=\"handlePickDay(cell)\"\n >\n <div :class=\"nsDay.b()\">\n <slot name=\"date-cell\" :data=\"getSlotData(cell)\">\n <span>{{ cell.text }}</span>\n </slot>\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useNamespace } from '@element-plus/hooks'\nimport { dateTableEmits } from './date-table'\nimport { useDateTable } from './use-date-table'\n\nimport type { CalendarDateCell, DateTableProps } from './date-table'\n\ndefineOptions({\n name: 'DateTable',\n})\n\nconst props = defineProps<DateTableProps>()\nconst emit = defineEmits(dateTableEmits)\n\nconst {\n isInRange,\n now,\n rows,\n weekDays,\n getFormattedDate,\n handlePickDay,\n getSlotData,\n} = useDateTable(props, emit)\n\nconst nsTable = useNamespace('calendar-table')\nconst nsDay = useNamespace('calendar-day')\n\nconst getCellClass = ({ text, type }: CalendarDateCell) => {\n const classes: string[] = [type]\n if (type === 'current') {\n const date = getFormattedDate(text, type)\n if (date.isSame(props.selectedDay, 'day')) {\n classes.push(nsDay.is('selected'))\n }\n if (date.isSame(now, 'day')) {\n classes.push(nsDay.is('today'))\n }\n }\n return classes\n}\n\ndefineExpose({\n /** @description toggle date panel */\n getFormattedDate,\n})\n</script>\n"],"mappings":""}
@@ -0,0 +1,9 @@
import { _default } from "./calendar.vue.js";
import { _default as _default$1 } from "./date-table.vue.js";
//#region ../../packages/components/calendar/src/instance.d.ts
type DateTableInstance = InstanceType<typeof _default$1> & unknown;
type CalendarDateTableInstance = DateTableInstance;
type CalendarInstance = InstanceType<typeof _default> & unknown;
//#endregion
export { CalendarDateTableInstance, CalendarInstance, DateTableInstance };
@@ -0,0 +1,19 @@
import { isObject, isString } from "../../../utils/types.mjs";
import { buildProps, definePropType } from "../../../utils/vue/props/runtime.mjs";
//#region ../../packages/components/calendar/src/select-controller.ts
/**
* @deprecated Removed after 3.0.0, Use `SelectControllerProps` instead.
*/
const selectControllerProps = buildProps({
date: {
type: definePropType(Object),
required: true
},
formatter: { type: definePropType(Function) }
});
const selectControllerEmits = { "date-change": (date) => isObject(date) || isString(date) };
//#endregion
export { selectControllerEmits, selectControllerProps };
//# sourceMappingURL=select-controller.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"select-controller.mjs","names":[],"sources":["../../../../../../packages/components/calendar/src/select-controller.ts"],"sourcesContent":["import {\n buildProps,\n definePropType,\n isObject,\n isString,\n} from '@element-plus/utils'\n\nimport type { ExtractPublicPropTypes } from 'vue'\nimport type { Dayjs } from 'dayjs'\n\nexport interface SelectControllerProps {\n date: Dayjs\n formatter?: (value: number, type: 'year' | 'month') => string | number\n}\n\n/**\n * @deprecated Removed after 3.0.0, Use `SelectControllerProps` instead.\n */\nexport const selectControllerProps = buildProps({\n date: {\n type: definePropType<Dayjs>(Object),\n required: true,\n },\n formatter: {\n type: definePropType<\n (value: number, type: 'year' | 'month') => string | number\n >(Function),\n },\n} as const)\n\n/**\n * @deprecated Removed after 3.0.0, Use `SelectControllerProps` instead.\n */\nexport type SelectControllerPropsPublic = ExtractPublicPropTypes<\n typeof selectControllerProps\n>\n\nexport const selectControllerEmits = {\n 'date-change': (date: Dayjs | 'today') => isObject(date) || isString(date),\n}\nexport type SelectControllerEmits = typeof selectControllerEmits\n"],"mappings":";;;;;;;AAkBA,MAAa,wBAAwB,WAAW;CAC9C,MAAM;EACJ,MAAM,eAAsB,OAAO;EACnC,UAAU;EACX;CACD,WAAW,EACT,MAAM,eAEJ,SAAS,EACZ;CACF,CAAU;AASX,MAAa,wBAAwB,EACnC,gBAAgB,SAA0B,SAAS,KAAK,IAAI,SAAS,KAAK,EAC3E"}
@@ -0,0 +1,93 @@
import { isFunction } from "../../../utils/types.mjs";
import { useLocale } from "../../../hooks/use-locale/index.mjs";
import { useNamespace } from "../../../hooks/use-namespace/index.mjs";
import { ElButton } from "../../button/index.mjs";
import { selectControllerEmits, selectControllerProps } from "./select-controller.mjs";
import { ElSelect } from "../../select/index.mjs";
import { Fragment, computed, createElementBlock, createTextVNode, createVNode, defineComponent, normalizeClass, openBlock, toDisplayString, unref, withCtx } from "vue";
import dayjs from "dayjs";
//#region ../../packages/components/calendar/src/select-controller.vue?vue&type=script&setup=true&lang.ts
var select_controller_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
name: "SelectController",
__name: "select-controller",
props: selectControllerProps,
emits: selectControllerEmits,
setup(__props, { emit: __emit }) {
const props = __props;
const emit = __emit;
const nsSelect = useNamespace("calendar-select");
const { t, lang } = useLocale();
const monthOptions = Array.from({ length: 12 }, (_, index) => {
const actualMonth = index + 1;
return {
value: actualMonth,
label: isFunction(props.formatter) ? props.formatter(actualMonth, "month") : actualMonth
};
});
const yearValue = computed(() => props.date.year());
const monthValue = computed(() => props.date.month() + 1);
const yearOptions = computed(() => {
const years = [];
for (let i = -10; i < 10; i++) {
const year = yearValue.value + i;
if (year > 0) {
const label = isFunction(props.formatter) ? props.formatter(year, "year") : year;
years.push({
value: year,
label
});
}
}
return years;
});
const handleYearChange = (year) => {
emit("date-change", dayjs(new Date(year, monthValue.value - 1, 1)).locale(lang.value));
};
const handleMonthChange = (month) => {
emit("date-change", dayjs(new Date(yearValue.value, month - 1, 1)).locale(lang.value));
};
const selectToday = () => {
emit("date-change", "today");
};
return (_ctx, _cache) => {
return openBlock(), createElementBlock(Fragment, null, [
createVNode(unref(ElSelect), {
"model-value": yearValue.value,
size: "small",
class: normalizeClass(unref(nsSelect).e("year")),
"validate-event": false,
options: yearOptions.value,
onChange: handleYearChange
}, null, 8, [
"model-value",
"class",
"options"
]),
createVNode(unref(ElSelect), {
"model-value": monthValue.value,
size: "small",
class: normalizeClass(unref(nsSelect).e("month")),
"validate-event": false,
options: unref(monthOptions),
onChange: handleMonthChange
}, null, 8, [
"model-value",
"class",
"options"
]),
createVNode(unref(ElButton), {
size: "small",
onClick: selectToday
}, {
default: withCtx(() => [createTextVNode(toDisplayString(unref(t)("el.datepicker.today")), 1)]),
_: 1
})
], 64);
};
}
});
//#endregion
export { select_controller_vue_vue_type_script_setup_true_lang_default as default };
//# sourceMappingURL=select-controller.vue_vue_type_script_setup_true_lang.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"select-controller.vue_vue_type_script_setup_true_lang.mjs","names":[],"sources":["../../../../../../packages/components/calendar/src/select-controller.vue"],"sourcesContent":["<template>\n <el-select\n :model-value=\"yearValue\"\n size=\"small\"\n :class=\"nsSelect.e('year')\"\n :validate-event=\"false\"\n :options=\"yearOptions\"\n @change=\"handleYearChange\"\n />\n <el-select\n :model-value=\"monthValue\"\n size=\"small\"\n :class=\"nsSelect.e('month')\"\n :validate-event=\"false\"\n :options=\"monthOptions\"\n @change=\"handleMonthChange\"\n />\n <el-button size=\"small\" @click=\"selectToday\">\n {{ t('el.datepicker.today') }}\n </el-button>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed } from 'vue'\nimport dayjs from 'dayjs'\nimport { useLocale, useNamespace } from '@element-plus/hooks'\nimport ElSelect from '@element-plus/components/select'\nimport { ElButton } from '@element-plus/components/button'\nimport { isFunction } from '@element-plus/utils'\nimport { selectControllerEmits } from './select-controller'\n\nimport type { SelectControllerProps } from './select-controller'\n\ndefineOptions({\n name: 'SelectController',\n})\n\nconst props = defineProps<SelectControllerProps>()\nconst emit = defineEmits(selectControllerEmits)\n\nconst nsSelect = useNamespace('calendar-select')\nconst { t, lang } = useLocale()\n\nconst monthOptions = Array.from({ length: 12 }, (_, index) => {\n const actualMonth = index + 1\n const label = isFunction(props.formatter)\n ? props.formatter(actualMonth, 'month')\n : actualMonth\n return {\n value: actualMonth,\n label,\n }\n})\n\nconst yearValue = computed(() => props.date.year())\nconst monthValue = computed(() => props.date.month() + 1)\n// Get an array of 20 years\nconst yearOptions = computed(() => {\n const years = []\n for (let i = -10; i < 10; i++) {\n const year = yearValue.value + i\n if (year > 0) {\n const label = isFunction(props.formatter)\n ? props.formatter(year, 'year')\n : year\n years.push({ value: year, label })\n }\n }\n return years\n})\n\nconst handleYearChange = (year: number) => {\n emit(\n 'date-change',\n dayjs(new Date(year, monthValue.value - 1, 1)).locale(lang.value)\n )\n}\n\nconst handleMonthChange = (month: number) => {\n emit(\n 'date-change',\n dayjs(new Date(yearValue.value, month - 1, 1)).locale(lang.value)\n )\n}\n\nconst selectToday = () => {\n emit('date-change', 'today')\n}\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;EAqCA,MAAM,QAAQ;EACd,MAAM,OAAO;EAEb,MAAM,WAAW,aAAa,kBAAiB;EAC/C,MAAM,EAAE,GAAG,SAAS,WAAU;EAE9B,MAAM,eAAe,MAAM,KAAK,EAAE,QAAQ,IAAI,GAAG,GAAG,UAAU;GAC5D,MAAM,cAAc,QAAQ;AAI5B,UAAO;IACL,OAAO;IACP,OALY,WAAW,MAAM,UAAS,GACpC,MAAM,UAAU,aAAa,QAAO,GACpC;IAIJ;IACD;EAED,MAAM,YAAY,eAAe,MAAM,KAAK,MAAM,CAAA;EAClD,MAAM,aAAa,eAAe,MAAM,KAAK,OAAO,GAAG,EAAC;EAExD,MAAM,cAAc,eAAe;GACjC,MAAM,QAAQ,EAAC;AACf,QAAK,IAAI,IAAI,KAAK,IAAI,IAAI,KAAK;IAC7B,MAAM,OAAO,UAAU,QAAQ;AAC/B,QAAI,OAAO,GAAG;KACZ,MAAM,QAAQ,WAAW,MAAM,UAAS,GACpC,MAAM,UAAU,MAAM,OAAM,GAC5B;AACJ,WAAM,KAAK;MAAE,OAAO;MAAM;MAAO,CAAA;;;AAGrC,UAAO;IACR;EAED,MAAM,oBAAoB,SAAiB;AACzC,QACE,eACA,MAAM,IAAI,KAAK,MAAM,WAAW,QAAQ,GAAG,EAAE,CAAC,CAAC,OAAO,KAAK,MAAK,CAClE;;EAGF,MAAM,qBAAqB,UAAkB;AAC3C,QACE,eACA,MAAM,IAAI,KAAK,UAAU,OAAO,QAAQ,GAAG,EAAE,CAAC,CAAC,OAAO,KAAK,MAAK,CAClE;;EAGF,MAAM,oBAAoB;AACxB,QAAK,eAAe,QAAO;;;;IArF3B,YAOE,MAAA,SAAA,EAAA;KANC,eAAa,UAAA;KACd,MAAK;KACJ,OAAK,eAAE,MAAA,SAAQ,CAAC,EAAC,OAAA,CAAA;KACjB,kBAAgB;KAChB,SAAS,YAAA;KACT,UAAQ;;;;;;IAEX,YAOE,MAAA,SAAA,EAAA;KANC,eAAa,WAAA;KACd,MAAK;KACJ,OAAK,eAAE,MAAA,SAAQ,CAAC,EAAC,QAAA,CAAA;KACjB,kBAAgB;KAChB,SAAS,MAAA,aAAY;KACrB,UAAQ;;;;;;IAEX,YAEY,MAAA,SAAA,EAAA;KAFD,MAAK;KAAS,SAAO;;4BACA,iCAA3B,MAAA,EAAC,CAAA,sBAAA,CAAA,EAAA,EAAA"}
@@ -0,0 +1,8 @@
import select_controller_vue_vue_type_script_setup_true_lang_default from "./select-controller.vue_vue_type_script_setup_true_lang.mjs";
//#region ../../packages/components/calendar/src/select-controller.vue
var select_controller_default = select_controller_vue_vue_type_script_setup_true_lang_default;
//#endregion
export { select_controller_default as default };
//# sourceMappingURL=select-controller2.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"select-controller2.mjs","names":[],"sources":["../../../../../../packages/components/calendar/src/select-controller.vue"],"sourcesContent":["<template>\n <el-select\n :model-value=\"yearValue\"\n size=\"small\"\n :class=\"nsSelect.e('year')\"\n :validate-event=\"false\"\n :options=\"yearOptions\"\n @change=\"handleYearChange\"\n />\n <el-select\n :model-value=\"monthValue\"\n size=\"small\"\n :class=\"nsSelect.e('month')\"\n :validate-event=\"false\"\n :options=\"monthOptions\"\n @change=\"handleMonthChange\"\n />\n <el-button size=\"small\" @click=\"selectToday\">\n {{ t('el.datepicker.today') }}\n </el-button>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed } from 'vue'\nimport dayjs from 'dayjs'\nimport { useLocale, useNamespace } from '@element-plus/hooks'\nimport ElSelect from '@element-plus/components/select'\nimport { ElButton } from '@element-plus/components/button'\nimport { isFunction } from '@element-plus/utils'\nimport { selectControllerEmits } from './select-controller'\n\nimport type { SelectControllerProps } from './select-controller'\n\ndefineOptions({\n name: 'SelectController',\n})\n\nconst props = defineProps<SelectControllerProps>()\nconst emit = defineEmits(selectControllerEmits)\n\nconst nsSelect = useNamespace('calendar-select')\nconst { t, lang } = useLocale()\n\nconst monthOptions = Array.from({ length: 12 }, (_, index) => {\n const actualMonth = index + 1\n const label = isFunction(props.formatter)\n ? props.formatter(actualMonth, 'month')\n : actualMonth\n return {\n value: actualMonth,\n label,\n }\n})\n\nconst yearValue = computed(() => props.date.year())\nconst monthValue = computed(() => props.date.month() + 1)\n// Get an array of 20 years\nconst yearOptions = computed(() => {\n const years = []\n for (let i = -10; i < 10; i++) {\n const year = yearValue.value + i\n if (year > 0) {\n const label = isFunction(props.formatter)\n ? props.formatter(year, 'year')\n : year\n years.push({ value: year, label })\n }\n }\n return years\n})\n\nconst handleYearChange = (year: number) => {\n emit(\n 'date-change',\n dayjs(new Date(year, monthValue.value - 1, 1)).locale(lang.value)\n )\n}\n\nconst handleMonthChange = (month: number) => {\n emit(\n 'date-change',\n dayjs(new Date(yearValue.value, month - 1, 1)).locale(lang.value)\n )\n}\n\nconst selectToday = () => {\n emit('date-change', 'today')\n}\n</script>\n"],"mappings":""}
@@ -0,0 +1,112 @@
import { INPUT_EVENT, UPDATE_MODEL_EVENT } from "../../../constants/event.mjs";
import { isArray, isDate } from "../../../utils/types.mjs";
import { debugWarn } from "../../../utils/error.mjs";
import { useLocale } from "../../../hooks/use-locale/index.mjs";
import { computed, ref } from "vue";
import dayjs from "dayjs";
//#region ../../packages/components/calendar/src/use-calendar.ts
const adjacentMonth = (start, end) => {
const firstMonthLastDay = start.endOf("month");
const lastMonthFirstDay = end.startOf("month");
const lastMonthStartDay = firstMonthLastDay.isSame(lastMonthFirstDay, "week") ? lastMonthFirstDay.add(1, "week") : lastMonthFirstDay;
return [[start, firstMonthLastDay], [lastMonthStartDay.startOf("week"), end]];
};
const threeConsecutiveMonth = (start, end) => {
const firstMonthLastDay = start.endOf("month");
const secondMonthFirstDay = start.add(1, "month").startOf("month");
const secondMonthStartDay = firstMonthLastDay.isSame(secondMonthFirstDay, "week") ? secondMonthFirstDay.add(1, "week") : secondMonthFirstDay;
const secondMonthLastDay = secondMonthStartDay.endOf("month");
const lastMonthFirstDay = end.startOf("month");
const lastMonthStartDay = secondMonthLastDay.isSame(lastMonthFirstDay, "week") ? lastMonthFirstDay.add(1, "week") : lastMonthFirstDay;
return [
[start, firstMonthLastDay],
[secondMonthStartDay.startOf("week"), secondMonthLastDay],
[lastMonthStartDay.startOf("week"), end]
];
};
const useCalendar = (props, emit, componentName) => {
const { lang } = useLocale();
const selectedDay = ref();
const now = dayjs().locale(lang.value);
const realSelectedDay = computed({
get() {
if (!props.modelValue) return selectedDay.value;
return date.value;
},
set(val) {
if (!val) return;
selectedDay.value = val;
const result = val.toDate();
emit(INPUT_EVENT, result);
emit(UPDATE_MODEL_EVENT, result);
}
});
const validatedRange = computed(() => {
if (!props.range || !isArray(props.range) || props.range.length !== 2 || props.range.some((item) => !isDate(item))) return [];
const [startDayjs, endDayjs] = props.range.map((_) => dayjs(_).locale(lang.value));
if (startDayjs.isAfter(endDayjs)) {
debugWarn(componentName, "end time should be greater than start time");
return [];
}
if (startDayjs.isSame(endDayjs, "month")) return calculateValidatedDateRange(startDayjs, endDayjs);
else {
if (startDayjs.add(1, "month").month() !== endDayjs.month()) {
debugWarn(componentName, "start time and end time interval must not exceed two months");
return [];
}
return calculateValidatedDateRange(startDayjs, endDayjs);
}
});
const date = computed(() => {
if (!props.modelValue) return realSelectedDay.value || (validatedRange.value.length ? validatedRange.value[0][0] : now);
else return dayjs(props.modelValue).locale(lang.value);
});
const prevMonthDayjs = computed(() => date.value.subtract(1, "month").date(1));
const nextMonthDayjs = computed(() => date.value.add(1, "month").date(1));
const prevYearDayjs = computed(() => date.value.subtract(1, "year").date(1));
const nextYearDayjs = computed(() => date.value.add(1, "year").date(1));
const calculateValidatedDateRange = (startDayjs, endDayjs) => {
const firstDay = startDayjs.startOf("week");
const lastDay = endDayjs.endOf("week");
const firstMonth = firstDay.get("month");
const lastMonth = lastDay.get("month");
if (firstMonth === lastMonth) return [[firstDay, lastDay]];
else if ((firstMonth + 1) % 12 === lastMonth) return adjacentMonth(firstDay, lastDay);
else if (firstMonth + 2 === lastMonth || (firstMonth + 1) % 11 === lastMonth) return threeConsecutiveMonth(firstDay, lastDay);
else {
debugWarn(componentName, "start time and end time interval must not exceed two months");
return [];
}
};
const pickDay = (day) => {
realSelectedDay.value = day;
};
const selectDate = (type) => {
const day = {
"prev-month": prevMonthDayjs.value,
"next-month": nextMonthDayjs.value,
"prev-year": prevYearDayjs.value,
"next-year": nextYearDayjs.value,
today: now
}[type];
if (!day.isSame(date.value, "day")) pickDay(day);
};
const handleDateChange = (date) => {
if (date === "today") selectDate("today");
else pickDay(date);
};
return {
calculateValidatedDateRange,
date,
realSelectedDay,
pickDay,
selectDate,
validatedRange,
handleDateChange
};
};
//#endregion
export { useCalendar };
//# sourceMappingURL=use-calendar.mjs.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,88 @@
import { WEEK_DAYS } from "../../../constants/date.mjs";
import { useLocale } from "../../../hooks/use-locale/index.mjs";
import { DEFAULT_FORMATS_DATE } from "../../time-picker/src/constants.mjs";
import { rangeArr } from "../../time-picker/src/utils.mjs";
import { getMonthDays, getPrevMonthLastDays, toNestedArr } from "./date-table.mjs";
import { computed } from "vue";
import dayjs from "dayjs";
import localeData from "dayjs/plugin/localeData.js";
//#region ../../packages/components/calendar/src/use-date-table.ts
const useDateTable = (props, emit) => {
dayjs.extend(localeData);
const firstDayOfWeek = dayjs.localeData().firstDayOfWeek();
const { t, lang } = useLocale();
const now = dayjs().locale(lang.value);
const isInRange = computed(() => !!props.range && !!props.range.length);
const rows = computed(() => {
let days = [];
if (isInRange.value) {
const [start, end] = props.range;
const currentMonthRange = rangeArr(end.date() - start.date() + 1).map((index) => ({
text: start.date() + index,
type: "current"
}));
let remaining = currentMonthRange.length % 7;
remaining = remaining === 0 ? 0 : 7 - remaining;
const nextMonthRange = rangeArr(remaining).map((_, index) => ({
text: index + 1,
type: "next"
}));
days = currentMonthRange.concat(nextMonthRange);
} else {
const firstDay = props.date.startOf("month").day();
const prevMonthDays = getPrevMonthLastDays(props.date, (firstDay - firstDayOfWeek + 7) % 7).map((day) => ({
text: day,
type: "prev"
}));
const currentMonthDays = getMonthDays(props.date).map((day) => ({
text: day,
type: "current"
}));
days = [...prevMonthDays, ...currentMonthDays];
const nextMonthDays = rangeArr(7 - (days.length % 7 || 7)).map((_, index) => ({
text: index + 1,
type: "next"
}));
days = days.concat(nextMonthDays);
}
return toNestedArr(days);
});
const weekDays = computed(() => {
const start = firstDayOfWeek;
if (start === 0) return WEEK_DAYS.map((_) => t(`el.datepicker.weeks.${_}`));
else return WEEK_DAYS.slice(start).concat(WEEK_DAYS.slice(0, start)).map((_) => t(`el.datepicker.weeks.${_}`));
});
const getFormattedDate = (day, type) => {
switch (type) {
case "prev": return props.date.startOf("month").subtract(1, "month").date(day);
case "next": return props.date.startOf("month").add(1, "month").date(day);
case "current": return props.date.date(day);
}
};
const handlePickDay = ({ text, type }) => {
emit("pick", getFormattedDate(text, type));
};
const getSlotData = ({ text, type }) => {
const day = getFormattedDate(text, type);
return {
isSelected: day.isSame(props.selectedDay),
type: `${type}-month`,
day: day.format(DEFAULT_FORMATS_DATE),
date: day.toDate()
};
};
return {
now,
isInRange,
rows,
weekDays,
getFormattedDate,
handlePickDay,
getSlotData
};
};
//#endregion
export { useDateTable };
//# sourceMappingURL=use-date-table.mjs.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,5 @@
import "../../base/style/css.mjs";
import "../../button/style/css.mjs";
import "../../button-group/style/css.mjs";
import "../../select/style/css.mjs";
import "element-plus/theme-chalk/el-calendar.css";
@@ -0,0 +1,5 @@
import "../../base/style/index.mjs";
import "../../button/style/index.mjs";
import "../../button-group/style/index.mjs";
import "../../select/style/index.mjs";
import "element-plus/theme-chalk/src/calendar.scss";