@carbon/vue 2.34.0-canary.0 → 2.35.0

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"
@@ -64,12 +64,9 @@
 </template>
 
 <script>
-import uidMixin from '../../mixins/uid-mixin';
-import themeMixin from '../../mixins/theme-mixin';
+import { uidMixin, themeMixin, carbonPrefixMixin, methodsMixin } from '../../mixins';
 import CvSelect from '../cv-select/cv-select';
 import CvSelectOption from '../cv-select/cv-select-option';
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
-import methodsMixin from '../../mixins/methods-mixin';
 
 export default {
   name: 'CvTimePicker',

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

@@ -13,8 +13,8 @@
     <component :is="icon" :class="`${carbonPrefix}--toast-notification__icon`" />
     <div :class="`${carbonPrefix}--toast-notification__details`">
       <h3 :class="`${carbonPrefix}--toast-notification__title`">{{ title }}</h3>
-      <p :class="`${carbonPrefix}--toast-notification__subtitle`">{{ subTitle }}</p>
-      <p :class="`${carbonPrefix}--toast-notification__caption`">{{ caption }}</p>
+      <p :class="`${carbonPrefix}--toast-notification__subtitle`" v-html="subTitle"></p>
+      <p :class="`${carbonPrefix}--toast-notification__caption`" v-html="caption"></p>
     </div>
     <button
       :aria-label="closeAriaLabel"
@@ -29,13 +29,12 @@
 </template>
 
 <script>
-import notificationMixin from '../../mixins/notification-mixin';
+import { notificationMixin, carbonPrefixMixin } from '../../mixins';
 import ErrorFilled20 from '@carbon/icons-vue/es/error--filled/20';
 import CheckmarkFilled20 from '@carbon/icons-vue/es/checkmark--filled/20';
 import WarningFilled20 from '@carbon/icons-vue/es/warning--filled/20';
 import Close20 from '@carbon/icons-vue/es/close/20';
 import InformationFilled20 from '@carbon/icons-vue/es/information--filled/20';
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
 
 export default {
   name: 'CvToastNotification',

package/src/components/cv-toggle/cv-toggle-skeleton.vue

@@ -14,8 +14,7 @@
 </template>
 
 <script>
-import uidMixin from '../../mixins/uid-mixin';
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import { uidMixin, carbonPrefixMixin } from '../../mixins';
 export default {
   name: 'CvToggleSkeleton',
   mixins: [uidMixin, carbonPrefixMixin],

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

@@ -29,10 +29,7 @@
 </template>
 
 <script>
-import uidMixin from '../../mixins/uid-mixin';
-import checkMixin from '../../mixins/check-mixin';
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
-import methodsMixin from '../../mixins/methods-mixin';
+import { uidMixin, checkMixin, carbonPrefixMixin, methodsMixin } from '../../mixins';
 
 export default {
   name: 'CvToggle',

package/src/components/cv-toolbar/cv-toolbar-divider.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import { carbonPrefixMixin } from '../../mixins';
 export default {
   name: 'CvToolbarDivider',
   mixins: [carbonPrefixMixin],

package/src/components/cv-toolbar/cv-toolbar-option.vue

@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import { carbonPrefixMixin } from '../../mixins';
 export default {
   name: 'CvToolbarOption',
   mixins: [carbonPrefixMixin],

package/src/components/cv-toolbar/cv-toolbar-search.vue

@@ -14,7 +14,7 @@
 
 <script>
 import CvSearch from '../cv-search/cv-search';
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import { carbonPrefixMixin } from '../../mixins';
 
 export default {
   name: 'CvToolbarSearch',

package/src/components/cv-toolbar/cv-toolbar-title.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import { carbonPrefixMixin } from '../../mixins';
 export default {
   name: 'CvToolbarTitle',
   mixins: [carbonPrefixMixin],

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

@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import { carbonPrefixMixin } from '../../mixins';
 export default {
   name: 'CvToolbar',
   mixins: [carbonPrefixMixin],

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

@@ -18,8 +18,7 @@
 </template>
 
 <script>
-import uidMixin from '../../mixins/uid-mixin';
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import { uidMixin, carbonPrefixMixin } from '../../mixins';
 
 export default {
   name: 'CvDefinitionTooltip',

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

@@ -58,9 +58,8 @@
 </template>
 
 <script>
-import uidMixin from '../../mixins/uid-mixin';
+import { uidMixin, carbonPrefixMixin } from '../../mixins';
 import Information16 from '@carbon/icons-vue/es/information/16';
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
 
 export default {
   name: 'CvInteractiveTooltip',

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

@@ -18,7 +18,7 @@
 
 <script>
 import Information16 from '@carbon/icons-vue/es/information/16';
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import { carbonPrefixMixin } from '../../mixins';
 
 export default {
   name: 'CvTooltip',

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

@@ -25,7 +25,7 @@
 <script>
 import Close20 from '@carbon/icons-vue/es/close/20';
 import ChevronRight20 from '@carbon/icons-vue/es/chevron--right/20';
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import { carbonPrefixMixin } from '../../mixins';
 
 export default {
   name: 'CvSideNavFooter',

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

@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import { carbonPrefixMixin } from '../../mixins';
 export default {
   name: 'CvSideNavLinkText',
   mixins: [carbonPrefixMixin],

package/src/components/cv-ui-shell/cv-content.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import { carbonPrefixMixin } from '../../mixins';
 export default {
   name: 'CvContent',
   mixins: [carbonPrefixMixin],

package/src/components/cv-ui-shell/cv-header-global-action.vue

@@ -19,8 +19,7 @@
 </template>
 
 <script>
-import uidMixin from '../../mixins/uid-mixin';
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import { uidMixin, carbonPrefixMixin } from '../../mixins';
 
 export default {
   name: 'CvHeaderGlobalAction',

package/src/components/cv-ui-shell/cv-header-menu-button.vue

@@ -25,10 +25,9 @@
 </template>
 
 <script>
-import uidMixin from '../../mixins/uid-mixin';
+import { uidMixin, carbonPrefixMixin } from '../../mixins';
 import Close20 from '@carbon/icons-vue/es/close/20';
 import Menu20 from '@carbon/icons-vue/es/menu/20';
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
 
 export default {
   name: 'CvHeaderMenuButton',

package/src/components/cv-ui-shell/cv-header-menu-item.vue

@@ -16,12 +16,11 @@
 </template>
 
 <script>
-import LinkMixin from '../../mixins/link-mixin';
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import { linkMixin, carbonPrefixMixin } from '../../mixins';
 
 export default {
   name: 'CvHeaderMenuItem',
-  mixins: [LinkMixin, carbonPrefixMixin],
+  mixins: [linkMixin, carbonPrefixMixin],
   inheritAttrs: false,
   props: {
     active: Boolean,

package/src/components/cv-ui-shell/cv-header-menu.vue

@@ -36,7 +36,7 @@
 
 <script>
 import ChevronDownGlyph from '@carbon/icons-vue/es/chevron--down';
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import { carbonPrefixMixin } from '../../mixins';
 
 export default {
   name: 'CvHeaderMenu',

package/src/components/cv-ui-shell/cv-header-name.vue

@@ -6,12 +6,11 @@
 </template>
 
 <script>
-import LinkMixin from '../../mixins/link-mixin';
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import { linkMixin, carbonPrefixMixin } from '../../mixins';
 
 export default {
   name: 'CvHeaderName',
-  mixins: [LinkMixin, carbonPrefixMixin],
+  mixins: [linkMixin, carbonPrefixMixin],
   props: {
     prefix: String,
   },

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

@@ -7,7 +7,7 @@
 </template>
 
 <script>
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import { carbonPrefixMixin } from '../../mixins';
 export default {
   name: 'CvHeaderNav',
   mixins: [carbonPrefixMixin],

package/src/components/cv-ui-shell/cv-header-panel.vue

@@ -15,7 +15,7 @@
 </template>
 
 <script>
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import { carbonPrefixMixin } from '../../mixins';
 export default {
   name: 'CvHeaderPanel',
   mixins: [carbonPrefixMixin],
@@ -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-header-side-nav-items.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script>
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import { carbonPrefixMixin } from '../../mixins';
 export default {
   name: 'CvHeaderSideNavItems',
   mixins: [carbonPrefixMixin],

package/src/components/cv-ui-shell/cv-header.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script>
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import { carbonPrefixMixin } from '../../mixins';
 export default {
   name: 'CvHeader',
   mixins: [carbonPrefixMixin],

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

@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import { carbonPrefixMixin } from '../../mixins';
 export default {
   name: 'CvSideNavIcon',
   mixins: [carbonPrefixMixin],

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

@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import { carbonPrefixMixin } from '../../mixins';
 export default {
   name: 'CvSideNavItems',
   mixins: [carbonPrefixMixin],

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

@@ -21,15 +21,14 @@
 </template>
 
 <script>
-import LinkMixin from '../../mixins/link-mixin';
+import { linkMixin, carbonPrefixMixin } from '../../mixins';
 import CvSideNavIcon from './cv-side-nav-icon';
 import CvSideNavLinkText from './_cv-side-nav-link-text';
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
 
 export default {
   name: 'CvSideNavLink',
   inheritAttrs: false,
-  mixins: [LinkMixin, carbonPrefixMixin],
+  mixins: [linkMixin, carbonPrefixMixin],
   components: { CvSideNavIcon, CvSideNavLinkText },
   props: {
     active: Boolean,

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

@@ -15,14 +15,13 @@
 </template>
 
 <script>
-import LinkMixin from '../../mixins/link-mixin';
+import { linkMixin, carbonPrefixMixin } from '../../mixins';
 import CvSideNavLinkText from './_cv-side-nav-link-text';
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
 
 export default {
   name: 'CvSideNavMenuItem',
   inheritAttrs: false,
-  mixins: [LinkMixin, carbonPrefixMixin],
+  mixins: [linkMixin, carbonPrefixMixin],
   components: { CvSideNavLinkText },
   props: {
     active: Boolean,

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

@@ -38,7 +38,7 @@
 <script>
 import ChevronDown20 from '@carbon/icons-vue/es/chevron--down/20';
 import CvSideNavIcon from './cv-side-nav-icon';
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import { carbonPrefixMixin } from '../../mixins';
 
 export default {
   name: 'CvSideNavMenu',

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

@@ -28,7 +28,7 @@
 
 <script>
 import CvSideNavFooter from './_cv-side-nav-footer';
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import { carbonPrefixMixin } from '../../mixins';
 
 export default {
   name: 'CvSideNav',
@@ -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/components/cv-ui-shell/cv-skip-to-content.vue

@@ -10,11 +10,10 @@
 </template>
 
 <script>
-import LinkMixin from '../../mixins/link-mixin';
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import { linkMixin, carbonPrefixMixin } from '../../mixins';
 
 export default {
   name: 'CvSkipToContent',
-  mixins: [LinkMixin, carbonPrefixMixin],
+  mixins: [linkMixin, carbonPrefixMixin],
 };
 </script>

package/src/components/cv-ui-shell/cv-switcher-item-link.vue

@@ -14,12 +14,11 @@
 </template>
 
 <script>
-import LinkMixin from '../../mixins/link-mixin';
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import { linkMixin, carbonPrefixMixin } from '../../mixins';
 
 export default {
   name: 'CvSwitcherItemLink',
-  mixins: [LinkMixin, carbonPrefixMixin],
+  mixins: [linkMixin, carbonPrefixMixin],
   props: {
     selected: Boolean,
   },

package/src/components/cv-ui-shell/cv-switcher-item.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import { carbonPrefixMixin } from '../../mixins';
 export default {
   name: 'CvSwitcherItem',
   mixins: [carbonPrefixMixin],

package/src/components/cv-ui-shell/cv-switcher.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import { carbonPrefixMixin } from '../../mixins';
 export default {
   name: 'CvSwitcher',
   mixins: [carbonPrefixMixin],

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/index.js

@@ -45,6 +45,7 @@ import { CvDatePicker } from './components/cv-date-picker';
 import { CvDropdown, CvDropdownItem, CvDropdownSkeleton } from './components/cv-dropdown';
 import { CvFileUploader, CvFileUploaderSkeleton } from './components/cv-file-uploader';
 import { CvForm, CvFormItem, CvFormGroup } from './components/cv-form';
+import { CvGrid, CvRow, CvColumn } from './components/cv-grid';
 import { CvInlineLoading } from './components/cv-inline-loading';
 import { CvInlineNotification } from './components/cv-inline-notification';
 import { CvLink } from './components/cv-link';
@@ -113,6 +114,7 @@ export { CvDatePicker };
 export { CvDropdown, CvDropdownItem, CvDropdownSkeleton };
 export { CvFileUploader, CvFileUploaderSkeleton };
 export { CvForm, CvFormItem, CvFormGroup };
+export { CvGrid, CvRow, CvColumn };
 export { CvInlineLoading };
 export { CvInlineNotification };
 export { CvLink };

package/src/mixins/index.js

@@ -0,0 +1,12 @@
+// import mixins
+import carbonPrefixMixin from './carbon-prefix-mixin';
+import checkMixin from './check-mixin';
+import linkMixin from './link-mixin';
+import methodsMixin from './methods-mixin';
+import notificationMixin from './notification-mixin';
+import radioMixin from './radio-mixin';
+import themeMixin from './theme-mixin';
+import uidMixin from './uid-mixin';
+
+// export all the mixins
+export { carbonPrefixMixin, checkMixin, linkMixin, methodsMixin, notificationMixin, radioMixin, themeMixin, uidMixin };

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