chore: Replaced old stories
This commit is contained in:
Zaytsev Kirill
parent
904119deb8
commit
aa35a16a9d
122
storybook/stories/ExampleAddressList.tale.vue
Normal file
122
storybook/stories/ExampleAddressList.tale.vue
Normal file
@ -0,0 +1,122 @@
|
|||||||
|
<template>
|
||||||
|
<FormularioForm v-model="values">
|
||||||
|
<h1>Address list</h1>
|
||||||
|
|
||||||
|
<FormularioInput
|
||||||
|
v-slot="addressList"
|
||||||
|
name="addressList"
|
||||||
|
>
|
||||||
|
<FormularioGrouping name="addressList">
|
||||||
|
<FormularioGrouping
|
||||||
|
v-for="(address, addressIndex) in addressList.context.model"
|
||||||
|
:key="'address-' + addressIndex"
|
||||||
|
:name="addressIndex"
|
||||||
|
:is-array-item="true"
|
||||||
|
class="row mx-n2"
|
||||||
|
>
|
||||||
|
<FormularioInput
|
||||||
|
v-slot="{ context }"
|
||||||
|
class="col col-auto px-2 mb-3"
|
||||||
|
name="street"
|
||||||
|
validation="required"
|
||||||
|
>
|
||||||
|
<label for="address-street">Street <span class="text-danger">*</span></label>
|
||||||
|
<input
|
||||||
|
id="address-street"
|
||||||
|
v-model="context.model"
|
||||||
|
class="field form-control"
|
||||||
|
type="text"
|
||||||
|
@blur="context.runValidation"
|
||||||
|
>
|
||||||
|
|
||||||
|
<div
|
||||||
|
v-for="(error, index) in context.allErrors"
|
||||||
|
:key="index"
|
||||||
|
class="text-danger"
|
||||||
|
>
|
||||||
|
{{ error }}
|
||||||
|
</div>
|
||||||
|
</FormularioInput>
|
||||||
|
|
||||||
|
<FormularioInput
|
||||||
|
v-slot="{ context }"
|
||||||
|
class="col col-auto px-2 mb-3"
|
||||||
|
name="building"
|
||||||
|
validation="^required|number"
|
||||||
|
>
|
||||||
|
<label for="address-building">Building <span class="text-danger">*</span></label>
|
||||||
|
<input
|
||||||
|
id="address-building"
|
||||||
|
v-model="context.model"
|
||||||
|
class="field form-control"
|
||||||
|
type="text"
|
||||||
|
@blur="context.runValidation"
|
||||||
|
>
|
||||||
|
|
||||||
|
<div
|
||||||
|
v-for="(error, index) in context.allErrors"
|
||||||
|
:key="index"
|
||||||
|
class="text-danger"
|
||||||
|
>
|
||||||
|
{{ error }}
|
||||||
|
</div>
|
||||||
|
</FormularioInput>
|
||||||
|
</FormularioGrouping>
|
||||||
|
</FormularioGrouping>
|
||||||
|
|
||||||
|
<button
|
||||||
|
class="btn btn-primary"
|
||||||
|
type="button"
|
||||||
|
@click="addAddressBlank"
|
||||||
|
>
|
||||||
|
Add address
|
||||||
|
</button>
|
||||||
|
</FormularioInput>
|
||||||
|
</FormularioForm>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import FormularioForm from '@/FormularioForm'
|
||||||
|
import FormularioGrouping from '@/FormularioGrouping'
|
||||||
|
import FormularioInput from '@/FormularioInput'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'ExampleAddressListTale',
|
||||||
|
|
||||||
|
components: {
|
||||||
|
FormularioForm,
|
||||||
|
FormularioGrouping,
|
||||||
|
FormularioInput,
|
||||||
|
},
|
||||||
|
|
||||||
|
data: () => ({
|
||||||
|
values: {
|
||||||
|
addressList: [],
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
|
||||||
|
created () {
|
||||||
|
this.$formulario.extend({
|
||||||
|
validationMessages: {
|
||||||
|
number: () => 'Value is not a number',
|
||||||
|
required: () => 'Value is required',
|
||||||
|
},
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
addAddressBlank () {
|
||||||
|
this.values.addressList.push({
|
||||||
|
street: '',
|
||||||
|
building: '',
|
||||||
|
})
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.field {
|
||||||
|
max-width: 250px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,41 +1,106 @@
|
|||||||
<template>
|
<template>
|
||||||
<FormularioForm v-model="values">
|
<div>
|
||||||
<FormularioInput
|
<div
|
||||||
v-slot="{ context }"
|
v-for="(item, groupIndex) in groups"
|
||||||
class="mb-3"
|
:key="groupIndex"
|
||||||
name="groups"
|
|
||||||
validation="min:1"
|
|
||||||
validation-behavior="live"
|
|
||||||
>
|
>
|
||||||
<FormularioGroupingGroupTale v-model="context.model" />
|
<FormularioGrouping :name="`groups[${groupIndex}]`">
|
||||||
|
<FormularioInput
|
||||||
|
v-slot="{ context }"
|
||||||
|
class="mb-3"
|
||||||
|
name="text"
|
||||||
|
validation="number|required"
|
||||||
|
validation-behavior="live"
|
||||||
|
>
|
||||||
|
<label for="text-field">Text field (number|required)</label>
|
||||||
|
<input
|
||||||
|
id="text-field"
|
||||||
|
v-model="context.model"
|
||||||
|
type="text"
|
||||||
|
class="form-control"
|
||||||
|
style="max-width: 250px;"
|
||||||
|
>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
v-for="(error, index) in context.allErrors"
|
v-for="(error, index) in context.allErrors"
|
||||||
:key="index"
|
:key="index"
|
||||||
class="text-danger"
|
class="text-danger"
|
||||||
>
|
>
|
||||||
{{ error }}
|
{{ error }}
|
||||||
</div>
|
</div>
|
||||||
</FormularioInput>
|
</FormularioInput>
|
||||||
|
|
||||||
<div>{{ values }}</div>
|
<FormularioInput
|
||||||
</FormularioForm>
|
v-slot="{ context }"
|
||||||
|
:validation-messages="{ in: 'The value was different than expected' }"
|
||||||
|
class="mb-3"
|
||||||
|
name="abcdef-field"
|
||||||
|
validation="in:abcdef"
|
||||||
|
validation-behavior="live"
|
||||||
|
>
|
||||||
|
<label for="abcdef-field">Text field (in:abcdef)</label>
|
||||||
|
<input
|
||||||
|
id="abcdef-field"
|
||||||
|
v-model="context.model"
|
||||||
|
type="text"
|
||||||
|
class="form-control"
|
||||||
|
style="max-width: 250px;"
|
||||||
|
>
|
||||||
|
|
||||||
|
<div
|
||||||
|
v-for="(error, index) in context.allErrors"
|
||||||
|
:key="index"
|
||||||
|
class="text-danger"
|
||||||
|
>
|
||||||
|
{{ error }}
|
||||||
|
</div>
|
||||||
|
</FormularioInput>
|
||||||
|
</FormularioGrouping>
|
||||||
|
|
||||||
|
<button @click="onRemoveGroup(groupIndex)">
|
||||||
|
Remove Group
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button @click="onAddGroup">
|
||||||
|
Add Group
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import FormularioForm from '@/FormularioForm'
|
import FormularioGrouping from '@/FormularioGrouping'
|
||||||
import FormularioGroupingGroupTale from './FormularioGroupingGroup.tale.vue'
|
import FormularioInput from '@/FormularioInput'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'FormularioGroupingTale',
|
name: 'FormularioGroupingGroupTale',
|
||||||
|
|
||||||
components: {
|
components: {
|
||||||
FormularioForm,
|
FormularioGrouping,
|
||||||
FormularioGroupingGroupTale,
|
FormularioInput,
|
||||||
},
|
},
|
||||||
|
|
||||||
data: () => ({
|
model: {
|
||||||
values: { groups: [] },
|
prop: 'groups',
|
||||||
}),
|
event: 'change'
|
||||||
|
},
|
||||||
|
|
||||||
|
props: {
|
||||||
|
groups: {
|
||||||
|
type: Array,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
onAddGroup () {
|
||||||
|
this.$emit('change', this.groups.concat([{}]))
|
||||||
|
},
|
||||||
|
onRemoveGroup (removedIndex) {
|
||||||
|
this.$emit('change', this.groups.filter((item, index) => {
|
||||||
|
return index !== removedIndex
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -1,106 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div
|
|
||||||
v-for="(item, groupIndex) in groups"
|
|
||||||
:key="groupIndex"
|
|
||||||
>
|
|
||||||
<FormularioGrouping :name="`groups[${groupIndex}]`">
|
|
||||||
<FormularioInput
|
|
||||||
v-slot="{ context }"
|
|
||||||
class="mb-3"
|
|
||||||
name="text"
|
|
||||||
validation="number|required"
|
|
||||||
validation-behavior="live"
|
|
||||||
>
|
|
||||||
<label for="text-field">Text field (number|required)</label>
|
|
||||||
<input
|
|
||||||
id="text-field"
|
|
||||||
v-model="context.model"
|
|
||||||
type="text"
|
|
||||||
class="form-control"
|
|
||||||
style="max-width: 250px;"
|
|
||||||
>
|
|
||||||
|
|
||||||
<div
|
|
||||||
v-for="(error, index) in context.allErrors"
|
|
||||||
:key="index"
|
|
||||||
class="text-danger"
|
|
||||||
>
|
|
||||||
{{ error }}
|
|
||||||
</div>
|
|
||||||
</FormularioInput>
|
|
||||||
|
|
||||||
<FormularioInput
|
|
||||||
v-slot="{ context }"
|
|
||||||
:validation-messages="{ in: 'The value was different than expected' }"
|
|
||||||
class="mb-3"
|
|
||||||
name="abcdef-field"
|
|
||||||
validation="in:abcdef"
|
|
||||||
validation-behavior="live"
|
|
||||||
>
|
|
||||||
<label for="abcdef-field">Text field (in:abcdef)</label>
|
|
||||||
<input
|
|
||||||
id="abcdef-field"
|
|
||||||
v-model="context.model"
|
|
||||||
type="text"
|
|
||||||
class="form-control"
|
|
||||||
style="max-width: 250px;"
|
|
||||||
>
|
|
||||||
|
|
||||||
<div
|
|
||||||
v-for="(error, index) in context.allErrors"
|
|
||||||
:key="index"
|
|
||||||
class="text-danger"
|
|
||||||
>
|
|
||||||
{{ error }}
|
|
||||||
</div>
|
|
||||||
</FormularioInput>
|
|
||||||
</FormularioGrouping>
|
|
||||||
|
|
||||||
<button @click="onRemoveGroup(groupIndex)">
|
|
||||||
Remove Group
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button @click="onAddGroup">
|
|
||||||
Add Group
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import FormularioGrouping from '@/FormularioGrouping'
|
|
||||||
import FormularioInput from '@/FormularioInput'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'FormularioGroupingGroupTale',
|
|
||||||
|
|
||||||
components: {
|
|
||||||
FormularioGrouping,
|
|
||||||
FormularioInput,
|
|
||||||
},
|
|
||||||
|
|
||||||
model: {
|
|
||||||
prop: 'groups',
|
|
||||||
event: 'change'
|
|
||||||
},
|
|
||||||
|
|
||||||
props: {
|
|
||||||
groups: {
|
|
||||||
type: Array,
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
onAddGroup () {
|
|
||||||
this.$emit('change', this.groups.concat([{}]))
|
|
||||||
},
|
|
||||||
onRemoveGroup (removedIndex) {
|
|
||||||
this.$emit('change', this.groups.filter((item, index) => {
|
|
||||||
return index !== removedIndex
|
|
||||||
}))
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@ -1,78 +0,0 @@
|
|||||||
<template>
|
|
||||||
<FormularioForm v-model="values">
|
|
||||||
<FormularioInput
|
|
||||||
v-slot="{ context }"
|
|
||||||
:validation-messages="{
|
|
||||||
number: 'The value is not a number',
|
|
||||||
required: 'Value required',
|
|
||||||
}"
|
|
||||||
class="mb-3"
|
|
||||||
name="number"
|
|
||||||
validation="required"
|
|
||||||
>
|
|
||||||
<label for="text-field">Text field (required)</label>
|
|
||||||
<input
|
|
||||||
id="text-field"
|
|
||||||
v-model="context.model"
|
|
||||||
type="text"
|
|
||||||
class="form-control"
|
|
||||||
style="max-width: 250px;"
|
|
||||||
@blur="context.runValidation()"
|
|
||||||
>
|
|
||||||
|
|
||||||
<div
|
|
||||||
v-for="(error, index) in context.allErrors"
|
|
||||||
:key="index"
|
|
||||||
class="text-danger"
|
|
||||||
>
|
|
||||||
{{ error }}
|
|
||||||
</div>
|
|
||||||
</FormularioInput>
|
|
||||||
|
|
||||||
<FormularioInput
|
|
||||||
v-slot="{ context }"
|
|
||||||
:validation-messages="{ in: 'The value is not in range (abc,def)' }"
|
|
||||||
class="mb-3"
|
|
||||||
name="abcdef-field"
|
|
||||||
validation="in:abc,def"
|
|
||||||
>
|
|
||||||
<label for="abcdef-field">Text field (in:abc,def)</label>
|
|
||||||
<input
|
|
||||||
id="abcdef-field"
|
|
||||||
v-model="context.model"
|
|
||||||
type="text"
|
|
||||||
class="form-control"
|
|
||||||
style="max-width: 250px;"
|
|
||||||
@blur="context.runValidation()"
|
|
||||||
>
|
|
||||||
|
|
||||||
<div
|
|
||||||
v-for="(error, index) in context.allErrors"
|
|
||||||
:key="index"
|
|
||||||
class="text-danger"
|
|
||||||
>
|
|
||||||
{{ error }}
|
|
||||||
</div>
|
|
||||||
</FormularioInput>
|
|
||||||
|
|
||||||
<div>{{ values }}</div>
|
|
||||||
</FormularioForm>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import FormularioForm from '@/FormularioForm'
|
|
||||||
import FormularioInput from '@/FormularioInput'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'FormularioInputTale',
|
|
||||||
|
|
||||||
components: {
|
|
||||||
FormularioForm,
|
|
||||||
FormularioInput,
|
|
||||||
},
|
|
||||||
|
|
||||||
data: () => ({
|
|
||||||
values: {},
|
|
||||||
}),
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@ -5,8 +5,8 @@ import { storiesOf } from '@storybook/vue'
|
|||||||
import Vue from 'vue'
|
import Vue from 'vue'
|
||||||
import VueFormulario from '../../dist/formulario.esm'
|
import VueFormulario from '../../dist/formulario.esm'
|
||||||
|
|
||||||
import FormularioGroupingTale from './FormularioGrouping.tale'
|
import ExampleAddressList from './ExampleAddressList.tale'
|
||||||
import FormularioInputTale from './FormularioInput.tale'
|
import FormularioGrouping from './FormularioGrouping.tale'
|
||||||
|
|
||||||
Vue.mixin({
|
Vue.mixin({
|
||||||
methods: {
|
methods: {
|
||||||
@ -20,6 +20,6 @@ Vue.mixin({
|
|||||||
})
|
})
|
||||||
Vue.use(VueFormulario)
|
Vue.use(VueFormulario)
|
||||||
|
|
||||||
storiesOf('FormularioInput', module)
|
storiesOf('Examples', module)
|
||||||
.add('Default', () => FormularioInputTale)
|
.add('Address list', () => ExampleAddressList)
|
||||||
.add('Grouping', () => FormularioGroupingTale)
|
.add('FormularioGrouping', () => FormularioGrouping)
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user