Skip to content

Commit c05f4da

Browse files
JasenkooJasenkoo
committed
feat: Add overlay-toggle event (resolves #852)
1 parent 441a8c6 commit c05f4da

File tree

11 files changed

+55
-15
lines changed

11 files changed

+55
-15
lines changed

‎index.d.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,8 @@ export type EmitEvents =
3333
| 'range-start'
3434
| 'range-end'
3535
| 'date-update'
36-
| 'invalid-date';
36+
| 'invalid-date'
37+
| 'overlay-toggle';
3738
export type WeekNumberType = 'iso' | 'local' | ((date: Date) => string | number);
3839
export type TimeObj = { hours: number; minutes: number; seconds: number };
3940
export type PartialTimeObj = { hours?: number | string; minutes?: number | string; seconds?: number | string };

‎src/VueDatePicker/VueDatePicker.vue

+2
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@
5757
@range-end="$emit('range-end', $event)"
5858
@date-update="$emit('date-update', $event)"
5959
@invalid-date="$emit('invalid-date', $event)"
60+
@overlay-toggle="$emit('overlay-toggle', $event)"
6061
>
6162
<template v-for="(slot, i) in slotList" #[slot]="args" :key="i">
6263
<slot :name="slot" v-bind="{ ...args }" />
@@ -131,6 +132,7 @@
131132
'range-end',
132133
'date-update',
133134
'invalid-date',
135+
'overlay-toggle',
134136
]);
135137
136138
defineOptions({

‎src/VueDatePicker/components/DatePicker/DatePicker.vue

+18-4
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,8 @@
1616
@mount="componentMounted(CMP.header)"
1717
@reset-flow="$emit('reset-flow')"
1818
@update-month-year="updateMonthYear(instance, $event)"
19-
@overlay-closed="$emit('focus-menu')"
19+
@overlay-closed="onHeaderOverlayClose"
20+
@overlay-opened="$emit('overlay-toggle', { open: true, overlay: $event })"
2021
>
2122
<template v-for="(slot, j) in headerSlots" #[slot]="args" :key="j">
2223
<slot :name="slot" v-bind="args" />
@@ -67,8 +68,8 @@
6768
@update:minutes="updateTime($event, false)"
6869
@update:seconds="updateTime($event, false, true)"
6970
@reset-flow="$emit('reset-flow')"
70-
@overlay-closed="$emit('time-picker-close')"
71-
@overlay-opened="$emit('time-picker-open', $event)"
71+
@overlay-closed="timePickerOverlayToggle($event, false)"
72+
@overlay-opened="timePickerOverlayToggle($event, true)"
7273
@am-pm-change="$emit('am-pm-change', $event)"
7374
>
7475
<template v-for="(slot, i) in timePickerSlots" #[slot]="args" :key="i">
@@ -90,7 +91,7 @@
9091
import { mapSlots, useCalendarClass, useDefaults } from '@/composables';
9192
import { useDatePicker } from '@/components/DatePicker/date-picker';
9293
import { getMonths, getYears } from '@/utils/util';
93-
import { CMP } from '@/constants';
94+
import { CMP, FlowStep } from '@/constants';
9495
9596
import type { ICalendarDay } from '@/interfaces';
9697
import { endOfWeek, getMonth, startOfWeek } from 'date-fns';
@@ -117,6 +118,7 @@
117118
'auto-apply-invalid',
118119
'date-update',
119120
'invalid-date',
121+
'overlay-toggle',
120122
]);
121123
const props = defineProps({
122124
...PickerBaseProps,
@@ -244,6 +246,18 @@
244246
updateMonthYear(0, { month: month.value(0), year: year.value(0) + (isNext ? 1 : -1), fromNav: true });
245247
};
246248
249+
const timePickerOverlayToggle = (type: FlowStep, open: boolean) => {
250+
if (type === FlowStep.time) {
251+
emit(`time-picker-${open ? 'open' : 'close'}`);
252+
}
253+
emit('overlay-toggle', { open, overlay: type });
254+
};
255+
256+
const onHeaderOverlayClose = (type: FlowStep) => {
257+
emit('overlay-toggle', { open: false, overlay: type });
258+
emit('focus-menu');
259+
};
260+
247261
const getSidebarProps = () => {
248262
return {
249263
modelValue,

‎src/VueDatePicker/components/DatePicker/DpHeader.vue

+8-6
Original file line numberDiff line numberDiff line change
@@ -140,11 +140,11 @@
140140
getMinMonth,
141141
} from '@/utils/date-utils';
142142
import { checkMinMaxValue, formatNumber, groupListAndMap, unrefElement } from '@/utils/util';
143-
import { HeaderPicker } from '@/constants';
143+
import { FlowStep, HeaderPicker } from '@/constants';
144144
145145
import type { HeaderSelectionBtn, IDefaultSelect, MaybeElementRef, OverlayGridItem } from '@/interfaces';
146146
147-
const emit = defineEmits(['update-month-year', 'mount', 'reset-flow', 'overlay-closed']);
147+
const emit = defineEmits(['update-month-year', 'mount', 'reset-flow', 'overlay-closed', 'overlay-opened']);
148148
const props = defineProps({
149149
month: { type: Number as PropType<number>, default: 0 },
150150
year: { type: Number as PropType<number>, default: 0 },
@@ -242,26 +242,28 @@
242242
});
243243
});
244244
245-
const toggleWrap = (val: Ref<boolean>, show?: boolean) => {
245+
const toggleWrap = (val: Ref<boolean>, type: FlowStep, show?: boolean) => {
246246
if (show !== undefined) {
247247
val.value = show;
248248
} else {
249249
val.value = !val.value;
250250
}
251251
252252
if (!val.value) {
253-
emit('overlay-closed');
253+
emit('overlay-closed', type);
254+
} else {
255+
emit('overlay-opened', type);
254256
}
255257
};
256258
257259
const toggleMonthPicker = (flow = false, show?: boolean): void => {
258260
checkFlow(flow);
259-
toggleWrap(showMonthPicker, show);
261+
toggleWrap(showMonthPicker, FlowStep.month, show);
260262
};
261263
262264
const toggleYearPicker = (flow = false, show?: boolean): void => {
263265
checkFlow(flow);
264-
toggleWrap(showYearPicker, show);
266+
toggleWrap(showYearPicker, FlowStep.year, show);
265267
};
266268
267269
const checkFlow = (flow: boolean): void => {

‎src/VueDatePicker/components/DatepickerMenu.vue

+2
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,7 @@
8989
@update-month-year="$emit('update-month-year', $event)"
9090
@auto-apply-invalid="$emit('auto-apply-invalid', $event)"
9191
@invalid-date="$emit('invalid-date', $event)"
92+
@overlay-toggle="$emit('overlay-toggle', $event)"
9293
@update:internal-model-value="$emit('update:internal-model-value', $event)"
9394
>
9495
<template v-for="(slot, i) in sharedSlots" #[slot]="args" :key="i">
@@ -165,6 +166,7 @@
165166
'auto-apply-invalid',
166167
'date-update',
167168
'invalid-date',
169+
'overlay-toggle',
168170
]);
169171
170172
const props = defineProps({

‎src/VueDatePicker/components/MonthPicker/MonthPicker.vue

+1
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,7 @@
7474
'update-flow-step',
7575
'mount',
7676
'invalid-fixed-range',
77+
'overlay-toggle',
7778
]);
7879
7980
const slots = useSlots();

‎src/VueDatePicker/components/QuarterPicker/QuarterPicker.vue

+2
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,8 @@
6565
'auto-apply',
6666
'range-start',
6767
'range-end',
68+
'overlay-toggle',
69+
'update-month-year',
6870
]);
6971
const props = defineProps({
7072
...PickerBaseProps,

‎src/VueDatePicker/components/TimePicker/TimeInput.vue

+4-1
Original file line numberDiff line numberDiff line change
@@ -169,6 +169,7 @@
169169
'reset-flow',
170170
'mounted',
171171
'overlay-closed',
172+
'overlay-opened',
172173
'am-pm-change',
173174
]);
174175
const props = defineProps({
@@ -353,7 +354,9 @@
353354
if (!checkOverlayDisabled(type)) {
354355
overlays[type] = !overlays[type];
355356
if (!overlays[type]) {
356-
emit('overlay-closed');
357+
emit('overlay-closed', type);
358+
} else {
359+
emit('overlay-opened', type);
357360
}
358361
}
359362
};

‎src/VueDatePicker/components/TimePicker/TimePicker.vue

+8-2
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,8 @@
7070
@update:minutes="updateMinutes(getEvent($event, index, 'minutes'))"
7171
@update:seconds="updateSeconds(getEvent($event, index, 'seconds'))"
7272
@mounted="focusOverlay"
73-
@overlay-closed="focusOverlay"
73+
@overlay-closed="timeInputOverlayClose"
74+
@overlay-opened="$emit('overlay-opened', $event)"
7475
@am-pm-change="$emit('am-pm-change', $event)"
7576
>
7677
<template v-for="(slot, i) in timeInputSlots" #[slot]="args" :key="i">
@@ -112,6 +113,7 @@
112113
113114
import type { PropType } from 'vue';
114115
import type { DisabledTimesArrProp, TimeInputRef, TimeType } from '@/interfaces';
116+
import { FlowStep } from '@/constants';
115117
116118
defineOptions({
117119
compatConfig: {
@@ -197,7 +199,7 @@
197199
}
198200
showTimePicker.value = show;
199201
200-
emit(show ? 'overlay-opened' : 'overlay-closed');
202+
emit(show ? 'overlay-opened' : 'overlay-closed', FlowStep.time);
201203
202204
if (props.arrowNavigation) {
203205
setTimePicker(show);
@@ -249,5 +251,9 @@
249251
}
250252
};
251253
254+
const timeInputOverlayClose = (mode: TimeType) => {
255+
emit('overlay-closed', mode);
256+
};
257+
252258
defineExpose({ toggleTimePicker });
253259
</script>

‎src/VueDatePicker/components/TimePicker/TimePickerSolo.vue

+3
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@
1414
@update:seconds="updateTime($event, false, true)"
1515
@am-pm-change="$emit('am-pm-change', $event)"
1616
@reset-flow="$emit('reset-flow')"
17+
@overlay-closed="$emit('overlay-toggle', { open: false, overlay: $event })"
18+
@overlay-opened="$emit('overlay-toggle', { open: true, overlay: $event })"
1719
>
1820
<template v-for="(slot, i) in timePickerSlots" #[slot]="args" :key="i">
1921
<slot :name="slot" v-bind="args" />
@@ -39,6 +41,7 @@
3941
'mount',
4042
'reset-flow',
4143
'update-flow-step',
44+
'overlay-toggle',
4245
]);
4346
const props = defineProps({
4447
...PickerBaseProps,

‎src/VueDatePicker/components/shared/month-quarter-picker.ts

+5-1
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import type {
1818
DateFilter,
1919
} from '@/interfaces';
2020
import type { PickerBasePropsType } from '@/props';
21+
import { FlowStep } from '@/constants';
2122

2223
interface Opts {
2324
multiCalendars: ComputedRef<MultiCalendarsOptions>;
@@ -147,8 +148,11 @@ export const useMonthOrQuarterPicker = ({
147148
showYearPicker.value[instance] = !showYearPicker.value[instance];
148149
}
149150

150-
if (!showYearPicker.value) {
151+
if (!showYearPicker.value[instance]) {
151152
emit('overlay-closed');
153+
emit('overlay-toggle', { open: false, overlay: FlowStep.year });
154+
} else {
155+
emit('overlay-toggle', { open: true, overlay: FlowStep.year });
152156
}
153157
};
154158

0 commit comments

Comments
 (0)