[Vue] date picker viewDate property is not kept up to date (#18385)4.6.0

* viewDate ref is not kept up to date

* rebuild corehome

3 files changed, 10 insertions, 6 deletions

diff --git a/plugins/CoreHome/vue/dist/CoreHome.umd.js b/plugins/CoreHome/vue/dist/CoreHome.umd.js
index 6b218626b3..89c403effb 100644
--- a/plugins/CoreHome/vue/dist/CoreHome.umd.js
+++ b/plugins/CoreHome/vue/dist/CoreHome.umd.js
@@ -4668,9 +4668,9 @@ DateRangePickervue_type_script_lang_ts.render = DateRangePickervue_type_template
   directiveName: 'piwikDateRangePicker',
   restrict: 'E'
 }));
-// CONCATENATED MODULE: ./node_modules/@vue/cli-plugin-babel/node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/@vue/cli-plugin-babel/node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist/templateLoader.js??ref--6!./node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist??ref--0-1!./plugins/CoreHome/vue/src/PeriodDatePicker/PeriodDatePicker.vue?vue&type=template&id=0fe3c4e7
+// CONCATENATED MODULE: ./node_modules/@vue/cli-plugin-babel/node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/@vue/cli-plugin-babel/node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist/templateLoader.js??ref--6!./node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist??ref--0-1!./plugins/CoreHome/vue/src/PeriodDatePicker/PeriodDatePicker.vue?vue&type=template&id=effd17b0
 
-function PeriodDatePickervue_type_template_id_0fe3c4e7_render(_ctx, _cache, $props, $setup, $data, $options) {
+function PeriodDatePickervue_type_template_id_effd17b0_render(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_DatePicker = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["resolveComponent"])("DatePicker");
 
   return Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])(_component_DatePicker, {
@@ -4692,7 +4692,7 @@ function PeriodDatePickervue_type_template_id_0fe3c4e7_render(_ctx, _cache, $pro
     })
   }, null, 8, ["selected-date-start", "selected-date-end", "highlighted-date-start", "highlighted-date-end", "view-date", "step-months", "disable-month-dropdown"]);
 }
-// CONCATENATED MODULE: ./plugins/CoreHome/vue/src/PeriodDatePicker/PeriodDatePicker.vue?vue&type=template&id=0fe3c4e7
+// CONCATENATED MODULE: ./plugins/CoreHome/vue/src/PeriodDatePicker/PeriodDatePicker.vue?vue&type=template&id=effd17b0
 
 // CONCATENATED MODULE: ./node_modules/@vue/cli-plugin-typescript/node_modules/cache-loader/dist/cjs.js??ref--14-0!./node_modules/@vue/cli-plugin-typescript/node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/@vue/cli-plugin-typescript/node_modules/ts-loader??ref--14-3!./node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist??ref--0-1!./plugins/CoreHome/vue/src/PeriodDatePicker/PeriodDatePicker.vue?vue&type=script&lang=ts
 
@@ -4750,10 +4750,12 @@ var piwikMaxDate = new Date(Matomo_Matomo.maxDateYear, Matomo_Matomo.maxDateMont
     function onChanges() {
       if (!props.period || !props.date) {
         selectedDates.value = [null, null];
+        viewDate.value = null;
         return;
       }
 
       selectedDates.value = getBoundedDateRange(props.date);
+      viewDate.value = parseDate(props.date);
     }
 
     Object(external_commonjs_vue_commonjs2_vue_root_Vue_["watch"])(props, onChanges);
@@ -4774,7 +4776,7 @@ var piwikMaxDate = new Date(Matomo_Matomo.maxDateYear, Matomo_Matomo.maxDateMont
 
 
 
-PeriodDatePickervue_type_script_lang_ts.render = PeriodDatePickervue_type_template_id_0fe3c4e7_render
+PeriodDatePickervue_type_script_lang_ts.render = PeriodDatePickervue_type_template_id_effd17b0_render
 
 /* harmony default export */ var PeriodDatePicker = (PeriodDatePickervue_type_script_lang_ts);
 // CONCATENATED MODULE: ./plugins/CoreHome/vue/src/PeriodDatePicker/PeriodDatePicker.adapter.ts
diff --git a/plugins/CoreHome/vue/dist/CoreHome.umd.min.js b/plugins/CoreHome/vue/dist/CoreHome.umd.min.js
index 0bfe86f3fe..f024f109c9 100644
--- a/plugins/CoreHome/vue/dist/CoreHome.umd.min.js
+++ b/plugins/CoreHome/vue/dist/CoreHome.umd.min.js
@@ -226,7 +226,7 @@ function it(){return{restrict:"A",link:function(e,t){var n={instance:null,value:
  *
  * @link https://matomo.org
  * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
- */wt({component:sr,scope:{startDate:{angularJsBind:"<"},endDate:{angularJsBind:"<"},rangeChange:{angularJsBind:"&"},submit:{angularJsBind:"&"}},directiveName:"piwikDateRangePicker",restrict:"E"});function lr(e,t,n,r,a,i){var c=Object(o["resolveComponent"])("DatePicker");return Object(o["openBlock"])(),Object(o["createBlock"])(c,{"selected-date-start":e.selectedDates[0],"selected-date-end":e.selectedDates[1],"highlighted-date-start":e.highlightedDates[0],"highlighted-date-end":e.highlightedDates[1],"view-date":e.viewDate,"step-months":"year"===e.period?12:1,"disable-month-dropdown":"year"===e.period,onCellHover:t[0]||(t[0]=function(t){return e.onHoverNormalCell(t.date,t.$cell)}),onCellHoverLeave:t[1]||(t[1]=function(t){return e.onHoverLeaveNormalCells()}),onDateSelect:t[2]||(t[2]=function(t){return e.onDateSelected(t.date)})},null,8,["selected-date-start","selected-date-end","highlighted-date-start","highlighted-date-end","view-date","step-months","disable-month-dropdown"])}var ur=new Date(D.minDateYear,D.minDateMonth-1,D.minDateDay),dr=new Date(D.maxDateYear,D.maxDateMonth-1,D.maxDateDay),pr=Object(o["defineComponent"])({props:{period:String,date:[String,Date]},components:{DatePicker:rr},emits:["select"],setup:function(e,t){var n=Object(o["ref"])(e.date),r=Object(o["ref"])([null,null]),a=Object(o["ref"])([null,null]);function i(t){var n=p.get(e.period).parse(t).getDateRange();return n[0]=ur<n[0]?n[0]:ur,n[1]=dr>n[1]?n[1]:dr,n}function c(t,n){var r=t<ur||t>dr,o=n.hasClass("ui-datepicker-other-month")&&("month"===e.period||"day"===e.period);a.value=r||o?[null,null]:i(t)}function s(){a.value=[null,null]}function l(e){t.emit("select",{date:e})}function u(){e.period&&e.date?r.value=i(e.date):r.value=[null,null]}return Object(o["watch"])(e,u),u(),{selectedDates:r,highlightedDates:a,viewDate:n,onHoverNormalCell:c,onHoverLeaveNormalCells:s,onDateSelected:l}}});pr.render=lr;var fr=pr,mr=(wt({component:fr,scope:{period:{angularJsBind:"<"},date:{angularJsBind:"<"},select:{angularJsBind:"&"}},directiveName:"piwikPeriodDatePicker",restrict:"E"}),{class:"loadingPiwik"}),hr=Object(o["createElementVNode"])("img",{src:"plugins/Morpheus/images/loading-blue.gif",alt:""},null,-1);
+ */wt({component:sr,scope:{startDate:{angularJsBind:"<"},endDate:{angularJsBind:"<"},rangeChange:{angularJsBind:"&"},submit:{angularJsBind:"&"}},directiveName:"piwikDateRangePicker",restrict:"E"});function lr(e,t,n,r,a,i){var c=Object(o["resolveComponent"])("DatePicker");return Object(o["openBlock"])(),Object(o["createBlock"])(c,{"selected-date-start":e.selectedDates[0],"selected-date-end":e.selectedDates[1],"highlighted-date-start":e.highlightedDates[0],"highlighted-date-end":e.highlightedDates[1],"view-date":e.viewDate,"step-months":"year"===e.period?12:1,"disable-month-dropdown":"year"===e.period,onCellHover:t[0]||(t[0]=function(t){return e.onHoverNormalCell(t.date,t.$cell)}),onCellHoverLeave:t[1]||(t[1]=function(t){return e.onHoverLeaveNormalCells()}),onDateSelect:t[2]||(t[2]=function(t){return e.onDateSelected(t.date)})},null,8,["selected-date-start","selected-date-end","highlighted-date-start","highlighted-date-end","view-date","step-months","disable-month-dropdown"])}var ur=new Date(D.minDateYear,D.minDateMonth-1,D.minDateDay),dr=new Date(D.maxDateYear,D.maxDateMonth-1,D.maxDateDay),pr=Object(o["defineComponent"])({props:{period:String,date:[String,Date]},components:{DatePicker:rr},emits:["select"],setup:function(e,t){var n=Object(o["ref"])(e.date),r=Object(o["ref"])([null,null]),a=Object(o["ref"])([null,null]);function i(t){var n=p.get(e.period).parse(t).getDateRange();return n[0]=ur<n[0]?n[0]:ur,n[1]=dr>n[1]?n[1]:dr,n}function c(t,n){var r=t<ur||t>dr,o=n.hasClass("ui-datepicker-other-month")&&("month"===e.period||"day"===e.period);a.value=r||o?[null,null]:i(t)}function s(){a.value=[null,null]}function l(e){t.emit("select",{date:e})}function u(){if(!e.period||!e.date)return r.value=[null,null],void(n.value=null);r.value=i(e.date),n.value=E(e.date)}return Object(o["watch"])(e,u),u(),{selectedDates:r,highlightedDates:a,viewDate:n,onHoverNormalCell:c,onHoverLeaveNormalCells:s,onDateSelected:l}}});pr.render=lr;var fr=pr,mr=(wt({component:fr,scope:{period:{angularJsBind:"<"},date:{angularJsBind:"<"},select:{angularJsBind:"&"}},directiveName:"piwikPeriodDatePicker",restrict:"E"}),{class:"loadingPiwik"}),hr=Object(o["createElementVNode"])("img",{src:"plugins/Morpheus/images/loading-blue.gif",alt:""},null,-1);
 /*!
  * Matomo - free/libre analytics platform
  *
diff --git a/plugins/CoreHome/vue/src/PeriodDatePicker/PeriodDatePicker.vue b/plugins/CoreHome/vue/src/PeriodDatePicker/PeriodDatePicker.vue
index ab0e8c19f8..dd33f4784e 100644
--- a/plugins/CoreHome/vue/src/PeriodDatePicker/PeriodDatePicker.vue
+++ b/plugins/CoreHome/vue/src/PeriodDatePicker/PeriodDatePicker.vue
@@ -25,7 +25,7 @@ import { defineComponent, watch, ref } from 'vue';
 import JQuery = JQuery;
 import DatePicker from '../DatePicker/DatePicker.vue';
 import Matomo from '../Matomo/Matomo';
-import Periods from '../Periods/Periods';
+import { Periods, parseDate } from '../Periods';
 
 const piwikMinDate = new Date(Matomo.minDateYear, Matomo.minDateMonth - 1, Matomo.minDateDay);
 const piwikMaxDate = new Date(Matomo.maxDateYear, Matomo.maxDateMonth - 1, Matomo.maxDateDay);
@@ -83,10 +83,12 @@ export default defineComponent({
     function onChanges() {
       if (!props.period || !props.date) {
         selectedDates.value = [null, null];
+        viewDate.value = null;
         return;
       }
 
       selectedDates.value = getBoundedDateRange(props.date);
+      viewDate.value = parseDate(props.date);
     }
 
     watch(props, onChanges);