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

Refactor #5681, #5682, #5683 - For DatePicker, InputChips, Password

pull/5701/head
tugcekucukoglu 2024-05-03 23:26:53 +03:00
parent 308ef169c0
commit 46ddebc0c0
11 changed files with 250 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
components/lib/datepicker/DatePicker.d.ts vendored
View File

@ -140,21 +140,21 @@ export interface DatePickerPassThroughOptions {
*/ */
input?: InputTextPassThroughOptions<DatePickerSharedPassThroughMethodOptions>; 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. * Used to pass attributes to the panel's DOM element.
*/ */
panel?: DatePickerPassThroughOptionType; 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. * Used to pass attributes to the header's DOM element.
*/ */
@ -169,17 +169,21 @@ export interface DatePickerPassThroughOptions {
*/ */
title?: DatePickerPassThroughOptionType; 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. * Used to pass attributes to the next button's DOM element.
* @see {@link ButtonPassThroughOptions} * @see {@link ButtonPassThroughOptions}
@ -214,9 +218,9 @@ export interface DatePickerPassThroughOptions {
*/ */
tableHeaderCell?: DatePickerPassThroughOptionType; 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. * Used to pass attributes to the week day's DOM element.
*/ */
@ -237,26 +241,26 @@ export interface DatePickerPassThroughOptions {
* Used to pass attributes to the week label container's DOM element. * Used to pass attributes to the week label container's DOM element.
*/ */
weekLabelContainer?: DatePickerPassThroughOptionType; weekLabelContainer?: DatePickerPassThroughOptionType;
/**
* Used to pass attributes to the day cell's DOM element.
*/
dayCell?: DatePickerPassThroughOptionType;
/** /**
* Used to pass attributes to the day's DOM element. * Used to pass attributes to the day's DOM element.
*/ */
day?: DatePickerPassThroughOptionType; day?: DatePickerPassThroughOptionType;
/** /**
* Used to pass attributes to the day label's DOM element. * Used to pass attributes to the month view's DOM element.
*/ */
dayLabel?: DatePickerPassThroughOptionType; monthView?: DatePickerPassThroughOptionType;
/**
* Used to pass attributes to the month picker's DOM element.
*/
monthPicker?: DatePickerPassThroughOptionType;
/** /**
* Used to pass attributes to the month's DOM element. * Used to pass attributes to the month's DOM element.
*/ */
month?: DatePickerPassThroughOptionType; 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. * Used to pass attributes to the year's DOM element.
*/ */

60
components/lib/datepicker/DatePicker.vue
View File

@ -32,7 +32,7 @@
/> />
<slot v-if="showIcon && iconDisplay === 'button'" name="dropdownbutton"> <slot v-if="showIcon && iconDisplay === 'button'" name="dropdownbutton">
<button <button
:class="cx('dropdownButton')" :class="cx('dropdown')"
:disabled="disabled" :disabled="disabled"
@click="onButtonClick" @click="onButtonClick"
type="button" type="button"
@ -40,7 +40,7 @@
aria-haspopup="dialog" aria-haspopup="dialog"
:aria-expanded="overlayVisible" :aria-expanded="overlayVisible"
:aria-controls="panelId" :aria-controls="panelId"
v-bind="ptm('dropdownButton')" v-bind="ptm('dropdown')"
> >
<slot name="dropdownicon" :class="icon"> <slot name="dropdownicon" :class="icon">
<component :is="icon ? 'span' : 'CalendarIcon'" :class="icon" v-bind="ptm('dropdownButtonIcon')" /> <component :is="icon ? 'span' : 'CalendarIcon'" :class="icon" v-bind="ptm('dropdownButtonIcon')" />
@ -71,7 +71,7 @@
v-bind="ptm('panel')" v-bind="ptm('panel')"
> >
<template v-if="!timeOnly"> <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 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')"> <div :class="cx('header')" v-bind="ptm('header')">
<slot name="header"></slot> <slot name="header"></slot>
@ -101,10 +101,10 @@
type="button" type="button"
@click="switchToYearView" @click="switchToYearView"
@keydown="onContainerButtonKeydown" @keydown="onContainerButtonKeydown"
:class="cx('yearTitle')" :class="cx('viewYear')"
:disabled="switchViewButtonDisabled" :disabled="switchViewButtonDisabled"
:aria-label="$primevue.config.locale.chooseYear" :aria-label="$primevue.config.locale.chooseYear"
v-bind="ptm('yearTitle')" v-bind="ptm('viewYear')"
data-pc-group-section="view" data-pc-group-section="view"
> >
{{ getYear(month) }} {{ getYear(month) }}
@ -114,10 +114,10 @@
type="button" type="button"
@click="switchToMonthView" @click="switchToMonthView"
@keydown="onContainerButtonKeydown" @keydown="onContainerButtonKeydown"
:class="cx('monthTitle')" :class="cx('viewMonth')"
:disabled="switchViewButtonDisabled" :disabled="switchViewButtonDisabled"
:aria-label="$primevue.config.locale.chooseMonth" :aria-label="$primevue.config.locale.chooseMonth"
v-bind="ptm('monthTitle')" v-bind="ptm('viewMonth')"
data-pc-group-section="view" data-pc-group-section="view"
> >
{{ getMonthName(month.month) }} {{ getMonthName(month.month) }}
@ -129,10 +129,10 @@
type="button" type="button"
@click="switchToMonthView" @click="switchToMonthView"
@keydown="onContainerButtonKeydown" @keydown="onContainerButtonKeydown"
:class="cx('monthTitle')" :class="cx('viewMonth')"
:disabled="switchViewButtonDisabled" :disabled="switchViewButtonDisabled"
:aria-label="$primevue.config.locale.chooseMonth" :aria-label="$primevue.config.locale.chooseMonth"
v-bind="ptm('monthTitle')" v-bind="ptm('viewMonth')"
data-pc-group-section="view" data-pc-group-section="view"
> >
{{ getMonthName(month.month) }} {{ getMonthName(month.month) }}
@ -142,16 +142,16 @@
type="button" type="button"
@click="switchToYearView" @click="switchToYearView"
@keydown="onContainerButtonKeydown" @keydown="onContainerButtonKeydown"
:class="cx('yearTitle')" :class="cx('viewYear')"
:disabled="switchViewButtonDisabled" :disabled="switchViewButtonDisabled"
:aria-label="$primevue.config.locale.chooseYear" :aria-label="$primevue.config.locale.chooseYear"
v-bind="ptm('yearTitle')" v-bind="ptm('viewYear')"
data-pc-group-section="view" data-pc-group-section="view"
> >
{{ getYear(month) }} {{ getYear(month) }}
</button> </button>
</template> </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> <slot name="decade" :years="yearPickerValues"> {{ yearPickerValues[0].value }} - {{ yearPickerValues[yearPickerValues.length - 1].value }} </slot>
</span> </span>
</div> </div>
@ -175,7 +175,7 @@
</template> </template>
</Button> </Button>
</div> </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')"> <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" data-pc-group-section="tableheadercell"> <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">
@ -185,8 +185,8 @@
</span> </span>
</slot> </slot>
</th> </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')"> <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 v-bind="ptm('weekDay')" data-pc-group-section="tableheadercelllabel" :class="cx('weekDay')">{{ weekDay }}</span> <span :class="cx('weekDay')" v-bind="ptm('weekDay')" data-pc-group-section="tableheadercelllabel">{{ weekDay }}</span>
</th> </th>
</tr> </tr>
</thead> </thead>
@ -204,9 +204,9 @@
v-for="date of week" v-for="date of week"
:key="date.day + '' + date.month" :key="date.day + '' + date.month"
:aria-label="date.day" :aria-label="date.day"
:class="cx('day', { date })" :class="cx('dayCell', { date })"
v-bind=" v-bind="
ptm('day', { ptm('dayCell', {
context: { context: {
date, date,
today: date.today, today: date.today,
@ -222,14 +222,14 @@
> >
<span <span
v-ripple v-ripple
:class="cx('dayLabel', { date })" :class="cx('day', { date })"
@click="onDateSelect($event, date)" @click="onDateSelect($event, date)"
draggable="false" draggable="false"
@keydown="onDateCellKeydown($event, date, groupIndex)" @keydown="onDateCellKeydown($event, date, groupIndex)"
:aria-selected="isSelected(date)" :aria-selected="isSelected(date)"
:aria-disabled="!date.selectable" :aria-disabled="!date.selectable"
v-bind=" v-bind="
ptm('dayLabel', { ptm('day', {
context: { context: {
date, date,
today: date.today, today: date.today,
@ -254,7 +254,7 @@
</table> </table>
</div> </div>
</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 <span
v-for="(m, i) of monthPickerValues" v-for="(m, i) of monthPickerValues"
:key="m" :key="m"
@ -281,7 +281,7 @@
</div> </div>
</span> </span>
</div> </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 <span
v-for="y of yearPickerValues" v-for="y of yearPickerValues"
:key="y.value" :key="y.value"
@ -356,7 +356,7 @@
</template> </template>
</Button> </Button>
</div> </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> <span v-bind="ptm('separator')" data-pc-group-section="timepickerlabel">{{ timeSeparator }}</span>
</div> </div>
<div :class="cx('minutePicker')" v-bind="ptm('minutePicker')" data-pc-group-section="timepickerContainer"> <div :class="cx('minutePicker')" v-bind="ptm('minutePicker')" data-pc-group-section="timepickerContainer">
@ -2453,9 +2453,9 @@ export default {
let cells; let cells;
if (this.currentView === 'month') { 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') { } 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 { } else {
cells = DomHandler.find(this.overlay, 'table td span:not([data-p-disabled="true"]):not([data-p-ink="true"])'); cells = DomHandler.find(this.overlay, 'table td span:not([data-p-disabled="true"]):not([data-p-ink="true"])');
} }
@ -2465,9 +2465,9 @@ export default {
} }
} else { } else {
if (this.currentView === 'month') { 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') { } 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 { } else {
cell = DomHandler.findSingle(this.overlay, 'table td span:not([data-p-disabled="true"]):not([data-p-ink="true"])'); cell = DomHandler.findSingle(this.overlay, 'table td span:not([data-p-disabled="true"]):not([data-p-ink="true"])');
} }
@ -2488,14 +2488,14 @@ export default {
let cell; let cell;
if (this.currentView === 'month') { if (this.currentView === 'month') {
let cells = DomHandler.find(this.overlay, '[data-pc-section="monthpicker"] [data-pc-section="month"]'); let cells = DomHandler.find(this.overlay, '[data-pc-section="monthview"] [data-pc-section="month"]');
let selectedCell = DomHandler.findSingle(this.overlay, '[data-pc-section="monthpicker"] [data-pc-section="month"][data-p-highlight="true"]'); let selectedCell = DomHandler.findSingle(this.overlay, '[data-pc-section="monthview"] [data-pc-section="month"][data-p-highlight="true"]');
cells.forEach((cell) => (cell.tabIndex = -1)); cells.forEach((cell) => (cell.tabIndex = -1));
cell = selectedCell || cells[0]; cell = selectedCell || cells[0];
} else if (this.currentView === 'year') { } else if (this.currentView === 'year') {
let cells = DomHandler.find(this.overlay, '[data-pc-section="yearpicker"] [data-pc-section="year"]'); let cells = DomHandler.find(this.overlay, '[data-pc-section="yearview"] [data-pc-section="year"]');
let selectedCell = DomHandler.findSingle(this.overlay, '[data-pc-section="yearpicker"] [data-pc-section="year"][data-p-highlight="true"]'); let selectedCell = DomHandler.findSingle(this.overlay, '[data-pc-section="yearview"] [data-pc-section="year"][data-p-highlight="true"]');
cells.forEach((cell) => (cell.tabIndex = -1)); cells.forEach((cell) => (cell.tabIndex = -1));
cell = selectedCell || cells[0]; cell = selectedCell || cells[0];

28
components/lib/datepicker/style/DatePickerStyle.js
View File

@ -351,7 +351,7 @@ const classes = {
} }
], ],
input: 'p-datepicker-input', input: 'p-datepicker-input',
dropdownButton: 'p-datepicker-dropdown', dropdown: 'p-datepicker-dropdown',
inputIconContainer: 'p-datepicker-input-icon-container', inputIconContainer: 'p-datepicker-input-icon-container',
inputIcon: 'p-datepicker-input-icon', inputIcon: 'p-datepicker-input-icon',
panel: ({ instance, props }) => [ panel: ({ instance, props }) => [
@ -363,32 +363,32 @@ const classes = {
'p-ripple-disabled': instance.$primevue.config.ripple === false 'p-ripple-disabled': instance.$primevue.config.ripple === false
} }
], ],
group: 'p-datepicker-calendar-container', calendarContainer: 'p-datepicker-calendar-container',
calendar: 'p-datepicker-calendar', calendar: 'p-datepicker-calendar',
header: 'p-datepicker-header', header: 'p-datepicker-header',
previousButton: 'p-datepicker-prev-button', previousButton: 'p-datepicker-prev-button',
title: 'p-datepicker-title', title: 'p-datepicker-title',
monthTitle: 'p-datepicker-view-month p-link', viewMonth: 'p-datepicker-view-month p-link',
yearTitle: 'p-datepicker-view-year p-link', viewYear: 'p-datepicker-view-year p-link',
decadeTitle: 'p-datepicker-decade', decade: 'p-datepicker-decade',
nextButton: 'p-datepicker-next-button', nextButton: 'p-datepicker-next-button',
grid: 'p-datepicker-day-view', dayView: 'p-datepicker-day-view',
weekHeader: 'p-datepicker-weekheader p-disabled', weekHeader: 'p-datepicker-weekheader p-disabled',
weekNumber: 'p-datepicker-weeknumber', weekNumber: 'p-datepicker-weeknumber',
weekLabelContainer: 'p-disabled', weekLabelContainer: 'p-disabled', //TODO:
weekDay: 'p-datepicker-weekday-cell', weekDayCell: 'p-datepicker-weekday-cell',
weekDayLabel: 'p-date-picker-weekday', weekDay: 'p-date-picker-weekday',
day: ({ date }) => ['p-datepicker-day-cell', { 'p-datepicker-other-month': date.otherMonth, 'p-datepicker-today': date.today }], dayCell: ({ date }) => ['p-datepicker-day-cell', { 'p-datepicker-other-month': date.otherMonth, 'p-datepicker-today': date.today }],
dayLabel: ({ instance, props, date }) => ['p-datepicker-day', { 'p-datepicker-day-selected': instance.isSelected(date) && date.selectable, 'p-disabled': props.disabled || !date.selectable }], day: ({ instance, props, date }) => ['p-datepicker-day', { 'p-datepicker-day-selected': instance.isSelected(date) && date.selectable, 'p-disabled': props.disabled || !date.selectable }],
monthPicker: 'p-datepicker-month-view', monthView: 'p-datepicker-month-view',
month: ({ instance, props, month, index }) => ['p-datepicker-month', { 'p-datepicker-month-selected': instance.isMonthSelected(index), 'p-disabled': props.disabled || !month.selectable }], month: ({ instance, props, month, index }) => ['p-datepicker-month', { 'p-datepicker-month-selected': instance.isMonthSelected(index), 'p-disabled': props.disabled || !month.selectable }],
yearPicker: 'p-datepicker-year-view', yearView: 'p-datepicker-year-view',
year: ({ instance, props, year }) => ['p-datepicker-year', { 'p-datepicker-year-selected': instance.isYearSelected(year.value), 'p-disabled': props.disabled || !year.selectable }], year: ({ instance, props, year }) => ['p-datepicker-year', { 'p-datepicker-year-selected': instance.isYearSelected(year.value), 'p-disabled': props.disabled || !year.selectable }],
timePicker: 'p-datepicker-time-picker', timePicker: 'p-datepicker-time-picker',
hourPicker: 'p-datepicker-hour-picker', hourPicker: 'p-datepicker-hour-picker',
incrementButton: 'p-datepicker-increment-button', incrementButton: 'p-datepicker-increment-button',
decrementButton: 'p-datepicker-decrement-button', decrementButton: 'p-datepicker-decrement-button',
separatorContainer: 'p-datepicker-separator', separator: 'p-datepicker-separator',
minutePicker: 'p-minute-picker', minutePicker: 'p-minute-picker',
secondPicker: 'p-second-picker', secondPicker: 'p-second-picker',
ampmPicker: 'p-ampm-picker', ampmPicker: 'p-ampm-picker',

4
components/lib/inputchips/BaseInputChips.vue
View File

@ -62,6 +62,10 @@ export default {
type: String, type: String,
default: undefined default: undefined
}, },
chipIcon: {
type: String,
default: undefined
},
ariaLabelledby: { ariaLabelledby: {
type: String, type: String,
default: null default: null

60
components/lib/inputchips/InputChips.d.ts vendored
View File

@ -91,30 +91,30 @@ export interface InputChipsPassThroughOptions {
*/ */
root?: InputChipsPassThroughOptionType; root?: InputChipsPassThroughOptionType;
/** /**
* Used to pass attributes to the container's DOM element. * Used to pass attributes to the input's DOM element.
*/ */
container?: InputChipsPassThroughOptionType; input?: InputChipsPassThroughOptionType;
/** /**
* Used to pass attributes to the token's DOM element. * Used to pass attributes to the chip's DOM element.
*/ */
token?: InputChipsPassThroughOptionType; chip?: InputChipsPassThroughOptionType;
/** /**
* Used to pass attributes to the Chip component. * Used to pass attributes to the Chip component.
* @see {@link ChipPassThroughOptions} * @see {@link ChipPassThroughOptions}
*/ */
label?: ChipPassThroughOptions<InputChipsSharedPassThroughMethodOptions>; chipLabel?: ChipPassThroughOptions<InputChipsSharedPassThroughMethodOptions>;
/** /**
* Used to pass attributes to the remove token icon's DOM element. * Used to pass attributes to the chip icon's DOM element.
*/ */
removeTokenIcon?: InputChipsPassThroughOptionType; chipIcon?: InputChipsPassThroughOptionType;
/** /**
* Used to pass attributes to the input token's DOM element. * Used to pass attributes to the input item's DOM element.
*/ */
inputToken?: InputChipsPassThroughOptionType; inputItem?: InputChipsPassThroughOptionType;
/** /**
* Used to pass attributes to the input's DOM element. * Used to pass attributes to the input item field's DOM element.
*/ */
input?: InputChipsPassThroughOptionType; inputItemField?: InputChipsPassThroughOptionType;
/** /**
* Used to manage all lifecycle hooks. * Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks} * @see {@link BaseComponent.ComponentHooks}
@ -200,6 +200,10 @@ export interface InputChipsProps {
* @deprecated since v3.27.0. Use 'removetokenicon' slot. * @deprecated since v3.27.0. Use 'removetokenicon' slot.
*/ */
removeTokenIcon?: string | undefined; removeTokenIcon?: string | undefined;
/**
* Icon to display in chip remove action.
*/
chipIcon?: string | undefined;
/** /**
* When present, it specifies that the component should have invalid state style. * When present, it specifies that the component should have invalid state style.
* @defaultValue false * @defaultValue false
@ -262,8 +266,9 @@ export interface InputChipsSlots {
value: any; value: any;
}): VNode[]; }): VNode[];
/** /**
* Custom remove token icon template. * @deprecated since v4.0. Use 'chipicon' slot.
* @param {Object} scope - remove token icon slot's params. * Custom chip icon template.
* @param {Object} scope - chip icon slot's params.
*/ */
removetokenicon(scope: { removetokenicon(scope: {
/** /**
@ -275,13 +280,38 @@ export interface InputChipsSlots {
*/ */
index: number; index: number;
/** /**
* Remove token icon function. * chip icon function.
* @param {Event} event - Browser event * @param {Event} event - Browser event
* @deprecated since v3.39.0. Use 'removeCallback' property instead. * @deprecated since v3.39.0. Use 'removeCallback' property instead.
*/ */
onClick: (event: Event, index: number) => void; onClick: (event: Event, index: number) => void;
/** /**
* Remove token icon function. * chip icon function.
* @param {Event} event - Browser event
*/
removeCallback: (event: Event, index: number) => void;
}): VNode[];
/**
* Custom chip icon template.
* @param {Object} scope - chip icon slot's params.
*/
chipicon(scope: {
/**
* Style class of the icon.
*/
class: string;
/**
* Index of the token.
*/
index: number;
/**
* chip icon function.
* @param {Event} event - Browser event
* @deprecated since v3.39.0. Use 'removeCallback' property instead.
*/
onClick: (event: Event, index: number) => void;
/**
* chip icon function.
* @param {Event} event - Browser event * @param {Event} event - Browser event
*/ */
removeCallback: (event: Event, index: number) => void; removeCallback: (event: Event, index: number) => void;

19
components/lib/inputchips/InputChips.vue
View File

@ -2,7 +2,7 @@
<div :class="cx('root')" v-bind="ptmi('root')"> <div :class="cx('root')" v-bind="ptmi('root')">
<ul <ul
ref="container" ref="container"
:class="cx('container')" :class="cx('input')"
tabindex="-1" tabindex="-1"
role="listbox" role="listbox"
aria-orientation="horizontal" aria-orientation="horizontal"
@ -13,30 +13,31 @@
@focus="onContainerFocus" @focus="onContainerFocus"
@blur="onContainerBlur" @blur="onContainerBlur"
@keydown="onContainerKeyDown" @keydown="onContainerKeyDown"
v-bind="ptm('container')" v-bind="ptm('input')"
> >
<li <li
v-for="(val, i) of modelValue" v-for="(val, i) of modelValue"
:key="`${i}_${val}`" :key="`${i}_${val}`"
:id="id + '_inputchips_item_' + i" :id="id + '_inputchips_item_' + i"
role="option" role="option"
:class="cx('token', { index: i })" :class="cx('chip', { index: i })"
:aria-label="val" :aria-label="val"
:aria-selected="true" :aria-selected="true"
:aria-setsize="modelValue.length" :aria-setsize="modelValue.length"
:aria-posinset="i + 1" :aria-posinset="i + 1"
v-bind="ptm('token')" v-bind="ptm('chip')"
:data-p-focused="focusedIndex === i" :data-p-focused="focusedIndex === i"
> >
<slot name="chip" :class="cx('label')" :index="i" :value="val" :removeCallback="(event) => removeOption(event, i)"> <slot name="chip" :class="cx('chipLabel')" :index="i" :value="val" :removeCallback="(event) => removeOption(event, i)">
<Chip :class="cx('label')" :label="val" :removeIcon="removeTokenIcon" removable :unstyled="unstyled" @remove="removeItem($event, i)" :pt="ptm('label')"> <!-- TODO: removetokenicon and removeTokenIcon deprecated since v4.0. Use chipicon slot and chipIcon prop-->
<Chip :class="cx('chipLabel')" :label="val" :removeIcon="removeTokenIcon || chipIcon" removable :unstyled="unstyled" @remove="removeItem($event, i)" :pt="ptm('chipLabel')">
<template #removeicon> <template #removeicon>
<slot name="removetokenicon" :class="cx('removeTokenIcon')" :index="i" :removeCallback="(event) => removeItem(event, i)" /> <slot :name="$slots.removetokenicon ? 'removetokenicon' : 'chipicon'" :class="cx('chipIcon')" :index="i" :removeCallback="(event) => removeItem(event, i)" />
</template> </template>
</Chip> </Chip>
</slot> </slot>
</li> </li>
<li :class="cx('inputToken')" role="option" v-bind="ptm('inputToken')"> <li :class="cx('inputItem')" role="option" v-bind="ptm('inputItem')">
<input <input
ref="input" ref="input"
:id="inputId" :id="inputId"
@ -51,7 +52,7 @@
@input="onInput" @input="onInput"
@keydown="onKeyDown($event)" @keydown="onKeyDown($event)"
@paste="onPaste($event)" @paste="onPaste($event)"
v-bind="{ ...inputProps, ...ptm('input') }" v-bind="{ ...inputProps, ...ptm('inputItemField') }"
/> />
</li> </li>
</ul> </ul>

14
components/lib/inputchips/style/InputChipsStyle.js
View File

@ -35,7 +35,7 @@ const theme = ({ dt }) => `
outline: 0 none; outline: 0 none;
} }
.p-inputinputchips.p-invalid .p-inputchips-input { .p-inputchips.p-invalid .p-inputchips-input {
border-color: ${dt('inputchips.invalid.border.color')}; border-color: ${dt('inputchips.invalid.border.color')};
} }
@ -47,7 +47,7 @@ const theme = ({ dt }) => `
background: ${dt('inputchips.filled.focus.background')}; background: ${dt('inputchips.filled.focus.background')};
} }
.p-inputinputchips.p-disabled .p-inputchips-input { .p-inputchips.p-disabled .p-inputchips-input {
opacity: 1; opacity: 1;
background: ${dt('inputchips.disabled.background')}; background: ${dt('inputchips.disabled.background')};
color: ${dt('inputchips.disabled.color')}; color: ${dt('inputchips.disabled.color')};
@ -95,16 +95,16 @@ const classes = {
'p-inputwrapper-focus': instance.focused 'p-inputwrapper-focus': instance.focused
} }
], ],
container: ({ props, instance }) => [ input: ({ props, instance }) => [
'p-inputchips-input', 'p-inputchips-input',
{ {
'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled' 'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled'
} }
], ],
token: ({ state, index }) => ['p-inputchips-chip', { 'p-focus': state.focusedIndex === index }], chip: ({ state, index }) => ['p-inputchips-chip', { 'p-focus': state.focusedIndex === index }],
label: 'p-inputchips-chip-label', chipLabel: 'p-inputchips-chip-label',
removeTokenIcon: 'p-inputchips-chip-icon', chipIcon: 'p-inputchips-chip-icon',
inputToken: 'p-inputchips-input-item' inputItem: 'p-inputchips-input-item'
}; };
export default BaseStyle.extend({ export default BaseStyle.extend({

24
components/lib/password/BasePassword.vue
View File

@ -47,10 +47,18 @@ export default {
type: String, type: String,
default: undefined default: undefined
}, },
maskIcon: {
type: String,
default: undefined
},
showIcon: { showIcon: {
type: String, type: String,
default: undefined default: undefined
}, },
unmaskIcon: {
type: String,
default: undefined
},
variant: { variant: {
type: String, type: String,
default: null default: null
@ -103,6 +111,22 @@ export default {
type: null, type: null,
default: null default: null
}, },
overlayId: {
type: String,
default: null
},
overlayClass: {
type: [String, Object],
default: null
},
overlayStyle: {
type: Object,
default: null
},
overlayProps: {
type: null,
default: null
},
ariaLabelledby: { ariaLabelledby: {
type: String, type: String,
default: null default: null

84
components/lib/password/Password.d.ts vendored
View File

@ -76,17 +76,17 @@ export interface PasswordPassThroughOptions {
*/ */
input?: InputTextPassThroughOptions<PasswordSharedPassThroughMethodOptions>; input?: InputTextPassThroughOptions<PasswordSharedPassThroughMethodOptions>;
/** /**
* Used to pass attributes to the hide icon's DOM element. * Used to pass attributes to the mask icon's DOM element.
*/ */
hideIcon?: PasswordPassThroughOptionType; maskIcon?: PasswordPassThroughOptionType;
/** /**
* Used to pass attributes to the show icon's DOM element. * Used to pass attributes to the unmask icon's DOM element.
*/ */
showIcon?: PasswordPassThroughOptionType; unmaskIcon?: PasswordPassThroughOptionType;
/** /**
* Used to pass attributes to the panel's DOM element. * Used to pass attributes to the overlay's DOM element.
*/ */
panel?: PasswordPassThroughOptionType; overlay?: PasswordPassThroughOptionType;
/** /**
* Used to pass attributes to the meter's DOM element. * Used to pass attributes to the meter's DOM element.
*/ */
@ -213,14 +213,22 @@ export interface PasswordProps extends InputHTMLAttributes {
toggleMask?: boolean | undefined; toggleMask?: boolean | undefined;
/** /**
* Icon to hide displaying the password as plain text. * Icon to hide displaying the password as plain text.
* @deprecated since v3.27.0. Use 'hideicon' slot. * @deprecated since v3.27.0. Use 'maskicon' slot.
*/ */
hideIcon?: string | undefined; hideIcon?: string | undefined;
/**
* Icon to hide displaying the password as plain text.
*/
maskIcon?: string | undefined;
/** /**
* Icon to show displaying the password as plain text. * Icon to show displaying the password as plain text.
* @deprecated since v3.27.0. Use 'showicon' slot. * @deprecated since v3.27.0. Use 'unmaskicon' slot.
*/ */
showIcon?: string | undefined; showIcon?: string | undefined;
/**
* Icon to show displaying the password as plain text.
*/
unmaskIcon?: string | undefined;
/** /**
* When present, it specifies that the component should have invalid state style. * When present, it specifies that the component should have invalid state style.
* @defaultValue false * @defaultValue false
@ -277,6 +285,22 @@ export interface PasswordProps extends InputHTMLAttributes {
* Used to pass all properties of the HTMLDivElement to the overlay panel inside the component. * Used to pass all properties of the HTMLDivElement to the overlay panel inside the component.
*/ */
panelProps?: HTMLAttributes | undefined; panelProps?: HTMLAttributes | undefined;
/**
* Identifier of the underlying overlay element.
*/
overlayId?: string | undefined;
/**
* Style class of the overlay.
*/
overlayClass?: string | object | undefined;
/**
* Inline style of the overlay.
*/
overlayStyle?: object | undefined;
/**
* Used to pass all properties of the HTMLDivElement to the overlay inside the component.
*/
overlayProps?: HTMLAttributes | undefined;
/** /**
* Establishes relationships between the component and label(s) where its value should be one or more element IDs. * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
*/ */
@ -323,7 +347,8 @@ export interface PasswordSlots {
*/ */
content(): VNode[]; content(): VNode[];
/** /**
* Custom hide icon template. * @deprecated since v4.0. Use 'maskicon' slot instead.
* Custom mask icon template.
* @param {Object} scope - hideicon slot's params. * @param {Object} scope - hideicon slot's params.
*/ */
hideicon(scope: { hideicon(scope: {
@ -333,22 +358,53 @@ export interface PasswordSlots {
*/ */
onClick: () => void; onClick: () => void;
/** /**
* Hide icon click event * Mask icon click event
*/ */
toggleCallback: () => void; toggleCallback: () => void;
}): VNode[]; }): VNode[];
/** /**
* Custom show icon template. * Custom hide icon template.
* @param {Object} scope - showicon slot's params. * @param {Object} scope - maskicon slot's params.
*/ */
showicon(scope: { maskicon(scope: {
/** /**
* Hide icon click event * Hide icon click event
* @deprecated since v3.39.0. Use 'toggleCallback' property instead. * @deprecated since v3.39.0. Use 'toggleCallback' property instead.
*/ */
onClick: () => void; onClick: () => void;
/** /**
* Hide icon click event * Mask icon click event
*/
toggleCallback: () => void;
}): VNode[];
/**
* @deprecated since v4.0. use 'unmaskicon' slot instead.
* Custom unmask icon template.
* @param {Object} scope - showicon slot's params.
*/
showicon(scope: {
/**
* Unmask icon click event
* @deprecated since v3.39.0. Use 'toggleCallback' property instead.
*/
onClick: () => void;
/**
* Unmask icon click event
*/
toggleCallback: () => void;
}): VNode[];
/**
* Custom unmask icon template.
* @param {Object} scope - showicon slot's params.
*/
unmaskicon(scope: {
/**
* Unmask icon click event
* @deprecated since v3.39.0. Use 'toggleCallback' property instead.
*/
onClick: () => void;
/**
* Unmask icon click event
*/ */
toggleCallback: () => void; toggleCallback: () => void;
}): VNode[]; }): VNode[];

25
components/lib/password/Password.vue
View File

@ -9,7 +9,7 @@
:value="modelValue" :value="modelValue"
:aria-labelledby="ariaLabelledby" :aria-labelledby="ariaLabelledby"
:aria-label="ariaLabel" :aria-label="ariaLabel"
:aria-controls="(panelProps && panelProps.id) || panelId || panelUniqueId" :aria-controls="(overlayProps && overlayProps.id) || overlayId || (panelProps && panelProps.id) || panelId || overlayUniqueId"
:aria-expanded="overlayVisible" :aria-expanded="overlayVisible"
:aria-haspopup="true" :aria-haspopup="true"
:placeholder="placeholder" :placeholder="placeholder"
@ -26,18 +26,27 @@
:pt="ptm('input')" :pt="ptm('input')"
:unstyled="unstyled" :unstyled="unstyled"
/> />
<slot v-if="toggleMask && unmasked" name="hideicon" :onClick="onMaskToggle" :toggleCallback="onMaskToggle"> <!-- TODO: hide* and show* deprecated since v4.0-->
<component :is="hideIcon ? 'i' : 'EyeSlashIcon'" :class="[cx('hideIcon'), hideIcon]" @click="onMaskToggle" v-bind="ptm('hideIcon')" /> <slot v-if="toggleMask && unmasked" :name="$slots.hideicon ? 'hideicon' : 'maskicon'" :onClick="onMaskToggle" :toggleCallback="onMaskToggle">
<component :is="hideIcon || maskIcon ? 'i' : 'EyeSlashIcon'" :class="[cx('maskIcon'), maskIcon || hideIcon]" @click="onMaskToggle" v-bind="ptm('maskIcon')" />
</slot> </slot>
<slot v-if="toggleMask && !unmasked" name="showicon" :onClick="onMaskToggle" :toggleCallback="onMaskToggle"> <slot v-if="toggleMask && !unmasked" :name="$slots.showicon ? 'showicon' : 'unmaskicon'" :onClick="onMaskToggle" :toggleCallback="onMaskToggle">
<component :is="showIcon ? 'i' : 'EyeIcon'" :class="[cx('showIcon'), showIcon]" @click="onMaskToggle" v-bind="ptm('showIcon')" /> <component :is="showIcon || unmaskIcon ? 'i' : 'EyeIcon'" :class="[cx('unmaskIcon'), unmaskIcon || showIcon]" @click="onMaskToggle" v-bind="ptm('unmaskIcon')" />
</slot> </slot>
<span class="p-hidden-accessible" aria-live="polite" v-bind="ptm('hiddenAccesible')" :data-p-hidden-accessible="true"> <span class="p-hidden-accessible" aria-live="polite" v-bind="ptm('hiddenAccesible')" :data-p-hidden-accessible="true">
{{ infoText }} {{ infoText }}
</span> </span>
<Portal :appendTo="appendTo"> <Portal :appendTo="appendTo">
<transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave" v-bind="ptm('transition')"> <transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave" v-bind="ptm('transition')">
<div v-if="overlayVisible" :ref="overlayRef" :id="panelId || panelUniqueId" :class="[cx('panel'), panelClass]" :style="panelStyle" @click="onOverlayClick" v-bind="{ ...panelProps, ...ptm('panel') }"> <div
v-if="overlayVisible"
:ref="overlayRef"
:id="overlayId || panelId || overlayUniqueId"
:class="[cx('overlay'), panelClass, overlayClass]"
:style="[overlayStyle, panelStyle]"
@click="onOverlayClick"
v-bind="{ ...panelProps, ...overlayProps, ...ptm('overlay') }"
>
<slot name="header"></slot> <slot name="header"></slot>
<slot name="content"> <slot name="content">
<div :class="cx('meter')" v-bind="ptm('meter')"> <div :class="cx('meter')" v-bind="ptm('meter')">
@ -303,8 +312,8 @@ export default {
promptText() { promptText() {
return this.promptLabel || this.$primevue.config.locale.passwordPrompt; return this.promptLabel || this.$primevue.config.locale.passwordPrompt;
}, },
panelUniqueId() { overlayUniqueId() {
return this.id + '_panel'; return this.id + '_overlay';
} }
}, },
components: { components: {

6
components/lib/password/style/PasswordStyle.js
View File

@ -82,9 +82,9 @@ const classes = {
} }
], ],
input: 'p-password-input', input: 'p-password-input',
hideIcon: 'p-password-toggle-mask-icon p-password-mask-icon', maskIcon: 'p-password-toggle-mask-icon p-password-mask-icon',
showIcon: 'p-password-toggle-mask-icon p-password-unmask-icon', unmaskIcon: 'p-password-toggle-mask-icon p-password-unmask-icon',
panel: ({ instance }) => [ overlay: ({ instance }) => [
'p-password-overlay p-component', 'p-password-overlay p-component',
{ {
'p-ripple-disabled': instance.$primevue.config.ripple === false 'p-ripple-disabled': instance.$primevue.config.ripple === false