@carbon/vue 3.0.13 → 3.0.14

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "@carbon/vue",
-  "version": "3.0.12",
+  "version": "3.0.13",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -1049,6 +1049,15 @@
               },
               "default": "false"
             },
+            {
+              "name": "expandable",
+              "description": "Table will have expandable rows",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
             {
               "name": "title",
               "value": {

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@carbon/vue",
   "license": "Apache-2.0",
-  "version": "3.0.13",
+  "version": "3.0.14",
   "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",
   "types": "src/index.d.ts",
   "web-types": "dist/web-types.json",
   "scripts": {
-    "_postinstall": "node prepare.js && node .storybook/postinstall.js",
+    "_postinstall": "node prepare.js && node .storybook/postinstall.js && ibmtelemetry --config=telemetry.yml",
     "prepack": "pinst --disable",
     "postpack": "pinst --enable",
     "build": "vue-cli-service build --target lib --name carbon-vue-3 ./src/index.js --no-clean",
@@ -29,6 +29,7 @@
   ],
   "dependencies": {
     "@carbon/icons-vue": "^10.60.0",
+    "@ibm/telemetry-js": "^1.2.1",
     "@vueuse/core": "^4.11.2",
     "carbon-components": "^10.58.5",
     "eslint-plugin-prettier-vue": "^4.2.0",
@@ -157,7 +158,8 @@
   },
   "files": [
     "/dist",
-    "/src"
+    "/src",
+    "telemetry.yml"
   ],
   "commitlint": {
     "extends": [
@@ -174,5 +176,5 @@
     "url": "git+https://github.com/carbon-design-system/carbon-components-vue.git"
   },
   "sideEffects": true,
-  "gitHead": "44c7e6ba63dee51b7f6426b46283b40deaed413c"
+  "gitHead": "dd069f41ff788b4698a23fe9bfbc12874be40843"
 }

package/src/components/CvAccordion/CvAccordion.stories.mdx

@@ -13,6 +13,11 @@ const open = ref({
   accItem3: false,
   accItem4: false,
 });
+const disabledItems = ref(new Set())
+function onToggleEpisode3(){
+  if (disabledItems.value.has(3)) disabledItems.value.delete(3)
+  else disabledItems.value.add(3)
+}
 
 <Meta title={`${sbCompPrefix}/CvAccordion`} component={CvAccordion} />
 
@@ -24,19 +29,23 @@ export const Template = args => ({
       align: alignConsts[alignConsts.$labels[args.align]],
       size: sizeConsts[sizeConsts.$labels[args.size]],
       onChange: action('change'),
+      disabledItems,
+      onToggleEpisode3,
       open,
     };
   },
   template: args.template,
 });
 const template = `<cv-accordion @change="onChange" :align="align" :size="size">
-  <cv-accordion-item v-for="n in 4" :key="\`acc-item-\${n}\`" :id="n % 2 ? \`acc-item-\${n}\` : ''">
+  <cv-accordion-item v-for="n in 4" :key="\`acc-item-\${n}\`" :id="n % 2 ? \`acc-item-\${n}\` : ''" :disabled="disabledItems.has(n)">
     <template v-slot:title>Episode {{n}} </template>
     <template v-slot:content>
       <p>Did you hear that? They've shut down the main reactor. We'll be destroyed for sure. This is madness! We're doomed! There'll be no escape for the Princess this time. What's that? R2! R2-D2, where are you? At last! Where have you been? They're heading in this direction.</p>
     </template>
   </cv-accordion-item>
-</cv-accordion>`;
+</cv-accordion>
+<div><button @click="onToggleEpisode3">Disable Episode 3</button></div>
+`;
 const Default = Template.bind({});
 Default.args = {};
 Default.parameters = storyParametersObject(

package/src/components/CvAccordion/CvAccordionItem.vue

@@ -15,7 +15,7 @@
   >
     <button
       ref="button"
-      :disabled="disabled"
+      :disabled="disabled || null"
       type="button"
       :class="`${carbonPrefix}--accordion__heading`"
       :aria-expanded="isOpen ? 'true' : 'false'"

package/src/components/CvButton/CvIconButton.vue

@@ -7,7 +7,7 @@
       `${carbonPrefix}--tooltip--${tipPosition || 'bottom'}`,
       `${carbonPrefix}--tooltip--align-${tipAlignment || 'center'}`,
     ]"
-    :disabled="disabled"
+    :disabled="disabled || null"
     @click="$emit('click', $event)"
   >
     <span :class="`${carbonPrefix}--assistive-text`">{{ label }}</span>

package/src/components/CvCheckbox/CvCheckbox.vue

@@ -2,8 +2,9 @@
   <div
     class="cv-checkbox"
     :class="[
-      `${carbonPrefix}--checkbox--${inline ? 'inline' : 'wrapper'}`,
       { [`${carbonPrefix}--form-item`]: formItem },
+      { [`${carbonPrefix}--checkbox--inline`]: inline },
+      { [`${carbonPrefix}--checkbox-wrapper`]: !inline },
     ]"
   >
     <input

package/src/components/CvComboBox/CvComboBox.vue

@@ -62,7 +62,7 @@
           :aria-disabled="disabled || null"
           :aria-expanded="open ? 'true' : 'false'"
           autocomplete="off"
-          :disabled="disabled"
+          :disabled="disabled || null"
           :placeholder="label"
           @input="onInput"
           @focus="inputFocus"

package/src/components/CvDataTable/CvDataTable.vue

@@ -132,7 +132,7 @@
             <thead>
               <tr>
                 <th
-                  v-if="hasExpandables"
+                  v-if="hasExpandingRows"
                   :class="`${carbonPrefix}--table-expand`"
                   :data-previous-value="
                     dataExpandAll ? 'collapsed' : 'expanded'
@@ -181,7 +181,7 @@
               </tr>
             </thead>
 
-            <component :is="hasExpandables ? Empty : 'tbody'">
+            <component :is="hasExpandingRows ? Empty : 'tbody'">
               <slot name="data">
                 <cv-data-table-row
                   v-for="(row, rowIndex) in data"
@@ -246,8 +246,10 @@ import {
   unref,
   useSlots,
   watch,
+  provide,
 } from 'vue';
 import { props as propsCvId, useCvId } from '../../use/cvId';
+//TODO: Remove this store and replace with provide/inject
 import store from './cvDataTableStore';
 import Empty from '../CvEmpty/_CvEmpty.vue';
 
@@ -316,6 +318,8 @@ const props = defineProps({
    * can be sorted
    */
   sortable: { type: Boolean, default: false },
+  /** Table will have expandable rows */
+  expandable: { type: Boolean, default: false },
   title: { type: String, default: undefined },
   /**
    * An array containing a list of columns
@@ -375,6 +379,25 @@ watch(() => props.rowsSelected, updateRowsSelected);
 const searchContainer = ref(null);
 const magnifier = ref(null);
 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);
+onMounted(() => {
+  if (props.expandable) expandingRowIds.value.add('table-expand-row');
+});
+watch(
+  () => props.expandable,
+  () => {
+    if (props.expandable) expandingRowIds.value.add('table-expand-row');
+    else expandingRowIds.value.delete('table-expand-row');
+  }
+);
+
 onMounted(() => {
   if (searchContainer.value) {
     magnifier.value?.addEventListener('blur', checkSearchFocus);
@@ -382,7 +405,6 @@ onMounted(() => {
   }
   if (props.initialSearchValue) clearSearchVisible.value = true;
   updateRowsSelected();
-  store.setSomeExpandingRows(uid);
 });
 
 onUnmounted(() => {
@@ -428,6 +450,7 @@ const isSortable = computed(() => {
   // is any column sortable
   return props.sortable || store.someSortableHeadings(uid.value);
 });
+
 function isColSortable(c) {
   const col = unref(c);
   // is specific column or all sortable
@@ -439,10 +462,6 @@ const hasTableHeader = computed(() => {
   return props.title || isHelper.value;
 });
 
-const hasExpandables = computed(() => {
-  return store.someExpandingRows(uid);
-});
-
 const hasOverflowMenu = computed(() => {
   return (
     props.overflowMenu === true ||

package/src/components/CvDataTable/CvDataTableRow.vue

@@ -53,6 +53,7 @@ import {
   useAttrs,
   useSlots,
   watch,
+  inject,
 } from 'vue';
 import store from './cvDataTableStore';
 import { getBus } from '../../global/component-utils/event-bus';
@@ -63,7 +64,16 @@ const props = defineProps({
 });
 const cvId = useCvId(props, true);
 
+/** @type {Ref<Set<String>>} */
+const expandingRowIds = inject('expanding-row-ids', ref(new Set()));
 const dataExpandable = ref(false);
+watch(dataExpandable, () => {
+  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 slots = useSlots();
@@ -118,9 +128,7 @@ watch(
     });
   }
 );
-const dataSomeExpandingRows = computed(() => {
-  return store.someExpandingRows(parent);
-});
+
 function onExpandedChange(val) {
   const row = store.findRow(parent, cvId);
   store.updateRow(parent, {

package/src/components/CvDataTable/_CvDataTableRowInner.vue

@@ -21,7 +21,6 @@
       >
         <ChevronRight16 :class="`${carbonPrefix}--table-expand__svg`" />
       </button>
-      <div v-else>{{ expandingRow }}</div>
     </td>
     <td
       v-if="hasBatchActions"
@@ -66,7 +65,15 @@ import CvCheckbox from '../CvCheckbox';
 import CvOverflowMenu from '../CvOverflowMenu';
 import CvOverflowMenuItem from '../CvOverflowMenu/CvOverflowMenuItem.vue';
 import ChevronRight16 from '@carbon/icons-vue/es/chevron--right/16';
-import { computed, onMounted, onUpdated, ref, useSlots, watch } from 'vue';
+import {
+  computed,
+  onMounted,
+  onUpdated,
+  ref,
+  useSlots,
+  watch,
+  inject,
+} from 'vue';
 import store from './cvDataTableStore';
 import { getBus } from '../../global/component-utils/event-bus';
 
@@ -82,8 +89,10 @@ const props = defineProps({
   rowId: { type: String, default: undefined },
 });
 
+/** @type {Ref<UnwrapRef<Set<>>>} */
+const expandingRowIds = inject('expanding-row-ids', ref(new Set()));
 const dataSomeExpandingRows = computed(() => {
-  return store.someExpandingRows(parent);
+  return expandingRowIds.value.size > 0;
 });
 
 const overflowMenuButtons = computed(() => {

package/src/components/CvDataTable/cvDataTableStore.js

@@ -1,3 +1,4 @@
+//TODO: Remove this store and replace with provide/inject
 import { reactive, unref } from 'vue';
 let loggerEnabled = false;
 try {

package/src/components/CvDatePicker/CvDatePicker.vue

@@ -24,7 +24,7 @@
             'single',
             'range',
           ].includes(getKind),
-          [`${carbonPrefix}--date-picker--nolabel`]: getDateLabel !== undefined,
+          [`${carbonPrefix}--date-picker--nolabel`]: !getDateLabel,
         }"
       >
         <label
@@ -191,18 +191,16 @@ const getKind = computed({
   },
 });
 
-const getDateLabel = computed({
-  get() {
-    if (props.kind === 'range' && !props.dateLabel) {
+const getDateLabel = computed(() => {
+  if (props.dateLabel !== undefined) {
+    return props.dateLabel;
+  } else {
+    if (props.kind === 'range') {
       return 'Start date';
+    } else {
+      return 'Date';
     }
-
-    if (!props.dateLabel) {
-      return 'Date label';
-    }
-
-    return props.dateLabel;
-  },
+  }
 });
 
 const isRange = computed(() => {

package/src/components/CvDropdown/CvDropdown.stories.mdx

@@ -150,10 +150,14 @@ const skeletonTemplate = `
 Notes:
 
 - You can place a Dropdown inline with other content by using the inline variant
-  Migration notes:
-- Added the `size` option to match Carbon React
+
+Migration notes:
+- **Breaking**. The selected item contents are no longer copied directly to the "internal caption". If you are trying to style both
+the drop-down item and its appearance after it is selected, please see the `internal-caption` slot. See the "Slots"
+story for an example.- Added the `size` option to match Carbon React
 - Added the `warningMessage` option to match Carbon React
 
+
 <Canvas>
   <Story
     name="Default"

package/src/components/CvDropdown/CvDropdown.vue

@@ -77,7 +77,7 @@
           :aria-expanded="open ? 'true' : 'false'"
           :aria-labelledby="ariaLabeledBy"
           :class="`${carbonPrefix}--list-box__field`"
-          :disabled="disabled"
+          :disabled="disabled || null"
           aria-haspopup="true"
           type="button"
         >
@@ -293,9 +293,9 @@ watch(open, () => {
 });
 const ariaLabeledBy = computed(() => {
   if (props.label) {
-    return `${uid}-label ${uid}-value`;
+    return `${uid.value}-label ${uid.value}-value`;
   } else {
-    return `${uid}-value`;
+    return `${uid.value}-value`;
   }
 });
 const internalCaption = computed(() => {

package/src/components/CvFileUploader/CvFileUploader.vue

@@ -34,7 +34,7 @@
         ref="fileInput"
         :class="`${carbonPrefix}--file-input`"
         :accept="accept"
-        :disabled="disabled"
+        :disabled="disabled || null"
         type="file"
         v-bind="$attrs"
         data-file-uploader
@@ -70,7 +70,7 @@
           ref="fileInput"
           :class="`${carbonPrefix}--file-input`"
           :accept="accept"
-          :disabled="disabled"
+          :disabled="disabled || null"
           type="file"
           v-bind="$attrs"
           tabindex="-1"

package/src/components/CvNotification/CvToastNotification.stories.js

@@ -1,6 +1,6 @@
 import { action } from '@storybook/addon-actions';
-import { sbCompPrefix } from '../../global/storybook-utils';
-
+import DocumentationTemplate from './CvToastNotificationTemplate.mdx';
+import { sbCompPrefix, storySourceCode } from '../../global/storybook-utils';
 import { CvToastNotification, CvNotificationConsts } from '.';
 
 export default {
@@ -85,6 +85,11 @@ export default {
       description: 'Caption slot for more custom content.',
     },
   },
+  parameters: {
+    docs: {
+      page: DocumentationTemplate,
+    },
+  },
 };
 
 const template = `
@@ -118,58 +123,113 @@ const Template = args => {
   };
 };
 
-export const Info = Template.bind({});
-Info.args = {
+export const Default = Template.bind({});
+Default.args = {
   kind: CvNotificationConsts.notificationKinds[0],
+  title: 'info',
+  subTitle: 'subtitle',
+  caption: 'more information',
+};
+Default.parameters = {
+  docs: { source: { code: storySourceCode(template, Default.args) } },
 };
 
 export const InfoSquare = Template.bind({});
 InfoSquare.storyName = 'Info square';
 InfoSquare.args = {
   kind: CvNotificationConsts.notificationKinds[1],
+  title: 'info²',
+  subTitle: 'subtitle',
+  caption: 'more information',
+};
+InfoSquare.parameters = {
+  docs: { source: { code: storySourceCode(template, InfoSquare.args) } },
 };
 
 export const Success = Template.bind({});
 Success.args = {
   kind: CvNotificationConsts.notificationKinds[2],
+  title: 'success',
+  subTitle: 'subtitle',
+  caption: 'more information',
+};
+Success.parameters = {
+  docs: { source: { code: storySourceCode(template, Success.args) } },
 };
-
 export const Warning = Template.bind({});
 Warning.args = {
   kind: CvNotificationConsts.notificationKinds[3],
+  title: 'warning',
+  subTitle: 'subtitle',
+  caption: 'more information',
+};
+Warning.parameters = {
+  docs: { source: { code: storySourceCode(template, Warning.args) } },
 };
 
 export const WarningAlt = Template.bind({});
 WarningAlt.storyName = 'Warning (alt)';
 WarningAlt.args = {
   kind: CvNotificationConsts.notificationKinds[4],
+  title: 'warning △',
+  subTitle: 'subtitle',
+  caption: 'more information',
+};
+WarningAlt.parameters = {
+  docs: { source: { code: storySourceCode(template, WarningAlt.args) } },
 };
 
 export const Error = Template.bind({});
 Error.args = {
   kind: CvNotificationConsts.notificationKinds[5],
+  title: 'error',
+  subTitle: 'subtitle',
+  caption: 'more information',
+};
+Error.parameters = {
+  docs: { source: { code: storySourceCode(template, Error.args) } },
 };
 
 export const SlotDefault = Template.bind({});
 SlotDefault.args = {
   kind: CvNotificationConsts.notificationKinds[4],
+  title: 'title',
+  subTitle: 'subtitle',
   defaultSlot: true,
 };
+SlotDefault.parameters = {
+  docs: { source: { code: storySourceCode(template, SlotDefault.args) } },
+};
 
 export const SlotTitle = Template.bind({});
 SlotTitle.args = {
   kind: CvNotificationConsts.notificationKinds[0],
   titleSlot: true,
+  subTitle: 'subtitle',
+  caption: 'more information',
+};
+SlotTitle.parameters = {
+  docs: { source: { code: storySourceCode(template, SlotTitle.args) } },
 };
 
 export const SlotSubtitle = Template.bind({});
 SlotSubtitle.args = {
   kind: CvNotificationConsts.notificationKinds[3],
   subtitleSlot: true,
+  title: 'title',
+  caption: 'more information',
+};
+SlotSubtitle.parameters = {
+  docs: { source: { code: storySourceCode(template, SlotSubtitle.args) } },
 };
 
 export const SlotCaption = Template.bind({});
 SlotCaption.args = {
   kind: CvNotificationConsts.notificationKinds[1],
   captionSlot: true,
+  title: 'title',
+  subTitle: 'subtitle',
+};
+SlotCaption.parameters = {
+  docs: { source: { code: storySourceCode(template, SlotCaption.args) } },
 };

package/src/components/CvNotification/CvToastNotificationTemplate.mdx

@@ -0,0 +1,17 @@
+import { Meta, Title,  Primary, Stories } from '@storybook/addon-docs';
+
+<Meta isTemplate />
+
+<Title />
+
+Migration notes:
+
+- **Breaking**. The `subTitle` property no longer renders html. Please use the `subtitle` slot instead.
+- **Breaking**. The `caption` property no longer renders html. Please use the `caption` slot instead.
+- The `title` content can now be provided in the `title` slot.
+
+<Primary />
+
+<Controls />
+
+<Stories />

package/src/components/CvNumberInput/CvNumberInput.vue

@@ -38,7 +38,7 @@
           :data-invalid="isInvalid || null"
           type="number"
           v-bind="$attrs"
-          :disabled="disabled"
+          :disabled="disabled || null"
           :step="step"
           :min="min"
           :max="max"
@@ -53,7 +53,7 @@
             :class="`${carbonPrefix}--number__control-btn down-icon`"
             type="button"
             :aria-label="ariaLabelForDownButton"
-            :disabled="disabled"
+            :disabled="disabled || null"
             aria-live="polite"
             aria-atomic="true"
             @click="doDown"
@@ -67,7 +67,7 @@
             :class="`${carbonPrefix}--number__control-btn up-icon`"
             type="button"
             :aria-label="ariaLabelForUpButton"
-            :disabled="disabled"
+            :disabled="disabled || null"
             aria-live="polite"
             aria-atomic="true"
             @click="doUp"

package/src/components/CvOverflowMenu/CvOverflowMenuItem.vue

@@ -13,8 +13,8 @@
     <button
       type="button"
       :class="`${carbonPrefix}--overflow-menu-options__btn`"
-      :data-floating-menu-primary-focus="primaryFocus"
-      :disabled="disabled"
+      :data-floating-menu-primary-focus="primaryFocus || null"
+      :disabled="disabled || null"
       @click="onClick"
     >
       <span :class="`${carbonPrefix}--overflow-menu-options__option-content`">