@carbon/vue 3.0.21 → 3.0.23

package/src/components/CvDataTable/CvDataTable.vue

@@ -132,7 +132,7 @@
             <thead>
               <tr>
                 <th
-                  v-if="hasExpandingRows"
+                  v-if="expandable"
                   :class="`${carbonPrefix}--table-expand`"
                   :data-previous-value="
                     dataExpandAll ? 'collapsed' : 'expanded'
@@ -183,7 +183,7 @@
               </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"
@@ -236,11 +236,9 @@ import CvPagination from '../CvPagination';
 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 { getBus, removeBus } from '../../global/component-utils/event-bus';
 import {
   computed,
   nextTick,
-  onBeforeMount,
   onMounted,
   onUnmounted,
   onUpdated,
@@ -251,8 +249,6 @@ import {
   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';
 
 const props = defineProps({
@@ -356,20 +352,6 @@ watch(
   () => (isSkeleton.value = props.skeleton)
 );
 
-let bus = undefined;
-onBeforeMount(() => {
-  bus = getBus(uid.value);
-  bus.on('cv:check-change', onRowCheckChange);
-  bus.on('cv:click', onMenuItemClick);
-  bus.on('cv:sort', onSort);
-  bus.on('cv:expanded-change', onCvExpandedChange);
-  store.addTable(uid);
-});
-onUnmounted(() => {
-  removeBus(uid.value);
-  store.removeTable(uid.value);
-});
-
 watch(() => props.rowsSelected, updateRowsSelected);
 
 const searchContainer = ref(null);
@@ -378,11 +360,7 @@ 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');
 });
@@ -393,6 +371,7 @@ watch(
     else expandingRowIds.value.delete('table-expand-row');
   }
 );
+const clearSearchVisible = ref(false);
 
 onMounted(() => {
   if (searchContainer.value) {
@@ -416,6 +395,8 @@ onUpdated(checkSlots);
 const hasActions = ref(false);
 const hasToolbar = ref(false);
 const hasBatchActions = ref(false);
+const isHelper = ref(false);
+
 provide('has-batch-actions', hasBatchActions);
 
 function checkSlots() {
@@ -442,9 +423,11 @@ function columnHeading(c) {
   }
 }
 
+const sortableHeadings = ref(new Set());
+provide('sortableHeadings', sortableHeadings);
 const isSortable = computed(() => {
   // is any column sortable
-  return props.sortable || store.someSortableHeadings(uid.value);
+  return props.sortable || sortableHeadings.value.size > 0;
 });
 
 function isColSortable(c) {
@@ -453,7 +436,6 @@ function isColSortable(c) {
   return (col && col.sortable) || props.sortable;
 }
 
-const isHelper = ref(false);
 const hasTableHeader = computed(() => {
   return props.title || isHelper.value;
 });
@@ -482,13 +464,15 @@ const internalPagination = computed(() => {
   return false;
 });
 
-const registeredRows = ref([]);
+const rowIds = ref(new Set());
+provide('row-ids', rowIds);
+
 const internalNumberOfItems = computed(() => {
   const internal = internalPagination.value;
   if (internal.numberOfItems !== undefined) {
     return internal.numberOfItems;
   } else {
-    return registeredRows.value.length;
+    return rowIds.value.size;
   }
 });
 
@@ -527,38 +511,29 @@ function checkSearchExpand(force) {
 }
 
 const dataRowsSelected = ref(props.rowsSelected);
-const batchActive = computed(() => {
-  return (
-    props.stickyBatchActive ||
-    dataRowsSelected.value.length > 0 ||
-    headingChecked.value
-  );
-});
+provide('rows-selected', dataRowsSelected);
 
 const headingChecked = ref(false);
-
 watch(
-  () => store.state[uid.value],
+  () => dataRowsSelected,
   () => {
-    const rows = store.rows(uid);
     headingChecked.value =
-      rows.length > 0 && dataRowsSelected.value.length === rows.length;
+      rowIds.value.size > 0 &&
+      dataRowsSelected.value.length === rowIds.value.size;
   },
   { deep: true }
 );
+
+const batchActive = computed(() => {
+  return (
+    props.stickyBatchActive ||
+    dataRowsSelected.value.length > 0 ||
+    headingChecked.value
+  );
+});
+
 function updateRowsSelected() {
-  dataRowsSelected.value = [];
-  const rows = store.rows(uid);
-  for (const i in rows) {
-    let child = rows[i];
-    const checked = props.rowsSelected.includes(child.value);
-    store.updateRow(uid, { id: child.id, isChecked: checked });
-
-    if (checked) {
-      dataRowsSelected.value.push(child.value);
-    }
-  }
-  headingChecked.value = dataRowsSelected.value.length === rows.length;
+  dataRowsSelected.value = [...props.rowsSelected];
 }
 
 const emit = defineEmits([
@@ -572,7 +547,6 @@ const emit = defineEmits([
   'pagination',
 ]);
 const searchValue = ref(props.initialSearchValue);
-const clearSearchVisible = ref(false);
 function onClearClick() {
   searchValue.value = '';
   clearSearchVisible.value = false;
@@ -584,87 +558,83 @@ function onClearClick() {
 }
 function onHeadingCheckChange() {
   // check /uncheck all children
-  dataRowsSelected.value = [];
-  const rows = store.rows(uid);
-  for (const child of rows) {
-    if (headingChecked.value) {
-      dataRowsSelected.value.push(child.value);
-    }
-
-    if (child.isChecked !== headingChecked.value) {
-      store.updateRow(uid, { id: child.id, isChecked: headingChecked.value });
-
-      emit('row-select-change', {
-        value: child.value,
-        selected: headingChecked.value,
-      });
-    }
-  }
-  emit('row-select-changes', dataRowsSelected.value);
-  emit('update:rowsSelected', dataRowsSelected.value);
+  if (headingChecked.value) dataRowsSelected.value = [...rowIds.value];
+  else dataRowsSelected.value = [];
 }
 function deselect() {
   headingChecked.value = false;
   onHeadingCheckChange();
 }
-function onRowCheckChange(payload) {
-  const { value, checked } = payload;
-  let modelSet = new Set(dataRowsSelected.value);
-
-  if (!checked) {
-    modelSet.delete(value);
-  } else {
-    modelSet.add(value);
-  }
-  dataRowsSelected.value = Array.from(modelSet);
-  const rows = store.rows(uid);
-  headingChecked.value = dataRowsSelected.value.length === rows.length;
 
+const previousEmit = ref([...props.rowsSelected]);
+watch(
+  dataRowsSelected,
+  () => {
+    // was tempted to use Set.symmetricDifference but support for that was only
+    // add in Feb/June 2024
+    const diff = dataRowsSelected.value
+      .filter(x => !previousEmit.value.includes(x))
+      .concat(
+        previousEmit.value.filter(x => !dataRowsSelected.value.includes(x))
+      );
+    if (diff.length > 0) {
+      emit('row-select-changes', dataRowsSelected.value);
+      emit('update:rowsSelected', dataRowsSelected.value);
+      previousEmit.value = [...dataRowsSelected.value];
+    }
+  },
+  { deep: true }
+);
+function onRowCheckChange(value, checked) {
   emit('row-select-change', { value, selected: checked });
-  emit('row-select-changes', dataRowsSelected.value);
-  emit('update:rowsSelected', dataRowsSelected.value);
 }
+provide('cv:check-change', onRowCheckChange);
+
 function onMenuItemClick(val) {
   emit('overflow-menu-click', val);
 }
+provide('cv:click', onMenuItemClick);
+
 function onInternalSearch() {
   clearSearchVisible.value = searchValue.value.length > 0;
   // eslint-disable-next-line vue/require-explicit-emits
   emit('search', searchValue.value);
 }
+
+const headingIds = ref(new Set());
+provide('heading-ids', headingIds);
+const currentSortHeadingId = ref(null);
+provide('current-sort-heading-id', currentSortHeadingId);
 function onSort(payload) {
   const { heading, value } = payload;
-  const headings = store.headings(uid);
-  let index;
-  for (let colIndex in headings) {
-    const column = headings[colIndex];
-    if (column.id === heading.id) {
-      store.updateHeading(uid, { ...column, order: value });
-      index = colIndex;
-    } else {
-      store.updateHeading(uid, { ...column, order: 'none' });
-    }
-  }
+  const headings = Array.from(headingIds.value);
+  currentSortHeadingId.value = heading.id;
+  const index = headings.indexOf(heading.id);
   emit('sort', { index, order: value, name: heading.name });
 }
+provide('cv:sort', onSort);
 
 // are all rows expanded
-const dataExpandAll = computed(() => {
-  return store.allExpandedRows(uid);
-});
+/** @type {Ref<Set<String>>} */
+const expandedRowIds = ref(new Set());
+provide('expanded-row-ids', expandedRowIds);
+
+const dataExpandAll = computed(
+  () => expandedRowIds.value.size === rowIds.value.size
+);
 function toggleExpandAll() {
   const toggle = !dataExpandAll.value;
-  const rows = store.rows(uid);
-  for (const row of rows) {
-    store.updateRow(uid, { id: row.id, isExpanded: toggle });
-  }
+  if (toggle) {
+    rowIds.value.forEach(rowId => expandedRowIds.value.add(rowId));
+  } else expandedRowIds.value.clear();
 }
 
 /**
  * A child row is changed
- * @param {{kind:string, uid:string, value:string, isExpanded:boolean}} row
+ * @param {{id:string, value:string, expandable:string, isExpanded:boolean, isChecked:boolean}} row
  */
 function onCvExpandedChange(row) {
   emit('row-expanded', row);
 }
+provide('cv:expanded-change', onCvExpandedChange);
 </script>

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,88 @@ 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);
+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()));
+
 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 }