dedb6a58d885f38f9cfd383bd0645448e475ccdbe96126a6b88d64335c78825aed17d1acd0cfed0aa6d9820a719129b62bc27540c266e6b89d8fc0d50c2c08 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242
  1. import { defineComponent, reactive, computed, toRefs, provide, openBlock, createElementBlock, unref, normalizeClass, createElementVNode, normalizeStyle, createVNode, createBlock, createCommentVNode, Fragment, renderList, withModifiers } from 'vue';
  2. import { useEventListener } from '@vueuse/core';
  3. import { ElInputNumber } from '../../input-number/index.mjs';
  4. import { sliderContextKey } from './constants.mjs';
  5. import { sliderProps, sliderEmits } from './slider.mjs';
  6. import SliderButton from './button2.mjs';
  7. import SliderMarker from './marker.mjs';
  8. import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
  9. import { useSlide } from './composables/use-slide.mjs';
  10. import { useStops } from './composables/use-stops.mjs';
  11. import { useMarks } from './composables/use-marks.mjs';
  12. import { useWatch } from './composables/use-watch.mjs';
  13. import { useLifecycle } from './composables/use-lifecycle.mjs';
  14. import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
  15. import { useLocale } from '../../../hooks/use-locale/index.mjs';
  16. import { useFormItemInputId } from '../../form/src/hooks/use-form-item.mjs';
  17. import { useFormSize } from '../../form/src/hooks/use-form-common-props.mjs';
  18. const __default__ = defineComponent({
  19. name: "ElSlider"
  20. });
  21. const _sfc_main = /* @__PURE__ */ defineComponent({
  22. ...__default__,
  23. props: sliderProps,
  24. emits: sliderEmits,
  25. setup(__props, { expose, emit }) {
  26. const props = __props;
  27. const ns = useNamespace("slider");
  28. const { t } = useLocale();
  29. const initData = reactive({
  30. firstValue: 0,
  31. secondValue: 0,
  32. oldValue: 0,
  33. dragging: false,
  34. sliderSize: 1
  35. });
  36. const {
  37. elFormItem,
  38. slider,
  39. firstButton,
  40. secondButton,
  41. sliderDisabled,
  42. minValue,
  43. maxValue,
  44. runwayStyle,
  45. barStyle,
  46. resetSize,
  47. emitChange,
  48. onSliderWrapperPrevent,
  49. onSliderClick,
  50. onSliderDown,
  51. onSliderMarkerDown,
  52. setFirstValue,
  53. setSecondValue
  54. } = useSlide(props, initData, emit);
  55. const { stops, getStopStyle } = useStops(props, initData, minValue, maxValue);
  56. const { inputId, isLabeledByFormItem } = useFormItemInputId(props, {
  57. formItemContext: elFormItem
  58. });
  59. const sliderWrapperSize = useFormSize();
  60. const sliderInputSize = computed(() => props.inputSize || sliderWrapperSize.value);
  61. const groupLabel = computed(() => {
  62. return props.ariaLabel || t("el.slider.defaultLabel", {
  63. min: props.min,
  64. max: props.max
  65. });
  66. });
  67. const firstButtonLabel = computed(() => {
  68. if (props.range) {
  69. return props.rangeStartLabel || t("el.slider.defaultRangeStartLabel");
  70. } else {
  71. return groupLabel.value;
  72. }
  73. });
  74. const firstValueText = computed(() => {
  75. return props.formatValueText ? props.formatValueText(firstValue.value) : `${firstValue.value}`;
  76. });
  77. const secondButtonLabel = computed(() => {
  78. return props.rangeEndLabel || t("el.slider.defaultRangeEndLabel");
  79. });
  80. const secondValueText = computed(() => {
  81. return props.formatValueText ? props.formatValueText(secondValue.value) : `${secondValue.value}`;
  82. });
  83. const sliderKls = computed(() => [
  84. ns.b(),
  85. ns.m(sliderWrapperSize.value),
  86. ns.is("vertical", props.vertical),
  87. { [ns.m("with-input")]: props.showInput }
  88. ]);
  89. const markList = useMarks(props);
  90. useWatch(props, initData, minValue, maxValue, emit, elFormItem);
  91. const precision = computed(() => {
  92. const precisions = [props.min, props.max, props.step].map((item) => {
  93. const decimal = `${item}`.split(".")[1];
  94. return decimal ? decimal.length : 0;
  95. });
  96. return Math.max.apply(null, precisions);
  97. });
  98. const { sliderWrapper } = useLifecycle(props, initData, resetSize);
  99. const { firstValue, secondValue, sliderSize } = toRefs(initData);
  100. const updateDragging = (val) => {
  101. initData.dragging = val;
  102. };
  103. useEventListener(sliderWrapper, "touchstart", onSliderWrapperPrevent, {
  104. passive: false
  105. });
  106. useEventListener(sliderWrapper, "touchmove", onSliderWrapperPrevent, {
  107. passive: false
  108. });
  109. provide(sliderContextKey, {
  110. ...toRefs(props),
  111. sliderSize,
  112. disabled: sliderDisabled,
  113. precision,
  114. emitChange,
  115. resetSize,
  116. updateDragging
  117. });
  118. expose({
  119. onSliderClick
  120. });
  121. return (_ctx, _cache) => {
  122. var _a, _b;
  123. return openBlock(), createElementBlock("div", {
  124. id: _ctx.range ? unref(inputId) : void 0,
  125. ref_key: "sliderWrapper",
  126. ref: sliderWrapper,
  127. class: normalizeClass(unref(sliderKls)),
  128. role: _ctx.range ? "group" : void 0,
  129. "aria-label": _ctx.range && !unref(isLabeledByFormItem) ? unref(groupLabel) : void 0,
  130. "aria-labelledby": _ctx.range && unref(isLabeledByFormItem) ? (_a = unref(elFormItem)) == null ? void 0 : _a.labelId : void 0
  131. }, [
  132. createElementVNode("div", {
  133. ref_key: "slider",
  134. ref: slider,
  135. class: normalizeClass([
  136. unref(ns).e("runway"),
  137. { "show-input": _ctx.showInput && !_ctx.range },
  138. unref(ns).is("disabled", unref(sliderDisabled))
  139. ]),
  140. style: normalizeStyle(unref(runwayStyle)),
  141. onMousedown: unref(onSliderDown),
  142. onTouchstartPassive: unref(onSliderDown)
  143. }, [
  144. createElementVNode("div", {
  145. class: normalizeClass(unref(ns).e("bar")),
  146. style: normalizeStyle(unref(barStyle))
  147. }, null, 6),
  148. createVNode(SliderButton, {
  149. id: !_ctx.range ? unref(inputId) : void 0,
  150. ref_key: "firstButton",
  151. ref: firstButton,
  152. "model-value": unref(firstValue),
  153. vertical: _ctx.vertical,
  154. "tooltip-class": _ctx.tooltipClass,
  155. placement: _ctx.placement,
  156. role: "slider",
  157. "aria-label": _ctx.range || !unref(isLabeledByFormItem) ? unref(firstButtonLabel) : void 0,
  158. "aria-labelledby": !_ctx.range && unref(isLabeledByFormItem) ? (_b = unref(elFormItem)) == null ? void 0 : _b.labelId : void 0,
  159. "aria-valuemin": _ctx.min,
  160. "aria-valuemax": _ctx.range ? unref(secondValue) : _ctx.max,
  161. "aria-valuenow": unref(firstValue),
  162. "aria-valuetext": unref(firstValueText),
  163. "aria-orientation": _ctx.vertical ? "vertical" : "horizontal",
  164. "aria-disabled": unref(sliderDisabled),
  165. "onUpdate:modelValue": unref(setFirstValue)
  166. }, null, 8, ["id", "model-value", "vertical", "tooltip-class", "placement", "aria-label", "aria-labelledby", "aria-valuemin", "aria-valuemax", "aria-valuenow", "aria-valuetext", "aria-orientation", "aria-disabled", "onUpdate:modelValue"]),
  167. _ctx.range ? (openBlock(), createBlock(SliderButton, {
  168. key: 0,
  169. ref_key: "secondButton",
  170. ref: secondButton,
  171. "model-value": unref(secondValue),
  172. vertical: _ctx.vertical,
  173. "tooltip-class": _ctx.tooltipClass,
  174. placement: _ctx.placement,
  175. role: "slider",
  176. "aria-label": unref(secondButtonLabel),
  177. "aria-valuemin": unref(firstValue),
  178. "aria-valuemax": _ctx.max,
  179. "aria-valuenow": unref(secondValue),
  180. "aria-valuetext": unref(secondValueText),
  181. "aria-orientation": _ctx.vertical ? "vertical" : "horizontal",
  182. "aria-disabled": unref(sliderDisabled),
  183. "onUpdate:modelValue": unref(setSecondValue)
  184. }, null, 8, ["model-value", "vertical", "tooltip-class", "placement", "aria-label", "aria-valuemin", "aria-valuemax", "aria-valuenow", "aria-valuetext", "aria-orientation", "aria-disabled", "onUpdate:modelValue"])) : createCommentVNode("v-if", true),
  185. _ctx.showStops ? (openBlock(), createElementBlock("div", { key: 1 }, [
  186. (openBlock(true), createElementBlock(Fragment, null, renderList(unref(stops), (item, key) => {
  187. return openBlock(), createElementBlock("div", {
  188. key,
  189. class: normalizeClass(unref(ns).e("stop")),
  190. style: normalizeStyle(unref(getStopStyle)(item))
  191. }, null, 6);
  192. }), 128))
  193. ])) : createCommentVNode("v-if", true),
  194. unref(markList).length > 0 ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
  195. createElementVNode("div", null, [
  196. (openBlock(true), createElementBlock(Fragment, null, renderList(unref(markList), (item, key) => {
  197. return openBlock(), createElementBlock("div", {
  198. key,
  199. style: normalizeStyle(unref(getStopStyle)(item.position)),
  200. class: normalizeClass([unref(ns).e("stop"), unref(ns).e("marks-stop")])
  201. }, null, 6);
  202. }), 128))
  203. ]),
  204. createElementVNode("div", {
  205. class: normalizeClass(unref(ns).e("marks"))
  206. }, [
  207. (openBlock(true), createElementBlock(Fragment, null, renderList(unref(markList), (item, key) => {
  208. return openBlock(), createBlock(unref(SliderMarker), {
  209. key,
  210. mark: item.mark,
  211. style: normalizeStyle(unref(getStopStyle)(item.position)),
  212. onMousedown: withModifiers(($event) => unref(onSliderMarkerDown)(item.position), ["stop"])
  213. }, null, 8, ["mark", "style", "onMousedown"]);
  214. }), 128))
  215. ], 2)
  216. ], 64)) : createCommentVNode("v-if", true)
  217. ], 46, ["onMousedown", "onTouchstartPassive"]),
  218. _ctx.showInput && !_ctx.range ? (openBlock(), createBlock(unref(ElInputNumber), {
  219. key: 0,
  220. ref: "input",
  221. "model-value": unref(firstValue),
  222. class: normalizeClass(unref(ns).e("input")),
  223. step: _ctx.step,
  224. disabled: unref(sliderDisabled),
  225. controls: _ctx.showInputControls,
  226. min: _ctx.min,
  227. max: _ctx.max,
  228. precision: unref(precision),
  229. debounce: _ctx.debounce,
  230. size: unref(sliderInputSize),
  231. "onUpdate:modelValue": unref(setFirstValue),
  232. onChange: unref(emitChange)
  233. }, null, 8, ["model-value", "class", "step", "disabled", "controls", "min", "max", "precision", "debounce", "size", "onUpdate:modelValue", "onChange"])) : createCommentVNode("v-if", true)
  234. ], 10, ["id", "role", "aria-label", "aria-labelledby"]);
  235. };
  236. }
  237. });
  238. var Slider = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "slider.vue"]]);
  239. export { Slider as default };
  240. //# sourceMappingURL=slider2.mjs.map