https://github.com/BlackMix/vue-genesis-forms

📚 Easily create forms in Vue.js
https://github.com/BlackMix/vue-genesis-forms

forms genesis vue

Last synced: 3 months ago
JSON representation

📚 Easily create forms in Vue.js

• Host: GitHub
• URL: https://github.com/BlackMix/vue-genesis-forms
• Owner: BlackMix
• Archived: true
• Created: 2018-07-07T09:52:39.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2020-09-01T21:30:22.000Z (about 4 years ago)
• Last Synced: 2024-07-10T15:35:46.800Z (4 months ago)
• Topics: forms, genesis, vue
• Language: Vue
• Homepage: https://www.npmjs.com/package/vue-genesis-forms
• Size: 175 KB
• Stars: 61
• Watchers: 3
• Forks: 7
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 📚 vue-genesis-forms ![](https://scrutinizer-ci.com/g/BlackMix/vue-genesis-forms/badges/build.png?b=master) ![](https://img.shields.io/npm/dm/vue-genesis-forms.svg)

` 🔥 support working: `

* input, textarea, switch, select, colorpick, datepicker

` 🎨 next `

* mult select, toggle, radio

# simple Demo

[Link](https://codesandbox.io/s/j1z40p4k7w)

`example usage:`

App.vue

```html

  


    

  


import { AppForm, filter, field } from 'vue-genesis-forms'

export const fields = (scope) => {

  return filter(

    [

      field('name', 'Name').$text().$scopes(['settings']).$form({width: 12}).$validate('required').$render(),

      field('email', 'E-mail').$text().$scopes(['settings']).$form({width: 6})

        .$validate('email', true).$required().$render(),

      field('color', 'Color Nick').$color('rgba').$scopes(['settings']).$form({width: 3}).$render(),

      field('date', 'Date').$date().$scopes(['settings']).$form({width: 3}).$render(),

      field('about', 'About you').$textarea('max', 200).$scopes(['settings']).$form({width: 12, minHeight: '100px'})

        .$validate('maxLength', 20).$render(),

      field('things', 'Things').$select(select, false).$scopes(['settings']).$form({width: 3}).$render(),

      field('notifications', 'Active Messages').$switch(1, 0).$scopes(['settings']).$form({width: 3}).$render(),

      field('logs', 'Active Logs').$switch(1, 0).$scopes(['settings']).$form({width: 3}).$render(),

      field('sockets', 'Active Sockets').$switch(1, 0).$scopes(['settings']).$form({width: 3}).$render()

    ],

    scope

  )

}

export const select = [

  {label: 'test 1', value: 'test1'},

  {label: 'test 2', value: 'test2'}

]

export default {

  name: 'app',

  components: { AppForm },

  data: () => ({

    fields: fields('settings'), // settings is scope

    ok: false,

    errors: {},

    data: {}

  }),

  methods: {

    input (data) {

      this.data = data

    },

    valid (status, errors) {

      this.ok = status === true

      this.errors = errors

    }

  },

  mounted () {

    this.data = {

      name: 'Vue.js',

      email: '[email protected]',

      things: 'test2',

      about: 'I love Vue.js <3',

      notifications: 1,

      sockets: 0,

      logs: 0

    }

  }

}

```

# Result:

![image](https://raw.githubusercontent.com/BlackMix/vue-genesis-forms/master/result.jpg)

# Credits:

*Genesis* [Link](https://github.com/phpzm/genesis)