eiru_payments/src/components/common/Cart.vue

<template lang="pug">
    .cart(:style='{ width, height }')
        .cart-total
            h2.currency-cart-total {{ totalInCurrencyFormat() }}
        .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')
</template>

<script>
    import CartItem from './CartItem'

    export default {
        components: {
            CartItem
        },
        props: {
            items: {
                type: Array,
                default: [],
                required: true
            },
            width: {
                type: String,
                default: '300px'
            },
            height: {
                type: String,
                default: '100%'
            },
            total: {
                type: Number,
                default: 0
            },
            thousandsSeparator: {
                type: String,
                default: '.'
            },
            decimalPlaces: {
                type: Number,
                default: 0
            },
            decimalSeparator: {
                type: String,
                default: ','
            },
            currencySymbol: {
                type: String,
                default: '$'
            },
            symbolPosition: {
                type: String,
                default: 'before'
            }
        },
        methods: {
            totalInCurrencyFormat() {
                return this.total.toFixed(this.decimalPlaces).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1.')
            },
            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(value) {
                this.computeTotal()
            }
        },
        data() {
            return {
                total: 0
            }
        }
    }
</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>