lint

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>

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>

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>

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>

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>

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>

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>

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>

docs/components/TimelineSvg.vue

@@ -181,6 +181,6 @@
 </template>
 <script>
 export default {
-  name: "TimelineSvg",
-};
+  name: 'TimelineSvg',
+}
 </script>

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>

docs/components/content/ProseH2.vue

@@ -3,5 +3,5 @@
 </template>
 
 <script setup lang="ts">
-defineProps<{ id: string }>();
+defineProps<{ id: string }>()
 </script>

docs/components/content/ProseH3.vue

@@ -3,5 +3,5 @@
 </template>
 
 <script setup lang="ts">
-defineProps<{ id: string }>();
+defineProps<{ id: string }>()
 </script>

docs/components/content/ProseH4.vue

@@ -3,5 +3,5 @@
 </template>
 
 <script setup lang="ts">
-defineProps<{ id: string }>();
+defineProps<{ id: string }>()
 </script>

docs/components/content/ProseH5.vue

@@ -3,5 +3,5 @@
 </template>
 
 <script setup lang="ts">
-defineProps<{ id: string }>();
+defineProps<{ id: string }>()
 </script>

docs/components/content/ProseH6.vue

@@ -3,5 +3,5 @@
 </template>
 
 <script setup lang="ts">
-defineProps<{ id: string }>();
+defineProps<{ id: string }>()
 </script>

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>