eiru_purchases/src/components/product/ProductForm.vue

<template lang="pug">
    modal(name='product-modal' transition='nice-modal-fade' @before-close='beforeClose' :classes="['v--modal', 'product-modal']")
        h2 Nuevo producto
        hr
        form.product-form
            .form-item
                label.form-label Nombre
                input.form-input(v-model='product.name' autofocus)
            .form-item
                label.form-label Precio de Costo
                input.form-input(v-model='product.price')
            .form-item
                label.form-label Código de Barras
                input.form-input(v-model='product.ean13')
            .form-actions
                button.form-button(@click='submitProduct(product)') Aceptar
                button.form-button(@click='submitProduct()') Cancelar
</template>

<script>
    import { mapGetters, mapActions } from 'vuex'

    export default {
        computed: mapGetters([
            'showProductForm'
        ]),
        watch: {
            showProductForm(value) {
                if(!value) {
                    this.$modal.hide('product-modal')
                    return
                }

                this.product.name = ''
                this.product.price = ''
                this.product.ean13 = ''

                this.$modal.show('product-modal')
            }
        },
        methods: {
            beforeClose(e) {
                if (this.showProductForm) {
                    e.stop()
                }
            },
            ...mapActions([
                'submitProduct'
            ])
        },
        data() {
            return {
                product: {
                    name: '',
                    price: '',
                    ean13: ''
                }
            }
        }
    }
</script>

<style lang="sass">
     @import '../../assets/variables'
     .product-modal
        h2
            font-size: 10pt
            color: $app-title-color
            margin-left: 15px
        hr
            margin: 0 15px
        .product-form
            width: 100%
            height: 250px
            padding: 15px
            .form-item
                width: 100%
                height: 40px
                margin-bottom: 15px
                .form-label
                    width: 30%
                    height: 40px
                    font-size: 14pt
                .form-input
                    width: 70%
                    height: 40px
                    font-size: 18pt
                    border-radius: 0
            .form-actions
                float: right
                margin-top: 15px
                .form-button
                    width: 160px
                    height: 40px
                    border: none
                    box-shadow: none
                    border-radius: 0
                    margin-right: 5px
                    background: $app-main-color
                    color: $app-bg-color
</style>