TimePicker.mjs 2.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. import { createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
  2. import { ref, watch, computed, defineComponent } from "vue";
  3. import { pick, extend, createNamespace, makeNumericProp, isSameValue } from "../utils/index.mjs";
  4. import { genOptions, sharedProps, pickerInheritKeys, formatValueRange } from "../date-picker/utils.mjs";
  5. import { Picker } from "../picker/index.mjs";
  6. const [name] = createNamespace("time-picker");
  7. const timePickerProps = extend({}, sharedProps, {
  8. minHour: makeNumericProp(0),
  9. maxHour: makeNumericProp(23),
  10. minMinute: makeNumericProp(0),
  11. maxMinute: makeNumericProp(59),
  12. minSecond: makeNumericProp(0),
  13. maxSecond: makeNumericProp(59),
  14. columnsType: {
  15. type: Array,
  16. default: () => ["hour", "minute"]
  17. }
  18. });
  19. var stdin_default = defineComponent({
  20. name,
  21. props: timePickerProps,
  22. emits: ["confirm", "cancel", "change", "update:modelValue"],
  23. setup(props, {
  24. emit,
  25. slots
  26. }) {
  27. const currentValues = ref(props.modelValue);
  28. const columns = computed(() => props.columnsType.map((type) => {
  29. const {
  30. filter,
  31. formatter
  32. } = props;
  33. switch (type) {
  34. case "hour":
  35. return genOptions(+props.minHour, +props.maxHour, type, formatter, filter);
  36. case "minute":
  37. return genOptions(+props.minMinute, +props.maxMinute, type, formatter, filter);
  38. case "second":
  39. return genOptions(+props.minSecond, +props.maxSecond, type, formatter, filter);
  40. default:
  41. if (process.env.NODE_ENV !== "production") {
  42. throw new Error(`[Vant] DatePicker: unsupported columns type: ${type}`);
  43. }
  44. return [];
  45. }
  46. }));
  47. watch(currentValues, (newValues) => {
  48. if (!isSameValue(newValues, props.modelValue)) {
  49. emit("update:modelValue", newValues);
  50. }
  51. });
  52. watch(() => props.modelValue, (newValues) => {
  53. newValues = formatValueRange(newValues, columns.value);
  54. if (!isSameValue(newValues, currentValues.value)) {
  55. currentValues.value = newValues;
  56. }
  57. }, {
  58. immediate: true
  59. });
  60. const onChange = (...args) => emit("change", ...args);
  61. const onCancel = (...args) => emit("cancel", ...args);
  62. const onConfirm = (...args) => emit("confirm", ...args);
  63. return () => _createVNode(Picker, _mergeProps({
  64. "modelValue": currentValues.value,
  65. "onUpdate:modelValue": ($event) => currentValues.value = $event,
  66. "columns": columns.value,
  67. "onChange": onChange,
  68. "onCancel": onCancel,
  69. "onConfirm": onConfirm
  70. }, pick(props, pickerInheritKeys)), slots);
  71. }
  72. });
  73. export {
  74. stdin_default as default,
  75. timePickerProps
  76. };