@carbon/vue 2.34.1 → 2.35.0

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/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';
     },
   },
 };