winbox-ui-next
Version:
We Design Vue 2.0: A Vue.js 3 UI Library
105 lines (104 loc) • 2.77 kB
JavaScript
;
var vue = require("vue");
var seemly = require("seemly");
var utils = require("./utils.js");
require("../_utils/vue/wrapper.js");
require("../_utils/cssr/index.js");
require("../_utils/composable/use-adjusted-to.js");
require("vueuc");
require("../_utils/composable/use-lock-html-scroll.js");
require("../_utils/composable/use-is-composing.js");
function normalizeColor(color, mode) {
if (mode === "hsv") {
const [h, s, v, a] = seemly.hsva(color);
return seemly.toRgbaString([...seemly.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 = vue.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 = vue.computed(() => props.swatches.map((value) => {
const mode = utils.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 utils.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 vue.createVNode("div", {
"class": `${clsPrefix}-color-picker-swatches`
}, [this.parsedSwatchesRef.map((swatch) => vue.createVNode("div", {
"class": `${clsPrefix}-color-picker-swatch`,
"tabindex": 0,
"onClick": () => this.handleSwatchSelect(swatch),
"onKeydown": (e) => this.handleSwatchKeyDown(e, swatch)
}, [vue.createVNode("div", {
"class": `${clsPrefix}-color-picker-swatch__fill`,
"style": {
background: swatch.legalValue
}
}, null)]))]);
}
});
module.exports = ColorPickerSwatches;