@carbon/vue 3.0.11 → 3.0.13

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

@@ -42,13 +42,12 @@
             data-date-picker-input
             role="datepicker"
             :data-invalid="isInvalid || null"
-            :disabled="disabled"
-            :data-date-picker-input-from="getKind === 'range'"
+            :disabled="disabled || null"
+            :data-date-picker-input-from="`${getKind === 'range'}`"
             :class="`${carbonPrefix}--date-picker__input`"
             :pattern="pattern"
             :placeholder="placeholder"
             @change="handleUpdateEvent"
-            @click="handleClick"
           />
           <Calendar16
             v-if="['single', 'range'].includes(getKind)"
@@ -87,9 +86,9 @@
             type="text"
             data-date-picker-input
             role="todatepicker"
-            :data-date-picker-input-to="kind === 'range'"
+            :data-date-picker-input-to="`${kind === 'range'}`"
             :data-invalid="isInvalid || null"
-            :disabled="disabled"
+            :disabled="disabled || null"
             :class="`${carbonPrefix}--date-picker__input`"
             :pattern="pattern"
             :placeholder="placeholder"
@@ -136,20 +135,26 @@ const dateWrapper = ref(null);
 const date = ref(null);
 const todate = ref(null);
 
-const cvId = useCvId(props, true, 'date-picker-');
-const isLight = useIsLight(props);
-
 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() {
@@ -159,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',
@@ -169,6 +176,9 @@ const props = defineProps({
   ...propsCvTheme,
 });
 
+const cvId = useCvId(props, true, 'date-picker-');
+const isLight = useIsLight(props);
+
 const emit = defineEmits(['update:modelValue']);
 
 const getKind = computed({
@@ -301,6 +311,7 @@ const initFlatpickr = () => {
 };
 
 let dateToString = val => {
+  if (!val) return '';
   return calendar.formatDate(val, props.calOptions.dateFormat);
 };
 
@@ -337,14 +348,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/CvModal/CvModal.vue

@@ -8,7 +8,7 @@
         `cv-modal ${carbonPrefix}--modal`,
         {
           'is-visible': dataVisible,
-          [`${carbonPrefix}--modal--danger`]: kind === 'danger',
+          [`${carbonPrefix}--modal--danger`]: kind === MODAL_KIND_DANGER,
         },
       ]"
       tabindex="-1"
@@ -119,6 +119,15 @@
 </template>
 
 <script setup>
+import {
+  MODAL_KIND_DANGER,
+  MODAL_KIND_PRIMARY,
+  MODAL_KINDS,
+  MODAL_SIZE_EXTRA_SMALL,
+  MODAL_SIZE_LARGE,
+  MODAL_SIZE_SMALL,
+  MODAL_SIZES,
+} from './index';
 import CvButton from '../CvButton/CvButton.vue';
 import { carbonPrefix } from '../../global/settings';
 import { props as propsCvId, useCvId } from '../../use/cvId';
@@ -155,7 +164,11 @@ const props = defineProps({
   kind: {
     type: String,
     default: '',
-    validator: val => ['', 'danger'].includes(val),
+    validator: val => {
+      const valid = MODAL_KINDS.includes(val);
+      if (!valid) console.warn('valid kinds:', MODAL_KINDS);
+      return valid;
+    },
   },
   /**
    * boolean value if true the component user is expected to close the modal via visible property.
@@ -187,8 +200,11 @@ const props = defineProps({
    */
   size: {
     type: String,
-    validator: val =>
-      ['', 'xs', 'sm', 'small', 'md', 'large', 'lg'].includes(val),
+    validator: val => {
+      const valid = MODAL_SIZES.includes(val);
+      if (!valid) console.warn('valid sizes:', MODAL_SIZES);
+      return valid;
+    },
     default: '',
   },
   /**
@@ -333,22 +349,22 @@ const dialogAttrs = computed(() => {
   return attrs;
 });
 const primaryKind = computed(() => {
-  if (props.kind === 'danger') {
-    return 'danger';
+  if (props.kind === MODAL_KIND_DANGER) {
+    return MODAL_KIND_DANGER;
   } else {
-    return 'primary';
+    return MODAL_KIND_PRIMARY;
   }
 });
 const internalSize = computed(() => {
   switch (props.size) {
-    case 'xs':
-      return 'xs';
-    case 'sm':
+    case MODAL_SIZE_EXTRA_SMALL:
+      return MODAL_SIZE_EXTRA_SMALL;
+    case MODAL_SIZE_SMALL:
     case 'small':
-      return 'sm';
-    case 'lg':
+      return MODAL_SIZE_SMALL;
+    case MODAL_SIZE_LARGE:
     case 'large':
-      return 'lg';
+      return MODAL_SIZE_LARGE;
     default:
       return '';
   }
@@ -398,4 +414,10 @@ function onOtherBtnClick(ev) {
 onBeforeUnmount(() => {
   if (dataVisible.value) hide();
 });
+
+// exposing methods
+defineExpose({
+  show,
+  hide,
+});
 </script>

package/src/components/CvModal/index.js

@@ -1,3 +1,31 @@
 import CvModal from './CvModal.vue';
-export { CvModal };
+
+const MODAL_SIZE_EXTRA_SMALL = 'xs';
+const MODAL_SIZE_SMALL = 'sm';
+const MODAL_SIZE_MEDIUM = 'md';
+const MODAL_SIZE_LARGE = 'lg';
+const MODAL_SIZES = [
+  '',
+  MODAL_SIZE_EXTRA_SMALL,
+  MODAL_SIZE_SMALL,
+  'small',
+  MODAL_SIZE_MEDIUM,
+  'medium',
+  'large',
+  MODAL_SIZE_LARGE,
+];
+const MODAL_KIND_PRIMARY = 'primary';
+const MODAL_KIND_DANGER = 'danger';
+const MODAL_KINDS = ['', MODAL_KIND_PRIMARY, MODAL_KIND_DANGER];
+
+export {
+  CvModal,
+  MODAL_SIZES,
+  MODAL_SIZE_EXTRA_SMALL,
+  MODAL_SIZE_SMALL,
+  MODAL_SIZE_LARGE,
+  MODAL_KINDS,
+  MODAL_KIND_PRIMARY,
+  MODAL_KIND_DANGER,
+};
 export default CvModal;

package/src/components/CvMultiSelect/CvMultiSelect.vue

@@ -426,8 +426,8 @@ onUpdated(checkSlots);
 onMounted(updateOptions);
 onMounted(updateSelectedItems);
 
-watch(() => props.modelValue, updateSelectedItems);
-watch(() => props.options, updateOptions);
+watch(() => props.modelValue, updateSelectedItems, { deep: true });
+watch(() => props.options, updateOptions, { deep: true });
 watch(() => props.selectionFeedback, updateOptions);
 
 const highlighted = computed({

package/src/components/CvNotification/CvInlineNotification.stories.js

@@ -1,7 +1,8 @@
 import { action } from '@storybook/addon-actions';
-import { sbCompPrefix } from '../../global/storybook-utils';
+import { sbCompPrefix, storySourceCode } from '../../global/storybook-utils';
 
 import { CvInlineNotification, CvNotificationConsts } from '.';
+import DocumentationTemplate from './CvInlineNotificationTemplate.mdx';
 
 export default {
   title: `${sbCompPrefix}/CvInlineNotification`,
@@ -59,6 +60,11 @@ export default {
       control: { type: 'boolean' },
     },
   },
+  parameters: {
+    docs: {
+      page: DocumentationTemplate,
+    },
+  },
 };
 
 const template = `<cv-inline-notification v-bind="args" @action="onAction" @close="onClose" />`;
@@ -79,6 +85,10 @@ const Template = args => {
 export const Info = Template.bind({});
 Info.args = {
   kind: CvNotificationConsts.notificationKinds[0],
+  primary: true,
+};
+Info.parameters = {
+  docs: { source: { code: storySourceCode(template, Info.args) } },
 };
 
 export const InfoSquare = Template.bind({});
@@ -86,24 +96,71 @@ InfoSquare.storyName = 'Info square';
 InfoSquare.args = {
   kind: CvNotificationConsts.notificationKinds[1],
 };
+InfoSquare.parameters = {
+  docs: { source: { code: storySourceCode(template, InfoSquare.args) } },
+};
 
 export const Success = Template.bind({});
 Success.args = {
   kind: CvNotificationConsts.notificationKinds[2],
 };
+Success.parameters = {
+  docs: { source: { code: storySourceCode(template, Success.args) } },
+};
 
 export const Warning = Template.bind({});
 Warning.args = {
   kind: CvNotificationConsts.notificationKinds[3],
 };
+Warning.parameters = {
+  docs: { source: { code: storySourceCode(template, Warning.args) } },
+};
 
 export const WarningAlt = Template.bind({});
 WarningAlt.storyName = 'Warning (alt)';
 WarningAlt.args = {
   kind: CvNotificationConsts.notificationKinds[4],
 };
+WarningAlt.parameters = {
+  docs: { source: { code: storySourceCode(template, WarningAlt.args) } },
+};
 
 export const Error = Template.bind({});
 Error.args = {
   kind: CvNotificationConsts.notificationKinds[5],
 };
+Error.parameters = {
+  docs: { source: { code: storySourceCode(template, Error.args) } },
+};
+
+const templateSlots = `
+  <cv-inline-notification v-bind="args">
+    <template #title>
+      <h2>Big title</h2>
+    </template>
+    <template #subtitle>
+    Lorem ipsum dolor sit amet, <a href="#">consectetur adipisicing elit</a>, seed do eiusmod tempor <strong>incididunt ut labore</strong> et dolore magna aliqua.
+    </template>
+  </cv-inline-notification>`;
+const SlotTemplate = args => {
+  return {
+    components: { CvInlineNotification },
+    template: templateSlots,
+    setup() {
+      return {
+        onAction: action('action'),
+        onClose: action('close'),
+        args,
+      };
+    },
+  };
+};
+export const Slots = SlotTemplate.bind({});
+Slots.args = {
+  kind: CvNotificationConsts.notificationKinds[0],
+  actionLabel: '',
+  hideCloseButton: true,
+};
+Slots.parameters = {
+  docs: { source: { code: storySourceCode(templateSlots, Slots.args) } },
+};