lint

2026-05-17 02:29:37 +03:00 · 2022-07-26 22:20:24 -07:00
parent 6d59e6fd02
commit f602913216
23 changed files with 189 additions and 184 deletions
@@ -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,
+  },
 }
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { useContent } from "#imports";
+import { useContent } from '#imports'

-const { page } = useContent();
+const { page } = useContent()
 </script>

 <template>
@@ -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>
@@ -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>
@@ -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>
@@ -181,6 +181,6 @@
 </template>
 <script>
 export default {
-  name: "TimelineSvg",
-};
+  name: 'TimelineSvg',
+}
 </script>
@@ -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>
@@ -3,5 +3,5 @@
 </template>

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

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

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

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

 <script setup lang="ts">
-defineProps<{ id: string }>();
+defineProps<{ id: string }>()
 </script>
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 defineProps<{
-  icon: string;
-  href: string;
-  title: string;
-}>();
+  icon: string
+  href: string
+  title: string
+}>()
 </script>

 <template>
@@ -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'],
  },
-});
+})
@@ -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')],
+}
@@ -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",
@@ -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',
@@ -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'],
+    },
+  },
 })