chore: upgrade vue + dependencies

visualjerk · Jan 22, 2022 · 7135233 · 7135233
1 parent fe3d35b
commit 7135233
Show file tree

Hide file tree

Showing 12 changed files with 2,614 additions and 3,821 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -9,8 +9,6 @@ module.exports = {
     'plugin:vue/vue3-recommended',
     'plugin:@typescript-eslint/recommended',
     'prettier',
-    'prettier/@typescript-eslint',
-    'prettier/vue',
   ],
   parser: 'vue-eslint-parser',
   parserOptions: {
@@ -22,5 +20,7 @@ module.exports = {
   rules: {
     '@typescript-eslint/no-var-requires': 'off',
     '@typescript-eslint/explicit-module-boundary-types': 'off',
+    'vue/multi-word-component-names': 'off',
   },
+  ignorePatterns: ['lib', 'docs', 'coverage'],
 }
diff --git a/docs/src/components/LayoutHeader.vue b/docs/src/components/LayoutHeader.vue
@@ -64,7 +64,7 @@
           </a>
 
           <ToggleDarkMode class="ml-2 sm:ml-8">
-            <template slot="default" slot-scope="{ dark }">
+            <template #default="{ dark }" >
               <MoonIcon v-if="dark" size="1.5x" />
               <SunIcon v-else size="1.5x" />
             </template>

diff --git a/docs/src/components/OnThisPage.vue b/docs/src/components/OnThisPage.vue
@@ -69,6 +69,15 @@ export default {
     }
   },
 
+  mounted() {
+    if (process.isClient) {
+      if (window.location.hash) {
+        this.activeAnchor = window.location.hash;
+      }
+      this.$nextTick(this.initObserver);
+    }
+  },
+
   methods: {
     observerCallback(entries, observer) {
       // This early return fixes the jumping
@@ -106,15 +115,6 @@ export default {
         this.observer.observe(elements[i]);
       }
     },
-  },
-
-  mounted() {
-    if (process.isClient) {
-      if (window.location.hash) {
-        this.activeAnchor = window.location.hash;
-      }
-      this.$nextTick(this.initObserver);
-    }
   }
 };
 </script>
diff --git a/docs/src/components/Search.vue b/docs/src/components/Search.vue
@@ -1,9 +1,9 @@
 <template>
   <div
+    class="relative"
     @keydown.down="increment"
     @keydown.up="decrement"
     @keydown.enter="go"
-    class="relative"
   >
     <label class="relative block">
       <span class="sr-only">Search Documentation</span>
@@ -34,15 +34,15 @@
         </li>
 
         <li
-          v-else
           v-for="(result, index) in results"
+          v-else
           :key="result.path + result.anchor"
-          @mouseenter="focusIndex = index"
-          @mousedown="go"
           class="border-ui-sidebar"
           :class="{
             'border-b': index + 1 !== results.length
           }"
+          @mouseenter="focusIndex = index"
+          @mousedown="go"
         >
           <g-link
             :to="result.path + result.anchor"

diff --git a/docs/src/components/Sidebar.vue b/docs/src/components/Sidebar.vue
@@ -1,7 +1,7 @@
 <template>
   <div
-    ref="sidebar"
     v-if="showSidebar"
+    ref="sidebar"
     class="px-4 pt-8 lg:pt-12"
   >
     <div

diff --git a/docs/src/components/ToggleDarkMode.vue b/docs/src/components/ToggleDarkMode.vue
@@ -1,5 +1,5 @@
 <template>
-  <button @click="handleClick" aria-label="Toggle Darkmode" title="Toggle Darkmode">
+  <button aria-label="Toggle Darkmode" title="Toggle Darkmode" @click="handleClick">
     <slot :dark="isDarkMode" />
   </button>
 </template>
@@ -14,6 +14,18 @@ export default {
     }
   },
 
+  mounted() {
+    if (this.hasInStorage()) {
+      this.toggleDarkMode(
+        this.getFromStorage()
+      );
+    } else if (process.isClient && window.matchMedia) {
+      this.toggleDarkMode(
+        this.detectPrefered()
+      );
+    }
+  },
+
   methods: {
     handleClick() {
       const hasDarkMode = document.documentElement.hasAttribute(LIGHTS_OUT);
@@ -49,18 +61,6 @@ export default {
     getFromStorage() {
       return localStorage.getItem(LIGHTS_OUT) === 'true' ? true : false;
     }
-  },
-
-  mounted() {
-    if (this.hasInStorage()) {
-      this.toggleDarkMode(
-        this.getFromStorage()
-      );
-    } else if (process.isClient && window.matchMedia) {
-      this.toggleDarkMode(
-        this.detectPrefered()
-      );
-    }
   }
 };
 </script>

diff --git a/docs/src/layouts/Default.vue b/docs/src/layouts/Default.vue
@@ -65,18 +65,6 @@ export default {
       sidebarOpen: false,
     }
   },
-  watch: {
-    sidebarOpen: function (isOpen) {
-      document.body.classList.toggle('overflow-hidden', isOpen)
-    },
-  },
-  methods: {
-    setHeaderHeight() {
-      this.$nextTick(() => {
-        this.headerHeight = this.$refs.header.offsetHeight
-      })
-    },
-  },
   computed: {
     sidebarStyle() {
       return {
@@ -88,9 +76,21 @@ export default {
       return this.$page && this.headerHeight > 0
     },
   },
+  watch: {
+    sidebarOpen: function (isOpen) {
+      document.body.classList.toggle('overflow-hidden', isOpen)
+    },
+  },
   mounted() {
     this.setHeaderHeight()
   },
+  methods: {
+    setHeaderHeight() {
+      this.$nextTick(() => {
+        this.headerHeight = this.$refs.header.offsetHeight
+      })
+    },
+  },
   metaInfo() {
     return {
       meta: [

diff --git a/jest.config.js b/jest.config.js
@@ -1,4 +1,5 @@
 module.exports = {
-  setupFilesAfterEnv: ['./test/setup.ts'],
+  setupFilesAfterEnv: ['<rootDir>/test/setup.ts'],
   collectCoverageFrom: ['src/**/*.{js,jsx,ts,tsx}', '!**/node_modules/**'],
+  testEnvironment: 'jsdom',
 }
diff --git a/package.json b/package.json
@@ -15,37 +15,42 @@
     "build": "rollup -c",
     "docs:deploy": "cd docs && yarn deploy"
   },
+  "dependencies": {
+    "@popperjs/core": "2.11.2",
+    "body-scroll-lock": "3.0.3"
+  },
   "peerDependencies": {
-    "vue": "^3.0.0-rc.5"
+    "vue": "^3.2.26"
   },
   "devDependencies": {
-    "@ant-design-vue/babel-plugin-jsx": "^1.0.0-beta.3",
-    "@babel/core": "^7.10.4",
-    "@babel/preset-env": "^7.10.4",
-    "@babel/preset-typescript": "^7.10.4",
-    "@rollup/plugin-commonjs": "^15.0.0",
-    "@rollup/plugin-multi-entry": "^3.0.1",
-    "@rollup/plugin-node-resolve": "^9.0.0",
-    "@rollup/plugin-typescript": "^5.0.2",
-    "@testing-library/dom": "^7.21.4",
-    "@testing-library/jest-dom": "^5.11.1",
-    "@testing-library/user-event": "^12.0.11",
-    "@types/jest": "^26.0.4",
-    "@typescript-eslint/eslint-plugin": "^3.7.1",
-    "@typescript-eslint/parser": "^3.7.1",
-    "@vue/compiler-sfc": "^3.0.0-rc.3",
-    "@vue/test-utils": "^2.0.0-alpha.7",
-    "babel-jest": "^26.1.0",
-    "eslint": "^7.5.0",
-    "eslint-config-prettier": "^6.11.0",
-    "eslint-plugin-vue": "^7.0.0-beta.0",
-    "husky": ">=4",
-    "jest": "^26.1.0",
-    "lint-staged": ">=10",
-    "prettier": "^2.0.5",
-    "rollup": "^2.23.0",
-    "typescript": "^3.9.7",
-    "vue": "^3.0.0-rc.3"
+    "@ant-design-vue/babel-plugin-jsx": "1.0.0-rc.1",
+    "@babel/core": "7.16.10",
+    "@babel/preset-env": "^7.16.11",
+    "@babel/preset-typescript": "7.16.7",
+    "@rollup/plugin-commonjs": "21.0.1",
+    "@rollup/plugin-multi-entry": "4.1.0",
+    "@rollup/plugin-node-resolve": "13.1.3",
+    "@rollup/plugin-typescript": "8.3.0",
+    "@testing-library/dom": "8.11.2",
+    "@testing-library/jest-dom": "5.16.1",
+    "@testing-library/user-event": "13.5.0",
+    "@types/jest": "27.4.0",
+    "@typescript-eslint/eslint-plugin": "5.10.0",
+    "@typescript-eslint/parser": "5.10.0",
+    "@vue/compiler-sfc": "3.2.26",
+    "@vue/test-utils": "2.0.0-rc.18",
+    "babel-jest": " 27.4.6",
+    "eslint": "8.7.0",
+    "eslint-config-prettier": "8.3.0",
+    "eslint-plugin-vue": "8.3.0",
+    "husky": "7.0.4",
+    "jest": "27.4.7",
+    "lint-staged": "12.2.2",
+    "prettier": "2.5.1",
+    "rollup": "2.66.0",
+    "tslib": "^2.3.1",
+    "typescript": "4.5.5",
+    "vue": "3.2.26"
   },
   "husky": {
     "hooks": {
@@ -58,9 +63,5 @@
       "jest"
     ],
     "*.{css,scss,md}": "prettier --write"
-  },
-  "dependencies": {
-    "@popperjs/core": "^2.4.4",
-    "body-scroll-lock": "^3.0.3"
   }
 }
diff --git a/src/Dialog/__tests__/index.spec.tsx b/src/Dialog/__tests__/index.spec.tsx
@@ -352,7 +352,7 @@ describe('Dialog Composition', () => {
     expect(content).not.toBeVisible()
   })
 
-  it.only('tab without tabbable element after disclosure and tabindex 0 on dialog hides dialog', async () => {
+  it('tab without tabbable element after disclosure and tabindex 0 on dialog hides dialog', async () => {
     const { content, disclosure, nextTick } = createTestSetup({
       template: `
     <div>

diff --git a/test/utils/events.ts b/test/utils/events.ts
@@ -5,7 +5,7 @@ export const getByText = (text) => _getByText(document.body, text)
 export const { click, dblClick, tab } = userEvent
 
 type TypeOptions = {
-  delay?: number
+  delay: number
   skipClick?: boolean
   skipAutoClose?: boolean
   initialSelectionStart?: number
@@ -15,11 +15,11 @@ type TypeOptions = {
 export const type = (
   element: Element,
   text: string,
-  options: TypeOptions = {}
-) => {
-  if (options.skipClick == null) {
-    options.skipClick = true
+  options: TypeOptions = {
+    delay: 0,
+    skipClick: true,
   }
+) => {
   return userEvent.type(element, text, options)
 }
 
@@ -29,12 +29,11 @@ export const mousedown = (element: Element) =>
 export const mouseover = (element: Element) =>
   fireEvent(element, new MouseEvent('mouseover'))
 
-const createPress = (key) => async (
-  element: Element & { focus: () => void }
-) => {
-  element.focus()
-  await type(element, key)
-}
+const createPress =
+  (key) => async (element: Element & { focus: () => void }) => {
+    element.focus()
+    await type(element, key)
+  }
 
 export const pressSpace = createPress(' ')
 export const pressEnter = createPress('{enter}')