fix: updated eslint config

.eslintrc.js

@@ -1,3 +1,20 @@
 module.exports = {
-  extends: ['eslint-config-kouts/vue3']
+  extends: ['eslint-config-kouts/vue3'],
+  overrides: [
+    {
+      // Disable multi-word-component-names
+      files: ['playground/**/*.{vue,js}', 'src/**/*.vue', 'docs/**/*.{vue,js}'],
+      rules: {
+        'vue/multi-word-component-names': 'off',
+        'vue/v-on-event-hyphenation': [
+          'error',
+          'always',
+          {
+            autofix: false,
+            ignore: ['update:modelValue']
+          }
+        ]
+      }
+    }
+  ]
 }

docs/.vuepress/clientAppEnhance.js

@@ -1,6 +1,6 @@
-import Modal from '@/Modal.vue'
 import Example1 from './components/Example1.vue'
 import Intro from './components/Intro.vue'
+import Modal from '@/Modal.vue'
 import './styles/styles.scss'
 
 import { defineClientAppEnhance } from '@vuepress/client'

playground/layouts/default/Default.vue

@@ -7,8 +7,8 @@
 </template>
 
 <script>
-import DefaultNav from './DefaultNav.vue'
 import DefaultFooter from './DefaultFooter.vue'
+import DefaultNav from './DefaultNav.vue'
 
 export default {
   components: {

playground/main.js

@@ -1,11 +1,12 @@
+import App from './App.vue'
+import Default from './layouts/default/Default.vue'
+import Modal from '@/Modal.vue'
 import { createApp } from 'vue'
 import { router } from './router'
 import { store } from './store'
-import Default from './layouts/default/Default.vue'
-import App from './App.vue'
-import Modal from '@/Modal.vue'
 
 const app = createApp(App)
+
 app.component('LayoutDefault', Default)
 app.component('Modal', Modal)
 

playground/router/index.js

@@ -1,5 +1,5 @@
-import { createRouter, createWebHashHistory } from 'vue-router'
 import Example1 from '../views/Example1.vue'
+import { createRouter, createWebHashHistory } from 'vue-router'
 
 const history = createWebHashHistory()
 const routes = [

postcss.config.js

@@ -8,6 +8,7 @@ module.exports = {
         content: ['./**/*.html', './src/**/*.vue'],
         defaultExtractor(content) {
           const contentWithoutStyleBlocks = content.replace(/<style[^]+?<\/style>/gi, '')
+
           return contentWithoutStyleBlocks.match(/[A-Za-z0-9-_/:]*[A-Za-z0-9-_/]+/g) || []
         },
         whitelist: [],

src/Modal.vue

@@ -169,6 +169,7 @@ export default {
         const all = [].slice.call(this.$refs['vm-wrapper'].querySelectorAll(FOCUSABLE_ELEMENTS)).filter(function (el) {
           return !!(el.offsetWidth || el.offsetHeight || el.getClientRects().length)
         })
+
         if (e.shiftKey) {
           if (e.target === all[0] || e.target === this.$refs['vm-wrapper']) {
             e.preventDefault()
@@ -192,17 +193,20 @@ export default {
     },
     handleFocus(wrapper) {
       const autofocus = wrapper.querySelector('[autofocus]')
+
       if (autofocus) {
         autofocus.focus()
       } else {
         const focusable = wrapper.querySelectorAll(FOCUSABLE_ELEMENTS)
+
         focusable.length ? focusable[0].focus() : wrapper.focus()
       }
     },
     beforeOpen() {
       // console.log('beforeOpen');
       this.elToFocus = document.activeElement
       const lastZindex = this.getTopZindex()
+
       if (animatingZIndex) {
         this.zIndex = animatingZIndex + 2
       } else {
@@ -237,10 +241,13 @@ export default {
       this.$nextTick(() => {
         window.requestAnimationFrame(() => {
           const lastZindex = this.getTopZindex()
+
           if (lastZindex > 0) {
             const all = this.getAllVisibleWrappers()
+
             for (let i = 0; i < all.length; i++) {
               const wrapper = all[i]
+
               if (parseInt(wrapper.style.zIndex) === lastZindex) {
                 if (wrapper.contains(this.elToFocus)) {
                   this.elToFocus.focus()

tests/unit/ModalBasic.spec.js

@@ -1,9 +1,10 @@
+import Modal from '@/Modal.vue'
 import { mount } from '@vue/test-utils'
 import { waitRAF } from '../utils'
-import Modal from '@/Modal.vue'
 
 const createWrapperContainer = (componentArgs) => {
   const args = componentArgs || {}
+
   args.appendTo = '#modal-host'
   const wrapperContainer = {
     components: {
@@ -50,6 +51,7 @@ describe('Modal basic functionality', () => {
 
   it('hides the modal', async () => {
     const wrapper = createWrapperContainer()
+
     await wrapper.setData({ modelValue: true })
     await wrapper.setData({ modelValue: false })
 

tests/unit/ModalEvents.spec.js

@@ -1,6 +1,6 @@
-import { mount } from '@vue/test-utils'
-import { waitRAF, sleep } from '../utils'
 import Modal from '@/Modal.vue'
+import { mount } from '@vue/test-utils'
+import { sleep, waitRAF } from '../utils'
 
 const createWrapper = () => {
   return mount(Modal, {
@@ -23,6 +23,7 @@ describe('Modal events', () => {
 
   it.each(['before-open', 'opening', 'after-open'])('emits a %s event when opening', async (eventName) => {
     const wrapper = createWrapper()
+
     await wrapper.setProps({ modelValue: true })
     await waitRAF()
     await sleep(200)
@@ -32,6 +33,7 @@ describe('Modal events', () => {
 
   it.each(['before-close', 'closing', 'after-close'])('emits a %s event when closing', async (eventName) => {
     const wrapper = createWrapper()
+
     await wrapper.setProps({ modelValue: true })
     await waitRAF()
     await wrapper.setProps({ modelValue: false })

tests/unit/ModalFeatures.spec.js

@@ -1,6 +1,6 @@
-import { mount } from '@vue/test-utils'
-import { waitNT, sleep } from '../utils'
 import Modal from '@/Modal.vue'
+import { mount } from '@vue/test-utils'
+import { sleep, waitNT } from '../utils'
 
 const originalOffsetHeight = Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'offsetHeight')
 const originalOffsetWidth = Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'offsetWidth')
@@ -61,6 +61,7 @@ const createModalsWrapper = (data) => {
 
 beforeAll(() => {
   const style = document.createElement('style')
+
   style.innerHTML = `
   .vm-fadeIn, .vm-fadeOut {
     animation-duration: 1ms;
@@ -72,6 +73,7 @@ beforeAll(() => {
 describe('Modal features', () => {
   beforeEach(() => {
     const el = document.createElement('div')
+
     el.id = 'modal-host'
     document.body.appendChild(el)
   })
@@ -111,6 +113,7 @@ describe('Modal features', () => {
     await sleep(100)
 
     const textInput = wrapper.getComponent('.modal-1').find('.modal-1 .text-input')
+
     expect(document.activeElement).toEqual(textInput.element)
     wrapper.unmount()
   })
@@ -123,16 +126,19 @@ describe('Modal features', () => {
     await sleep(300)
 
     const modal1 = wrapper.getComponent('.modal-1')
+
     await modal1.find('button.open-modal-2').trigger('click')
 
     await sleep(300)
 
     const modal2 = wrapper.getComponent('.modal-2')
+
     await modal2.find('.modal-2 button.vm-btn-close').trigger('click')
 
     await sleep(300)
 
     const textInput = modal1.find('.modal-1 .text-input')
+
     expect(document.activeElement).toEqual(textInput.element)
     wrapper.unmount()
   })
@@ -145,18 +151,21 @@ describe('Modal features', () => {
     await sleep(100)
 
     const modal1 = wrapper.getComponent('.modal-1')
+
     await modal1.find('button.open-modal-2').trigger('click')
 
     await sleep(100)
 
     wrapper.setProps({ showInput: false })
 
     const modal2 = wrapper.getComponent('.modal-2')
+
     await modal2.find('.modal-2 button.vm-btn-close').trigger('click')
 
     await sleep(100)
 
     const closeBtn = modal1.find('.modal-1 button.vm-btn-close')
+
     expect(document.activeElement).toEqual(closeBtn.element)
     wrapper.unmount()
   })
@@ -169,9 +178,11 @@ describe('Modal features', () => {
     await sleep(100)
 
     const modal1 = wrapper.getComponent('.modal-1')
+
     await modal1.trigger('keydown', { keyCode: 9 })
 
     const textInput = modal1.find('.modal-1 .text-input')
+
     expect(document.activeElement).toBe(textInput.element)
     wrapper.unmount()
   })
@@ -184,12 +195,14 @@ describe('Modal features', () => {
     await sleep(100)
 
     const modal1 = wrapper.getComponent('.modal-1')
+
     await modal1.trigger('keydown', {
       keyCode: 9,
       shiftKey: true
     })
 
     const checkboxInput = modal1.find('.modal-1 .checkbox-input')
+
     expect(document.activeElement).toBe(checkboxInput.element)
     wrapper.unmount()
   })
@@ -202,6 +215,7 @@ describe('Modal features', () => {
     await sleep(100)
 
     const modal1 = wrapper.getComponent('.modal-1')
+
     await modal1.trigger('keydown', { keyCode: 27 })
 
     await sleep(100)
@@ -218,6 +232,7 @@ describe('Modal features', () => {
     await sleep(100)
 
     const modal1 = wrapper.getComponent('.modal-1')
+
     await modal1.trigger('click')
 
     await sleep(100)
@@ -239,6 +254,7 @@ describe('Modal features', () => {
 
     const modal1 = wrapper.getComponent('.modal-1')
     const modal1Backdrop = wrapper.getComponent('.vm-backdrop')
+
     await modal1.find('.vm-btn-close').trigger('click')
 
     await sleep(100)
@@ -259,9 +275,11 @@ describe('Modal features', () => {
     await sleep(100)
 
     const modal1 = wrapper.getComponent('.modal-1')
+
     await modal1.find('.modal-1 .checkbox-input').trigger('keydown', { keyCode: 9 })
 
     const closeBtn = modal1.find('.modal-1 button.vm-btn-close')
+
     expect(document.activeElement).toEqual(closeBtn.element)
     wrapper.unmount()
   })
@@ -274,6 +292,7 @@ describe('Modal features', () => {
     await sleep(100)
 
     const modal1 = wrapper.getComponent('.modal-1')
+
     await modal1.find('.modal-1 button.vm-btn-close').trigger('click')
 
     await sleep(100)
@@ -290,6 +309,7 @@ describe('Modal features', () => {
     await sleep(100)
 
     const modal1 = wrapper.getComponent('.modal-1')
+
     await modal1.find('button.open-modal-2').trigger('click')
 
     await sleep(100)

tests/utils.js

@@ -1,6 +1,8 @@
 export const createContainer = (tag = 'div') => {
   const container = document.createElement(tag)
+
   document.body.appendChild(container)
+
   return container
 }
 

vite.config.js

@@ -1,5 +1,5 @@
-import { minifyHtml, injectHtml } from 'vite-plugin-html'
 import vue from '@vitejs/plugin-vue'
+import { injectHtml, minifyHtml } from 'vite-plugin-html'
 const path = require('path')
 const { defineConfig } = require('vite')
 
@@ -48,6 +48,7 @@ module.exports = defineConfig({
           if (assetInfo.name === 'style.css') {
             return 'vue-modal.css'
           }
+
           return assetInfo.name
         }
       }