feat: native color picker instead of verte

Prepare for vue 3

src/components/input/colorPicker.vue

@@ -1,31 +1,46 @@
 <template>
 	<div class="color-picker-container">
-		<verte
-			:showHistory="true"
-			:colorHistory="[
-				'#1973ff',
-				'#7F23FF',
-				'#ff4136',
-				'#ff851b',
-				'#ffeb10',
-				'#00db60',
-			]"
-			:enableAlpha="false"
-			:menuPosition="menuPosition"
-			:rgbSliders="true"
-			model="hex"
-			picker="square"
-			v-model="color"
-			:class="{'is-empty': empty}"
-		/>
-		<x-button @click="reset" class="is-small ml-2" :shadow="false" type="secondary">
+		<datalist :id="colorListID">
+			<option v-for="color in defaultColors" :key="color" :value="color" />
+		</datalist>
+		
+		<div class="picker">
+			<input
+				class="picker__input"
+				type="color"
+				v-model="color"
+				:list="colorListID"
+				:class="{'is-empty': isEmpty}"
+			/>
+			<svg class="picker__pattern" v-show="isEmpty" viewBox="0 0 22 22" fill="fff">
+				<pattern id="checker" width="11" height="11" patternUnits="userSpaceOnUse" fill="FFF">
+					<rect fill="#cccccc" x="0" width="5.5" height="5.5" y="0"></rect>
+					<rect fill="#cccccc" x="5.5" width="5.5" height="5.5" y="5.5"></rect>
+				</pattern>
+				<rect width="22" height="22" fill="url(#checker)"></rect>
+			</svg>
+		</div>
+
+		<x-button :disabled="isEmpty" @click="reset" class="is-small ml-2" :shadow="false" type="secondary">
 			{{ $t('input.resetColor') }}
 		</x-button>
 	</div>
 </template>
 
 <script>
-import verte from 'verte'
+const DEFAULT_COLORS = [
+	'#1973ff',
+	'#7F23FF',
+	'#ff4136',
+	'#ff851b',
+	'#ffeb10',
+	'#00db60',
+]
+
+function createRandomID() {
+	const ID_LENGTH = 9
+	return Math.random().toString(36).substr(2, ID_LENGTH)
+}
 
 export default {
 	name: 'colorPicker',
@@ -33,11 +48,10 @@ export default {
 		return {
 			color: '',
 			lastChangeTimeout: null,
+			defaultColors: DEFAULT_COLORS,
+			colorListID: createRandomID(),
 		}
 	},
-	components: {
-		verte,
-	},
 	props: {
 		value: {
 			required: true,
@@ -59,14 +73,14 @@ export default {
 		},
 	},
 	computed: {
-		empty() {
+		isEmpty() {
 			return this.color === '#000000' || this.color === ''
 		},
 	},
 	methods: {
 		update(force = false) {
 
-			if(this.empty && !force) {
+			if(this.isEmpty && !force) {
 				return
 			}
 
@@ -87,18 +101,4 @@ export default {
 		},
 	},
 }
-</script>
-
-<style lang="scss">
-@import 'verte/dist/verte.css';
-
-.verte.is-empty {
-	.verte__icon {
-		opacity: 0;
-	}
-
-	.verte__guide {
-		background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGklEQVQYlWM4c+bMf3TMgA0MBYWDzDkUKQQAlHCpV9ycHeMAAAAASUVORK5CYII=);
-	}
-}
-</style>
+</script>

src/styles/components/color-picker.scss

@@ -3,9 +3,46 @@
   justify-content: center;
   align-items: center;
 
-  .verte__guide {
-    border-radius: 100%;
-    border: 1px solid $grey-300;
-    box-shadow: $card-shadow;
-  }
+	// reset / see https://stackoverflow.com/a/11471224/15522256
+	input[type="color"] {
+		-webkit-appearance: none;
+		border: none;
+	}
+	input[type="color"]::-webkit-color-swatch-wrapper {
+		padding: 0;
+	}
+	input[type="color"]::-webkit-color-swatch {
+		border: none;
+	}
+
+	$PICKER_SIZE: 24px;
+	$BORDER_WIDTH: 1px;
+	.picker {
+		display: grid;
+		width: $PICKER_SIZE;
+		height: $PICKER_SIZE;
+		overflow: hidden;
+		border-radius: 100%;
+		border: $BORDER_WIDTH solid $grey-300;
+		box-shadow: $card-shadow;
+
+		& > * {
+			grid-row: 1;
+			grid-column: 1;
+		}
+	}
+
+	input.picker__input {
+		padding: 0;
+		width: $PICKER_SIZE - 2 * $BORDER_WIDTH;
+		height: $PICKER_SIZE - 2 * $BORDER_WIDTH;
+	}
+
+	.picker__input.is-empty {
+		opacity: 0;
+	}
+	
+	.picker__pattern {
+		pointer-events: none;
+	}
 }