mirrors/vue-select
2
0
Fork 0
mirror of https://github.com/tenrok/vue-select.git synced 2026-06-22 10:30:34 +03:00
Code Activity

lint

Browse Source
This commit is contained in:
Jeff Sagal
2022-07-26 22:20:24 -07:00
parent 6d59e6fd02
commit f602913216
23 changed files with 189 additions and 184 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.eslintrc.cjs
+10 -10
View File
@@ -1,15 +1,15 @@
/* eslint-env node */ /* eslint-env node */
require("@rushstack/eslint-patch/modern-module-resolution"); require('@rushstack/eslint-patch/modern-module-resolution')
module.exports = { module.exports = {
"root": true, root: true,
"extends": [ extends: [
"plugin:vue/vue3-essential", 'plugin:vue/vue3-essential',
"eslint:recommended", 'eslint:recommended',
"@vue/eslint-config-typescript/recommended", '@vue/eslint-config-typescript/recommended',
"@vue/eslint-config-prettier" '@vue/eslint-config-prettier',
], ],
"env": { env: {
"vue/setup-compiler-macros": true 'vue/setup-compiler-macros': true,
} },
} }
docs/app.vue
+10 -12
View File
@@ -1,19 +1,17 @@
<script setup lang="ts"> <script setup lang="ts">
import { useHead } from "#head"; import { useHead } from '#head'
import Hero from "~/components/Hero.vue"; import Hero from '~/components/Hero.vue'
import ApplicationHeader from "~/components/ApplicationHeader.vue"; import ApplicationHeader from '~/components/ApplicationHeader.vue'
import SidebarNavigation from "~/components/SidebarNavigation.vue"; import SidebarNavigation from '~/components/SidebarNavigation.vue'
import PageContent from "~/components/PageContent.vue"; import PageContent from '~/components/PageContent.vue'
import { useContent } from "#imports"; import { useContent } from '#imports'
useHead({ useHead({
title: "Vue Select", title: 'Vue Select',
bodyAttrs: { bodyAttrs: { class: 'bg-white dark:bg-slate-900' },
class: "bg-white dark:bg-slate-900", })
},
});
const { page } = useContent(); const { page } = useContent()
</script> </script>
<template> <template>
docs/components/ApplicationHeader.vue
+5 -5
View File
@@ -1,11 +1,11 @@
<script setup lang="ts"> <script setup lang="ts">
import { NuxtLink } from "#components"; import { NuxtLink } from '#components'
import ColorThemeSwitcher from "~/components/ThemeSwitcher.vue"; import ColorThemeSwitcher from '~/components/ThemeSwitcher.vue'
import { useWindowScroll } from "@vueuse/core"; import { useWindowScroll } from '@vueuse/core'
const { y } = useWindowScroll(); const { y } = useWindowScroll()
const isScrolled = computed(() => y.value !== 0); const isScrolled = computed(() => y.value !== 0)
</script> </script>
<template> <template>
docs/components/Button.vue
+10 -10
View File
@@ -1,29 +1,29 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed, useAttrs } from "#imports"; import { computed, useAttrs } from '#imports'
import { NuxtLink } from "#components"; import { NuxtLink } from '#components'
const props = withDefaults( const props = withDefaults(
defineProps<{ defineProps<{
variant?: "primary" | "secondary"; variant?: 'primary' | 'secondary'
}>(), }>(),
{ {
variant: "primary", variant: 'primary',
} }
); )
const styles = computed( const styles = computed(
() => () =>
({ ({
primary: 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: 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]) }[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> </script>
<template> <template>
docs/components/Hero.vue
+2 -2
View File
@@ -1,6 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import Button from "~/components/Button.vue"; import Button from '~/components/Button.vue'
import TimelineSvg from "~/components/TimelineSvg.vue"; import TimelineSvg from '~/components/TimelineSvg.vue'
</script> </script>
<template> <template>
docs/components/PageContent.vue
+3 -3
View File
@@ -1,7 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import ContentFooterNavigation from "~/components/PageContentFooterNavigation.vue"; import ContentFooterNavigation from '~/components/PageContentFooterNavigation.vue'
import PageContentHeader from "~/components/PageContentHeader.vue"; import PageContentHeader from '~/components/PageContentHeader.vue'
import PageTableOfContents from "~/components/PageTableOfContents.vue"; import PageTableOfContents from '~/components/PageTableOfContents.vue'
</script> </script>
<template> <template>
docs/components/PageContentHeader.vue
+2 -2
View File
@@ -1,7 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { useContent } from "#imports"; import { useContent } from '#imports'
const { page } = useContent(); const { page } = useContent()
</script> </script>
<template> <template>
docs/components/PageTableOfContents.vue
+3 -3
View File
@@ -1,8 +1,8 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed } from "#imports"; import { computed, useContent } from '#imports'
const { toc, page } = useContent(); const { toc, page } = useContent()
const shouldRender = computed(() => page.value.hideToc !== true); const shouldRender = computed(() => page.value?.hideToc !== true)
</script> </script>
<template> <template>
docs/components/SidebarNavigation.vue
+34 -34
View File
@@ -1,67 +1,67 @@
<script lang="ts" setup> <script lang="ts" setup>
const navigation = [ const navigation = [
{ {
title: "Community", title: 'Community',
links: [ links: [
{ title: "Sponsors 🎉", href: "/sponsors" }, { title: 'Sponsors 🎉', href: '/sponsors' },
{ title: "Contributors", href: "/contributors" }, { title: 'Contributors', href: '/contributors' },
], ],
}, },
{ {
title: "Getting Started", title: 'Getting Started',
links: [ links: [
{ href: "/guide/install", title: "Installation" }, { href: '/guide/install', title: 'Installation' },
{ href: "/guide/options", title: "Dropdown Options" }, { href: '/guide/options', title: 'Dropdown Options' },
{ href: "/guide/values", title: "Selecting Values" }, { href: '/guide/values', title: 'Selecting Values' },
{ href: "/guide/upgrading", title: "Upgrading 2.x to 3.x" }, { href: '/guide/upgrading', title: 'Upgrading 2.x to 3.x' },
], ],
}, },
{ {
title: "Templating & Styling", title: 'Templating & Styling',
links: [ links: [
{ href: "/guide/components", title: "Child Components" }, { href: '/guide/components', title: 'Child Components' },
{ href: "/guide/css", title: "CSS & Selectors" }, { href: '/guide/css', title: 'CSS & Selectors' },
{ href: "/guide/slots", title: "Slots" }, { href: '/guide/slots', title: 'Slots' },
], ],
}, },
{ {
title: "Accessibility", title: 'Accessibility',
links: [ links: [
{ href: "/guide/accessibility", title: "WAI-ARIA Spec" }, { href: '/guide/accessibility', title: 'WAI-ARIA Spec' },
{ href: "/guide/localization", title: "Localization" }, { href: '/guide/localization', title: 'Localization' },
], ],
}, },
{ {
title: "Use Cases", title: 'Use Cases',
links: [ links: [
{ href: "/guide/validation", title: "Validation" }, { href: '/guide/validation', title: 'Validation' },
{ href: "/guide/selectable", title: "Limiting Selections" }, { href: '/guide/selectable', title: 'Limiting Selections' },
{ href: "/guide/pagination", title: "Pagination" }, { href: '/guide/pagination', title: 'Pagination' },
{ href: "/guide/infinite-scroll", title: "Infinite Scroll" }, { href: '/guide/infinite-scroll', title: 'Infinite Scroll' },
{ href: "/guide/vuex", title: "Vuex" }, { href: '/guide/vuex', title: 'Vuex' },
{ href: "/guide/ajax", title: "AJAX" }, { href: '/guide/ajax', title: 'AJAX' },
{ href: "/guide/loops", title: "Using in Loops" }, { href: '/guide/loops', title: 'Using in Loops' },
], ],
}, },
{ {
title: "Customizing", title: 'Customizing',
links: [ links: [
{ href: "/guide/keydown", title: "Keydown Events" }, { href: '/guide/keydown', title: 'Keydown Events' },
{ href: "/guide/positioning", title: "Dropdown Position" }, { href: '/guide/positioning', title: 'Dropdown Position' },
{ href: "/guide/opening", title: "Dropdown Opening" }, { href: '/guide/opening', title: 'Dropdown Opening' },
{ href: "/guide/filtering", title: "Option Filtering" }, { href: '/guide/filtering', title: 'Option Filtering' },
], ],
}, },
{ {
title: "API", title: 'API',
links: [ links: [
{ href: "/api/props", title: "Props" }, { href: '/api/props', title: 'Props' },
{ href: "/api/slots", title: "Slots" }, { href: '/api/slots', title: 'Slots' },
{ href: "/api/events", title: "Events" }, { href: '/api/events', title: 'Events' },
], ],
}, },
]; ]
const router = { pathname: "" }; const router = { pathname: '' }
</script> </script>
<template> <template>
docs/components/ThemeSwitcher.vue
+9 -9
View File
@@ -5,18 +5,18 @@ import {
ListboxLabel, ListboxLabel,
ListboxOption, ListboxOption,
ListboxOptions, ListboxOptions,
} from "@headlessui/vue"; } from '@headlessui/vue'
import LightIcon from "~/components/icons/LightIcon.vue"; import LightIcon from '~/components/icons/LightIcon.vue'
import DarkIcon from "~/components/icons/DarkIcon.vue"; import DarkIcon from '~/components/icons/DarkIcon.vue'
import SystemIcon from "~/components/icons/SystemIcon.vue"; import SystemIcon from '~/components/icons/SystemIcon.vue'
const themes = [ const themes = [
{ name: "Light", value: "light", icon: LightIcon }, { name: 'Light', value: 'light', icon: LightIcon },
{ name: "Dark", value: "dark", icon: DarkIcon }, { name: 'Dark', value: 'dark', icon: DarkIcon },
{ name: "System", value: "system", icon: SystemIcon }, { name: 'System', value: 'system', icon: SystemIcon },
]; ]
const colorMode = useColorMode(); const colorMode = useColorMode()
</script> </script>
<template> <template>
docs/components/TimelineSvg.vue
+2 -2
View File
@@ -181,6 +181,6 @@
</template> </template>
<script> <script>
export default { export default {
name: "TimelineSvg", name: 'TimelineSvg',
}; }
</script> </script>
docs/components/content/Callout.vue
+13 -13
View File
@@ -1,32 +1,32 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed } from "#imports"; import { computed } from '#imports'
const props = withDefaults( const props = withDefaults(
defineProps<{ defineProps<{
type?: "note" | "warning"; type?: 'note' | 'warning'
title: string; title: string
}>(), }>(),
{ {
type: "note", type: 'note',
} }
); )
const styles = computed(() => { const styles = computed(() => {
return { return {
note: { note: {
container: container:
"bg-sky-50 dark:bg-slate-800/60 dark:ring-1 dark:ring-slate-300/10", 'bg-sky-50 dark:bg-slate-800/60 dark:ring-1 dark:ring-slate-300/10',
title: "text-sky-900 dark:text-sky-400", 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", 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: { warning: {
container: container:
"bg-amber-50 dark:bg-slate-800/60 dark:ring-1 dark:ring-slate-300/10", 'bg-amber-50 dark:bg-slate-800/60 dark:ring-1 dark:ring-slate-300/10',
title: "text-amber-900 dark:text-amber-500", 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", 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> </script>
<template> <template>
docs/components/content/ProseH2.vue
+1 -1
View File
@@ -3,5 +3,5 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
defineProps<{ id: string }>(); defineProps<{ id: string }>()
</script> </script>
docs/components/content/ProseH3.vue
+1 -1
View File
@@ -3,5 +3,5 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
defineProps<{ id: string }>(); defineProps<{ id: string }>()
</script> </script>
docs/components/content/ProseH4.vue
+1 -1
View File
@@ -3,5 +3,5 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
defineProps<{ id: string }>(); defineProps<{ id: string }>()
</script> </script>
docs/components/content/ProseH5.vue
+1 -1
View File
@@ -3,5 +3,5 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
defineProps<{ id: string }>(); defineProps<{ id: string }>()
</script> </script>
docs/components/content/ProseH6.vue
+1 -1
View File
@@ -3,5 +3,5 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
defineProps<{ id: string }>(); defineProps<{ id: string }>()
</script> </script>
docs/components/content/QuickLink.vue
+4 -4
View File
@@ -1,9 +1,9 @@
<script setup lang="ts"> <script setup lang="ts">
defineProps<{ defineProps<{
icon: string; icon: string
href: string; href: string
title: string; title: string
}>(); }>()
</script> </script>
<template> <template>
docs/nuxt.config.ts
+21 -10
View File
@@ -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 // https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({ 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/ // https://color-mode.nuxtjs.org/
colorMode: { classSuffix: "" }, colorMode: { classSuffix: '' },
// https://content.nuxtjs.org/api/configuration // https://content.nuxtjs.org/api/configuration
content: { content: {
@@ -16,8 +17,8 @@ export default defineNuxtConfig({
// https://content.nuxtjs.org/api/configuration/#highlighttheme // https://content.nuxtjs.org/api/configuration/#highlighttheme
highlight: { highlight: {
theme: { theme: {
default: "one-dark-pro", default: 'one-dark-pro',
dark: "github-dark", dark: 'github-dark',
// sepia: "monokai", // sepia: "monokai",
}, },
}, },
@@ -25,13 +26,23 @@ export default defineNuxtConfig({
markdown: { markdown: {
remarkPlugins: {}, remarkPlugins: {},
rehypePlugins: { rehypePlugins: {
"rehype-autolink-headings": false, 'rehype-autolink-headings': false,
},
},
},
vite: {
resolve: {
alias: {
'vue-select': fileURLToPath(
new URL('../src/index.js', import.meta.url)
),
}, },
}, },
}, },
build: { build: {
extractCSS: true, // @see https://github.com/tailwindlabs/headlessui/discussions/1545#discussioncomment-2871517
transpile: ["@headlessui/vue"], transpile: ['@headlessui/vue'],
}, },
}); })
docs/tailwind.config.js
+21 -21
View File
@@ -1,34 +1,34 @@
const defaultTheme = require("tailwindcss/defaultTheme"); const defaultTheme = require('tailwindcss/defaultTheme')
/** @type {import('tailwindcss').Config} */ /** @type {import('tailwindcss').Config} */
module.exports = { module.exports = {
content: ["./pages/**/*.{js,vue}", "app.vue"], content: ['./pages/**/*.{js,vue}', 'app.vue'],
darkMode: "class", darkMode: 'class',
theme: { theme: {
fontSize: { fontSize: {
xs: ["0.75rem", { lineHeight: "1rem" }], xs: ['0.75rem', { lineHeight: '1rem' }],
sm: ["0.875rem", { lineHeight: "1.5rem" }], sm: ['0.875rem', { lineHeight: '1.5rem' }],
base: ["1rem", { lineHeight: "2rem" }], base: ['1rem', { lineHeight: '2rem' }],
lg: ["1.125rem", { lineHeight: "1.75rem" }], lg: ['1.125rem', { lineHeight: '1.75rem' }],
xl: ["1.25rem", { lineHeight: "2rem" }], xl: ['1.25rem', { lineHeight: '2rem' }],
"2xl": ["1.5rem", { lineHeight: "2.5rem" }], '2xl': ['1.5rem', { lineHeight: '2.5rem' }],
"3xl": ["2rem", { lineHeight: "2.5rem" }], '3xl': ['2rem', { lineHeight: '2.5rem' }],
"4xl": ["2.5rem", { lineHeight: "3rem" }], '4xl': ['2.5rem', { lineHeight: '3rem' }],
"5xl": ["3rem", { lineHeight: "3.5rem" }], '5xl': ['3rem', { lineHeight: '3.5rem' }],
"6xl": ["3.75rem", { lineHeight: "1" }], '6xl': ['3.75rem', { lineHeight: '1' }],
"7xl": ["4.5rem", { lineHeight: "1" }], '7xl': ['4.5rem', { lineHeight: '1' }],
"8xl": ["6rem", { lineHeight: "1" }], '8xl': ['6rem', { lineHeight: '1' }],
"9xl": ["8rem", { lineHeight: "1" }], '9xl': ['8rem', { lineHeight: '1' }],
}, },
extend: { extend: {
fontFamily: { fontFamily: {
sans: ["Inter", ...defaultTheme.fontFamily.sans], sans: ['Inter', ...defaultTheme.fontFamily.sans],
display: ["Lexend", ...defaultTheme.fontFamily.sans], display: ['Lexend', ...defaultTheme.fontFamily.sans],
}, },
maxWidth: { maxWidth: {
"8xl": "88rem", '8xl': '88rem',
}, },
}, },
}, },
plugins: [require("@tailwindcss/typography")], plugins: [require('@tailwindcss/typography')],
}; }
package.json
+2 -2
View File
@@ -23,8 +23,8 @@
"license": "MIT", "license": "MIT",
"prepare": "npm run build", "prepare": "npm run build",
"scripts": { "scripts": {
"dev:docs": "cd docs && yarn serve", "dev:docs": "cd docs && yarn dev",
"build:docs": "cd docs && yarn build", "build:docs": "cd docs && yarn generate",
"semantic-release": "semantic-release", "semantic-release": "semantic-release",
"commit": "git-cz", "commit": "git-cz",
"dev": "vite", "dev": "vite",
src/directives/appendToBody.js
+4 -8
View File
@@ -1,14 +1,10 @@
export default { export default {
mounted(el, { instance }) { mounted(el, { instance }) {
if (instance.appendToBody) { if (instance.appendToBody) {
const { const { height, top, left, width } =
height, instance.$refs.toggle.getBoundingClientRect()
top, const scrollX = window.scrollX || window.pageXOffset
left, const scrollY = window.scrollY || window.pageYOffset
width,
} = instance.$refs.toggle.getBoundingClientRect()
let scrollX = window.scrollX || window.pageXOffset
let scrollY = window.scrollY || window.pageYOffset
el.unbindPosition = instance.calculatePosition(el, instance, { el.unbindPosition = instance.calculatePosition(el, instance, {
width: width + 'px', width: width + 'px',
left: scrollX + left + 'px', left: scrollX + left + 'px',
vite.config.ts
+29 -29
View File
@@ -6,37 +6,37 @@ import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/ // https://vitejs.dev/config/
export default defineConfig({ export default defineConfig({
plugins: [vue()], plugins: [vue()],
publicDir: false, publicDir: false,
resolve: { resolve: {
alias: { alias: {
'@': fileURLToPath(new URL('./src', import.meta.url)), '@': fileURLToPath(new URL('./src', import.meta.url)),
'@tests': fileURLToPath(new URL('./tests', import.meta.url)), '@tests': fileURLToPath(new URL('./tests', import.meta.url)),
},
}, },
build: { },
target: 'es2015', build: {
lib: { target: 'es2015',
entry: resolve(__dirname, 'src/index.js'), lib: {
name: 'vue-select', entry: resolve(__dirname, 'src/index.js'),
fileName: (format) => `vue-select.${format}.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 || ''
},
},
},
}, },
test: { rollupOptions: {
coverage: { external: ['vue'],
reporter: ['lcov'], output: {
globals: { vue: 'Vue' },
assetFileNames(chunk): string {
if (chunk.name === 'style.css') {
return 'vue-select.css'
}
return chunk.name || ''
}, },
},
}, },
},
test: {
coverage: {
reporter: ['lcov'],
},
},
}) })