wad-lab 1.2.2 → 1.2.4

package/templates/vue-cart-router-pinia/src/components/CheckoutModal.vue

@@ -0,0 +1,149 @@
+<script setup>
+import { reactive } from 'vue'
+
+defineProps({
+  show: {
+    type: Boolean,
+    default: false
+  },
+  total: {
+    type: Number,
+    required: true
+  }
+})
+
+const emit = defineEmits(['close', 'confirm'])
+
+const form = reactive({
+  name: '',
+  address: ''
+})
+
+function handleConfirm() {
+  if (!form.name.trim() || !form.address.trim()) return
+  emit('confirm', { name: form.name.trim(), address: form.address.trim() })
+}
+</script>
+
+<template>
+  <div v-if="show" class="modal-overlay" @click.self="emit('close')">
+    <div class="modal-card">
+      <div class="modal-header">
+        <h3>Confirm Checkout</h3>
+        <button type="button" class="btn-close" @click="emit('close')">x</button>
+      </div>
+
+      <form @submit.prevent="handleConfirm" class="modal-form">
+        <div class="total-notice">
+          Order Amount: <strong>${{ total }}</strong>
+        </div>
+
+        <div class="form-group">
+          <label for="ch-name">Full Name</label>
+          <input id="ch-name" v-model="form.name" required placeholder="John Doe" />
+        </div>
+
+        <div class="form-group">
+          <label for="ch-addr">Delivery Address</label>
+          <textarea id="ch-addr" v-model="form.address" required rows="3" placeholder="123 Main St, City"></textarea>
+        </div>
+
+        <div class="modal-actions">
+          <button type="button" class="btn btn-secondary" @click="emit('close')">Cancel</button>
+          <button type="submit" class="btn btn-primary">Confirm and Place Order</button>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.4);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  padding: 16px;
+}
+
+.modal-card {
+  background: #ffffff;
+  border-radius: 8px;
+  width: 100%;
+  max-width: 440px;
+  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
+  overflow: hidden;
+}
+
+.modal-header {
+  padding: 16px 20px;
+  border-bottom: 1px solid #e1e4e8;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.modal-header h3 {
+  font-size: 16px;
+  margin: 0;
+}
+
+.btn-close {
+  background: none;
+  border: none;
+  font-size: 16px;
+  cursor: pointer;
+}
+
+.modal-form {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.total-notice {
+  background: #eff6ff;
+  padding: 10px;
+  border-radius: 6px;
+  font-size: 14px;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.form-group label {
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.form-group input,
+.form-group textarea {
+  padding: 8px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+.modal-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  margin-top: 10px;
+}
+
+.btn {
+  padding: 8px 14px;
+  border-radius: 4px;
+  cursor: pointer;
+  border: 1px solid transparent;
+}
+
+.btn-primary { background: #16a34a; color: #fff; }
+.btn-secondary { background: #f1f5f9; color: #475569; }
+</style>

package/templates/vue-cart-router-pinia/src/components/ProductCard.vue

@@ -0,0 +1,63 @@
+<script setup>
+defineProps({
+  product: {
+    type: Object,
+    required: true
+  }
+})
+
+const emit = defineEmits(['add-to-cart'])
+</script>
+
+<template>
+  <div class="product-card">
+    <div class="product-badge">{{ product.category }}</div>
+    <h3 class="product-title">{{ product.name }}</h3>
+    <div class="product-price">${{ Number(product.price).toFixed(2) }}</div>
+    <button type="button" class="btn btn-add" @click="emit('add-to-cart', product)">
+      Add to Cart
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.product-card {
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  padding: 16px;
+  background: #ffffff;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.product-badge {
+  font-size: 11px;
+  text-transform: uppercase;
+  color: #64748b;
+  font-weight: 600;
+}
+
+.product-title {
+  font-size: 16px;
+  margin: 0;
+  color: #1e293b;
+}
+
+.product-price {
+  font-size: 18px;
+  font-weight: 700;
+  color: #0f172a;
+}
+
+.btn-add {
+  margin-top: auto;
+  padding: 8px 12px;
+  background: #2563eb;
+  color: #fff;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-weight: 500;
+}
+</style>

package/templates/vue-cart-router-pinia/src/stores/cartStore.js

@@ -48,6 +48,17 @@ export const useCartStore = defineStore('cart', {
         }
       }
     },
+    patchQuantity(id, quantity) {
+      const item = this.items.find((i) => i.id === id)
+      if (item) {
+        const q = Number(quantity)
+        if (q <= 0) {
+          this.removeFromCart(id)
+        } else {
+          item.quantity = q
+        }
+      }
+    },
     removeFromCart(id) {
       this.items = this.items.filter((item) => item.id !== id)
     },

package/templates/vue-cart-router-pinia/src/views/CartView.vue

@@ -1,139 +1,73 @@
 <script setup>
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
 import { useCartStore } from '../stores/cartStore'
+import CartSummary from '../components/CartSummary.vue'
+import CheckoutModal from '../components/CheckoutModal.vue'
 
 const cartStore = useCartStore()
+const router = useRouter()
+const isModalOpen = ref(false)
+
+function handlePatch({ id, quantity }) {
+  cartStore.patchQuantity(id, quantity)
+}
+
+function handleCheckoutConfirm() {
+  cartStore.clearCart()
+  isModalOpen.value = false
+  router.push('/checkout')
+}
 </script>
 
 <template>
-  <div>
-    <h2>Your Shopping Cart</h2>
-
-    <div v-if="cartStore.items.length === 0" class="empty-cart">
-      <p>Your cart is empty.</p>
-      <router-link to="/">Browse Products</router-link>
+  <div class="cart-view">
+    <div class="cart-header">
+      <h2>Shopping Cart</h2>
+      <button
+        v-if="cartStore.items.length > 0"
+        type="button"
+        class="btn btn-primary"
+        @click="isModalOpen = true"
+      >
+        Proceed to Checkout
+      </button>
     </div>
 
-    <div v-else>
-      <table class="cart-table">
-        <thead>
-          <tr>
-            <th>Product</th>
-            <th>Price</th>
-            <th>Quantity</th>
-            <th>Subtotal</th>
-            <th>Action</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="item in cartStore.items" :key="item.id">
-            <td>{{ item.name }}</td>
-            <td>${{ item.price }}</td>
-            <td class="qty-cell">
-              <button type="button" class="btn-qty" @click="cartStore.decrementQuantity(item.id)">-</button>
-              <span>{{ item.quantity }}</span>
-              <button type="button" class="btn-qty" @click="cartStore.incrementQuantity(item.id)">+</button>
-            </td>
-            <td>${{ item.price * item.quantity }}</td>
-            <td>
-              <button type="button" class="btn-remove" @click="cartStore.removeFromCart(item.id)">Remove</button>
-            </td>
-          </tr>
-        </tbody>
-        <tfoot>
-          <tr>
-            <td colspan="3" class="total-label">Grand Total:</td>
-            <td colspan="2" class="total-value">${{ cartStore.cartTotal }}</td>
-          </tr>
-        </tfoot>
-      </table>
-
-      <div class="cart-actions">
-        <button type="button" class="btn btn-clear" @click="cartStore.clearCart()">Clear Cart</button>
-        <router-link to="/checkout" class="btn btn-checkout">Proceed to Checkout</router-link>
-      </div>
-    </div>
+    <CartSummary
+      :items="cartStore.items"
+      :total="cartStore.cartTotal"
+      @increment="cartStore.incrementQuantity"
+      @decrement="cartStore.decrementQuantity"
+      @patch="handlePatch"
+      @remove="cartStore.removeFromCart"
+      @clear="cartStore.clearCart"
+    />
+
+    <CheckoutModal
+      :show="isModalOpen"
+      :total="cartStore.cartTotal"
+      @close="isModalOpen = false"
+      @confirm="handleCheckoutConfirm"
+    />
   </div>
 </template>
 
 <style scoped>
-.empty-cart {
-  padding: 30px;
-  text-align: center;
-  color: #777;
-}
-
-.cart-table {
-  width: 100%;
-  border-collapse: collapse;
-  margin: 15px 0;
-}
-
-.cart-table th, .cart-table td {
-  border: 1px solid #ddd;
-  padding: 10px;
-  text-align: left;
-}
-
-.cart-table th {
-  background-color: #f2f2f2;
-}
-
-.qty-cell {
+.cart-header {
   display: flex;
+  justify-content: space-between;
   align-items: center;
-  gap: 8px;
+  margin-bottom: 16px;
 }
 
-.btn-qty {
-  width: 24px;
-  height: 24px;
-  background-color: #eee;
-  border: 1px solid #ccc;
-  cursor: pointer;
-}
-
-.btn-remove {
-  background-color: #e74c3c;
-  color: white;
+.btn-primary {
+  background: #16a34a;
+  color: #fff;
   border: none;
-  padding: 4px 8px;
-  border-radius: 3px;
+  padding: 8px 14px;
+  border-radius: 6px;
   cursor: pointer;
-}
-
-.total-label {
-  text-align: right;
-  font-weight: bold;
-}
-
-.total-value {
-  font-weight: bold;
-  color: #27ae60;
-  font-size: 16px;
-}
-
-.cart-actions {
-  display: flex;
-  justify-content: space-between;
-  margin-top: 15px;
-}
-
-.btn {
-  padding: 10px 18px;
-  border-radius: 4px;
-  text-decoration: none;
-  font-size: 14px;
-  cursor: pointer;
-  border: none;
-}
-
-.btn-clear {
-  background-color: #95a5a6;
-  color: white;
-}
-
-.btn-checkout {
-  background-color: #27ae60;
-  color: white;
+  font-weight: 500;
 }
 </style>

package/templates/vue-cart-router-pinia/src/views/CheckoutView.vue

@@ -1,11 +1,8 @@
 <script setup>
 import { ref } from 'vue'
-import { useRouter } from 'vue-router'
 import { useCartStore } from '../stores/cartStore'
 
 const cartStore = useCartStore()
-const router = useRouter()
-
 const name = ref('')
 const address = ref('')
 const orderPlaced = ref(false)
@@ -21,7 +18,7 @@ function handleCheckout() {
     <h2>Checkout & Order Summary</h2>
 
     <div v-if="orderPlaced" class="success-banner">
-      <h3>Thank you for your order! 🎉</h3>
+      <h3>Thank you for your order!</h3>
       <p>Your order has been placed successfully.</p>
       <router-link to="/" class="btn btn-shop">Continue Shopping</router-link>
     </div>
@@ -36,7 +33,7 @@ function handleCheckout() {
         <h3>Order Items:</h3>
         <ul>
           <li v-for="item in cartStore.items" :key="item.id">
-            {{ item.name }} x {{ item.quantity }} — ${{ item.price * item.quantity }}
+            {{ item.name }} x {{ item.quantity }} - ${{ item.price * item.quantity }}
           </li>
         </ul>
         <p class="summary-total">Total Amount: <strong>${{ cartStore.cartTotal }}</strong></p>

package/templates/vue-cart-router-pinia/src/views/ProductCatalogView.vue

@@ -1,73 +1,37 @@
 <script setup>
 import { useCartStore } from '../stores/cartStore'
+import ProductCard from '../components/ProductCard.vue'
 
 const cartStore = useCartStore()
+
+function handleAddToCart(product) {
+  cartStore.addToCart(product)
+}
 </script>
 
 <template>
-  <div>
-    <h2>Available Products</h2>
+  <div class="catalog-view">
+    <h2>Product Catalog</h2>
     <div class="product-grid">
-      <div v-for="product in cartStore.products" :key="product.id" class="product-card">
-        <h3>{{ product.name }}</h3>
-        <p class="category">{{ product.category }}</p>
-        <p class="price">${{ product.price }}</p>
-        <button
-          type="button"
-          class="btn btn-add"
-          @click="cartStore.addToCart(product)"
-        >
-          Add to Cart
-        </button>
-      </div>
+      <ProductCard
+        v-for="p in cartStore.products"
+        :key="p.id"
+        :product="p"
+        @add-to-cart="handleAddToCart"
+      />
     </div>
   </div>
 </template>
 
 <style scoped>
-.product-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
-  gap: 15px;
-  margin-top: 15px;
-}
-
-.product-card {
-  border: 1px solid #ddd;
-  border-radius: 6px;
-  padding: 15px;
-  text-align: center;
-  background-color: #fafafa;
-}
-
-.product-card h3 {
-  font-size: 16px;
-  margin: 5px 0;
+.catalog-view h2 {
+  font-size: 20px;
+  margin-bottom: 16px;
 }
 
-.category {
-  color: #777;
-  font-size: 12px;
-  margin-bottom: 8px;
-}
-
-.price {
-  font-size: 18px;
-  font-weight: bold;
-  color: #27ae60;
-  margin-bottom: 12px;
-}
-
-.btn-add {
-  background-color: #2980b9;
-  color: white;
-  border: none;
-  padding: 8px 12px;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-.btn-add:hover {
-  background-color: #1f618d;
+.product-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: 16px;
 }
 </style>