前端初始化
This commit is contained in:
“hsc”
Generated
Vendored
+23
@@ -0,0 +1,23 @@
|
||||
import { DateCell } from "../types.js";
|
||||
import * as _$vue from "vue";
|
||||
|
||||
//#region ../../packages/components/date-picker-panel/src/date-picker-com/basic-cell-render.d.ts
|
||||
declare const _default: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
|
||||
readonly cell: {
|
||||
readonly type: _$vue.PropType<DateCell>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
}>, () => _$vue.VNode<_$vue.RendererNode, _$vue.RendererElement, {
|
||||
[key: string]: any;
|
||||
}>, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<_$vue.ExtractPropTypes<{
|
||||
readonly cell: {
|
||||
readonly type: _$vue.PropType<DateCell>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
}>> & Readonly<{}>, {}, {}, {}, {}, string, _$vue.ComponentProvideOptions, true, {}, any>;
|
||||
//#endregion
|
||||
export { _default as default };
|
||||
Generated
Vendored
+22
@@ -0,0 +1,22 @@
|
||||
require("../../../../_virtual/_rolldown/runtime.js");
|
||||
const require_index = require("../../../../hooks/use-namespace/index.js");
|
||||
const require_constants = require("../constants.js");
|
||||
const require_basic_cell = require("../props/basic-cell.js");
|
||||
let vue = require("vue");
|
||||
//#region ../../packages/components/date-picker-panel/src/date-picker-com/basic-cell-render.tsx
|
||||
var basic_cell_render_default = /* @__PURE__ */ (0, vue.defineComponent)({
|
||||
name: "ElDatePickerCell",
|
||||
props: require_basic_cell.basicCellProps,
|
||||
setup(props) {
|
||||
const ns = require_index.useNamespace("date-table-cell");
|
||||
const { slots } = (0, vue.inject)(require_constants.ROOT_PICKER_INJECTION_KEY);
|
||||
return () => {
|
||||
const { cell } = props;
|
||||
return (0, vue.renderSlot)(slots, "default", { ...cell }, () => [(0, vue.createVNode)("div", { "class": ns.b() }, [(0, vue.createVNode)("span", { "class": ns.e("text") }, [cell?.renderText ?? cell?.text])])]);
|
||||
};
|
||||
}
|
||||
});
|
||||
//#endregion
|
||||
exports.default = basic_cell_render_default;
|
||||
|
||||
//# sourceMappingURL=basic-cell-render.js.map
|
||||
Generated
Vendored
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"basic-cell-render.js","names":["defineComponent","inject","renderSlot","createVNode","_createVNode","useNamespace","ROOT_PICKER_INJECTION_KEY","basicCellProps","name","props","setup","ns","slots","cell","b","e","renderText","text"],"sources":["../../../../../../../packages/components/date-picker-panel/src/date-picker-com/basic-cell-render.tsx"],"sourcesContent":["import { defineComponent, inject, renderSlot } from 'vue'\nimport { useNamespace } from '@element-plus/hooks'\nimport { ROOT_PICKER_INJECTION_KEY } from '../constants'\nimport { basicCellProps } from '../props/basic-cell'\n\nexport default defineComponent({\n name: 'ElDatePickerCell',\n props: basicCellProps,\n setup(props) {\n const ns = useNamespace('date-table-cell')\n const { slots } = inject(ROOT_PICKER_INJECTION_KEY)!\n return () => {\n const { cell } = props\n\n return renderSlot(slots, 'default', { ...cell }, () => [\n <div class={ns.b()}>\n <span class={ns.e('text')}>{cell?.renderText ?? cell?.text}</span>\n </div>,\n ])\n }\n },\n})\n"],"mappings":";;;;;;AAKA,IAAA,4BAAeA,iBAAAA,GAAAA,IAAAA,iBAAgB;CAC7BQ,MAAM;CACNC,OAAOF,mBAAAA;CACPG,MAAMD,OAAO;EACX,MAAME,KAAKN,cAAAA,aAAa,kBAAkB;EAC1C,MAAM,EAAEO,WAAAA,GAAAA,IAAAA,QAAiBN,kBAAAA,0BAA2B;EACpD,aAAa;GACX,MAAM,EAAEO,SAASJ;GAEjB,QAAA,GAAA,IAAA,YAAkBG,OAAO,WAAW,EAAE,GAAGC,MAAM,QAAQ,EAAA,GAAA,IAAA,aAAA,OAAA,EAAA,SACzCF,GAAGG,GAAE,EAAC,EAAA,EAAA,GAAA,IAAA,aAAA,QAAA,EAAA,SACHH,GAAGI,EAAE,OAAM,EAAC,EAAA,CAAGF,MAAMG,cAAcH,MAAMI,KAAI,CAAA,CAAA,CAAA,CAE7D,CAAC;;;CAGP,CAAC"}
|
||||
Generated
Vendored
+10
@@ -0,0 +1,10 @@
|
||||
Object.defineProperties(exports, {
|
||||
__esModule: { value: true },
|
||||
[Symbol.toStringTag]: { value: "Module" }
|
||||
});
|
||||
//#region ../../packages/components/date-picker-panel/src/date-picker-com/basic-date-table.vue
|
||||
var basic_date_table_default = require("./basic-date-table.vue_vue_type_script_setup_true_lang.js").default;
|
||||
//#endregion
|
||||
exports.default = basic_date_table_default;
|
||||
|
||||
//# sourceMappingURL=basic-date-table.js.map
|
||||
Generated
Vendored
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"basic-date-table.js","names":[],"sources":["../../../../../../../packages/components/date-picker-panel/src/date-picker-com/basic-date-table.vue"],"sourcesContent":["<template>\n <table\n :aria-label=\"tableLabel\"\n :class=\"tableKls\"\n cellspacing=\"0\"\n cellpadding=\"0\"\n role=\"grid\"\n @click=\"handlePickDate\"\n @mousemove=\"handleMouseMove\"\n @mousedown=\"handleMouseDown\"\n @mouseup=\"handleMouseUp\"\n >\n <tbody ref=\"tbodyRef\">\n <tr>\n <th v-if=\"showWeekNumber\" scope=\"col\" :class=\"weekHeaderClass\" />\n <th\n v-for=\"(week, key) in WEEKS\"\n :key=\"key\"\n :aria-label=\"t('el.datepicker.weeksFull.' + week)\"\n scope=\"col\"\n >\n {{ t('el.datepicker.weeks.' + week) }}\n </th>\n </tr>\n <tr\n v-for=\"(row, rowKey) in rows\"\n :key=\"rowKey\"\n :class=\"getRowKls(showWeekNumber ? row[2] : row[1])\"\n >\n <td\n v-for=\"(cell, columnKey) in row\"\n :key=\"`${rowKey}.${columnKey}`\"\n :ref=\"\n (el) =>\n !isUnmounting &&\n isSelectedCell(cell) &&\n (currentCellRef = el as HTMLElement)\n \"\n :class=\"getCellClasses(cell)\"\n :aria-current=\"cell.isCurrent ? 'date' : undefined\"\n :aria-selected=\"cell.isCurrent\"\n :tabindex=\"disabled ? undefined : isSelectedCell(cell) ? 0 : -1\"\n :aria-disabled=\"disabled\"\n @focus=\"handleFocus\"\n >\n <el-date-picker-cell :cell=\"cell\" />\n </td>\n </tr>\n </tbody>\n </table>\n</template>\n\n<script lang=\"ts\" setup>\nimport { onBeforeUnmount } from 'vue'\nimport {\n basicDateTableEmits,\n basicDateTableProps,\n} from '../props/basic-date-table'\nimport {\n useBasicDateTable,\n useBasicDateTableDOM,\n} from '../composables/use-basic-date-table'\nimport ElDatePickerCell from './basic-cell-render'\n\nconst props = defineProps(basicDateTableProps)\nconst emit = defineEmits(basicDateTableEmits)\n\nconst {\n WEEKS,\n rows,\n tbodyRef,\n currentCellRef,\n\n focus,\n isCurrent,\n isWeekActive,\n isSelectedCell,\n\n handlePickDate,\n handleMouseUp,\n handleMouseDown,\n handleMouseMove,\n handleFocus,\n} = useBasicDateTable(props, emit)\nconst { tableLabel, tableKls, getCellClasses, getRowKls, weekHeaderClass, t } =\n useBasicDateTableDOM(props, {\n isCurrent,\n isWeekActive,\n })\nlet isUnmounting = false\n\nonBeforeUnmount(() => {\n isUnmounting = true\n})\n\ndefineExpose({\n /**\n * @description focus on current cell\n */\n focus,\n})\n</script>\n"],"mappings":""}
|
||||
Generated
Vendored
+108
@@ -0,0 +1,108 @@
|
||||
import { EpPropFinalized, EpPropMergeType } from "../../../../utils/vue/props/types.js";
|
||||
import { CellClassNameType, DisabledDateType, RangeState } from "../props/shared.js";
|
||||
import * as _$vue from "vue";
|
||||
import * as _$dayjs from "dayjs";
|
||||
|
||||
//#region ../../packages/components/date-picker-panel/src/date-picker-com/basic-date-table.vue.d.ts
|
||||
declare const __VLS_export: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
|
||||
readonly showWeekNumber: BooleanConstructor;
|
||||
readonly selectionMode: EpPropFinalized<StringConstructor, string, unknown, string, boolean>;
|
||||
readonly cellClassName: {
|
||||
readonly type: _$vue.PropType<CellClassNameType>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly disabledDate: {
|
||||
readonly type: _$vue.PropType<DisabledDateType>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly date: {
|
||||
readonly type: _$vue.PropType<_$dayjs.Dayjs>;
|
||||
readonly required: true;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly minDate: {
|
||||
readonly type: _$vue.PropType<EpPropMergeType<(new (...args: any[]) => _$dayjs.Dayjs) | (() => _$dayjs.Dayjs | null) | (((new (...args: any[]) => _$dayjs.Dayjs) | (() => _$dayjs.Dayjs | null)) | null)[], unknown, unknown>>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly maxDate: {
|
||||
readonly type: _$vue.PropType<EpPropMergeType<(new (...args: any[]) => _$dayjs.Dayjs) | (() => _$dayjs.Dayjs | null) | (((new (...args: any[]) => _$dayjs.Dayjs) | (() => _$dayjs.Dayjs | null)) | null)[], unknown, unknown>>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly parsedValue: {
|
||||
readonly type: _$vue.PropType<EpPropMergeType<(new (...args: any[]) => _$dayjs.Dayjs | _$dayjs.Dayjs[]) | (() => _$dayjs.Dayjs | _$dayjs.Dayjs[]) | (((new (...args: any[]) => _$dayjs.Dayjs | _$dayjs.Dayjs[]) | (() => _$dayjs.Dayjs | _$dayjs.Dayjs[])) | null)[], unknown, unknown>>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly rangeState: EpPropFinalized<(new (...args: any[]) => RangeState) | (() => RangeState) | (((new (...args: any[]) => RangeState) | (() => RangeState)) | null)[], unknown, unknown, () => {
|
||||
endDate: null;
|
||||
selecting: boolean;
|
||||
}, boolean>;
|
||||
readonly disabled: BooleanConstructor;
|
||||
}>, {
|
||||
/**
|
||||
* @description focus on current cell
|
||||
*/
|
||||
focus: () => Promise<void | undefined>;
|
||||
}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<_$vue.ExtractPropTypes<{
|
||||
readonly showWeekNumber: BooleanConstructor;
|
||||
readonly selectionMode: EpPropFinalized<StringConstructor, string, unknown, string, boolean>;
|
||||
readonly cellClassName: {
|
||||
readonly type: _$vue.PropType<CellClassNameType>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly disabledDate: {
|
||||
readonly type: _$vue.PropType<DisabledDateType>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly date: {
|
||||
readonly type: _$vue.PropType<_$dayjs.Dayjs>;
|
||||
readonly required: true;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly minDate: {
|
||||
readonly type: _$vue.PropType<EpPropMergeType<(new (...args: any[]) => _$dayjs.Dayjs) | (() => _$dayjs.Dayjs | null) | (((new (...args: any[]) => _$dayjs.Dayjs) | (() => _$dayjs.Dayjs | null)) | null)[], unknown, unknown>>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly maxDate: {
|
||||
readonly type: _$vue.PropType<EpPropMergeType<(new (...args: any[]) => _$dayjs.Dayjs) | (() => _$dayjs.Dayjs | null) | (((new (...args: any[]) => _$dayjs.Dayjs) | (() => _$dayjs.Dayjs | null)) | null)[], unknown, unknown>>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly parsedValue: {
|
||||
readonly type: _$vue.PropType<EpPropMergeType<(new (...args: any[]) => _$dayjs.Dayjs | _$dayjs.Dayjs[]) | (() => _$dayjs.Dayjs | _$dayjs.Dayjs[]) | (((new (...args: any[]) => _$dayjs.Dayjs | _$dayjs.Dayjs[]) | (() => _$dayjs.Dayjs | _$dayjs.Dayjs[])) | null)[], unknown, unknown>>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly rangeState: EpPropFinalized<(new (...args: any[]) => RangeState) | (() => RangeState) | (((new (...args: any[]) => RangeState) | (() => RangeState)) | null)[], unknown, unknown, () => {
|
||||
endDate: null;
|
||||
selecting: boolean;
|
||||
}, boolean>;
|
||||
readonly disabled: BooleanConstructor;
|
||||
}>> & Readonly<{}>, {
|
||||
readonly disabled: boolean;
|
||||
readonly showWeekNumber: boolean;
|
||||
readonly rangeState: RangeState;
|
||||
readonly selectionMode: string;
|
||||
}, {}, {}, {}, string, _$vue.ComponentProvideOptions, true, {}, any>;
|
||||
declare const _default: typeof __VLS_export;
|
||||
//#endregion
|
||||
export { _default as default };
|
||||
Generated
Vendored
+83
@@ -0,0 +1,83 @@
|
||||
require("../../../../_virtual/_rolldown/runtime.js");
|
||||
const require_basic_date_table = require("../props/basic-date-table.js");
|
||||
const require_use_basic_date_table = require("../composables/use-basic-date-table.js");
|
||||
const require_basic_cell_render = require("./basic-cell-render.js");
|
||||
let vue = require("vue");
|
||||
//#region ../../packages/components/date-picker-panel/src/date-picker-com/basic-date-table.vue?vue&type=script&setup=true&lang.ts
|
||||
const _hoisted_1 = ["aria-label"];
|
||||
const _hoisted_2 = ["aria-label"];
|
||||
const _hoisted_3 = [
|
||||
"aria-current",
|
||||
"aria-selected",
|
||||
"tabindex",
|
||||
"aria-disabled"
|
||||
];
|
||||
var basic_date_table_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
|
||||
__name: "basic-date-table",
|
||||
props: require_basic_date_table.basicDateTableProps,
|
||||
emits: require_basic_date_table.basicDateTableEmits,
|
||||
setup(__props, { expose: __expose, emit: __emit }) {
|
||||
const props = __props;
|
||||
const { WEEKS, rows, tbodyRef, currentCellRef, focus, isCurrent, isWeekActive, isSelectedCell, handlePickDate, handleMouseUp, handleMouseDown, handleMouseMove, handleFocus } = require_use_basic_date_table.useBasicDateTable(props, __emit);
|
||||
const { tableLabel, tableKls, getCellClasses, getRowKls, weekHeaderClass, t } = require_use_basic_date_table.useBasicDateTableDOM(props, {
|
||||
isCurrent,
|
||||
isWeekActive
|
||||
});
|
||||
let isUnmounting = false;
|
||||
(0, vue.onBeforeUnmount)(() => {
|
||||
isUnmounting = true;
|
||||
});
|
||||
__expose({
|
||||
/**
|
||||
* @description focus on current cell
|
||||
*/
|
||||
focus });
|
||||
return (_ctx, _cache) => {
|
||||
return (0, vue.openBlock)(), (0, vue.createElementBlock)("table", {
|
||||
"aria-label": (0, vue.unref)(tableLabel),
|
||||
class: (0, vue.normalizeClass)((0, vue.unref)(tableKls)),
|
||||
cellspacing: "0",
|
||||
cellpadding: "0",
|
||||
role: "grid",
|
||||
onClick: _cache[1] || (_cache[1] = (...args) => (0, vue.unref)(handlePickDate) && (0, vue.unref)(handlePickDate)(...args)),
|
||||
onMousemove: _cache[2] || (_cache[2] = (...args) => (0, vue.unref)(handleMouseMove) && (0, vue.unref)(handleMouseMove)(...args)),
|
||||
onMousedown: _cache[3] || (_cache[3] = (...args) => (0, vue.unref)(handleMouseDown) && (0, vue.unref)(handleMouseDown)(...args)),
|
||||
onMouseup: _cache[4] || (_cache[4] = (...args) => (0, vue.unref)(handleMouseUp) && (0, vue.unref)(handleMouseUp)(...args))
|
||||
}, [(0, vue.createElementVNode)("tbody", {
|
||||
ref_key: "tbodyRef",
|
||||
ref: tbodyRef
|
||||
}, [(0, vue.createElementVNode)("tr", null, [_ctx.showWeekNumber ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("th", {
|
||||
key: 0,
|
||||
scope: "col",
|
||||
class: (0, vue.normalizeClass)((0, vue.unref)(weekHeaderClass))
|
||||
}, null, 2)) : (0, vue.createCommentVNode)("v-if", true), ((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)((0, vue.unref)(WEEKS), (week, key) => {
|
||||
return (0, vue.openBlock)(), (0, vue.createElementBlock)("th", {
|
||||
key,
|
||||
"aria-label": (0, vue.unref)(t)("el.datepicker.weeksFull." + week),
|
||||
scope: "col"
|
||||
}, (0, vue.toDisplayString)((0, vue.unref)(t)("el.datepicker.weeks." + week)), 9, _hoisted_2);
|
||||
}), 128))]), ((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)((0, vue.unref)(rows), (row, rowKey) => {
|
||||
return (0, vue.openBlock)(), (0, vue.createElementBlock)("tr", {
|
||||
key: rowKey,
|
||||
class: (0, vue.normalizeClass)((0, vue.unref)(getRowKls)(_ctx.showWeekNumber ? row[2] : row[1]))
|
||||
}, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(row, (cell, columnKey) => {
|
||||
return (0, vue.openBlock)(), (0, vue.createElementBlock)("td", {
|
||||
key: `${rowKey}.${columnKey}`,
|
||||
ref_for: true,
|
||||
ref: (el) => !(0, vue.unref)(isUnmounting) && (0, vue.unref)(isSelectedCell)(cell) && (currentCellRef.value = el),
|
||||
class: (0, vue.normalizeClass)((0, vue.unref)(getCellClasses)(cell)),
|
||||
"aria-current": cell.isCurrent ? "date" : void 0,
|
||||
"aria-selected": cell.isCurrent,
|
||||
tabindex: _ctx.disabled ? void 0 : (0, vue.unref)(isSelectedCell)(cell) ? 0 : -1,
|
||||
"aria-disabled": _ctx.disabled,
|
||||
onFocus: _cache[0] || (_cache[0] = (...args) => (0, vue.unref)(handleFocus) && (0, vue.unref)(handleFocus)(...args))
|
||||
}, [(0, vue.createVNode)((0, vue.unref)(require_basic_cell_render.default), { cell }, null, 8, ["cell"])], 42, _hoisted_3);
|
||||
}), 128))], 2);
|
||||
}), 128))], 512)], 42, _hoisted_1);
|
||||
};
|
||||
}
|
||||
});
|
||||
//#endregion
|
||||
exports.default = basic_date_table_vue_vue_type_script_setup_true_lang_default;
|
||||
|
||||
//# sourceMappingURL=basic-date-table.vue_vue_type_script_setup_true_lang.js.map
|
||||
Generated
Vendored
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"basic-date-table.vue_vue_type_script_setup_true_lang.js","names":["showWeekNumber","disabled"],"sources":["../../../../../../../packages/components/date-picker-panel/src/date-picker-com/basic-date-table.vue"],"sourcesContent":["<template>\n <table\n :aria-label=\"tableLabel\"\n :class=\"tableKls\"\n cellspacing=\"0\"\n cellpadding=\"0\"\n role=\"grid\"\n @click=\"handlePickDate\"\n @mousemove=\"handleMouseMove\"\n @mousedown=\"handleMouseDown\"\n @mouseup=\"handleMouseUp\"\n >\n <tbody ref=\"tbodyRef\">\n <tr>\n <th v-if=\"showWeekNumber\" scope=\"col\" :class=\"weekHeaderClass\" />\n <th\n v-for=\"(week, key) in WEEKS\"\n :key=\"key\"\n :aria-label=\"t('el.datepicker.weeksFull.' + week)\"\n scope=\"col\"\n >\n {{ t('el.datepicker.weeks.' + week) }}\n </th>\n </tr>\n <tr\n v-for=\"(row, rowKey) in rows\"\n :key=\"rowKey\"\n :class=\"getRowKls(showWeekNumber ? row[2] : row[1])\"\n >\n <td\n v-for=\"(cell, columnKey) in row\"\n :key=\"`${rowKey}.${columnKey}`\"\n :ref=\"\n (el) =>\n !isUnmounting &&\n isSelectedCell(cell) &&\n (currentCellRef = el as HTMLElement)\n \"\n :class=\"getCellClasses(cell)\"\n :aria-current=\"cell.isCurrent ? 'date' : undefined\"\n :aria-selected=\"cell.isCurrent\"\n :tabindex=\"disabled ? undefined : isSelectedCell(cell) ? 0 : -1\"\n :aria-disabled=\"disabled\"\n @focus=\"handleFocus\"\n >\n <el-date-picker-cell :cell=\"cell\" />\n </td>\n </tr>\n </tbody>\n </table>\n</template>\n\n<script lang=\"ts\" setup>\nimport { onBeforeUnmount } from 'vue'\nimport {\n basicDateTableEmits,\n basicDateTableProps,\n} from '../props/basic-date-table'\nimport {\n useBasicDateTable,\n useBasicDateTableDOM,\n} from '../composables/use-basic-date-table'\nimport ElDatePickerCell from './basic-cell-render'\n\nconst props = defineProps(basicDateTableProps)\nconst emit = defineEmits(basicDateTableEmits)\n\nconst {\n WEEKS,\n rows,\n tbodyRef,\n currentCellRef,\n\n focus,\n isCurrent,\n isWeekActive,\n isSelectedCell,\n\n handlePickDate,\n handleMouseUp,\n handleMouseDown,\n handleMouseMove,\n handleFocus,\n} = useBasicDateTable(props, emit)\nconst { tableLabel, tableKls, getCellClasses, getRowKls, weekHeaderClass, t } =\n useBasicDateTableDOM(props, {\n isCurrent,\n isWeekActive,\n })\nlet isUnmounting = false\n\nonBeforeUnmount(() => {\n isUnmounting = true\n})\n\ndefineExpose({\n /**\n * @description focus on current cell\n */\n focus,\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;EAgEA,MAAM,QAAQ;EAGd,MAAM,EACJ,OACA,MACA,UACA,gBAEA,OACA,WACA,cACA,gBAEA,gBACA,eACA,iBACA,iBACA,gBACE,6BAAA,kBAAkB,OAAO,OAAI;EACjC,MAAM,EAAE,YAAY,UAAU,gBAAgB,WAAW,iBAAiB,MACxE,6BAAA,qBAAqB,OAAO;GAC1B;GACA;GACD,CAAA;EACH,IAAI,eAAe;EAEnB,CAAA,GAAA,IAAA,uBAAsB;GACpB,eAAe;IAChB;EAED,SAAa;;;;AAIX,OACD,CAAA;;4DAnDS,SAAA;IA/CL,eAAA,GAAA,IAAA,OAAY,WAAU;IACtB,QAAA,GAAA,IAAA,iBAAA,GAAA,IAAA,OAAO,SAAQ,CAAA;IAChB,aAAY;IACZ,aAAY;IACZ,MAAK;IACJ,SAAK,OAAA,OAAA,OAAA,MAAA,GAAA,UAAA,GAAA,IAAA,OAAE,eAAA,KAAA,GAAA,IAAA,OAAA,eAAA,CAAA,GAAA,KAAc;IACrB,aAAS,OAAA,OAAA,OAAA,MAAA,GAAA,UAAA,GAAA,IAAA,OAAE,gBAAA,KAAA,GAAA,IAAA,OAAA,gBAAA,CAAA,GAAA,KAAe;IAC1B,aAAS,OAAA,OAAA,OAAA,MAAA,GAAA,UAAA,GAAA,IAAA,OAAE,gBAAA,KAAA,GAAA,IAAA,OAAA,gBAAA,CAAA,GAAA,KAAe;IAC1B,WAAO,OAAA,OAAA,OAAA,MAAA,GAAA,UAAA,GAAA,IAAA,OAAE,cAAA,KAAA,GAAA,IAAA,OAAA,cAAA,CAAA,GAAA,KAAa;mCAsCf,SAAA;aApCG;IAAJ,KAAI;mCAWJ,MAAA,MAAA,CATOA,KAAAA,mBAAAA,GAAAA,IAAAA,YAAAA,GAAAA,GAAAA,IAAAA,oBAAuD,MAAA;;IAAvC,OAAM;IAAO,QAAA,GAAA,IAAA,iBAAA,GAAA,IAAA,OAAO,gBAAe,CAAA;oHAQxD,IAAA,UAAA,OAAA,GAAA,IAAA,aAAA,GAAA,IAAA,OANmB,MAAK,GAAnB,MAAM,QAAG;6DAMd,MAAA;KALG;KACL,eAAA,GAAA,IAAA,OAAY,EAAC,CAAA,6BAA8B,KAAI;KAChD,OAAM;+CAEH,EAAC,CAAA,yBAA0B,KAAI,CAAA,EAAA,GAAA,WAAA;uEA0BjC,IAAA,UAAA,OAAA,GAAA,IAAA,aAAA,GAAA,IAAA,OAtBqB,KAAI,GAApB,KAAK,WAAM;6DAsBhB,MAAA;KArBF,KAAK;KACL,QAAA,GAAA,IAAA,iBAAA,GAAA,IAAA,OAAO,UAAS,CAACA,KAAAA,iBAAiB,IAAG,KAAM,IAAG,GAAA,CAAA;+DAmB1C,IAAA,UAAA,OAAA,GAAA,IAAA,YAhByB,MAApB,MAAM,cAAS;8DAgBpB,MAAA;MAfF,KAAG,GAAK,OAAM,GAAI;;MAClB,MAAmB,OAAA,EAAA,GAAA,IAAA,OAAsB,aAAY,KAAA,GAAA,IAAA,OAAkB,eAAc,CAAC,KAAI,KAAoB,eAAA,QAAiB;MAM/H,QAAA,GAAA,IAAA,iBAAA,GAAA,IAAA,OAAO,eAAc,CAAC,KAAI,CAAA;MAC1B,gBAAc,KAAK,YAAS,SAAY,KAAA;MACxC,iBAAe,KAAK;MACpB,UAAUC,KAAAA,WAAW,KAAA,KAAA,GAAA,IAAA,OAAY,eAAc,CAAC,KAAI,GAAA,IAAA;MACpD,iBAAeA,KAAAA;MACf,SAAK,OAAA,OAAA,OAAA,MAAA,GAAA,UAAA,GAAA,IAAA,OAAE,YAAA,KAAA,GAAA,IAAA,OAAA,YAAA,CAAA,GAAA,KAAW;6CAEiB,0BAAA,QAAA,EAAA,EAAR,MAAI,EAAA,MAAA,GAAA,CAAA,OAAA,CAAA,CAAA,EAAA,IAAA,WAAA"}
|
||||
Generated
Vendored
+10
@@ -0,0 +1,10 @@
|
||||
Object.defineProperties(exports, {
|
||||
__esModule: { value: true },
|
||||
[Symbol.toStringTag]: { value: "Module" }
|
||||
});
|
||||
//#region ../../packages/components/date-picker-panel/src/date-picker-com/basic-month-table.vue
|
||||
var basic_month_table_default = require("./basic-month-table.vue_vue_type_script_setup_true_lang.js").default;
|
||||
//#endregion
|
||||
exports.default = basic_month_table_default;
|
||||
|
||||
//# sourceMappingURL=basic-month-table.js.map
|
||||
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
Generated
Vendored
+113
@@ -0,0 +1,113 @@
|
||||
import { EpPropFinalized, EpPropMergeType } from "../../../../utils/vue/props/types.js";
|
||||
import { CellClassNameType, DisabledDateType, RangeState } from "../props/shared.js";
|
||||
import * as _$vue from "vue";
|
||||
import dayjs from "dayjs";
|
||||
|
||||
//#region ../../packages/components/date-picker-panel/src/date-picker-com/basic-month-table.vue.d.ts
|
||||
declare const __VLS_export: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
|
||||
selectionMode: EpPropFinalized<StringConstructor, string, unknown, string, boolean>;
|
||||
cellClassName: {
|
||||
readonly type: _$vue.PropType<CellClassNameType>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
disabledDate: {
|
||||
readonly type: _$vue.PropType<DisabledDateType>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
date: {
|
||||
readonly type: _$vue.PropType<dayjs.Dayjs>;
|
||||
readonly required: true;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
minDate: {
|
||||
readonly type: _$vue.PropType<EpPropMergeType<(new (...args: any[]) => dayjs.Dayjs) | (() => dayjs.Dayjs | null) | (((new (...args: any[]) => dayjs.Dayjs) | (() => dayjs.Dayjs | null)) | null)[], unknown, unknown>>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
maxDate: {
|
||||
readonly type: _$vue.PropType<EpPropMergeType<(new (...args: any[]) => dayjs.Dayjs) | (() => dayjs.Dayjs | null) | (((new (...args: any[]) => dayjs.Dayjs) | (() => dayjs.Dayjs | null)) | null)[], unknown, unknown>>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
parsedValue: {
|
||||
readonly type: _$vue.PropType<EpPropMergeType<(new (...args: any[]) => dayjs.Dayjs | dayjs.Dayjs[]) | (() => dayjs.Dayjs | dayjs.Dayjs[]) | (((new (...args: any[]) => dayjs.Dayjs | dayjs.Dayjs[]) | (() => dayjs.Dayjs | dayjs.Dayjs[])) | null)[], unknown, unknown>>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
rangeState: EpPropFinalized<(new (...args: any[]) => RangeState) | (() => RangeState) | (((new (...args: any[]) => RangeState) | (() => RangeState)) | null)[], unknown, unknown, () => {
|
||||
endDate: null;
|
||||
selecting: boolean;
|
||||
}, boolean>;
|
||||
disabled: BooleanConstructor;
|
||||
}>, {
|
||||
/**
|
||||
* @description focus current cell
|
||||
*/
|
||||
focus: () => void;
|
||||
}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
|
||||
select: (...args: any[]) => void;
|
||||
pick: (...args: any[]) => void;
|
||||
changerange: (...args: any[]) => void;
|
||||
}, string, _$vue.PublicProps, Readonly<_$vue.ExtractPropTypes<{
|
||||
selectionMode: EpPropFinalized<StringConstructor, string, unknown, string, boolean>;
|
||||
cellClassName: {
|
||||
readonly type: _$vue.PropType<CellClassNameType>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
disabledDate: {
|
||||
readonly type: _$vue.PropType<DisabledDateType>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
date: {
|
||||
readonly type: _$vue.PropType<dayjs.Dayjs>;
|
||||
readonly required: true;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
minDate: {
|
||||
readonly type: _$vue.PropType<EpPropMergeType<(new (...args: any[]) => dayjs.Dayjs) | (() => dayjs.Dayjs | null) | (((new (...args: any[]) => dayjs.Dayjs) | (() => dayjs.Dayjs | null)) | null)[], unknown, unknown>>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
maxDate: {
|
||||
readonly type: _$vue.PropType<EpPropMergeType<(new (...args: any[]) => dayjs.Dayjs) | (() => dayjs.Dayjs | null) | (((new (...args: any[]) => dayjs.Dayjs) | (() => dayjs.Dayjs | null)) | null)[], unknown, unknown>>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
parsedValue: {
|
||||
readonly type: _$vue.PropType<EpPropMergeType<(new (...args: any[]) => dayjs.Dayjs | dayjs.Dayjs[]) | (() => dayjs.Dayjs | dayjs.Dayjs[]) | (((new (...args: any[]) => dayjs.Dayjs | dayjs.Dayjs[]) | (() => dayjs.Dayjs | dayjs.Dayjs[])) | null)[], unknown, unknown>>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
rangeState: EpPropFinalized<(new (...args: any[]) => RangeState) | (() => RangeState) | (((new (...args: any[]) => RangeState) | (() => RangeState)) | null)[], unknown, unknown, () => {
|
||||
endDate: null;
|
||||
selecting: boolean;
|
||||
}, boolean>;
|
||||
disabled: BooleanConstructor;
|
||||
}>> & Readonly<{
|
||||
onSelect?: ((...args: any[]) => any) | undefined;
|
||||
onPick?: ((...args: any[]) => any) | undefined;
|
||||
onChangerange?: ((...args: any[]) => any) | undefined;
|
||||
}>, {
|
||||
disabled: boolean;
|
||||
rangeState: RangeState;
|
||||
selectionMode: string;
|
||||
}, {}, {}, {}, string, _$vue.ComponentProvideOptions, true, {}, any>;
|
||||
declare const _default: typeof __VLS_export;
|
||||
//#endregion
|
||||
export { _default as default };
|
||||
Generated
Vendored
+212
@@ -0,0 +1,212 @@
|
||||
const require_runtime = require("../../../../_virtual/_rolldown/runtime.js");
|
||||
const require_style = require("../../../../utils/dom/style.js");
|
||||
const require_arrays = require("../../../../utils/arrays.js");
|
||||
const require_index = require("../../../../hooks/use-locale/index.js");
|
||||
const require_index$1 = require("../../../../hooks/use-namespace/index.js");
|
||||
const require_utils = require("../utils.js");
|
||||
const require_basic_cell_render = require("./basic-cell-render.js");
|
||||
const require_basic_month_table = require("../props/basic-month-table.js");
|
||||
let vue = require("vue");
|
||||
let dayjs = require("dayjs");
|
||||
dayjs = require_runtime.__toESM(dayjs);
|
||||
//#region ../../packages/components/date-picker-panel/src/date-picker-com/basic-month-table.vue?vue&type=script&setup=true&lang.ts
|
||||
const _hoisted_1 = ["aria-label"];
|
||||
const _hoisted_2 = [
|
||||
"aria-selected",
|
||||
"aria-label",
|
||||
"tabindex",
|
||||
"onKeydown"
|
||||
];
|
||||
var basic_month_table_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
|
||||
__name: "basic-month-table",
|
||||
props: require_basic_month_table.basicMonthTableProps,
|
||||
emits: [
|
||||
"changerange",
|
||||
"pick",
|
||||
"select"
|
||||
],
|
||||
setup(__props, { expose: __expose, emit: __emit }) {
|
||||
const props = __props;
|
||||
const emit = __emit;
|
||||
const ns = require_index$1.useNamespace("month-table");
|
||||
const { t, lang } = require_index.useLocale();
|
||||
const tbodyRef = (0, vue.ref)();
|
||||
const currentCellRef = (0, vue.ref)();
|
||||
const months = (0, vue.ref)(props.date.locale("en").localeData().monthsShort().map((_) => _.toLowerCase()));
|
||||
const tableRows = (0, vue.ref)([
|
||||
[],
|
||||
[],
|
||||
[]
|
||||
]);
|
||||
const lastRow = (0, vue.ref)();
|
||||
const lastColumn = (0, vue.ref)();
|
||||
const rows = (0, vue.computed)(() => {
|
||||
const rows = tableRows.value;
|
||||
const now = (0, dayjs.default)().locale(lang.value).startOf("month");
|
||||
for (let i = 0; i < 3; i++) {
|
||||
const row = rows[i];
|
||||
for (let j = 0; j < 4; j++) {
|
||||
const cell = row[j] ||= {
|
||||
row: i,
|
||||
column: j,
|
||||
type: "normal",
|
||||
inRange: false,
|
||||
start: false,
|
||||
end: false,
|
||||
text: -1,
|
||||
disabled: false,
|
||||
isSelected: false,
|
||||
customClass: void 0,
|
||||
date: void 0,
|
||||
dayjs: void 0,
|
||||
isCurrent: void 0,
|
||||
selected: void 0,
|
||||
renderText: void 0,
|
||||
timestamp: void 0
|
||||
};
|
||||
cell.type = "normal";
|
||||
const index = i * 4 + j;
|
||||
const calTime = props.date.startOf("year").month(index);
|
||||
const calEndDate = props.rangeState.endDate || props.maxDate || props.rangeState.selecting && props.minDate || null;
|
||||
cell.inRange = !!(props.minDate && calTime.isSameOrAfter(props.minDate, "month") && calEndDate && calTime.isSameOrBefore(calEndDate, "month")) || !!(props.minDate && calTime.isSameOrBefore(props.minDate, "month") && calEndDate && calTime.isSameOrAfter(calEndDate, "month"));
|
||||
if (props.minDate?.isSameOrAfter(calEndDate)) {
|
||||
cell.start = !!(calEndDate && calTime.isSame(calEndDate, "month"));
|
||||
cell.end = props.minDate && calTime.isSame(props.minDate, "month");
|
||||
} else {
|
||||
cell.start = !!(props.minDate && calTime.isSame(props.minDate, "month"));
|
||||
cell.end = !!(calEndDate && calTime.isSame(calEndDate, "month"));
|
||||
}
|
||||
if (now.isSame(calTime)) cell.type = "today";
|
||||
const cellDate = calTime.toDate();
|
||||
cell.text = index;
|
||||
cell.disabled = props.disabledDate?.(cellDate) || false;
|
||||
cell.date = cellDate;
|
||||
cell.customClass = props.cellClassName?.(cellDate);
|
||||
cell.dayjs = calTime;
|
||||
cell.timestamp = calTime.valueOf();
|
||||
cell.isSelected = isSelectedCell(cell);
|
||||
}
|
||||
}
|
||||
return rows;
|
||||
});
|
||||
const focus = () => {
|
||||
currentCellRef.value?.focus();
|
||||
};
|
||||
const getCellStyle = (cell) => {
|
||||
const style = {};
|
||||
const year = props.date.year();
|
||||
const today = /* @__PURE__ */ new Date();
|
||||
const month = cell.text;
|
||||
style.disabled = props.disabled || (props.disabledDate ? require_utils.datesInMonth(props.date, year, month, lang.value).every(props.disabledDate) : false);
|
||||
style.current = require_arrays.castArray(props.parsedValue).some((date) => dayjs.default.isDayjs(date) && date.year() === year && date.month() === month);
|
||||
style.today = today.getFullYear() === year && today.getMonth() === month;
|
||||
if (cell.customClass) style[cell.customClass] = true;
|
||||
if (cell.inRange) {
|
||||
style["in-range"] = true;
|
||||
if (cell.start) style["start-date"] = true;
|
||||
if (cell.end) style["end-date"] = true;
|
||||
}
|
||||
return style;
|
||||
};
|
||||
const isSelectedCell = (cell) => {
|
||||
const year = props.date.year();
|
||||
const month = cell.text;
|
||||
return require_arrays.castArray(props.date).some((date) => date.year() === year && date.month() === month);
|
||||
};
|
||||
const handleMouseMove = (event) => {
|
||||
if (!props.rangeState.selecting) return;
|
||||
let target = event.target;
|
||||
if (target.tagName === "SPAN") target = target.parentNode?.parentNode;
|
||||
if (target.tagName === "DIV") target = target.parentNode;
|
||||
if (target.tagName !== "TD") return;
|
||||
const row = target.parentNode.rowIndex;
|
||||
const column = target.cellIndex;
|
||||
if (rows.value[row][column].disabled) return;
|
||||
if (row !== lastRow.value || column !== lastColumn.value) {
|
||||
lastRow.value = row;
|
||||
lastColumn.value = column;
|
||||
emit("changerange", {
|
||||
selecting: true,
|
||||
endDate: props.date.startOf("year").month(row * 4 + column)
|
||||
});
|
||||
}
|
||||
};
|
||||
const handleMonthTableClick = (event) => {
|
||||
if (props.disabled) return;
|
||||
const target = event.target?.closest("td");
|
||||
if (target?.tagName !== "TD") return;
|
||||
if (require_style.hasClass(target, "disabled")) return;
|
||||
const column = target.cellIndex;
|
||||
const month = target.parentNode.rowIndex * 4 + column;
|
||||
const newDate = props.date.startOf("year").month(month);
|
||||
if (props.selectionMode === "months") {
|
||||
if (event.type === "keydown") {
|
||||
emit("pick", require_arrays.castArray(props.parsedValue), false);
|
||||
return;
|
||||
}
|
||||
const newMonth = require_utils.getValidDateOfMonth(props.date, props.date.year(), month, lang.value, props.disabledDate);
|
||||
emit("pick", require_style.hasClass(target, "current") ? require_arrays.castArray(props.parsedValue).filter((d) => d?.year() !== newMonth.year() || d?.month() !== newMonth.month()) : require_arrays.castArray(props.parsedValue).concat([(0, dayjs.default)(newMonth)]));
|
||||
} else if (props.selectionMode === "range") if (!props.rangeState.selecting) {
|
||||
emit("pick", {
|
||||
minDate: newDate,
|
||||
maxDate: null
|
||||
});
|
||||
emit("select", true);
|
||||
} else {
|
||||
if (props.minDate && newDate >= props.minDate) emit("pick", {
|
||||
minDate: props.minDate,
|
||||
maxDate: newDate
|
||||
});
|
||||
else emit("pick", {
|
||||
minDate: newDate,
|
||||
maxDate: props.minDate
|
||||
});
|
||||
emit("select", false);
|
||||
}
|
||||
else emit("pick", month);
|
||||
};
|
||||
(0, vue.watch)(() => props.date, async () => {
|
||||
if (tbodyRef.value?.contains(document.activeElement)) {
|
||||
await (0, vue.nextTick)();
|
||||
currentCellRef.value?.focus();
|
||||
}
|
||||
});
|
||||
__expose({
|
||||
/**
|
||||
* @description focus current cell
|
||||
*/
|
||||
focus });
|
||||
return (_ctx, _cache) => {
|
||||
return (0, vue.openBlock)(), (0, vue.createElementBlock)("table", {
|
||||
role: "grid",
|
||||
"aria-label": (0, vue.unref)(t)("el.datepicker.monthTablePrompt"),
|
||||
class: (0, vue.normalizeClass)((0, vue.unref)(ns).b()),
|
||||
onClick: handleMonthTableClick,
|
||||
onMousemove: handleMouseMove
|
||||
}, [(0, vue.createElementVNode)("tbody", {
|
||||
ref_key: "tbodyRef",
|
||||
ref: tbodyRef
|
||||
}, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(rows.value, (row, key) => {
|
||||
return (0, vue.openBlock)(), (0, vue.createElementBlock)("tr", { key }, [((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: key_,
|
||||
ref_for: true,
|
||||
ref: (el) => cell.isSelected && (currentCellRef.value = el),
|
||||
class: (0, vue.normalizeClass)(getCellStyle(cell)),
|
||||
"aria-selected": !!cell.isSelected,
|
||||
"aria-label": (0, vue.unref)(t)(`el.datepicker.month${+cell.text + 1}`),
|
||||
tabindex: cell.isSelected ? 0 : -1,
|
||||
onKeydown: [(0, vue.withKeys)((0, vue.withModifiers)(handleMonthTableClick, ["prevent", "stop"]), ["space"]), (0, vue.withKeys)((0, vue.withModifiers)(handleMonthTableClick, ["prevent", "stop"]), ["enter"])]
|
||||
}, [(0, vue.createVNode)((0, vue.unref)(require_basic_cell_render.default), { cell: {
|
||||
...cell,
|
||||
renderText: (0, vue.unref)(t)("el.datepicker.months." + months.value[cell.text])
|
||||
} }, null, 8, ["cell"])], 42, _hoisted_2);
|
||||
}), 128))]);
|
||||
}), 128))], 512)], 42, _hoisted_1);
|
||||
};
|
||||
}
|
||||
});
|
||||
//#endregion
|
||||
exports.default = basic_month_table_vue_vue_type_script_setup_true_lang_default;
|
||||
|
||||
//# sourceMappingURL=basic-month-table.vue_vue_type_script_setup_true_lang.js.map
|
||||
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
Generated
Vendored
+10
@@ -0,0 +1,10 @@
|
||||
Object.defineProperties(exports, {
|
||||
__esModule: { value: true },
|
||||
[Symbol.toStringTag]: { value: "Module" }
|
||||
});
|
||||
//#region ../../packages/components/date-picker-panel/src/date-picker-com/basic-year-table.vue
|
||||
var basic_year_table_default = require("./basic-year-table.vue_vue_type_script_setup_true_lang.js").default;
|
||||
//#endregion
|
||||
exports.default = basic_year_table_default;
|
||||
|
||||
//# sourceMappingURL=basic-year-table.js.map
|
||||
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
Generated
Vendored
+113
@@ -0,0 +1,113 @@
|
||||
import { EpPropFinalized, EpPropMergeType } from "../../../../utils/vue/props/types.js";
|
||||
import { CellClassNameType, DisabledDateType, RangeState } from "../props/shared.js";
|
||||
import * as _$vue from "vue";
|
||||
import dayjs from "dayjs";
|
||||
|
||||
//#region ../../packages/components/date-picker-panel/src/date-picker-com/basic-year-table.vue.d.ts
|
||||
declare const __VLS_export: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
|
||||
readonly selectionMode: EpPropFinalized<StringConstructor, string, unknown, string, boolean>;
|
||||
readonly cellClassName: {
|
||||
readonly type: _$vue.PropType<CellClassNameType>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly disabledDate: {
|
||||
readonly type: _$vue.PropType<DisabledDateType>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly date: {
|
||||
readonly type: _$vue.PropType<dayjs.Dayjs>;
|
||||
readonly required: true;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly minDate: {
|
||||
readonly type: _$vue.PropType<EpPropMergeType<(new (...args: any[]) => dayjs.Dayjs) | (() => dayjs.Dayjs | null) | (((new (...args: any[]) => dayjs.Dayjs) | (() => dayjs.Dayjs | null)) | null)[], unknown, unknown>>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly maxDate: {
|
||||
readonly type: _$vue.PropType<EpPropMergeType<(new (...args: any[]) => dayjs.Dayjs) | (() => dayjs.Dayjs | null) | (((new (...args: any[]) => dayjs.Dayjs) | (() => dayjs.Dayjs | null)) | null)[], unknown, unknown>>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly parsedValue: {
|
||||
readonly type: _$vue.PropType<EpPropMergeType<(new (...args: any[]) => dayjs.Dayjs | dayjs.Dayjs[]) | (() => dayjs.Dayjs | dayjs.Dayjs[]) | (((new (...args: any[]) => dayjs.Dayjs | dayjs.Dayjs[]) | (() => dayjs.Dayjs | dayjs.Dayjs[])) | null)[], unknown, unknown>>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly rangeState: EpPropFinalized<(new (...args: any[]) => RangeState) | (() => RangeState) | (((new (...args: any[]) => RangeState) | (() => RangeState)) | null)[], unknown, unknown, () => {
|
||||
endDate: null;
|
||||
selecting: boolean;
|
||||
}, boolean>;
|
||||
readonly disabled: BooleanConstructor;
|
||||
}>, {
|
||||
/**
|
||||
* @description focus on the current cell
|
||||
*/
|
||||
focus: () => void;
|
||||
}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
|
||||
select: (...args: any[]) => void;
|
||||
pick: (...args: any[]) => void;
|
||||
changerange: (...args: any[]) => void;
|
||||
}, string, _$vue.PublicProps, Readonly<_$vue.ExtractPropTypes<{
|
||||
readonly selectionMode: EpPropFinalized<StringConstructor, string, unknown, string, boolean>;
|
||||
readonly cellClassName: {
|
||||
readonly type: _$vue.PropType<CellClassNameType>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly disabledDate: {
|
||||
readonly type: _$vue.PropType<DisabledDateType>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly date: {
|
||||
readonly type: _$vue.PropType<dayjs.Dayjs>;
|
||||
readonly required: true;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly minDate: {
|
||||
readonly type: _$vue.PropType<EpPropMergeType<(new (...args: any[]) => dayjs.Dayjs) | (() => dayjs.Dayjs | null) | (((new (...args: any[]) => dayjs.Dayjs) | (() => dayjs.Dayjs | null)) | null)[], unknown, unknown>>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly maxDate: {
|
||||
readonly type: _$vue.PropType<EpPropMergeType<(new (...args: any[]) => dayjs.Dayjs) | (() => dayjs.Dayjs | null) | (((new (...args: any[]) => dayjs.Dayjs) | (() => dayjs.Dayjs | null)) | null)[], unknown, unknown>>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly parsedValue: {
|
||||
readonly type: _$vue.PropType<EpPropMergeType<(new (...args: any[]) => dayjs.Dayjs | dayjs.Dayjs[]) | (() => dayjs.Dayjs | dayjs.Dayjs[]) | (((new (...args: any[]) => dayjs.Dayjs | dayjs.Dayjs[]) | (() => dayjs.Dayjs | dayjs.Dayjs[])) | null)[], unknown, unknown>>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly rangeState: EpPropFinalized<(new (...args: any[]) => RangeState) | (() => RangeState) | (((new (...args: any[]) => RangeState) | (() => RangeState)) | null)[], unknown, unknown, () => {
|
||||
endDate: null;
|
||||
selecting: boolean;
|
||||
}, boolean>;
|
||||
readonly disabled: BooleanConstructor;
|
||||
}>> & Readonly<{
|
||||
onSelect?: ((...args: any[]) => any) | undefined;
|
||||
onPick?: ((...args: any[]) => any) | undefined;
|
||||
onChangerange?: ((...args: any[]) => any) | undefined;
|
||||
}>, {
|
||||
readonly disabled: boolean;
|
||||
readonly rangeState: RangeState;
|
||||
readonly selectionMode: string;
|
||||
}, {}, {}, {}, string, _$vue.ComponentProvideOptions, true, {}, any>;
|
||||
declare const _default: typeof __VLS_export;
|
||||
//#endregion
|
||||
export { _default as default };
|
||||
Generated
Vendored
+214
@@ -0,0 +1,214 @@
|
||||
const require_runtime = require("../../../../_virtual/_rolldown/runtime.js");
|
||||
const require_style = require("../../../../utils/dom/style.js");
|
||||
const require_arrays = require("../../../../utils/arrays.js");
|
||||
const require_index = require("../../../../hooks/use-locale/index.js");
|
||||
const require_index$1 = require("../../../../hooks/use-namespace/index.js");
|
||||
const require_utils = require("../../../time-picker/src/utils.js");
|
||||
const require_utils$1 = require("../utils.js");
|
||||
const require_basic_cell_render = require("./basic-cell-render.js");
|
||||
const require_basic_year_table = require("../props/basic-year-table.js");
|
||||
let vue = require("vue");
|
||||
let dayjs = require("dayjs");
|
||||
dayjs = require_runtime.__toESM(dayjs);
|
||||
//#region ../../packages/components/date-picker-panel/src/date-picker-com/basic-year-table.vue?vue&type=script&setup=true&lang.ts
|
||||
const _hoisted_1 = ["aria-label"];
|
||||
const _hoisted_2 = [
|
||||
"aria-selected",
|
||||
"aria-label",
|
||||
"tabindex",
|
||||
"onKeydown"
|
||||
];
|
||||
var basic_year_table_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
|
||||
__name: "basic-year-table",
|
||||
props: require_basic_year_table.basicYearTableProps,
|
||||
emits: [
|
||||
"changerange",
|
||||
"pick",
|
||||
"select"
|
||||
],
|
||||
setup(__props, { expose: __expose, emit: __emit }) {
|
||||
const datesInYear = (year, lang) => {
|
||||
const firstDay = (0, dayjs.default)(String(year)).locale(lang).startOf("year");
|
||||
return require_utils.rangeArr(firstDay.endOf("year").dayOfYear()).map((n) => firstDay.add(n, "day").toDate());
|
||||
};
|
||||
const props = __props;
|
||||
const emit = __emit;
|
||||
const ns = require_index$1.useNamespace("year-table");
|
||||
const { t, lang } = require_index.useLocale();
|
||||
const tbodyRef = (0, vue.ref)();
|
||||
const currentCellRef = (0, vue.ref)();
|
||||
const startYear = (0, vue.computed)(() => {
|
||||
return Math.floor(props.date.year() / 10) * 10;
|
||||
});
|
||||
const tableRows = (0, vue.ref)([
|
||||
[],
|
||||
[],
|
||||
[]
|
||||
]);
|
||||
const lastRow = (0, vue.ref)();
|
||||
const lastColumn = (0, vue.ref)();
|
||||
const rows = (0, vue.computed)(() => {
|
||||
const rows = tableRows.value;
|
||||
const now = (0, dayjs.default)().locale(lang.value).startOf("year");
|
||||
for (let i = 0; i < 3; i++) {
|
||||
const row = rows[i];
|
||||
for (let j = 0; j < 4; j++) {
|
||||
if (i * 4 + j >= 10) break;
|
||||
let cell = row[j];
|
||||
if (!cell) cell = {
|
||||
row: i,
|
||||
column: j,
|
||||
type: "normal",
|
||||
inRange: false,
|
||||
start: false,
|
||||
end: false,
|
||||
text: -1,
|
||||
disabled: false,
|
||||
isSelected: false,
|
||||
customClass: void 0,
|
||||
date: void 0,
|
||||
dayjs: void 0,
|
||||
isCurrent: void 0,
|
||||
selected: void 0,
|
||||
renderText: void 0,
|
||||
timestamp: void 0
|
||||
};
|
||||
cell.type = "normal";
|
||||
const index = i * 4 + j + startYear.value;
|
||||
const calTime = (0, dayjs.default)().year(index);
|
||||
const calEndDate = props.rangeState.endDate || props.maxDate || props.rangeState.selecting && props.minDate || null;
|
||||
cell.inRange = !!(props.minDate && calTime.isSameOrAfter(props.minDate, "year") && calEndDate && calTime.isSameOrBefore(calEndDate, "year")) || !!(props.minDate && calTime.isSameOrBefore(props.minDate, "year") && calEndDate && calTime.isSameOrAfter(calEndDate, "year"));
|
||||
if (props.minDate?.isSameOrAfter(calEndDate)) {
|
||||
cell.start = !!(calEndDate && calTime.isSame(calEndDate, "year"));
|
||||
cell.end = !!(props.minDate && calTime.isSame(props.minDate, "year"));
|
||||
} else {
|
||||
cell.start = !!(props.minDate && calTime.isSame(props.minDate, "year"));
|
||||
cell.end = !!(calEndDate && calTime.isSame(calEndDate, "year"));
|
||||
}
|
||||
if (now.isSame(calTime)) cell.type = "today";
|
||||
cell.text = index;
|
||||
const cellDate = calTime.toDate();
|
||||
cell.disabled = props.disabledDate?.(cellDate) || false;
|
||||
cell.date = cellDate;
|
||||
cell.customClass = props.cellClassName?.(cellDate);
|
||||
cell.dayjs = calTime;
|
||||
cell.timestamp = calTime.valueOf();
|
||||
cell.isSelected = isSelectedCell(cell);
|
||||
row[j] = cell;
|
||||
}
|
||||
}
|
||||
return rows;
|
||||
});
|
||||
const focus = () => {
|
||||
currentCellRef.value?.focus();
|
||||
};
|
||||
const getCellKls = (cell) => {
|
||||
const kls = {};
|
||||
const today = (0, dayjs.default)().locale(lang.value);
|
||||
const year = cell.text;
|
||||
kls.disabled = props.disabled || (props.disabledDate ? datesInYear(year, lang.value).every(props.disabledDate) : false);
|
||||
kls.today = today.year() === year;
|
||||
kls.current = require_arrays.castArray(props.parsedValue).some((d) => d.year() === year);
|
||||
if (cell.customClass) kls[cell.customClass] = true;
|
||||
if (cell.inRange) {
|
||||
kls["in-range"] = true;
|
||||
if (cell.start) kls["start-date"] = true;
|
||||
if (cell.end) kls["end-date"] = true;
|
||||
}
|
||||
return kls;
|
||||
};
|
||||
const isSelectedCell = (cell) => {
|
||||
const year = cell.text;
|
||||
return require_arrays.castArray(props.date).some((date) => date.year() === year);
|
||||
};
|
||||
const handleYearTableClick = (event) => {
|
||||
if (props.disabled) return;
|
||||
const target = event.target?.closest("td");
|
||||
if (!target || !target.textContent || require_style.hasClass(target, "disabled")) return;
|
||||
const column = target.cellIndex;
|
||||
const selectedYear = target.parentNode.rowIndex * 4 + column + startYear.value;
|
||||
const newDate = (0, dayjs.default)().year(selectedYear);
|
||||
if (props.selectionMode === "range") if (!props.rangeState.selecting) {
|
||||
emit("pick", {
|
||||
minDate: newDate,
|
||||
maxDate: null
|
||||
});
|
||||
emit("select", true);
|
||||
} else {
|
||||
if (props.minDate && newDate >= props.minDate) emit("pick", {
|
||||
minDate: props.minDate,
|
||||
maxDate: newDate
|
||||
});
|
||||
else emit("pick", {
|
||||
minDate: newDate,
|
||||
maxDate: props.minDate
|
||||
});
|
||||
emit("select", false);
|
||||
}
|
||||
else if (props.selectionMode === "years") {
|
||||
if (event.type === "keydown") {
|
||||
emit("pick", require_arrays.castArray(props.parsedValue), false);
|
||||
return;
|
||||
}
|
||||
const vaildYear = require_utils$1.getValidDateOfYear(newDate.startOf("year"), lang.value, props.disabledDate);
|
||||
emit("pick", require_style.hasClass(target, "current") ? require_arrays.castArray(props.parsedValue).filter((d) => d?.year() !== selectedYear) : require_arrays.castArray(props.parsedValue).concat([vaildYear]));
|
||||
} else emit("pick", selectedYear);
|
||||
};
|
||||
const handleMouseMove = (event) => {
|
||||
if (!props.rangeState.selecting) return;
|
||||
const target = event.target?.closest("td");
|
||||
if (!target) return;
|
||||
const row = target.parentNode.rowIndex;
|
||||
const column = target.cellIndex;
|
||||
if (rows.value[row][column].disabled) return;
|
||||
if (row !== lastRow.value || column !== lastColumn.value) {
|
||||
lastRow.value = row;
|
||||
lastColumn.value = column;
|
||||
emit("changerange", {
|
||||
selecting: true,
|
||||
endDate: (0, dayjs.default)().year(startYear.value).add(row * 4 + column, "year")
|
||||
});
|
||||
}
|
||||
};
|
||||
(0, vue.watch)(() => props.date, async () => {
|
||||
if (tbodyRef.value?.contains(document.activeElement)) {
|
||||
await (0, vue.nextTick)();
|
||||
currentCellRef.value?.focus();
|
||||
}
|
||||
});
|
||||
__expose({
|
||||
/**
|
||||
* @description focus on the current cell
|
||||
*/
|
||||
focus });
|
||||
return (_ctx, _cache) => {
|
||||
return (0, vue.openBlock)(), (0, vue.createElementBlock)("table", {
|
||||
role: "grid",
|
||||
"aria-label": (0, vue.unref)(t)("el.datepicker.yearTablePrompt"),
|
||||
class: (0, vue.normalizeClass)((0, vue.unref)(ns).b()),
|
||||
onClick: handleYearTableClick,
|
||||
onMousemove: handleMouseMove
|
||||
}, [(0, vue.createElementVNode)("tbody", {
|
||||
ref_key: "tbodyRef",
|
||||
ref: tbodyRef
|
||||
}, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(rows.value, (row, rowKey) => {
|
||||
return (0, vue.openBlock)(), (0, vue.createElementBlock)("tr", { key: rowKey }, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(row, (cell, cellKey) => {
|
||||
return (0, vue.openBlock)(), (0, vue.createElementBlock)("td", {
|
||||
key: `${rowKey}_${cellKey}`,
|
||||
ref_for: true,
|
||||
ref: (el) => cell.isSelected && (currentCellRef.value = el),
|
||||
class: (0, vue.normalizeClass)(["available", getCellKls(cell)]),
|
||||
"aria-selected": cell.isSelected,
|
||||
"aria-label": String(cell.text),
|
||||
tabindex: cell.isSelected ? 0 : -1,
|
||||
onKeydown: [(0, vue.withKeys)((0, vue.withModifiers)(handleYearTableClick, ["prevent", "stop"]), ["space"]), (0, vue.withKeys)((0, vue.withModifiers)(handleYearTableClick, ["prevent", "stop"]), ["enter"])]
|
||||
}, [(0, vue.createVNode)((0, vue.unref)(require_basic_cell_render.default), { cell }, null, 8, ["cell"])], 42, _hoisted_2);
|
||||
}), 128))]);
|
||||
}), 128))], 512)], 42, _hoisted_1);
|
||||
};
|
||||
}
|
||||
});
|
||||
//#endregion
|
||||
exports.default = basic_year_table_vue_vue_type_script_setup_true_lang_default;
|
||||
|
||||
//# sourceMappingURL=basic-year-table.vue_vue_type_script_setup_true_lang.js.map
|
||||
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
Generated
Vendored
+10
@@ -0,0 +1,10 @@
|
||||
Object.defineProperties(exports, {
|
||||
__esModule: { value: true },
|
||||
[Symbol.toStringTag]: { value: "Module" }
|
||||
});
|
||||
//#region ../../packages/components/date-picker-panel/src/date-picker-com/panel-date-pick.vue
|
||||
var panel_date_pick_default = require("./panel-date-pick.vue_vue_type_script_setup_true_lang.js").default;
|
||||
//#endregion
|
||||
exports.default = panel_date_pick_default;
|
||||
|
||||
//# sourceMappingURL=panel-date-pick.js.map
|
||||
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
Generated
Vendored
+96
@@ -0,0 +1,96 @@
|
||||
import { EpPropFinalized, EpPropMergeType } from "../../../../utils/vue/props/types.js";
|
||||
import { DayOrDays } from "../../../time-picker/src/common/props.js";
|
||||
import * as _$vue from "vue";
|
||||
import dayjs from "dayjs";
|
||||
|
||||
//#region ../../packages/components/date-picker-panel/src/date-picker-com/panel-date-pick.vue.d.ts
|
||||
declare var __VLS_1: {
|
||||
class: string;
|
||||
}, __VLS_27: {}, __VLS_40: {}, __VLS_53: {}, __VLS_66: {};
|
||||
type __VLS_Slots = {} & {
|
||||
sidebar?: (props: typeof __VLS_1) => any;
|
||||
} & {
|
||||
'prev-year'?: (props: typeof __VLS_27) => any;
|
||||
} & {
|
||||
'prev-month'?: (props: typeof __VLS_40) => any;
|
||||
} & {
|
||||
'next-month'?: (props: typeof __VLS_53) => any;
|
||||
} & {
|
||||
'next-year'?: (props: typeof __VLS_66) => any;
|
||||
};
|
||||
declare const __VLS_base: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
|
||||
readonly parsedValue: {
|
||||
readonly type: _$vue.PropType<EpPropMergeType<(new (...args: any[]) => dayjs.Dayjs | [dayjs.Dayjs, dayjs.Dayjs]) | (() => DayOrDays) | (((new (...args: any[]) => dayjs.Dayjs | [dayjs.Dayjs, dayjs.Dayjs]) | (() => DayOrDays)) | null)[], unknown, unknown>>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly visible: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
|
||||
readonly format: EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
|
||||
readonly type: {
|
||||
readonly type: _$vue.PropType<EpPropMergeType<(new (...args: any[]) => "year" | "months" | "month" | "years" | "date" | "dates" | "week" | "datetime" | "datetimerange" | "daterange" | "monthrange" | "yearrange") | (() => "year" | "months" | "month" | "years" | "date" | "dates" | "week" | "datetime" | "datetimerange" | "daterange" | "monthrange" | "yearrange") | (((new (...args: any[]) => "year" | "months" | "month" | "years" | "date" | "dates" | "week" | "datetime" | "datetimerange" | "daterange" | "monthrange" | "yearrange") | (() => "year" | "months" | "month" | "years" | "date" | "dates" | "week" | "datetime" | "datetimerange" | "daterange" | "monthrange" | "yearrange")) | null)[], "year" | "months" | "month" | "years" | "date" | "dates" | "week" | "datetime" | "datetimerange" | "daterange" | "monthrange" | "yearrange", unknown>>;
|
||||
readonly required: true;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly dateFormat: StringConstructor;
|
||||
readonly timeFormat: StringConstructor;
|
||||
readonly showNow: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
|
||||
readonly showConfirm: BooleanConstructor;
|
||||
readonly showFooter: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
|
||||
readonly showWeekNumber: BooleanConstructor;
|
||||
readonly border: BooleanConstructor;
|
||||
readonly disabled: BooleanConstructor;
|
||||
readonly editable: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
|
||||
}>, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
|
||||
"panel-change": (...args: any[]) => void;
|
||||
pick: (...args: any[]) => void;
|
||||
"set-picker-option": (...args: any[]) => void;
|
||||
}, string, _$vue.PublicProps, Readonly<_$vue.ExtractPropTypes<{
|
||||
readonly parsedValue: {
|
||||
readonly type: _$vue.PropType<EpPropMergeType<(new (...args: any[]) => dayjs.Dayjs | [dayjs.Dayjs, dayjs.Dayjs]) | (() => DayOrDays) | (((new (...args: any[]) => dayjs.Dayjs | [dayjs.Dayjs, dayjs.Dayjs]) | (() => DayOrDays)) | null)[], unknown, unknown>>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly visible: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
|
||||
readonly format: EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
|
||||
readonly type: {
|
||||
readonly type: _$vue.PropType<EpPropMergeType<(new (...args: any[]) => "year" | "months" | "month" | "years" | "date" | "dates" | "week" | "datetime" | "datetimerange" | "daterange" | "monthrange" | "yearrange") | (() => "year" | "months" | "month" | "years" | "date" | "dates" | "week" | "datetime" | "datetimerange" | "daterange" | "monthrange" | "yearrange") | (((new (...args: any[]) => "year" | "months" | "month" | "years" | "date" | "dates" | "week" | "datetime" | "datetimerange" | "daterange" | "monthrange" | "yearrange") | (() => "year" | "months" | "month" | "years" | "date" | "dates" | "week" | "datetime" | "datetimerange" | "daterange" | "monthrange" | "yearrange")) | null)[], "year" | "months" | "month" | "years" | "date" | "dates" | "week" | "datetime" | "datetimerange" | "daterange" | "monthrange" | "yearrange", unknown>>;
|
||||
readonly required: true;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly dateFormat: StringConstructor;
|
||||
readonly timeFormat: StringConstructor;
|
||||
readonly showNow: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
|
||||
readonly showConfirm: BooleanConstructor;
|
||||
readonly showFooter: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
|
||||
readonly showWeekNumber: BooleanConstructor;
|
||||
readonly border: BooleanConstructor;
|
||||
readonly disabled: BooleanConstructor;
|
||||
readonly editable: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
|
||||
}>> & Readonly<{
|
||||
"onPanel-change"?: ((...args: any[]) => any) | undefined;
|
||||
onPick?: ((...args: any[]) => any) | undefined;
|
||||
"onSet-picker-option"?: ((...args: any[]) => any) | undefined;
|
||||
}>, {
|
||||
readonly disabled: boolean;
|
||||
readonly visible: EpPropMergeType<BooleanConstructor, unknown, unknown>;
|
||||
readonly border: boolean;
|
||||
readonly editable: EpPropMergeType<BooleanConstructor, unknown, unknown>;
|
||||
readonly format: string;
|
||||
readonly showNow: EpPropMergeType<BooleanConstructor, unknown, unknown>;
|
||||
readonly showConfirm: boolean;
|
||||
readonly showFooter: EpPropMergeType<BooleanConstructor, unknown, unknown>;
|
||||
readonly showWeekNumber: boolean;
|
||||
}, {}, {}, {}, string, _$vue.ComponentProvideOptions, true, {}, 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 as default };
|
||||
Generated
Vendored
+647
@@ -0,0 +1,647 @@
|
||||
const require_runtime = require("../../../../_virtual/_rolldown/runtime.js");
|
||||
const require_aria = require("../../../../constants/aria.js");
|
||||
const require_event = require("../../../../utils/dom/event.js");
|
||||
const require_arrays = require("../../../../utils/arrays.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("../../../icon/index.js");
|
||||
const require_use_form_common_props = require("../../../form/src/hooks/use-form-common-props.js");
|
||||
const require_index$3 = require("../../../input/index.js");
|
||||
const require_index$4 = require("../../../button/index.js");
|
||||
const require_constants = require("../../../time-picker/src/constants.js");
|
||||
const require_utils = require("../../../time-picker/src/utils.js");
|
||||
const require_index$5 = require("../../../../directives/click-outside/index.js");
|
||||
const require_panel_time_pick = require("../../../time-picker/src/time-picker-com/panel-time-pick.js");
|
||||
const require_panel_date_pick = require("../props/panel-date-pick.js");
|
||||
const require_utils$1 = require("../utils.js");
|
||||
const require_basic_date_table = require("./basic-date-table.js");
|
||||
const require_basic_month_table = require("./basic-month-table.js");
|
||||
const require_basic_year_table = require("./basic-year-table.js");
|
||||
let _element_plus_icons_vue = require("@element-plus/icons-vue");
|
||||
let vue = require("vue");
|
||||
let dayjs = require("dayjs");
|
||||
dayjs = require_runtime.__toESM(dayjs);
|
||||
let _vue_shared = require("@vue/shared");
|
||||
//#region ../../packages/components/date-picker-panel/src/date-picker-com/panel-date-pick.vue?vue&type=script&setup=true&lang.ts
|
||||
const _hoisted_1 = ["disabled", "onClick"];
|
||||
const _hoisted_2 = ["aria-label", "disabled"];
|
||||
const _hoisted_3 = ["aria-label", "disabled"];
|
||||
const _hoisted_4 = ["tabindex", "aria-disabled"];
|
||||
const _hoisted_5 = ["tabindex", "aria-disabled"];
|
||||
const _hoisted_6 = ["aria-label", "disabled"];
|
||||
const _hoisted_7 = ["aria-label", "disabled"];
|
||||
var panel_date_pick_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
|
||||
__name: "panel-date-pick",
|
||||
props: require_panel_date_pick.panelDatePickProps,
|
||||
emits: [
|
||||
"pick",
|
||||
"set-picker-option",
|
||||
"panel-change"
|
||||
],
|
||||
setup(__props, { emit: __emit }) {
|
||||
const timeWithinRange = (_, __, ___) => true;
|
||||
const props = __props;
|
||||
const contextEmit = __emit;
|
||||
const ppNs = require_index$1.useNamespace("picker-panel");
|
||||
const dpNs = require_index$1.useNamespace("date-picker");
|
||||
const attrs = (0, vue.useAttrs)();
|
||||
const slots = (0, vue.useSlots)();
|
||||
const { t, lang } = require_index.useLocale();
|
||||
const pickerBase = (0, vue.inject)(require_constants.PICKER_BASE_INJECTION_KEY);
|
||||
const { shortcuts, disabledDate, cellClassName, defaultTime } = pickerBase.props;
|
||||
const defaultValue = (0, vue.toRef)(pickerBase.props, "defaultValue");
|
||||
const currentViewRef = (0, vue.ref)();
|
||||
const innerDate = (0, vue.ref)((0, dayjs.default)().locale(lang.value));
|
||||
const isChangeToNow = (0, vue.ref)(false);
|
||||
let isShortcut = false;
|
||||
const defaultTimeD = (0, vue.computed)(() => {
|
||||
return (0, dayjs.default)(defaultTime).locale(lang.value);
|
||||
});
|
||||
const month = (0, vue.computed)(() => {
|
||||
return innerDate.value.month();
|
||||
});
|
||||
const year = (0, vue.computed)(() => {
|
||||
return innerDate.value.year();
|
||||
});
|
||||
const selectableRange = (0, vue.ref)([]);
|
||||
const userInputDate = (0, vue.ref)(null);
|
||||
const userInputTime = (0, vue.ref)(null);
|
||||
const checkDateWithinRange = (date) => {
|
||||
return selectableRange.value.length > 0 ? timeWithinRange(date, selectableRange.value, props.format || "HH:mm:ss") : true;
|
||||
};
|
||||
const formatEmit = (emitDayjs) => {
|
||||
if (defaultTime && !visibleTime.value && !isChangeToNow.value && !isShortcut) return defaultTimeD.value.year(emitDayjs.year()).month(emitDayjs.month()).date(emitDayjs.date());
|
||||
if (showTime.value) return emitDayjs.millisecond(0);
|
||||
return emitDayjs.startOf("day");
|
||||
};
|
||||
const emit = (value, ...args) => {
|
||||
if (!value) contextEmit("pick", value, ...args);
|
||||
else if ((0, _vue_shared.isArray)(value)) contextEmit("pick", value.map(formatEmit), ...args);
|
||||
else contextEmit("pick", formatEmit(value), ...args);
|
||||
userInputDate.value = null;
|
||||
userInputTime.value = null;
|
||||
isChangeToNow.value = false;
|
||||
isShortcut = false;
|
||||
};
|
||||
const handleDatePick = async (value, keepOpen) => {
|
||||
if (selectionMode.value === "date" && dayjs.default.isDayjs(value)) {
|
||||
const parsedDateValue = require_arrays.extractFirst(props.parsedValue);
|
||||
let newDate = parsedDateValue ? parsedDateValue.year(value.year()).month(value.month()).date(value.date()) : value;
|
||||
if (!checkDateWithinRange(newDate)) newDate = selectableRange.value[0][0].year(value.year()).month(value.month()).date(value.date());
|
||||
innerDate.value = newDate;
|
||||
emit(newDate, showTime.value || keepOpen);
|
||||
} else if (selectionMode.value === "week") emit(value.date);
|
||||
else if (selectionMode.value === "dates") emit(value, true);
|
||||
};
|
||||
const moveByMonth = (forward) => {
|
||||
const action = forward ? "add" : "subtract";
|
||||
innerDate.value = innerDate.value[action](1, "month");
|
||||
handlePanelChange("month");
|
||||
};
|
||||
const moveByYear = (forward) => {
|
||||
const currentDate = innerDate.value;
|
||||
const action = forward ? "add" : "subtract";
|
||||
innerDate.value = currentView.value === "year" ? currentDate[action](10, "year") : currentDate[action](1, "year");
|
||||
handlePanelChange("year");
|
||||
};
|
||||
const currentView = (0, vue.ref)("date");
|
||||
const yearLabel = (0, vue.computed)(() => {
|
||||
const yearTranslation = t("el.datepicker.year");
|
||||
if (currentView.value === "year") {
|
||||
const startYear = Math.floor(year.value / 10) * 10;
|
||||
if (yearTranslation) return `${startYear} ${yearTranslation} - ${startYear + 9} ${yearTranslation}`;
|
||||
return `${startYear} - ${startYear + 9}`;
|
||||
}
|
||||
return `${year.value} ${yearTranslation}`;
|
||||
});
|
||||
const handleShortcutClick = (shortcut) => {
|
||||
const shortcutValue = (0, _vue_shared.isFunction)(shortcut.value) ? shortcut.value() : shortcut.value;
|
||||
if (shortcutValue) {
|
||||
isShortcut = true;
|
||||
emit((0, dayjs.default)(shortcutValue).locale(lang.value));
|
||||
return;
|
||||
}
|
||||
if (shortcut.onClick) shortcut.onClick({
|
||||
attrs,
|
||||
slots,
|
||||
emit: contextEmit
|
||||
});
|
||||
};
|
||||
const selectionMode = (0, vue.computed)(() => {
|
||||
const { type } = props;
|
||||
if ([
|
||||
"week",
|
||||
"month",
|
||||
"months",
|
||||
"year",
|
||||
"years",
|
||||
"dates"
|
||||
].includes(type)) return type;
|
||||
return "date";
|
||||
});
|
||||
const isMultipleType = (0, vue.computed)(() => {
|
||||
return selectionMode.value === "dates" || selectionMode.value === "months" || selectionMode.value === "years";
|
||||
});
|
||||
const keyboardMode = (0, vue.computed)(() => {
|
||||
return selectionMode.value === "date" ? currentView.value : selectionMode.value;
|
||||
});
|
||||
const hasShortcuts = (0, vue.computed)(() => !!shortcuts.length);
|
||||
const handleMonthPick = async (month, keepOpen) => {
|
||||
if (selectionMode.value === "month") {
|
||||
innerDate.value = require_utils$1.getValidDateOfMonth(innerDate.value, innerDate.value.year(), month, lang.value, disabledDate);
|
||||
emit(innerDate.value, false);
|
||||
} else if (selectionMode.value === "months") emit(month, keepOpen ?? true);
|
||||
else {
|
||||
innerDate.value = require_utils$1.getValidDateOfMonth(innerDate.value, innerDate.value.year(), month, lang.value, disabledDate);
|
||||
currentView.value = "date";
|
||||
if ([
|
||||
"month",
|
||||
"year",
|
||||
"date",
|
||||
"week"
|
||||
].includes(selectionMode.value)) {
|
||||
emit(innerDate.value, true);
|
||||
await (0, vue.nextTick)();
|
||||
handleFocusPicker();
|
||||
}
|
||||
}
|
||||
handlePanelChange("month");
|
||||
};
|
||||
const handleYearPick = async (year, keepOpen) => {
|
||||
if (selectionMode.value === "year") {
|
||||
innerDate.value = require_utils$1.getValidDateOfYear(innerDate.value.startOf("year").year(year), lang.value, disabledDate);
|
||||
emit(innerDate.value, false);
|
||||
} else if (selectionMode.value === "years") emit(year, keepOpen ?? true);
|
||||
else {
|
||||
innerDate.value = require_utils$1.getValidDateOfYear(innerDate.value.year(year), lang.value, disabledDate);
|
||||
currentView.value = "month";
|
||||
if ([
|
||||
"month",
|
||||
"year",
|
||||
"date",
|
||||
"week"
|
||||
].includes(selectionMode.value)) {
|
||||
emit(innerDate.value, true);
|
||||
await (0, vue.nextTick)();
|
||||
handleFocusPicker();
|
||||
}
|
||||
}
|
||||
handlePanelChange("year");
|
||||
};
|
||||
const dateDisabled = require_use_form_common_props.useFormDisabled();
|
||||
const showPicker = async (view) => {
|
||||
if (dateDisabled.value) return;
|
||||
currentView.value = view;
|
||||
await (0, vue.nextTick)();
|
||||
handleFocusPicker();
|
||||
};
|
||||
const showTime = (0, vue.computed)(() => props.type === "datetime" || props.type === "datetimerange");
|
||||
const footerVisible = (0, vue.computed)(() => {
|
||||
const showDateFooter = showTime.value || selectionMode.value === "dates";
|
||||
const showYearFooter = selectionMode.value === "years";
|
||||
const showMonthFooter = selectionMode.value === "months";
|
||||
const isDateView = currentView.value === "date";
|
||||
const isYearView = currentView.value === "year";
|
||||
const isMonthView = currentView.value === "month";
|
||||
return showDateFooter && isDateView || showYearFooter && isYearView || showMonthFooter && isMonthView;
|
||||
});
|
||||
const footerFilled = (0, vue.computed)(() => !isMultipleType.value && props.showNow || props.showConfirm);
|
||||
const disabledConfirm = (0, vue.computed)(() => {
|
||||
if (!disabledDate) return false;
|
||||
if (!props.parsedValue) return true;
|
||||
if ((0, _vue_shared.isArray)(props.parsedValue)) return disabledDate(props.parsedValue[0].toDate());
|
||||
return disabledDate(props.parsedValue.toDate());
|
||||
});
|
||||
const onConfirm = () => {
|
||||
if (isMultipleType.value) emit(props.parsedValue);
|
||||
else {
|
||||
let result = require_arrays.extractFirst(props.parsedValue);
|
||||
if (!result) {
|
||||
const defaultTimeD = (0, dayjs.default)(defaultTime).locale(lang.value);
|
||||
const defaultValueD = getDefaultValue();
|
||||
result = defaultTimeD.year(defaultValueD.year()).month(defaultValueD.month()).date(defaultValueD.date());
|
||||
}
|
||||
innerDate.value = result;
|
||||
emit(result);
|
||||
}
|
||||
};
|
||||
const disabledNow = (0, vue.computed)(() => {
|
||||
if (!disabledDate) return false;
|
||||
return disabledDate((0, dayjs.default)().locale(lang.value).toDate());
|
||||
});
|
||||
const changeToNow = () => {
|
||||
const nowDate = (0, dayjs.default)().locale(lang.value).toDate();
|
||||
isChangeToNow.value = true;
|
||||
if ((!disabledDate || !disabledDate(nowDate)) && checkDateWithinRange(nowDate)) {
|
||||
innerDate.value = (0, dayjs.default)().locale(lang.value);
|
||||
emit(innerDate.value);
|
||||
}
|
||||
};
|
||||
const timeFormat = (0, vue.computed)(() => {
|
||||
return props.timeFormat || require_utils.extractTimeFormat(props.format) || "HH:mm:ss";
|
||||
});
|
||||
const dateFormat = (0, vue.computed)(() => {
|
||||
return props.dateFormat || require_utils.extractDateFormat(props.format) || "YYYY-MM-DD";
|
||||
});
|
||||
const visibleTime = (0, vue.computed)(() => {
|
||||
if (userInputTime.value) return userInputTime.value;
|
||||
if (!props.parsedValue && !defaultValue.value) return;
|
||||
return (require_arrays.extractFirst(props.parsedValue) || innerDate.value).format(timeFormat.value);
|
||||
});
|
||||
const visibleDate = (0, vue.computed)(() => {
|
||||
if (userInputDate.value) return userInputDate.value;
|
||||
if (!props.parsedValue && !defaultValue.value) return;
|
||||
return (require_arrays.extractFirst(props.parsedValue) || innerDate.value).format(dateFormat.value);
|
||||
});
|
||||
const timePickerVisible = (0, vue.ref)(false);
|
||||
const onTimePickerInputFocus = () => {
|
||||
timePickerVisible.value = true;
|
||||
};
|
||||
const handleTimePickClose = () => {
|
||||
timePickerVisible.value = false;
|
||||
};
|
||||
const getUnits = (date) => {
|
||||
return {
|
||||
hour: date.hour(),
|
||||
minute: date.minute(),
|
||||
second: date.second(),
|
||||
year: date.year(),
|
||||
month: date.month(),
|
||||
date: date.date()
|
||||
};
|
||||
};
|
||||
const handleTimePick = (value, visible, first) => {
|
||||
const { hour, minute, second } = getUnits(value);
|
||||
const parsedDateValue = require_arrays.extractFirst(props.parsedValue);
|
||||
innerDate.value = parsedDateValue ? parsedDateValue.hour(hour).minute(minute).second(second) : value;
|
||||
emit(innerDate.value, true);
|
||||
if (!first) timePickerVisible.value = visible;
|
||||
};
|
||||
const handleVisibleTimeChange = (value) => {
|
||||
const newDate = (0, dayjs.default)(value, timeFormat.value).locale(lang.value);
|
||||
if (newDate.isValid() && checkDateWithinRange(newDate)) {
|
||||
const { year, month, date } = getUnits(innerDate.value);
|
||||
innerDate.value = newDate.year(year).month(month).date(date);
|
||||
userInputTime.value = null;
|
||||
timePickerVisible.value = false;
|
||||
emit(innerDate.value, true);
|
||||
}
|
||||
};
|
||||
const handleVisibleDateChange = (value) => {
|
||||
const newDate = require_utils$1.correctlyParseUserInput(value, dateFormat.value, lang.value);
|
||||
if (newDate.isValid()) {
|
||||
if (disabledDate && disabledDate(newDate.toDate())) return;
|
||||
const { hour, minute, second } = getUnits(innerDate.value);
|
||||
innerDate.value = newDate.hour(hour).minute(minute).second(second);
|
||||
userInputDate.value = null;
|
||||
emit(innerDate.value, true);
|
||||
}
|
||||
};
|
||||
const isValidValue = (date) => {
|
||||
return dayjs.default.isDayjs(date) && date.isValid() && (disabledDate ? !disabledDate(date.toDate()) : true);
|
||||
};
|
||||
const parseUserInput = (value) => {
|
||||
return require_utils$1.correctlyParseUserInput(value, props.format, lang.value);
|
||||
};
|
||||
const getDefaultValue = () => {
|
||||
const parseDate = (0, dayjs.default)(defaultValue.value).locale(lang.value);
|
||||
if (!defaultValue.value) {
|
||||
const defaultTimeDValue = defaultTimeD.value;
|
||||
return (0, dayjs.default)().hour(defaultTimeDValue.hour()).minute(defaultTimeDValue.minute()).second(defaultTimeDValue.second()).locale(lang.value);
|
||||
}
|
||||
return parseDate;
|
||||
};
|
||||
const handleFocusPicker = () => {
|
||||
if ([
|
||||
"week",
|
||||
"month",
|
||||
"year",
|
||||
"date"
|
||||
].includes(selectionMode.value)) currentViewRef.value?.focus();
|
||||
};
|
||||
const _handleFocusPicker = () => {
|
||||
handleFocusPicker();
|
||||
if (selectionMode.value === "week") handleKeyControl(require_aria.EVENT_CODE.down);
|
||||
};
|
||||
const handleKeydownTable = (event) => {
|
||||
const code = require_event.getEventCode(event);
|
||||
if ([
|
||||
require_aria.EVENT_CODE.up,
|
||||
require_aria.EVENT_CODE.down,
|
||||
require_aria.EVENT_CODE.left,
|
||||
require_aria.EVENT_CODE.right,
|
||||
require_aria.EVENT_CODE.home,
|
||||
require_aria.EVENT_CODE.end,
|
||||
require_aria.EVENT_CODE.pageUp,
|
||||
require_aria.EVENT_CODE.pageDown
|
||||
].includes(code)) {
|
||||
handleKeyControl(code);
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
}
|
||||
if ([
|
||||
require_aria.EVENT_CODE.enter,
|
||||
require_aria.EVENT_CODE.space,
|
||||
require_aria.EVENT_CODE.numpadEnter
|
||||
].includes(code) && userInputDate.value === null && userInputTime.value === null) {
|
||||
event.preventDefault();
|
||||
emit(innerDate.value, false);
|
||||
}
|
||||
};
|
||||
const handleKeyControl = (code) => {
|
||||
const { up, down, left, right, home, end, pageUp, pageDown } = require_aria.EVENT_CODE;
|
||||
const mapping = {
|
||||
year: {
|
||||
[up]: -4,
|
||||
[down]: 4,
|
||||
[left]: -1,
|
||||
[right]: 1,
|
||||
offset: (date, step) => date.setFullYear(date.getFullYear() + step)
|
||||
},
|
||||
month: {
|
||||
[up]: -4,
|
||||
[down]: 4,
|
||||
[left]: -1,
|
||||
[right]: 1,
|
||||
offset: (date, step) => date.setMonth(date.getMonth() + step)
|
||||
},
|
||||
week: {
|
||||
[up]: -1,
|
||||
[down]: 1,
|
||||
[left]: -1,
|
||||
[right]: 1,
|
||||
offset: (date, step) => date.setDate(date.getDate() + step * 7)
|
||||
},
|
||||
date: {
|
||||
[up]: -7,
|
||||
[down]: 7,
|
||||
[left]: -1,
|
||||
[right]: 1,
|
||||
[home]: (date) => -date.getDay(),
|
||||
[end]: (date) => -date.getDay() + 6,
|
||||
[pageUp]: (date) => -new Date(date.getFullYear(), date.getMonth(), 0).getDate(),
|
||||
[pageDown]: (date) => new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate(),
|
||||
offset: (date, step) => date.setDate(date.getDate() + step)
|
||||
}
|
||||
};
|
||||
const newDate = innerDate.value.toDate();
|
||||
while (Math.abs(innerDate.value.diff(newDate, "year", true)) < 1) {
|
||||
const map = mapping[keyboardMode.value];
|
||||
if (!map) return;
|
||||
map.offset(newDate, (0, _vue_shared.isFunction)(map[code]) ? map[code](newDate) : map[code] ?? 0);
|
||||
if (disabledDate && disabledDate(newDate)) break;
|
||||
const result = (0, dayjs.default)(newDate).locale(lang.value);
|
||||
innerDate.value = result;
|
||||
contextEmit("pick", result, true);
|
||||
break;
|
||||
}
|
||||
};
|
||||
const handlePanelChange = (mode) => {
|
||||
contextEmit("panel-change", innerDate.value.toDate(), mode, currentView.value);
|
||||
};
|
||||
(0, vue.watch)(() => selectionMode.value, (val) => {
|
||||
if (["month", "year"].includes(val)) {
|
||||
currentView.value = val;
|
||||
return;
|
||||
} else if (val === "years") {
|
||||
currentView.value = "year";
|
||||
return;
|
||||
} else if (val === "months") {
|
||||
currentView.value = "month";
|
||||
return;
|
||||
}
|
||||
currentView.value = "date";
|
||||
}, { immediate: true });
|
||||
(0, vue.watch)(() => defaultValue.value, (val) => {
|
||||
if (val) innerDate.value = getDefaultValue();
|
||||
}, { immediate: true });
|
||||
(0, vue.watch)(() => props.parsedValue, (val) => {
|
||||
if (val) {
|
||||
if (isMultipleType.value) return;
|
||||
if ((0, _vue_shared.isArray)(val)) return;
|
||||
innerDate.value = val;
|
||||
} else innerDate.value = getDefaultValue();
|
||||
}, { immediate: true });
|
||||
contextEmit("set-picker-option", ["isValidValue", isValidValue]);
|
||||
contextEmit("set-picker-option", ["parseUserInput", parseUserInput]);
|
||||
contextEmit("set-picker-option", ["handleFocusPicker", _handleFocusPicker]);
|
||||
return (_ctx, _cache) => {
|
||||
return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", { class: (0, vue.normalizeClass)([
|
||||
(0, vue.unref)(ppNs).b(),
|
||||
(0, vue.unref)(dpNs).b(),
|
||||
(0, vue.unref)(ppNs).is("border", _ctx.border),
|
||||
(0, vue.unref)(ppNs).is("disabled", (0, vue.unref)(dateDisabled)),
|
||||
{
|
||||
"has-sidebar": _ctx.$slots.sidebar || hasShortcuts.value,
|
||||
"has-time": showTime.value
|
||||
}
|
||||
]) }, [(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(ppNs).e("body-wrapper")) }, [
|
||||
(0, vue.renderSlot)(_ctx.$slots, "sidebar", { class: (0, vue.normalizeClass)((0, vue.unref)(ppNs).e("sidebar")) }),
|
||||
hasShortcuts.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
|
||||
key: 0,
|
||||
class: (0, vue.normalizeClass)((0, vue.unref)(ppNs).e("sidebar"))
|
||||
}, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)((0, vue.unref)(shortcuts), (shortcut, key) => {
|
||||
return (0, vue.openBlock)(), (0, vue.createElementBlock)("button", {
|
||||
key,
|
||||
type: "button",
|
||||
disabled: (0, vue.unref)(dateDisabled),
|
||||
class: (0, vue.normalizeClass)((0, vue.unref)(ppNs).e("shortcut")),
|
||||
onClick: ($event) => handleShortcutClick(shortcut)
|
||||
}, (0, vue.toDisplayString)(shortcut.text), 11, _hoisted_1);
|
||||
}), 128))], 2)) : (0, vue.createCommentVNode)("v-if", true),
|
||||
(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(ppNs).e("body")) }, [
|
||||
showTime.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
|
||||
key: 0,
|
||||
class: (0, vue.normalizeClass)((0, vue.unref)(dpNs).e("time-header"))
|
||||
}, [(0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)((0, vue.unref)(dpNs).e("editor-wrap")) }, [(0, vue.createVNode)((0, vue.unref)(require_index$3.ElInput), {
|
||||
placeholder: (0, vue.unref)(t)("el.datepicker.selectDate"),
|
||||
"model-value": visibleDate.value,
|
||||
size: "small",
|
||||
"validate-event": false,
|
||||
disabled: (0, vue.unref)(dateDisabled),
|
||||
readonly: !_ctx.editable,
|
||||
onInput: _cache[0] || (_cache[0] = (val) => userInputDate.value = val),
|
||||
onChange: handleVisibleDateChange
|
||||
}, null, 8, [
|
||||
"placeholder",
|
||||
"model-value",
|
||||
"disabled",
|
||||
"readonly"
|
||||
])], 2), (0, vue.withDirectives)(((0, vue.openBlock)(), (0, vue.createElementBlock)("span", { class: (0, vue.normalizeClass)((0, vue.unref)(dpNs).e("editor-wrap")) }, [(0, vue.createVNode)((0, vue.unref)(require_index$3.ElInput), {
|
||||
placeholder: (0, vue.unref)(t)("el.datepicker.selectTime"),
|
||||
"model-value": visibleTime.value,
|
||||
size: "small",
|
||||
"validate-event": false,
|
||||
disabled: (0, vue.unref)(dateDisabled),
|
||||
readonly: !_ctx.editable,
|
||||
onFocus: onTimePickerInputFocus,
|
||||
onInput: _cache[1] || (_cache[1] = (val) => userInputTime.value = val),
|
||||
onChange: handleVisibleTimeChange
|
||||
}, null, 8, [
|
||||
"placeholder",
|
||||
"model-value",
|
||||
"disabled",
|
||||
"readonly"
|
||||
]), (0, vue.createVNode)((0, vue.unref)(require_panel_time_pick.default), {
|
||||
visible: timePickerVisible.value,
|
||||
format: timeFormat.value,
|
||||
"parsed-value": innerDate.value,
|
||||
onPick: handleTimePick
|
||||
}, null, 8, [
|
||||
"visible",
|
||||
"format",
|
||||
"parsed-value"
|
||||
])], 2)), [[(0, vue.unref)(require_index$5.default), handleTimePickClose]])], 2)) : (0, vue.createCommentVNode)("v-if", true),
|
||||
(0, vue.withDirectives)((0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)([(0, vue.unref)(dpNs).e("header"), (currentView.value === "year" || currentView.value === "month") && (0, vue.unref)(dpNs).em("header", "bordered")]) }, [
|
||||
(0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)((0, vue.unref)(dpNs).e("prev-btn")) }, [(0, vue.createElementVNode)("button", {
|
||||
type: "button",
|
||||
"aria-label": (0, vue.unref)(t)(`el.datepicker.prevYear`),
|
||||
class: (0, vue.normalizeClass)(["d-arrow-left", (0, vue.unref)(ppNs).e("icon-btn")]),
|
||||
disabled: (0, vue.unref)(dateDisabled),
|
||||
onClick: _cache[2] || (_cache[2] = ($event) => moveByYear(false))
|
||||
}, [(0, vue.renderSlot)(_ctx.$slots, "prev-year", {}, () => [(0, vue.createVNode)((0, vue.unref)(require_index$2.ElIcon), null, {
|
||||
default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_element_plus_icons_vue.DArrowLeft))]),
|
||||
_: 1
|
||||
})])], 10, _hoisted_2), (0, vue.withDirectives)((0, vue.createElementVNode)("button", {
|
||||
type: "button",
|
||||
"aria-label": (0, vue.unref)(t)(`el.datepicker.prevMonth`),
|
||||
class: (0, vue.normalizeClass)([(0, vue.unref)(ppNs).e("icon-btn"), "arrow-left"]),
|
||||
disabled: (0, vue.unref)(dateDisabled),
|
||||
onClick: _cache[3] || (_cache[3] = ($event) => moveByMonth(false))
|
||||
}, [(0, vue.renderSlot)(_ctx.$slots, "prev-month", {}, () => [(0, vue.createVNode)((0, vue.unref)(require_index$2.ElIcon), null, {
|
||||
default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_element_plus_icons_vue.ArrowLeft))]),
|
||||
_: 1
|
||||
})])], 10, _hoisted_3), [[vue.vShow, currentView.value === "date"]])], 2),
|
||||
(0, vue.createElementVNode)("span", {
|
||||
role: "button",
|
||||
class: (0, vue.normalizeClass)((0, vue.unref)(dpNs).e("header-label")),
|
||||
"aria-live": "polite",
|
||||
tabindex: _ctx.disabled ? void 0 : 0,
|
||||
"aria-disabled": _ctx.disabled,
|
||||
onKeydown: _cache[4] || (_cache[4] = (0, vue.withKeys)(($event) => showPicker("year"), ["enter"])),
|
||||
onClick: _cache[5] || (_cache[5] = ($event) => showPicker("year"))
|
||||
}, (0, vue.toDisplayString)(yearLabel.value), 43, _hoisted_4),
|
||||
(0, vue.withDirectives)((0, vue.createElementVNode)("span", {
|
||||
role: "button",
|
||||
"aria-live": "polite",
|
||||
tabindex: _ctx.disabled ? void 0 : 0,
|
||||
"aria-disabled": _ctx.disabled,
|
||||
class: (0, vue.normalizeClass)([(0, vue.unref)(dpNs).e("header-label"), { active: currentView.value === "month" }]),
|
||||
onKeydown: _cache[6] || (_cache[6] = (0, vue.withKeys)(($event) => showPicker("month"), ["enter"])),
|
||||
onClick: _cache[7] || (_cache[7] = ($event) => showPicker("month"))
|
||||
}, (0, vue.toDisplayString)((0, vue.unref)(t)(`el.datepicker.month${month.value + 1}`)), 43, _hoisted_5), [[vue.vShow, currentView.value === "date"]]),
|
||||
(0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)((0, vue.unref)(dpNs).e("next-btn")) }, [(0, vue.withDirectives)((0, vue.createElementVNode)("button", {
|
||||
type: "button",
|
||||
"aria-label": (0, vue.unref)(t)(`el.datepicker.nextMonth`),
|
||||
class: (0, vue.normalizeClass)([(0, vue.unref)(ppNs).e("icon-btn"), "arrow-right"]),
|
||||
disabled: (0, vue.unref)(dateDisabled),
|
||||
onClick: _cache[8] || (_cache[8] = ($event) => moveByMonth(true))
|
||||
}, [(0, vue.renderSlot)(_ctx.$slots, "next-month", {}, () => [(0, vue.createVNode)((0, vue.unref)(require_index$2.ElIcon), null, {
|
||||
default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_element_plus_icons_vue.ArrowRight))]),
|
||||
_: 1
|
||||
})])], 10, _hoisted_6), [[vue.vShow, currentView.value === "date"]]), (0, vue.createElementVNode)("button", {
|
||||
type: "button",
|
||||
"aria-label": (0, vue.unref)(t)(`el.datepicker.nextYear`),
|
||||
class: (0, vue.normalizeClass)([(0, vue.unref)(ppNs).e("icon-btn"), "d-arrow-right"]),
|
||||
disabled: (0, vue.unref)(dateDisabled),
|
||||
onClick: _cache[9] || (_cache[9] = ($event) => moveByYear(true))
|
||||
}, [(0, vue.renderSlot)(_ctx.$slots, "next-year", {}, () => [(0, vue.createVNode)((0, vue.unref)(require_index$2.ElIcon), null, {
|
||||
default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_element_plus_icons_vue.DArrowRight))]),
|
||||
_: 1
|
||||
})])], 10, _hoisted_7)], 2)
|
||||
], 2), [[vue.vShow, currentView.value !== "time"]]),
|
||||
(0, vue.createElementVNode)("div", {
|
||||
class: (0, vue.normalizeClass)((0, vue.unref)(ppNs).e("content")),
|
||||
onKeydown: handleKeydownTable
|
||||
}, [
|
||||
currentView.value === "date" ? ((0, vue.openBlock)(), (0, vue.createBlock)(require_basic_date_table.default, {
|
||||
key: 0,
|
||||
ref_key: "currentViewRef",
|
||||
ref: currentViewRef,
|
||||
"selection-mode": selectionMode.value,
|
||||
date: innerDate.value,
|
||||
"parsed-value": _ctx.parsedValue,
|
||||
"disabled-date": (0, vue.unref)(disabledDate),
|
||||
disabled: (0, vue.unref)(dateDisabled),
|
||||
"cell-class-name": (0, vue.unref)(cellClassName),
|
||||
"show-week-number": _ctx.showWeekNumber,
|
||||
onPick: handleDatePick
|
||||
}, null, 8, [
|
||||
"selection-mode",
|
||||
"date",
|
||||
"parsed-value",
|
||||
"disabled-date",
|
||||
"disabled",
|
||||
"cell-class-name",
|
||||
"show-week-number"
|
||||
])) : (0, vue.createCommentVNode)("v-if", true),
|
||||
currentView.value === "year" ? ((0, vue.openBlock)(), (0, vue.createBlock)(require_basic_year_table.default, {
|
||||
key: 1,
|
||||
ref_key: "currentViewRef",
|
||||
ref: currentViewRef,
|
||||
"selection-mode": selectionMode.value,
|
||||
date: innerDate.value,
|
||||
"disabled-date": (0, vue.unref)(disabledDate),
|
||||
disabled: (0, vue.unref)(dateDisabled),
|
||||
"parsed-value": _ctx.parsedValue,
|
||||
"cell-class-name": (0, vue.unref)(cellClassName),
|
||||
onPick: handleYearPick
|
||||
}, null, 8, [
|
||||
"selection-mode",
|
||||
"date",
|
||||
"disabled-date",
|
||||
"disabled",
|
||||
"parsed-value",
|
||||
"cell-class-name"
|
||||
])) : (0, vue.createCommentVNode)("v-if", true),
|
||||
currentView.value === "month" ? ((0, vue.openBlock)(), (0, vue.createBlock)(require_basic_month_table.default, {
|
||||
key: 2,
|
||||
ref_key: "currentViewRef",
|
||||
ref: currentViewRef,
|
||||
"selection-mode": selectionMode.value,
|
||||
date: innerDate.value,
|
||||
"parsed-value": _ctx.parsedValue,
|
||||
"disabled-date": (0, vue.unref)(disabledDate),
|
||||
disabled: (0, vue.unref)(dateDisabled),
|
||||
"cell-class-name": (0, vue.unref)(cellClassName),
|
||||
onPick: handleMonthPick
|
||||
}, null, 8, [
|
||||
"selection-mode",
|
||||
"date",
|
||||
"parsed-value",
|
||||
"disabled-date",
|
||||
"disabled",
|
||||
"cell-class-name"
|
||||
])) : (0, vue.createCommentVNode)("v-if", true)
|
||||
], 34)
|
||||
], 2)
|
||||
], 2), _ctx.showFooter && footerVisible.value && footerFilled.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
|
||||
key: 0,
|
||||
class: (0, vue.normalizeClass)((0, vue.unref)(ppNs).e("footer"))
|
||||
}, [(0, vue.withDirectives)((0, vue.createVNode)((0, vue.unref)(require_index$4.ElButton), {
|
||||
text: "",
|
||||
size: "small",
|
||||
class: (0, vue.normalizeClass)((0, vue.unref)(ppNs).e("link-btn")),
|
||||
disabled: disabledNow.value,
|
||||
onClick: changeToNow
|
||||
}, {
|
||||
default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)((0, vue.unref)(t)("el.datepicker.now")), 1)]),
|
||||
_: 1
|
||||
}, 8, ["class", "disabled"]), [[vue.vShow, !isMultipleType.value && _ctx.showNow]]), _ctx.showConfirm ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_index$4.ElButton), {
|
||||
key: 0,
|
||||
plain: "",
|
||||
size: "small",
|
||||
class: (0, vue.normalizeClass)((0, vue.unref)(ppNs).e("link-btn")),
|
||||
disabled: disabledConfirm.value,
|
||||
onClick: onConfirm
|
||||
}, {
|
||||
default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)((0, vue.unref)(t)("el.datepicker.confirm")), 1)]),
|
||||
_: 1
|
||||
}, 8, ["class", "disabled"])) : (0, vue.createCommentVNode)("v-if", true)], 2)) : (0, vue.createCommentVNode)("v-if", true)], 2);
|
||||
};
|
||||
}
|
||||
});
|
||||
//#endregion
|
||||
exports.default = panel_date_pick_vue_vue_type_script_setup_true_lang_default;
|
||||
|
||||
//# sourceMappingURL=panel-date-pick.vue_vue_type_script_setup_true_lang.js.map
|
||||
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
Generated
Vendored
+10
@@ -0,0 +1,10 @@
|
||||
Object.defineProperties(exports, {
|
||||
__esModule: { value: true },
|
||||
[Symbol.toStringTag]: { value: "Module" }
|
||||
});
|
||||
//#region ../../packages/components/date-picker-panel/src/date-picker-com/panel-date-range.vue
|
||||
var panel_date_range_default = require("./panel-date-range.vue_vue_type_script_setup_true_lang.js").default;
|
||||
//#endregion
|
||||
exports.default = panel_date_range_default;
|
||||
|
||||
//# sourceMappingURL=panel-date-range.js.map
|
||||
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
Generated
Vendored
+111
@@ -0,0 +1,111 @@
|
||||
import { EpPropFinalized, EpPropMergeType } from "../../../../utils/vue/props/types.js";
|
||||
import { DayOrDays } from "../../../time-picker/src/common/props.js";
|
||||
import * as _$vue from "vue";
|
||||
import dayjs from "dayjs";
|
||||
|
||||
//#region ../../packages/components/date-picker-panel/src/date-picker-com/panel-date-range.vue.d.ts
|
||||
declare var __VLS_1: {
|
||||
class: string;
|
||||
}, __VLS_62: {}, __VLS_75: {}, __VLS_88: {}, __VLS_101: {}, __VLS_143: {}, __VLS_156: {}, __VLS_169: {}, __VLS_182: {};
|
||||
type __VLS_Slots = {} & {
|
||||
sidebar?: (props: typeof __VLS_1) => any;
|
||||
} & {
|
||||
'prev-year'?: (props: typeof __VLS_62) => any;
|
||||
} & {
|
||||
'prev-month'?: (props: typeof __VLS_75) => any;
|
||||
} & {
|
||||
'next-year'?: (props: typeof __VLS_88) => any;
|
||||
} & {
|
||||
'next-month'?: (props: typeof __VLS_101) => any;
|
||||
} & {
|
||||
'prev-year'?: (props: typeof __VLS_143) => any;
|
||||
} & {
|
||||
'prev-month'?: (props: typeof __VLS_156) => any;
|
||||
} & {
|
||||
'next-year'?: (props: typeof __VLS_169) => any;
|
||||
} & {
|
||||
'next-month'?: (props: typeof __VLS_182) => any;
|
||||
};
|
||||
declare const __VLS_base: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
|
||||
readonly unlinkPanels: BooleanConstructor;
|
||||
readonly visible: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
|
||||
readonly showConfirm: BooleanConstructor;
|
||||
readonly showFooter: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
|
||||
readonly border: BooleanConstructor;
|
||||
readonly disabled: BooleanConstructor;
|
||||
readonly parsedValue: {
|
||||
readonly type: _$vue.PropType<EpPropMergeType<(new (...args: any[]) => dayjs.Dayjs | [dayjs.Dayjs, dayjs.Dayjs]) | (() => DayOrDays) | (((new (...args: any[]) => dayjs.Dayjs | [dayjs.Dayjs, dayjs.Dayjs]) | (() => DayOrDays)) | null)[], unknown, unknown>>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly singlePanel: BooleanConstructor;
|
||||
readonly type: {
|
||||
readonly type: _$vue.PropType<EpPropMergeType<(new (...args: any[]) => "year" | "months" | "month" | "years" | "date" | "dates" | "week" | "datetime" | "datetimerange" | "daterange" | "monthrange" | "yearrange") | (() => "year" | "months" | "month" | "years" | "date" | "dates" | "week" | "datetime" | "datetimerange" | "daterange" | "monthrange" | "yearrange") | (((new (...args: any[]) => "year" | "months" | "month" | "years" | "date" | "dates" | "week" | "datetime" | "datetimerange" | "daterange" | "monthrange" | "yearrange") | (() => "year" | "months" | "month" | "years" | "date" | "dates" | "week" | "datetime" | "datetimerange" | "daterange" | "monthrange" | "yearrange")) | null)[], "year" | "months" | "month" | "years" | "date" | "dates" | "week" | "datetime" | "datetimerange" | "daterange" | "monthrange" | "yearrange", unknown>>;
|
||||
readonly required: true;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly dateFormat: StringConstructor;
|
||||
readonly timeFormat: StringConstructor;
|
||||
readonly showNow: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
|
||||
readonly showWeekNumber: BooleanConstructor;
|
||||
readonly editable: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
|
||||
}>, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
|
||||
clear: (...args: any[]) => void;
|
||||
"calendar-change": (...args: any[]) => void;
|
||||
"panel-change": (...args: any[]) => void;
|
||||
pick: (...args: any[]) => void;
|
||||
"set-picker-option": (...args: any[]) => void;
|
||||
}, string, _$vue.PublicProps, Readonly<_$vue.ExtractPropTypes<{
|
||||
readonly unlinkPanels: BooleanConstructor;
|
||||
readonly visible: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
|
||||
readonly showConfirm: BooleanConstructor;
|
||||
readonly showFooter: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
|
||||
readonly border: BooleanConstructor;
|
||||
readonly disabled: BooleanConstructor;
|
||||
readonly parsedValue: {
|
||||
readonly type: _$vue.PropType<EpPropMergeType<(new (...args: any[]) => dayjs.Dayjs | [dayjs.Dayjs, dayjs.Dayjs]) | (() => DayOrDays) | (((new (...args: any[]) => dayjs.Dayjs | [dayjs.Dayjs, dayjs.Dayjs]) | (() => DayOrDays)) | null)[], unknown, unknown>>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly singlePanel: BooleanConstructor;
|
||||
readonly type: {
|
||||
readonly type: _$vue.PropType<EpPropMergeType<(new (...args: any[]) => "year" | "months" | "month" | "years" | "date" | "dates" | "week" | "datetime" | "datetimerange" | "daterange" | "monthrange" | "yearrange") | (() => "year" | "months" | "month" | "years" | "date" | "dates" | "week" | "datetime" | "datetimerange" | "daterange" | "monthrange" | "yearrange") | (((new (...args: any[]) => "year" | "months" | "month" | "years" | "date" | "dates" | "week" | "datetime" | "datetimerange" | "daterange" | "monthrange" | "yearrange") | (() => "year" | "months" | "month" | "years" | "date" | "dates" | "week" | "datetime" | "datetimerange" | "daterange" | "monthrange" | "yearrange")) | null)[], "year" | "months" | "month" | "years" | "date" | "dates" | "week" | "datetime" | "datetimerange" | "daterange" | "monthrange" | "yearrange", unknown>>;
|
||||
readonly required: true;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly dateFormat: StringConstructor;
|
||||
readonly timeFormat: StringConstructor;
|
||||
readonly showNow: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
|
||||
readonly showWeekNumber: BooleanConstructor;
|
||||
readonly editable: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
|
||||
}>> & Readonly<{
|
||||
onClear?: ((...args: any[]) => any) | undefined;
|
||||
"onCalendar-change"?: ((...args: any[]) => any) | undefined;
|
||||
"onPanel-change"?: ((...args: any[]) => any) | undefined;
|
||||
onPick?: ((...args: any[]) => any) | undefined;
|
||||
"onSet-picker-option"?: ((...args: any[]) => any) | undefined;
|
||||
}>, {
|
||||
readonly disabled: boolean;
|
||||
readonly visible: EpPropMergeType<BooleanConstructor, unknown, unknown>;
|
||||
readonly border: boolean;
|
||||
readonly editable: EpPropMergeType<BooleanConstructor, unknown, unknown>;
|
||||
readonly showNow: EpPropMergeType<BooleanConstructor, unknown, unknown>;
|
||||
readonly showConfirm: boolean;
|
||||
readonly showFooter: EpPropMergeType<BooleanConstructor, unknown, unknown>;
|
||||
readonly showWeekNumber: boolean;
|
||||
readonly unlinkPanels: boolean;
|
||||
readonly singlePanel: boolean;
|
||||
}, {}, {}, {}, string, _$vue.ComponentProvideOptions, true, {}, 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 as default };
|
||||
Generated
Vendored
+733
@@ -0,0 +1,733 @@
|
||||
const require_runtime = require("../../../../_virtual/_rolldown/runtime.js");
|
||||
const require_index = require("../../../../hooks/use-locale/index.js");
|
||||
const require_index$1 = require("../../../icon/index.js");
|
||||
const require_use_form_common_props = require("../../../form/src/hooks/use-form-common-props.js");
|
||||
const require_index$2 = require("../../../input/index.js");
|
||||
const require_index$3 = require("../../../button/index.js");
|
||||
const require_constants = require("../../../time-picker/src/constants.js");
|
||||
const require_utils = require("../../../time-picker/src/utils.js");
|
||||
const require_index$4 = require("../../../../directives/click-outside/index.js");
|
||||
const require_panel_time_pick = require("../../../time-picker/src/time-picker-com/panel-time-pick.js");
|
||||
const require_utils$1 = require("../utils.js");
|
||||
const require_basic_date_table = require("./basic-date-table.js");
|
||||
const require_basic_month_table = require("./basic-month-table.js");
|
||||
const require_basic_year_table = require("./basic-year-table.js");
|
||||
const require_panel_date_range = require("../props/panel-date-range.js");
|
||||
const require_use_range_picker = require("../composables/use-range-picker.js");
|
||||
const require_use_panel_date_range = require("../composables/use-panel-date-range.js");
|
||||
let _element_plus_icons_vue = require("@element-plus/icons-vue");
|
||||
let vue = require("vue");
|
||||
let dayjs = require("dayjs");
|
||||
dayjs = require_runtime.__toESM(dayjs);
|
||||
//#region ../../packages/components/date-picker-panel/src/date-picker-com/panel-date-range.vue?vue&type=script&setup=true&lang.ts
|
||||
const _hoisted_1 = ["disabled", "onClick"];
|
||||
const _hoisted_2 = ["aria-label", "disabled"];
|
||||
const _hoisted_3 = ["aria-label", "disabled"];
|
||||
const _hoisted_4 = ["disabled", "aria-label"];
|
||||
const _hoisted_5 = ["disabled", "aria-label"];
|
||||
const _hoisted_6 = ["tabindex", "aria-disabled"];
|
||||
const _hoisted_7 = ["tabindex", "aria-disabled"];
|
||||
const _hoisted_8 = ["disabled", "aria-label"];
|
||||
const _hoisted_9 = ["disabled", "aria-label"];
|
||||
const _hoisted_10 = ["aria-label", "disabled"];
|
||||
const _hoisted_11 = ["disabled", "aria-label"];
|
||||
const _hoisted_12 = ["tabindex", "aria-disabled"];
|
||||
const _hoisted_13 = ["tabindex", "aria-disabled"];
|
||||
const unit = "month";
|
||||
var panel_date_range_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
|
||||
__name: "panel-date-range",
|
||||
props: require_panel_date_range.panelDateRangeProps,
|
||||
emits: [
|
||||
"pick",
|
||||
"set-picker-option",
|
||||
"calendar-change",
|
||||
"panel-change",
|
||||
"clear"
|
||||
],
|
||||
setup(__props, { emit: __emit }) {
|
||||
const props = __props;
|
||||
const emit = __emit;
|
||||
const pickerBase = (0, vue.inject)(require_constants.PICKER_BASE_INJECTION_KEY);
|
||||
const { disabledDate, cellClassName, defaultTime, clearable } = pickerBase.props;
|
||||
const format = (0, vue.toRef)(pickerBase.props, "format");
|
||||
const shortcuts = (0, vue.toRef)(pickerBase.props, "shortcuts");
|
||||
const defaultValue = (0, vue.toRef)(pickerBase.props, "defaultValue");
|
||||
const { lang } = require_index.useLocale();
|
||||
const leftDate = (0, vue.ref)((0, dayjs.default)().locale(lang.value));
|
||||
const rightDate = (0, vue.ref)((0, dayjs.default)().locale(lang.value).add(1, unit));
|
||||
const { minDate, maxDate, rangeState, ppNs, drpNs, handleChangeRange, handleRangeConfirm, handleShortcutClick, onSelect, parseValue, t } = require_use_range_picker.useRangePicker(props, {
|
||||
defaultValue,
|
||||
defaultTime,
|
||||
leftDate,
|
||||
rightDate,
|
||||
unit,
|
||||
sortDates
|
||||
});
|
||||
(0, vue.watch)(() => props.visible, (visible) => {
|
||||
if (!visible && rangeState.value.selecting) {
|
||||
parseValue(props.parsedValue);
|
||||
onSelect(false);
|
||||
}
|
||||
});
|
||||
const dateUserInput = (0, vue.ref)({
|
||||
min: null,
|
||||
max: null
|
||||
});
|
||||
const timeUserInput = (0, vue.ref)({
|
||||
min: null,
|
||||
max: null
|
||||
});
|
||||
const { leftCurrentView, rightCurrentView, leftCurrentViewRef, rightCurrentViewRef, leftYear, rightYear, leftMonth, rightMonth, leftYearLabel, rightYearLabel, showLeftPicker, showRightPicker, handleLeftYearPick, handleRightYearPick, handleLeftMonthPick, handleRightMonthPick, handlePanelChange, adjustDateByView } = require_use_panel_date_range.usePanelDateRange(props, emit, leftDate, rightDate);
|
||||
const hasShortcuts = (0, vue.computed)(() => !!shortcuts.value.length);
|
||||
const minVisibleDate = (0, vue.computed)(() => {
|
||||
if (dateUserInput.value.min !== null) return dateUserInput.value.min;
|
||||
if (minDate.value) return minDate.value.format(dateFormat.value);
|
||||
return "";
|
||||
});
|
||||
const maxVisibleDate = (0, vue.computed)(() => {
|
||||
if (dateUserInput.value.max !== null) return dateUserInput.value.max;
|
||||
if (maxDate.value || minDate.value) return (maxDate.value || minDate.value).format(dateFormat.value);
|
||||
return "";
|
||||
});
|
||||
const minVisibleTime = (0, vue.computed)(() => {
|
||||
if (timeUserInput.value.min !== null) return timeUserInput.value.min;
|
||||
if (minDate.value) return minDate.value.format(timeFormat.value);
|
||||
return "";
|
||||
});
|
||||
const maxVisibleTime = (0, vue.computed)(() => {
|
||||
if (timeUserInput.value.max !== null) return timeUserInput.value.max;
|
||||
if (maxDate.value || minDate.value) return (maxDate.value || minDate.value).format(timeFormat.value);
|
||||
return "";
|
||||
});
|
||||
const timeFormat = (0, vue.computed)(() => {
|
||||
return props.timeFormat || require_utils.extractTimeFormat(format.value || "") || "HH:mm:ss";
|
||||
});
|
||||
const dateFormat = (0, vue.computed)(() => {
|
||||
return props.dateFormat || require_utils.extractDateFormat(format.value || "") || "YYYY-MM-DD";
|
||||
});
|
||||
const isValidValue = (date) => {
|
||||
return require_utils$1.isValidRange(date) && (disabledDate ? !disabledDate(date[0].toDate()) && !disabledDate(date[1].toDate()) : true);
|
||||
};
|
||||
const leftPrevYear = () => {
|
||||
leftDate.value = adjustDateByView(leftCurrentView.value, leftDate.value, false);
|
||||
if (!props.unlinkPanels) rightDate.value = leftDate.value.add(1, "month");
|
||||
handlePanelChange("year");
|
||||
};
|
||||
const leftPrevMonth = () => {
|
||||
leftDate.value = leftDate.value.subtract(1, "month");
|
||||
if (!props.unlinkPanels) rightDate.value = leftDate.value.add(1, "month");
|
||||
handlePanelChange("month");
|
||||
};
|
||||
const rightNextYear = () => {
|
||||
if (!props.unlinkPanels) {
|
||||
leftDate.value = adjustDateByView(rightCurrentView.value, leftDate.value, true);
|
||||
rightDate.value = leftDate.value.add(1, "month");
|
||||
} else rightDate.value = adjustDateByView(rightCurrentView.value, rightDate.value, true);
|
||||
handlePanelChange("year");
|
||||
};
|
||||
const rightNextMonth = () => {
|
||||
if (!props.unlinkPanels) {
|
||||
leftDate.value = leftDate.value.add(1, "month");
|
||||
rightDate.value = leftDate.value.add(1, "month");
|
||||
} else rightDate.value = rightDate.value.add(1, "month");
|
||||
handlePanelChange("month");
|
||||
};
|
||||
const leftNextYear = () => {
|
||||
leftDate.value = adjustDateByView(leftCurrentView.value, leftDate.value, true);
|
||||
handlePanelChange("year");
|
||||
};
|
||||
const leftNextMonth = () => {
|
||||
leftDate.value = leftDate.value.add(1, "month");
|
||||
handlePanelChange("month");
|
||||
};
|
||||
const rightPrevYear = () => {
|
||||
rightDate.value = adjustDateByView(rightCurrentView.value, rightDate.value, false);
|
||||
handlePanelChange("year");
|
||||
};
|
||||
const rightPrevMonth = () => {
|
||||
rightDate.value = rightDate.value.subtract(1, "month");
|
||||
handlePanelChange("month");
|
||||
};
|
||||
const enableMonthArrow = (0, vue.computed)(() => {
|
||||
const nextMonth = (leftMonth.value + 1) % 12;
|
||||
const yearOffset = leftMonth.value + 1 >= 12 ? 1 : 0;
|
||||
return props.singlePanel || props.unlinkPanels && new Date(leftYear.value + yearOffset, nextMonth) < new Date(rightYear.value, rightMonth.value);
|
||||
});
|
||||
const enableYearArrow = (0, vue.computed)(() => {
|
||||
return props.singlePanel || props.unlinkPanels && rightYear.value * 12 + rightMonth.value - (leftYear.value * 12 + leftMonth.value + 1) >= 12;
|
||||
});
|
||||
const dateRangeDisabled = require_use_form_common_props.useFormDisabled();
|
||||
const btnDisabled = (0, vue.computed)(() => {
|
||||
return !(minDate.value && maxDate.value && !rangeState.value.selecting && require_utils$1.isValidRange([minDate.value, maxDate.value]) && !dateRangeDisabled.value);
|
||||
});
|
||||
const showTime = (0, vue.computed)(() => props.type === "datetime" || props.type === "datetimerange");
|
||||
const formatEmit = (emitDayjs, index) => {
|
||||
if (!emitDayjs) return;
|
||||
if (defaultTime) return (0, dayjs.default)(defaultTime[index] || defaultTime).locale(lang.value).year(emitDayjs.year()).month(emitDayjs.month()).date(emitDayjs.date());
|
||||
return emitDayjs;
|
||||
};
|
||||
const handleRangePick = (val, close = true) => {
|
||||
const min_ = val.minDate;
|
||||
const max_ = val.maxDate;
|
||||
const minDate_ = formatEmit(min_, 0);
|
||||
const maxDate_ = formatEmit(max_, 1);
|
||||
if (maxDate.value === maxDate_ && minDate.value === minDate_) return;
|
||||
emit("calendar-change", [min_.toDate(), max_ && max_.toDate()]);
|
||||
maxDate.value = maxDate_;
|
||||
minDate.value = minDate_;
|
||||
if (!showTime.value && close) close = !minDate_ || !maxDate_;
|
||||
handleRangeConfirm(close);
|
||||
};
|
||||
const minTimePickerVisible = (0, vue.ref)(false);
|
||||
const maxTimePickerVisible = (0, vue.ref)(false);
|
||||
const handleMinTimeClose = () => {
|
||||
minTimePickerVisible.value = false;
|
||||
};
|
||||
const handleMaxTimeClose = () => {
|
||||
maxTimePickerVisible.value = false;
|
||||
};
|
||||
const findValidDateToward = (from, toward) => {
|
||||
if (!disabledDate || !disabledDate(from.toDate())) return from;
|
||||
const forward = from.isBefore(toward);
|
||||
let cursor = from;
|
||||
while (forward ? cursor.isBefore(toward) : cursor.isAfter(toward)) {
|
||||
cursor = forward ? cursor.add(1, "day") : cursor.subtract(1, "day");
|
||||
if (!disabledDate(cursor.toDate())) return cursor;
|
||||
}
|
||||
return from;
|
||||
};
|
||||
const handleDateInput = (value, type) => {
|
||||
dateUserInput.value[type] = value;
|
||||
const parsedValueD = (0, dayjs.default)(value, dateFormat.value).locale(lang.value);
|
||||
if (parsedValueD.isValid()) {
|
||||
if (disabledDate && disabledDate(parsedValueD.toDate())) return;
|
||||
if (type === "min") {
|
||||
leftDate.value = parsedValueD;
|
||||
minDate.value = (minDate.value || leftDate.value).year(parsedValueD.year()).month(parsedValueD.month()).date(parsedValueD.date());
|
||||
if (!props.unlinkPanels && !maxDate.value) {
|
||||
const adjustedMax = findValidDateToward(minDate.value.add(1, "month"), minDate.value);
|
||||
rightDate.value = adjustedMax;
|
||||
maxDate.value = adjustedMax;
|
||||
}
|
||||
} else {
|
||||
rightDate.value = parsedValueD;
|
||||
maxDate.value = (maxDate.value || rightDate.value).year(parsedValueD.year()).month(parsedValueD.month()).date(parsedValueD.date());
|
||||
if (!props.unlinkPanels && !minDate.value) {
|
||||
const adjustedMin = findValidDateToward(maxDate.value.subtract(1, "month"), maxDate.value);
|
||||
leftDate.value = adjustedMin;
|
||||
minDate.value = adjustedMin;
|
||||
}
|
||||
}
|
||||
sortDates(minDate.value, maxDate.value);
|
||||
handleRangeConfirm(true);
|
||||
}
|
||||
};
|
||||
const handleDateChange = (_, type) => {
|
||||
dateUserInput.value[type] = null;
|
||||
if (type === "min") {
|
||||
if (!props.unlinkPanels && maxDate.value && minDate.value && maxDate.value.isBefore(minDate.value)) {
|
||||
const adjustedMax = findValidDateToward(minDate.value.add(1, "month"), minDate.value);
|
||||
rightDate.value = adjustedMax;
|
||||
maxDate.value = adjustedMax;
|
||||
}
|
||||
} else if (!props.unlinkPanels && minDate.value && maxDate.value && minDate.value.isAfter(maxDate.value)) {
|
||||
const adjustedMin = findValidDateToward(maxDate.value.subtract(1, "month"), maxDate.value);
|
||||
leftDate.value = adjustedMin;
|
||||
minDate.value = adjustedMin;
|
||||
}
|
||||
sortDates(minDate.value, maxDate.value);
|
||||
handleRangeConfirm(true);
|
||||
};
|
||||
const handleTimeInput = (value, type) => {
|
||||
timeUserInput.value[type] = value;
|
||||
const parsedValueD = (0, dayjs.default)(value, timeFormat.value).locale(lang.value);
|
||||
if (parsedValueD.isValid()) if (type === "min") {
|
||||
minTimePickerVisible.value = true;
|
||||
minDate.value = (minDate.value || leftDate.value).hour(parsedValueD.hour()).minute(parsedValueD.minute()).second(parsedValueD.second());
|
||||
leftDate.value = minDate.value;
|
||||
} else {
|
||||
maxTimePickerVisible.value = true;
|
||||
maxDate.value = (maxDate.value || rightDate.value).hour(parsedValueD.hour()).minute(parsedValueD.minute()).second(parsedValueD.second());
|
||||
rightDate.value = maxDate.value;
|
||||
}
|
||||
};
|
||||
const handleTimeChange = (_value, type) => {
|
||||
timeUserInput.value[type] = null;
|
||||
if (type === "min") {
|
||||
leftDate.value = minDate.value;
|
||||
minTimePickerVisible.value = false;
|
||||
if (!maxDate.value || maxDate.value.isBefore(minDate.value)) maxDate.value = minDate.value;
|
||||
} else {
|
||||
rightDate.value = maxDate.value;
|
||||
maxTimePickerVisible.value = false;
|
||||
if (maxDate.value && maxDate.value.isBefore(minDate.value)) minDate.value = maxDate.value;
|
||||
}
|
||||
handleRangeConfirm(true);
|
||||
};
|
||||
const handleMinTimePick = (value, visible, first) => {
|
||||
if (timeUserInput.value.min) return;
|
||||
if (value) minDate.value = (minDate.value || leftDate.value).hour(value.hour()).minute(value.minute()).second(value.second());
|
||||
if (!first) minTimePickerVisible.value = visible;
|
||||
if (!maxDate.value || maxDate.value.isBefore(minDate.value)) {
|
||||
maxDate.value = minDate.value;
|
||||
rightDate.value = value;
|
||||
(0, vue.nextTick)(() => {
|
||||
parseValue(props.parsedValue);
|
||||
});
|
||||
}
|
||||
handleRangeConfirm(true);
|
||||
};
|
||||
const handleMaxTimePick = (value, visible, first) => {
|
||||
if (timeUserInput.value.max) return;
|
||||
if (value) maxDate.value = (maxDate.value || rightDate.value).hour(value.hour()).minute(value.minute()).second(value.second());
|
||||
if (!first) maxTimePickerVisible.value = visible;
|
||||
if (maxDate.value && maxDate.value.isBefore(minDate.value)) minDate.value = maxDate.value;
|
||||
handleRangeConfirm(true);
|
||||
};
|
||||
const onClear = () => {
|
||||
handleClear();
|
||||
emit("clear");
|
||||
};
|
||||
const handleClear = () => {
|
||||
let valueOnClear = null;
|
||||
if (pickerBase?.emptyValues) valueOnClear = pickerBase.emptyValues.valueOnClear.value;
|
||||
leftDate.value = require_utils$1.getDefaultValue((0, vue.unref)(defaultValue), {
|
||||
lang: (0, vue.unref)(lang),
|
||||
unit: "month",
|
||||
unlinkPanels: props.unlinkPanels
|
||||
})[0];
|
||||
rightDate.value = leftDate.value.add(1, "month");
|
||||
maxDate.value = void 0;
|
||||
minDate.value = void 0;
|
||||
handleRangeConfirm(true);
|
||||
emit("pick", valueOnClear);
|
||||
};
|
||||
const parseUserInput = (value) => {
|
||||
return require_utils$1.correctlyParseUserInput(value, format.value || "", lang.value);
|
||||
};
|
||||
function sortDates(minDate, maxDate) {
|
||||
if (props.unlinkPanels && maxDate) {
|
||||
const minDateYear = minDate?.year() || 0;
|
||||
const minDateMonth = minDate?.month() || 0;
|
||||
const maxDateYear = maxDate.year();
|
||||
const maxDateMonth = maxDate.month();
|
||||
rightDate.value = minDateYear === maxDateYear && minDateMonth === maxDateMonth ? maxDate.add(1, unit) : maxDate;
|
||||
} else {
|
||||
rightDate.value = leftDate.value.add(1, unit);
|
||||
if (maxDate) rightDate.value = rightDate.value.hour(maxDate.hour()).minute(maxDate.minute()).second(maxDate.second());
|
||||
}
|
||||
}
|
||||
emit("set-picker-option", ["isValidValue", isValidValue]);
|
||||
emit("set-picker-option", ["parseUserInput", parseUserInput]);
|
||||
emit("set-picker-option", ["handleClear", handleClear]);
|
||||
return (_ctx, _cache) => {
|
||||
return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", { class: (0, vue.normalizeClass)([
|
||||
(0, vue.unref)(ppNs).b(),
|
||||
(0, vue.unref)(drpNs).b(),
|
||||
(0, vue.unref)(ppNs).is("border", _ctx.border),
|
||||
(0, vue.unref)(ppNs).is("disabled", (0, vue.unref)(dateRangeDisabled)),
|
||||
{
|
||||
"has-sidebar": _ctx.$slots.sidebar || hasShortcuts.value,
|
||||
"has-time": showTime.value,
|
||||
"single-panel": _ctx.singlePanel
|
||||
}
|
||||
]) }, [(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(ppNs).e("body-wrapper")) }, [
|
||||
(0, vue.renderSlot)(_ctx.$slots, "sidebar", { class: (0, vue.normalizeClass)((0, vue.unref)(ppNs).e("sidebar")) }),
|
||||
hasShortcuts.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
|
||||
key: 0,
|
||||
class: (0, vue.normalizeClass)((0, vue.unref)(ppNs).e("sidebar"))
|
||||
}, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(shortcuts.value, (shortcut, key) => {
|
||||
return (0, vue.openBlock)(), (0, vue.createElementBlock)("button", {
|
||||
key,
|
||||
type: "button",
|
||||
disabled: (0, vue.unref)(dateRangeDisabled),
|
||||
class: (0, vue.normalizeClass)((0, vue.unref)(ppNs).e("shortcut")),
|
||||
onClick: ($event) => (0, vue.unref)(handleShortcutClick)(shortcut)
|
||||
}, (0, vue.toDisplayString)(shortcut.text), 11, _hoisted_1);
|
||||
}), 128))], 2)) : (0, vue.createCommentVNode)("v-if", true),
|
||||
(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(ppNs).e("body")) }, [
|
||||
showTime.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
|
||||
key: 0,
|
||||
class: (0, vue.normalizeClass)((0, vue.unref)(drpNs).e("time-header"))
|
||||
}, [
|
||||
(0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)((0, vue.unref)(drpNs).e("editors-wrap")) }, [(0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)((0, vue.unref)(drpNs).e("time-picker-wrap")) }, [(0, vue.createVNode)((0, vue.unref)(require_index$2.ElInput), {
|
||||
size: "small",
|
||||
disabled: (0, vue.unref)(rangeState).selecting || (0, vue.unref)(dateRangeDisabled),
|
||||
placeholder: (0, vue.unref)(t)("el.datepicker.startDate"),
|
||||
class: (0, vue.normalizeClass)((0, vue.unref)(drpNs).e("editor")),
|
||||
"model-value": minVisibleDate.value,
|
||||
"validate-event": false,
|
||||
readonly: !_ctx.editable,
|
||||
onInput: _cache[0] || (_cache[0] = (val) => handleDateInput(val, "min")),
|
||||
onChange: _cache[1] || (_cache[1] = (val) => handleDateChange(val, "min"))
|
||||
}, null, 8, [
|
||||
"disabled",
|
||||
"placeholder",
|
||||
"class",
|
||||
"model-value",
|
||||
"readonly"
|
||||
])], 2), (0, vue.withDirectives)(((0, vue.openBlock)(), (0, vue.createElementBlock)("span", { class: (0, vue.normalizeClass)((0, vue.unref)(drpNs).e("time-picker-wrap")) }, [(0, vue.createVNode)((0, vue.unref)(require_index$2.ElInput), {
|
||||
size: "small",
|
||||
class: (0, vue.normalizeClass)((0, vue.unref)(drpNs).e("editor")),
|
||||
disabled: (0, vue.unref)(rangeState).selecting || (0, vue.unref)(dateRangeDisabled),
|
||||
placeholder: (0, vue.unref)(t)("el.datepicker.startTime"),
|
||||
"model-value": minVisibleTime.value,
|
||||
"validate-event": false,
|
||||
readonly: !_ctx.editable,
|
||||
onFocus: _cache[2] || (_cache[2] = ($event) => minTimePickerVisible.value = true),
|
||||
onInput: _cache[3] || (_cache[3] = (val) => handleTimeInput(val, "min")),
|
||||
onChange: _cache[4] || (_cache[4] = (val) => handleTimeChange(val, "min"))
|
||||
}, null, 8, [
|
||||
"class",
|
||||
"disabled",
|
||||
"placeholder",
|
||||
"model-value",
|
||||
"readonly"
|
||||
]), (0, vue.createVNode)((0, vue.unref)(require_panel_time_pick.default), {
|
||||
visible: minTimePickerVisible.value,
|
||||
format: timeFormat.value,
|
||||
"datetime-role": "start",
|
||||
"parsed-value": (0, vue.unref)(minDate) || leftDate.value,
|
||||
onPick: handleMinTimePick
|
||||
}, null, 8, [
|
||||
"visible",
|
||||
"format",
|
||||
"parsed-value"
|
||||
])], 2)), [[(0, vue.unref)(require_index$4.default), handleMinTimeClose]])], 2),
|
||||
(0, vue.createElementVNode)("span", null, [(0, vue.createVNode)((0, vue.unref)(require_index$1.ElIcon), null, {
|
||||
default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_element_plus_icons_vue.ArrowRight))]),
|
||||
_: 1
|
||||
})]),
|
||||
(0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)([(0, vue.unref)(drpNs).e("editors-wrap"), "is-right"]) }, [(0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)((0, vue.unref)(drpNs).e("time-picker-wrap")) }, [(0, vue.createVNode)((0, vue.unref)(require_index$2.ElInput), {
|
||||
size: "small",
|
||||
class: (0, vue.normalizeClass)((0, vue.unref)(drpNs).e("editor")),
|
||||
disabled: (0, vue.unref)(rangeState).selecting || (0, vue.unref)(dateRangeDisabled),
|
||||
placeholder: (0, vue.unref)(t)("el.datepicker.endDate"),
|
||||
"model-value": maxVisibleDate.value,
|
||||
readonly: !(0, vue.unref)(minDate) || !_ctx.editable,
|
||||
"validate-event": false,
|
||||
onInput: _cache[5] || (_cache[5] = (val) => handleDateInput(val, "max")),
|
||||
onChange: _cache[6] || (_cache[6] = (val) => handleDateChange(val, "max"))
|
||||
}, null, 8, [
|
||||
"class",
|
||||
"disabled",
|
||||
"placeholder",
|
||||
"model-value",
|
||||
"readonly"
|
||||
])], 2), (0, vue.withDirectives)(((0, vue.openBlock)(), (0, vue.createElementBlock)("span", { class: (0, vue.normalizeClass)((0, vue.unref)(drpNs).e("time-picker-wrap")) }, [(0, vue.createVNode)((0, vue.unref)(require_index$2.ElInput), {
|
||||
size: "small",
|
||||
class: (0, vue.normalizeClass)((0, vue.unref)(drpNs).e("editor")),
|
||||
disabled: (0, vue.unref)(rangeState).selecting || (0, vue.unref)(dateRangeDisabled),
|
||||
placeholder: (0, vue.unref)(t)("el.datepicker.endTime"),
|
||||
"model-value": maxVisibleTime.value,
|
||||
readonly: !(0, vue.unref)(minDate) || !_ctx.editable,
|
||||
"validate-event": false,
|
||||
onFocus: _cache[7] || (_cache[7] = ($event) => (0, vue.unref)(minDate) && (maxTimePickerVisible.value = true)),
|
||||
onInput: _cache[8] || (_cache[8] = (val) => handleTimeInput(val, "max")),
|
||||
onChange: _cache[9] || (_cache[9] = (val) => handleTimeChange(val, "max"))
|
||||
}, null, 8, [
|
||||
"class",
|
||||
"disabled",
|
||||
"placeholder",
|
||||
"model-value",
|
||||
"readonly"
|
||||
]), (0, vue.createVNode)((0, vue.unref)(require_panel_time_pick.default), {
|
||||
"datetime-role": "end",
|
||||
visible: maxTimePickerVisible.value,
|
||||
format: timeFormat.value,
|
||||
"parsed-value": (0, vue.unref)(maxDate) || rightDate.value,
|
||||
onPick: handleMaxTimePick
|
||||
}, null, 8, [
|
||||
"visible",
|
||||
"format",
|
||||
"parsed-value"
|
||||
])], 2)), [[(0, vue.unref)(require_index$4.default), handleMaxTimeClose]])], 2)
|
||||
], 2)) : (0, vue.createCommentVNode)("v-if", true),
|
||||
(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)([
|
||||
(0, vue.unref)(ppNs).e("content"),
|
||||
(0, vue.unref)(drpNs).e("content"),
|
||||
(0, vue.unref)(drpNs).is("left", !_ctx.singlePanel)
|
||||
]) }, [
|
||||
(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(drpNs).e("header")) }, [
|
||||
(0, vue.createElementVNode)("button", {
|
||||
type: "button",
|
||||
class: (0, vue.normalizeClass)([(0, vue.unref)(ppNs).e("icon-btn"), "d-arrow-left"]),
|
||||
"aria-label": (0, vue.unref)(t)(`el.datepicker.prevYear`),
|
||||
disabled: (0, vue.unref)(dateRangeDisabled),
|
||||
onClick: leftPrevYear
|
||||
}, [(0, vue.renderSlot)(_ctx.$slots, "prev-year", {}, () => [(0, vue.createVNode)((0, vue.unref)(require_index$1.ElIcon), null, {
|
||||
default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_element_plus_icons_vue.DArrowLeft))]),
|
||||
_: 1
|
||||
})])], 10, _hoisted_2),
|
||||
(0, vue.withDirectives)((0, vue.createElementVNode)("button", {
|
||||
type: "button",
|
||||
class: (0, vue.normalizeClass)([(0, vue.unref)(ppNs).e("icon-btn"), "arrow-left"]),
|
||||
"aria-label": (0, vue.unref)(t)(`el.datepicker.prevMonth`),
|
||||
disabled: (0, vue.unref)(dateRangeDisabled),
|
||||
onClick: leftPrevMonth
|
||||
}, [(0, vue.renderSlot)(_ctx.$slots, "prev-month", {}, () => [(0, vue.createVNode)((0, vue.unref)(require_index$1.ElIcon), null, {
|
||||
default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_element_plus_icons_vue.ArrowLeft))]),
|
||||
_: 1
|
||||
})])], 10, _hoisted_3), [[vue.vShow, (0, vue.unref)(leftCurrentView) === "date"]]),
|
||||
_ctx.unlinkPanels || _ctx.singlePanel ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("button", {
|
||||
key: 0,
|
||||
type: "button",
|
||||
disabled: !enableYearArrow.value || (0, vue.unref)(dateRangeDisabled),
|
||||
class: (0, vue.normalizeClass)([[(0, vue.unref)(ppNs).e("icon-btn"), (0, vue.unref)(ppNs).is("disabled", !enableYearArrow.value || (0, vue.unref)(dateRangeDisabled))], "d-arrow-right"]),
|
||||
"aria-label": (0, vue.unref)(t)(`el.datepicker.nextYear`),
|
||||
onClick: leftNextYear
|
||||
}, [(0, vue.renderSlot)(_ctx.$slots, "next-year", {}, () => [(0, vue.createVNode)((0, vue.unref)(require_index$1.ElIcon), null, {
|
||||
default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_element_plus_icons_vue.DArrowRight))]),
|
||||
_: 1
|
||||
})])], 10, _hoisted_4)) : (0, vue.createCommentVNode)("v-if", true),
|
||||
_ctx.unlinkPanels && (0, vue.unref)(leftCurrentView) === "date" || _ctx.singlePanel ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("button", {
|
||||
key: 1,
|
||||
type: "button",
|
||||
disabled: !enableMonthArrow.value || (0, vue.unref)(dateRangeDisabled),
|
||||
class: (0, vue.normalizeClass)([[(0, vue.unref)(ppNs).e("icon-btn"), (0, vue.unref)(ppNs).is("disabled", !enableMonthArrow.value || (0, vue.unref)(dateRangeDisabled))], "arrow-right"]),
|
||||
"aria-label": (0, vue.unref)(t)(`el.datepicker.nextMonth`),
|
||||
onClick: leftNextMonth
|
||||
}, [(0, vue.renderSlot)(_ctx.$slots, "next-month", {}, () => [(0, vue.createVNode)((0, vue.unref)(require_index$1.ElIcon), null, {
|
||||
default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_element_plus_icons_vue.ArrowRight))]),
|
||||
_: 1
|
||||
})])], 10, _hoisted_5)) : (0, vue.createCommentVNode)("v-if", true),
|
||||
(0, vue.createElementVNode)("div", null, [(0, vue.createElementVNode)("span", {
|
||||
role: "button",
|
||||
class: (0, vue.normalizeClass)((0, vue.unref)(drpNs).e("header-label")),
|
||||
"aria-live": "polite",
|
||||
tabindex: _ctx.disabled ? void 0 : 0,
|
||||
"aria-disabled": _ctx.disabled,
|
||||
onKeydown: _cache[10] || (_cache[10] = (0, vue.withKeys)(($event) => (0, vue.unref)(showLeftPicker)("year"), ["enter"])),
|
||||
onClick: _cache[11] || (_cache[11] = ($event) => (0, vue.unref)(showLeftPicker)("year"))
|
||||
}, (0, vue.toDisplayString)((0, vue.unref)(leftYearLabel)), 43, _hoisted_6), (0, vue.withDirectives)((0, vue.createElementVNode)("span", {
|
||||
role: "button",
|
||||
"aria-live": "polite",
|
||||
tabindex: _ctx.disabled ? void 0 : 0,
|
||||
"aria-disabled": _ctx.disabled,
|
||||
class: (0, vue.normalizeClass)([(0, vue.unref)(drpNs).e("header-label"), { active: (0, vue.unref)(leftCurrentView) === "month" }]),
|
||||
onKeydown: _cache[12] || (_cache[12] = (0, vue.withKeys)(($event) => (0, vue.unref)(showLeftPicker)("month"), ["enter"])),
|
||||
onClick: _cache[13] || (_cache[13] = ($event) => (0, vue.unref)(showLeftPicker)("month"))
|
||||
}, (0, vue.toDisplayString)((0, vue.unref)(t)(`el.datepicker.month${leftDate.value.month() + 1}`)), 43, _hoisted_7), [[vue.vShow, (0, vue.unref)(leftCurrentView) === "date"]])])
|
||||
], 2),
|
||||
(0, vue.unref)(leftCurrentView) === "date" ? ((0, vue.openBlock)(), (0, vue.createBlock)(require_basic_date_table.default, {
|
||||
key: 0,
|
||||
ref_key: "leftCurrentViewRef",
|
||||
ref: leftCurrentViewRef,
|
||||
"selection-mode": "range",
|
||||
date: leftDate.value,
|
||||
"min-date": (0, vue.unref)(minDate),
|
||||
"max-date": (0, vue.unref)(maxDate),
|
||||
"range-state": (0, vue.unref)(rangeState),
|
||||
"disabled-date": (0, vue.unref)(disabledDate),
|
||||
"cell-class-name": (0, vue.unref)(cellClassName),
|
||||
"show-week-number": _ctx.showWeekNumber,
|
||||
disabled: (0, vue.unref)(dateRangeDisabled),
|
||||
onChangerange: (0, vue.unref)(handleChangeRange),
|
||||
onPick: handleRangePick,
|
||||
onSelect: (0, vue.unref)(onSelect)
|
||||
}, null, 8, [
|
||||
"date",
|
||||
"min-date",
|
||||
"max-date",
|
||||
"range-state",
|
||||
"disabled-date",
|
||||
"cell-class-name",
|
||||
"show-week-number",
|
||||
"disabled",
|
||||
"onChangerange",
|
||||
"onSelect"
|
||||
])) : (0, vue.createCommentVNode)("v-if", true),
|
||||
(0, vue.unref)(leftCurrentView) === "year" ? ((0, vue.openBlock)(), (0, vue.createBlock)(require_basic_year_table.default, {
|
||||
key: 1,
|
||||
ref_key: "leftCurrentViewRef",
|
||||
ref: leftCurrentViewRef,
|
||||
"selection-mode": "year",
|
||||
date: leftDate.value,
|
||||
"disabled-date": (0, vue.unref)(disabledDate),
|
||||
"parsed-value": _ctx.parsedValue,
|
||||
disabled: (0, vue.unref)(dateRangeDisabled),
|
||||
onPick: (0, vue.unref)(handleLeftYearPick)
|
||||
}, null, 8, [
|
||||
"date",
|
||||
"disabled-date",
|
||||
"parsed-value",
|
||||
"disabled",
|
||||
"onPick"
|
||||
])) : (0, vue.createCommentVNode)("v-if", true),
|
||||
(0, vue.unref)(leftCurrentView) === "month" ? ((0, vue.openBlock)(), (0, vue.createBlock)(require_basic_month_table.default, {
|
||||
key: 2,
|
||||
ref_key: "leftCurrentViewRef",
|
||||
ref: leftCurrentViewRef,
|
||||
"selection-mode": "month",
|
||||
date: leftDate.value,
|
||||
"parsed-value": _ctx.parsedValue,
|
||||
"disabled-date": (0, vue.unref)(disabledDate),
|
||||
disabled: (0, vue.unref)(dateRangeDisabled),
|
||||
onPick: (0, vue.unref)(handleLeftMonthPick)
|
||||
}, null, 8, [
|
||||
"date",
|
||||
"parsed-value",
|
||||
"disabled-date",
|
||||
"disabled",
|
||||
"onPick"
|
||||
])) : (0, vue.createCommentVNode)("v-if", true)
|
||||
], 2),
|
||||
!_ctx.singlePanel ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
|
||||
key: 1,
|
||||
class: (0, vue.normalizeClass)([[(0, vue.unref)(ppNs).e("content"), (0, vue.unref)(drpNs).e("content")], "is-right"])
|
||||
}, [
|
||||
(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(drpNs).e("header")) }, [
|
||||
_ctx.unlinkPanels ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("button", {
|
||||
key: 0,
|
||||
type: "button",
|
||||
disabled: !enableYearArrow.value || (0, vue.unref)(dateRangeDisabled),
|
||||
class: (0, vue.normalizeClass)([[(0, vue.unref)(ppNs).e("icon-btn"), (0, vue.unref)(ppNs).is("disabled", !enableYearArrow.value || (0, vue.unref)(dateRangeDisabled))], "d-arrow-left"]),
|
||||
"aria-label": (0, vue.unref)(t)(`el.datepicker.prevYear`),
|
||||
onClick: rightPrevYear
|
||||
}, [(0, vue.renderSlot)(_ctx.$slots, "prev-year", {}, () => [(0, vue.createVNode)((0, vue.unref)(require_index$1.ElIcon), null, {
|
||||
default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_element_plus_icons_vue.DArrowLeft))]),
|
||||
_: 1
|
||||
})])], 10, _hoisted_8)) : (0, vue.createCommentVNode)("v-if", true),
|
||||
_ctx.unlinkPanels && (0, vue.unref)(rightCurrentView) === "date" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("button", {
|
||||
key: 1,
|
||||
type: "button",
|
||||
disabled: !enableMonthArrow.value || (0, vue.unref)(dateRangeDisabled),
|
||||
class: (0, vue.normalizeClass)([[(0, vue.unref)(ppNs).e("icon-btn"), (0, vue.unref)(ppNs).is("disabled", !enableMonthArrow.value || (0, vue.unref)(dateRangeDisabled))], "arrow-left"]),
|
||||
"aria-label": (0, vue.unref)(t)(`el.datepicker.prevMonth`),
|
||||
onClick: rightPrevMonth
|
||||
}, [(0, vue.renderSlot)(_ctx.$slots, "prev-month", {}, () => [(0, vue.createVNode)((0, vue.unref)(require_index$1.ElIcon), null, {
|
||||
default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_element_plus_icons_vue.ArrowLeft))]),
|
||||
_: 1
|
||||
})])], 10, _hoisted_9)) : (0, vue.createCommentVNode)("v-if", true),
|
||||
(0, vue.createElementVNode)("button", {
|
||||
type: "button",
|
||||
"aria-label": (0, vue.unref)(t)(`el.datepicker.nextYear`),
|
||||
class: (0, vue.normalizeClass)([(0, vue.unref)(ppNs).e("icon-btn"), "d-arrow-right"]),
|
||||
disabled: (0, vue.unref)(dateRangeDisabled),
|
||||
onClick: rightNextYear
|
||||
}, [(0, vue.renderSlot)(_ctx.$slots, "next-year", {}, () => [(0, vue.createVNode)((0, vue.unref)(require_index$1.ElIcon), null, {
|
||||
default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_element_plus_icons_vue.DArrowRight))]),
|
||||
_: 1
|
||||
})])], 10, _hoisted_10),
|
||||
(0, vue.withDirectives)((0, vue.createElementVNode)("button", {
|
||||
type: "button",
|
||||
class: (0, vue.normalizeClass)([(0, vue.unref)(ppNs).e("icon-btn"), "arrow-right"]),
|
||||
disabled: (0, vue.unref)(dateRangeDisabled),
|
||||
"aria-label": (0, vue.unref)(t)(`el.datepicker.nextMonth`),
|
||||
onClick: rightNextMonth
|
||||
}, [(0, vue.renderSlot)(_ctx.$slots, "next-month", {}, () => [(0, vue.createVNode)((0, vue.unref)(require_index$1.ElIcon), null, {
|
||||
default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_element_plus_icons_vue.ArrowRight))]),
|
||||
_: 1
|
||||
})])], 10, _hoisted_11), [[vue.vShow, (0, vue.unref)(rightCurrentView) === "date"]]),
|
||||
(0, vue.createElementVNode)("div", null, [(0, vue.createElementVNode)("span", {
|
||||
role: "button",
|
||||
class: (0, vue.normalizeClass)((0, vue.unref)(drpNs).e("header-label")),
|
||||
"aria-live": "polite",
|
||||
tabindex: _ctx.disabled ? void 0 : 0,
|
||||
"aria-disabled": _ctx.disabled,
|
||||
onKeydown: _cache[14] || (_cache[14] = (0, vue.withKeys)(($event) => (0, vue.unref)(showRightPicker)("year"), ["enter"])),
|
||||
onClick: _cache[15] || (_cache[15] = ($event) => (0, vue.unref)(showRightPicker)("year"))
|
||||
}, (0, vue.toDisplayString)((0, vue.unref)(rightYearLabel)), 43, _hoisted_12), (0, vue.withDirectives)((0, vue.createElementVNode)("span", {
|
||||
role: "button",
|
||||
"aria-live": "polite",
|
||||
tabindex: _ctx.disabled ? void 0 : 0,
|
||||
"aria-disabled": _ctx.disabled,
|
||||
class: (0, vue.normalizeClass)([(0, vue.unref)(drpNs).e("header-label"), { active: (0, vue.unref)(rightCurrentView) === "month" }]),
|
||||
onKeydown: _cache[16] || (_cache[16] = (0, vue.withKeys)(($event) => (0, vue.unref)(showRightPicker)("month"), ["enter"])),
|
||||
onClick: _cache[17] || (_cache[17] = ($event) => (0, vue.unref)(showRightPicker)("month"))
|
||||
}, (0, vue.toDisplayString)((0, vue.unref)(t)(`el.datepicker.month${rightDate.value.month() + 1}`)), 43, _hoisted_13), [[vue.vShow, (0, vue.unref)(rightCurrentView) === "date"]])])
|
||||
], 2),
|
||||
(0, vue.unref)(rightCurrentView) === "date" ? ((0, vue.openBlock)(), (0, vue.createBlock)(require_basic_date_table.default, {
|
||||
key: 0,
|
||||
ref_key: "rightCurrentViewRef",
|
||||
ref: rightCurrentViewRef,
|
||||
"selection-mode": "range",
|
||||
date: rightDate.value,
|
||||
"min-date": (0, vue.unref)(minDate),
|
||||
"max-date": (0, vue.unref)(maxDate),
|
||||
"range-state": (0, vue.unref)(rangeState),
|
||||
"disabled-date": (0, vue.unref)(disabledDate),
|
||||
"cell-class-name": (0, vue.unref)(cellClassName),
|
||||
"show-week-number": _ctx.showWeekNumber,
|
||||
disabled: (0, vue.unref)(dateRangeDisabled),
|
||||
onChangerange: (0, vue.unref)(handleChangeRange),
|
||||
onPick: handleRangePick,
|
||||
onSelect: (0, vue.unref)(onSelect)
|
||||
}, null, 8, [
|
||||
"date",
|
||||
"min-date",
|
||||
"max-date",
|
||||
"range-state",
|
||||
"disabled-date",
|
||||
"cell-class-name",
|
||||
"show-week-number",
|
||||
"disabled",
|
||||
"onChangerange",
|
||||
"onSelect"
|
||||
])) : (0, vue.createCommentVNode)("v-if", true),
|
||||
(0, vue.unref)(rightCurrentView) === "year" ? ((0, vue.openBlock)(), (0, vue.createBlock)(require_basic_year_table.default, {
|
||||
key: 1,
|
||||
ref_key: "rightCurrentViewRef",
|
||||
ref: rightCurrentViewRef,
|
||||
"selection-mode": "year",
|
||||
date: rightDate.value,
|
||||
"disabled-date": (0, vue.unref)(disabledDate),
|
||||
"parsed-value": _ctx.parsedValue,
|
||||
disabled: (0, vue.unref)(dateRangeDisabled),
|
||||
onPick: (0, vue.unref)(handleRightYearPick)
|
||||
}, null, 8, [
|
||||
"date",
|
||||
"disabled-date",
|
||||
"parsed-value",
|
||||
"disabled",
|
||||
"onPick"
|
||||
])) : (0, vue.createCommentVNode)("v-if", true),
|
||||
(0, vue.unref)(rightCurrentView) === "month" ? ((0, vue.openBlock)(), (0, vue.createBlock)(require_basic_month_table.default, {
|
||||
key: 2,
|
||||
ref_key: "rightCurrentViewRef",
|
||||
ref: rightCurrentViewRef,
|
||||
"selection-mode": "month",
|
||||
date: rightDate.value,
|
||||
"parsed-value": _ctx.parsedValue,
|
||||
"disabled-date": (0, vue.unref)(disabledDate),
|
||||
disabled: (0, vue.unref)(dateRangeDisabled),
|
||||
onPick: (0, vue.unref)(handleRightMonthPick)
|
||||
}, null, 8, [
|
||||
"date",
|
||||
"parsed-value",
|
||||
"disabled-date",
|
||||
"disabled",
|
||||
"onPick"
|
||||
])) : (0, vue.createCommentVNode)("v-if", true)
|
||||
], 2)) : (0, vue.createCommentVNode)("v-if", true)
|
||||
], 2)
|
||||
], 2), _ctx.showFooter && showTime.value && (_ctx.showConfirm || (0, vue.unref)(clearable)) ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
|
||||
key: 0,
|
||||
class: (0, vue.normalizeClass)((0, vue.unref)(ppNs).e("footer"))
|
||||
}, [(0, vue.unref)(clearable) ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_index$3.ElButton), {
|
||||
key: 0,
|
||||
text: "",
|
||||
size: "small",
|
||||
class: (0, vue.normalizeClass)((0, vue.unref)(ppNs).e("link-btn")),
|
||||
onClick: onClear
|
||||
}, {
|
||||
default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)((0, vue.unref)(t)("el.datepicker.clear")), 1)]),
|
||||
_: 1
|
||||
}, 8, ["class"])) : (0, vue.createCommentVNode)("v-if", true), _ctx.showConfirm ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_index$3.ElButton), {
|
||||
key: 1,
|
||||
plain: "",
|
||||
size: "small",
|
||||
class: (0, vue.normalizeClass)((0, vue.unref)(ppNs).e("link-btn")),
|
||||
disabled: btnDisabled.value,
|
||||
onClick: _cache[18] || (_cache[18] = ($event) => (0, vue.unref)(handleRangeConfirm)(false))
|
||||
}, {
|
||||
default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)((0, vue.unref)(t)("el.datepicker.confirm")), 1)]),
|
||||
_: 1
|
||||
}, 8, ["class", "disabled"])) : (0, vue.createCommentVNode)("v-if", true)], 2)) : (0, vue.createCommentVNode)("v-if", true)], 2);
|
||||
};
|
||||
}
|
||||
});
|
||||
//#endregion
|
||||
exports.default = panel_date_range_vue_vue_type_script_setup_true_lang_default;
|
||||
|
||||
//# sourceMappingURL=panel-date-range.vue_vue_type_script_setup_true_lang.js.map
|
||||
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
Generated
Vendored
+10
@@ -0,0 +1,10 @@
|
||||
Object.defineProperties(exports, {
|
||||
__esModule: { value: true },
|
||||
[Symbol.toStringTag]: { value: "Module" }
|
||||
});
|
||||
//#region ../../packages/components/date-picker-panel/src/date-picker-com/panel-month-range.vue
|
||||
var panel_month_range_default = require("./panel-month-range.vue_vue_type_script_setup_true_lang.js").default;
|
||||
//#endregion
|
||||
exports.default = panel_month_range_default;
|
||||
|
||||
//# sourceMappingURL=panel-month-range.js.map
|
||||
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
Generated
Vendored
+66
@@ -0,0 +1,66 @@
|
||||
import { EpPropFinalized, EpPropMergeType } from "../../../../utils/vue/props/types.js";
|
||||
import { DayOrDays } from "../../../time-picker/src/common/props.js";
|
||||
import * as _$vue from "vue";
|
||||
import dayjs from "dayjs";
|
||||
|
||||
//#region ../../packages/components/date-picker-panel/src/date-picker-com/panel-month-range.vue.d.ts
|
||||
declare var __VLS_1: {
|
||||
class: string;
|
||||
}, __VLS_3: {}, __VLS_16: {}, __VLS_38: {}, __VLS_51: {};
|
||||
type __VLS_Slots = {} & {
|
||||
sidebar?: (props: typeof __VLS_1) => any;
|
||||
} & {
|
||||
'prev-year'?: (props: typeof __VLS_3) => any;
|
||||
} & {
|
||||
'next-year'?: (props: typeof __VLS_16) => any;
|
||||
} & {
|
||||
'prev-year'?: (props: typeof __VLS_38) => any;
|
||||
} & {
|
||||
'next-year'?: (props: typeof __VLS_51) => any;
|
||||
};
|
||||
declare const __VLS_base: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
|
||||
readonly unlinkPanels: BooleanConstructor;
|
||||
readonly visible: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
|
||||
readonly showConfirm: BooleanConstructor;
|
||||
readonly showFooter: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
|
||||
readonly border: BooleanConstructor;
|
||||
readonly disabled: BooleanConstructor;
|
||||
readonly parsedValue: {
|
||||
readonly type: _$vue.PropType<EpPropMergeType<(new (...args: any[]) => dayjs.Dayjs | [dayjs.Dayjs, dayjs.Dayjs]) | (() => DayOrDays) | (((new (...args: any[]) => dayjs.Dayjs | [dayjs.Dayjs, dayjs.Dayjs]) | (() => DayOrDays)) | null)[], unknown, unknown>>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly singlePanel: BooleanConstructor;
|
||||
}>, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<_$vue.ExtractPropTypes<{
|
||||
readonly unlinkPanels: BooleanConstructor;
|
||||
readonly visible: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
|
||||
readonly showConfirm: BooleanConstructor;
|
||||
readonly showFooter: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
|
||||
readonly border: BooleanConstructor;
|
||||
readonly disabled: BooleanConstructor;
|
||||
readonly parsedValue: {
|
||||
readonly type: _$vue.PropType<EpPropMergeType<(new (...args: any[]) => dayjs.Dayjs | [dayjs.Dayjs, dayjs.Dayjs]) | (() => DayOrDays) | (((new (...args: any[]) => dayjs.Dayjs | [dayjs.Dayjs, dayjs.Dayjs]) | (() => DayOrDays)) | null)[], unknown, unknown>>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly singlePanel: BooleanConstructor;
|
||||
}>> & Readonly<{}>, {
|
||||
readonly disabled: boolean;
|
||||
readonly visible: EpPropMergeType<BooleanConstructor, unknown, unknown>;
|
||||
readonly border: boolean;
|
||||
readonly showConfirm: boolean;
|
||||
readonly showFooter: EpPropMergeType<BooleanConstructor, unknown, unknown>;
|
||||
readonly unlinkPanels: boolean;
|
||||
readonly singlePanel: boolean;
|
||||
}, {}, {}, {}, string, _$vue.ComponentProvideOptions, true, {}, 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 as default };
|
||||
Generated
Vendored
+216
@@ -0,0 +1,216 @@
|
||||
const require_runtime = require("../../../../_virtual/_rolldown/runtime.js");
|
||||
const require_index = require("../../../../hooks/use-locale/index.js");
|
||||
const require_index$1 = require("../../../icon/index.js");
|
||||
const require_use_form_common_props = require("../../../form/src/hooks/use-form-common-props.js");
|
||||
const require_constants = require("../../../time-picker/src/constants.js");
|
||||
const require_utils = require("../utils.js");
|
||||
const require_basic_month_table = require("./basic-month-table.js");
|
||||
const require_use_range_picker = require("../composables/use-range-picker.js");
|
||||
const require_panel_month_range = require("../props/panel-month-range.js");
|
||||
const require_use_month_range_header = require("../composables/use-month-range-header.js");
|
||||
let _element_plus_icons_vue = require("@element-plus/icons-vue");
|
||||
let vue = require("vue");
|
||||
let dayjs = require("dayjs");
|
||||
dayjs = require_runtime.__toESM(dayjs);
|
||||
//#region ../../packages/components/date-picker-panel/src/date-picker-com/panel-month-range.vue?vue&type=script&setup=true&lang.ts
|
||||
const _hoisted_1 = ["disabled", "onClick"];
|
||||
const _hoisted_2 = ["disabled"];
|
||||
const _hoisted_3 = ["disabled"];
|
||||
const _hoisted_4 = ["disabled"];
|
||||
const _hoisted_5 = ["disabled"];
|
||||
const unit = "year";
|
||||
var panel_month_range_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
|
||||
name: "DatePickerMonthRange",
|
||||
__name: "panel-month-range",
|
||||
props: require_panel_month_range.panelMonthRangeProps,
|
||||
emits: require_panel_month_range.panelMonthRangeEmits,
|
||||
setup(__props, { emit: __emit }) {
|
||||
const props = __props;
|
||||
const emit = __emit;
|
||||
const { lang } = require_index.useLocale();
|
||||
const pickerBase = (0, vue.inject)(require_constants.PICKER_BASE_INJECTION_KEY);
|
||||
const { shortcuts, disabledDate, cellClassName } = pickerBase.props;
|
||||
const format = (0, vue.toRef)(pickerBase.props, "format");
|
||||
const defaultValue = (0, vue.toRef)(pickerBase.props, "defaultValue");
|
||||
const leftDate = (0, vue.ref)((0, dayjs.default)().locale(lang.value));
|
||||
const rightDate = (0, vue.ref)((0, dayjs.default)().locale(lang.value).add(1, unit));
|
||||
const { minDate, maxDate, rangeState, ppNs, drpNs, handleChangeRange, handleRangeConfirm, handleShortcutClick, onSelect, parseValue } = require_use_range_picker.useRangePicker(props, {
|
||||
defaultValue,
|
||||
leftDate,
|
||||
rightDate,
|
||||
unit,
|
||||
sortDates
|
||||
});
|
||||
const hasShortcuts = (0, vue.computed)(() => !!shortcuts.length);
|
||||
const { leftPrevYear, rightNextYear, leftNextYear, rightPrevYear, leftLabel, rightLabel, leftYear, rightYear } = require_use_month_range_header.useMonthRangeHeader({
|
||||
unlinkPanels: (0, vue.toRef)(props, "unlinkPanels"),
|
||||
leftDate,
|
||||
rightDate
|
||||
});
|
||||
const enableYearArrow = (0, vue.computed)(() => {
|
||||
return props.singlePanel || props.unlinkPanels && rightYear.value > leftYear.value + 1;
|
||||
});
|
||||
const handleRangePick = (val, close = true) => {
|
||||
const minDate_ = val.minDate;
|
||||
const maxDate_ = val.maxDate;
|
||||
if (maxDate.value === maxDate_ && minDate.value === minDate_) return;
|
||||
emit("calendar-change", [minDate_.toDate(), maxDate_ && maxDate_.toDate()]);
|
||||
maxDate.value = maxDate_;
|
||||
minDate.value = minDate_;
|
||||
if (!close) return;
|
||||
handleRangeConfirm();
|
||||
};
|
||||
const handleClear = () => {
|
||||
let valueOnClear = null;
|
||||
if (pickerBase?.emptyValues) valueOnClear = pickerBase.emptyValues.valueOnClear.value;
|
||||
leftDate.value = require_utils.getDefaultValue((0, vue.unref)(defaultValue), {
|
||||
lang: (0, vue.unref)(lang),
|
||||
unit: "year",
|
||||
unlinkPanels: props.unlinkPanels
|
||||
})[0];
|
||||
rightDate.value = leftDate.value.add(1, "year");
|
||||
emit("pick", valueOnClear);
|
||||
};
|
||||
const parseUserInput = (value) => {
|
||||
return require_utils.correctlyParseUserInput(value, format.value, lang.value);
|
||||
};
|
||||
function sortDates(minDate, maxDate) {
|
||||
if (props.unlinkPanels && maxDate) rightDate.value = (minDate?.year() || 0) === maxDate.year() ? maxDate.add(1, unit) : maxDate;
|
||||
else rightDate.value = leftDate.value.add(1, unit);
|
||||
}
|
||||
const monthRangeDisabled = require_use_form_common_props.useFormDisabled();
|
||||
(0, vue.watch)(() => props.visible, (visible) => {
|
||||
if (!visible && rangeState.value.selecting) {
|
||||
parseValue(props.parsedValue);
|
||||
onSelect(false);
|
||||
}
|
||||
});
|
||||
emit("set-picker-option", ["isValidValue", require_utils.isValidRange]);
|
||||
emit("set-picker-option", ["parseUserInput", parseUserInput]);
|
||||
emit("set-picker-option", ["handleClear", handleClear]);
|
||||
return (_ctx, _cache) => {
|
||||
return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", { class: (0, vue.normalizeClass)([
|
||||
(0, vue.unref)(ppNs).b(),
|
||||
(0, vue.unref)(drpNs).b(),
|
||||
(0, vue.unref)(ppNs).is("border", _ctx.border),
|
||||
(0, vue.unref)(ppNs).is("disabled", (0, vue.unref)(monthRangeDisabled)),
|
||||
{
|
||||
"has-sidebar": Boolean(_ctx.$slots.sidebar) || hasShortcuts.value,
|
||||
"single-panel": _ctx.singlePanel
|
||||
}
|
||||
]) }, [(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(ppNs).e("body-wrapper")) }, [
|
||||
(0, vue.renderSlot)(_ctx.$slots, "sidebar", { class: (0, vue.normalizeClass)((0, vue.unref)(ppNs).e("sidebar")) }),
|
||||
hasShortcuts.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
|
||||
key: 0,
|
||||
class: (0, vue.normalizeClass)((0, vue.unref)(ppNs).e("sidebar"))
|
||||
}, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)((0, vue.unref)(shortcuts), (shortcut, key) => {
|
||||
return (0, vue.openBlock)(), (0, vue.createElementBlock)("button", {
|
||||
key,
|
||||
type: "button",
|
||||
class: (0, vue.normalizeClass)((0, vue.unref)(ppNs).e("shortcut")),
|
||||
disabled: (0, vue.unref)(monthRangeDisabled),
|
||||
onClick: ($event) => (0, vue.unref)(handleShortcutClick)(shortcut)
|
||||
}, (0, vue.toDisplayString)(shortcut.text), 11, _hoisted_1);
|
||||
}), 128))], 2)) : (0, vue.createCommentVNode)("v-if", true),
|
||||
(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(ppNs).e("body")) }, [(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)([
|
||||
(0, vue.unref)(ppNs).e("content"),
|
||||
(0, vue.unref)(drpNs).e("content"),
|
||||
(0, vue.unref)(drpNs).is("left", !_ctx.singlePanel)
|
||||
]) }, [(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(drpNs).e("header")) }, [
|
||||
(0, vue.createElementVNode)("button", {
|
||||
type: "button",
|
||||
class: (0, vue.normalizeClass)([(0, vue.unref)(ppNs).e("icon-btn"), "d-arrow-left"]),
|
||||
disabled: (0, vue.unref)(monthRangeDisabled),
|
||||
onClick: _cache[0] || (_cache[0] = (...args) => (0, vue.unref)(leftPrevYear) && (0, vue.unref)(leftPrevYear)(...args))
|
||||
}, [(0, vue.renderSlot)(_ctx.$slots, "prev-year", {}, () => [(0, vue.createVNode)((0, vue.unref)(require_index$1.ElIcon), null, {
|
||||
default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_element_plus_icons_vue.DArrowLeft))]),
|
||||
_: 1
|
||||
})])], 10, _hoisted_2),
|
||||
_ctx.unlinkPanels || _ctx.singlePanel ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("button", {
|
||||
key: 0,
|
||||
type: "button",
|
||||
disabled: !enableYearArrow.value || (0, vue.unref)(monthRangeDisabled),
|
||||
class: (0, vue.normalizeClass)([[(0, vue.unref)(ppNs).e("icon-btn"), (0, vue.unref)(ppNs).is("disabled", !enableYearArrow.value || (0, vue.unref)(monthRangeDisabled))], "d-arrow-right"]),
|
||||
onClick: _cache[1] || (_cache[1] = (...args) => (0, vue.unref)(leftNextYear) && (0, vue.unref)(leftNextYear)(...args))
|
||||
}, [(0, vue.renderSlot)(_ctx.$slots, "next-year", {}, () => [(0, vue.createVNode)((0, vue.unref)(require_index$1.ElIcon), null, {
|
||||
default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_element_plus_icons_vue.DArrowRight))]),
|
||||
_: 1
|
||||
})])], 10, _hoisted_3)) : (0, vue.createCommentVNode)("v-if", true),
|
||||
(0, vue.createElementVNode)("div", null, (0, vue.toDisplayString)((0, vue.unref)(leftLabel)), 1)
|
||||
], 2), (0, vue.createVNode)(require_basic_month_table.default, {
|
||||
"selection-mode": "range",
|
||||
date: leftDate.value,
|
||||
"min-date": (0, vue.unref)(minDate),
|
||||
"max-date": (0, vue.unref)(maxDate),
|
||||
"range-state": (0, vue.unref)(rangeState),
|
||||
"disabled-date": (0, vue.unref)(disabledDate),
|
||||
disabled: (0, vue.unref)(monthRangeDisabled),
|
||||
"cell-class-name": (0, vue.unref)(cellClassName),
|
||||
onChangerange: (0, vue.unref)(handleChangeRange),
|
||||
onPick: handleRangePick,
|
||||
onSelect: (0, vue.unref)(onSelect)
|
||||
}, null, 8, [
|
||||
"date",
|
||||
"min-date",
|
||||
"max-date",
|
||||
"range-state",
|
||||
"disabled-date",
|
||||
"disabled",
|
||||
"cell-class-name",
|
||||
"onChangerange",
|
||||
"onSelect"
|
||||
])], 2), !_ctx.singlePanel ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
|
||||
key: 0,
|
||||
class: (0, vue.normalizeClass)([[(0, vue.unref)(ppNs).e("content"), (0, vue.unref)(drpNs).e("content")], "is-right"])
|
||||
}, [(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(drpNs).e("header")) }, [
|
||||
_ctx.unlinkPanels ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("button", {
|
||||
key: 0,
|
||||
type: "button",
|
||||
disabled: !enableYearArrow.value || (0, vue.unref)(monthRangeDisabled),
|
||||
class: (0, vue.normalizeClass)([[(0, vue.unref)(ppNs).e("icon-btn"), (0, vue.unref)(ppNs).is("disabled", !enableYearArrow.value || (0, vue.unref)(monthRangeDisabled))], "d-arrow-left"]),
|
||||
onClick: _cache[2] || (_cache[2] = (...args) => (0, vue.unref)(rightPrevYear) && (0, vue.unref)(rightPrevYear)(...args))
|
||||
}, [(0, vue.renderSlot)(_ctx.$slots, "prev-year", {}, () => [(0, vue.createVNode)((0, vue.unref)(require_index$1.ElIcon), null, {
|
||||
default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_element_plus_icons_vue.DArrowLeft))]),
|
||||
_: 1
|
||||
})])], 10, _hoisted_4)) : (0, vue.createCommentVNode)("v-if", true),
|
||||
(0, vue.createElementVNode)("button", {
|
||||
type: "button",
|
||||
class: (0, vue.normalizeClass)([(0, vue.unref)(ppNs).e("icon-btn"), "d-arrow-right"]),
|
||||
disabled: (0, vue.unref)(monthRangeDisabled),
|
||||
onClick: _cache[3] || (_cache[3] = (...args) => (0, vue.unref)(rightNextYear) && (0, vue.unref)(rightNextYear)(...args))
|
||||
}, [(0, vue.renderSlot)(_ctx.$slots, "next-year", {}, () => [(0, vue.createVNode)((0, vue.unref)(require_index$1.ElIcon), null, {
|
||||
default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_element_plus_icons_vue.DArrowRight))]),
|
||||
_: 1
|
||||
})])], 10, _hoisted_5),
|
||||
(0, vue.createElementVNode)("div", null, (0, vue.toDisplayString)((0, vue.unref)(rightLabel)), 1)
|
||||
], 2), (0, vue.createVNode)(require_basic_month_table.default, {
|
||||
"selection-mode": "range",
|
||||
date: rightDate.value,
|
||||
"min-date": (0, vue.unref)(minDate),
|
||||
"max-date": (0, vue.unref)(maxDate),
|
||||
"range-state": (0, vue.unref)(rangeState),
|
||||
"disabled-date": (0, vue.unref)(disabledDate),
|
||||
disabled: (0, vue.unref)(monthRangeDisabled),
|
||||
"cell-class-name": (0, vue.unref)(cellClassName),
|
||||
onChangerange: (0, vue.unref)(handleChangeRange),
|
||||
onPick: handleRangePick,
|
||||
onSelect: (0, vue.unref)(onSelect)
|
||||
}, null, 8, [
|
||||
"date",
|
||||
"min-date",
|
||||
"max-date",
|
||||
"range-state",
|
||||
"disabled-date",
|
||||
"disabled",
|
||||
"cell-class-name",
|
||||
"onChangerange",
|
||||
"onSelect"
|
||||
])], 2)) : (0, vue.createCommentVNode)("v-if", true)], 2)
|
||||
], 2)], 2);
|
||||
};
|
||||
}
|
||||
});
|
||||
//#endregion
|
||||
exports.default = panel_month_range_vue_vue_type_script_setup_true_lang_default;
|
||||
|
||||
//# sourceMappingURL=panel-month-range.vue_vue_type_script_setup_true_lang.js.map
|
||||
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
Generated
Vendored
+10
@@ -0,0 +1,10 @@
|
||||
Object.defineProperties(exports, {
|
||||
__esModule: { value: true },
|
||||
[Symbol.toStringTag]: { value: "Module" }
|
||||
});
|
||||
//#region ../../packages/components/date-picker-panel/src/date-picker-com/panel-year-range.vue
|
||||
var panel_year_range_default = require("./panel-year-range.vue_vue_type_script_setup_true_lang.js").default;
|
||||
//#endregion
|
||||
exports.default = panel_year_range_default;
|
||||
|
||||
//# sourceMappingURL=panel-year-range.js.map
|
||||
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
Generated
Vendored
+66
@@ -0,0 +1,66 @@
|
||||
import { EpPropFinalized, EpPropMergeType } from "../../../../utils/vue/props/types.js";
|
||||
import { DayOrDays } from "../../../time-picker/src/common/props.js";
|
||||
import * as _$vue from "vue";
|
||||
import dayjs from "dayjs";
|
||||
|
||||
//#region ../../packages/components/date-picker-panel/src/date-picker-com/panel-year-range.vue.d.ts
|
||||
declare var __VLS_1: {
|
||||
class: string;
|
||||
}, __VLS_3: {}, __VLS_16: {}, __VLS_38: {}, __VLS_51: {};
|
||||
type __VLS_Slots = {} & {
|
||||
sidebar?: (props: typeof __VLS_1) => any;
|
||||
} & {
|
||||
'prev-year'?: (props: typeof __VLS_3) => any;
|
||||
} & {
|
||||
'next-year'?: (props: typeof __VLS_16) => any;
|
||||
} & {
|
||||
'prev-year'?: (props: typeof __VLS_38) => any;
|
||||
} & {
|
||||
'next-year'?: (props: typeof __VLS_51) => any;
|
||||
};
|
||||
declare const __VLS_base: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
|
||||
readonly unlinkPanels: BooleanConstructor;
|
||||
readonly visible: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
|
||||
readonly showConfirm: BooleanConstructor;
|
||||
readonly showFooter: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
|
||||
readonly border: BooleanConstructor;
|
||||
readonly disabled: BooleanConstructor;
|
||||
readonly parsedValue: {
|
||||
readonly type: _$vue.PropType<EpPropMergeType<(new (...args: any[]) => dayjs.Dayjs | [dayjs.Dayjs, dayjs.Dayjs]) | (() => DayOrDays) | (((new (...args: any[]) => dayjs.Dayjs | [dayjs.Dayjs, dayjs.Dayjs]) | (() => DayOrDays)) | null)[], unknown, unknown>>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly singlePanel: BooleanConstructor;
|
||||
}>, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<_$vue.ExtractPropTypes<{
|
||||
readonly unlinkPanels: BooleanConstructor;
|
||||
readonly visible: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
|
||||
readonly showConfirm: BooleanConstructor;
|
||||
readonly showFooter: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
|
||||
readonly border: BooleanConstructor;
|
||||
readonly disabled: BooleanConstructor;
|
||||
readonly parsedValue: {
|
||||
readonly type: _$vue.PropType<EpPropMergeType<(new (...args: any[]) => dayjs.Dayjs | [dayjs.Dayjs, dayjs.Dayjs]) | (() => DayOrDays) | (((new (...args: any[]) => dayjs.Dayjs | [dayjs.Dayjs, dayjs.Dayjs]) | (() => DayOrDays)) | null)[], unknown, unknown>>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly singlePanel: BooleanConstructor;
|
||||
}>> & Readonly<{}>, {
|
||||
readonly disabled: boolean;
|
||||
readonly visible: EpPropMergeType<BooleanConstructor, unknown, unknown>;
|
||||
readonly border: boolean;
|
||||
readonly showConfirm: boolean;
|
||||
readonly showFooter: EpPropMergeType<BooleanConstructor, unknown, unknown>;
|
||||
readonly unlinkPanels: boolean;
|
||||
readonly singlePanel: boolean;
|
||||
}, {}, {}, {}, string, _$vue.ComponentProvideOptions, true, {}, 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 as default };
|
||||
Generated
Vendored
+253
@@ -0,0 +1,253 @@
|
||||
const require_runtime = require("../../../../_virtual/_rolldown/runtime.js");
|
||||
const require_index = require("../../../../hooks/use-locale/index.js");
|
||||
const require_index$1 = require("../../../icon/index.js");
|
||||
const require_use_form_common_props = require("../../../form/src/hooks/use-form-common-props.js");
|
||||
const require_constants = require("../../../time-picker/src/constants.js");
|
||||
const require_utils = require("../utils.js");
|
||||
const require_basic_year_table = require("./basic-year-table.js");
|
||||
const require_use_range_picker = require("../composables/use-range-picker.js");
|
||||
const require_panel_year_range = require("../props/panel-year-range.js");
|
||||
const require_use_year_range_header = require("../composables/use-year-range-header.js");
|
||||
let _element_plus_icons_vue = require("@element-plus/icons-vue");
|
||||
let vue = require("vue");
|
||||
let dayjs = require("dayjs");
|
||||
dayjs = require_runtime.__toESM(dayjs);
|
||||
//#region ../../packages/components/date-picker-panel/src/date-picker-com/panel-year-range.vue?vue&type=script&setup=true&lang.ts
|
||||
const _hoisted_1 = ["disabled", "onClick"];
|
||||
const _hoisted_2 = ["disabled"];
|
||||
const _hoisted_3 = ["disabled"];
|
||||
const _hoisted_4 = ["disabled"];
|
||||
const _hoisted_5 = ["disabled"];
|
||||
const step = 10;
|
||||
const unit = "year";
|
||||
var panel_year_range_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
|
||||
name: "DatePickerYearRange",
|
||||
__name: "panel-year-range",
|
||||
props: require_panel_year_range.panelYearRangeProps,
|
||||
emits: require_panel_year_range.panelYearRangeEmits,
|
||||
setup(__props, { emit: __emit }) {
|
||||
const props = __props;
|
||||
const emit = __emit;
|
||||
const { lang } = require_index.useLocale();
|
||||
const leftDate = (0, vue.ref)((0, dayjs.default)().locale(lang.value));
|
||||
const rightDate = (0, vue.ref)((0, dayjs.default)().locale(lang.value).add(step, unit));
|
||||
const pickerBase = (0, vue.inject)(require_constants.PICKER_BASE_INJECTION_KEY);
|
||||
const { shortcuts, disabledDate, cellClassName } = pickerBase.props;
|
||||
const format = (0, vue.toRef)(pickerBase.props, "format");
|
||||
const defaultValue = (0, vue.toRef)(pickerBase.props, "defaultValue");
|
||||
const { minDate, maxDate, rangeState, ppNs, drpNs, handleChangeRange, handleRangeConfirm, handleShortcutClick, onSelect, parseValue } = require_use_range_picker.useRangePicker(props, {
|
||||
defaultValue,
|
||||
leftDate,
|
||||
rightDate,
|
||||
step,
|
||||
unit,
|
||||
sortDates
|
||||
});
|
||||
const { leftPrevYear, rightNextYear, leftNextYear, rightPrevYear, leftLabel, rightLabel, leftYear, rightYear } = require_use_year_range_header.useYearRangeHeader({
|
||||
unlinkPanels: (0, vue.toRef)(props, "unlinkPanels"),
|
||||
leftDate,
|
||||
rightDate
|
||||
});
|
||||
const yearRangeDisabled = require_use_form_common_props.useFormDisabled();
|
||||
const hasShortcuts = (0, vue.computed)(() => !!shortcuts.length);
|
||||
const panelKls = (0, vue.computed)(() => [
|
||||
ppNs.b(),
|
||||
drpNs.b(),
|
||||
ppNs.is("border", props.border),
|
||||
ppNs.is("disabled", yearRangeDisabled.value),
|
||||
{
|
||||
"has-sidebar": Boolean((0, vue.useSlots)().sidebar) || hasShortcuts.value,
|
||||
"single-panel": props.singlePanel
|
||||
}
|
||||
]);
|
||||
const leftPanelKls = (0, vue.computed)(() => {
|
||||
return {
|
||||
content: [
|
||||
ppNs.e("content"),
|
||||
drpNs.e("content"),
|
||||
drpNs.is("left", !props.singlePanel)
|
||||
],
|
||||
arrowLeftBtn: [ppNs.e("icon-btn"), "d-arrow-left"],
|
||||
arrowRightBtn: [
|
||||
ppNs.e("icon-btn"),
|
||||
ppNs.is("disabled", !enableYearArrow.value || yearRangeDisabled.value),
|
||||
"d-arrow-right"
|
||||
]
|
||||
};
|
||||
});
|
||||
const rightPanelKls = (0, vue.computed)(() => {
|
||||
return {
|
||||
content: [
|
||||
ppNs.e("content"),
|
||||
drpNs.e("content"),
|
||||
"is-right"
|
||||
],
|
||||
arrowLeftBtn: [
|
||||
ppNs.e("icon-btn"),
|
||||
ppNs.is("disabled", !enableYearArrow.value || yearRangeDisabled.value),
|
||||
"d-arrow-left"
|
||||
],
|
||||
arrowRightBtn: [ppNs.e("icon-btn"), "d-arrow-right"]
|
||||
};
|
||||
});
|
||||
const enableYearArrow = (0, vue.computed)(() => {
|
||||
return props.singlePanel || props.unlinkPanels && rightYear.value > leftYear.value + 1;
|
||||
});
|
||||
const handleRangePick = (val, close = true) => {
|
||||
const minDate_ = val.minDate;
|
||||
const maxDate_ = val.maxDate;
|
||||
if (maxDate.value === maxDate_ && minDate.value === minDate_) return;
|
||||
emit("calendar-change", [minDate_.toDate(), maxDate_ && maxDate_.toDate()]);
|
||||
maxDate.value = maxDate_;
|
||||
minDate.value = minDate_;
|
||||
if (!close) return;
|
||||
handleRangeConfirm();
|
||||
};
|
||||
const parseUserInput = (value) => {
|
||||
return require_utils.correctlyParseUserInput(value, format.value, lang.value);
|
||||
};
|
||||
const isValidValue = (date) => {
|
||||
return require_utils.isValidRange(date) && (disabledDate ? !disabledDate(date[0].toDate()) && !disabledDate(date[1].toDate()) : true);
|
||||
};
|
||||
const handleClear = () => {
|
||||
let valueOnClear = null;
|
||||
if (pickerBase?.emptyValues) valueOnClear = pickerBase.emptyValues.valueOnClear.value;
|
||||
const defaultArr = require_utils.getDefaultValue((0, vue.unref)(defaultValue), {
|
||||
lang: (0, vue.unref)(lang),
|
||||
step,
|
||||
unit,
|
||||
unlinkPanels: props.unlinkPanels
|
||||
});
|
||||
leftDate.value = defaultArr[0];
|
||||
rightDate.value = defaultArr[1];
|
||||
emit("pick", valueOnClear);
|
||||
};
|
||||
function sortDates(minDate, maxDate) {
|
||||
if (props.unlinkPanels && maxDate) {
|
||||
const minDateYear = minDate?.year() || 0;
|
||||
const maxDateYear = maxDate.year();
|
||||
rightDate.value = minDateYear + step > maxDateYear ? maxDate.add(step, unit) : maxDate;
|
||||
} else rightDate.value = leftDate.value.add(step, unit);
|
||||
}
|
||||
(0, vue.watch)(() => props.visible, (visible) => {
|
||||
if (!visible && rangeState.value.selecting) {
|
||||
parseValue(props.parsedValue);
|
||||
onSelect(false);
|
||||
}
|
||||
});
|
||||
emit("set-picker-option", ["isValidValue", isValidValue]);
|
||||
emit("set-picker-option", ["parseUserInput", parseUserInput]);
|
||||
emit("set-picker-option", ["handleClear", handleClear]);
|
||||
return (_ctx, _cache) => {
|
||||
return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", { class: (0, vue.normalizeClass)(panelKls.value) }, [(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(ppNs).e("body-wrapper")) }, [
|
||||
(0, vue.renderSlot)(_ctx.$slots, "sidebar", { class: (0, vue.normalizeClass)((0, vue.unref)(ppNs).e("sidebar")) }),
|
||||
hasShortcuts.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
|
||||
key: 0,
|
||||
class: (0, vue.normalizeClass)((0, vue.unref)(ppNs).e("sidebar"))
|
||||
}, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)((0, vue.unref)(shortcuts), (shortcut, key) => {
|
||||
return (0, vue.openBlock)(), (0, vue.createElementBlock)("button", {
|
||||
key,
|
||||
type: "button",
|
||||
class: (0, vue.normalizeClass)((0, vue.unref)(ppNs).e("shortcut")),
|
||||
disabled: (0, vue.unref)(yearRangeDisabled),
|
||||
onClick: ($event) => (0, vue.unref)(handleShortcutClick)(shortcut)
|
||||
}, (0, vue.toDisplayString)(shortcut.text), 11, _hoisted_1);
|
||||
}), 128))], 2)) : (0, vue.createCommentVNode)("v-if", true),
|
||||
(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(ppNs).e("body")) }, [(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)(leftPanelKls.value.content) }, [(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(drpNs).e("header")) }, [
|
||||
(0, vue.createElementVNode)("button", {
|
||||
type: "button",
|
||||
class: (0, vue.normalizeClass)(leftPanelKls.value.arrowLeftBtn),
|
||||
disabled: (0, vue.unref)(yearRangeDisabled),
|
||||
onClick: _cache[0] || (_cache[0] = (...args) => (0, vue.unref)(leftPrevYear) && (0, vue.unref)(leftPrevYear)(...args))
|
||||
}, [(0, vue.renderSlot)(_ctx.$slots, "prev-year", {}, () => [(0, vue.createVNode)((0, vue.unref)(require_index$1.ElIcon), null, {
|
||||
default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_element_plus_icons_vue.DArrowLeft))]),
|
||||
_: 1
|
||||
})])], 10, _hoisted_2),
|
||||
_ctx.unlinkPanels || _ctx.singlePanel ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("button", {
|
||||
key: 0,
|
||||
type: "button",
|
||||
disabled: !enableYearArrow.value || (0, vue.unref)(yearRangeDisabled),
|
||||
class: (0, vue.normalizeClass)(leftPanelKls.value.arrowRightBtn),
|
||||
onClick: _cache[1] || (_cache[1] = (...args) => (0, vue.unref)(leftNextYear) && (0, vue.unref)(leftNextYear)(...args))
|
||||
}, [(0, vue.renderSlot)(_ctx.$slots, "next-year", {}, () => [(0, vue.createVNode)((0, vue.unref)(require_index$1.ElIcon), null, {
|
||||
default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_element_plus_icons_vue.DArrowRight))]),
|
||||
_: 1
|
||||
})])], 10, _hoisted_3)) : (0, vue.createCommentVNode)("v-if", true),
|
||||
(0, vue.createElementVNode)("div", null, (0, vue.toDisplayString)((0, vue.unref)(leftLabel)), 1)
|
||||
], 2), (0, vue.createVNode)(require_basic_year_table.default, {
|
||||
"selection-mode": "range",
|
||||
date: leftDate.value,
|
||||
"min-date": (0, vue.unref)(minDate),
|
||||
"max-date": (0, vue.unref)(maxDate),
|
||||
"range-state": (0, vue.unref)(rangeState),
|
||||
"disabled-date": (0, vue.unref)(disabledDate),
|
||||
disabled: (0, vue.unref)(yearRangeDisabled),
|
||||
"cell-class-name": (0, vue.unref)(cellClassName),
|
||||
onChangerange: (0, vue.unref)(handleChangeRange),
|
||||
onPick: handleRangePick,
|
||||
onSelect: (0, vue.unref)(onSelect)
|
||||
}, null, 8, [
|
||||
"date",
|
||||
"min-date",
|
||||
"max-date",
|
||||
"range-state",
|
||||
"disabled-date",
|
||||
"disabled",
|
||||
"cell-class-name",
|
||||
"onChangerange",
|
||||
"onSelect"
|
||||
])], 2), !_ctx.singlePanel ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
|
||||
key: 0,
|
||||
class: (0, vue.normalizeClass)(rightPanelKls.value.content)
|
||||
}, [(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(drpNs).e("header")) }, [
|
||||
_ctx.unlinkPanels ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("button", {
|
||||
key: 0,
|
||||
type: "button",
|
||||
disabled: !enableYearArrow.value || (0, vue.unref)(yearRangeDisabled),
|
||||
class: (0, vue.normalizeClass)(rightPanelKls.value.arrowLeftBtn),
|
||||
onClick: _cache[2] || (_cache[2] = (...args) => (0, vue.unref)(rightPrevYear) && (0, vue.unref)(rightPrevYear)(...args))
|
||||
}, [(0, vue.renderSlot)(_ctx.$slots, "prev-year", {}, () => [(0, vue.createVNode)((0, vue.unref)(require_index$1.ElIcon), null, {
|
||||
default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_element_plus_icons_vue.DArrowLeft))]),
|
||||
_: 1
|
||||
})])], 10, _hoisted_4)) : (0, vue.createCommentVNode)("v-if", true),
|
||||
(0, vue.createElementVNode)("button", {
|
||||
type: "button",
|
||||
class: (0, vue.normalizeClass)(rightPanelKls.value.arrowRightBtn),
|
||||
disabled: (0, vue.unref)(yearRangeDisabled),
|
||||
onClick: _cache[3] || (_cache[3] = (...args) => (0, vue.unref)(rightNextYear) && (0, vue.unref)(rightNextYear)(...args))
|
||||
}, [(0, vue.renderSlot)(_ctx.$slots, "next-year", {}, () => [(0, vue.createVNode)((0, vue.unref)(require_index$1.ElIcon), null, {
|
||||
default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_element_plus_icons_vue.DArrowRight))]),
|
||||
_: 1
|
||||
})])], 10, _hoisted_5),
|
||||
(0, vue.createElementVNode)("div", null, (0, vue.toDisplayString)((0, vue.unref)(rightLabel)), 1)
|
||||
], 2), (0, vue.createVNode)(require_basic_year_table.default, {
|
||||
"selection-mode": "range",
|
||||
date: rightDate.value,
|
||||
"min-date": (0, vue.unref)(minDate),
|
||||
"max-date": (0, vue.unref)(maxDate),
|
||||
"range-state": (0, vue.unref)(rangeState),
|
||||
"disabled-date": (0, vue.unref)(disabledDate),
|
||||
disabled: (0, vue.unref)(yearRangeDisabled),
|
||||
"cell-class-name": (0, vue.unref)(cellClassName),
|
||||
onChangerange: (0, vue.unref)(handleChangeRange),
|
||||
onPick: handleRangePick,
|
||||
onSelect: (0, vue.unref)(onSelect)
|
||||
}, null, 8, [
|
||||
"date",
|
||||
"min-date",
|
||||
"max-date",
|
||||
"range-state",
|
||||
"disabled-date",
|
||||
"disabled",
|
||||
"cell-class-name",
|
||||
"onChangerange",
|
||||
"onSelect"
|
||||
])], 2)) : (0, vue.createCommentVNode)("v-if", true)], 2)
|
||||
], 2)], 2);
|
||||
};
|
||||
}
|
||||
});
|
||||
//#endregion
|
||||
exports.default = panel_year_range_vue_vue_type_script_setup_true_lang_default;
|
||||
|
||||
//# sourceMappingURL=panel-year-range.vue_vue_type_script_setup_true_lang.js.map
|
||||
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user