Skip to content

Commit 289ef21

Browse files
TotomIncTotomInc
authored
feat: improve DOM structure, VitePress Teleport fix, minor features & bug fixes (#204)
* feat: major improvements, restructure DOM, split components, improve styles * fix(docs): experiment with <ClientOnly /> to avoid SSR issues on /demo/single-select * tests: remove duplicate tests, consolidate them * chore: ignore test type error * chore: regenerate package-lock * build: bump dev-deps * feat(select): rework CSS variables * feat(docs): /dropdown-options to /options * chore(docs): update install command, update vue 3.5+ notice * build: rollback to vue-tsc 2.2.0 See vuejs/language-tools#5191 * fix(select): don't import defineExpose since it's a compiler macro * feat(select): add data-state attribute * feat(docs): add props.class * feat(docs): update styling docs * feat(docs): update events docs * feat(docs): update /typescript docs * feat(docs): update /options docs * feat(docs): add external link to playground * feat(docs): rework demos and make them SSR friendly * chore: release v0.11.0-beta.1
1 parent 0d2e4fa commit 289ef21

28 files changed

+1033
-943
lines changed

‎docs/.vitepress/config.ts

+7-8
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ export default defineConfig({
2121
{ text: "Home", link: "/" },
2222
{ text: "Docs", link: "/getting-started" },
2323
{ text: "Demo", link: "/demo/single-select" },
24+
{ 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" },
2425
{ text: "Changelog", link: "https://github.com/TotomInc/vue3-select-component/releases" },
2526
],
2627

@@ -33,12 +34,12 @@ export default defineConfig({
3334
text: "Documentation",
3435
items: [
3536
{ text: "Getting Started", link: "/getting-started" },
36-
{ text: "Dropdown Options", link: "/dropdown-options" },
37+
{ text: "Options", link: "/options" },
3738
{ text: "Props", link: "/props" },
3839
{ text: "Slots", link: "/slots" },
3940
{ text: "Events", link: "/events" },
4041
{ text: "Styling", link: "/styling" },
41-
{ text: "TypeScript", link: "/typescript" },
42+
{ text: "TypeScript Guide", link: "/typescript" },
4243
],
4344
},
4445
{
@@ -49,12 +50,10 @@ export default defineConfig({
4950
{ text: "Multiple Select Taggable", link: "/demo/multiple-select-taggable" },
5051
{ text: "Custom option slot", link: "/demo/custom-option-slot" },
5152
{ text: "Custom tag slot", link: "/demo/custom-tag-slot" },
52-
{ text: "Custom value/label properties", link: "/demo/custom-option-label-value" },
53-
{ text: "Pre-selected values", link: "/demo/pre-selected-values" },
54-
{ text: "Disabled options", link: "/demo/disabled-options" },
55-
{ text: "With menu-header", link: "/demo/with-menu-header" },
56-
{ text: "With complex menu filter", link: "/demo/with-complex-menu-filter.md" },
57-
{ text: "Controlled Menu", link: "/demo/controlled-menu" },
53+
{ text: "Custom value mapping", link: "/demo/custom-value-mapping" },
54+
{ text: "Dropdown menu header", link: "/demo/dropdown-menu-header" },
55+
{ text: "Custom displayed options", link: "/demo/custom-displayed-options" },
56+
{ text: "Controlled menu", link: "/demo/controlled-menu" },
5857
],
5958
},
6059
],

‎docs/demo/controlled-menu.md

+15-13
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
---
2-
title: 'Controlled Menu'
2+
title: 'Controlled menu'
33
---
44

5-
# Controlled Menu
5+
# Controlled menu
66

77
Control the menu open state programmatically with the `isMenuOpen` prop.
88

@@ -19,17 +19,19 @@ const isMenuOpen = ref(false);
1919
Toggle menu ({{ isMenuOpen ? "opened" : "closed" }})
2020
</button>
2121

22-
<VueSelect
23-
v-model="selected"
24-
:options="[
25-
{ label: 'Option #1', value: 'option_1' },
26-
{ label: 'Option #2', value: 'option_2' },
27-
{ label: 'Option #3', value: 'option_3' },
28-
]"
29-
:is-menu-open="isMenuOpen"
30-
@menu-opened="isMenuOpen = true"
31-
@menu-closed="isMenuOpen = false"
32-
/>
22+
<ClientOnly>
23+
<VueSelect
24+
v-model="selected"
25+
:options="[
26+
{ label: 'Option #1', value: 'option_1' },
27+
{ label: 'Option #2', value: 'option_2' },
28+
{ label: 'Option #3', value: 'option_3' },
29+
]"
30+
:is-menu-open="isMenuOpen"
31+
@menu-opened="isMenuOpen = true"
32+
@menu-closed="isMenuOpen = false"
33+
/>
34+
</ClientOnly>
3335

3436
## Demo source-code
3537

‎docs/demo/with-complex-menu-filter.md renamed to ‎docs/demo/custom-displayed-options.md

+17-15
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
---
2-
title: 'With complex menu filter'
2+
title: 'Custom displayed options'
33
---
44

5-
# With complex menu filter
5+
# Custom displayed options
66

77
The following example demonstrate how you can create a complex filter inside the options menu, using:
88

@@ -41,19 +41,21 @@ function switchFilter() {
4141
};
4242
</script>
4343

44-
<VueSelect
45-
v-model="selectedUsers"
46-
:options="options"
47-
:displayed-options="displayedOptions"
48-
:is-multi="true"
49-
placeholder="Select users"
50-
>
51-
<template #menu-header>
52-
<button type="button" @click="switchFilter" >
53-
Switch filter type (current: {{ filter }})
54-
</button>
55-
</template>
56-
</VueSelect>
44+
<ClientOnly>
45+
<VueSelect
46+
v-model="selectedUsers"
47+
:options="options"
48+
:displayed-options="displayedOptions"
49+
:is-multi="true"
50+
placeholder="Select users"
51+
>
52+
<template #menu-header>
53+
<button type="button" @click="switchFilter" >
54+
Switch filter type (current: {{ filter }})
55+
</button>
56+
</template>
57+
</VueSelect>
58+
</ClientOnly>
5759

5860
<style scoped>
5961
:deep(.menu button) {

‎docs/demo/custom-option-slot.md

+29-27
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
---
2-
title: 'Custom Option Slot'
2+
title: 'Custom option slot'
33
---
44

5-
# Custom Option Slot
5+
# Custom option slot
66

77
The following example demonstrates how to use the `VueSelect` component with custom slots for `#value` & `#option` slots.
88

@@ -18,31 +18,33 @@ import VueSelect from "../../src";
1818
const selected = ref("");
1919
</script>
2020

21-
<VueSelect
22-
v-model="selected"
23-
:options="[
24-
{ label: 'France', value: 'fr' },
25-
{ label: 'USA', value: 'us' },
26-
{ label: 'Germany', value: 'de' },
27-
{ label: 'Italy', value: 'it' },
28-
{ label: 'Spain', value: 'es' },
29-
{ label: 'Colombia', value: 'co' },
30-
{ label: 'Ecuador', value: 'ec' },
31-
]"
32-
>
33-
<template #value="{ option }">
34-
<div :class="$style['custom-value']">
35-
<img :src="`https://flagsapi.com/${option.value.toUpperCase()}/flat/24.png`" class="block w-6 h-auto">
36-
<span>{{ option.label }}</span>
37-
</div>
38-
</template>
39-
40-
<template #option="{ option }">
41-
<p :class="$style['custom-option']">
42-
{{ option.label }} <small>{{ option.value }}</small>
43-
</p>
44-
</template>
45-
</VueSelect>
21+
<ClientOnly>
22+
<VueSelect
23+
v-model="selected"
24+
:options="[
25+
{ label: 'France', value: 'fr' },
26+
{ label: 'USA', value: 'us' },
27+
{ label: 'Germany', value: 'de' },
28+
{ label: 'Italy', value: 'it' },
29+
{ label: 'Spain', value: 'es' },
30+
{ label: 'Colombia', value: 'co' },
31+
{ label: 'Ecuador', value: 'ec' },
32+
]"
33+
>
34+
<template #value="{ option }">
35+
<div :class="$style['custom-value']">
36+
<img :src="`https://flagsapi.com/${option.value.toUpperCase()}/flat/24.png`" class="block w-6 h-auto">
37+
<span>{{ option.label }}</span>
38+
</div>
39+
</template>
40+
41+
<template #option="{ option }">
42+
<p :class="$style['custom-option']">
43+
{{ option.label }} <small>{{ option.value }}</small>
44+
</p>
45+
</template>
46+
</VueSelect>
47+
</ClientOnly>
4648

4749
<style module>
4850
.custom-value {

‎docs/demo/custom-tag-slot.md

+19-17
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
---
2-
title: 'Custom Tag Slot'
2+
title: 'Custom tag slot'
33
---
44

5-
# Custom Tag Slot
5+
# Custom tag slot
66

77
The following example demonstrates how to use the `VueSelect` component with a custom slot `#tag` when using the `isMulti` prop.
88

@@ -18,21 +18,23 @@ import VueSelect from "../../src";
1818
const selected = ref([]);
1919
</script>
2020

21-
<VueSelect
22-
v-model="selected"
23-
:is-multi="true"
24-
:options="[
25-
{ label: 'Alice', value: 'alice', username: '@alice_user' },
26-
{ label: 'John', value: 'john', username: '@john_user' },
27-
{ label: 'Greg', value: 'greg', username: '@greg_user' },
28-
]"
29-
>
30-
<template #tag="{ option, removeOption }">
31-
<div :class="$style['custom-tag']">
32-
{{ option.username }} <button type="button" @click="removeOption">&times;</button>
33-
</div>
34-
</template>
35-
</VueSelect>
21+
<ClientOnly>
22+
<VueSelect
23+
v-model="selected"
24+
:is-multi="true"
25+
:options="[
26+
{ label: 'Alice', value: 'alice', username: '@alice_user' },
27+
{ label: 'John', value: 'john', username: '@john_user' },
28+
{ label: 'Greg', value: 'greg', username: '@greg_user' },
29+
]"
30+
>
31+
<template #tag="{ option, removeOption }">
32+
<div :class="$style['custom-tag']">
33+
{{ option.username }} <button type="button" @click="removeOption">&times;</button>
34+
</div>
35+
</template>
36+
</VueSelect>
37+
</ClientOnly>
3638
3739
<style module>
3840
.custom-tag {

‎docs/demo/custom-option-label-value.md renamed to ‎docs/demo/custom-value-mapping.md

+15-13
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
---
2-
title: 'Custom Option Label and Value properties'
2+
title: 'Custom value mapping'
33
---
44

5-
# Custom Option Label and Value properties
5+
# Custom value mapping
66

77
::: warning
88
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).
1212

1313
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.
1414

15-
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.
15+
If you're using TypeScript, be sure to read the [type-safety guide for these props](../typescript.md#custom-value-mapping) section.
1616

1717
<script setup>
1818
import { ref } from "vue";
@@ -22,16 +22,18 @@ import VueSelect from "../../src";
2222
const selected = ref("");
2323
</script>
2424

25-
<VueSelect
26-
v-model="selected"
27-
:get-option-label="option => option.id"
28-
:get-option-value="option => option.key"
29-
:options="[
30-
{ id: 'France', key: 'fr' },
31-
{ id: 'USA', key: 'us' },
32-
{ id: 'Germany', key: 'de' },
33-
]"
34-
/>
25+
<ClientOnly>
26+
<VueSelect
27+
v-model="selected"
28+
:get-option-label="option => option.id"
29+
:get-option-value="option => option.key"
30+
:options="[
31+
{ id: 'France', key: 'fr' },
32+
{ id: 'USA', key: 'us' },
33+
{ id: 'Germany', key: 'de' },
34+
]"
35+
/>
36+
</ClientOnly>
3537

3638
## Demo source-code
3739

‎docs/demo/disabled-options.md

-52
This file was deleted.

0 commit comments

Comments
 (0)