Skip to content

Commit 3d88f34

Browse files
JasenkooJasenkoo
committed
feat: Add top-extra slot (resolves #806)
1 parent c607e5a commit 3d88f34

File tree

6 files changed

+118
-95
lines changed

6 files changed

+118
-95
lines changed

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

+107-95
Original file line numberDiff line numberDiff line change
@@ -1,104 +1,116 @@
11
<template>
2-
<div class="dp__month_year_row">
2+
<div class="dp--header-wrap">
33
<template v-if="$slots['month-year']">
4-
<slot
5-
name="month-year"
6-
v-bind="{ month, year, months, years, updateMonthYear, handleMonthYearChange, instance }"
7-
/>
4+
<div class="dp__month_year_wrap">
5+
<slot
6+
name="month-year"
7+
v-bind="{ month, year, months, years, updateMonthYear, handleMonthYearChange, instance }"
8+
/>
9+
</div>
810
</template>
911
<template v-else>
10-
<ArrowBtn
11-
v-if="showLeftIcon(defaultedMultiCalendars, instance) && !vertical"
12-
:aria-label="defaultedAriaLabels?.prevMonth"
13-
:disabled="isDisabled(false)"
14-
@activate="handleMonthYearChange(false, true)"
15-
@set-ref="setElRefs($event, 0)"
16-
>
17-
<slot v-if="$slots['arrow-left']" name="arrow-left" />
18-
<ChevronLeftIcon v-if="!$slots['arrow-left']" />
19-
</ArrowBtn>
20-
<div
21-
class="dp__month_year_wrap"
22-
:class="{
23-
dp__year_disable_select: disableYearSelect,
24-
}"
25-
>
26-
<template v-for="(type, i) in selectionButtonsDisplay" :key="type.type">
27-
<button
28-
:ref="(el) => setElRefs(el, i + 1)"
29-
type="button"
30-
class="dp__btn dp__month_year_select"
31-
tabindex="0"
32-
:aria-label="type.ariaLabel"
33-
:data-test="`${type.type}-toggle-overlay-${instance}`"
34-
@click="type.toggle"
35-
@keydown.enter.prevent="type.toggle"
36-
@keydown.space.prevent="type.toggle"
37-
>
38-
<slot v-if="$slots[type.type]" :name="type.type" :text="type.text" :value="props[type.type]" />
39-
<template v-if="!$slots[type.type]">{{ type.text }}</template>
40-
</button>
41-
<transition :name="transitionName(type.showSelectionGrid)" :css="showTransition">
42-
<SelectionOverlay
43-
v-if="type.showSelectionGrid"
44-
:items="type.items"
45-
:arrow-navigation="arrowNavigation"
46-
:hide-navigation="hideNavigation"
47-
:is-last="autoApply && !defaultedConfig.keepActionRow"
48-
:skip-button-ref="false"
49-
:config="config"
50-
:type="type.type"
51-
:header-refs="[]"
52-
:esc-close="escClose"
53-
:menu-wrap-ref="menuWrapRef"
54-
:text-input="textInput"
55-
:aria-labels="ariaLabels"
56-
@selected="type.updateModelValue"
57-
@toggle="type.toggle"
12+
<div v-if="$slots['top-extra']">
13+
<slot name="top-extra" :value="internalModelValue" />
14+
</div>
15+
<div class="dp__month_year_wrap">
16+
<ArrowBtn
17+
v-if="showLeftIcon(defaultedMultiCalendars, instance) && !vertical"
18+
:aria-label="defaultedAriaLabels?.prevMonth"
19+
:disabled="isDisabled(false)"
20+
@activate="handleMonthYearChange(false, true)"
21+
@set-ref="setElRefs($event, 0)"
22+
>
23+
<slot v-if="$slots['arrow-left']" name="arrow-left" />
24+
<ChevronLeftIcon v-if="!$slots['arrow-left']" />
25+
</ArrowBtn>
26+
<div
27+
class="dp__month_year_wrap"
28+
:class="{
29+
dp__year_disable_select: disableYearSelect,
30+
}"
31+
>
32+
<template v-for="(type, i) in selectionButtonsDisplay" :key="type.type">
33+
<button
34+
:ref="(el) => setElRefs(el, i + 1)"
35+
type="button"
36+
class="dp__btn dp__month_year_select"
37+
tabindex="0"
38+
:aria-label="type.ariaLabel"
39+
:data-test="`${type.type}-toggle-overlay-${instance}`"
40+
@click="type.toggle"
41+
@keydown.enter.prevent="type.toggle"
42+
@keydown.space.prevent="type.toggle"
5843
>
59-
<template #button-icon>
60-
<slot v-if="$slots['calendar-icon']" name="calendar-icon" />
61-
<CalendarIcon v-if="!$slots['calendar-icon']" />
62-
</template>
63-
<template v-if="$slots[`${type.type}-overlay-value`]" #item="{ item }">
64-
<slot :name="`${type.type}-overlay-value`" :text="item.text" :value="item.value" />
65-
</template>
66-
<template v-if="$slots[`${type.type}-overlay`]" #overlay>
67-
<slot :name="`${type.type}-overlay`" v-bind="overlaySlotProps(type.type)" />
68-
</template>
69-
<template v-if="$slots[`${type.type}-overlay-header`]" #header>
70-
<slot :name="`${type.type}-overlay-header`" :toggle="type.toggle" />
71-
</template>
72-
</SelectionOverlay>
73-
</transition>
74-
</template>
44+
<slot
45+
v-if="$slots[type.type]"
46+
:name="type.type"
47+
:text="type.text"
48+
:value="props[type.type]"
49+
/>
50+
<template v-if="!$slots[type.type]">{{ type.text }}</template>
51+
</button>
52+
<transition :name="transitionName(type.showSelectionGrid)" :css="showTransition">
53+
<SelectionOverlay
54+
v-if="type.showSelectionGrid"
55+
:items="type.items"
56+
:arrow-navigation="arrowNavigation"
57+
:hide-navigation="hideNavigation"
58+
:is-last="autoApply && !defaultedConfig.keepActionRow"
59+
:skip-button-ref="false"
60+
:config="config"
61+
:type="type.type"
62+
:header-refs="[]"
63+
:esc-close="escClose"
64+
:menu-wrap-ref="menuWrapRef"
65+
:text-input="textInput"
66+
:aria-labels="ariaLabels"
67+
@selected="type.updateModelValue"
68+
@toggle="type.toggle"
69+
>
70+
<template #button-icon>
71+
<slot v-if="$slots['calendar-icon']" name="calendar-icon" />
72+
<CalendarIcon v-if="!$slots['calendar-icon']" />
73+
</template>
74+
<template v-if="$slots[`${type.type}-overlay-value`]" #item="{ item }">
75+
<slot :name="`${type.type}-overlay-value`" :text="item.text" :value="item.value" />
76+
</template>
77+
<template v-if="$slots[`${type.type}-overlay`]" #overlay>
78+
<slot :name="`${type.type}-overlay`" v-bind="overlaySlotProps(type.type)" />
79+
</template>
80+
<template v-if="$slots[`${type.type}-overlay-header`]" #header>
81+
<slot :name="`${type.type}-overlay-header`" :toggle="type.toggle" />
82+
</template>
83+
</SelectionOverlay>
84+
</transition>
85+
</template>
86+
</div>
87+
<ArrowBtn
88+
v-if="showLeftIcon(defaultedMultiCalendars, instance) && vertical"
89+
:aria-label="defaultedAriaLabels?.prevMonth"
90+
:disabled="isDisabled(false)"
91+
@activate="handleMonthYearChange(false, true)"
92+
>
93+
<slot v-if="$slots['arrow-up']" name="arrow-up" />
94+
<ChevronUpIcon v-if="!$slots['arrow-up']" />
95+
</ArrowBtn>
96+
<ArrowBtn
97+
v-if="showRightIcon(defaultedMultiCalendars, instance)"
98+
ref="rightIcon"
99+
:disabled="isDisabled(true)"
100+
:aria-label="defaultedAriaLabels?.nextMonth"
101+
@activate="handleMonthYearChange(true, true)"
102+
@set-ref="setElRefs($event, disableYearSelect ? 2 : 3)"
103+
>
104+
<slot
105+
v-if="$slots[vertical ? 'arrow-down' : 'arrow-right']"
106+
:name="vertical ? 'arrow-down' : 'arrow-right'"
107+
/>
108+
<component
109+
:is="vertical ? ChevronDownIcon : ChevronRightIcon"
110+
v-if="!$slots[vertical ? 'arrow-down' : 'arrow-right']"
111+
/>
112+
</ArrowBtn>
75113
</div>
76-
<ArrowBtn
77-
v-if="showLeftIcon(defaultedMultiCalendars, instance) && vertical"
78-
:aria-label="defaultedAriaLabels?.prevMonth"
79-
:disabled="isDisabled(false)"
80-
@activate="handleMonthYearChange(false, true)"
81-
>
82-
<slot v-if="$slots['arrow-up']" name="arrow-up" />
83-
<ChevronUpIcon v-if="!$slots['arrow-up']" />
84-
</ArrowBtn>
85-
<ArrowBtn
86-
v-if="showRightIcon(defaultedMultiCalendars, instance)"
87-
ref="rightIcon"
88-
:disabled="isDisabled(true)"
89-
:aria-label="defaultedAriaLabels?.nextMonth"
90-
@activate="handleMonthYearChange(true, true)"
91-
@set-ref="setElRefs($event, disableYearSelect ? 2 : 3)"
92-
>
93-
<slot
94-
v-if="$slots[vertical ? 'arrow-down' : 'arrow-right']"
95-
:name="vertical ? 'arrow-down' : 'arrow-right'"
96-
/>
97-
<component
98-
:is="vertical ? ChevronDownIcon : ChevronRightIcon"
99-
v-if="!$slots[vertical ? 'arrow-down' : 'arrow-right']"
100-
/>
101-
</ArrowBtn>
102114
</template>
103115
</div>
104116
</template>

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

+1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<template>
22
<InstanceWrap v-slot="{ instance }" :multi-calendars="defaultedMultiCalendars.count" :collapse="collapse" stretch>
3+
<slot v-if="$slots['top-extra']" name="top-extra" :value="internalModelValue" />
34
<template v-if="$slots['month-year']">
45
<slot
56
name="month-year"

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

+1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<template>
22
<InstanceWrap v-slot="{ instance }" :multi-calendars="defaultedMultiCalendars.count" :collapse="collapse" stretch>
33
<div class="dp-quarter-picker-wrap" :style="{ minHeight: `${defaultedConfig.modeHeight}px` }">
4+
<slot v-if="$slots['top-extra']" name="top-extra" :value="internalModelValue" />
45
<div>
56
<YearModePicker
67
v-bind="$props"

‎src/VueDatePicker/components/YearPicker/YearPicker.vue

+1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<template>
22
<div>
3+
<slot v-if="$slots['top-extra']" name="top-extra" :value="internalModelValue" />
34
<template v-if="$slots['month-year']">
45
<slot
56
name="month-year"

‎src/VueDatePicker/composables/slots.ts

+1
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ export const slots = [
3636
{ name: 'action-row', use: ['action'] },
3737
{ name: 'marker', use: ['calendar', 'shared'] },
3838
{ name: 'quarter', use: ['shared'] },
39+
{ name: 'top-extra', use: ['shared', 'month-year'] },
3940
];
4041

4142
export const inputSlots = [{ name: 'trigger' }, { name: 'input-icon' }, { name: 'clear-icon' }, { name: 'dp-input' }];

‎src/VueDatePicker/style/components/_MonthYearInput.scss

+7
Original file line numberDiff line numberDiff line change
@@ -78,9 +78,16 @@
7878

7979
.dp__month_year_wrap {
8080
display: flex;
81+
flex-direction: row;
8182
width: 100%;
8283
}
8384

8485
.dp__year_disable_select {
8586
justify-content: space-around;
8687
}
88+
89+
.dp--header-wrap {
90+
display: flex;
91+
width: 100%;
92+
flex-direction: column;
93+
}

0 commit comments

Comments
 (0)