vikunja-frontend/src/components/input/colorPicker.vue

<template>
	<div class="color-picker-container">
		<verte
			:enableAlpha="false"
			:menuPosition="menuPosition"
			:rgbSliders="true"
			model="hex"
			picker="square"
			v-model="color"/>
		<a @click="reset" class="reset">
			Reset Color
		</a>
	</div>
</template>

<script>
import verte from 'verte'
import 'verte/dist/verte.css'

export default {
	name: 'colorPicker',
	data() {
		return {
			color: '',
			lastChangeTimeout: null,
		}
	},
	components: {
		verte,
	},
	props: {
		value: {
			required: true,
		},
		menuPosition: {
			type: String,
			default: 'top',
		},
	},
	watch: {
		value(newVal) {
			this.color = newVal
		},
		color() {
			this.update()
		},
	},
	mounted() {
		this.color = this.value
	},
	methods: {
		update() {

			if (this.lastChangeTimeout !== null) {
				clearTimeout(this.lastChangeTimeout)
			}

			this.lastChangeTimeout = setTimeout(() => {
				this.$emit('input', this.color)
				this.$emit('change')
			}, 500)
		},
		reset() {
			// FIXME: I havn't found a way to make it clear to the user the color war reset.
			//  Not sure if verte is capable of this - it does not show the change when setting this.color = ''
			this.color = ''
			this.update()
		},
	},
}
</script>