vue_common_components/Ticket.vue

<template lang="pug">
    .ticket
        .ticket-summary
            .ticket-summary-header
                h3 {{ companyName }}
                table
                    tbody
                        tr
                            td Producto
                            td Precio
                            td Cant
                            td Subtotal
            .ticket-items-wrapper
                table
                    tbody
                        tr(v-for='item in items' :key='item.id')
                            td {{ item.name }}
                            td {{ item.price }}
                            td {{ item.quantity }}
                            td {{ (item.price || 0) * (item.quantity || 0) }}
            .ticket-summary-footer
                table
                    tbody
                        tr
                            td Total:
                            td {{ total | currency(...defaultCurrency) }}
                        tr
                            td Cliente:
                            td {{ customerName }}
</template>

<script>
    export default {
        props: {
            companyName: {
                type: String,
                default: ''
            },
            customerName: {
                type: String,
                default: ''
            },
            defaultCurrency: {
                type: Object,
                default: {
                    symbol: '$',
                    position: 'before',
                    thousandsSeparator: '.',
                    decimalPlaces: 2,
                    decimalSeparator: ',' 
                }
            },
            total: {
                type: Number,
                default: 0
            },
            items: {
                type: [],
                default: []
            }
        }
    }
</script>

<style lang="sass">
    @import '../../assets/variables'
    .ticket
        width: 500px
        height: 100%
        .ticket-summary
            width: 350px
            height: 450px
            border: 1px solid $app-border-color
            margin: auto
            box-shadow: -2px 2px 5pc $app-border-color, 2px 2px 5px $app-border-color
            position: relative
            .ticket-summary-header, .ticket-summary-footer
                width: 100%
                position: absolute
            .ticket-summary-header
                height: 65px
                top: 0
                h3
                    text-align: center
                    font-size: 14pt
                    margin: 0 15px
                    padding: 30px 0 15px 0
                    color: $app-dark-color
                table
                    width: 308px
                    height: 30px
                    margin: 0 20px
                    font-size: 7.5pt
                    font-weight: bold
                    tbody
                        tr
                            line-height: 30px
                            border-top: 1px solid $app-border-color
                            border-bottom: 1px solid $app-border-color
                            td
                                &:nth-child(1)
                                    width: 180px
                                    text-align: left
                    
                                &:nth-child(2)
                                    width: 50px
                                    text-align: right
                    
                                &:nth-child(3)
                                    width: 30px
                                    text-align: right

                                &:nth-child(4)
                                    width: 50px
                                    text-align: right
            .ticket-items-wrapper
                width: 310px
                height: 280px
                margin: 95px 20px 75px 20px
                padding-top: 5px
                overflow-y: auto
                table
                    width: 100%
                    font-size: 7.5pt
                    tbody
                        tr
                            height: 28px
                            line-height: 30px

                            td
                                &:nth-child(1)
                                    width: 180px
                    
                                &:nth-child(2)
                                    width: 50px
                                    text-align: right
                    
                                &:nth-child(3)
                                    width: 30px
                                    text-align: right

                                &:nth-child(4)
                                    width: 50px
                                    text-align: right
            .ticket-summary-footer
                width: 348px
                height: 75px
                bottom: 0
                padding: 15px 25px
                background: $app-bg-color
                table
                    width: 100%
                    tbody
                        tr
                            height: 25px
                            line-height: 20px
                            td
                                &:nth-child(1)
                                    font-weight: bold
                                &:nth-child(2)
                                    text-align: right
</style>