@carbon/vue 2.34.0-canary.0 → 2.35.0

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

@@ -187,12 +187,10 @@ import CvButton from '../cv-button/cv-button';
 import CvCheckbox from '../cv-checkbox/cv-checkbox';
 import CvPagination from '../cv-pagination/cv-pagination';
 import CvWrapper from '../cv-wrapper/_cv-wrapper';
-import uidMixin from '../../mixins/uid-mixin';
+import { uidMixin, carbonPrefixMixin } from '../../mixins';
 import Search16 from '@carbon/icons-vue/es/search/16';
 import Close16 from '@carbon/icons-vue/es/close/16';
 import ChevronRight16 from '@carbon/icons-vue/es/chevron--right/16';
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
-
 export default {
   name: 'CvDataTable',
   components: {
@@ -310,7 +308,7 @@ export default {
       return this.overflowMenu === true || (this.overflowMenu && this.overflowMenu.length > 0);
     },
     tableStyle() {
-      return this.autoWidth ? { width: 'initial' } : { width: '100%' };
+      return this.autoWidth ? { width: 'initial', display: 'inline-block' } : { width: '100%' };
     },
     internalPagination() {
       if (typeof this.pagination === 'object') {

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

@@ -7,12 +7,12 @@
         `${this.carbonPrefix}--date-picker ${this.carbonPrefix}--date-picker--${this.kind}`,
         {
           [`${carbonPrefix}--date-picker--simple`]: this.kind === 'short',
-          [`${carbonPrefix}--date-picker--light`]: theme === 'light',
+          [`${carbonPrefix}--date-picker--light`]: isLight,
           'cv-date-pciker': !formItem,
         },
       ]"
       ref="date-picker"
-      :id="formItem ? '' : uid"
+      :id="formItem ? undefined : uid"
     >
       <div
         :class="{
@@ -72,12 +72,14 @@
 <script>
 import Flatpickr from 'flatpickr';
 import l10n from 'flatpickr/dist/l10n/index';
-import RangePlugin from 'flatpickr/dist/plugins/rangePlugin';
-import uidMixin from '../../mixins/uid-mixin';
-import themeMixin from '../../mixins/theme-mixin';
+// import carbonFlatpickrAppendToPlugin from './plugins/appendToPlugin';
+import carbonFlatpickrFixEventsPlugin from './plugins/fixEventsPlugin';
+import carbonFlatpickrRangePlugin from './plugins/rangePlugin';
+import carbonFlatpickrMonthSelectPlugin from './plugins/monthSelectPlugin';
+
+import { uidMixin, themeMixin, carbonPrefixMixin } from '../../mixins';
 import Calendar16 from '@carbon/icons-vue/es/calendar/16';
 import CvWrapper from '../cv-wrapper/_cv-wrapper';
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
 
 // Weekdays shorthand for english locale
 l10n.en.weekdays.shorthand.forEach((day, index) => {
@@ -133,7 +135,7 @@ export default {
       },
     },
     invalidMessage: { type: String, default: undefined },
-    value: [String, Object, Array],
+    value: [String, Object, Array, Date],
   },
   model: {
     prop: 'value',
@@ -230,13 +232,33 @@ export default {
       }
       // _options.onValueUpdate = this.onChange;
 
-      if (this.isRange) {
-        // let curDate = new Date();
-        // let anotherDate = new Date();
-        // anotherDate = anotherDate.setDate(anotherDate.getDate() + 6);
-        // _options.defaultDate = [curDate, anotherDate];
-        _options.plugins = [new RangePlugin({ input: this.$refs.todate, position: 'left' })];
-      }
+      _options.plugins = [
+        this.isRange
+          ? new carbonFlatpickrRangePlugin({
+              input: this.$refs.todate,
+            })
+          : () => {},
+        carbonFlatpickrMonthSelectPlugin({
+          selectorFlatpickrMonthYearContainer: '.flatpickr-current-month',
+          selectorFlatpickrYearContainer: '.numInputWrapper',
+          selectorFlatpickrCurrentMonth: '.cur-month',
+          classFlatpickrCurrentMonth: 'cur-month',
+        }),
+        carbonFlatpickrFixEventsPlugin({
+          inputFrom: this.$refs.date,
+          inputTo: this.$refs.todate,
+        }),
+      ];
+      _options.nextArrow = `
+      <svg width="16px" height="16px" viewBox="0 0 16 16">
+        <polygon points="11,8 6,13 5.3,12.3 9.6,8 5.3,3.7 6,3 "/>
+        <rect width="16" height="16" style="fill:none" />
+      </svg>`;
+      _options.prevArrow = `
+      <svg width="16px" height="16px" viewBox="0 0 16 16">
+        <polygon points="5,8 10,3 10.7,3.7 6.4,8 10.7,12.3 10,13 "/>
+        <rect width="16" height="16" style="fill:none" />
+      </svg>`;
 
       return _options;
     },

package/src/components/cv-date-picker/plugins/appendToPlugin.js

@@ -0,0 +1,52 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/*
+ * COPIED FROM carbon-components-react
+ */
+
+/**
+ * @param {object} config Plugin configuration.
+ * @returns {Plugin} A Flatpickr plugin to put adjust the position of calendar dropdown.
+ */
+export default config => fp => {
+  /**
+   * Adjusts the floating meun position after Flatpicker sets it.
+   */
+  const handlePreCalendarPosition = () => {
+    Promise.resolve().then(() => {
+      const { calendarContainer, config: fpConfig, _positionElement: positionElement } = fp;
+      const { appendTo } = fpConfig;
+      const { left: containerLeft, top: containerTop } = appendTo.getBoundingClientRect();
+      const { left: refLeft, bottom: refBottom } = positionElement.getBoundingClientRect();
+      if (
+        (appendTo !== appendTo.ownerDocument.body || containerLeft !== 0 || containerTop !== 0) &&
+        appendTo.ownerDocument.defaultView.getComputedStyle(appendTo).getPropertyValue('position') === 'static'
+      ) {
+        throw new Error('Floating menu container must not have `position:static`.');
+      }
+      // `2` for negative mergin on calendar dropdown
+      calendarContainer.style.top = `${refBottom - containerTop + 2}px`;
+      calendarContainer.style.left = `${refLeft - containerLeft}px`;
+    });
+  };
+
+  /**
+   * Registers this Flatpickr plugin.
+   */
+  const register = () => {
+    fp.loadedPlugins.push('carbonFlatpickrAppendToPlugin');
+  };
+
+  return {
+    appendTo: config.appendTo,
+    onReady: register,
+    onPreCalendarPosition: handlePreCalendarPosition,
+  };
+};

package/src/components/cv-date-picker/plugins/fixEventsPlugin.js

@@ -0,0 +1,75 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/*
+ * COPIED FROM carbon-components-react - amended to remove keyboard code dependency
+ */
+
+/**
+ * @param {object} config Plugin configuration.
+ * @returns {Plugin} A Flatpickr plugin to fix Flatpickr's behavior of certain events.
+ */
+export default config => fp => {
+  /**
+   * Handles `keydown` event.
+   */
+  const handleKeydown = event => {
+    const { inputFrom, inputTo } = config;
+    const { target } = event;
+    if (inputFrom === target || inputTo === target) {
+      if (event.key === 'Enter') {
+        // Makes sure the hitting enter key picks up pending values of both `<input>`
+        // Workaround for: https://github.com/flatpickr/flatpickr/issues/1942
+        fp.setDate([inputFrom.value, inputTo && inputTo.value], true, fp.config.dateFormat);
+        event.stopPropagation();
+      } else if (event.key === 'Left' || event.key === 'Right') {
+        // Prevents Flatpickr code from canceling the event if left/right arrow keys are hit on `<input>`,
+        // so user can move the keyboard cursor for editing dates
+        // Workaround for: https://github.com/flatpickr/flatpickr/issues/1943
+        event.stopPropagation();
+      } else if (event.key === 'Down') {
+        event.preventDefault();
+        fp.open();
+      }
+    }
+  };
+
+  /**
+   * Releases event listeners used in this Flatpickr plugin.
+   */
+  const release = () => {
+    const { inputFrom, inputTo } = config;
+    if (inputTo) {
+      inputTo.removeEventListener('keydown', handleKeydown, true);
+    }
+    inputFrom.removeEventListener('keydown', handleKeydown, true);
+  };
+
+  /**
+   * Sets up event listeners used for this Flatpickr plugin.
+   */
+  const init = () => {
+    release();
+    const { inputFrom, inputTo } = config;
+    inputFrom.addEventListener('keydown', handleKeydown, true);
+    if (inputTo) {
+      inputTo.addEventListener('keydown', handleKeydown, true);
+    }
+  };
+
+  /**
+   * Registers this Flatpickr plugin.
+   */
+  const register = () => {
+    fp.loadedPlugins.push('carbonFlatpickrFixEventsPlugin');
+  };
+
+  return {
+    onReady: [register, init],
+    onDestroy: [release],
+  };
+};

package/src/components/cv-date-picker/plugins/monthSelectPlugin.js

@@ -0,0 +1,66 @@
+/*
+ * COPIED FROM carbon-components-react
+ */
+
+/**
+ * @param {number} monthNumber The month number.
+ * @param {boolean} shorthand `true` to use shorthand month.
+ * @param {Locale} locale The Flatpickr locale data.
+ * @returns {string} The month string.
+ */
+const monthToStr = (monthNumber, shorthand, locale) => locale.months[shorthand ? 'shorthand' : 'longhand'][monthNumber];
+
+/**
+ * @param {object} config Plugin configuration.
+ * @param {boolean} [config.shorthand] `true` to use shorthand month.
+ * @param {string} config.selectorFlatpickrMonthYearContainer The CSS selector for the container of month/year selection UI.
+ * @param {string} config.selectorFlatpickrYearContainer The CSS selector for the container of year selection UI.
+ * @param {string} config.selectorFlatpickrCurrentMonth The CSS selector for the text-based month selection UI.
+ * @param {string} config.classFlatpickrCurrentMonth The CSS class for the text-based month selection UI.
+ * @returns {Plugin} A Flatpickr plugin to use text instead of `<select>` for month picker.
+ */
+export default config => fp => {
+  const setupElements = () => {
+    if (!fp.monthElements) {
+      return;
+    }
+    fp.monthElements.forEach(elem => {
+      if (!elem.parentNode) return;
+      elem.parentNode.removeChild(elem);
+    });
+    fp.monthElements.splice(
+      0,
+      fp.monthElements.length,
+      ...fp.monthElements.map(() => {
+        // eslint-disable-next-line no-underscore-dangle
+        const monthElement = fp._createElement('span', config.classFlatpickrCurrentMonth);
+        monthElement.textContent = monthToStr(fp.currentMonth, config.shorthand === true, fp.l10n);
+        fp.yearElements[0]
+          .closest(config.selectorFlatpickrMonthYearContainer)
+          .insertBefore(monthElement, fp.yearElements[0].closest(config.selectorFlatpickrYearContainer));
+        return monthElement;
+      })
+    );
+  };
+
+  const updateCurrentMonth = () => {
+    const monthStr = monthToStr(fp.currentMonth, config.shorthand === true, fp.l10n);
+    fp.yearElements.forEach(elem => {
+      const currentMonthContainer = elem.closest(config.selectorFlatpickrMonthYearContainer);
+      Array.prototype.forEach.call(currentMonthContainer.querySelectorAll('.cur-month'), monthElement => {
+        monthElement.textContent = monthStr;
+      });
+    });
+  };
+
+  const register = () => {
+    fp.loadedPlugins.push('carbonFlatpickrMonthSelectPlugin');
+  };
+
+  return {
+    onMonthChange: updateCurrentMonth,
+    onValueUpdate: updateCurrentMonth,
+    onOpen: updateCurrentMonth,
+    onReady: [setupElements, updateCurrentMonth, register],
+  };
+};

package/src/components/cv-date-picker/plugins/rangePlugin.js

@@ -0,0 +1,45 @@
+import rangePlugin from 'flatpickr/dist/plugins/rangePlugin';
+
+/*
+ * COPIED FROM carbon-components-react
+ */
+
+/**
+ * @param {object} config Plugin configuration.
+ * @returns {Plugin} An extension of Flatpickr `rangePlugin` that does the following:
+ *   * Better ensures the calendar dropdown is always aligned to the `<input>` for the starting date.
+ *     Workaround for: https://github.com/flatpickr/flatpickr/issues/1944
+ *   * A logic to ensure `fp.setDate()` call won't end up with "startDate to endDate" set to the first `<input>`
+ */
+export default config => {
+  const factory = rangePlugin(Object.assign({ position: 'left' }, config));
+
+  return fp => {
+    const origSetDate = fp.setDate;
+
+    const init = () => {
+      fp.setDate = function setDate(dates, triggerChange, format) {
+        origSetDate.call(this, dates, triggerChange, format);
+        // If `triggerChange` is `true`, `onValueUpdate` Flatpickr event is fired
+        // where Flatpickr's range plugin takes care of fixing the first `<input>`
+        if (!triggerChange) {
+          const { _input: inputFrom } = fp;
+          const { input: inputTo } = config;
+          [inputFrom, inputTo].forEach((input, i) => {
+            if (input) {
+              input.value = !dates[i] ? '' : fp.formatDate(new Date(dates[i]), fp.config.dateFormat);
+            }
+          });
+        }
+      };
+    };
+
+    const origRangePlugin = factory(fp);
+    const { onReady: origOnReady } = origRangePlugin;
+
+    return Object.assign(origRangePlugin, {
+      onReady: [init, origOnReady],
+      onPreCalendarPosition() {},
+    });
+  };
+};

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

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

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

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

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

@@ -20,7 +20,12 @@
     <div
       :class="[
         `${carbonPrefix}--dropdown__wrapper`,
-        { [`${carbonPrefix}--dropdown__wrapper--inline`]: inline, 'cv-dropdown': !formItem },
+        `${carbonPrefix}--list-box__wrapper`,
+        {
+          [`${carbonPrefix}--dropdown__wrapper--inline`]: inline,
+          [`${carbonPrefix}--list-box__wrapper--inline`]: inline,
+          'cv-dropdown': !formItem,
+        },
       ]"
       :style="wrapperStyleOverride"
     >
@@ -38,9 +43,10 @@
         :class="[
           `${carbonPrefix}--dropdown ${carbonPrefix}--list-box`,
           {
-            [`${carbonPrefix}--dropdown--light`]: theme === 'light',
+            [`${carbonPrefix}--dropdown--light`]: isLight,
             [`${carbonPrefix}--dropdown--up`]: up,
             [`${carbonPrefix}--dropdown--open`]: open,
+            [`${carbonPrefix}--list-box--expanded`]: open,
             [`${carbonPrefix}--dropdown--invalid`]: isInvalid,
             [`${carbonPrefix}--dropdown--disabled`]: disabled,
             [`${carbonPrefix}--dropdown--inline`]: inline,
@@ -77,7 +83,6 @@
           />
           <div
             :class="[`${carbonPrefix}--list-box__menu-icon`, { [`${carbonPrefix}--list-box__menu-icon--open`]: open }]"
-            role="button"
           >
             <chevron-down-16 :aria-label="open ? 'Close menu' : 'Open menu'" />
           </div>
@@ -114,13 +119,10 @@
 </template>
 
 <script>
-import themeMixin from '../../mixins/theme-mixin';
-import uidMixin from '../../mixins/uid-mixin';
-import methodsMixin from '../../mixins/methods-mixin';
+import { themeMixin, uidMixin, methodsMixin, carbonPrefixMixin } from '../../mixins';
 import CvDropdownItem from './cv-dropdown-item';
 import WarningFilled16 from '@carbon/icons-vue/es/warning--filled/16';
 import ChevronDown16 from '@carbon/icons-vue/es/chevron--down/16';
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
 import clickout from '../../directives/clickout';
 
 export default {

package/src/components/cv-feedback-button/_cv-feedback-button.vue

@@ -20,7 +20,7 @@
 </template>
 
 <script>
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import { carbonPrefixMixin } from '../../mixins';
 const feedbackPhases = {
   DEFAULT: 0,
   FADE_IN: 1,

package/src/components/cv-file-uploader/cv-file-uploader-skeleton.vue

@@ -9,7 +9,7 @@
 <script>
 import CvSkeletonText from '../cv-skeleton-text/cv-skeleton-text';
 import CvButtonSkeleton from '../cv-button/cv-button-skeleton';
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import { carbonPrefixMixin } from '../../mixins';
 
 export default {
   name: 'CvFileUploaderSkeleton',

package/src/components/cv-file-uploader/cv-file-uploader.vue

@@ -110,15 +110,13 @@
 </template>
 
 <script>
-import uidMixin from '../../mixins/uid-mixin';
+import { uidMixin, carbonPrefixMixin, methodsMixin } from '../../mixins';
 import CvFormItem from '../cv-form/cv-form-item';
 import CheckmarkFilled16 from '@carbon/icons-vue/es/checkmark--filled/16';
 import WarningFilled16 from '@carbon/icons-vue/es/warning--filled/16';
 import Close16 from '@carbon/icons-vue/es/close/16';
 import CvWrapper from '../cv-wrapper/_cv-wrapper';
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
 import { STATES, KINDS } from './consts.js';
-import methodsMixin from '../../mixins/methods-mixin';
 
 export default {
   name: 'CvFileUploader',

package/src/components/cv-form/cv-form-group.vue

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

package/src/components/cv-form/cv-form-item.vue

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

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

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

package/src/components/cv-grid/cv-column.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="cv-column" :class="classes">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+
+const breakpointProp = {
+  type: [Boolean, Number, Object],
+  validator: value => {
+    if (typeof value === 'number' || typeof value === 'boolean') {
+      return true;
+    } else if (typeof value === 'object') {
+      return 'span' in value && typeof value.span === 'number' && 'offset' in value && typeof value.offset === 'number';
+    }
+
+    return false;
+  },
+};
+
+export default {
+  name: 'CvColumn',
+  mixins: [carbonPrefixMixin],
+  props: {
+    sm: breakpointProp,
+    md: breakpointProp,
+    lg: breakpointProp,
+    xlg: breakpointProp,
+    max: breakpointProp,
+  },
+  computed: {
+    classes() {
+      const classnames = [];
+
+      const breakpoints = [
+        { name: 'sm', value: this.sm },
+        { name: 'md', value: this.md },
+        { name: 'lg', value: this.lg },
+        { name: 'xlg', value: this.xlg },
+        { name: 'max', value: this.max },
+      ].filter(breakpoint => breakpoint.value !== false);
+
+      for (let i = 0; i < breakpoints.length; i += 1) {
+        const { name, value } = breakpoints[i];
+
+        if (typeof value === 'boolean') {
+          // auto-column
+          classnames.push(`${this.carbonPrefix}--col-${name}`);
+        } else if (typeof value === 'number') {
+          classnames.push(`${this.carbonPrefix}--col-${name}-${value}`);
+        } else {
+          const { span, offset } = value;
+
+          if (typeof span === 'boolean') {
+            classnames.push(`${this.carbonPrefix}--col-${name}`);
+          } else if (typeof span === 'number') {
+            classnames.push(`${this.carbonPrefix}--col-${name}-${span}`);
+          }
+
+          if (typeof offset === 'number') {
+            classnames.push(`${this.carbonPrefix}--offset-${name}-${offset}`);
+          }
+        }
+      }
+
+      if (classnames.length === 0) {
+        // no breakpoints were defined. use auto-column
+        classnames.push(`${this.carbonPrefix}--col`);
+      }
+
+      return classnames;
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,32 @@
+<template>
+  <div
+    class="cv-grid"
+    :class="[
+      `${carbonPrefix}--grid`,
+      {
+        [`${carbonPrefix}--grid--full-width`]: fullWidth,
+        [`${carbonPrefix}--grid--condensed`]: kind === 'condensed',
+        [`${carbonPrefix}--grid--narrow`]: kind === 'narrow',
+      },
+    ]"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+
+export default {
+  name: 'CvGrid',
+  mixins: [carbonPrefixMixin],
+  props: {
+    fullWidth: Boolean,
+    kind: {
+      type: String,
+      default: 'wide',
+      validator: val => ['wide', 'narrow', 'condensed'].includes(val),
+    },
+  },
+};
+</script>

package/src/components/cv-grid/cv-row.vue

@@ -0,0 +1,30 @@
+<template>
+  <div
+    class="cv-row"
+    :class="[
+      `${carbonPrefix}--row`,
+      {
+        [`${carbonPrefix}--row--condensed`]: kind === 'condensed',
+        [`${carbonPrefix}--row--narrow`]: kind === 'narrow',
+      },
+    ]"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+
+export default {
+  name: 'CvRow',
+  mixins: [carbonPrefixMixin],
+  props: {
+    kind: {
+      type: String,
+      default: 'wide',
+      validator: val => ['wide', 'narrow', 'condensed'].includes(val),
+    },
+  },
+};
+</script>

package/src/components/cv-grid/index.js

@@ -0,0 +1,5 @@
+import CvGrid from './cv-grid';
+import CvRow from './cv-row';
+import CvColumn from './cv-column';
+
+export { CvGrid, CvRow, CvColumn };

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

@@ -29,7 +29,7 @@
 import { STATES } from './consts';
 import ErrorFilled16 from '@carbon/icons-vue/lib/error--filled/16';
 import CheckmarkFilled16 from '@carbon/icons-vue/lib/checkmark--filled/16';
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import { carbonPrefixMixin } from '../../mixins';
 
 export default {
   name: 'CvInlineLoading',

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

@@ -17,7 +17,7 @@
       <component :is="icon" :class="`${carbonPrefix}--inline-notification__icon`" />
       <div :class="`${carbonPrefix}--inline-notification__text-wrapper`">
         <p :class="`${carbonPrefix}--inline-notification__title`">{{ title }}</p>
-        <p :class="`${carbonPrefix}--inline-notification__subtitle`">{{ subTitle }}</p>
+        <p :class="`${carbonPrefix}--inline-notification__subtitle`" v-html="subTitle"></p>
       </div>
     </div>
     <button
@@ -46,13 +46,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: 'CvInlineNotification',