wad-lab 1.1.6 → 1.1.8

package/templates/fullstack-springboot-vue/frontend/vue-axios-props-emits/src/components/DepartmentList.vue

@@ -1,91 +1,92 @@
-<template>
-  <div class="table-wrapper">
-    <table>
-      <thead>
-        <tr>
-          <th>ID</th>
-          <th>Name</th>
-          <th>Code</th>
-          <th>Action</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-if="departments.length === 0">
-          <td colspan="4" class="empty">No departments found</td>
-        </tr>
-        <tr v-for="dept in departments" :key="dept.id">
-          <td>{{ dept.id }}</td>
-          <td>{{ dept.name }}</td>
-          <td><code>{{ dept.code }}</code></td>
-          <td>
-            <button @click="emit('delete-department', dept.id)" class="btn btn-danger">Delete</button>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</template>
-
-<script setup>
-defineProps(['departments'])
-const emit = defineEmits(['delete-department'])
-</script>
-
-<style scoped>
-.table-wrapper {
-  overflow-x: auto;
-}
-
-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 13px;
-  margin-top: 8px;
-}
-
-th, td {
-  text-align: left;
-  padding: 8px 10px;
-  border-bottom: 1px solid #eeeeee;
-}
-
-th {
-  background-color: #fafbfc;
-  color: #555555;
-  font-weight: 600;
-}
-
-code {
-  background: #f0f0f0;
-  padding: 2px 4px;
-  border-radius: 3px;
-  font-size: 12px;
-}
-
-.empty {
-  text-align: center;
-  color: #888888;
-  padding: 16px;
-}
-
-.btn {
-  padding: 8px 14px;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 13px;
-  font-weight: 600;
-  transition: background-color 0.15s ease;
-}
-
-.btn-danger {
-  background-color: #d9383a;
-  color: #ffffff;
-  padding: 4px 8px;
-  font-size: 12px;
-}
-
-.btn-danger:hover {
-  background-color: #b8282a;
-}
-</style>
+<template>
+  <div class="table-wrapper">
+    <table>
+      <thead>
+        <tr>
+          <th>ID</th>
+          <th>Name</th>
+          <th>Code</th>
+          <th>Action</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-if="departments.length === 0">
+          <td colspan="4" class="empty">No departments found</td>
+        </tr>
+        <tr v-for="dept in departments" :key="dept.id">
+          <td>{{ dept.id }}</td>
+          <td>{{ dept.name }}</td>
+          <td><code>{{ dept.code }}</code></td>
+          <td>
+            <button @click="emit('patch-department', dept.id, dept.code)" class="btn">Patch</button>
+            <button @click="emit('delete-department', dept.id)" class="btn btn-danger">Delete</button>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script setup>
+defineProps(['departments'])
+const emit = defineEmits(['delete-department', 'patch-department'])
+</script>
+
+<style scoped>
+.table-wrapper {
+  overflow-x: auto;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+  margin-top: 8px;
+}
+
+th, td {
+  text-align: left;
+  padding: 8px 10px;
+  border-bottom: 1px solid #eeeeee;
+}
+
+th {
+  background-color: #fafbfc;
+  color: #555555;
+  font-weight: 600;
+}
+
+code {
+  background: #f0f0f0;
+  padding: 2px 4px;
+  border-radius: 3px;
+  font-size: 12px;
+}
+
+.empty {
+  text-align: center;
+  color: #888888;
+  padding: 16px;
+}
+
+.btn {
+  padding: 8px 14px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 600;
+  transition: background-color 0.15s ease;
+}
+
+.btn-danger {
+  background-color: #d9383a;
+  color: #ffffff;
+  padding: 4px 8px;
+  font-size: 12px;
+}
+
+.btn-danger:hover {
+  background-color: #b8282a;
+}
+</style>

package/templates/fullstack-springboot-vue/frontend/vue-axios-props-emits/src/components/EmployeeForm.vue

@@ -1,128 +1,128 @@
-<template>
-  <form @submit.prevent="handleSubmit" class="form">
-    <div class="form-group">
-      <label for="emp-name">Full Name</label>
-      <input
-        id="emp-name"
-        v-model="empForm.name"
-        type="text"
-        required
-        placeholder="e.g. Jane Doe"
-      />
-    </div>
-    <div class="form-group">
-      <label for="emp-email">Email Address</label>
-      <input
-        id="emp-email"
-        v-model="empForm.email"
-        type="email"
-        required
-        placeholder="e.g. jane@example.com"
-      />
-    </div>
-    <div class="form-group">
-      <label for="emp-dept">Department</label>
-      <select id="emp-dept" v-model="empForm.departmentId" required>
-        <option value="" disabled>Select Department</option>
-        <option v-for="dept in departments" :key="dept.id" :value="dept.id">
-          {{ dept.name }} ({{ dept.code }})
-        </option>
-      </select>
-    </div>
-    <div class="form-group">
-      <label for="emp-salary">Salary</label>
-      <input
-        id="emp-salary"
-        v-model.number="empForm.salary"
-        type="number"
-        min="0"
-        step="any"
-        required
-        placeholder="e.g. 75000"
-      />
-    </div>
-    <button type="submit" class="btn btn-primary">Add Employee</button>
-  </form>
-</template>
-
-<script setup>
-import { reactive } from 'vue'
-
-defineProps(['departments'])
-const emit = defineEmits(['create-employee'])
-
-const empForm = reactive({
-  name: '',
-  email: '',
-  departmentId: '',
-  salary: ''
-})
-
-const handleSubmit = () => {
-  emit('create-employee', {
-    name: empForm.name,
-    email: empForm.email,
-    departmentId: empForm.departmentId,
-    salary: Number(empForm.salary)
-  })
-  empForm.name = ''
-  empForm.email = ''
-  empForm.departmentId = ''
-  empForm.salary = ''
-}
-</script>
-
-<style scoped>
-.form {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  margin-bottom: 20px;
-}
-
-.form-group {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.form-group label {
-  font-size: 13px;
-  font-weight: 600;
-  color: #444444;
-}
-
-.form-group input,
-.form-group select {
-  padding: 8px 10px;
-  border: 1px solid #cccccc;
-  border-radius: 4px;
-  font-size: 14px;
-  background-color: #ffffff;
-}
-
-.form-group input:focus,
-.form-group select:focus {
-  outline: none;
-  border-color: #0066cc;
-}
-
-.btn {
-  padding: 8px 14px;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 13px;
-  font-weight: 600;
-  transition: background-color 0.15s ease;
-}
-
-.btn-primary {
-  background-color: #0066cc;
-  color: #ffffff;
-}
-
-.btn-primary:hover {
-  background-color: #0052a3;
-}
-</style>
+<template>
+  <form @submit.prevent="handleSubmit" class="form">
+    <div class="form-group">
+      <label for="emp-name">Full Name</label>
+      <input
+        id="emp-name"
+        v-model="empForm.name"
+        type="text"
+        required
+        placeholder="e.g. Jane Doe"
+      />
+    </div>
+    <div class="form-group">
+      <label for="emp-email">Email Address</label>
+      <input
+        id="emp-email"
+        v-model="empForm.email"
+        type="email"
+        required
+        placeholder="e.g. jane@example.com"
+      />
+    </div>
+    <div class="form-group">
+      <label for="emp-dept">Department</label>
+      <select id="emp-dept" v-model="empForm.departmentId" required>
+        <option value="" disabled>Select Department</option>
+        <option v-for="dept in departments" :key="dept.id" :value="dept.id">
+          {{ dept.name }} ({{ dept.code }})
+        </option>
+      </select>
+    </div>
+    <div class="form-group">
+      <label for="emp-salary">Salary</label>
+      <input
+        id="emp-salary"
+        v-model.number="empForm.salary"
+        type="number"
+        min="0"
+        step="any"
+        required
+        placeholder="e.g. 75000"
+      />
+    </div>
+    <button type="submit" class="btn btn-primary">Add Employee</button>
+  </form>
+</template>
+
+<script setup>
+import { reactive } from 'vue'
+
+defineProps(['departments'])
+const emit = defineEmits(['create-employee'])
+
+const empForm = reactive({
+  name: '',
+  email: '',
+  departmentId: '',
+  salary: ''
+})
+
+const handleSubmit = () => {
+  emit('create-employee', {
+    name: empForm.name,
+    email: empForm.email,
+    departmentId: empForm.departmentId,
+    salary: Number(empForm.salary)
+  })
+  empForm.name = ''
+  empForm.email = ''
+  empForm.departmentId = ''
+  empForm.salary = ''
+}
+</script>
+
+<style scoped>
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-bottom: 20px;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.form-group label {
+  font-size: 13px;
+  font-weight: 600;
+  color: #444444;
+}
+
+.form-group input,
+.form-group select {
+  padding: 8px 10px;
+  border: 1px solid #cccccc;
+  border-radius: 4px;
+  font-size: 14px;
+  background-color: #ffffff;
+}
+
+.form-group input:focus,
+.form-group select:focus {
+  outline: none;
+  border-color: #0066cc;
+}
+
+.btn {
+  padding: 8px 14px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 600;
+  transition: background-color 0.15s ease;
+}
+
+.btn-primary {
+  background-color: #0066cc;
+  color: #ffffff;
+}
+
+.btn-primary:hover {
+  background-color: #0052a3;
+}
+</style>

package/templates/fullstack-springboot-vue/frontend/vue-axios-props-emits/src/components/EmployeeList.vue

@@ -1,94 +1,95 @@
-<template>
-  <div class="table-wrapper">
-    <table>
-      <thead>
-        <tr>
-          <th>ID</th>
-          <th>Name</th>
-          <th>Email</th>
-          <th>Department</th>
-          <th>Salary</th>
-          <th>Action</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-if="employees.length === 0">
-          <td colspan="6" class="empty">No employees found</td>
-        </tr>
-        <tr v-for="emp in employees" :key="emp.id">
-          <td>{{ emp.id }}</td>
-          <td>{{ emp.name }}</td>
-          <td>{{ emp.email }}</td>
-          <td>{{ getDepartmentName(emp.departmentId) }}</td>
-          <td>${{ Number(emp.salary).toLocaleString() }}</td>
-          <td>
-            <button @click="emit('delete-employee', emp.id)" class="btn btn-danger">Delete</button>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</template>
-
-<script setup>
-const props = defineProps(['employees', 'departments'])
-const emit = defineEmits(['delete-employee'])
-
-const getDepartmentName = (deptId) => {
-  if (!props.departments) return `Dept #${deptId}`
-  const dept = props.departments.find((d) => String(d.id) === String(deptId))
-  return dept ? dept.name : `Dept #${deptId}`
-}
-</script>
-
-<style scoped>
-.table-wrapper {
-  overflow-x: auto;
-}
-
-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 13px;
-  margin-top: 8px;
-}
-
-th, td {
-  text-align: left;
-  padding: 8px 10px;
-  border-bottom: 1px solid #eeeeee;
-}
-
-th {
-  background-color: #fafbfc;
-  color: #555555;
-  font-weight: 600;
-}
-
-.empty {
-  text-align: center;
-  color: #888888;
-  padding: 16px;
-}
-
-.btn {
-  padding: 8px 14px;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 13px;
-  font-weight: 600;
-  transition: background-color 0.15s ease;
-}
-
-.btn-danger {
-  background-color: #d9383a;
-  color: #ffffff;
-  padding: 4px 8px;
-  font-size: 12px;
-}
-
-.btn-danger:hover {
-  background-color: #b8282a;
-}
-</style>
+<template>
+  <div class="table-wrapper">
+    <table>
+      <thead>
+        <tr>
+          <th>ID</th>
+          <th>Name</th>
+          <th>Email</th>
+          <th>Department</th>
+          <th>Salary</th>
+          <th>Action</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-if="employees.length === 0">
+          <td colspan="6" class="empty">No employees found</td>
+        </tr>
+        <tr v-for="emp in employees" :key="emp.id">
+          <td>{{ emp.id }}</td>
+          <td>{{ emp.name }}</td>
+          <td>{{ emp.email }}</td>
+          <td>{{ getDepartmentName(emp.departmentId) }}</td>
+          <td>${{ Number(emp.salary).toLocaleString() }}</td>
+          <td>
+            <button @click="emit('patch-employee', emp.id, emp.salary)" class="btn">Patch</button>
+            <button @click="emit('delete-employee', emp.id)" class="btn btn-danger">Delete</button>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps(['employees', 'departments'])
+const emit = defineEmits(['delete-employee', 'patch-employee'])
+
+const getDepartmentName = (deptId) => {
+  if (!props.departments) return `Dept #${deptId}`
+  const dept = props.departments.find((d) => String(d.id) === String(deptId))
+  return dept ? dept.name : `Dept #${deptId}`
+}
+</script>
+
+<style scoped>
+.table-wrapper {
+  overflow-x: auto;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+  margin-top: 8px;
+}
+
+th, td {
+  text-align: left;
+  padding: 8px 10px;
+  border-bottom: 1px solid #eeeeee;
+}
+
+th {
+  background-color: #fafbfc;
+  color: #555555;
+  font-weight: 600;
+}
+
+.empty {
+  text-align: center;
+  color: #888888;
+  padding: 16px;
+}
+
+.btn {
+  padding: 8px 14px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 600;
+  transition: background-color 0.15s ease;
+}
+
+.btn-danger {
+  background-color: #d9383a;
+  color: #ffffff;
+  padding: 4px 8px;
+  font-size: 12px;
+}
+
+.btn-danger:hover {
+  background-color: #b8282a;
+}
+</style>