@carbon/vue 2.42.0 → 2.44.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.42.0",
+  "version": "2.44.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -64,9 +64,9 @@
   },
   "sideEffects": true,
   "dependencies": {
-    "@carbon/icons-vue": "10.41.0",
-    "@carbon/telemetry": "^0.0.0-alpha.6",
-    "carbon-components": "10.46.0",
+    "@carbon/icons-vue": "10.49.1",
+    "@carbon/telemetry": "^0.1.0",
+    "carbon-components": "10.56.0",
     "flatpickr": "4.6.9",
     "vue": "^2.6.14"
   },
@@ -75,5 +75,5 @@
     "eslint-plugin-prettier": "^3.3.1",
     "vue-template-compiler": "^2.6.14"
   },
-  "gitHead": "ab0c2e9ac8f61f208d73291274108ce5c25cb527"
+  "gitHead": "cf32f525094daf7cd1073afb4285dd1b8961bba5"
 }

package/src/carbon.yml

@@ -0,0 +1,388 @@
+# yaml-language-server: $schema=https://unpkg.com/@carbon-platform/schemas@v1/carbon-resources.schema.json
+library:
+  id: carbon-components-vue
+  name: Carbon Components Vue
+  description: Vue implementation of Carbon Components.
+  externalDocsUrl: https://vue.carbondesignsystem.com/?path=/story/welcome
+  inherits: carbon-styles
+  packageJsonPath: /../package.json
+assets:
+  accordion:
+    status: stable
+    externalDocsUrl: https://www.carbondesignsystem.com/components/accordion/usage
+    framework: vue
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://vue.carbondesignsystem.com/?path=/story/components-cvaccordion
+  aspect-ratio:
+    status: stable
+    framework: vue
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://vue.carbondesignsystem.com/?path=/story/components-cvaspectratio
+  breadcrumb:
+    status: stable
+    externalDocsUrl: https://www.carbondesignsystem.com/components/breadcrumb/usage
+    framework: vue
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://vue.carbondesignsystem.com/?path=/story/components-cvbreadcrumb
+  button:
+    status: stable
+    externalDocsUrl: https://www.carbondesignsystem.com/components/button/usage
+    framework: vue
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://vue.carbondesignsystem.com/?path=/story/components-cvbutton
+  checkbox:
+    status: stable
+    externalDocsUrl: https://www.carbondesignsystem.com/components/checkbox/usage
+    framework: vue
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://vue.carbondesignsystem.com/?path=/story/components-cvcheckbox
+  code-snippet:
+    status: stable
+    externalDocsUrl: https://www.carbondesignsystem.com/components/code-snippet/usage
+    framework: vue
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://vue.carbondesignsystem.com/?path=/story/components-cvcodesnippet
+  combo-box:
+    status: stable
+    framework: vue
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://vue.carbondesignsystem.com/?path=/story/components-cvcombobox
+  content-switcher:
+    status: stable
+    externalDocsUrl: https://www.carbondesignsystem.com/components/data-table/usage
+    framework: vue
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://vue.carbondesignsystem.com/?path=/story/components-cvcontentswitcher
+  data-table:
+    status: stable
+    externalDocsUrl: https://www.carbondesignsystem.com/components/accordion/usage
+    framework: vue
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://vue.carbondesignsystem.com/?path=/story/components-cvdatatable
+  date-picker:
+    status: stable
+    externalDocsUrl: https://www.carbondesignsystem.com/components/date-picker/usage
+    framework: vue
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://vue.carbondesignsystem.com/?path=/story/components-cvdatatable
+  dropdown:
+    status: stable
+    externalDocsUrl: https://www.carbondesignsystem.com/components/dropdown/usage/
+    framework: vue
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://vue.carbondesignsystem.com/?path=/story/components-cvdropdown
+  file-uploader:
+    status: stable
+    externalDocsUrl: https://www.carbondesignsystem.com/components/file-uploader/usage
+    framework: vue
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://vue.carbondesignsystem.com/?path=/story/components-cvfileuploader
+  form:
+    status: stable
+    externalDocsUrl: https://www.carbondesignsystem.com/components/form/usage
+    framework: vue
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://vue.carbondesignsystem.com/?path=/story/components-cvform
+  grid:
+    status: stable
+    framework: vue
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://vue.carbondesignsystem.com/?path=/story/components-cvgrid
+  inline-loading:
+    status: stable
+    externalDocsUrl: https://www.carbondesignsystem.com/components/inline-loading/usage
+    framework: vue
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://vue.carbondesignsystem.com/?path=/story/components-cvinlineloading
+  inline-notification:
+    name: Inline notification
+    status: stable
+    type: component
+    platform: web
+    framework: vue
+    thumbnailPath: './thumbnails/inline-notification.svg'
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url:  https://vue.carbondesignsystem.com/?path=/story/components-cvinlinenotification
+    tags:
+      - system-feedback
+  link:
+    status: stable
+    externalDocsUrl: https://www.carbondesignsystem.com/components/link/usage
+    framework: vue
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://vue.carbondesignsystem.com/?path=/story/components-cvlink
+  list:
+    status: stable
+    externalDocsUrl: https://www.carbondesignsystem.com/components/list/usage
+    framework: vue
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://vue.carbondesignsystem.com/?path=/story/components-cvlist
+  loading:
+    status: stable
+    externalDocsUrl: https://www.carbondesignsystem.com/components/loading/usage
+    framework: vue
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://vue.carbondesignsystem.com/?path=/story/components-cvloading
+  modal:
+    status: stable
+    externalDocsUrl: https://www.carbondesignsystem.com/components/modal/usage
+    framework: vue
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://vue.carbondesignsystem.com/?path=/story/components-cvmodal
+  multiselect:
+    status: stable
+    externalDocsUrl: https://www.carbondesignsystem.com/components/dropdown/usage/#multiselect
+    framework: vue
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://vue.carbondesignsystem.com/?path=/story/components-cvmultiselect
+  number-input:
+    status: stable
+    externalDocsUrl: https://www.carbondesignsystem.com/components/number-input/usage
+    framework: vue
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://vue.carbondesignsystem.com/?path=/story/components-cvnumberinput
+  overflow-menu:
+    status: stable
+    externalDocsUrl: https://www.carbondesignsystem.com/components/overflow-menu/usage
+    framework: vue
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://vue.carbondesignsystem.com/?path=/story/components-cvoverflowmenu
+  pagination:
+    status: stable
+    externalDocsUrl: https://www.carbondesignsystem.com/components/pagination/usage
+    framework: vue
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://vue.carbondesignsystem.com/?path=/story/components-cvpagination
+  progress-indicator:
+    status: stable
+    externalDocsUrl: https://carbondesignsystem.com/components/progress-indicator/usage/
+    framework: vue
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://vue.carbondesignsystem.com/?path=/story/components-cvprogress
+  radio-button:
+    status: stable
+    externalDocsUrl: https://www.carbondesignsystem.com/components/radio-button/usage
+    framework: vue
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://vue.carbondesignsystem.com/?path=/story/components-cvradiobutton
+  search:
+    status: stable
+    externalDocsUrl: https://www.carbondesignsystem.com/components/search/usage
+    framework: vue
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://vue.carbondesignsystem.com/?path=/story/components-cvsearch
+  select:
+    status: stable
+    externalDocsUrl: https://www.carbondesignsystem.com/components/select/usage
+    framework: vue
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://vue.carbondesignsystem.com/?path=/story/components-cvselect
+  skeleton-text:
+    name: Skeleton text
+    status: stable
+    type: component
+    platform: web
+    framework: vue
+    thumbnailPath: './thumbnails/skeleton-text.svg'
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://vue.carbondesignsystem.com/?path=/story/components-cvskeletontext
+    tags:
+      - data-display
+  slider:
+    status: stable
+    externalDocsUrl: https://www.carbondesignsystem.com/components/slider/usage
+    framework: vue
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://vue.carbondesignsystem.com/?path=/story/components-cvslider
+  structured-list:
+    status: stable
+    externalDocsUrl: https://www.carbondesignsystem.com/components/structured-list/usage
+    framework: vue
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://vue.carbondesignsystem.com/?path=/story/components-cvstructuredlist
+  tabs:
+    status: stable
+    externalDocsUrl: https://www.carbondesignsystem.com/components/tabs/usage
+    framework: vue
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://vue.carbondesignsystem.com/?path=/story/components-cvtabs
+  tag:
+    status: stable
+    externalDocsUrl: https://www.carbondesignsystem.com/components/tag/usage
+    framework: vue
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://vue.carbondesignsystem.com/?path=/story/components-cvtag
+  text-area:
+    status: stable
+    framework: vue
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://vue.carbondesignsystem.com/?path=/story/components-cvtextarea
+  text-input:
+    status: stable
+    externalDocsUrl: https://www.carbondesignsystem.com/components/text-input/usage
+    framework: vue
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://vue.carbondesignsystem.com/?path=/story/components-cvtextinput
+  tile:
+    status: stable
+    externalDocsUrl: https://www.carbondesignsystem.com/components/tile/usage
+    framework: vue
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://vue.carbondesignsystem.com/?path=/story/components-cvtile
+  time-picker:
+    status: stable
+    framework: vue
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://vue.carbondesignsystem.com/?path=/story/components-cvtimepicker
+  toast-notification:
+    name: Toast notification
+    status: stable
+    type: component
+    platform: web
+    framework: vue
+    thumbnailPath: './thumbnails/toast-notification.svg'
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://vue.carbondesignsystem.com/?path=/story/components-cvtoastnotification
+    tags:
+      - system-feedback
+  toggle:
+    status: stable
+    externalDocsUrl: https://www.carbondesignsystem.com/components/toggle/usage
+    framework: vue
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://vue.carbondesignsystem.com/?path=/story/components-cvtoggle
+  tooltip:
+    status: stable
+    externalDocsUrl: https://www.carbondesignsystem.com/components/tooltip/usage
+    framework: vue
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://vue.carbondesignsystem.com/?path=/story/components-cvtooltip-interactive-tootlip
+  ui-shell-header:
+    status: stable
+    externalDocsUrl: https://www.carbondesignsystem.com/components/UI-shell-header/usage
+    framework: vue
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://vue.carbondesignsystem.com/?path=/story/components-cvuishell

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

@@ -29,12 +29,12 @@ export default {
   mixins: [buttonMixin, carbonPrefixMixin],
   components: { CvSvg },
   props: {
-    label: { type: String, required: true },
+    label: { type: String, default: undefined },
     selected: Boolean,
     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-checkbox/cv-checkbox.vue

@@ -7,7 +7,6 @@
       :class="`${carbonPrefix}--checkbox`"
       type="checkbox"
       :checked="isChecked === true"
-      :aria-checked="`${isChecked}`"
       @focus="onFocus"
       @blur="onBlur"
       :value="value"

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

@@ -6,7 +6,8 @@
     :disabled="disabled"
     :feedback="copyFeedback"
     inline
-    :aria-label="feedbackAriaLabel"
+    :title="feedbackAriaLabel"
+    :ariaLabel="feedbackAriaLabel"
     @click="$emit('copy-code')"
     ><slot
   /></cv-feedback-button>

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

@@ -15,7 +15,8 @@
       v-if="!hideCopyButton"
       :disabled="disabled"
       :feedback="copyFeedback"
-      :aria-label="feedbackAriaLabel"
+      :title="feedbackAriaLabel"
+      :ariaLabel="feedbackAriaLabel"
       @click="$emit('copy-code')"
     >
       <Copy16 :class="`${carbonPrefix}--snippet__icon`" />

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

@@ -16,7 +16,8 @@
       v-if="!hideCopyButton"
       :disabled="disabled"
       :feedback="copyFeedback"
-      :aria-label="feedbackAriaLabel"
+      :ariaLabel="feedbackAriaLabel"
+      :title="feedbackAriaLabel"
       @click="$emit('copy-code')"
     >
       <Copy16 :class="`${carbonPrefix}--snippet__icon`" />

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,8 +14,9 @@
     <!-- 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"
+      tabindex="-1"
       ref="clippy"
     ></textarea>
   </component>

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() {