Custom Fields via dynamic scoped slots

Author: alvarosabu

.prettierrc

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

dev/App.vue

@@ -8,7 +8,23 @@
             :id="testForm.id"
             :fields="testForm.fields"
             @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
@@ -104,12 +120,23 @@ const data = () => ({
           { text: 'Others', value: 'others' },
         ],
       }),
+      new FormField({
+        type: 'custom-field',
+        label: 'Custom Field 1',
+        name: 'custom-field-1',
+      }),
       new FormField({
         type: 'number',
         label: 'Number',
         name: 'number',
         value: 0,
       }),
+
+      new FormField({
+        type: 'custom-field',
+        label: 'File',
+        name: 'custom-field-2',
+      }),
     ],
   },
 });
@@ -130,3 +157,13 @@ export default {
   methods,
 };
 </script>
+<style lang="scss">
+.pika-field {
+  position: relative;
+
+  img {
+    position: absolute;
+    right: 0;
+  }
+}
+</style>

dev/assets/pika.png

@@ -5,8 +5,8 @@
   "author": "Alvaro Saburido <[email protected]>",
   "license": "MIT",
   "repository": {
-    "type" : "git",
-    "url" : "https://github.com/alvarosaburido/vue-dynamic-forms.git"
+    "type": "git",
+    "url": "https://github.com/alvarosaburido/vue-dynamic-forms.git"
   },
   "bugs": {
     "url": "https://github.com/alvarosaburido/vue-dynamic-forms/issues"

package-lock.json

@@ -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

@@ -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 }}

src/components/dynamic-form/DynamicForm.js

@@ -25,6 +25,12 @@ const methods = {
   valueChange(val) {
     this.$emit('change', val);
   },
+  onBlur() {
+    this.$emit('blur');
+  },
+  onFocus() {
+    this.$emit('focus');
+  },
   validate() {
     const control = this.formControl;
     if (control.validations && control.validations.length > 0) {
@@ -95,6 +101,7 @@ const DynamicInput = {
   props,
   computed,
   methods,
+  mounted() {},
 };
 
 export default DynamicInput;

src/components/dynamic-form/DynamicForm.vue

@@ -13,9 +13,9 @@
     <input-text
       v-if="
         formControl.type === 'text' ||
-          formControl.type === 'email' ||
-          formControl.type === 'password' ||
-          formControl.type === 'number'
+        formControl.type === 'email' ||
+        formControl.type === 'password' ||
+        formControl.type === 'number'
       "
       :formControl="formControl"
       @change="valueChange"
@@ -40,6 +40,13 @@
       :formControl="formControl"
       @change="valueChange"
     />
+    <slot
+      :name="'custom-field'"
+      :control="formControl"
+      :valueChange="valueChange"
+      :onFocus="onFocus"
+      :onBlur="onBlur"
+    />
     <div v-if="hasErrors">
       <p
         v-for="(errorText, $index) in errorMessages"