Merge pull request #27 from kevinkosterr/master

New release

Author: kevinkosterr

__tests__/components/fields/FieldColor.spec.js

@@ -10,7 +10,8 @@ const form = generateSchemaSingleField(
   'input',
   'color',
   'Pick a color',
-  ''
+  '',
+  {}
 )
 
 const props = generatePropsSingleField(form)
@@ -30,9 +31,21 @@ describe('FieldColor', () => {
     expect(formWrapper.find('input[type=color]').exists()).toBe(true)
   })
 
+  it('Should render correctly, with input', async () => {
+    config.global.components = { FieldColor }
+
+    const schema = { ...form.schema }
+    schema.fields[0].withInput = true
+    const formWrapper = mountFormGenerator(schema, form.model)
+
+    expect(formWrapper.findComponent(FieldColor).exists()).toBe(true)
+    expect(formWrapper.find('input[type=color]').exists()).toBe(true)
+    expect(formWrapper.find('input[type=text]').exists()).toBe(true)
+  })
+
   it('Should emit onInput event', async () => {
     const wrapper = mount(FieldColor, { props })
-    await wrapper.find('input[type=color]').trigger('change')
+    await wrapper.find('input[type=color]').trigger('input')
     expect(wrapper.emitted()).toHaveProperty('onInput')
   })
 
@@ -47,4 +60,30 @@ describe('FieldColor', () => {
     expect(formWrapper.vm.model.colorModel).toBe('#efefef')
   })
 
+  it ('Should update model value and sync values', async () => {
+    config.global.components = { FieldColor }
+
+    const schema = { ...form.schema }
+    schema.fields[0].withInput = true
+    const formWrapper = mountFormGenerator(schema, form.model)
+
+    const wrapper = formWrapper.findComponent(FieldColor)
+    wrapper.find('input[type=text]').setValue('#f00000')
+    expect(wrapper.emitted()).toHaveProperty('onInput', [  [ '#f00000' ] ])
+    expect(formWrapper.vm.model.colorModel).toBe('#f00000')
+    // Wait for the DOM to update.
+    await wrapper.vm.$nextTick()
+    expect(wrapper.find('input[type=color').attributes().value).toBe('#f00000')
+
+    // Clear emitted events for next interaction test.
+    wrapper.emitted().onInput = []
+
+    wrapper.find('input[type=color]').setValue('#ff0000')
+    expect(wrapper.emitted()).toHaveProperty('onInput', [  [ '#ff0000' ] ])
+    expect(formWrapper.vm.model.colorModel).toBe('#ff0000')
+    // Wait for the DOM to update.
+    await wrapper.vm.$nextTick()
+    expect(wrapper.find('input[type=text]').attributes().value).toBe('#ff0000')
+  })
+
 })

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/fields/core/FieldNumber.vue

@@ -1,6 +1,6 @@
 <template>
   <input
-    :id="id"
+    :id="props.id"
     type="number"
     :name="field.name"
     :required="isRequired"
@@ -10,6 +10,7 @@
     :max="field.max || undefined"
     :min="field.min || undefined"
     :step="field.step || 1"
+    inputmode="numeric"
     @input="onFieldValueChanged"
     @blur="onBlur"
   >

src/scss/modules/_base.scss

@@ -1,5 +1,6 @@
 .vfg-fi {
   display: flex;
+  align-items: center;
 
   svg {
     height: 18px;

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;
 
@@ -100,6 +101,9 @@ $input-padding: .3rem .4rem;
       border: none;
       padding: 0;
     }
+    &:hover {
+      cursor: pointer;
+    }
   }
   /** End of color field */
 

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)'
 }
 
 /**