Fix/overlay action row hiding

.npmrc

@@ -0,0 +1 @@
+@NAMESPACE:registry=https://npm.pkg.github.com

README.md

@@ -1,5 +1,10 @@
 ## @vuepic/vue-datepicker
 
+This module is a fork from [@vuepic](https://github.com/Vuepic/vue-datepicker)
+
+### Changes
+
+- Add an option to display a "clear" button inside the calendar
 
 ### The most complete datepicker solution for Vue 3
 
@@ -40,11 +45,11 @@
 ## Install
 
 ```shell
-yarn add @vuepic/vue-datepicker
+yarn add @jonathanjeune/ppp-vue-datepicker
 
 # or
 
-npm install @vuepic/vue-datepicker
+npm install @jonathanjeune/ppp-vue-datepicker
 ```
 
 Import and register component
@@ -55,8 +60,8 @@ Import and register component
 import { createApp } from 'vue';
 import App from './App.vue';
 
-import VueDatePicker from '@vuepic/vue-datepicker';
-import '@vuepic/vue-datepicker/dist/main.css';
+import VueDatePicker from '@jonathanjeune/ppp-vue-datepicker';
+import '@jonathanjeune/ppp-vue-datepicker/dist/main.css';
 
 const app = createApp(App);
 app.component('VueDatePicker', VueDatePicker);
@@ -66,8 +71,8 @@ app.component('VueDatePicker', VueDatePicker);
 
 ```vue
 <script>
-    import VueDatePicker from '@vuepic/vue-datepicker';
-    import '@vuepic/vue-datepicker/dist/main.css';
+    import VueDatePicker from '@jonathanjeune/ppp-vue-datepicker';
+    import '@jonathanjeune/ppp-vue-datepicker/dist/main.css';
 
     export default {
         components: { VueDatePicker }

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "@vuepic/vue-datepicker",
-  "version": "7.3.0",
+  "name": "@jonathanjeune/ppp-vue-datepicker",
+  "version": "7.3.2-a",
   "description": "Datepicker component for Vue 3",
   "author": "Vuepic",
   "private": false,

src/VueDatePicker/VueDatePicker.vue

@@ -57,6 +57,7 @@
                     @range-end="$emit('range-end', $event)"
                     @date-update="$emit('date-update', $event)"
                     @invalid-date="$emit('invalid-date', $event)"
+                    @clear="clearValue"
                 >
                     <template v-for="(slot, i) in slotList" #[slot]="args" :key="i">
                         <slot :name="slot" v-bind="{ ...args }" />

src/VueDatePicker/components/ActionRow.vue

@@ -32,6 +32,17 @@
                     >
                         {{ cancelText }}
                     </button>
+                    <button
+                        v-if="defaultedActionRow.showClear"
+                        ref="cancelButtonRef"
+                        type="button"
+                        class="dp__action_button dp__action_cancel"
+                        @click="$emit('clear')"
+                        @keydown.enter="$emit('clear')"
+                        @keydown.space="$emit('clear')"
+                    >
+                        {{ clearButtonLabel }}
+                    </button>
                     <button
                         v-if="defaultedActionRow.showNow"
                         ref="cancelButtonRef"
@@ -78,7 +89,7 @@
         },
     });
 
-    const emit = defineEmits(['close-picker', 'select-date', 'select-now', 'invalid-select']);
+    const emit = defineEmits(['close-picker', 'select-date', 'select-now', 'invalid-select', 'clear']);
 
     const props = defineProps({
         menuMount: { type: Boolean as PropType<boolean>, default: false },

src/VueDatePicker/components/DatePicker/DatePicker.vue

@@ -17,6 +17,7 @@
             @reset-flow="$emit('reset-flow')"
             @update-month-year="updateMonthYear(instance, $event)"
             @overlay-closed="$emit('focus-menu')"
+            @toggle-action-row="(v) => $emit('toggle-action-row', v)"
         >
             <template v-for="(slot, j) in headerSlots" #[slot]="args" :key="j">
                 <slot :name="slot" v-bind="args" />
@@ -116,6 +117,7 @@
         'auto-apply-invalid',
         'date-update',
         'invalid-date',
+        'toggle-action-row',
     ]);
     const props = defineProps({
         ...PickerBaseProps,

src/VueDatePicker/components/DatePicker/DpHeader.vue

@@ -130,7 +130,7 @@
 
     import type { HeaderSelectionBtn, IDefaultSelect, MaybeElementRef, OverlayGridItem } from '@/interfaces';
 
-    const emit = defineEmits(['update-month-year', 'mount', 'reset-flow', 'overlay-closed']);
+    const emit = defineEmits(['update-month-year', 'mount', 'reset-flow', 'overlay-closed', 'toggle-action-row']);
     const props = defineProps({
         month: { type: Number as PropType<number>, default: 0 },
         year: { type: Number as PropType<number>, default: 0 },
@@ -230,6 +230,7 @@
         } else {
             val.value = !val.value;
         }
+        emit('toggle-action-row', !val.value);
 
         if (!val.value) {
             emit('overlay-closed');

src/VueDatePicker/components/DatepickerMenu.vue

@@ -77,6 +77,7 @@
                     @auto-apply-invalid="$emit('auto-apply-invalid', $event)"
                     @invalid-date="$emit('invalid-date', $event)"
                     @update:internal-model-value="$emit('update:internal-model-value', $event)"
+                    @toggle-action-row="toggleActionRow"
                 >
                     <template v-for="(slot, i) in sharedSlots" #[slot]="args" :key="i">
                         <slot :name="slot" v-bind="{ ...args }" />
@@ -91,14 +92,15 @@
             </div>
         </div>
         <ActionRow
-            v-if="!autoApply || defaultedConfig.keepActionRow"
+            v-if="(!autoApply || defaultedConfig.keepActionRow) && isDisplayedActionRow"
             :menu-mount="menuMount"
             v-bind="baseProps"
             :calendar-width="calendarWidth"
             @close-picker="$emit('close-picker')"
             @select-date="$emit('select-date')"
             @invalid-select="$emit('invalid-select')"
             @select-now="selectCurrentDate"
+            @clear="$emit('clear')"
         >
             <template v-for="(slot, i) in actionSlots" #[slot]="args" :key="i">
                 <slot :name="slot" v-bind="{ ...args }" />
@@ -159,6 +161,7 @@
         'auto-apply-invalid',
         'date-update',
         'invalid-date',
+        'clear',
     ]);
 
     const props = defineProps({
@@ -190,6 +193,7 @@
     const innerMenuRef = ref(null);
     const menuMount = ref(false);
     const dynCmpRef = ref<any>(null);
+    const isDisplayedActionRow = ref<boolean>(true)
 
     onMounted(() => {
         if (!props.shadow) {
@@ -352,6 +356,10 @@
         callChildFn('updateMonthYear', instance, value);
     };
 
+    const toggleActionRow = (value: any) => {
+        isDisplayedActionRow.value = value
+    }
+
     defineExpose({
         updateMonthYear,
         switchView,

src/VueDatePicker/components/MonthPicker/MonthPicker.vue

@@ -67,6 +67,7 @@
         'range-end',
         'auto-apply',
         'update-month-year',
+        'toggle-action-row',
     ]);
 
     const slots = useSlots();

src/VueDatePicker/components/QuarterPicker/QuarterPicker.vue

@@ -64,6 +64,7 @@
         'auto-apply',
         'range-start',
         'range-end',
+        'toggle-action-row',
     ]);
     const props = defineProps({
         ...PickerBaseProps,

src/VueDatePicker/components/TimePicker/TimePicker.vue

@@ -128,6 +128,7 @@
         'overlay-opened',
         'overlay-closed',
         'am-pm-change',
+        'toggle-action-row',
     ]);
 
     const props = defineProps({

src/VueDatePicker/components/YearPicker/YearPicker.vue

@@ -37,7 +37,7 @@
     import { useYearPicker } from '@/components/YearPicker/year-picker';
     import { useDefaults } from '@/composables';
 
-    const emit = defineEmits(['update:internal-model-value', 'reset-flow', 'range-start', 'range-end', 'auto-apply']);
+    const emit = defineEmits(['update:internal-model-value', 'reset-flow', 'range-start', 'range-end', 'auto-apply', 'toggle-action-row',]);
     const props = defineProps({
         ...PickerBaseProps,
     });

src/VueDatePicker/interfaces.ts

@@ -202,7 +202,8 @@ export interface ActionRowData {
     showSelect: boolean;
     showCancel: boolean;
     showNow: boolean;
-    showPreview: true;
+    showPreview: boolean;
+    showClear: boolean;
 }
 
 export type TimeObj = { hours: number; minutes: number; seconds: number };

src/VueDatePicker/props.ts

@@ -70,6 +70,7 @@ export const AllProps = {
     disabledWeekDays: { type: Array as PropType<string[] | number[]>, default: () => [] },
     allowedDates: { type: Array as PropType<string[] | Date[]>, default: null },
     nowButtonLabel: { type: String as PropType<string>, default: 'Now' },
+    clearButtonLabel: { type: String as PropType<string>, default: 'Clear' },
     markers: { type: Array as PropType<IMarker[]>, default: () => [] },
     escClose: { type: Boolean as PropType<boolean>, default: true },
     spaceConfirm: { type: Boolean as PropType<boolean>, default: true },

src/VueDatePicker/utils/defaults.ts

@@ -127,6 +127,7 @@ export const getDefaultActionRowData = (actionRow: Partial<ActionRowData>): Acti
     showCancel: true,
     showNow: false,
     showPreview: true,
+    showClear: false,
     ...(actionRow ?? {}),
 });