feat(FieldColor): option for extra text input

Author: kevinkosterr

src/fields/core/FieldColor.vue

@@ -1,29 +1,52 @@
 <template>
-  <input
-    :id="props.id"
-    class="field-color"
-    type="color"
-    :name="props.field.name"
-    :value="currentModelValue"
-    :required="isRequired"
-    @change="onFieldValueChanged"
-    @blur="onBlur"
-  >
+  <div class="field-color-wrapper">
+    <input
+      v-if="props.field.withInput"
+      v-maska="maskOptions"
+      class="field-color-input"
+      type="text"
+      :value="currentModelValue"
+      placeholder="#ffffff"
+      @input="onFieldValueChanged"
+      @blur="onBlur"
+    >
+    <input
+      :id="props.id"
+      class="field-color"
+      type="color"
+      :name="props.field.name"
+      :value="currentModelValue"
+      :required="isRequired"
+      @input="onFieldValueChanged"
+      @blur="onBlur"
+    >
+  </div>
 </template>
 
 <script setup>
-import { toRefs } from 'vue'
+import validators from '@/validators'
+import { toRefs, onBeforeMount } from 'vue'
 import {
   useFormModel,
   useFieldAttributes,
   useFieldValidate,
   useFieldProps,
   useFieldEmits
 } from '@/composables/index.ts'
+import { vMaska } from 'maska/vue'
 
 const emits = defineEmits(useFieldEmits())
 const props = defineProps(useFieldProps())
 
+const maskOptions = {
+  mask: '!#HHHHHH',
+  tokens: {
+    H: {
+      pattern: /[A-Fa-f0-9]/
+    }
+  }
+}
+
 const { field, model } = toRefs(props)
 
 const { currentModelValue } = useFormModel(model.value, field.value)
@@ -38,7 +61,7 @@ const { errors, validate } = useFieldValidate(
 )
 
 const onBlur = () => {
-  validate().then((validationErrors) => {
+  validate(currentModelValue.value).then((validationErrors) => {
     emits('validated',
       validationErrors.length === 0,
       validationErrors,
@@ -49,8 +72,26 @@ const onBlur = () => {
 
 const onFieldValueChanged = ({ target }) => {
   errors.value = []
-  emits('onInput', target.value)
+  // Ensure a change doesn't emit twice, we need this because both inputs might trigger this function at once.
+  if (target.value !== currentModelValue.value) {
+    emits('onInput', target.value)
+  }
 }
 
-defineExpose({ isVisible })
+onBeforeMount(() => {
+  if (field.value.withInput) {
+    const fieldValidators = []
+    if (Array.isArray(field.value.validator)) {
+      fieldValidators.push(...field.value.validator)
+    } else if (field.value.validator !== undefined) {
+      fieldValidators.push(field.value.validator)
+    }
+    // Keep in mind that the native color picker only supports 6 digit hex codes,
+    // so even though a value might technically be valid, it won't display the right color on the color picker input.
+    fieldValidators.push(validators.hexColorValue)
+    field.value.validator = fieldValidators
+  }
+})
+
+defineExpose({ isVisible, errors })
 </script>

src/scss/shared/fieldColor.scss

@@ -0,0 +1,10 @@
+.field-color-wrapper {
+  display: flex;
+  flex-direction: row-reverse;
+  align-items: stretch;
+  justify-content: start;
+
+  .field-color-input {
+    max-width: 100px;
+  }
+}

src/scss/themes/basic.scss

@@ -3,6 +3,7 @@
 @import '../modules/base';
 @import '../modules/colors';
 @import '../shared/fieldSelect';
+@import '../shared/fieldColor';
 
 $input-padding: .3rem .4rem;
 

src/scss/themes/legacy.scss

@@ -1,5 +1,6 @@
 @import '../modules/colors';
 @import '../shared/fieldSelect';
+@import '../shared/fieldColor';
 
 $field-switch-width: 120px;
 $field-switch-height: 30px;

src/validators/index.ts

@@ -75,7 +75,6 @@ export default {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   email (value: FieldValue, field: Field, model: Record<string, any>): boolean {
     if (typeof value !== 'string') return false
-    // eslint-disable-next-line max-len
     const regex = new RegExp('^([^<>()\\[\\]\\\\.,;:\\s@"]+(?:\\.[^<>()\\[\\]\\\\.,;:\\s@"]+)*|".+")@(\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}]|(?:[a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,})$', 'i')
     return Boolean(value.match(regex))
   },
@@ -89,7 +88,6 @@ export default {
     if (typeof value !== 'string') return false
 
     const regex = new RegExp(
-      // eslint-disable-next-line max-len
       '^\\+\\d{1,3}\\s\\d{2,3}\\s\\d{2,3}\\s\\d{4}|^\\+\\d{1,3}\\s\\d{1,14}(\\s\\d{1,13})?|^\\(\\d{3}\\)\\s\\d{3}\\s\\d{4}?',
       'i'
     )
@@ -106,6 +104,18 @@ export default {
 
     const regex = new RegExp('(\\+316[0-9]{8})|(06[0-9]{8})', 'i')
     return Boolean(value.match(regex))
+  },
+
+  /**
+   * Check if a value is a valid HEX color value.
+   * @returns {boolean} - Returns `true` if value matches the format, otherwise false.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  hexColorValue (value: FieldValue, field: Field, model: Record<string, any>): boolean {
+    if (typeof value !== 'string') return false
+
+    const regex = new RegExp('^\#([a-f0-9]{3}|[a-f0-9]{6})$', 'i')
+    return Boolean(value.match(regex))
   }
 
 

src/validators/messages.ts

@@ -4,7 +4,8 @@ let messages: Record<string, string> = {
   number: 'Value must be a number',
   email: 'E-mail is invalid',
   phoneNumberE164andE123: 'Phone number is invalid (must be valid E164 or E123 format, e.g. +31 612345678)',
-  mobilePhoneNL: 'Phone number is invalid (must be a valid Dutch phone number, e.g. +31612345678)'
+  mobilePhoneNL: 'Phone number is invalid (must be a valid Dutch phone number, e.g. +31612345678)',
+  hexColorValue: 'Invalid hex value (e.g. #ff0000 or #ff0)'
 }
 
 /**