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

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

import { defineComponent, computed, createVNode } from "vue";
import { hsva, toRgbaString, hsv2rgb } from "seemly";
import { getModeFromValue, convertColor } from "./utils.js";
import "../_utils/vue/wrapper.js";
import "../_utils/cssr/index.js";
import "../_utils/composable/use-adjusted-to.js";
import "vueuc";
import "../_utils/composable/use-lock-html-scroll.js";
import "../_utils/composable/use-is-composing.js";
function normalizeColor(color, mode) {
  if (mode === "hsv") {
    const [h, s, v, a] = hsva(color);
    return toRgbaString([...hsv2rgb(h, s, v), a]);
  }
  return color;
}
function getHexFromName(color) {
  const ctx = document.createElement("canvas").getContext("2d");
  ctx.fillStyle = color;
  return ctx.fillStyle;
}
var ColorPickerSwatches = defineComponent({
  name: "ColorPickerSwatches",
  props: {
    clsPrefix: {
      type: String,
      required: true
    },
    mode: {
      type: String,
      required: true
    },
    swatches: {
      type: Array,
      required: true
    },
    onUpdateColor: {
      type: Function,
      required: true
    }
  },
  setup(props) {
    const parsedSwatchesRef = computed(() => props.swatches.map((value) => {
      const mode = getModeFromValue(value);
      return {
        value,
        mode,
        legalValue: normalizeColor(value, mode)
      };
    }));
    function normalizeOutput(parsed) {
      const {
        mode: modeProp
      } = props;
      let {
        value,
        mode: swatchColorMode
      } = parsed;
      if (!swatchColorMode) {
        swatchColorMode = "hex";
        if (/^[a-zA-Z]+$/.test(value)) {
          value = getHexFromName(value);
        } else {
          value = "#000000";
        }
      }
      if (swatchColorMode === modeProp)
        return value;
      return convertColor(value, modeProp, swatchColorMode);
    }
    function handleSwatchSelect(parsed) {
      props.onUpdateColor(normalizeOutput(parsed));
    }
    function handleSwatchKeyDown(e, parsed) {
      if (e.key === "Enter")
        handleSwatchSelect(parsed);
    }
    return {
      parsedSwatchesRef,
      handleSwatchSelect,
      handleSwatchKeyDown
    };
  },
  render() {
    const {
      clsPrefix
    } = this;
    return createVNode("div", {
      "class": `${clsPrefix}-color-picker-swatches`
    }, [this.parsedSwatchesRef.map((swatch) => createVNode("div", {
      "class": `${clsPrefix}-color-picker-swatch`,
      "tabindex": 0,
      "onClick": () => this.handleSwatchSelect(swatch),
      "onKeydown": (e) => this.handleSwatchKeyDown(e, swatch)
    }, [createVNode("div", {
      "class": `${clsPrefix}-color-picker-swatch__fill`,
      "style": {
        background: swatch.legalValue
      }
    }, null)]))]);
  }
});
export { ColorPickerSwatches as default };