Vue - Component for RGB Colour Selection

Editor for Hex

by Ben Clayton

HTML

<script src="https://unpkg.com/vue"></script>
<div id="div1">
  Outer Colour: {{ colour }}<br/>
  Colour: <rgb-editor :param="getPropByRef('colour')" ></rgb-editor><br/>
	
</div>

CSS

.color-selector{
	border:1px solid gray;
	padding:5px;
	width:190px;
	font-size:12px;
}

.color-selector .colour-preview {
		height:10px;
		width:100%;
		border:1px solid gray;
}

JavaScript

Vue.component('rgb-editor', {
  props: ["param"],
	data: function(){
		return { r:0, g:0, b:0, h:0, s:0, l:0, rgb2hsl:0 }
	},
	computed: {
		rgb : function(){
		console.log('computed');
			return 'rgb(' + [this.r,this.g,this.b].join(',') + ')';
		},
	},
	watch:{
		r : function(){
			//this.rgbToHsl(this.r,this.g,this.b);
		},
		g : function(){
			//this.rgbToHsl(this.r,this.g,this.b);
		},
		b : function(){
			//this.rgbToHsl(this.r,this.g,this.b);
		},
		h : function(){
			this.hslToRgb(this.h,this.s,this.l)
		},
		s : function(){
			this.hslToRgb(this.h,this.s,this.l)
		},
		l : function(){
			this.hslToRgb(this.h,this.s,this.l)
		}
	
	},
  methods:{
		rgbToHsl : function(r, g, b) {
				if (this.rgb2hsl==-1) return;
				this.rgb2hsl=1;
				r /= 255, g /= 255, b /= 255;
				var max = Math.max(r, g, b), min = Math.min(r, g, b);
				var h,s,l;
				l = (max + min) / 2;

				if (max == min) {
					h = 0;
					s = 0; // achromatic
				} else {
					var d = max - min;
					s = l > 0.5 ? d / (2 - max - min) : d / (max + min);

					switch (max) {
						case r: h = (g - b) / d + (g < b ? 6 : 0); break;
						case g: h = (b - r) / d + 2; break;
						case b: h = (r - g) / d + 4; break;
					}

					h /= 6;
				}
				this.h =parseInt( h * 255);
				this.s =parseInt( s * 255);
				this.l =parseInt( l * 255);
				this.rgb2hsl=0;
			},
			hslToRgb:function(h, s, l) {
				if (this.rgb2hsl==1) return;
				this.rgb2hsl=-1;
				h /=255;s /=255;l /=255;
				var r, g, b;

				if (s == 0) {
					r = g = b = l; // achromatic
				} else {
					function hue2rgb(p, q, t) {
						if (t < 0) t += 1;
						if (t > 1) t -= 1;
						if (t < 1/6) return p + (q - p) * 6 * t;
						if (t < 1/2) return q;
						if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
						return p;
					}

					var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
					var p = 2 * l - q;

					r = hue2rgb(p, q, h + 1/3);
					g = hue2rgb(p, q, h);
					b = hue2rgb(p, q, h - 1/3);
				}

				this.r = parseInt( r *...