Merge pull request #48 from 14nrv/dev

feat: use scoped slot instead of slot

Author: 14nrv

README.md

@@ -38,9 +38,9 @@ Once submitted, an event 'formSubmitted' is emitted on $root with the formName a
     label: 'the label'
   }]
   ```
-- [x] Named slot everywhere inside form
+- [x] Scoped slot everywhere inside form
   ```js
-  const formFields = [{ slot: 'nameOfTheSlot' }]
+  const formFields = [{ slot: 'nameOfTheSlot', props: { foo: 'bar' } }]
   ```
 - [x] Html directly inside json (formFields props)
   ```js

src/App.vue

@@ -1,17 +1,17 @@
 <template lang="pug">
   #app.section
-    app-form(:btnReset="{value: 'Reset'}",
-             :btnSubmit="{value: 'Submit'}",
+    app-form(:btnReset="{ value: 'Reset' }",
+             :btnSubmit="{ value: 'Submit' }",
              :formFields="jsonFields",
              formName="userProfil")
-      div(slot="boxSlot")
+      template(#boxSlot="{ prop }")
         .box
           article
             .content
               p
                 strong.has-text-info Info<br>
                 | You can also use
-                strong  named slot
+                strong  {{ prop }}
                 |  like this one
 </template>
 

src/components/Form/Form.spec.js

@@ -70,6 +70,9 @@ describe('Form', () => {
       propsData: {
         formFields: fields,
         formName: FORM_NAME
+      },
+      scopedSlots: {
+        boxSlot: '<p>{{ props.prop }}</p>'
       }
     })
     expect.extend(matchers(wrapper))
@@ -227,11 +230,14 @@ describe('Form', () => {
       expect(slotContainer).not.toBeADomElement()
     })
 
-    it('has a slot', () => {
+    it('has a scoped slot', () => {
       expect(slotContainer).toBeADomElement()
 
       const allSlots = wrapper.findAll(slotContainer)
       expect(allSlots).toHaveLength(1)
+
+      const { props: { prop } } = fields.find(field => Object.keys(field)[0] === 'slot')
+      expect(allSlots.at(0).text()).toBe(prop)
     })
   })
 

src/components/Form/Form.vue

@@ -20,7 +20,7 @@
         .field(v-else-if="Object.keys(item).includes('slot')",
               v-bind="item.attr",
               data-test="slot")
-          slot(:name="Object.values(item)[0]")
+          slot(:name="item['slot']", v-bind="item.props")
 
         .field(v-else, v-bind="item.field && item.field.attr")
           app-label(:item="item")

src/components/Form/fields.json

@@ -125,7 +125,10 @@
     "isRequired": false
   },
   {
-    "slot": "boxSlot"
+    "slot": "boxSlot",
+    "props": {
+      "prop": "scoped slot"
+    }
   },
   {
     "label": "Checkbox",