aaa70b3cf1137d12057b452c3a05275f9a4ec91f5c4ffd0dd4fdc893aa46b00857ee4c727bcc9c4bd2cf5dc21188b8194645e6cb9a84b15f51a1af437a1382 7.7 KB

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