TimePicker.js 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
  1. var __defProp = Object.defineProperty;
  2. var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
  3. var __getOwnPropNames = Object.getOwnPropertyNames;
  4. var __hasOwnProp = Object.prototype.hasOwnProperty;
  5. var __export = (target, all) => {
  6. for (var name2 in all)
  7. __defProp(target, name2, { get: all[name2], enumerable: true });
  8. };
  9. var __copyProps = (to, from, except, desc) => {
  10. if (from && typeof from === "object" || typeof from === "function") {
  11. for (let key of __getOwnPropNames(from))
  12. if (!__hasOwnProp.call(to, key) && key !== except)
  13. __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  14. }
  15. return to;
  16. };
  17. var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
  18. var stdin_exports = {};
  19. __export(stdin_exports, {
  20. default: () => stdin_default
  21. });
  22. module.exports = __toCommonJS(stdin_exports);
  23. var import_vue = require("vue");
  24. var import_vue2 = require("vue");
  25. var import_utils = require("../utils");
  26. var import_utils2 = require("./utils");
  27. var import_use_expose = require("../composables/use-expose");
  28. var import_picker = require("../picker");
  29. const [name] = (0, import_utils.createNamespace)("time-picker");
  30. var stdin_default = (0, import_vue2.defineComponent)({
  31. name,
  32. props: (0, import_utils.extend)({}, import_utils2.sharedProps, {
  33. minHour: (0, import_utils.makeNumericProp)(0),
  34. maxHour: (0, import_utils.makeNumericProp)(23),
  35. minMinute: (0, import_utils.makeNumericProp)(0),
  36. maxMinute: (0, import_utils.makeNumericProp)(59),
  37. modelValue: String
  38. }),
  39. emits: ["confirm", "cancel", "change", "update:modelValue"],
  40. setup(props, {
  41. emit,
  42. slots
  43. }) {
  44. const formatValue = (value) => {
  45. const {
  46. minHour,
  47. maxHour,
  48. maxMinute,
  49. minMinute
  50. } = props;
  51. if (!value) {
  52. value = `${(0, import_utils.padZero)(minHour)}:${(0, import_utils.padZero)(minMinute)}`;
  53. }
  54. let [hour, minute] = value.split(":");
  55. hour = (0, import_utils.padZero)((0, import_utils.clamp)(+hour, +minHour, +maxHour));
  56. minute = (0, import_utils.padZero)((0, import_utils.clamp)(+minute, +minMinute, +maxMinute));
  57. return `${hour}:${minute}`;
  58. };
  59. const picker = (0, import_vue2.ref)();
  60. const currentDate = (0, import_vue2.ref)(formatValue(props.modelValue));
  61. const ranges = (0, import_vue2.computed)(() => [{
  62. type: "hour",
  63. range: [+props.minHour, +props.maxHour]
  64. }, {
  65. type: "minute",
  66. range: [+props.minMinute, +props.maxMinute]
  67. }]);
  68. const originColumns = (0, import_vue2.computed)(() => ranges.value.map(({
  69. type,
  70. range: rangeArr
  71. }) => {
  72. let values = (0, import_utils2.times)(rangeArr[1] - rangeArr[0] + 1, (index) => (0, import_utils.padZero)(rangeArr[0] + index));
  73. if (props.filter) {
  74. values = props.filter(type, values);
  75. }
  76. return {
  77. type,
  78. values
  79. };
  80. }));
  81. const columns = (0, import_vue2.computed)(() => originColumns.value.map((column) => ({
  82. values: column.values.map((value) => props.formatter(column.type, value))
  83. })));
  84. const updateColumnValue = () => {
  85. const pair = currentDate.value.split(":");
  86. const values = [props.formatter("hour", pair[0]), props.formatter("minute", pair[1])];
  87. (0, import_vue2.nextTick)(() => {
  88. var _a;
  89. (_a = picker.value) == null ? void 0 : _a.setValues(values);
  90. });
  91. };
  92. const updateInnerValue = () => {
  93. const [hourIndex, minuteIndex] = picker.value.getIndexes();
  94. const [hourColumn, minuteColumn] = originColumns.value;
  95. const hour = hourColumn.values[hourIndex] || hourColumn.values[0];
  96. const minute = minuteColumn.values[minuteIndex] || minuteColumn.values[0];
  97. currentDate.value = formatValue(`${hour}:${minute}`);
  98. updateColumnValue();
  99. };
  100. const onConfirm = () => emit("confirm", currentDate.value);
  101. const onCancel = () => emit("cancel");
  102. const onChange = () => {
  103. updateInnerValue();
  104. (0, import_vue2.nextTick)(() => {
  105. (0, import_vue2.nextTick)(() => emit("change", currentDate.value));
  106. });
  107. };
  108. (0, import_vue2.onMounted)(() => {
  109. updateColumnValue();
  110. (0, import_vue2.nextTick)(updateInnerValue);
  111. });
  112. (0, import_vue2.watch)(columns, updateColumnValue);
  113. (0, import_vue2.watch)(() => [props.filter, props.maxHour, props.minMinute, props.maxMinute], updateInnerValue);
  114. (0, import_vue2.watch)(() => props.minHour, () => {
  115. (0, import_vue2.nextTick)(updateInnerValue);
  116. });
  117. (0, import_vue2.watch)(currentDate, (value) => emit("update:modelValue", value));
  118. (0, import_vue2.watch)(() => props.modelValue, (value) => {
  119. value = formatValue(value);
  120. if (value !== currentDate.value) {
  121. currentDate.value = value;
  122. updateColumnValue();
  123. }
  124. });
  125. (0, import_use_expose.useExpose)({
  126. getPicker: () => picker.value && (0, import_utils2.proxyPickerMethods)(picker.value, updateInnerValue)
  127. });
  128. return () => (0, import_vue.createVNode)(import_picker.Picker, (0, import_vue.mergeProps)({
  129. "ref": picker,
  130. "columns": columns.value,
  131. "onChange": onChange,
  132. "onCancel": onCancel,
  133. "onConfirm": onConfirm
  134. }, (0, import_utils.pick)(props, import_utils2.pickerInheritKeys)), slots);
  135. }
  136. });