feat: improve DOM structure, VitePress Teleport fix, minor features & bug fixes

docs/.vitepress/config.ts

@@ -21,6 +21,7 @@ export default defineConfig({
       { text: "Home", link: "/" },
       { text: "Docs", link: "/getting-started" },
       { text: "Demo", link: "/demo/single-select" },
+      { text: "Playground", link: "https://play.vuejs.org/#eNqNU01v2zAM/SuCLtmA2MaQ7ZK5Qbehh/WwDU2xyzwMqs04TmVJ0IedIfF/HyU7qZOmxS6GRT3yPT5SO/pJqbhxQOc0NbmulCUGrFOEM1FeZdSajC4yUdVKakt2RMOKdGSlZU0yinkZ/Xi8/elgCRxyO7qfRSaEolwiSICwISMTuRTGkoZxB+TKl02N1ZUoyZ4Ix/nijf++RWia9LpQBR4s1IozC3giJH1i9EdCmqiWBXDUHQpntA/PpbIV8mH8Vx8h2ApnD8DnZHLLGrYMFJNpLwiDGzMh3fQ5+P6vgmdg+wL4zpkxTPvjReCyrVZjpAnnI/T3oRFsPYe15AVo7GVonRGlZalZXXv7/NwcK4fek+AaOqUWPRoK0ptx4NrthiHs9zgxgSPKKOm6NFGYmiYjv+mU9oOOaqbijZECl2bnq2fDBe4KFuylDtsxx5+1tcrMkyQvBKbhfKpGxwJsIlSdXCMs0U7YqoaokPW1ZzM2KSr8jOIxmDp60LI1oLFKRgdvAk+CwQZ0pEGgNaD/l/cs7YT77O5V/ktbPlbQtm3shHosYwQkFxNOuCvk3CJjIPI8XSY69N8afDarqjxz3xepOOjv/ZqfTIFxLtvbELPawVF1vob88UJ8Y7a99h8aggWjTi3TJQyt3Sy/wRb/j5f48hwfJv7C5R0YyZ3X2MM+O1Gg7BEuqP0algmX+d7cbC0Ic2jKCw1uBHxw/ssrrT/JncXvRy7+wbn6mmjgLP4Qv5vR7h/FnLCQ" },
       { text: "Changelog", link: "https://github.com/TotomInc/vue3-select-component/releases" },
     ],
 
@@ -33,12 +34,12 @@ export default defineConfig({
         text: "Documentation",
         items: [
           { text: "Getting Started", link: "/getting-started" },
-          { text: "Dropdown Options", link: "/dropdown-options" },
+          { text: "Options", link: "/options" },
           { text: "Props", link: "/props" },
           { text: "Slots", link: "/slots" },
           { text: "Events", link: "/events" },
           { text: "Styling", link: "/styling" },
-          { text: "TypeScript", link: "/typescript" },
+          { text: "TypeScript Guide", link: "/typescript" },
         ],
       },
       {
@@ -49,12 +50,10 @@ export default defineConfig({
           { text: "Multiple Select Taggable", link: "/demo/multiple-select-taggable" },
           { text: "Custom option slot", link: "/demo/custom-option-slot" },
           { text: "Custom tag slot", link: "/demo/custom-tag-slot" },
-          { text: "Custom value/label properties", link: "/demo/custom-option-label-value" },
-          { text: "Pre-selected values", link: "/demo/pre-selected-values" },
-          { text: "Disabled options", link: "/demo/disabled-options" },
-          { text: "With menu-header", link: "/demo/with-menu-header" },
-          { text: "With complex menu filter", link: "/demo/with-complex-menu-filter.md" },
-          { text: "Controlled Menu", link: "/demo/controlled-menu" },
+          { text: "Custom value mapping", link: "/demo/custom-value-mapping" },
+          { text: "Dropdown menu header", link: "/demo/dropdown-menu-header" },
+          { text: "Custom displayed options", link: "/demo/custom-displayed-options" },
+          { text: "Controlled menu", link: "/demo/controlled-menu" },
         ],
       },
     ],

docs/demo/controlled-menu.md

@@ -1,8 +1,8 @@
 ---
-title: 'Controlled Menu'
+title: 'Controlled menu'
 ---
 
-# Controlled Menu
+# Controlled menu
 
 Control the menu open state programmatically with the `isMenuOpen` prop.
 
@@ -19,17 +19,19 @@ const isMenuOpen = ref(false);
   Toggle menu ({{ isMenuOpen ? "opened" : "closed" }})
 </button>
 
-<VueSelect
-  v-model="selected"
-  :options="[
-    { label: 'Option #1', value: 'option_1' },
-    { label: 'Option #2', value: 'option_2' },
-    { label: 'Option #3', value: 'option_3' },
-  ]"
-  :is-menu-open="isMenuOpen"
-  @menu-opened="isMenuOpen = true"
-  @menu-closed="isMenuOpen = false"
-/>
+<ClientOnly>
+  <VueSelect
+    v-model="selected"
+    :options="[
+      { label: 'Option #1', value: 'option_1' },
+      { label: 'Option #2', value: 'option_2' },
+      { label: 'Option #3', value: 'option_3' },
+    ]"
+    :is-menu-open="isMenuOpen"
+    @menu-opened="isMenuOpen = true"
+    @menu-closed="isMenuOpen = false"
+  />
+</ClientOnly>
 
 ## Demo source-code
 

docs/demo/with-complex-menu-filter.md → docs/demo/custom-displayed-options.md

@@ -1,8 +1,8 @@
 ---
-title: 'With complex menu filter'
+title: 'Custom displayed options'
 ---
 
-# With complex menu filter
+# Custom displayed options
 
 The following example demonstrate how you can create a complex filter inside the options menu, using:
 
@@ -41,19 +41,21 @@ function switchFilter() {
 };
 </script>
 
-<VueSelect
-  v-model="selectedUsers"
-  :options="options"
-  :displayed-options="displayedOptions"
-  :is-multi="true"
-  placeholder="Select users"
->
-  <template #menu-header>
-    <button type="button" @click="switchFilter" >
-      Switch filter type (current: {{ filter }})
-    </button>
-  </template>
-</VueSelect>
+<ClientOnly>
+  <VueSelect
+    v-model="selectedUsers"
+    :options="options"
+    :displayed-options="displayedOptions"
+    :is-multi="true"
+    placeholder="Select users"
+  >
+    <template #menu-header>
+      <button type="button" @click="switchFilter" >
+        Switch filter type (current: {{ filter }})
+      </button>
+    </template>
+  </VueSelect>
+</ClientOnly>
 
 <style scoped>
 :deep(.menu button) {

docs/demo/custom-option-slot.md

@@ -1,8 +1,8 @@
 ---
-title: 'Custom Option Slot'
+title: 'Custom option slot'
 ---
 
-# Custom Option Slot
+# Custom option slot
 
 The following example demonstrates how to use the `VueSelect` component with custom slots for `#value` & `#option` slots.
 
@@ -18,31 +18,33 @@ import VueSelect from "../../src";
 const selected = ref("");
 </script>
 
-<VueSelect
-  v-model="selected"
-  :options="[
-    { label: 'France', value: 'fr' },
-    { label: 'USA', value: 'us' },
-    { label: 'Germany', value: 'de' },
-    { label: 'Italy', value: 'it' },
-    { label: 'Spain', value: 'es' },
-    { label: 'Colombia', value: 'co' },
-    { label: 'Ecuador', value: 'ec' },
-  ]"
->
-  <template #value="{ option }">
-    <div :class="$style['custom-value']">
-      <img :src="`https://flagsapi.com/${option.value.toUpperCase()}/flat/24.png`" class="block w-6 h-auto">
-      <span>{{ option.label }}</span>
-    </div>
-  </template>
-
-  <template #option="{ option }">
-    <p :class="$style['custom-option']">
-      {{ option.label }} <small>{{ option.value }}</small>
-    </p>
-  </template>
-</VueSelect>
+<ClientOnly>
+  <VueSelect
+    v-model="selected"
+    :options="[
+      { label: 'France', value: 'fr' },
+      { label: 'USA', value: 'us' },
+      { label: 'Germany', value: 'de' },
+      { label: 'Italy', value: 'it' },
+      { label: 'Spain', value: 'es' },
+      { label: 'Colombia', value: 'co' },
+      { label: 'Ecuador', value: 'ec' },
+    ]"
+  >
+    <template #value="{ option }">
+      <div :class="$style['custom-value']">
+        <img :src="`https://flagsapi.com/${option.value.toUpperCase()}/flat/24.png`" class="block w-6 h-auto">
+        <span>{{ option.label }}</span>
+      </div>
+    </template>
+
+    <template #option="{ option }">
+      <p :class="$style['custom-option']">
+        {{ option.label }} <small>{{ option.value }}</small>
+      </p>
+    </template>
+  </VueSelect>
+</ClientOnly>
 
 <style module>
 .custom-value {

docs/demo/custom-tag-slot.md

@@ -1,8 +1,8 @@
 ---
-title: 'Custom Tag Slot'
+title: 'Custom tag slot'
 ---
 
-# Custom Tag Slot
+# Custom tag slot
 
 The following example demonstrates how to use the `VueSelect` component with a custom slot `#tag` when using the `isMulti` prop.
 
@@ -18,21 +18,23 @@ import VueSelect from "../../src";
 const selected = ref([]);
 </script>
 
-<VueSelect
-  v-model="selected"
-  :is-multi="true"
-  :options="[
-    { label: 'Alice', value: 'alice', username: '@alice_user' },
-    { label: 'John', value: 'john', username: '@john_user' },
-    { label: 'Greg', value: 'greg', username: '@greg_user' },
-  ]"
->
-  <template #tag="{ option, removeOption }">
-    <div :class="$style['custom-tag']">
-      {{ option.username }} <button type="button" @click="removeOption">&times;</button>
-    </div>
-  </template>
-</VueSelect>
+<ClientOnly>
+  <VueSelect
+    v-model="selected"
+    :is-multi="true"
+    :options="[
+      { label: 'Alice', value: 'alice', username: '@alice_user' },
+      { label: 'John', value: 'john', username: '@john_user' },
+      { label: 'Greg', value: 'greg', username: '@greg_user' },
+    ]"
+  >
+    <template #tag="{ option, removeOption }">
+      <div :class="$style['custom-tag']">
+        {{ option.username }} <button type="button" @click="removeOption">&times;</button>
+      </div>
+    </template>
+  </VueSelect>
+</ClientOnly>
 
 <style module>
 .custom-tag {

docs/demo/custom-option-label-value.md → docs/demo/custom-value-mapping.md

@@ -1,8 +1,8 @@
 ---
-title: 'Custom Option Label and Value properties'
+title: 'Custom value mapping'
 ---
 
-# Custom Option Label and Value properties
+# Custom value mapping
 
 ::: warning
 This isn't a common use-case. You should use the `label` and `value` properties of the option object when possible.
@@ -12,7 +12,7 @@ Read more about [`getOptionLabel` and `getOptionValue` props](../props.md).
 
 In the rare case you need to use different properties for the `label` and `value` of an option, you can use the `getOptionLabel` and `getOptionValue` props.
 
-If you're using TypeScript, be sure to read the [type-safety guide for these props](../typescript.md#using-custom-label-value-with-options) section.
+If you're using TypeScript, be sure to read the [type-safety guide for these props](../typescript.md#custom-value-mapping) section.
 
 <script setup>
 import { ref } from "vue";
@@ -22,16 +22,18 @@ import VueSelect from "../../src";
 const selected = ref("");
 </script>
 
-<VueSelect
-  v-model="selected"
-  :get-option-label="option => option.id"
-  :get-option-value="option => option.key"
-  :options="[
-    { id: 'France', key: 'fr' },
-    { id: 'USA', key: 'us' },
-    { id: 'Germany', key: 'de' },
-  ]"
-/>
+<ClientOnly>
+  <VueSelect
+    v-model="selected"
+    :get-option-label="option => option.id"
+    :get-option-value="option => option.key"
+    :options="[
+      { id: 'France', key: 'fr' },
+      { id: 'USA', key: 'us' },
+      { id: 'Germany', key: 'de' },
+    ]"
+  />
+</ClientOnly>
 
 ## Demo source-code