feat(slots): improve placeholder slot

Author: TotomInc

docs/slots.md

@@ -168,6 +168,22 @@ Customize the rendered template for the clear icon. Please note that the slot is
 </template>
 ```
 
+## placeholder
+
+**Type**: `slotProps: { text: string }`
+
+Customize the rendered template for the placeholder.
+
+```vue
+<template>
+  <VueSelect v-model="option" :options="options">
+    <template #placeholder>
+      <span>Custom placeholder</span>
+    </template>
+  </VueSelect>
+</template>
+```
+
 ## loading
 
 **Type**: `slotProps: {}`

playground/PlaygroundLayout.vue

@@ -8,6 +8,7 @@ const links = [
   { value: "/single-select", label: "Single Select" },
   { value: "/multi-select", label: "Multi Select" },
   { value: "/multi-select-taggable", label: "Multi Select Taggable" },
+  { value: "/custom-placeholder", label: "Custom Placeholder" },
   { value: "/custom-menu-container", label: "Custom Menu Container" },
   { value: "/custom-menu-option", label: "Custom Menu Option" },
   { value: "/custom-option-label-value", label: "Custom Option Label/Value" },

playground/demos/CustomPlaceholder.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { Option } from "../../src";
+import { ref } from "vue";
+import VueSelect from "../../src";
+
+const selected = ref<string | null>(null);
+
+const options: Option<string>[] = [
+  { label: "Alice's Adventures in Wonderland", value: "alice" },
+  { label: "A Wizard of Earthsea", value: "wizard" },
+  { label: "Harry Potter and the Philosopher's Stone", value: "harry_potter_1" },
+  { label: "Harry Potter and the Chamber of Secrets", value: "harry_potter_2" },
+];
+</script>
+
+<template>
+  <VueSelect
+    v-model="selected"
+    :options="options"
+    :is-multi="false"
+    placeholder="Pick a book"
+  >
+    <template #placeholder>
+      <span>Custom placeholder</span>
+    </template>
+  </VueSelect>
+
+  <p class="selected-value">
+    Selected book value: {{ selected || "none" }}
+  </p>
+</template>

playground/main.ts

@@ -5,6 +5,7 @@ import ControlledMenu from "./demos/ControlledMenu.vue";
 import CustomMenuContainer from "./demos/CustomMenuContainer.vue";
 import CustomMenuOption from "./demos/CustomMenuOption.vue";
 import CustomOptionLabelValue from "./demos/CustomOptionLabelValue.vue";
+import CustomPlaceholder from "./demos/CustomPlaceholder.vue";
 import CustomSearchFilter from "./demos/CustomSearchFilter.vue";
 import InfiniteScroll from "./demos/InfiniteScroll.vue";
 import MenuHeader from "./demos/MenuHeader.vue";
@@ -22,6 +23,7 @@ const router = createRouter({
     { path: "/single-select", component: SingleSelect },
     { path: "/multi-select", component: MultiSelect },
     { path: "/multi-select-taggable", component: MultiSelectTaggable },
+    { path: "/custom-placeholder", component: CustomPlaceholder },
     { path: "/custom-menu-container", component: CustomMenuContainer },
     { path: "/custom-menu-option", component: CustomMenuOption },
     { path: "/custom-option-label-value", component: CustomOptionLabelValue },

src/Placeholder.vue

@@ -1,12 +1,20 @@
-<script setup lang="ts">
+<script setup lang="ts" generic="GenericOption extends Option<OptionValue>, OptionValue = string">
+import type { Option } from "./types/option";
+import type { Slots } from "./types/slots";
+
 defineProps<{
   text: string;
+  placeholderSlot?: Slots<GenericOption, OptionValue>["placeholder"];
 }>();
 </script>
 
 <template>
   <div class="input-placeholder">
-    {{ text }}
+    <component :is="placeholderSlot" v-if="placeholderSlot" />
+
+    <template v-else>
+      {{ text }}
+    </template>
   </div>
 </template>
 

src/Select.vue

@@ -316,13 +316,10 @@ watch(
       >
         <template v-if="!selectedOptions[0] && !search.length">
           <Placeholder
-            v-if="!$slots.placeholder"
             :text="placeholder"
+            :placeholder-slot="slots.placeholder"
             :class="props.classes?.placeholder"
           />
-          <div v-else>
-            <slot name="placeholder"></slot>
-          </div>
         </template>
 
         <div

src/types/slots.ts

@@ -12,6 +12,7 @@ export type Slots<GenericOption extends Option<OptionValue>, OptionValue> = {
   "clear"?: () => any;
   "dropdown"?: () => any;
   "loading"?: () => any;
+  "placeholder"?: () => any;
   "menu-header"?: () => any;
   "menu-container"?: (props: { defaultContent: JSX.Element }) => any;
   "option"?: (props: { option: GenericOption; index: number; isFocused: boolean; isSelected: boolean; isDisabled: boolean }) => any;