winbox-ui-next/es/color-picker/src/ColorInput.js

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

import { defineComponent, createVNode, resolveComponent } from "vue";
import { toHexaString, toHexString, toHslaString, toHslString, toRgbaString, toRgbString, toHsvaString, toHsvString } from "seemly";
import ColorInputUnit from "./ColorInputUnit.js";
var ColorInput = defineComponent({
  name: "ColorInput",
  props: {
    clsPrefix: {
      type: String,
      required: true
    },
    mode: {
      type: String,
      required: true
    },
    modes: {
      type: Array,
      required: true
    },
    showAlpha: {
      type: Boolean,
      required: true
    },
    value: {
      type: String,
      default: null
    },
    valueArr: {
      type: Array,
      default: null
    },
    onUpdateValue: {
      type: Function,
      required: true
    },
    onUpdateMode: {
      type: Function,
      required: true
    }
  },
  setup(props) {
    return {
      handleUnitUpdateValue(index, value) {
        const {
          showAlpha
        } = props;
        if (props.mode === "hex") {
          props.onUpdateValue((showAlpha ? toHexaString : toHexString)(value));
          return;
        }
        let nextValueArr;
        if (props.valueArr === null) {
          nextValueArr = [0, 0, 0, 0];
        } else {
          nextValueArr = Array.from(props.valueArr);
        }
        switch (props.mode) {
          case "hsv":
            nextValueArr[index] = value;
            props.onUpdateValue((showAlpha ? toHsvaString : toHsvString)(nextValueArr));
            break;
          case "rgb":
            nextValueArr[index] = value;
            props.onUpdateValue((showAlpha ? toRgbaString : toRgbString)(nextValueArr));
            break;
          case "hsl":
            nextValueArr[index] = value;
            props.onUpdateValue((showAlpha ? toHslaString : toHslString)(nextValueArr));
            break;
        }
      }
    };
  },
  render() {
    const {
      clsPrefix,
      modes
    } = this;
    return createVNode("div", {
      "class": `${clsPrefix}-color-picker-input`
    }, [createVNode("div", {
      "class": `${clsPrefix}-color-picker-input__mode`,
      "onClick": this.onUpdateMode,
      "style": {
        cursor: modes.length === 1 ? "" : "pointer"
      }
    }, [this.mode.toUpperCase() + (this.showAlpha ? "A" : "")]), createVNode(resolveComponent("w-input-group"), {
      "style": "width:100%;"
    }, {
      default: () => {
        const {
          mode,
          valueArr,
          showAlpha
        } = this;
        if (mode === "hex") {
          let hexValue = null;
          try {
            hexValue = valueArr === null ? null : (showAlpha ? toHexaString : toHexString)(valueArr);
          } catch {
          }
          return createVNode(ColorInputUnit, {
            "label": "HEX",
            "showAlpha": showAlpha,
            "value": hexValue,
            "onUpdateValue": (unitValue) => {
              this.handleUnitUpdateValue(0, unitValue);
            }
          }, null);
        }
        return (mode + (showAlpha ? "a" : "")).split("").map((v, i) => createVNode(ColorInputUnit, {
          "label": v.toUpperCase(),
          "value": valueArr === null ? null : valueArr[i],
          "onUpdateValue": (unitValue) => {
            this.handleUnitUpdateValue(i, unitValue);
          }
        }, null));
      }
    })]);
  }
});
export { ColorInput as default };