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

Update Calendar.vue

pull/4377/head
mertsincan 2023-09-01 11:04:38 +01:00
parent 1feecdfde4
commit 9731936821
1 changed files with 63 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -79,6 +79,7 @@
:disabled="disabled" :disabled="disabled"
:aria-label="currentView === 'year' ? $primevue.config.locale.prevDecade : currentView === 'month' ? $primevue.config.locale.prevYear : $primevue.config.locale.prevMonth" :aria-label="currentView === 'year' ? $primevue.config.locale.prevDecade : currentView === 'month' ? $primevue.config.locale.prevYear : $primevue.config.locale.prevMonth"
v-bind="ptm('previousButton')" v-bind="ptm('previousButton')"
data-pc-group-section="navigator"
> >
<slot name="previousicon" :class="cx('previousIcon')"> <slot name="previousicon" :class="cx('previousIcon')">
<component :is="previousIcon ? 'span' : 'ChevronLeftIcon'" :class="[cx('previousIcon'), previousIcon]" v-bind="ptm('previousIcon')" /> <component :is="previousIcon ? 'span' : 'ChevronLeftIcon'" :class="[cx('previousIcon'), previousIcon]" v-bind="ptm('previousIcon')" />
@ -94,6 +95,7 @@
:disabled="switchViewButtonDisabled" :disabled="switchViewButtonDisabled"
:aria-label="$primevue.config.locale.chooseMonth" :aria-label="$primevue.config.locale.chooseMonth"
v-bind="ptm('monthTitle')" v-bind="ptm('monthTitle')"
data-pc-group-section="view"
> >
{{ getMonthName(month.month) }} {{ getMonthName(month.month) }}
</button> </button>
@ -106,6 +108,7 @@
:disabled="switchViewButtonDisabled" :disabled="switchViewButtonDisabled"
:aria-label="$primevue.config.locale.chooseYear" :aria-label="$primevue.config.locale.chooseYear"
v-bind="ptm('yearTitle')" v-bind="ptm('yearTitle')"
data-pc-group-section="view"
> >
{{ getYear(month) }} {{ getYear(month) }}
</button> </button>
@ -124,6 +127,7 @@
:disabled="disabled" :disabled="disabled"
:aria-label="currentView === 'year' ? $primevue.config.locale.nextDecade : currentView === 'month' ? $primevue.config.locale.nextYear : $primevue.config.locale.nextMonth" :aria-label="currentView === 'year' ? $primevue.config.locale.nextDecade : currentView === 'month' ? $primevue.config.locale.nextYear : $primevue.config.locale.nextMonth"
v-bind="ptm('nextButton')" v-bind="ptm('nextButton')"
data-pc-group-section="navigator"
> >
<slot name="nexticon" :class="cx('nextIcon')"> <slot name="nexticon" :class="cx('nextIcon')">
<component :is="nextIcon ? 'span' : 'ChevronRightIcon'" :class="[cx('nextIcon'), nextIcon]" v-bind="ptm('nextIcon')" /> <component :is="nextIcon ? 'span' : 'ChevronRightIcon'" :class="[cx('nextIcon'), nextIcon]" v-bind="ptm('nextIcon')" />
@ -134,18 +138,18 @@
<table :class="cx('table')" role="grid" v-bind="ptm('table')"> <table :class="cx('table')" role="grid" v-bind="ptm('table')">
<thead v-bind="ptm('tableHeader')"> <thead v-bind="ptm('tableHeader')">
<tr v-bind="ptm('tableHeaderRow')"> <tr v-bind="ptm('tableHeaderRow')">
<th v-if="showWeek" scope="col" :class="cx('weekHeader')" v-bind="ptm('weekHeader', { context: { disabled: showWeek } })" :data-p-disabled="showWeek"> <th v-if="showWeek" scope="col" :class="cx('weekHeader')" v-bind="ptm('weekHeader', { context: { disabled: showWeek } })" :data-p-disabled="showWeek" data-pc-group-section="tableheadercell">
<span v-bind="ptm('weekLabel')">{{ weekHeaderLabel }}</span> <span v-bind="ptm('weekLabel')" data-pc-group-section="tableheadercelllabel">{{ weekHeaderLabel }}</span>
</th> </th>
<th v-for="weekDay of weekDays" :key="weekDay" scope="col" :abbr="weekDay" v-bind="ptm('tableHeaderCell')"> <th v-for="weekDay of weekDays" :key="weekDay" scope="col" :abbr="weekDay" v-bind="ptm('tableHeaderCell')" data-pc-group-section="tableheadercell">
<span v-bind="ptm('weekDay')">{{ weekDay }}</span> <span v-bind="ptm('weekDay')" data-pc-group-section="tableheadercelllabel">{{ weekDay }}</span>
</th> </th>
</tr> </tr>
</thead> </thead>
<tbody v-bind="ptm('tableBody')"> <tbody v-bind="ptm('tableBody')">
<tr v-for="(week, i) of month.dates" :key="week[0].day + '' + week[0].month" v-bind="ptm('tableBodyRow')"> <tr v-for="(week, i) of month.dates" :key="week[0].day + '' + week[0].month" v-bind="ptm('tableBodyRow')">
<td v-if="showWeek" :class="cx('weekNumber')" v-bind="ptm('weekNumber')"> <td v-if="showWeek" :class="cx('weekNumber')" v-bind="ptm('weekNumber')" data-pc-group-section="tablebodycell">
<span :class="cx('weekLabelContainer')" v-bind="ptm('weekLabelContainer', { context: { disabled: showWeek } })" :data-p-disabled="showWeek"> <span :class="cx('weekLabelContainer')" v-bind="ptm('weekLabelContainer', { context: { disabled: showWeek } })" :data-p-disabled="showWeek" data-pc-group-section="tablebodycelllabel">
<span v-if="month.weekNumbers[i] < 10" style="visibility: hidden" v-bind="ptm('weekLabel')">0</span> <span v-if="month.weekNumbers[i] < 10" style="visibility: hidden" v-bind="ptm('weekLabel')">0</span>
{{ month.weekNumbers[i] }} {{ month.weekNumbers[i] }}
</span> </span>
@ -166,6 +170,7 @@
" "
:data-p-today="date.today" :data-p-today="date.today"
:data-p-other-month="date.otherMonth" :data-p-other-month="date.otherMonth"
data-pc-group-section="tablebodycell"
> >
<span <span
v-ripple v-ripple
@ -186,6 +191,7 @@
" "
:data-p-disabled="!date.selectable" :data-p-disabled="!date.selectable"
:data-p-highlight="isSelected(date)" :data-p-highlight="isSelected(date)"
data-pc-group-section="tablebodycelllabel"
> >
<slot name="date" :date="date">{{ date.day }}</slot> <slot name="date" :date="date">{{ date.day }}</slot>
</span> </span>
@ -254,7 +260,7 @@
</div> </div>
</template> </template>
<div v-if="(showTime || timeOnly) && currentView === 'date'" :class="cx('timePicker')" v-bind="ptm('timePicker')"> <div v-if="(showTime || timeOnly) && currentView === 'date'" :class="cx('timePicker')" v-bind="ptm('timePicker')">
<div :class="cx('hourPicker')" v-bind="ptm('hourPicker')"> <div :class="cx('hourPicker')" v-bind="ptm('hourPicker')" data-pc-group-section="timepickerContainer">
<button <button
v-ripple v-ripple
:class="cx('incrementButton')" :class="cx('incrementButton')"
@ -269,12 +275,13 @@
@keyup.space="onTimePickerElementMouseUp($event)" @keyup.space="onTimePickerElementMouseUp($event)"
type="button" type="button"
v-bind="ptm('incrementButton')" v-bind="ptm('incrementButton')"
data-pc-group-section="timepickerbutton"
> >
<slot name="incrementicon"> <slot name="incrementicon">
<component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="incrementIcon" v-bind="ptm('incrementIcon')" /> <component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="incrementIcon" v-bind="ptm('incrementIcon')" data-pc-group-section="timepickerlabel" />
</slot> </slot>
</button> </button>
<span v-bind="ptm('hour')">{{ formattedCurrentHour }}</span> <span v-bind="ptm('hour')" data-pc-group-section="timepickerlabel">{{ formattedCurrentHour }}</span>
<button <button
v-ripple v-ripple
:class="cx('decrementButton')" :class="cx('decrementButton')"
@ -289,16 +296,17 @@
@keyup.space="onTimePickerElementMouseUp($event)" @keyup.space="onTimePickerElementMouseUp($event)"
type="button" type="button"
v-bind="ptm('decrementButton')" v-bind="ptm('decrementButton')"
data-pc-group-section="timepickerbutton"
> >
<slot name="decrementicon"> <slot name="decrementicon">
<component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="decrementIcon" v-bind="ptm('decrementIcon')" /> <component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="decrementIcon" v-bind="ptm('decrementIcon')" data-pc-group-section="timepickerlabel" />
</slot> </slot>
</button> </button>
</div> </div>
<div :class="cx('separatorContainer')" v-bind="ptm('separatorContainer')"> <div :class="cx('separatorContainer')" v-bind="ptm('separatorContainer')" data-pc-group-section="timepickerContainer">
<span v-bind="ptm('separator')">{{ timeSeparator }}</span> <span v-bind="ptm('separator')" data-pc-group-section="timepickerlabel">{{ timeSeparator }}</span>
</div> </div>
<div :class="cx('minutePicker')" v-bind="ptm('minutePicker')"> <div :class="cx('minutePicker')" v-bind="ptm('minutePicker')" data-pc-group-section="timepickerContainer">
<button <button
v-ripple v-ripple
:class="cx('incrementButton')" :class="cx('incrementButton')"
@ -314,12 +322,13 @@
@keyup.space="onTimePickerElementMouseUp($event)" @keyup.space="onTimePickerElementMouseUp($event)"
type="button" type="button"
v-bind="ptm('incrementButton')" v-bind="ptm('incrementButton')"
data-pc-group-section="timepickerbutton"
> >
<slot name="incrementicon"> <slot name="incrementicon">
<component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="incrementIcon" v-bind="ptm('incrementIcon')" /> <component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="incrementIcon" v-bind="ptm('incrementIcon')" data-pc-group-section="timepickerlabel" />
</slot> </slot>
</button> </button>
<span v-bind="ptm('minute')">{{ formattedCurrentMinute }}</span> <span v-bind="ptm('minute')" data-pc-group-section="timepickerlabel">{{ formattedCurrentMinute }}</span>
<button <button
v-ripple v-ripple
:class="cx('decrementButton')" :class="cx('decrementButton')"
@ -335,16 +344,17 @@
@keyup.space="onTimePickerElementMouseUp($event)" @keyup.space="onTimePickerElementMouseUp($event)"
type="button" type="button"
v-bind="ptm('decrementButton')" v-bind="ptm('decrementButton')"
data-pc-group-section="timepickerbutton"
> >
<slot name="decrementicon"> <slot name="decrementicon">
<component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="decrementIcon" v-bind="ptm('decrementIcon')" /> <component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="decrementIcon" v-bind="ptm('decrementIcon')" data-pc-group-section="timepickerlabel" />
</slot> </slot>
</button> </button>
</div> </div>
<div v-if="showSeconds" :class="cx('separatorContainer')" v-bind="ptm('separatorContainer')"> <div v-if="showSeconds" :class="cx('separatorContainer')" v-bind="ptm('separatorContainer')" data-pc-group-section="timepickerContainer">
<span v-bind="ptm('separator')">{{ timeSeparator }}</span> <span v-bind="ptm('separator')" data-pc-group-section="timepickerlabel">{{ timeSeparator }}</span>
</div> </div>
<div v-if="showSeconds" :class="cx('secondPicker')" v-bind="ptm('secondPicker')"> <div v-if="showSeconds" :class="cx('secondPicker')" v-bind="ptm('secondPicker')" data-pc-group-section="timepickerContainer">
<button <button
v-ripple v-ripple
:class="cx('incrementButton')" :class="cx('incrementButton')"
@ -360,12 +370,13 @@
@keyup.space="onTimePickerElementMouseUp($event)" @keyup.space="onTimePickerElementMouseUp($event)"
type="button" type="button"
v-bind="ptm('incrementButton')" v-bind="ptm('incrementButton')"
data-pc-group-section="timepickerbutton"
> >
<slot name="incrementicon"> <slot name="incrementicon">
<component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="incrementIcon" v-bind="ptm('incrementIcon')" /> <component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="incrementIcon" v-bind="ptm('incrementIcon')" data-pc-group-section="timepickerlabel" />
</slot> </slot>
</button> </button>
<span v-bind="ptm('second')">{{ formattedCurrentSecond }}</span> <span v-bind="ptm('second')" data-pc-group-section="timepickerlabel">{{ formattedCurrentSecond }}</span>
<button <button
v-ripple v-ripple
:class="cx('decrementButton')" :class="cx('decrementButton')"
@ -381,25 +392,46 @@
@keyup.space="onTimePickerElementMouseUp($event)" @keyup.space="onTimePickerElementMouseUp($event)"
type="button" type="button"
v-bind="ptm('decrementButton')" v-bind="ptm('decrementButton')"
data-pc-group-section="timepickerbutton"
> >
<slot name="decrementicon"> <slot name="decrementicon">
<component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="decrementIcon" v-bind="ptm('decrementIcon')" /> <component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="decrementIcon" v-bind="ptm('decrementIcon')" data-pc-group-section="timepickerlabel" />
</slot> </slot>
</button> </button>
</div> </div>
<div v-if="hourFormat == '12'" :class="cx('separatorContainer')" v-bind="ptm('separatorContainer')"> <div v-if="hourFormat == '12'" :class="cx('separatorContainer')" v-bind="ptm('separatorContainer')" data-pc-group-section="timepickerContainer">
<span v-bind="ptm('separator')">{{ timeSeparator }}</span> <span v-bind="ptm('separator')" data-pc-group-section="timepickerlabel">{{ timeSeparator }}</span>
</div> </div>
<div v-if="hourFormat == '12'" :class="cx('ampmPicker')" v-bind="ptm('ampmPicker')"> <div v-if="hourFormat == '12'" :class="cx('ampmPicker')" v-bind="ptm('ampmPicker')">
<button v-ripple :class="cx('incrementButton')" :aria-label="$primevue.config.locale.am" @click="toggleAMPM($event)" @keydown="onContainerButtonKeydown" type="button" :disabled="disabled" v-bind="ptm('incrementButton')"> <button
v-ripple
:class="cx('incrementButton')"
:aria-label="$primevue.config.locale.am"
@click="toggleAMPM($event)"
@keydown="onContainerButtonKeydown"
type="button"
:disabled="disabled"
v-bind="ptm('incrementButton')"
data-pc-group-section="timepickerbutton"
>
<slot name="incrementicon" :class="cx('incrementIcon')"> <slot name="incrementicon" :class="cx('incrementIcon')">
<component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="cx('incrementIcon')" v-bind="ptm('incrementIcon')" /> <component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="cx('incrementIcon')" v-bind="ptm('incrementIcon')" data-pc-group-section="timepickerlabel" />
</slot> </slot>
</button> </button>
<span v-bind="ptm('ampm')">{{ pm ? $primevue.config.locale.pm : $primevue.config.locale.am }}</span> <span v-bind="ptm('ampm')" data-pc-group-section="timepickerlabel">{{ pm ? $primevue.config.locale.pm : $primevue.config.locale.am }}</span>
<button v-ripple :class="cx('decrementButton')" :aria-label="$primevue.config.locale.pm" @click="toggleAMPM($event)" @keydown="onContainerButtonKeydown" type="button" :disabled="disabled" v-bind="ptm('decrementButton')"> <button
v-ripple
:class="cx('decrementButton')"
:aria-label="$primevue.config.locale.pm"
@click="toggleAMPM($event)"
@keydown="onContainerButtonKeydown"
type="button"
:disabled="disabled"
v-bind="ptm('decrementButton')"
data-pc-group-section="timepickerbutton"
>
<slot name="decrementicon" :class="cx('decrementIcon')"> <slot name="decrementicon" :class="cx('decrementIcon')">
<component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="cx('decrementIcon')" v-bind="ptm('decrementIcon')" /> <component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="cx('decrementIcon')" v-bind="ptm('decrementIcon')" data-pc-group-section="timepickerlabel" />
</slot> </slot>
</button> </button>
</div> </div>
@ -414,6 +446,7 @@
:unstyled="unstyled" :unstyled="unstyled"
:pt="ptm('todayButton')" :pt="ptm('todayButton')"
data-pc-section="todaybutton" data-pc-section="todaybutton"
data-pc-group-section="button"
/> />
<CalendarButton <CalendarButton
type="button" type="button"
@ -424,6 +457,7 @@
:unstyled="unstyled" :unstyled="unstyled"
:pt="ptm('clearButton')" :pt="ptm('clearButton')"
data-pc-section="clearbutton" data-pc-section="clearbutton"
data-pc-group-section="button"
/> />
</div> </div>
<slot name="footer"></slot> <slot name="footer"></slot>