0f959a02458922b9825b2760078af7446f284edc9a4e9afe6cee7a8abbc45e0dda8d115baf12d227b78747c178997b6dbcb09790d9d80fa179ac137aeec5c5 31 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723
  1. 'use strict';
  2. Object.defineProperty(exports, '__esModule', { value: true });
  3. var vue = require('vue');
  4. var dayjs = require('dayjs');
  5. var index$5 = require('../../../button/index.js');
  6. var index$2 = require('../../../input/index.js');
  7. require('../../../time-picker/index.js');
  8. var index$4 = require('../../../icon/index.js');
  9. var iconsVue = require('@element-plus/icons-vue');
  10. var panelDatePick = require('../props/panel-date-pick.js');
  11. var utils$1 = require('../utils.js');
  12. var constants$1 = require('../constants.js');
  13. var basicDateTable = require('./basic-date-table.js');
  14. var basicMonthTable = require('./basic-month-table.js');
  15. var basicYearTable = require('./basic-year-table.js');
  16. var pluginVue_exportHelper = require('../../../../_virtual/plugin-vue_export-helper.js');
  17. var constants = require('../../../time-picker/src/constants.js');
  18. var utils = require('../../../time-picker/src/utils.js');
  19. var arrays = require('../../../../utils/arrays.js');
  20. var panelTimePick = require('../../../time-picker/src/time-picker-com/panel-time-pick.js');
  21. var index$3 = require('../../../../directives/click-outside/index.js');
  22. var index = require('../../../../hooks/use-namespace/index.js');
  23. var index$1 = require('../../../../hooks/use-locale/index.js');
  24. var shared = require('@vue/shared');
  25. var aria = require('../../../../constants/aria.js');
  26. function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
  27. var dayjs__default = /*#__PURE__*/_interopDefaultLegacy(dayjs);
  28. const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  29. __name: "panel-date-pick",
  30. props: panelDatePick.panelDatePickProps,
  31. emits: ["pick", "set-picker-option", "panel-change"],
  32. setup(__props, { emit: contextEmit }) {
  33. const props = __props;
  34. const timeWithinRange = (_, __, ___) => true;
  35. const ppNs = index.useNamespace("picker-panel");
  36. const dpNs = index.useNamespace("date-picker");
  37. const attrs = vue.useAttrs();
  38. const slots = vue.useSlots();
  39. const { t, lang } = index$1.useLocale();
  40. const pickerBase = vue.inject(constants.PICKER_BASE_INJECTION_KEY);
  41. const isDefaultFormat = vue.inject(constants$1.ROOT_PICKER_IS_DEFAULT_FORMAT_INJECTION_KEY, void 0);
  42. const { shortcuts, disabledDate, cellClassName, defaultTime } = pickerBase.props;
  43. const defaultValue = vue.toRef(pickerBase.props, "defaultValue");
  44. const currentViewRef = vue.ref();
  45. const innerDate = vue.ref(dayjs__default["default"]().locale(lang.value));
  46. const isChangeToNow = vue.ref(false);
  47. let isShortcut = false;
  48. const defaultTimeD = vue.computed(() => {
  49. return dayjs__default["default"](defaultTime).locale(lang.value);
  50. });
  51. const month = vue.computed(() => {
  52. return innerDate.value.month();
  53. });
  54. const year = vue.computed(() => {
  55. return innerDate.value.year();
  56. });
  57. const selectableRange = vue.ref([]);
  58. const userInputDate = vue.ref(null);
  59. const userInputTime = vue.ref(null);
  60. const checkDateWithinRange = (date) => {
  61. return selectableRange.value.length > 0 ? timeWithinRange(date, selectableRange.value, props.format || "HH:mm:ss") : true;
  62. };
  63. const formatEmit = (emitDayjs) => {
  64. if (defaultTime && !visibleTime.value && !isChangeToNow.value && !isShortcut) {
  65. return defaultTimeD.value.year(emitDayjs.year()).month(emitDayjs.month()).date(emitDayjs.date());
  66. }
  67. if (showTime.value)
  68. return emitDayjs.millisecond(0);
  69. return emitDayjs.startOf("day");
  70. };
  71. const emit = (value, ...args) => {
  72. if (!value) {
  73. contextEmit("pick", value, ...args);
  74. } else if (shared.isArray(value)) {
  75. const dates = value.map(formatEmit);
  76. contextEmit("pick", dates, ...args);
  77. } else {
  78. contextEmit("pick", formatEmit(value), ...args);
  79. }
  80. userInputDate.value = null;
  81. userInputTime.value = null;
  82. isChangeToNow.value = false;
  83. isShortcut = false;
  84. };
  85. const handleDatePick = async (value, keepOpen) => {
  86. if (selectionMode.value === "date" && dayjs__default["default"].isDayjs(value)) {
  87. const parsedDateValue = arrays.extractFirst(props.parsedValue);
  88. let newDate = parsedDateValue ? parsedDateValue.year(value.year()).month(value.month()).date(value.date()) : value;
  89. if (!checkDateWithinRange(newDate)) {
  90. newDate = selectableRange.value[0][0].year(value.year()).month(value.month()).date(value.date());
  91. }
  92. innerDate.value = newDate;
  93. emit(newDate, showTime.value || keepOpen);
  94. } else if (selectionMode.value === "week") {
  95. emit(value.date);
  96. } else if (selectionMode.value === "dates") {
  97. emit(value, true);
  98. }
  99. };
  100. const moveByMonth = (forward) => {
  101. const action = forward ? "add" : "subtract";
  102. innerDate.value = innerDate.value[action](1, "month");
  103. handlePanelChange("month");
  104. };
  105. const moveByYear = (forward) => {
  106. const currentDate = innerDate.value;
  107. const action = forward ? "add" : "subtract";
  108. innerDate.value = currentView.value === "year" ? currentDate[action](10, "year") : currentDate[action](1, "year");
  109. handlePanelChange("year");
  110. };
  111. const currentView = vue.ref("date");
  112. const yearLabel = vue.computed(() => {
  113. const yearTranslation = t("el.datepicker.year");
  114. if (currentView.value === "year") {
  115. const startYear = Math.floor(year.value / 10) * 10;
  116. if (yearTranslation) {
  117. return `${startYear} ${yearTranslation} - ${startYear + 9} ${yearTranslation}`;
  118. }
  119. return `${startYear} - ${startYear + 9}`;
  120. }
  121. return `${year.value} ${yearTranslation}`;
  122. });
  123. const handleShortcutClick = (shortcut) => {
  124. const shortcutValue = shared.isFunction(shortcut.value) ? shortcut.value() : shortcut.value;
  125. if (shortcutValue) {
  126. isShortcut = true;
  127. emit(dayjs__default["default"](shortcutValue).locale(lang.value));
  128. return;
  129. }
  130. if (shortcut.onClick) {
  131. shortcut.onClick({
  132. attrs,
  133. slots,
  134. emit: contextEmit
  135. });
  136. }
  137. };
  138. const selectionMode = vue.computed(() => {
  139. const { type } = props;
  140. if (["week", "month", "months", "year", "years", "dates"].includes(type))
  141. return type;
  142. return "date";
  143. });
  144. const isMultipleType = vue.computed(() => {
  145. return selectionMode.value === "dates" || selectionMode.value === "months" || selectionMode.value === "years";
  146. });
  147. const keyboardMode = vue.computed(() => {
  148. return selectionMode.value === "date" ? currentView.value : selectionMode.value;
  149. });
  150. const hasShortcuts = vue.computed(() => !!shortcuts.length);
  151. const handleMonthPick = async (month2, keepOpen) => {
  152. if (selectionMode.value === "month") {
  153. innerDate.value = utils$1.getValidDateOfMonth(innerDate.value, innerDate.value.year(), month2, lang.value, disabledDate);
  154. emit(innerDate.value, false);
  155. } else if (selectionMode.value === "months") {
  156. emit(month2, keepOpen != null ? keepOpen : true);
  157. } else {
  158. innerDate.value = utils$1.getValidDateOfMonth(innerDate.value, innerDate.value.year(), month2, lang.value, disabledDate);
  159. currentView.value = "date";
  160. if (["month", "year", "date", "week"].includes(selectionMode.value)) {
  161. emit(innerDate.value, true);
  162. await vue.nextTick();
  163. handleFocusPicker();
  164. }
  165. }
  166. handlePanelChange("month");
  167. };
  168. const handleYearPick = async (year2, keepOpen) => {
  169. if (selectionMode.value === "year") {
  170. const data = innerDate.value.startOf("year").year(year2);
  171. innerDate.value = utils$1.getValidDateOfYear(data, lang.value, disabledDate);
  172. emit(innerDate.value, false);
  173. } else if (selectionMode.value === "years") {
  174. emit(year2, keepOpen != null ? keepOpen : true);
  175. } else {
  176. const data = innerDate.value.year(year2);
  177. innerDate.value = utils$1.getValidDateOfYear(data, lang.value, disabledDate);
  178. currentView.value = "month";
  179. if (["month", "year", "date", "week"].includes(selectionMode.value)) {
  180. emit(innerDate.value, true);
  181. await vue.nextTick();
  182. handleFocusPicker();
  183. }
  184. }
  185. handlePanelChange("year");
  186. };
  187. const showPicker = async (view) => {
  188. if (props.disabled)
  189. return;
  190. currentView.value = view;
  191. await vue.nextTick();
  192. handleFocusPicker();
  193. };
  194. const showTime = vue.computed(() => props.type === "datetime" || props.type === "datetimerange");
  195. const footerVisible = vue.computed(() => {
  196. const showDateFooter = showTime.value || selectionMode.value === "dates";
  197. const showYearFooter = selectionMode.value === "years";
  198. const showMonthFooter = selectionMode.value === "months";
  199. const isDateView = currentView.value === "date";
  200. const isYearView = currentView.value === "year";
  201. const isMonthView = currentView.value === "month";
  202. return showDateFooter && isDateView || showYearFooter && isYearView || showMonthFooter && isMonthView;
  203. });
  204. const footerFilled = vue.computed(() => !isMultipleType.value && props.showNow || props.showConfirm);
  205. const disabledConfirm = vue.computed(() => {
  206. if (!disabledDate)
  207. return false;
  208. if (!props.parsedValue)
  209. return true;
  210. if (shared.isArray(props.parsedValue)) {
  211. return disabledDate(props.parsedValue[0].toDate());
  212. }
  213. return disabledDate(props.parsedValue.toDate());
  214. });
  215. const onConfirm = () => {
  216. if (isMultipleType.value) {
  217. emit(props.parsedValue);
  218. } else {
  219. let result = arrays.extractFirst(props.parsedValue);
  220. if (!result) {
  221. const defaultTimeD2 = dayjs__default["default"](defaultTime).locale(lang.value);
  222. const defaultValueD = getDefaultValue();
  223. result = defaultTimeD2.year(defaultValueD.year()).month(defaultValueD.month()).date(defaultValueD.date());
  224. }
  225. innerDate.value = result;
  226. emit(result);
  227. }
  228. };
  229. const disabledNow = vue.computed(() => {
  230. if (!disabledDate)
  231. return false;
  232. return disabledDate(dayjs__default["default"]().locale(lang.value).toDate());
  233. });
  234. const changeToNow = () => {
  235. const now = dayjs__default["default"]().locale(lang.value);
  236. const nowDate = now.toDate();
  237. isChangeToNow.value = true;
  238. if ((!disabledDate || !disabledDate(nowDate)) && checkDateWithinRange(nowDate)) {
  239. innerDate.value = dayjs__default["default"]().locale(lang.value);
  240. emit(innerDate.value);
  241. }
  242. };
  243. const timeFormat = vue.computed(() => {
  244. return props.timeFormat || utils.extractTimeFormat(props.format) || constants.DEFAULT_FORMATS_TIME;
  245. });
  246. const dateFormat = vue.computed(() => {
  247. return props.dateFormat || utils.extractDateFormat(props.format) || constants.DEFAULT_FORMATS_DATE;
  248. });
  249. const visibleTime = vue.computed(() => {
  250. if (userInputTime.value)
  251. return userInputTime.value;
  252. if (!props.parsedValue && !defaultValue.value)
  253. return;
  254. const dateValue = arrays.extractFirst(props.parsedValue) || innerDate.value;
  255. return dateValue.format(timeFormat.value);
  256. });
  257. const visibleDate = vue.computed(() => {
  258. if (userInputDate.value)
  259. return userInputDate.value;
  260. if (!props.parsedValue && !defaultValue.value)
  261. return;
  262. const dateValue = arrays.extractFirst(props.parsedValue) || innerDate.value;
  263. return dateValue.format(dateFormat.value);
  264. });
  265. const timePickerVisible = vue.ref(false);
  266. const onTimePickerInputFocus = () => {
  267. timePickerVisible.value = true;
  268. };
  269. const handleTimePickClose = () => {
  270. timePickerVisible.value = false;
  271. };
  272. const getUnits = (date) => {
  273. return {
  274. hour: date.hour(),
  275. minute: date.minute(),
  276. second: date.second(),
  277. year: date.year(),
  278. month: date.month(),
  279. date: date.date()
  280. };
  281. };
  282. const handleTimePick = (value, visible, first) => {
  283. const { hour, minute, second } = getUnits(value);
  284. const parsedDateValue = arrays.extractFirst(props.parsedValue);
  285. const newDate = parsedDateValue ? parsedDateValue.hour(hour).minute(minute).second(second) : value;
  286. innerDate.value = newDate;
  287. emit(innerDate.value, true);
  288. if (!first) {
  289. timePickerVisible.value = visible;
  290. }
  291. };
  292. const handleVisibleTimeChange = (value) => {
  293. const newDate = dayjs__default["default"](value, timeFormat.value).locale(lang.value);
  294. if (newDate.isValid() && checkDateWithinRange(newDate)) {
  295. const { year: year2, month: month2, date } = getUnits(innerDate.value);
  296. innerDate.value = newDate.year(year2).month(month2).date(date);
  297. userInputTime.value = null;
  298. timePickerVisible.value = false;
  299. emit(innerDate.value, true);
  300. }
  301. };
  302. const handleVisibleDateChange = (value) => {
  303. const newDate = utils$1.correctlyParseUserInput(value, dateFormat.value, lang.value, isDefaultFormat);
  304. if (newDate.isValid()) {
  305. if (disabledDate && disabledDate(newDate.toDate())) {
  306. return;
  307. }
  308. const { hour, minute, second } = getUnits(innerDate.value);
  309. innerDate.value = newDate.hour(hour).minute(minute).second(second);
  310. userInputDate.value = null;
  311. emit(innerDate.value, true);
  312. }
  313. };
  314. const isValidValue = (date) => {
  315. return dayjs__default["default"].isDayjs(date) && date.isValid() && (disabledDate ? !disabledDate(date.toDate()) : true);
  316. };
  317. const formatToString = (value) => {
  318. return shared.isArray(value) ? value.map((_) => _.format(props.format)) : value.format(props.format);
  319. };
  320. const parseUserInput = (value) => {
  321. return utils$1.correctlyParseUserInput(value, props.format, lang.value, isDefaultFormat);
  322. };
  323. const getDefaultValue = () => {
  324. const parseDate = dayjs__default["default"](defaultValue.value).locale(lang.value);
  325. if (!defaultValue.value) {
  326. const defaultTimeDValue = defaultTimeD.value;
  327. return dayjs__default["default"]().hour(defaultTimeDValue.hour()).minute(defaultTimeDValue.minute()).second(defaultTimeDValue.second()).locale(lang.value);
  328. }
  329. return parseDate;
  330. };
  331. const handleFocusPicker = () => {
  332. var _a;
  333. if (["week", "month", "year", "date"].includes(selectionMode.value)) {
  334. (_a = currentViewRef.value) == null ? void 0 : _a.focus();
  335. }
  336. };
  337. const _handleFocusPicker = () => {
  338. handleFocusPicker();
  339. if (selectionMode.value === "week") {
  340. handleKeyControl(aria.EVENT_CODE.down);
  341. }
  342. };
  343. const handleKeydownTable = (event) => {
  344. const { code } = event;
  345. const validCode = [
  346. aria.EVENT_CODE.up,
  347. aria.EVENT_CODE.down,
  348. aria.EVENT_CODE.left,
  349. aria.EVENT_CODE.right,
  350. aria.EVENT_CODE.home,
  351. aria.EVENT_CODE.end,
  352. aria.EVENT_CODE.pageUp,
  353. aria.EVENT_CODE.pageDown
  354. ];
  355. if (validCode.includes(code)) {
  356. handleKeyControl(code);
  357. event.stopPropagation();
  358. event.preventDefault();
  359. }
  360. if ([aria.EVENT_CODE.enter, aria.EVENT_CODE.space, aria.EVENT_CODE.numpadEnter].includes(code) && userInputDate.value === null && userInputTime.value === null) {
  361. event.preventDefault();
  362. emit(innerDate.value, false);
  363. }
  364. };
  365. const handleKeyControl = (code) => {
  366. var _a;
  367. const { up, down, left, right, home, end, pageUp, pageDown } = aria.EVENT_CODE;
  368. const mapping = {
  369. year: {
  370. [up]: -4,
  371. [down]: 4,
  372. [left]: -1,
  373. [right]: 1,
  374. offset: (date, step) => date.setFullYear(date.getFullYear() + step)
  375. },
  376. month: {
  377. [up]: -4,
  378. [down]: 4,
  379. [left]: -1,
  380. [right]: 1,
  381. offset: (date, step) => date.setMonth(date.getMonth() + step)
  382. },
  383. week: {
  384. [up]: -1,
  385. [down]: 1,
  386. [left]: -1,
  387. [right]: 1,
  388. offset: (date, step) => date.setDate(date.getDate() + step * 7)
  389. },
  390. date: {
  391. [up]: -7,
  392. [down]: 7,
  393. [left]: -1,
  394. [right]: 1,
  395. [home]: (date) => -date.getDay(),
  396. [end]: (date) => -date.getDay() + 6,
  397. [pageUp]: (date) => -new Date(date.getFullYear(), date.getMonth(), 0).getDate(),
  398. [pageDown]: (date) => new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate(),
  399. offset: (date, step) => date.setDate(date.getDate() + step)
  400. }
  401. };
  402. const newDate = innerDate.value.toDate();
  403. while (Math.abs(innerDate.value.diff(newDate, "year", true)) < 1) {
  404. const map = mapping[keyboardMode.value];
  405. if (!map)
  406. return;
  407. map.offset(newDate, shared.isFunction(map[code]) ? map[code](newDate) : (_a = map[code]) != null ? _a : 0);
  408. if (disabledDate && disabledDate(newDate)) {
  409. break;
  410. }
  411. const result = dayjs__default["default"](newDate).locale(lang.value);
  412. innerDate.value = result;
  413. contextEmit("pick", result, true);
  414. break;
  415. }
  416. };
  417. const handlePanelChange = (mode) => {
  418. contextEmit("panel-change", innerDate.value.toDate(), mode, currentView.value);
  419. };
  420. vue.watch(() => selectionMode.value, (val) => {
  421. if (["month", "year"].includes(val)) {
  422. currentView.value = val;
  423. return;
  424. } else if (val === "years") {
  425. currentView.value = "year";
  426. return;
  427. } else if (val === "months") {
  428. currentView.value = "month";
  429. return;
  430. }
  431. currentView.value = "date";
  432. }, { immediate: true });
  433. vue.watch(() => defaultValue.value, (val) => {
  434. if (val) {
  435. innerDate.value = getDefaultValue();
  436. }
  437. }, { immediate: true });
  438. vue.watch(() => props.parsedValue, (val) => {
  439. if (val) {
  440. if (isMultipleType.value)
  441. return;
  442. if (shared.isArray(val))
  443. return;
  444. innerDate.value = val;
  445. } else {
  446. innerDate.value = getDefaultValue();
  447. }
  448. }, { immediate: true });
  449. contextEmit("set-picker-option", ["isValidValue", isValidValue]);
  450. contextEmit("set-picker-option", ["formatToString", formatToString]);
  451. contextEmit("set-picker-option", ["parseUserInput", parseUserInput]);
  452. contextEmit("set-picker-option", ["handleFocusPicker", _handleFocusPicker]);
  453. return (_ctx, _cache) => {
  454. return vue.openBlock(), vue.createElementBlock("div", {
  455. class: vue.normalizeClass([
  456. vue.unref(ppNs).b(),
  457. vue.unref(dpNs).b(),
  458. vue.unref(ppNs).is("border", _ctx.border),
  459. vue.unref(ppNs).is("disabled", _ctx.disabled),
  460. {
  461. "has-sidebar": _ctx.$slots.sidebar || vue.unref(hasShortcuts),
  462. "has-time": vue.unref(showTime)
  463. }
  464. ])
  465. }, [
  466. vue.createElementVNode("div", {
  467. class: vue.normalizeClass(vue.unref(ppNs).e("body-wrapper"))
  468. }, [
  469. vue.renderSlot(_ctx.$slots, "sidebar", {
  470. class: vue.normalizeClass(vue.unref(ppNs).e("sidebar"))
  471. }),
  472. vue.unref(hasShortcuts) ? (vue.openBlock(), vue.createElementBlock("div", {
  473. key: 0,
  474. class: vue.normalizeClass(vue.unref(ppNs).e("sidebar"))
  475. }, [
  476. (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(shortcuts), (shortcut, key) => {
  477. return vue.openBlock(), vue.createElementBlock("button", {
  478. key,
  479. type: "button",
  480. disabled: _ctx.disabled,
  481. class: vue.normalizeClass(vue.unref(ppNs).e("shortcut")),
  482. onClick: ($event) => handleShortcutClick(shortcut)
  483. }, vue.toDisplayString(shortcut.text), 11, ["disabled", "onClick"]);
  484. }), 128))
  485. ], 2)) : vue.createCommentVNode("v-if", true),
  486. vue.createElementVNode("div", {
  487. class: vue.normalizeClass(vue.unref(ppNs).e("body"))
  488. }, [
  489. vue.unref(showTime) ? (vue.openBlock(), vue.createElementBlock("div", {
  490. key: 0,
  491. class: vue.normalizeClass(vue.unref(dpNs).e("time-header"))
  492. }, [
  493. vue.createElementVNode("span", {
  494. class: vue.normalizeClass(vue.unref(dpNs).e("editor-wrap"))
  495. }, [
  496. vue.createVNode(vue.unref(index$2.ElInput), {
  497. placeholder: vue.unref(t)("el.datepicker.selectDate"),
  498. "model-value": vue.unref(visibleDate),
  499. size: "small",
  500. "validate-event": false,
  501. disabled: _ctx.disabled,
  502. onInput: (val) => userInputDate.value = val,
  503. onChange: handleVisibleDateChange
  504. }, null, 8, ["placeholder", "model-value", "disabled", "onInput"])
  505. ], 2),
  506. vue.withDirectives((vue.openBlock(), vue.createElementBlock("span", {
  507. class: vue.normalizeClass(vue.unref(dpNs).e("editor-wrap"))
  508. }, [
  509. vue.createVNode(vue.unref(index$2.ElInput), {
  510. placeholder: vue.unref(t)("el.datepicker.selectTime"),
  511. "model-value": vue.unref(visibleTime),
  512. size: "small",
  513. "validate-event": false,
  514. disabled: _ctx.disabled,
  515. onFocus: onTimePickerInputFocus,
  516. onInput: (val) => userInputTime.value = val,
  517. onChange: handleVisibleTimeChange
  518. }, null, 8, ["placeholder", "model-value", "disabled", "onInput"]),
  519. vue.createVNode(vue.unref(panelTimePick["default"]), {
  520. visible: timePickerVisible.value,
  521. format: vue.unref(timeFormat),
  522. "parsed-value": innerDate.value,
  523. onPick: handleTimePick
  524. }, null, 8, ["visible", "format", "parsed-value"])
  525. ], 2)), [
  526. [vue.unref(index$3["default"]), handleTimePickClose]
  527. ])
  528. ], 2)) : vue.createCommentVNode("v-if", true),
  529. vue.withDirectives(vue.createElementVNode("div", {
  530. class: vue.normalizeClass([
  531. vue.unref(dpNs).e("header"),
  532. (currentView.value === "year" || currentView.value === "month") && vue.unref(dpNs).e("header--bordered")
  533. ])
  534. }, [
  535. vue.createElementVNode("span", {
  536. class: vue.normalizeClass(vue.unref(dpNs).e("prev-btn"))
  537. }, [
  538. vue.createElementVNode("button", {
  539. type: "button",
  540. "aria-label": vue.unref(t)(`el.datepicker.prevYear`),
  541. class: vue.normalizeClass(["d-arrow-left", vue.unref(ppNs).e("icon-btn")]),
  542. disabled: _ctx.disabled,
  543. onClick: ($event) => moveByYear(false)
  544. }, [
  545. vue.renderSlot(_ctx.$slots, "prev-year", {}, () => [
  546. vue.createVNode(vue.unref(index$4.ElIcon), null, {
  547. default: vue.withCtx(() => [
  548. vue.createVNode(vue.unref(iconsVue.DArrowLeft))
  549. ]),
  550. _: 1
  551. })
  552. ])
  553. ], 10, ["aria-label", "disabled", "onClick"]),
  554. vue.withDirectives(vue.createElementVNode("button", {
  555. type: "button",
  556. "aria-label": vue.unref(t)(`el.datepicker.prevMonth`),
  557. class: vue.normalizeClass([vue.unref(ppNs).e("icon-btn"), "arrow-left"]),
  558. disabled: _ctx.disabled,
  559. onClick: ($event) => moveByMonth(false)
  560. }, [
  561. vue.renderSlot(_ctx.$slots, "prev-month", {}, () => [
  562. vue.createVNode(vue.unref(index$4.ElIcon), null, {
  563. default: vue.withCtx(() => [
  564. vue.createVNode(vue.unref(iconsVue.ArrowLeft))
  565. ]),
  566. _: 1
  567. })
  568. ])
  569. ], 10, ["aria-label", "disabled", "onClick"]), [
  570. [vue.vShow, currentView.value === "date"]
  571. ])
  572. ], 2),
  573. vue.createElementVNode("span", {
  574. role: "button",
  575. class: vue.normalizeClass(vue.unref(dpNs).e("header-label")),
  576. "aria-live": "polite",
  577. tabindex: "0",
  578. onKeydown: vue.withKeys(($event) => showPicker("year"), ["enter"]),
  579. onClick: ($event) => showPicker("year")
  580. }, vue.toDisplayString(vue.unref(yearLabel)), 43, ["onKeydown", "onClick"]),
  581. vue.withDirectives(vue.createElementVNode("span", {
  582. role: "button",
  583. "aria-live": "polite",
  584. tabindex: "0",
  585. class: vue.normalizeClass([
  586. vue.unref(dpNs).e("header-label"),
  587. { active: currentView.value === "month" }
  588. ]),
  589. onKeydown: vue.withKeys(($event) => showPicker("month"), ["enter"]),
  590. onClick: ($event) => showPicker("month")
  591. }, vue.toDisplayString(vue.unref(t)(`el.datepicker.month${vue.unref(month) + 1}`)), 43, ["onKeydown", "onClick"]), [
  592. [vue.vShow, currentView.value === "date"]
  593. ]),
  594. vue.createElementVNode("span", {
  595. class: vue.normalizeClass(vue.unref(dpNs).e("next-btn"))
  596. }, [
  597. vue.withDirectives(vue.createElementVNode("button", {
  598. type: "button",
  599. "aria-label": vue.unref(t)(`el.datepicker.nextMonth`),
  600. class: vue.normalizeClass([vue.unref(ppNs).e("icon-btn"), "arrow-right"]),
  601. disabled: _ctx.disabled,
  602. onClick: ($event) => moveByMonth(true)
  603. }, [
  604. vue.renderSlot(_ctx.$slots, "next-month", {}, () => [
  605. vue.createVNode(vue.unref(index$4.ElIcon), null, {
  606. default: vue.withCtx(() => [
  607. vue.createVNode(vue.unref(iconsVue.ArrowRight))
  608. ]),
  609. _: 1
  610. })
  611. ])
  612. ], 10, ["aria-label", "disabled", "onClick"]), [
  613. [vue.vShow, currentView.value === "date"]
  614. ]),
  615. vue.createElementVNode("button", {
  616. type: "button",
  617. "aria-label": vue.unref(t)(`el.datepicker.nextYear`),
  618. class: vue.normalizeClass([vue.unref(ppNs).e("icon-btn"), "d-arrow-right"]),
  619. disabled: _ctx.disabled,
  620. onClick: ($event) => moveByYear(true)
  621. }, [
  622. vue.renderSlot(_ctx.$slots, "next-year", {}, () => [
  623. vue.createVNode(vue.unref(index$4.ElIcon), null, {
  624. default: vue.withCtx(() => [
  625. vue.createVNode(vue.unref(iconsVue.DArrowRight))
  626. ]),
  627. _: 1
  628. })
  629. ])
  630. ], 10, ["aria-label", "disabled", "onClick"])
  631. ], 2)
  632. ], 2), [
  633. [vue.vShow, currentView.value !== "time"]
  634. ]),
  635. vue.createElementVNode("div", {
  636. class: vue.normalizeClass(vue.unref(ppNs).e("content")),
  637. onKeydown: handleKeydownTable
  638. }, [
  639. currentView.value === "date" ? (vue.openBlock(), vue.createBlock(basicDateTable["default"], {
  640. key: 0,
  641. ref_key: "currentViewRef",
  642. ref: currentViewRef,
  643. "selection-mode": vue.unref(selectionMode),
  644. date: innerDate.value,
  645. "parsed-value": _ctx.parsedValue,
  646. "disabled-date": vue.unref(disabledDate),
  647. disabled: _ctx.disabled,
  648. "cell-class-name": vue.unref(cellClassName),
  649. "show-week-number": _ctx.showWeekNumber,
  650. onPick: handleDatePick
  651. }, null, 8, ["selection-mode", "date", "parsed-value", "disabled-date", "disabled", "cell-class-name", "show-week-number"])) : vue.createCommentVNode("v-if", true),
  652. currentView.value === "year" ? (vue.openBlock(), vue.createBlock(basicYearTable["default"], {
  653. key: 1,
  654. ref_key: "currentViewRef",
  655. ref: currentViewRef,
  656. "selection-mode": vue.unref(selectionMode),
  657. date: innerDate.value,
  658. "disabled-date": vue.unref(disabledDate),
  659. disabled: _ctx.disabled,
  660. "parsed-value": _ctx.parsedValue,
  661. "cell-class-name": vue.unref(cellClassName),
  662. onPick: handleYearPick
  663. }, null, 8, ["selection-mode", "date", "disabled-date", "disabled", "parsed-value", "cell-class-name"])) : vue.createCommentVNode("v-if", true),
  664. currentView.value === "month" ? (vue.openBlock(), vue.createBlock(basicMonthTable["default"], {
  665. key: 2,
  666. ref_key: "currentViewRef",
  667. ref: currentViewRef,
  668. "selection-mode": vue.unref(selectionMode),
  669. date: innerDate.value,
  670. "parsed-value": _ctx.parsedValue,
  671. "disabled-date": vue.unref(disabledDate),
  672. disabled: _ctx.disabled,
  673. "cell-class-name": vue.unref(cellClassName),
  674. onPick: handleMonthPick
  675. }, null, 8, ["selection-mode", "date", "parsed-value", "disabled-date", "disabled", "cell-class-name"])) : vue.createCommentVNode("v-if", true)
  676. ], 34)
  677. ], 2)
  678. ], 2),
  679. _ctx.showFooter && vue.unref(footerVisible) && vue.unref(footerFilled) ? (vue.openBlock(), vue.createElementBlock("div", {
  680. key: 0,
  681. class: vue.normalizeClass(vue.unref(ppNs).e("footer"))
  682. }, [
  683. vue.withDirectives(vue.createVNode(vue.unref(index$5.ElButton), {
  684. text: "",
  685. size: "small",
  686. class: vue.normalizeClass(vue.unref(ppNs).e("link-btn")),
  687. disabled: vue.unref(disabledNow),
  688. onClick: changeToNow
  689. }, {
  690. default: vue.withCtx(() => [
  691. vue.createTextVNode(vue.toDisplayString(vue.unref(t)("el.datepicker.now")), 1)
  692. ]),
  693. _: 1
  694. }, 8, ["class", "disabled"]), [
  695. [vue.vShow, !vue.unref(isMultipleType) && _ctx.showNow]
  696. ]),
  697. _ctx.showConfirm ? (vue.openBlock(), vue.createBlock(vue.unref(index$5.ElButton), {
  698. key: 0,
  699. plain: "",
  700. size: "small",
  701. class: vue.normalizeClass(vue.unref(ppNs).e("link-btn")),
  702. disabled: vue.unref(disabledConfirm),
  703. onClick: onConfirm
  704. }, {
  705. default: vue.withCtx(() => [
  706. vue.createTextVNode(vue.toDisplayString(vue.unref(t)("el.datepicker.confirm")), 1)
  707. ]),
  708. _: 1
  709. }, 8, ["class", "disabled"])) : vue.createCommentVNode("v-if", true)
  710. ], 2)) : vue.createCommentVNode("v-if", true)
  711. ], 2);
  712. };
  713. }
  714. });
  715. var DatePickPanel = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "panel-date-pick.vue"]]);
  716. exports["default"] = DatePickPanel;
  717. //# sourceMappingURL=panel-date-pick.js.map