yarbshk / vue-formly-buefy Goto Github PK
View Code? Open in Web Editor NEWThe declarative way to create and validate forms.
Home Page: https://yarbshk.github.io/vue-formly-buefy/samples
License: MIT License
vue-formly-buefy's People
Contributors
Stargazers
Watchers
vue-formly-buefy's Issues
Title (label) on radios/checkboxes
Have a title on radios and checkboxes
What are you answering Nop/Yep or Default to?
By adding <label class="label">Choose one</label> before the div.field elements then it looks like this
Is it just a missing documentation feature (by using wrappers etc.) or is it not possible?
[Vue warn]: Unknown custom element: <formly_input> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
Hi
I'm trying to run example code and I've got an error:
[Vue warn]: Unknown custom element: <formly_input> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
Can you please help
I use 1.0.2 version of vue-formly-buefy and I run all the code in index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/buefy/lib/buefy.min.css">
<script src="https://unpkg.com/buefy"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.0/css/bulma.min.css">
<script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
<script src="vue-formly.min.js"></script>
<script src="vue-formly-buefy.min.js"></script>
<script src="vue-formly-buefy-controls.js"></script> <!-- I renamed controls.js from vue-formly-buefy -->
</head>
<body>
<div id="myVue">
<template>
<formly-form :form="form" :model="model" :fields="fields"></formly-form>
</template>
</div>
<script>
Vue.use(Buefy.default);
Vue.use(VueFormly);
Vue.use(VueFormlyBuefy);
new Vue({
el: '#myVue',
data: {
form: {},
model: {
email: ''
},
fields: [
{
key: 'email',
type: 'input', // Use a wrapper to extend functionality
templateOptions: {
properties: { // Keep configuration of the element
'placeholder': 'Your email'
},
wrapper: { // Keep configuration of the wrapper
controls: [
{
type: '', // Use the Span component as a control
position: 'after',
options: { // Keep configuration of the control
label: '@gmail.com',
properties: {
'class': 'button is-static'
}
}
}
]
}
}
}
]
}
});
</script>
</body>
</html>
Thanks in advance
Last field margin, label border and validator
Hi! I created a toy form based on input example ( https://yarbshk.github.io/vue-formly-buefy-examples/#input ). Code is below. And I have unexpected behavior :
- email field has margin-bottom, while test field don't have margin-bottom. That's why registration bottom don't have any margin. In the example all the fields have margin-bottom.
- fieldset has a border, but in the example there's no border
- email validator don't work as in example
Can you please help with it
Thanks in advance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/buefy/lib/buefy.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.0/css/bulma.min.css">
</head>
<body>
<div id="myVue">
<h1>my sign in form</h1>
<sign-in-form></sign-in-form>
</div>
<script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/buefy"></script>
<script src="vue-formly.min.js"></script>
<script src="vue-formly-buefy.min.js"></script>
<script src="vue-formly-buefy-controls.min.js"></script>
<script>
Vue.use(Buefy.default, {defaultIconPack: 'fas'});
Vue.use(VueFormly);
Vue.use(VueFormlyBuefy);
Vue.component('sign-in-form', {
data: function () {
return {
action: '/sign/in',
method: 'post',
form: {},
model: {
email: '',
test: ''
},
fields: [
{
"key": "email",
"type": "input-with-field",
"required": true,
"templateOptions": {
"properties": {
"type": "email",
"required": true,
"placeholder": '[email protected]',
"icon": "envelope",
},
},
"validators": {
"format": {
"message": "The email address doesn't match the pattern"
}
}
},
{
"key": "test",
"type": "input-with-field",
"required": true,
"templateOptions": {
"properties": {
"type": "email",
"required": true,
"placeholder": '[email protected]',
"icon": "envelope",
},
},
"validators": {
"format": {
"message": "The email address doesn't match the pattern"
}
}
},
]
}
},
template: `
<form @submit.prevent="handleSubmission" >
<formly-form :form="form" :model="model" :fields="fields"></formly-form>
<b-field>
<p class="control">
<button class="button is-link">Register</button>
</p>
</b-field>
</form>
`,
methods: {
handleSubmission: function () {
alert("test")
}
},
})
new Vue({
el: '#myVue',
});
</script>
</body>
</html>
Bug when using select field with number values
Hi,
there is a bug when using following config:
{
"model": {
"name": null
},
"tabs": [
{
"fields": [
{
"type": "selection",
"key": "name",
"templateOptions": {
"options": [
{
"value": 0,
"text": "Jesse"
},
{
"value": 3,
"text": "John"
},
{
"value": 23,
"text": "Test"
}
]
}
}
]
}
]
}
The issue is when you try to select the first option ("Jesse"). Instead of changing the value of name to 0 it changes to null. After that it is possible to select "Jesse" again and the value changes correctly to 0.
I know that you have written in the docs that the type of "value" should be a String, but Buefy can handle numbers as well, so there seems to be a bug here. From a quick look at the source I'm not sure where this is coming from. Do you have any idea?
Best,
Severin
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.