@carbon/vue 3.0.20 → 3.0.22

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: {
@@ -44,7 +41,7 @@ export default {
 
 const template = `
 <div>
-  <cv-date-picker v-bind="args" @change="onChange" :value="now">
+  <cv-date-picker v-bind="args" :value="now" @change="onChange">
   </cv-date-picker>
 </div>
 `;
@@ -64,7 +61,12 @@ export const Default = Template.bind({});
 Default.args = initArgs;
 Default.parameters = {
   controls: {
-    exclude: ['update:modelValue', 'invalid-message', 'modelValue'],
+    exclude: [
+      'update:modelValue',
+      'invalid-message',
+      'modelValue',
+      'dateChange',
+    ],
   },
 };
 Default.parameters = storyParametersObject(
@@ -78,14 +80,13 @@ Default.parameters = storyParametersObject(
 const modelValue = ref(now);
 const templateVModel = `
 <div>
-  <cv-date-picker v-bind="args" @change="onChange" v-model="modelValue">
+  <cv-date-picker v-bind="args" v-model="modelValue">
   </cv-date-picker>
 </div>
 <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 } }"/>
-  <input v-if="args.kind === 'range'" id="date-model" type="text" :value="modelValue.endDate" @change="ev => modelValue.endDate = ev.currentTarget.value"/>
+  <input id="date-model" type="text" :value="modelValue" @change="ev => { modelValue = ev.currentTarget.value }"/>
 </div>
 `;
 
@@ -96,7 +97,6 @@ const TemplateVModel = args => {
       args,
       modelValue,
       now,
-      onChange: action('change'),
     }),
     template: templateVModel,
   };
@@ -106,7 +106,14 @@ export const vModel = TemplateVModel.bind({});
 vModel.args = initArgs;
 vModel.parameters = {
   controls: {
-    exclude: ['update:modelValue', 'invalid-message', 'modelValue'],
+    exclude: [
+      'update:modelValue',
+      'invalid-message',
+      'modelValue',
+      'kind',
+      'value',
+      'dateChange',
+    ],
   },
 };
 vModel.parameters = storyParametersObject(
@@ -115,11 +122,58 @@ vModel.parameters = storyParametersObject(
   vModel.args
 );
 
+/* range v-model */
+const rangeValue = ref({ startDate: now, endDate: now });
+const templateRangeVModel = `
+<div>
+  <cv-date-picker v-bind="args" kind="range" v-model="rangeValue">
+  </cv-date-picker>
+</div>
+<div style="margin-top:2rem; background-color: #888888;  padding:1rem">
+  <div style="font-size: 150%;">Sample range interaction</div>
+  <label for="date-model-1" style='margin-right: 0.5rem'>V-model:</label>
+  <input id="date-model-1" type="text" :value="rangeValue.startDate" @change="ev => { rangeValue.startDate = ev.currentTarget.value }"/>
+  <input id="date-model-2" type="text" :value="rangeValue.endDate" @change="ev => rangeValue.endDate = ev.currentTarget.value"/>
+</div>
+`;
+
+const TemplateRangeVModel = args => {
+  return {
+    components: { CvDatePicker },
+    setup: () => ({
+      args,
+      rangeValue,
+      now,
+    }),
+    template: templateRangeVModel,
+  };
+};
+
+export const rangeVmodel = TemplateRangeVModel.bind({});
+rangeVmodel.args = initArgs;
+rangeVmodel.parameters = {
+  controls: {
+    exclude: [
+      'update:modelValue',
+      'invalid-message',
+      'modelValue',
+      'kind',
+      'value',
+      'dateChange',
+    ],
+  },
+};
+rangeVmodel.parameters = storyParametersObject(
+  rangeVmodel.parameters,
+  templateRangeVModel,
+  rangeVmodel.args
+);
+
 /* INVALID MESSAGE STORY */
 
 const templateInvalidMessage = `
 <div>
-  <cv-date-picker v-bind="args" @change="onChange" :value="now">
+  <cv-date-picker v-bind="args" :value="now" @change="onChange">
   </cv-date-picker>
 </div>
 `;
@@ -153,7 +207,7 @@ InvalidMessage.parameters = storyParametersObject(
 
 const templateInvalidMessageSlot = `
 <div>
-  <cv-date-picker v-bind="args" @change="onChange" :value="now">
+  <cv-date-picker v-bind="args" :value="now" @change="onChange">
     <template #invalid-message>Invalid date slot</template>
   </cv-date-picker>
 </div>
@@ -194,7 +248,7 @@ InvalidMessageSlot.parameters = storyParametersObject(
 const singleValue = ref(now);
 const templateSingleUsingDate = `
 <div>
-  <cv-date-picker v-bind="args" @change="onChange" kind="single" v-model="singleValue">
+  <cv-date-picker v-bind="args" kind="single" v-model="singleValue" @dateChange="onDateChange">
   </cv-date-picker>
 </div>`;
 const templateSingleUsingDateVModel = `
@@ -212,7 +266,7 @@ const TemplateSingleUsingDate = args => {
       args,
       now,
       singleValue,
-      onChange: action('change'),
+      onDateChange: action('dateChange'),
     }),
     template: templateSingleUsingDate + templateSingleUsingDateVModel,
   };
@@ -258,7 +312,7 @@ function changeMaxDate(inc) {
 }
 const templateSingleUsingMinMax = `
 <div>
-  <cv-date-picker v-bind='args' @change="onChange" kind="single" :value="now" :cal-options="calOptions">
+  <cv-date-picker v-bind='args' kind="single" :value="now" :cal-options="calOptions" @dateChange="onDateChange">
   </cv-date-picker>
   <div style="margin-top:2rem; background-color: #888888;  padding:1rem; width:fit-content">
   <div>Reactive updates</div>
@@ -280,7 +334,7 @@ const TemplateSingleUsingMinMax = args => {
       toggleDateFormat,
       buttonLabel,
       changeMaxDate,
-      onChange: action('change'),
+      onDateChange: action('dateChange'),
     }),
     template: templateSingleUsingMinMax,
   };
@@ -303,7 +357,14 @@ SingleUsingMinMax.args = initArgs;
 
 SingleUsingMinMax.parameters = {
   controls: {
-    exclude: ['update:modelValue', 'invalid-message', 'modelValue', 'kind'],
+    exclude: [
+      'update:modelValue',
+      'invalid-message',
+      'modelValue',
+      'kind',
+      'dateChange',
+      'value',
+    ],
   },
   docs: {
     source: { code: codeMinMax },
@@ -317,8 +378,10 @@ SingleUsingMinMax.parameters = {
 
 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"
+      kind="range"
+      :value="{startDate: now.toLocaleDateString(), endDate: tomorrow.toLocaleDateString()}"
+      @dateChange="onDateChange">
   </cv-date-picker>
 </div>
 `;
@@ -330,7 +393,7 @@ const TemplateRangeUsingDate = args => {
       args,
       now,
       tomorrow,
-      onChange: action('change'),
+      onDateChange: action('dateChange'),
     }),
     template: templateRangeUsingDate,
   };
@@ -340,7 +403,14 @@ export const RangeUsingDate = TemplateRangeUsingDate.bind({});
 RangeUsingDate.args = initArgs;
 RangeUsingDate.parameters = {
   controls: {
-    exclude: ['update:modelValue', 'invalid-message', 'kind', 'modelValue'],
+    exclude: [
+      'update:modelValue',
+      'invalid-message',
+      'kind',
+      'modelValue',
+      'dateChange',
+      'value',
+    ],
   },
 };
 RangeUsingDate.parameters = storyParametersObject(
@@ -353,8 +423,7 @@ RangeUsingDate.parameters = storyParametersObject(
 
 const templateMinimal = `
 <div>
-  <cv-date-picker v-bind="args" @change="onChange" :value="now">
-  </cv-date-picker>
+  <cv-date-picker v-bind="args" :value="now" @change="onChange"/>
 </div>
 `;
 
@@ -373,7 +442,13 @@ const TemplateMinimal = args => {
 export const Minimal = TemplateMinimal.bind({});
 Minimal.parameters = {
   controls: {
-    exclude: ['update:modelValue', 'invalid-message', 'modelValue'],
+    exclude: [
+      'update:modelValue',
+      'invalid-message',
+      'modelValue',
+      'dateChange',
+      'value',
+    ],
   },
 };
 Minimal.parameters = storyParametersObject(
@@ -395,7 +470,6 @@ const TemplateSkeleton = args => {
     components: { CvDatePicker, CvDatePickerSkeleton },
     setup: () => ({
       args,
-      onChange: action('change'),
     }),
     template: templateSkeleton,
   };

package/src/components/CvDatePicker/CvDatePicker.vue

@@ -179,7 +179,7 @@ const props = defineProps({
 const cvId = useCvId(props, true, 'date-picker-');
 const isLight = useIsLight(props);
 
-const emit = defineEmits(['update:modelValue']);
+const emit = defineEmits(['update:modelValue', 'dateChange']);
 
 const getKind = computed({
   get() {
@@ -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 }
@@ -332,6 +332,7 @@ const handleDatePick = (selectedDates, dateStr, instance) => {
     });
 
     emit('update:modelValue', temp);
+    emit('dateChange', selectedDates);
   } else if (isRange.value && selectedDates[0] && selectedDates[1]) {
     const startDate = dateToString(selectedDates[0]);
     const endDate = dateToString(selectedDates[1]);
@@ -345,6 +346,7 @@ const handleDatePick = (selectedDates, dateStr, instance) => {
       startDate: startDate,
       endDate: endDate,
     });
+    emit('dateChange', selectedDates);
   }
 };
 

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

package/src/components/CvToggle/CvToggle.stories.js

@@ -1,7 +1,4 @@
-import {
-  sbCompPrefix,
-  storyParametersObject,
-} from '../../global/storybook-utils';
+import { storyParametersObject } from '../../global/storybook-utils';
 
 import { CvToggle } from '.';
 import { CvToggleSkeleton } from '.';
@@ -20,7 +17,7 @@ const initArgsMinimal = {
 };
 
 export default {
-  title: `${sbCompPrefix}/CvToggle`,
+  title: 'Component/CvToggle',
   component: CvToggle,
   parameters: {
     a11y: {

package/src/components/CvTooltip/CvDefinitionTooltip.stories.js

@@ -1,13 +1,9 @@
 import CvDefinitionTooltip from './CvDefinitionTooltip.vue';
-import {
-  sbCompPrefix,
-  storyParametersObject,
-} from '../../global/storybook-utils';
+import { storyParametersObject } from '../../global/storybook-utils';
 import { alignments, directions } from './consts';
-import { sbTooltipPrefix } from './sbTooltipPrefix';
 
 export default {
-  title: `${sbCompPrefix}/${sbTooltipPrefix}/CvDefinitionTooltip`,
+  title: 'Component/CvDefinitionTooltip',
   component: CvDefinitionTooltip,
   argTypes: {
     alignment: {

package/src/components/CvTooltip/CvInteractiveTooltip.stories.js

@@ -1,14 +1,10 @@
 import CvInteractiveTooltip from './CvInteractiveTooltip.vue';
-import {
-  sbCompPrefix,
-  storyParametersObject,
-} from '../../global/storybook-utils';
+import { storyParametersObject } from '../../global/storybook-utils';
 import { alignments, directions } from './consts';
-import { sbTooltipPrefix } from './sbTooltipPrefix';
 import Filter16 from '@carbon/icons-vue/es/filter/16';
 
 export default {
-  title: `${sbCompPrefix}/${sbTooltipPrefix}/CvInteractiveTooltip`,
+  title: 'Component/CvInteractiveTooltip',
   component: CvInteractiveTooltip,
   argTypes: {
     alignment: {

package/src/components/CvTooltip/CvTooltip.stories.js

@@ -1,13 +1,9 @@
 import CvTooltip from './CvTooltip.vue';
-import {
-  sbCompPrefix,
-  storyParametersObject,
-} from '../../global/storybook-utils';
+import { storyParametersObject } from '../../global/storybook-utils';
 import { alignments, directions } from './consts';
-import { sbTooltipPrefix } from './sbTooltipPrefix';
 
 export default {
-  title: `${sbCompPrefix}/${sbTooltipPrefix}/CvTooltip`,
+  title: 'Component/CvTooltip',
   component: CvTooltip,
   argTypes: {
     alignment: {