@carbon/vue 3.0.13 → 3.0.15

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'
@@ -157,7 +157,9 @@
                   v-if="hasBatchActions"
                   :class="`${carbonPrefix}--table-column-checkbox`"
                 >
+                  <cv-checkbox-skeleton v-if="isSkeleton" />
                   <cv-checkbox
+                    v-else
                     v-model="headingChecked"
                     :form-item="false"
                     value="headingCheck"
@@ -181,7 +183,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"
@@ -229,7 +231,7 @@ import CvDataTableHeading from './CvDataTableHeading.vue';
 import CvDataTableRow from './CvDataTableRow.vue';
 import CvDataTableCell from './CvDataTableCell.vue';
 import CvButton from '../CvButton';
-import CvCheckbox from '../CvCheckbox';
+import { CvCheckbox, CvCheckboxSkeleton } from '../CvCheckbox';
 import CvPagination from '../CvPagination';
 import Search16 from '@carbon/icons-vue/es/search/16';
 import Close16 from '@carbon/icons-vue/es/close/16';
@@ -246,43 +248,39 @@ 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';
 
 const props = defineProps({
+  /** Arial label for the action bar. */
   actionBarAriaLabel: { type: String, default: 'Table Action Bar' },
+  /** Arial label for the "collapse all" button in tables with expandable rows". */
   collapseAllAriaLabel: { type: String, default: 'Collapse all rows' },
+  /** Arial label for the "expand all" button in tables with expandable rows". */
   expandAllAriaLabel: { type: String, default: 'Expand all rows' },
+  /** Arial label for the "select all" button in tables with selectable rows". */
   selectAllAriaLabel: { type: String, default: 'Select all rows' },
-  /**
-   * Table will size use auto sizing
-   */
+  /** Table will size use auto sizing */
   autoWidth: { type: Boolean, default: false },
-  /**
-   * Label for the button to cancel batch actions
-   */
+  /** Label for the button to cancel batch actions */
   batchCancelLabel: { type: String, default: 'Cancel' },
-  /**
-   * Table will have no border
-   */
+  /** Table will have no border */
   borderless: { type: Boolean, default: false },
   /**
    * An array of overflow menu labels. On click CvDataTable will raise an 'overflow-menu-click' event passing an object containing menuIndex, menuLabel and rowValue
    * - As part of the array pass an object containing props for the overflowMenu. E.g. { label: 'Overflow menu', tipAlignment: 'end', tipPosition: 'top' },
    */
   overflowMenu: { type: [Boolean, Array], default: () => [] },
-  /**
-   * can be set to true or an object containing camel case props for a CvPagination component
-   */
+  /** can be set to true or an object containing camel case props for a CvPagination component */
   pagination: {
     type: [Boolean, Object],
     default: false,
   },
-  /**
-   * 'compact', 'small', or 'tall'
-   */
+  /** 'compact', 'small', or 'tall' */
   rowSize: {
     type: String,
     default: 'lg',
@@ -308,14 +306,12 @@ const props = defineProps({
   searchLabel: { type: String, default: 'Search' },
   searchPlaceholder: { type: String, default: 'Search' },
   searchClearLabel: { type: String, default: 'Clear search' },
-  /**
-   * Set text in search bar on table generation
-   */
+  /** Set text in search bar on table generation */
   initialSearchValue: { type: String, default: '' },
-  /**
-   * can be sorted
-   */
+  /** 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
@@ -327,35 +323,39 @@ const props = defineProps({
    *   - Optionally a sortable property - if any column sets this to true then only columns with sortable set to true are sortable. NOTE: table sortable property not required.
    */
   columns: { type: Array, default: () => [] },
-  /**
-   * Two-dimensional array of strings.
-   */
+  /** Two-dimensional array of strings. */
   data: { type: Array, default: () => [] },
-  /**
-   * the table striped
-   */
+  /** `true` to use Zebra style striping. */
   zebra: { type: Boolean, default: false },
-  /**
-   * Specify whether the header should be sticky. Still experimental: may not work with every combination of table props.
-   */
+  /** Specify whether the header should be sticky. Still experimental: may not work with every combination of table props. */
   stickyHeader: { type: Boolean, default: false },
-  /**
-   * An array containing the selected row values. Supports v-model via the row-select-changes event.
-   */
+  /** An array containing the selected row values. Supports v-model via the row-select-changes event. */
   rowsSelected: { type: Array, default: () => [] },
+  /** Normally batch actions are hidden if no items are selected. Set this to true to always show batch actions */
+  stickyBatchActive: { type: Boolean, default: false },
+  /** subtext on the table */
   helperText: { type: String, default: undefined },
+  /** Animate the search bar opening */
   expandingSearch: { type: Boolean, default: true },
+  /** Show table loading / skeleton state */
   skeleton: { type: Boolean, default: false },
+  /** Should the expand all button be available */
   hasExpandAll: { type: Boolean, default: false },
-  /**
-   * Use a width of 'auto' instead of 100%
-   */
+  /** Use a width of 'auto' instead of 100% */
   staticWidth: { type: Boolean, default: false },
+  /** User defined search action */
   onSearch: { type: Function, default: undefined },
   ...propsCvId,
 });
 const uid = useCvId(props, true);
 
+const isSkeleton = ref(props.skeleton);
+provide('is-skeleton', isSkeleton);
+watch(
+  () => props.skeleton,
+  () => (isSkeleton.value = props.skeleton)
+);
+
 let bus = undefined;
 onBeforeMount(() => {
   bus = getBus(uid.value);
@@ -375,6 +375,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 +401,6 @@ onMounted(() => {
   }
   if (props.initialSearchValue) clearSearchVisible.value = true;
   updateRowsSelected();
-  store.setSomeExpandingRows(uid);
 });
 
 onUnmounted(() => {
@@ -397,12 +415,12 @@ onUpdated(checkSlots);
 
 const hasActions = ref(false);
 const hasToolbar = ref(false);
-const hasBatchActions = computed(() => {
-  return store.hasBatchActions(uid);
-});
+const hasBatchActions = ref(false);
+provide('has-batch-actions', hasBatchActions);
+
 function checkSlots() {
   // NOTE: slots is not reactive so needs to be managed on updated
-  store.setBatchActions(uid, !!slots['batch-actions']);
+  hasBatchActions.value = !!slots['batch-actions'];
   hasActions.value = !!slots.actions;
   hasToolbar.value = !!(
     slots.actions ||
@@ -428,6 +446,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 +458,6 @@ const hasTableHeader = computed(() => {
   return props.title || isHelper.value;
 });
 
-const hasExpandables = computed(() => {
-  return store.someExpandingRows(uid);
-});
-
 const hasOverflowMenu = computed(() => {
   return (
     props.overflowMenu === true ||
@@ -512,7 +527,14 @@ function checkSearchExpand(force) {
 }
 
 const dataRowsSelected = ref(props.rowsSelected);
-const batchActive = ref(false);
+const batchActive = computed(() => {
+  return (
+    props.stickyBatchActive ||
+    dataRowsSelected.value.length > 0 ||
+    headingChecked.value
+  );
+});
+
 const headingChecked = ref(false);
 
 watch(
@@ -536,7 +558,6 @@ function updateRowsSelected() {
     }
   }
   headingChecked.value = dataRowsSelected.value.length === rows.length;
-  batchActive.value = dataRowsSelected.value.length > 0;
 }
 
 const emit = defineEmits([
@@ -562,7 +583,6 @@ function onClearClick() {
 }
 function onHeadingCheckChange() {
   // check /uncheck all children
-  batchActive.value = headingChecked.value;
   dataRowsSelected.value = [];
   const rows = store.rows(uid);
   for (const child of rows) {
@@ -598,7 +618,6 @@ function onRowCheckChange(payload) {
   dataRowsSelected.value = Array.from(modelSet);
   const rows = store.rows(uid);
   headingChecked.value = dataRowsSelected.value.length === rows.length;
-  batchActive.value = dataRowsSelected.value.length > 0;
 
   emit('row-select-change', { value, selected: checked });
   emit('row-select-changes', dataRowsSelected.value);

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,13 +21,14 @@
       >
         <ChevronRight16 :class="`${carbonPrefix}--table-expand__svg`" />
       </button>
-      <div v-else>{{ expandingRow }}</div>
     </td>
     <td
       v-if="hasBatchActions"
       :class="`${carbonPrefix}--table-column-checkbox`"
     >
+      <cv-checkbox-skeleton v-if="isSkeleton" />
       <cv-checkbox
+        v-else
         ref="rowChecked"
         v-model="dataChecked"
         :form-item="false"
@@ -36,7 +37,7 @@
         :label="
           ariaLabelForBatchCheckbox || `Select row ${value} for batch action`
         "
-        hide-label
+        :hide-label="true"
         @change="onChange"
       />
     </td>
@@ -62,11 +63,19 @@
 
 <script setup>
 import { carbonPrefix } from '../../global/settings';
-import CvCheckbox from '../CvCheckbox';
+import { CvCheckbox, CvCheckboxSkeleton } 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 +91,11 @@ const props = defineProps({
   rowId: { type: String, default: undefined },
 });
 
+const isSkeleton = inject('is-skeleton', ref(false));
+/** @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(() => {
@@ -123,9 +135,7 @@ onMounted(() => {
     bus = getBus(parent);
   } else console.warn('data table not found');
 });
-const hasBatchActions = computed(() => {
-  return store.hasBatchActions(parent);
-});
+const hasBatchActions = inject('has-batch-actions', ref(false));
 
 function onMenuItemClick(val) {
   bus.emit('cv:click', val);

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 {
@@ -82,7 +83,6 @@ const logger = loggerEnabled ? console.debug : () => {};
  * @typedef {Object} CvTableData
  * @property {Array<CvRowData>} rows - table row data
  * @property {Array<CvHeadingData>} headings - table heading data
- * @property {boolean} hasBatchActions - Batch actions are available
  * @property {boolean} hasExpandable - At least some rows are expandable
  */
 
@@ -97,7 +97,6 @@ export default reactive({
     this.state[table] = {
       rows: [],
       headings: [],
-      hasBatchActions: false,
       hasExpandable: false,
     };
     logger(`added table:${table}`);
@@ -121,31 +120,6 @@ export default reactive({
     if (!this.state[table]) this.addTable(table);
     return this.state[table];
   },
-  /**
-   * Does the table have batch actions
-   * @param {CvTableDataString} tableId
-   * @returns {boolean|undefined}
-   */
-  hasBatchActions(tableId) {
-    const table = unref(tableId);
-    if (!this.state[table]) return;
-    const hasBatchActions = this.state[table]?.hasBatchActions;
-    logger(`get hasBatchActions:${table} result:${hasBatchActions}`);
-    return hasBatchActions;
-  },
-  /**
-   * Set if the table has batch actions or not
-   * @param {CvTableDataString} tableId
-   * @param {boolean} val
-   */
-  setBatchActions(tableId, val) {
-    const table = unref(tableId);
-    if (!this.state[table]) return;
-    if (this.state[table].hasBatchActions !== val) {
-      this.state[table].hasBatchActions = val;
-      logger(`setBatchActions:${table} payload:${val}`);
-    }
-  },
   /**
    * Find a heading by table + heading id
    * @param {CvTableDataString} tableId

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

@@ -237,11 +237,36 @@ SingleUsingDate.parameters = storyParametersObject(
 );
 
 /* SINGLE USING MIN MAX PARAMS STORY */
-
+const DATE_SHORT = 'm/d/Y';
+const DATE_MED = 'M j, Y';
+const calOptions = ref({
+  minDate: now,
+  maxDate: nextWeek,
+  dateFormat: DATE_SHORT,
+});
+function toggleDateFormat() {
+  calOptions.value.dateFormat =
+    calOptions.value.dateFormat === DATE_SHORT ? DATE_MED : DATE_SHORT;
+}
+function buttonLabel() {
+  return calOptions.value.dateFormat === DATE_SHORT ? DATE_MED : DATE_SHORT;
+}
+function changeMaxDate(inc) {
+  calOptions.value.maxDate = new Date(
+    nextWeek.setDate(nextWeek.getDate() + inc)
+  );
+}
 const templateSingleUsingMinMax = `
 <div>
   <cv-date-picker v-bind='args' @change="onChange" kind="single" :value="now" :cal-options="calOptions">
   </cv-date-picker>
+  <div style="margin-top:2rem; background-color: #888888;  padding:1rem; width:fit-content">
+  <div>Reactive updates</div>
+  <button @click='toggleDateFormat'>change date format &quot;{{buttonLabel()}}&quot;</button><br/>
+  <button @click='changeMaxDate(1)'>+1 day to max date</button>
+  <button @click='changeMaxDate(-1)'>-1 day from max date</button>
+  <div>Max date: {{calOptions.maxDate}}</div>
+  </div>
 </div>
 `;
 
@@ -251,11 +276,10 @@ const TemplateSingleUsingMinMax = args => {
     setup: () => ({
       args,
       now,
-      calOptions: {
-        minDate: now,
-        maxDate: nextWeek,
-        dateFormat: 'm/d/Y',
-      },
+      calOptions,
+      toggleDateFormat,
+      buttonLabel,
+      changeMaxDate,
       onChange: action('change'),
     }),
     template: templateSingleUsingMinMax,

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
@@ -135,7 +135,7 @@ const dateWrapper = ref(null);
 const date = ref(null);
 const todate = ref(null);
 
-let calendar;
+const calendar = ref(null);
 
 const props = defineProps({
   modelValue: { type: [String, Object, Array, Date], default: undefined },
@@ -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(() => {
@@ -309,10 +307,19 @@ const onCalReady = (selectedDates, dateStr, instance) => {
 const initFlatpickr = () => {
   return flatpickr(date.value, getFlatpickrOptions());
 };
+watch(
+  () => props.calOptions,
+  () => {
+    for (const [key, value] of Object.entries(props.calOptions)) {
+      calendar.value.set(key, value);
+    }
+  },
+  { deep: true }
+);
 
 let dateToString = val => {
   if (!val) return '';
-  return calendar.formatDate(val, props.calOptions.dateFormat);
+  return calendar.value?.formatDate(val, props.calOptions.dateFormat);
 };
 
 // eslint-disable-next-line no-unused-vars
@@ -351,9 +358,9 @@ const setDate = value => {
   try {
     if (value === undefined) return;
     if (isSingle.value) {
-      calendar.setDate(value, true);
+      calendar.value?.setDate(value, true);
     } else if (isRange.value) {
-      calendar.setDate([value.startDate, value.endDate], true);
+      calendar.value?.setDate([value.startDate, value.endDate], true);
     } else {
       date.value.value = value;
     }
@@ -395,16 +402,14 @@ onBeforeMount(() => {
 
 onMounted(() => {
   if (['range', 'single'].includes(props.kind)) {
-    calendar = initFlatpickr();
+    calendar.value = initFlatpickr();
   }
 
   setDate(props.modelValue || props.value);
 });
 
 onUnmounted(() => {
-  if (calendar) {
-    calendar.destroy();
-  }
+  calendar.value?.destroy();
 });
 </script>
 

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

@@ -129,6 +129,7 @@ const vmodelTemplate = `
     <cv-dropdown-item value="mysterious">The Armorer</cv-dropdown-item>
     <cv-dropdown-item value="bounty-hunter">Greef Karga</cv-dropdown-item>
  </cv-dropdown>
+ <div style="margin-top:2rem; background-color: #888888;  padding:1rem">
  <div>V-Model value: {{ myValue }}</div>
   <select v-model="myValue">
     <option value="mando">Mandalorian</option>
@@ -136,7 +137,12 @@ const vmodelTemplate = `
     <option value="baby-yoda">Grogu</option>
     <option value="mysterious">Armorer</option>
     <option value="bounty-hunter">Karga</option>
+    <option value="none">None</option>
   </select>
+  <div>
+  <button @click="myValue = undefined">Clear value</button>
+  </div>
+  </div>
 </div>
 `;
 const skeletonTemplate = `
@@ -150,10 +156,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"
         >
@@ -282,6 +282,7 @@ watch(
   () => props.modelValue,
   () => {
     dataValue.value = props.modelValue;
+    dataCaption.value = undefined;
   }
 );
 watch(dataValue, () => {
@@ -293,9 +294,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/CvList/CvList.vue

@@ -1,6 +1,7 @@
 <template>
   <component
     :is="listType"
+    class="cv-list"
     :class="{
       [`${carbonPrefix}--list--nested`]: nested,
       [`${carbonPrefix}--list--ordered`]: isActuallyOrdered,

package/src/components/CvList/CvListItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <li :class="`${carbonPrefix}--list__item`"><slot /></li>
+  <li class="cv-list-item" :class="`${carbonPrefix}--list__item`"><slot /></li>
 </template>
 
 <script>