@carbon/vue 3.0.21 → 3.0.22

package/src/components/CvDataTable/CvDataTableHeading.vue

@@ -1,10 +1,5 @@
 <template>
-  <th
-    :id="cvId"
-    ref="el"
-    :aria-sort="internalOrder"
-    :style="skeleton && headingStyle"
-  >
+  <th :id="cvId" :aria-sort="internalOrder" :style="skeleton && headingStyle">
     <button
       v-if="sortable"
       type="button"
@@ -46,9 +41,7 @@ import Arrows16 from '@carbon/icons-vue/es/arrows--vertical/16';
 import CvEmpty from '../CvEmpty/_CvEmpty.vue';
 import { props as propsCvId, useCvId } from '../../use/cvId';
 import { carbonPrefix } from '../../global/settings';
-import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
-import { getBus } from '../../global/component-utils/event-bus';
-import store from './cvDataTableStore';
+import { computed, onBeforeUnmount, onMounted, ref, watch, inject } from 'vue';
 
 const nextOrder = {
   ascending: 'descending',
@@ -67,69 +60,56 @@ const props = defineProps({
 });
 const cvId = useCvId(props, true);
 const dataOrder = ref(props.order);
-const parent = ref(null);
 watch(
   () => props.order,
   () => {
     if (dataOrder.value !== props.order) {
       dataOrder.value = props.order;
-      store.updateHeading(parent, {
-        id: cvId.value,
-        order: dataOrder.value,
-      });
       onSortClick();
     }
   }
 );
+const sortableHeaders = inject('sortableHeadings', ref(new Set()));
 watch(
   () => props.sortable,
   () => {
-    store.updateHeading(parent, {
-      id: cvId.value,
-      sortable: props.sortable,
-    });
+    if (props.sortable) sortableHeaders.value.add(cvId.value);
+    else sortableHeaders.value.delete(cvId.value);
   }
 );
 
-let bus = undefined;
-const el = ref(null);
+const headingIds = inject('heading-ids', ref(new Set()));
 onMounted(() => {
-  const pe = el.value.closest('.cv-data-table');
-  parent.value = pe?.getAttribute('id');
-  if (parent.value) bus = getBus(parent);
-  else console.warn('data table not found');
-
-  const exists = store.findHeading(parent, cvId);
-  if (exists)
-    console.error(
-      `CvDataTable: Duplicate ID specified for CvDataTableHeading, may cause issues. {id: ${cvId.value}, name: ${props.name}`
-    );
-  else
-    store.updateHeading(parent, {
-      id: cvId.value,
-      name: props.name,
-      order: dataOrder.value,
-      sortable: props.sortable,
-    });
+  headingIds.value.add(cvId.value);
+  if (props.sortable) {
+    sortableHeaders.value.add(cvId.value);
+    if (props.order !== 'none') onSortClick();
+  }
 });
 
 onBeforeUnmount(() => {
-  store.removeHeading(parent, cvId);
+  headingIds.value.delete(cvId.value);
+  sortableHeaders.value.delete(cvId.value);
 });
-function onSortClick() {
-  bus?.emit('cv:sort', {
+
+const notifyHeaderSort = inject('cv:sort');
+function onSortClick(ev) {
+  // If this is a click event, update to next sort order. Otherwise, this is
+  // being called from a watcher.
+  if (ev) dataOrder.value = nextOrder[dataOrder.value];
+  notifyHeaderSort({
     heading: { id: cvId.value, name: props.name },
-    value: nextOrder[internalOrder.value],
+    value: dataOrder.value,
   });
 }
+
+const currentSortHeadingId = inject('current-sort-heading-id', ref(null));
 const internalOrder = computed(() => {
   if (!props.sortable) {
     return undefined;
   }
-  const heading = store.findHeading(parent, cvId);
-  if (['ascending', 'descending', 'none'].includes(heading?.order))
-    return heading.order;
-  else return 'none';
+  if (currentSortHeadingId.value !== cvId.value) return 'none';
+  return dataOrder.value;
 });
 
 const headingLabelTag = computed(() => {

package/src/components/CvDataTable/CvDataTableRow.vue

@@ -33,7 +33,7 @@
     v-bind="$attrs"
     :id="cvId"
     ref="row"
-    :value="value"
+    :value="rowValue"
     class="cv-data-table-row"
     :row-id="cvId"
     @checked-change="onCheckedChange"
@@ -50,15 +50,13 @@ import {
   computed,
   onBeforeUnmount,
   onMounted,
-  onUpdated,
   ref,
   useAttrs,
   useSlots,
   watch,
   inject,
+  onUpdated,
 } from 'vue';
-import store from './cvDataTableStore';
-import { getBus } from '../../global/component-utils/event-bus';
 
 const props = defineProps({
   /** The value associated with the input (required for tables with batch actions) */
@@ -68,85 +66,83 @@ const props = defineProps({
   ...propsCvId,
 });
 const cvId = useCvId(props, true);
+// For historical reasons we have a prop named "value" but this makes the code
+// hard to read since .value is used for refs. So it would be props.value
+// which is weird. Let's shadow this as "rowValue"
+const rowValue = ref(props.value);
+watch(
+  () => props.value,
+  () => (rowValue.value = props.value)
+);
 
 /** @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);
+  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()));
+
 const slots = useSlots();
 const row = ref(null);
-const parent = ref(null);
-let bus;
-onMounted(() => {
-  const el = row.value?.$el;
-  const pe = el?.closest('.cv-data-table');
-  parent.value = pe?.getAttribute('id');
-  if (parent.value) {
-    bus = getBus(parent);
-    store.getTable(parent);
-  } else console.warn('data table not found');
+const rowsSelected = inject('rows-selected');
 
+onMounted(() => {
   dataExpandable.value = !!slots.expandedContent;
-  const exists = store.findRow(parent, cvId);
-  if (exists)
-    console.error(
-      `CvDataTable: Duplicate ID specified for CvDataTableRow, may cause issues. {id: ${cvId.value}, value: ${attrs.value}}`
-    );
-  else
-    store.updateRow(parent, {
-      id: cvId.value,
-      value: attrs.value,
-      expandable: dataExpandable.value,
-      isExpanded: props.expanded,
-      isChecked: false,
-    });
+  rowIds.value.add(cvId.value);
+  if (props.expanded) expandedRowIds.value.add(cvId.value);
 });
 onUpdated(() => {
-  const curr = dataExpandable.value;
   dataExpandable.value = !!slots.expandedContent;
-  if (dataExpandable.value !== curr)
-    store.updateRow(parent, {
-      id: cvId.value,
-      expandable: dataExpandable.value,
-    });
 });
 onBeforeUnmount(() => {
-  store.removeRow(parent, cvId);
+  rowIds.value.delete(cvId.value);
+  expandingRowIds.value.delete(cvId.value);
+  expandedRowIds.value.delete(cvId.value);
+  const index = rowsSelected.value.indexOf(rowValue.value);
+  if (index > -1) rowsSelected.value.splice(index, 1);
 });
 const dataExpanded = computed(() => {
-  return Boolean(props.expanded || store.isRowExpanded(parent, cvId));
+  return Boolean(props.expanded || expandedRowIds.value.has(cvId.value));
 });
 watch(
   () => props.expanded,
   () => {
-    store.updateRow(parent, {
-      id: cvId.value,
-      isExpanded: props.expanded,
-    });
+    if (props.expanded) expandedRowIds.value.add(cvId.value);
+    else expandingRowIds.value.delete(cvId.value);
   }
 );
 
+const notifyExpandedChange = inject('cv:expanded-change');
+
 function onExpandedChange(val) {
-  const row = store.findRow(parent, cvId);
-  store.updateRow(parent, {
+  notifyExpandedChange({
     id: cvId.value,
+    value: rowValue.value,
+    expandable: expandingRowIds.value.has(cvId.value),
     isExpanded: val,
+    isChecked: rowsSelected.value.includes(rowValue.value),
   });
-  bus?.emit('cv:expanded-change', row);
 }
-function onCheckedChange(val) {
-  store.updateRow(parent, {
-    id: cvId.value,
-    isChecked: val,
-  });
-  bus?.emit('cv:check-change', { value: props.value, checked: val });
+
+// Manage the checkmark on the row. Notify the table if it changes.
+const notifyCheckedChange = inject('cv:check-change');
+function onCheckedChange(isChecked) {
+  if (!rowsSelected.value) return;
+  const index = rowsSelected.value.indexOf(rowValue.value);
+  if (isChecked) {
+    // if the row value is not already in the rowsSelected array, add it.
+    if (index === -1) rowsSelected.value.push(rowValue.value);
+  } else {
+    // if the row value is in the rowsSelected array, delete it.
+    if (index > -1) rowsSelected.value.splice(index, 1);
+  }
+  notifyCheckedChange(attrs.value, isChecked);
 }
 </script>

package/src/components/CvDataTable/_CvDataTableRowInner.vue

@@ -1,7 +1,7 @@
 <template>
   <tr
-    ref="el"
     class="cv-data-table-row-inner"
+    :data-value="value"
     :class="{
       [`${carbonPrefix}--parent-row`]: expandingRow,
       [`${carbonPrefix}--expandable-row`]: dataExpanded,
@@ -76,8 +76,6 @@ import {
   watch,
   inject,
 } from 'vue';
-import store from './cvDataTableStore';
-import { getBus } from '../../global/component-utils/event-bus';
 
 const props = defineProps({
   ariaLabelForBatchCheckbox: { type: String, default: undefined },
@@ -124,21 +122,11 @@ function checkSlots() {
 onMounted(checkSlots);
 onUpdated(checkSlots);
 
-const el = ref(null);
-const parent = ref(null);
-let bus;
-onMounted(() => {
-  const pe = el.value.closest('.cv-data-table');
-  parent.value = pe?.getAttribute('id');
-  if (parent.value) {
-    store.getTable(parent);
-    bus = getBus(parent);
-  } else console.warn('data table not found');
-});
 const hasBatchActions = inject('has-batch-actions', ref(false));
 
+const emitClick = inject('cv:click');
 function onMenuItemClick(val) {
-  bus.emit('cv:click', val);
+  emitClick(val);
 }
 
 const emit = defineEmits(['expanded-change', 'checked-change']);
@@ -165,11 +153,14 @@ watch(
     emit('checked-change', dataExpanded.value);
   }
 );
+const rowsSelected = inject('rows-selected');
 watch(
-  () => store.state[parent.value]?.rows,
+  () => rowsSelected,
   () => {
-    const row = store.findRow(parent, props.rowId);
-    const isChecked = row?.isChecked;
+    // For historical reasons we have a prop named "value" but this makes the code
+    // below look weird since .value is used for refs. So just a note that this
+    // is not a ref is a prop named "value"
+    const isChecked = rowsSelected.value.includes(props.value);
     if (isChecked !== undefined) {
       dataChecked.value = isChecked;
     }

package/src/components/CvDatePicker/CvDatePicker.stories.js

@@ -1,7 +1,4 @@
-import {
-  sbCompPrefix,
-  storyParametersObject,
-} from '../../global/storybook-utils';
+import { storyParametersObject } from '../../global/storybook-utils';
 
 import { CvDatePicker } from '.';
 import { CvDatePickerSkeleton } from '.';
@@ -20,7 +17,7 @@ tomorrow.setDate(now.getDate() + 1);
 nextWeek.setDate(now.getDate() + 7);
 
 export default {
-  title: `${sbCompPrefix}/CvDatePicker`,
+  title: 'Component/CvDatePicker',
   component: CvDatePicker,
   parameters: {
     a11y: {

package/src/components/CvDatePicker/CvDatePicker.vue

@@ -311,7 +311,7 @@ watch(
   () => props.calOptions,
   () => {
     for (const [key, value] of Object.entries(props.calOptions)) {
-      calendar.value.set(key, value);
+      calendar.value?.set(key, value);
     }
   },
   { deep: true }

package/src/components/CvLink/CvLink.stories.js

@@ -1,5 +1,4 @@
 import {
-  sbCompPrefix,
   storybookControlsFromProps,
   storyParametersObject,
 } from '../../global/storybook-utils';
@@ -9,7 +8,7 @@ import { Download16 } from '@carbon/icons-vue';
 import { props as propsCvLink, linkSizes } from '../../use/cvLink';
 
 export default {
-  title: `${sbCompPrefix}/CvLink`,
+  title: 'Component/CvLink',
   component: CvLink,
   argTypes: {
     ...storybookControlsFromProps(propsCvLink),

package/src/components/CvList/CvList.stories.js

@@ -1,12 +1,9 @@
 import { CvList, CvListItem } from '.';
 
-import {
-  sbCompPrefix,
-  storyParametersObject,
-} from '../../global/storybook-utils';
+import { storyParametersObject } from '../../global/storybook-utils';
 
 export default {
-  title: `${sbCompPrefix}/CvList`,
+  title: 'Component/CvList',
   component: CvList,
   argTypes: {
     ordered: {

package/src/components/CvLoading/CvLoading.stories.js

@@ -2,14 +2,11 @@ import CvLoading from '.';
 
 import { ref, computed } from 'vue';
 import { action } from '@storybook/addon-actions';
-import {
-  sbCompPrefix,
-  storyParametersObject,
-} from '../../global/storybook-utils';
+import { storyParametersObject } from '../../global/storybook-utils';
 import './CvLoading.stories.scss';
 
 export default {
-  title: `${sbCompPrefix}/CvLoading`,
+  title: 'Component/CvLoading',
   component: CvLoading,
   argTypes: {
     'loading-end': {

package/src/components/CvMultiSelect/CvMultiSelect.vue

@@ -163,7 +163,10 @@
           @mousemove="onMousemove(item.value)"
           @mousedown.prevent
         >
-          <div :class="`${carbonPrefix}--list-box__menu-item__option`">
+          <div
+            :class="`${carbonPrefix}--list-box__menu-item__option`"
+            :title="item.label"
+          >
             <cv-checkbox
               v-model="data.selectedItems"
               tabindex="-1"

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

@@ -1,11 +1,11 @@
 import { action } from '@storybook/addon-actions';
-import { sbCompPrefix, storySourceCode } from '../../global/storybook-utils';
+import { storySourceCode } from '../../global/storybook-utils';
 
 import { CvInlineNotification, CvNotificationConsts } from '.';
 import DocumentationTemplate from './CvInlineNotificationTemplate.mdx';
 
 export default {
-  title: `${sbCompPrefix}/CvInlineNotification`,
+  title: 'Component/CvInlineNotification',
   component: CvInlineNotification,
   argTypes: {
     kind: {

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

@@ -1,10 +1,10 @@
 import { action } from '@storybook/addon-actions';
 import DocumentationTemplate from './CvToastNotificationTemplate.mdx';
-import { sbCompPrefix, storySourceCode } from '../../global/storybook-utils';
+import { storySourceCode } from '../../global/storybook-utils';
 import { CvToastNotification, CvNotificationConsts } from '.';
 
 export default {
-  title: `${sbCompPrefix}/CvToastNotification`,
+  title: 'Component/CvToastNotification',
   component: CvToastNotification,
   argTypes: {
     kind: {

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

@@ -1,13 +1,9 @@
 import { ref } from 'vue';
-import {
-  sbCompPrefix,
-  storyParametersObject,
-} from '../../global/storybook-utils';
-import { StorybookGroupConst } from './StorybookGroupConst';
+import { storyParametersObject } from '../../global/storybook-utils';
 import CvNumberInput from './CvNumberInput.vue';
 
 export default {
-  title: `${sbCompPrefix}/${StorybookGroupConst}/CvNumberInput`,
+  title: 'Component/CvNumberInput',
   component: CvNumberInput,
   argTypes: {
     // attrs

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

@@ -1,12 +1,8 @@
-import {
-  sbCompPrefix,
-  storyParametersObject,
-} from '../../global/storybook-utils';
-import { StorybookGroupConst } from './StorybookGroupConst';
+import { storyParametersObject } from '../../global/storybook-utils';
 import CvNumberInputSkeleton from './CvNumberInputSkeleton.vue';
 
 export default {
-  title: `${sbCompPrefix}/${StorybookGroupConst}/CvNumberInputSkeleton`,
+  title: 'Component/CvNumberInputSkeleton',
   component: CvNumberInputSkeleton,
 };
 

package/src/components/CvRadioButton/CvRadioButton.stories.js

@@ -1,13 +1,10 @@
 import { action } from '@storybook/addon-actions';
 import { CvRadioButton, CvRadioGroup } from '.';
-import {
-  sbCompPrefix,
-  storyParametersObject,
-} from '../../global/storybook-utils';
+import { storyParametersObject } from '../../global/storybook-utils';
 import { ref } from 'vue';
 
 export default {
-  title: `${sbCompPrefix}/CvRadioButton`,
+  title: 'Component/CvRadioButton',
   component: CvRadioButton,
   argTypes: {
     checked: {

package/src/components/CvSkeletonText/CvSkeletonText.stories.js

@@ -1,12 +1,9 @@
-import {
-  sbCompPrefix,
-  storyParametersObject,
-} from '../../global/storybook-utils';
+import { storyParametersObject } from '../../global/storybook-utils';
 
 import { CvSkeletonText } from '.';
 
 export default {
-  title: `${sbCompPrefix}/CvSkeletonText`,
+  title: 'Component/CvSkeletonText',
   component: CvSkeletonText,
   argTypes: {
     heading: { control: { type: 'boolean' } },

package/src/components/CvSlider/CvSlider.stories.js

@@ -1,14 +1,10 @@
 import { ref } from 'vue';
 import { action } from '@storybook/addon-actions';
-import {
-  sbCompPrefix,
-  storyParametersObject,
-} from '../../global/storybook-utils';
-import { sbSliderPrefix } from './sbSliderPrefix';
+import { storyParametersObject } from '../../global/storybook-utils';
 import { CvSlider } from '.';
 
 export default {
-  title: `${sbCompPrefix}/${sbSliderPrefix}/CvSlider`,
+  title: 'Component/CvSlider',
   component: CvSlider,
   argTypes: {
     disabled: {

package/src/components/CvSlider/CvSliderSkeleton.stories.js

@@ -1,12 +1,8 @@
-import {
-  sbCompPrefix,
-  storyParametersObject,
-} from '../../global/storybook-utils';
-import { sbSliderPrefix } from './sbSliderPrefix';
+import { storyParametersObject } from '../../global/storybook-utils';
 import { CvSliderSkeleton } from '.';
 
 export default {
-  title: `${sbCompPrefix}/${sbSliderPrefix}/CvSliderSkeleton`,
+  title: 'Component/CvSliderSkeleton',
   component: CvSliderSkeleton,
 };
 

package/src/components/CvStructuredList/CvStructuredList.stories.js

@@ -1,9 +1,6 @@
 import { action } from '@storybook/addon-actions';
 import { ref } from 'vue';
-import {
-  sbCompPrefix,
-  storyParametersObject,
-} from '../../global/storybook-utils';
+import { storyParametersObject } from '../../global/storybook-utils';
 import {
   CvStructuredList,
   CvStructuredListHeading,
@@ -12,7 +9,7 @@ import {
 } from '.';
 
 export default {
-  title: `${sbCompPrefix}/CvStructuredList`,
+  title: 'Component/CvStructuredList',
   component: CvStructuredList,
   argTypes: {
     selectable: {

package/src/components/CvTag/CvTag.stories.js

@@ -1,10 +1,7 @@
 import CvTag from './CvTag.vue';
 import { tagKinds } from './consts.js';
 import { action } from '@storybook/addon-actions';
-import {
-  sbCompPrefix,
-  storyParametersObject,
-} from '../../global/storybook-utils';
+import { storyParametersObject } from '../../global/storybook-utils';
 import {
   DataDefinition20,
   Bee20,
@@ -27,7 +24,7 @@ const icons = {
 };
 
 export default {
-  title: `${sbCompPrefix}/CvTag`,
+  title: 'Component/CvTag',
   component: CvTag,
   argTypes: {
     kind: { control: 'select', options: tagKinds },

package/src/components/CvTag/CvTagSkeleton.stories.js

@@ -1,11 +1,8 @@
-import {
-  sbCompPrefix,
-  storyParametersObject,
-} from '../../global/storybook-utils';
+import { storyParametersObject } from '../../global/storybook-utils';
 import CvTagSkeleton from './CvTagSkeleton.vue';
 
 export default {
-  title: `${sbCompPrefix}/CvTagSkeleton`,
+  title: 'Component/CvTagSkeleton',
   component: CvTagSkeleton,
 };
 

package/src/components/CvTextArea/CvTextArea.stories.js

@@ -1,13 +1,9 @@
-import {
-  sbCompPrefix,
-  storyParametersObject,
-} from '../../global/storybook-utils';
-import { StorybookGroupConst } from './StorybookGroupConst';
+import { storyParametersObject } from '../../global/storybook-utils';
 import CvTextArea from '.';
 import { ref } from 'vue';
 
 export default {
-  title: `${sbCompPrefix}/${StorybookGroupConst}/CvTextArea`,
+  title: 'Component/CvTextArea',
   component: CvTextArea,
   argTypes: {
     // attrs

package/src/components/CvTextArea/CvTextAreaSkeleton.stories.js

@@ -1,12 +1,8 @@
-import {
-  sbCompPrefix,
-  storyParametersObject,
-} from '../../global/storybook-utils';
-import { StorybookGroupConst } from './StorybookGroupConst';
+import { storyParametersObject } from '../../global/storybook-utils';
 import { CvTextAreaSkeleton } from './';
 
 export default {
-  title: `${sbCompPrefix}/${StorybookGroupConst}/CvTextAreaSkeleton`,
+  title: 'Component/CvTextAreaSkeleton',
   component: CvTextAreaSkeleton,
 };
 

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

@@ -1,13 +1,10 @@
-import {
-  sbCompPrefix,
-  storyParametersObject,
-} from '../../global/storybook-utils';
+import { storyParametersObject } from '../../global/storybook-utils';
 
 import { CvTextInput, CvTextInputSkeleton } from '.';
 import { ref } from 'vue';
 
 export default {
-  title: `${sbCompPrefix}/CvTextInput`,
+  title: 'Component/CvTextInput',
   component: CvTextInput,
   argTypes: {
     // attrs