[ADD] animation to item enter

src/components/CartItem.vue

@@ -1,26 +1,27 @@
 <template lang="pug">
-    .cart-item
-        h3.item-name {{ data.name }}
-        input.item-quantity(type="text" value="1")
-        span.item-x x
-        span.item-price Gs {{ data.list_price }}
-        span.item-equals =
-        span.item-subtotal Gs {{ data.list_price }}
+        .cart-item
+            h3.item-name {{ item.name }}
+            input.item-quantity(type="text")
+            span.item-x x
+            span.item-price Gs {{ item.list_price }}
+            span.item-equals =
+            span.item-subtotal Gs {{ item.list_price }}
 </template>
 
 <script>
     export default {
         props: {
-            data: {
+            item: {
                 type: Object,
+                required: true,
                 default: () => {
-                    console.log(this)
                     return {}
                 }
             }
         },
         mounted() {
-            console.log(this);
+            console.log(this)
+            console.log(_)
         }
     }
 </script>

src/components/CartList.vue

@@ -1,7 +1,7 @@
 <template lang="pug">
-    .cart-list
-        template(v-for="item in items")
-            cart-item(:data="item")
+    transition-group(name="list" tag="div")
+        div(v-for="item in items" v-bind:key="item" class="list-item")
+                cart-item(:item="item")
 </template>
 
 <script>
@@ -31,5 +31,15 @@
         height: calc(100% - 100px)
         padding: 10px 0
         overflow-y: auto
-</style>
 
+    .list-item
+        display: inline-block
+        margin-right: 10px
+
+    .list-enter-active, .list-leave-active
+        transition: all 0.3s
+
+    .list-enter, .list-leave-to
+        opacity: 0
+        transform: translateX(300px)
+</style>

src/store/modules/cart.js

@@ -1,5 +1,6 @@
 const state = {
-    cart: []
+    cart: [],
+    total: 0
 }
 
 const getters = {
@@ -15,15 +16,27 @@ const mutations = {
     addToCart(state, payload) {
         let finded = state.cart.find(item => item.id == payload.data.id)
 
-        if (!finded) {
+        if (finded) {
+            payload.data.qty = payload.data.qty + 1
+        } else {
             state.cart = [payload.data, ...state.cart]
         }
+    },
+    calculateTotal(state) {
+        let sum = 0
+
+        state.cart.forEach(item => {
+            sum = sum + (item.list_price * item.qty)
+        })
+        
+        state.total = sum
     }
 }
 
 const actions = {
     addToCart({ commit }, payload) {
         commit('addToCart', payload)
+        commit('calculateTotal')
     }
 }
 
@@ -32,4 +45,4 @@ export default {
     getters,
     mutations,
     actions
-}
+}