hongluan-ui/es/components/slider/src/button2.mjs

Hongluan Component Library for Vue 3

import { defineComponent, reactive, toRefs, openBlock, createElementBlock, normalizeClass, unref, normalizeStyle, createVNode, withCtx, createElementVNode, toDisplayString } from 'vue';
import { HlTooltip } from '../../tooltip/index.mjs';
import '../../popper/index.mjs';
import '../../../hooks/index.mjs';
import './composables/index.mjs';
import { sliderButtonProps, sliderButtonEmits } from './button.mjs';
import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
import { useSliderButton } from './composables/use-slider-button.mjs';
import { Effect } from '../../popper/src/popper.mjs';

const __default__ = defineComponent({
  name: "SliderButton"
});
const _sfc_main = /* @__PURE__ */ defineComponent({
  ...__default__,
  props: sliderButtonProps,
  emits: sliderButtonEmits,
  setup(__props, { expose, emit }) {
    const props = __props;
    const initData = reactive({
      hovering: false,
      dragging: false,
      isClick: false,
      startX: 0,
      currentX: 0,
      startY: 0,
      currentY: 0,
      startPosition: 0,
      newPosition: 0,
      oldValue: props.modelValue
    });
    const { namespace } = useNamespace("popover");
    const {
      disabled,
      button,
      tooltip,
      showTooltip,
      tooltipVisible,
      wrapperStyle,
      formatValue,
      handleMouseEnter,
      handleMouseLeave,
      onButtonDown,
      onKeyDown,
      setPosition
    } = useSliderButton(props, initData, emit);
    const { hovering, dragging } = toRefs(initData);
    expose({
      onButtonDown,
      onKeyDown,
      setPosition,
      hovering,
      dragging
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", {
        ref_key: "button",
        ref: button,
        class: normalizeClass(["slider-handle-wrap", { hover: unref(hovering), dragging: unref(dragging) }]),
        style: normalizeStyle(unref(wrapperStyle)),
        tabindex: unref(disabled) ? -1 : 0,
        onMouseenter: unref(handleMouseEnter),
        onMouseleave: unref(handleMouseLeave),
        onMousedown: unref(onButtonDown),
        onFocus: unref(handleMouseEnter),
        onBlur: unref(handleMouseLeave),
        onKeydown: unref(onKeyDown)
      }, [
        createVNode(unref(HlTooltip), {
          ref_key: "tooltip",
          ref: tooltip,
          visible: unref(tooltipVisible),
          placement: _ctx.placement,
          "fallback-placements": ["top", "bottom", "right", "left"],
          effect: unref(Effect).DARK,
          "stop-popper-mouse-event": false,
          "popper-class": `${_ctx.tooltipClass} tooltip ${unref(namespace)}`,
          disabled: !unref(showTooltip),
          persistent: ""
        }, {
          content: withCtx(() => [
            createElementVNode("span", null, toDisplayString(unref(formatValue)), 1)
          ]),
          default: withCtx(() => [
            createElementVNode("div", {
              class: normalizeClass(["slider-handle", { hover: unref(hovering), dragging: unref(dragging) }])
            }, null, 2)
          ]),
          _: 1
        }, 8, ["visible", "placement", "effect", "popper-class", "disabled"])
      ], 46, ["tabindex", "onMouseenter", "onMouseleave", "onMousedown", "onFocus", "onBlur", "onKeydown"]);
    };
  }
});

export { _sfc_main as default };
//# sourceMappingURL=button2.mjs.map