@carbon/vue 2.16.0 → 2.17.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.16.0",
+  "version": "2.17.1",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -63,7 +63,7 @@
   "sideEffects": true,
   "dependencies": {
     "@carbon/icons-vue": "10.6.1",
-    "carbon-components": "10.7.0",
+    "carbon-components": "10.7.3",
     "flatpickr": "4.6.3",
     "vue": "^2.6.10"
   },
@@ -73,5 +73,5 @@
     "eslint-plugin-prettier": "^3.1.1",
     "vue-template-compiler": "^2.6.10"
   },
-  "gitHead": "cbf298ff93b0cf9ccff74772b0203c027558c550"
+  "gitHead": "638a3416a706a1172f45f09e37082e6527cd0ad4"
 }

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

@@ -18,15 +18,15 @@
 <template>
   <div :class="{ 'bx--form-item': formItem }">
     <div class="bx--dropdown__wrapper" :class="{ 'bx--dropdown__wrapper--inline': inline, 'cv-dropdown': !formItem }">
-      <span v-if="label" :id="`${uid}-label`" class="bx--label" :class="{ 'bx--label--disabled': $attrs.disabled }">
+      <span v-if="label" :id="`${uid}-label`" class="bx--label" :class="{ 'bx--label--disabled': disabled }">
         {{ label }}
       </span>
 
       <div
         v-if="!inline && isHelper"
         class="bx--form__helper-text"
-        :class="{ 'bx--form__helper-text--disabled': $attrs.disabled }"
-        :aria-disabled="$attrs.disabled"
+        :class="{ 'bx--form__helper-text--disabled': disabled }"
+        :aria-disabled="disabled"
       >
         <slot name="helper-text">{{ helperText }}</slot>
       </div>
@@ -42,7 +42,7 @@
           'bx--dropdown--up': up,
           'bx--dropdown--open': open,
           'bx--dropdown--invalid': isInvalid,
-          'bx--dropdown--disabled': $attrs.disabled,
+          'bx--dropdown--disabled': disabled,
           'bx--dropdown--inline': inline,
         }"
         v-bind="$attrs"
@@ -109,6 +109,7 @@ export default {
   mixins: [themeMixin, uidMixin],
   components: { WarningFilled16, ChevronDown16 },
   props: {
+    disabled: Boolean,
     formItem: { type: Boolean, default: true },
     inline: Boolean,
     invalidMessage: { type: String, default: undefined },
@@ -162,15 +163,22 @@ export default {
       },
       set(val) {
         const childItems = this.dropdownItems();
+        let selectedChild;
         for (let index in childItems) {
           let child = childItems[index];
           let selected = child.value === val;
           child.internalSelected = selected;
 
           if (selected) {
-            this.$refs.valueContent.innerHTML = child.internalContent;
+            selectedChild = child;
           }
         }
+        if (selectedChild) {
+          this.$refs.valueContent.innerHTML = selectedChild.internalContent;
+        } else {
+          this.$refs.valueContent.innerHTML = this.placeholder;
+        }
+
         if (this.dataValue !== val) {
           // only raise event on change
           this.dataValue = val;
@@ -246,16 +254,20 @@ export default {
       this.$el.focus();
     },
     onClick(ev) {
-      this.open = !this.open;
-      if (!this.open) {
-        this.$el.focus();
-      }
+      if (this.disabled) {
+        ev.preventDefault();
+      } else {
+        this.open = !this.open;
+        if (!this.open) {
+          this.$el.focus();
+        }
 
-      if (ev.target.classList.contains('bx--dropdown-link')) {
-        const targetItemEl = ev.target.parentNode;
-        const newValue = targetItemEl.getAttribute('data-value');
+        if (ev.target.classList.contains('bx--dropdown-link')) {
+          const targetItemEl = ev.target.parentNode;
+          const newValue = targetItemEl.getAttribute('data-value');
 
-        this.internalValue = newValue;
+          this.internalValue = newValue;
+        }
       }
     },
   },

package/src/components/cv-inline-notification/cv-inline-notification.vue

@@ -19,6 +19,14 @@
         <p class="bx--inline-notification__subtitle">{{ subTitle }}</p>
       </div>
     </div>
+    <button
+      v-if="actionLabel"
+      @click="$emit('action')"
+      class="bx--inline-notification__action-button bx--btn bx--btn--sm bx--btn--ghost"
+      type="button"
+    >
+      {{ actionLabel }}
+    </button>
     <button
       type="button"
       :aria-label="closeAriaLabel"
@@ -43,6 +51,7 @@ export default {
   components: { Close16 },
   mixins: [notificationMixin],
   props: {
+    actionLabel: { type: String, default: '' },
     closeAriaLabel: { type: String, default: 'Dismiss notification' },
     kind: {
       type: String,

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

@@ -11,8 +11,8 @@
     >
       <svg class="bx--loading__svg" viewBox="-75 -75 150 150">
         <title>Loading</title>
-        <circle v-if="small" class="bx--loading__background" cx="0" cy="0" r="37.5"></circle>
-        <circle class="bx--loading__stroke" cx="0" cy="0" r="37.5"></circle>
+        <circle v-if="small" class="bx--loading__background" cx="0" cy="0" :r="loadingRadius" />
+        <circle class="bx--loading__stroke" cx="0" cy="0" :r="loadingRadius" />
       </svg>
     </div>
   </div>
@@ -32,6 +32,9 @@ export default {
 
       return `bx--loading-overlay ${this.stopped ? 'bx--loading-overlay--stop' : ''}`;
     },
+    loadingRadius() {
+      return this.small ? '26.8125' : '37.5';
+    },
   },
   data() {
     return {

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

@@ -8,14 +8,14 @@
     }"
     @focusout="onFocusOut"
   >
-    <label v-if="title" :for="uid" class="bx--label" :class="{ 'bx--label--disabled': $attrs.disabled }">
+    <label v-if="title" :for="uid" class="bx--label" :class="{ 'bx--label--disabled': disabled }">
       {{ title }}
     </label>
 
     <div
       v-if="!inline && isHelper"
       class="bx--form__helper-text"
-      :class="{ 'bx--form__helper-text--disabled': $attrs.disabled }"
+      :class="{ 'bx--form__helper-text--disabled': disabled }"
     >
       <slot name="helper-text">{{ helperText }}</slot>
     </div>
@@ -28,7 +28,7 @@
         'bx--list-box--light': theme === 'light',
         'bx--multi-select--expanded': open,
         'bx--multi-select--invalid': isInvalid,
-        'bx--multi-select--disabled bx--list-box--disabled': $attrs.disabled,
+        'bx--multi-select--disabled bx--list-box--disabled': disabled,
         'bx--multi-select--inline bx--list-box--inline': inline,
         'bx--multi-select--selected': dataValue.length > 0,
         'bx--combo-box': filterable,
@@ -57,6 +57,7 @@
       >
         <cv-tag
           :class="{ 'bx--list-box__selection--multi': filterable && dataValue.length > 0 }"
+          :disabled="disabled"
           v-show="dataValue.length > 0"
           kind="filter"
           :label="`${dataValue.length}`"
@@ -152,6 +153,7 @@ export default {
   props: {
     autoFilter: Boolean,
     autoHighlight: Boolean,
+    disabled: Boolean,
     inline: Boolean,
     invalidMessage: { type: String, default: undefined },
     helperText: { type: String, default: undefined },
@@ -391,8 +393,12 @@ export default {
       }
     },
     onClick(ev) {
-      this.doOpen(!this.open);
-      this.inputOrButtonFocus();
+      if (this.disabled) {
+        ev.preventDefault();
+      } else {
+        this.doOpen(!this.open);
+        this.inputOrButtonFocus();
+      }
     },
     clearValues() {
       this.dataValue = [];

package/src/components/cv-overflow-menu/cv-overflow-menu.vue

@@ -119,7 +119,7 @@ export default {
       if (this.open) {
         if (
           ev.relatedTarget === null ||
-          !(this.$el === ev.relatedTarget || this.$refs.popup.contains(ev.relatedTarget))
+          !(this.$refs.trigger === ev.relatedTarget || this.$refs.popup.contains(ev.relatedTarget))
         ) {
           this.open = false;
           this.positionListen(false);

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

@@ -9,21 +9,23 @@
       @keydown.right.prevent="moveRight"
       @keydown.left.prevent="moveLeft"
     >
-      <cv-dropdown class="bx--tabs-trigger" :value="`${selectedIndex}`" @change="onDropChange" :form-item="false">
-        <cv-dropdown-item v-for="(tab, index) in tabs" :key="`drop-${index}`" :value="`${index}`">
-          {{ tab.label }}
-        </cv-dropdown-item>
+      <cv-dropdown class="bx--tabs-trigger" :value="`${selectedId}`" @change="onDropChange" :form-item="false">
+        <cv-dropdown-item v-for="tab in tabs" :key="`drop-${tab.uid}`" :value="`${tab.uid}`">{{
+          tab.label
+        }}</cv-dropdown-item>
       </cv-dropdown>
       <ul class="bx--tabs__nav bx--tabs__nav--hidden" role="tablist">
         <li
-          v-for="(tab, index) in tabs"
-          :key="index"
+          v-for="tab in tabs"
+          :key="tab.uid"
           class="cv-tabs-button bx--tabs__nav-item"
           :class="{
-            'bx--tabs__nav-item--selected': selectedIndex == index,
-            'bx--tabs__nav-item--disabled': disabledTabs.indexOf(index) !== -1,
+            'bx--tabs__nav-item--selected': selectedId == tab.uid,
+            'bx--tabs__nav-item--disabled': disabledTabs.indexOf(tab.uid) !== -1,
           }"
-          role="presentation"
+          role="tab"
+          :aria-selected="selectedId == tab.uid"
+          :aria-disabled="disabledTabs.indexOf(tab.uid) !== -1"
         >
           <a
             class="bx--tabs__nav-link"
@@ -31,8 +33,7 @@
             role="tab"
             :aria-controls="tab.uid"
             :id="`${tab.uid}-link`"
-            aria-selected="false"
-            @click="onTabClick(index)"
+            @click="onTabClick(tab.uid)"
             ref="link"
             >{{ tab.label }}</a
           >
@@ -58,7 +59,6 @@ export default {
   data() {
     return {
       tabs: [],
-      selectedIndex: -1,
       selectedId: undefined,
       disabledTabs: [],
     };
@@ -73,51 +73,59 @@ export default {
   },
   methods: {
     onDropChange(val) {
-      this.onTabClick(parseInt(val));
+      this.onTabClick(val);
     },
     onCvMount(srcComponent) {
       this.tabs.push(srcComponent);
 
       this.checkDisabled(srcComponent);
-      if (this.selectedIndex < 0) {
+      if (this.selectedId === undefined) {
         this.checkSelected();
       }
     },
     onCvBeforeDestroy(srcComponent) {
       const tabIndex = this.tabs.findIndex(item => item.uid === srcComponent.uid);
       if (tabIndex > -1) {
+        const wasSelected = srcComponent.uid === this.selectedId;
+
         this.tabs.splice(tabIndex, 1);
+        this.selectedId = undefined;
 
         this.checkDisabled(srcComponent);
-        if (tabIndex <= this.selectedIndex) {
+
+        if (wasSelected) {
           this.checkSelected();
         }
       }
     },
-    onTabClick(index) {
-      if (this.disabledTabs.indexOf(index) === -1) {
-        if (this.selectedId !== this.tabs[index].uid) {
-          this.selectedIndex = index;
-          this.selectedId = this.tabs[index].uid;
+    onTabClick(id) {
+      if (this.disabledTabs.indexOf(id) === -1) {
+        if (this.selectedId !== id) {
+          let newIndex = -1;
+
+          this.selectedId = id;
 
           for (let i = 0; i < this.tabs.length; i++) {
-            this.tabs[i].internalSelected = i === index;
+            if (this.tabs[i].uid === id) {
+              this.tabs[i].internalSelected = true;
+              newIndex = i;
+            } else {
+              this.tabs[i].internalSelected = false;
+            }
           }
-          this.$emit('tab-selected', index);
+
+          this.$emit('tab-selected', newIndex);
         }
       }
     },
     onCvSelected(srcComponent) {
-      const tabIndex = this.tabs.findIndex(item => item.uid === srcComponent.uid);
-      this.onTabClick(tabIndex);
+      this.onTabClick(srcComponent.uid);
     },
     onCvDisabled(srcComponent) {
-      const tabIndex = this.tabs.findIndex(item => item.uid === srcComponent.uid);
-      this.disabledTabs.push(tabIndex);
+      this.disabledTabs.push(srcComponent.uid);
     },
     onCvEnabled(srcComponent) {
-      const tabIndex = this.tabs.findIndex(item => item.uid === srcComponent.uid);
-      let arrIdx = this.disabledTabs.indexOf(tabIndex);
+      let arrIdx = this.disabledTabs.indexOf(srcComponent.uid);
       if (arrIdx !== -1) {
         this.disabledTabs.splice(arrIdx, 1);
       }
@@ -134,12 +142,13 @@ export default {
 
       for (let i = 0; i < this.tabs.length; i++) {
         if (this.tabs[i].internalSelected) {
-          this.onTabClick(i);
+          this.onTabClick(this.tabs[i].uid);
           somethingSelected = true;
         }
       }
+
       if (!this.noDefaultToFirst && !somethingSelected && this.tabs.length) {
-        this.onTabClick(0);
+        this.onTabClick(this.tabs[0].uid);
       }
     },
     isAllTabsDisabled() {
@@ -149,42 +158,65 @@ export default {
       if (this.isAllTabsDisabled()) {
         return;
       }
+      let newId;
       let newIndex;
-      if (this.selectedIndex > 0) {
-        newIndex = this.selectedIndex - 1;
+
+      if (this.selectedId) {
+        newIndex = this.tabs.indexOf(this.selectedId);
+      }
+
+      if (newIndex > 0) {
+        newIndex--;
       } else {
         newIndex = this.tabs.length - 1;
       }
-      while (this.disabledTabs.indexOf(newIndex) !== -1) {
+      newId = this.tabs[newIndex].uid;
+
+      while (this.disabledTabs.indexOf(newId) !== -1) {
         if (newIndex > 0) {
           newIndex--;
         } else {
           newIndex = this.tabs.length - 1;
         }
+        newId = this.tabs[newIndex].uid;
       }
-      this.onTabClick(newIndex);
+      this.onTabClick(newId);
       this.$refs.link[newIndex].focus();
     },
     moveRight() {
       if (this.isAllTabsDisabled()) {
         return;
       }
+      let newId;
       let newIndex;
-      if (this.selectedIndex < this.tabs.length - 1) {
-        newIndex = this.selectedIndex + 1;
+
+      if (this.selectedId) {
+        newIndex = this.tabs.indexOf(this.selectedId);
+      }
+
+      if (newIndex < this.tabs.length - 1) {
+        newIndex++;
       } else {
         newIndex = 0;
       }
+      newId = this.tabs[newIndex].uid;
+
       while (this.disabledTabs.indexOf(newIndex) !== -1) {
         if (newIndex < this.tabs.length - 1) {
-          newIndex = newIndex + 1;
+          newIndex++;
         } else {
           newIndex = 0;
         }
+        newId = this.tabs[newIndex].uid;
       }
-      this.onTabClick(newIndex);
+
+      this.onTabClick(newId);
       this.$refs.link[newIndex].focus();
     },
+    selected(index) {
+      let selItem = this.tabs[index ? index : -1];
+      this.selectedId = selItem ? selItem.uid : undefined;
+    },
   },
 };
 </script>

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

@@ -8,7 +8,7 @@
         'bx--tag--disabled': disabled,
       },
     ]"
-    tabindex="0"
+    :tabindex="!disabled ? 0 : undefined"
     role="listitem"
     :title="title"
     @keydown.enter.stop.prevent="$emit('remove')"
@@ -16,7 +16,7 @@
     @keyup.space.prevent="$emit('remove')"
   >
     {{ label }}
-    <Close16 v-if="isFilter" :aria-label="clearAriaLabel" role="button" @click.stop.prevent="$emit('remove')" />
+    <Close16 v-if="isFilter" :aria-label="clearAriaLabel" role="button" @click.stop.prevent="onRemove" />
   </span>
 </template>
 
@@ -60,5 +60,12 @@ export default {
       return this.isFilter ? this.clearAriaLabel : null;
     },
   },
+  methods: {
+    onRemove() {
+      if (!this.disabled) {
+        this.$emit('remove');
+      }
+    },
+  },
 };
 </script>

package/src/components/cv-tag/__snapshots__/cv-tag.test.js.snap

@@ -1,13 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CvTag matches tag filter snapshot 1`] = `
-<span tabindex="0" title="Clear filter" class="cv-tag bx--tag bx--tag--filter bx--tag--filter">
-  I am a filter tag
-  <close16-stub aria-label="Clear filter" role="button"></close16-stub></span>
-`;
-
-exports[`CvTag matches tag snapshot 1`] = `
-<span tabindex="0" class="cv-tag bx--tag bx--tag--red">
-  I am a tag
-  <!----></span>
-`;