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

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

import { defineComponent, createVNode } from "vue";
import { getModeFromValue, convertColor } from "./utils.js";
var ColorPreview = defineComponent({
  name: "ColorPreview",
  props: {
    clsPrefix: {
      type: String,
      required: true
    },
    mode: {
      type: String,
      required: true
    },
    color: {
      type: String,
      default: null,
      validator: (value) => {
        const mode = getModeFromValue(value);
        return Boolean(!value || mode && mode !== "hsv");
      }
    },
    onUpdateColor: {
      type: Function,
      required: true
    }
  },
  setup(props) {
    function handleChange(e) {
      var _a;
      const value = e.target.value;
      (_a = props.onUpdateColor) == null ? void 0 : _a.call(props, convertColor(value.toUpperCase(), props.mode, "hex"));
      e.stopPropagation();
    }
    return {
      handleChange
    };
  },
  render() {
    const {
      clsPrefix
    } = this;
    return createVNode("div", {
      "class": `${clsPrefix}-color-picker-preview__preview`
    }, [createVNode("span", {
      "class": `${clsPrefix}-color-picker-preview__fill`,
      "style": {
        background: this.color || "#000000"
      }
    }, null), createVNode("input", {
      "class": `${clsPrefix}-color-picker-preview__input`,
      "type": "color",
      "value": this.color,
      "onChange": this.handleChange
    }, null)]);
  }
});
export { ColorPreview as default };