a9bf46da5ef97ed7bd5f4fe29b05c7db16eb8bc106b0e0ff2de219020d4d588a6cbccb07c8cb225aa1f2191acbe0a22dfcecd4d5ca38fb78d373f38c22be20 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297
  1. 'use strict';
  2. Object.defineProperty(exports, '__esModule', { value: true });
  3. var vue = require('vue');
  4. var dayjs = require('dayjs');
  5. var lodashUnified = require('lodash-unified');
  6. var constants = require('../constants.js');
  7. var panelTimeRange = require('../props/panel-time-range.js');
  8. var useTimePanel = require('../composables/use-time-panel.js');
  9. var useTimePicker = require('../composables/use-time-picker.js');
  10. var basicTimeSpinner = require('./basic-time-spinner.js');
  11. var pluginVue_exportHelper = require('../../../../_virtual/plugin-vue_export-helper.js');
  12. var index = require('../../../../hooks/use-locale/index.js');
  13. var index$1 = require('../../../../hooks/use-namespace/index.js');
  14. var shared = require('@vue/shared');
  15. var aria = require('../../../../constants/aria.js');
  16. function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
  17. var dayjs__default = /*#__PURE__*/_interopDefaultLegacy(dayjs);
  18. const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  19. __name: "panel-time-range",
  20. props: panelTimeRange.panelTimeRangeProps,
  21. emits: ["pick", "select-range", "set-picker-option"],
  22. setup(__props, { emit }) {
  23. const props = __props;
  24. const makeSelectRange = (start, end) => {
  25. const result = [];
  26. for (let i = start; i <= end; i++) {
  27. result.push(i);
  28. }
  29. return result;
  30. };
  31. const { t, lang } = index.useLocale();
  32. const nsTime = index$1.useNamespace("time");
  33. const nsPicker = index$1.useNamespace("picker");
  34. const pickerBase = vue.inject(constants.PICKER_BASE_INJECTION_KEY);
  35. const {
  36. arrowControl,
  37. disabledHours,
  38. disabledMinutes,
  39. disabledSeconds,
  40. defaultValue
  41. } = pickerBase.props;
  42. const startContainerKls = vue.computed(() => [
  43. nsTime.be("range-picker", "body"),
  44. nsTime.be("panel", "content"),
  45. nsTime.is("arrow", arrowControl),
  46. showSeconds.value ? "has-seconds" : ""
  47. ]);
  48. const endContainerKls = vue.computed(() => [
  49. nsTime.be("range-picker", "body"),
  50. nsTime.be("panel", "content"),
  51. nsTime.is("arrow", arrowControl),
  52. showSeconds.value ? "has-seconds" : ""
  53. ]);
  54. const startTime = vue.computed(() => props.parsedValue[0]);
  55. const endTime = vue.computed(() => props.parsedValue[1]);
  56. const oldValue = useTimePicker.useOldValue(props);
  57. const handleCancel = () => {
  58. emit("pick", oldValue.value, false);
  59. };
  60. const showSeconds = vue.computed(() => {
  61. return props.format.includes("ss");
  62. });
  63. const amPmMode = vue.computed(() => {
  64. if (props.format.includes("A"))
  65. return "A";
  66. if (props.format.includes("a"))
  67. return "a";
  68. return "";
  69. });
  70. const handleConfirm = (visible = false) => {
  71. emit("pick", [startTime.value, endTime.value], visible);
  72. };
  73. const handleMinChange = (date) => {
  74. handleChange(date.millisecond(0), endTime.value);
  75. };
  76. const handleMaxChange = (date) => {
  77. handleChange(startTime.value, date.millisecond(0));
  78. };
  79. const isValidValue = (_date) => {
  80. const parsedDate = _date.map((_) => dayjs__default["default"](_).locale(lang.value));
  81. const result = getRangeAvailableTime(parsedDate);
  82. return parsedDate[0].isSame(result[0]) && parsedDate[1].isSame(result[1]);
  83. };
  84. const handleChange = (start, end) => {
  85. if (!props.visible) {
  86. return;
  87. }
  88. emit("pick", [start, end], true);
  89. };
  90. const btnConfirmDisabled = vue.computed(() => {
  91. return startTime.value > endTime.value;
  92. });
  93. const selectionRange = vue.ref([0, 2]);
  94. const setMinSelectionRange = (start, end) => {
  95. emit("select-range", start, end, "min");
  96. selectionRange.value = [start, end];
  97. };
  98. const offset = vue.computed(() => showSeconds.value ? 11 : 8);
  99. const setMaxSelectionRange = (start, end) => {
  100. emit("select-range", start, end, "max");
  101. const _offset = vue.unref(offset);
  102. selectionRange.value = [start + _offset, end + _offset];
  103. };
  104. const changeSelectionRange = (step) => {
  105. const list = showSeconds.value ? [0, 3, 6, 11, 14, 17] : [0, 3, 8, 11];
  106. const mapping = ["hours", "minutes"].concat(showSeconds.value ? ["seconds"] : []);
  107. const index = list.indexOf(selectionRange.value[0]);
  108. const next = (index + step + list.length) % list.length;
  109. const half = list.length / 2;
  110. if (next < half) {
  111. timePickerOptions["start_emitSelectRange"](mapping[next]);
  112. } else {
  113. timePickerOptions["end_emitSelectRange"](mapping[next - half]);
  114. }
  115. };
  116. const handleKeydown = (event) => {
  117. const code = event.code;
  118. const { left, right, up, down } = aria.EVENT_CODE;
  119. if ([left, right].includes(code)) {
  120. const step = code === left ? -1 : 1;
  121. changeSelectionRange(step);
  122. event.preventDefault();
  123. return;
  124. }
  125. if ([up, down].includes(code)) {
  126. const step = code === up ? -1 : 1;
  127. const role = selectionRange.value[0] < offset.value ? "start" : "end";
  128. timePickerOptions[`${role}_scrollDown`](step);
  129. event.preventDefault();
  130. return;
  131. }
  132. };
  133. const disabledHours_ = (role, compare) => {
  134. const defaultDisable = disabledHours ? disabledHours(role) : [];
  135. const isStart = role === "start";
  136. const compareDate = compare || (isStart ? endTime.value : startTime.value);
  137. const compareHour = compareDate.hour();
  138. const nextDisable = isStart ? makeSelectRange(compareHour + 1, 23) : makeSelectRange(0, compareHour - 1);
  139. return lodashUnified.union(defaultDisable, nextDisable);
  140. };
  141. const disabledMinutes_ = (hour, role, compare) => {
  142. const defaultDisable = disabledMinutes ? disabledMinutes(hour, role) : [];
  143. const isStart = role === "start";
  144. const compareDate = compare || (isStart ? endTime.value : startTime.value);
  145. const compareHour = compareDate.hour();
  146. if (hour !== compareHour) {
  147. return defaultDisable;
  148. }
  149. const compareMinute = compareDate.minute();
  150. const nextDisable = isStart ? makeSelectRange(compareMinute + 1, 59) : makeSelectRange(0, compareMinute - 1);
  151. return lodashUnified.union(defaultDisable, nextDisable);
  152. };
  153. const disabledSeconds_ = (hour, minute, role, compare) => {
  154. const defaultDisable = disabledSeconds ? disabledSeconds(hour, minute, role) : [];
  155. const isStart = role === "start";
  156. const compareDate = compare || (isStart ? endTime.value : startTime.value);
  157. const compareHour = compareDate.hour();
  158. const compareMinute = compareDate.minute();
  159. if (hour !== compareHour || minute !== compareMinute) {
  160. return defaultDisable;
  161. }
  162. const compareSecond = compareDate.second();
  163. const nextDisable = isStart ? makeSelectRange(compareSecond + 1, 59) : makeSelectRange(0, compareSecond - 1);
  164. return lodashUnified.union(defaultDisable, nextDisable);
  165. };
  166. const getRangeAvailableTime = ([start, end]) => {
  167. return [
  168. getAvailableTime(start, "start", true, end),
  169. getAvailableTime(end, "end", false, start)
  170. ];
  171. };
  172. const { getAvailableHours, getAvailableMinutes, getAvailableSeconds } = useTimePicker.buildAvailableTimeSlotGetter(disabledHours_, disabledMinutes_, disabledSeconds_);
  173. const {
  174. timePickerOptions,
  175. getAvailableTime,
  176. onSetOption
  177. } = useTimePanel.useTimePanel({
  178. getAvailableHours,
  179. getAvailableMinutes,
  180. getAvailableSeconds
  181. });
  182. const parseUserInput = (days) => {
  183. if (!days)
  184. return null;
  185. if (shared.isArray(days)) {
  186. return days.map((d) => dayjs__default["default"](d, props.format).locale(lang.value));
  187. }
  188. return dayjs__default["default"](days, props.format).locale(lang.value);
  189. };
  190. const formatToString = (days) => {
  191. if (!days)
  192. return null;
  193. if (shared.isArray(days)) {
  194. return days.map((d) => d.format(props.format));
  195. }
  196. return days.format(props.format);
  197. };
  198. const getDefaultValue = () => {
  199. if (shared.isArray(defaultValue)) {
  200. return defaultValue.map((d) => dayjs__default["default"](d).locale(lang.value));
  201. }
  202. const defaultDay = dayjs__default["default"](defaultValue).locale(lang.value);
  203. return [defaultDay, defaultDay.add(60, "m")];
  204. };
  205. emit("set-picker-option", ["formatToString", formatToString]);
  206. emit("set-picker-option", ["parseUserInput", parseUserInput]);
  207. emit("set-picker-option", ["isValidValue", isValidValue]);
  208. emit("set-picker-option", ["handleKeydownInput", handleKeydown]);
  209. emit("set-picker-option", ["getDefaultValue", getDefaultValue]);
  210. emit("set-picker-option", ["getRangeAvailableTime", getRangeAvailableTime]);
  211. return (_ctx, _cache) => {
  212. return _ctx.actualVisible ? (vue.openBlock(), vue.createElementBlock("div", {
  213. key: 0,
  214. class: vue.normalizeClass([vue.unref(nsTime).b("range-picker"), vue.unref(nsPicker).b("panel")])
  215. }, [
  216. vue.createElementVNode("div", {
  217. class: vue.normalizeClass(vue.unref(nsTime).be("range-picker", "content"))
  218. }, [
  219. vue.createElementVNode("div", {
  220. class: vue.normalizeClass(vue.unref(nsTime).be("range-picker", "cell"))
  221. }, [
  222. vue.createElementVNode("div", {
  223. class: vue.normalizeClass(vue.unref(nsTime).be("range-picker", "header"))
  224. }, vue.toDisplayString(vue.unref(t)("el.datepicker.startTime")), 3),
  225. vue.createElementVNode("div", {
  226. class: vue.normalizeClass(vue.unref(startContainerKls))
  227. }, [
  228. vue.createVNode(basicTimeSpinner["default"], {
  229. ref: "minSpinner",
  230. role: "start",
  231. "show-seconds": vue.unref(showSeconds),
  232. "am-pm-mode": vue.unref(amPmMode),
  233. "arrow-control": vue.unref(arrowControl),
  234. "spinner-date": vue.unref(startTime),
  235. "disabled-hours": disabledHours_,
  236. "disabled-minutes": disabledMinutes_,
  237. "disabled-seconds": disabledSeconds_,
  238. onChange: handleMinChange,
  239. onSetOption: vue.unref(onSetOption),
  240. onSelectRange: setMinSelectionRange
  241. }, null, 8, ["show-seconds", "am-pm-mode", "arrow-control", "spinner-date", "onSetOption"])
  242. ], 2)
  243. ], 2),
  244. vue.createElementVNode("div", {
  245. class: vue.normalizeClass(vue.unref(nsTime).be("range-picker", "cell"))
  246. }, [
  247. vue.createElementVNode("div", {
  248. class: vue.normalizeClass(vue.unref(nsTime).be("range-picker", "header"))
  249. }, vue.toDisplayString(vue.unref(t)("el.datepicker.endTime")), 3),
  250. vue.createElementVNode("div", {
  251. class: vue.normalizeClass(vue.unref(endContainerKls))
  252. }, [
  253. vue.createVNode(basicTimeSpinner["default"], {
  254. ref: "maxSpinner",
  255. role: "end",
  256. "show-seconds": vue.unref(showSeconds),
  257. "am-pm-mode": vue.unref(amPmMode),
  258. "arrow-control": vue.unref(arrowControl),
  259. "spinner-date": vue.unref(endTime),
  260. "disabled-hours": disabledHours_,
  261. "disabled-minutes": disabledMinutes_,
  262. "disabled-seconds": disabledSeconds_,
  263. onChange: handleMaxChange,
  264. onSetOption: vue.unref(onSetOption),
  265. onSelectRange: setMaxSelectionRange
  266. }, null, 8, ["show-seconds", "am-pm-mode", "arrow-control", "spinner-date", "onSetOption"])
  267. ], 2)
  268. ], 2)
  269. ], 2),
  270. vue.createElementVNode("div", {
  271. class: vue.normalizeClass(vue.unref(nsTime).be("panel", "footer"))
  272. }, [
  273. vue.createElementVNode("button", {
  274. type: "button",
  275. class: vue.normalizeClass([vue.unref(nsTime).be("panel", "btn"), "cancel"]),
  276. onClick: ($event) => handleCancel()
  277. }, vue.toDisplayString(vue.unref(t)("el.datepicker.cancel")), 11, ["onClick"]),
  278. vue.createElementVNode("button", {
  279. type: "button",
  280. class: vue.normalizeClass([vue.unref(nsTime).be("panel", "btn"), "confirm"]),
  281. disabled: vue.unref(btnConfirmDisabled),
  282. onClick: ($event) => handleConfirm()
  283. }, vue.toDisplayString(vue.unref(t)("el.datepicker.confirm")), 11, ["disabled", "onClick"])
  284. ], 2)
  285. ], 2)) : vue.createCommentVNode("v-if", true);
  286. };
  287. }
  288. });
  289. var TimeRangePanel = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "panel-time-range.vue"]]);
  290. exports["default"] = TimeRangePanel;
  291. //# sourceMappingURL=panel-time-range.js.map