Skip to content

Commit 7881ae7

Browse files
TotomIncTotomInc
committed
feat(docs): rework demos and make them SSR friendly
1 parent 44ffc12 commit 7881ae7

13 files changed

+141
-261
lines changed

Diff for: ‎docs/.vitepress/config.ts

+4-6
Original file line numberDiff line numberDiff line change
@@ -50,12 +50,10 @@ export default defineConfig({
5050
{ text: "Multiple Select Taggable", link: "/demo/multiple-select-taggable" },
5151
{ text: "Custom option slot", link: "/demo/custom-option-slot" },
5252
{ text: "Custom tag slot", link: "/demo/custom-tag-slot" },
53-
{ text: "Custom value/label properties", link: "/demo/custom-option-label-value" },
54-
{ text: "Pre-selected values", link: "/demo/pre-selected-values" },
55-
{ text: "Disabled options", link: "/demo/disabled-options" },
56-
{ text: "With menu-header", link: "/demo/with-menu-header" },
57-
{ text: "With complex menu filter", link: "/demo/with-complex-menu-filter.md" },
58-
{ 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" },
5957
],
6058
},
6159
],

Diff for: ‎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

Diff for: ‎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) {

Diff for: ‎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 {

Diff for: ‎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 {

Diff for: ‎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

Diff for: ‎docs/demo/disabled-options.md

-52
This file was deleted.

Diff for: ‎docs/demo/with-menu-header.md renamed to ‎docs/demo/dropdown-menu-header.md

+20-18
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
---
2-
title: 'With menu header'
2+
title: 'Dropdown menu header'
33
---
44

5-
# With menu header
5+
# Dropdown menu header
66

77
The following example demonstrates how to use the `VueSelect` component with a custom menu header before the options.
88

@@ -16,22 +16,24 @@ import VueSelect from "../../src";
1616
const selected = ref("");
1717
</script>
1818

19-
<VueSelect
20-
v-model="selected"
21-
:options="[
22-
{ label: 'Option #1', value: 'option_1' },
23-
{ label: 'Option #2', value: 'option_2' },
24-
{ label: 'Option #3', value: 'option_3' },
25-
{ label: 'Option #4', value: 'option_4' },
26-
{ label: 'Option #5', value: 'option_5' },
27-
]"
28-
>
29-
<template #menu-header>
30-
<div class="menu-header">
31-
<h3>Books</h3>
32-
</div>
33-
</template>
34-
</VueSelect>
19+
<ClientOnly>
20+
<VueSelect
21+
v-model="selected"
22+
:options="[
23+
{ label: 'Option #1', value: 'option_1' },
24+
{ label: 'Option #2', value: 'option_2' },
25+
{ label: 'Option #3', value: 'option_3' },
26+
{ label: 'Option #4', value: 'option_4' },
27+
{ label: 'Option #5', value: 'option_5' },
28+
]"
29+
>
30+
<template #menu-header>
31+
<div class="menu-header">
32+
<h3>Books</h3>
33+
</div>
34+
</template>
35+
</VueSelect>
36+
</ClientOnly>
3537
3638
<style scoped>
3739
.menu-header {

0 commit comments

Comments
 (0)