vue-genesis-forms

KO | EN

gitlite — search

#hacktoberfest #ai #golang #rust #java #windows #awesome #cli #kubernetes #vue #pytorch #openai #mcp #ios

vue-genesis-forms

(★ 60)

📚 Easily create forms in Vue.js

vue-genesis-forms Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 📚 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
<template>
  <div>
    <app-form v-bind="{fields, data}" @form~input="input" @form~valid="valid"></app-form>
  </div>
</template>

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: 'test@test.com',
      things: 'test2',
      about: 'I love Vue.js <3',
      notifications: 1,
      sockets: 0,
      logs: 0
    }
  }
}
</script>
```

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

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

vue-genesis-forms

vue-genesis-forms Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

vue-genesis-forms

vue-genesis-forms Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README