Merge branch 'gh-3793-update-colors'

assets/vue/components/basecomponents/BaseColorPicker.vue

@@ -6,21 +6,21 @@
       v-text="label"
     />
     <div class="flex flex-row gap-2 h-10">
-      <ColorPicker
-        format="hex"
-        :model-value="hexColor"
-        class="w-11"
-        @update:model-value="colorPicked"
+      <input
+        :value="hexColor"
+        class="h-12 w-12 cursor-pointer rounded-lg"
+        type="color"
+        @input="inputColorPicked($event.target.value)"
       />
       <BaseInputText
         label=""
         class="w-32"
         input-class="mb-0"
-        :model-value="hexColor"
+        :model-value="inputText"
         :error-text="inputHexError"
         :is-invalid="inputHexError !== ''"
         :form-submitted="inputHexError !== ''"
-        @update:model-value="colorPicked"
+        @update:model-value="inputColorPickedFromInputText"
       />
     </div>
     <small
@@ -37,9 +37,8 @@
 </template>
 
 <script setup>
-import ColorPicker from "primevue/colorpicker"
 import Color from "colorjs.io"
-import { computed, ref } from "vue"
+import { computed, onMounted, ref, watch } from "vue"
 import { useI18n } from "vue-i18n"
 import BaseInputText from "./BaseInputText.vue"
 
@@ -67,23 +66,27 @@ const hexColor = computed(() => {
   let hex = props.modelValue.toString({ format: "hex" })
   // convert #fff color format to full #ffffff, because otherwise input does not set the color right
   if (hex.length === 4) {
-    hex = hex + hex.slice(1)
+    hex = "#" + hex[1] + hex[1] + hex[2] + hex[2] + hex[3] + hex[3]
   }
   return hex
 })
 
 const inputHexError = ref("")
+const inputText = ref("")
 
-function colorPicked(newHexColor) {
-  inputHexError.value = ""
-  if (!newHexColor.startsWith("#")) {
-    newHexColor = `#${newHexColor}`
+function inputColorPickedFromInputText(newHexColor) {
+  // preserve text input when user is editing the field by hand
+  inputText.value = newHexColor
+  inputColorPicked(newHexColor)
 }
-  if (newHexColor.length < 7) {
+
+function inputColorPicked(newHexColor) {
+  inputHexError.value = ""
+  if (newHexColor.length !== 7) {
     inputHexError.value = t("Invalid format")
     return
   }
-
+  inputText.value = newHexColor
   try {
     let color = new Color(newHexColor)
     emit("update:modelValue", color)
@@ -91,4 +94,15 @@ function colorPicked(newHexColor) {
     inputHexError.value = t("Invalid format")
   }
 }
+
+watch(
+  () => props.modelValue,
+  () => {
+    inputText.value = hexColor.value
+  },
+)
+
+onMounted(() => {
+  inputText.value = hexColor.value
+})
 </script>