0ef51892feb4a28185c036e6727d681185a78fa49b12889af4c1a25f43b3b70ef3d53016df064484bd96dad8f698a8ed585fdcc61d3fe41ae7bace48266e72 7.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185
  1. import { defineComponent, inject, ref, computed, openBlock, createBlock, Transition, unref, withCtx, createElementBlock, normalizeClass, createElementVNode, createVNode, toDisplayString, createCommentVNode } from 'vue';
  2. import dayjs from 'dayjs';
  3. import { PICKER_BASE_INJECTION_KEY } from '../constants.mjs';
  4. import { panelTimePickerProps } from '../props/panel-time-picker.mjs';
  5. import { useTimePanel } from '../composables/use-time-panel.mjs';
  6. import { useOldValue, buildAvailableTimeSlotGetter } from '../composables/use-time-picker.mjs';
  7. import TimeSpinner from './basic-time-spinner.mjs';
  8. import _export_sfc from '../../../../_virtual/plugin-vue_export-helper.mjs';
  9. import { useNamespace } from '../../../../hooks/use-namespace/index.mjs';
  10. import { useLocale } from '../../../../hooks/use-locale/index.mjs';
  11. import { isUndefined } from '../../../../utils/types.mjs';
  12. import { EVENT_CODE } from '../../../../constants/aria.mjs';
  13. const _sfc_main = /* @__PURE__ */ defineComponent({
  14. __name: "panel-time-pick",
  15. props: panelTimePickerProps,
  16. emits: ["pick", "select-range", "set-picker-option"],
  17. setup(__props, { emit }) {
  18. const props = __props;
  19. const pickerBase = inject(PICKER_BASE_INJECTION_KEY);
  20. const {
  21. arrowControl,
  22. disabledHours,
  23. disabledMinutes,
  24. disabledSeconds,
  25. defaultValue
  26. } = pickerBase.props;
  27. const { getAvailableHours, getAvailableMinutes, getAvailableSeconds } = buildAvailableTimeSlotGetter(disabledHours, disabledMinutes, disabledSeconds);
  28. const ns = useNamespace("time");
  29. const { t, lang } = useLocale();
  30. const selectionRange = ref([0, 2]);
  31. const oldValue = useOldValue(props);
  32. const transitionName = computed(() => {
  33. return isUndefined(props.actualVisible) ? `${ns.namespace.value}-zoom-in-top` : "";
  34. });
  35. const showSeconds = computed(() => {
  36. return props.format.includes("ss");
  37. });
  38. const amPmMode = computed(() => {
  39. if (props.format.includes("A"))
  40. return "A";
  41. if (props.format.includes("a"))
  42. return "a";
  43. return "";
  44. });
  45. const isValidValue = (_date) => {
  46. const parsedDate = dayjs(_date).locale(lang.value);
  47. const result = getRangeAvailableTime(parsedDate);
  48. return parsedDate.isSame(result);
  49. };
  50. const handleCancel = () => {
  51. emit("pick", oldValue.value, false);
  52. };
  53. const handleConfirm = (visible = false, first = false) => {
  54. if (first)
  55. return;
  56. emit("pick", props.parsedValue, visible);
  57. };
  58. const handleChange = (_date) => {
  59. if (!props.visible) {
  60. return;
  61. }
  62. const result = getRangeAvailableTime(_date).millisecond(0);
  63. emit("pick", result, true);
  64. };
  65. const setSelectionRange = (start, end) => {
  66. emit("select-range", start, end);
  67. selectionRange.value = [start, end];
  68. };
  69. const changeSelectionRange = (step) => {
  70. const actualFormat = props.format;
  71. const hourIndex = actualFormat.indexOf("HH");
  72. const minuteIndex = actualFormat.indexOf("mm");
  73. const secondIndex = actualFormat.indexOf("ss");
  74. const list = [];
  75. const mapping = [];
  76. if (hourIndex !== -1) {
  77. list.push(hourIndex);
  78. mapping.push("hours");
  79. }
  80. if (minuteIndex !== -1) {
  81. list.push(minuteIndex);
  82. mapping.push("minutes");
  83. }
  84. if (secondIndex !== -1 && showSeconds.value) {
  85. list.push(secondIndex);
  86. mapping.push("seconds");
  87. }
  88. const index = list.indexOf(selectionRange.value[0]);
  89. const next = (index + step + list.length) % list.length;
  90. timePickerOptions["start_emitSelectRange"](mapping[next]);
  91. };
  92. const handleKeydown = (event) => {
  93. const code = event.code;
  94. const { left, right, up, down } = EVENT_CODE;
  95. if ([left, right].includes(code)) {
  96. const step = code === left ? -1 : 1;
  97. changeSelectionRange(step);
  98. event.preventDefault();
  99. return;
  100. }
  101. if ([up, down].includes(code)) {
  102. const step = code === up ? -1 : 1;
  103. timePickerOptions["start_scrollDown"](step);
  104. event.preventDefault();
  105. return;
  106. }
  107. };
  108. const { timePickerOptions, onSetOption, getAvailableTime } = useTimePanel({
  109. getAvailableHours,
  110. getAvailableMinutes,
  111. getAvailableSeconds
  112. });
  113. const getRangeAvailableTime = (date) => {
  114. return getAvailableTime(date, props.datetimeRole || "", true);
  115. };
  116. const parseUserInput = (value) => {
  117. if (!value)
  118. return null;
  119. return dayjs(value, props.format).locale(lang.value);
  120. };
  121. const formatToString = (value) => {
  122. if (!value)
  123. return null;
  124. return value.format(props.format);
  125. };
  126. const getDefaultValue = () => {
  127. return dayjs(defaultValue).locale(lang.value);
  128. };
  129. emit("set-picker-option", ["isValidValue", isValidValue]);
  130. emit("set-picker-option", ["formatToString", formatToString]);
  131. emit("set-picker-option", ["parseUserInput", parseUserInput]);
  132. emit("set-picker-option", ["handleKeydownInput", handleKeydown]);
  133. emit("set-picker-option", ["getRangeAvailableTime", getRangeAvailableTime]);
  134. emit("set-picker-option", ["getDefaultValue", getDefaultValue]);
  135. return (_ctx, _cache) => {
  136. return openBlock(), createBlock(Transition, { name: unref(transitionName) }, {
  137. default: withCtx(() => [
  138. _ctx.actualVisible || _ctx.visible ? (openBlock(), createElementBlock("div", {
  139. key: 0,
  140. class: normalizeClass(unref(ns).b("panel"))
  141. }, [
  142. createElementVNode("div", {
  143. class: normalizeClass([unref(ns).be("panel", "content"), { "has-seconds": unref(showSeconds) }])
  144. }, [
  145. createVNode(TimeSpinner, {
  146. ref: "spinner",
  147. role: _ctx.datetimeRole || "start",
  148. "arrow-control": unref(arrowControl),
  149. "show-seconds": unref(showSeconds),
  150. "am-pm-mode": unref(amPmMode),
  151. "spinner-date": _ctx.parsedValue,
  152. "disabled-hours": unref(disabledHours),
  153. "disabled-minutes": unref(disabledMinutes),
  154. "disabled-seconds": unref(disabledSeconds),
  155. onChange: handleChange,
  156. onSetOption: unref(onSetOption),
  157. onSelectRange: setSelectionRange
  158. }, null, 8, ["role", "arrow-control", "show-seconds", "am-pm-mode", "spinner-date", "disabled-hours", "disabled-minutes", "disabled-seconds", "onSetOption"])
  159. ], 2),
  160. createElementVNode("div", {
  161. class: normalizeClass(unref(ns).be("panel", "footer"))
  162. }, [
  163. createElementVNode("button", {
  164. type: "button",
  165. class: normalizeClass([unref(ns).be("panel", "btn"), "cancel"]),
  166. onClick: handleCancel
  167. }, toDisplayString(unref(t)("el.datepicker.cancel")), 3),
  168. createElementVNode("button", {
  169. type: "button",
  170. class: normalizeClass([unref(ns).be("panel", "btn"), "confirm"]),
  171. onClick: ($event) => handleConfirm()
  172. }, toDisplayString(unref(t)("el.datepicker.confirm")), 11, ["onClick"])
  173. ], 2)
  174. ], 2)) : createCommentVNode("v-if", true)
  175. ]),
  176. _: 1
  177. }, 8, ["name"]);
  178. };
  179. }
  180. });
  181. var TimePickPanel = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "panel-time-pick.vue"]]);
  182. export { TimePickPanel as default };
  183. //# sourceMappingURL=panel-time-pick.mjs.map