@carbon/vue 2.40.0 → 2.43.1

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.40.0",
+  "version": "2.43.1",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -64,16 +64,16 @@
   },
   "sideEffects": true,
   "dependencies": {
-    "@carbon/icons-vue": "10.27.0",
-    "@carbon/telemetry": "^0.0.0-alpha.6",
-    "carbon-components": "10.30.0",
+    "@carbon/icons-vue": "10.49.1",
+    "@carbon/telemetry": "^0.1.0",
+    "carbon-components": "10.56.0",
     "flatpickr": "4.6.9",
-    "vue": "^2.6.12"
+    "vue": "^2.6.14"
   },
   "devDependencies": {
     "@vue/cli-service": "^3.11.0",
     "eslint-plugin-prettier": "^3.3.1",
-    "vue-template-compiler": "^2.6.12"
+    "vue-template-compiler": "^2.6.14"
   },
-  "gitHead": "1db5405c2ab7fb83019637657bc637f2fc011848"
+  "gitHead": "0edbc217d724b03f012f3cd4df3aa3754821bf06"
 }

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

@@ -31,7 +31,7 @@ export default {
     size: {
       type: String,
       default: '',
-      validator: val => ['sm', 'xl', ''].includes(val),
+      validator: val => ['sm', 'md', 'lg', 'xl', ''].includes(val),
     },
   },
   mixins: [carbonPrefixMixin],

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

@@ -23,7 +23,7 @@ export default {
     size: {
       type: String,
       default: '',
-      validator: val => ['sm', 'xl', ''].includes(val),
+      validator: val => ['sm', 'md', 'lg', 'xl', ''].includes(val),
     },
   },
   mixins: [carbonPrefixMixin],

package/src/components/cv-aspect-ratio/cv-aspect-ratio.vue

@@ -4,6 +4,8 @@
 
 <script>
 import { carbonPrefixMixin } from '../../mixins';
+
+export const ratios = ['16x9', '9x16', '2x1', '1x2', '4x3', '3x4', '1x1'];
 export default {
   name: 'CvAspectRatio',
   mixins: [carbonPrefixMixin],
@@ -11,8 +13,7 @@ export default {
     ratio: {
       type: String,
       validator: val => {
-        const options = ['16x9', '9x16', '2x1', '1x2', '4x3', '3x4', '1x1'];
-        const result = options.includes(val);
+        const result = ratios.includes(val);
         if (!result) {
           console.warn(`Invalid options supplied to "CvAspectRation"-"${val}".`);
         }

package/src/components/cv-aspect-ratio/index.js

@@ -1,2 +1,2 @@
-import CvAspectRatio from './cv-aspect-ratio';
-export { CvAspectRatio };
+import CvAspectRatio, { ratios } from './cv-aspect-ratio';
+export { CvAspectRatio, ratios };

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

@@ -1,5 +1,11 @@
 <template>
-  <nav :class="`${carbonPrefix}--breadcrumb ${carbonPrefix}--skeleton`" :aria-label="ariaLabel">
+  <nav
+    :class="[
+      `${carbonPrefix}--breadcrumb ${carbonPrefix}--skeleton`,
+      { [`${carbonPrefix}--breadcrumb--no-trailing-slash`]: noTrailingSlash },
+    ]"
+    :aria-label="ariaLabel"
+  >
     <cv-breadcrumb-item-skeleton></cv-breadcrumb-item-skeleton>
     <cv-breadcrumb-item-skeleton></cv-breadcrumb-item-skeleton>
     <cv-breadcrumb-item-skeleton></cv-breadcrumb-item-skeleton>
@@ -18,6 +24,7 @@ export default {
   },
   props: {
     ariaLabel: { type: String, default: 'breadcrumb' },
+    noTrailingSlash: Boolean,
   },
 };
 </script>

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

@@ -13,6 +13,7 @@ export default {
       },
     },
     iconHref: {
+      deprecated: true,
       type: String,
       default: undefined,
       validator(val) {
@@ -29,6 +30,7 @@ export default {
         ['', 'primary', 'secondary', 'tertiary', 'ghost', 'danger', 'danger--ghost', 'danger--tertiary'].includes(val),
     },
     small: {
+      deprecated: true,
       type: Boolean,
       default: undefined,
       validator(val) {
@@ -56,7 +58,8 @@ export default {
     buttonClassOpts() {
       return (opts = {}) => {
         const classes = [`${carbonSettings.prefix}--btn`];
-        const lowerCaseKind = this.kind.toLowerCase();
+        // ensure lower case and default to primary
+        const _kind = this.kind ? this.kind.toLowerCase() : 'primary';
 
         if (opts.skeleton) {
           classes.push(`${carbonSettings.prefix}--skeleton`);
@@ -64,13 +67,13 @@ export default {
 
         if (opts.iconOnly) {
           classes.push(`${carbonSettings.prefix}--btn--icon-only`);
-          if (this.selected && lowerCaseKind === 'ghost') {
+          if (this.selected && _kind === 'ghost') {
             classes.push(`${carbonSettings.prefix}--btn--selected`);
           }
         }
 
-        if (this.kind && !opts.skeleton) {
-          classes.push(`${carbonSettings.prefix}--btn--${lowerCaseKind}`);
+        if (_kind && !opts.skeleton) {
+          classes.push(`${carbonSettings.prefix}--btn--${_kind}`);
         }
 
         let size = this.size ? this.size : this.small && 'sm';

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

@@ -0,0 +1,14 @@
+export const buttonKinds = [
+  '',
+  'primary',
+  'secondary',
+  'tertiary',
+  'ghost',
+  'danger',
+  'danger--ghost',
+  'danger--tertiary',
+];
+export const buttonSizes = ['', 'default', 'field', 'small', 'sm', 'lg', 'xl'];
+
+const CvButtonConsts = { buttonKinds, buttonSizes };
+export default CvButtonConsts;

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

@@ -34,7 +34,7 @@ export default {
     tipPosition: {
       type: String,
       default: 'bottom',
-      validator: val => ['top', 'left', 'bottom', 'right'.includes(val)],
+      validator: val => ['top', 'left', 'bottom', 'right'].includes(val),
     },
     tipAlignment: { type: String, default: 'center', validator: val => ['start', 'center', 'end'].includes(val) },
   },

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

@@ -19,7 +19,7 @@ export default {
   name: 'CvCodeSnippetSkeleton',
   mixins: [carbonPrefixMixin],
   props: {
-    kind: { type: String, default: 'oneline' },
+    kind: { type: String, default: 'oneline', validator: val => ['multiline', 'oneline'].includes(val) },
   },
   computed: {
     multi() {

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

@@ -14,7 +14,7 @@
     <!-- textarea cannot be fully hidden for clipboard to work -->
     <textarea
       class="cv-code-snippet__clippy"
-      style="position: absolute; left: -9999px; max-width: 0; opacity: 0; overflow: hidden;"
+      style="position: absolute; left: -9999px; max-width: 0; opacity: 0; overflow: hidden"
       aria-hidden="true"
       ref="clippy"
     ></textarea>

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

@@ -28,7 +28,7 @@
 
 <script>
 import ArrowDown16 from '@carbon/icons-vue/es/arrow--down/16';
-import Arrows16 from '@carbon/icons-vue/es/arrows/16';
+import Arrows16 from '@carbon/icons-vue/es/arrows--vertical/16';
 import CvWrapper from '../cv-wrapper/_cv-wrapper';
 import { uidMixin, carbonPrefixMixin } from '../../mixins';
 

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

@@ -1,6 +1,6 @@
 <template>
   <cv-data-table skeleton :data="data" :columns="cols" v-on="$listeners" v-bind="$attrs">
-    <template v-if="hasBatchActions" slot="helper-text">
+    <template v-if="hasHelperText" slot="helper-text">
       <slot name="helper-text" />
     </template>
 
@@ -29,7 +29,6 @@ export default {
   },
   props: {
     columns: { type: [Array, Number], default: DEFAULTS.COLS },
-    hasExpandables: Boolean,
     rows: { type: Number, default: DEFAULTS.ROWS },
   },
   data() {

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

@@ -31,55 +31,52 @@
             </p>
           </div>
         </div>
-
         <div :class="`${carbonPrefix}--toolbar-content`">
           <div
             v-if="$listeners.search"
-            :class="{
-              [`${carbonPrefix}--toolbar-search-container-active`]: searchActive || searchValue.length > 0,
-              [`${carbonPrefix}--toolbar-search-container-persistent`]: !expandingSearch,
-              [`${carbonPrefix}--toolbar-search-container-expandable`]: expandingSearch,
-            }"
+            :aria-labelledby="`${uid}-search`"
+            :class="[
+              `${carbonPrefix}--search ${carbonPrefix}--search--xl`,
+              {
+                [`${carbonPrefix}--toolbar-search-container-active`]: searchActive || searchValue.length > 0,
+                [`${carbonPrefix}--toolbar-search-container-persistent`]: !expandingSearch,
+                [`${carbonPrefix}--toolbar-search-container-expandable`]: expandingSearch,
+              },
+            ]"
+            role="search"
             ref="searchContainer"
           >
-            <div data-search :class="`${carbonPrefix}--search ${carbonPrefix}--search--sm`" role="search">
-              <div
-                :class="`${carbonPrefix}--search-magnifier`"
-                tabindex="0"
-                @click="checkSearchExpand(true)"
-                @keydown.enter.prevent="checkSearchExpand(true)"
-                @keydown.space.prevent
-                @keyup.space.prevent="checkSearchExpand(true)"
-                ref="magnifier"
-              >
-                <Search16 :class="`${carbonPrefix}--toolbar-action__icon`" />
-              </div>
-              <label :for="uid" :class="`${carbonPrefix}--label`">{{ searchLabel }}</label>
-              <input
-                :class="`${carbonPrefix}--search-input`"
-                type="text"
-                :id="uid"
-                role="search"
-                :placeholder="searchPlaceholder"
-                :aria-labelledby="uid"
-                ref="search"
-                v-model="searchValue"
-                @input="onSearch"
-                @keydown.esc.prevent="checkSearchExpand(false)"
-              />
-              <button
-                :class="[
-                  `${carbonPrefix}--search-close`,
-                  { [`${carbonPrefix}--search-close--hidden`]: !clearSearchVisible },
-                ]"
-                :title="searchClearLabel"
-                :aria-label="searchClearLabel"
-                @click="onClearClick"
-                type="button"
-              >
-                <Close16 />
-              </button>
+            <div :class="`${carbonPrefix}--search-magnifier`" ref="magnifier">
+              <Search16 :class="`${carbonPrefix}--search-magnifier-icon`" />
             </div>
+            <label :id="`${uid}-search`" :for="uid" :class="`${carbonPrefix}--label`">{{ searchLabel }}</label>
+            <input
+              :class="`${carbonPrefix}--search-input`"
+              type="text"
+              :id="uid"
+              role="search"
+              :placeholder="searchPlaceholder"
+              :aria-labelledby="uid"
+              ref="search"
+              v-model="searchValue"
+              @input="onSearch"
+              @click="checkSearchExpand(true)"
+              @keydown.esc.prevent="checkSearchExpand(false)"
+              @focus="checkSearchExpand(true)"
+              @blur="checkSearchExpand(false)"
+            />
+            <button
+              :class="[
+                `${carbonPrefix}--search-close`,
+                { [`${carbonPrefix}--search-close--hidden`]: !clearSearchVisible },
+              ]"
+              :title="searchClearLabel"
+              :aria-label="searchClearLabel"
+              @click="onClearClick"
+              type="button"
+            >
+              <Close16 />
+            </button>
           </div>
           <slot name="actions" />
         </div>
@@ -196,6 +193,7 @@ 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 clickout from '../../directives/clickout';
 export default {
   name: 'CvDataTable',
   components: {
@@ -210,6 +208,7 @@ export default {
     Close16,
     ChevronRight16,
   },
+  directives: { clickout },
   mixins: [uidMixin, carbonPrefixMixin],
   props: {
     actionBarAriaLabel: { type: String, default: 'Table Action Bar' },
@@ -232,6 +231,7 @@ export default {
     searchLabel: { type: String, default: 'Search' },
     searchPlaceholder: { type: String, default: 'Search' },
     searchClearLabel: { type: String, default: 'Clear search' },
+    initialSearchValue: { type: String, default: '' },
     sortable: Boolean,
     title: String,
     columns: Array,
@@ -258,7 +258,7 @@ export default {
       batchActive: false,
       headingChecked: false,
       dataRowsSelected: this.rowsSelected,
-      searchValue: '',
+      searchValue: this.initialSearchValue,
       clearSearchVisible: false,
       searchActive: false,
       registeredRows: [],
@@ -362,6 +362,9 @@ export default {
       this.hasToolbar = !!(this.$slots.actions || this.$listeners.search || this.$slots['batch-actions']);
       this.isHelper = !!(this.$slots['helper-text'] || (this.helperText && this.helperText.length));
     },
+    onClickout(ev) {
+      this.checkSearchExpand(false);
+    },
     onCvMount(thing) {
       if (thing.$_CvDataTableHeading) {
         this.registeredHeadings = this.$children.filter(item => item.$_CvDataTableHeading);

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

@@ -81,16 +81,6 @@ import { uidMixin, themeMixin, carbonPrefixMixin } from '../../mixins';
 import Calendar16 from '@carbon/icons-vue/es/calendar/16';
 import CvWrapper from '../cv-wrapper/_cv-wrapper';
 
-// Weekdays shorthand for english locale
-l10n.en.weekdays.shorthand.forEach((day, index) => {
-  const currentDay = l10n.en.weekdays.shorthand;
-  if (currentDay[index] === 'Thu' || currentDay[index] === 'Th') {
-    currentDay[index] = 'Th';
-  } else {
-    currentDay[index] = currentDay[index].charAt(0);
-  }
-});
-
 export default {
   name: 'CvDatePicker',
   mixins: [uidMixin, themeMixin, carbonPrefixMixin],
@@ -338,6 +328,17 @@ export default {
       this.$refs.todate.click();
     },
   },
+  created() {
+    // Weekdays shorthand for english locale
+    l10n.en.weekdays.shorthand.forEach((day, index) => {
+      const currentDay = l10n.en.weekdays.shorthand;
+      if (currentDay[index] === 'Thu' || currentDay[index] === 'Th') {
+        currentDay[index] = 'Th';
+      } else {
+        currentDay[index] = currentDay[index].charAt(0);
+      }
+    });
+  },
   mounted() {
     this.initFlatpickr();
     this.checkSlots();

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

@@ -1,6 +1,6 @@
 <template>
   <button
-    aria-label="ariaLabel"
+    :aria-label="ariaLabel"
     type="button"
     class="cv-feedback-button"
     v-bind="$attrs"

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

@@ -12,7 +12,6 @@
             [`${carbonPrefix}--btn--primary`]: kind === 'button',
           },
         ]"
-        role="button"
         tabindex="0"
         ref="focusTarget"
         @keydown.enter.prevent="onShow()"
@@ -148,6 +147,7 @@ export default {
     buttonLabel: {
       type: String,
       default: undefined,
+      deprecated: true,
       validator: val => {
         if (val !== undefined && process.env.NODE_ENV === 'development') {
           console.warn('CvFileUploader: button-label prop deprecated in favour of drop-target-label');
@@ -213,20 +213,30 @@ export default {
     },
     addFiles(files) {
       for (const file of files) {
-        const internalFile = {
-          state: this.initialStateUploading ? STATES.UPLOADING : STATES.NONE,
-          file,
-          invalidMessageTitle: '',
-          invalidMessage: '',
-        };
+        const internalFile = this.internalFiles.find(item => item.file.name === file.name);
 
-        if (file.messageBundle) {
-          internalFile.invalidMessageTitle = file.messageBundle.invalidMessageTitle;
-          internalFile.invalidMessage = file.messageBundle.invalidMessage;
-          delete file.messageBundle;
+        if (internalFile) {
+          internalFile.state = this.initialStateUploading ? STATES.UPLOADING : STATES.NONE;
+          internalFile.invalidMessageTitle = '';
+          internalFile.invalidMessage = '';
+        } else {
+          const internalFile = {
+            state: this.initialStateUploading ? STATES.UPLOADING : STATES.NONE,
+            file,
+            invalidMessageTitle: '',
+            invalidMessage: '',
+          };
+
+          if (file.messageBundle) {
+            internalFile.invalidMessageTitle = file.messageBundle.invalidMessageTitle;
+            internalFile.invalidMessage = file.messageBundle.invalidMessage;
+            delete file.messageBundle;
+          }
+          this.internalFiles.push(internalFile);
         }
-        this.internalFiles.push(internalFile);
       }
+      // clear input we do not need to maintain it
+      this.$refs['file-input'].value = '';
       this.$emit('change', this.internalFiles);
     },
     onChange(ev) {

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

@@ -40,6 +40,7 @@ export default {
     active: {
       type: Boolean,
       default: undefined,
+      deprecated: true,
       validator: val => {
         if (val !== undefined && process.env.NODE_ENV === 'development') {
           console.warn('CvInlineLoading: active prop deprecated in favour of state prop');

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

@@ -4,7 +4,13 @@
     v-on="$listeners"
     v-bind="linkProps"
     class="cv-link"
-    :class="[`${carbonPrefix}--link`, { [`${carbonPrefix}--link--inline`]: inline }]"
+    :class="[
+      `${carbonPrefix}--link`,
+      {
+        [`${carbonPrefix}--link--disabled`]: disabled,
+        [`${carbonPrefix}--link--inline`]: inline,
+      },
+    ]"
   >
     <slot></slot>
   </component>
@@ -17,6 +23,7 @@ export default {
   name: 'CvLink',
   mixins: [linkMixin, carbonPrefixMixin],
   props: {
+    disabled: Boolean,
     inline: Boolean,
   },
 };

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

@@ -5,7 +5,7 @@
       :class="{
         'cv-loading': !overlay,
         [`${carbonPrefix}--loading`]: active || stopping,
-        [`${carbonPrefix}--loading--stop`]: !active && stopping,
+        [`${carbonPrefix}--loading--stop`]: (!active && stopping) || stopped,
         [`${carbonPrefix}--loading--small`]: small,
       }"
       ref="loading"
@@ -55,6 +55,7 @@ export default {
   },
   data() {
     return {
+      stopped: false,
       stopping: false,
     };
   },
@@ -69,10 +70,12 @@ export default {
         this.$refs.loading.removeEventListener('animationend', this.onEnd);
 
         this.stopping = false;
+        this.stopped = true;
         this.$emit('loading-end');
       }
     },
     onActiveUpdate(newValue) {
+      this.stopped = false;
       this.stopping = !newValue;
       if (!newValue) {
         this.$refs.loading.addEventListener('animationend', this.onEnd);

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

@@ -131,6 +131,7 @@
               :name="item.name"
               :data-test="item.name"
               :label="item.label"
+              :disabled="item.disabled"
               style="pointer-events: none;"
             />
           </div>
@@ -407,7 +408,9 @@ export default {
     onEnter() {
       if (this.open) {
         this.onItemClick(this.highlighted);
-        this.$refs.input.focus();
+        if (this.$refs.input) {
+          this.$refs.input.focus();
+        }
         this.filter = '';
 
         this.doOpen(false);
@@ -446,17 +449,20 @@ export default {
       this.highlighted = val;
     },
     onItemClick(val) {
-      const index = this.dataValue.findIndex(item => val === item);
-      if (index > -1) {
-        this.dataValue.splice(index, 1);
-      } else {
-        this.dataValue.push(val);
-      }
-      if (this.selectionFeedback === selectionFeedbackOptions[TOP]) {
-        this.updateOptions();
+      const option = this.options.find(item => item.value === val);
+      if (option && !option.disabled) {
+        const index = this.dataValue.findIndex(item => val === item);
+        if (index > -1) {
+          this.dataValue.splice(index, 1);
+        } else {
+          this.dataValue.push(val);
+        }
+        if (this.selectionFeedback === selectionFeedbackOptions[TOP]) {
+          this.updateOptions();
+        }
+        this.$refs.button.focus();
+        this.$emit('change', this.dataValue);
       }
-      this.$refs.button.focus();
-      this.$emit('change', this.dataValue);
     },
     inputClick() {
       if (!this.open) {