Add slot for list items

SpeciesFileGroup · Sep 19, 2024 · aaf5651 · aaf5651
1 parent 851af88
commit aaf5651
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 7 deletions.
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "@sfgrp/distinguish",
   "private": false,
   "type": "module",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "files": [
     "dist"
   ],

diff --git a/src/App.vue b/src/App.vue
@@ -6,8 +6,22 @@
 
     <VGrid :class="gridLayout">
       <PanelDescriptors />
-      <PanelRemaining :render="props.renderItem" />
-      <PanelEliminated :render="props.renderItem" />
+      <PanelRemaining :render="props.renderItem">
+        <template #default="slotProps">
+          <slot
+            name="remaining-item"
+            v-bind="slotProps"
+          />
+        </template>
+      </PanelRemaining>
+      <PanelEliminated :render="props.renderItem">
+        <template #default="slotProps">
+          <slot
+            name="eliminated-item"
+            v-bind="slotProps"
+          />
+        </template>
+      </PanelEliminated>
     </VGrid>
 
     <VSpinner

diff --git a/src/components/Panel/PanelEliminated.vue b/src/components/Panel/PanelEliminated.vue
@@ -6,8 +6,11 @@
         v-for="item in eliminated"
         :key="item.rowId"
         class="distinguish-row-item"
-        v-html="render ? render(item) : item.objectTag"
-      />
+      >
+        <slot :item="item">
+          <span v-html="render ? render(item) : item.objectTag" />
+        </slot>
+      </li>
     </ul>
   </VPanel>
 </template>

diff --git a/src/components/Panel/PanelRemaining.vue b/src/components/Panel/PanelRemaining.vue
@@ -9,8 +9,11 @@
         v-for="item in remaining"
         :key="item.rowId"
         class="distinguish-row-item"
-        v-html="render ? render(item) : item.objectTag"
-      />
+      >
+        <slot :item="item">
+          <span v-html="render ? render(item) : item.objectTag" />
+        </slot>
+      </li>
     </ul>
   </VPanel>
 </template>