84 lines
2.8 KiB
JavaScript
84 lines
2.8 KiB
JavaScript
/*eslint no-console: "off" */
|
|
import {InitializePicker} from './hsluvpicker';
|
|
export default {
|
|
name: 'hsluv-picker',
|
|
props: {
|
|
value: {
|
|
type: String,
|
|
default: "#cccccc",
|
|
},
|
|
nodisplay: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
displaysize: {
|
|
type: String,
|
|
default: 300,
|
|
},
|
|
horizontal: {
|
|
type: Boolean,
|
|
default: false,
|
|
}
|
|
},
|
|
watch: {
|
|
value: function(newVal){
|
|
if(newVal != this.currentcolor){
|
|
this.$refs.picker.dispatchEvent(new CustomEvent('updatecolor', {detail: newVal}));
|
|
this.currentcolor = newVal;
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
currentcolor: "",
|
|
};
|
|
},
|
|
methods: {
|
|
onColorChange(event) {
|
|
this.currentcolor = event.detail;
|
|
this.$emit("input",event.detail);
|
|
}
|
|
},
|
|
mounted(){
|
|
this.currentcolor=this.value;
|
|
InitializePicker(this.$refs.picker, this.value);
|
|
},
|
|
template: `
|
|
<div ref="picker" @colorchange="onColorChange" :class="'vue-hsluv-picker'+(horizontal?' horizontal':'')">
|
|
<div v-if="!nodisplay" class="display">
|
|
<canvas :height="displaysize" :width="displaysize"></canvas>
|
|
</div>
|
|
<table class='picker'>
|
|
<tr class="control-h">
|
|
<td class="cell-input">
|
|
<input type="number" min="0" max="360" step="any" class="counter counter-hue" tabindex="0"/>
|
|
</td>
|
|
<td><div class="range-slider"></div></td>
|
|
<td class="picker-label">H</td>
|
|
</tr>
|
|
<tr class="control-s">
|
|
<td class="cell-input">
|
|
<input type="number" step="any" min="0" max="100" class="counter counter-saturation"/>
|
|
</td>
|
|
<td><div class="range-slider"></div></td>
|
|
<td class="picker-label">S</td>
|
|
</tr>
|
|
<tr class="control-l">
|
|
<td class="cell-input">
|
|
<input type="number" step="any" min="0" max="100" class="counter counter-lightness"/>
|
|
</td>
|
|
<td><div class="range-slider"></div></td>
|
|
<td class="picker-label">L</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="cell-input cell-input-hex">
|
|
<input ref="input" class="input-hex" pattern="#?[0-9a-fA-F]{6}"/>
|
|
</td>
|
|
<td><div class="swatch"></div></td>
|
|
<td></td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
`,
|
|
}; |