time-picker.js 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186
  1. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  2. import _extends from "@babel/runtime/helpers/esm/extends";
  3. import { createVNode as _createVNode, resolveDirective as _resolveDirective } from "vue";
  4. import { defineComponent, ref } from 'vue';
  5. import generatePicker from '../date-picker/generatePicker';
  6. import { commonProps, datePickerProps, rangePickerProps } from '../date-picker/generatePicker/props';
  7. import devWarning from '../vc-util/devWarning';
  8. import { useInjectFormItemContext } from '../form/FormItemContext';
  9. import omit from '../_util/omit';
  10. import { booleanType, stringType } from '../_util/type';
  11. export const timePickerProps = () => ({
  12. format: String,
  13. showNow: booleanType(),
  14. showHour: booleanType(),
  15. showMinute: booleanType(),
  16. showSecond: booleanType(),
  17. use12Hours: booleanType(),
  18. hourStep: Number,
  19. minuteStep: Number,
  20. secondStep: Number,
  21. hideDisabledOptions: booleanType(),
  22. popupClassName: String,
  23. status: stringType()
  24. });
  25. function createTimePicker(generateConfig) {
  26. const DatePicker = generatePicker(generateConfig, _extends(_extends({}, timePickerProps()), {
  27. order: {
  28. type: Boolean,
  29. default: true
  30. }
  31. }));
  32. const {
  33. TimePicker: InternalTimePicker,
  34. RangePicker: InternalRangePicker
  35. } = DatePicker;
  36. const TimePicker = defineComponent({
  37. name: 'ATimePicker',
  38. inheritAttrs: false,
  39. props: _extends(_extends(_extends(_extends({}, commonProps()), datePickerProps()), timePickerProps()), {
  40. addon: {
  41. type: Function
  42. }
  43. }),
  44. slots: Object,
  45. setup(p, _ref) {
  46. let {
  47. slots,
  48. expose,
  49. emit,
  50. attrs
  51. } = _ref;
  52. const props = p;
  53. const formItemContext = useInjectFormItemContext();
  54. devWarning(!(slots.addon || props.addon), 'TimePicker', '`addon` is deprecated. Please use `v-slot:renderExtraFooter` instead.');
  55. const pickerRef = ref();
  56. expose({
  57. focus: () => {
  58. var _a;
  59. (_a = pickerRef.value) === null || _a === void 0 ? void 0 : _a.focus();
  60. },
  61. blur: () => {
  62. var _a;
  63. (_a = pickerRef.value) === null || _a === void 0 ? void 0 : _a.blur();
  64. }
  65. });
  66. const onChange = (value, dateString) => {
  67. emit('update:value', value);
  68. emit('change', value, dateString);
  69. formItemContext.onFieldChange();
  70. };
  71. const onOpenChange = open => {
  72. emit('update:open', open);
  73. emit('openChange', open);
  74. };
  75. const onFocus = e => {
  76. emit('focus', e);
  77. };
  78. const onBlur = e => {
  79. emit('blur', e);
  80. formItemContext.onFieldBlur();
  81. };
  82. const onOk = value => {
  83. emit('ok', value);
  84. };
  85. return () => {
  86. const {
  87. id = formItemContext.id.value
  88. } = props;
  89. //restProps.addon
  90. return _createVNode(InternalTimePicker, _objectSpread(_objectSpread(_objectSpread({}, attrs), omit(props, ['onUpdate:value', 'onUpdate:open'])), {}, {
  91. "id": id,
  92. "dropdownClassName": props.popupClassName,
  93. "mode": undefined,
  94. "ref": pickerRef,
  95. "renderExtraFooter": props.addon || slots.addon || props.renderExtraFooter || slots.renderExtraFooter,
  96. "onChange": onChange,
  97. "onOpenChange": onOpenChange,
  98. "onFocus": onFocus,
  99. "onBlur": onBlur,
  100. "onOk": onOk
  101. }), slots);
  102. };
  103. }
  104. });
  105. const TimeRangePicker = defineComponent({
  106. name: 'ATimeRangePicker',
  107. inheritAttrs: false,
  108. props: _extends(_extends(_extends(_extends({}, commonProps()), rangePickerProps()), timePickerProps()), {
  109. order: {
  110. type: Boolean,
  111. default: true
  112. }
  113. }),
  114. slots: Object,
  115. setup(p, _ref2) {
  116. let {
  117. slots,
  118. expose,
  119. emit,
  120. attrs
  121. } = _ref2;
  122. const props = p;
  123. const pickerRef = ref();
  124. const formItemContext = useInjectFormItemContext();
  125. expose({
  126. focus: () => {
  127. var _a;
  128. (_a = pickerRef.value) === null || _a === void 0 ? void 0 : _a.focus();
  129. },
  130. blur: () => {
  131. var _a;
  132. (_a = pickerRef.value) === null || _a === void 0 ? void 0 : _a.blur();
  133. }
  134. });
  135. const onChange = (values, dateStrings) => {
  136. emit('update:value', values);
  137. emit('change', values, dateStrings);
  138. formItemContext.onFieldChange();
  139. };
  140. const onOpenChange = open => {
  141. emit('update:open', open);
  142. emit('openChange', open);
  143. };
  144. const onFocus = e => {
  145. emit('focus', e);
  146. };
  147. const onBlur = e => {
  148. emit('blur', e);
  149. formItemContext.onFieldBlur();
  150. };
  151. const onPanelChange = (values, modes) => {
  152. emit('panelChange', values, modes);
  153. };
  154. const onOk = values => {
  155. emit('ok', values);
  156. };
  157. const onCalendarChange = (values, dateStrings, info) => {
  158. emit('calendarChange', values, dateStrings, info);
  159. };
  160. return () => {
  161. const {
  162. id = formItemContext.id.value
  163. } = props;
  164. return _createVNode(InternalRangePicker, _objectSpread(_objectSpread(_objectSpread({}, attrs), omit(props, ['onUpdate:open', 'onUpdate:value'])), {}, {
  165. "id": id,
  166. "dropdownClassName": props.popupClassName,
  167. "picker": "time",
  168. "mode": undefined,
  169. "ref": pickerRef,
  170. "onChange": onChange,
  171. "onOpenChange": onOpenChange,
  172. "onFocus": onFocus,
  173. "onBlur": onBlur,
  174. "onPanelChange": onPanelChange,
  175. "onOk": onOk,
  176. "onCalendarChange": onCalendarChange
  177. }), slots);
  178. };
  179. }
  180. });
  181. return {
  182. TimePicker,
  183. TimeRangePicker
  184. };
  185. }
  186. export default createTimePicker;