From 0cd0485ff0381237354450244dfcd655e634e342 Mon Sep 17 00:00:00 2001
From: David Nixon <david_nixon@us.ibm.com>
Date: Mon, 8 Apr 2024 10:03:31 -0400
Subject: [PATCH] fix: add calOptions as reactive prop

---
 .../CvDatePicker/CvDatePicker.stories.js      | 31 +++++++++++++++----
 src/components/CvDatePicker/CvDatePicker.vue  | 23 +++++++++-----
 2 files changed, 40 insertions(+), 14 deletions(-)

diff --git a/src/components/CvDatePicker/CvDatePicker.stories.js b/src/components/CvDatePicker/CvDatePicker.stories.js
index 41b0be764..84a7e15d3 100644
--- a/src/components/CvDatePicker/CvDatePicker.stories.js
+++ b/src/components/CvDatePicker/CvDatePicker.stories.js
@@ -237,11 +237,32 @@ SingleUsingDate.parameters = storyParametersObject(
 );
 
 /* SINGLE USING MIN MAX PARAMS STORY */
-
+const calOptions = ref({
+  minDate: now,
+  maxDate: nextWeek,
+  dateFormat: 'm/d/Y',
+});
+function toggleDateFormat() {
+  if (calOptions.value.dateFormat === 'm/d/Y')
+    calOptions.value.dateFormat = 'Y-m-d';
+  else calOptions.value.dateFormat = 'm/d/Y';
+}
+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 to 'm/d/Y' or 'Y-m-d'</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 +272,9 @@ const TemplateSingleUsingMinMax = args => {
     setup: () => ({
       args,
       now,
-      calOptions: {
-        minDate: now,
-        maxDate: nextWeek,
-        dateFormat: 'm/d/Y',
-      },
+      calOptions,
+      toggleDateFormat,
+      changeMaxDate,
       onChange: action('change'),
     }),
     template: templateSingleUsingMinMax,
diff --git a/src/components/CvDatePicker/CvDatePicker.vue b/src/components/CvDatePicker/CvDatePicker.vue
index 2bdd8512b..e083ad68f 100644
--- a/src/components/CvDatePicker/CvDatePicker.vue
+++ b/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>