button2.mjs 3.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. import { defineComponent, reactive, toRefs, openBlock, createElementBlock, normalizeClass, unref, normalizeStyle, createVNode, withCtx, createElementVNode, toDisplayString } from 'vue';
  2. import { ElTooltip } from '../../tooltip/index.mjs';
  3. import '../../../hooks/index.mjs';
  4. import './composables/index.mjs';
  5. import { sliderButtonProps, sliderButtonEmits } from './button.mjs';
  6. import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
  7. import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
  8. import { useSliderButton } from './composables/use-slider-button.mjs';
  9. const _hoisted_1 = ["tabindex"];
  10. const __default__ = defineComponent({
  11. name: "ElSliderButton"
  12. });
  13. const _sfc_main = /* @__PURE__ */ defineComponent({
  14. ...__default__,
  15. props: sliderButtonProps,
  16. emits: sliderButtonEmits,
  17. setup(__props, { expose, emit }) {
  18. const props = __props;
  19. const ns = useNamespace("slider");
  20. const initData = reactive({
  21. hovering: false,
  22. dragging: false,
  23. isClick: false,
  24. startX: 0,
  25. currentX: 0,
  26. startY: 0,
  27. currentY: 0,
  28. startPosition: 0,
  29. newPosition: 0,
  30. oldValue: props.modelValue
  31. });
  32. const {
  33. disabled,
  34. button,
  35. tooltip,
  36. showTooltip,
  37. tooltipVisible,
  38. wrapperStyle,
  39. formatValue,
  40. handleMouseEnter,
  41. handleMouseLeave,
  42. onButtonDown,
  43. onKeyDown,
  44. setPosition
  45. } = useSliderButton(props, initData, emit);
  46. const { hovering, dragging } = toRefs(initData);
  47. expose({
  48. onButtonDown,
  49. onKeyDown,
  50. setPosition,
  51. hovering,
  52. dragging
  53. });
  54. return (_ctx, _cache) => {
  55. return openBlock(), createElementBlock("div", {
  56. ref_key: "button",
  57. ref: button,
  58. class: normalizeClass([unref(ns).e("button-wrapper"), { hover: unref(hovering), dragging: unref(dragging) }]),
  59. style: normalizeStyle(unref(wrapperStyle)),
  60. tabindex: unref(disabled) ? -1 : 0,
  61. onMouseenter: _cache[0] || (_cache[0] = (...args) => unref(handleMouseEnter) && unref(handleMouseEnter)(...args)),
  62. onMouseleave: _cache[1] || (_cache[1] = (...args) => unref(handleMouseLeave) && unref(handleMouseLeave)(...args)),
  63. onMousedown: _cache[2] || (_cache[2] = (...args) => unref(onButtonDown) && unref(onButtonDown)(...args)),
  64. onTouchstart: _cache[3] || (_cache[3] = (...args) => unref(onButtonDown) && unref(onButtonDown)(...args)),
  65. onFocus: _cache[4] || (_cache[4] = (...args) => unref(handleMouseEnter) && unref(handleMouseEnter)(...args)),
  66. onBlur: _cache[5] || (_cache[5] = (...args) => unref(handleMouseLeave) && unref(handleMouseLeave)(...args)),
  67. onKeydown: _cache[6] || (_cache[6] = (...args) => unref(onKeyDown) && unref(onKeyDown)(...args))
  68. }, [
  69. createVNode(unref(ElTooltip), {
  70. ref_key: "tooltip",
  71. ref: tooltip,
  72. visible: unref(tooltipVisible),
  73. placement: _ctx.placement,
  74. "fallback-placements": ["top", "bottom", "right", "left"],
  75. "stop-popper-mouse-event": false,
  76. "popper-class": _ctx.tooltipClass,
  77. disabled: !unref(showTooltip),
  78. persistent: ""
  79. }, {
  80. content: withCtx(() => [
  81. createElementVNode("span", null, toDisplayString(unref(formatValue)), 1)
  82. ]),
  83. default: withCtx(() => [
  84. createElementVNode("div", {
  85. class: normalizeClass([unref(ns).e("button"), { hover: unref(hovering), dragging: unref(dragging) }])
  86. }, null, 2)
  87. ]),
  88. _: 1
  89. }, 8, ["visible", "placement", "popper-class", "disabled"])
  90. ], 46, _hoisted_1);
  91. };
  92. }
  93. });
  94. var SliderButton = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/slider/src/button.vue"]]);
  95. export { SliderButton as default };
  96. //# sourceMappingURL=button2.mjs.map