Skip to content

Commit

Permalink
Refactor #5681, #5682, #5683 - For DatePicker, InputChips, Password
Browse files Browse the repository at this point in the history
  • Loading branch information
@tugcekucukoglu
tugcekucukoglu committed May 3, 2024
1 parent 308ef16 commit 46ddebc
Show file tree
Hide file tree
Showing 11 changed files with 248 additions and 120 deletions.
48 changes: 26 additions & 22 deletions components/lib/datepicker/DatePicker.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -140,21 +140,21 @@ export interface DatePickerPassThroughOptions {
*/
input?: InputTextPassThroughOptions<DatePickerSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the dropdown button's DOM element.
* Used to pass attributes to the dropdown's DOM element.
*/
dropdownButton?: DatePickerPassThroughOptionType;
dropdown?: DatePickerPassThroughOptionType;
/**
* Used to pass attributes to the panel's DOM element.
*/
panel?: DatePickerPassThroughOptionType;
/**
* Used to pass attributes to the group container's DOM element.
* Used to pass attributes to the calendar container's DOM element.
*/
groupContainer?: DatePickerPassThroughOptionType;
calendarContainer?: DatePickerPassThroughOptionType;
/**
* Used to pass attributes to the group's DOM element.
* Used to pass attributes to the calendar's DOM element.
*/
group?: DatePickerPassThroughOptionType;
calendar?: DatePickerPassThroughOptionType;
/**
* Used to pass attributes to the header's DOM element.
*/
Expand All @@ -169,17 +169,21 @@ export interface DatePickerPassThroughOptions {
*/
title?: DatePickerPassThroughOptionType;
/**
* Used to pass attributes to the month title's DOM element.
* Used to pass attributes to the view month's DOM element.
*/
monthTitle?: DatePickerPassThroughOptionType;
viewMonth?: DatePickerPassThroughOptionType;
/**
* Used to pass attributes to the year title's DOM element.
* Used to pass attributes to the view year's DOM element.
*/
yearTitle?: DatePickerPassThroughOptionType;
viewYear?: DatePickerPassThroughOptionType;
/**
* Used to pass attributes to the decade title's DOM element.
* Used to pass attributes to the decade's DOM element.
*/
decadeTitle?: DatePickerPassThroughOptionType;
decade?: DatePickerPassThroughOptionType;
/**
* Used to pass attributes to the view day's DOM element.
*/
dayView?: DatePickerPassThroughOptionType;
/**
* Used to pass attributes to the next button's DOM element.
* @see {@link ButtonPassThroughOptions}
Expand Down Expand Up @@ -214,9 +218,9 @@ export interface DatePickerPassThroughOptions {
*/
tableHeaderCell?: DatePickerPassThroughOptionType;
/**
* Used to pass attributes to the week label's DOM element.
* Used to pass attributes to the week day cell's DOM element.
*/
weekLabel?: DatePickerPassThroughOptionType;
weekDayCell?: DatePickerPassThroughOptionType;
/**
* Used to pass attributes to the week day's DOM element.
*/
Expand All @@ -238,25 +242,25 @@ export interface DatePickerPassThroughOptions {
*/
weekLabelContainer?: DatePickerPassThroughOptionType;
/**
* Used to pass attributes to the day's DOM element.
* Used to pass attributes to the day cell's DOM element.
*/
day?: DatePickerPassThroughOptionType;
dayCell?: DatePickerPassThroughOptionType;
/**
* Used to pass attributes to the day label's DOM element.
* Used to pass attributes to the day's DOM element.
*/
dayLabel?: DatePickerPassThroughOptionType;
day?: DatePickerPassThroughOptionType;
/**
* Used to pass attributes to the month picker's DOM element.
* Used to pass attributes to the month view's DOM element.
*/
monthPicker?: DatePickerPassThroughOptionType;
monthView?: DatePickerPassThroughOptionType;
/**
* Used to pass attributes to the month's DOM element.
*/
month?: DatePickerPassThroughOptionType;
/**
* Used to pass attributes to the year picker's DOM element.
* Used to pass attributes to the year view's DOM element.
*/
yearPicker?: DatePickerPassThroughOptionType;
yearView?: DatePickerPassThroughOptionType;
/**
* Used to pass attributes to the year's DOM element.
*/
Expand Down
60 changes: 30 additions & 30 deletions components/lib/datepicker/DatePicker.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,15 +32,15 @@
/>
<slot v-if="showIcon && iconDisplay === 'button'" name="dropdownbutton">
<button
:class="cx('dropdownButton')"
:class="cx('dropdown')"
:disabled="disabled"
@click="onButtonClick"
type="button"
:aria-label="$primevue.config.locale.chooseDate"
aria-haspopup="dialog"
:aria-expanded="overlayVisible"
:aria-controls="panelId"
v-bind="ptm('dropdownButton')"
v-bind="ptm('dropdown')"
>
<slot name="dropdownicon" :class="icon">
<component :is="icon ? 'span' : 'CalendarIcon'" :class="icon" v-bind="ptm('dropdownButtonIcon')" />
Expand Down Expand Up @@ -71,7 +71,7 @@
v-bind="ptm('panel')"
>
<template v-if="!timeOnly">
<div :class="cx('group')" v-bind="ptm('group')">
<div :class="cx('calendarContainer')" v-bind="ptm('calendarContainer')">
<div v-for="(month, groupIndex) of months" :key="month.month + month.year" :class="cx('calendar')" v-bind="ptm('calendar')">
<div :class="cx('header')" v-bind="ptm('header')">
<slot name="header"></slot>
Expand Down Expand Up @@ -101,10 +101,10 @@
type="button"
@click="switchToYearView"
@keydown="onContainerButtonKeydown"
:class="cx('yearTitle')"
:class="cx('viewYear')"
:disabled="switchViewButtonDisabled"
:aria-label="$primevue.config.locale.chooseYear"
v-bind="ptm('yearTitle')"
v-bind="ptm('viewYear')"
data-pc-group-section="view"
>
{{ getYear(month) }}
Expand All @@ -114,10 +114,10 @@
type="button"
@click="switchToMonthView"
@keydown="onContainerButtonKeydown"
:class="cx('monthTitle')"
:class="cx('viewMonth')"
:disabled="switchViewButtonDisabled"
:aria-label="$primevue.config.locale.chooseMonth"
v-bind="ptm('monthTitle')"
v-bind="ptm('viewMonth')"
data-pc-group-section="view"
>
{{ getMonthName(month.month) }}
Expand All @@ -129,10 +129,10 @@
type="button"
@click="switchToMonthView"
@keydown="onContainerButtonKeydown"
:class="cx('monthTitle')"
:class="cx('viewMonth')"
:disabled="switchViewButtonDisabled"
:aria-label="$primevue.config.locale.chooseMonth"
v-bind="ptm('monthTitle')"
v-bind="ptm('viewMonth')"
data-pc-group-section="view"
>
{{ getMonthName(month.month) }}
Expand All @@ -142,16 +142,16 @@
type="button"
@click="switchToYearView"
@keydown="onContainerButtonKeydown"
:class="cx('yearTitle')"
:class="cx('viewYear')"
:disabled="switchViewButtonDisabled"
:aria-label="$primevue.config.locale.chooseYear"
v-bind="ptm('yearTitle')"
v-bind="ptm('viewYear')"
data-pc-group-section="view"
>
{{ getYear(month) }}
</button>
</template>
<span v-if="currentView === 'year'" :class="cx('decadeTitle')" v-bind="ptm('decadeTitle')">
<span v-if="currentView === 'year'" :class="cx('decade')" v-bind="ptm('decade')">
<slot name="decade" :years="yearPickerValues"> {{ yearPickerValues[0].value }} - {{ yearPickerValues[yearPickerValues.length - 1].value }} </slot>
</span>
</div>
Expand All @@ -175,7 +175,7 @@
</template>
</Button>
</div>
<table v-if="currentView === 'date'" :class="cx('grid')" role="grid" v-bind="ptm('grid')">
<table v-if="currentView === 'date'" :class="cx('dayView')" role="grid" v-bind="ptm('dayView')">
<thead v-bind="ptm('tableHeader')">
<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" data-pc-group-section="tableheadercell">
Expand All @@ -185,8 +185,8 @@
</span>
</slot>
</th>
<th v-for="weekDay of weekDays" :key="weekDay" scope="col" :abbr="weekDay" v-bind="ptm('tableHeaderCell')" data-pc-group-section="tableheadercell" :class="cx('weekDay')">
<span v-bind="ptm('weekDay')" data-pc-group-section="tableheadercelllabel" :class="cx('weekDay')">{{ weekDay }}</span>
<th v-for="weekDay of weekDays" :key="weekDay" scope="col" :abbr="weekDay" v-bind="ptm('tableHeaderCell')" data-pc-group-section="tableheadercell" :class="cx('weekDayCell')">
<span :class="cx('weekDay')" v-bind="ptm('weekDay')" data-pc-group-section="tableheadercelllabel">{{ weekDay }}</span>
</th>
</tr>
</thead>
Expand All @@ -204,9 +204,9 @@
v-for="date of week"
:key="date.day + '' + date.month"
:aria-label="date.day"
:class="cx('day', { date })"
:class="cx('dayCell', { date })"
v-bind="
ptm('day', {
ptm('dayCell', {
context: {
date,
today: date.today,
Expand All @@ -222,14 +222,14 @@
>
<span
v-ripple
:class="cx('dayLabel', { date })"
:class="cx('day', { date })"
@click="onDateSelect($event, date)"
draggable="false"
@keydown="onDateCellKeydown($event, date, groupIndex)"
:aria-selected="isSelected(date)"
:aria-disabled="!date.selectable"
v-bind="
ptm('dayLabel', {
ptm('day', {
context: {
date,
today: date.today,
Expand All @@ -254,7 +254,7 @@
</table>
</div>
</div>
<div v-if="currentView === 'month'" :class="cx('monthPicker')" v-bind="ptm('monthPicker')">
<div v-if="currentView === 'month'" :class="cx('monthView')" v-bind="ptm('monthView')">
<span
v-for="(m, i) of monthPickerValues"
:key="m"
Expand All @@ -281,7 +281,7 @@
</div>
</span>
</div>
<div v-if="currentView === 'year'" :class="cx('yearPicker')" v-bind="ptm('yearPicker')">
<div v-if="currentView === 'year'" :class="cx('yearView')" v-bind="ptm('yearView')">
<span
v-for="y of yearPickerValues"
:key="y.value"
Expand Down Expand Up @@ -356,7 +356,7 @@
</template>
</Button>
</div>
<div :class="cx('separatorContainer')" v-bind="ptm('separatorContainer')" data-pc-group-section="timepickerContainer">
<div v-bind="ptm('separatorContainer')" data-pc-group-section="timepickerContainer">
<span v-bind="ptm('separator')" data-pc-group-section="timepickerlabel">{{ timeSeparator }}</span>
</div>
<div :class="cx('minutePicker')" v-bind="ptm('minutePicker')" data-pc-group-section="timepickerContainer">
Expand Down Expand Up @@ -2453,9 +2453,9 @@ export default {
let cells;
if (this.currentView === 'month') {
cells = DomHandler.find(this.overlay, '[data-pc-section="monthpicker"] [data-pc-section="month"]:not([data-p-disabled="true"])');
cells = DomHandler.find(this.overlay, '[data-pc-section="monthview"] [data-pc-section="month"]:not([data-p-disabled="true"])');
} else if (this.currentView === 'year') {
cells = DomHandler.find(this.overlay, '[data-pc-section="yearpicker"] [data-pc-section="year"]:not([data-p-disabled="true"])');
cells = DomHandler.find(this.overlay, '[data-pc-section="yearview"] [data-pc-section="year"]:not([data-p-disabled="true"])');
} else {
cells = DomHandler.find(this.overlay, 'table td span:not([data-p-disabled="true"]):not([data-p-ink="true"])');
}
Expand All @@ -2465,9 +2465,9 @@ export default {
}
} else {
if (this.currentView === 'month') {
cell = DomHandler.findSingle(this.overlay, '[data-pc-section="monthpicker"] [data-pc-section="month"]:not([data-p-disabled="true"])');
cell = DomHandler.findSingle(this.overlay, '[data-pc-section="monthview"] [data-pc-section="month"]:not([data-p-disabled="true"])');
} else if (this.currentView === 'year') {
cell = DomHandler.findSingle(this.overlay, '[data-pc-section="yearpicker"] [data-pc-section="year"]:not([data-p-disabled="true"])');
cell = DomHandler.findSingle(this.overlay, '[data-pc-section="yearview"] [data-pc-section="year"]:not([data-p-disabled="true"])');
} else {
cell = DomHandler.findSingle(this.overlay, 'table td span:not([data-p-disabled="true"]):not([data-p-ink="true"])');
}
Expand All @@ -2488,14 +2488,14 @@ export default {
let cell;
if (this.currentView === 'month') {
let cells = DomHandler.find(this.overlay, '[data-pc-section="monthpicker"] [data-pc-section="month"]');
let selectedCell = DomHandler.findSingle(this.overlay, '[data-pc-section="monthpicker"] [data-pc-section="month"][data-p-highlight="true"]');
let cells = DomHandler.find(this.overlay, '[data-pc-section="monthview"] [data-pc-section="month"]');
let selectedCell = DomHandler.findSingle(this.overlay, '[data-pc-section="monthview"] [data-pc-section="month"][data-p-highlight="true"]');
cells.forEach((cell) => (cell.tabIndex = -1));
cell = selectedCell || cells[0];
} else if (this.currentView === 'year') {
let cells = DomHandler.find(this.overlay, '[data-pc-section="yearpicker"] [data-pc-section="year"]');
let selectedCell = DomHandler.findSingle(this.overlay, '[data-pc-section="yearpicker"] [data-pc-section="year"][data-p-highlight="true"]');
let cells = DomHandler.find(this.overlay, '[data-pc-section="yearview"] [data-pc-section="year"]');
let selectedCell = DomHandler.findSingle(this.overlay, '[data-pc-section="yearview"] [data-pc-section="year"][data-p-highlight="true"]');
cells.forEach((cell) => (cell.tabIndex = -1));
cell = selectedCell || cells[0];
Expand Down
Loading

0 comments on commit 46ddebc

Please sign in to comment.