eiru_pos/src/components/forms/ProductForm.vue

<template lang="pug">
    .product-form
        .form-header
            h2 {{ title }}
            hr
        form.form-display
            .form-item
                label.form-label Nombre
                input.form-input(v-model='product.name' autofocus)
            .form-item
                label.form-label Precio
                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-action(@click='onAccept') Aceptar
                button.form-action(@click='onCancel') Cancelar
</template>

<script>
    export default {
        props: {
            title: String,
            default: ''
        },
        data() {
            return {
                product: {
                    name: '',
                    price: 0,
                    ean13: ''
                }
            }
        },
        methods: {
            onAccept() {
                this.$emit('onAccept', this.product)
            },
            onCancel() {
                this.$emit('onCancel')
            }
        },
        mounted() {
            Object.assign(this.product, {
                name: '',
                price: 0,
                ean13: ''
            })
        }
    }
</script>

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