Skip to content

Commit 5932805

Browse files
committed
feat: support custom field via scoped slot
1 parent 50b4ddf commit 5932805

File tree

4 files changed

+215
-109
lines changed

4 files changed

+215
-109
lines changed

README.md

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
[![NPM Version](https://img.shields.io/npm/v/vue-form-json.svg)](https://www.npmjs.com/package/vue-form-json)
2-
[![Build Status](https://travis-ci.org/14nrv/vue-form-json.svg?branch=dev)](https://travis-ci.org/14nrv/vue-form-json)
2+
[![Build Status](https://travis-ci.com/14nrv/vue-form-json.svg?branch=dev)](https://travis-ci.com/14nrv/vue-form-json)
33
[![Test Coverage](https://api.codeclimate.com/v1/badges/af5a15db118dac6343ab/test_coverage)](https://codeclimate.com/github/14nrv/vue-form-json/test_coverage)
44
[![Maintainability](https://api.codeclimate.com/v1/badges/af5a15db118dac6343ab/maintainability)](https://codeclimate.com/github/14nrv/vue-form-json/maintainability)
55
[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
@@ -38,11 +38,15 @@ Once submitted, an event 'formSubmitted' is emitted on $root with the formName a
3838
label: 'the label'
3939
}]
4040
```
41-
- [x] Scoped slot everywhere inside form
41+
- [x] Scoped slot everywhere inside the form
4242
```js
4343
const formFields = [{ slot: 'nameOfTheSlot', props: { foo: 'bar' } }]
4444
```
45-
- [x] Html directly inside json (formFields props)
45+
- [x] Custom fields support inside scoped slot
46+
```html
47+
<template #nameOfTheSlot="{ foo, updateFormValues, isFormReseted }">
48+
```
49+
- [x] Html support
4650
```js
4751
const formFields = [{ html: '<p>Your html content</p>' }]
4852
```
@@ -83,6 +87,10 @@ Object.keys(rules).forEach(rule => {
8387
</template>
8488

8589
<script>
90+
// import 'bulma/css/bulma.min.css'
91+
// import '@fortawesome/fontawesome-free/css/all.min.css'
92+
// import 'vue-form-json/dist/vue-form-json.css'
93+
8694
import formJson from 'vue-form-json'
8795
import jsonFields from './../assets/fields'
8896
@@ -92,19 +100,13 @@ Object.keys(rules).forEach(rule => {
92100
formJson
93101
},
94102
mounted () {
95-
this.$root.$on('formSubmitted', values => alert(JSON.stringify(values)))
103+
this.$root.$on('formSubmitted', values => console.log(values))
96104
},
97105
computed: {
98106
jsonFields: () => jsonFields
99107
}
100108
}
101109
</script>
102-
103-
<style lang="stylus">
104-
@require '../node_modules/bulma/css/bulma.min.css'
105-
@require '../node_modules/@fortawesome/fontawesome-free/css/all.min.css'
106-
@require '../node_modules/vue-form-json/dist/vue-form-json.css'
107-
</style>
108110
```
109111

110112
## Props available on formJson component

0 commit comments

Comments
 (0)