@carbon/vue 3.0.14 → 3.0.16

package/src/components/CvDataTable/cvDataTableStore.js

@@ -83,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
  */
 
@@ -98,7 +97,6 @@ export default reactive({
     this.state[table] = {
       rows: [],
       headings: [],
-      hasBatchActions: false,
       hasExpandable: false,
     };
     logger(`added table:${table}`);
@@ -122,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

@@ -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 },
@@ -307,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
@@ -349,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;
     }
@@ -393,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 = `

package/src/components/CvDropdown/CvDropdown.vue

@@ -282,6 +282,7 @@ watch(
   () => props.modelValue,
   () => {
     dataValue.value = props.modelValue;
+    dataCaption.value = undefined;
   }
 );
 watch(dataValue, () => {

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>

package/src/components/CvNotification/CvInlineNotification.vue

@@ -2,6 +2,7 @@
   <div
     role="alert"
     :kind="kind"
+    class="cv-inline-notification"
     :class="[
       `${carbonPrefix}--inline-notification`,
       `${carbonPrefix}--inline-notification--${kind}`,

package/src/components/CvNotification/CvToastNotification.vue

@@ -2,6 +2,7 @@
   <div
     role="alert"
     :kind="kind"
+    class="cv-notification"
     :class="[
       `${carbonPrefix}--toast-notification`,
       `${carbonPrefix}--toast-notification--${kind}`,

package/src/components/CvPagination/CvPagination.stories.mdx

@@ -2,6 +2,10 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs';
 import { CvPagination } from '.';
 import { sbCompPrefix } from '../../global/storybook-utils';
 import { action } from '@storybook/addon-actions';
+import { ref } from 'vue';
+const myPage=ref(1);
+const myPageSizes=ref([5,7,10,11,13])
+const myNumItems=ref(13)
 
 <Meta title={`${sbCompPrefix}/CvPagination`} component={CvPagination} />
 
@@ -14,6 +18,9 @@ export const Template = args => ({
   setup() {
     return {
       ...args,
+      myPage,
+      myPageSizes,
+      myNumItems,
       onChange: action('change'),
     };
   },
@@ -27,13 +34,22 @@ const defaultTemplate = `
     :forward-text="forwardText"
     :page-number-label="pageNumberLabel"
     :page-sizes-label="pageSizesLabel"
-    :number-of-items="numberOfItems"
+    :number-of-items="myNumItems"
     :actual-items-on-page="actualItemsOnPage"
-    :page="page"
-    :page-sizes="pageSizes"
+    :page="myPage"
+    :page-sizes="myPageSizes"
     :backwards-button-disabled="backwardsButtonDisabled"
     :forwards-button-disabled="forwardsButtonDisabled">
   </cv-pagination>
+  <div style="margin-top:2rem; background-color: #888888;  padding:1rem">
+    <h3>Reactive properties</h3>
+    page: <button @click="myPage--">← prev page</button>
+    <button @click="myPage++">next page →</button><br/>
+    page-sizes: <button @click="myPageSizes=[5,10]">change page sizes to [5,10]</button>
+    <button @click="myPageSizes=[10,20,30,40,50]">change page sizes to [10,20,30,40,50]</button><br/>
+    number-of-items: <button @click="myNumItems=4">Set total items = 4</button>
+    <button @click="myNumItems=103">Set total items = 103</button>
+  </div>
 `;
 const slotsTemplate = `
 <cv-pagination
@@ -87,23 +103,14 @@ Migration notes:
       forwardText: undefined,
       pageNumberLabel: undefined,
       pageSizesLabel: undefined,
-      numberOfItems: 103,
-      page: 2,
-      pageSizes: [
-        10,
-        {
-          value: 20,
-          selected: true,
-        },
-        30,
-        40,
-        50,
-      ],
       backwardsButtonDisabled: false,
       forwardsButtonDisabled: false,
       actualItemsOnPage: Infinity,
     }}
     argTypes={{
+      page: { control: false },
+      pageSizes: { control: false },
+      numberOfItems: { control: false }
     }}
   >
     {Template.bind({})}

package/src/components/CvPagination/CvPagination.vue

@@ -156,15 +156,30 @@ const internalValue = computed(() => {
   };
 });
 
-onMounted(() => {
+function adjustValues() {
   pageSizeValue.value = newPageSizeValue(props.pageSizes);
   pageCount.value = newPageCount(props.numberOfItems, pageSizeValue.value);
   pageValue.value = newPageValue(props.page, pageCount.value);
   pages.value = newPagesArray(pageCount.value);
   firstItem.value = newFirstItem(pageValue.value, pageSizeValue.value);
+}
+onMounted(() => {
+  adjustValues();
   // always emit on mount
   emit('change', internalValue.value);
 });
+watch(
+  () => props.pageSizes,
+  () => adjustValues()
+);
+watch(
+  () => props.page,
+  () => adjustValues()
+);
+watch(
+  () => props.numberOfItems,
+  () => adjustValues()
+);
 
 function onPageChange(newVal) {
   pageValue.value = parseInt(newVal, 10);

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

@@ -31,7 +31,6 @@ const Template = (args, { argTypes }) => {
 
 export const Default = Template.bind({});
 Default.args = {
-  kind: 'red',
   label: 'This is a tag',
   filter: false,
 };
@@ -43,7 +42,6 @@ Default.parameters = storyParametersObject(
 
 export const Filter = Template.bind({});
 Filter.args = {
-  kind: 'teal',
   label: 'This is a tag',
   filter: true,
 };

package/src/components/CvTag/CvTag.vue

@@ -40,7 +40,7 @@ export default {
      */
     kind: {
       type: String,
-      default: 'red',
+      default: undefined,
       validator(val) {
         return tagKinds.includes(val);
       },
@@ -73,14 +73,16 @@ export default {
     });
 
     const tagClasses = computed(() => {
-      const classes = [`${carbonPrefix}--tag`];
+      const classes = [`cv-tag ${carbonPrefix}--tag`];
 
       if (props.small) classes.push(`${carbonPrefix}--tag--sm`);
 
       if (props.skeleton) {
         classes.push(`${carbonPrefix}--skeleton`);
       } else {
-        classes.push(`${carbonPrefix}--tag--${props.kind}`);
+        if (props.kind) {
+          classes.push(`${carbonPrefix}--tag--${props.kind}`);
+        }
 
         if (props.filter) {
           classes.push(`${carbonPrefix}--tag--filter`);

package/src/index.js

@@ -43,3 +43,115 @@ export default {
     }
   },
 };
+export { default as CvAccordion } from './components/CvAccordion/CvAccordion.vue';
+export { default as CvAccordionItem } from './components/CvAccordion/CvAccordionItem.vue';
+export { default as CvAccordionSkeleton } from './components/CvAccordion/CvAccordionSkeleton.vue';
+export { default as CvAspectRatio } from './components/CvAspectRatio/CvAspectRatio.vue';
+export { default as CvBreadcrumb } from './components/CvBreadcrumb/CvBreadcrumb.vue';
+export { default as CvBreadcrumbItem } from './components/CvBreadcrumb/CvBreadcrumbItem.vue';
+export { default as CvBreadcrumbSkeleton } from './components/CvBreadcrumb/CvBreadcrumbSkeleton.vue';
+export { default as CvBreadcrumbSkeletonItem } from './components/CvBreadcrumb/CvBreadcrumbSkeletonItem.vue';
+export { default as CvButton } from './components/CvButton/CvButton.vue';
+export { default as CvButtonSet } from './components/CvButton/CvButtonSet.vue';
+export { default as CvButtonSkeleton } from './components/CvButton/CvButtonSkeleton.vue';
+export { default as CvIconButton } from './components/CvButton/CvIconButton.vue';
+export { default as CvCheckbox } from './components/CvCheckbox/CvCheckbox.vue';
+export { default as CvCheckboxSkeleton } from './components/CvCheckbox/CvCheckboxSkeleton.vue';
+export { default as CvCodeSnippet } from './components/CvCodeSnippet/CvCodeSnippet.vue';
+export { default as CvCodeSnippetSkeleton } from './components/CvCodeSnippet/CvCodeSnippetSkeleton.vue';
+export { default as CvComboBox } from './components/CvComboBox/CvComboBox.vue';
+export { default as CvContentSwitcher } from './components/CvContentSwitcher/CvContentSwitcher.vue';
+export { default as CvContentSwitcherButton } from './components/CvContentSwitcher/CvContentSwitcherButton.vue';
+export { default as CvContentSwitcherContent } from './components/CvContentSwitcher/CvContentSwitcherContent.vue';
+export { default as CvCopyButton } from './components/CvCopyButton/CvCopyButton.vue';
+export { default as CvDataTable } from './components/CvDataTable/CvDataTable.vue';
+export { default as CvDataTableAction } from './components/CvDataTable/CvDataTableAction.vue';
+export { default as CvDataTableCell } from './components/CvDataTable/CvDataTableCell.vue';
+export { default as CvDataTableHeading } from './components/CvDataTable/CvDataTableHeading.vue';
+export { default as CvDataTableRow } from './components/CvDataTable/CvDataTableRow.vue';
+export { default as CvDataTableSkeleton } from './components/CvDataTable/CvDataTableSkeleton.vue';
+export { default as CvDatePicker } from './components/CvDatePicker/CvDatePicker.vue';
+export { default as CvDatePickerSkeleton } from './components/CvDatePicker/CvDatePickerSkeleton.vue';
+export { default as CvDropdown } from './components/CvDropdown/CvDropdown.vue';
+export { default as CvDropdownItem } from './components/CvDropdown/CvDropdownItem.vue';
+export { default as CvDropdownSkeleton } from './components/CvDropdown/CvDropdownSkeleton.vue';
+export { default as CvFileUploader } from './components/CvFileUploader/CvFileUploader.vue';
+export { default as CvFileUploaderItem } from './components/CvFileUploader/CvFileUploaderItem.vue';
+export { default as CvFileUploaderSkeleton } from './components/CvFileUploader/CvFileUploaderSkeleton.vue';
+export { default as CvForm } from './components/CvForm/CvForm.vue';
+export { default as CvFormGroup } from './components/CvForm/CvFormGroup.vue';
+export { default as CvFormItem } from './components/CvForm/CvFormItem.vue';
+export { default as CvColumn } from './components/CvGrid/CvColumn.vue';
+export { default as CvGrid } from './components/CvGrid/CvGrid.vue';
+export { default as CvRow } from './components/CvGrid/CvRow.vue';
+export { default as CvInlineLoading } from './components/CvInlineLoading/CvInlineLoading.vue';
+export { default as CvLink } from './components/CvLink/CvLink.vue';
+export { default as CvList } from './components/CvList/CvList.vue';
+export { default as CvListItem } from './components/CvList/CvListItem.vue';
+export { default as CvLoading } from './components/CvLoading/CvLoading.vue';
+export { default as CvModal } from './components/CvModal/CvModal.vue';
+export { default as CvMultiSelect } from './components/CvMultiSelect/CvMultiSelect.vue';
+export { default as CvInlineNotification } from './components/CvNotification/CvInlineNotification.vue';
+export { default as CvToastNotification } from './components/CvNotification/CvToastNotification.vue';
+export { default as CvNumberInput } from './components/CvNumberInput/CvNumberInput.vue';
+export { default as CvNumberInputSkeleton } from './components/CvNumberInput/CvNumberInputSkeleton.vue';
+export { default as CvOverflowMenu } from './components/CvOverflowMenu/CvOverflowMenu.vue';
+export { default as CvOverflowMenuItem } from './components/CvOverflowMenu/CvOverflowMenuItem.vue';
+export { default as CvPagination } from './components/CvPagination/CvPagination.vue';
+export { default as CvProgress } from './components/CvProgress/CvProgress.vue';
+export { default as CvProgressSkeleton } from './components/CvProgress/CvProgressSkeleton.vue';
+export { default as CvProgressStep } from './components/CvProgress/CvProgressStep.vue';
+export { default as CvRadioButton } from './components/CvRadioButton/CvRadioButton.vue';
+export { default as CvRadioGroup } from './components/CvRadioButton/CvRadioGroup.vue';
+export { default as CvSearch } from './components/CvSearch/CvSearch.vue';
+export { default as CvSelect } from './components/CvSelect/CvSelect.vue';
+export { default as CvSelectOptgroup } from './components/CvSelect/CvSelectOptgroup.vue';
+export { default as CvSelectOption } from './components/CvSelect/CvSelectOption.vue';
+export { default as CvSkeletonText } from './components/CvSkeletonText/CvSkeletonText.vue';
+export { default as CvSlider } from './components/CvSlider/CvSlider.vue';
+export { default as CvSliderSkeleton } from './components/CvSlider/CvSliderSkeleton.vue';
+export { default as CvStructuredList } from './components/CvStructuredList/CvStructuredList.vue';
+export { default as CvStructuredListData } from './components/CvStructuredList/CvStructuredListData.vue';
+export { default as CvStructuredListHeading } from './components/CvStructuredList/CvStructuredListHeading.vue';
+export { default as CvStructuredListItem } from './components/CvStructuredList/CvStructuredListItem.vue';
+export { default as CvStructuredListItemSelectable } from './components/CvStructuredList/CvStructuredListItemSelectable.vue';
+export { default as CvStructuredListItemStandard } from './components/CvStructuredList/CvStructuredListItemStandard.vue';
+export { default as CvTab } from './components/CvTabs/CvTab.vue';
+export { default as CvTabs } from './components/CvTabs/CvTabs.vue';
+export { default as CvTabsSkeleton } from './components/CvTabs/CvTabsSkeleton.vue';
+export { default as CvTag } from './components/CvTag/CvTag.vue';
+export { default as CvTagSkeleton } from './components/CvTag/CvTagSkeleton.vue';
+export { default as CvTextArea } from './components/CvTextArea/CvTextArea.vue';
+export { default as CvTextAreaSkeleton } from './components/CvTextArea/CvTextAreaSkeleton.vue';
+export { default as CvTextInput } from './components/CvTextInput/CvTextInput.vue';
+export { default as CvTextInputSkeleton } from './components/CvTextInput/CvTextInputSkeleton.vue';
+export { default as CvTile } from './components/CvTile/CvTile.vue';
+export { default as CvTileClickable } from './components/CvTile/CvTileClickable.vue';
+export { default as CvTileExpandable } from './components/CvTile/CvTileExpandable.vue';
+export { default as CvTileSelectable } from './components/CvTile/CvTileSelectable.vue';
+export { default as CvTileStandard } from './components/CvTile/CvTileStandard.vue';
+export { default as CvTimePicker } from './components/CvTimePicker/CvTimePicker.vue';
+export { default as CvToggleSkeleton } from './components/CvToggle/CvToggle-Skeleton.vue';
+export { default as CvToggle } from './components/CvToggle/CvToggle.vue';
+export { default as CvDefinitionTooltip } from './components/CvTooltip/CvDefinitionTooltip.vue';
+export { default as CvInteractiveTooltip } from './components/CvTooltip/CvInteractiveTooltip.vue';
+export { default as CvTooltip } from './components/CvTooltip/CvTooltip.vue';
+export { default as CvHeader } from './components/CvUIShell/CvHeader.vue';
+export { default as CvHeaderGlobalAction } from './components/CvUIShell/CvHeaderGlobalAction.vue';
+export { default as CvHeaderMenu } from './components/CvUIShell/CvHeaderMenu.vue';
+export { default as CvHeaderMenuButton } from './components/CvUIShell/CvHeaderMenuButton.vue';
+export { default as CvHeaderMenuItem } from './components/CvUIShell/CvHeaderMenuItem.vue';
+export { default as CvHeaderName } from './components/CvUIShell/CvHeaderName.vue';
+export { default as CvHeaderNav } from './components/CvUIShell/CvHeaderNav.vue';
+export { default as CvHeaderPanel } from './components/CvUIShell/CvHeaderPanel.vue';
+export { default as CvSideNav } from './components/CvUIShell/CvSideNav.vue';
+export { default as CvSideNavIcon } from './components/CvUIShell/CvSideNavIcon.vue';
+export { default as CvSideNavItems } from './components/CvUIShell/CvSideNavItems.vue';
+export { default as CvSideNavLink } from './components/CvUIShell/CvSideNavLink.vue';
+export { default as CvSideNavMenu } from './components/CvUIShell/CvSideNavMenu.vue';
+export { default as CvSideNavMenuDivider } from './components/CvUIShell/CvSideNavMenuDivider.vue';
+export { default as CvSideNavMenuItem } from './components/CvUIShell/CvSideNavMenuItem.vue';
+export { default as CvSkipToContent } from './components/CvUIShell/CvSkipToContent.vue';
+export { default as CvSwitcher } from './components/CvUIShell/CvSwitcher.vue';
+export { default as CvSwitcherItem } from './components/CvUIShell/CvSwitcherItem.vue';
+export { default as CvSwitcherItemLink } from './components/CvUIShell/CvSwitcherItemLink.vue';