@carbon/vue 2.35.0 → 2.37.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.35.0",
+  "version": "2.37.1",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -56,7 +56,8 @@
   ],
   "scripts": {
     "build": "vue-cli-service build --target lib --name carbon-vue ./src/index.js --no-clean",
-    "clean": "rimraf dist node_modules/.cache"
+    "clean": "rimraf dist node_modules/.cache",
+    "postinstall": "carbon-telemetry collect --install"
   },
   "engines": {
     "node": ">=10.x"
@@ -64,6 +65,7 @@
   "sideEffects": true,
   "dependencies": {
     "@carbon/icons-vue": "10.20.0",
+    "@carbon/telemetry": "^0.0.0-alpha.6",
     "carbon-components": "10.23.1",
     "flatpickr": "4.6.3",
     "vue": "^2.6.12"
@@ -73,5 +75,5 @@
     "eslint-plugin-prettier": "^3.1.1",
     "vue-template-compiler": "^2.6.12"
   },
-  "gitHead": "08825d15ce4b9a73e30bc8809b0e2185e80fd2b8"
+  "gitHead": "39a48b09921ec3760b9cc6e6f87f5b5456e71317"
 }

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

@@ -49,7 +49,6 @@
                 @keydown.enter.prevent="checkSearchExpand(true)"
                 @keydown.space.prevent
                 @keyup.space.prevent="checkSearchExpand(true)"
-                @blur="checkSearchFocus"
                 ref="magnifier"
               >
                 <Search16 :class="`${carbonPrefix}--toolbar-action__icon`" />
@@ -65,7 +64,6 @@
                 ref="search"
                 v-model="searchValue"
                 @input="onSearch"
-                @blur="checkSearchFocus"
                 @keydown.esc.prevent="checkSearchExpand(false)"
               />
               <button
@@ -271,9 +269,19 @@ export default {
     this.$on('cv:sort', (srcComponent, value) => this.onSort(srcComponent, value));
   },
   mounted() {
+    if (this.$refs.searchContainer) {
+      this.$refs.magnifier.addEventListener('blur', this.checkSearchFocus);
+      this.$refs.search.addEventListener('blur', this.checkSearchFocus);
+    }
     this.updateRowsSelected();
     this.checkSlots();
   },
+  beforeDestroy() {
+    if (this.$refs.searchContainer) {
+      this.$refs.magnifier.removeEventListener('blur', this.checkSearchFocus);
+      this.$refs.search.removeEventListener('blur', this.checkSearchFocus);
+    }
+  },
   updated() {
     this.checkSlots();
   },

package/src/components/cv-date-picker/cv-date-picker.vue

@@ -234,7 +234,7 @@ export default {
 
       _options.plugins = [
         this.isRange
-          ? new carbonFlatpickrRangePlugin({
+          ? carbonFlatpickrRangePlugin({
               input: this.$refs.todate,
             })
           : () => {},

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

@@ -245,14 +245,17 @@ export default {
       document.body.classList.remove(`${this.carbonPrefix}--body--with-modal-open`);
 
       if (this.dataVisible) {
-        this.$el.addEventListener('transitionend', this.afterHide, { once: true });
+        this.$el.addEventListener('transitionend', this.afterHide);
       }
 
       this.dataVisible = false;
       this.$emit('modal-hidden');
     },
-    afterHide() {
-      this.$emit('after-modal-hidden');
+    afterHide(event) {
+      if (event.propertyName === 'opacity') {
+        this.$emit('after-modal-hidden');
+        this.$el.removeEventListener('transitionend', this.afterHide);
+      }
     },
     onPrimaryClick(ev) {
       this.$emit('primary-click');

package/src/components/cv-multi-select/cv-multi-select.vue

@@ -300,7 +300,7 @@ export default {
     },
     checkHighlightPosition(newHiglight) {
       if (this.$refs.list && this.$refs.option && this.$refs.option[newHiglight]) {
-        if (this.$refs.list.scrollTop > this.$refs.option[newHiglight].offsetTop) {
+        if (this.$refs.list.scrollTop >= this.$refs.option[newHiglight].offsetTop) {
           this.$refs.list.scrollTop = this.$refs.option[newHiglight].offsetTop;
         } else if (
           this.$refs.list.scrollTop + this.$refs.list.clientHeight <

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="cv-tabs" @focusout="onFocusout" @focusin="onFocusin" style="width: 100%;">
+  <div class="cv-tabs" ref="tabs" style="width: 100%;">
     <div
       data-tabs
       :class="[`cv-tab ${carbonPrefix}--tabs`, { [`${carbonPrefix}--tabs--container`]: container }]"
@@ -89,6 +89,14 @@ export default {
     this.$on('cv:disabled', srcComponent => this.onCvDisabled(srcComponent));
     this.$on('cv:enabled', srcComponent => this.onCvEnabled(srcComponent));
   },
+  mounted() {
+    this.$refs.tabs.addEventListener('focusout', this.onFocusout);
+    this.$refs.tabs.addEventListener('focusin', this.onFocusin);
+  },
+  beforeDestroy() {
+    this.$refs.tabs.removeEventListener('focusout', this.onFocusout);
+    this.$refs.tabs.removeEventListener('focusin', this.onFocusin);
+  },
   computed: {
     triggerStyleOverride() {
       // <style carbon tweaks - DO NOT USE STYLE TAG as it causes SSR issues

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

@@ -30,7 +30,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(`CVDefinitionTooltip.direction must be one of the following: ${validValues}`);

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

@@ -105,6 +105,13 @@ export default {
         this.position();
       }
     },
+    dataVisible() {
+      if (this.dataVisible) {
+        this.$emit('tooltip-shown');
+      } else {
+        this.$emit('tooltip-hidden');
+      }
+    },
   },
   methods: {
     positionListen(on) {

package/src/components/cv-ui-shell/cv-side-nav-link.vue

@@ -36,11 +36,19 @@ export default {
   },
   data() {
     return {
-      hasNavIcon: this.$slots['nav-icon'],
+      hasNavIcon: false,
     };
   },
+  mounted() {
+    this.checkSlots();
+  },
   updated() {
-    this.hasNavIcon = !!this.$slots['nav-icon'];
+    this.checkSlots();
+  },
+  methods: {
+    checkSlots() {
+      this.hasNavIcon = !!this.$slots['nav-icon'];
+    },
   },
 };
 </script>