@carbon/vue 2.34.0 → 2.36.0

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

@@ -41,7 +41,7 @@
         type="number"
         :class="[
           `${carbonPrefix}--text-input ${carbonPrefix}--slider-text-input`,
-          { [`${carbonPrefix}--text-input--light`]: theme === 'light' },
+          { [`${carbonPrefix}--text-input--light`]: isLight },
         ]"
         :placeholder="min"
         v-model="internalValue"

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-tag/cv-tag.vue

@@ -8,7 +8,6 @@
         [`${carbonPrefix}--tag--disabled`]: disabled,
       },
     ]"
-    :tabindex="!disabled ? 0 : undefined"
     role="listitem"
     :title="title"
     @keydown.enter.stop.prevent="$emit('remove')"

package/src/components/cv-text-area/cv-text-area.vue

@@ -17,7 +17,7 @@
         :class="[
           `${carbonPrefix}--text-area`,
           {
-            [`${carbonPrefix}--text-area--light`]: theme === 'light',
+            [`${carbonPrefix}--text-area--light`]: isLight,
             [`${carbonPrefix}--text-area--invalid`]: isInvalid,
           },
         ]"

package/src/components/cv-text-input/cv-text-input.vue

@@ -17,7 +17,7 @@
         :class="[
           `${carbonPrefix}--text-input`,
           {
-            [`${carbonPrefix}--text-input--light`]: theme === 'light',
+            [`${carbonPrefix}--text-input--light`]: isLight,
             [`${carbonPrefix}--text-input--invalid`]: isInvalid,
           },
         ]"
@@ -78,7 +78,6 @@ export default {
     passwordHideLabel: { type: String, default: 'Hide password' },
     passwordShowLabel: { type: String, default: 'Show password' },
     passwordVisible: Boolean,
-    theme: String,
     type: String,
     value: String,
   },

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

@@ -1,7 +1,7 @@
 <template>
   <component
     :is="tagType"
-    :class="[`cv-tile ${carbonPrefix}--tile`, { [`${carbonPrefix}--tile--light`]: theme === 'light' }]"
+    :class="[`cv-tile ${carbonPrefix}--tile`, { [`${carbonPrefix}--tile--light`]: isLight }]"
     :checked="selected"
     :expanded="expanded"
     v-bind="$attrs"

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

@@ -1,7 +1,7 @@
 <template>
   <div :class="`cv-time-picker ${carbonPrefix}--form-item`">
     <div
-      :class="[`${carbonPrefix}--time-picker`, { [`${carbonPrefix}--time-picker--light`]: theme === 'light' }]"
+      :class="[`${carbonPrefix}--time-picker`, { [`${carbonPrefix}--time-picker--light`]: isLight }]"
       :data-invalid="isInvalid"
     >
       <div :class="`${carbonPrefix}--time-picker__input`">
@@ -12,7 +12,7 @@
           type="text"
           :class="[
             `${carbonPrefix}--time-picker__input-field ${carbonPrefix}--text-input`,
-            { [`${carbonPrefix}--text-input--light`]: theme === 'light' },
+            { [`${carbonPrefix}--text-input--light`]: isLight },
           ]"
           :pattern="pattern"
           v-bind="$attrs"

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-ui-shell/cv-header-panel.vue

@@ -62,7 +62,7 @@ export default {
       this.$parent.$emit('cv:panel-focusout', this, ev);
     },
     onMouseDown(ev) {
-      if (this.$el === ev.target) {
+      if (this.$el == ev.target || this.$el.contains(ev.target)) {
         // ignore mousedown on panel can cause focus event
         ev.preventDefault();
       }

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>

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

@@ -80,7 +80,7 @@ export default {
       this.$parent.$emit('cv:panel-focusout', this, ev);
     },
     onMouseDown(ev) {
-      if (this.$el === ev.target) {
+      if (this.$el == ev.target || this.$el.contains(ev.target)) {
         // ignore mousedown on panel can cause focus event
         ev.preventDefault();
       }

package/src/directives/clickout.js

@@ -1,17 +1,29 @@
 // This directive determines calls the associated method if a click happens outside of el
 
+const handlerMap = new WeakMap();
+
 export default {
   bind(el, binding, vnode) {
-    el.clickOutHandler = function(event) {
-      // neither element or child of
-      if (!(el == event.target || el.contains(event.target))) {
-        // call method
-        vnode.context[binding.expression](event);
-      }
-    };
-    document.body.addEventListener('click', el.clickOutHandler);
+    if (!el.clickOutsideBlur) {
+      el.clickOutsideBlur = function(blurEv) {
+        // neither element or child of
+        if (!handlerMap.has(el)) {
+          handlerMap.set(el, clickoutEv => {
+            // neither element or child of
+            if (!(el == clickoutEv.target || el.contains(clickoutEv.target))) {
+              // call method
+              vnode.context[binding.expression](clickoutEv);
+            }
+          });
+          document.body.addEventListener('click', handlerMap.get(el));
+        }
+      };
+
+      el.addEventListener('focusout', el.clickOutsideBlur);
+    }
   },
   unbind(el) {
-    document.body.removeEventListener('click', el.clickOutHandler);
+    handlerMap.delete(el);
+    el.removeEventListener('focusout', el.clickOutsideBlur);
   },
 };

package/src/mixins/theme-mixin.js

@@ -2,10 +2,22 @@ const options = ['light'];
 
 export default {
   props: {
+    light: Boolean,
     theme: {
       type: String,
-      default: '',
-      validator: value => value.length === 0 || options.includes(value),
+      default: undefined,
+      validator: value => {
+        if (value !== undefined && process.env.NODE_ENV === 'development') {
+          console.warn(`theme='light' deprecated in favour of boolean light property.`);
+        }
+
+        return value.length === 0 || options.includes(value);
+      },
+    },
+  },
+  computed: {
+    isLight() {
+      return this.light || this.theme === 'light';
     },
   },
 };