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 };
+14
View File
@@ -0,0 +1,14 @@
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
const require_install = require('../../utils/vue/install.js');
const require_calendar = require('./src/calendar.js');
const require_calendar$1 = require('./src/calendar2.js');
//#region ../../packages/components/calendar/index.ts
const ElCalendar = require_install.withInstall(require_calendar$1.default);
//#endregion
exports.ElCalendar = ElCalendar;
exports.default = ElCalendar;
exports.calendarEmits = require_calendar.calendarEmits;
exports.calendarProps = require_calendar.calendarProps;
//# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
{"version":3,"file":"index.js","names":["withInstall","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,aAA8CA,4BAAYC,2BAAS"}
@@ -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,33 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
const require_runtime = require('../../../_virtual/_rolldown/runtime.js');
const require_event = require('../../../constants/event.js');
const require_runtime$1 = require('../../../utils/vue/props/runtime.js');
let _vue_shared = require("@vue/shared");
//#region ../../packages/components/calendar/src/calendar.ts
const isValidRange = (range) => (0, _vue_shared.isArray)(range) && range.length === 2 && range.every((item) => (0, _vue_shared.isDate)(item));
/**
* @deprecated Removed after 3.0.0, Use `CalendarProps` instead.
*/
const calendarProps = require_runtime$1.buildProps({
modelValue: { type: Date },
range: {
type: require_runtime$1.definePropType(Array),
validator: isValidRange
},
controllerType: {
type: String,
values: ["button", "select"],
default: "button"
},
formatter: { type: require_runtime$1.definePropType(Function) }
});
const calendarEmits = {
[require_event.UPDATE_MODEL_EVENT]: (value) => (0, _vue_shared.isDate)(value),
[require_event.INPUT_EVENT]: (value) => (0, _vue_shared.isDate)(value)
};
//#endregion
exports.calendarEmits = calendarEmits;
exports.calendarProps = calendarProps;
//# sourceMappingURL=calendar.js.map
@@ -0,0 +1 @@
{"version":3,"file":"calendar.js","names":["buildProps","definePropType","UPDATE_MODEL_EVENT","INPUT_EVENT"],"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,mCACZ,MAAM,IAAI,MAAM,WAAW,KAAK,MAAM,OAAO,iCAAgB,KAAK,CAAC;;;;AAyB7E,MAAa,gBAAgBA,6BAAW;CAItC,YAAY,EACV,MAAM,MACP;CAKD,OAAO;EACL,MAAMC,iCAA6B,MAAM;EACzC,WAAW;EACZ;CAID,gBAAgB;EACd,MAAM;EACN,QAAQ,CAAC,UAAU,SAAS;EAC5B,SAAS;EACV;CAID,WAAW,EACT,MAAMA,iCAEJ,SAAS,EACZ;CACF,CAAU;AAOX,MAAa,gBAAgB;EAC1BC,oCAAsB,kCAAuB,MAAM;EACnDC,6BAAe,kCAAuB,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,116 @@
const require_runtime = require('../../../_virtual/_rolldown/runtime.js');
const require_index = require('../../../hooks/use-locale/index.js');
const require_index$1 = require('../../../hooks/use-namespace/index.js');
const require_index$2 = require('../../button/index.js');
const require_calendar = require('./calendar.js');
const require_date_table = require('./date-table2.js');
const require_use_calendar = require('./use-calendar.js');
const require_select_controller = require('./select-controller2.js');
let vue = require("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__ */ (0, vue.defineComponent)({
name: COMPONENT_NAME,
__name: "calendar",
props: require_calendar.calendarProps,
emits: require_calendar.calendarEmits,
setup(__props, { expose: __expose, emit: __emit }) {
const ns = require_index$1.useNamespace("calendar");
const { calculateValidatedDateRange, date, pickDay, realSelectedDay, selectDate, validatedRange, handleDateChange } = require_use_calendar.useCalendar(__props, __emit, COMPONENT_NAME);
const { t } = require_index.useLocale();
const i18nDate = (0, vue.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 (0, vue.openBlock)(), (0, vue.createElementBlock)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(ns).b()) }, [(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("header")) }, [(0, vue.renderSlot)(_ctx.$slots, "header", { date: i18nDate.value }, () => [(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("title")) }, (0, vue.toDisplayString)(i18nDate.value), 3), (0, vue.unref)(validatedRange).length === 0 && __props.controllerType === "button" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
key: 0,
class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("button-group"))
}, [(0, vue.createVNode)((0, vue.unref)(require_index$2.ElButtonGroup), null, {
default: (0, vue.withCtx)(() => [
(0, vue.createVNode)((0, vue.unref)(require_index$2.ElButton), {
size: "small",
onClick: _cache[0] || (_cache[0] = ($event) => (0, vue.unref)(selectDate)("prev-month"))
}, {
default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)((0, vue.unref)(t)("el.datepicker.prevMonth")), 1)]),
_: 1
}),
(0, vue.createVNode)((0, vue.unref)(require_index$2.ElButton), {
size: "small",
onClick: _cache[1] || (_cache[1] = ($event) => (0, vue.unref)(selectDate)("today"))
}, {
default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)((0, vue.unref)(t)("el.datepicker.today")), 1)]),
_: 1
}),
(0, vue.createVNode)((0, vue.unref)(require_index$2.ElButton), {
size: "small",
onClick: _cache[2] || (_cache[2] = ($event) => (0, vue.unref)(selectDate)("next-month"))
}, {
default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)((0, vue.unref)(t)("el.datepicker.nextMonth")), 1)]),
_: 1
})
]),
_: 1
})], 2)) : (0, vue.unref)(validatedRange).length === 0 && __props.controllerType === "select" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
key: 1,
class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("select-controller"))
}, [(0, vue.createVNode)(require_select_controller.default, {
date: (0, vue.unref)(date),
formatter: __props.formatter,
onDateChange: (0, vue.unref)(handleDateChange)
}, null, 8, [
"date",
"formatter",
"onDateChange"
])], 2)) : (0, vue.createCommentVNode)("v-if", true)])], 2), (0, vue.unref)(validatedRange).length === 0 ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
key: 0,
class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("body"))
}, [(0, vue.createVNode)(require_date_table.default, {
date: (0, vue.unref)(date),
"selected-day": (0, vue.unref)(realSelectedDay),
onPick: (0, vue.unref)(pickDay)
}, (0, vue.createSlots)({ _: 2 }, [_ctx.$slots["date-cell"] ? {
name: "date-cell",
fn: (0, vue.withCtx)((data) => [(0, vue.renderSlot)(_ctx.$slots, "date-cell", (0, vue.normalizeProps)((0, vue.guardReactiveProps)(data)))]),
key: "0"
} : void 0]), 1032, [
"date",
"selected-day",
"onPick"
])], 2)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
key: 1,
class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("body"))
}, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)((0, vue.unref)(validatedRange), (range_, index) => {
return (0, vue.openBlock)(), (0, vue.createBlock)(require_date_table.default, {
key: index,
date: range_[0],
"selected-day": (0, vue.unref)(realSelectedDay),
range: range_,
"hide-header": index !== 0,
onPick: (0, vue.unref)(pickDay)
}, (0, vue.createSlots)({ _: 2 }, [_ctx.$slots["date-cell"] ? {
name: "date-cell",
fn: (0, vue.withCtx)((data) => [(0, vue.renderSlot)(_ctx.$slots, "date-cell", (0, vue.mergeProps)({ ref_for: true }, data))]),
key: "0"
} : void 0]), 1032, [
"date",
"selected-day",
"range",
"hide-header",
"onPick"
]);
}), 128))], 2))], 2);
};
}
});
//#endregion
exports.default = calendar_vue_vue_type_script_setup_true_lang_default;
//# sourceMappingURL=calendar.vue_vue_type_script_setup_true_lang.js.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,9 @@
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
const require_calendar_vue_vue_type_script_setup_true_lang = require('./calendar.vue_vue_type_script_setup_true_lang.js');
//#region ../../packages/components/calendar/src/calendar.vue
var calendar_default = require_calendar_vue_vue_type_script_setup_true_lang.default;
//#endregion
exports.default = calendar_default;
//# sourceMappingURL=calendar2.js.map
@@ -0,0 +1 @@
{"version":3,"file":"calendar2.js","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,39 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
const require_runtime = require('../../../_virtual/_rolldown/runtime.js');
const require_runtime$1 = require('../../../utils/vue/props/runtime.js');
const require_utils = require('../../time-picker/src/utils.js');
let _vue_shared = require("@vue/shared");
//#region ../../packages/components/calendar/src/date-table.ts
const getPrevMonthLastDays = (date, count) => {
const lastDay = date.subtract(1, "month").endOf("month").date();
return require_utils.rangeArr(count).map((_, index) => lastDay - (count - index - 1));
};
const getMonthDays = (date) => {
return require_utils.rangeArr(date.daysInMonth()).map((_, index) => index + 1);
};
const toNestedArr = (days) => require_utils.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 = require_runtime$1.buildProps({
selectedDay: { type: require_runtime$1.definePropType(Object) },
range: { type: require_runtime$1.definePropType(Array) },
date: {
type: require_runtime$1.definePropType(Object),
required: true
},
hideHeader: { type: Boolean }
});
const dateTableEmits = { pick: (value) => (0, _vue_shared.isObject)(value) };
//#endregion
exports.dateTableEmits = dateTableEmits;
exports.dateTableProps = dateTableProps;
exports.getMonthDays = getMonthDays;
exports.getPrevMonthLastDays = getPrevMonthLastDays;
exports.toNestedArr = toNestedArr;
//# sourceMappingURL=date-table.js.map
@@ -0,0 +1 @@
{"version":3,"file":"date-table.js","names":["rangeArr","buildProps","definePropType"],"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,QAAOA,uBAAS,MAAM,CAAC,KAAK,GAAG,UAAU,WAAW,QAAQ,QAAQ,GAAG;;AAGzE,MAAa,gBAAgB,SAAgB;AAE3C,QAAOA,uBADM,KAAK,aAAa,CACV,CAAC,KAAK,GAAG,UAAU,QAAQ,EAAE;;AAGpD,MAAa,eAAe,SAC1BA,uBAAS,KAAK,SAAS,EAAE,CAAC,KAAK,UAAU;CACvC,MAAM,QAAQ,QAAQ;AACtB,QAAO,KAAK,MAAM,OAAO,QAAQ,EAAE;EACnC;;;;AAYJ,MAAa,iBAAiBC,6BAAW;CACvC,aAAa,EACX,MAAMC,iCAAsB,OAAO,EACpC;CACD,OAAO,EACL,MAAMA,iCAA+B,MAAM,EAC5C;CACD,MAAM;EACJ,MAAMA,iCAAsB,OAAO;EACnC,UAAU;EACX;CACD,YAAY,EACV,MAAM,SACP;CACF,CAAU;AAOX,MAAa,iBAAiB,EAC5B,OAAO,oCAA0B,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,61 @@
const require_runtime = require('../../../_virtual/_rolldown/runtime.js');
const require_index = require('../../../hooks/use-namespace/index.js');
const require_date_table = require('./date-table.js');
const require_use_date_table = require('./use-date-table.js');
let vue = require("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__ */ (0, vue.defineComponent)({
name: "DateTable",
__name: "date-table",
props: require_date_table.dateTableProps,
emits: require_date_table.dateTableEmits,
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const { isInRange, now, rows, weekDays, getFormattedDate, handlePickDay, getSlotData } = require_use_date_table.useDateTable(props, __emit);
const nsTable = require_index.useNamespace("calendar-table");
const nsDay = require_index.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 (0, vue.openBlock)(), (0, vue.createElementBlock)("table", {
class: (0, vue.normalizeClass)([(0, vue.unref)(nsTable).b(), (0, vue.unref)(nsTable).is("range", (0, vue.unref)(isInRange))]),
cellspacing: "0",
cellpadding: "0"
}, [!__props.hideHeader ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("thead", _hoisted_1, [(0, vue.createElementVNode)("tr", null, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)((0, vue.unref)(weekDays), (day) => {
return (0, vue.openBlock)(), (0, vue.createElementBlock)("th", {
key: day,
scope: "col"
}, (0, vue.toDisplayString)(day), 1);
}), 128))])])) : (0, vue.createCommentVNode)("v-if", true), (0, vue.createElementVNode)("tbody", null, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)((0, vue.unref)(rows), (row, index) => {
return (0, vue.openBlock)(), (0, vue.createElementBlock)("tr", {
key: index,
class: (0, vue.normalizeClass)({
[(0, vue.unref)(nsTable).e("row")]: true,
[(0, vue.unref)(nsTable).em("row", "hide-border")]: index === 0 && __props.hideHeader
})
}, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(row, (cell, key) => {
return (0, vue.openBlock)(), (0, vue.createElementBlock)("td", {
key,
class: (0, vue.normalizeClass)(getCellClass(cell)),
onClick: ($event) => (0, vue.unref)(handlePickDay)(cell)
}, [(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(nsDay).b()) }, [(0, vue.renderSlot)(_ctx.$slots, "date-cell", { data: (0, vue.unref)(getSlotData)(cell) }, () => [(0, vue.createElementVNode)("span", null, (0, vue.toDisplayString)(cell.text), 1)])], 2)], 10, _hoisted_2);
}), 128))], 2);
}), 128))])], 2);
};
}
});
//#endregion
exports.default = date_table_vue_vue_type_script_setup_true_lang_default;
//# sourceMappingURL=date-table.vue_vue_type_script_setup_true_lang.js.map
@@ -0,0 +1 @@
{"version":3,"file":"date-table.vue_vue_type_script_setup_true_lang.js","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,oCAAa,OAVJ,OAUe;EAE5B,MAAM,UAAU,2BAAa,iBAAgB;EAC7C,MAAM,QAAQ,2BAAa,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;;4DA/CS,SAAA;IAjCL,+BAAK,gBAAG,QAAO,CAAC,GAAC,iBAAI,QAAO,CAAC,GAAE,wBAAU,UAAS,CAAA,CAAA,CAAA;IACnD,aAAY;IACZ,aAAY;QAEE,QAAA,gEAIN,SAAA,YAAA,6BADD,MAAA,MAAA,wDAD8D,cAAA,yCAA/C,SAAQ,GAAf,QAAG;6DAAmD,MAAA;KAApC,KAAK;KAAK,OAAM;gCAAS,IAAG,EAAA,EAAA;2FA0BrD,SAAA,MAAA,wDADD,cAAA,yCAnBoB,KAAI,GAAnB,KAAK,UAAK;6DAmBf,MAAA;KAlBF,KAAK;KACL,+BAAK;sBAAe,QAAO,CAAC,EAAC,MAAA,GAAA;sBAA2B,QAAO,CAAC,GAAE,OAAA,cAAA,GAAyB,UAAK,KAAU,QAAA;;+DAgBtG,cAAA,0BAVmB,MAAd,MAAM,QAAG;8DAUd,MAAA;MATG;MACL,+BAAO,aAAa,KAAI,CAAA;MACxB,UAAK,0BAAE,cAAa,CAAC,KAAI;qCAMpB,OAAA,EAJA,8CAAO,MAAK,CAAC,GAAC,CAAA,yBAGX,KAAA,QAAA,aAAA,EAFiB,qBAAM,YAAW,CAAC,KAAI,UAEvC,6BADuB,QAAA,+BAAnB,KAAK,KAAI,EAAA,EAAA"}
@@ -0,0 +1,9 @@
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
const require_date_table_vue_vue_type_script_setup_true_lang = require('./date-table.vue_vue_type_script_setup_true_lang.js');
//#region ../../packages/components/calendar/src/date-table.vue
var date_table_default = require_date_table_vue_vue_type_script_setup_true_lang.default;
//#endregion
exports.default = date_table_default;
//# sourceMappingURL=date-table2.js.map
@@ -0,0 +1 @@
{"version":3,"file":"date-table2.js","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 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
@@ -0,0 +1,22 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
const require_runtime = require('../../../_virtual/_rolldown/runtime.js');
const require_runtime$1 = require('../../../utils/vue/props/runtime.js');
let _vue_shared = require("@vue/shared");
//#region ../../packages/components/calendar/src/select-controller.ts
/**
* @deprecated Removed after 3.0.0, Use `SelectControllerProps` instead.
*/
const selectControllerProps = require_runtime$1.buildProps({
date: {
type: require_runtime$1.definePropType(Object),
required: true
},
formatter: { type: require_runtime$1.definePropType(Function) }
});
const selectControllerEmits = { "date-change": (date) => (0, _vue_shared.isObject)(date) || (0, _vue_shared.isString)(date) };
//#endregion
exports.selectControllerEmits = selectControllerEmits;
exports.selectControllerProps = selectControllerProps;
//# sourceMappingURL=select-controller.js.map
@@ -0,0 +1 @@
{"version":3,"file":"select-controller.js","names":["buildProps","definePropType"],"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,wBAAwBA,6BAAW;CAC9C,MAAM;EACJ,MAAMC,iCAAsB,OAAO;EACnC,UAAU;EACX;CACD,WAAW,EACT,MAAMA,iCAEJ,SAAS,EACZ;CACF,CAAU;AASX,MAAa,wBAAwB,EACnC,gBAAgB,mCAAmC,KAAK,8BAAa,KAAK,EAC3E"}
@@ -0,0 +1,95 @@
const require_runtime = require('../../../_virtual/_rolldown/runtime.js');
const require_index = require('../../../hooks/use-locale/index.js');
const require_index$1 = require('../../../hooks/use-namespace/index.js');
const require_index$2 = require('../../button/index.js');
const require_select_controller = require('./select-controller.js');
const require_index$3 = require('../../select/index.js');
let vue = require("vue");
let dayjs = require("dayjs");
dayjs = require_runtime.__toESM(dayjs);
let _vue_shared = require("@vue/shared");
//#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__ */ (0, vue.defineComponent)({
name: "SelectController",
__name: "select-controller",
props: require_select_controller.selectControllerProps,
emits: require_select_controller.selectControllerEmits,
setup(__props, { emit: __emit }) {
const props = __props;
const emit = __emit;
const nsSelect = require_index$1.useNamespace("calendar-select");
const { t, lang } = require_index.useLocale();
const monthOptions = Array.from({ length: 12 }, (_, index) => {
const actualMonth = index + 1;
return {
value: actualMonth,
label: (0, _vue_shared.isFunction)(props.formatter) ? props.formatter(actualMonth, "month") : actualMonth
};
});
const yearValue = (0, vue.computed)(() => props.date.year());
const monthValue = (0, vue.computed)(() => props.date.month() + 1);
const yearOptions = (0, vue.computed)(() => {
const years = [];
for (let i = -10; i < 10; i++) {
const year = yearValue.value + i;
if (year > 0) {
const label = (0, _vue_shared.isFunction)(props.formatter) ? props.formatter(year, "year") : year;
years.push({
value: year,
label
});
}
}
return years;
});
const handleYearChange = (year) => {
emit("date-change", (0, dayjs.default)(new Date(year, monthValue.value - 1, 1)).locale(lang.value));
};
const handleMonthChange = (month) => {
emit("date-change", (0, dayjs.default)(new Date(yearValue.value, month - 1, 1)).locale(lang.value));
};
const selectToday = () => {
emit("date-change", "today");
};
return (_ctx, _cache) => {
return (0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, null, [
(0, vue.createVNode)((0, vue.unref)(require_index$3.ElSelect), {
"model-value": yearValue.value,
size: "small",
class: (0, vue.normalizeClass)((0, vue.unref)(nsSelect).e("year")),
"validate-event": false,
options: yearOptions.value,
onChange: handleYearChange
}, null, 8, [
"model-value",
"class",
"options"
]),
(0, vue.createVNode)((0, vue.unref)(require_index$3.ElSelect), {
"model-value": monthValue.value,
size: "small",
class: (0, vue.normalizeClass)((0, vue.unref)(nsSelect).e("month")),
"validate-event": false,
options: (0, vue.unref)(monthOptions),
onChange: handleMonthChange
}, null, 8, [
"model-value",
"class",
"options"
]),
(0, vue.createVNode)((0, vue.unref)(require_index$2.ElButton), {
size: "small",
onClick: selectToday
}, {
default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)((0, vue.unref)(t)("el.datepicker.today")), 1)]),
_: 1
})
], 64);
};
}
});
//#endregion
exports.default = select_controller_vue_vue_type_script_setup_true_lang_default;
//# sourceMappingURL=select-controller.vue_vue_type_script_setup_true_lang.js.map
@@ -0,0 +1 @@
{"version":3,"file":"select-controller.vue_vue_type_script_setup_true_lang.js","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,6BAAa,kBAAiB;EAC/C,MAAM,EAAE,GAAG,SAAS,yBAAU;EAE9B,MAAM,eAAe,MAAM,KAAK,EAAE,QAAQ,IAAI,GAAG,GAAG,UAAU;GAC5D,MAAM,cAAc,QAAQ;AAI5B,UAAO;IACL,OAAO;IACP,mCALuB,MAAM,UAAS,GACpC,MAAM,UAAU,aAAa,QAAO,GACpC;IAIJ;IACD;EAED,MAAM,oCAA2B,MAAM,KAAK,MAAM,CAAA;EAClD,MAAM,qCAA4B,MAAM,KAAK,OAAO,GAAG,EAAC;EAExD,MAAM,sCAA6B;GACjC,MAAM,QAAQ,EAAC;AACf,QAAK,IAAI,IAAI,KAAK,IAAI,IAAI,KAAK;IAC7B,MAAM,OAAO,UAAU,QAAQ;AAC/B,QAAI,OAAO,GAAG;KACZ,MAAM,oCAAmB,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,kCACM,IAAI,KAAK,MAAM,WAAW,QAAQ,GAAG,EAAE,CAAC,CAAC,OAAO,KAAK,MAAK,CAClE;;EAGF,MAAM,qBAAqB,UAAkB;AAC3C,QACE,kCACM,IAAI,KAAK,UAAU,OAAO,QAAQ,GAAG,EAAE,CAAC,CAAC,OAAO,KAAK,MAAK,CAClE;;EAGF,MAAM,oBAAoB;AACxB,QAAK,eAAe,QAAO;;;;wCA9EzB,yBAAA,EAAA;KANC,eAAa,UAAA;KACd,MAAK;KACJ,8CAAO,SAAQ,CAAC,EAAC,OAAA,CAAA;KACjB,kBAAgB;KAChB,SAAS,YAAA;KACT,UAAQ;;;;;;wCAST,yBAAA,EAAA;KANC,eAAa,WAAA;KACd,MAAK;KACJ,8CAAO,SAAQ,CAAC,EAAC,QAAA,CAAA;KACjB,kBAAgB;KAChB,wBAAS,aAAY;KACrB,UAAQ;;;;;;wCAIC,yBAAA,EAAA;KAFD,MAAK;KAAS,SAAO;;qCACA,kEAA3B,EAAC,CAAA,sBAAA,CAAA,EAAA,EAAA"}
@@ -0,0 +1,9 @@
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
const require_select_controller_vue_vue_type_script_setup_true_lang = require('./select-controller.vue_vue_type_script_setup_true_lang.js');
//#region ../../packages/components/calendar/src/select-controller.vue
var select_controller_default = require_select_controller_vue_vue_type_script_setup_true_lang.default;
//#endregion
exports.default = select_controller_default;
//# sourceMappingURL=select-controller2.js.map
@@ -0,0 +1 @@
{"version":3,"file":"select-controller2.js","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,115 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
const require_runtime = require('../../../_virtual/_rolldown/runtime.js');
const require_event = require('../../../constants/event.js');
const require_error = require('../../../utils/error.js');
const require_index = require('../../../hooks/use-locale/index.js');
let vue = require("vue");
let dayjs = require("dayjs");
dayjs = require_runtime.__toESM(dayjs);
let _vue_shared = require("@vue/shared");
//#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 } = require_index.useLocale();
const selectedDay = (0, vue.ref)();
const now = (0, dayjs.default)().locale(lang.value);
const realSelectedDay = (0, vue.computed)({
get() {
if (!props.modelValue) return selectedDay.value;
return date.value;
},
set(val) {
if (!val) return;
selectedDay.value = val;
const result = val.toDate();
emit(require_event.INPUT_EVENT, result);
emit(require_event.UPDATE_MODEL_EVENT, result);
}
});
const validatedRange = (0, vue.computed)(() => {
if (!props.range || !(0, _vue_shared.isArray)(props.range) || props.range.length !== 2 || props.range.some((item) => !(0, _vue_shared.isDate)(item))) return [];
const [startDayjs, endDayjs] = props.range.map((_) => (0, dayjs.default)(_).locale(lang.value));
if (startDayjs.isAfter(endDayjs)) {
require_error.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()) {
require_error.debugWarn(componentName, "start time and end time interval must not exceed two months");
return [];
}
return calculateValidatedDateRange(startDayjs, endDayjs);
}
});
const date = (0, vue.computed)(() => {
if (!props.modelValue) return realSelectedDay.value || (validatedRange.value.length ? validatedRange.value[0][0] : now);
else return (0, dayjs.default)(props.modelValue).locale(lang.value);
});
const prevMonthDayjs = (0, vue.computed)(() => date.value.subtract(1, "month").date(1));
const nextMonthDayjs = (0, vue.computed)(() => date.value.add(1, "month").date(1));
const prevYearDayjs = (0, vue.computed)(() => date.value.subtract(1, "year").date(1));
const nextYearDayjs = (0, vue.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 {
require_error.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
exports.useCalendar = useCalendar;
//# sourceMappingURL=use-calendar.js.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,92 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
const require_runtime = require('../../../_virtual/_rolldown/runtime.js');
const require_date = require('../../../constants/date.js');
const require_index = require('../../../hooks/use-locale/index.js');
const require_constants = require('../../time-picker/src/constants.js');
const require_utils = require('../../time-picker/src/utils.js');
const require_date_table = require('./date-table.js');
let vue = require("vue");
let dayjs = require("dayjs");
dayjs = require_runtime.__toESM(dayjs);
let dayjs_plugin_localeData_js = require("dayjs/plugin/localeData.js");
dayjs_plugin_localeData_js = require_runtime.__toESM(dayjs_plugin_localeData_js);
//#region ../../packages/components/calendar/src/use-date-table.ts
const useDateTable = (props, emit) => {
dayjs.default.extend(dayjs_plugin_localeData_js.default);
const firstDayOfWeek = dayjs.default.localeData().firstDayOfWeek();
const { t, lang } = require_index.useLocale();
const now = (0, dayjs.default)().locale(lang.value);
const isInRange = (0, vue.computed)(() => !!props.range && !!props.range.length);
const rows = (0, vue.computed)(() => {
let days = [];
if (isInRange.value) {
const [start, end] = props.range;
const currentMonthRange = require_utils.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 = require_utils.rangeArr(remaining).map((_, index) => ({
text: index + 1,
type: "next"
}));
days = currentMonthRange.concat(nextMonthRange);
} else {
const firstDay = props.date.startOf("month").day();
const prevMonthDays = require_date_table.getPrevMonthLastDays(props.date, (firstDay - firstDayOfWeek + 7) % 7).map((day) => ({
text: day,
type: "prev"
}));
const currentMonthDays = require_date_table.getMonthDays(props.date).map((day) => ({
text: day,
type: "current"
}));
days = [...prevMonthDays, ...currentMonthDays];
const nextMonthDays = require_utils.rangeArr(7 - (days.length % 7 || 7)).map((_, index) => ({
text: index + 1,
type: "next"
}));
days = days.concat(nextMonthDays);
}
return require_date_table.toNestedArr(days);
});
const weekDays = (0, vue.computed)(() => {
const start = firstDayOfWeek;
if (start === 0) return require_date.WEEK_DAYS.map((_) => t(`el.datepicker.weeks.${_}`));
else return require_date.WEEK_DAYS.slice(start).concat(require_date.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(require_constants.DEFAULT_FORMATS_DATE),
date: day.toDate()
};
};
return {
now,
isInRange,
rows,
weekDays,
getFormattedDate,
handlePickDay,
getSlotData
};
};
//#endregion
exports.useDateTable = useDateTable;
//# sourceMappingURL=use-date-table.js.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,6 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
require('../../base/style/css.js');
require('../../button/style/css.js');
require('../../button-group/style/css.js');
require('../../select/style/css.js');
require("element-plus/theme-chalk/el-calendar.css");
@@ -0,0 +1,6 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
require('../../base/style/index.js');
require('../../button/style/index.js');
require('../../button-group/style/index.js');
require('../../select/style/index.js');
require("element-plus/theme-chalk/src/calendar.scss");