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

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

"use strict";
var vue = require("vue");
var seemly = require("seemly");
var context = require("./context.js");
var index = require("../../icon/icon-down/index.js");
var ColorPickerTrigger = vue.defineComponent({
  name: "ColorPickerTrigger",
  components: {
    IconCheck: index
  },
  props: {
    clsPrefix: {
      type: String,
      required: true
    },
    value: {
      type: String,
      default: null
    },
    hsla: {
      type: Array,
      default: null
    },
    disabled: Boolean,
    onClick: Function
  },
  setup(props) {
    const {
      colorPickerSlots,
      renderLabelRef
    } = vue.inject(context.colorPickerInjectionKey, null);
    return () => {
      const {
        hsla,
        value,
        clsPrefix,
        onClick,
        disabled
      } = props;
      const renderLabel = colorPickerSlots.label || renderLabelRef.value;
      return vue.createVNode("div", {
        "class": [`${clsPrefix}-color-picker-trigger`, disabled && `${clsPrefix}-color-picker-trigger--disabled`],
        "onClick": disabled ? void 0 : onClick
      }, [vue.createVNode("div", {
        "class": `${clsPrefix}-color-picker-trigger__fill`
      }, [vue.createVNode("div", {
        "class": `${clsPrefix}-color-picker-checkboard`
      }, null), vue.createVNode("div", {
        "style": {
          position: "absolute",
          left: 0,
          right: 0,
          top: 0,
          bottom: 0,
          backgroundColor: hsla ? seemly.toHslaString(hsla) : ""
        }
      }, null), value && hsla ? vue.createVNode("div", {
        "class": `${clsPrefix}-color-picker-trigger__value`,
        "style": {
          color: hsla[2] > 50 || hsla[3] < 0.5 ? "white" : "white"
        }
      }, [renderLabel ? renderLabel(value) : vue.createVNode(vue.resolveComponent("icon-check"), null, null)]) : null])]);
    };
  }
});
module.exports = ColorPickerTrigger;