chore: deep merge defaultOptions with options

Author: ktquez

package-lock.json

@@ -2,9 +2,9 @@
   "name": "vue-axe",
   "version": "1.1.0",
   "description": "Dynamic accessibility analysis for Vue.js using axe-core",
-  "main": "dist/vue-dark-mode.umd.js",
-  "module": "dist/vue-dark-mode.esm.js",
-  "unpkg": "dist/vue-dark-mode.min.js",
+  "main": "dist/vue-axe.umd.js",
+  "module": "dist/vue-axe.esm.js",
+  "unpkg": "dist/vue-axe.min.js",
   "scripts": {
     "dev": "rollup --config rollup.config.dev.js --watch",
     "build": "npm run build:umd & npm run build:es & npm run build:unpkg",
@@ -52,6 +52,7 @@
     "eslint-plugin-standard": "^4.0.1",
     "eslint-plugin-vue": "^6.2.2",
     "lodash.debounce": "^4.0.8",
+    "lodash.merge": "^4.6.2",
     "rollup": "^2.8.2",
     "rollup-plugin-eslint": "^7.0.0",
     "rollup-plugin-peer-deps-external": "^2.2.2",

package.json

@@ -1,23 +1,42 @@
 import axeCore from 'axe-core'
 import debounce from 'lodash.debounce'
-import { OPTIONS_DEFAULT } from './constants'
+import merge from 'lodash.merge'
 import { checkAndReport, resetCache, resetLastNotification } from './utils'
 
 export default function install (Vue, options) {
   // Browser only
   if (typeof window === 'undefined') return
 
-  options = {
+  const defaultOptions = {
     clearConsoleOnUpdate: true,
+    config: {
+      checks: [{
+        id: 'color-contrast',
+        options: {
+          noScroll: true
+        }
+      }]
+    },
     runOptions: {
       reporter: 'v2',
       resultTypes: ['violations']
     },
-    ...options
+    style: {
+      head: 'padding:6px;font-size:20px;color:#333;font-weight:bold;',
+      boldCourier: 'font-weight:bold;font-family:Courier;',
+      moderate: 'padding:2px 4px;border-radius:5px;background-color:#FFBA52;color:#222;font-weight:normal;',
+      critical: 'padding:2px 4px;border-radius:5px;background-color:#AD0000;color:#fff;font-weight:normal;',
+      serious: 'padding:2px 4px;border-radius:5px;background-color:#333;color:#FFCE85;font-weight:normal;',
+      minor: 'padding:2px 4px;border-radius:5px;background-color:#333;color:#FFCE85;font-weight:normal;',
+      title: 'font-color:black;font-weight:bold;',
+      url: 'font-color:#4D4D4D;font-weight:normal;'
+    }
   }
 
+  options = merge(defaultOptions, options)
+
   // Configure the format data
-  axeCore.configure({ ...OPTIONS_DEFAULT.config, ...options.config })
+  axeCore.configure({ ...options.config })
 
   // Rechecking when updating specific component
   Vue.mixin({
@@ -39,10 +58,7 @@ export default function install (Vue, options) {
       },
       debounceAxe: debounce(function () {
         this.clearAxeConsole()
-
-        this.$nextTick(() => {
-          checkAndReport(options, this.$el)
-        })
+        this.$nextTick(() => checkAndReport(options, this.$el))
       }, 1000, { maxWait: 5000 })
     }
   })