前端初始化
This commit is contained in:
“hsc”
node_modules/element-plus/es/components/date-picker-panel/src/date-picker-com/basic-cell-render.d.ts
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
+21
@@ -0,0 +1,21 @@
|
||||
import { useNamespace } from "../../../../hooks/use-namespace/index.mjs";
|
||||
import { ROOT_PICKER_INJECTION_KEY } from "../constants.mjs";
|
||||
import { basicCellProps } from "../props/basic-cell.mjs";
|
||||
import { createVNode, defineComponent, inject, renderSlot } from "vue";
|
||||
//#region ../../packages/components/date-picker-panel/src/date-picker-com/basic-cell-render.tsx
|
||||
var basic_cell_render_default = /* @__PURE__ */ defineComponent({
|
||||
name: "ElDatePickerCell",
|
||||
props: basicCellProps,
|
||||
setup(props) {
|
||||
const ns = useNamespace("date-table-cell");
|
||||
const { slots } = inject(ROOT_PICKER_INJECTION_KEY);
|
||||
return () => {
|
||||
const { cell } = props;
|
||||
return renderSlot(slots, "default", { ...cell }, () => [createVNode("div", { "class": ns.b() }, [createVNode("span", { "class": ns.e("text") }, [cell?.renderText ?? cell?.text])])]);
|
||||
};
|
||||
}
|
||||
});
|
||||
//#endregion
|
||||
export { basic_cell_render_default as default };
|
||||
|
||||
//# sourceMappingURL=basic-cell-render.mjs.map
|
||||
Generated
Vendored
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"basic-cell-render.mjs","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,gCAAgB;CAC7BQ,MAAM;CACNC,OAAOF;CACPG,MAAMD,OAAO;EACX,MAAME,KAAKN,aAAa,kBAAkB;EAC1C,MAAM,EAAEO,UAAUX,OAAOK,0BAA2B;EACpD,aAAa;GACX,MAAM,EAAEO,SAASJ;GAEjB,OAAOP,WAAWU,OAAO,WAAW,EAAE,GAAGC,MAAM,QAAQ,CAAAT,YAAA,OAAA,EAAA,SACzCO,GAAGG,GAAE,EAAC,EAAA,CAAAV,YAAA,QAAA,EAAA,SACHO,GAAGI,EAAE,OAAM,EAAC,EAAA,CAAGF,MAAMG,cAAcH,MAAMI,KAAI,CAAA,CAAA,CAAA,CAE7D,CAAC;;;CAGP,CAAC"}
|
||||
Generated
Vendored
+7
@@ -0,0 +1,7 @@
|
||||
import basic_date_table_vue_vue_type_script_setup_true_lang_default from "./basic-date-table.vue_vue_type_script_setup_true_lang.mjs";
|
||||
//#region ../../packages/components/date-picker-panel/src/date-picker-com/basic-date-table.vue
|
||||
var basic_date_table_default = basic_date_table_vue_vue_type_script_setup_true_lang_default;
|
||||
//#endregion
|
||||
export { basic_date_table_default as default };
|
||||
|
||||
//# sourceMappingURL=basic-date-table.mjs.map
|
||||
Generated
Vendored
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"basic-date-table.mjs","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
+82
@@ -0,0 +1,82 @@
|
||||
import { basicDateTableEmits, basicDateTableProps } from "../props/basic-date-table.mjs";
|
||||
import { useBasicDateTable, useBasicDateTableDOM } from "../composables/use-basic-date-table.mjs";
|
||||
import basic_cell_render_default from "./basic-cell-render.mjs";
|
||||
import { Fragment, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, onBeforeUnmount, openBlock, renderList, toDisplayString, unref } from "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__ */ defineComponent({
|
||||
__name: "basic-date-table",
|
||||
props: basicDateTableProps,
|
||||
emits: basicDateTableEmits,
|
||||
setup(__props, { expose: __expose, emit: __emit }) {
|
||||
const props = __props;
|
||||
const { WEEKS, rows, tbodyRef, currentCellRef, focus, isCurrent, isWeekActive, isSelectedCell, handlePickDate, handleMouseUp, handleMouseDown, handleMouseMove, handleFocus } = useBasicDateTable(props, __emit);
|
||||
const { tableLabel, tableKls, getCellClasses, getRowKls, weekHeaderClass, t } = useBasicDateTableDOM(props, {
|
||||
isCurrent,
|
||||
isWeekActive
|
||||
});
|
||||
let isUnmounting = false;
|
||||
onBeforeUnmount(() => {
|
||||
isUnmounting = true;
|
||||
});
|
||||
__expose({
|
||||
/**
|
||||
* @description focus on current cell
|
||||
*/
|
||||
focus });
|
||||
return (_ctx, _cache) => {
|
||||
return openBlock(), createElementBlock("table", {
|
||||
"aria-label": unref(tableLabel),
|
||||
class: normalizeClass(unref(tableKls)),
|
||||
cellspacing: "0",
|
||||
cellpadding: "0",
|
||||
role: "grid",
|
||||
onClick: _cache[1] || (_cache[1] = (...args) => unref(handlePickDate) && unref(handlePickDate)(...args)),
|
||||
onMousemove: _cache[2] || (_cache[2] = (...args) => unref(handleMouseMove) && unref(handleMouseMove)(...args)),
|
||||
onMousedown: _cache[3] || (_cache[3] = (...args) => unref(handleMouseDown) && unref(handleMouseDown)(...args)),
|
||||
onMouseup: _cache[4] || (_cache[4] = (...args) => unref(handleMouseUp) && unref(handleMouseUp)(...args))
|
||||
}, [createElementVNode("tbody", {
|
||||
ref_key: "tbodyRef",
|
||||
ref: tbodyRef
|
||||
}, [createElementVNode("tr", null, [_ctx.showWeekNumber ? (openBlock(), createElementBlock("th", {
|
||||
key: 0,
|
||||
scope: "col",
|
||||
class: normalizeClass(unref(weekHeaderClass))
|
||||
}, null, 2)) : createCommentVNode("v-if", true), (openBlock(true), createElementBlock(Fragment, null, renderList(unref(WEEKS), (week, key) => {
|
||||
return openBlock(), createElementBlock("th", {
|
||||
key,
|
||||
"aria-label": unref(t)("el.datepicker.weeksFull." + week),
|
||||
scope: "col"
|
||||
}, toDisplayString(unref(t)("el.datepicker.weeks." + week)), 9, _hoisted_2);
|
||||
}), 128))]), (openBlock(true), createElementBlock(Fragment, null, renderList(unref(rows), (row, rowKey) => {
|
||||
return openBlock(), createElementBlock("tr", {
|
||||
key: rowKey,
|
||||
class: normalizeClass(unref(getRowKls)(_ctx.showWeekNumber ? row[2] : row[1]))
|
||||
}, [(openBlock(true), createElementBlock(Fragment, null, renderList(row, (cell, columnKey) => {
|
||||
return openBlock(), createElementBlock("td", {
|
||||
key: `${rowKey}.${columnKey}`,
|
||||
ref_for: true,
|
||||
ref: (el) => !unref(isUnmounting) && unref(isSelectedCell)(cell) && (currentCellRef.value = el),
|
||||
class: normalizeClass(unref(getCellClasses)(cell)),
|
||||
"aria-current": cell.isCurrent ? "date" : void 0,
|
||||
"aria-selected": cell.isCurrent,
|
||||
tabindex: _ctx.disabled ? void 0 : unref(isSelectedCell)(cell) ? 0 : -1,
|
||||
"aria-disabled": _ctx.disabled,
|
||||
onFocus: _cache[0] || (_cache[0] = (...args) => unref(handleFocus) && unref(handleFocus)(...args))
|
||||
}, [createVNode(unref(basic_cell_render_default), { cell }, null, 8, ["cell"])], 42, _hoisted_3);
|
||||
}), 128))], 2);
|
||||
}), 128))], 512)], 42, _hoisted_1);
|
||||
};
|
||||
}
|
||||
});
|
||||
//#endregion
|
||||
export { basic_date_table_vue_vue_type_script_setup_true_lang_default as default };
|
||||
|
||||
//# sourceMappingURL=basic-date-table.vue_vue_type_script_setup_true_lang.mjs.map
|
||||
Generated
Vendored
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"basic-date-table.vue_vue_type_script_setup_true_lang.mjs","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,kBAAkB,OAAO,OAAI;EACjC,MAAM,EAAE,YAAY,UAAU,gBAAgB,WAAW,iBAAiB,MACxE,qBAAqB,OAAO;GAC1B;GACA;GACD,CAAA;EACH,IAAI,eAAe;EAEnB,sBAAsB;GACpB,eAAe;IAChB;EAED,SAAa;;;;AAIX,OACD,CAAA;;uBAnGC,mBAgDQ,SAAA;IA/CL,cAAY,MAAA,WAAU;IACtB,OAAK,eAAE,MAAA,SAAQ,CAAA;IAChB,aAAY;IACZ,aAAY;IACZ,MAAK;IACJ,SAAK,OAAA,OAAA,OAAA,MAAA,GAAA,SAAE,MAAA,eAAA,IAAA,MAAA,eAAA,CAAA,GAAA,KAAc;IACrB,aAAS,OAAA,OAAA,OAAA,MAAA,GAAA,SAAE,MAAA,gBAAA,IAAA,MAAA,gBAAA,CAAA,GAAA,KAAe;IAC1B,aAAS,OAAA,OAAA,OAAA,MAAA,GAAA,SAAE,MAAA,gBAAA,IAAA,MAAA,gBAAA,CAAA,GAAA,KAAe;IAC1B,WAAO,OAAA,OAAA,OAAA,MAAA,GAAA,SAAE,MAAA,cAAA,IAAA,MAAA,cAAA,CAAA,GAAA,KAAa;OAEvB,mBAoCQ,SAAA;aApCG;IAAJ,KAAI;OACT,mBAUK,MAAA,MAAA,CATOA,KAAAA,kBAAAA,WAAAA,EAAV,mBAAiE,MAAA;;IAAvC,OAAM;IAAO,OAAK,eAAE,MAAA,gBAAe,CAAA;sEAC7D,mBAOK,UAAA,MAAA,WANmB,MAAA,MAAK,GAAnB,MAAM,QAAG;wBADnB,mBAOK,MAAA;KALG;KACL,cAAY,MAAA,EAAC,CAAA,6BAA8B,KAAI;KAChD,OAAM;uBAEH,MAAA,EAAC,CAAA,yBAA0B,KAAI,CAAA,EAAA,GAAA,WAAA;kCAGtC,mBAuBK,UAAA,MAAA,WAtBqB,MAAA,KAAI,GAApB,KAAK,WAAM;wBADrB,mBAuBK,MAAA;KArBF,KAAK;KACL,OAAK,eAAE,MAAA,UAAS,CAACA,KAAAA,iBAAiB,IAAG,KAAM,IAAG,GAAA,CAAA;0BAE/C,mBAiBK,UAAA,MAAA,WAhByB,MAApB,MAAM,cAAS;yBADzB,mBAiBK,MAAA;MAfF,KAAG,GAAK,OAAM,GAAI;;MAClB,MAAmB,OAAA,CAAsB,MAAA,aAAY,IAAkB,MAAA,eAAc,CAAC,KAAI,KAAoB,eAAA,QAAiB;MAM/H,OAAK,eAAE,MAAA,eAAc,CAAC,KAAI,CAAA;MAC1B,gBAAc,KAAK,YAAS,SAAY,KAAA;MACxC,iBAAe,KAAK;MACpB,UAAUC,KAAAA,WAAW,KAAA,IAAY,MAAA,eAAc,CAAC,KAAI,GAAA,IAAA;MACpD,iBAAeA,KAAAA;MACf,SAAK,OAAA,OAAA,OAAA,MAAA,GAAA,SAAE,MAAA,YAAA,IAAA,MAAA,YAAA,CAAA,GAAA,KAAW;SAEnB,YAAoC,MAAA,0BAAA,EAAA,EAAR,MAAI,EAAA,MAAA,GAAA,CAAA,OAAA,CAAA,CAAA,EAAA,IAAA,WAAA"}
|
||||
Generated
Vendored
+7
@@ -0,0 +1,7 @@
|
||||
import basic_month_table_vue_vue_type_script_setup_true_lang_default from "./basic-month-table.vue_vue_type_script_setup_true_lang.mjs";
|
||||
//#region ../../packages/components/date-picker-panel/src/date-picker-com/basic-month-table.vue
|
||||
var basic_month_table_default = basic_month_table_vue_vue_type_script_setup_true_lang_default;
|
||||
//#endregion
|
||||
export { basic_month_table_default as default };
|
||||
|
||||
//# sourceMappingURL=basic-month-table.mjs.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
+210
@@ -0,0 +1,210 @@
|
||||
import { hasClass } from "../../../../utils/dom/style.mjs";
|
||||
import { castArray } from "../../../../utils/arrays.mjs";
|
||||
import { useLocale } from "../../../../hooks/use-locale/index.mjs";
|
||||
import { useNamespace } from "../../../../hooks/use-namespace/index.mjs";
|
||||
import { datesInMonth, getValidDateOfMonth } from "../utils.mjs";
|
||||
import basic_cell_render_default from "./basic-cell-render.mjs";
|
||||
import { basicMonthTableProps } from "../props/basic-month-table.mjs";
|
||||
import { Fragment, computed, createElementBlock, createElementVNode, createVNode, defineComponent, nextTick, normalizeClass, openBlock, ref, renderList, unref, watch, withKeys, withModifiers } from "vue";
|
||||
import dayjs from "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__ */ defineComponent({
|
||||
__name: "basic-month-table",
|
||||
props: basicMonthTableProps,
|
||||
emits: [
|
||||
"changerange",
|
||||
"pick",
|
||||
"select"
|
||||
],
|
||||
setup(__props, { expose: __expose, emit: __emit }) {
|
||||
const props = __props;
|
||||
const emit = __emit;
|
||||
const ns = useNamespace("month-table");
|
||||
const { t, lang } = useLocale();
|
||||
const tbodyRef = ref();
|
||||
const currentCellRef = ref();
|
||||
const months = ref(props.date.locale("en").localeData().monthsShort().map((_) => _.toLowerCase()));
|
||||
const tableRows = ref([
|
||||
[],
|
||||
[],
|
||||
[]
|
||||
]);
|
||||
const lastRow = ref();
|
||||
const lastColumn = ref();
|
||||
const rows = computed(() => {
|
||||
const rows = tableRows.value;
|
||||
const now = dayjs().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 ? datesInMonth(props.date, year, month, lang.value).every(props.disabledDate) : false);
|
||||
style.current = castArray(props.parsedValue).some((date) => dayjs.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 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 (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", castArray(props.parsedValue), false);
|
||||
return;
|
||||
}
|
||||
const newMonth = getValidDateOfMonth(props.date, props.date.year(), month, lang.value, props.disabledDate);
|
||||
emit("pick", hasClass(target, "current") ? castArray(props.parsedValue).filter((d) => d?.year() !== newMonth.year() || d?.month() !== newMonth.month()) : castArray(props.parsedValue).concat([dayjs(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);
|
||||
};
|
||||
watch(() => props.date, async () => {
|
||||
if (tbodyRef.value?.contains(document.activeElement)) {
|
||||
await nextTick();
|
||||
currentCellRef.value?.focus();
|
||||
}
|
||||
});
|
||||
__expose({
|
||||
/**
|
||||
* @description focus current cell
|
||||
*/
|
||||
focus });
|
||||
return (_ctx, _cache) => {
|
||||
return openBlock(), createElementBlock("table", {
|
||||
role: "grid",
|
||||
"aria-label": unref(t)("el.datepicker.monthTablePrompt"),
|
||||
class: normalizeClass(unref(ns).b()),
|
||||
onClick: handleMonthTableClick,
|
||||
onMousemove: handleMouseMove
|
||||
}, [createElementVNode("tbody", {
|
||||
ref_key: "tbodyRef",
|
||||
ref: tbodyRef
|
||||
}, [(openBlock(true), createElementBlock(Fragment, null, renderList(rows.value, (row, key) => {
|
||||
return openBlock(), createElementBlock("tr", { key }, [(openBlock(true), createElementBlock(Fragment, null, renderList(row, (cell, key_) => {
|
||||
return openBlock(), createElementBlock("td", {
|
||||
key: key_,
|
||||
ref_for: true,
|
||||
ref: (el) => cell.isSelected && (currentCellRef.value = el),
|
||||
class: normalizeClass(getCellStyle(cell)),
|
||||
"aria-selected": !!cell.isSelected,
|
||||
"aria-label": unref(t)(`el.datepicker.month${+cell.text + 1}`),
|
||||
tabindex: cell.isSelected ? 0 : -1,
|
||||
onKeydown: [withKeys(withModifiers(handleMonthTableClick, ["prevent", "stop"]), ["space"]), withKeys(withModifiers(handleMonthTableClick, ["prevent", "stop"]), ["enter"])]
|
||||
}, [createVNode(unref(basic_cell_render_default), { cell: {
|
||||
...cell,
|
||||
renderText: unref(t)("el.datepicker.months." + months.value[cell.text])
|
||||
} }, null, 8, ["cell"])], 42, _hoisted_2);
|
||||
}), 128))]);
|
||||
}), 128))], 512)], 42, _hoisted_1);
|
||||
};
|
||||
}
|
||||
});
|
||||
//#endregion
|
||||
export { basic_month_table_vue_vue_type_script_setup_true_lang_default as default };
|
||||
|
||||
//# sourceMappingURL=basic-month-table.vue_vue_type_script_setup_true_lang.mjs.map
|
||||
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
Generated
Vendored
+7
@@ -0,0 +1,7 @@
|
||||
import basic_year_table_vue_vue_type_script_setup_true_lang_default from "./basic-year-table.vue_vue_type_script_setup_true_lang.mjs";
|
||||
//#region ../../packages/components/date-picker-panel/src/date-picker-com/basic-year-table.vue
|
||||
var basic_year_table_default = basic_year_table_vue_vue_type_script_setup_true_lang_default;
|
||||
//#endregion
|
||||
export { basic_year_table_default as default };
|
||||
|
||||
//# sourceMappingURL=basic-year-table.mjs.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
+212
@@ -0,0 +1,212 @@
|
||||
import { hasClass } from "../../../../utils/dom/style.mjs";
|
||||
import { castArray } from "../../../../utils/arrays.mjs";
|
||||
import { useLocale } from "../../../../hooks/use-locale/index.mjs";
|
||||
import { useNamespace } from "../../../../hooks/use-namespace/index.mjs";
|
||||
import { rangeArr } from "../../../time-picker/src/utils.mjs";
|
||||
import { getValidDateOfYear } from "../utils.mjs";
|
||||
import basic_cell_render_default from "./basic-cell-render.mjs";
|
||||
import { basicYearTableProps } from "../props/basic-year-table.mjs";
|
||||
import { Fragment, computed, createElementBlock, createElementVNode, createVNode, defineComponent, nextTick, normalizeClass, openBlock, ref, renderList, unref, watch, withKeys, withModifiers } from "vue";
|
||||
import dayjs from "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__ */ defineComponent({
|
||||
__name: "basic-year-table",
|
||||
props: basicYearTableProps,
|
||||
emits: [
|
||||
"changerange",
|
||||
"pick",
|
||||
"select"
|
||||
],
|
||||
setup(__props, { expose: __expose, emit: __emit }) {
|
||||
const datesInYear = (year, lang) => {
|
||||
const firstDay = dayjs(String(year)).locale(lang).startOf("year");
|
||||
return rangeArr(firstDay.endOf("year").dayOfYear()).map((n) => firstDay.add(n, "day").toDate());
|
||||
};
|
||||
const props = __props;
|
||||
const emit = __emit;
|
||||
const ns = useNamespace("year-table");
|
||||
const { t, lang } = useLocale();
|
||||
const tbodyRef = ref();
|
||||
const currentCellRef = ref();
|
||||
const startYear = computed(() => {
|
||||
return Math.floor(props.date.year() / 10) * 10;
|
||||
});
|
||||
const tableRows = ref([
|
||||
[],
|
||||
[],
|
||||
[]
|
||||
]);
|
||||
const lastRow = ref();
|
||||
const lastColumn = ref();
|
||||
const rows = computed(() => {
|
||||
const rows = tableRows.value;
|
||||
const now = dayjs().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 = dayjs().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 = dayjs().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 = 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 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 || hasClass(target, "disabled")) return;
|
||||
const column = target.cellIndex;
|
||||
const selectedYear = target.parentNode.rowIndex * 4 + column + startYear.value;
|
||||
const newDate = dayjs().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", castArray(props.parsedValue), false);
|
||||
return;
|
||||
}
|
||||
const vaildYear = getValidDateOfYear(newDate.startOf("year"), lang.value, props.disabledDate);
|
||||
emit("pick", hasClass(target, "current") ? castArray(props.parsedValue).filter((d) => d?.year() !== selectedYear) : 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: dayjs().year(startYear.value).add(row * 4 + column, "year")
|
||||
});
|
||||
}
|
||||
};
|
||||
watch(() => props.date, async () => {
|
||||
if (tbodyRef.value?.contains(document.activeElement)) {
|
||||
await nextTick();
|
||||
currentCellRef.value?.focus();
|
||||
}
|
||||
});
|
||||
__expose({
|
||||
/**
|
||||
* @description focus on the current cell
|
||||
*/
|
||||
focus });
|
||||
return (_ctx, _cache) => {
|
||||
return openBlock(), createElementBlock("table", {
|
||||
role: "grid",
|
||||
"aria-label": unref(t)("el.datepicker.yearTablePrompt"),
|
||||
class: normalizeClass(unref(ns).b()),
|
||||
onClick: handleYearTableClick,
|
||||
onMousemove: handleMouseMove
|
||||
}, [createElementVNode("tbody", {
|
||||
ref_key: "tbodyRef",
|
||||
ref: tbodyRef
|
||||
}, [(openBlock(true), createElementBlock(Fragment, null, renderList(rows.value, (row, rowKey) => {
|
||||
return openBlock(), createElementBlock("tr", { key: rowKey }, [(openBlock(true), createElementBlock(Fragment, null, renderList(row, (cell, cellKey) => {
|
||||
return openBlock(), createElementBlock("td", {
|
||||
key: `${rowKey}_${cellKey}`,
|
||||
ref_for: true,
|
||||
ref: (el) => cell.isSelected && (currentCellRef.value = el),
|
||||
class: normalizeClass(["available", getCellKls(cell)]),
|
||||
"aria-selected": cell.isSelected,
|
||||
"aria-label": String(cell.text),
|
||||
tabindex: cell.isSelected ? 0 : -1,
|
||||
onKeydown: [withKeys(withModifiers(handleYearTableClick, ["prevent", "stop"]), ["space"]), withKeys(withModifiers(handleYearTableClick, ["prevent", "stop"]), ["enter"])]
|
||||
}, [createVNode(unref(basic_cell_render_default), { cell }, null, 8, ["cell"])], 42, _hoisted_2);
|
||||
}), 128))]);
|
||||
}), 128))], 512)], 42, _hoisted_1);
|
||||
};
|
||||
}
|
||||
});
|
||||
//#endregion
|
||||
export { basic_year_table_vue_vue_type_script_setup_true_lang_default as default };
|
||||
|
||||
//# sourceMappingURL=basic-year-table.vue_vue_type_script_setup_true_lang.mjs.map
|
||||
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
Generated
Vendored
+7
@@ -0,0 +1,7 @@
|
||||
import panel_date_pick_vue_vue_type_script_setup_true_lang_default from "./panel-date-pick.vue_vue_type_script_setup_true_lang.mjs";
|
||||
//#region ../../packages/components/date-picker-panel/src/date-picker-com/panel-date-pick.vue
|
||||
var panel_date_pick_default = panel_date_pick_vue_vue_type_script_setup_true_lang_default;
|
||||
//#endregion
|
||||
export { panel_date_pick_default as default };
|
||||
|
||||
//# sourceMappingURL=panel-date-pick.mjs.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
+645
@@ -0,0 +1,645 @@
|
||||
import { EVENT_CODE } from "../../../../constants/aria.mjs";
|
||||
import { getEventCode } from "../../../../utils/dom/event.mjs";
|
||||
import { isArray, isFunction } from "../../../../utils/types.mjs";
|
||||
import { extractFirst } from "../../../../utils/arrays.mjs";
|
||||
import { useLocale } from "../../../../hooks/use-locale/index.mjs";
|
||||
import { useNamespace } from "../../../../hooks/use-namespace/index.mjs";
|
||||
import { ElIcon } from "../../../icon/index.mjs";
|
||||
import { useFormDisabled } from "../../../form/src/hooks/use-form-common-props.mjs";
|
||||
import { ElInput } from "../../../input/index.mjs";
|
||||
import { ElButton } from "../../../button/index.mjs";
|
||||
import { PICKER_BASE_INJECTION_KEY } from "../../../time-picker/src/constants.mjs";
|
||||
import { extractDateFormat, extractTimeFormat } from "../../../time-picker/src/utils.mjs";
|
||||
import ClickOutside from "../../../../directives/click-outside/index.mjs";
|
||||
import panel_time_pick_default from "../../../time-picker/src/time-picker-com/panel-time-pick.mjs";
|
||||
import { panelDatePickProps } from "../props/panel-date-pick.mjs";
|
||||
import { correctlyParseUserInput, getValidDateOfMonth, getValidDateOfYear } from "../utils.mjs";
|
||||
import basic_date_table_default from "./basic-date-table.mjs";
|
||||
import basic_month_table_default from "./basic-month-table.mjs";
|
||||
import basic_year_table_default from "./basic-year-table.mjs";
|
||||
import { ArrowLeft, ArrowRight, DArrowLeft, DArrowRight } from "@element-plus/icons-vue";
|
||||
import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, inject, nextTick, normalizeClass, openBlock, ref, renderList, renderSlot, toDisplayString, toRef, unref, useAttrs, useSlots, vShow, watch, withCtx, withDirectives, withKeys } from "vue";
|
||||
import dayjs from "dayjs";
|
||||
//#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__ */ defineComponent({
|
||||
__name: "panel-date-pick",
|
||||
props: panelDatePickProps,
|
||||
emits: [
|
||||
"pick",
|
||||
"set-picker-option",
|
||||
"panel-change"
|
||||
],
|
||||
setup(__props, { emit: __emit }) {
|
||||
const timeWithinRange = (_, __, ___) => true;
|
||||
const props = __props;
|
||||
const contextEmit = __emit;
|
||||
const ppNs = useNamespace("picker-panel");
|
||||
const dpNs = useNamespace("date-picker");
|
||||
const attrs = useAttrs();
|
||||
const slots = useSlots();
|
||||
const { t, lang } = useLocale();
|
||||
const pickerBase = inject(PICKER_BASE_INJECTION_KEY);
|
||||
const { shortcuts, disabledDate, cellClassName, defaultTime } = pickerBase.props;
|
||||
const defaultValue = toRef(pickerBase.props, "defaultValue");
|
||||
const currentViewRef = ref();
|
||||
const innerDate = ref(dayjs().locale(lang.value));
|
||||
const isChangeToNow = ref(false);
|
||||
let isShortcut = false;
|
||||
const defaultTimeD = computed(() => {
|
||||
return dayjs(defaultTime).locale(lang.value);
|
||||
});
|
||||
const month = computed(() => {
|
||||
return innerDate.value.month();
|
||||
});
|
||||
const year = computed(() => {
|
||||
return innerDate.value.year();
|
||||
});
|
||||
const selectableRange = ref([]);
|
||||
const userInputDate = ref(null);
|
||||
const userInputTime = 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 (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.isDayjs(value)) {
|
||||
const parsedDateValue = 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 = ref("date");
|
||||
const yearLabel = 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 = isFunction(shortcut.value) ? shortcut.value() : shortcut.value;
|
||||
if (shortcutValue) {
|
||||
isShortcut = true;
|
||||
emit(dayjs(shortcutValue).locale(lang.value));
|
||||
return;
|
||||
}
|
||||
if (shortcut.onClick) shortcut.onClick({
|
||||
attrs,
|
||||
slots,
|
||||
emit: contextEmit
|
||||
});
|
||||
};
|
||||
const selectionMode = computed(() => {
|
||||
const { type } = props;
|
||||
if ([
|
||||
"week",
|
||||
"month",
|
||||
"months",
|
||||
"year",
|
||||
"years",
|
||||
"dates"
|
||||
].includes(type)) return type;
|
||||
return "date";
|
||||
});
|
||||
const isMultipleType = computed(() => {
|
||||
return selectionMode.value === "dates" || selectionMode.value === "months" || selectionMode.value === "years";
|
||||
});
|
||||
const keyboardMode = computed(() => {
|
||||
return selectionMode.value === "date" ? currentView.value : selectionMode.value;
|
||||
});
|
||||
const hasShortcuts = computed(() => !!shortcuts.length);
|
||||
const handleMonthPick = async (month, keepOpen) => {
|
||||
if (selectionMode.value === "month") {
|
||||
innerDate.value = 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 = 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 nextTick();
|
||||
handleFocusPicker();
|
||||
}
|
||||
}
|
||||
handlePanelChange("month");
|
||||
};
|
||||
const handleYearPick = async (year, keepOpen) => {
|
||||
if (selectionMode.value === "year") {
|
||||
innerDate.value = 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 = getValidDateOfYear(innerDate.value.year(year), lang.value, disabledDate);
|
||||
currentView.value = "month";
|
||||
if ([
|
||||
"month",
|
||||
"year",
|
||||
"date",
|
||||
"week"
|
||||
].includes(selectionMode.value)) {
|
||||
emit(innerDate.value, true);
|
||||
await nextTick();
|
||||
handleFocusPicker();
|
||||
}
|
||||
}
|
||||
handlePanelChange("year");
|
||||
};
|
||||
const dateDisabled = useFormDisabled();
|
||||
const showPicker = async (view) => {
|
||||
if (dateDisabled.value) return;
|
||||
currentView.value = view;
|
||||
await nextTick();
|
||||
handleFocusPicker();
|
||||
};
|
||||
const showTime = computed(() => props.type === "datetime" || props.type === "datetimerange");
|
||||
const footerVisible = 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 = computed(() => !isMultipleType.value && props.showNow || props.showConfirm);
|
||||
const disabledConfirm = computed(() => {
|
||||
if (!disabledDate) return false;
|
||||
if (!props.parsedValue) return true;
|
||||
if (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 = extractFirst(props.parsedValue);
|
||||
if (!result) {
|
||||
const defaultTimeD = dayjs(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 = computed(() => {
|
||||
if (!disabledDate) return false;
|
||||
return disabledDate(dayjs().locale(lang.value).toDate());
|
||||
});
|
||||
const changeToNow = () => {
|
||||
const nowDate = dayjs().locale(lang.value).toDate();
|
||||
isChangeToNow.value = true;
|
||||
if ((!disabledDate || !disabledDate(nowDate)) && checkDateWithinRange(nowDate)) {
|
||||
innerDate.value = dayjs().locale(lang.value);
|
||||
emit(innerDate.value);
|
||||
}
|
||||
};
|
||||
const timeFormat = computed(() => {
|
||||
return props.timeFormat || extractTimeFormat(props.format) || "HH:mm:ss";
|
||||
});
|
||||
const dateFormat = computed(() => {
|
||||
return props.dateFormat || extractDateFormat(props.format) || "YYYY-MM-DD";
|
||||
});
|
||||
const visibleTime = computed(() => {
|
||||
if (userInputTime.value) return userInputTime.value;
|
||||
if (!props.parsedValue && !defaultValue.value) return;
|
||||
return (extractFirst(props.parsedValue) || innerDate.value).format(timeFormat.value);
|
||||
});
|
||||
const visibleDate = computed(() => {
|
||||
if (userInputDate.value) return userInputDate.value;
|
||||
if (!props.parsedValue && !defaultValue.value) return;
|
||||
return (extractFirst(props.parsedValue) || innerDate.value).format(dateFormat.value);
|
||||
});
|
||||
const timePickerVisible = 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 = 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 = dayjs(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 = 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.isDayjs(date) && date.isValid() && (disabledDate ? !disabledDate(date.toDate()) : true);
|
||||
};
|
||||
const parseUserInput = (value) => {
|
||||
return correctlyParseUserInput(value, props.format, lang.value);
|
||||
};
|
||||
const getDefaultValue = () => {
|
||||
const parseDate = dayjs(defaultValue.value).locale(lang.value);
|
||||
if (!defaultValue.value) {
|
||||
const defaultTimeDValue = defaultTimeD.value;
|
||||
return dayjs().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(EVENT_CODE.down);
|
||||
};
|
||||
const handleKeydownTable = (event) => {
|
||||
const code = getEventCode(event);
|
||||
if ([
|
||||
EVENT_CODE.up,
|
||||
EVENT_CODE.down,
|
||||
EVENT_CODE.left,
|
||||
EVENT_CODE.right,
|
||||
EVENT_CODE.home,
|
||||
EVENT_CODE.end,
|
||||
EVENT_CODE.pageUp,
|
||||
EVENT_CODE.pageDown
|
||||
].includes(code)) {
|
||||
handleKeyControl(code);
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
}
|
||||
if ([
|
||||
EVENT_CODE.enter,
|
||||
EVENT_CODE.space,
|
||||
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 } = 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, isFunction(map[code]) ? map[code](newDate) : map[code] ?? 0);
|
||||
if (disabledDate && disabledDate(newDate)) break;
|
||||
const result = dayjs(newDate).locale(lang.value);
|
||||
innerDate.value = result;
|
||||
contextEmit("pick", result, true);
|
||||
break;
|
||||
}
|
||||
};
|
||||
const handlePanelChange = (mode) => {
|
||||
contextEmit("panel-change", innerDate.value.toDate(), mode, currentView.value);
|
||||
};
|
||||
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 });
|
||||
watch(() => defaultValue.value, (val) => {
|
||||
if (val) innerDate.value = getDefaultValue();
|
||||
}, { immediate: true });
|
||||
watch(() => props.parsedValue, (val) => {
|
||||
if (val) {
|
||||
if (isMultipleType.value) return;
|
||||
if (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 openBlock(), createElementBlock("div", { class: normalizeClass([
|
||||
unref(ppNs).b(),
|
||||
unref(dpNs).b(),
|
||||
unref(ppNs).is("border", _ctx.border),
|
||||
unref(ppNs).is("disabled", unref(dateDisabled)),
|
||||
{
|
||||
"has-sidebar": _ctx.$slots.sidebar || hasShortcuts.value,
|
||||
"has-time": showTime.value
|
||||
}
|
||||
]) }, [createElementVNode("div", { class: normalizeClass(unref(ppNs).e("body-wrapper")) }, [
|
||||
renderSlot(_ctx.$slots, "sidebar", { class: normalizeClass(unref(ppNs).e("sidebar")) }),
|
||||
hasShortcuts.value ? (openBlock(), createElementBlock("div", {
|
||||
key: 0,
|
||||
class: normalizeClass(unref(ppNs).e("sidebar"))
|
||||
}, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(shortcuts), (shortcut, key) => {
|
||||
return openBlock(), createElementBlock("button", {
|
||||
key,
|
||||
type: "button",
|
||||
disabled: unref(dateDisabled),
|
||||
class: normalizeClass(unref(ppNs).e("shortcut")),
|
||||
onClick: ($event) => handleShortcutClick(shortcut)
|
||||
}, toDisplayString(shortcut.text), 11, _hoisted_1);
|
||||
}), 128))], 2)) : createCommentVNode("v-if", true),
|
||||
createElementVNode("div", { class: normalizeClass(unref(ppNs).e("body")) }, [
|
||||
showTime.value ? (openBlock(), createElementBlock("div", {
|
||||
key: 0,
|
||||
class: normalizeClass(unref(dpNs).e("time-header"))
|
||||
}, [createElementVNode("span", { class: normalizeClass(unref(dpNs).e("editor-wrap")) }, [createVNode(unref(ElInput), {
|
||||
placeholder: unref(t)("el.datepicker.selectDate"),
|
||||
"model-value": visibleDate.value,
|
||||
size: "small",
|
||||
"validate-event": false,
|
||||
disabled: unref(dateDisabled),
|
||||
readonly: !_ctx.editable,
|
||||
onInput: _cache[0] || (_cache[0] = (val) => userInputDate.value = val),
|
||||
onChange: handleVisibleDateChange
|
||||
}, null, 8, [
|
||||
"placeholder",
|
||||
"model-value",
|
||||
"disabled",
|
||||
"readonly"
|
||||
])], 2), withDirectives((openBlock(), createElementBlock("span", { class: normalizeClass(unref(dpNs).e("editor-wrap")) }, [createVNode(unref(ElInput), {
|
||||
placeholder: unref(t)("el.datepicker.selectTime"),
|
||||
"model-value": visibleTime.value,
|
||||
size: "small",
|
||||
"validate-event": false,
|
||||
disabled: 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"
|
||||
]), createVNode(unref(panel_time_pick_default), {
|
||||
visible: timePickerVisible.value,
|
||||
format: timeFormat.value,
|
||||
"parsed-value": innerDate.value,
|
||||
onPick: handleTimePick
|
||||
}, null, 8, [
|
||||
"visible",
|
||||
"format",
|
||||
"parsed-value"
|
||||
])], 2)), [[unref(ClickOutside), handleTimePickClose]])], 2)) : createCommentVNode("v-if", true),
|
||||
withDirectives(createElementVNode("div", { class: normalizeClass([unref(dpNs).e("header"), (currentView.value === "year" || currentView.value === "month") && unref(dpNs).em("header", "bordered")]) }, [
|
||||
createElementVNode("span", { class: normalizeClass(unref(dpNs).e("prev-btn")) }, [createElementVNode("button", {
|
||||
type: "button",
|
||||
"aria-label": unref(t)(`el.datepicker.prevYear`),
|
||||
class: normalizeClass(["d-arrow-left", unref(ppNs).e("icon-btn")]),
|
||||
disabled: unref(dateDisabled),
|
||||
onClick: _cache[2] || (_cache[2] = ($event) => moveByYear(false))
|
||||
}, [renderSlot(_ctx.$slots, "prev-year", {}, () => [createVNode(unref(ElIcon), null, {
|
||||
default: withCtx(() => [createVNode(unref(DArrowLeft))]),
|
||||
_: 1
|
||||
})])], 10, _hoisted_2), withDirectives(createElementVNode("button", {
|
||||
type: "button",
|
||||
"aria-label": unref(t)(`el.datepicker.prevMonth`),
|
||||
class: normalizeClass([unref(ppNs).e("icon-btn"), "arrow-left"]),
|
||||
disabled: unref(dateDisabled),
|
||||
onClick: _cache[3] || (_cache[3] = ($event) => moveByMonth(false))
|
||||
}, [renderSlot(_ctx.$slots, "prev-month", {}, () => [createVNode(unref(ElIcon), null, {
|
||||
default: withCtx(() => [createVNode(unref(ArrowLeft))]),
|
||||
_: 1
|
||||
})])], 10, _hoisted_3), [[vShow, currentView.value === "date"]])], 2),
|
||||
createElementVNode("span", {
|
||||
role: "button",
|
||||
class: normalizeClass(unref(dpNs).e("header-label")),
|
||||
"aria-live": "polite",
|
||||
tabindex: _ctx.disabled ? void 0 : 0,
|
||||
"aria-disabled": _ctx.disabled,
|
||||
onKeydown: _cache[4] || (_cache[4] = withKeys(($event) => showPicker("year"), ["enter"])),
|
||||
onClick: _cache[5] || (_cache[5] = ($event) => showPicker("year"))
|
||||
}, toDisplayString(yearLabel.value), 43, _hoisted_4),
|
||||
withDirectives(createElementVNode("span", {
|
||||
role: "button",
|
||||
"aria-live": "polite",
|
||||
tabindex: _ctx.disabled ? void 0 : 0,
|
||||
"aria-disabled": _ctx.disabled,
|
||||
class: normalizeClass([unref(dpNs).e("header-label"), { active: currentView.value === "month" }]),
|
||||
onKeydown: _cache[6] || (_cache[6] = withKeys(($event) => showPicker("month"), ["enter"])),
|
||||
onClick: _cache[7] || (_cache[7] = ($event) => showPicker("month"))
|
||||
}, toDisplayString(unref(t)(`el.datepicker.month${month.value + 1}`)), 43, _hoisted_5), [[vShow, currentView.value === "date"]]),
|
||||
createElementVNode("span", { class: normalizeClass(unref(dpNs).e("next-btn")) }, [withDirectives(createElementVNode("button", {
|
||||
type: "button",
|
||||
"aria-label": unref(t)(`el.datepicker.nextMonth`),
|
||||
class: normalizeClass([unref(ppNs).e("icon-btn"), "arrow-right"]),
|
||||
disabled: unref(dateDisabled),
|
||||
onClick: _cache[8] || (_cache[8] = ($event) => moveByMonth(true))
|
||||
}, [renderSlot(_ctx.$slots, "next-month", {}, () => [createVNode(unref(ElIcon), null, {
|
||||
default: withCtx(() => [createVNode(unref(ArrowRight))]),
|
||||
_: 1
|
||||
})])], 10, _hoisted_6), [[vShow, currentView.value === "date"]]), createElementVNode("button", {
|
||||
type: "button",
|
||||
"aria-label": unref(t)(`el.datepicker.nextYear`),
|
||||
class: normalizeClass([unref(ppNs).e("icon-btn"), "d-arrow-right"]),
|
||||
disabled: unref(dateDisabled),
|
||||
onClick: _cache[9] || (_cache[9] = ($event) => moveByYear(true))
|
||||
}, [renderSlot(_ctx.$slots, "next-year", {}, () => [createVNode(unref(ElIcon), null, {
|
||||
default: withCtx(() => [createVNode(unref(DArrowRight))]),
|
||||
_: 1
|
||||
})])], 10, _hoisted_7)], 2)
|
||||
], 2), [[vShow, currentView.value !== "time"]]),
|
||||
createElementVNode("div", {
|
||||
class: normalizeClass(unref(ppNs).e("content")),
|
||||
onKeydown: handleKeydownTable
|
||||
}, [
|
||||
currentView.value === "date" ? (openBlock(), createBlock(basic_date_table_default, {
|
||||
key: 0,
|
||||
ref_key: "currentViewRef",
|
||||
ref: currentViewRef,
|
||||
"selection-mode": selectionMode.value,
|
||||
date: innerDate.value,
|
||||
"parsed-value": _ctx.parsedValue,
|
||||
"disabled-date": unref(disabledDate),
|
||||
disabled: unref(dateDisabled),
|
||||
"cell-class-name": 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"
|
||||
])) : createCommentVNode("v-if", true),
|
||||
currentView.value === "year" ? (openBlock(), createBlock(basic_year_table_default, {
|
||||
key: 1,
|
||||
ref_key: "currentViewRef",
|
||||
ref: currentViewRef,
|
||||
"selection-mode": selectionMode.value,
|
||||
date: innerDate.value,
|
||||
"disabled-date": unref(disabledDate),
|
||||
disabled: unref(dateDisabled),
|
||||
"parsed-value": _ctx.parsedValue,
|
||||
"cell-class-name": unref(cellClassName),
|
||||
onPick: handleYearPick
|
||||
}, null, 8, [
|
||||
"selection-mode",
|
||||
"date",
|
||||
"disabled-date",
|
||||
"disabled",
|
||||
"parsed-value",
|
||||
"cell-class-name"
|
||||
])) : createCommentVNode("v-if", true),
|
||||
currentView.value === "month" ? (openBlock(), createBlock(basic_month_table_default, {
|
||||
key: 2,
|
||||
ref_key: "currentViewRef",
|
||||
ref: currentViewRef,
|
||||
"selection-mode": selectionMode.value,
|
||||
date: innerDate.value,
|
||||
"parsed-value": _ctx.parsedValue,
|
||||
"disabled-date": unref(disabledDate),
|
||||
disabled: unref(dateDisabled),
|
||||
"cell-class-name": unref(cellClassName),
|
||||
onPick: handleMonthPick
|
||||
}, null, 8, [
|
||||
"selection-mode",
|
||||
"date",
|
||||
"parsed-value",
|
||||
"disabled-date",
|
||||
"disabled",
|
||||
"cell-class-name"
|
||||
])) : createCommentVNode("v-if", true)
|
||||
], 34)
|
||||
], 2)
|
||||
], 2), _ctx.showFooter && footerVisible.value && footerFilled.value ? (openBlock(), createElementBlock("div", {
|
||||
key: 0,
|
||||
class: normalizeClass(unref(ppNs).e("footer"))
|
||||
}, [withDirectives(createVNode(unref(ElButton), {
|
||||
text: "",
|
||||
size: "small",
|
||||
class: normalizeClass(unref(ppNs).e("link-btn")),
|
||||
disabled: disabledNow.value,
|
||||
onClick: changeToNow
|
||||
}, {
|
||||
default: withCtx(() => [createTextVNode(toDisplayString(unref(t)("el.datepicker.now")), 1)]),
|
||||
_: 1
|
||||
}, 8, ["class", "disabled"]), [[vShow, !isMultipleType.value && _ctx.showNow]]), _ctx.showConfirm ? (openBlock(), createBlock(unref(ElButton), {
|
||||
key: 0,
|
||||
plain: "",
|
||||
size: "small",
|
||||
class: normalizeClass(unref(ppNs).e("link-btn")),
|
||||
disabled: disabledConfirm.value,
|
||||
onClick: onConfirm
|
||||
}, {
|
||||
default: withCtx(() => [createTextVNode(toDisplayString(unref(t)("el.datepicker.confirm")), 1)]),
|
||||
_: 1
|
||||
}, 8, ["class", "disabled"])) : createCommentVNode("v-if", true)], 2)) : createCommentVNode("v-if", true)], 2);
|
||||
};
|
||||
}
|
||||
});
|
||||
//#endregion
|
||||
export { panel_date_pick_vue_vue_type_script_setup_true_lang_default as default };
|
||||
|
||||
//# sourceMappingURL=panel-date-pick.vue_vue_type_script_setup_true_lang.mjs.map
|
||||
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
Generated
Vendored
+7
@@ -0,0 +1,7 @@
|
||||
import panel_date_range_vue_vue_type_script_setup_true_lang_default from "./panel-date-range.vue_vue_type_script_setup_true_lang.mjs";
|
||||
//#region ../../packages/components/date-picker-panel/src/date-picker-com/panel-date-range.vue
|
||||
var panel_date_range_default = panel_date_range_vue_vue_type_script_setup_true_lang_default;
|
||||
//#endregion
|
||||
export { panel_date_range_default as default };
|
||||
|
||||
//# sourceMappingURL=panel-date-range.mjs.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
+731
@@ -0,0 +1,731 @@
|
||||
import { useLocale } from "../../../../hooks/use-locale/index.mjs";
|
||||
import { ElIcon } from "../../../icon/index.mjs";
|
||||
import { useFormDisabled } from "../../../form/src/hooks/use-form-common-props.mjs";
|
||||
import { ElInput } from "../../../input/index.mjs";
|
||||
import { ElButton } from "../../../button/index.mjs";
|
||||
import { PICKER_BASE_INJECTION_KEY } from "../../../time-picker/src/constants.mjs";
|
||||
import { extractDateFormat, extractTimeFormat } from "../../../time-picker/src/utils.mjs";
|
||||
import ClickOutside from "../../../../directives/click-outside/index.mjs";
|
||||
import panel_time_pick_default from "../../../time-picker/src/time-picker-com/panel-time-pick.mjs";
|
||||
import { correctlyParseUserInput, getDefaultValue, isValidRange } from "../utils.mjs";
|
||||
import basic_date_table_default from "./basic-date-table.mjs";
|
||||
import basic_month_table_default from "./basic-month-table.mjs";
|
||||
import basic_year_table_default from "./basic-year-table.mjs";
|
||||
import { panelDateRangeProps } from "../props/panel-date-range.mjs";
|
||||
import { useRangePicker } from "../composables/use-range-picker.mjs";
|
||||
import { usePanelDateRange } from "../composables/use-panel-date-range.mjs";
|
||||
import { ArrowLeft, ArrowRight, DArrowLeft, DArrowRight } from "@element-plus/icons-vue";
|
||||
import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, inject, nextTick, normalizeClass, openBlock, ref, renderList, renderSlot, toDisplayString, toRef, unref, vShow, watch, withCtx, withDirectives, withKeys } from "vue";
|
||||
import dayjs from "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__ */ defineComponent({
|
||||
__name: "panel-date-range",
|
||||
props: panelDateRangeProps,
|
||||
emits: [
|
||||
"pick",
|
||||
"set-picker-option",
|
||||
"calendar-change",
|
||||
"panel-change",
|
||||
"clear"
|
||||
],
|
||||
setup(__props, { emit: __emit }) {
|
||||
const props = __props;
|
||||
const emit = __emit;
|
||||
const pickerBase = inject(PICKER_BASE_INJECTION_KEY);
|
||||
const { disabledDate, cellClassName, defaultTime, clearable } = pickerBase.props;
|
||||
const format = toRef(pickerBase.props, "format");
|
||||
const shortcuts = toRef(pickerBase.props, "shortcuts");
|
||||
const defaultValue = toRef(pickerBase.props, "defaultValue");
|
||||
const { lang } = useLocale();
|
||||
const leftDate = ref(dayjs().locale(lang.value));
|
||||
const rightDate = ref(dayjs().locale(lang.value).add(1, unit));
|
||||
const { minDate, maxDate, rangeState, ppNs, drpNs, handleChangeRange, handleRangeConfirm, handleShortcutClick, onSelect, parseValue, t } = useRangePicker(props, {
|
||||
defaultValue,
|
||||
defaultTime,
|
||||
leftDate,
|
||||
rightDate,
|
||||
unit,
|
||||
sortDates
|
||||
});
|
||||
watch(() => props.visible, (visible) => {
|
||||
if (!visible && rangeState.value.selecting) {
|
||||
parseValue(props.parsedValue);
|
||||
onSelect(false);
|
||||
}
|
||||
});
|
||||
const dateUserInput = ref({
|
||||
min: null,
|
||||
max: null
|
||||
});
|
||||
const timeUserInput = ref({
|
||||
min: null,
|
||||
max: null
|
||||
});
|
||||
const { leftCurrentView, rightCurrentView, leftCurrentViewRef, rightCurrentViewRef, leftYear, rightYear, leftMonth, rightMonth, leftYearLabel, rightYearLabel, showLeftPicker, showRightPicker, handleLeftYearPick, handleRightYearPick, handleLeftMonthPick, handleRightMonthPick, handlePanelChange, adjustDateByView } = usePanelDateRange(props, emit, leftDate, rightDate);
|
||||
const hasShortcuts = computed(() => !!shortcuts.value.length);
|
||||
const minVisibleDate = computed(() => {
|
||||
if (dateUserInput.value.min !== null) return dateUserInput.value.min;
|
||||
if (minDate.value) return minDate.value.format(dateFormat.value);
|
||||
return "";
|
||||
});
|
||||
const maxVisibleDate = 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 = computed(() => {
|
||||
if (timeUserInput.value.min !== null) return timeUserInput.value.min;
|
||||
if (minDate.value) return minDate.value.format(timeFormat.value);
|
||||
return "";
|
||||
});
|
||||
const maxVisibleTime = 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 = computed(() => {
|
||||
return props.timeFormat || extractTimeFormat(format.value || "") || "HH:mm:ss";
|
||||
});
|
||||
const dateFormat = computed(() => {
|
||||
return props.dateFormat || extractDateFormat(format.value || "") || "YYYY-MM-DD";
|
||||
});
|
||||
const isValidValue = (date) => {
|
||||
return 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 = 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 = computed(() => {
|
||||
return props.singlePanel || props.unlinkPanels && rightYear.value * 12 + rightMonth.value - (leftYear.value * 12 + leftMonth.value + 1) >= 12;
|
||||
});
|
||||
const dateRangeDisabled = useFormDisabled();
|
||||
const btnDisabled = computed(() => {
|
||||
return !(minDate.value && maxDate.value && !rangeState.value.selecting && isValidRange([minDate.value, maxDate.value]) && !dateRangeDisabled.value);
|
||||
});
|
||||
const showTime = computed(() => props.type === "datetime" || props.type === "datetimerange");
|
||||
const formatEmit = (emitDayjs, index) => {
|
||||
if (!emitDayjs) return;
|
||||
if (defaultTime) return dayjs(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 = ref(false);
|
||||
const maxTimePickerVisible = 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 = dayjs(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 = dayjs(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;
|
||||
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 = getDefaultValue(unref(defaultValue), {
|
||||
lang: 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 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 openBlock(), createElementBlock("div", { class: normalizeClass([
|
||||
unref(ppNs).b(),
|
||||
unref(drpNs).b(),
|
||||
unref(ppNs).is("border", _ctx.border),
|
||||
unref(ppNs).is("disabled", unref(dateRangeDisabled)),
|
||||
{
|
||||
"has-sidebar": _ctx.$slots.sidebar || hasShortcuts.value,
|
||||
"has-time": showTime.value,
|
||||
"single-panel": _ctx.singlePanel
|
||||
}
|
||||
]) }, [createElementVNode("div", { class: normalizeClass(unref(ppNs).e("body-wrapper")) }, [
|
||||
renderSlot(_ctx.$slots, "sidebar", { class: normalizeClass(unref(ppNs).e("sidebar")) }),
|
||||
hasShortcuts.value ? (openBlock(), createElementBlock("div", {
|
||||
key: 0,
|
||||
class: normalizeClass(unref(ppNs).e("sidebar"))
|
||||
}, [(openBlock(true), createElementBlock(Fragment, null, renderList(shortcuts.value, (shortcut, key) => {
|
||||
return openBlock(), createElementBlock("button", {
|
||||
key,
|
||||
type: "button",
|
||||
disabled: unref(dateRangeDisabled),
|
||||
class: normalizeClass(unref(ppNs).e("shortcut")),
|
||||
onClick: ($event) => unref(handleShortcutClick)(shortcut)
|
||||
}, toDisplayString(shortcut.text), 11, _hoisted_1);
|
||||
}), 128))], 2)) : createCommentVNode("v-if", true),
|
||||
createElementVNode("div", { class: normalizeClass(unref(ppNs).e("body")) }, [
|
||||
showTime.value ? (openBlock(), createElementBlock("div", {
|
||||
key: 0,
|
||||
class: normalizeClass(unref(drpNs).e("time-header"))
|
||||
}, [
|
||||
createElementVNode("span", { class: normalizeClass(unref(drpNs).e("editors-wrap")) }, [createElementVNode("span", { class: normalizeClass(unref(drpNs).e("time-picker-wrap")) }, [createVNode(unref(ElInput), {
|
||||
size: "small",
|
||||
disabled: unref(rangeState).selecting || unref(dateRangeDisabled),
|
||||
placeholder: unref(t)("el.datepicker.startDate"),
|
||||
class: normalizeClass(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), withDirectives((openBlock(), createElementBlock("span", { class: normalizeClass(unref(drpNs).e("time-picker-wrap")) }, [createVNode(unref(ElInput), {
|
||||
size: "small",
|
||||
class: normalizeClass(unref(drpNs).e("editor")),
|
||||
disabled: unref(rangeState).selecting || unref(dateRangeDisabled),
|
||||
placeholder: 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"
|
||||
]), createVNode(unref(panel_time_pick_default), {
|
||||
visible: minTimePickerVisible.value,
|
||||
format: timeFormat.value,
|
||||
"datetime-role": "start",
|
||||
"parsed-value": unref(minDate) || leftDate.value,
|
||||
onPick: handleMinTimePick
|
||||
}, null, 8, [
|
||||
"visible",
|
||||
"format",
|
||||
"parsed-value"
|
||||
])], 2)), [[unref(ClickOutside), handleMinTimeClose]])], 2),
|
||||
createElementVNode("span", null, [createVNode(unref(ElIcon), null, {
|
||||
default: withCtx(() => [createVNode(unref(ArrowRight))]),
|
||||
_: 1
|
||||
})]),
|
||||
createElementVNode("span", { class: normalizeClass([unref(drpNs).e("editors-wrap"), "is-right"]) }, [createElementVNode("span", { class: normalizeClass(unref(drpNs).e("time-picker-wrap")) }, [createVNode(unref(ElInput), {
|
||||
size: "small",
|
||||
class: normalizeClass(unref(drpNs).e("editor")),
|
||||
disabled: unref(rangeState).selecting || unref(dateRangeDisabled),
|
||||
placeholder: unref(t)("el.datepicker.endDate"),
|
||||
"model-value": maxVisibleDate.value,
|
||||
readonly: !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), withDirectives((openBlock(), createElementBlock("span", { class: normalizeClass(unref(drpNs).e("time-picker-wrap")) }, [createVNode(unref(ElInput), {
|
||||
size: "small",
|
||||
class: normalizeClass(unref(drpNs).e("editor")),
|
||||
disabled: unref(rangeState).selecting || unref(dateRangeDisabled),
|
||||
placeholder: unref(t)("el.datepicker.endTime"),
|
||||
"model-value": maxVisibleTime.value,
|
||||
readonly: !unref(minDate) || !_ctx.editable,
|
||||
"validate-event": false,
|
||||
onFocus: _cache[7] || (_cache[7] = ($event) => 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"
|
||||
]), createVNode(unref(panel_time_pick_default), {
|
||||
"datetime-role": "end",
|
||||
visible: maxTimePickerVisible.value,
|
||||
format: timeFormat.value,
|
||||
"parsed-value": unref(maxDate) || rightDate.value,
|
||||
onPick: handleMaxTimePick
|
||||
}, null, 8, [
|
||||
"visible",
|
||||
"format",
|
||||
"parsed-value"
|
||||
])], 2)), [[unref(ClickOutside), handleMaxTimeClose]])], 2)
|
||||
], 2)) : createCommentVNode("v-if", true),
|
||||
createElementVNode("div", { class: normalizeClass([
|
||||
unref(ppNs).e("content"),
|
||||
unref(drpNs).e("content"),
|
||||
unref(drpNs).is("left", !_ctx.singlePanel)
|
||||
]) }, [
|
||||
createElementVNode("div", { class: normalizeClass(unref(drpNs).e("header")) }, [
|
||||
createElementVNode("button", {
|
||||
type: "button",
|
||||
class: normalizeClass([unref(ppNs).e("icon-btn"), "d-arrow-left"]),
|
||||
"aria-label": unref(t)(`el.datepicker.prevYear`),
|
||||
disabled: unref(dateRangeDisabled),
|
||||
onClick: leftPrevYear
|
||||
}, [renderSlot(_ctx.$slots, "prev-year", {}, () => [createVNode(unref(ElIcon), null, {
|
||||
default: withCtx(() => [createVNode(unref(DArrowLeft))]),
|
||||
_: 1
|
||||
})])], 10, _hoisted_2),
|
||||
withDirectives(createElementVNode("button", {
|
||||
type: "button",
|
||||
class: normalizeClass([unref(ppNs).e("icon-btn"), "arrow-left"]),
|
||||
"aria-label": unref(t)(`el.datepicker.prevMonth`),
|
||||
disabled: unref(dateRangeDisabled),
|
||||
onClick: leftPrevMonth
|
||||
}, [renderSlot(_ctx.$slots, "prev-month", {}, () => [createVNode(unref(ElIcon), null, {
|
||||
default: withCtx(() => [createVNode(unref(ArrowLeft))]),
|
||||
_: 1
|
||||
})])], 10, _hoisted_3), [[vShow, unref(leftCurrentView) === "date"]]),
|
||||
_ctx.unlinkPanels || _ctx.singlePanel ? (openBlock(), createElementBlock("button", {
|
||||
key: 0,
|
||||
type: "button",
|
||||
disabled: !enableYearArrow.value || unref(dateRangeDisabled),
|
||||
class: normalizeClass([[unref(ppNs).e("icon-btn"), unref(ppNs).is("disabled", !enableYearArrow.value || unref(dateRangeDisabled))], "d-arrow-right"]),
|
||||
"aria-label": unref(t)(`el.datepicker.nextYear`),
|
||||
onClick: leftNextYear
|
||||
}, [renderSlot(_ctx.$slots, "next-year", {}, () => [createVNode(unref(ElIcon), null, {
|
||||
default: withCtx(() => [createVNode(unref(DArrowRight))]),
|
||||
_: 1
|
||||
})])], 10, _hoisted_4)) : createCommentVNode("v-if", true),
|
||||
_ctx.unlinkPanels && unref(leftCurrentView) === "date" || _ctx.singlePanel ? (openBlock(), createElementBlock("button", {
|
||||
key: 1,
|
||||
type: "button",
|
||||
disabled: !enableMonthArrow.value || unref(dateRangeDisabled),
|
||||
class: normalizeClass([[unref(ppNs).e("icon-btn"), unref(ppNs).is("disabled", !enableMonthArrow.value || unref(dateRangeDisabled))], "arrow-right"]),
|
||||
"aria-label": unref(t)(`el.datepicker.nextMonth`),
|
||||
onClick: leftNextMonth
|
||||
}, [renderSlot(_ctx.$slots, "next-month", {}, () => [createVNode(unref(ElIcon), null, {
|
||||
default: withCtx(() => [createVNode(unref(ArrowRight))]),
|
||||
_: 1
|
||||
})])], 10, _hoisted_5)) : createCommentVNode("v-if", true),
|
||||
createElementVNode("div", null, [createElementVNode("span", {
|
||||
role: "button",
|
||||
class: normalizeClass(unref(drpNs).e("header-label")),
|
||||
"aria-live": "polite",
|
||||
tabindex: _ctx.disabled ? void 0 : 0,
|
||||
"aria-disabled": _ctx.disabled,
|
||||
onKeydown: _cache[10] || (_cache[10] = withKeys(($event) => unref(showLeftPicker)("year"), ["enter"])),
|
||||
onClick: _cache[11] || (_cache[11] = ($event) => unref(showLeftPicker)("year"))
|
||||
}, toDisplayString(unref(leftYearLabel)), 43, _hoisted_6), withDirectives(createElementVNode("span", {
|
||||
role: "button",
|
||||
"aria-live": "polite",
|
||||
tabindex: _ctx.disabled ? void 0 : 0,
|
||||
"aria-disabled": _ctx.disabled,
|
||||
class: normalizeClass([unref(drpNs).e("header-label"), { active: unref(leftCurrentView) === "month" }]),
|
||||
onKeydown: _cache[12] || (_cache[12] = withKeys(($event) => unref(showLeftPicker)("month"), ["enter"])),
|
||||
onClick: _cache[13] || (_cache[13] = ($event) => unref(showLeftPicker)("month"))
|
||||
}, toDisplayString(unref(t)(`el.datepicker.month${leftDate.value.month() + 1}`)), 43, _hoisted_7), [[vShow, unref(leftCurrentView) === "date"]])])
|
||||
], 2),
|
||||
unref(leftCurrentView) === "date" ? (openBlock(), createBlock(basic_date_table_default, {
|
||||
key: 0,
|
||||
ref_key: "leftCurrentViewRef",
|
||||
ref: leftCurrentViewRef,
|
||||
"selection-mode": "range",
|
||||
date: leftDate.value,
|
||||
"min-date": unref(minDate),
|
||||
"max-date": unref(maxDate),
|
||||
"range-state": unref(rangeState),
|
||||
"disabled-date": unref(disabledDate),
|
||||
"cell-class-name": unref(cellClassName),
|
||||
"show-week-number": _ctx.showWeekNumber,
|
||||
disabled: unref(dateRangeDisabled),
|
||||
onChangerange: unref(handleChangeRange),
|
||||
onPick: handleRangePick,
|
||||
onSelect: unref(onSelect)
|
||||
}, null, 8, [
|
||||
"date",
|
||||
"min-date",
|
||||
"max-date",
|
||||
"range-state",
|
||||
"disabled-date",
|
||||
"cell-class-name",
|
||||
"show-week-number",
|
||||
"disabled",
|
||||
"onChangerange",
|
||||
"onSelect"
|
||||
])) : createCommentVNode("v-if", true),
|
||||
unref(leftCurrentView) === "year" ? (openBlock(), createBlock(basic_year_table_default, {
|
||||
key: 1,
|
||||
ref_key: "leftCurrentViewRef",
|
||||
ref: leftCurrentViewRef,
|
||||
"selection-mode": "year",
|
||||
date: leftDate.value,
|
||||
"disabled-date": unref(disabledDate),
|
||||
"parsed-value": _ctx.parsedValue,
|
||||
disabled: unref(dateRangeDisabled),
|
||||
onPick: unref(handleLeftYearPick)
|
||||
}, null, 8, [
|
||||
"date",
|
||||
"disabled-date",
|
||||
"parsed-value",
|
||||
"disabled",
|
||||
"onPick"
|
||||
])) : createCommentVNode("v-if", true),
|
||||
unref(leftCurrentView) === "month" ? (openBlock(), createBlock(basic_month_table_default, {
|
||||
key: 2,
|
||||
ref_key: "leftCurrentViewRef",
|
||||
ref: leftCurrentViewRef,
|
||||
"selection-mode": "month",
|
||||
date: leftDate.value,
|
||||
"parsed-value": _ctx.parsedValue,
|
||||
"disabled-date": unref(disabledDate),
|
||||
disabled: unref(dateRangeDisabled),
|
||||
onPick: unref(handleLeftMonthPick)
|
||||
}, null, 8, [
|
||||
"date",
|
||||
"parsed-value",
|
||||
"disabled-date",
|
||||
"disabled",
|
||||
"onPick"
|
||||
])) : createCommentVNode("v-if", true)
|
||||
], 2),
|
||||
!_ctx.singlePanel ? (openBlock(), createElementBlock("div", {
|
||||
key: 1,
|
||||
class: normalizeClass([[unref(ppNs).e("content"), unref(drpNs).e("content")], "is-right"])
|
||||
}, [
|
||||
createElementVNode("div", { class: normalizeClass(unref(drpNs).e("header")) }, [
|
||||
_ctx.unlinkPanels ? (openBlock(), createElementBlock("button", {
|
||||
key: 0,
|
||||
type: "button",
|
||||
disabled: !enableYearArrow.value || unref(dateRangeDisabled),
|
||||
class: normalizeClass([[unref(ppNs).e("icon-btn"), unref(ppNs).is("disabled", !enableYearArrow.value || unref(dateRangeDisabled))], "d-arrow-left"]),
|
||||
"aria-label": unref(t)(`el.datepicker.prevYear`),
|
||||
onClick: rightPrevYear
|
||||
}, [renderSlot(_ctx.$slots, "prev-year", {}, () => [createVNode(unref(ElIcon), null, {
|
||||
default: withCtx(() => [createVNode(unref(DArrowLeft))]),
|
||||
_: 1
|
||||
})])], 10, _hoisted_8)) : createCommentVNode("v-if", true),
|
||||
_ctx.unlinkPanels && unref(rightCurrentView) === "date" ? (openBlock(), createElementBlock("button", {
|
||||
key: 1,
|
||||
type: "button",
|
||||
disabled: !enableMonthArrow.value || unref(dateRangeDisabled),
|
||||
class: normalizeClass([[unref(ppNs).e("icon-btn"), unref(ppNs).is("disabled", !enableMonthArrow.value || unref(dateRangeDisabled))], "arrow-left"]),
|
||||
"aria-label": unref(t)(`el.datepicker.prevMonth`),
|
||||
onClick: rightPrevMonth
|
||||
}, [renderSlot(_ctx.$slots, "prev-month", {}, () => [createVNode(unref(ElIcon), null, {
|
||||
default: withCtx(() => [createVNode(unref(ArrowLeft))]),
|
||||
_: 1
|
||||
})])], 10, _hoisted_9)) : createCommentVNode("v-if", true),
|
||||
createElementVNode("button", {
|
||||
type: "button",
|
||||
"aria-label": unref(t)(`el.datepicker.nextYear`),
|
||||
class: normalizeClass([unref(ppNs).e("icon-btn"), "d-arrow-right"]),
|
||||
disabled: unref(dateRangeDisabled),
|
||||
onClick: rightNextYear
|
||||
}, [renderSlot(_ctx.$slots, "next-year", {}, () => [createVNode(unref(ElIcon), null, {
|
||||
default: withCtx(() => [createVNode(unref(DArrowRight))]),
|
||||
_: 1
|
||||
})])], 10, _hoisted_10),
|
||||
withDirectives(createElementVNode("button", {
|
||||
type: "button",
|
||||
class: normalizeClass([unref(ppNs).e("icon-btn"), "arrow-right"]),
|
||||
disabled: unref(dateRangeDisabled),
|
||||
"aria-label": unref(t)(`el.datepicker.nextMonth`),
|
||||
onClick: rightNextMonth
|
||||
}, [renderSlot(_ctx.$slots, "next-month", {}, () => [createVNode(unref(ElIcon), null, {
|
||||
default: withCtx(() => [createVNode(unref(ArrowRight))]),
|
||||
_: 1
|
||||
})])], 10, _hoisted_11), [[vShow, unref(rightCurrentView) === "date"]]),
|
||||
createElementVNode("div", null, [createElementVNode("span", {
|
||||
role: "button",
|
||||
class: normalizeClass(unref(drpNs).e("header-label")),
|
||||
"aria-live": "polite",
|
||||
tabindex: _ctx.disabled ? void 0 : 0,
|
||||
"aria-disabled": _ctx.disabled,
|
||||
onKeydown: _cache[14] || (_cache[14] = withKeys(($event) => unref(showRightPicker)("year"), ["enter"])),
|
||||
onClick: _cache[15] || (_cache[15] = ($event) => unref(showRightPicker)("year"))
|
||||
}, toDisplayString(unref(rightYearLabel)), 43, _hoisted_12), withDirectives(createElementVNode("span", {
|
||||
role: "button",
|
||||
"aria-live": "polite",
|
||||
tabindex: _ctx.disabled ? void 0 : 0,
|
||||
"aria-disabled": _ctx.disabled,
|
||||
class: normalizeClass([unref(drpNs).e("header-label"), { active: unref(rightCurrentView) === "month" }]),
|
||||
onKeydown: _cache[16] || (_cache[16] = withKeys(($event) => unref(showRightPicker)("month"), ["enter"])),
|
||||
onClick: _cache[17] || (_cache[17] = ($event) => unref(showRightPicker)("month"))
|
||||
}, toDisplayString(unref(t)(`el.datepicker.month${rightDate.value.month() + 1}`)), 43, _hoisted_13), [[vShow, unref(rightCurrentView) === "date"]])])
|
||||
], 2),
|
||||
unref(rightCurrentView) === "date" ? (openBlock(), createBlock(basic_date_table_default, {
|
||||
key: 0,
|
||||
ref_key: "rightCurrentViewRef",
|
||||
ref: rightCurrentViewRef,
|
||||
"selection-mode": "range",
|
||||
date: rightDate.value,
|
||||
"min-date": unref(minDate),
|
||||
"max-date": unref(maxDate),
|
||||
"range-state": unref(rangeState),
|
||||
"disabled-date": unref(disabledDate),
|
||||
"cell-class-name": unref(cellClassName),
|
||||
"show-week-number": _ctx.showWeekNumber,
|
||||
disabled: unref(dateRangeDisabled),
|
||||
onChangerange: unref(handleChangeRange),
|
||||
onPick: handleRangePick,
|
||||
onSelect: unref(onSelect)
|
||||
}, null, 8, [
|
||||
"date",
|
||||
"min-date",
|
||||
"max-date",
|
||||
"range-state",
|
||||
"disabled-date",
|
||||
"cell-class-name",
|
||||
"show-week-number",
|
||||
"disabled",
|
||||
"onChangerange",
|
||||
"onSelect"
|
||||
])) : createCommentVNode("v-if", true),
|
||||
unref(rightCurrentView) === "year" ? (openBlock(), createBlock(basic_year_table_default, {
|
||||
key: 1,
|
||||
ref_key: "rightCurrentViewRef",
|
||||
ref: rightCurrentViewRef,
|
||||
"selection-mode": "year",
|
||||
date: rightDate.value,
|
||||
"disabled-date": unref(disabledDate),
|
||||
"parsed-value": _ctx.parsedValue,
|
||||
disabled: unref(dateRangeDisabled),
|
||||
onPick: unref(handleRightYearPick)
|
||||
}, null, 8, [
|
||||
"date",
|
||||
"disabled-date",
|
||||
"parsed-value",
|
||||
"disabled",
|
||||
"onPick"
|
||||
])) : createCommentVNode("v-if", true),
|
||||
unref(rightCurrentView) === "month" ? (openBlock(), createBlock(basic_month_table_default, {
|
||||
key: 2,
|
||||
ref_key: "rightCurrentViewRef",
|
||||
ref: rightCurrentViewRef,
|
||||
"selection-mode": "month",
|
||||
date: rightDate.value,
|
||||
"parsed-value": _ctx.parsedValue,
|
||||
"disabled-date": unref(disabledDate),
|
||||
disabled: unref(dateRangeDisabled),
|
||||
onPick: unref(handleRightMonthPick)
|
||||
}, null, 8, [
|
||||
"date",
|
||||
"parsed-value",
|
||||
"disabled-date",
|
||||
"disabled",
|
||||
"onPick"
|
||||
])) : createCommentVNode("v-if", true)
|
||||
], 2)) : createCommentVNode("v-if", true)
|
||||
], 2)
|
||||
], 2), _ctx.showFooter && showTime.value && (_ctx.showConfirm || unref(clearable)) ? (openBlock(), createElementBlock("div", {
|
||||
key: 0,
|
||||
class: normalizeClass(unref(ppNs).e("footer"))
|
||||
}, [unref(clearable) ? (openBlock(), createBlock(unref(ElButton), {
|
||||
key: 0,
|
||||
text: "",
|
||||
size: "small",
|
||||
class: normalizeClass(unref(ppNs).e("link-btn")),
|
||||
onClick: onClear
|
||||
}, {
|
||||
default: withCtx(() => [createTextVNode(toDisplayString(unref(t)("el.datepicker.clear")), 1)]),
|
||||
_: 1
|
||||
}, 8, ["class"])) : createCommentVNode("v-if", true), _ctx.showConfirm ? (openBlock(), createBlock(unref(ElButton), {
|
||||
key: 1,
|
||||
plain: "",
|
||||
size: "small",
|
||||
class: normalizeClass(unref(ppNs).e("link-btn")),
|
||||
disabled: btnDisabled.value,
|
||||
onClick: _cache[18] || (_cache[18] = ($event) => unref(handleRangeConfirm)(false))
|
||||
}, {
|
||||
default: withCtx(() => [createTextVNode(toDisplayString(unref(t)("el.datepicker.confirm")), 1)]),
|
||||
_: 1
|
||||
}, 8, ["class", "disabled"])) : createCommentVNode("v-if", true)], 2)) : createCommentVNode("v-if", true)], 2);
|
||||
};
|
||||
}
|
||||
});
|
||||
//#endregion
|
||||
export { panel_date_range_vue_vue_type_script_setup_true_lang_default as default };
|
||||
|
||||
//# sourceMappingURL=panel-date-range.vue_vue_type_script_setup_true_lang.mjs.map
|
||||
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
Generated
Vendored
+7
@@ -0,0 +1,7 @@
|
||||
import panel_month_range_vue_vue_type_script_setup_true_lang_default from "./panel-month-range.vue_vue_type_script_setup_true_lang.mjs";
|
||||
//#region ../../packages/components/date-picker-panel/src/date-picker-com/panel-month-range.vue
|
||||
var panel_month_range_default = panel_month_range_vue_vue_type_script_setup_true_lang_default;
|
||||
//#endregion
|
||||
export { panel_month_range_default as default };
|
||||
|
||||
//# sourceMappingURL=panel-month-range.mjs.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
+214
@@ -0,0 +1,214 @@
|
||||
import { useLocale } from "../../../../hooks/use-locale/index.mjs";
|
||||
import { ElIcon } from "../../../icon/index.mjs";
|
||||
import { useFormDisabled } from "../../../form/src/hooks/use-form-common-props.mjs";
|
||||
import { PICKER_BASE_INJECTION_KEY } from "../../../time-picker/src/constants.mjs";
|
||||
import { correctlyParseUserInput, getDefaultValue, isValidRange } from "../utils.mjs";
|
||||
import basic_month_table_default from "./basic-month-table.mjs";
|
||||
import { useRangePicker } from "../composables/use-range-picker.mjs";
|
||||
import { panelMonthRangeEmits, panelMonthRangeProps } from "../props/panel-month-range.mjs";
|
||||
import { useMonthRangeHeader } from "../composables/use-month-range-header.mjs";
|
||||
import { DArrowLeft, DArrowRight } from "@element-plus/icons-vue";
|
||||
import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, inject, normalizeClass, openBlock, ref, renderList, renderSlot, toDisplayString, toRef, unref, watch, withCtx } from "vue";
|
||||
import dayjs from "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__ */ defineComponent({
|
||||
name: "DatePickerMonthRange",
|
||||
__name: "panel-month-range",
|
||||
props: panelMonthRangeProps,
|
||||
emits: panelMonthRangeEmits,
|
||||
setup(__props, { emit: __emit }) {
|
||||
const props = __props;
|
||||
const emit = __emit;
|
||||
const { lang } = useLocale();
|
||||
const pickerBase = inject(PICKER_BASE_INJECTION_KEY);
|
||||
const { shortcuts, disabledDate, cellClassName } = pickerBase.props;
|
||||
const format = toRef(pickerBase.props, "format");
|
||||
const defaultValue = toRef(pickerBase.props, "defaultValue");
|
||||
const leftDate = ref(dayjs().locale(lang.value));
|
||||
const rightDate = ref(dayjs().locale(lang.value).add(1, unit));
|
||||
const { minDate, maxDate, rangeState, ppNs, drpNs, handleChangeRange, handleRangeConfirm, handleShortcutClick, onSelect, parseValue } = useRangePicker(props, {
|
||||
defaultValue,
|
||||
leftDate,
|
||||
rightDate,
|
||||
unit,
|
||||
sortDates
|
||||
});
|
||||
const hasShortcuts = computed(() => !!shortcuts.length);
|
||||
const { leftPrevYear, rightNextYear, leftNextYear, rightPrevYear, leftLabel, rightLabel, leftYear, rightYear } = useMonthRangeHeader({
|
||||
unlinkPanels: toRef(props, "unlinkPanels"),
|
||||
leftDate,
|
||||
rightDate
|
||||
});
|
||||
const enableYearArrow = 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 = getDefaultValue(unref(defaultValue), {
|
||||
lang: unref(lang),
|
||||
unit: "year",
|
||||
unlinkPanels: props.unlinkPanels
|
||||
})[0];
|
||||
rightDate.value = leftDate.value.add(1, "year");
|
||||
emit("pick", valueOnClear);
|
||||
};
|
||||
const parseUserInput = (value) => {
|
||||
return 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 = useFormDisabled();
|
||||
watch(() => props.visible, (visible) => {
|
||||
if (!visible && rangeState.value.selecting) {
|
||||
parseValue(props.parsedValue);
|
||||
onSelect(false);
|
||||
}
|
||||
});
|
||||
emit("set-picker-option", ["isValidValue", isValidRange]);
|
||||
emit("set-picker-option", ["parseUserInput", parseUserInput]);
|
||||
emit("set-picker-option", ["handleClear", handleClear]);
|
||||
return (_ctx, _cache) => {
|
||||
return openBlock(), createElementBlock("div", { class: normalizeClass([
|
||||
unref(ppNs).b(),
|
||||
unref(drpNs).b(),
|
||||
unref(ppNs).is("border", _ctx.border),
|
||||
unref(ppNs).is("disabled", unref(monthRangeDisabled)),
|
||||
{
|
||||
"has-sidebar": Boolean(_ctx.$slots.sidebar) || hasShortcuts.value,
|
||||
"single-panel": _ctx.singlePanel
|
||||
}
|
||||
]) }, [createElementVNode("div", { class: normalizeClass(unref(ppNs).e("body-wrapper")) }, [
|
||||
renderSlot(_ctx.$slots, "sidebar", { class: normalizeClass(unref(ppNs).e("sidebar")) }),
|
||||
hasShortcuts.value ? (openBlock(), createElementBlock("div", {
|
||||
key: 0,
|
||||
class: normalizeClass(unref(ppNs).e("sidebar"))
|
||||
}, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(shortcuts), (shortcut, key) => {
|
||||
return openBlock(), createElementBlock("button", {
|
||||
key,
|
||||
type: "button",
|
||||
class: normalizeClass(unref(ppNs).e("shortcut")),
|
||||
disabled: unref(monthRangeDisabled),
|
||||
onClick: ($event) => unref(handleShortcutClick)(shortcut)
|
||||
}, toDisplayString(shortcut.text), 11, _hoisted_1);
|
||||
}), 128))], 2)) : createCommentVNode("v-if", true),
|
||||
createElementVNode("div", { class: normalizeClass(unref(ppNs).e("body")) }, [createElementVNode("div", { class: normalizeClass([
|
||||
unref(ppNs).e("content"),
|
||||
unref(drpNs).e("content"),
|
||||
unref(drpNs).is("left", !_ctx.singlePanel)
|
||||
]) }, [createElementVNode("div", { class: normalizeClass(unref(drpNs).e("header")) }, [
|
||||
createElementVNode("button", {
|
||||
type: "button",
|
||||
class: normalizeClass([unref(ppNs).e("icon-btn"), "d-arrow-left"]),
|
||||
disabled: unref(monthRangeDisabled),
|
||||
onClick: _cache[0] || (_cache[0] = (...args) => unref(leftPrevYear) && unref(leftPrevYear)(...args))
|
||||
}, [renderSlot(_ctx.$slots, "prev-year", {}, () => [createVNode(unref(ElIcon), null, {
|
||||
default: withCtx(() => [createVNode(unref(DArrowLeft))]),
|
||||
_: 1
|
||||
})])], 10, _hoisted_2),
|
||||
_ctx.unlinkPanels || _ctx.singlePanel ? (openBlock(), createElementBlock("button", {
|
||||
key: 0,
|
||||
type: "button",
|
||||
disabled: !enableYearArrow.value || unref(monthRangeDisabled),
|
||||
class: normalizeClass([[unref(ppNs).e("icon-btn"), unref(ppNs).is("disabled", !enableYearArrow.value || unref(monthRangeDisabled))], "d-arrow-right"]),
|
||||
onClick: _cache[1] || (_cache[1] = (...args) => unref(leftNextYear) && unref(leftNextYear)(...args))
|
||||
}, [renderSlot(_ctx.$slots, "next-year", {}, () => [createVNode(unref(ElIcon), null, {
|
||||
default: withCtx(() => [createVNode(unref(DArrowRight))]),
|
||||
_: 1
|
||||
})])], 10, _hoisted_3)) : createCommentVNode("v-if", true),
|
||||
createElementVNode("div", null, toDisplayString(unref(leftLabel)), 1)
|
||||
], 2), createVNode(basic_month_table_default, {
|
||||
"selection-mode": "range",
|
||||
date: leftDate.value,
|
||||
"min-date": unref(minDate),
|
||||
"max-date": unref(maxDate),
|
||||
"range-state": unref(rangeState),
|
||||
"disabled-date": unref(disabledDate),
|
||||
disabled: unref(monthRangeDisabled),
|
||||
"cell-class-name": unref(cellClassName),
|
||||
onChangerange: unref(handleChangeRange),
|
||||
onPick: handleRangePick,
|
||||
onSelect: unref(onSelect)
|
||||
}, null, 8, [
|
||||
"date",
|
||||
"min-date",
|
||||
"max-date",
|
||||
"range-state",
|
||||
"disabled-date",
|
||||
"disabled",
|
||||
"cell-class-name",
|
||||
"onChangerange",
|
||||
"onSelect"
|
||||
])], 2), !_ctx.singlePanel ? (openBlock(), createElementBlock("div", {
|
||||
key: 0,
|
||||
class: normalizeClass([[unref(ppNs).e("content"), unref(drpNs).e("content")], "is-right"])
|
||||
}, [createElementVNode("div", { class: normalizeClass(unref(drpNs).e("header")) }, [
|
||||
_ctx.unlinkPanels ? (openBlock(), createElementBlock("button", {
|
||||
key: 0,
|
||||
type: "button",
|
||||
disabled: !enableYearArrow.value || unref(monthRangeDisabled),
|
||||
class: normalizeClass([[unref(ppNs).e("icon-btn"), unref(ppNs).is("disabled", !enableYearArrow.value || unref(monthRangeDisabled))], "d-arrow-left"]),
|
||||
onClick: _cache[2] || (_cache[2] = (...args) => unref(rightPrevYear) && unref(rightPrevYear)(...args))
|
||||
}, [renderSlot(_ctx.$slots, "prev-year", {}, () => [createVNode(unref(ElIcon), null, {
|
||||
default: withCtx(() => [createVNode(unref(DArrowLeft))]),
|
||||
_: 1
|
||||
})])], 10, _hoisted_4)) : createCommentVNode("v-if", true),
|
||||
createElementVNode("button", {
|
||||
type: "button",
|
||||
class: normalizeClass([unref(ppNs).e("icon-btn"), "d-arrow-right"]),
|
||||
disabled: unref(monthRangeDisabled),
|
||||
onClick: _cache[3] || (_cache[3] = (...args) => unref(rightNextYear) && unref(rightNextYear)(...args))
|
||||
}, [renderSlot(_ctx.$slots, "next-year", {}, () => [createVNode(unref(ElIcon), null, {
|
||||
default: withCtx(() => [createVNode(unref(DArrowRight))]),
|
||||
_: 1
|
||||
})])], 10, _hoisted_5),
|
||||
createElementVNode("div", null, toDisplayString(unref(rightLabel)), 1)
|
||||
], 2), createVNode(basic_month_table_default, {
|
||||
"selection-mode": "range",
|
||||
date: rightDate.value,
|
||||
"min-date": unref(minDate),
|
||||
"max-date": unref(maxDate),
|
||||
"range-state": unref(rangeState),
|
||||
"disabled-date": unref(disabledDate),
|
||||
disabled: unref(monthRangeDisabled),
|
||||
"cell-class-name": unref(cellClassName),
|
||||
onChangerange: unref(handleChangeRange),
|
||||
onPick: handleRangePick,
|
||||
onSelect: unref(onSelect)
|
||||
}, null, 8, [
|
||||
"date",
|
||||
"min-date",
|
||||
"max-date",
|
||||
"range-state",
|
||||
"disabled-date",
|
||||
"disabled",
|
||||
"cell-class-name",
|
||||
"onChangerange",
|
||||
"onSelect"
|
||||
])], 2)) : createCommentVNode("v-if", true)], 2)
|
||||
], 2)], 2);
|
||||
};
|
||||
}
|
||||
});
|
||||
//#endregion
|
||||
export { panel_month_range_vue_vue_type_script_setup_true_lang_default as default };
|
||||
|
||||
//# sourceMappingURL=panel-month-range.vue_vue_type_script_setup_true_lang.mjs.map
|
||||
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
Generated
Vendored
+7
@@ -0,0 +1,7 @@
|
||||
import panel_year_range_vue_vue_type_script_setup_true_lang_default from "./panel-year-range.vue_vue_type_script_setup_true_lang.mjs";
|
||||
//#region ../../packages/components/date-picker-panel/src/date-picker-com/panel-year-range.vue
|
||||
var panel_year_range_default = panel_year_range_vue_vue_type_script_setup_true_lang_default;
|
||||
//#endregion
|
||||
export { panel_year_range_default as default };
|
||||
|
||||
//# sourceMappingURL=panel-year-range.mjs.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
+251
@@ -0,0 +1,251 @@
|
||||
import { useLocale } from "../../../../hooks/use-locale/index.mjs";
|
||||
import { ElIcon } from "../../../icon/index.mjs";
|
||||
import { useFormDisabled } from "../../../form/src/hooks/use-form-common-props.mjs";
|
||||
import { PICKER_BASE_INJECTION_KEY } from "../../../time-picker/src/constants.mjs";
|
||||
import { correctlyParseUserInput, getDefaultValue, isValidRange } from "../utils.mjs";
|
||||
import basic_year_table_default from "./basic-year-table.mjs";
|
||||
import { useRangePicker } from "../composables/use-range-picker.mjs";
|
||||
import { panelYearRangeEmits, panelYearRangeProps } from "../props/panel-year-range.mjs";
|
||||
import { useYearRangeHeader } from "../composables/use-year-range-header.mjs";
|
||||
import { DArrowLeft, DArrowRight } from "@element-plus/icons-vue";
|
||||
import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, inject, normalizeClass, openBlock, ref, renderList, renderSlot, toDisplayString, toRef, unref, useSlots, watch, withCtx } from "vue";
|
||||
import dayjs from "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__ */ defineComponent({
|
||||
name: "DatePickerYearRange",
|
||||
__name: "panel-year-range",
|
||||
props: panelYearRangeProps,
|
||||
emits: panelYearRangeEmits,
|
||||
setup(__props, { emit: __emit }) {
|
||||
const props = __props;
|
||||
const emit = __emit;
|
||||
const { lang } = useLocale();
|
||||
const leftDate = ref(dayjs().locale(lang.value));
|
||||
const rightDate = ref(dayjs().locale(lang.value).add(step, unit));
|
||||
const pickerBase = inject(PICKER_BASE_INJECTION_KEY);
|
||||
const { shortcuts, disabledDate, cellClassName } = pickerBase.props;
|
||||
const format = toRef(pickerBase.props, "format");
|
||||
const defaultValue = toRef(pickerBase.props, "defaultValue");
|
||||
const { minDate, maxDate, rangeState, ppNs, drpNs, handleChangeRange, handleRangeConfirm, handleShortcutClick, onSelect, parseValue } = useRangePicker(props, {
|
||||
defaultValue,
|
||||
leftDate,
|
||||
rightDate,
|
||||
step,
|
||||
unit,
|
||||
sortDates
|
||||
});
|
||||
const { leftPrevYear, rightNextYear, leftNextYear, rightPrevYear, leftLabel, rightLabel, leftYear, rightYear } = useYearRangeHeader({
|
||||
unlinkPanels: toRef(props, "unlinkPanels"),
|
||||
leftDate,
|
||||
rightDate
|
||||
});
|
||||
const yearRangeDisabled = useFormDisabled();
|
||||
const hasShortcuts = computed(() => !!shortcuts.length);
|
||||
const panelKls = computed(() => [
|
||||
ppNs.b(),
|
||||
drpNs.b(),
|
||||
ppNs.is("border", props.border),
|
||||
ppNs.is("disabled", yearRangeDisabled.value),
|
||||
{
|
||||
"has-sidebar": Boolean(useSlots().sidebar) || hasShortcuts.value,
|
||||
"single-panel": props.singlePanel
|
||||
}
|
||||
]);
|
||||
const leftPanelKls = 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 = 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 = 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 correctlyParseUserInput(value, format.value, lang.value);
|
||||
};
|
||||
const isValidValue = (date) => {
|
||||
return 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 = getDefaultValue(unref(defaultValue), {
|
||||
lang: 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);
|
||||
}
|
||||
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 openBlock(), createElementBlock("div", { class: normalizeClass(panelKls.value) }, [createElementVNode("div", { class: normalizeClass(unref(ppNs).e("body-wrapper")) }, [
|
||||
renderSlot(_ctx.$slots, "sidebar", { class: normalizeClass(unref(ppNs).e("sidebar")) }),
|
||||
hasShortcuts.value ? (openBlock(), createElementBlock("div", {
|
||||
key: 0,
|
||||
class: normalizeClass(unref(ppNs).e("sidebar"))
|
||||
}, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(shortcuts), (shortcut, key) => {
|
||||
return openBlock(), createElementBlock("button", {
|
||||
key,
|
||||
type: "button",
|
||||
class: normalizeClass(unref(ppNs).e("shortcut")),
|
||||
disabled: unref(yearRangeDisabled),
|
||||
onClick: ($event) => unref(handleShortcutClick)(shortcut)
|
||||
}, toDisplayString(shortcut.text), 11, _hoisted_1);
|
||||
}), 128))], 2)) : createCommentVNode("v-if", true),
|
||||
createElementVNode("div", { class: normalizeClass(unref(ppNs).e("body")) }, [createElementVNode("div", { class: normalizeClass(leftPanelKls.value.content) }, [createElementVNode("div", { class: normalizeClass(unref(drpNs).e("header")) }, [
|
||||
createElementVNode("button", {
|
||||
type: "button",
|
||||
class: normalizeClass(leftPanelKls.value.arrowLeftBtn),
|
||||
disabled: unref(yearRangeDisabled),
|
||||
onClick: _cache[0] || (_cache[0] = (...args) => unref(leftPrevYear) && unref(leftPrevYear)(...args))
|
||||
}, [renderSlot(_ctx.$slots, "prev-year", {}, () => [createVNode(unref(ElIcon), null, {
|
||||
default: withCtx(() => [createVNode(unref(DArrowLeft))]),
|
||||
_: 1
|
||||
})])], 10, _hoisted_2),
|
||||
_ctx.unlinkPanels || _ctx.singlePanel ? (openBlock(), createElementBlock("button", {
|
||||
key: 0,
|
||||
type: "button",
|
||||
disabled: !enableYearArrow.value || unref(yearRangeDisabled),
|
||||
class: normalizeClass(leftPanelKls.value.arrowRightBtn),
|
||||
onClick: _cache[1] || (_cache[1] = (...args) => unref(leftNextYear) && unref(leftNextYear)(...args))
|
||||
}, [renderSlot(_ctx.$slots, "next-year", {}, () => [createVNode(unref(ElIcon), null, {
|
||||
default: withCtx(() => [createVNode(unref(DArrowRight))]),
|
||||
_: 1
|
||||
})])], 10, _hoisted_3)) : createCommentVNode("v-if", true),
|
||||
createElementVNode("div", null, toDisplayString(unref(leftLabel)), 1)
|
||||
], 2), createVNode(basic_year_table_default, {
|
||||
"selection-mode": "range",
|
||||
date: leftDate.value,
|
||||
"min-date": unref(minDate),
|
||||
"max-date": unref(maxDate),
|
||||
"range-state": unref(rangeState),
|
||||
"disabled-date": unref(disabledDate),
|
||||
disabled: unref(yearRangeDisabled),
|
||||
"cell-class-name": unref(cellClassName),
|
||||
onChangerange: unref(handleChangeRange),
|
||||
onPick: handleRangePick,
|
||||
onSelect: unref(onSelect)
|
||||
}, null, 8, [
|
||||
"date",
|
||||
"min-date",
|
||||
"max-date",
|
||||
"range-state",
|
||||
"disabled-date",
|
||||
"disabled",
|
||||
"cell-class-name",
|
||||
"onChangerange",
|
||||
"onSelect"
|
||||
])], 2), !_ctx.singlePanel ? (openBlock(), createElementBlock("div", {
|
||||
key: 0,
|
||||
class: normalizeClass(rightPanelKls.value.content)
|
||||
}, [createElementVNode("div", { class: normalizeClass(unref(drpNs).e("header")) }, [
|
||||
_ctx.unlinkPanels ? (openBlock(), createElementBlock("button", {
|
||||
key: 0,
|
||||
type: "button",
|
||||
disabled: !enableYearArrow.value || unref(yearRangeDisabled),
|
||||
class: normalizeClass(rightPanelKls.value.arrowLeftBtn),
|
||||
onClick: _cache[2] || (_cache[2] = (...args) => unref(rightPrevYear) && unref(rightPrevYear)(...args))
|
||||
}, [renderSlot(_ctx.$slots, "prev-year", {}, () => [createVNode(unref(ElIcon), null, {
|
||||
default: withCtx(() => [createVNode(unref(DArrowLeft))]),
|
||||
_: 1
|
||||
})])], 10, _hoisted_4)) : createCommentVNode("v-if", true),
|
||||
createElementVNode("button", {
|
||||
type: "button",
|
||||
class: normalizeClass(rightPanelKls.value.arrowRightBtn),
|
||||
disabled: unref(yearRangeDisabled),
|
||||
onClick: _cache[3] || (_cache[3] = (...args) => unref(rightNextYear) && unref(rightNextYear)(...args))
|
||||
}, [renderSlot(_ctx.$slots, "next-year", {}, () => [createVNode(unref(ElIcon), null, {
|
||||
default: withCtx(() => [createVNode(unref(DArrowRight))]),
|
||||
_: 1
|
||||
})])], 10, _hoisted_5),
|
||||
createElementVNode("div", null, toDisplayString(unref(rightLabel)), 1)
|
||||
], 2), createVNode(basic_year_table_default, {
|
||||
"selection-mode": "range",
|
||||
date: rightDate.value,
|
||||
"min-date": unref(minDate),
|
||||
"max-date": unref(maxDate),
|
||||
"range-state": unref(rangeState),
|
||||
"disabled-date": unref(disabledDate),
|
||||
disabled: unref(yearRangeDisabled),
|
||||
"cell-class-name": unref(cellClassName),
|
||||
onChangerange: unref(handleChangeRange),
|
||||
onPick: handleRangePick,
|
||||
onSelect: unref(onSelect)
|
||||
}, null, 8, [
|
||||
"date",
|
||||
"min-date",
|
||||
"max-date",
|
||||
"range-state",
|
||||
"disabled-date",
|
||||
"disabled",
|
||||
"cell-class-name",
|
||||
"onChangerange",
|
||||
"onSelect"
|
||||
])], 2)) : createCommentVNode("v-if", true)], 2)
|
||||
], 2)], 2);
|
||||
};
|
||||
}
|
||||
});
|
||||
//#endregion
|
||||
export { panel_year_range_vue_vue_type_script_setup_true_lang_default as default };
|
||||
|
||||
//# sourceMappingURL=panel-year-range.vue_vue_type_script_setup_true_lang.mjs.map
|
||||
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user