From c5cba4274e79ad39db13faa3a51a850c718f5dea Mon Sep 17 00:00:00 2001
From: Rudo Kemper <rtakemper@gmail.com>
Date: Tue, 8 Oct 2024 09:03:10 -0400
Subject: [PATCH] fix: add tag slot for multi-select

---
 docs/slots.md             | 17 +++++++++++++++++
 playground/Playground.vue | 24 +++++++++++++++++++++++-
 src/Select.vue            | 28 +++++++++++++++++++++-------
 3 files changed, 61 insertions(+), 8 deletions(-)

diff --git a/docs/slots.md b/docs/slots.md
index f41e841..6b00018 100644
--- a/docs/slots.md
+++ b/docs/slots.md
@@ -42,6 +42,23 @@ Customize the rendered HTML if a selected option (inside the select control). Yo
 </template>
 ```
 
+## tag
+
+**Type**: `slotProps: { option: Option, removeOption: () => void }`
+
+Customize the rendered HTML for a tag representing a selected option in multi-select mode (when `isMulti` is true). You can use the slot props to retrieve the current selected option and a function to remove the option from the selection.
+
+```vue
+<template>
+  <VueSelect v-model="option" :options="options">
+    <template #tag="{ option }">
+      My value is: {{ option.value }}
+      <span @click="removeOption">X</span>
+    </template>
+  </VueSelect>
+</template>
+```
+
 ## menu-header
 
 **Type**: `slotProps: {}`
diff --git a/playground/Playground.vue b/playground/Playground.vue
index f894930..a063eb8 100644
--- a/playground/Playground.vue
+++ b/playground/Playground.vue
@@ -50,7 +50,14 @@ const userOptions: UserOption[] = [
         :is-multi="true"
         :is-loading="isLoading"
         placeholder="Pick users"
-      />
+      >
+        <template #tag="{ option }">
+          <span class="custom-tags">
+            {{ option.label }}
+            <span class="custom-x-mark" @click="removeOption">&times;</span>
+          </span>
+        </template>
+      </VueSelect>
 
       <p class="selected-value">
         Selected user value: {{ activeUsers || "none" }}
@@ -89,6 +96,21 @@ body {
       font-weight: 500;
       font-family: "IBM Plex Mono", monospace;
     }
+
+    .custom-tags {
+      background-color: #e0f7fa;
+      padding: 5px 10px;
+      margin: 3px;
+      border-radius: 12px;
+      display: inline-flex;
+      align-items: center;
+    }
+
+    .custom-x-mark {
+      cursor: pointer;
+      margin-left: 8px;
+      color: #00796b;
+    }
   }
 }
 </style>
diff --git a/src/Select.vue b/src/Select.vue
index 8a1a222..ad8c478 100644
--- a/src/Select.vue
+++ b/src/Select.vue
@@ -402,17 +402,25 @@ onBeforeUnmount(() => {
           </slot>
         </div>
 
-        <template v-if="props.isMulti && selectedOptions.length">
-          <button
+        <div
+          v-if="props.isMulti && selectedOptions.length"
+          class="multi-value-container"
+        >
+          <div
             v-for="(option, i) in selectedOptions"
             :key="i"
-            type="button"
-            class="multi-value"
             @click="removeOption(option)"
           >
-            {{ getMultiValueLabel(option) }}<XMarkIcon />
-          </button>
-        </template>
+            <slot
+              name="tag"
+              :option="option"
+              :remove-option="() => removeOption(option)"
+            >
+              <span class="multi-value">
+                {{ getMultiValueLabel(option) }}<XMarkIcon /></span>
+            </slot>
+          </div>
+        </div>
 
         <input
           :id="inputId"
@@ -636,6 +644,12 @@ onBeforeUnmount(() => {
   z-index: 0;
 }
 
+.multi-value-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--vs-multi-value-gap);
+}
+
 .multi-value {
   appearance: none;
   display: flex;