winbox-ui-next
Version:
We Design Vue 2.0: A Vue.js 3 UI Library
59 lines (58 loc) • 1.42 kB
JavaScript
;
var vue = require("vue");
var utils = require("./utils.js");
var ColorPreview = vue.defineComponent({
name: "ColorPreview",
props: {
clsPrefix: {
type: String,
required: true
},
mode: {
type: String,
required: true
},
color: {
type: String,
default: null,
validator: (value) => {
const mode = utils.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, utils.convertColor(value.toUpperCase(), props.mode, "hex"));
e.stopPropagation();
}
return {
handleChange
};
},
render() {
const {
clsPrefix
} = this;
return vue.createVNode("div", {
"class": `${clsPrefix}-color-picker-preview__preview`
}, [vue.createVNode("span", {
"class": `${clsPrefix}-color-picker-preview__fill`,
"style": {
background: this.color || "#000000"
}
}, null), vue.createVNode("input", {
"class": `${clsPrefix}-color-picker-preview__input`,
"type": "color",
"value": this.color,
"onChange": this.handleChange
}, null)]);
}
});
module.exports = ColorPreview;