winbox-ui-next/lib/color-picker/src/HueSlider.js

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

"use strict";
var vue = require("vue");
var evtd = require("evtd");
var utils = require("./utils.js");
const HANDLE_SIZE = "12px";
const HANDLE_SIZE_NUM = 12;
const RADIUS = "6px";
const RADIUS_NUM = 6;
const GRADIENT = "linear-gradient(90deg,red,#ff0 16.66%,#0f0 33.33%,#0ff 50%,#00f 66.66%,#f0f 83.33%,red)";
var HueSlider = vue.defineComponent({
  name: "HueSlider",
  props: {
    clsPrefix: {
      type: String,
      required: true
    },
    hue: {
      type: Number,
      required: true
    },
    onUpdateHue: {
      type: Function,
      required: true
    },
    onComplete: Function
  },
  setup(props) {
    const railRef = vue.ref(null);
    function handleMouseDown(e) {
      if (!railRef.value)
        return;
      evtd.on("mousemove", document, handleMouseMove);
      evtd.on("mouseup", document, handleMouseUp);
      handleMouseMove(e);
    }
    function handleMouseMove(e) {
      const {
        value: railEl
      } = railRef;
      if (!railEl)
        return;
      const {
        width,
        left
      } = railEl.getBoundingClientRect();
      const newHue = utils.normalizeHue((e.clientX - left - RADIUS_NUM) / (width - HANDLE_SIZE_NUM) * 360);
      props.onUpdateHue(newHue);
    }
    function handleMouseUp() {
      var _a;
      evtd.off("mousemove", document, handleMouseMove);
      evtd.off("mouseup", document, handleMouseUp);
      (_a = props.onComplete) == null ? void 0 : _a.call(props);
    }
    return {
      railRef,
      handleMouseDown
    };
  },
  render() {
    const {
      clsPrefix
    } = this;
    return vue.createVNode("div", {
      "class": `${clsPrefix}-color-picker-slider`,
      "style": {
        height: HANDLE_SIZE,
        borderRadius: RADIUS
      }
    }, [vue.createVNode("div", {
      "ref": "railRef",
      "style": {
        boxShadow: "inset 0 0 2px 0 rgba(0, 0, 0, .24)",
        boxSizing: "border-box",
        backgroundImage: GRADIENT,
        height: HANDLE_SIZE,
        borderRadius: RADIUS,
        position: "relative"
      },
      "onMousedown": this.handleMouseDown
    }, [vue.createVNode("div", {
      "style": {
        position: "absolute",
        left: RADIUS,
        right: RADIUS,
        top: 0,
        bottom: 0
      }
    }, [vue.createVNode("div", {
      "class": `${clsPrefix}-color-picker-handle`,
      "style": {
        left: `calc((${this.hue}%) / 359 * 100 - ${RADIUS})`,
        borderRadius: RADIUS,
        width: HANDLE_SIZE,
        height: HANDLE_SIZE
      }
    }, [vue.createVNode("div", {
      "class": `${clsPrefix}-color-picker-handle__fill`,
      "style": {
        backgroundColor: `hsl(${this.hue}, 100%, 50%)`,
        borderRadius: RADIUS,
        width: HANDLE_SIZE,
        height: HANDLE_SIZE
      }
    }, null)])])])]);
  }
});
module.exports = HueSlider;