eiru_purchases/src/components/common/Cart.vue

<template lang="pug">
    .cart(:style='{ width: defaultOptions.layout.width, height: defaultOptions.layout.height }')
        .cart-total
            h2.currency-cart-total {{ total | currency(...defaultOptions.currency) }}
        .cart-items-wrapper
            transition-group(name='list' tag='ul' class='cart-items')
                cart-item(v-for='(item, index) in items' :key='index' :index='index' :item='item' @onChange='onItemChanged' @onClickIncrement='onIncrementQty' @onClickDecrement='onDecrementQty' @onClickDelete='onDeleteItem' :options='defaultOptions.currency')
</template>

<script>
    import CartItem from './CartItem'

    export default {
        components: {
            CartItem
        },
        props: {
            items: {
                type: Array,
                default: [],
                required: true
            },
            options: {
                type: Object || String,
                default: null
            }
        },
        methods: {
            computeOptions(value) {
                if (!value) {
                    return
                }

                for(let key in value) {
                    if(!this.defaultOptions.currency[key]) {
                        continue
                    }

                    this.defaultOptions.currency[key] = value[key]
                }
            },
            computeTotal() {
                let sum = 0

                for (let item of this.items) {
                    sum = sum + ((item.price || 1) * (item.quantity || 1))
                }

                this.total = sum

                this.$emit('onTotalComputed', this.total)
            },
            onItemChanged(item) {
                this.computeTotal();
            },
            onIncrementQty(item) {
                this.$emit('onIncrementQty', item)
            },
            onDecrementQty(item) {
                this.$emit('onDecrementQty', item)
            },
            onDeleteItem(item) {
                this.$emit('onDeleteItem', item)
            }
        },
        watch: {
            items() {
                this.computeTotal()
            },
            options(value) {
                this.computeOptions(value)
            }
        },
        data() {
            return {
                total: 0,
                defaultOptions: {
                    currency: {
                        symbol: '$',
                        position: 'before',
                        thousandsSeparator: '.',
                        decimalPlaces: 2,
                        decimalSeparator: ',' 
                    },
                    layout: {
                        width: '300px',
                        height: '100%'
                    }
                }
            }
        }
    }
</script>

<style lang="sass">
    @import '../../assets/variables'
    .cart
        border-left: 1px solid $app-border-color
        padding-left: 10px
        display: inline-block
        vertical-align: top
        .cart-total
            width: 100%
            height: 50px
            .currency-cart-total
                width: 100%
                height: 50px
                margin: 0
                font-size: 30pt
        .cart-items-wrapper
            width: 100%
            height: calc(100% - 100px)
            overflow-y: auto
            overflow-x: hidden
            .cart-items
                width: 100%
                padding: 0
                margin: 0
            .list-enter-active, .list-leave-active
                transition: all 0.3s
            .list-enter, .list-leave-to
                opacity: 0
                transform: translateX(300px)
</style>