@carbon/vue 2.23.2-canary.0 → 2.24.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/vue",
   "description": "A collection of components for the Carbon Design System built using Vue.js",
-  "version": "2.23.2-canary.0",
+  "version": "2.24.1",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -63,15 +63,15 @@
   },
   "sideEffects": true,
   "dependencies": {
-    "@carbon/icons-vue": "10.8.0",
-    "carbon-components": "10.9.0",
+    "@carbon/icons-vue": "10.9.3",
+    "carbon-components": "10.10.3",
     "flatpickr": "4.6.3",
-    "vue": "^2.6.10"
+    "vue": "^2.6.11"
   },
   "devDependencies": {
     "@vue/cli-service": "^3.11.0",
     "eslint-plugin-prettier": "^3.1.1",
     "vue-template-compiler": "^2.6.10"
   },
-  "gitHead": "2eead55a40bee363e51bee547598108f8eac5ac2"
+  "gitHead": "159c58ddca4d549963f2c221763f4e24c76ecca4"
 }

package/src/components/cv-content-switcher/cv-content-switcher.vue

@@ -1,5 +1,5 @@
 <template>
-  <div data-content-switcher class="cv-content-switcher bx--content-switcher">
+  <div data-content-switcher class="cv-content-switcher bx--content-switcher" role="tablist">
     <slot></slot>
   </div>
 </template>

package/src/components/cv-data-table/cv-data-table.vue

@@ -19,9 +19,9 @@
         >
           <div class="bx--action-list">
             <slot name="batch-actions" />
-            <cv-button class="bx--batch-summary__cancel" size="small" @click="deselect">{{
-              batchCancelLabel
-            }}</cv-button>
+            <cv-button class="bx--batch-summary__cancel" size="small" @click="deselect">
+              {{ batchCancelLabel }}
+            </cv-button>
           </div>
           <div class="bx--batch-summary">
             <p class="bx--batch-summary__para">
@@ -355,6 +355,11 @@ export default {
     },
     onCvMount(row) {
       this.registeredRows.push(row);
+      if (this.registeredRows.filter(item => item.uid === row.uid).length > 1) {
+        console.error(
+          `CvDataTable: Duplicate ID specified for CvDataTableRow, this may cause issues. {id: ${row.id}, value: ${row.value}}`
+        );
+      }
       row.$on('cv:expanded-change', this.onCvExpandedChange);
       this.updateSomeExpandingRows();
     },

package/src/components/cv-dropdown/cv-dropdown.vue

@@ -22,9 +22,9 @@
       :class="{ 'bx--dropdown__wrapper--inline': inline, 'cv-dropdown': !formItem }"
       :style="wrapperStyleOverride"
     >
-      <span v-if="label" :id="`${uid}-label`" class="bx--label" :class="{ 'bx--label--disabled': disabled }">{{
-        label
-      }}</span>
+      <span v-if="label" :id="`${uid}-label`" class="bx--label" :class="{ 'bx--label--disabled': disabled }">
+        {{ label }}
+      </span>
 
       <div
         v-if="!inline && isHelper"
@@ -40,7 +40,6 @@
         :data-value="internalValue"
         :data-invalid="isInvalid"
         class="bx--dropdown"
-        tabindex="0"
         :class="{
           'bx--dropdown--light': theme === 'light',
           'bx--dropdown--up': up,
@@ -66,7 +65,12 @@
           type="button"
         >
           <WarningFilled16 v-if="isInvalid && inline" class="bx--dropdown__invalid-icon" />
-          <span class="bx--dropdown-text__inner" :id="`${uid}-value`">{{ internalCaption }}</span>
+          <span
+            class="bx--dropdown-text__inner"
+            :id="`${uid}-value`"
+            data-test="internalCaption"
+            v-html="internalCaption"
+          />
           <span class="bx--dropdown__arrow-container">
             <span class="bx--dropdown__arrow" :style="chevronStyleOveride">
               <chevron-down-glyph />
@@ -80,6 +84,7 @@
           :aria-hidden="!open"
           wh-menu-anchor="left"
           :aria-labelledby="`${uid}-label`"
+          ref="droplist"
         >
           <slot></slot>
         </ul>
@@ -169,7 +174,7 @@ export default {
       },
       set(val) {
         const childItems = this.dropdownItems();
-        let selectedChild;
+
         for (let index in childItems) {
           let child = childItems[index];
           let selected = child.value === val;
@@ -282,8 +287,13 @@ export default {
           this.$el.focus();
         }
 
-        if (ev.target.classList.contains('bx--dropdown-link')) {
-          const targetItemEl = ev.target.parentNode;
+        let target = ev.target;
+        while (!target.classList.contains('bx--dropdown-link') && this.$refs.droplist.contains(target)) {
+          target = target.parentNode; // try next one up
+        }
+
+        if (target.classList.contains('bx--dropdown-link')) {
+          const targetItemEl = target.parentNode;
           const newValue = targetItemEl.getAttribute('data-value');
 
           this.internalValue = newValue;

package/src/components/cv-tabs/cv-tabs.vue

@@ -142,6 +142,9 @@ export default {
     },
     onCvMount(srcComponent) {
       this.tabs.push(srcComponent);
+      if (this.tabs.filter(item => item.uid === srcComponent.uid).length > 1) {
+        console.error(`CvTabs: Duplicate ID specified for CvTab, this may cause issues. {id: ${srcComponent.id}}}`);
+      }
 
       this.checkDisabled(srcComponent);
       if (this.selectedId === undefined) {

package/src/components/cv-tooltip/cv-tooltip.vue

@@ -23,7 +23,7 @@ export default {
       type: String,
       default: 'top',
       validator(val) {
-        const validValues = ['top', 'bottom'];
+        const validValues = ['top', 'left', 'right', 'bottom'];
         const valid = validValues.includes(val);
         if (!valid) {
           console.warn(`CVTooltip.direction must be one of the following: ${validValues}`);