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

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

"use strict";
var vue = require("vue");
var globalConfig = require("../_utils/global-config.js");
var index = require("../tooltip/index.js");
var dom = require("../_utils/dom.js");
var pluginVue_exportHelper = require("../_virtual/plugin-vue_export-helper");
const _sfc_main = vue.defineComponent({
  name: "SliderButton",
  components: {
    Tooltip: index
  },
  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 = globalConfig.getPrefixCls("slider-btn");
    const isDragging = vue.ref(false);
    const handleMouseDown = (e) => {
      if (props.disabled) {
        return;
      }
      e.preventDefault();
      isDragging.value = true;
      dom.on(window, "mousemove", handleMouseMove);
      dom.on(window, "mouseup", handleMouseUp);
      dom.on(window, "contextmenu", handleMouseUp);
      emit("movestart");
    };
    const handleMouseMove = (e) => {
      emit("moving", e.clientX, e.clientY);
    };
    const handleMouseUp = () => {
      isDragging.value = false;
      dom.off(window, "mousemove", handleMouseMove);
      dom.off(window, "mouseup", handleMouseUp);
      emit("moveend");
    };
    const cls = vue.computed(() => [prefixCls]);
    const mergedTooltipPosition = vue.computed(() => {
      var _a;
      return ((_a = props.tooltipPosition) != null ? _a : props.direction === "vertical") ? "right" : "top";
    });
    const tooltipContent = vue.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 = vue.resolveComponent("tooltip");
  return vue.openBlock(), vue.createBlock(_component_tooltip, {
    "popup-visible": _ctx.isDragging ? true : void 0,
    position: _ctx.mergedTooltipPosition,
    content: _ctx.tooltipContent
  }, {
    default: vue.withCtx(() => [
      vue.createElementVNode("div", vue.mergeProps(_ctx.$attrs, {
        class: _ctx.cls,
        onMousedown: _cache[0] || (_cache[0] = (...args) => _ctx.handleMouseDown && _ctx.handleMouseDown(...args)),
        onClick: _cache[1] || (_cache[1] = vue.withModifiers(() => {
        }, ["stop"]))
      }), null, 16)
    ]),
    _: 1
  }, 8, ["popup-visible", "position", "content"]);
}
var SliderButton = /* @__PURE__ */ pluginVue_exportHelper(_sfc_main, [["render", _sfc_render]]);
module.exports = SliderButton;