RetailCRM-Mirror/vue-formulario
1
0
Fork 0
mirror of synced 2024-11-21 21:06:04 +03:00
Code Issues Projects Releases Wiki Activity

docs: Added storybook for case of array of fields

Browse Source
This commit is contained in:
1on 2020-11-02 11:54:50 +03:00
parent 5f0fc7f56b
commit f52cd2e2e7
4 changed files with 129 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -8,3 +8,4 @@ coverage
*.sublime-workspace
*.dev.tale.vue
*.dev.stories.js
storybook-static

73
storybook/stories/FormularioGrouping.tale.vue
View File

@ -1,55 +1,22 @@
<template>
<FormularioForm v-model="values">
<FormularioGrouping name="group">
<FormularioInput
v-slot="{ context }"
class="mb-3"
name="text"
validation="number|required"
<FormularioInput
v-slot="{ context }"
class="mb-3"
name="groups"
validation="min:1"
validation-behavior="live"
>
<FormularioGroupingGroupTale v-model="context.model" />
<div
v-for="(error, index) in context.allErrors"
:key="index"
class="text-danger"
>
<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"
>
<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>
{{ error }}
</div>
</FormularioInput>
<div>{{ values }}</div>
</FormularioForm>
@ -57,20 +24,18 @@
<script>
import FormularioForm from '@/FormularioForm'
import FormularioGrouping from '@/FormularioGrouping'
import FormularioInput from '@/FormularioInput'
import FormularioGroupingGroupTale from './FormularioGroupingGroup.tale.vue'
export default {
name: 'FormularioGroupingTale',
components: {
FormularioForm,
FormularioGrouping,
FormularioInput,
FormularioGroupingGroupTale,
},
data: () => ({
values: {},
values: { groups: [] },
}),
}
</script>

106
storybook/stories/FormularioGroupingGroup.tale.vue Normal file
View File

@ -0,0 +1,106 @@
<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>

3
storybook/stories/index.stories.js
View File

@ -12,6 +12,9 @@ Vue.mixin({
methods: {
$t (text) {
return text
},
$tc (text) {
return text
}
}
})