Merge branch 'master' into feature/material-theme

Author: alvarosabu

.npmignore

@@ -7,6 +7,8 @@ babel.config.js
 vue.config.js
 postcss.config.js
 .prettierrc
+.git
+**/.git/
 yarn.lock
 /dev
 /docs

.prettierrc

@@ -2,5 +2,6 @@
     "singleQuote": true,
     "semi": true,
     "trailingComma": "all",
-    "disableLanguages": ["markdown"]
+    "disableLanguages": ["markdown"],
+    "arrowParens": "avoid"
   }

CHANGELOG.md

@@ -5,6 +5,20 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
+## 0.1.2 - 2020-05-05
+
+### Fixed
+
+- Added .git exclude to .npmignore to avoid EISGIT error ([#10](https://github.com/alvarosaburido/vue-dynamic-forms/issues/10))
+
+## 0.1.1 - 2020-05-04
+
+### Fixed
+
+- Convert numeric values when updating form values ([#1](https://github.com/alvarosaburido/vue-dynamic-forms/issues/1))
+- Preselect option on Input-Select not working ([#7](https://github.com/alvarosaburido/vue-dynamic-forms/issues/7))
+- Missing github link in npm ([#8](https://github.com/alvarosaburido/vue-dynamic-forms/issues/6))
+
 ## 0.1.0 - 2020-22-03
 
 ### Added

README.md

@@ -2,7 +2,17 @@
 
 # Vue Dynamic Forms
 
-![Current Relase](https://img.shields.io/github/package-json/v/alvarosaburido/vue-dynamic-forms) [![MIT license](http://img.shields.io/badge/license-MIT-brightgreen.svg)](http://opensource.org/licenses/MIT)
+<p align="center">
+  <a href="https://www.npmjs.com/package/@asigloo/vue-dynamic-forms">
+    <img src="https://badgen.net/npm/v/@asigloo/vue-dynamic-forms" alt="Current npm version">
+  </a>
+  <a href="https://bundlephobia.com/result?p=@asigloo/[email protected]">
+    <img src="https://flat.badgen.net/bundlephobia/min/@asigloo/vue-dynamic-forms" alt="Minified size">
+  </a>
+  <a href="https://vuejs.org">
+    <img src="https://flat.badgen.net/badge/vue.js/2.6.x/4fc08d?icon=github" alt="Vue.js version">
+  </a>
+</p>
 
 Implementing handcrafted forms can be:
 1. Costly

dev/App.vue

@@ -7,8 +7,25 @@
           <dynamic-form
             :id="testForm.id"
             :fields="testForm.fields"
+            :customClass="'row'"
             @change="valuesChanged"
-          />
+          >
+            <template slot="custom-field-1" slot-scope="props">
+              <div class="pika-field">
+                <input
+                  v-if="props.field"
+                  class="form-control"
+                  v-model="props.field.value"
+                  :type="props.field.type"
+                  :name="props.field.name"
+                  @change="props.valueChange()"
+                  @focus="props.onFocus()"
+                  @blur="props.onBlur()"
+                />
+                <img src="./assets/pika.png" alt="" />
+              </div>
+            </template>
+          </dynamic-form>
           <div class="row d-flex justify-content-end p-4">
             <button submit="true" :form="testForm.id" class="btn btn-primary">
               Submit
@@ -43,11 +60,13 @@ const data = () => ({
         type: 'text',
         label: 'Name',
         name: 'name',
+        customClass: 'col-12',
       }),
       new FormField({
         type: 'email',
         label: 'Email',
         name: 'email',
+        customClass: 'col-12',
         validations: [
           new FormValidation(required, 'This field is required'),
           new FormValidation(email, 'Format of email is incorrect'),
@@ -57,6 +76,7 @@ const data = () => ({
         type: 'password',
         label: 'Password',
         name: 'password',
+        customClass: 'col-12',
         validations: [
           new FormValidation(required, 'This field is required'),
           new FormValidation(
@@ -75,42 +95,58 @@ const data = () => ({
         name: 'bio',
         cols: 30,
         rows: 5,
+        customClass: 'col-12',
       }),
       new FormField({
         type: 'select',
         label: 'Category',
         name: 'category',
-        value: 'arduino',
+        customClass: 'col-12',
         options: [
           { value: null, text: 'Please select an option' },
-          { value: 'actionfield', text: 'Action field' },
-          { value: 'advancedselect', text: 'Advanced select' },
-          { value: 'autocomplete', text: 'Autocomplete' },
-          { value: 'buttongroup', text: 'Button group' },
+          { value: 'arduino', text: 'Arduino' },
+          { value: 'transistors', text: 'Transistors' },
+          { value: 'resistors', text: 'Resistors', disabled: true },
         ],
       }),
       new FormField({
         type: 'checkbox',
         label: 'Read the conditions',
         name: 'conditions',
         inline: false,
+        customClass: 'col-12',
       }),
       new FormField({
         type: 'radio',
         label: 'Prefered Animal',
         name: 'animal',
         inline: true,
+        customClass: 'col-12',
         options: [
           { text: 'Dogs', value: 'dogs' },
           { text: 'Cats', value: 'cats' },
           { text: 'Others', value: 'others' },
         ],
       }),
+      new FormField({
+        type: 'custom-field',
+        label: 'Custom Field 1',
+        name: 'custom-field-1',
+        customClass: 'col-12',
+      }),
       new FormField({
         type: 'number',
         label: 'Number',
         name: 'number',
         value: 0,
+        customClass: 'col-12 col-md-6',
+      }),
+      new FormField({
+        type: 'number',
+        label: 'Number 2',
+        name: 'number2',
+        value: 50,
+        customClass: 'col-12 col-md-6',
       }),
     ],
   },
@@ -132,3 +168,14 @@ export default {
   methods,
 };
 </script>
+<style lang="scss">
+.pika-field {
+  position: relative;
+
+  img {
+    position: absolute;
+    top: 5px;
+    right: 5px;
+  }
+}
+</style>

dev/assets/pika.png

@@ -1,9 +1,16 @@
 {
   "name": "@asigloo/vue-dynamic-forms",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Easy way to dynamically create reactive forms in vue based on varying business object model",
   "author": "Alvaro Saburido <[email protected]>",
   "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/alvarosaburido/vue-dynamic-forms.git"
+  },
+  "bugs": {
+    "url": "https://github.com/alvarosaburido/vue-dynamic-forms/issues"
+  },
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build --target lib --name as-dynamic-forms src/main.js",

package-lock.json

@@ -21,7 +21,7 @@ const props = {
     default: 'POST',
     type: String,
   },
-  classes: {
+  customClass: {
     default: null,
     type: String,
   },
@@ -111,17 +111,27 @@ const computed = {
         }, {})
       : {};
   },
+  deNormalizedScopedSlots() {
+    return Object.keys(this.$scopedSlots);
+  },
+  normalizedControls() {
+    let controls = {};
+    this.controls.forEach(element => {
+      controls[element.name] = element;
+    });
+    return controls;
+  },
 };
 
 const watch = {
   fields: {
-    handler: function() {
+    handler: function () {
       this.mapControls();
     },
     deep: true,
   },
   values: {
-    handler: function() {
+    handler: function () {
       this.$emit('change', this.values);
     },
     deep: true,

package.json

@@ -4,7 +4,7 @@
       v-if="fields.length > 0 && !showFeedback"
       :id="id"
       :name="id"
-      :class="classes"
+      :class="customClass"
       :method="method"
       novalidate
       @submit.prevent="handleSubmit()"
@@ -14,7 +14,20 @@
         v-for="field in controls"
         :key="field.name"
         :form-control="field"
-      />
+      >
+        <template slot="custom-field" slot-scope="props">
+          <div v-for="slot in deNormalizedScopedSlots" :key="slot">
+            <slot
+              v-if="props.control.name === slot"
+              :name="slot"
+              :field="normalizedControls[slot]"
+              :valueChange="props.valueChange"
+              :onFocus="props.onFocus"
+              :onBlur="props.onBlur"
+            ></slot>
+          </div>
+        </template>
+      </dynamic-input>
     </form>
     <div v-if="showFeedback" class="dynamic-form__feedback">
       {{ feedbackText }}