vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Refactor #3832 Refactor #3833 - For Calendar

pull/3853/head
Tuğçe Küçükoğlu 2023-04-06 11:19:46 +03:00
parent 679926be00
commit 448e5edc52
3 changed files with 116 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
api-generator/components/calendar.js
View File

@ -44,9 +44,33 @@ const CalendarProps = [
{
name: 'icon',
type: 'string',
default: 'pi pi-calendar',
default: 'null',
description: 'Icon of the calendar button.'
},
{
name: 'previousIcon',
type: 'string',
default: 'null',
description: 'Icon to show in the previous button.'
},
{
name: 'nextIcon',
type: 'string',
default: 'null',
description: 'Icon to show in the next button.'
},
{
name: 'incrementIcon',
type: 'string',
default: 'null',
description: 'Icon to show in each of the increment buttons.'
},
{
name: 'decrementIcon',
type: 'string',
default: 'null',
description: 'Icon to show in each of the decrement buttons.'
},
{
name: 'numberOfMonths',
type: 'number',
@ -436,6 +460,26 @@ const CalendarSlots = [
{
name: 'decade',
description: 'Custom content for the calendar decade.'
},
{
name: 'triggericon',
description: 'Custom trigger icon template.'
},
{
name: 'previcon',
description: 'Custom previous icon template.'
},
{
name: 'nexticon',
description: 'Custom next icon template.'
},
{
name: 'incrementicon',
description: 'Custom increment icon template.'
},
{
name: 'decrementicon',
description: 'Custom decrement icon template.'
}
];

25
components/lib/calendar/Calendar.d.ts vendored
View File

@ -109,27 +109,22 @@ export interface CalendarProps {
showIcon?: boolean | undefined;
/**
* Icon of the calendar button.
* @defaultValue pi pi-calendar
*/
icon?: string | undefined;
/**
* Icon to show in the previous button.
* @defaultValue pi pi-chevron-left
*/
previousIcon?: string | undefined;
/**
* Icon to show in the next button.
* @defaultValue pi pi-chevron-right
*/
nextIcon?: string | undefined;
/**
* Icon to show in each of the increment buttons.
* @defaultValue pi pi-chevron-up
*/
incrementIcon?: string | undefined;
/**
* Icon to show in each of the decrement buttons.
* @defaultValue pi pi-chevron-down
*/
decrementIcon?: string | undefined;
/**
@ -368,6 +363,26 @@ export interface CalendarSlots {
*/
years: string[] | undefined;
}): VNode[];
/**
* Custom trigger icon template.
*/
triggericon(): VNode[];
/**
* Custom previous icon template.
*/
previcon(): VNode[];
/**
* Custom next icon template.
*/
nexticon(): VNode[];
/**
* Custom increment icon template.
*/
incrementicon(): VNode[];
/**
* Custom decrement icon template.
*/
decrementicon(): VNode[];
}
/**

69
components/lib/calendar/Calendar.vue
View File

@ -29,7 +29,6 @@
/>
<CalendarButton
v-if="showIcon"
:icon="icon"
class="p-datepicker-trigger"
:disabled="disabled"
@click="onButtonClick"
@ -38,7 +37,11 @@
aria-haspopup="dialog"
:aria-expanded="overlayVisible"
:aria-controls="panelId"
/>
>
<slot name="triggericon">
<component :is="icon ? 'span' : 'CalendarIcon'" :class="icon" />
</slot>
</CalendarButton>
<Portal :appendTo="appendTo" :disabled="inline">
<transition name="p-connected-overlay" @enter="onOverlayEnter($event)" @after-enter="onOverlayEnterComplete" @after-leave="onOverlayAfterLeave" @leave="onOverlayLeave">
<div
@ -70,7 +73,9 @@
:disabled="disabled"
:aria-label="currentView === 'year' ? $primevue.config.locale.prevDecade : currentView === 'month' ? $primevue.config.locale.prevYear : $primevue.config.locale.prevMonth"
>
<span :class="['p-datepicker-prev-icon', previousIcon]" />
<slot name="previcon">
<component :is="previousIcon ? 'span' : 'ChevronLeftIcon'" :class="['p-datepicker-prev-icon', previousIcon]" />
</slot>
</button>
<div class="p-datepicker-title">
<button
@ -109,7 +114,9 @@
:disabled="disabled"
:aria-label="currentView === 'year' ? $primevue.config.locale.nextDecade : currentView === 'month' ? $primevue.config.locale.nextYear : $primevue.config.locale.nextMonth"
>
<span :class="['p-datepicker-next-icon', nextIcon]" />
<slot name="nexticon">
<component :is="nextIcon ? 'span' : 'ChevronRightIcon'" :class="['p-datepicker-next-icon', nextIcon]" />
</slot>
</button>
</div>
<div v-if="currentView === 'date'" class="p-datepicker-calendar-container">
@ -202,7 +209,9 @@
@keyup.space="onTimePickerElementMouseUp($event)"
type="button"
>
<span :class="incrementIcon" />
<slot name="incrementicon">
<component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="incrementIcon" />
</slot>
</button>
<span>{{ formattedCurrentHour }}</span>
<button
@ -219,7 +228,9 @@
@keyup.space="onTimePickerElementMouseUp($event)"
type="button"
>
<span :class="decrementIcon" />
<slot name="decrementicon">
<component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="decrementIcon" />
</slot>
</button>
</div>
<div class="p-separator">
@ -241,7 +252,9 @@
@keyup.space="onTimePickerElementMouseUp($event)"
type="button"
>
<span :class="incrementIcon" />
<slot name="incrementicon">
<component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="incrementIcon" />
</slot>
</button>
<span>{{ formattedCurrentMinute }}</span>
<button
@ -259,7 +272,9 @@
@keyup.space="onTimePickerElementMouseUp($event)"
type="button"
>
<span :class="decrementIcon" />
<slot name="decrementicon">
<component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="decrementIcon" />
</slot>
</button>
</div>
<div v-if="showSeconds" class="p-separator">
@ -281,7 +296,9 @@
@keyup.space="onTimePickerElementMouseUp($event)"
type="button"
>
<span :class="incrementIcon" />
<slot name="incrementicon">
<component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="incrementIcon" />
</slot>
</button>
<span>{{ formattedCurrentSecond }}</span>
<button
@ -299,7 +316,9 @@
@keyup.space="onTimePickerElementMouseUp($event)"
type="button"
>
<span :class="decrementIcon" />
<slot name="decrementicon">
<component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="decrementIcon" />
</slot>
</button>
</div>
<div v-if="hourFormat == '12'" class="p-separator">
@ -307,11 +326,15 @@
</div>
<div v-if="hourFormat == '12'" class="p-ampm-picker">
<button v-ripple class="p-link" :aria-label="$primevue.config.locale.am" @click="toggleAMPM($event)" type="button" :disabled="disabled">
<span :class="incrementIcon" />
<slot name="incrementicon">
<component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="incrementIcon" />
</slot>
</button>
<span>{{ pm ? $primevue.config.locale.pm : $primevue.config.locale.am }}</span>
<button v-ripple class="p-link" :aria-label="$primevue.config.locale.pm" @click="toggleAMPM($event)" type="button" :disabled="disabled">
<span :class="decrementIcon" />
<slot name="decrementicon">
<component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="decrementIcon" />
</slot>
</button>
</div>
</div>
@ -328,6 +351,11 @@
<script>
import Button from 'primevue/button';
import CalendarIcon from 'primevue/icon/calendar';
import ChevronDownIcon from 'primevue/icon/chevrondown';
import ChevronLeftIcon from 'primevue/icon/chevronleft';
import ChevronRightIcon from 'primevue/icon/chevronright';
import ChevronUpIcon from 'primevue/icon/chevronup';
import OverlayEventBus from 'primevue/overlayeventbus';
import Portal from 'primevue/portal';
import Ripple from 'primevue/ripple';
@ -364,23 +392,23 @@ export default {
},
icon: {
type: String,
default: 'pi pi-calendar'
default: undefined
},
previousIcon: {
type: String,
default: 'pi pi-chevron-left'
default: undefined
},
nextIcon: {
type: String,
default: 'pi pi-chevron-right'
default: undefined
},
incrementIcon: {
type: String,
default: 'pi pi-chevron-up'
default: undefined
},
decrementIcon: {
type: String,
default: 'pi pi-chevron-down'
default: undefined
},
numberOfMonths: {
type: Number,
@ -2979,7 +3007,12 @@ export default {
},
components: {
CalendarButton: Button,
Portal: Portal
Portal: Portal,
CalendarIcon: CalendarIcon,
ChevronLeftIcon: ChevronLeftIcon,
ChevronRightIcon: ChevronRightIcon,
ChevronUpIcon: ChevronUpIcon,
ChevronDownIcon: ChevronDownIcon
},
directives: {
ripple: Ripple