fix: Correct type for updateTime function in time-picker slot, update documentation accordingly (fixes #1189)

Author: Jasenkoo

docs/migration/from-v11.md

@@ -17,6 +17,7 @@ outline: [2, 4]
 - `import` statement is changed to named instead of default
 - Removed `onScroll` and `dpWrapMenuRef` exposed methods
 - In `action-row` slot, param `internalModelValue` is renamed to `modelValue`
+- In `time-picker` slot, exposed function `updateTime` parameters are changed 
 - `noTz` property from `preset-dates` config array is removed
 - Removed props:
   - `position`
@@ -264,6 +265,24 @@ Use camel case for naming multi-word props. e.g. `enable-time-picker` -> `enable
 </template>
 ```
 
+### `time-picker` slot `updateTime`
+
+Function parameters for `updateTime` in [`time-picker`](/slots/sections/#time-picker) slot are changed
+and now accept a full time object instead of determining the value to update via `boolean` flags.
+
+To update time, pass back the exposed time object and override the properties you want to update.
+
+```js
+<template>
+  <VueDatePicker>
+    <template #time-picker="{ time, updateTime }">
+      <button @click="updateTime(0, false)">Reset minutes</button>  // [!code --]
+      <button @click="updateTime({ ...time, minutes: 0 })">Reset minutes</button>  // [!code ++]
+    </template>
+  </VueDatePicker>
+</template>
+```
+
 
 ### `day-class`
 

docs/slots/sections/index.md

@@ -191,7 +191,7 @@ const formatDate = (date) => {
           <select 
             class="w-full" 
             :value="time.hours"
-            @change="updateTime(+$event.target.value)"
+            @change="updateTime({...time, hours: +$event.target.value,})"
           >
             <option 
               v-for="h in hoursArray"
@@ -201,7 +201,7 @@ const formatDate = (date) => {
           <select
             class="w-full"
             :value="time.minutes"
-            @change="updateTime(+$event.target.value, false)"
+            @change="updateTime({...time, minutes: $event.target.value})"
           >
             <option 
               v-for="m in minutesArray"
@@ -221,7 +221,11 @@ const formatDate = (date) => {
     minutes: number | number[];
     seconds: number | number[];
   };
-  updateTime: (value: number | number[], isHours: boolean, isSeconds: boolean) => void;
+  updateTime: (time: { 
+      hours: number | number[];
+      minutes: number | number[];
+      seconds?: number | number[];
+  }) => void;
 }
 ```
 
@@ -232,7 +236,7 @@ const formatDate = (date) => {
 
 :::tip
 Keep in mind that when you are using the range picker, both values for the time must be emitted.
-For example if you want to update the second date hours, you will call a function something like this `updateTime([firstValueSaved, newSecondValue])`
+For example, if you want to update the second date hours, you will call a function something like this `updateTime(...time, hours: [12, time.hours[1]])`
 :::
 
 
@@ -245,7 +249,7 @@ For example if you want to update the second date hours, you will call a functio
         <select 
           style="width: 100%" 
           :value="time.hours"
-          @change="updateTime(+$event.target.value)"
+          @change="updateTime({ ...time, hours: +$event.target.value })"
         >
           <option 
             v-for="h in hoursArray"
@@ -255,7 +259,7 @@ For example if you want to update the second date hours, you will call a functio
         <select
           style="width: 100%"
           :value="time.minutes"
-          @change="updateTime(+$event.target.value, false)"
+          @change="updateTime({...time, minutes: +$event.target.value })"
         >
           <option 
             v-for="m in minutesArray"

src/VueDatePicker/types/slots.ts

@@ -1,6 +1,6 @@
 import type { ComputedRef } from 'vue';
 import type { InternalModelValue } from '@/types/generic.ts';
-import type { Marker } from '@/types/picker.ts';
+import type { Marker, TimeInternalModel } from '@/types/picker.ts';
 
 export interface InternalTime {
     hours: number | number[];
@@ -78,7 +78,7 @@ export interface ActionRowSlotProps {
 
 export interface TimePickerSlotProps {
     time: InternalTime;
-    updateTime: (value: number | number[], isHours?: boolean, isSeconds?: boolean) => void;
+    updateTime: (time: TimeInternalModel) => void;
 }
 
 export interface RootSlots {