TimePicker.mjs 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138
  1. import { computed, defineComponent, ref, watch, mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
  2. import { formatValueRange, genOptions, pickerInheritKeys, sharedProps } from "../date-picker/utils.mjs";
  3. import { pick, extend, isSameValue, makeNumericProp, createNamespace } from "../utils/index.mjs";
  4. import { useExpose } from "../composables/use-expose.mjs";
  5. import { Picker } from "../picker/index.mjs";
  6. const [name] = createNamespace("time-picker");
  7. const validateTime = (val) => /^([01]\d|2[0-3]):([0-5]\d):([0-5]\d)$/.test(val);
  8. const fullColumns = ["hour", "minute", "second"];
  9. const timePickerProps = extend({}, sharedProps, {
  10. minHour: makeNumericProp(0),
  11. maxHour: makeNumericProp(23),
  12. minMinute: makeNumericProp(0),
  13. maxMinute: makeNumericProp(59),
  14. minSecond: makeNumericProp(0),
  15. maxSecond: makeNumericProp(59),
  16. minTime: {
  17. type: String,
  18. validator: validateTime
  19. },
  20. maxTime: {
  21. type: String,
  22. validator: validateTime
  23. },
  24. columnsType: {
  25. type: Array,
  26. default: () => ["hour", "minute"]
  27. }
  28. });
  29. var stdin_default = defineComponent({
  30. name,
  31. props: timePickerProps,
  32. emits: ["confirm", "cancel", "change", "update:modelValue"],
  33. setup(props, {
  34. emit,
  35. slots
  36. }) {
  37. const currentValues = ref(props.modelValue);
  38. const pickerRef = ref();
  39. const getValidTime = (time) => {
  40. const timeLimitArr = time.split(":");
  41. return fullColumns.map((col, i) => props.columnsType.includes(col) ? timeLimitArr[i] : "00");
  42. };
  43. const confirm = () => {
  44. var _a;
  45. return (_a = pickerRef.value) == null ? void 0 : _a.confirm();
  46. };
  47. const getSelectedTime = () => currentValues.value;
  48. const columns = computed(() => {
  49. let {
  50. minHour,
  51. maxHour,
  52. minMinute,
  53. maxMinute,
  54. minSecond,
  55. maxSecond
  56. } = props;
  57. if (props.minTime || props.maxTime) {
  58. const fullTime = {
  59. hour: 0,
  60. minute: 0,
  61. second: 0
  62. };
  63. props.columnsType.forEach((col, i) => {
  64. var _a;
  65. fullTime[col] = (_a = currentValues.value[i]) != null ? _a : 0;
  66. });
  67. const {
  68. hour,
  69. minute
  70. } = fullTime;
  71. if (props.minTime) {
  72. const [minH, minM, minS] = getValidTime(props.minTime);
  73. minHour = minH;
  74. minMinute = +hour <= +minHour ? minM : "00";
  75. minSecond = +hour <= +minHour && +minute <= +minMinute ? minS : "00";
  76. }
  77. if (props.maxTime) {
  78. const [maxH, maxM, maxS] = getValidTime(props.maxTime);
  79. maxHour = maxH;
  80. maxMinute = +hour >= +maxHour ? maxM : "59";
  81. maxSecond = +hour >= +maxHour && +minute >= +maxMinute ? maxS : "59";
  82. }
  83. }
  84. return props.columnsType.map((type) => {
  85. const {
  86. filter,
  87. formatter
  88. } = props;
  89. switch (type) {
  90. case "hour":
  91. return genOptions(+minHour, +maxHour, type, formatter, filter, currentValues.value);
  92. case "minute":
  93. return genOptions(+minMinute, +maxMinute, type, formatter, filter, currentValues.value);
  94. case "second":
  95. return genOptions(+minSecond, +maxSecond, type, formatter, filter, currentValues.value);
  96. default:
  97. if (process.env.NODE_ENV !== "production") {
  98. throw new Error(`[Vant] DatePicker: unsupported columns type: ${type}`);
  99. }
  100. return [];
  101. }
  102. });
  103. });
  104. watch(currentValues, (newValues) => {
  105. if (!isSameValue(newValues, props.modelValue)) {
  106. emit("update:modelValue", newValues);
  107. }
  108. });
  109. watch(() => props.modelValue, (newValues) => {
  110. newValues = formatValueRange(newValues, columns.value);
  111. if (!isSameValue(newValues, currentValues.value)) {
  112. currentValues.value = newValues;
  113. }
  114. }, {
  115. immediate: true
  116. });
  117. const onChange = (...args) => emit("change", ...args);
  118. const onCancel = (...args) => emit("cancel", ...args);
  119. const onConfirm = (...args) => emit("confirm", ...args);
  120. useExpose({
  121. confirm,
  122. getSelectedTime
  123. });
  124. return () => _createVNode(Picker, _mergeProps({
  125. "ref": pickerRef,
  126. "modelValue": currentValues.value,
  127. "onUpdate:modelValue": ($event) => currentValues.value = $event,
  128. "columns": columns.value,
  129. "onChange": onChange,
  130. "onCancel": onCancel,
  131. "onConfirm": onConfirm
  132. }, pick(props, pickerInheritKeys)), slots);
  133. }
  134. });
  135. export {
  136. stdin_default as default,
  137. timePickerProps
  138. };