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>;
/**
* 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.
*/
@ -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}
@ -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.
*/
@ -237,26 +241,26 @@ export interface DatePickerPassThroughOptions {
* Used to pass attributes to the week label container's DOM element.
*/
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.
*/
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;
/**
* Used to pass attributes to the month picker'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.
*/

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

@ -32,7 +32,7 @@
/>
<slot v-if="showIcon && iconDisplay === 'button'" name="dropdownbutton">
<button
:class="cx('dropdownButton')"
:class="cx('dropdown')"
:disabled="disabled"
@click="onButtonClick"
type="button"
@ -40,7 +40,7 @@
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')" />
@ -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>
@ -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) }}
@ -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) }}
@ -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) }}
@ -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>
@ -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">
@ -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>
@ -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,
@ -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,
@ -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"
@ -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"
@ -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">
@ -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"])');
}
@ -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"])');
}
@ -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];

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

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

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

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

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

@ -91,30 +91,30 @@ export interface InputChipsPassThroughOptions {
*/
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.
* @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.
* @see {@link BaseComponent.ComponentHooks}
@ -200,6 +200,10 @@ export interface InputChipsProps {
* @deprecated since v3.27.0. Use 'removetokenicon' slot.
*/
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.
* @defaultValue false
@ -262,8 +266,9 @@ export interface InputChipsSlots {
value: any;
}): VNode[];
/**
* Custom remove token icon template.
* @param {Object} scope - remove token icon slot's params.
* @deprecated since v4.0. Use 'chipicon' slot.
* Custom chip icon template.
* @param {Object} scope - chip icon slot's params.
*/
removetokenicon(scope: {
/**
@ -275,13 +280,38 @@ export interface InputChipsSlots {
*/
index: number;
/**
* Remove token icon function.
* chip icon function.
* @param {Event} event - Browser event
* @deprecated since v3.39.0. Use 'removeCallback' property instead.
*/
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
*/
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')">
<ul
ref="container"
:class="cx('container')"
:class="cx('input')"
tabindex="-1"
role="listbox"
aria-orientation="horizontal"
@ -13,30 +13,31 @@
@focus="onContainerFocus"
@blur="onContainerBlur"
@keydown="onContainerKeyDown"
v-bind="ptm('container')"
v-bind="ptm('input')"
>
<li
v-for="(val, i) of modelValue"
:key="`${i}_${val}`"
:id="id + '_inputchips_item_' + i"
role="option"
:class="cx('token', { index: i })"
:class="cx('chip', { index: i })"
:aria-label="val"
:aria-selected="true"
:aria-setsize="modelValue.length"
:aria-posinset="i + 1"
v-bind="ptm('token')"
v-bind="ptm('chip')"
:data-p-focused="focusedIndex === i"
>
<slot name="chip" :class="cx('label')" :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')">
<slot name="chip" :class="cx('chipLabel')" :index="i" :value="val" :removeCallback="(event) => removeOption(event, i)">
<!-- 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>
<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>
</Chip>
</slot>
</li>
<li :class="cx('inputToken')" role="option" v-bind="ptm('inputToken')">
<li :class="cx('inputItem')" role="option" v-bind="ptm('inputItem')">
<input
ref="input"
:id="inputId"
@ -51,7 +52,7 @@
@input="onInput"
@keydown="onKeyDown($event)"
@paste="onPaste($event)"
v-bind="{ ...inputProps, ...ptm('input') }"
v-bind="{ ...inputProps, ...ptm('inputItemField') }"
/>
</li>
</ul>

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

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

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

@ -47,10 +47,18 @@ export default {
type: String,
default: undefined
},
maskIcon: {
type: String,
default: undefined
},
showIcon: {
type: String,
default: undefined
},
unmaskIcon: {
type: String,
default: undefined
},
variant: {
type: String,
default: null
@ -103,6 +111,22 @@ export default {
type: 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: {
type: String,
default: null

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

@ -76,17 +76,17 @@ export interface PasswordPassThroughOptions {
*/
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.
*/
@ -213,14 +213,22 @@ export interface PasswordProps extends InputHTMLAttributes {
toggleMask?: boolean | undefined;
/**
* 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;
/**
* Icon to hide displaying the password as plain text.
*/
maskIcon?: string | undefined;
/**
* 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;
/**
* Icon to show displaying the password as plain text.
*/
unmaskIcon?: string | undefined;
/**
* When present, it specifies that the component should have invalid state style.
* @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.
*/
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.
*/
@ -323,7 +347,8 @@ export interface PasswordSlots {
*/
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.
*/
hideicon(scope: {
@ -333,22 +358,53 @@ export interface PasswordSlots {
*/
onClick: () => void;
/**
* Hide icon click event
* Mask icon click event
*/
toggleCallback: () => void;
}): VNode[];
/**
* Custom show icon template.
* @param {Object} scope - showicon slot's params.
* Custom hide icon template.
* @param {Object} scope - maskicon slot's params.
*/
showicon(scope: {
maskicon(scope: {
/**
* Hide icon click event
* @deprecated since v3.39.0. Use 'toggleCallback' property instead.
*/
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;
}): VNode[];

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

@ -9,7 +9,7 @@
:value="modelValue"
:aria-labelledby="ariaLabelledby"
: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-haspopup="true"
:placeholder="placeholder"
@ -26,18 +26,27 @@
:pt="ptm('input')"
:unstyled="unstyled"
/>
<slot v-if="toggleMask && unmasked" name="hideicon" :onClick="onMaskToggle" :toggleCallback="onMaskToggle">
<component :is="hideIcon ? 'i' : 'EyeSlashIcon'" :class="[cx('hideIcon'), hideIcon]" @click="onMaskToggle" v-bind="ptm('hideIcon')" />
<!-- TODO: hide* and show* deprecated since v4.0-->
<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 v-if="toggleMask && !unmasked" name="showicon" :onClick="onMaskToggle" :toggleCallback="onMaskToggle">
<component :is="showIcon ? 'i' : 'EyeIcon'" :class="[cx('showIcon'), showIcon]" @click="onMaskToggle" v-bind="ptm('showIcon')" />
<slot v-if="toggleMask && !unmasked" :name="$slots.showicon ? 'showicon' : 'unmaskicon'" :onClick="onMaskToggle" :toggleCallback="onMaskToggle">
<component :is="showIcon || unmaskIcon ? 'i' : 'EyeIcon'" :class="[cx('unmaskIcon'), unmaskIcon || showIcon]" @click="onMaskToggle" v-bind="ptm('unmaskIcon')" />
</slot>
<span class="p-hidden-accessible" aria-live="polite" v-bind="ptm('hiddenAccesible')" :data-p-hidden-accessible="true">
{{ infoText }}
</span>
<Portal :appendTo="appendTo">
<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="content">
<div :class="cx('meter')" v-bind="ptm('meter')">
@ -303,8 +312,8 @@ export default {
promptText() {
return this.promptLabel || this.$primevue.config.locale.passwordPrompt;
},
panelUniqueId() {
return this.id + '_panel';
overlayUniqueId() {
return this.id + '_overlay';
}
},
components: {

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

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