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

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

import { defineComponent, inject, createVNode, resolveComponent } from "vue";
import { toHslaString } from "seemly";
import { colorPickerInjectionKey } from "./context.js";
import IconDown from "../../icon/icon-down/index.js";
var ColorPickerTrigger = defineComponent({
  name: "ColorPickerTrigger",
  components: {
    IconCheck: IconDown
  },
  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
    } = inject(colorPickerInjectionKey, null);
    return () => {
      const {
        hsla,
        value,
        clsPrefix,
        onClick,
        disabled
      } = props;
      const renderLabel = colorPickerSlots.label || renderLabelRef.value;
      return createVNode("div", {
        "class": [`${clsPrefix}-color-picker-trigger`, disabled && `${clsPrefix}-color-picker-trigger--disabled`],
        "onClick": disabled ? void 0 : onClick
      }, [createVNode("div", {
        "class": `${clsPrefix}-color-picker-trigger__fill`
      }, [createVNode("div", {
        "class": `${clsPrefix}-color-picker-checkboard`
      }, null), createVNode("div", {
        "style": {
          position: "absolute",
          left: 0,
          right: 0,
          top: 0,
          bottom: 0,
          backgroundColor: hsla ? toHslaString(hsla) : ""
        }
      }, null), value && hsla ? createVNode("div", {
        "class": `${clsPrefix}-color-picker-trigger__value`,
        "style": {
          color: hsla[2] > 50 || hsla[3] < 0.5 ? "white" : "white"
        }
      }, [renderLabel ? renderLabel(value) : createVNode(resolveComponent("icon-check"), null, null)]) : null])]);
    };
  }
});
export { ColorPickerTrigger as default };