fix: component keys

package.json

@@ -26,7 +26,7 @@
     "dist:test": "rollup -c rollup/rollup.test.js",
     "build": "node build/build-docs.js && node build/build-dist-config.js",
     "test": "cross-env NODE_ENV=test karma start test/karma.conf.js --single-run",
-    "lint": "eslint --ext .js,.vue src test/specs",
+    "lint": "eslint --ext .js,.vue src test",
     "lint:fix": "npm run lint -- --fix",
     "coveralls": "cat test/coverage/lcov.info | ./node_modules/.bin/coveralls"
   },

src/components/carousel/Carousel.vue

@@ -17,7 +17,7 @@
           :key="index"
           :class="{ active: index === activeIndex }"
           @click="select(index)"
-        ></li>
+        />
       </ol>
     </slot>
     <div class="carousel-inner" role="listbox">

src/components/datepicker/DateView.vue

@@ -50,7 +50,7 @@
       </tr>
     </thead>
     <tbody>
-      <tr v-for="(row, index) in monthDayRows" :key="index">
+      <tr v-for="(row, i) in monthDayRows" :key="i">
         <td
           v-if="weekNumbers"
           class="text-center"
@@ -60,7 +60,7 @@
             getWeekNumber(row[weekStartsWith])
           }}</small>
         </td>
-        <td v-for="(date, _index) in row" :key="_index">
+        <td v-for="(date, j) in row" :key="`${i}_${j}`">
           <btn
             block
             size="sm"

src/components/datepicker/MonthView.vue

@@ -39,7 +39,12 @@
     </thead>
     <tbody>
       <tr v-for="(row, i) in rows" :key="i">
-        <td v-for="(month, j) in row" :key="j" colspan="2" width="33.333333%">
+        <td
+          v-for="(month, j) in row"
+          :key="`${i}_${j}`"
+          colspan="2"
+          width="33.333333%"
+        >
           <btn
             block
             size="sm"

src/components/datepicker/YearView.vue

@@ -37,8 +37,8 @@
       </tr>
     </thead>
     <tbody>
-      <tr v-for="(row, index) in rows" :key="index">
-        <td v-for="(year, _index) in row" :key="_index" width="20%">
+      <tr v-for="(row, i) in rows" :key="i">
+        <td v-for="(year, j) in row" :key="`${i}_${j}`" width="20%">
           <btn
             block
             size="sm"

src/components/select/MultiSelect.vue

@@ -50,16 +50,16 @@
           @keydown.prevent.stop.enter="selectOption"
         />
       </li>
-      <template v-for="(item, index) in groupedOptions">
+      <template v-for="(item, i) in groupedOptions">
         <li
           v-if="item.$group"
-          :key="index"
+          :key="i"
           class="dropdown-header"
           v-text="item.$group"
         ></li>
         <template v-for="(_item, j) in item.options">
           <li
-            :key="j"
+            :key="`${i}_${j}`"
             :class="itemClasses(_item)"
             style="outline: 0"
             @keydown.prevent.stop.down="goNextOption"

src/components/tabs/Tabs.vue

@@ -1,11 +1,11 @@
 <template>
   <section>
     <ul :class="navClasses" role="tablist">
-      <template v-for="(tab, index) in groupedTabs">
+      <template v-for="(tab, i) in groupedTabs">
         <dropdown
           v-if="tab.tabs"
           v-show="!tab.hidden"
-          :key="index"
+          :key="i"
           role="presentation"
           tag="li"
           :class="getTabClasses(tab)"
@@ -17,7 +17,7 @@
             <li
               v-for="(subTab, j) in tab.tabs"
               v-show="!subTab.hidden"
-              :key="j"
+              :key="`${i}_${j}`"
               :class="getTabClasses(subTab, true)"
             >
               <a href="#" @click.prevent="select(tabs.indexOf(subTab))">{{
@@ -29,7 +29,7 @@
         <li
           v-else
           v-show="!tab.hidden"
-          :key="index"
+          :key="i"
           role="presentation"
           :class="getTabClasses(tab)"
         >

test/karma.conf.js

@@ -14,10 +14,10 @@ module.exports = function (config) {
     // 2. add it to the `browsers` array below.
     browsers: ['ChromeHeadlessDesktop'],
     customLaunchers: {
-      'ChromeHeadlessDesktop': {
+      ChromeHeadlessDesktop: {
         base: 'ChromeHeadless',
-        flags: ['--window-size=1920,1080', '--no-sandbox']
-      }
+        flags: ['--window-size=1920,1080', '--no-sandbox'],
+      },
     },
     // browsers: ['Chrome'],
     frameworks: ['mocha', 'sinon-chai'],
@@ -28,10 +28,10 @@ module.exports = function (config) {
        * because the preprocessor will use its own.
        */
       { pattern: './index.js', watched: false },
-      '../node_modules/bootstrap/dist/css/bootstrap.min.css'
+      '../node_modules/bootstrap/dist/css/bootstrap.min.css',
     ],
     preprocessors: {
-      './index.js': ['rollup']
+      './index.js': ['rollup'],
     },
     rollupPreprocessor: require('../rollup/rollup.test'),
     singleRun: true,
@@ -42,15 +42,15 @@ module.exports = function (config) {
       skipFilesWithNoCoverage: true,
       'report-config': {
         lcovonly: {
-          subdir: '.'
+          subdir: '.',
         },
         html: {
-          subdir: './html'
-        }
-      }
+          subdir: './html',
+        },
+      },
     },
     client: {
-      useIframe: false // Page scroll not working without this!!!
-    }
+      useIframe: false, // Page scroll not working without this!!!
+    },
   })
 }

test/setup.js

@@ -3,7 +3,7 @@ import * as uiv from '../src/install'
 
 Vue.config.productionTip = false
 // simulate router-link
-Vue.component('router-link', {
-  template: '<a href="#router-link"><slot></slot></a>'
+Vue.component('RouterLink', {
+  template: '<a href="#router-link"><slot></slot></a>',
 })
 Vue.use(uiv)

test/utils.js

@@ -12,7 +12,7 @@ export const keyCodes = {
   left: 37,
   right: 39,
   down: 40,
-  'delete': [8, 46]
+  delete: [8, 46],
 }
 
 export const triggerEvent = (elm, name, evtProps = {}, ...opts) => {
@@ -33,9 +33,7 @@ export const triggerEvent = (elm, name, evtProps = {}, ...opts) => {
       evt[k] = evtProps[k]
     }
   }
-  elm.dispatchEvent
-    ? elm.dispatchEvent(evt)
-    : elm.fireEvent('on' + name, evt)
+  elm.dispatchEvent ? elm.dispatchEvent(evt) : elm.fireEvent('on' + name, evt)
   return elm
 }
 
@@ -55,7 +53,7 @@ export const triggerKey = (el, key, type = 'down') => {
 }
 
 export const sleep = (time) => {
-  return new Promise(resolve => {
+  return new Promise((resolve) => {
     setTimeout(resolve, time)
   })
 }
@@ -64,14 +62,14 @@ export const createVm = (template, _data, _options) => {
   $('<div id="app"><div id="mount"></div></div>').appendTo('body')
   const res = Vue.compile(template)
   return new Vue({
-    data () {
+    data() {
       return {
-        ..._data
+        ..._data,
       }
     },
     ..._options,
     render: res.render,
-    staticRenderFns: res.staticRenderFns
+    staticRenderFns: res.staticRenderFns,
   }).$mount('#mount')
 }