TimePicker.mjs 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  1. import { createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
  2. import { ref, watch, computed, nextTick, onMounted, defineComponent } from "vue";
  3. import { pick, clamp, extend, padZero, createNamespace, makeNumericProp } from "../utils/index.mjs";
  4. import { times, sharedProps, pickerInheritKeys, proxyPickerMethods } from "./utils.mjs";
  5. import { useExpose } from "../composables/use-expose.mjs";
  6. import { Picker } from "../picker/index.mjs";
  7. const [name] = createNamespace("time-picker");
  8. var stdin_default = defineComponent({
  9. name,
  10. props: extend({}, sharedProps, {
  11. minHour: makeNumericProp(0),
  12. maxHour: makeNumericProp(23),
  13. minMinute: makeNumericProp(0),
  14. maxMinute: makeNumericProp(59),
  15. modelValue: String
  16. }),
  17. emits: ["confirm", "cancel", "change", "update:modelValue"],
  18. setup(props, {
  19. emit,
  20. slots
  21. }) {
  22. const formatValue = (value) => {
  23. const {
  24. minHour,
  25. maxHour,
  26. maxMinute,
  27. minMinute
  28. } = props;
  29. if (!value) {
  30. value = `${padZero(minHour)}:${padZero(minMinute)}`;
  31. }
  32. let [hour, minute] = value.split(":");
  33. hour = padZero(clamp(+hour, +minHour, +maxHour));
  34. minute = padZero(clamp(+minute, +minMinute, +maxMinute));
  35. return `${hour}:${minute}`;
  36. };
  37. const picker = ref();
  38. const currentDate = ref(formatValue(props.modelValue));
  39. const ranges = computed(() => [{
  40. type: "hour",
  41. range: [+props.minHour, +props.maxHour]
  42. }, {
  43. type: "minute",
  44. range: [+props.minMinute, +props.maxMinute]
  45. }]);
  46. const originColumns = computed(() => ranges.value.map(({
  47. type,
  48. range: rangeArr
  49. }) => {
  50. let values = times(rangeArr[1] - rangeArr[0] + 1, (index) => padZero(rangeArr[0] + index));
  51. if (props.filter) {
  52. values = props.filter(type, values);
  53. }
  54. return {
  55. type,
  56. values
  57. };
  58. }));
  59. const columns = computed(() => originColumns.value.map((column) => ({
  60. values: column.values.map((value) => props.formatter(column.type, value))
  61. })));
  62. const updateColumnValue = () => {
  63. const pair = currentDate.value.split(":");
  64. const values = [props.formatter("hour", pair[0]), props.formatter("minute", pair[1])];
  65. nextTick(() => {
  66. var _a;
  67. (_a = picker.value) == null ? void 0 : _a.setValues(values);
  68. });
  69. };
  70. const updateInnerValue = () => {
  71. const [hourIndex, minuteIndex] = picker.value.getIndexes();
  72. const [hourColumn, minuteColumn] = originColumns.value;
  73. const hour = hourColumn.values[hourIndex] || hourColumn.values[0];
  74. const minute = minuteColumn.values[minuteIndex] || minuteColumn.values[0];
  75. currentDate.value = formatValue(`${hour}:${minute}`);
  76. updateColumnValue();
  77. };
  78. const onConfirm = () => emit("confirm", currentDate.value);
  79. const onCancel = () => emit("cancel");
  80. const onChange = () => {
  81. updateInnerValue();
  82. nextTick(() => {
  83. nextTick(() => emit("change", currentDate.value));
  84. });
  85. };
  86. onMounted(() => {
  87. updateColumnValue();
  88. nextTick(updateInnerValue);
  89. });
  90. watch(columns, updateColumnValue);
  91. watch(() => [props.filter, props.maxHour, props.minMinute, props.maxMinute], updateInnerValue);
  92. watch(() => props.minHour, () => {
  93. nextTick(updateInnerValue);
  94. });
  95. watch(currentDate, (value) => emit("update:modelValue", value));
  96. watch(() => props.modelValue, (value) => {
  97. value = formatValue(value);
  98. if (value !== currentDate.value) {
  99. currentDate.value = value;
  100. updateColumnValue();
  101. }
  102. });
  103. useExpose({
  104. getPicker: () => picker.value && proxyPickerMethods(picker.value, updateInnerValue)
  105. });
  106. return () => _createVNode(Picker, _mergeProps({
  107. "ref": picker,
  108. "columns": columns.value,
  109. "onChange": onChange,
  110. "onCancel": onCancel,
  111. "onConfirm": onConfirm
  112. }, pick(props, pickerInheritKeys)), slots);
  113. }
  114. });
  115. export {
  116. stdin_default as default
  117. };