wad-lab 1.0.7 → 1.0.9

package/templates/vue-employee-system/src/App.vue

@@ -0,0 +1,388 @@
+<script setup>
+import { reactive, computed } from 'vue'
+import { useEmployeeStore } from './stores/employeeStore'
+
+const store = useEmployeeStore()
+
+const form = reactive({
+  id: '',
+  name: '',
+  department: 'Engineering',
+  experience: '',
+  baseSalary: ''
+})
+
+const formDepartments = computed(() => {
+  return store.departments.filter(dept => dept !== 'All')
+})
+
+const handleAddEmployee = () => {
+  if (!form.id || !form.name || !form.department || form.experience === '' || form.baseSalary === '') {
+    return
+  }
+  store.addEmployee({
+    id: Number(form.id),
+    name: form.name.trim(),
+    department: form.department,
+    experience: Number(form.experience),
+    baseSalary: Number(form.baseSalary)
+  })
+  form.id = ''
+  form.name = ''
+  form.department = 'Engineering'
+  form.experience = ''
+  form.baseSalary = ''
+}
+
+const formatCurrency = (amount) => {
+  return Number(amount || 0).toLocaleString('en-US', {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2
+  })
+}
+</script>
+
+<template>
+  <div class="container">
+    <header class="header">
+      <h1>Employee Management System</h1>
+    </header>
+
+    <div class="summary-cards">
+      <div class="card">
+        <h3>Total Employees</h3>
+        <p class="card-value">{{ store.totalEmployees }}</p>
+      </div>
+      <div class="card">
+        <h3>Total Payroll ($)</h3>
+        <p class="card-value">${{ formatCurrency(store.totalPayroll) }}</p>
+      </div>
+      <div class="card">
+        <h3>Average Salary ($)</h3>
+        <p class="card-value">${{ formatCurrency(store.averageSalary) }}</p>
+      </div>
+    </div>
+
+    <section class="section form-section">
+      <h2>Add New Employee</h2>
+      <form @submit.prevent="handleAddEmployee" class="employee-form">
+        <div class="form-group">
+          <label for="emp-id">Employee ID</label>
+          <input
+            id="emp-id"
+            v-model="form.id"
+            type="number"
+            min="1"
+            placeholder="e.g. 5"
+            required
+          />
+        </div>
+        <div class="form-group">
+          <label for="emp-name">Name</label>
+          <input
+            id="emp-name"
+            v-model="form.name"
+            type="text"
+            placeholder="e.g. Jane Doe"
+            required
+          />
+        </div>
+        <div class="form-group">
+          <label for="emp-department">Department</label>
+          <select id="emp-department" v-model="form.department" required>
+            <option v-for="dept in formDepartments" :key="dept" :value="dept">
+              {{ dept }}
+            </option>
+          </select>
+        </div>
+        <div class="form-group">
+          <label for="emp-experience">Experience (Years)</label>
+          <input
+            id="emp-experience"
+            v-model="form.experience"
+            type="number"
+            min="0"
+            step="1"
+            placeholder="e.g. 3"
+            required
+          />
+        </div>
+        <div class="form-group">
+          <label for="emp-salary">Base Salary ($)</label>
+          <input
+            id="emp-salary"
+            v-model="form.baseSalary"
+            type="number"
+            min="0"
+            step="0.01"
+            placeholder="e.g. 50000"
+            required
+          />
+        </div>
+        <div class="form-actions">
+          <button type="submit" class="btn btn-primary">Add Employee</button>
+        </div>
+      </form>
+    </section>
+
+    <section class="section">
+      <div class="tabs-header">
+        <h2>Department Filter</h2>
+        <div class="filter-tabs">
+          <button
+            v-for="dept in store.departments"
+            :key="dept"
+            type="button"
+            class="tab-btn"
+            :class="{ active: store.selectedDept === dept }"
+            @click="store.setDepartment(dept)"
+          >
+            {{ dept }}
+          </button>
+        </div>
+      </div>
+
+      <div class="table-container">
+        <table class="employee-table">
+          <thead>
+            <tr>
+              <th>ID</th>
+              <th>Name</th>
+              <th>Department</th>
+              <th>Experience</th>
+              <th>Base Salary</th>
+              <th>Bonus</th>
+              <th>Tax</th>
+              <th>Net Salary</th>
+              <th>Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-if="store.filteredEmployees.length === 0">
+              <td colspan="9" class="no-records">No employees found in this department.</td>
+            </tr>
+            <tr v-for="emp in store.filteredEmployees" :key="emp.id">
+              <td>{{ emp.id }}</td>
+              <td>{{ emp.name }}</td>
+              <td>{{ emp.department }}</td>
+              <td>{{ emp.experience }} yrs</td>
+              <td>${{ formatCurrency(emp.baseSalary) }}</td>
+              <td>${{ formatCurrency(store.calculateBonus(emp)) }}</td>
+              <td>${{ formatCurrency(store.calculateTax(emp)) }}</td>
+              <td>${{ formatCurrency(store.calculateNetSalary(emp)) }}</td>
+              <td>
+                <button
+                  type="button"
+                  class="btn btn-danger"
+                  @click="store.deleteEmployee(emp.id)"
+                >
+                  Delete
+                </button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </section>
+  </div>
+</template>
+
+<style>
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+  background-color: #f7f9fc;
+  color: #333333;
+  padding: 24px 16px;
+}
+
+.container {
+  max-width: 1000px;
+  margin: 0 auto;
+}
+
+.header {
+  margin-bottom: 24px;
+}
+
+.header h1 {
+  font-size: 28px;
+  color: #1a202c;
+}
+
+.summary-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 16px;
+  margin-bottom: 24px;
+}
+
+.card {
+  background-color: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  padding: 16px;
+}
+
+.card h3 {
+  font-size: 14px;
+  font-weight: 500;
+  color: #718096;
+  margin-bottom: 8px;
+}
+
+.card-value {
+  font-size: 24px;
+  font-weight: 700;
+  color: #2b6cb0;
+}
+
+.section {
+  background-color: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  padding: 20px;
+  margin-bottom: 24px;
+}
+
+.section h2 {
+  font-size: 18px;
+  color: #2d3748;
+  margin-bottom: 16px;
+}
+
+.employee-form {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  gap: 12px;
+  align-items: flex-end;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+}
+
+.form-group label {
+  font-size: 13px;
+  font-weight: 600;
+  color: #4a5568;
+  margin-bottom: 6px;
+}
+
+.form-group input,
+.form-group select {
+  padding: 8px 10px;
+  font-size: 14px;
+  border: 1px solid #cbd5e0;
+  border-radius: 4px;
+  background-color: #ffffff;
+  outline: none;
+}
+
+.form-group input:focus,
+.form-group select:focus {
+  border-color: #3182ce;
+}
+
+.form-actions {
+  display: flex;
+}
+
+.btn {
+  padding: 8px 16px;
+  font-size: 14px;
+  font-weight: 500;
+  border-radius: 4px;
+  border: none;
+  cursor: pointer;
+}
+
+.btn-primary {
+  background-color: #3182ce;
+  color: #ffffff;
+  width: 100%;
+  height: 38px;
+}
+
+.btn-primary:hover {
+  background-color: #2b6cb0;
+}
+
+.btn-danger {
+  background-color: #e53e3e;
+  color: #ffffff;
+  padding: 4px 10px;
+  font-size: 12px;
+}
+
+.btn-danger:hover {
+  background-color: #c53030;
+}
+
+.tabs-header {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.filter-tabs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.tab-btn {
+  padding: 6px 14px;
+  font-size: 13px;
+  border: 1px solid #cbd5e0;
+  background-color: #edf2f7;
+  color: #4a5568;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.tab-btn.active {
+  background-color: #3182ce;
+  color: #ffffff;
+  border-color: #3182ce;
+  font-weight: 600;
+}
+
+.table-container {
+  overflow-x: auto;
+}
+
+.employee-table {
+  width: 100%;
+  border-collapse: collapse;
+  text-align: left;
+}
+
+.employee-table th,
+.employee-table td {
+  padding: 10px 12px;
+  border-bottom: 1px solid #e2e8f0;
+  font-size: 14px;
+}
+
+.employee-table th {
+  background-color: #f7fafc;
+  color: #4a5568;
+  font-weight: 600;
+}
+
+.no-records {
+  text-align: center;
+  color: #a0aec0;
+  padding: 24px;
+}
+</style>

package/templates/vue-employee-system/src/main.js

@@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import App from './App.vue'
+
+createApp(App).use(createPinia()).mount('#app')

package/templates/vue-employee-system/src/stores/employeeStore.js

@@ -0,0 +1,54 @@
+import { defineStore } from 'pinia'
+
+export const useEmployeeStore = defineStore('employee', {
+  state: () => ({
+    employees: [
+      { id: 1, name: 'Alice Smith', department: 'Engineering', experience: 4, baseSalary: 60000 },
+      { id: 2, name: 'Bob Jones', department: 'HR', experience: 2, baseSalary: 45000 },
+      { id: 3, name: 'Charlie Brown', department: 'Marketing', experience: 5, baseSalary: 52000 },
+      { id: 4, name: 'Diana Prince', department: 'Finance', experience: 1, baseSalary: 58000 }
+    ],
+    departments: ['All', 'Engineering', 'HR', 'Marketing', 'Finance'],
+    selectedDept: 'All'
+  }),
+  getters: {
+    filteredEmployees(state) {
+      if (state.selectedDept === 'All') {
+        return state.employees
+      }
+      return state.employees.filter(emp => emp.department === state.selectedDept)
+    },
+    totalEmployees(state) {
+      return state.employees.length
+    },
+    totalPayroll() {
+      return this.employees.reduce((sum, emp) => sum + this.calculateNetSalary(emp), 0)
+    },
+    averageSalary() {
+      if (this.totalEmployees === 0) return 0
+      return this.totalPayroll / this.totalEmployees
+    }
+  },
+  actions: {
+    calculateBonus(emp) {
+      return emp.experience >= 3 ? emp.baseSalary * 0.10 : emp.baseSalary * 0.05
+    },
+    calculateTax(emp) {
+      return emp.baseSalary * 0.12
+    },
+    calculateNetSalary(emp) {
+      const bonus = this.calculateBonus(emp)
+      const tax = this.calculateTax(emp)
+      return emp.baseSalary + bonus - tax
+    },
+    addEmployee(emp) {
+      this.employees.push(emp)
+    },
+    deleteEmployee(id) {
+      this.employees = this.employees.filter(emp => emp.id !== id)
+    },
+    setDepartment(dept) {
+      this.selectedDept = dept
+    }
+  }
+})

package/templates/vue-employee-system/vite.config.js

@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  plugins: [vue()]
+})

package/templates/vue-food-ordering/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Food Ordering App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

package/templates/vue-food-ordering/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "vue-food-ordering",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "pinia": "^4.1.0",
+    "vue": "^3.5.44",
+    "vue-router": "^5.4.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.2.1",
+    "vite": "^6.2.0"
+  }
+}

package/templates/vue-food-ordering/src/App.vue

@@ -0,0 +1,109 @@
+<script setup>
+import { useFoodStore } from './stores/foodStore'
+
+const store = useFoodStore()
+</script>
+
+<template>
+  <div class="app-layout">
+    <header class="app-header">
+      <div class="header-inner">
+        <h1 class="logo">Food Ordering App</h1>
+        <nav class="nav-links">
+          <router-link to="/" class="nav-item">Menu</router-link>
+          <router-link to="/cart" class="nav-item cart-link">
+            Cart
+            <span v-if="store.cartCount > 0" class="cart-badge">{{ store.cartCount }}</span>
+          </router-link>
+        </nav>
+      </div>
+    </header>
+
+    <main class="main-content">
+      <router-view />
+    </main>
+  </div>
+</template>
+
+<style>
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+  color: #333;
+  background-color: #f4f6f9;
+}
+</style>
+
+<style scoped>
+.app-layout {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.app-header {
+  background-color: #ffffff;
+  border-bottom: 1px solid #e0e0e0;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
+}
+
+.header-inner {
+  max-width: 1000px;
+  margin: 0 auto;
+  padding: 1rem 1.5rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.logo {
+  margin: 0;
+  font-size: 1.4rem;
+  color: #222;
+}
+
+.nav-links {
+  display: flex;
+  gap: 1.5rem;
+  align-items: center;
+}
+
+.nav-item {
+  text-decoration: none;
+  color: #555;
+  font-weight: 500;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+
+.nav-item.router-link-exact-active {
+  color: #007bff;
+}
+
+.cart-badge {
+  background-color: #dc3545;
+  color: #fff;
+  border-radius: 50%;
+  font-size: 0.75rem;
+  min-width: 18px;
+  height: 18px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 4px;
+  margin-left: 0.4rem;
+}
+
+.main-content {
+  max-width: 1000px;
+  width: 100%;
+  margin: 0 auto;
+  padding: 1.5rem;
+  flex: 1;
+}
+</style>

package/templates/vue-food-ordering/src/main.js

@@ -0,0 +1,6 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import App from './App.vue'
+import router from './router'
+
+createApp(App).use(createPinia()).use(router).mount('#app')

package/templates/vue-food-ordering/src/router/index.js

@@ -0,0 +1,17 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import MenuView from '../views/MenuView.vue'
+import OrderCartView from '../views/OrderCartView.vue'
+import OrderSuccessView from '../views/OrderSuccessView.vue'
+
+const routes = [
+  { path: '/', name: 'Menu', component: MenuView },
+  { path: '/cart', name: 'OrderCart', component: OrderCartView },
+  { path: '/order-success', name: 'OrderSuccess', component: OrderSuccessView }
+]
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes
+})
+
+export default router

package/templates/vue-food-ordering/src/stores/foodStore.js

@@ -0,0 +1,65 @@
+import { defineStore } from 'pinia'
+
+export const useFoodStore = defineStore('food', {
+  state: () => ({
+    categories: ['All', 'Starters', 'Main Course', 'Beverages', 'Desserts'],
+    menuItems: [
+      { id: 1, name: 'Spring Rolls', category: 'Starters', price: 5.99, description: 'Crispy vegetable rolls served with sweet chili sauce' },
+      { id: 2, name: 'Garlic Bread', category: 'Starters', price: 4.49, description: 'Toasted baguette slices with garlic butter and herbs' },
+      { id: 3, name: 'Grilled Chicken Burger', category: 'Main Course', price: 11.99, description: 'Juicy chicken breast with lettuce, tomato, and special sauce' },
+      { id: 4, name: 'Pasta Primavera', category: 'Main Course', price: 13.50, description: 'Fettuccine tossed with fresh garden vegetables and parmesan' },
+      { id: 5, name: 'Margherita Pizza', category: 'Main Course', price: 12.99, description: 'Classic cheese and tomato pizza with basil leaves' },
+      { id: 6, name: 'Iced Lemon Tea', category: 'Beverages', price: 3.25, description: 'Refreshing brewed tea with lemon and mint' },
+      { id: 7, name: 'Berry Smoothie', category: 'Beverages', price: 4.95, description: 'Blended mixed berries with yogurt and honey' },
+      { id: 8, name: 'Chocolate Lava Cake', category: 'Desserts', price: 6.50, description: 'Warm molten chocolate cake with vanilla ice cream' }
+    ],
+    cart: []
+  }),
+  getters: {
+    cartCount: (state) => state.cart.reduce((sum, item) => sum + item.quantity, 0),
+    cartSubtotal: (state) => Number(state.cart.reduce((sum, item) => sum + item.price * item.quantity, 0).toFixed(2)),
+    taxAmount: (state) => Number((state.cart.reduce((sum, item) => sum + item.price * item.quantity, 0) * 0.05).toFixed(2)),
+    totalBill: (state) => {
+      const subtotal = state.cart.reduce((sum, item) => sum + item.price * item.quantity, 0)
+      const tax = subtotal * 0.05
+      return Number((subtotal + tax).toFixed(2))
+    }
+  },
+  actions: {
+    addToCart(item) {
+      const existing = this.cart.find((i) => i.id === item.id)
+      if (existing) {
+        existing.quantity += 1
+      } else {
+        this.cart.push({
+          id: item.id,
+          name: item.name,
+          price: item.price,
+          quantity: 1
+        })
+      }
+    },
+    incrementQuantity(id) {
+      const item = this.cart.find((i) => i.id === id)
+      if (item) {
+        item.quantity += 1
+      }
+    },
+    decrementQuantity(id) {
+      const item = this.cart.find((i) => i.id === id)
+      if (item) {
+        if (item.quantity > 1) {
+          item.quantity -= 1
+        } else {
+          this.removeFromCart(id)
+        }
+      }
+    },
+    removeFromCart(id) {
+      this.cart = this.cart.filter((i) => i.id !== id)
+    },
+    clearCart() {
+      this.cart = []
+    }
+  }
+})