diff --git a/components/lib/datepicker/DatePicker.d.ts b/components/lib/datepicker/DatePicker.d.ts index 49ea6d140..698d7e5cc 100755 --- a/components/lib/datepicker/DatePicker.d.ts +++ b/components/lib/datepicker/DatePicker.d.ts @@ -140,21 +140,21 @@ export interface DatePickerPassThroughOptions { */ input?: InputTextPassThroughOptions; /** - * 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. */ diff --git a/components/lib/datepicker/DatePicker.vue b/components/lib/datepicker/DatePicker.vue index 21919e52d..a1584e1da 100755 --- a/components/lib/datepicker/DatePicker.vue +++ b/components/lib/datepicker/DatePicker.vue @@ -32,7 +32,7 @@ /> - +
- @@ -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 @@ > +
-
+
-
+
{{ timeSeparator }}
@@ -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]; diff --git a/components/lib/datepicker/style/DatePickerStyle.js b/components/lib/datepicker/style/DatePickerStyle.js index 33a755142..ef50f1702 100644 --- a/components/lib/datepicker/style/DatePickerStyle.js +++ b/components/lib/datepicker/style/DatePickerStyle.js @@ -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', diff --git a/components/lib/inputchips/BaseInputChips.vue b/components/lib/inputchips/BaseInputChips.vue index b9e723e70..e412a5255 100644 --- a/components/lib/inputchips/BaseInputChips.vue +++ b/components/lib/inputchips/BaseInputChips.vue @@ -62,6 +62,10 @@ export default { type: String, default: undefined }, + chipIcon: { + type: String, + default: undefined + }, ariaLabelledby: { type: String, default: null diff --git a/components/lib/inputchips/InputChips.d.ts b/components/lib/inputchips/InputChips.d.ts index faab94219..11512117a 100755 --- a/components/lib/inputchips/InputChips.d.ts +++ b/components/lib/inputchips/InputChips.d.ts @@ -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; + chipLabel?: ChipPassThroughOptions; /** - * 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; diff --git a/components/lib/inputchips/InputChips.vue b/components/lib/inputchips/InputChips.vue index ecfdc5bd5..815e82fbe 100755 --- a/components/lib/inputchips/InputChips.vue +++ b/components/lib/inputchips/InputChips.vue @@ -2,7 +2,7 @@
  • - - + + +
    • -
  • +
diff --git a/components/lib/inputchips/style/InputChipsStyle.js b/components/lib/inputchips/style/InputChipsStyle.js index 90054f073..6bb99b4cd 100644 --- a/components/lib/inputchips/style/InputChipsStyle.js +++ b/components/lib/inputchips/style/InputChipsStyle.js @@ -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({ diff --git a/components/lib/password/BasePassword.vue b/components/lib/password/BasePassword.vue index 538b0ccdd..db576c03e 100644 --- a/components/lib/password/BasePassword.vue +++ b/components/lib/password/BasePassword.vue @@ -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 diff --git a/components/lib/password/Password.d.ts b/components/lib/password/Password.d.ts index 0ce5202a9..a28ec8bc3 100755 --- a/components/lib/password/Password.d.ts +++ b/components/lib/password/Password.d.ts @@ -76,17 +76,17 @@ export interface PasswordPassThroughOptions { */ input?: InputTextPassThroughOptions; /** - * 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[]; diff --git a/components/lib/password/Password.vue b/components/lib/password/Password.vue index 7645e6bdc..4bb4e1ed8 100755 --- a/components/lib/password/Password.vue +++ b/components/lib/password/Password.vue @@ -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" /> - - + + + - - + + {{ infoText }} -
+
@@ -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: { diff --git a/components/lib/password/style/PasswordStyle.js b/components/lib/password/style/PasswordStyle.js index 842f84f6f..4b6ca8704 100644 --- a/components/lib/password/style/PasswordStyle.js +++ b/components/lib/password/style/PasswordStyle.js @@ -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
@@ -185,8 +185,8 @@ - {{ weekDay }} + + {{ weekDay }}