vitepress wip

mostly working, feeling like vuepress should still be considered
2026-06-22 10:30:34 +03:00 · 2022-02-23 10:25:36 -08:00
parent f3e22e0439
commit 96ff08406c
73 changed files with 235 additions and 579 deletions
@@ -3,10 +3,12 @@
 </template>
 <script>
 import vSelect from 'vue-select'
 import countryCodes from '../data/countryCodes'
 export default {
  name: 'CountrySelect',
  components: { vSelect },
  data: () => ({
    options: countryCodes,
  }),
@@ -15,6 +15,7 @@
 </template>
 <script>
 import vSelect from 'vue-select'
 import countries from '../data/countries'
 export default {
@@ -0,0 +1,20 @@
 import { defineConfig } from 'vitepress'
 // import { head } from './config/head'
 import { themeConfig } from './config/themeConfig'
 import { fileURLToPath, URL } from 'url'
 export default defineConfig({
    title: 'Vue Select',
    // head,
    themeConfig,
    vite: {
        resolve: {
            alias: {
                '@': fileURLToPath(new URL('.', import.meta.url)),
                'vue-select': fileURLToPath(
                    new URL('../../src', import.meta.url)
                ),
            },
        },
    },
 })
@@ -0,0 +1,63 @@
 import meta from './meta'
 import type { HeadConfig } from 'vitepress'
 export const head: HeadConfig = [
    // [
    //     'link',
    //     {
    //         href: '//fonts.googleapis.com/css?family=Source+Sans+Pro:400,600|Roboto Mono',
    //         rel: 'stylesheet',
    //         type: 'text/css',
    //     },
    // ],
    // [
    //     'link',
    //     {
    //         href: '//fonts.googleapis.com/css?family=Dosis:300&amp;text=Vue Select',
    //         rel: 'stylesheet',
    //         type: 'text/css',
    //     },
    // ],
    // ['link', { rel: 'icon', href: `/vue-logo.png` }],
    // ['meta', { name: 'theme-color', content: '#3eaf7c' }],
    // ['meta', { name: 'apple-mobile-web-app-capable', content: 'yes' }],
    // [
    //     'meta',
    //     { name: 'apple-mobile-web-app-status-bar-style', content: 'black' },
    // ],
    // [
    //     'link',
    //     {
    //         rel: 'apple-touch-icon',
    //         href: `/icons/apple-touch-icon-152x152.png`,
    //     },
    // ],
    // [
    //     'link',
    //     {
    //         rel: 'mask-icon',
    //         href: '/icons/safari-pinned-tab.svg',
    //         color: '#3eaf7c',
    //     },
    // ],
    // [
    //     'meta',
    //     {
    //         name: 'msapplication-TileImage',
    //         content: '/icons/msapplication-icon-144x144.png',
    //     },
    // ],
    // ['meta', { name: 'msapplication-TileColor', content: '#000000' }],
    // ['meta', { name: 'title', content: meta.title }],
    // ['meta', { name: 'description', content: meta.description }],
    // ['link', { rel: 'icon', href: meta.icon, type: 'image/png' }],
    // ['meta', { property: 'og:image', content: meta.icon }],
    // ['meta', { property: 'twitter:image', content: meta.icon }],
    // ['meta', { name: 'description', content: meta.description }],
    // ['meta', { property: 'og:description', content: '' }],
    // ['meta', { property: 'twitter:description', content: meta.description }],
    // ['meta', { property: 'twitter:title', content: meta.title }],
    // ['meta', { property: 'og:title', content: meta.title }],
    // ['meta', { property: 'og:site_name', content: meta.title }],
    // ['meta', { property: 'og:url', content: meta.url }],
 ]
@@ -1,4 +1,4 @@
-module.exports = {
+export default {
  title: 'Vue Select | VueJS Select2/Chosen Component',
  description:
    'Everything you wish the HTML select element could do, wrapped up into a lightweight, extensible Vue component.',
@@ -0,0 +1,77 @@
 import type { DefaultTheme } from 'vitepress'
 export const themeConfig: DefaultTheme.Config = {
    repo: 'sagalbot/vue-select',
    editLinks: true,
    docsDir: 'docs',
    nav: [{ text: 'Sandbox', link: '/sandbox' }],
    sidebar: [
        {
            text: 'Community',
            collapsable: false,
            children: [
                { text: 'Sponsors 🎉', link: 'sponsors' },
                { text: 'Contributors', link: 'contributors' },
            ],
        },
        {
            text: 'Getting Started',
            collapsable: false,
            children: [
                { link: 'guide/install', text: 'Installation' },
                { link: 'guide/options', text: 'Dropdown Options' },
                { link: 'guide/values', text: 'Selecting Values' },
                { link: 'guide/upgrading', text: 'Upgrading 2.x to 3.x' },
            ],
        },
        {
            text: 'Templating & Styling',
            collapsable: false,
            children: [
                { link: 'guide/components', text: 'Child Components' },
                { link: 'guide/css', text: 'CSS & Selectors' },
                { link: 'guide/slots', text: 'Slots' },
            ],
        },
        {
            text: 'Accessibility',
            collapsable: false,
            children: [
                { link: 'guide/accessibility', text: 'WAI-ARIA Spec' },
                { link: 'guide/localization', text: 'Localization' },
            ],
        },
        {
            text: 'Use Cases',
            collapsable: false,
            children: [
                { link: 'guide/validation', text: 'Validation' },
                { link: 'guide/selectable', text: 'Limiting Selections' },
                { link: 'guide/pagination', text: 'Pagination' },
                { link: 'guide/infinite-scroll', text: 'Infinite Scroll' },
                { link: 'guide/vuex', text: 'Vuex' },
                { link: 'guide/ajax', text: 'AJAX' },
                { link: 'guide/loops', text: 'Using in Loops' },
            ],
        },
        {
            text: 'Customizing',
            collapsable: false,
            children: [
                { link: 'guide/keydown', text: 'Keydown Events' },
                { link: 'guide/positioning', text: 'Dropdown Position' },
                { link: 'guide/opening', text: 'Dropdown Opening' },
                { link: 'guide/filtering', text: 'Option Filtering' },
            ],
        },
        {
            text: 'API',
            collapsable: false,
            children: [
                { link: 'api/props', text: 'Props' },
                { link: 'api/slots', text: 'Slots' },
                { link: 'api/events', text: 'Events' },
            ],
        },
    ],
 }
@@ -1,12 +0,0 @@
 const { description } = require('./config/meta')
 const head = require('./config/head')
 const plugins = require('./config/plugins')
 const themeConfig = require('./config/themeConfig')
 module.exports = {
  title: 'Vue Select',
  description,
  head,
  plugins,
  themeConfig,
 }
@@ -1,67 +0,0 @@
 const isDeployPreview = require('./isDeployPreview')
 const meta = require('./meta')
 const head = [
  [
    'link',
    {
      href:
        '//fonts.googleapis.com/css?family=Source+Sans+Pro:400,600|Roboto Mono',
      rel: 'stylesheet',
      type: 'text/css',
    },
  ],
  [
    'link',
    {
      href: '//fonts.googleapis.com/css?family=Dosis:300&amp;text=Vue Select',
      rel: 'stylesheet',
      type: 'text/css',
    },
  ],
  ['link', { rel: 'icon', href: `/vue-logo.png` }],
  ['meta', { name: 'theme-color', content: '#3eaf7c' }],
  ['meta', { name: 'apple-mobile-web-app-capable', content: 'yes' }],
  ['meta', { name: 'apple-mobile-web-app-status-bar-style', content: 'black' }],
  [
    'link',
    { rel: 'apple-touch-icon', href: `/icons/apple-touch-icon-152x152.png` },
  ],
  [
    'link',
    {
      rel: 'mask-icon',
      href: '/icons/safari-pinned-tab.svg',
      color: '#3eaf7c',
    },
  ],
  [
    'meta',
    {
      name: 'msapplication-TileImage',
      content: '/icons/msapplication-icon-144x144.png',
    },
  ],
  ['meta', { name: 'msapplication-TileColor', content: '#000000' }],
  ['meta', { name: 'title', content: meta.title }],
  ['meta', { name: 'description', content: meta.description }],
  ['link', { rel: 'icon', href: meta.icon, type: 'image/png' }],
  ['meta', { property: 'og:image', content: meta.icon }],
  ['meta', { property: 'twitter:image', content: meta.icon }],
  ['meta', { name: 'description', content: meta.description }],
  ['meta', { property: 'og:description', content: '' }],
  ['meta', { property: 'twitter:description', content: meta.description }],
  ['meta', { property: 'twitter:title', content: meta.title }],
  ['meta', { property: 'og:title', content: meta.title }],
  ['meta', { property: 'og:site_name', content: meta.title }],
  ['meta', { property: 'og:url', content: meta.url }],
 ]
 if (isDeployPreview) {
  head.push(
    ['meta', { name: 'robots', content: 'noindex' }],
    ['meta', { name: 'googlebot', content: 'noindex' }]
  )
 }
 module.exports = head
@@ -1 +0,0 @@
 module.exports = process.env.hasOwnProperty('DEPLOY_PREVIEW')
@@ -1,22 +0,0 @@
 const isDeployPreview = require('./isDeployPreview')
 module.exports = [
  [
    '@vuepress/google-analytics',
    {
      ga: isDeployPreview ? '' : 'UA-12818324-8',
    },
  ],
  [
    '@vuepress/pwa',
    {
      serviceWorker: false,
      updatePopup: true,
    },
  ],
  '@vuepress/plugin-register-components',
  '@vuepress/plugin-active-header-links',
  '@vuepress/plugin-search',
  '@vuepress/plugin-nprogress',
  require('../github/index'),
 ]
@@ -1,77 +0,0 @@
 module.exports = {
  repo: 'sagalbot/vue-select',
  editLinks: true,
  docsDir: 'docs',
  nav: [{ text: 'Sandbox', link: '/sandbox' }],
  sidebar: {
    '/': [
      {
        title: 'Community',
        collapsable: false,
        children: [
          ['sponsors', 'Sponsors 🎉'],
          ['contributors', 'Contributors'],
        ],
      },
      {
        title: 'Getting Started',
        collapsable: false,
        children: [
          ['guide/install', 'Installation'],
          ['guide/options', 'Dropdown Options'],
          ['guide/values', 'Selecting Values'],
          ['guide/upgrading', 'Upgrading 2.x to 3.x'],
        ],
      },
      {
        title: 'Templating & Styling',
        collapsable: false,
        children: [
          ['guide/components', 'Child Components'],
          ['guide/css', 'CSS & Selectors'],
          ['guide/slots', 'Slots'],
        ],
      },
      {
        title: 'Accessibility',
        collapsable: false,
        children: [
          ['guide/accessibility', 'WAI-ARIA Spec'],
          ['guide/localization', 'Localization'],
        ],
      },
      {
        title: 'Use Cases',
        collapsable: false,
        children: [
          ['guide/validation', 'Validation'],
          ['guide/selectable', 'Limiting Selections'],
          ['guide/pagination', 'Pagination'],
          ['guide/infinite-scroll', 'Infinite Scroll'],
          ['guide/vuex', 'Vuex'],
          ['guide/ajax', 'AJAX'],
          ['guide/loops', 'Using in Loops'],
        ],
      },
      {
        title: 'Customizing',
        collapsable: false,
        children: [
          ['guide/keydown', 'Keydown Events'],
          ['guide/positioning', 'Dropdown Position'],
          ['guide/opening', 'Dropdown Opening'],
          ['guide/filtering', 'Option Filtering'],
        ],
      },
      {
        title: 'API',
        collapsable: false,
        children: [
          ['api/props', 'Props'],
          ['api/slots', 'Slots'],
          ['api/events', 'Events'],
        ],
      },
    ],
  },
 }
@@ -1,19 +0,0 @@
 import vSelect from '../../src/components/Select'
 export default ({ Vue, options, router, siteData }) => {
  Vue.component('v-select', vSelect)
  /**
   * Remove service workers.
   */
  if (typeof navigator !== 'undefined' && 'serviceWorker' in navigator) {
    navigator.serviceWorker.getRegistrations().then((registrations) => {
      registrations.forEach((registration) => {
        registration
          .unregister()
          .then(() => console.log('Service worker unregistered.'))
          .catch(() => console.log('Error unregistering service worker.'))
      })
    })
  }
 }
@@ -1,65 +0,0 @@
 require('dotenv').config()
 const axios = require('axios')
 const { graphql } = require('@octokit/graphql')
 module.exports = async () => ({
  name: 'constants.js',
  content: `
      export const SPONSORS = ${JSON.stringify(await getSponsors())};
      export const CONTRIBUTORS = ${JSON.stringify(await getContributors())};
    `,
 })
 /**
 * Get a list of vue select contributors.
 * @return {Promise<T>}
 */
 async function getContributors() {
  const { data } = await axios.get(
    'https://api.github.com/repos/sagalbot/vue-select/contributors?per_page=100'
  )
  return data
 }
 /**
 * Get a list of the current sponsors. Requires GITHUB_TOKEN to be set.
 * @return {Promise<*[]|ProfileNode[]|postcss.ChildNode[]|Array<parser.Node>|[]>}
 */
 async function getSponsors() {
  const query = `
    {
      user(login: "sagalbot") {
        sponsorshipsAsMaintainer(first: 100) {
          nodes {
            sponsorEntity {
              ... on User {
                id
                avatarUrl
                login
              }
              ... on Organization {
                id
                avatarUrl
                login
              }
            }
            createdAt
          }
        }
      }
    }
  `
  try {
    const { user } = await graphql(query, {
      headers: {
        authorization: `token ${process.env.GITHUB_TOKEN || ''}`,
      },
    })
    return user.sponsorshipsAsMaintainer.nodes
  } catch (e) {
    console.log(`${e.status} ${e.name} - Couldn't fetch sponsor data.`)
    return []
  }
 }
@@ -1,5 +0,0 @@
 const clientDynamicModules = require('./clientDynamicModules')
 module.exports = {
  clientDynamicModules: async () => await clientDynamicModules(),
 }
@@ -1,54 +0,0 @@
 <script>
 /**
 * @see https://ethical-ad-client.readthedocs.io/en/latest/
 */
 export default {
  watch: {
    $route(to, from) {
      if (
        to.path !== from.path &&
        // Only reload if the ad has been loaded
        // otherwise it's possible that the script is appended but
        // the ads are not loaded yet. This would result in duplicated ads.
        [...this.$el.classList].includes('loaded')
      ) {
        this.$el.innerHTML = ''
        this.$el.classList.remove('loaded')
        this.load()
      }
    },
  },
  mounted() {
    this.load()
  },
  methods: {
    load() {
      const s = document.createElement('script')
      s.id = '_ads_js'
      s.src = `https://media.ethicalads.io/media/client/ethicalads.min.js`
      s.async = 'async'
      this.$el.appendChild(s)
    },
  },
  render(h) {
    return h('div', {
      attrs: {
        id: 'ads',
        'data-ea-publisher': 'vue-select',
        'data-ea-type': 'image',
      },
      class: 'flat horizontal',
    })
  },
 }
 </script>
 <style scoped>
 #ads {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 264px;
 }
 </style>
@@ -1,3 +0,0 @@
 module.exports = {
  extend: '@vuepress/theme-default',
 }
@@ -1,22 +0,0 @@
 <template>
  <ParentLayout></ParentLayout>
 </template>
 <script>
 import ParentLayout from '@parent-theme/layouts/Layout.vue'
 export default {
  components: {
    ParentLayout,
  },
 }
 </script>
 <style>
 #ads {
  border-bottom: 1px solid #eaecef;
 }
 #ads + .sidebar-links {
  padding-top: 1rem;
 }
 </style>
@@ -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 = '<iframe '
          for (var i in a) o += i + '="' + a[i] + '" '
          return (o += '></iframe>')
        }
        function d(e) {
          return e.height ? e.height : 300
        }
        function f(e, n) {
          if (e.parentNode) {
            var t = document.createElement('div')
            ;(t.className = 'cp_embed_wrapper'),
              (t.innerHTML = n),
              e.parentNode.replaceChild(t, e)
          } else e.innerHTML = n
        }
        function m() {
          'function' == typeof __CodePenIFrameAddedToPage &&
            __CodePenIFrameAddedToPage()
        }
        var p = '100%'
        e()
      }
      function n(e) {
        ;/in/.test(document.readyState)
          ? setTimeout('window.__cp_domReady(' + e + ')', 9)
          : e()
      }
      var t = 1
      ;(window.__cp_domReady = n),
        (window.__CPEmbed = e),
        n(function () {
          new __CPEmbed()
        })
    })()
 }
@@ -32,7 +32,7 @@ Otherwise content in this slot will affect it's positioning.
 - `deselect {function}` - function to deselect an option
 <SlotFooter />
-<<< @/.vuepress/components/SlotFooter.vue
+<<< @/.vitepress/components/SlotFooter.vue
 ## `header` <Badge text="3.8.0+" />
@@ -45,7 +45,7 @@ Displayed at the top of the component, above `.vs__dropdown-toggle`.
 - `deselect {function}` - function to deselect an option
 <SlotHeader />
-<<< @/.vuepress/components/SlotHeader.vue
+<<< @/.vitepress/components/SlotHeader.vue
 ## `list-footer` <Badge text="3.8.0+" />
@@ -58,7 +58,7 @@ so this slot should contain a root `<li>`.
 - `filteredOptions {array}` - options filtered by the search text
 <SlotListFooter />
-<<< @/.vuepress/components/SlotListFooter.vue
+<<< @/.vitepress/components/SlotListFooter.vue
 ## `list-header` <Badge text="3.8.0+" />
@@ -71,7 +71,7 @@ so this slot should contain a root `<li>`.
 - `filteredOptions {array}` - options filtered by the search text
 <SlotListHeader />
-<<< @/.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
 <SlotNoOptions />
-<<< @/.vuepress/components/SlotNoOptions.vue
+<<< @/.vitepress/components/SlotNoOptions.vue
 ## `open-indicator`
@@ -98,7 +98,7 @@ attributes: {
 ```
 <SlotOpenIndicator />
-<<< @/.vuepress/components/SlotOpenIndicator.vue
+<<< @/.vitepress/components/SlotOpenIndicator.vue
 ## `option`
@@ -107,7 +107,7 @@ The current option within the dropdown, contained within `<li>`.
 - `option {Object}` - The currently iterated option from `filteredOptions`
 <SlotOption />
-<<< @/.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
 ```
 <SlotSearch />
-<<< @/.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
 <SlotSelectedOption />
-<<< @/.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
 <SlotSelectedOptionContainer />
-<<< @/.vuepress/components/SlotSelectedOptionContainer.vue
+<<< @/.vitepress/components/SlotSelectedOptionContainer.vue
 ## `spinner`
 - `loading {Boolean}` - if the component is in a loading state
 <SlotSpinner />
-<<< @/.vuepress/components/SlotSpinner.vue
+<<< @/.vitepress/components/SlotSpinner.vue
 </div>
@@ -24,7 +24,7 @@ about [CSS Custom Properties.](https://developer.mozilla.org/en-US/docs/Web/CSS/
 <CssVariables style="margin-top: 1rem;" />
-<<< @/.vuepress/components/CssVariables.vue
+<<< @/.vitepress/components/CssVariables.vue
 ### Available CSS Variables <Badge type="primary">3.18+</Badge>
@@ -62,7 +62,7 @@ instances of Vue Select, or add your own classname if you just want to affect on
 <CssSpecificity />  
-<<< @/.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
 <v-select transition="" />
 ```
@@ -16,4 +16,4 @@ You can use the `filter` and `filterBy` props to hook right into something like
 <FuseFilter />
-<<< @/.vuepress/components/FuseFilter.vue
+<<< @/.vitepress/components/FuseFilter.vue
@@ -1,3 +1,7 @@
 <script setup>
 import InfiniteScroll from '@/components/InfiniteScroll.vue'
 </script>
 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.
 <InfiniteScroll />
-<<< @/.vuepress/components/InfiniteScroll.vue
+<<< @/.vitepress/components/InfiniteScroll.vue
@@ -9,7 +9,7 @@
 <TagOnComma /> 
-<<< @/.vuepress/components/TagOnComma.vue
+<<< @/.vitepress/components/TagOnComma.vue
 ## mapKeyDown <Badge text="v3.3.0+" />
@@ -69,5 +69,5 @@ This is example listens for the `@` key, and autocompletes an email address with
 <CustomHandlers />
-<<< @/.vuepress/components/CustomHandlers.vue
+<<< @/.vitepress/components/CustomHandlers.vue
@@ -12,6 +12,6 @@ method with the `country` and the `person` object.
 <LoopedSelect />
-<<< @/.vuepress/components/LoopedSelect.vue
+<<< @/.vitepress/components/LoopedSelect.vue
@@ -18,5 +18,5 @@ country has already been selected, we will display the dropdown right away.
 <OpenWhenSearchTextPresent />
-<<< @/.vuepress/components/OpenWhenSearchTextPresent.vue
+<<< @/.vitepress/components/OpenWhenSearchTextPresent.vue
@@ -15,4 +15,4 @@ You can use the `filterable` boolean to turn off Vue Select's filtering, and the
 <Paginated />
-<<< @/.vuepress/components/Paginated.vue
+<<< @/.vitepress/components/Paginated.vue
@@ -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}
@@ -31,7 +31,7 @@ This object will be passed to `selectable`, so we can check if the author should
 <UnselectableExample />
-<<< @/.vuepress/components/UnselectableExample.vue{6}
+<<< @/.vitepress/components/UnselectableExample.vue{6}
 ## Limiting the Number of Selections
@@ -41,4 +41,4 @@ of three books.
 <LimitSelectionQuantity />
-<<< @/.vuepress/components/LimitSelectionQuantity.vue{8}
+<<< @/.vitepress/components/LimitSelectionQuantity.vue{8}
@@ -29,4 +29,4 @@ in your own apps.
 <BetterNoOptions />
-<<< @/.vuepress/components/BetterNoOptions.vue
+<<< @/.vitepress/components/BetterNoOptions.vue
@@ -1,3 +1,9 @@
 <script setup>
 import vSelect from 'vue-select';
 import ReducerNestedValue from '@/components/ReducerNestedValue.vue';
 import ReducedWithNoMatchingOption from '@/components/ReducedWithNoMatchingOption.vue';
 </script>
 ## 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
 <v-select v-model="selected" />
 ```
@@ -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
 <v-select :value="selected" />
 ```
@@ -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
 <v-select :value="$store.myValue" @input="setSelected" />
 ```
@@ -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
 <v-select multiple v-model="selected" :options="['Canada','United States']" />
 ```
@@ -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
 <v-select :options="options" :reduce="country => country.code" label="country" />
 ```
@@ -115,11 +116,10 @@ The `reduce` property also works well when you have a deeply nested value:
 ```
 ```html
 <v-select :options="options" :reduce="country => country.meta.code" label="country" />
 ```
- <reducer-nested-value />
+<ReducerNestedValue />
 ## Caveats with `reduce`
@@ -129,7 +129,7 @@ value, but the complete option object is not present in the `options` array.
 <ReducedWithNoMatchingOption />
-<<< @/.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
 <v-select taggable multiple />
 ```
@@ -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
 <v-select taggable multiple push-tags />
 ```
@@ -193,8 +191,7 @@ const options = [
 ];
 ```
-```html
+```vue
 <v-select
    taggable
    multiple
@@ -203,7 +200,4 @@ const options = [
    :create-option="book => ({ title: book, author: { firstName: '', lastName: '' } })"
    :reduce="book => `${book.author.firstName} ${book.author.lastName}`"
 />
-```  
+```
@@ -1,3 +1,8 @@
 <script setup>
 import SponsorBanner from '.vitepress/components/SponsorBanner.vue';
 import CountrySelect from '.vitepress/components/CountrySelect.vue';
 </script>
 <SponsorBanner />
 # Vue Select
@@ -18,7 +23,7 @@ lightweight as possible, while maintaining high standards for accessibility,
 developer experience, and customization.
 <div style="max-width:25rem; margin: 0 auto; padding: 1rem 0;">
-  <country-select />  
+  <CountrySelect />  
 </div>
 Vue Select aims to be as lightweight as possible, while maintaining high standards for accessibility,
@@ -23,8 +23,9 @@
    "license": "MIT",
    "prepare": "npm run build",
    "scripts": {
-        "dev:docs": "cd docs && yarn serve",
+        "docs:dev": "vitepress dev docs",
-        "build:docs": "cd docs && yarn build",
+        "docs:build": "vitepress build docs",
        "docs:serve": "vitepress serve docs",
        "semantic-release": "semantic-release",
        "commit": "git-cz",
        "dev": "vite",
@@ -1,14 +1,17 @@
 {
-  "files": [],
+    "files": [],
-  "references": [
+    "references": [
-    {
+        {
-      "path": "./tsconfig.vite-config.json"
+            "path": "./tsconfig.vite-config.json"
-    },
+        },
-    {
+        {
-      "path": "./tsconfig.app.json"
+            "path": "./tsconfig.app.json"
-    },
+        },
-    {
+        {
-      "path": "./tsconfig.vitest.json"
+            "path": "./tsconfig.vitest.json"
-    }
+        },
-  ]
+        {
            "path": "./tsconfig.vitepress.json"
        }
    ]
 }
@@ -0,0 +1,9 @@
 {
    "extends": "@vue/tsconfig/tsconfig.web.json",
    "include": ["./docs/.vitepress/**/*"],
    "exclude": [],
    "compilerOptions": {
        "composite": true,
        "baseUrl": "."
    }
 }
		`@@ -1 +0,0 @@`
			`module.exports = process.env.hasOwnProperty('DEPLOY_PREVIEW')`
@@ -16,4 +16,4 @@ You can use the `filter` and `filterBy` props to hook right into something like

	`<FuseFilter />`	`<FuseFilter />`

	`<<< @/.vuepress/components/FuseFilter.vue`	`<<< @/.vitepress/components/FuseFilter.vue`
@@ -12,6 +12,6 @@ method with the `country` and the `person` object.

	`<LoopedSelect />`	`<LoopedSelect />`

	`<<< @/.vuepress/components/LoopedSelect.vue`	`<<< @/.vitepress/components/LoopedSelect.vue`
`@@ -18,5 +18,5 @@ country has already been selected, we will display the dropdown right away.`

	`<OpenWhenSearchTextPresent />`	`<OpenWhenSearchTextPresent />`

	`<<< @/.vuepress/components/OpenWhenSearchTextPresent.vue`	`<<< @/.vitepress/components/OpenWhenSearchTextPresent.vue`
@@ -15,4 +15,4 @@ You can use the `filterable` boolean to turn off Vue Select's filtering, and the

	`<Paginated />`	`<Paginated />`

	`<<< @/.vuepress/components/Paginated.vue`	`<<< @/.vitepress/components/Paginated.vue`
`@@ -29,4 +29,4 @@ in your own apps.`

	`<BetterNoOptions />`	`<BetterNoOptions />`

	`<<< @/.vuepress/components/BetterNoOptions.vue`	`<<< @/.vitepress/components/BetterNoOptions.vue`