fix(cv-date-picker): improve date picker story

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`,
@@ -30,10 +32,30 @@ export default {
   },
   argTypes: {
     dateLabel: { type: String, description: 'Date picker label' },
+    dateEndLabel: {
+      type: String,
+      description: 'Date picker end label (when using kind="range")',
+    },
     invalidMessage: {
       type: String,
       description: 'Date picker text on invalid value',
     },
+    kind: {
+      type: String,
+      description: 'Date picker kind (also known as mode in flatpickr).',
+      options: ['short', 'simple', 'single', 'range'],
+      control: { type: 'select' },
+    },
+    disabled: {
+      type: Boolean,
+      description: 'If true, the date picker will be disabled',
+    },
+    calOptions: {
+      type: Object,
+      description: `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).`,
+    },
   },
 };
 
@@ -172,6 +194,35 @@ const TemplateSingleUsingDate = args => {
 export const SingleUsingDate = TemplateSingleUsingDate.bind({});
 SingleUsingDate.args = initArgs;
 
+/* 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,
+  };
+};
+
+export const SingleUsingMinMax = TemplateSingleUsingMinMax.bind({});
+SingleUsingMinMax.args = initArgs;
+
 /* RANGE USING DATE STORY */
 
 const templateRangeUsingDate = `

src/components/CvDatePicker/CvDatePicker.vue

@@ -141,7 +141,6 @@ const props = defineProps({
   modelValue: { type: [String, Object, Array, Date], default: undefined },
   dateLabel: { type: String, default: undefined },
   dateEndLabel: { type: String, default: 'End date' },
-  invalid: { type: Boolean, default: false },
   disabled: { type: Boolean, default: false },
   invalidMessage: { type: String, default: undefined },
   pattern: { type: String, default: '\\d{1,2}/\\d{1,2}/\\d{4}' },