feat: native color picker instead of verte

Prepare for vue 3

package.json

@@ -27,7 +27,6 @@
     "register-service-worker": "1.7.2",
     "snake-case": "3.0.4",
     "ufo": "0.7.9",
-    "verte": "0.0.12",
     "vue": "2.6.14",
     "vue-advanced-cropper": "1.8.2",
     "vue-drag-resize": "1.5.4",

src/components/input/colorPicker.vue

@@ -1,31 +1,46 @@
 <template>
 	<div class="color-picker-container">
-		<verte
+		<datalist :id="colorListID">
-			:showHistory="true"
+			<option v-for="color in defaultColors" :key="color" :value="color" />
-			:colorHistory="[
+		</datalist>
-				'#1973ff',
+		
-				'#7F23FF',
+		<div class="picker">
-				'#ff4136',
+			<input
-				'#ff851b',
+				class="picker__input"
-				'#ffeb10',
+				type="color"
-				'#00db60',
-			]"
-			:enableAlpha="false"
-			:menuPosition="menuPosition"
-			:rgbSliders="true"
-			model="hex"
-			picker="square"
 				v-model="color"
-			:class="{'is-empty': empty}"
+				:list="colorListID"
+				:class="{'is-empty': isEmpty}"
 			/>
-		<x-button @click="reset" class="is-small ml-2" :shadow="false" type="secondary">
+			<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
 			}
 
@@ -88,17 +102,3 @@ 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>

src/styles/components/color-picker.scss

@@ -3,9 +3,46 @@
   justify-content: center;
   align-items: center;
 
-  .verte__guide {
+	// 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: 1px solid $grey-300;
+		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;
 	}
 }

yarn.lock

@@ -3030,11 +3030,6 @@ color-convert@^2.0.1:
   dependencies:
     color-name "~1.1.4"
 
-color-fns@^0.0.10:
-  version "0.0.10"
-  resolved "https://registry.yarnpkg.com/color-fns/-/color-fns-0.0.10.tgz#b03f34ab3bb3902ac24e7c86ff32d845fbbaf7bf"
-  integrity sha512-QFKowTE9CXCLp09Gz5cQo8VPUP55hf73iHEI52JC3NyKfMpQG2VoLWmTxYeTKH6ngkEnoMrCdEX//M6J4PVQBA==
-
 color-name@1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
@@ -7447,13 +7442,6 @@ verror@1.10.0:
     core-util-is "1.0.2"
     extsprintf "^1.2.0"
 
-verte@0.0.12:
-  version "0.0.12"
-  resolved "https://registry.yarnpkg.com/verte/-/verte-0.0.12.tgz#f91b3f82cf2d6ea81ac2ccad66bb9aefe7997503"
-  integrity sha512-QEWpKkjAT8SLkNJzeiZxN7tJuUiTTFO51tg9dGIrkDlQhzbaM+bTT0wtDM2c/F+Ur9luE64qhsM4xI0Af3Ut1g==
-  dependencies:
-    color-fns "^0.0.10"
-
 vite-plugin-pwa@0.11.2:
   version "0.11.2"
   resolved "https://registry.yarnpkg.com/vite-plugin-pwa/-/vite-plugin-pwa-0.11.2.tgz#21998b6b00b156c8f395700549a34fb9304db6cb"