@carbon/vue 2.34.0-canary.0 → 2.35.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/vue",
   "description": "A collection of components for the Carbon Design System built using Vue.js",
-  "version": "2.34.0-canary.0",
+  "version": "2.35.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -63,15 +63,15 @@
   },
   "sideEffects": true,
   "dependencies": {
-    "@carbon/icons-vue": "10.10.2",
-    "carbon-components": "10.16.0",
+    "@carbon/icons-vue": "10.20.0",
+    "carbon-components": "10.23.1",
     "flatpickr": "4.6.3",
-    "vue": "^2.6.11"
+    "vue": "^2.6.12"
   },
   "devDependencies": {
     "@vue/cli-service": "^3.11.0",
     "eslint-plugin-prettier": "^3.1.1",
-    "vue-template-compiler": "^2.6.10"
+    "vue-template-compiler": "^2.6.12"
   },
-  "gitHead": "8a583b0b7a5f29cace5b8f200b4848458b8d74a9"
+  "gitHead": "08825d15ce4b9a73e30bc8809b0e2185e80fd2b8"
 }

package/src/components/cv-accordion/_cv-accordion-item-skeleton.vue

@@ -13,7 +13,7 @@
 <script>
 import CvSkeletonText from '../cv-skeleton-text/cv-skeleton-text';
 import ChevronRight16 from '@carbon/icons-vue/es/chevron--right/16';
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import { carbonPrefixMixin } from '../../mixins';
 
 export default {
   name: 'CvAccordionItemSkeleton',

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

@@ -11,7 +11,9 @@
     class="cv-accordion-item"
     :class="[
       `${carbonPrefix}--accordion__item`,
+
       {
+        [`${carbonPrefix}--accordion__item--disabled`]: disabled,
         [`${carbonPrefix}--accordion__item--active`]: dataOpen,
         [`${carbonPrefix}--accordion__item--${this.animation}`]: animation,
       },
@@ -19,6 +21,7 @@
     @animationend="onAnimationEnd"
   >
     <button
+      :disabled="disabled"
       ref="button"
       type="button"
       :class="`${carbonPrefix}--accordion__heading`"
@@ -39,15 +42,13 @@
 
 <script>
 import ChevronRight16 from '@carbon/icons-vue/es/chevron--right/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: 'CvAccordionItem',
   mixins: [uidMixin, carbonPrefixMixin, methodsMixin({ button: ['blur', 'focus'] })],
   components: { ChevronRight16 },
   props: {
+    disabled: Boolean,
     open: { type: Boolean, default: false },
   },
   watch: {

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

@@ -1,5 +1,13 @@
 <template>
-  <ul :class="`${carbonPrefix}--accordion ${carbonPrefix}--skeleton`">
+  <ul
+    :class="[
+      `${carbonPrefix}--accordion ${carbonPrefix}--skeleton`,
+      {
+        [`${carbonPrefix}--accordion--${align}`]: align,
+        [`${carbonPrefix}--accordion--${size}`]: size,
+      },
+    ]"
+  >
     <cv-accordion-item-skeleton :open="true">
       <cv-skeleton-text width="90%"></cv-skeleton-text>
       <cv-skeleton-text width="80%"></cv-skeleton-text>
@@ -14,10 +22,18 @@
 <script>
 import CvSkeletonText from '../cv-skeleton-text/cv-skeleton-text';
 import CvAccordionItemSkeleton from './_cv-accordion-item-skeleton';
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import { carbonPrefixMixin } from '../../mixins';
 
 export default {
   name: 'CvAccordionSkeleton',
+  props: {
+    align: { type: String, default: 'start', validator: val => ['start', 'end', ''].includes(val) },
+    size: {
+      type: String,
+      default: '',
+      validator: val => ['sm', 'xl', ''].includes(val),
+    },
+  },
   mixins: [carbonPrefixMixin],
   components: {
     CvSkeletonText,

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

@@ -1,14 +1,31 @@
 <template>
-  <ul data-accordion :class="`cv-accordion ${carbonPrefix}--accordion`">
+  <ul
+    data-accordion
+    :class="[
+      `cv-accordion ${carbonPrefix}--accordion`,
+      {
+        [`${carbonPrefix}--accordion--${align}`]: align,
+        [`${carbonPrefix}--accordion--${size}`]: size,
+      },
+    ]"
+  >
     <slot></slot>
   </ul>
 </template>
 
 <script>
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import { carbonPrefixMixin } from '../../mixins';
 
 export default {
   name: 'CvAccordion',
+  props: {
+    align: { type: String, default: 'start', validator: val => ['start', 'end', ''].includes(val) },
+    size: {
+      type: String,
+      default: '',
+      validator: val => ['sm', 'xl', ''].includes(val),
+    },
+  },
   mixins: [carbonPrefixMixin],
   created() {
     this.$on('cv:change', srcComponent => this.onCvChange(srcComponent));

package/src/components/cv-breadcrumb/_cv-breadcrumb-item-skeleton.vue

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

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

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

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

@@ -8,7 +8,7 @@
 
 <script>
 import CvBreadcrumbItemSkeleton from './_cv-breadcrumb-item-skeleton';
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import { carbonPrefixMixin } from '../../mixins';
 
 export default {
   name: 'CvBreadcrumbSkeleton',

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

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

package/src/components/cv-button/button-mixin.js

@@ -25,7 +25,7 @@ export default {
     kind: {
       type: String,
       default: 'primary',
-      validator: val => ['primary', 'secondary', 'tertiary', 'ghost', 'danger', 'danger--primary'].includes(val),
+      validator: val => ['', 'primary', 'secondary', 'tertiary', 'ghost', 'danger', 'danger--primary'].includes(val),
     },
     small: {
       type: Boolean,
@@ -37,7 +37,11 @@ export default {
         return true;
       },
     },
-    size: { type: String, default: undefined, validator: val => ['', 'field', 'small'].includes(val) },
+    size: {
+      type: String,
+      default: undefined,
+      validator: val => ['', 'default', 'field', 'small', 'sm', 'lg', 'xl'].includes(val),
+    },
   },
   computed: {
     // Bind listeners at the component level to the embedded input element and
@@ -64,14 +68,15 @@ export default {
           classes.push(`${carbonSettings.prefix}--btn--${this.kind.toLowerCase()}`);
         }
 
-        if (this.size === 'small' || (this.size === undefined && this.small)) {
-          classes.push(`${carbonSettings.prefix}--btn--sm`);
+        let size = this.size ? this.size : this.small && 'sm';
+        if (size === 'small') {
+          size = 'sm';
         }
-        if (this.size === 'field') {
-          classes.push(`${carbonSettings.prefix}--btn--field`);
+        if (size && !(size === '' || size === 'default')) {
+          classes.push(`${carbonSettings.prefix}--btn--${size}`);
         }
 
-        return classes.join(' ');
+        return classes;
       };
     },
   },

package/src/components/cv-button/cv-button-set.vue

@@ -1,14 +1,17 @@
 <template>
-  <div class="cv-button-set" :class="`${carbonPrefix}--btn-set`">
+  <div class="cv-button-set" :class="[`${carbonPrefix}--btn-set`, { [`${carbonPrefix}--btn-set--stacked`]: stacked }]">
     <slot />
   </div>
 </template>
 
 <script>
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import { carbonPrefixMixin } from '../../mixins';
 
 export default {
   name: 'CvButtonSet',
   mixins: [carbonPrefixMixin],
+  props: {
+    stacked: Boolean,
+  },
 };
 </script>

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

@@ -8,7 +8,7 @@
 
 <script>
 import buttonMixin from './button-mixin';
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import { carbonPrefixMixin } from '../../mixins';
 import CvSvg from '../cv-svg/_cv-svg';
 
 export default {

package/src/components/cv-button/cv-icon-button.vue

@@ -2,7 +2,7 @@
   <button
     class="cv-button"
     :class="[
-      buttonClassOpts({ iconOnly: true }),
+      ...buttonClassOpts({ iconOnly: true }),
       `${carbonPrefix}--tooltip__trigger`,
       `${carbonPrefix}--tooltip--a11y`,
       `${carbonPrefix}--tooltip--${tipPosition || 'bottom'}`,
@@ -19,7 +19,7 @@
 
 <script>
 import buttonMixin from './button-mixin';
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import { carbonPrefixMixin } from '../../mixins';
 import CvSvg from '../cv-svg/_cv-svg';
 
 export default {

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

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

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

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

package/src/components/cv-code-snippet/_cv-code-snippet-inline.vue

@@ -1,11 +1,8 @@
 <template>
   <cv-feedback-button
+    v-if="!hideCopyButton"
     class="cv-code-snippet-inline"
-    :class="[
-      `${carbonPrefix}--snippet`,
-      `${carbonPrefix}--snippet--inline`,
-      { [`${carbonPrefix}--snippet--light`]: theme === 'light' },
-    ]"
+    :class="classes"
     :feedback="copyFeedback"
     inline
     :aria-label="feedbackAriaLabel"
@@ -13,22 +10,30 @@
   >
     <slot></slot>
   </cv-feedback-button>
+  <span v-else :class="classes">
+    <slot></slot>
+  </span>
 </template>
 
 <script>
 import CvFeedbackButton from '../cv-feedback-button/_cv-feedback-button';
-import themeMixin from '../../mixins/theme-mixin';
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import { carbonPrefixMixin } from '../../mixins';
 
 export default {
   name: 'CvCodeSnippetInline',
-  mixins: [themeMixin, carbonPrefixMixin],
+  mixins: [carbonPrefixMixin],
   components: {
     CvFeedbackButton,
   },
   props: {
     copyFeedback: String,
     feedbackAriaLabel: String,
+    hideCopyButton: Boolean,
+  },
+  computed: {
+    classes() {
+      return [`${this.carbonPrefix}--snippet`, `${this.carbonPrefix}--snippet--inline`];
+    },
   },
 };
 </script>

package/src/components/cv-code-snippet/_cv-code-snippet-multiline.vue

@@ -4,16 +4,21 @@
     :class="[
       `${carbonPrefix}--snippet`,
       `${carbonPrefix}--snippet--multi`,
-      { [`${carbonPrefix}--snippet--expand`]: expanded, [`${carbonPrefix}--snippet--light`]: theme === 'light' },
+      { [`${carbonPrefix}--snippet--expand`]: expanded },
     ]"
     data-code-snippet
   >
-    <div :class="`${carbonPrefix}--snippet-container`">
+    <div :class="[`${carbonPrefix}--snippet-container`]">
       <pre>
         <slot></slot>
       </pre>
     </div>
-    <cv-feedback-button :feedback="copyFeedback" :aria-label="feedbackAriaLabel" @click="$emit('copy-code')">
+    <cv-feedback-button
+      v-if="!hideCopyButton"
+      :feedback="copyFeedback"
+      :aria-label="feedbackAriaLabel"
+      @click="$emit('copy-code')"
+    >
       <Copy16 :class="`${carbonPrefix}--snippet__icon`" />
     </cv-feedback-button>
 
@@ -36,12 +41,11 @@ import CvButton from '../cv-button/cv-button';
 
 import Copy16 from '@carbon/icons-vue/es/copy/16';
 import ChevronDown16 from '@carbon/icons-vue/es/chevron--down/16';
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
-import themeMixin from '../../mixins/theme-mixin';
+import { carbonPrefixMixin } from '../../mixins';
 
 export default {
   name: 'CvCodeSnippetMultiline',
-  mixins: [themeMixin, carbonPrefixMixin],
+  mixins: [carbonPrefixMixin],
   components: {
     CvButton,
     CvFeedbackButton,
@@ -49,10 +53,11 @@ export default {
     ChevronDown16,
   },
   props: {
+    copyFeedback: String,
+    feedbackAriaLabel: String,
+    hideCopyButton: Boolean,
     lessText: { type: String, default: 'Show less' },
     moreText: { type: String, default: 'Show more' },
-    feedbackAriaLabel: String,
-    copyFeedback: String,
   },
   data() {
     return {

package/src/components/cv-code-snippet/_cv-code-snippet-oneline.vue

@@ -1,32 +1,29 @@
 <template>
-  <div
-    class="cv-code-snippet-oneline"
-    :class="[
-      `${carbonPrefix}--snippet`,
-      `${carbonPrefix}--snippet--single`,
-      { [`${carbonPrefix}--snippet--light`]: theme === 'light' },
-    ]"
-  >
+  <div class="cv-code-snippet-oneline" :class="[`${carbonPrefix}--snippet`, `${carbonPrefix}--snippet--single`]">
     <div :class="`${carbonPrefix}--snippet-container`">
       <pre>
         <slot></slot>
       </pre>
     </div>
-    <cv-feedback-button :feedback="copyFeedback" :aria-label="feedbackAriaLabel" @click="$emit('copy-code')">
+    <cv-feedback-button
+      v-if="!hideCopyButton"
+      :feedback="copyFeedback"
+      :aria-label="feedbackAriaLabel"
+      @click="$emit('copy-code')"
+    >
       <Copy16 :class="`${carbonPrefix}--snippet__icon`" />
     </cv-feedback-button>
   </div>
 </template>
 
 <script>
-import themeMixin from '../../mixins/theme-mixin';
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import { carbonPrefixMixin } from '../../mixins';
 import CvFeedbackButton from '../cv-feedback-button/_cv-feedback-button';
 import Copy16 from '@carbon/icons-vue/es/copy/16';
 
 export default {
   name: 'CvCodeSnippetOneline',
-  mixins: [themeMixin, carbonPrefixMixin],
+  mixins: [carbonPrefixMixin],
   components: {
     CvFeedbackButton,
     Copy16,
@@ -34,6 +31,7 @@ export default {
   props: {
     copyFeedback: String,
     feedbackAriaLabel: String,
+    hideCopyButton: Boolean,
   },
 };
 </script>

package/src/components/cv-code-snippet/cv-code-snippet-skeleton.vue

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

package/src/components/cv-code-snippet/cv-code-snippet.vue

@@ -1,11 +1,13 @@
 <template>
   <component
-    class="cv-code-snippet"
+    :class="classes"
     :is="theComponent"
     v-bind="$attrs"
     @copy-code="onCopyCode"
     :copy-feedback="copyFeedback"
     :feedback-aria-label="feedbackAriaLabel"
+    :hideCopyButton="hideCopyButton"
+    :wrap-text="wrapText"
   >
     <code ref="code">
       <slot></slot>
@@ -24,10 +26,12 @@
 import CvCodeSnippetInline from './_cv-code-snippet-inline';
 import CvCodeSnippetMultiline from './_cv-code-snippet-multiline';
 import CvCodeSnippetOneline from './_cv-code-snippet-oneline';
+import { carbonPrefixMixin, themeMixin } from '../../mixins';
 
 export default {
   name: 'CvCodeSnippet',
   inheritAttrs: false,
+  mixins: [carbonPrefixMixin, themeMixin],
   components: {
     CvCodeSnippetInline,
     CvCodeSnippetMultiline,
@@ -36,13 +40,25 @@ export default {
   props: {
     feedbackAriaLabel: { type: String, default: 'Copy code' },
     copyFeedback: { type: String, default: 'Copied!' },
+    hideCopyButton: Boolean,
     kind: {
       type: String,
       default: 'oneline',
       validator: value => ['inline', 'multiline', 'oneline'].includes(value),
     },
+    wrapText: Boolean,
   },
   computed: {
+    classes() {
+      return [
+        `cv-code-snippet`,
+        {
+          [`${this.carbonPrefix}--snippet--light`]: this.isLight,
+          [`${this.carbonPrefix}--snippet--no-copy`]: this.hideCopyButton,
+          [`${this.carbonPrefix}--snippet--wraptext`]: this.wrapText,
+        },
+      ];
+    },
     theComponent() {
       switch (this.kind) {
         case 'inline':

package/src/components/cv-combo-box/cv-combo-box.vue

@@ -14,7 +14,7 @@
       :class="[
         `${carbonPrefix}--combo-box ${carbonPrefix}--list-box`,
         {
-          [`${carbonPrefix}--list-box--light`]: theme === 'light',
+          [`${carbonPrefix}--list-box--light`]: isLight,
           [`${carbonPrefix}--combo-box--expanded`]: open,
           [`${carbonPrefix}--list-box--expanded`]: open,
           [`${carbonPrefix}--combo-box--disabled ${carbonPrefix}--list-box--disabled`]: disabled,
@@ -113,13 +113,10 @@
 </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 carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
-import methodsMixin from '../../mixins/methods-mixin';
 
 export default {
   name: 'CvComboBox',

package/src/components/cv-content-switcher/cv-content-switcher-button.vue

@@ -34,9 +34,8 @@
 </template>
 
 <script>
-import uidMixin from '../../mixins/uid-mixin';
+import { uidMixin, carbonPrefixMixin } from '../../mixins';
 import CvSvg from '../cv-svg/_cv-svg';
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
 
 export default {
   name: 'CvContentSwitcherButton',

package/src/components/cv-content-switcher/cv-content-switcher.vue

@@ -1,12 +1,22 @@
 <template>
-  <div data-content-switcher :class="`cv-content-switcher ${carbonPrefix}--content-switcher`" role="tablist">
+  <div
+    data-content-switcher
+    :class="[
+      `cv-content-switcher ${carbonPrefix}--content-switcher`,
+      {
+        [`${carbonPrefix}--content-switcher--light`]: isLight,
+        [`${carbonPrefix}--content-switcher--${size}`]: size,
+      },
+    ]"
+    role="tablist"
+  >
     <slot></slot>
   </div>
 </template>
 
 <script>
 import store from './cv-content-switcher-store';
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import { carbonPrefixMixin, themeMixin } from '../../mixins';
 
 const toggleContent = (selector, on) => {
   // hide content
@@ -24,13 +34,20 @@ const toggleContent = (selector, on) => {
 
 export default {
   name: 'CvContentSwitcher',
-  mixins: [carbonPrefixMixin],
+  mixins: [carbonPrefixMixin, themeMixin],
   created() {
     // add these on created otherwise cv:mounted is too late.
     this.$on('cv:open', srcComponent => this.onCvOpen(srcComponent));
     this.$on('cv:mounted', srcComponent => this.onCvMount(srcComponent));
     this.$on('cv:beforeDestroy', srcComponent => this.onCvBeforeDestroy(srcComponent));
   },
+  props: {
+    size: {
+      type: String,
+      default: undefined,
+      validator: val => ['', 'sm', 'xl'].includes(val),
+    },
+  },
   data() {
     return {
       store: store,

package/src/components/cv-data-table/_cv-data-table-row-inner.vue

@@ -54,7 +54,7 @@ import CvCheckbox from '../cv-checkbox/cv-checkbox';
 import CvOverflowMenu from '../cv-overflow-menu/cv-overflow-menu';
 import CvOverflowMenuItem from '../cv-overflow-menu/cv-overflow-menu-item';
 import ChevronRight16 from '@carbon/icons-vue/es/chevron--right/16';
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import { carbonPrefixMixin } from '../../mixins';
 
 export default {
   name: 'CvDataTableRowInner',

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

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

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

@@ -30,8 +30,7 @@
 import ArrowDown16 from '@carbon/icons-vue/es/arrow--down/16';
 import Arrows16 from '@carbon/icons-vue/es/arrows/16';
 import CvWrapper from '../cv-wrapper/_cv-wrapper';
-import uidMixin from '../../mixins/uid-mixin';
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import { uidMixin, carbonPrefixMixin } from '../../mixins';
 
 const nextOrder = {
   ascending: 'descending',

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

@@ -30,8 +30,7 @@
 
 <script>
 import CvDataTableRowInner from './_cv-data-table-row-inner';
-import uidMixin from '../../mixins/uid-mixin';
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import { uidMixin, carbonPrefixMixin } from '../../mixins';
 
 export default {
   name: 'CvDataTableRow',