feat: remove user form view on deletion

Author: rrd108

src/runtime/assets/nuxt-users.css

@@ -645,4 +645,25 @@ form {
     .n-users-login-title {
         font-size: 1.5rem;
     }
+}
+
+/* Transition animations for user list */
+.n-users-list-move,
+.n-users-list-enter-active,
+.n-users-list-leave-active {
+    transition: all 0.3s ease;
+}
+
+.n-users-list-enter-from,
+.n-users-list-leave-to {
+    opacity: 0;
+    transform: translateX(2rem);
+}
+
+.n-users-list-leave-active {
+    position: absolute;
+}
+
+.n-users-list-move {
+    transition-timing-function: ease;
 }

src/runtime/components/NUsersList.vue

@@ -29,7 +29,7 @@ withDefaults(defineProps<Props>(), {
   fieldLabels: () => defaultFieldLabels
 })
 
-defineEmits<{
+const emit = defineEmits<{
   (e: 'editClick' | 'delete', user: User): void
 }>()
 
@@ -69,6 +69,11 @@ defineExpose({
 onMounted(() => {
   fetchUsers()
 })
+
+const handleDelete = (user: User) => {
+  users.value = users.value.filter(u => u.id !== user.id)
+  emit('delete', user)
+}
 </script>
 
 <template>
@@ -105,7 +110,11 @@ onMounted(() => {
 
     <div v-if="users.length">
       <slot name="usersList">
-        <ul class="n-users-grid n-users-grid-auto">
+        <TransitionGroup
+          name="n-users-list"
+          tag="ul"
+          class="n-users-grid n-users-grid-auto"
+        >
           <li
             v-for="(user, index) in users"
             :key="user.id"
@@ -121,11 +130,11 @@ onMounted(() => {
                 :display-fields="displayFields"
                 :field-labels="fieldLabels"
                 @edit-click="$emit('editClick', user)"
-                @delete="$emit('delete', user)"
+                @delete="handleDelete(user)"
               />
             </slot>
           </li>
-        </ul>
+        </TransitionGroup>
       </slot>
 
       <slot
@@ -169,5 +178,3 @@ onMounted(() => {
     </div>
   </div>
 </template>
-
-<!-- CSS removed - now consolidated in nuxt-users.css -->