1c757225f29e7f101601d1fbd52409d28c14cba9afb18d19da47ef2c6b08adc74ea2d2ffe35517253995b18ac443c7d6bbe25f41e5c56f335b66afba5af53f 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156
  1. 'use strict';
  2. Object.defineProperty(exports, '__esModule', { value: true });
  3. var vue = require('vue');
  4. var useFormItem = require('../../../form/src/hooks/use-form-item.js');
  5. var event = require('../../../../constants/event.js');
  6. const useSlide = (props, initData, emit) => {
  7. const { form: elForm, formItem: elFormItem } = useFormItem.useFormItem();
  8. const slider = vue.shallowRef();
  9. const firstButton = vue.ref();
  10. const secondButton = vue.ref();
  11. const buttonRefs = {
  12. firstButton,
  13. secondButton
  14. };
  15. const sliderDisabled = vue.computed(() => {
  16. return props.disabled || (elForm == null ? void 0 : elForm.disabled) || false;
  17. });
  18. const minValue = vue.computed(() => {
  19. return Math.min(initData.firstValue, initData.secondValue);
  20. });
  21. const maxValue = vue.computed(() => {
  22. return Math.max(initData.firstValue, initData.secondValue);
  23. });
  24. const barSize = vue.computed(() => {
  25. return props.range ? `${100 * (maxValue.value - minValue.value) / (props.max - props.min)}%` : `${100 * (initData.firstValue - props.min) / (props.max - props.min)}%`;
  26. });
  27. const barStart = vue.computed(() => {
  28. return props.range ? `${100 * (minValue.value - props.min) / (props.max - props.min)}%` : "0%";
  29. });
  30. const runwayStyle = vue.computed(() => {
  31. return props.vertical ? { height: props.height } : {};
  32. });
  33. const barStyle = vue.computed(() => {
  34. return props.vertical ? {
  35. height: barSize.value,
  36. bottom: barStart.value
  37. } : {
  38. width: barSize.value,
  39. left: barStart.value
  40. };
  41. });
  42. const resetSize = () => {
  43. if (slider.value) {
  44. const rect = slider.value.getBoundingClientRect();
  45. initData.sliderSize = rect[props.vertical ? "height" : "width"];
  46. }
  47. };
  48. const getButtonRefByPercent = (percent) => {
  49. const targetValue = props.min + percent * (props.max - props.min) / 100;
  50. if (!props.range) {
  51. return firstButton;
  52. }
  53. let buttonRefName;
  54. if (Math.abs(minValue.value - targetValue) < Math.abs(maxValue.value - targetValue)) {
  55. buttonRefName = initData.firstValue < initData.secondValue ? "firstButton" : "secondButton";
  56. } else {
  57. buttonRefName = initData.firstValue > initData.secondValue ? "firstButton" : "secondButton";
  58. }
  59. return buttonRefs[buttonRefName];
  60. };
  61. const setPosition = (percent) => {
  62. const buttonRef = getButtonRefByPercent(percent);
  63. buttonRef.value.setPosition(percent);
  64. return buttonRef;
  65. };
  66. const setFirstValue = (firstValue) => {
  67. initData.firstValue = firstValue != null ? firstValue : props.min;
  68. _emit(props.range ? [minValue.value, maxValue.value] : firstValue != null ? firstValue : props.min);
  69. };
  70. const setSecondValue = (secondValue) => {
  71. initData.secondValue = secondValue;
  72. if (props.range) {
  73. _emit([minValue.value, maxValue.value]);
  74. }
  75. };
  76. const _emit = (val) => {
  77. emit(event.UPDATE_MODEL_EVENT, val);
  78. emit(event.INPUT_EVENT, val);
  79. };
  80. const emitChange = async () => {
  81. await vue.nextTick();
  82. emit(event.CHANGE_EVENT, props.range ? [minValue.value, maxValue.value] : props.modelValue);
  83. };
  84. const handleSliderPointerEvent = (event) => {
  85. var _a, _b, _c, _d, _e, _f;
  86. if (sliderDisabled.value || initData.dragging)
  87. return;
  88. resetSize();
  89. let newPercent = 0;
  90. if (props.vertical) {
  91. const clientY = (_c = (_b = (_a = event.touches) == null ? void 0 : _a.item(0)) == null ? void 0 : _b.clientY) != null ? _c : event.clientY;
  92. const sliderOffsetBottom = slider.value.getBoundingClientRect().bottom;
  93. newPercent = (sliderOffsetBottom - clientY) / initData.sliderSize * 100;
  94. } else {
  95. const clientX = (_f = (_e = (_d = event.touches) == null ? void 0 : _d.item(0)) == null ? void 0 : _e.clientX) != null ? _f : event.clientX;
  96. const sliderOffsetLeft = slider.value.getBoundingClientRect().left;
  97. newPercent = (clientX - sliderOffsetLeft) / initData.sliderSize * 100;
  98. }
  99. if (newPercent < 0 || newPercent > 100)
  100. return;
  101. return setPosition(newPercent);
  102. };
  103. const onSliderWrapperPrevent = (event) => {
  104. var _a, _b;
  105. if (((_a = buttonRefs["firstButton"].value) == null ? void 0 : _a.dragging) || ((_b = buttonRefs["secondButton"].value) == null ? void 0 : _b.dragging)) {
  106. event.preventDefault();
  107. }
  108. };
  109. const onSliderDown = async (event) => {
  110. const buttonRef = handleSliderPointerEvent(event);
  111. if (buttonRef) {
  112. await vue.nextTick();
  113. buttonRef.value.onButtonDown(event);
  114. }
  115. };
  116. const onSliderClick = (event) => {
  117. const buttonRef = handleSliderPointerEvent(event);
  118. if (buttonRef) {
  119. emitChange();
  120. }
  121. };
  122. const onSliderMarkerDown = (position) => {
  123. if (sliderDisabled.value || initData.dragging)
  124. return;
  125. const buttonRef = setPosition(position);
  126. if (buttonRef) {
  127. emitChange();
  128. }
  129. };
  130. return {
  131. elFormItem,
  132. slider,
  133. firstButton,
  134. secondButton,
  135. sliderDisabled,
  136. minValue,
  137. maxValue,
  138. runwayStyle,
  139. barStyle,
  140. resetSize,
  141. setPosition,
  142. emitChange,
  143. onSliderWrapperPrevent,
  144. onSliderClick,
  145. onSliderDown,
  146. onSliderMarkerDown,
  147. setFirstValue,
  148. setSecondValue
  149. };
  150. };
  151. exports.useSlide = useSlide;
  152. //# sourceMappingURL=use-slide.js.map