From f6029132160b942153997c30a88e00d29d12ae2c Mon Sep 17 00:00:00 2001
From: Jeff Sagal <sagalbot@gmail.com>
Date: Tue, 26 Jul 2022 22:20:24 -0700
Subject: [PATCH] lint

---
 .eslintrc.cjs                           | 20 ++++----
 docs/app.vue                            | 22 ++++----
 docs/components/ApplicationHeader.vue   | 10 ++--
 docs/components/Button.vue              | 20 ++++----
 docs/components/Hero.vue                |  4 +-
 docs/components/PageContent.vue         |  6 +--
 docs/components/PageContentHeader.vue   |  4 +-
 docs/components/PageTableOfContents.vue |  6 +--
 docs/components/SidebarNavigation.vue   | 68 ++++++++++++-------------
 docs/components/ThemeSwitcher.vue       | 18 +++----
 docs/components/TimelineSvg.vue         |  4 +-
 docs/components/content/Callout.vue     | 26 +++++-----
 docs/components/content/ProseH2.vue     |  2 +-
 docs/components/content/ProseH3.vue     |  2 +-
 docs/components/content/ProseH4.vue     |  2 +-
 docs/components/content/ProseH5.vue     |  2 +-
 docs/components/content/ProseH6.vue     |  2 +-
 docs/components/content/QuickLink.vue   |  8 +--
 docs/nuxt.config.ts                     | 31 +++++++----
 docs/tailwind.config.js                 | 42 +++++++--------
 package.json                            |  4 +-
 src/directives/appendToBody.js          | 12 ++---
 vite.config.ts                          | 58 ++++++++++-----------
 23 files changed, 189 insertions(+), 184 deletions(-)

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index a718c90..0694053 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -1,15 +1,15 @@
 /* eslint-env node */
-require("@rushstack/eslint-patch/modern-module-resolution");
+require('@rushstack/eslint-patch/modern-module-resolution')
 
 module.exports = {
-  "root": true,
-  "extends": [
-    "plugin:vue/vue3-essential",
-    "eslint:recommended",
-    "@vue/eslint-config-typescript/recommended",
-    "@vue/eslint-config-prettier"
+  root: true,
+  extends: [
+    'plugin:vue/vue3-essential',
+    'eslint:recommended',
+    '@vue/eslint-config-typescript/recommended',
+    '@vue/eslint-config-prettier',
   ],
-  "env": {
-    "vue/setup-compiler-macros": true
-  }
+  env: {
+    'vue/setup-compiler-macros': true,
+  },
 }
diff --git a/docs/app.vue b/docs/app.vue
index 920c29f..c9bbf05 100644
--- a/docs/app.vue
+++ b/docs/app.vue
@@ -1,19 +1,17 @@
 <script setup lang="ts">
-import { useHead } from "#head";
-import Hero from "~/components/Hero.vue";
-import ApplicationHeader from "~/components/ApplicationHeader.vue";
-import SidebarNavigation from "~/components/SidebarNavigation.vue";
-import PageContent from "~/components/PageContent.vue";
-import { useContent } from "#imports";
+import { useHead } from '#head'
+import Hero from '~/components/Hero.vue'
+import ApplicationHeader from '~/components/ApplicationHeader.vue'
+import SidebarNavigation from '~/components/SidebarNavigation.vue'
+import PageContent from '~/components/PageContent.vue'
+import { useContent } from '#imports'
 
 useHead({
-  title: "Vue Select",
-  bodyAttrs: {
-    class: "bg-white dark:bg-slate-900",
-  },
-});
+  title: 'Vue Select',
+  bodyAttrs: { class: 'bg-white dark:bg-slate-900' },
+})
 
-const { page } = useContent();
+const { page } = useContent()
 </script>
 
 <template>
diff --git a/docs/components/ApplicationHeader.vue b/docs/components/ApplicationHeader.vue
index e104542..ca1a6fb 100644
--- a/docs/components/ApplicationHeader.vue
+++ b/docs/components/ApplicationHeader.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { NuxtLink } from "#components";
-import ColorThemeSwitcher from "~/components/ThemeSwitcher.vue";
-import { useWindowScroll } from "@vueuse/core";
+import { NuxtLink } from '#components'
+import ColorThemeSwitcher from '~/components/ThemeSwitcher.vue'
+import { useWindowScroll } from '@vueuse/core'
 
-const { y } = useWindowScroll();
+const { y } = useWindowScroll()
 
-const isScrolled = computed(() => y.value !== 0);
+const isScrolled = computed(() => y.value !== 0)
 </script>
 
 <template>
diff --git a/docs/components/Button.vue b/docs/components/Button.vue
index 1ea3fb6..1f0cf08 100644
--- a/docs/components/Button.vue
+++ b/docs/components/Button.vue
@@ -1,29 +1,29 @@
 <script setup lang="ts">
-import { computed, useAttrs } from "#imports";
-import { NuxtLink } from "#components";
+import { computed, useAttrs } from '#imports'
+import { NuxtLink } from '#components'
 
 const props = withDefaults(
   defineProps<{
-    variant?: "primary" | "secondary";
+    variant?: 'primary' | 'secondary'
   }>(),
   {
-    variant: "primary",
+    variant: 'primary',
   }
-);
+)
 
 const styles = computed(
   () =>
     ({
       primary:
-        "rounded-full bg-sky-300 py-2 px-4 text-sm font-semibold text-slate-900 hover:bg-sky-200 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-300/50 active:bg-sky-500",
+        'rounded-full bg-sky-300 py-2 px-4 text-sm font-semibold text-slate-900 hover:bg-sky-200 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-300/50 active:bg-sky-500',
       secondary:
-        "rounded-full bg-slate-800 py-2 px-4 text-sm font-medium text-white hover:bg-slate-700 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white/50 active:text-slate-400",
+        'rounded-full bg-slate-800 py-2 px-4 text-sm font-medium text-white hover:bg-slate-700 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white/50 active:text-slate-400',
     }[props.variant])
-);
+)
 
-const hasTo = computed<boolean>(() => Object.keys(useAttrs()).includes("to"));
+const hasTo = computed<boolean>(() => Object.keys(useAttrs()).includes('to'))
 
-const component = computed(() => (hasTo.value ? NuxtLink : "button"));
+const component = computed(() => (hasTo.value ? NuxtLink : 'button'))
 </script>
 
 <template>
diff --git a/docs/components/Hero.vue b/docs/components/Hero.vue
index db5ed3e..0cfd4c3 100644
--- a/docs/components/Hero.vue
+++ b/docs/components/Hero.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import Button from "~/components/Button.vue";
-import TimelineSvg from "~/components/TimelineSvg.vue";
+import Button from '~/components/Button.vue'
+import TimelineSvg from '~/components/TimelineSvg.vue'
 </script>
 
 <template>
diff --git a/docs/components/PageContent.vue b/docs/components/PageContent.vue
index ecb0f68..b1d5bb5 100644
--- a/docs/components/PageContent.vue
+++ b/docs/components/PageContent.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import ContentFooterNavigation from "~/components/PageContentFooterNavigation.vue";
-import PageContentHeader from "~/components/PageContentHeader.vue";
-import PageTableOfContents from "~/components/PageTableOfContents.vue";
+import ContentFooterNavigation from '~/components/PageContentFooterNavigation.vue'
+import PageContentHeader from '~/components/PageContentHeader.vue'
+import PageTableOfContents from '~/components/PageTableOfContents.vue'
 </script>
 
 <template>
diff --git a/docs/components/PageContentHeader.vue b/docs/components/PageContentHeader.vue
index b75e5d9..ada1dd5 100644
--- a/docs/components/PageContentHeader.vue
+++ b/docs/components/PageContentHeader.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { useContent } from "#imports";
+import { useContent } from '#imports'
 
-const { page } = useContent();
+const { page } = useContent()
 </script>
 
 <template>
diff --git a/docs/components/PageTableOfContents.vue b/docs/components/PageTableOfContents.vue
index 404ced1..b657937 100644
--- a/docs/components/PageTableOfContents.vue
+++ b/docs/components/PageTableOfContents.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { computed } from "#imports";
+import { computed, useContent } from '#imports'
 
-const { toc, page } = useContent();
-const shouldRender = computed(() => page.value.hideToc !== true);
+const { toc, page } = useContent()
+const shouldRender = computed(() => page.value?.hideToc !== true)
 </script>
 
 <template>
diff --git a/docs/components/SidebarNavigation.vue b/docs/components/SidebarNavigation.vue
index 79cb2e4..3b8a28b 100644
--- a/docs/components/SidebarNavigation.vue
+++ b/docs/components/SidebarNavigation.vue
@@ -1,67 +1,67 @@
 <script lang="ts" setup>
 const navigation = [
   {
-    title: "Community",
+    title: 'Community',
     links: [
-      { title: "Sponsors 🎉", href: "/sponsors" },
-      { title: "Contributors", href: "/contributors" },
+      { title: 'Sponsors 🎉', href: '/sponsors' },
+      { title: 'Contributors', href: '/contributors' },
     ],
   },
   {
-    title: "Getting Started",
+    title: 'Getting Started',
     links: [
-      { href: "/guide/install", title: "Installation" },
-      { href: "/guide/options", title: "Dropdown Options" },
-      { href: "/guide/values", title: "Selecting Values" },
-      { href: "/guide/upgrading", title: "Upgrading 2.x to 3.x" },
+      { href: '/guide/install', title: 'Installation' },
+      { href: '/guide/options', title: 'Dropdown Options' },
+      { href: '/guide/values', title: 'Selecting Values' },
+      { href: '/guide/upgrading', title: 'Upgrading 2.x to 3.x' },
     ],
   },
   {
-    title: "Templating & Styling",
+    title: 'Templating & Styling',
     links: [
-      { href: "/guide/components", title: "Child Components" },
-      { href: "/guide/css", title: "CSS & Selectors" },
-      { href: "/guide/slots", title: "Slots" },
+      { href: '/guide/components', title: 'Child Components' },
+      { href: '/guide/css', title: 'CSS & Selectors' },
+      { href: '/guide/slots', title: 'Slots' },
     ],
   },
   {
-    title: "Accessibility",
+    title: 'Accessibility',
     links: [
-      { href: "/guide/accessibility", title: "WAI-ARIA Spec" },
-      { href: "/guide/localization", title: "Localization" },
+      { href: '/guide/accessibility', title: 'WAI-ARIA Spec' },
+      { href: '/guide/localization', title: 'Localization' },
     ],
   },
   {
-    title: "Use Cases",
+    title: 'Use Cases',
     links: [
-      { href: "/guide/validation", title: "Validation" },
-      { href: "/guide/selectable", title: "Limiting Selections" },
-      { href: "/guide/pagination", title: "Pagination" },
-      { href: "/guide/infinite-scroll", title: "Infinite Scroll" },
-      { href: "/guide/vuex", title: "Vuex" },
-      { href: "/guide/ajax", title: "AJAX" },
-      { href: "/guide/loops", title: "Using in Loops" },
+      { href: '/guide/validation', title: 'Validation' },
+      { href: '/guide/selectable', title: 'Limiting Selections' },
+      { href: '/guide/pagination', title: 'Pagination' },
+      { href: '/guide/infinite-scroll', title: 'Infinite Scroll' },
+      { href: '/guide/vuex', title: 'Vuex' },
+      { href: '/guide/ajax', title: 'AJAX' },
+      { href: '/guide/loops', title: 'Using in Loops' },
     ],
   },
   {
-    title: "Customizing",
+    title: 'Customizing',
     links: [
-      { href: "/guide/keydown", title: "Keydown Events" },
-      { href: "/guide/positioning", title: "Dropdown Position" },
-      { href: "/guide/opening", title: "Dropdown Opening" },
-      { href: "/guide/filtering", title: "Option Filtering" },
+      { href: '/guide/keydown', title: 'Keydown Events' },
+      { href: '/guide/positioning', title: 'Dropdown Position' },
+      { href: '/guide/opening', title: 'Dropdown Opening' },
+      { href: '/guide/filtering', title: 'Option Filtering' },
     ],
   },
   {
-    title: "API",
+    title: 'API',
     links: [
-      { href: "/api/props", title: "Props" },
-      { href: "/api/slots", title: "Slots" },
-      { href: "/api/events", title: "Events" },
+      { href: '/api/props', title: 'Props' },
+      { href: '/api/slots', title: 'Slots' },
+      { href: '/api/events', title: 'Events' },
     ],
   },
-];
-const router = { pathname: "" };
+]
+const router = { pathname: '' }
 </script>
 
 <template>
diff --git a/docs/components/ThemeSwitcher.vue b/docs/components/ThemeSwitcher.vue
index f005349..1081f45 100644
--- a/docs/components/ThemeSwitcher.vue
+++ b/docs/components/ThemeSwitcher.vue
@@ -5,18 +5,18 @@ import {
   ListboxLabel,
   ListboxOption,
   ListboxOptions,
-} from "@headlessui/vue";
-import LightIcon from "~/components/icons/LightIcon.vue";
-import DarkIcon from "~/components/icons/DarkIcon.vue";
-import SystemIcon from "~/components/icons/SystemIcon.vue";
+} from '@headlessui/vue'
+import LightIcon from '~/components/icons/LightIcon.vue'
+import DarkIcon from '~/components/icons/DarkIcon.vue'
+import SystemIcon from '~/components/icons/SystemIcon.vue'
 
 const themes = [
-  { name: "Light", value: "light", icon: LightIcon },
-  { name: "Dark", value: "dark", icon: DarkIcon },
-  { name: "System", value: "system", icon: SystemIcon },
-];
+  { name: 'Light', value: 'light', icon: LightIcon },
+  { name: 'Dark', value: 'dark', icon: DarkIcon },
+  { name: 'System', value: 'system', icon: SystemIcon },
+]
 
-const colorMode = useColorMode();
+const colorMode = useColorMode()
 </script>
 
 <template>
diff --git a/docs/components/TimelineSvg.vue b/docs/components/TimelineSvg.vue
index bd315ca..251982f 100644
--- a/docs/components/TimelineSvg.vue
+++ b/docs/components/TimelineSvg.vue
@@ -181,6 +181,6 @@
 </template>
 <script>
 export default {
-  name: "TimelineSvg",
-};
+  name: 'TimelineSvg',
+}
 </script>
diff --git a/docs/components/content/Callout.vue b/docs/components/content/Callout.vue
index cf9e648..22d239e 100644
--- a/docs/components/content/Callout.vue
+++ b/docs/components/content/Callout.vue
@@ -1,32 +1,32 @@
 <script setup lang="ts">
-import { computed } from "#imports";
+import { computed } from '#imports'
 
 const props = withDefaults(
   defineProps<{
-    type?: "note" | "warning";
-    title: string;
+    type?: 'note' | 'warning'
+    title: string
   }>(),
   {
-    type: "note",
+    type: 'note',
   }
-);
+)
 
 const styles = computed(() => {
   return {
     note: {
       container:
-        "bg-sky-50 dark:bg-slate-800/60 dark:ring-1 dark:ring-slate-300/10",
-      title: "text-sky-900 dark:text-sky-400",
-      body: "text-sky-800 [--tw-prose-background:theme(colors.sky.50)] prose-a:text-sky-900 prose-code:text-sky-900 dark:text-slate-300 dark:prose-code:text-slate-300",
+        'bg-sky-50 dark:bg-slate-800/60 dark:ring-1 dark:ring-slate-300/10',
+      title: 'text-sky-900 dark:text-sky-400',
+      body: 'text-sky-800 [--tw-prose-background:theme(colors.sky.50)] prose-a:text-sky-900 prose-code:text-sky-900 dark:text-slate-300 dark:prose-code:text-slate-300',
     },
     warning: {
       container:
-        "bg-amber-50 dark:bg-slate-800/60 dark:ring-1 dark:ring-slate-300/10",
-      title: "text-amber-900 dark:text-amber-500",
-      body: "text-amber-800 [--tw-prose-underline:theme(colors.amber.400)] [--tw-prose-background:theme(colors.amber.50)] prose-a:text-amber-900 prose-code:text-amber-900 dark:text-slate-300 dark:[--tw-prose-underline:theme(colors.sky.700)] dark:prose-code:text-slate-300",
+        'bg-amber-50 dark:bg-slate-800/60 dark:ring-1 dark:ring-slate-300/10',
+      title: 'text-amber-900 dark:text-amber-500',
+      body: 'text-amber-800 [--tw-prose-underline:theme(colors.amber.400)] [--tw-prose-background:theme(colors.amber.50)] prose-a:text-amber-900 prose-code:text-amber-900 dark:text-slate-300 dark:[--tw-prose-underline:theme(colors.sky.700)] dark:prose-code:text-slate-300',
     },
-  }[props.type];
-});
+  }[props.type]
+})
 </script>
 
 <template>
diff --git a/docs/components/content/ProseH2.vue b/docs/components/content/ProseH2.vue
index faae5c2..712cf61 100644
--- a/docs/components/content/ProseH2.vue
+++ b/docs/components/content/ProseH2.vue
@@ -3,5 +3,5 @@
 </template>
 
 <script setup lang="ts">
-defineProps<{ id: string }>();
+defineProps<{ id: string }>()
 </script>
diff --git a/docs/components/content/ProseH3.vue b/docs/components/content/ProseH3.vue
index 4df572d..3070574 100644
--- a/docs/components/content/ProseH3.vue
+++ b/docs/components/content/ProseH3.vue
@@ -3,5 +3,5 @@
 </template>
 
 <script setup lang="ts">
-defineProps<{ id: string }>();
+defineProps<{ id: string }>()
 </script>
diff --git a/docs/components/content/ProseH4.vue b/docs/components/content/ProseH4.vue
index 8271d58..67330e5 100644
--- a/docs/components/content/ProseH4.vue
+++ b/docs/components/content/ProseH4.vue
@@ -3,5 +3,5 @@
 </template>
 
 <script setup lang="ts">
-defineProps<{ id: string }>();
+defineProps<{ id: string }>()
 </script>
diff --git a/docs/components/content/ProseH5.vue b/docs/components/content/ProseH5.vue
index 92f03e7..18d8e0d 100644
--- a/docs/components/content/ProseH5.vue
+++ b/docs/components/content/ProseH5.vue
@@ -3,5 +3,5 @@
 </template>
 
 <script setup lang="ts">
-defineProps<{ id: string }>();
+defineProps<{ id: string }>()
 </script>
diff --git a/docs/components/content/ProseH6.vue b/docs/components/content/ProseH6.vue
index cdc631b..e1b4804 100644
--- a/docs/components/content/ProseH6.vue
+++ b/docs/components/content/ProseH6.vue
@@ -3,5 +3,5 @@
 </template>
 
 <script setup lang="ts">
-defineProps<{ id: string }>();
+defineProps<{ id: string }>()
 </script>
diff --git a/docs/components/content/QuickLink.vue b/docs/components/content/QuickLink.vue
index 3c96cd2..4159ec6 100644
--- a/docs/components/content/QuickLink.vue
+++ b/docs/components/content/QuickLink.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 defineProps<{
-  icon: string;
-  href: string;
-  title: string;
-}>();
+  icon: string
+  href: string
+  title: string
+}>()
 </script>
 
 <template>
diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts
index 50fdf18..2be5418 100644
--- a/docs/nuxt.config.ts
+++ b/docs/nuxt.config.ts
@@ -1,13 +1,14 @@
-import { defineNuxtConfig } from "nuxt";
+import { defineNuxtConfig } from 'nuxt'
+import { fileURLToPath, URL } from 'url'
 
 // https://v3.nuxtjs.org/api/configuration/nuxt.config
 export default defineNuxtConfig({
-  css: ["~/assets/styles/fonts.css"],
+  css: ['~/assets/styles/fonts.css'],
 
-  modules: ["@nuxtjs/tailwindcss", "@nuxtjs/color-mode", "@nuxt/content"],
+  modules: ['@nuxtjs/tailwindcss', '@nuxtjs/color-mode', '@nuxt/content'],
 
   // https://color-mode.nuxtjs.org/
-  colorMode: { classSuffix: "" },
+  colorMode: { classSuffix: '' },
 
   // https://content.nuxtjs.org/api/configuration
   content: {
@@ -16,8 +17,8 @@ export default defineNuxtConfig({
     // https://content.nuxtjs.org/api/configuration/#highlighttheme
     highlight: {
       theme: {
-        default: "one-dark-pro",
-        dark: "github-dark",
+        default: 'one-dark-pro',
+        dark: 'github-dark',
         // sepia: "monokai",
       },
     },
@@ -25,13 +26,23 @@ export default defineNuxtConfig({
     markdown: {
       remarkPlugins: {},
       rehypePlugins: {
-        "rehype-autolink-headings": false,
+        'rehype-autolink-headings': false,
+      },
+    },
+  },
+
+  vite: {
+    resolve: {
+      alias: {
+        'vue-select': fileURLToPath(
+          new URL('../src/index.js', import.meta.url)
+        ),
       },
     },
   },
 
   build: {
-    extractCSS: true,
-    transpile: ["@headlessui/vue"],
+    // @see https://github.com/tailwindlabs/headlessui/discussions/1545#discussioncomment-2871517
+    transpile: ['@headlessui/vue'],
   },
-});
+})
diff --git a/docs/tailwind.config.js b/docs/tailwind.config.js
index dfc4cc0..25e95c6 100644
--- a/docs/tailwind.config.js
+++ b/docs/tailwind.config.js
@@ -1,34 +1,34 @@
-const defaultTheme = require("tailwindcss/defaultTheme");
+const defaultTheme = require('tailwindcss/defaultTheme')
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ["./pages/**/*.{js,vue}", "app.vue"],
-  darkMode: "class",
+  content: ['./pages/**/*.{js,vue}', 'app.vue'],
+  darkMode: 'class',
   theme: {
     fontSize: {
-      xs: ["0.75rem", { lineHeight: "1rem" }],
-      sm: ["0.875rem", { lineHeight: "1.5rem" }],
-      base: ["1rem", { lineHeight: "2rem" }],
-      lg: ["1.125rem", { lineHeight: "1.75rem" }],
-      xl: ["1.25rem", { lineHeight: "2rem" }],
-      "2xl": ["1.5rem", { lineHeight: "2.5rem" }],
-      "3xl": ["2rem", { lineHeight: "2.5rem" }],
-      "4xl": ["2.5rem", { lineHeight: "3rem" }],
-      "5xl": ["3rem", { lineHeight: "3.5rem" }],
-      "6xl": ["3.75rem", { lineHeight: "1" }],
-      "7xl": ["4.5rem", { lineHeight: "1" }],
-      "8xl": ["6rem", { lineHeight: "1" }],
-      "9xl": ["8rem", { lineHeight: "1" }],
+      xs: ['0.75rem', { lineHeight: '1rem' }],
+      sm: ['0.875rem', { lineHeight: '1.5rem' }],
+      base: ['1rem', { lineHeight: '2rem' }],
+      lg: ['1.125rem', { lineHeight: '1.75rem' }],
+      xl: ['1.25rem', { lineHeight: '2rem' }],
+      '2xl': ['1.5rem', { lineHeight: '2.5rem' }],
+      '3xl': ['2rem', { lineHeight: '2.5rem' }],
+      '4xl': ['2.5rem', { lineHeight: '3rem' }],
+      '5xl': ['3rem', { lineHeight: '3.5rem' }],
+      '6xl': ['3.75rem', { lineHeight: '1' }],
+      '7xl': ['4.5rem', { lineHeight: '1' }],
+      '8xl': ['6rem', { lineHeight: '1' }],
+      '9xl': ['8rem', { lineHeight: '1' }],
     },
     extend: {
       fontFamily: {
-        sans: ["Inter", ...defaultTheme.fontFamily.sans],
-        display: ["Lexend", ...defaultTheme.fontFamily.sans],
+        sans: ['Inter', ...defaultTheme.fontFamily.sans],
+        display: ['Lexend', ...defaultTheme.fontFamily.sans],
       },
       maxWidth: {
-        "8xl": "88rem",
+        '8xl': '88rem',
       },
     },
   },
-  plugins: [require("@tailwindcss/typography")],
-};
+  plugins: [require('@tailwindcss/typography')],
+}
diff --git a/package.json b/package.json
index 27de937..c6d23d8 100644
--- a/package.json
+++ b/package.json
@@ -23,8 +23,8 @@
     "license": "MIT",
     "prepare": "npm run build",
     "scripts": {
-        "dev:docs": "cd docs && yarn serve",
-        "build:docs": "cd docs && yarn build",
+        "dev:docs": "cd docs && yarn dev",
+        "build:docs": "cd docs && yarn generate",
         "semantic-release": "semantic-release",
         "commit": "git-cz",
         "dev": "vite",
diff --git a/src/directives/appendToBody.js b/src/directives/appendToBody.js
index 514e144..c6c3752 100644
--- a/src/directives/appendToBody.js
+++ b/src/directives/appendToBody.js
@@ -1,14 +1,10 @@
 export default {
   mounted(el, { instance }) {
     if (instance.appendToBody) {
-      const {
-        height,
-        top,
-        left,
-        width,
-      } = instance.$refs.toggle.getBoundingClientRect()
-      let scrollX = window.scrollX || window.pageXOffset
-      let scrollY = window.scrollY || window.pageYOffset
+      const { height, top, left, width } =
+        instance.$refs.toggle.getBoundingClientRect()
+      const scrollX = window.scrollX || window.pageXOffset
+      const scrollY = window.scrollY || window.pageYOffset
       el.unbindPosition = instance.calculatePosition(el, instance, {
         width: width + 'px',
         left: scrollX + left + 'px',
diff --git a/vite.config.ts b/vite.config.ts
index 38821d4..68db98d 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -6,37 +6,37 @@ import vue from '@vitejs/plugin-vue'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-    plugins: [vue()],
-    publicDir: false,
-    resolve: {
-        alias: {
-            '@': fileURLToPath(new URL('./src', import.meta.url)),
-            '@tests': fileURLToPath(new URL('./tests', import.meta.url)),
-        },
+  plugins: [vue()],
+  publicDir: false,
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+      '@tests': fileURLToPath(new URL('./tests', import.meta.url)),
     },
-    build: {
-        target: 'es2015',
-        lib: {
-            entry: resolve(__dirname, 'src/index.js'),
-            name: 'vue-select',
-            fileName: (format) => `vue-select.${format}.js`,
-        },
-        rollupOptions: {
-            external: ['vue'],
-            output: {
-                globals: { vue: 'Vue' },
-                assetFileNames(chunk): string {
-                    if (chunk.name === 'style.css') {
-                        return 'vue-select.css'
-                    }
-                    return chunk.name || ''
-                },
-            },
-        },
+  },
+  build: {
+    target: 'es2015',
+    lib: {
+      entry: resolve(__dirname, 'src/index.js'),
+      name: 'vue-select',
+      fileName: (format) => `vue-select.${format}.js`,
     },
-    test: {
-        coverage: {
-            reporter: ['lcov'],
+    rollupOptions: {
+      external: ['vue'],
+      output: {
+        globals: { vue: 'Vue' },
+        assetFileNames(chunk): string {
+          if (chunk.name === 'style.css') {
+            return 'vue-select.css'
+          }
+          return chunk.name || ''
         },
+      },
     },
+  },
+  test: {
+    coverage: {
+      reporter: ['lcov'],
+    },
+  },
 })