Minor(modeling-commons): Add "clear" button to search fields selection

Author: omargfh

apps/modeling-commons-frontend/app/assets/styles/main.scss

@@ -220,6 +220,19 @@
   transform: translateX(30px);
 }
 
+.fade-in {
+  animation: fadeIn 0.4s ease-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
 .border-dashed-stylized {
   background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='8' ry='8' stroke='%238375E7FF' stroke-width='4' stroke-dasharray='8%2c8' stroke-dashoffset='0' stroke-linecap='butt'/%3e%3c/svg%3e");
   border-radius: var(--radius-md);

apps/modeling-commons-frontend/app/components/netlogo/NetLogoVersionSelectMenu.vue

@@ -1,12 +1,20 @@
 <template>
   <USelectMenu
+    ref="selectMenu"
     v-model="selected"
     v-model:search-term="searchTerm"
     placeholder="NetLogo Version"
     :items="items"
     icon="i-lucide-box"
     :loading="loading"
   >
+    <template v-if="selected?.value" #content-bottom >
+      <div class="px-2 py-1 border-t border-muted fade-in">
+        <UButton variant="link" color="error" size="xs" class="w-full" icon="i-lucide-x" @click.stop="clearSelection">
+          <span class="text-sm">Clear selected version</span>
+      </UButton>
+      </div>
+    </template>
     <template #empty>
       <UEmpty
         icon="i-lucide-box"
@@ -19,6 +27,8 @@
 </template>
 
 <script lang="ts">
+import type { USelectMenu } from '#components';
+
 export type NetLogoVersionItem = { label: string; value: string };
 export const toNetLogoVersionItem = (version: string): NetLogoVersionItem => ({
   label: version,
@@ -39,4 +49,12 @@ const selected = defineModel<NetLogoVersionItem | undefined>({
   default: undefined,
 });
 const searchTerm = defineModel<string>("search-term", { type: String, default: "" });
+
+const ref = useTemplateRef("selectMenu");
+
+function clearSelection() {
+  selected.value = undefined;
+  searchTerm.value = "";
+  ref.value?.triggerRef.click();
+}
 </script>

apps/modeling-commons-frontend/app/components/user/UserSelectMenu.vue

@@ -7,7 +7,15 @@
     :items="userMenuItems"
     virtualize
     :loading="loading"
+    clear
   >
+     <template v-if="selectedUser?.value" #content-bottom >
+      <div class="px-2 py-1 border-t border-muted fade-in">
+        <UButton variant="link" color="error" size="xs" class="w-full" icon="i-lucide-x" @click.stop="clearSelection">
+          <span class="text-sm">Clear selected user</span>
+      </UButton>
+      </div>
+    </template>
     <template #empty>
       <UEmpty
         icon="i-lucide-users"
@@ -67,13 +75,19 @@ const userMenuItems = computed<UserSelectMenuItem[]>(() => {
   }
   return [...props.users.map(toUserSelectMenuItem)];
 });
-const selectedUser = defineModel<UserSelectMenuItem>({
-  type: Object as () => UserSelectMenuItem,
-  default: null,
+const selectedUser = defineModel<UserSelectMenuItem | undefined>({
+  type: Object as () => UserSelectMenuItem | undefined,
+  default: undefined,
 });
 const searchTerm = defineModel<string>("search-term", { type: String, default: "" });
 const selectMenu = useTemplateRef("selectMenu");
 
+function clearSelection() {
+  selectedUser.value = undefined;
+  searchTerm.value = "";
+  selectMenu.value?.triggerRef.click();
+}
+
 onMounted(() => {
   useInfiniteScroll(
     // @ts-expect-error -- need to update @nuxt/ui for this to work