perf: use v-memo in c-select

Author: ascott18

CHANGELOG.md

@@ -1,6 +1,7 @@
 # 6.0.4
 - AuditLogging: Stored procedure cache was not being correctly persisted to avoid redundant `SELECT OBJECT_DEFINITION` queries.
 - Added `CoalesceOptions.PreventAspNetBrowserRefresh()` utility method to block unwanted `aspnetcore-browser-refresh.js` script.
+- Perf: use v-memo in `c-select` list items to avoid redundant re-renders.
 
 # 6.0.3
 - `c-select` now correctly respects the `filter` prop for enum collections.

playground/Coalesce.Web.Vue3/src/examples/c-select/styling.vue

@@ -36,6 +36,39 @@
     </template>
   </c-select>
 
+  <h1>c-select slots</h1>
+  <c-select for="Person" multiple v-model="people" variant="outlined">
+    <!-- c-select specific slots -->
+    <template #selected-item="{ item, index, remove }">
+      <v-chip
+        size="small"
+        closable
+        @click:close="remove"
+        color="purple"
+        class="ma-1"
+      >
+        <v-icon start>fa fa-star</v-icon>
+        {{ item.name }} (#{{ index + 1 }})
+      </v-chip>
+    </template>
+
+    <template #list-item="{ item, search, selected }">
+      <div class="d-flex align-center">
+        <v-avatar size="24" color="primary" class="mr-2">
+          <span class="text-caption">{{ item.name?.[0] }}</span>
+        </v-avatar>
+        <div>
+          <div class="font-weight-bold">{{ item.name }}</div>
+          <div class="text-caption text-grey">
+            ID: {{ item.personId }} |
+            {{ selected ? "✓ Selected" : "Not selected" }}
+            {{ search ? `| Search: "${search}"` : "" }}
+          </div>
+        </div>
+      </div>
+    </template>
+  </c-select>
+
   <h1>compact/outlined via v-defaults-provider</h1>
   <v-defaults-provider
     :defaults="{
@@ -117,13 +150,15 @@
 
 <script setup lang="ts">
 import { Person } from "@/models.g";
-import { CaseViewModel } from "@/viewmodels.g";
+import { CaseViewModel, PersonViewModel } from "@/viewmodels.g";
 import { modelDisplay, useBindToQueryString } from "coalesce-vue";
-import { ref } from "vue";
+import { reactive, ref } from "vue";
 
 const caseVm = new CaseViewModel();
 caseVm.$load(15);
 caseVm.$useAutoSave();
 
+const people = ref<Person[]>([]);
+
 const dialogOpen = ref(false);
 </script>

src/coalesce-vue-vuetify3/src/components/input/c-select.vue

@@ -171,6 +171,11 @@
             <v-list-item
               v-for="(item, i) in listItems"
               :key="item.key"
+              v-memo="[
+                pendingSelection === i,
+                item.selected,
+                hasCustomItemSlots ? search : false,
+              ]"
               :value="item.key"
               :class="{
                 'pending-selection': pendingSelection === i,
@@ -497,6 +502,10 @@ const passthroughSlots = computed(() => {
   return ret;
 });
 
+const hasCustomItemSlots = computed(
+  () => !!slots["list-item"] || !!slots["item"],
+);
+
 const rootRef = useTemplateRef("rootRef");
 const menuContentRef = useTemplateRef("menuContentRef");
 const searchRef = useTemplateRef("searchRef");