@carbon/vue 2.43.0 → 2.44.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.43.0",
+  "version": "2.44.1",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -64,16 +64,16 @@
   },
   "sideEffects": true,
   "dependencies": {
-    "@carbon/icons-vue": "10.49.1",
+    "@carbon/icons-vue": "10.56.0",
     "@carbon/telemetry": "^0.1.0",
-    "carbon-components": "10.56.0",
-    "flatpickr": "4.6.9",
-    "vue": "^2.6.14"
+    "carbon-components": "10.58.0",
+    "flatpickr": "4.6.13",
+    "vue": "^2.7.10"
   },
   "devDependencies": {
-    "@vue/cli-service": "^3.11.0",
-    "eslint-plugin-prettier": "^3.3.1",
-    "vue-template-compiler": "^2.6.14"
+    "@vue/cli-service": "^3.12.1",
+    "eslint-plugin-prettier": "^3.4.1",
+    "vue-template-compiler": "^2.7.10"
   },
-  "gitHead": "fead16d4b7d1f363f99c49aaeb614749ddf128ec"
+  "gitHead": "bc9edcb2243d53639b8e402752df209934fc2476"
 }

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 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-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.vue

@@ -16,6 +16,7 @@
       class="cv-code-snippet__clippy"
       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.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' },
@@ -363,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/plugins/monthSelectPlugin.js

@@ -21,7 +21,7 @@ const monthToStr = (monthNumber, shorthand, locale) => locale.months[shorthand ?
  */
 export default config => fp => {
   const setupElements = () => {
-    if (!fp.monthElements) {
+    if (!fp.monthElements || fp.monthElements.length < 1) {
       return;
     }
     fp.monthElements.forEach(elem => {

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

@@ -17,6 +17,7 @@
       `cv-dropdown-item ${carbonPrefix}--dropdown-item`,
       { [`${carbonPrefix}--dropdown--selected`]: internalSelected },
     ]"
+    role="menuitem"
   >
     <a
       :aria-checked="internalSelected"

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

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

@@ -149,15 +149,16 @@ export default {
   computed: {
     dialogAttrs() {
       const passive = !this.hasFooter;
-      const attrs = { role: 'dialog' };
-
+      const attrs = {};
+      attrs['aria-label'] = this.$slots.title[0].text;
       if (this.alert) {
         if (passive) {
           attrs.role = 'alert';
         } else {
           attrs.role = 'alertdialog';
-          attrs['aria-describedBy'] = this.uid;
         }
+      } else {
+        attrs.role = 'dialog';
       }
       return attrs;
     },

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

@@ -13,12 +13,13 @@
   >
     <label
       v-if="title"
-      :for="uid"
+      :id="`${uid}-label`"
       :class="[`${carbonPrefix}--label`, { [`${carbonPrefix}--label--disabled`]: disabled }]"
       >{{ title }}</label
     >
 
     <div
+      :aria-labelledby="`${uid}-label`"
       role="listbox"
       tabindex="-1"
       :class="[
@@ -109,7 +110,13 @@
         </div>
       </div>
 
-      <div :id="uid" :class="`${carbonPrefix}--list-box__menu`" role="listbox" ref="list">
+      <div
+        :id="uid"
+        :aria-labelledby="`${uid}-label`"
+        :class="`${carbonPrefix}--list-box__menu`"
+        role="listbox"
+        ref="list"
+      >
         <div
           v-for="(item, index) in dataOptions"
           :key="`multi-select-${index}`"

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

@@ -12,7 +12,7 @@
       ]"
       :data-invalid="isInvalid"
     >
-      <label :for="uid" :class="`${carbonPrefix}--label`">{{ label }}</label>
+      <label v-show="label" :for="uid" :class="`${carbonPrefix}--label`">{{ label }}</label>
       <div
         :class="[
           `${carbonPrefix}--number__input-wrapper`,