winbox-ui-next/es/slider/slider-button.js

We Design Vue 2.0: A Vue.js 3 UI Library

import { defineComponent, ref, computed, resolveComponent, openBlock, createBlock, withCtx, createElementVNode, mergeProps, withModifiers } from "vue";
import { getPrefixCls } from "../_utils/global-config.js";
import Tooltip from "../tooltip/index.js";
import { on, off } from "../_utils/dom.js";
import _export_sfc from "../_virtual/plugin-vue_export-helper";
const _sfc_main = defineComponent({
  name: "SliderButton",
  components: {
    Tooltip
  },
  inheritAttrs: false,
  props: {
    direction: {
      type: String,
      default: "horizontal"
    },
    disabled: {
      type: Boolean,
      default: false
    },
    formatTooltip: {
      type: Function
    },
    value: [String, Number],
    tooltipPosition: {
      type: String
    }
  },
  emits: ["movestart", "moving", "moveend"],
  setup(props, { emit }) {
    const prefixCls = getPrefixCls("slider-btn");
    const isDragging = ref(false);
    const handleMouseDown = (e) => {
      if (props.disabled) {
        return;
      }
      e.preventDefault();
      isDragging.value = true;
      on(window, "mousemove", handleMouseMove);
      on(window, "mouseup", handleMouseUp);
      on(window, "contextmenu", handleMouseUp);
      emit("movestart");
    };
    const handleMouseMove = (e) => {
      emit("moving", e.clientX, e.clientY);
    };
    const handleMouseUp = () => {
      isDragging.value = false;
      off(window, "mousemove", handleMouseMove);
      off(window, "mouseup", handleMouseUp);
      emit("moveend");
    };
    const cls = computed(() => [prefixCls]);
    const mergedTooltipPosition = computed(() => {
      var _a;
      return ((_a = props.tooltipPosition) != null ? _a : props.direction === "vertical") ? "right" : "top";
    });
    const tooltipContent = computed(() => {
      var _a, _b;
      return (_b = (_a = props.formatTooltip) == null ? void 0 : _a.call(props, props.value)) != null ? _b : `${props.value}`;
    });
    return {
      prefixCls,
      cls,
      tooltipContent,
      mergedTooltipPosition,
      isDragging,
      handleMouseDown
    };
  }
});
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_tooltip = resolveComponent("tooltip");
  return openBlock(), createBlock(_component_tooltip, {
    "popup-visible": _ctx.isDragging ? true : void 0,
    position: _ctx.mergedTooltipPosition,
    content: _ctx.tooltipContent
  }, {
    default: withCtx(() => [
      createElementVNode("div", mergeProps(_ctx.$attrs, {
        class: _ctx.cls,
        onMousedown: _cache[0] || (_cache[0] = (...args) => _ctx.handleMouseDown && _ctx.handleMouseDown(...args)),
        onClick: _cache[1] || (_cache[1] = withModifiers(() => {
        }, ["stop"]))
      }), null, 16)
    ]),
    _: 1
  }, 8, ["popup-visible", "position", "content"]);
}
var SliderButton = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export { SliderButton as default };