Merge pull request #40 from 14nrv/dev

Merge Dev

README.md

@@ -8,13 +8,13 @@
 
 [![Edit vue-form-json-demo](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/mxow346yj?autoresize=1&hidenavigation=1&module=%2Fsrc%2FApp.vue&view=preview)
 
-## Generate a responsive vue form with validation and bulma style, from [json](https://github.com/14nrv/vue-form-json/blob/master/src/components/Form/fields.json)
+## Generate a responsive vue form with validation, from [an array](https://github.com/14nrv/vue-form-json/blob/master/src/components/Form/fields.json)
 All fields are required and input text by default.
 Once submitted, an event 'formSubmitted' is emitted on $root with the formName and all values.
 
 ## Key Features
 - [x] Generate a form from json / array (formFields props)
-- [x] Bulma style
+- [x] Bulma classes by default (that can be overwritten)
 - [x] Responsive
 - [x] Fields on multiples columns
   ```js
@@ -24,16 +24,18 @@ Once submitted, an event 'formSubmitted' is emitted on $root with the formName a
   ```js
   const formFields = [{ label: 'the label', value: 'the value' }]
   ```
-- [x] Validation & VeeValidate [simple rules validation](https://baianat.github.io/vee-validate/guide/rules.html)
+- [x] [Simple rules validation](https://logaretm.github.io/vee-validate/guide/rules.html#rules)
   ```js
   const formFields = [{ label: 'the label', rules: { is_not: 'label' } }]
   ```
+- [x] Cross field validation
 - [x] Custom attr (class, data-*, ...) on .field & real fields (input, textarea...)
   ```js
   const formFields = [{
-    label: 'the label',
     attr: { class: 'classOnInput' },
-    field: { attr: { class: 'classOnFieldClassName' } }
+    alternativeLabel: 'an alternative label text that will be displayed',
+    field: { attr: { class: 'classOnFieldClassName' } },
+    label: 'the label'
   }]
   ```
 - [x] Named slot everywhere inside form

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-form-json",
   "version": "3.0.1",
-  "description": "Generate a vue form with validation and bulma style, from json",
+  "description": "Generate a vue form with validation from an array",
   "author": "14nrv",
   "license": "MIT",
   "scripts": {
@@ -10,7 +10,7 @@
     "build": "vue-cli-service build --formats commonjs,umd-min --target lib --name vue-form-json ./src/components/Form/Form.vue",
     "lint": "vue-cli-service lint",
     "test": "NODE_ENV=test vue-cli-service test:unit --coverage",
-    "test:tdd": "NODE_ENV=test vue-cli-service test:unit --coverage --watchAll",
+    "test:tdd": "yarn test --watchAll",
     "semantic-release": "semantic-release"
   },
   "husky": {
@@ -64,7 +64,7 @@
   "dependencies": {
     "ramda": "^0.27.0",
     "slugify": "^1.4.4",
-    "vee-validate": "^3.4.0",
+    "vee-validate": "^3.4.2",
     "vue": "^2.6.12"
   },
   "devDependencies": {

src/components/Fields/Control.vue

@@ -3,7 +3,7 @@
     tag="div"
     :vid="item.vid"
     :rules="getRules"
-    :name="item.name || item.label"
+    :name="item.name || item.label | slugify"
     :immediate="!!item.value"
     v-slot="{ errors, required, ariaInput }")
 
@@ -22,6 +22,7 @@
 </template>
 
 <script>
+import { slug } from '@/helpers'
 import Input from '@/components/Fields/Input'
 import Select from '@/components/Fields/Select'
 import Textarea from '@/components/Fields/Textarea'
@@ -32,6 +33,9 @@ const NOT_NORMAL_INPUT = ['textarea', 'select', 'checkbox', 'radio']
 
 export default {
   name: 'Control',
+  filters: {
+    slugify: value => slug(value)
+  },
   components: {
     appInput: Input,
     appSelect: Select,

src/components/Fields/Label.spec.js

@@ -0,0 +1,84 @@
+import matchers from 'jest-vue-matcher'
+import { mount } from '@vue/test-utils'
+import Label from '@/components/Fields/Label'
+
+const LABEL = 'the label'
+let wrapper
+
+describe('Label', () => {
+  beforeEach(() => {
+    wrapper = mount(Label, {
+      propsData: {
+        item: {
+          label: LABEL
+        }
+      }
+    })
+    expect.extend(matchers(wrapper))
+  })
+
+  afterEach(() => {
+    wrapper.destroy()
+  })
+
+  it('shows a label', () => {
+    expect('label').toHaveText(LABEL)
+  })
+
+  it('shows an alternative label', async () => {
+    const ALTERNATIVE_LABEL = 'an alternative label'
+
+    await wrapper.setProps({
+      item: {
+        label: LABEL,
+        alternativeLabel: ALTERNATIVE_LABEL
+      }
+    })
+
+    expect('label').toHaveText(ALTERNATIVE_LABEL)
+    expect('label').not.toHaveText(LABEL)
+  })
+
+  it('hides the label', async () => {
+    await wrapper.setProps({
+      item: {
+        label: LABEL,
+        showLabel: false
+      }
+    })
+
+    expect('label').not.toBeADomElement()
+  })
+
+  it('has a for attribute by default', () => {
+    expect('label').toHaveAttribute('for', 'the-label')
+  })
+
+  it('has a custom for attribute', async () => {
+    const ATTR_FOR = 'a-custom-for-attribute'
+
+    await wrapper.setProps({
+      item: {
+        label: LABEL,
+        for: ATTR_FOR
+      }
+    })
+
+    expect('label').toHaveAttribute('for', ATTR_FOR)
+  })
+
+  it('is mandatory by default', () => {
+    expect('label').toHaveText('*')
+  })
+
+  it('is not mandatory', async () => {
+    await wrapper.setProps({
+      item: {
+        label: LABEL,
+        isRequired: false
+      }
+    })
+
+    expect('label').not.toHaveText('*')
+  })
+})

src/components/Fields/Label.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
-  label.label(:for="item.label | slugify", v-if="item.showLabel !== false")
-    p {{ item.label }}
+  label.label(:for="item.for || item.label | slugify", v-if="item.showLabel !== false")
+    p {{ item.alternativeLabel || item.label }}
       span.helpLabel.has-text-grey-light.is-size-7.is-italic(v-if="item.help") {{ item.help }}
       span(v-if="item.isRequired !== false")
         sup.has-text-grey-light.is-size-7 *

src/components/Form/Form.spec.js

@@ -208,7 +208,7 @@ describe('Form', () => {
     expect($errorMessage).toBeADomElement()
 
     const errorMessage = wrapper.find($errorMessage).text()
-    expect(errorMessage).toBe('The Password field format is invalid')
+    expect(errorMessage).toBe('The password field format is invalid')
 
     type(PASSWORD_VALUE, $inputPassword)
     await flush()
@@ -261,7 +261,7 @@ describe('Form', () => {
       expect(`${$inputFirstName}.is-danger`).toBeADomElement()
 
       const errorMessage = wrapper.find($errorMessage).text()
-      expect(errorMessage).toBe('The First Name field must be at least 4 characters')
+      expect(errorMessage).toBe('The first-name field must be at least 4 characters')
     })
   })
 

src/components/Form/FormError.spec.js

@@ -69,7 +69,7 @@ describe('Form Error', () => {
     expect('.is-danger').toBeADomElement()
     expect(`${$inputTest} ~ .icon.is-right`).toBeADomElement()
 
-    expect($error).toHaveText(`The ${LABEL_INPUT} field must be at least ${MIN_LENGTH} characters`, $error)
+    expect($error).toHaveText(`The ${LABEL_INPUT_SLUGIFY} field must be at least ${MIN_LENGTH} characters`, $error)
 
     expect('input[type=submit]').toHaveAttribute('disabled', 'disabled')
   })
@@ -92,7 +92,7 @@ describe('Form Error', () => {
         await flush()
 
         expect(`${INPUT_NUMBER}.is-danger`).toBeADomElement()
-        expect($error).toHaveText(`The Number field must be ${val} or ${isMinValue ? 'more' : 'less'}`)
+        expect($error).toHaveText(`The number field must be ${val} or ${isMinValue ? 'more' : 'less'}`)
       })
     }
 

yarn.lock

@@ -13251,10 +13251,10 @@ vary@~1.1.2:
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
   integrity sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=
 
-vee-validate@^3.4.0:
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/vee-validate/-/vee-validate-3.4.0.tgz#dcdefcd45d43823c8b26aceee55f067ef56ca800"
-  integrity sha512-qxcqrGYr2gchZOjyhBKu7G4NOyOTmH6vk8APGdxAiL/0Iy2QZP/vcOYNbx7+zMhg7P3q418AseHR1sbckB5I+A==
+vee-validate@^3.4.2:
+  version "3.4.2"
+  resolved "https://registry.yarnpkg.com/vee-validate/-/vee-validate-3.4.2.tgz#888a900ae845e1e02ad5f8ee688b41408e3892db"
+  integrity sha512-ORDhNuFsMZaRatPBsuLX98nPG+xtDAkJ/JBnRNTxgqWl7y6qCT6VTLKAYhTvvBOVu+KnINUvg4+x/54rjZZ9sA==
 
 vendors@^1.0.0:
   version "1.0.4"