@carbon/vue 2.33.0 → 2.34.1

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"
     >
@@ -41,6 +46,7 @@
             [`${carbonPrefix}--dropdown--light`]: theme === 'light',
             [`${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 {
@@ -171,7 +173,7 @@ export default {
     this.updateChildren(this.internalValue);
     this.checkSlots();
   },
-  beforeUpdate() {
+  updated() {
     document.body.removeEventListener('click', this.checkSlots);
     this.checkSlots();
   },
@@ -252,7 +254,7 @@ export default {
       }
     },
     checkSlots() {
-      // NOTE: this.$slots is not reactive so needs to be managed on beforeUpdate
+      // NOTE: this.$slots is not reactive so needs to be managed on updated
       this.isInvalid = !!(this.$slots['invalid-message'] || (this.invalidMessage && this.invalidMessage.length));
       this.isHelper = !!(this.$slots['helper-text'] || (this.helperText && this.helperText.length));
     },

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

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

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

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

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

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

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

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

@@ -21,7 +21,7 @@
 
 <script>
 import CvWrapper from '../cv-wrapper/_cv-wrapper';
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import { carbonPrefixMixin } from '../../mixins';
 
 export default {
   name: 'CvLoading',

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

@@ -81,9 +81,8 @@
 
 <script>
 import CvButton from '../cv-button/cv-button';
-import uidMixin from '../../mixins/uid-mixin';
+import { uidMixin, carbonPrefixMixin } from '../../mixins';
 import Close16 from '@carbon/icons-vue/es/close/16';
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
 
 export default {
   name: 'CvModal',
@@ -121,7 +120,7 @@ export default {
     }
     this.checkSlots();
   },
-  beforeUpdate() {
+  updated() {
     this.checkSlots();
   },
   watch: {
@@ -163,7 +162,7 @@ export default {
   },
   methods: {
     checkSlots() {
-      // NOTE: this.$slots is not reactive so needs to be managed on beforeUpdate
+      // NOTE: this.$slots is not reactive so needs to be managed on updated
       this.hasFooter = !!(this.$slots['primary-button'] || this.$slots['secondary-button']);
       this.hasHeaderLabel = !!this.$slots.label;
       this.hasSecondary = !!this.$slots['secondary-button'];

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

@@ -151,15 +151,12 @@
 </template>
 
 <script>
-import themeMixin from '../../mixins/theme-mixin';
+import { themeMixin, uidMixin, carbonPrefixMixin, methodsMixin } from '../../mixins';
 import WarningFilled16 from '@carbon/icons-vue/es/warning--filled/16';
 import ChevronDown16 from '@carbon/icons-vue/es/chevron--down/16';
 import Close16 from '@carbon/icons-vue/es/close/16';
-import uidMixin from '../../mixins/uid-mixin';
 import CvCheckbox from '../cv-checkbox/cv-checkbox';
 import CvTag from '../cv-tag/cv-tag';
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
-import methodsMixin from '../../mixins/methods-mixin';
 
 const TOP_AFTER_REOPEN = 0;
 const TOP = 1;
@@ -252,7 +249,7 @@ export default {
     this.highlighted = this.value ? this.value : this.highlight; // override highlight with value if provided
     this.checkSlots();
   },
-  beforeUpdate() {
+  updated() {
     this.checkSlots();
   },
   computed: {
@@ -292,7 +289,7 @@ export default {
   },
   methods: {
     checkSlots() {
-      // NOTE: this.$slots is not reactive so needs to be managed on beforeUpdate
+      // NOTE: this.$slots is not reactive so needs to be managed on updated
       this.isInvalid = !!(this.$slots['invalid-message'] || (this.invalidMessage && this.invalidMessage.length));
       this.isHelper = !!(this.$slots['helper-text'] || (this.helperText && this.helperText.length));
     },

package/src/components/cv-number-input/cv-number-input-skeleton.vue

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

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

@@ -83,14 +83,11 @@
 </template>
 
 <script>
-import uidMixin from '../../mixins/uid-mixin';
-import themeMixin from '../../mixins/theme-mixin';
+import { uidMixin, themeMixin, carbonPrefixMixin, methodsMixin } from '../../mixins';
 import CaretDownGlyph from '@carbon/icons-vue/es/caret--down/index';
 import CaretUpGlyph from '@carbon/icons-vue/es/caret--up/index';
 import WarningFilled16 from '@carbon/icons-vue/es/warning--filled/16';
 import CvWrapper from '../cv-wrapper/_cv-wrapper';
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
-import methodsMixin from '../../mixins/methods-mixin';
 
 export default {
   name: 'CvNumberInput',
@@ -132,7 +129,7 @@ export default {
     this.internalValue = this.valueAsString(this.value);
     this.checkSlots();
   },
-  beforeUpdate() {
+  updated() {
     this.checkSlots();
   },
   watch: {
@@ -162,7 +159,7 @@ export default {
       this.emitValue();
     },
     checkSlots() {
-      // NOTE: this.$slots is not reactive so needs to be managed on beforeUpdate
+      // NOTE: this.$slots is not reactive so needs to be managed on updated
       this.isInvalid = !!(this.$slots['invalid-message'] || (this.invalidMessage && this.invalidMessage.length));
       this.isHelper = !!(this.$slots['helper-text'] || (this.helperText && this.helperText.length));
     },

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

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

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

@@ -67,9 +67,7 @@
 
 <script>
 import OverflowMenuVertical16 from '@carbon/icons-vue/es/overflow-menu--vertical/16';
-import uidMixin from '../../mixins/uid-mixin';
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
-import methodsMixin from '../../mixins/methods-mixin';
+import { uidMixin, carbonPrefixMixin, methodsMixin } from '../../mixins';
 
 export default {
   name: 'CvOverflowMenu',

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

@@ -83,7 +83,7 @@ import CvSelect from '../cv-select/cv-select';
 import CvSelectOption from '../cv-select/cv-select-option';
 import CaretLeft16 from '@carbon/icons-vue/es/caret--left/16';
 import CaretRight16 from '@carbon/icons-vue/es/caret--right/16';
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import { carbonPrefixMixin } from '../../mixins';
 
 const newPageValue = (page, lastPage) => {
   let result = 1;

package/src/components/cv-progress/cv-progress-step.vue

@@ -43,7 +43,7 @@
 <script>
 import CheckmarkOutline16 from '@carbon/icons-vue/es/checkmark--outline/16';
 import Warning16 from '@carbon/icons-vue/es/warning/16';
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import { carbonPrefixMixin } from '../../mixins';
 
 const states = ['incomplete', 'current', 'complete'];
 

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

@@ -18,7 +18,7 @@
 
 <script>
 import CvProgressStep from './cv-progress-step';
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import { carbonPrefixMixin } from '../../mixins';
 
 export default {
   name: 'CvProgress',