@carbon/vue 3.0.12 → 3.0.14

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.stories.js

@@ -15,7 +15,9 @@ const initArgs = {
 
 const now = new Date();
 const tomorrow = new Date();
+const nextWeek = new Date();
 tomorrow.setDate(now.getDate() + 1);
+nextWeek.setDate(now.getDate() + 7);
 
 export default {
   title: `${sbCompPrefix}/CvDatePicker`,
@@ -29,11 +31,12 @@ export default {
     },
   },
   argTypes: {
-    dateLabel: { type: String, description: 'Date picker label' },
-    invalidMessage: {
+    kind: {
       type: String,
-      description: 'Date picker text on invalid value',
+      options: ['short', 'simple', 'single', 'range'],
+      control: { type: 'select' },
     },
+    calOptions: { type: Object },
   },
 };
 
@@ -41,7 +44,7 @@ export default {
 
 const template = `
 <div>
-  <cv-date-picker v-bind='args' @change='onChange'>
+  <cv-date-picker v-bind="args" @change="onChange" :value="now">
   </cv-date-picker>
 </div>
 `;
@@ -50,6 +53,7 @@ const Template = args => {
     components: { CvDatePicker },
     setup: () => ({
       args,
+      now,
       onChange: action('change'),
     }),
     template,
@@ -58,6 +62,11 @@ const Template = args => {
 
 export const Default = Template.bind({});
 Default.args = initArgs;
+Default.parameters = {
+  controls: {
+    exclude: ['update:modelValue', 'invalid-message', 'modelValue'],
+  },
+};
 Default.parameters = storyParametersObject(
   Default.parameters,
   template,
@@ -66,13 +75,13 @@ Default.parameters = storyParametersObject(
 
 /* V-MODEL STORY */
 
-const modelValue = ref('');
+const modelValue = ref(now);
 const templateVModel = `
 <div>
-  <cv-date-picker v-bind='args' @change='onChange' v-model="modelValue">
+  <cv-date-picker v-bind="args" @change="onChange" v-model="modelValue">
   </cv-date-picker>
 </div>
-<div style="margin: 32px 0;">
+<div style="margin-top:2rem; background-color: #888888;  padding:1rem">
   <div style="font-size: 150%;">Sample interaction</div>
   <label for="date-model" style='margin-right: 0.5rem'>V-model:</label>
   <input id="date-model" type="text" :value="modelValue.startDate || modelValue" @change="ev => { if (args.kind === 'range') { modelValue.startDate = ev.currentTarget.value } else { modelValue = ev.currentTarget.value } }"/>
@@ -95,6 +104,11 @@ const TemplateVModel = args => {
 
 export const vModel = TemplateVModel.bind({});
 vModel.args = initArgs;
+vModel.parameters = {
+  controls: {
+    exclude: ['update:modelValue', 'invalid-message', 'modelValue'],
+  },
+};
 vModel.parameters = storyParametersObject(
   vModel.parameters,
   templateVModel,
@@ -105,7 +119,7 @@ vModel.parameters = storyParametersObject(
 
 const templateInvalidMessage = `
 <div>
-  <cv-date-picker v-bind='args' @change='onChange'>
+  <cv-date-picker v-bind="args" @change="onChange" :value="now">
   </cv-date-picker>
 </div>
 `;
@@ -115,6 +129,7 @@ const TemplateInvalidMessage = args => {
     components: { CvDatePicker },
     setup: () => ({
       args,
+      now,
       onChange: action('change'),
     }),
     template: templateInvalidMessage,
@@ -123,12 +138,22 @@ const TemplateInvalidMessage = args => {
 
 export const InvalidMessage = TemplateInvalidMessage.bind({});
 InvalidMessage.args = { ...initArgs, invalidMessage: 'Invalid date' };
+InvalidMessage.parameters = {
+  controls: {
+    include: ['invalidMessage'],
+  },
+};
+InvalidMessage.parameters = storyParametersObject(
+  InvalidMessage.parameters,
+  templateInvalidMessage,
+  InvalidMessage.args
+);
 
 /* INVALID MESSAGE SLOT STORY */
 
 const templateInvalidMessageSlot = `
 <div>
-  <cv-date-picker v-bind='args' @change='onChange'>
+  <cv-date-picker v-bind="args" @change="onChange" :value="now">
     <template #invalid-message>Invalid date slot</template>
   </cv-date-picker>
 </div>
@@ -139,6 +164,7 @@ const TemplateInvalidMessageSlot = args => {
     components: { CvDatePicker },
     setup: () => ({
       args,
+      now,
       onChange: action('change'),
     }),
     template: templateInvalidMessageSlot,
@@ -147,13 +173,35 @@ const TemplateInvalidMessageSlot = args => {
 
 export const InvalidMessageSlot = TemplateInvalidMessageSlot.bind({});
 InvalidMessageSlot.args = initArgs;
+InvalidMessageSlot.parameters = {
+  controls: {
+    include: [],
+  },
+  docs: {
+    description: {
+      story: `Use slot to set invalid message \`<template #invalid-message>Invalid date slot</template>\``,
+    },
+  },
+};
+InvalidMessageSlot.parameters = storyParametersObject(
+  InvalidMessageSlot.parameters,
+  templateInvalidMessageSlot,
+  InvalidMessageSlot.args
+);
 
 /* SINGLE USING DATE STORY */
 
+const singleValue = ref(now);
 const templateSingleUsingDate = `
 <div>
-  <cv-date-picker v-bind='args' @change='onChange' kind="single" :value="now">
+  <cv-date-picker v-bind="args" @change="onChange" kind="single" v-model="singleValue">
   </cv-date-picker>
+</div>`;
+const templateSingleUsingDateVModel = `
+<div style="margin-top:2rem; background-color: #888888;  padding:1rem">
+  <div style="font-size: 150%;">Sample interaction</div>
+  <label for="date-model" style='margin-right: 0.5rem'>V-model:</label>
+  <input id="date-model" type="text" :value="singleValue" @change="ev => { singleValue = ev.currentTarget.value }"/>
 </div>
 `;
 
@@ -163,20 +211,90 @@ const TemplateSingleUsingDate = args => {
     setup: () => ({
       args,
       now,
+      singleValue,
       onChange: action('change'),
     }),
-    template: templateSingleUsingDate,
+    template: templateSingleUsingDate + templateSingleUsingDateVModel,
   };
 };
 
 export const SingleUsingDate = TemplateSingleUsingDate.bind({});
 SingleUsingDate.args = initArgs;
+SingleUsingDate.parameters = {
+  controls: {
+    include: ['dateLabel', 'disabled', 'invalidMessage', 'placeholder'],
+  },
+  docs: {
+    description: {
+      story: `Example of single date input with v-model`,
+    },
+  },
+};
+SingleUsingDate.parameters = storyParametersObject(
+  SingleUsingDate.parameters,
+  templateSingleUsingDate,
+  SingleUsingDate.args
+);
+
+/* SINGLE USING MIN MAX PARAMS STORY */
+
+const templateSingleUsingMinMax = `
+<div>
+  <cv-date-picker v-bind='args' @change="onChange" kind="single" :value="now" :cal-options="calOptions">
+  </cv-date-picker>
+</div>
+`;
+
+const TemplateSingleUsingMinMax = args => {
+  return {
+    components: { CvDatePicker },
+    setup: () => ({
+      args,
+      now,
+      calOptions: {
+        minDate: now,
+        maxDate: nextWeek,
+        dateFormat: 'm/d/Y',
+      },
+      onChange: action('change'),
+    }),
+    template: templateSingleUsingMinMax,
+  };
+};
+
+const codeMinMax = `
+const now = new Date();
+const nextWeek = new Date();
+nextWeek.setDate(now.getDate() + 7);
+const calOptions = ref({
+        minDate: now,
+        maxDate: nextWeek,
+        dateFormat: 'm/d/Y'
+      })
+${templateSingleUsingMinMax}
+`;
+const docMinMax = `Example showing how "calOptions" prop can be used to control the min/max date.`;
+export const SingleUsingMinMax = TemplateSingleUsingMinMax.bind({});
+SingleUsingMinMax.args = initArgs;
+
+SingleUsingMinMax.parameters = {
+  controls: {
+    exclude: ['update:modelValue', 'invalid-message', 'modelValue', 'kind'],
+  },
+  docs: {
+    source: { code: codeMinMax },
+    description: {
+      story: docMinMax,
+    },
+  },
+};
 
 /* RANGE USING DATE STORY */
 
 const templateRangeUsingDate = `
 <div>
-  <cv-date-picker v-bind='args' @change='onChange' kind="range" :value="{startDate: now.toLocaleDateString(), endDate: tomorrow.toLocaleDateString()}">
+  <cv-date-picker v-bind="args" @change="onChange" kind="range"
+      :value="{startDate: now.toLocaleDateString(), endDate: tomorrow.toLocaleDateString()}">
   </cv-date-picker>
 </div>
 `;
@@ -196,12 +314,22 @@ const TemplateRangeUsingDate = args => {
 
 export const RangeUsingDate = TemplateRangeUsingDate.bind({});
 RangeUsingDate.args = initArgs;
+RangeUsingDate.parameters = {
+  controls: {
+    exclude: ['update:modelValue', 'invalid-message', 'kind', 'modelValue'],
+  },
+};
+RangeUsingDate.parameters = storyParametersObject(
+  RangeUsingDate.parameters,
+  templateRangeUsingDate,
+  RangeUsingDate.args
+);
 
 /* MINIMAL STORY */
 
 const templateMinimal = `
 <div>
-  <cv-date-picker v-bind='args' @change='onChange'>
+  <cv-date-picker v-bind="args" @change="onChange" :value="now">
   </cv-date-picker>
 </div>
 `;
@@ -211,6 +339,7 @@ const TemplateMinimal = args => {
     components: { CvDatePicker },
     setup: () => ({
       args,
+      now,
       onChange: action('change'),
     }),
     template: templateMinimal,
@@ -218,12 +347,22 @@ const TemplateMinimal = args => {
 };
 
 export const Minimal = TemplateMinimal.bind({});
+Minimal.parameters = {
+  controls: {
+    exclude: ['update:modelValue', 'invalid-message', 'modelValue'],
+  },
+};
+Minimal.parameters = storyParametersObject(
+  Minimal.parameters,
+  templateMinimal,
+  Minimal.args
+);
 
 /* SKELETON STORY */
 
 const templateSkeleton = `
 <div>
-  <cv-date-picker-skeleton v-bind='args'></cv-date-picker-skeleton>
+  <cv-date-picker-skeleton v-bind="args"></cv-date-picker-skeleton>
 </div>
 `;
 
@@ -239,3 +378,15 @@ const TemplateSkeleton = args => {
 };
 
 export const Skeleton = TemplateSkeleton.bind({});
+Skeleton.args = initArgs;
+Skeleton.args = initArgs;
+Skeleton.parameters = {
+  controls: {
+    include: [],
+  },
+};
+Skeleton.parameters = storyParametersObject(
+  Skeleton.parameters,
+  templateSkeleton,
+  Skeleton.args
+);

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
@@ -139,13 +139,22 @@ let calendar;
 
 const props = defineProps({
   modelValue: { type: [String, Object, Array, Date], default: undefined },
+  /** Date picker label */
   dateLabel: { type: String, default: undefined },
+  /** Date picker end label (when using kind="range") */
   dateEndLabel: { type: String, default: 'End date' },
-  invalid: { type: Boolean, default: false },
+  /** If true, the date picker will be disabled */
   disabled: { type: Boolean, default: false },
+  /** Date picker text on invalid value */
   invalidMessage: { type: String, default: undefined },
+  /** Regex pattern used for form validation, default \d{1,2}/\d{1,2}/\d{4} */
   pattern: { type: String, default: '\\d{1,2}/\\d{1,2}/\\d{4}' },
+  /** Date picker input placeholder, shown when date picker is empty. Default 'mm/dd/yyyy' */
   placeholder: { type: String, default: 'mm/dd/yyyy' },
+  /** You can pass flatpickr options through this prop.
+   See https://flatpickr.js.org/options/ for more details.
+   Some of the options is not supported (for example, onChange, onReady, mode, nextArrow, prevArrow).
+   Also, you have to pass dateFormat field in calOptions object if you use it. */
   calOptions: {
     type: Object,
     default() {
@@ -155,6 +164,8 @@ const props = defineProps({
     },
   },
   formItem: { type: Boolean, default: true },
+  /** Date picker kind (also known as mode in flatpickr options).
+   Possible values: 'short', 'simple', 'single', 'range' */
   kind: {
     type: String,
     default: 'simple',
@@ -180,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(() => {
@@ -300,6 +309,7 @@ const initFlatpickr = () => {
 };
 
 let dateToString = val => {
+  if (!val) return '';
   return calendar.formatDate(val, props.calOptions.dateFormat);
 };
 
@@ -336,14 +346,17 @@ const handleUpdateEvent = event => {
 };
 
 const setDate = value => {
-  if (!value) return;
-
-  if (isSingle.value) {
-    calendar.setDate(value, true);
-  } else if (isRange.value) {
-    calendar.setDate([value.startDate, value.endDate], true);
-  } else {
-    date.value.value = value;
+  try {
+    if (value === undefined) return;
+    if (isSingle.value) {
+      calendar.setDate(value, true);
+    } else if (isRange.value) {
+      calendar.setDate([value.startDate, value.endDate], true);
+    } else {
+      date.value.value = value;
+    }
+  } catch (e) {
+    console.error('setDate', e);
   }
 };
 

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"