@carbon/vue 3.0.23 → 3.0.24

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/vue",
   "license": "Apache-2.0",
-  "version": "3.0.23",
+  "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/compiler-sfc": "^3.5.13",
     "@vue/eslint-config-prettier": "^10.1.0",
-    "@vue/test-utils": "^2.2.4",
+    "@vue/test-utils": "^2.4.6",
     "@vue/vue3-jest": "^27.0.0",
     "accessibility-checker": "^3.1.59",
     "babel-core": "^6.26.3",
@@ -72,14 +72,14 @@
     "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": {

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.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)"
@@ -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"
@@ -187,6 +188,7 @@
               <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);
@@ -361,12 +364,16 @@ const search = ref(null);
 /** @type {Ref<Set<String>>} */
 const expandingRowIds = ref(new Set());
 provide('expanding-row-ids', expandingRowIds);
+
+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,9 +76,11 @@ 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);
+const dataExpandable = ref(tableExpandable.value);
 watch(dataExpandable, value => {
   if (value && !expandingRowIds.value.has('table-expand-row')) {
     console.warn(
@@ -87,9 +90,6 @@ watch(dataExpandable, value => {
   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>`;
 

package/src/components/CvTextInput/CvTextInput.stories.js

@@ -2,6 +2,7 @@ import { storyParametersObject } from '../../global/storybook-utils';
 
 import { CvTextInput, CvTextInputSkeleton } from '.';
 import { ref } from 'vue';
+import { sizeTypes, inputTypes } from './const';
 
 export default {
   title: 'Component/CvTextInput',
@@ -92,17 +93,13 @@ export default {
         category: 'props',
       },
     },
+    size: {
+      type: 'select',
+      options: Array.from(sizeTypes),
+    },
     type: {
-      type: 'string',
-      table: {
-        type: { summary: 'string' },
-        category: 'props',
-        defaultValue: { summary: 'text' },
-      },
-      options: ['text', 'password'],
-      control: {
-        type: 'select',
-      },
+      type: 'select',
+      options: Array.from(inputTypes),
     },
     warnText: {
       type: 'string',

package/src/components/CvTextInput/CvTextInput.vue

@@ -44,6 +44,10 @@
             [`${carbonPrefix}--text-input--light`]: isLight,
             [`${carbonPrefix}--text-input--warning`]: isWarn,
             [`${carbonPrefix}--password-input`]: isPassword,
+            [`${carbonPrefix}--text-input--sm`]: size === 'sm',
+            [`${carbonPrefix}--text-input--md`]: size === 'md',
+            [`${carbonPrefix}--text-input--lg`]: size === 'lg',
+            [`${carbonPrefix}--text-input--xl`]: size === 'xl',
           },
         ]"
         v-bind="$attrs"
@@ -115,7 +119,7 @@ import {
 import { carbonPrefix } from '../../global/settings';
 import { useCvId, props as propsCvId } from '../../use/cvId';
 import { useIsLight, props as propsTheme } from '../../use/cvTheme';
-import { inputTypes } from './const';
+import { inputTypes, sizeTypes } from './const';
 
 const props = defineProps({
   /**
@@ -150,6 +154,16 @@ const props = defineProps({
    * Toggle password visibility
    */
   passwordVisible: { type: Boolean, default: undefined },
+  /** Specify the size of the Text Input. Currently, supports the following:
+   `sm`,
+   `md`,
+   `lg`,
+   `xl` */
+  size: {
+    type: String,
+    default: undefined,
+    validator: value => sizeTypes.has(value),
+  },
   /**
    * Input type, only `text` and `password` are available
    */

package/src/components/CvTextInput/const.js

@@ -1,2 +1,3 @@
 // Currently available types for CvTextInput
 export const inputTypes = new Set(['password', 'text']);
+export const sizeTypes = new Set(['sm', 'md', 'lg', 'xl']);