Skip to content

Commit

Permalink
feat: support custom field via scoped slot
Browse files Browse the repository at this point in the history
  • Loading branch information
14nrv committed Mar 1, 2021
1 parent 50b4ddf commit 5932805
Show file tree
Hide file tree
Showing 4 changed files with 215 additions and 109 deletions.
22 changes: 12 additions & 10 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
[![NPM Version](https://img.shields.io/npm/v/vue-form-json.svg)](https://www.npmjs.com/package/vue-form-json)
[![Build Status](https://travis-ci.org/14nrv/vue-form-json.svg?branch=dev)](https://travis-ci.org/14nrv/vue-form-json)
[![Build Status](https://travis-ci.com/14nrv/vue-form-json.svg?branch=dev)](https://travis-ci.com/14nrv/vue-form-json)
[![Test Coverage](https://api.codeclimate.com/v1/badges/af5a15db118dac6343ab/test_coverage)](https://codeclimate.com/github/14nrv/vue-form-json/test_coverage)
[![Maintainability](https://api.codeclimate.com/v1/badges/af5a15db118dac6343ab/maintainability)](https://codeclimate.com/github/14nrv/vue-form-json/maintainability)
[![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)
Expand Down Expand Up @@ -38,11 +38,15 @@ Once submitted, an event 'formSubmitted' is emitted on $root with the formName a
label: 'the label'
}]
```
- [x] Scoped slot everywhere inside form
- [x] Scoped slot everywhere inside the form
```js
const formFields = [{ slot: 'nameOfTheSlot', props: { foo: 'bar' } }]
```
- [x] Html directly inside json (formFields props)
- [x] Custom fields support inside scoped slot
```html
<template #nameOfTheSlot="{ foo, updateFormValues, isFormReseted }">
```
- [x] Html support
```js
const formFields = [{ html: '<p>Your html content</p>' }]
```
Expand Down Expand Up @@ -83,6 +87,10 @@ Object.keys(rules).forEach(rule => {
</template>

<script>
// import 'bulma/css/bulma.min.css'
// import '@fortawesome/fontawesome-free/css/all.min.css'
// import 'vue-form-json/dist/vue-form-json.css'
import formJson from 'vue-form-json'
import jsonFields from './../assets/fields'
Expand All @@ -92,19 +100,13 @@ Object.keys(rules).forEach(rule => {
formJson
},
mounted () {
this.$root.$on('formSubmitted', values => alert(JSON.stringify(values)))
this.$root.$on('formSubmitted', values => console.log(values))
},
computed: {
jsonFields: () => jsonFields
}
}
</script>

<style lang="stylus">
@require '../node_modules/bulma/css/bulma.min.css'
@require '../node_modules/@fortawesome/fontawesome-free/css/all.min.css'
@require '../node_modules/vue-form-json/dist/vue-form-json.css'
</style>
```

## Props available on formJson component
Expand Down

0 comments on commit 5932805

Please sign in to comment.