@carbon/vue 3.0.22 → 3.0.24

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "@carbon/vue",
-  "version": "3.0.21",
+  "version": "3.0.23",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -74,12 +74,10 @@
           ],
           "slots": [
             {
-              "name": "title",
-              "description": "title of the accordion item"
+              "name": "title"
             },
             {
-              "name": "content",
-              "description": "content of accordion item"
+              "name": "content"
             }
           ],
           "source": {
@@ -761,6 +759,29 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "CvContent",
+          "description": "",
+          "attributes": [
+            {
+              "name": "tagType",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "'main'"
+            }
+          ],
+          "slots": [
+            {
+              "name": "default"
+            }
+          ],
+          "source": {
+            "module": "./src/components/CvUIShell/CvContent.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "CvContentSwitcher",
           "description": "",
@@ -1918,6 +1939,14 @@
               },
               "default": "[]"
             },
+            {
+              "name": "multiple",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "true"
+            },
             {
               "name": "removable",
               "value": {
@@ -3219,6 +3248,15 @@
               },
               "default": "undefined"
             },
+            {
+              "name": "size",
+              "description": "Specify the size of the Text Input. Currently, supports the following:\n   `sm`,\n   `md`,\n   `lg`",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "undefined"
+            },
             {
               "name": "warnText",
               "value": {
@@ -4985,6 +5023,15 @@
               },
               "default": "undefined"
             },
+            {
+              "name": "size",
+              "description": "Specify the size of the Text Input. Currently, supports the following:\n   `sm`,\n   `md`,\n   `lg`,\n   `xl`",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "undefined"
+            },
             {
               "name": "type",
               "description": "Input type, only `text` and `password` are available",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/vue",
   "license": "Apache-2.0",
-  "version": "3.0.22",
+  "version": "3.0.24",
   "description": "A collection of components for the Carbon Design System built using Vue.js",
   "packageManager": "yarn@3.2.0",
   "main": "dist/carbon-vue-3.umd.min.js",
@@ -29,7 +29,7 @@
     "storybook"
   ],
   "dependencies": {
-    "@carbon/icons-vue": "^10.60.0",
+    "@carbon/icons-vue": "^10.102.0",
     "@ibm/telemetry-js": "^1.5.1",
     "@vueuse/core": "^4.11.2",
     "carbon-components": "^10.58.5",
@@ -50,9 +50,9 @@
     "@vue/cli-plugin-eslint": "^5.0.8",
     "@vue/cli-plugin-unit-jest": "^5.0.8",
     "@vue/cli-service": "^5.0.8",
-    "@vue/compiler-sfc": "^3.3.4",
-    "@vue/eslint-config-prettier": "^7.0.0",
-    "@vue/test-utils": "^2.2.4",
+    "@vue/compiler-sfc": "^3.5.13",
+    "@vue/eslint-config-prettier": "^10.1.0",
+    "@vue/test-utils": "^2.4.6",
     "@vue/vue3-jest": "^27.0.0",
     "accessibility-checker": "^3.1.59",
     "babel-core": "^6.26.3",
@@ -66,20 +66,20 @@
     "husky": "^7.0.4",
     "jest": "^27.5.1",
     "lerna": "^6.5.1",
-    "lint-staged": "^12.5.0",
+    "lint-staged": "^15.2.10",
     "postcss": "^8.4.19",
     "postcss-loader": "^8.1.1",
     "prettier": "^2.8.0",
     "sass": "^1.56.1",
     "sass-loader": "^16.0.2",
-    "storybook": "^6.5.13",
+    "storybook": "^6.5.16",
     "style-loader": "^3.3.1",
     "stylelint": "^14.15.0",
     "stylelint-config-property-sort-order-smacss": "^9.0.0",
     "stylelint-config-sass-guidelines": "^9.0.1",
-    "vue": "^3.3.4",
+    "vue": "^3.5.13",
     "vue-docgen-web-types": "^0.1.8",
-    "vue-loader": "^17.0.1",
+    "vue-loader": "^17.4.2",
     "webpack": "^5.75.0"
   },
   "eslintConfig": {
@@ -170,7 +170,10 @@
   },
   "lint-staged": {
     "*.{scss,css,js,md,vue}": [
-      "yarn format:staged"
+      "prettier --write"
+    ],
+    "*.{js,vue}": [
+      "eslint --fix --max-warnings 0"
     ]
   },
   "repository": {

package/src/components/CvAccordion/CvAccordionItem.vue

@@ -1,10 +1,10 @@
 <template>
   <li
+    data-allow-mismatch="children"
     data-accordion-item
     class="cv-accordion-item"
     :class="[
       `${carbonPrefix}--accordion__item`,
-
       {
         [`${carbonPrefix}--accordion__item--disabled`]: disabled,
         [`${carbonPrefix}--accordion__item--active`]: isOpen,
@@ -23,17 +23,11 @@
       @click.prevent.stop="onClick"
     >
       <ChevronRight16 :class="`${carbonPrefix}--accordion__arrow`" />
-
       <p :class="`${carbonPrefix}--accordion__title`">
-        <!-- @slot title of the accordion item -->
-
         <slot name="title"></slot>
       </p>
     </button>
-
     <div :id="cvId" :class="`${carbonPrefix}--accordion__content`">
-      <!-- @slot content of accordion item -->
-
       <slot name="content"></slot>
     </div>
   </li>

package/src/components/CvDataTable/CvDataTable.stories.mdx

@@ -154,7 +154,7 @@ const defaultTemplate = `
 const expandingRowsTemplate = defaultTemplate.replace(
   "<!-- Add optional expanding data here -->",
   `<template #expandedContent>{{row.desc}}</template>`)
-  .replace('@search="onSearch"', '')
+  .replace('@search="onSearch"', ':expandable="true"')
   .replace('testData', 'originalTestData')
 const skeletonTemplate = `
 <cv-data-table-skeleton
@@ -213,6 +213,7 @@ const vModelTemplate = defaultTemplate
   }
   ```
 - The search bar appears only if the search event is listened for.
+- If your table has expanding rows, you MUST set the `expandable` property on CvTable to `true`. `<cv-table :expandable="true" ...`
 
 **Row attributes:**
 - aria-label-for-batch-checkbox: Aria label for batch checkbox. default 'Select row N for batch action'.
@@ -283,34 +284,17 @@ when no items were select, please now use the new property `stickyBatchActive`.
   <Story
     name="Expanding rows"
     parameters={{
-      controls: { exclude: ['default',
-          'template',
-          'overflow-menu-click',
-          'row-expanded',
-          'row-select-change',
-          'row-select-changes',
-          'search',
-          'sort',
-          'actions',
-          'batch-actions',
-          'data',
-          'headings',
-          'helper-text',
-          'items-selected',
-          'of-n-pages',
-          'range-text',
-          'skeleton',
-          'update:rowsSelected',
-        ] },
+      controls: { include: [ "helperText", "title", "hasExpandAll"] },
       docs: { source: { code: storySourceCode(expandingRowsTemplate, Template.args) } },
     }}
     args={{
       template: expandingRowsTemplate,
-      title: 'Table with expanding rows',
+      title: 'Table with expanding rows - NOTE: expandable property must be set to true',
       helperText: 'Click row to expand',
       useActions: false,
       useBatchActions: false,
-      usePagination: true
+      usePagination: true,
+      expandable: true
     }}
     argTypes={{
       rowSize: { control: 'select', default: 'standard', options: ['compact', 'short', 'standard', 'tall'] },

package/src/components/CvDataTable/CvDataTable.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :id="uid" :style="tableStyle" class="cv-data-table">
+  <div :id="cvId" :style="tableStyle" class="cv-data-table">
     <div
       :class="[
         `${carbonPrefix}--data-table-container`,
@@ -55,7 +55,7 @@
           <div
             v-if="onSearch"
             ref="searchContainer"
-            :aria-labelledby="`${uid}-search`"
+            :aria-labelledby="`${cvId}-search`"
             :class="[
               `${carbonPrefix}--search `,
               {
@@ -73,20 +73,20 @@
               <Search16 :class="`${carbonPrefix}--search-magnifier-icon`" />
             </div>
             <label
-              :id="`${uid}-search`"
-              :for="`searchbox-${uid}`"
+              :id="`${cvId}-search`"
+              :for="`searchbox-${cvId}`"
               :class="`${carbonPrefix}--label`"
               >{{ searchLabel }}</label
             >
             <input
-              :id="`searchbox-${uid}`"
+              :id="`searchbox-${cvId}`"
               ref="search"
               v-model="searchValue"
               :class="`${carbonPrefix}--search-input`"
               type="text"
               role="searchbox"
               :placeholder="searchPlaceholder"
-              :aria-labelledby="`searchbox-${uid}`"
+              :aria-labelledby="`searchbox-${cvId}`"
               @input="onInternalSearch"
               @click="checkSearchExpand(true)"
               @keydown.esc.prevent="checkSearchExpand(false)"
@@ -132,7 +132,7 @@
             <thead>
               <tr>
                 <th
-                  v-if="hasExpandingRows"
+                  v-if="expandable"
                   :class="`${carbonPrefix}--table-expand`"
                   :data-previous-value="
                     dataExpandAll ? 'collapsed' : 'expanded'
@@ -160,6 +160,7 @@
                   <cv-checkbox-skeleton v-if="isSkeleton" />
                   <cv-checkbox
                     v-else
+                    :id="`${cvId}-headingCheck`"
                     v-model="headingChecked"
                     :form-item="false"
                     value="headingCheck"
@@ -183,10 +184,11 @@
               </tr>
             </thead>
 
-            <component :is="hasExpandingRows ? Empty : 'tbody'">
+            <component :is="expandable ? Empty : 'tbody'">
               <slot name="data">
                 <cv-data-table-row
                   v-for="(row, rowIndex) in data"
+                  :id="`${cvId}-${rowIndex}`"
                   :key="`row:${rowIndex}`"
                   ref="dataRows"
                   :value="`${rowIndex}`"
@@ -211,6 +213,7 @@
     <cv-pagination
       v-if="pagination"
       v-bind="internalPagination"
+      :id="`${cvId}-pagination`"
       :number-of-items="internalNumberOfItems"
       @change="$emit('pagination', $event)"
     >
@@ -343,7 +346,7 @@ const props = defineProps({
   onSearch: { type: Function, default: undefined },
   ...propsCvId,
 });
-const uid = useCvId(props, true);
+const cvId = useCvId(props, true);
 
 const isSkeleton = ref(props.skeleton);
 provide('is-skeleton', isSkeleton);
@@ -360,17 +363,17 @@ const search = ref(null);
 
 /** @type {Ref<Set<String>>} */
 const expandingRowIds = ref(new Set());
-const hasExpandingRows = computed(() => {
-  return expandingRowIds.value.size > 0;
-});
 provide('expanding-row-ids', expandingRowIds);
-provide('has-expanding-rows', hasExpandingRows);
+
+const tableExpandable = ref(props.expandable);
+provide('table-expandable', tableExpandable);
 onMounted(() => {
   if (props.expandable) expandingRowIds.value.add('table-expand-row');
 });
 watch(
   () => props.expandable,
   () => {
+    tableExpandable.value = props.expandable;
     if (props.expandable) expandingRowIds.value.add('table-expand-row');
     else expandingRowIds.value.delete('table-expand-row');
   }

package/src/components/CvDataTable/CvDataTableRow.vue

@@ -1,10 +1,11 @@
 <template>
   <tbody
-    v-if="dataSomeExpandingRows"
+    v-if="tableExpandable"
     :id="cvId"
     class="cv-data-table-row cv-data-table-row--expandable"
   >
     <cv-data-table-row-inner
+      :id="`${cvId}-ri`"
       ref="row"
       :row-id="cvId"
       v-bind="$attrs"
@@ -75,16 +76,20 @@ watch(
   () => (rowValue.value = props.value)
 );
 
+/** @type {Ref<boolean>} */
+const tableExpandable = inject('table-expandable', ref(false));
 /** @type {Ref<Set<String>>} */
 const expandingRowIds = inject('expanding-row-ids', ref(new Set()));
-const dataExpandable = ref(false);
-watch(dataExpandable, () => {
+const dataExpandable = ref(tableExpandable.value);
+watch(dataExpandable, value => {
+  if (value && !expandingRowIds.value.has('table-expand-row')) {
+    console.warn(
+      `row ${cvId.value} is expandable but the expandable property is not set to true on the table`
+    );
+  }
   if (dataExpandable.value) expandingRowIds.value.add(cvId.value);
   else expandingRowIds.value?.delete(cvId.value);
 });
-const dataSomeExpandingRows = computed(() => {
-  return expandingRowIds.value?.size > 0;
-});
 const attrs = useAttrs();
 const rowIds = inject('row-ids', ref(new Set()));
 const expandedRowIds = inject('expanded-row-ids', ref(new Set()));

package/src/components/CvDataTable/_CvDataTableRowInner.vue

@@ -29,6 +29,7 @@
       <cv-checkbox-skeleton v-if="isSkeleton" />
       <cv-checkbox
         v-else
+        :id="`${cvId}-row-checked`"
         ref="rowChecked"
         v-model="dataChecked"
         :form-item="false"
@@ -43,7 +44,10 @@
     </td>
     <slot />
     <td v-if="hasOverflowMenu" :class="`${carbonPrefix}--table-column-menu`">
-      <cv-overflow-menu v-bind="overflowMenuOptions">
+      <cv-overflow-menu
+        v-bind="overflowMenuOptions"
+        :id="`${cvId}-overflow-menu`"
+      >
         <cv-overflow-menu-item
           v-for="(item, index) in overflowMenuButtons"
           :key="`${index}`"
@@ -75,7 +79,9 @@ import {
   useSlots,
   watch,
   inject,
+  useAttrs,
 } from 'vue';
+import { useCvId } from '../../use/cvId';
 
 const props = defineProps({
   ariaLabelForBatchCheckbox: { type: String, default: undefined },
@@ -89,6 +95,9 @@ const props = defineProps({
   rowId: { type: String, default: undefined },
 });
 
+const attrs = useAttrs();
+const cvId = useCvId(attrs, true);
+
 const isSkeleton = inject('is-skeleton', ref(false));
 /** @type {Ref<UnwrapRef<Set<>>>} */
 const expandingRowIds = inject('expanding-row-ids', ref(new Set()));

package/src/components/CvFileUploader/CvFileUploader.stories.mdx

@@ -112,9 +112,10 @@ export const argTypes = {
   // attributes
   multiple: {
     type: 'boolean',
+    defaultValue: true,
     table: {
       type: { summary: 'boolean' },
-      category: 'attributes',
+      category: 'props',
     },
     description: 'standard input attribute for file type, allow multiple files to be added in a single prompt',
   },

package/src/components/CvFileUploader/CvFileUploader.vue

@@ -37,6 +37,7 @@
         :disabled="disabled || null"
         type="file"
         v-bind="$attrs"
+        :multiple="multiple"
         data-file-uploader
         data-target="[data-file-container]"
         @change="onChange"
@@ -73,6 +74,7 @@
           :disabled="disabled || null"
           type="file"
           v-bind="$attrs"
+          :multiple="multiple"
           tabindex="-1"
           data-file-uploader
           data-target="[data-file-container]"
@@ -147,6 +149,7 @@ const props = defineProps({
   },
   label: { type: String, default: undefined },
   modelValue: { type: Array, default: () => [] },
+  multiple: { type: Boolean, default: true },
   removable: Boolean,
   removeAriaLabel: { type: String, default: undefined },
   ...cvIdProps,
@@ -271,7 +274,12 @@ function onDragEvent(evt) {
 
   if (evt.type === 'drop') {
     evt.preventDefault();
-    addFiles(evt.dataTransfer.files);
+    if (props.multiple) {
+      addFiles(evt.dataTransfer.files);
+    } else {
+      internalFiles.value = [];
+      addFiles([evt.dataTransfer.files[0]]);
+    }
     allowDrop.value = false;
   }
 }

package/src/components/CvMultiSelect/CvMultiSelect.vue

@@ -16,7 +16,7 @@
   >
     <label
       v-if="title"
-      :id="`${uid}-label`"
+      :id="`${cvId}-label`"
       :class="[
         `${carbonPrefix}--label`,
         { [`${carbonPrefix}--label--disabled`]: disabled },
@@ -24,7 +24,7 @@
       >{{ title }}</label
     >
     <div
-      :aria-labelledby="`${uid}-label`"
+      :aria-labelledby="`${cvId}-label`"
       role="listbox"
       tabindex="-1"
       :class="[
@@ -68,8 +68,8 @@
         :aria-disabled="disabled || null"
         aria-haspopup="listbox"
         :aria-expanded="data.open ? 'true' : 'false'"
-        :aria-owns="uid"
-        :aria-controls="uid"
+        :aria-owns="cvId"
+        :aria-controls="cvId"
         tabindex="0"
         :aria-label="data.open ? 'close menu' : 'open menu'"
         data-toggle="true"
@@ -105,7 +105,7 @@
                   !internalFilter || internalFilter.length === 0,
               },
             ]"
-            :aria-controls="uid"
+            :aria-controls="cvId"
             aria-autocomplete="list"
             role="combobox"
             :aria-expanded="data.open ? 'true' : 'false'"
@@ -141,9 +141,9 @@
       </button>
 
       <div
-        :id="uid"
+        :id="cvId"
         ref="elList"
-        :aria-labelledby="`${uid}-label`"
+        :aria-labelledby="`${cvId}-label`"
         :class="`${carbonPrefix}--list-box__menu`"
         role="listbox"
       >
@@ -168,6 +168,7 @@
             :title="item.label"
           >
             <cv-checkbox
+              :id="`${cvId}-cb-${item.value}`"
               v-model="data.selectedItems"
               tabindex="-1"
               :form-item="false"
@@ -359,7 +360,7 @@ const props = defineProps({
   ...propsCvId,
   ...propsTheme,
 });
-const uid = useCvId(props, true);
+const cvId = useCvId(props, true);
 const isLight = useIsLight(props);
 
 const data = reactive({

package/src/components/CvNumberInput/CvNumberInput.stories.js

@@ -1,6 +1,7 @@
 import { ref } from 'vue';
 import { storyParametersObject } from '../../global/storybook-utils';
 import CvNumberInput from './CvNumberInput.vue';
+import { sizeTypes } from './const';
 
 export default {
   title: 'Component/CvNumberInput',
@@ -55,6 +56,10 @@ export default {
       },
       description: '`step` attribute for input HTML element',
     },
+    size: {
+      type: 'select',
+      options: Array.from(sizeTypes),
+    },
     // props
     formItem: {
       type: 'boolean',

package/src/components/CvNumberInput/CvNumberInput.vue

@@ -10,6 +10,9 @@
         {
           [`${carbonPrefix}--number--light`]: isLight,
           [`${carbonPrefix}--number--helpertext`]: isHelper,
+          [`${carbonPrefix}--number--sm`]: size === 'sm',
+          [`${carbonPrefix}--number--md`]: size === 'md',
+          [`${carbonPrefix}--number--lg`]: size === 'lg',
           [`cv-number-input`]: !formItem,
         },
       ]"
@@ -105,6 +108,7 @@ import { props as propsTheme } from '../../use/cvTheme';
 import { useCvInputHelpers } from '../../use/cvInput';
 import { carbonPrefix } from '../../global/settings';
 import CvWrapper from '../CvWrapper/CvWrapper';
+import { sizeTypes } from './const';
 
 const props = defineProps({
   disabled: Boolean,
@@ -148,6 +152,15 @@ const props = defineProps({
     type: [String, Number],
     default: undefined,
   },
+  /** Specify the size of the Text Input. Currently, supports the following:
+   `sm`,
+   `md`,
+   `lg` */
+  size: {
+    type: String,
+    default: undefined,
+    validator: value => sizeTypes.has(value),
+  },
   warnText: {
     type: String,
     default: undefined,

package/src/components/CvNumberInput/const.js

@@ -0,0 +1 @@
+export const sizeTypes = new Set(['sm', 'md', 'lg']);

package/src/components/CvPagination/CvPagination.stories.mdx

@@ -30,6 +30,7 @@ export const Template = args => ({
 const defaultTemplate = `
   <cv-pagination
     @change="onChange"
+    id="pagination-story"
     :backward-text="backwardText"
     :forward-text="forwardText"
     :page-number-label="pageNumberLabel"

package/src/components/CvPagination/CvPagination.vue

@@ -2,6 +2,7 @@
   <div :class="`cv-pagination ${carbonPrefix}--pagination`" data-pagination>
     <div :class="`${carbonPrefix}--pagination__left`">
       <cv-select
+        :id="`${cvId}-select-page-size`"
         ref="pageSizeSelect"
         :class="`${carbonPrefix}--select__item-count`"
         :label="pageSizesLabel"
@@ -29,6 +30,7 @@
     <div :class="`${carbonPrefix}--pagination__right`">
       <cv-select
         v-if="numberOfItems !== Infinity"
+        :id="`${cvId}-select-page`"
         ref="pageSelect"
         :class="`${carbonPrefix}--select__page-number`"
         :label="pageNumberLabel"
@@ -82,10 +84,11 @@
 
 <script setup>
 import { carbonPrefix } from '../../global/settings';
-import { computed, nextTick, onMounted, ref, watch } from 'vue';
+import { computed, nextTick, onMounted, ref, useAttrs, watch } from 'vue';
 import { CaretLeft16, CaretRight16 } from '@carbon/icons-vue';
 import CvSelect from '../CvSelect';
 import CvSelectOption from '../CvSelect/CvSelectOption.vue';
+import { useCvId } from '../../use/cvId';
 
 const emit = defineEmits(['change']);
 
@@ -101,6 +104,8 @@ const props = defineProps({
   page: { type: Number, default: undefined },
   pageSizes: { type: Array, default: () => [10, 20, 30, 40, 50] },
 });
+const attrs = useAttrs();
+const cvId = useCvId(attrs, true);
 
 const firstItem = ref(1);
 const pageValue = ref(1);

package/src/components/CvRadioButton/__tests__/__snapshots__/CvRadioButton.spec.js.snap

@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`CvRadioButton matches render when checked 1`] = `<div class="cv-radio-button bx--radio-button-wrapper"><input id="1" class="bx--radio-button" type="radio" value=""><!-- symbol causes problem in codepen? --><label for="1" class="bx--radio-button__label"><span class="bx--radio-button__appearance"></span><span class="">test label</span></label></div>`;
+exports[`CvRadioButton matches render when checked 1`] = `<div class="cv-radio-button bx--radio-button-wrapper"><input id="1" checked="" class="bx--radio-button" type="radio" value=""><!-- symbol causes problem in codepen? --><label for="1" class="bx--radio-button__label"><span class="bx--radio-button__appearance"></span><span class="">test label</span></label></div>`;
 
-exports[`CvRadioButton matches render when modelValue is equal to value 1`] = `<div class="cv-radio-button bx--radio-button-wrapper"><input id="1" class="bx--radio-button" type="radio" value="test value"><!-- symbol causes problem in codepen? --><label for="1" class="bx--radio-button__label"><span class="bx--radio-button__appearance"></span><span class="">test label</span></label></div>`;
+exports[`CvRadioButton matches render when modelValue is equal to value 1`] = `<div class="cv-radio-button bx--radio-button-wrapper"><input id="1" checked="" class="bx--radio-button" type="radio" value="test value"><!-- symbol causes problem in codepen? --><label for="1" class="bx--radio-button__label"><span class="bx--radio-button__appearance"></span><span class="">test label</span></label></div>`;
 
 exports[`CvRadioButton matches render when modelValue is not equal to value 1`] = `<div class="cv-radio-button bx--radio-button-wrapper"><input id="1" class="bx--radio-button" type="radio" value="test value"><!-- symbol causes problem in codepen? --><label for="1" class="bx--radio-button__label"><span class="bx--radio-button__appearance"></span><span class="">test label</span></label></div>`;