diff --git a/docs/.vuepress/components/BetterNoOptions.vue b/docs/.vitepress/components/BetterNoOptions.vue
similarity index 100%
rename from docs/.vuepress/components/BetterNoOptions.vue
rename to docs/.vitepress/components/BetterNoOptions.vue
diff --git a/docs/.vuepress/components/ClearButtonOverride.vue b/docs/.vitepress/components/ClearButtonOverride.vue
similarity index 100%
rename from docs/.vuepress/components/ClearButtonOverride.vue
rename to docs/.vitepress/components/ClearButtonOverride.vue
diff --git a/docs/.vuepress/components/CodePen.vue b/docs/.vitepress/components/CodePen.vue
similarity index 100%
rename from docs/.vuepress/components/CodePen.vue
rename to docs/.vitepress/components/CodePen.vue
diff --git a/docs/.vuepress/components/Contributors.vue b/docs/.vitepress/components/Contributors.vue
similarity index 100%
rename from docs/.vuepress/components/Contributors.vue
rename to docs/.vitepress/components/Contributors.vue
diff --git a/docs/.vuepress/components/CountrySelect.vue b/docs/.vitepress/components/CountrySelect.vue
similarity index 80%
rename from docs/.vuepress/components/CountrySelect.vue
rename to docs/.vitepress/components/CountrySelect.vue
index 99f5036..fbeb963 100644
--- a/docs/.vuepress/components/CountrySelect.vue
+++ b/docs/.vitepress/components/CountrySelect.vue
@@ -3,10 +3,12 @@
-
-
diff --git a/docs/.vuepress/theme/index.js b/docs/.vuepress/theme/index.js
deleted file mode 100644
index 4e8138f..0000000
--- a/docs/.vuepress/theme/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-module.exports = {
- extend: '@vuepress/theme-default',
-}
diff --git a/docs/.vuepress/theme/layouts/Layout.vue b/docs/.vuepress/theme/layouts/Layout.vue
deleted file mode 100644
index 3203dbe..0000000
--- a/docs/.vuepress/theme/layouts/Layout.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-
-
-
-
-
-
-
diff --git a/docs/.vuepress/utils/codePen.js b/docs/.vuepress/utils/codePen.js
deleted file mode 100644
index 3cbfd4a..0000000
--- a/docs/.vuepress/utils/codePen.js
+++ /dev/null
@@ -1,175 +0,0 @@
-export default () => {
- document.getElementsByClassName ||
- (document.getElementsByClassName = function (e) {
- var n,
- t,
- r,
- a = document,
- o = []
- if (a.querySelectorAll) return a.querySelectorAll('.' + e)
- if (a.evaluate)
- for (
- t = ".//*[contains(concat(' ', @class, ' '), ' " + e + " ')]",
- n = a.evaluate(t, a, null, 0, null);
- (r = n.iterateNext());
-
- )
- o.push(r)
- else
- for (
- n = a.getElementsByTagName('*'),
- t = new RegExp('(^|\\s)' + e + '(\\s|$)'),
- r = 0;
- r < n.length;
- r++
- )
- t.test(n[r].className) && o.push(n[r])
- return o
- }),
- (function () {
- function e() {
- function e() {
- for (
- var e = document.getElementsByClassName('codepen'),
- t = e.length - 1;
- t > -1;
- t--
- ) {
- var u = a(e[t])
- if (
- 0 !== Object.keys(u).length &&
- ((u = o(u)), (u.user = n(u, e[t])), r(u))
- ) {
- var c = i(u),
- l = s(u, c)
- f(e[t], l)
- }
- }
- m()
- }
-
- function n(e, n) {
- if ('string' == typeof e.user) return e.user
- for (var t = 0, r = n.children.length; t < r; t++) {
- var a = n.children[t],
- o = a.href || '',
- i = o.match(/codepen\.(io|dev)\/(\w+)\/pen\//i)
- if (i) return i[2]
- }
- return 'anon'
- }
-
- function r(e) {
- return e['slug-hash']
- }
-
- function a(e) {
- for (var n = {}, t = e.attributes, r = 0, a = t.length; r < a; r++) {
- var o = t[r].name
- 0 === o.indexOf('data-') && (n[o.replace('data-', '')] = t[r].value)
- }
- return n
- }
-
- function o(e) {
- return (
- e.href && (e['slug-hash'] = e.href),
- e.type && (e['default-tab'] = e.type),
- e.safe &&
- ('true' === e.safe
- ? (e.animations = 'run')
- : (e.animations = 'stop-after-5')),
- e
- )
- }
-
- function i(e) {
- var n = u(e),
- t = e.user ? e.user : 'anon',
- r = '?' + l(e),
- a = e.preview && 'true' === e.preview ? 'embed/preview' : 'embed',
- o = [n, t, a, e['slug-hash'] + r].join('/')
- return o.replace(/\/\//g, '//')
- }
-
- function u(e) {
- return e.host
- ? c(e.host)
- : 'file:' === document.location.protocol
- ? 'https://codepen.io'
- : '//codepen.io'
- }
-
- function c(e) {
- return e.match(/^\/\//) || !e.match(/https?:/)
- ? document.location.protocol + '//' + e
- : e
- }
-
- function l(e) {
- var n = ''
- for (var t in e)
- '' !== n && (n += '&'), (n += t + '=' + encodeURIComponent(e[t]))
- return n
- }
-
- function s(e, n) {
- var r
- e['pen-title']
- ? (r = e['pen-title'])
- : ((r = 'CodePen Embed ' + t), t++)
- var a = {
- id: 'cp_embed_' + e['slug-hash'].replace('/', '_'),
- src: n,
- scrolling: 'no',
- frameborder: '0',
- height: d(e),
- allowTransparency: 'true',
- allowfullscreen: 'true',
- allowpaymentrequest: 'true',
- name: 'CodePen Embed',
- title: r,
- class: 'cp_embed_iframe ' + (e['class'] ? e['class'] : ''),
- style: 'width: ' + p + '; overflow: hidden;',
- },
- o = '
-<<< @/.vuepress/components/SlotFooter.vue
+<<< @/.vitepress/components/SlotFooter.vue
## `header`
@@ -45,7 +45,7 @@ Displayed at the top of the component, above `.vs__dropdown-toggle`.
- `deselect {function}` - function to deselect an option
-<<< @/.vuepress/components/SlotHeader.vue
+<<< @/.vitepress/components/SlotHeader.vue
## `list-footer`
@@ -58,7 +58,7 @@ so this slot should contain a root ``.
- `filteredOptions {array}` - options filtered by the search text
-<<< @/.vuepress/components/SlotListFooter.vue
+<<< @/.vitepress/components/SlotListFooter.vue
## `list-header`
@@ -71,7 +71,7 @@ so this slot should contain a root ``.
- `filteredOptions {array}` - options filtered by the search text
-<<< @/.vuepress/components/SlotListHeader.vue
+<<< @/.vitepress/components/SlotListHeader.vue
## `no-options`
@@ -83,7 +83,7 @@ The no options slot is displayed above `list-footer` in the dropdown when
- `searching {boolean}` - is the component searching
-<<< @/.vuepress/components/SlotNoOptions.vue
+<<< @/.vitepress/components/SlotNoOptions.vue
## `open-indicator`
@@ -98,7 +98,7 @@ attributes: {
```
-<<< @/.vuepress/components/SlotOpenIndicator.vue
+<<< @/.vitepress/components/SlotOpenIndicator.vue
## `option`
@@ -107,7 +107,7 @@ The current option within the dropdown, contained within ``.
- `option {Object}` - The currently iterated option from `filteredOptions`
-<<< @/.vuepress/components/SlotOption.vue
+<<< @/.vitepress/components/SlotOption.vue
## `search`
@@ -151,7 +151,7 @@ If you want the default styling, you'll need to add `.vs__search` to the input y
```
-<<< @/.vuepress/components/SlotSearch.vue{5-6}
+<<< @/.vitepress/components/SlotSearch.vue{5-6}
## `selected-option`
@@ -162,7 +162,7 @@ This slot doesn't exist if `selected-option-container` is implemented.
- `option {Object}` - A selected option
-<<< @/.vuepress/components/SlotSelectedOption.vue
+<<< @/.vitepress/components/SlotSelectedOption.vue
## `selected-option-container`
@@ -176,13 +176,13 @@ or have fine grain control over the markup.
- `multiple {Boolean}` - If the component supports the selection of multiple values
-<<< @/.vuepress/components/SlotSelectedOptionContainer.vue
+<<< @/.vitepress/components/SlotSelectedOptionContainer.vue
## `spinner`
- `loading {Boolean}` - if the component is in a loading state
-<<< @/.vuepress/components/SlotSpinner.vue
+<<< @/.vitepress/components/SlotSpinner.vue
diff --git a/docs/guide/css.md b/docs/guide/css.md
index 9d99269..c374ccb 100644
--- a/docs/guide/css.md
+++ b/docs/guide/css.md
@@ -24,7 +24,7 @@ about [CSS Custom Properties.](https://developer.mozilla.org/en-US/docs/Web/CSS/
-<<< @/.vuepress/components/CssVariables.vue
+<<< @/.vitepress/components/CssVariables.vue
### Available CSS Variables 3.18+
@@ -62,7 +62,7 @@ instances of Vue Select, or add your own classname if you just want to affect on
-<<< @/.vuepress/components/CssSpecificity.vue
+<<< @/.vitepress/components/CssSpecificity.vue
## Dropdown Transition
@@ -74,7 +74,6 @@ transition name is `vs__fade`. There's a couple ways to override or change this
negate the default CSS. If you want to remove it entirely, you can set it to an empty string.
```html
-
```
diff --git a/docs/guide/filtering.md b/docs/guide/filtering.md
index c05bd8c..517b507 100644
--- a/docs/guide/filtering.md
+++ b/docs/guide/filtering.md
@@ -16,4 +16,4 @@ You can use the `filter` and `filterBy` props to hook right into something like
-<<< @/.vuepress/components/FuseFilter.vue
+<<< @/.vitepress/components/FuseFilter.vue
diff --git a/docs/guide/infinite-scroll.md b/docs/guide/infinite-scroll.md
index 6583d16..0956645 100644
--- a/docs/guide/infinite-scroll.md
+++ b/docs/guide/infinite-scroll.md
@@ -1,3 +1,7 @@
+
+
Vue Select doesn't ship with first party support for infinite scroll, but it's possible to implement
by hooking into the `open`, `close`, and `search` events, along with the `filterable` prop, and the
`list-footer` slot.
@@ -20,4 +24,4 @@ the scroll position.
-<<< @/.vuepress/components/InfiniteScroll.vue
+<<< @/.vitepress/components/InfiniteScroll.vue
diff --git a/docs/guide/keydown.md b/docs/guide/keydown.md
index b353960..dae2f77 100644
--- a/docs/guide/keydown.md
+++ b/docs/guide/keydown.md
@@ -9,7 +9,7 @@
-<<< @/.vuepress/components/TagOnComma.vue
+<<< @/.vitepress/components/TagOnComma.vue
## mapKeyDown
@@ -69,5 +69,5 @@ This is example listens for the `@` key, and autocompletes an email address with
-<<< @/.vuepress/components/CustomHandlers.vue
+<<< @/.vitepress/components/CustomHandlers.vue
diff --git a/docs/guide/loops.md b/docs/guide/loops.md
index 9c7e223..10bbe5c 100644
--- a/docs/guide/loops.md
+++ b/docs/guide/loops.md
@@ -12,6 +12,6 @@ method with the `country` and the `person` object.
-<<< @/.vuepress/components/LoopedSelect.vue
+<<< @/.vitepress/components/LoopedSelect.vue
diff --git a/docs/guide/opening.md b/docs/guide/opening.md
index 40613ab..a8af952 100644
--- a/docs/guide/opening.md
+++ b/docs/guide/opening.md
@@ -18,5 +18,5 @@ country has already been selected, we will display the dropdown right away.
-<<< @/.vuepress/components/OpenWhenSearchTextPresent.vue
+<<< @/.vitepress/components/OpenWhenSearchTextPresent.vue
diff --git a/docs/guide/pagination.md b/docs/guide/pagination.md
index 15042dd..509e28b 100644
--- a/docs/guide/pagination.md
+++ b/docs/guide/pagination.md
@@ -15,4 +15,4 @@ You can use the `filterable` boolean to turn off Vue Select's filtering, and the
-<<< @/.vuepress/components/Paginated.vue
+<<< @/.vitepress/components/Paginated.vue
diff --git a/docs/guide/positioning.md b/docs/guide/positioning.md
index ad5a4b9..5b3fba4 100644
--- a/docs/guide/positioning.md
+++ b/docs/guide/positioning.md
@@ -30,4 +30,4 @@ popper to calculate positioning for us.
Check out the [Popper Docs](https://popper.js.org/docs/v2/modifiers/) to see the full `modifiers`
API being used below.
-<<< @/.vuepress/components/PositionedWithPopper.vue{25-59}
+<<< @/.vitepress/components/PositionedWithPopper.vue{25-59}
diff --git a/docs/guide/selectable.md b/docs/guide/selectable.md
index 954fc73..74416ef 100644
--- a/docs/guide/selectable.md
+++ b/docs/guide/selectable.md
@@ -31,7 +31,7 @@ This object will be passed to `selectable`, so we can check if the author should
-<<< @/.vuepress/components/UnselectableExample.vue{6}
+<<< @/.vitepress/components/UnselectableExample.vue{6}
## Limiting the Number of Selections
@@ -41,4 +41,4 @@ of three books.
-<<< @/.vuepress/components/LimitSelectionQuantity.vue{8}
+<<< @/.vitepress/components/LimitSelectionQuantity.vue{8}
diff --git a/docs/guide/slots.md b/docs/guide/slots.md
index 62d7392..cd38550 100644
--- a/docs/guide/slots.md
+++ b/docs/guide/slots.md
@@ -29,4 +29,4 @@ in your own apps.
-<<< @/.vuepress/components/BetterNoOptions.vue
+<<< @/.vitepress/components/BetterNoOptions.vue
diff --git a/docs/guide/values.md b/docs/guide/values.md
index 5a82bfd..33f1694 100644
--- a/docs/guide/values.md
+++ b/docs/guide/values.md
@@ -1,3 +1,9 @@
+
+
## Getting and Setting
### `v-model`
@@ -7,7 +13,6 @@ vue-select takes advantage of the `v-model` syntax to sync values with a parent.
syntax works with primitives and objects.
```html
-
```
@@ -29,7 +34,6 @@ The `value` prop lets vue-select know what value is currently selected. It will
numbers or objects. If you're using a `multiple` v-select, you'll want to pass an array.
```html
-
```
@@ -49,7 +53,6 @@ can bind the selected value with `:value="$store.myValue"`, and use the `input`
mutation, or dispatch an action – or anything else you might need to do when the selection changes.
```html
-
```
@@ -69,7 +72,6 @@ By default, vue-select supports choosing a single value. If you need multiple va
is true, `v-model` and `value` must be an array.
```html
-
```
@@ -96,7 +98,6 @@ If we want to display the `country`, but return the `code` to `v-model`, we can
prop to receive only the data that's required.
```html
-
```
@@ -115,11 +116,10 @@ The `reduce` property also works well when you have a deeply nested value:
```
```html
-
```
-
+
## Caveats with `reduce`
@@ -129,7 +129,7 @@ value, but the complete option object is not present in the `options` array.
-<<< @/.vuepress/components/ReducedWithNoMatchingOption.vue
+<<< @/.vitepress/components/ReducedWithNoMatchingOption.vue
In the example above, the component was supplied with an ID that doesn't exist in the `options`
array. When `value` changes, Vue Select searches the supplied options, running each one
@@ -148,7 +148,6 @@ exist in the `options` array.
To allow input that's not present within the options, set the `taggable` prop to true.
```html
-
```
@@ -157,7 +156,6 @@ To allow input that's not present within the options, set the `taggable` prop to
If you want added tags to be pushed to the options array, set `push-tags` to true.
```html
-
```
@@ -193,8 +191,7 @@ const options = [
];
```
-```html
-
+```vue
-```
-
-
-
+```
diff --git a/docs/index.md b/docs/index.md
index 51cf8eb..bcfc674 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -1,3 +1,8 @@
+
+
# Vue Select
@@ -18,7 +23,7 @@ lightweight as possible, while maintaining high standards for accessibility,
developer experience, and customization.
-
+
Vue Select aims to be as lightweight as possible, while maintaining high standards for accessibility,
diff --git a/package.json b/package.json
index 238e8e7..299a2c7 100644
--- a/package.json
+++ b/package.json
@@ -23,8 +23,9 @@
"license": "MIT",
"prepare": "npm run build",
"scripts": {
- "dev:docs": "cd docs && yarn serve",
- "build:docs": "cd docs && yarn build",
+ "docs:dev": "vitepress dev docs",
+ "docs:build": "vitepress build docs",
+ "docs:serve": "vitepress serve docs",
"semantic-release": "semantic-release",
"commit": "git-cz",
"dev": "vite",
diff --git a/tsconfig.json b/tsconfig.json
index 24f21b0..9cd71c4 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,14 +1,17 @@
{
- "files": [],
- "references": [
- {
- "path": "./tsconfig.vite-config.json"
- },
- {
- "path": "./tsconfig.app.json"
- },
- {
- "path": "./tsconfig.vitest.json"
- }
- ]
+ "files": [],
+ "references": [
+ {
+ "path": "./tsconfig.vite-config.json"
+ },
+ {
+ "path": "./tsconfig.app.json"
+ },
+ {
+ "path": "./tsconfig.vitest.json"
+ },
+ {
+ "path": "./tsconfig.vitepress.json"
+ }
+ ]
}
diff --git a/tsconfig.vitepress.json b/tsconfig.vitepress.json
new file mode 100644
index 0000000..aebfc48
--- /dev/null
+++ b/tsconfig.vitepress.json
@@ -0,0 +1,9 @@
+{
+ "extends": "@vue/tsconfig/tsconfig.web.json",
+ "include": ["./docs/.vitepress/**/*"],
+ "exclude": [],
+ "compilerOptions": {
+ "composite": true,
+ "baseUrl": "."
+ }
+}