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

Refactor #5681

pull/5701/head
tugcekucukoglu 2024-05-06 18:23:01 +03:00
parent 3cc675e50f
commit e1367fd494
89 changed files with 376 additions and 339 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/lib/autocomplete/AutoComplete.d.ts vendored
View File

@ -147,7 +147,7 @@ export interface AutoCompletePassThroughOptions {
* Used to pass attributes to the InputText component. * Used to pass attributes to the InputText component.
* @see {@link InputTextPassThroughOptions} * @see {@link InputTextPassThroughOptions}
*/ */
input?: InputTextPassThroughOptions<AutoCompleteSharedPassThroughMethodOptions> | AutoCompletePassThroughOptionType; pcInput?: InputTextPassThroughOptions<AutoCompleteSharedPassThroughMethodOptions> | AutoCompletePassThroughOptionType;
/** /**
* Used to pass attributes to the input multiple's DOM element. * Used to pass attributes to the input multiple's DOM element.
*/ */
@ -160,7 +160,7 @@ export interface AutoCompletePassThroughOptions {
* Used to pass attributes to the Chip. * Used to pass attributes to the Chip.
* @see {@link ChipPassThroughOptions} * @see {@link ChipPassThroughOptions}
*/ */
chipLabel?: ChipPassThroughOptions<AutoCompleteSharedPassThroughMethodOptions>; pcChipLabel?: ChipPassThroughOptions<AutoCompleteSharedPassThroughMethodOptions>;
/** /**
* Used to pass attributes to the chip icon's DOM element. * Used to pass attributes to the chip icon's DOM element.
*/ */

4
components/lib/autocomplete/AutoComplete.vue
View File

@ -55,9 +55,9 @@
:aria-posinset="i + 1" :aria-posinset="i + 1"
v-bind="ptm('token')" v-bind="ptm('token')"
> >
<slot name="chip" :value="option" :index="i" :removeCallback="(event) => removeOption(event, i)"> <slot name="chip" :class="cx('pcChipLabel')" :value="option" :index="i" :removeCallback="(event) => removeOption(event, i)">
<!-- TODO: removetokenicon and removeTokenIcon deprecated since v4.0. Use chipicon slot and chipIcon prop--> <!-- TODO: removetokenicon and removeTokenIcon deprecated since v4.0. Use chipicon slot and chipIcon prop-->
<Chip :class="cx('chipLabel')" :label="getOptionLabel(option)" :removeIcon="chipIcon || removeTokenIcon" removable :unstyled="unstyled" @remove="removeOption($event, i)" :pt="ptm('chipLabel')"> <Chip :class="cx('pcChipLabel')" :label="getOptionLabel(option)" :removeIcon="chipIcon || removeTokenIcon" removable :unstyled="unstyled" @remove="removeOption($event, i)" :pt="ptm('pcChipLabel')">
<template #removeicon> <template #removeicon>
<slot :name="$slots.chipicon ? 'chipicon' : 'removetokenicon'" :class="cx('chipIcon')" :index="i" :removeCallback="(event) => removeOption(event, i)" /> <slot :name="$slots.chipicon ? 'chipicon' : 'removetokenicon'" :class="cx('chipIcon')" :index="i" :removeCallback="(event) => removeOption(event, i)" />
</template> </template>

2
components/lib/autocomplete/style/AutoCompleteStyle.js
View File

@ -245,7 +245,7 @@ const classes = {
'p-focus': instance.focusedMultipleOptionIndex === i 'p-focus': instance.focusedMultipleOptionIndex === i
} }
], ],
chipLabel: 'p-autocomplete-chip-label', pcChipLabel: 'p-autocomplete-chip-label',
chipIcon: 'p-autocomplete-chip-icon', chipIcon: 'p-autocomplete-chip-icon',
inputChip: 'p-autocomplete-input-chip', inputChip: 'p-autocomplete-input-chip',
loader: 'p-autocomplete-loader', loader: 'p-autocomplete-loader',

4
components/lib/button/Button.d.ts vendored
View File

@ -62,9 +62,9 @@ export interface ButtonPassThroughOptions<T = any> {
*/ */
label?: ButtonPassThroughOptionType<T>; label?: ButtonPassThroughOptionType<T>;
/** /**
* Used to pass attributes to the badge's DOM element. * Used to pass attributes to the Badge component.
*/ */
badge?: ButtonPassThroughOptionType<T>; pcBadge?: ButtonPassThroughOptionType<T>;
/** /**
* Used to manage all lifecycle hooks. * Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks} * @see {@link BaseComponent.ComponentHooks}

2
components/lib/button/Button.vue
View File

@ -9,7 +9,7 @@
<span v-if="icon" :class="[cx('icon'), icon, iconClass]" v-bind="ptm('icon')"></span> <span v-if="icon" :class="[cx('icon'), icon, iconClass]" v-bind="ptm('icon')"></span>
</slot> </slot>
<span v-if="label" :class="cx('label')" v-bind="ptm('label')">{{ label }}</span> <span v-if="label" :class="cx('label')" v-bind="ptm('label')">{{ label }}</span>
<Badge v-if="badge" :value="badge" :class="badgeClass" :severity="badgeSeverity" :unstyled="unstyled" v-bind="ptm('badge')"></Badge> <Badge v-if="badge" :value="badge" :class="badgeClass" :severity="badgeSeverity" :unstyled="unstyled" v-bind="ptm('pcBadge')"></Badge>
</slot> </slot>
</button> </button>
</template> </template>

4
components/lib/carousel/Carousel.d.ts vendored
View File

@ -88,7 +88,7 @@ export interface CarouselPassThroughOptions {
* Used to pass attributes to the previous button's DOM element. * Used to pass attributes to the previous button's DOM element.
* @see {@link ButtonPassThroughOptions} * @see {@link ButtonPassThroughOptions}
*/ */
previousButton?: ButtonPassThroughOptions<CarouselSharedPassThroughMethodOptions>; pcPreviousButton?: ButtonPassThroughOptions<CarouselSharedPassThroughMethodOptions>;
/** /**
* Used to pass attributes to the viewport's DOM element. * Used to pass attributes to the viewport's DOM element.
*/ */
@ -109,7 +109,7 @@ export interface CarouselPassThroughOptions {
* 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}
*/ */
nextButton?: ButtonPassThroughOptions<CarouselSharedPassThroughMethodOptions>; pcNextButton?: ButtonPassThroughOptions<CarouselSharedPassThroughMethodOptions>;
/** /**
* Used to pass attributes to the indicator list's DOM element. * Used to pass attributes to the indicator list's DOM element.
*/ */

12
components/lib/carousel/Carousel.vue
View File

@ -7,18 +7,18 @@
<div :class="[cx('content'), contentClass]" :aria-live="allowAutoplay ? 'polite' : 'off'" v-bind="ptm('content')"> <div :class="[cx('content'), contentClass]" :aria-live="allowAutoplay ? 'polite' : 'off'" v-bind="ptm('content')">
<Button <Button
v-if="showNavigators" v-if="showNavigators"
:class="cx('previousButton')" :class="cx('pcPreviousButton')"
:disabled="backwardIsDisabled" :disabled="backwardIsDisabled"
:aria-label="ariaPrevButtonLabel" :aria-label="ariaPrevButtonLabel"
:unstyled="unstyled" :unstyled="unstyled"
@click="navBackward" @click="navBackward"
v-bind="prevButtonProps" v-bind="prevButtonProps"
:pt="ptm('previousButton')" :pt="ptm('pcPreviousButton')"
data-pc-group-section="navigator" data-pc-group-section="navigator"
> >
<template #icon="slotProps"> <template #icon="slotProps">
<slot name="previousicon"> <slot name="previousicon">
<component :is="isVertical() ? 'ChevronUpIcon' : 'ChevronLeftIcon'" :class="[cx('previousButtonIcon'), slotProps.icon]" v-bind="ptm('previousButton')['icon']" /> <component :is="isVertical() ? 'ChevronUpIcon' : 'ChevronLeftIcon'" :class="[cx('previousButtonIcon'), slotProps.icon]" v-bind="ptm('pcPreviousButton')['icon']" />
</slot> </slot>
</template> </template>
</Button> </Button>
@ -61,18 +61,18 @@
</div> </div>
<Button <Button
v-if="showNavigators" v-if="showNavigators"
:class="cx('nextButton')" :class="cx('pcNextButton')"
:disabled="forwardIsDisabled" :disabled="forwardIsDisabled"
:aria-label="ariaNextButtonLabel" :aria-label="ariaNextButtonLabel"
:unstyled="unstyled" :unstyled="unstyled"
@click="navForward" @click="navForward"
v-bind="nextButtonProps" v-bind="nextButtonProps"
:pt="ptm('nextButton')" :pt="ptm('pcNextButton')"
data-pc-group-section="navigator" data-pc-group-section="navigator"
> >
<template #icon="slotProps"> <template #icon="slotProps">
<slot name="nexticon"> <slot name="nexticon">
<component :is="isVertical() ? 'ChevronDownIcon' : 'ChevronRightIcon'" :class="[cx('nextButtonIcon'), slotProps.class]" v-bind="ptm('nextButton')['icon']" /> <component :is="isVertical() ? 'ChevronDownIcon' : 'ChevronRightIcon'" :class="[cx('nextButtonIcon'), slotProps.class]" v-bind="ptm('pcNextButton')['icon']" />
</slot> </slot>
</template> </template>
</Button> </Button>

4
components/lib/carousel/style/CarouselStyle.js
View File

@ -102,7 +102,7 @@ const classes = {
header: 'p-carousel-header', header: 'p-carousel-header',
contentContainer: 'p-carousel-content-container', contentContainer: 'p-carousel-content-container',
content: 'p-carousel-content', content: 'p-carousel-content',
previousButton: ({ instance }) => [ pcPreviousButton: ({ instance }) => [
'p-carousel-prev-button', 'p-carousel-prev-button',
{ {
'p-disabled': instance.backwardIsDisabled 'p-disabled': instance.backwardIsDisabled
@ -126,7 +126,7 @@ const classes = {
'p-carousel-item-end': instance.lastIndex() === index 'p-carousel-item-end': instance.lastIndex() === index
} }
], ],
nextButton: ({ instance }) => [ pcNextButton: ({ instance }) => [
'p-carousel-next-button', 'p-carousel-next-button',
{ {
'p-disabled': instance.forwardIsDisabled 'p-disabled': instance.forwardIsDisabled

28
components/lib/column/Column.d.ts vendored
View File

@ -161,7 +161,7 @@ export interface ColumnPassThroughOptions {
/** /**
* Used to pass attributes to the header checkbox's DOM element. * Used to pass attributes to the header checkbox's DOM element.
*/ */
headerCheckbox?: CheckboxPassThroughOptionType; pcHeaderCheckbox?: CheckboxPassThroughOptionType;
/** /**
* Used to pass attributes to the column filter's DOM element. * Used to pass attributes to the column filter's DOM element.
*/ */
@ -173,7 +173,7 @@ export interface ColumnPassThroughOptions {
/** /**
* Used to pass attributes to the column filter button's DOM element. * Used to pass attributes to the column filter button's DOM element.
*/ */
columnFilterButton?: ColumnPassThroughOptionType; pcColumnFilterButton?: ColumnPassThroughOptionType;
/** /**
* Used to pass attributes to the filter menu icon's DOM element. * Used to pass attributes to the filter menu icon's DOM element.
*/ */
@ -181,7 +181,7 @@ export interface ColumnPassThroughOptions {
/** /**
* Used to pass attributes to the column filter clear button's DOM element. * Used to pass attributes to the column filter clear button's DOM element.
*/ */
columnFilterClearButton?: ColumnPassThroughOptionType; pcColumnFilterClearButton?: ColumnPassThroughOptionType;
/** /**
* Used to pass attributes to the filter clear icon's DOM element. * Used to pass attributes to the filter clear icon's DOM element.
*/ */
@ -210,7 +210,7 @@ export interface ColumnPassThroughOptions {
* Used to pass attributes to the Select component. * Used to pass attributes to the Select component.
* @see {@link SelectPassThroughOptionType} * @see {@link SelectPassThroughOptionType}
*/ */
filterOperatorDropdown?: SelectPassThroughOptionType<ColumnSharedPassThroughMethodOptions>; pcFilterOperatorDropdown?: SelectPassThroughOptionType<ColumnSharedPassThroughMethodOptions>;
/** /**
* Used to pass attributes to the filter rule list' DOM element. * Used to pass attributes to the filter rule list' DOM element.
*/ */
@ -223,7 +223,7 @@ export interface ColumnPassThroughOptions {
* Used to pass attributes to the Select component. * Used to pass attributes to the Select component.
* @see {@link SelectPassThroughOptionType} * @see {@link SelectPassThroughOptionType}
*/ */
filterConstraintDropdown?: SelectPassThroughOptionType<ColumnSharedPassThroughMethodOptions>; pcFilterConstraintDropdown?: SelectPassThroughOptionType<ColumnSharedPassThroughMethodOptions>;
/** /**
* Used to pass attributes to the filter remove button container's DOM element. * Used to pass attributes to the filter remove button container's DOM element.
*/ */
@ -232,7 +232,7 @@ export interface ColumnPassThroughOptions {
* Used to pass attributes to the Button component. * Used to pass attributes to the Button component.
* @see {@link ButtonPassThroughOptions} * @see {@link ButtonPassThroughOptions}
*/ */
filterRemoveRuleButton?: ButtonPassThroughOptions<ColumnSharedPassThroughMethodOptions>; pcFilterRemoveRuleButton?: ButtonPassThroughOptions<ColumnSharedPassThroughMethodOptions>;
/** /**
* Used to pass attributes to the filter add button container's DOM element. * Used to pass attributes to the filter add button container's DOM element.
*/ */
@ -241,7 +241,7 @@ export interface ColumnPassThroughOptions {
* Used to pass attributes to the Button component. * Used to pass attributes to the Button component.
* @see {@link ButtonPassThroughOptions} * @see {@link ButtonPassThroughOptions}
*/ */
filterAddButton?: ButtonPassThroughOptions<ColumnSharedPassThroughMethodOptions>; pcFilterAddButton?: ButtonPassThroughOptions<ColumnSharedPassThroughMethodOptions>;
/** /**
* Used to pass attributes to the filter buttonbar's DOM element. * Used to pass attributes to the filter buttonbar's DOM element.
*/ */
@ -250,12 +250,12 @@ export interface ColumnPassThroughOptions {
* Used to pass attributes to the Button component. * Used to pass attributes to the Button component.
* @see {@link ButtonPassThroughOptions} * @see {@link ButtonPassThroughOptions}
*/ */
filterClearButton?: ButtonPassThroughOptions<ColumnSharedPassThroughMethodOptions>; pcFilterClearButton?: ButtonPassThroughOptions<ColumnSharedPassThroughMethodOptions>;
/** /**
* Used to pass attributes to the Button component. * Used to pass attributes to the Button component.
* @see {@link ButtonPassThroughOptions} * @see {@link ButtonPassThroughOptions}
*/ */
filterApplyButton?: ButtonPassThroughOptions<ColumnSharedPassThroughMethodOptions>; pcFilterApplyButton?: ButtonPassThroughOptions<ColumnSharedPassThroughMethodOptions>;
/** /**
* Used to pass attributes to the row toggler button's DOM element. * Used to pass attributes to the row toggler button's DOM element.
*/ */
@ -275,23 +275,23 @@ export interface ColumnPassThroughOptions {
/** /**
* Used to pass attributes to the radiobutton's DOM element. * Used to pass attributes to the radiobutton's DOM element.
*/ */
rowRadioButton?: RadioButtonPassThroughOptionType; pcRowRadiobutton?: RadioButtonPassThroughOptionType;
/** /**
* Used to pass attributes to the checkbox's DOM element. * Used to pass attributes to the checkbox's DOM element.
*/ */
rowCheckbox?: CheckboxPassThroughOptionType; pcRowCheckbox?: CheckboxPassThroughOptionType;
/** /**
* Used to pass attributes to the row editor init button's DOM element. * Used to pass attributes to the row editor init button's DOM element.
*/ */
rowEditorInit?: ColumnPassThroughOptionType; pcRowEditorInit?: ColumnPassThroughOptionType;
/** /**
* Used to pass attributes to the row editor save button's DOM element. * Used to pass attributes to the row editor save button's DOM element.
*/ */
rowEditorSave?: ColumnPassThroughOptionType; pcRowEditorSave?: ColumnPassThroughOptionType;
/** /**
* Used to pass attributes to the row editor cancel button's DOM element. * Used to pass attributes to the row editor cancel button's DOM element.
*/ */
rowEditorCancel?: ColumnPassThroughOptionType; pcRowEditorCancel?: ColumnPassThroughOptionType;
/** /**
* Used to pass attributes to the footer cell's DOM element. * Used to pass attributes to the footer cell's DOM element.
*/ */

4
components/lib/confirmdialog/ConfirmDialog.d.ts vendored
View File

@ -109,12 +109,12 @@ export interface ConfirmDialogPassThroughOptions {
* Used to pass attributes to the Button component. * Used to pass attributes to the Button component.
* @see {@link ButtonPassThroughOptions} * @see {@link ButtonPassThroughOptions}
*/ */
rejectButton?: ButtonPassThroughOptions<ConfirmDialogSharedPassThroughMethodOptions>; pcRejectButton?: ButtonPassThroughOptions<ConfirmDialogSharedPassThroughMethodOptions>;
/** /**
* Used to pass attributes to the Button component. * Used to pass attributes to the Button component.
* @see {@link ButtonPassThroughOptions} * @see {@link ButtonPassThroughOptions}
*/ */
acceptButton?: ButtonPassThroughOptions<ConfirmDialogSharedPassThroughMethodOptions>; pcAcceptButton?: ButtonPassThroughOptions<ConfirmDialogSharedPassThroughMethodOptions>;
/** /**
* Used to manage all lifecycle hooks. * Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks} * @see {@link BaseComponent.ComponentHooks}

10
components/lib/confirmdialog/ConfirmDialog.vue
View File

@ -29,25 +29,25 @@
</template> </template>
<template v-if="!$slots.container" #footer> <template v-if="!$slots.container" #footer>
<Button <Button
:class="[cx('rejectButton'), confirmation.rejectClass]" :class="[cx('pcRejectButton'), confirmation.rejectClass]"
:autofocus="autoFocusReject" :autofocus="autoFocusReject"
:unstyled="unstyled" :unstyled="unstyled"
:text="confirmation.rejectProps?.text || false" :text="confirmation.rejectProps?.text || false"
@click="reject()" @click="reject()"
v-bind="confirmation.rejectProps" v-bind="confirmation.rejectProps"
:label="rejectLabel" :label="rejectLabel"
:pt="ptm('rejectButton')" :pt="ptm('pcRejectButton')"
> >
<template v-if="rejectIcon || $slots.rejecticon" #icon="iconProps"> <template v-if="rejectIcon || $slots.rejecticon" #icon="iconProps">
<slot name="rejecticon"> <slot name="rejecticon">
<span :class="[rejectIcon, iconProps.class]" v-bind="ptm('rejectButton')['icon']" data-pc-section="rejectbuttonicon" /> <span :class="[rejectIcon, iconProps.class]" v-bind="ptm('pcRejectButton')['icon']" data-pc-section="rejectbuttonicon" />
</slot> </slot>
</template> </template>
</Button> </Button>
<Button :label="acceptLabel" :class="[cx('acceptButton'), confirmation.acceptClass]" :autofocus="autoFocusAccept" :unstyled="unstyled" @click="accept()" v-bind="confirmation.acceptProps" :pt="ptm('acceptButton')"> <Button :label="acceptLabel" :class="[cx('pcAcceptButton'), confirmation.acceptClass]" :autofocus="autoFocusAccept" :unstyled="unstyled" @click="accept()" v-bind="confirmation.acceptProps" :pt="ptm('pcAcceptButton')">
<template v-if="acceptIcon || $slots.accepticon" #icon="iconProps"> <template v-if="acceptIcon || $slots.accepticon" #icon="iconProps">
<slot name="accepticon"> <slot name="accepticon">
<span :class="[acceptIcon, iconProps.class]" v-bind="ptm('acceptButton')['icon']" data-pc-section="acceptbuttonicon" /> <span :class="[acceptIcon, iconProps.class]" v-bind="ptm('pcAcceptButton')['icon']" data-pc-section="acceptbuttonicon" />
</slot> </slot>
</template> </template>
</Button> </Button>

4
components/lib/confirmdialog/style/ConfirmDialogStyle.js
View File

@ -16,8 +16,8 @@ const classes = {
root: 'p-confirmdialog', root: 'p-confirmdialog',
icon: 'p-confirmdialog-icon', icon: 'p-confirmdialog-icon',
message: 'p-confirmdialog-message', message: 'p-confirmdialog-message',
rejectButton: 'p-confirmdialog-reject-button', pcRejectButton: 'p-confirmdialog-reject-button',
acceptButton: 'p-confirmdialog-accept-button' pcAcceptButton: 'p-confirmdialog-accept-button'
}; };
export default BaseStyle.extend({ export default BaseStyle.extend({

4
components/lib/confirmpopup/ConfirmPopup.d.ts vendored
View File

@ -91,12 +91,12 @@ export interface ConfirmPopupPassThroughOptions {
* Used to pass attributes to the Button component. * Used to pass attributes to the Button component.
* @see {@link ButtonPassThroughOptions} * @see {@link ButtonPassThroughOptions}
*/ */
rejectButton?: ButtonPassThroughOptions<ConfirmPopupSharedPassThroughMethodOptions>; pcRejectButton?: ButtonPassThroughOptions<ConfirmPopupSharedPassThroughMethodOptions>;
/** /**
* Used to pass attributes to the Button component. * Used to pass attributes to the Button component.
* @see {@link ButtonPassThroughOptions} * @see {@link ButtonPassThroughOptions}
*/ */
acceptButton?: ButtonPassThroughOptions<ConfirmPopupSharedPassThroughMethodOptions>; pcAcceptButton?: ButtonPassThroughOptions<ConfirmPopupSharedPassThroughMethodOptions>;
/** /**
* Used to manage all lifecycle hooks. * Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks} * @see {@link BaseComponent.ComponentHooks}

12
components/lib/confirmpopup/ConfirmPopup.vue
View File

@ -16,7 +16,7 @@
<component v-else :is="$slots.message" :message="confirmation"></component> <component v-else :is="$slots.message" :message="confirmation"></component>
<div :class="cx('footer')" v-bind="ptm('footer')"> <div :class="cx('footer')" v-bind="ptm('footer')">
<Button <Button
:class="[cx('rejectButton'), confirmation.rejectClass]" :class="[cx('pcRejectButton'), confirmation.rejectClass]"
:autofocus="autoFocusReject" :autofocus="autoFocusReject"
:unstyled="unstyled" :unstyled="unstyled"
:size="confirmation.rejectProps?.size || 'small'" :size="confirmation.rejectProps?.size || 'small'"
@ -25,16 +25,16 @@
@keydown="onRejectKeydown" @keydown="onRejectKeydown"
v-bind="confirmation.rejectProps" v-bind="confirmation.rejectProps"
:label="rejectLabel" :label="rejectLabel"
:pt="ptm('rejectButton')" :pt="ptm('pcRejectButton')"
> >
<template v-if="rejectIcon || $slots.rejecticon" #icon="iconProps"> <template v-if="rejectIcon || $slots.rejecticon" #icon="iconProps">
<slot name="rejecticon"> <slot name="rejecticon">
<span :class="[rejectIcon, iconProps.class]" v-bind="ptm('rejectButton')['icon']" data-pc-section="rejectbuttonicon" /> <span :class="[rejectIcon, iconProps.class]" v-bind="ptm('pcRejectButton')['icon']" data-pc-section="rejectbuttonicon" />
</slot> </slot>
</template> </template>
</Button> </Button>
<Button <Button
:class="[cx('acceptButton'), confirmation.acceptClass]" :class="[cx('pcAcceptButton'), confirmation.acceptClass]"
:autofocus="autoFocusAccept" :autofocus="autoFocusAccept"
:unstyled="unstyled" :unstyled="unstyled"
:size="confirmation.acceptProps?.size || 'small'" :size="confirmation.acceptProps?.size || 'small'"
@ -42,11 +42,11 @@
@keydown="onAcceptKeydown" @keydown="onAcceptKeydown"
v-bind="confirmation.acceptProps" v-bind="confirmation.acceptProps"
:label="acceptLabel" :label="acceptLabel"
:pt="ptm('acceptButton')" :pt="ptm('pcAcceptButton')"
> >
<template v-if="acceptIcon || $slots.accepticon" #icon="iconProps"> <template v-if="acceptIcon || $slots.accepticon" #icon="iconProps">
<slot name="accepticon"> <slot name="accepticon">
<span :class="[acceptIcon, iconProps.class]" v-bind="ptm('acceptButton')['icon']" data-pc-section="acceptbuttonicon" /> <span :class="[acceptIcon, iconProps.class]" v-bind="ptm('pcAcceptButton')['icon']" data-pc-section="acceptbuttonicon" />
</slot> </slot>
</template> </template>
</Button> </Button>

4
components/lib/confirmpopup/style/ConfirmPopupStyle.js
View File

@ -121,8 +121,8 @@ const classes = {
icon: 'p-confirmpopup-icon', icon: 'p-confirmpopup-icon',
message: 'p-confirmpopup-message', message: 'p-confirmpopup-message',
footer: 'p-confirmpopup-footer', footer: 'p-confirmpopup-footer',
rejectButton: 'p-confirmpopup-reject-button', pcRejectButton: 'p-confirmpopup-reject-button',
acceptButton: 'p-confirmpopup-accept-button' pcAcceptButton: 'p-confirmpopup-accept-button'
}; };
export default BaseStyle.extend({ export default BaseStyle.extend({

18
components/lib/datatable/BodyCell.vue
View File

@ -85,41 +85,41 @@
<template v-else-if="editMode === 'row' && columnProp('rowEditor')"> <template v-else-if="editMode === 'row' && columnProp('rowEditor')">
<Button <Button
v-if="!d_editing" v-if="!d_editing"
:class="cx('rowEditorInit')" :class="cx('pcRowEditorInit')"
:aria-label="initButtonAriaLabel" :aria-label="initButtonAriaLabel"
:unstyled="unstyled" :unstyled="unstyled"
@click="onRowEditInit" @click="onRowEditInit"
v-bind="{ ...getColumnPT('rowEditorInit'), ...editButtonProps.init }" v-bind="{ ...getColumnPT('pcRowEditorInit'), ...editButtonProps.init }"
data-pc-group-section="rowactionbutton" data-pc-group-section="rowactionbutton"
> >
<template #icon="slotProps"> <template #icon="slotProps">
<component :is="(column.children && column.children.roweditoriniticon) || 'PencilIcon'" :class="slotProps.class" v-bind="getColumnPT('rowEditorInit')['icon']" /> <component :is="(column.children && column.children.roweditoriniticon) || 'PencilIcon'" :class="slotProps.class" v-bind="getColumnPT('pcRowEditorInit')['icon']" />
</template> </template>
</Button> </Button>
<Button <Button
v-if="d_editing" v-if="d_editing"
:class="cx('rowEditorSave')" :class="cx('pcRowEditorSave')"
:aria-label="saveButtonAriaLabel" :aria-label="saveButtonAriaLabel"
:unstyled="unstyled" :unstyled="unstyled"
@click="onRowEditSave" @click="onRowEditSave"
v-bind="{ ...getColumnPT('rowEditorSave'), ...editButtonProps.save }" v-bind="{ ...getColumnPT('pcRowEditorSave'), ...editButtonProps.save }"
data-pc-group-section="rowactionbutton" data-pc-group-section="rowactionbutton"
> >
<template #icon="slotProps"> <template #icon="slotProps">
<component :is="(column.children && column.children.roweditorsaveicon) || 'CheckIcon'" :class="slotProps.class" v-bind="getColumnPT('rowEditorSave')['icon']" /> <component :is="(column.children && column.children.roweditorsaveicon) || 'CheckIcon'" :class="slotProps.class" v-bind="getColumnPT('pcRowEditorSave')['icon']" />
</template> </template>
</Button> </Button>
<Button <Button
v-if="d_editing" v-if="d_editing"
:class="cx('rowEditorCancel')" :class="cx('pcRowEditorCancel')"
:aria-label="cancelButtonAriaLabel" :aria-label="cancelButtonAriaLabel"
:unstyled="unstyled" :unstyled="unstyled"
@click="onRowEditCancel" @click="onRowEditCancel"
v-bind="{ ...getColumnPT('rowEditorCancel'), ...editButtonProps.cancel }" v-bind="{ ...getColumnPT('pcRowEditorCancel'), ...editButtonProps.cancel }"
data-pc-group-section="rowactionbutton" data-pc-group-section="rowactionbutton"
> >
<template #icon="slotProps"> <template #icon="slotProps">
<component :is="(column.children && column.children.roweditorcancelicon) || 'TimesIcon'" :class="slotProps.class" v-bind="getColumnPT('rowEditorCancel')['icon']" /> <component :is="(column.children && column.children.roweditorcancelicon) || 'TimesIcon'" :class="slotProps.class" v-bind="getColumnPT('pcRowEditorCancel')['icon']" />
</template> </template>
</Button> </Button>
</template> </template>

43
components/lib/datatable/ColumnFilter.vue
View File

@ -10,11 +10,11 @@
aria-haspopup="true" aria-haspopup="true"
:aria-expanded="overlayVisible" :aria-expanded="overlayVisible"
:aria-controls="overlayId" :aria-controls="overlayId"
:class="cx('columnFilterButton')" :class="cx('pcColumnFilterButton')"
:unstyled="unstyled" :unstyled="unstyled"
@click="toggleMenu($event)" @click="toggleMenu($event)"
@keydown="onToggleButtonKeyDown($event)" @keydown="onToggleButtonKeyDown($event)"
v-bind="{ ...getColumnPT('columnFilterButton', ptmFilterMenuParams), ...filterButtonProps.filter }" v-bind="{ ...getColumnPT('pcColumnFilterButton', ptmFilterMenuParams), ...filterButtonProps.filter }"
> >
<template #icon="slotProps"> <template #icon="slotProps">
<component :is="filterIconTemplate || 'FilterIcon'" :class="slotProps.class" v-bind="getColumnPT('filterMenuIcon')" /> <component :is="filterIconTemplate || 'FilterIcon'" :class="slotProps.class" v-bind="getColumnPT('filterMenuIcon')" />
@ -22,10 +22,10 @@
</Button> </Button>
<Button <Button
v-if="showClearButton && display === 'row' && hasRowFilter()" v-if="showClearButton && display === 'row' && hasRowFilter()"
:class="cx('columnFilterClearButton')" :class="cx('pcColumnFilterClearButton')"
:unstyled="unstyled" :unstyled="unstyled"
@click="clearFilter()" @click="clearFilter()"
v-bind="{ ...getColumnPT('columnFilterClearButton', ptmHeaderFilterClearParams), ...filterButtonProps.inline.clear }" v-bind="{ ...getColumnPT('pcColumnFilterClearButton', ptmHeaderFilterClearParams), ...filterButtonProps.inline.clear }"
> >
<template #icon="slotProps"> <template #icon="slotProps">
<component :is="filterClearIconTemplate || 'FilterSlashIcon'" :class="slotProps.class" v-bind="getColumnPT('filterClearIcon')" /> <component :is="filterClearIconTemplate || 'FilterSlashIcon'" :class="slotProps.class" v-bind="getColumnPT('filterClearIcon')" />
@ -73,12 +73,12 @@
:options="operatorOptions" :options="operatorOptions"
:modelValue="operator" :modelValue="operator"
:aria-label="filterOperatorAriaLabel" :aria-label="filterOperatorAriaLabel"
:class="cx('filterOperatorDropdown')" :class="cx('pcFilterOperatorDropdown')"
optionLabel="label" optionLabel="label"
optionValue="value" optionValue="value"
@update:modelValue="onOperatorChange($event)" @update:modelValue="onOperatorChange($event)"
:unstyled="unstyled" :unstyled="unstyled"
:pt="getColumnPT('filterOperatorDropdown')" :pt="getColumnPT('pcFilterOperatorDropdown')"
></Select> ></Select>
</div> </div>
<div :class="cx('filterRuleList')" v-bind="getColumnPT('filterRuleList')"> <div :class="cx('filterRuleList')" v-bind="getColumnPT('filterRuleList')">
@ -87,37 +87,46 @@
v-if="isShowMatchModes" v-if="isShowMatchModes"
:options="matchModes" :options="matchModes"
:modelValue="fieldConstraint.matchMode" :modelValue="fieldConstraint.matchMode"
:class="cx('filterConstraintDropdown')" :class="cx('pcFilterConstraintDropdown')"
optionLabel="label" optionLabel="label"
optionValue="value" optionValue="value"
:aria-label="filterRuleAriaLabel" :aria-label="filterRuleAriaLabel"
@update:modelValue="onMenuMatchModeChange($event, i)" @update:modelValue="onMenuMatchModeChange($event, i)"
:unstyled="unstyled" :unstyled="unstyled"
:pt="getColumnPT('filterConstraintDropdown')" :pt="getColumnPT('pcFilterConstraintDropdown')"
></Select> ></Select>
<component v-if="display === 'menu'" :is="filterElement" :field="field" :filterModel="fieldConstraint" :filterCallback="filterCallback" :applyFilter="applyFilter" /> <component v-if="display === 'menu'" :is="filterElement" :field="field" :filterModel="fieldConstraint" :filterCallback="filterCallback" :applyFilter="applyFilter" />
<div v-bind="getColumnPT('filterRemove')"> <div v-bind="getColumnPT('filterRemove')">
<Button <Button
v-if="showRemoveIcon" v-if="showRemoveIcon"
type="button" type="button"
:class="cx('filterRemoveRuleButton')" :class="cx('pcFilterRemoveRuleButton')"
@click="removeConstraint(i)" @click="removeConstraint(i)"
:label="removeRuleButtonLabel" :label="removeRuleButtonLabel"
:unstyled="unstyled" :unstyled="unstyled"
v-bind="filterButtonProps.popover.removeRule" v-bind="filterButtonProps.popover.removeRule"
:pt="getColumnPT('filterRemoveRuleButton')" :pt="getColumnPT('pcFilterRemoveRuleButton')"
> >
<template #icon="iconProps"> <template #icon="iconProps">
<component :is="filterRemoveIconTemplate || 'TrashIcon'" :class="iconProps.class" v-bind="getColumnPT('filterRemoveRuleButton')['icon']" /> <component :is="filterRemoveIconTemplate || 'TrashIcon'" :class="iconProps.class" v-bind="getColumnPT('pcFilterRemoveRuleButton')['icon']" />
</template> </template>
</Button> </Button>
</div> </div>
</div> </div>
</div> </div>
<div v-if="isShowAddConstraint" v-bind="getColumnPT('filterAddButtonContainer')"> <div v-if="isShowAddConstraint" v-bind="getColumnPT('filterAddButtonContainer')">
<Button type="button" :label="addRuleButtonLabel" iconPos="left" :class="cx('filterAddButton')" @click="addConstraint()" :unstyled="unstyled" v-bind="filterButtonProps.popover.addRule" :pt="getColumnPT('filterAddButton')"> <Button
type="button"
:label="addRuleButtonLabel"
iconPos="left"
:class="cx('pcFilterAddButton')"
@click="addConstraint()"
:unstyled="unstyled"
v-bind="filterButtonProps.popover.addRule"
:pt="getColumnPT('pcFilterAddButton')"
>
<template #icon="iconProps"> <template #icon="iconProps">
<component :is="filterAddIconTemplate || 'PlusIcon'" :class="iconProps.class" v-bind="getColumnPT('filterAddButton')['icon']" /> <component :is="filterAddIconTemplate || 'PlusIcon'" :class="iconProps.class" v-bind="getColumnPT('pcFilterAddButton')['icon']" />
</template> </template>
</Button> </Button>
</div> </div>
@ -125,24 +134,24 @@
<Button <Button
v-if="!filterClearTemplate && showClearButton" v-if="!filterClearTemplate && showClearButton"
type="button" type="button"
:class="cx('filterClearButton')" :class="cx('pcFilterClearButton')"
:label="clearButtonLabel" :label="clearButtonLabel"
@click="clearFilter" @click="clearFilter"
:unstyled="unstyled" :unstyled="unstyled"
v-bind="filterButtonProps.popover.clear" v-bind="filterButtonProps.popover.clear"
:pt="getColumnPT('filterClearButton')" :pt="getColumnPT('pcFilterClearButton')"
></Button> ></Button>
<component v-else :is="filterClearTemplate" :field="field" :filterModel="filters[field]" :filterCallback="clearFilter" /> <component v-else :is="filterClearTemplate" :field="field" :filterModel="filters[field]" :filterCallback="clearFilter" />
<template v-if="showApplyButton"> <template v-if="showApplyButton">
<Button <Button
v-if="!filterApplyTemplate" v-if="!filterApplyTemplate"
type="button" type="button"
:class="cx('filterApplyButton')" :class="cx('pcFilterApplyButton')"
:label="applyButtonLabel" :label="applyButtonLabel"
@click="applyFilter()" @click="applyFilter()"
:unstyled="unstyled" :unstyled="unstyled"
v-bind="filterButtonProps.popover.apply" v-bind="filterButtonProps.popover.apply"
:pt="getColumnPT('filterApplyButton')" :pt="getColumnPT('pcFilterApplyButton')"
></Button> ></Button>
<component v-else :is="filterApplyTemplate" :field="field" :filterModel="filters[field]" :filterCallback="applyFilter" /> <component v-else :is="filterApplyTemplate" :field="field" :filterModel="filters[field]" :filterCallback="applyFilter" />
</template> </template>

8
components/lib/datatable/DataTable.vue
View File

@ -21,11 +21,11 @@
:template="paginatorTemplate" :template="paginatorTemplate"
:rowsPerPageOptions="rowsPerPageOptions" :rowsPerPageOptions="rowsPerPageOptions"
:currentPageReportTemplate="currentPageReportTemplate" :currentPageReportTemplate="currentPageReportTemplate"
:class="cx('paginator', { position: 'top' })" :class="cx('pcPaginator', { position: 'top' })"
@page="onPage($event)" @page="onPage($event)"
:alwaysShow="alwaysShowPaginator" :alwaysShow="alwaysShowPaginator"
:unstyled="unstyled" :unstyled="unstyled"
:pt="ptm('paginator')" :pt="ptm('pcPaginator')"
> >
<template v-if="$slots.paginatorstart" #start> <template v-if="$slots.paginatorstart" #start>
<slot name="paginatorstart"></slot> <slot name="paginatorstart"></slot>
@ -240,11 +240,11 @@
:template="paginatorTemplate" :template="paginatorTemplate"
:rowsPerPageOptions="rowsPerPageOptions" :rowsPerPageOptions="rowsPerPageOptions"
:currentPageReportTemplate="currentPageReportTemplate" :currentPageReportTemplate="currentPageReportTemplate"
:class="cx('paginator', { position: 'bottom' })" :class="cx('pcPaginator', { position: 'bottom' })"
@page="onPage($event)" @page="onPage($event)"
:alwaysShow="alwaysShowPaginator" :alwaysShow="alwaysShowPaginator"
:unstyled="unstyled" :unstyled="unstyled"
:pt="ptm('paginator')" :pt="ptm('pcPaginator')"
> >
<template v-if="$slots.paginatorstart" #start> <template v-if="$slots.paginatorstart" #start>
<slot name="paginatorstart"></slot> <slot name="paginatorstart"></slot>

4
components/lib/datatable/HeaderCheckbox.vue
View File

@ -1,8 +1,8 @@
<template> <template>
<Checkbox :modelValue="checked" :binary="true" :disabled="disabled" :aria-label="headerCheckboxAriaLabel" @change="onChange" :pt="getColumnPT('headerCheckbox')"> <Checkbox :modelValue="checked" :binary="true" :disabled="disabled" :aria-label="headerCheckboxAriaLabel" @change="onChange" :pt="getColumnPT('pcHeaderCheckbox')">
<template #icon="slotProps"> <template #icon="slotProps">
<component v-if="headerCheckboxIconTemplate" :is="headerCheckboxIconTemplate" :checked="slotProps.checked" :class="slotProps.class" /> <component v-if="headerCheckboxIconTemplate" :is="headerCheckboxIconTemplate" :checked="slotProps.checked" :class="slotProps.class" />
<CheckIcon v-else-if="!headerCheckboxIconTemplate && slotProps.checked" :class="slotProps.class" v-bind="getColumnPT('headerCheckbox.icon')" /> <CheckIcon v-else-if="!headerCheckboxIconTemplate && slotProps.checked" :class="slotProps.class" v-bind="getColumnPT('pcHeaderCheckbox.icon')" />
</template> </template>
</Checkbox> </Checkbox>
</template> </template>

4
components/lib/datatable/RowCheckbox.vue
View File

@ -1,8 +1,8 @@
<template> <template>
<Checkbox :modelValue="checked" :binary="true" :disabled="$attrs.disabled" :aria-label="checkboxAriaLabel" @change="onChange" :unstyled="unstyled" :pt="getColumnPT('rowCheckbox')"> <Checkbox :modelValue="checked" :binary="true" :disabled="$attrs.disabled" :aria-label="checkboxAriaLabel" @change="onChange" :unstyled="unstyled" :pt="getColumnPT('pcRowCheckbox')">
<template #icon="slotProps"> <template #icon="slotProps">
<component v-if="rowCheckboxIconTemplate" :is="rowCheckboxIconTemplate" :checked="slotProps.checked" :class="slotProps.class" /> <component v-if="rowCheckboxIconTemplate" :is="rowCheckboxIconTemplate" :checked="slotProps.checked" :class="slotProps.class" />
<CheckIcon v-else-if="!rowCheckboxIconTemplate && slotProps.checked" :class="slotProps.class" v-bind="getColumnPT('rowCheckbox.icon')" /> <CheckIcon v-else-if="!rowCheckboxIconTemplate && slotProps.checked" :class="slotProps.class" v-bind="getColumnPT('pcRowCheckbox.icon')" />
</template> </template>
</Checkbox> </Checkbox>
</template> </template>

2
components/lib/datatable/RowRadioButton.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<RadioButton :modelValue="checked" :binary="true" :disabled="$attrs.disabled" :name="name" @change="onChange" :unstyled="unstyled" :pt="getColumnPT('rowRadiobutton')" /> <RadioButton :modelValue="checked" :binary="true" :disabled="$attrs.disabled" :name="name" @change="onChange" :unstyled="unstyled" :pt="getColumnPT('pcRowRadiobutton')" />
</template> </template>
<script> <script>

24
components/lib/datatable/style/DataTableStyle.js
View File

@ -598,7 +598,7 @@ const classes = {
overlay: 'p-datatable-mask p-component-overlay', overlay: 'p-datatable-mask p-component-overlay',
loadingIcon: 'p-datatable-loading-icon', loadingIcon: 'p-datatable-loading-icon',
header: 'p-datatable-header', header: 'p-datatable-header',
paginator: ({ position }) => 'p-datatable-paginator-' + position, pcPaginator: ({ position }) => 'p-datatable-paginator-' + position,
tableContainer: 'p-datatable-table-container', tableContainer: 'p-datatable-table-container',
table: ({ props }) => [ table: ({ props }) => [
'p-datatable-table', 'p-datatable-table',
@ -638,8 +638,8 @@ const classes = {
} }
], ],
filterElementContainer: 'p-datatable-filter-element-container', filterElementContainer: 'p-datatable-filter-element-container',
columnFilterButton: 'p-datatable-column-filter-button', pcColumnFilterButton: 'p-datatable-column-filter-button',
columnFilterClearButton: 'p-datatable-column-filter-clear-button', pcColumnFilterClearButton: 'p-datatable-column-filter-clear-button',
filterOverlay: ({ instance, props }) => [ filterOverlay: ({ instance, props }) => [
'p-datatable-filter-overlay p-component', 'p-datatable-filter-overlay p-component',
{ {
@ -656,15 +656,15 @@ const classes = {
], ],
filterConstraintSeparator: 'p-datatable-filter-constraint-separator', filterConstraintSeparator: 'p-datatable-filter-constraint-separator',
filterOperator: 'p-datatable-filter-operator', filterOperator: 'p-datatable-filter-operator',
filterOperatorDropdown: 'p-datatable-filter-operator-dropdown', pcFilterOperatorDropdown: 'p-datatable-filter-operator-dropdown',
filterRuleList: 'p-datatable-filter-rule-list', filterRuleList: 'p-datatable-filter-rule-list',
filterRule: 'p-datatable-filter-rule', filterRule: 'p-datatable-filter-rule',
filterConstraintDropdown: 'p-datatable-filter-constraint-dropdown', pcFilterConstraintDropdown: 'p-datatable-filter-constraint-dropdown',
filterRemoveRuleButton: 'p-datatable-filter-remove-rule-button', pcFilterRemoveRuleButton: 'p-datatable-filter-remove-rule-button',
filterAddButton: 'p-column-filter-add-button', pcFilterAddButton: 'p-column-filter-add-button',
filterButtonbar: 'p-datatable-filter-buttonbar', filterButtonbar: 'p-datatable-filter-buttonbar',
filterClearButton: 'p-datatable-filter-clear-button', pcFilterClearButton: 'p-datatable-filter-clear-button',
filterApplyButton: 'p-datatable-filter-apply-button', pcFilterApplyButton: 'p-datatable-filter-apply-button',
tbody: ({ props }) => (props.frozenRow ? 'p-datatable-tbody p-datatable-frozen-tbody' : 'p-datatable-tbody'), tbody: ({ props }) => (props.frozenRow ? 'p-datatable-tbody p-datatable-frozen-tbody' : 'p-datatable-tbody'),
rowGroupHeader: 'p-datatable-row-group-header', rowGroupHeader: 'p-datatable-row-group-header',
rowToggleButton: 'p-datatable-row-toggle-button', rowToggleButton: 'p-datatable-row-toggle-button',
@ -701,9 +701,9 @@ const classes = {
} }
], ],
reorderableRowHandle: 'p-datatable-reorderable-row-handle', reorderableRowHandle: 'p-datatable-reorderable-row-handle',
rowEditorInit: 'p-datatable-row-editor-init', pcRowEditorInit: 'p-datatable-row-editor-init',
rowEditorSave: 'p-datatable-row-editor-save', pcRowEditorSave: 'p-datatable-row-editor-save',
rowEditorCancel: 'p-datatable-row-editor-cancel', pcRowEditorCancel: 'p-datatable-row-editor-cancel',
tfoot: 'p-datatable-tfoot', tfoot: 'p-datatable-tfoot',
footerCell: ({ instance }) => [ footerCell: ({ instance }) => [
{ {

2
components/lib/dataview/DataView.d.ts vendored
View File

@ -99,7 +99,7 @@ export interface DataViewPassThroughOptions {
* Used to pass attributes to the Paginator component. * Used to pass attributes to the Paginator component.
* @see {@link PaginatorPassThroughOptionType} * @see {@link PaginatorPassThroughOptionType}
*/ */
paginator?: PaginatorPassThroughOptionType<DataViewSharedPassThroughMethodOptions>; pcPaginator?: PaginatorPassThroughOptionType<DataViewSharedPassThroughMethodOptions>;
/** /**
* Used to pass attributes to the content's DOM element. * Used to pass attributes to the content's DOM element.
*/ */

8
components/lib/dataview/DataView.vue
View File

@ -12,11 +12,11 @@
:template="paginatorTemplate" :template="paginatorTemplate"
:rowsPerPageOptions="rowsPerPageOptions" :rowsPerPageOptions="rowsPerPageOptions"
:currentPageReportTemplate="currentPageReportTemplate" :currentPageReportTemplate="currentPageReportTemplate"
:class="cx('paginator', { position: 'top' })" :class="cx('pcPaginator', { position: 'top' })"
:alwaysShow="alwaysShowPaginator" :alwaysShow="alwaysShowPaginator"
@page="onPage($event)" @page="onPage($event)"
:unstyled="unstyled" :unstyled="unstyled"
:pt="ptm('paginator')" :pt="ptm('pcPaginator')"
> >
<template v-if="$slots.paginatorstart" #start> <template v-if="$slots.paginatorstart" #start>
<slot name="paginatorstart"></slot> <slot name="paginatorstart"></slot>
@ -45,11 +45,11 @@
:template="paginatorTemplate" :template="paginatorTemplate"
:rowsPerPageOptions="rowsPerPageOptions" :rowsPerPageOptions="rowsPerPageOptions"
:currentPageReportTemplate="currentPageReportTemplate" :currentPageReportTemplate="currentPageReportTemplate"
:class="cx('paginator', { position: 'bottom' })" :class="cx('pcPaginator', { position: 'bottom' })"
:alwaysShow="alwaysShowPaginator" :alwaysShow="alwaysShowPaginator"
@page="onPage($event)" @page="onPage($event)"
:unstyled="unstyled" :unstyled="unstyled"
:pt="ptm('paginator')" :pt="ptm('pcPaginator')"
> >
<template v-if="$slots.paginatorstart" #start> <template v-if="$slots.paginatorstart" #start>
<slot name="paginatorstart"></slot> <slot name="paginatorstart"></slot>

2
components/lib/dataview/style/DataViewStyle.js
View File

@ -42,7 +42,7 @@ const classes = {
} }
], ],
header: 'p-dataview-header', header: 'p-dataview-header',
paginator: ({ position }) => 'p-dataview-paginator-' + position, pcPaginator: ({ position }) => 'p-dataview-paginator-' + position,
content: 'p-dataview-content', content: 'p-dataview-content',
emptyMessage: 'p-dataview-empty-message', // TODO: remove? emptyMessage: 'p-dataview-empty-message', // TODO: remove?
footer: 'p-dataview-footer' footer: 'p-dataview-footer'

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

@ -138,7 +138,7 @@ export interface DatePickerPassThroughOptions {
* Used to pass attributes to the InputText component. * Used to pass attributes to the InputText component.
* @see {@link InputTextPassThroughOptions} * @see {@link InputTextPassThroughOptions}
*/ */
input?: InputTextPassThroughOptions<DatePickerSharedPassThroughMethodOptions>; pcInput?: InputTextPassThroughOptions<DatePickerSharedPassThroughMethodOptions>;
/** /**
* Used to pass attributes to the dropdown's DOM element. * Used to pass attributes to the dropdown's DOM element.
*/ */
@ -163,7 +163,7 @@ export interface DatePickerPassThroughOptions {
* Used to pass attributes to the previous button's DOM element. * Used to pass attributes to the previous button's DOM element.
* @see {@link ButtonPassThroughOptions} * @see {@link ButtonPassThroughOptions}
*/ */
previousButton?: ButtonPassThroughOptions<DatePickerSharedPassThroughMethodOptions>; pcPreviousButton?: ButtonPassThroughOptions<DatePickerSharedPassThroughMethodOptions>;
/** /**
* Used to pass attributes to the title's DOM element. * Used to pass attributes to the title's DOM element.
*/ */
@ -188,7 +188,7 @@ export interface DatePickerPassThroughOptions {
* 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}
*/ */
nextButton?: ButtonPassThroughOptions<DatePickerSharedPassThroughMethodOptions>; pcNextButton?: ButtonPassThroughOptions<DatePickerSharedPassThroughMethodOptions>;
/** /**
* Used to pass attributes to the container's DOM element. * Used to pass attributes to the container's DOM element.
*/ */
@ -313,16 +313,26 @@ export interface DatePickerPassThroughOptions {
* Used to pass attributes to the buttonbar's DOM element. * Used to pass attributes to the buttonbar's DOM element.
*/ */
buttonbar?: DatePickerPassThroughOptionType; buttonbar?: DatePickerPassThroughOptionType;
/**
* Used to pass attributes to the increment button's DOM element.
* @see {@link ButtonPassThroughOptions}
*/
pcIncrementButton?: ButtonPassThroughOptions<DatePickerSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the decrement button's DOM element.
* @see {@link ButtonPassThroughOptions}
*/
pcDecrementButton?: ButtonPassThroughOptions<DatePickerSharedPassThroughMethodOptions>;
/** /**
* Used to pass attributes to the today button's DOM element. * Used to pass attributes to the today button's DOM element.
* @see {@link ButtonPassThroughOptions} * @see {@link ButtonPassThroughOptions}
*/ */
todayButton?: ButtonPassThroughOptions<DatePickerSharedPassThroughMethodOptions>; pcTodayButton?: ButtonPassThroughOptions<DatePickerSharedPassThroughMethodOptions>;
/** /**
* Used to pass attributes to the clear button's DOM element. * Used to pass attributes to the clear button's DOM element.
* @see {@link ButtonPassThroughOptions} * @see {@link ButtonPassThroughOptions}
*/ */
clearButton?: ButtonPassThroughOptions<DatePickerSharedPassThroughMethodOptions>; pcClearButton?: ButtonPassThroughOptions<DatePickerSharedPassThroughMethodOptions>;
/** /**
* Used to pass attributes to the aria selected day's DOM element. * Used to pass attributes to the aria selected day's DOM element.
*/ */

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

@ -5,7 +5,7 @@
:ref="inputRef" :ref="inputRef"
:id="inputId" :id="inputId"
role="combobox" role="combobox"
:class="[inputClass, cx('input')]" :class="[inputClass, cx('pcInput')]"
:style="inputStyle" :style="inputStyle"
:value="inputFieldValue" :value="inputFieldValue"
:placeholder="placeholder" :placeholder="placeholder"
@ -28,7 +28,7 @@
@focus="onFocus" @focus="onFocus"
@blur="onBlur" @blur="onBlur"
@keydown="onKeyDown" @keydown="onKeyDown"
:pt="ptm('input')" :pt="ptm('pcInput')"
/> />
<slot v-if="showIcon && iconDisplay === 'button'" name="dropdownbutton"> <slot v-if="showIcon && iconDisplay === 'button'" name="dropdownbutton">
<button <button
@ -78,19 +78,19 @@
<Button <Button
v-show="showOtherMonths ? groupIndex === 0 : false" v-show="showOtherMonths ? groupIndex === 0 : false"
:ref="previousButtonRef" :ref="previousButtonRef"
:class="cx('previousButton')" :class="cx('pcPreviousButton')"
:disabled="disabled" :disabled="disabled"
:aria-label="currentView === 'year' ? $primevue.config.locale.prevDecade : currentView === 'month' ? $primevue.config.locale.prevYear : $primevue.config.locale.prevMonth" :aria-label="currentView === 'year' ? $primevue.config.locale.prevDecade : currentView === 'month' ? $primevue.config.locale.prevYear : $primevue.config.locale.prevMonth"
:unstyled="unstyled" :unstyled="unstyled"
@click="onPrevButtonClick" @click="onPrevButtonClick"
@keydown="onContainerButtonKeydown" @keydown="onContainerButtonKeydown"
v-bind="navigatorButtonProps" v-bind="navigatorButtonProps"
:pt="ptm('previousButton')" :pt="ptm('pcPreviousButton')"
data-pc-group-section="navigator" data-pc-group-section="navigator"
> >
<template #icon="slotProps"> <template #icon="slotProps">
<slot name="previousicon"> <slot name="previousicon">
<component :is="previousIcon ? 'span' : 'ChevronLeftIcon'" :class="[previousIcon, slotProps.class]" v-bind="ptm('previousButton')['icon']" /> <component :is="previousIcon ? 'span' : 'ChevronLeftIcon'" :class="[previousIcon, slotProps.class]" v-bind="ptm('pcPreviousButton')['icon']" />
</slot> </slot>
</template> </template>
</Button> </Button>
@ -158,19 +158,19 @@
<Button <Button
v-show="showOtherMonths ? (numberOfMonths === 1 ? true : groupIndex === numberOfMonths - 1) : false" v-show="showOtherMonths ? (numberOfMonths === 1 ? true : groupIndex === numberOfMonths - 1) : false"
:ref="nextButtonRef" :ref="nextButtonRef"
:class="cx('nextButton')" :class="cx('pcNextButton')"
:disabled="disabled" :disabled="disabled"
:aria-label="currentView === 'year' ? $primevue.config.locale.nextDecade : currentView === 'month' ? $primevue.config.locale.nextYear : $primevue.config.locale.nextMonth" :aria-label="currentView === 'year' ? $primevue.config.locale.nextDecade : currentView === 'month' ? $primevue.config.locale.nextYear : $primevue.config.locale.nextMonth"
:unstyled="unstyled" :unstyled="unstyled"
@click="onNextButtonClick" @click="onNextButtonClick"
@keydown="onContainerButtonKeydown" @keydown="onContainerButtonKeydown"
v-bind="navigatorButtonProps" v-bind="navigatorButtonProps"
:pt="ptm('nextButton')" :pt="ptm('pcNextButton')"
data-pc-group-section="navigator" data-pc-group-section="navigator"
> >
<template #icon="slotProps"> <template #icon="slotProps">
<slot name="nexticon"> <slot name="nexticon">
<component :is="nextIcon ? 'span' : 'ChevronRightIcon'" :class="[nextIcon, slotProps.class]" v-bind="ptm('nextButton')['icon']" /> <component :is="nextIcon ? 'span' : 'ChevronRightIcon'" :class="[nextIcon, slotProps.class]" v-bind="ptm('pcNextButton')['icon']" />
</slot> </slot>
</template> </template>
</Button> </Button>
@ -311,7 +311,7 @@
<div v-if="(showTime || timeOnly) && currentView === 'date'" :class="cx('timePicker')" v-bind="ptm('timePicker')"> <div v-if="(showTime || timeOnly) && currentView === 'date'" :class="cx('timePicker')" v-bind="ptm('timePicker')">
<div :class="cx('hourPicker')" v-bind="ptm('hourPicker')" data-pc-group-section="timepickerContainer"> <div :class="cx('hourPicker')" v-bind="ptm('hourPicker')" data-pc-group-section="timepickerContainer">
<Button <Button
:class="cx('incrementButton')" :class="cx('pcIncrementButton')"
:aria-label="$primevue.config.locale.nextHour" :aria-label="$primevue.config.locale.nextHour"
:unstyled="unstyled" :unstyled="unstyled"
@mousedown="onTimePickerElementMouseDown($event, 0, 1)" @mousedown="onTimePickerElementMouseDown($event, 0, 1)"
@ -323,18 +323,18 @@
@keyup.enter="onTimePickerElementMouseUp($event)" @keyup.enter="onTimePickerElementMouseUp($event)"
@keyup.space="onTimePickerElementMouseUp($event)" @keyup.space="onTimePickerElementMouseUp($event)"
v-bind="timepickerButtonProps" v-bind="timepickerButtonProps"
:pt="ptm('incrementButton')" :pt="ptm('pcIncrementButton')"
data-pc-group-section="timepickerbutton" data-pc-group-section="timepickerbutton"
> >
<template #icon="slotProps"> <template #icon="slotProps">
<slot name="incrementicon"> <slot name="incrementicon">
<component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="[incrementIcon, slotProps.class]" v-bind="ptm('incrementButton')['icon']" data-pc-group-section="timepickerlabel" /> <component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="[incrementIcon, slotProps.class]" v-bind="ptm('pcIncrementButton')['icon']" data-pc-group-section="timepickerlabel" />
</slot> </slot>
</template> </template>
</Button> </Button>
<span v-bind="ptm('hour')" data-pc-group-section="timepickerlabel">{{ formattedCurrentHour }}</span> <span v-bind="ptm('hour')" data-pc-group-section="timepickerlabel">{{ formattedCurrentHour }}</span>
<Button <Button
:class="cx('decrementButton')" :class="cx('pcDecrementButton')"
:aria-label="$primevue.config.locale.prevHour" :aria-label="$primevue.config.locale.prevHour"
:unstyled="unstyled" :unstyled="unstyled"
@mousedown="onTimePickerElementMouseDown($event, 0, -1)" @mousedown="onTimePickerElementMouseDown($event, 0, -1)"
@ -346,12 +346,12 @@
@keyup.enter="onTimePickerElementMouseUp($event)" @keyup.enter="onTimePickerElementMouseUp($event)"
@keyup.space="onTimePickerElementMouseUp($event)" @keyup.space="onTimePickerElementMouseUp($event)"
v-bind="timepickerButtonProps" v-bind="timepickerButtonProps"
:pt="ptm('decrementButton')" :pt="ptm('pcDecrementButton')"
data-pc-group-section="timepickerbutton" data-pc-group-section="timepickerbutton"
> >
<template #icon="slotProps"> <template #icon="slotProps">
<slot name="decrementicon"> <slot name="decrementicon">
<component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="[decrementIcon, slotProps.class]" v-bind="ptm('decrementButton')['icon']" data-pc-group-section="timepickerlabel" /> <component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="[decrementIcon, slotProps.class]" v-bind="ptm('pcDecrementButton')['icon']" data-pc-group-section="timepickerlabel" />
</slot> </slot>
</template> </template>
</Button> </Button>
@ -361,7 +361,7 @@
</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">
<Button <Button
:class="cx('incrementButton')" :class="cx('pcIncrementButton')"
:aria-label="$primevue.config.locale.nextMinute" :aria-label="$primevue.config.locale.nextMinute"
:disabled="disabled" :disabled="disabled"
:unstyled="unstyled" :unstyled="unstyled"
@ -374,18 +374,18 @@
@keyup.enter="onTimePickerElementMouseUp($event)" @keyup.enter="onTimePickerElementMouseUp($event)"
@keyup.space="onTimePickerElementMouseUp($event)" @keyup.space="onTimePickerElementMouseUp($event)"
v-bind="timepickerButtonProps" v-bind="timepickerButtonProps"
:pt="ptm('incrementButton')" :pt="ptm('pcIncrementButton')"
data-pc-group-section="timepickerbutton" data-pc-group-section="timepickerbutton"
> >
<template #icon="slotProps"> <template #icon="slotProps">
<slot name="incrementicon"> <slot name="incrementicon">
<component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="[incrementIcon, slotProps.class]" v-bind="ptm('incrementButton')['icon']" data-pc-group-section="timepickerlabel" /> <component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="[incrementIcon, slotProps.class]" v-bind="ptm('pcIncrementButton')['icon']" data-pc-group-section="timepickerlabel" />
</slot> </slot>
</template> </template>
</Button> </Button>
<span v-bind="ptm('minute')" data-pc-group-section="timepickerlabel">{{ formattedCurrentMinute }}</span> <span v-bind="ptm('minute')" data-pc-group-section="timepickerlabel">{{ formattedCurrentMinute }}</span>
<Button <Button
:class="cx('decrementButton')" :class="cx('pcDecrementButton')"
:aria-label="$primevue.config.locale.prevMinute" :aria-label="$primevue.config.locale.prevMinute"
:disabled="disabled" :disabled="disabled"
@mousedown="onTimePickerElementMouseDown($event, 1, -1)" @mousedown="onTimePickerElementMouseDown($event, 1, -1)"
@ -397,12 +397,12 @@
@keyup.enter="onTimePickerElementMouseUp($event)" @keyup.enter="onTimePickerElementMouseUp($event)"
@keyup.space="onTimePickerElementMouseUp($event)" @keyup.space="onTimePickerElementMouseUp($event)"
v-bind="timepickerButtonProps" v-bind="timepickerButtonProps"
:pt="ptm('decrementButton')" :pt="ptm('pcDecrementButton')"
data-pc-group-section="timepickerbutton" data-pc-group-section="timepickerbutton"
> >
<template #icon="slotProps"> <template #icon="slotProps">
<slot name="decrementicon"> <slot name="decrementicon">
<component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="[decrementIcon, slotProps.class]" v-bind="ptm('decrementButton')['icon']" data-pc-group-section="timepickerlabel" /> <component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="[decrementIcon, slotProps.class]" v-bind="ptm('pcDecrementButton')['icon']" data-pc-group-section="timepickerlabel" />
</slot> </slot>
</template> </template>
</Button> </Button>
@ -412,7 +412,7 @@
</div> </div>
<div v-if="showSeconds" :class="cx('secondPicker')" v-bind="ptm('secondPicker')" data-pc-group-section="timepickerContainer"> <div v-if="showSeconds" :class="cx('secondPicker')" v-bind="ptm('secondPicker')" data-pc-group-section="timepickerContainer">
<Button <Button
:class="cx('incrementButton')" :class="cx('pcIncrementButton')"
:aria-label="$primevue.config.locale.nextSecond" :aria-label="$primevue.config.locale.nextSecond"
:disabled="disabled" :disabled="disabled"
:unstyled="unstyled" :unstyled="unstyled"
@ -425,18 +425,18 @@
@keyup.enter="onTimePickerElementMouseUp($event)" @keyup.enter="onTimePickerElementMouseUp($event)"
@keyup.space="onTimePickerElementMouseUp($event)" @keyup.space="onTimePickerElementMouseUp($event)"
v-bind="timepickerButtonProps" v-bind="timepickerButtonProps"
:pt="ptm('incrementButton')" :pt="ptm('pcIncrementButton')"
data-pc-group-section="timepickerbutton" data-pc-group-section="timepickerbutton"
> >
<template #icon="slotProps"> <template #icon="slotProps">
<slot name="incrementicon"> <slot name="incrementicon">
<component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="[incrementIcon, slotProps.class]" v-bind="ptm('incrementButton')['icon']" data-pc-group-section="timepickerlabel" /> <component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="[incrementIcon, slotProps.class]" v-bind="ptm('pcIncrementButton')['icon']" data-pc-group-section="timepickerlabel" />
</slot> </slot>
</template> </template>
</Button> </Button>
<span v-bind="ptm('second')" data-pc-group-section="timepickerlabel">{{ formattedCurrentSecond }}</span> <span v-bind="ptm('second')" data-pc-group-section="timepickerlabel">{{ formattedCurrentSecond }}</span>
<Button <Button
:class="cx('decrementButton')" :class="cx('pcDecrementButton')"
:aria-label="$primevue.config.locale.prevSecond" :aria-label="$primevue.config.locale.prevSecond"
:disabled="disabled" :disabled="disabled"
:unstyled="unstyled" :unstyled="unstyled"
@ -449,12 +449,12 @@
@keyup.enter="onTimePickerElementMouseUp($event)" @keyup.enter="onTimePickerElementMouseUp($event)"
@keyup.space="onTimePickerElementMouseUp($event)" @keyup.space="onTimePickerElementMouseUp($event)"
v-bind="timepickerButtonProps" v-bind="timepickerButtonProps"
:pt="ptm('decrementButton')" :pt="ptm('pcDecrementButton')"
data-pc-group-section="timepickerbutton" data-pc-group-section="timepickerbutton"
> >
<template #icon="slotProps"> <template #icon="slotProps">
<slot name="decrementicon"> <slot name="decrementicon">
<component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="[decrementIcon, slotProps.class]" v-bind="ptm('decrementButton')['icon']" data-pc-group-section="timepickerlabel" /> <component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="[decrementIcon, slotProps.class]" v-bind="ptm('pcDecrementButton')['icon']" data-pc-group-section="timepickerlabel" />
</slot> </slot>
</template> </template>
</Button> </Button>
@ -464,36 +464,36 @@
</div> </div>
<div v-if="hourFormat == '12'" :class="cx('ampmPicker')" v-bind="ptm('ampmPicker')"> <div v-if="hourFormat == '12'" :class="cx('ampmPicker')" v-bind="ptm('ampmPicker')">
<Button <Button
:class="cx('incrementButton')" :class="cx('pcIncrementButton')"
:aria-label="$primevue.config.locale.am" :aria-label="$primevue.config.locale.am"
:disabled="disabled" :disabled="disabled"
:unstyled="unstyled" :unstyled="unstyled"
@click="toggleAMPM($event)" @click="toggleAMPM($event)"
@keydown="onContainerButtonKeydown" @keydown="onContainerButtonKeydown"
v-bind="timepickerButtonProps" v-bind="timepickerButtonProps"
:pt="ptm('incrementButton')" :pt="ptm('pcIncrementButton')"
data-pc-group-section="timepickerbutton" data-pc-group-section="timepickerbutton"
> >
<template #icon="slotProps"> <template #icon="slotProps">
<slot name="incrementicon" :class="cx('incrementIcon')"> <slot name="incrementicon" :class="cx('incrementIcon')">
<component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="[cx('incrementIcon'), slotProps.class]" v-bind="ptm('incrementButton')['icon']" data-pc-group-section="timepickerlabel" /> <component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="[cx('incrementIcon'), slotProps.class]" v-bind="ptm('pcIncrementButton')['icon']" data-pc-group-section="timepickerlabel" />
</slot> </slot>
</template> </template>
</Button> </Button>
<span v-bind="ptm('ampm')" data-pc-group-section="timepickerlabel">{{ pm ? $primevue.config.locale.pm : $primevue.config.locale.am }}</span> <span v-bind="ptm('ampm')" data-pc-group-section="timepickerlabel">{{ pm ? $primevue.config.locale.pm : $primevue.config.locale.am }}</span>
<Button <Button
:class="cx('decrementButton')" :class="cx('pcDecrementButton')"
:aria-label="$primevue.config.locale.pm" :aria-label="$primevue.config.locale.pm"
:disabled="disabled" :disabled="disabled"
@click="toggleAMPM($event)" @click="toggleAMPM($event)"
@keydown="onContainerButtonKeydown" @keydown="onContainerButtonKeydown"
v-bind="timepickerButtonProps" v-bind="timepickerButtonProps"
:pt="ptm('decrementButton')" :pt="ptm('pcDecrementButton')"
data-pc-group-section="timepickerbutton" data-pc-group-section="timepickerbutton"
> >
<template #icon="slotProps"> <template #icon="slotProps">
<slot name="decrementicon" :class="cx('decrementIcon')"> <slot name="decrementicon" :class="cx('decrementIcon')">
<component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="[cx('decrementIcon'), slotProps.class]" v-bind="ptm('decrementButton')['icon']" data-pc-group-section="timepickerlabel" /> <component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="[cx('decrementIcon'), slotProps.class]" v-bind="ptm('pcDecrementButton')['icon']" data-pc-group-section="timepickerlabel" />
</slot> </slot>
</template> </template>
</Button> </Button>
@ -503,21 +503,21 @@
<Button <Button
:label="todayLabel" :label="todayLabel"
@click="onTodayButtonClick($event)" @click="onTodayButtonClick($event)"
:class="cx('todayButton')" :class="cx('pcTodayButton')"
:unstyled="unstyled" :unstyled="unstyled"
@keydown="onContainerButtonKeydown" @keydown="onContainerButtonKeydown"
v-bind="todayButtonProps" v-bind="todayButtonProps"
:pt="ptm('todayButton')" :pt="ptm('pcTodayButton')"
data-pc-group-section="button" data-pc-group-section="button"
/> />
<Button <Button
:label="clearLabel" :label="clearLabel"
@click="onClearButtonClick($event)" @click="onClearButtonClick($event)"
:class="cx('clearButton')" :class="cx('pcClearButton')"
:unstyled="unstyled" :unstyled="unstyled"
@keydown="onContainerButtonKeydown" @keydown="onContainerButtonKeydown"
v-bind="clearButtonProps" v-bind="clearButtonProps"
:pt="ptm('clearButton')" :pt="ptm('pcClearButton')"
data-pc-group-section="button" data-pc-group-section="button"
/> />
</div> </div>

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

@ -350,7 +350,7 @@ const classes = {
'p-focus': state.focused || state.overlayVisible 'p-focus': state.focused || state.overlayVisible
} }
], ],
input: 'p-datepicker-input', pcInput: 'p-datepicker-input',
dropdown: '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',
@ -366,12 +366,12 @@ const classes = {
calendarContainer: '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', pcPreviousButton: 'p-datepicker-prev-button',
title: 'p-datepicker-title', title: 'p-datepicker-title',
viewMonth: 'p-datepicker-view-month p-link', viewMonth: 'p-datepicker-view-month p-link',
viewYear: 'p-datepicker-view-year p-link', viewYear: 'p-datepicker-view-year p-link',
decade: 'p-datepicker-decade', decade: 'p-datepicker-decade',
nextButton: 'p-datepicker-next-button', pcNextButton: 'p-datepicker-next-button',
dayView: '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',
@ -386,15 +386,15 @@ const classes = {
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', pcIncrementButton: 'p-datepicker-increment-button',
decrementButton: 'p-datepicker-decrement-button', pcDecrementButton: 'p-datepicker-decrement-button',
separator: 'p-datepicker-separator', separator: 'p-datepicker-separator',
minutePicker: 'p-datepicker-minute-picker', minutePicker: 'p-datepicker-minute-picker',
secondPicker: 'p-datepicker-second-picker', secondPicker: 'p-datepicker-second-picker',
ampmPicker: 'p-datepicker-ampm-picker', ampmPicker: 'p-datepicker-ampm-picker',
buttonbar: 'p-datepicker-buttonbar', buttonbar: 'p-datepicker-buttonbar',
todayButton: 'p-datepicker-today-button', pcTodayButton: 'p-datepicker-today-button',
clearButton: 'p-datepicker-clear-button' pcClearButton: 'p-datepicker-clear-button'
}; };
export default BaseStyle.extend({ export default BaseStyle.extend({

4
components/lib/dialog/Dialog.d.ts vendored
View File

@ -82,12 +82,12 @@ export interface DialogPassThroughOptions<T = any> {
* Used to pass attributes to the maximize Button component. * Used to pass attributes to the maximize Button component.
* @see {@link ButtonPassThroughOptions} * @see {@link ButtonPassThroughOptions}
*/ */
maximizeButton?: ButtonPassThroughOptions<DialogSharedPassThroughMethodOptions>; pcMaximizeButton?: ButtonPassThroughOptions<DialogSharedPassThroughMethodOptions>;
/** /**
* Used to pass attributes to the close Button component. * Used to pass attributes to the close Button component.
* @see {@link ButtonPassThroughOptions} * @see {@link ButtonPassThroughOptions}
*/ */
closeButton?: ButtonPassThroughOptions<DialogSharedPassThroughMethodOptions>; pcCloseButton?: ButtonPassThroughOptions<DialogSharedPassThroughMethodOptions>;
/** /**
* Used to pass attributes to the content's DOM element. * Used to pass attributes to the content's DOM element.
*/ */

14
components/lib/dialog/Dialog.vue
View File

@ -14,17 +14,17 @@
v-if="maximizable" v-if="maximizable"
:ref="maximizableRef" :ref="maximizableRef"
:autofocus="focusableMax" :autofocus="focusableMax"
:class="cx('maximizeButton')" :class="cx('pcMaximizeButton')"
@click="maximize" @click="maximize"
:tabindex="maximizable ? '0' : '-1'" :tabindex="maximizable ? '0' : '-1'"
:unstyled="unstyled" :unstyled="unstyled"
v-bind="maximizeButtonProps" v-bind="maximizeButtonProps"
:pt="ptm('maximizeButton')" :pt="ptm('pcMaximizeButton')"
data-pc-group-section="headericon" data-pc-group-section="headericon"
> >
<template #icon="slotProps"> <template #icon="slotProps">
<slot name="maximizeicon" :maximized="maximized"> <slot name="maximizeicon" :maximized="maximized">
<component :is="maximizeIconComponent" :class="[slotProps.class, maximized ? minimizeIcon : maximizeIcon]" v-bind="ptm('maximizeButton')['icon']" /> <component :is="maximizeIconComponent" :class="[slotProps.class, maximized ? minimizeIcon : maximizeIcon]" v-bind="ptm('pcMaximizeButton')['icon']" />
</slot> </slot>
</template> </template>
</Button> </Button>
@ -32,17 +32,17 @@
v-if="closable" v-if="closable"
:ref="closeButtonRef" :ref="closeButtonRef"
:autofocus="focusableClose" :autofocus="focusableClose"
:class="cx('closeButton')" :class="cx('pcCloseButton')"
@click="close" @click="close"
:aria-label="closeAriaLabel" :aria-label="closeAriaLabel"
:unstyled="unstyled" :unstyled="unstyled"
v-bind="closeButtonProps" v-bind="closeButtonProps"
:pt="ptm('closeButton')" :pt="ptm('pcCloseButton')"
data-pc-group-section="headericon" data-pc-group-section="headericon"
> >
<template #icon="slotProps"> <template #icon="slotProps">
<slot name="closeicon" :class="cx('closeButtonIcon')"> <slot name="closeicon">
<component :is="closeIcon ? 'span' : 'TimesIcon'" :class="[cx('closeButtonIcon'), closeIcon, slotProps.class]" v-bind="ptm('closeButton')['icon']"></component> <component :is="closeIcon ? 'span' : 'TimesIcon'" :class="[closeIcon, slotProps.class]" v-bind="ptm('pcCloseButton')['icon']"></component>
</slot> </slot>
</template> </template>
</Button> </Button>

4
components/lib/dialog/style/DialogStyle.js
View File

@ -174,8 +174,8 @@ const classes = {
header: 'p-dialog-header', header: 'p-dialog-header',
title: 'p-dialog-title', title: 'p-dialog-title',
headerActions: 'p-dialog-header-actions', headerActions: 'p-dialog-header-actions',
maximizeButton: 'p-dialog-maximize-button', pcMaximizeButton: 'p-dialog-maximize-button',
closeButton: 'p-dialog-close-button', pcCloseButton: 'p-dialog-close-button',
content: 'p-dialog-content', content: 'p-dialog-content',
footer: 'p-dialog-footer' footer: 'p-dialog-footer'
}; };

4
components/lib/drawer/Drawer.d.ts vendored
View File

@ -79,10 +79,10 @@ export interface DrawerPassThroughOptions {
*/ */
title?: DrawerPassThroughOptionType; title?: DrawerPassThroughOptionType;
/** /**
* Used to pass attributes to the previous button's DOM element. * Used to pass attributes to the close button's DOM element.
* @see {@link ButtonPassThroughOptions} * @see {@link ButtonPassThroughOptions}
*/ */
toggler?: ButtonPassThroughOptions<DrawerSharedPassThroughMethodOptions>; pcCloseButton?: ButtonPassThroughOptions<DrawerSharedPassThroughMethodOptions>;
/** /**
* Used to pass attributes to the content's DOM element. * Used to pass attributes to the content's DOM element.
*/ */

8
components/lib/drawer/Drawer.vue
View File

@ -13,17 +13,17 @@
v-if="showCloseIcon" v-if="showCloseIcon"
:ref="closeButtonRef" :ref="closeButtonRef"
type="button" type="button"
:class="cx('closeButton')" :class="cx('pcCloseButton')"
:aria-label="closeAriaLabel" :aria-label="closeAriaLabel"
:unstyled="unstyled" :unstyled="unstyled"
@click="hide" @click="hide"
v-bind="closeButtonProps" v-bind="closeButtonProps"
:pt="ptm('closeButton')" :pt="ptm('pcCloseButton')"
data-pc-group-section="iconcontainer" data-pc-group-section="iconcontainer"
> >
<template #icon="slotProps"> <template #icon="slotProps">
<slot name="closeicon" :class="cx('closeIcon')"> <slot name="closeicon">
<component :is="closeIcon ? 'span' : 'TimesIcon'" :class="[cx('closeIcon'), closeIcon, slotProps.class]" v-bind="ptm('closeButton')['icon']"></component> <component :is="closeIcon ? 'span' : 'TimesIcon'" :class="[closeIcon, slotProps.class]" v-bind="ptm('pcCloseButton')['icon']"></component>
</slot> </slot>
</template> </template>
</Button> </Button>

2
components/lib/drawer/style/DrawerStyle.js
View File

@ -187,7 +187,7 @@ const classes = {
], ],
header: 'p-drawer-header', header: 'p-drawer-header',
title: 'p-drawer-title', title: 'p-drawer-title',
closeButton: 'p-drawer-close-button', pcCloseButton: 'p-drawer-close-button',
content: 'p-drawer-content' content: 'p-drawer-content'
}; };

6
components/lib/fileupload/FileContent.vue
View File

@ -5,12 +5,12 @@
<div :class="cx('fileName')" v-bind="ptm('fileName')">{{ file.name }}</div> <div :class="cx('fileName')" v-bind="ptm('fileName')">{{ file.name }}</div>
<span :class="cx('fileSize')" v-bind="ptm('fileSize')">{{ formatSize(file.size) }}</span> <span :class="cx('fileSize')" v-bind="ptm('fileSize')">{{ formatSize(file.size) }}</span>
</div> </div>
<Badge :value="badgeValue" :class="cx('fileBadge')" :severity="badgeSeverity" :unstyled="unstyled" :pt="ptm('fileBadge')" /> <Badge :value="badgeValue" :class="cx('pcFileBadge')" :severity="badgeSeverity" :unstyled="unstyled" :pt="ptm('pcFileBadge')" />
<div :class="cx('fileActions')" v-bind="ptm('fileActions')"> <div :class="cx('fileActions')" v-bind="ptm('fileActions')">
<Button @click="$emit('remove', index)" text rounded severity="danger" :class="cx('fileRemoveButton')" :unstyled="unstyled" :pt="ptm('fileRemoveButton')"> <Button @click="$emit('remove', index)" text rounded severity="danger" :class="cx('pcFileRemoveButton')" :unstyled="unstyled" :pt="ptm('pcFileRemoveButton')">
<template #icon="iconProps"> <template #icon="iconProps">
<component v-if="templates.fileremoveicon" :is="templates.fileremoveicon" :class="iconProps.class" :file="file" :index="index" /> <component v-if="templates.fileremoveicon" :is="templates.fileremoveicon" :class="iconProps.class" :file="file" :index="index" />
<TimesIcon v-else :class="iconProps.class" aria-hidden="true" v-bind="ptm('fileRemoveButton')['icon']" /> <TimesIcon v-else :class="iconProps.class" aria-hidden="true" v-bind="ptm('pcFileRemoveButton')['icon']" />
</template> </template>
</Button> </Button>
</div> </div>

33
components/lib/fileupload/FileUpload.d.ts vendored
View File

@ -13,6 +13,7 @@ import { ComponentHooks } from '../basecomponent';
import { ButtonPassThroughOptions } from '../button'; import { ButtonPassThroughOptions } from '../button';
import { MessagePassThroughOptions } from '../message'; import { MessagePassThroughOptions } from '../message';
import { PassThroughOptions } from '../passthrough'; import { PassThroughOptions } from '../passthrough';
import { ProgressBarPassThroughOptions } from '../progressbar';
import { ClassComponent, DesignToken, GlobalComponentConstructor, PassThrough } from '../ts-helpers'; import { ClassComponent, DesignToken, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
export declare type FileUploadPassThroughOptionType = FileUploadPassThroughAttributes | ((options: FileUploadPassThroughMethodOptions) => FileUploadPassThroughAttributes | string) | string | null | undefined; export declare type FileUploadPassThroughOptionType = FileUploadPassThroughAttributes | ((options: FileUploadPassThroughMethodOptions) => FileUploadPassThroughAttributes | string) | string | null | undefined;
@ -207,33 +208,34 @@ export interface FileUploadPassThroughOptions {
*/ */
header?: FileUploadPassThroughOptionType; header?: FileUploadPassThroughOptionType;
/** /**
* Used to pass attributes to the choose button's DOM element. * Used to pass attributes to the choose Button component.
* @see {@link ButtonPassThroughOptions} * @see {@link ButtonPassThroughOptions}
*/ */
chooseButton?: ButtonPassThroughOptions<FileUploadPassThroughMethodOptions>; pcChooseButton?: ButtonPassThroughOptions<FileUploadPassThroughMethodOptions>;
/** /**
* Used to pass attributes to the upload button's DOM element. * Used to pass attributes to the upload Button component.
* @see {@link ButtonPassThroughOptions} * @see {@link ButtonPassThroughOptions}
*/ */
uploadButton?: ButtonPassThroughOptions<FileUploadPassThroughMethodOptions>; pcUploadButton?: ButtonPassThroughOptions<FileUploadPassThroughMethodOptions>;
/** /**
* Used to pass attributes to the cancel button's DOM element. * Used to pass attributes to the cancel Button component.
* @see {@link ButtonPassThroughOptions} * @see {@link ButtonPassThroughOptions}
*/ */
cancelButton?: ButtonPassThroughOptions<FileUploadPassThroughMethodOptions>; pcCancelButton?: ButtonPassThroughOptions<FileUploadPassThroughMethodOptions>;
/** /**
* Used to pass attributes to the content's DOM element. * Used to pass attributes to the content's DOM element.
*/ */
content?: FileUploadPassThroughOptionType; content?: FileUploadPassThroughOptionType;
/** /**
* Used to pass attributes to the progressbar's DOM element. * Used to pass attributes to the ProgressBar component.
* @see {@link ProgressbarPassThroughOptions}
*/ */
progressbar?: FileUploadPassThroughOptionType; pcProgressbar?: ProgressBarPassThroughOptions<FileUploadPassThroughMethodOptions>;
/** /**
* Used to pass attributes to the messages' DOM element. * Used to pass attributes to the message's DOM element.
* @see {@link MessagePassThroughOptions} * @see {@link MessagePassThroughOptions}
*/ */
message?: MessagePassThroughOptions<FileUploadPassThroughMethodOptions>; pcMessage?: MessagePassThroughOptions<FileUploadPassThroughMethodOptions>;
/** /**
* Used to pass attributes to the file's DOM element. * Used to pass attributes to the file's DOM element.
*/ */
@ -258,7 +260,7 @@ export interface FileUploadPassThroughOptions {
* Used to pass attributes to the Badge component. * Used to pass attributes to the Badge component.
* @see {@link BadgePassThroughOptions} * @see {@link BadgePassThroughOptions}
*/ */
fileBadge?: BadgePassThroughOptions<FileUploadPassThroughMethodOptions>; pcFileBadge?: BadgePassThroughOptions<FileUploadPassThroughMethodOptions>;
/** /**
* Used to pass attributes to the file actions' DOM element. * Used to pass attributes to the file actions' DOM element.
*/ */
@ -267,16 +269,21 @@ export interface FileUploadPassThroughOptions {
* Used to pass attributes to the file remove button's DOM element. * Used to pass attributes to the file remove button's DOM element.
* @see {@link ButtonPassThroughOptions} * @see {@link ButtonPassThroughOptions}
*/ */
fileRemoveButton?: ButtonPassThroughOptions<FileUploadPassThroughMethodOptions>; pcFileRemoveButton?: ButtonPassThroughOptions<FileUploadPassThroughMethodOptions>;
/** /**
* Used to pass attributes to the empty's DOM element. * Used to pass attributes to the empty's DOM element.
*/ */
empty?: FileUploadPassThroughOptionType; empty?: FileUploadPassThroughOptionType;
/**
* Used to pass attributes to the messages' DOM element.
* @see {@link MessagePassThroughOptions}
*/
pcMessages?: MessagePassThroughOptions<FileUploadPassThroughMethodOptions>;
/** /**
* Used to pass attributes to the basic mode's button's DOM element. * Used to pass attributes to the basic mode's button's DOM element.
* @see {@link ButtonPassThroughOptions} * @see {@link ButtonPassThroughOptions}
*/ */
button?: ButtonPassThroughOptions<FileUploadPassThroughMethodOptions>; pcButton?: ButtonPassThroughOptions<FileUploadPassThroughMethodOptions>;
/** /**
* Used to manage all lifecycle hooks. * Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks} * @see {@link BaseComponent.ComponentHooks}

28
components/lib/fileupload/FileUpload.vue
View File

@ -3,24 +3,24 @@
<input ref="fileInput" type="file" @change="onFileSelect" :multiple="multiple" :accept="accept" :disabled="chooseDisabled" v-bind="ptm('input')" /> <input ref="fileInput" type="file" @change="onFileSelect" :multiple="multiple" :accept="accept" :disabled="chooseDisabled" v-bind="ptm('input')" />
<div :class="cx('header')" v-bind="ptm('header')"> <div :class="cx('header')" v-bind="ptm('header')">
<slot name="header" :files="files" :uploadedFiles="uploadedFiles" :chooseCallback="choose" :uploadCallback="upload" :clearCallback="clear"> <slot name="header" :files="files" :uploadedFiles="uploadedFiles" :chooseCallback="choose" :uploadCallback="upload" :clearCallback="clear">
<Button :label="chooseButtonLabel" :class="chooseButtonClass" :style="style" :disabled="disabled" :unstyled="unstyled" @click="choose" @keydown.enter="choose" @focus="onFocus" @blur="onBlur" :pt="ptm('chooseButton')"> <Button :label="chooseButtonLabel" :class="chooseButtonClass" :style="style" :disabled="disabled" :unstyled="unstyled" @click="choose" @keydown.enter="choose" @focus="onFocus" @blur="onBlur" :pt="ptm('pcChooseButton')">
<template #icon="iconProps"> <template #icon="iconProps">
<slot name="chooseicon"> <slot name="chooseicon">
<component :is="chooseIcon ? 'span' : 'PlusIcon'" :class="[iconProps.class, chooseIcon]" aria-hidden="true" v-bind="ptm('chooseButton')['icon']" /> <component :is="chooseIcon ? 'span' : 'PlusIcon'" :class="[iconProps.class, chooseIcon]" aria-hidden="true" v-bind="ptm('pcChooseButton')['icon']" />
</slot> </slot>
</template> </template>
</Button> </Button>
<Button v-if="showUploadButton" :class="cx('uploadButton')" :label="uploadButtonLabel" @click="upload" :disabled="uploadDisabled" :unstyled="unstyled" :pt="ptm('uploadButton')"> <Button v-if="showUploadButton" :class="cx('pcUploadButton')" :label="uploadButtonLabel" @click="upload" :disabled="uploadDisabled" :unstyled="unstyled" :pt="ptm('pcUploadButton')">
<template #icon="iconProps"> <template #icon="iconProps">
<slot name="uploadicon"> <slot name="uploadicon">
<component :is="uploadIcon ? 'span' : 'UploadIcon'" :class="[iconProps.class, uploadIcon]" aria-hidden="true" v-bind="ptm('uploadButton')['icon']" data-pc-section="uploadbuttonicon" /> <component :is="uploadIcon ? 'span' : 'UploadIcon'" :class="[iconProps.class, uploadIcon]" aria-hidden="true" v-bind="ptm('pcUploadButton')['icon']" data-pc-section="uploadbuttonicon" />
</slot> </slot>
</template> </template>
</Button> </Button>
<Button v-if="showCancelButton" :class="cx('cancelButton')" :label="cancelButtonLabel" @click="clear" :disabled="cancelDisabled" :unstyled="unstyled" :pt="ptm('cancelButton')"> <Button v-if="showCancelButton" :class="cx('pcCancelButton')" :label="cancelButtonLabel" @click="clear" :disabled="cancelDisabled" :unstyled="unstyled" :pt="ptm('pcCancelButton')">
<template #icon="iconProps"> <template #icon="iconProps">
<slot name="cancelicon"> <slot name="cancelicon">
<component :is="cancelIcon ? 'span' : 'TimesIcon'" :class="[iconProps.class, cancelIcon]" aria-hidden="true" v-bind="ptm('cancelButton')['icon']" data-pc-section="cancelbuttonicon" /> <component :is="cancelIcon ? 'span' : 'TimesIcon'" :class="[iconProps.class, cancelIcon]" aria-hidden="true" v-bind="ptm('pcCancelButton')['icon']" data-pc-section="cancelbuttonicon" />
</slot> </slot>
</template> </template>
</Button> </Button>
@ -29,12 +29,12 @@
<div ref="content" :class="cx('content')" @dragenter="onDragEnter" @dragover="onDragOver" @dragleave="onDragLeave" @drop="onDrop" v-bind="ptm('content')" :data-p-highlight="false"> <div ref="content" :class="cx('content')" @dragenter="onDragEnter" @dragover="onDragOver" @dragleave="onDragLeave" @drop="onDrop" v-bind="ptm('content')" :data-p-highlight="false">
<slot name="content" :files="files" :uploadedFiles="uploadedFiles" :removeUploadedFileCallback="removeUploadedFile" :removeFileCallback="remove" :progress="progress" :messages="messages"> <slot name="content" :files="files" :uploadedFiles="uploadedFiles" :removeUploadedFileCallback="removeUploadedFile" :removeFileCallback="remove" :progress="progress" :messages="messages">
<template v-if="hasFiles"> <template v-if="hasFiles">
<ProgressBar :value="progress" :showValue="false" :unstyled="unstyled" :pt="ptm('progressbar')" /> <ProgressBar :value="progress" :showValue="false" :unstyled="unstyled" :pt="ptm('pcProgressbar')" />
<div v-if="hasFiles" :class="cx('fileList')"> <div v-if="hasFiles" :class="cx('fileList')">
<FileContent :files="files" @remove="remove" :badgeValue="pendingLabel" :previewWidth="previewWidth" :templates="$slots" :unstyled="unstyled" :pt="pt" /> <FileContent :files="files" @remove="remove" :badgeValue="pendingLabel" :previewWidth="previewWidth" :templates="$slots" :unstyled="unstyled" :pt="pt" />
</div> </div>
</template> </template>
<Message v-for="msg of messages" :key="msg" severity="error" @close="onMessageClose" :unstyled="unstyled" :pt="ptm('message')">{{ msg }}</Message> <Message v-for="msg of messages" :key="msg" severity="error" @close="onMessageClose" :unstyled="unstyled" :pt="ptm('pcMessage')">{{ msg }}</Message>
<div v-if="hasUploadedFiles" :class="cx('fileList')"> <div v-if="hasUploadedFiles" :class="cx('fileList')">
<FileContent :files="uploadedFiles" @remove="removeUploadedFile" :badgeValue="completedLabel" badgeSeverity="success" :previewWidth="previewWidth" :templates="$slots" :unstyled="unstyled" :pt="pt" /> <FileContent :files="uploadedFiles" @remove="removeUploadedFile" :badgeValue="completedLabel" badgeSeverity="success" :previewWidth="previewWidth" :templates="$slots" :unstyled="unstyled" :pt="pt" />
</div> </div>
@ -45,14 +45,14 @@
</div> </div>
</div> </div>
<div v-else-if="isBasic" :class="cx('root')" v-bind="ptmi('root')"> <div v-else-if="isBasic" :class="cx('root')" v-bind="ptmi('root')">
<Message v-for="msg of messages" :key="msg" severity="error" @close="onMessageClose" :unstyled="unstyled" :pt="ptm('messages')">{{ msg }}</Message> <Message v-for="msg of messages" :key="msg" severity="error" @close="onMessageClose" :unstyled="unstyled" :pt="ptm('pcMessages')">{{ msg }}</Message>
<Button :label="basicChooseButtonLabel" :class="chooseButtonClass" :style="style" :disabled="disabled" :unstyled="unstyled" @mouseup="onBasicUploaderClick" @keydown.enter="choose" @focus="onFocus" @blur="onBlur" v-bind="ptm('button')"> <Button :label="basicChooseButtonLabel" :class="chooseButtonClass" :style="style" :disabled="disabled" :unstyled="unstyled" @mouseup="onBasicUploaderClick" @keydown.enter="choose" @focus="onFocus" @blur="onBlur" v-bind="ptm('pcButton')">
<template #icon="iconProps"> <template #icon="iconProps">
<slot v-if="!hasFiles || auto" name="uploadicon"> <slot v-if="!hasFiles || auto" name="uploadicon">
<component :is="uploadIcon ? 'span' : 'UploadIcon'" :class="[iconProps.class, uploadIcon]" aria-hidden="true" v-bind="ptm('button')['icon']" /> <component :is="uploadIcon ? 'span' : 'UploadIcon'" :class="[iconProps.class, uploadIcon]" aria-hidden="true" v-bind="ptm('pcButton')['icon']" />
</slot> </slot>
<slot v-else name="chooseicon" :class="cx('chooseIcon')"> <slot v-else name="chooseicon">
<component :is="chooseIcon ? 'span' : 'PlusIcon'" :class="[iconProps.class, cx('chooseIcon'), chooseIcon]" aria-hidden="true" v-bind="ptm('button')['icon']" /> <component :is="chooseIcon ? 'span' : 'PlusIcon'" :class="[iconProps.class, chooseIcon]" aria-hidden="true" v-bind="ptm('pcButton')['icon']" />
</slot> </slot>
</template> </template>
</Button> </Button>
@ -372,7 +372,7 @@ export default {
return this.mode === 'basic'; return this.mode === 'basic';
}, },
chooseButtonClass() { chooseButtonClass() {
return [this.cx('chooseButton'), this.class]; return [this.cx('pcChooseButton'), this.class];
}, },
basicChooseButtonLabel() { basicChooseButtonLabel() {
return this.auto ? this.chooseButtonLabel : this.hasFiles ? this.files.map((f) => f.name).join(', ') : this.chooseButtonLabel; return this.auto ? this.chooseButtonLabel : this.hasFiles ? this.files.map((f) => f.name).join(', ') : this.chooseButtonLabel;

10
components/lib/fileupload/style/FileUploadStyle.js
View File

@ -81,9 +81,9 @@ const theme = ({ dt }) => `
const classes = { const classes = {
root: ({ props }) => [`p-fileupload p-fileupload-${props.mode} p-component`], root: ({ props }) => [`p-fileupload p-fileupload-${props.mode} p-component`],
header: 'p-fileupload-header', header: 'p-fileupload-header',
chooseButton: 'p-fileupload-choose-button', pcChooseButton: 'p-fileupload-choose-button',
uploadButton: 'p-fileupload-upload-button', pcUploadButton: 'p-fileupload-upload-button',
clearButton: 'p-fileupload-clear-button', pcCancelButton: 'p-fileupload-cancel-button',
content: 'p-fileupload-content', content: 'p-fileupload-content',
fileList: 'p-fileupload-file-list', fileList: 'p-fileupload-file-list',
file: 'p-fileupload-file', file: 'p-fileupload-file',
@ -91,9 +91,9 @@ const classes = {
fileInfo: 'p-fileupload-file-info', fileInfo: 'p-fileupload-file-info',
fileName: 'p-fileupload-file-name', fileName: 'p-fileupload-file-name',
fileSize: 'p-fileupload-file-size', fileSize: 'p-fileupload-file-size',
fileBadge: 'p-fileupload-file-badge', pcFileBadge: 'p-fileupload-file-badge',
fileActions: 'p-fileupload-file-actions', fileActions: 'p-fileupload-file-actions',
fileRemoveButton: 'p-fileupload-file-remove-button' pcFileRemoveButton: 'p-fileupload-file-remove-button'
}; };
export default BaseStyle.extend({ export default BaseStyle.extend({

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

@ -102,7 +102,7 @@ export interface InputChipsPassThroughOptions {
* Used to pass attributes to the Chip component. * Used to pass attributes to the Chip component.
* @see {@link ChipPassThroughOptions} * @see {@link ChipPassThroughOptions}
*/ */
chipLabel?: ChipPassThroughOptions<InputChipsSharedPassThroughMethodOptions>; pcChipLabel?: ChipPassThroughOptions<InputChipsSharedPassThroughMethodOptions>;
/** /**
* Used to pass attributes to the chip icon's DOM element. * Used to pass attributes to the chip icon's DOM element.
*/ */

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

@ -28,9 +28,9 @@
v-bind="ptm('chip')" v-bind="ptm('chip')"
:data-p-focused="focusedIndex === i" :data-p-focused="focusedIndex === i"
> >
<slot name="chip" :class="cx('chipLabel')" :index="i" :value="val" :removeCallback="(event) => removeOption(event, i)"> <slot name="chip" :class="cx('pcChipLabel')" :index="i" :value="val" :removeCallback="(event) => removeOption(event, i)">
<!-- TODO: removetokenicon and removeTokenIcon deprecated since v4.0. Use chipicon slot and chipIcon prop--> <!-- TODO: removetokenicon and removeTokenIcon deprecated since v4.0. Use chipicon slot and chipIcon prop-->
<Chip :class="cx('chipLabel')" :label="val" :removeIcon="chipIcon || removeTokenIcon" removable :unstyled="unstyled" @remove="removeItem($event, i)" :pt="ptm('chipLabel')"> <Chip :class="cx('pcChipLabel')" :label="val" :removeIcon="chipIcon || removeTokenIcon" removable :unstyled="unstyled" @remove="removeItem($event, i)" :pt="ptm('pcChipLabel')">
<template #removeicon> <template #removeicon>
<slot :name="$slots.chipicon ? 'chipicon' : 'removetokenicon'" :class="cx('chipIcon')" :index="i" :removeCallback="(event) => removeItem(event, i)" /> <slot :name="$slots.chipicon ? 'chipicon' : 'removetokenicon'" :class="cx('chipIcon')" :index="i" :removeCallback="(event) => removeItem(event, i)" />
</template> </template>

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

@ -102,7 +102,7 @@ const classes = {
} }
], ],
chip: ({ state, index }) => ['p-inputchips-chip', { 'p-focus': state.focusedIndex === index }], chip: ({ state, index }) => ['p-inputchips-chip', { 'p-focus': state.focusedIndex === index }],
chipLabel: 'p-inputchips-chip-label', pcChipLabel: 'p-inputchips-chip-label',
chipIcon: 'p-inputchips-chip-icon', chipIcon: 'p-inputchips-chip-icon',
inputItem: 'p-inputchips-input-item' inputItem: 'p-inputchips-input-item'
}; };

2
components/lib/inputnumber/InputNumber.d.ts vendored
View File

@ -104,7 +104,7 @@ export interface InputNumberPassThroughOptions<T = any> {
* Used to pass attributes to the InputText component. * Used to pass attributes to the InputText component.
* @see {@link InputTextPassThroughOptions} * @see {@link InputTextPassThroughOptions}
*/ */
input?: InputTextPassThroughOptions<InputNumberSharedPassThroughMethodOptions>; pcInput?: InputTextPassThroughOptions<InputNumberSharedPassThroughMethodOptions>;
/** /**
* Used to pass attributes to the button group's DOM element. * Used to pass attributes to the button group's DOM element.
*/ */

4
components/lib/inputnumber/InputNumber.vue
View File

@ -4,7 +4,7 @@
ref="input" ref="input"
:id="inputId" :id="inputId"
role="spinbutton" role="spinbutton"
:class="[cx('input'), inputClass]" :class="[cx('pcInput'), inputClass]"
:style="inputStyle" :style="inputStyle"
:value="formattedValue" :value="formattedValue"
:aria-valuemin="min" :aria-valuemin="min"
@ -25,7 +25,7 @@
@click="onInputClick" @click="onInputClick"
@focus="onInputFocus" @focus="onInputFocus"
@blur="onInputBlur" @blur="onInputBlur"
:pt="ptm('input')" :pt="ptm('pcInput')"
:unstyled="unstyled" :unstyled="unstyled"
/> />
<span v-if="showButtons && buttonLayout === 'stacked'" :class="cx('buttonGroup')" v-bind="ptm('buttonGroup')"> <span v-if="showButtons && buttonLayout === 'stacked'" :class="cx('buttonGroup')" v-bind="ptm('buttonGroup')">

2
components/lib/inputnumber/style/InputNumberStyle.js
View File

@ -159,7 +159,7 @@ const classes = {
'p-inputnumber-vertical': props.showButtons && props.buttonLayout === 'vertical' 'p-inputnumber-vertical': props.showButtons && props.buttonLayout === 'vertical'
} }
], ],
input: 'p-inputnumber-input', pcInput: 'p-inputnumber-input',
buttonGroup: 'p-inputnumber-button-group', buttonGroup: 'p-inputnumber-button-group',
incrementButton: ({ instance, props }) => [ incrementButton: ({ instance, props }) => [
'p-inputnumber-button p-inputnumber-increment-button', 'p-inputnumber-button p-inputnumber-increment-button',

2
components/lib/inputotp/InputOtp.d.ts vendored
View File

@ -68,7 +68,7 @@ export interface InputOtpPassThroughOptions {
* Used to pass attributes to the InputText component. * Used to pass attributes to the InputText component.
* @see {@link InputTextPassThroughOptions} * @see {@link InputTextPassThroughOptions}
*/ */
input?: InputTextPassThroughOptions<InputOtpSharedPassThroughMethodOptions>; pcInput?: InputTextPassThroughOptions<InputOtpSharedPassThroughMethodOptions>;
/** /**
* Used to manage all lifecycle hooks. * Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks} * @see {@link BaseComponent.ComponentHooks}

4
components/lib/inputotp/InputOtp.vue
View File

@ -5,7 +5,7 @@
<OtpInputText <OtpInputText
:value="tokens[i - 1]" :value="tokens[i - 1]"
:type="inputType" :type="inputType"
:class="cx('input')" :class="cx('pcInput')"
:inputmode="inputMode" :inputmode="inputMode"
:variant="variant" :variant="variant"
:readonly="readonly" :readonly="readonly"
@ -18,7 +18,7 @@
@blur="onBlur($event)" @blur="onBlur($event)"
@paste="onPaste($event)" @paste="onPaste($event)"
@keydown="onKeyDown($event)" @keydown="onKeyDown($event)"
:pt="ptm('input')" :pt="ptm('pcInput')"
/> />
</slot> </slot>
</template> </template>

2
components/lib/inputotp/style/InputOtpStyle.js
View File

@ -15,7 +15,7 @@ const theme = ({ dt }) => `
const classes = { const classes = {
root: 'p-inputotp p-component', root: 'p-inputotp p-component',
input: 'p-inputotp-input' pcInput: 'p-inputotp-input'
}; };
export default BaseStyle.extend({ export default BaseStyle.extend({

2
components/lib/listbox/Listbox.d.ts vendored
View File

@ -130,7 +130,7 @@ export interface ListboxPassThroughOptions<T = any> {
* Used to pass attributes to the InputText component. * Used to pass attributes to the InputText component.
* @see {@link InputTextPassThroughOptions} * @see {@link InputTextPassThroughOptions}
*/ */
filter?: InputTextPassThroughOptions<ListboxSharedPassThroughMethodOptions>; pcFilter?: InputTextPassThroughOptions<ListboxSharedPassThroughMethodOptions>;
/** /**
* Used to pass attributes to the filter icon's DOM element. * Used to pass attributes to the filter icon's DOM element.
*/ */

4
components/lib/listbox/Listbox.vue
View File

@ -19,7 +19,7 @@
<InputText <InputText
v-model="filterValue" v-model="filterValue"
type="text" type="text"
:class="cx('filter')" :class="cx('pcFilter')"
:placeholder="filterPlaceholder" :placeholder="filterPlaceholder"
role="searchbox" role="searchbox"
autocomplete="off" autocomplete="off"
@ -32,7 +32,7 @@
@input="onFilterChange" @input="onFilterChange"
@blur="onFilterBlur" @blur="onFilterBlur"
@keydown="onFilterKeyDown" @keydown="onFilterKeyDown"
:pt="ptm('filter')" :pt="ptm('pcFilter')"
/> />
<slot name="filtericon" :class="cx('filterIcon')"> <slot name="filtericon" :class="cx('filterIcon')">

2
components/lib/listbox/style/ListboxStyle.js
View File

@ -126,7 +126,7 @@ const classes = {
], ],
header: 'p-listbox-header', header: 'p-listbox-header',
filterContainer: 'p-listbox-filter-container', filterContainer: 'p-listbox-filter-container',
filter: 'p-listbox-filter', pcFilter: 'p-listbox-filter',
filterIcon: 'p-listbox-filter-icon', filterIcon: 'p-listbox-filter-icon',
listContainer: 'p-listbox-list-container', listContainer: 'p-listbox-list-container',
list: 'p-listbox-list', list: 'p-listbox-list',

8
components/lib/multiselect/MultiSelect.d.ts vendored
View File

@ -137,7 +137,7 @@ export interface MultiSelectPassThroughOptions {
* Used to pass attributes to the Chip. * Used to pass attributes to the Chip.
* @see {@link ChipPassThroughOptions} * @see {@link ChipPassThroughOptions}
*/ */
chipLabel?: ChipPassThroughOptions<MultiSelectSharedPassThroughMethodOptions>; pcChipLabel?: ChipPassThroughOptions<MultiSelectSharedPassThroughMethodOptions>;
/** /**
* Used to pass attributes to the chip icon's DOM element. * Used to pass attributes to the chip icon's DOM element.
*/ */
@ -161,7 +161,7 @@ export interface MultiSelectPassThroughOptions {
/** /**
* Used to pass attributes to the header checkbox's DOM element. * Used to pass attributes to the header checkbox's DOM element.
*/ */
headerCheckbox?: MultiSelectPassThroughOptionType; pcHeaderCheckbox?: MultiSelectPassThroughOptionType;
/** /**
* Used to pass attributes to the filter container's DOM element. * Used to pass attributes to the filter container's DOM element.
*/ */
@ -170,7 +170,7 @@ export interface MultiSelectPassThroughOptions {
* Used to pass attributes to the InputText component. * Used to pass attributes to the InputText component.
* @see {@link InputTextPassThroughOptions} * @see {@link InputTextPassThroughOptions}
*/ */
filter?: InputTextPassThroughOptions<MultiSelectSharedPassThroughMethodOptions>; pcFilter?: InputTextPassThroughOptions<MultiSelectSharedPassThroughMethodOptions>;
/** /**
* Used to pass attributes to the filter icon's DOM element. * Used to pass attributes to the filter icon's DOM element.
*/ */
@ -203,7 +203,7 @@ export interface MultiSelectPassThroughOptions {
/** /**
* Used to pass attributes to the option checkbox's DOM element. * Used to pass attributes to the option checkbox's DOM element.
*/ */
optionCheckbox?: MultiSelectPassThroughOptionType; pcOptionCheckbox?: MultiSelectPassThroughOptionType;
/** /**
* Used to pass attributes to the emptyMessage's DOM element. * Used to pass attributes to the emptyMessage's DOM element.
*/ */

14
components/lib/multiselect/MultiSelect.vue
View File

@ -33,7 +33,7 @@
<span v-for="item of chipSelectedItems" :key="getLabelByValue(item)" :class="cx('chip')" v-bind="ptm('chip')"> <span v-for="item of chipSelectedItems" :key="getLabelByValue(item)" :class="cx('chip')" v-bind="ptm('chip')">
<slot name="chip" :value="item" :removeCallback="(event) => removeOption(event, item)"> <slot name="chip" :value="item" :removeCallback="(event) => removeOption(event, item)">
<!-- TODO: removetokenicon and removeTokenIcon deprecated since v4.0. Use chipicon slot and chipIcon prop--> <!-- TODO: removetokenicon and removeTokenIcon deprecated since v4.0. Use chipicon slot and chipIcon prop-->
<Chip :class="cx('chipLabel')" :label="getLabelByValue(item)" :removeIcon="chipIcon || removeTokenIcon" removable :unstyled="unstyled" @remove="removeOption($event, item)" :pt="ptm('chipLabel')"> <Chip :class="cx('pcChipLabel')" :label="getLabelByValue(item)" :removeIcon="chipIcon || removeTokenIcon" removable :unstyled="unstyled" @remove="removeOption($event, item)" :pt="ptm('pcChipLabel')">
<template #removeicon> <template #removeicon>
<slot :name="$slots.chipicon ? 'chipicon' : 'removetokenicon'" :class="cx('chipIcon')" :item="item" :removeCallback="(event) => removeOption(event, item)" /> <slot :name="$slots.chipicon ? 'chipicon' : 'removetokenicon'" :class="cx('chipIcon')" :item="item" :removeCallback="(event) => removeOption(event, item)" />
</template> </template>
@ -79,11 +79,11 @@
:aria-label="toggleAllAriaLabel" :aria-label="toggleAllAriaLabel"
@change="onToggleAll" @change="onToggleAll"
:unstyled="unstyled" :unstyled="unstyled"
:pt="getHeaderCheckboxPTOptions('headerCheckbox')" :pt="getHeaderCheckboxPTOptions('pcHeaderCheckbox')"
> >
<template #icon="slotProps"> <template #icon="slotProps">
<component v-if="$slots.headercheckboxicon" :is="$slots.headercheckboxicon" :checked="slotProps.checked" :class="slotProps.class" /> <component v-if="$slots.headercheckboxicon" :is="$slots.headercheckboxicon" :checked="slotProps.checked" :class="slotProps.class" />
<component v-else-if="slotProps.checked" :is="checkboxIcon ? 'span' : 'CheckIcon'" :class="[slotProps.class, { [checkboxIcon]: slotProps.checked }]" v-bind="getHeaderCheckboxPTOptions('headerCheckbox.icon')" /> <component v-else-if="slotProps.checked" :is="checkboxIcon ? 'span' : 'CheckIcon'" :class="[slotProps.class, { [checkboxIcon]: slotProps.checked }]" v-bind="getHeaderCheckboxPTOptions('pcHeaderCheckbox.icon')" />
</template> </template>
</Checkbox> </Checkbox>
<div v-if="filter" :class="cx('filterContainer')" v-bind="ptm('filterContainer')"> <div v-if="filter" :class="cx('filterContainer')" v-bind="ptm('filterContainer')">
@ -92,7 +92,7 @@
:value="filterValue" :value="filterValue"
@vue:mounted="onFilterUpdated" @vue:mounted="onFilterUpdated"
@vue:updated="onFilterUpdated" @vue:updated="onFilterUpdated"
:class="cx('filter')" :class="cx('pcFilter')"
:placeholder="filterPlaceholder" :placeholder="filterPlaceholder"
:invalid="invalid" :invalid="invalid"
:disabled="disabled" :disabled="disabled"
@ -105,7 +105,7 @@
@keydown="onFilterKeyDown" @keydown="onFilterKeyDown"
@blur="onFilterBlur" @blur="onFilterBlur"
@input="onFilterChange" @input="onFilterChange"
:pt="ptm('filter')" :pt="ptm('pcFilter')"
/> />
<slot name="filtericon" :class="cx('filterIcon')"> <slot name="filtericon" :class="cx('filterIcon')">
<component :is="filterIcon ? 'span' : 'SearchIcon'" :class="[cx('filterIcon'), filterIcon]" v-bind="ptm('filterIcon')" /> <component :is="filterIcon ? 'span' : 'SearchIcon'" :class="[cx('filterIcon'), filterIcon]" v-bind="ptm('filterIcon')" />
@ -149,14 +149,14 @@
:data-p-focused="focusedOptionIndex === getOptionIndex(i, getItemOptions)" :data-p-focused="focusedOptionIndex === getOptionIndex(i, getItemOptions)"
:data-p-disabled="isOptionDisabled(option)" :data-p-disabled="isOptionDisabled(option)"
> >
<Checkbox :modelValue="isSelected(option)" :binary="true" :tabindex="-1" :variant="variant" :unstyled="unstyled" :pt="getCheckboxPTOptions(option, getItemOptions, i, 'optionCheckbox')"> <Checkbox :modelValue="isSelected(option)" :binary="true" :tabindex="-1" :variant="variant" :unstyled="unstyled" :pt="getCheckboxPTOptions(option, getItemOptions, i, 'pcOptionCheckbox')">
<template #icon="slotProps"> <template #icon="slotProps">
<component v-if="$slots.optioncheckboxicon || $slots.itemcheckboxicon" :is="$slots.optioncheckboxicon || $slots.itemcheckboxicon" :checked="slotProps.checked" :class="slotProps.class" /> <component v-if="$slots.optioncheckboxicon || $slots.itemcheckboxicon" :is="$slots.optioncheckboxicon || $slots.itemcheckboxicon" :checked="slotProps.checked" :class="slotProps.class" />
<component <component
v-else-if="slotProps.checked" v-else-if="slotProps.checked"
:is="checkboxIcon ? 'span' : 'CheckIcon'" :is="checkboxIcon ? 'span' : 'CheckIcon'"
:class="[slotProps.class, { [checkboxIcon]: slotProps.checked }]" :class="[slotProps.class, { [checkboxIcon]: slotProps.checked }]"
v-bind="getCheckboxPTOptions(option, getItemOptions, i, 'optionCheckbox.icon')" v-bind="getCheckboxPTOptions(option, getItemOptions, i, 'pcOptionCheckbox.icon')"
/> />
</template> </template>
</Checkbox> </Checkbox>

4
components/lib/multiselect/style/MultiSelectStyle.js
View File

@ -230,7 +230,7 @@ const classes = {
} }
], ],
chip: 'p-multiselect-chip', chip: 'p-multiselect-chip',
chipLabel: 'p-multiselect-chip-label', pcChipLabel: 'p-multiselect-chip-label',
chipIcon: 'p-multiselect-chip-icon', chipIcon: 'p-multiselect-chip-icon',
dropdown: 'p-multiselect-dropdown', dropdown: 'p-multiselect-dropdown',
loadingIcon: 'p-multiselect-loading-icon', loadingIcon: 'p-multiselect-loading-icon',
@ -243,7 +243,7 @@ const classes = {
], ],
header: 'p-multiselect-header', header: 'p-multiselect-header',
filterContainer: 'p-multiselect-filter-container', filterContainer: 'p-multiselect-filter-container',
filter: 'p-multiselect-filter', pcFilter: 'p-multiselect-filter',
filterIcon: 'p-multiselect-filter-icon', filterIcon: 'p-multiselect-filter-icon',
listContainer: 'p-multiselect-list-container', listContainer: 'p-multiselect-list-container',
list: 'p-multiselect-list', list: 'p-multiselect-list',

10
components/lib/orderlist/OrderList.d.ts vendored
View File

@ -113,22 +113,22 @@ export interface OrderListPassThroughOptions {
* Used to pass attributes to the Button component. * Used to pass attributes to the Button component.
* @see {@link ButtonPassThroughOptions} * @see {@link ButtonPassThroughOptions}
*/ */
moveUpButton?: ButtonPassThroughOptions<OrderListSharedPassThroughMethodOptions>; pcMoveUpButton?: ButtonPassThroughOptions<OrderListSharedPassThroughMethodOptions>;
/** /**
* Used to pass attributes to the Button component. * Used to pass attributes to the Button component.
* @see {@link ButtonPassThroughOptions} * @see {@link ButtonPassThroughOptions}
*/ */
moveTopButton?: ButtonPassThroughOptions<OrderListSharedPassThroughMethodOptions>; pcMoveTopButton?: ButtonPassThroughOptions<OrderListSharedPassThroughMethodOptions>;
/** /**
* Used to pass attributes to the Button component. * Used to pass attributes to the Button component.
* @see {@link ButtonPassThroughOptions} * @see {@link ButtonPassThroughOptions}
*/ */
moveDownButton?: ButtonPassThroughOptions<OrderListSharedPassThroughMethodOptions>; pcMoveDownButton?: ButtonPassThroughOptions<OrderListSharedPassThroughMethodOptions>;
/** /**
* Used to pass attributes to the Button component. * Used to pass attributes to the Button component.
* @see {@link ButtonPassThroughOptions} * @see {@link ButtonPassThroughOptions}
*/ */
moveBottomButton?: ButtonPassThroughOptions<OrderListSharedPassThroughMethodOptions>; pcMoveBottomButton?: ButtonPassThroughOptions<OrderListSharedPassThroughMethodOptions>;
/** /**
* Used to pass attributes to the container's DOM element. * Used to pass attributes to the container's DOM element.
*/ */
@ -137,7 +137,7 @@ export interface OrderListPassThroughOptions {
* Used to pass attributes to the Listbox component. * Used to pass attributes to the Listbox component.
* @see {@link ListboxPassThroughOptions} * @see {@link ListboxPassThroughOptions}
*/ */
list?: ListboxPassThroughOptions<OrderListSharedPassThroughMethodOptions>; pcList?: ListboxPassThroughOptions<OrderListSharedPassThroughMethodOptions>;
/** /**
* Used to manage all lifecycle hooks. * Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks} * @see {@link BaseComponent.ComponentHooks}

18
components/lib/orderlist/OrderList.vue
View File

@ -2,31 +2,31 @@
<div :class="cx('root')" v-bind="ptmi('root')"> <div :class="cx('root')" v-bind="ptmi('root')">
<div :class="cx('controls')" v-bind="ptm('controls')"> <div :class="cx('controls')" v-bind="ptm('controls')">
<slot name="controlsstart"></slot> <slot name="controlsstart"></slot>
<Button @click="moveUp" :aria-label="moveUpAriaLabel" :disabled="moveDisabled()" v-bind="{ ...buttonProps, ...moveUpButtonProps }" :pt="ptm('moveUpButton')" :unstyled="unstyled"> <Button @click="moveUp" :aria-label="moveUpAriaLabel" :disabled="moveDisabled()" v-bind="{ ...buttonProps, ...moveUpButtonProps }" :pt="ptm('pcMoveUpButton')" :unstyled="unstyled">
<template #icon> <template #icon>
<slot name="moveupicon"> <slot name="moveupicon">
<AngleUpIcon v-bind="ptm('moveUpButton')['icon']" data-pc-section="moveupicon" /> <AngleUpIcon v-bind="ptm('pcMoveUpButton')['icon']" data-pc-section="moveupicon" />
</slot> </slot>
</template> </template>
</Button> </Button>
<Button @click="moveTop" :aria-label="moveTopAriaLabel" :disabled="moveDisabled()" v-bind="{ ...buttonProps, ...moveTopButtonProps }" :pt="ptm('moveTopButton')" :unstyled="unstyled"> <Button @click="moveTop" :aria-label="moveTopAriaLabel" :disabled="moveDisabled()" v-bind="{ ...buttonProps, ...moveTopButtonProps }" :pt="ptm('pcMoveTopButton')" :unstyled="unstyled">
<template #icon> <template #icon>
<slot name="movetopicon"> <slot name="movetopicon">
<AngleDoubleUpIcon v-bind="ptm('moveTopButton')['icon']" data-pc-section="movetopicon" /> <AngleDoubleUpIcon v-bind="ptm('pcMoveTopButton')['icon']" data-pc-section="movetopicon" />
</slot> </slot>
</template> </template>
</Button> </Button>
<Button @click="moveDown" :aria-label="moveDownAriaLabel" :disabled="moveDisabled()" v-bind="{ ...buttonProps, ...moveDownButtonProps }" :pt="ptm('moveDownButton')" :unstyled="unstyled"> <Button @click="moveDown" :aria-label="moveDownAriaLabel" :disabled="moveDisabled()" v-bind="{ ...buttonProps, ...moveDownButtonProps }" :pt="ptm('pcMoveDownButton')" :unstyled="unstyled">
<template #icon> <template #icon>
<slot name="movedownicon"> <slot name="movedownicon">
<AngleDownIcon v-bind="ptm('moveDownButton')['icon']" data-pc-section="movedownicon" /> <AngleDownIcon v-bind="ptm('pcMoveDownButton')['icon']" data-pc-section="movedownicon" />
</slot> </slot>
</template> </template>
</Button> </Button>
<Button @click="moveBottom" :aria-label="moveBottomAriaLabel" :disabled="moveDisabled()" v-bind="{ ...buttonProps, ...moveBottomButtonProps }" :pt="ptm('moveBottomButton')" :unstyled="unstyled"> <Button @click="moveBottom" :aria-label="moveBottomAriaLabel" :disabled="moveDisabled()" v-bind="{ ...buttonProps, ...moveBottomButtonProps }" :pt="ptm('pcMoveBottomButton')" :unstyled="unstyled">
<template #icon> <template #icon>
<slot name="movebottomicon"> <slot name="movebottomicon">
<AngleDoubleDownIcon v-bind="ptm('moveBottomButton')['icon']" data-pc-section="movebottomicon" /> <AngleDoubleDownIcon v-bind="ptm('pcMoveBottomButton')['icon']" data-pc-section="movebottomicon" />
</slot> </slot>
</template> </template>
</Button> </Button>
@ -49,7 +49,7 @@
:disabled="disabled" :disabled="disabled"
:ariaLabel="ariaLabel" :ariaLabel="ariaLabel"
:ariaLabelledby="ariaLabelledby" :ariaLabelledby="ariaLabelledby"
:pt="ptm('list')" :pt="ptm('pcList')"
:unstyled="unstyled" :unstyled="unstyled"
@focus="onListFocus" @focus="onListFocus"
@blur="onListBlur" @blur="onListBlur"

4
components/lib/paginator/JumpToPageDropdown.vue
View File

@ -5,10 +5,10 @@
optionLabel="label" optionLabel="label"
optionValue="value" optionValue="value"
@update:modelValue="onChange($event)" @update:modelValue="onChange($event)"
:class="cx('jumpToPageDropdown')" :class="cx('pcJumpToPageDropdown')"
:disabled="disabled" :disabled="disabled"
:unstyled="unstyled" :unstyled="unstyled"
:pt="ptm('jumpToPageDropdown')" :pt="ptm('pcJumpToPageDropdown')"
data-pc-group-section="pagedropdown" data-pc-group-section="pagedropdown"
> >
<template v-if="templates['jumptopagedropdownicon']" #dropdownicon="slotProps"> <template v-if="templates['jumptopagedropdownicon']" #dropdownicon="slotProps">

2
components/lib/paginator/JumpToPageInput.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<JTPInput ref="jtpInput" :modelValue="d_page" :class="cx('jumpToPageInput')" :aria-label="inputArialabel" :disabled="disabled" @update:modelValue="onChange" :unstyled="unstyled" :pt="ptm('jumpToPageInput')"></JTPInput> <JTPInput ref="jtpInput" :modelValue="d_page" :class="cx('pcJumpToPageInput')" :aria-label="inputArialabel" :disabled="disabled" @update:modelValue="onChange" :unstyled="unstyled" :pt="ptm('pcJumpToPageInput')"></JTPInput>
</template> </template>
<script> <script>

6
components/lib/paginator/Paginator.d.ts vendored
View File

@ -125,17 +125,17 @@ export interface PaginatorPassThroughOptions<T = any> {
* Used to pass attributes to the Dropdown component. * Used to pass attributes to the Dropdown component.
* @see {@link DropdownPassThroughOptions} * @see {@link DropdownPassThroughOptions}
*/ */
rowPerPageDropdown?: DropdownPassThroughOptions<PaginatorSharedPassThroughMethodOptions>; pcRowPerPageDropdown?: DropdownPassThroughOptions<PaginatorSharedPassThroughMethodOptions>;
/** /**
* Used to pass attributes to the Dropdown component. * Used to pass attributes to the Dropdown component.
* @see {@link DropdownPassThroughOptions} * @see {@link DropdownPassThroughOptions}
*/ */
jumpToPageDropdown?: DropdownPassThroughOptions<PaginatorSharedPassThroughMethodOptions>; pcJumpToPageDropdown?: DropdownPassThroughOptions<PaginatorSharedPassThroughMethodOptions>;
/** /**
* Used to pass attributes to the Dropdown component. * Used to pass attributes to the Dropdown component.
* @see {@link InputNumberPassThroughOptions} * @see {@link InputNumberPassThroughOptions}
*/ */
jumpToPageInput?: InputNumberPassThroughOptions<PaginatorSharedPassThroughMethodOptions>; pcJumpToPageInput?: InputNumberPassThroughOptions<PaginatorSharedPassThroughMethodOptions>;
/** /**
* Used to pass attributes to the content end's DOM element. * Used to pass attributes to the content end's DOM element.
*/ */

4
components/lib/paginator/RowsPerPageDropdown.vue
View File

@ -5,10 +5,10 @@
optionLabel="label" optionLabel="label"
optionValue="value" optionValue="value"
@update:modelValue="onChange($event)" @update:modelValue="onChange($event)"
:class="cx('rowPerPageDropdown')" :class="cx('pcRowPerPageDropdown')"
:disabled="disabled" :disabled="disabled"
:unstyled="unstyled" :unstyled="unstyled"
:pt="ptm('rowPerPageDropdown')" :pt="ptm('pcRowPerPageDropdown')"
data-pc-group-section="pagedropdown" data-pc-group-section="pagedropdown"
> >
<template v-if="templates['rowsperpagedropdownicon']" #dropdownicon="slotProps"> <template v-if="templates['rowsperpagedropdownicon']" #dropdownicon="slotProps">

6
components/lib/paginator/style/PaginatorStyle.js
View File

@ -130,9 +130,9 @@ const classes = {
} }
], ],
current: 'p-paginator-current', current: 'p-paginator-current',
rowPerPageDropdown: 'p-paginator-rpp-dropdown', pcRowPerPageDropdown: 'p-paginator-rpp-dropdown',
jumpToPageDropdown: 'p-paginator-jtp-dropdown', pcJumpToPageDropdown: 'p-paginator-jtp-dropdown',
jumpToPageInput: 'p-paginator-jtp-input' pcJumpToPageInput: 'p-paginator-jtp-input'
}; };
export default BaseStyle.extend({ export default BaseStyle.extend({

2
components/lib/panel/Panel.d.ts vendored
View File

@ -101,7 +101,7 @@ export interface PanelPassThroughOptions {
* Used to pass attributes to the toggle button button's DOM element. * Used to pass attributes to the toggle button button's DOM element.
* @see {@link ButtonPassThroughOptions} * @see {@link ButtonPassThroughOptions}
*/ */
toggleButton?: ButtonPassThroughOptions<PanelSharedPassThroughMethodOptions>; pcToggleButton?: ButtonPassThroughOptions<PanelSharedPassThroughMethodOptions>;
/** /**
* Used to pass attributes to the content container's DOM element. * Used to pass attributes to the content container's DOM element.
*/ */

6
components/lib/panel/Panel.vue
View File

@ -9,7 +9,7 @@
<Button <Button
v-if="toggleable" v-if="toggleable"
:id="id + '_header'" :id="id + '_header'"
:class="cx('toggleButton')" :class="cx('pcToggleButton')"
:aria-label="buttonAriaLabel" :aria-label="buttonAriaLabel"
:aria-controls="id + '_content'" :aria-controls="id + '_content'"
:aria-expanded="!d_collapsed" :aria-expanded="!d_collapsed"
@ -17,12 +17,12 @@
@click="toggle" @click="toggle"
@keydown="onKeyDown" @keydown="onKeyDown"
v-bind="toggleButtonProps" v-bind="toggleButtonProps"
:pt="ptm('toggleButton')" :pt="ptm('pcToggleButton')"
> >
<template #icon="slotProps"> <template #icon="slotProps">
<!--TODO: togglericon deprecated since v4.0--> <!--TODO: togglericon deprecated since v4.0-->
<slot :name="$slots.toggleicon ? 'toggleicon' : 'togglericon'" :collapsed="d_collapsed"> <slot :name="$slots.toggleicon ? 'toggleicon' : 'togglericon'" :collapsed="d_collapsed">
<component :is="d_collapsed ? 'PlusIcon' : 'MinusIcon'" :class="slotProps.class" v-bind="ptm('toggleButton')['icon']" /> <component :is="d_collapsed ? 'PlusIcon' : 'MinusIcon'" :class="slotProps.class" v-bind="ptm('pcToggleButton')['icon']" />
</slot> </slot>
</template> </template>
</Button> </Button>

2
components/lib/panel/style/PanelStyle.js
View File

@ -43,7 +43,7 @@ const classes = {
header: 'p-panel-header', header: 'p-panel-header',
title: 'p-panel-title', title: 'p-panel-title',
headerActions: 'p-panel-header-actions', headerActions: 'p-panel-header-actions',
toggleButton: 'p-panel-toggle-button', pcToggleButton: 'p-panel-toggle-button',
contentContainer: 'p-panel-content-container', contentContainer: 'p-panel-content-container',
content: 'p-panel-content', content: 'p-panel-content',
footer: 'p-panel-footer' footer: 'p-panel-footer'

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

@ -74,7 +74,7 @@ export interface PasswordPassThroughOptions {
* Used to pass attributes to the InputText component. * Used to pass attributes to the InputText component.
* @see {@link InputTextPassThroughOptions} * @see {@link InputTextPassThroughOptions}
*/ */
input?: InputTextPassThroughOptions<PasswordSharedPassThroughMethodOptions>; ptInput?: InputTextPassThroughOptions<PasswordSharedPassThroughMethodOptions>;
/** /**
* Used to pass attributes to the mask icon's DOM element. * Used to pass attributes to the mask icon's DOM element.
*/ */

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

@ -4,7 +4,7 @@
ref="input" ref="input"
:id="inputId" :id="inputId"
:type="inputType" :type="inputType"
:class="[cx('input'), inputClass]" :class="[cx('ptInput'), inputClass]"
:style="inputStyle" :style="inputStyle"
:value="modelValue" :value="modelValue"
:aria-labelledby="ariaLabelledby" :aria-labelledby="ariaLabelledby"
@ -23,7 +23,7 @@
@keyup="onKeyUp" @keyup="onKeyUp"
@invalid="onInvalid" @invalid="onInvalid"
v-bind="inputProps" v-bind="inputProps"
:pt="ptm('input')" :pt="ptm('ptInput')"
:unstyled="unstyled" :unstyled="unstyled"
/> />
<!-- TODO: hide* and show* deprecated since v4.0--> <!-- TODO: hide* and show* deprecated since v4.0-->

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

@ -81,7 +81,7 @@ const classes = {
'p-inputwrapper-focus': instance.focused 'p-inputwrapper-focus': instance.focused
} }
], ],
input: 'p-password-input', ptInput: 'p-password-input',
maskIcon: 'p-password-toggle-mask-icon p-password-mask-icon', maskIcon: 'p-password-toggle-mask-icon p-password-mask-icon',
unmaskIcon: 'p-password-toggle-mask-icon p-password-unmask-icon', unmaskIcon: 'p-password-toggle-mask-icon p-password-unmask-icon',
overlay: ({ instance }) => [ overlay: ({ instance }) => [

21
components/lib/picklist/PickList.d.ts vendored
View File

@ -10,6 +10,7 @@
import { TransitionProps, VNode } from 'vue'; import { TransitionProps, VNode } from 'vue';
import { ComponentHooks } from '../basecomponent'; import { ComponentHooks } from '../basecomponent';
import { ButtonPassThroughOptions } from '../button'; import { ButtonPassThroughOptions } from '../button';
import { ListboxPassThroughOptions } from '../listbox';
import { PassThroughOptions } from '../passthrough'; import { PassThroughOptions } from '../passthrough';
import { ClassComponent, DesignToken, GlobalComponentConstructor, PassThrough } from '../ts-helpers'; import { ClassComponent, DesignToken, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
@ -155,19 +156,23 @@ export interface PickListPassThroughOptions {
/** /**
* Used to pass attributes to the Button component. * Used to pass attributes to the Button component.
*/ */
sourceMoveUpButton?: ButtonPassThroughOptions<PickListSharedPassThroughMethodOptions>; pcSourceMoveUpButton?: ButtonPassThroughOptions<PickListSharedPassThroughMethodOptions>;
/** /**
* Used to pass attributes to the Button component. * Used to pass attributes to the Button component.
*/ */
sourceMoveTopButton?: ButtonPassThroughOptions<PickListSharedPassThroughMethodOptions>; pcSourceMoveTopButton?: ButtonPassThroughOptions<PickListSharedPassThroughMethodOptions>;
/** /**
* Used to pass attributes to the Button component. * Used to pass attributes to the Button component.
*/ */
sourceMoveDownButton?: ButtonPassThroughOptions<PickListSharedPassThroughMethodOptions>; pcSourceMoveDownButton?: ButtonPassThroughOptions<PickListSharedPassThroughMethodOptions>;
/** /**
* Used to pass attributes to the Button component. * Used to pass attributes to the Button component.
*/ */
sourceMoveBottomButton?: ButtonPassThroughOptions<PickListSharedPassThroughMethodOptions>; pcSourceMoveBottomButton?: ButtonPassThroughOptions<PickListSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the Listbox component.
*/
pcList?: ListboxPassThroughOptions<PickListSharedPassThroughMethodOptions>;
/** /**
* Used to pass attributes to the source list containerr's DOM element. * Used to pass attributes to the source list containerr's DOM element.
*/ */
@ -215,19 +220,19 @@ export interface PickListPassThroughOptions {
/** /**
* Used to pass attributes to the Button component. * Used to pass attributes to the Button component.
*/ */
targetMoveUpButton?: ButtonPassThroughOptions<PickListSharedPassThroughMethodOptions>; pcTargetMoveUpButton?: ButtonPassThroughOptions<PickListSharedPassThroughMethodOptions>;
/** /**
* Used to pass attributes to the Button component. * Used to pass attributes to the Button component.
*/ */
targetMoveTopButton?: ButtonPassThroughOptions<PickListSharedPassThroughMethodOptions>; pcTargetMoveTopButton?: ButtonPassThroughOptions<PickListSharedPassThroughMethodOptions>;
/** /**
* Used to pass attributes to the Button component. * Used to pass attributes to the Button component.
*/ */
targetMoveDownButton?: ButtonPassThroughOptions<PickListSharedPassThroughMethodOptions>; pcTargetMoveDownButton?: ButtonPassThroughOptions<PickListSharedPassThroughMethodOptions>;
/** /**
* Used to pass attributes to the Button component. * Used to pass attributes to the Button component.
*/ */
targetMoveBottomButton?: ButtonPassThroughOptions<PickListSharedPassThroughMethodOptions>; pcTargetMoveBottomButton?: ButtonPassThroughOptions<PickListSharedPassThroughMethodOptions>;
/** /**
* Used to manage all lifecycle hooks. * Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks} * @see {@link BaseComponent.ComponentHooks}

37
components/lib/picklist/PickList.vue
View File

@ -2,31 +2,31 @@
<div :class="cx('root')" v-bind="ptmi('root')"> <div :class="cx('root')" v-bind="ptmi('root')">
<div v-if="showSourceControls" :class="cx('sourceControls')" v-bind="ptm('sourceControls')" data-pc-group-section="controls"> <div v-if="showSourceControls" :class="cx('sourceControls')" v-bind="ptm('sourceControls')" data-pc-group-section="controls">
<slot name="sourcecontrolsstart"></slot> <slot name="sourcecontrolsstart"></slot>
<Button :aria-label="moveUpAriaLabel" :disabled="moveDisabled(0)" @click="moveUp($event, 0)" v-bind="{ ...buttonProps, ...moveUpButtonProps }" :pt="ptm('sourceMoveUpButton')" :unstyled="unstyled"> <Button :aria-label="moveUpAriaLabel" :disabled="moveDisabled(0)" @click="moveUp($event, 0)" v-bind="{ ...buttonProps, ...moveUpButtonProps }" :pt="ptm('pcSourceMoveUpButton')" :unstyled="unstyled">
<template #icon> <template #icon>
<slot name="moveupicon"> <slot name="moveupicon">
<AngleUpIcon v-bind="ptm('sourceMoveUpButton')['icon']" data-pc-section="moveupicon" /> <AngleUpIcon v-bind="ptm('pcSourceMoveUpButton')['icon']" data-pc-section="moveupicon" />
</slot> </slot>
</template> </template>
</Button> </Button>
<Button :aria-label="moveTopAriaLabel" :disabled="moveDisabled(0)" @click="moveTop($event, 0)" v-bind="{ ...buttonProps, ...moveTopButtonProps }" :pt="ptm('sourceMoveTopButton')" :unstyled="unstyled"> <Button :aria-label="moveTopAriaLabel" :disabled="moveDisabled(0)" @click="moveTop($event, 0)" v-bind="{ ...buttonProps, ...moveTopButtonProps }" :pt="ptm('pcSourceMoveTopButton')" :unstyled="unstyled">
<template #icon> <template #icon>
<slot name="movetopicon"> <slot name="movetopicon">
<AngleDoubleUpIcon v-bind="ptm('sourceMoveTopButton')['icon']" data-pc-section="movetopicon" /> <AngleDoubleUpIcon v-bind="ptm('pcSourceMoveTopButton')['icon']" data-pc-section="movetopicon" />
</slot> </slot>
</template> </template>
</Button> </Button>
<Button :aria-label="moveDownAriaLabel" :disabled="moveDisabled(0)" @click="moveDown($event, 0)" v-bind="{ ...buttonProps, ...moveDownButtonProps }" :pt="ptm('sourceMoveDownButton')" :unstyled="unstyled"> <Button :aria-label="moveDownAriaLabel" :disabled="moveDisabled(0)" @click="moveDown($event, 0)" v-bind="{ ...buttonProps, ...moveDownButtonProps }" :pt="ptm('pcSourceMoveDownButton')" :unstyled="unstyled">
<template #icon> <template #icon>
<slot name="movedownicon"> <slot name="movedownicon">
<AngleDownIcon v-bind="ptm('sourceMoveDownButton')['icon']" data-pc-section="movedownicon" /> <AngleDownIcon v-bind="ptm('pcSourceMoveDownButton')['icon']" data-pc-section="movedownicon" />
</slot> </slot>
</template> </template>
</Button> </Button>
<Button :aria-label="moveBottomAriaLabel" :disabled="moveDisabled(0)" @click="moveBottom($event, 0)" v-bind="{ ...buttonProps, ...moveBottomButtonProps }" :pt="ptm('sourceMoveBottomButton')" :unstyled="unstyled"> <Button :aria-label="moveBottomAriaLabel" :disabled="moveDisabled(0)" @click="moveBottom($event, 0)" v-bind="{ ...buttonProps, ...moveBottomButtonProps }" :pt="ptm('pcSourceMoveBottomButton')" :unstyled="unstyled">
<template #icon> <template #icon>
<slot name="movebottomicon"> <slot name="movebottomicon">
<AngleDoubleDownIcon v-bind="ptm('sourceMoveBottomButton')['icon']" data-pc-section="movebottomicon" /> <AngleDoubleDownIcon v-bind="ptm('pcSourceMoveBottomButton')['icon']" data-pc-section="movebottomicon" />
</slot> </slot>
</template> </template>
</Button> </Button>
@ -48,7 +48,7 @@
:focusOnHover="focusOnHover" :focusOnHover="focusOnHover"
:stripedRows="stripedRows" :stripedRows="stripedRows"
:disabled="disabled" :disabled="disabled"
:pt="ptm('list')" :pt="ptm('pcList')"
:unstyled="unstyled" :unstyled="unstyled"
@focus="onListFocus($event, 'sourceList')" @focus="onListFocus($event, 'sourceList')"
@blur="onListBlur($event, 'sourceList')" @blur="onListBlur($event, 'sourceList')"
@ -112,7 +112,7 @@
:focusOnHover="focusOnHover" :focusOnHover="focusOnHover"
:stripedRows="stripedRows" :stripedRows="stripedRows"
:disabled="disabled" :disabled="disabled"
:pt="ptm('list')" :pt="ptm('pcList')"
:unstyled="unstyled" :unstyled="unstyled"
@focus="onListFocus($event, 'targetList')" @focus="onListFocus($event, 'targetList')"
@blur="onListBlur($event, 'targetList')" @blur="onListBlur($event, 'targetList')"
@ -130,31 +130,31 @@
</div> </div>
<div v-if="showTargetControls" :class="cx('targetControls')" v-bind="ptm('targetControls')" data-pc-group-section="controls"> <div v-if="showTargetControls" :class="cx('targetControls')" v-bind="ptm('targetControls')" data-pc-group-section="controls">
<slot name="targetcontrolsstart"></slot> <slot name="targetcontrolsstart"></slot>
<Button :aria-label="moveUpAriaLabel" :disabled="moveDisabled(1)" @click="moveUp($event, 1)" v-bind="{ ...buttonProps, ...moveUpButtonProps }" :pt="ptm('targetMoveUpButton')" :unstyled="unstyled"> <Button :aria-label="moveUpAriaLabel" :disabled="moveDisabled(1)" @click="moveUp($event, 1)" v-bind="{ ...buttonProps, ...moveUpButtonProps }" :pt="ptm('pcTargetMoveUpButton')" :unstyled="unstyled">
<template #icon> <template #icon>
<slot name="moveupicon"> <slot name="moveupicon">
<AngleUpIcon v-bind="ptm('targetMoveUpButton')['icon']" data-pc-section="moveupicon" /> <AngleUpIcon v-bind="ptm('pcTargetMoveUpButton')['icon']" data-pc-section="moveupicon" />
</slot> </slot>
</template> </template>
</Button> </Button>
<Button :aria-label="moveTopAriaLabel" :disabled="moveDisabled(1)" @click="moveTop($event, 1)" v-bind="{ ...buttonProps, ...moveTopButtonProps }" :pt="ptm('targetMoveTopButton')" :unstyled="unstyled"> <Button :aria-label="moveTopAriaLabel" :disabled="moveDisabled(1)" @click="moveTop($event, 1)" v-bind="{ ...buttonProps, ...moveTopButtonProps }" :pt="ptm('pcTargetMoveTopButton')" :unstyled="unstyled">
<template #icon> <template #icon>
<slot name="movetopicon"> <slot name="movetopicon">
<AngleDoubleUpIcon v-bind="ptm('targetMoveTopButton')['icon']" data-pc-section="movetopicon" /> <AngleDoubleUpIcon v-bind="ptm('pcTargetMoveTopButton')['icon']" data-pc-section="movetopicon" />
</slot> </slot>
</template> </template>
</Button> </Button>
<Button :aria-label="moveDownAriaLabel" :disabled="moveDisabled(1)" @click="moveDown($event, 1)" v-bind="{ ...buttonProps, ...moveDownButtonProps }" :pt="ptm('targetMoveDownButton')" :unstyled="unstyled"> <Button :aria-label="moveDownAriaLabel" :disabled="moveDisabled(1)" @click="moveDown($event, 1)" v-bind="{ ...buttonProps, ...moveDownButtonProps }" :pt="ptm('pcTargetMoveDownButton')" :unstyled="unstyled">
<template #icon> <template #icon>
<slot name="movedownicon"> <slot name="movedownicon">
<AngleDownIcon v-bind="ptm('targetMoveDownButton')['icon']" data-pc-section="movedownicon" /> <AngleDownIcon v-bind="ptm('pcTargetMoveDownButton')['icon']" data-pc-section="movedownicon" />
</slot> </slot>
</template> </template>
</Button> </Button>
<Button :aria-label="moveBottomAriaLabel" :disabled="moveDisabled(1)" @click="moveBottom($event, 1)" v-bind="{ ...buttonProps, ...moveBottomButtonProps }" :pt="ptm('targetMoveBottomButton')" :unstyled="unstyled"> <Button :aria-label="moveBottomAriaLabel" :disabled="moveDisabled(1)" @click="moveBottom($event, 1)" v-bind="{ ...buttonProps, ...moveBottomButtonProps }" :pt="ptm('pcTargetMoveBottomButton')" :unstyled="unstyled">
<template #icon> <template #icon>
<slot name="movebottomicon"> <slot name="movebottomicon">
<AngleDoubleDownIcon v-bind="ptm('targetMoveBottomButton')['icon']" data-pc-section="movebottomicon" /> <AngleDoubleDownIcon v-bind="ptm('pcTargetMoveBottomButton')['icon']" data-pc-section="movebottomicon" />
</slot> </slot>
</template> </template>
</Button> </Button>
@ -635,6 +635,7 @@ export default {
}, },
components: { components: {
Listbox, Listbox,
Button,
AngleRightIcon, AngleRightIcon,
AngleLeftIcon, AngleLeftIcon,
AngleDownIcon, AngleDownIcon,

4
components/lib/select/Select.d.ts vendored
View File

@ -115,9 +115,9 @@ export interface SelectPassThroughOptions<T = any> {
*/ */
filterContainer?: SelectPassThroughOptionType<T>; filterContainer?: SelectPassThroughOptionType<T>;
/** /**
* Used to pass attributes to the filter's DOM element. * Used to pass attributes to the InputText component.
*/ */
filter?: SelectPassThroughOptionType<T>; pcFilter?: SelectPassThroughOptionType<T>;
/** /**
* Used to pass attributes to the filter icon's DOM element. * Used to pass attributes to the filter icon's DOM element.
*/ */

4
components/lib/select/Select.vue
View File

@ -83,7 +83,7 @@
:value="filterValue" :value="filterValue"
@vue:mounted="onFilterUpdated" @vue:mounted="onFilterUpdated"
@vue:updated="onFilterUpdated" @vue:updated="onFilterUpdated"
:class="cx('filter')" :class="cx('pcFilter')"
:placeholder="filterPlaceholder" :placeholder="filterPlaceholder"
:invalid="invalid" :invalid="invalid"
:variant="variant" :variant="variant"
@ -95,7 +95,7 @@
@keydown="onFilterKeyDown" @keydown="onFilterKeyDown"
@blur="onFilterBlur" @blur="onFilterBlur"
@input="onFilterChange" @input="onFilterChange"
:pt="ptm('filter')" :pt="ptm('pcFilter')"
/> />
<slot name="filtericon" :class="cx('filterIcon')"> <slot name="filtericon" :class="cx('filterIcon')">
<component :is="filterIcon ? 'span' : 'SearchIcon'" :class="[cx('filterIcon'), filterIcon]" v-bind="ptm('filterIcon')" /> <component :is="filterIcon ? 'span' : 'SearchIcon'" :class="[cx('filterIcon'), filterIcon]" v-bind="ptm('filterIcon')" />

2
components/lib/select/style/SelectStyle.js
View File

@ -246,7 +246,7 @@ const classes = {
], ],
header: 'p-select-header', header: 'p-select-header',
filterContainer: 'p-select-filter-container', filterContainer: 'p-select-filter-container',
filter: 'p-select-filter', pcFilter: 'p-select-filter',
filterIcon: 'p-select-filter-icon', filterIcon: 'p-select-filter-icon',
listContainer: 'p-select-list-container', listContainer: 'p-select-list-container',
list: 'p-select-list', list: 'p-select-list',

4
components/lib/selectbutton/SelectButton.d.ts vendored
View File

@ -58,6 +58,10 @@ export interface SelectButtonPassThroughOptions {
* Used to pass attributes to the root's DOM element. * Used to pass attributes to the root's DOM element.
*/ */
root?: SelectButtonPassThroughOptionType; root?: SelectButtonPassThroughOptionType;
/**
* Used to pass attributes to the ToggleButton component.
*/
pcButton?: SelectButtonPassThroughOptionType;
/** /**
* Used to manage all lifecycle hooks. * Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks} * @see {@link BaseComponent.ComponentHooks}

4
components/lib/selectbutton/SelectButton.vue
View File

@ -8,11 +8,11 @@
:disabled="disabled || isOptionDisabled(option)" :disabled="disabled || isOptionDisabled(option)"
:unstyled="unstyled" :unstyled="unstyled"
@change="onOptionSelect($event, option, index)" @change="onOptionSelect($event, option, index)"
:pt="ptm('button')" :pt="ptm('pcButton')"
> >
<template v-if="$slots.option" #default> <template v-if="$slots.option" #default>
<slot name="option" :option="option" :index="index"> <slot name="option" :option="option" :index="index">
<span v-bind="ptm('button')['label']">{{ getOptionLabel(option) }}</span> <span v-bind="ptm('pcButton')['label']">{{ getOptionLabel(option) }}</span>
</slot> </slot>
</template> </template>
</ToggleButton> </ToggleButton>

2
components/lib/speeddial/SpeedDial.d.ts vendored
View File

@ -77,7 +77,7 @@ export interface SpeedDialPassThroughOptions {
* Used to pass attributes to the Button component. * Used to pass attributes to the Button component.
* @see {@link ButtonPassThroughOptions} * @see {@link ButtonPassThroughOptions}
*/ */
button?: ButtonPassThroughOptions<SpeedDialSharedPassThroughMethodOptions>; pcButton?: ButtonPassThroughOptions<SpeedDialSharedPassThroughMethodOptions>;
/** /**
* Used to pass attributes to the list's DOM element. * Used to pass attributes to the list's DOM element.
*/ */

14
components/lib/speeddial/SpeedDial.vue
View File

@ -2,7 +2,7 @@
<div :ref="containerRef" :class="containerClass" :style="[style, sx('root')]" v-bind="ptmi('root')"> <div :ref="containerRef" :class="containerClass" :style="[style, sx('root')]" v-bind="ptmi('root')">
<slot name="button" :visible="d_visible" :onClick="onClick" :toggleCallback="onClick"> <slot name="button" :visible="d_visible" :onClick="onClick" :toggleCallback="onClick">
<Button <Button
:class="[cx('button'), buttonClass]" :class="[cx('pcButton'), buttonClass]"
:disabled="disabled" :disabled="disabled"
:aria-expanded="d_visible" :aria-expanded="d_visible"
:aria-haspopup="true" :aria-haspopup="true"
@ -13,12 +13,12 @@
@click="onClick($event)" @click="onClick($event)"
@keydown="onTogglerKeydown" @keydown="onTogglerKeydown"
v-bind="buttonProps" v-bind="buttonProps"
:pt="ptm('button')" :pt="ptm('pcButton')"
> >
<template #icon="slotProps"> <template #icon="slotProps">
<slot name="icon" :visible="d_visible"> <slot name="icon" :visible="d_visible">
<component v-if="d_visible && !!hideIcon" :is="hideIcon ? 'span' : 'PlusIcon'" :class="[hideIcon, cx('buttonIcon'), slotProps.class]" v-bind="ptm('button')['icon']" data-pc-section="icon" /> <component v-if="d_visible && !!hideIcon" :is="hideIcon ? 'span' : 'PlusIcon'" :class="[hideIcon, slotProps.class]" v-bind="ptm('pcButton')['icon']" data-pc-section="icon" />
<component v-else :is="showIcon ? 'span' : 'PlusIcon'" :class="[d_visible && !!hideIcon ? hideIcon : showIcon, slotProps.class]" v-bind="ptm('button')['icon']" data-pc-section="icon" /> <component v-else :is="showIcon ? 'span' : 'PlusIcon'" :class="[d_visible && !!hideIcon ? hideIcon : showIcon, slotProps.class]" v-bind="ptm('pcButton')['icon']" data-pc-section="icon" />
</slot> </slot>
</template> </template>
</Button> </Button>
@ -40,16 +40,16 @@
v-tooltip:[tooltipOptions]="{ value: item.label, disabled: !tooltipOptions }" v-tooltip:[tooltipOptions]="{ value: item.label, disabled: !tooltipOptions }"
:tabindex="-1" :tabindex="-1"
role="menuitem" role="menuitem"
:class="cx('action', { item })" :class="cx('pcAction', { item })"
:aria-label="item.label" :aria-label="item.label"
:disabled="disabled" :disabled="disabled"
:unstyled="unstyled" :unstyled="unstyled"
@click="onItemClick($event, item)" @click="onItemClick($event, item)"
v-bind="actionButtonProps" v-bind="actionButtonProps"
:pt="getPTOptions(`${id}_${index}`, 'action')" :pt="getPTOptions(`${id}_${index}`, 'pcAction')"
> >
<template v-if="item.icon" #icon="slotProps"> <template v-if="item.icon" #icon="slotProps">
<span :class="[cx('actionIcon'), item.icon, slotProps.class]" v-bind="getPTOptions(`${id}_${index}`, 'actionIcon')"></span> <span :class="[item.icon, slotProps.class]" v-bind="getPTOptions(`${id}_${index}`, 'actionIcon')"></span>
</template> </template>
</Button> </Button>
</template> </template>

2
components/lib/speeddial/style/SpeedDialStyle.js
View File

@ -99,7 +99,7 @@ const classes = {
'p-disabled': props.disabled 'p-disabled': props.disabled
} }
], ],
button: ({ props }) => [ pcButton: ({ props }) => [
'p-speeddial-button', 'p-speeddial-button',
{ {
'p-speeddial-rotate': props.rotateAnimation && !props.hideIcon 'p-speeddial-rotate': props.rotateAnimation && !props.hideIcon

9
components/lib/splitbutton/SplitButton.d.ts vendored
View File

@ -71,19 +71,20 @@ export interface SplitButtonPassThroughOptions {
*/ */
root?: SplitButtonPassThroughOptionType; root?: SplitButtonPassThroughOptionType;
/** /**
* Used to pass attributes to the button's DOM element. * Used to pass attributes to the Button component.
* @see {@link ButtonPassThroughOptions}
*/ */
button?: SplitButtonPassThroughOptionType; pcButton?: ButtonPassThroughOptions<SplitButtonSharedPassThroughMethodOptions>;
/** /**
* Used to pass attributes to the Button component. * Used to pass attributes to the Button component.
* @see {@link ButtonPassThroughOptions} * @see {@link ButtonPassThroughOptions}
*/ */
dropdown?: ButtonPassThroughOptions<SplitButtonSharedPassThroughMethodOptions>; pcDropdown?: ButtonPassThroughOptions<SplitButtonSharedPassThroughMethodOptions>;
/** /**
* Used to pass attributes to the TieredMenu component. * Used to pass attributes to the TieredMenu component.
* @see {@link TieredMenuPassThroughOptions} * @see {@link TieredMenuPassThroughOptions}
*/ */
menu?: TieredMenuPassThroughOptions<SplitButtonSharedPassThroughMethodOptions>; ptMenu?: TieredMenuPassThroughOptions<SplitButtonSharedPassThroughMethodOptions>;
/** /**
* Used to manage all lifecycle hooks. * Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks} * @see {@link BaseComponent.ComponentHooks}

14
components/lib/splitbutton/SplitButton.vue
View File

@ -2,7 +2,7 @@
<div :class="containerClass" :style="style" v-bind="ptmi('root')" :data-p-severity="severity"> <div :class="containerClass" :style="style" v-bind="ptmi('root')" :data-p-severity="severity">
<PVSButton <PVSButton
type="button" type="button"
:class="cx('button')" :class="cx('pcButton')"
:label="label" :label="label"
:disabled="disabled" :disabled="disabled"
:severity="severity" :severity="severity"
@ -12,12 +12,12 @@
:aria-label="label" :aria-label="label"
@click="onDefaultButtonClick" @click="onDefaultButtonClick"
v-bind="buttonProps" v-bind="buttonProps"
:pt="ptm('button')" :pt="ptm('pcButton')"
:unstyled="unstyled" :unstyled="unstyled"
> >
<template v-if="$slots.icon" #icon="slotProps"> <template v-if="$slots.icon" #icon="slotProps">
<slot name="icon" :class="slotProps.class"> <slot name="icon" :class="slotProps.class">
<span :class="[icon, slotProps.class]" v-bind="ptm('button')['icon']" data-pc-section="buttonicon" /> <span :class="[icon, slotProps.class]" v-bind="ptm('pcButton')['icon']" data-pc-section="buttonicon" />
</slot> </slot>
</template> </template>
<template #default> <template #default>
@ -27,7 +27,7 @@
<PVSButton <PVSButton
ref="button" ref="button"
type="button" type="button"
:class="cx('dropdown')" :class="cx('pcDropdown')"
:disabled="disabled" :disabled="disabled"
aria-haspopup="true" aria-haspopup="true"
:aria-expanded="isExpanded" :aria-expanded="isExpanded"
@ -40,16 +40,16 @@
:size="size" :size="size"
:unstyled="unstyled" :unstyled="unstyled"
v-bind="menuButtonProps" v-bind="menuButtonProps"
:pt="ptm('dropdown')" :pt="ptm('pcDropdown')"
> >
<template #icon="slotProps"> <template #icon="slotProps">
<!--TODO: menubuttonicon and menuButtonIcon deprecated since v4.0--> <!--TODO: menubuttonicon and menuButtonIcon deprecated since v4.0-->
<slot :name="$slots.dropdownicon ? 'dropdownicon' : 'menubuttonicon'" :class="slotProps.class"> <slot :name="$slots.dropdownicon ? 'dropdownicon' : 'menubuttonicon'" :class="slotProps.class">
<component :is="menuButtonIcon || dropdownIcon ? 'span' : 'ChevronDownIcon'" :class="[dropdownIcon || menuButtonIcon, slotProps.class]" v-bind="ptm('dropdown')['icon']" data-pc-section="menubuttonicon" /> <component :is="menuButtonIcon || dropdownIcon ? 'span' : 'ChevronDownIcon'" :class="[dropdownIcon || menuButtonIcon, slotProps.class]" v-bind="ptm('pcDropdown')['icon']" data-pc-section="menubuttonicon" />
</slot> </slot>
</template> </template>
</PVSButton> </PVSButton>
<PVSMenu ref="menu" :id="id + '_overlay'" :model="model" :popup="true" :autoZIndex="autoZIndex" :baseZIndex="baseZIndex" :appendTo="appendTo" :unstyled="unstyled" :pt="ptm('menu')"> <PVSMenu ref="menu" :id="id + '_overlay'" :model="model" :popup="true" :autoZIndex="autoZIndex" :baseZIndex="baseZIndex" :appendTo="appendTo" :unstyled="unstyled" :pt="ptm('ptMenu')">
<template v-if="$slots.menuitemicon" #itemicon="slotProps"> <template v-if="$slots.menuitemicon" #itemicon="slotProps">
<slot name="menuitemicon" :item="slotProps.item" :class="slotProps.class" /> <slot name="menuitemicon" :item="slotProps.item" :class="slotProps.class" />
</template> </template>

4
components/lib/splitbutton/style/SplitButtonStyle.js
View File

@ -70,8 +70,8 @@ const theme = ({ dt }) => `
const classes = { const classes = {
root: 'p-splitbutton p-component', root: 'p-splitbutton p-component',
button: 'p-splitbutton-button', pcButton: 'p-splitbutton-button',
dropdown: 'p-splitbutton-dropdown' pcDropdown: 'p-splitbutton-dropdown'
}; };
export default BaseStyle.extend({ export default BaseStyle.extend({

2
components/lib/tree/Tree.d.ts vendored
View File

@ -112,7 +112,7 @@ export interface TreePassThroughOptions<T = any> {
* Used to pass attributes to the input's DOM element. * Used to pass attributes to the input's DOM element.
* @see {@link InputTextPassThroughOptions} * @see {@link InputTextPassThroughOptions}
*/ */
filterInput?: InputTextPassThroughOptions<TreeSharedPassThroughMethodOptions>; pcFilterInput?: InputTextPassThroughOptions<TreeSharedPassThroughMethodOptions>;
/** /**
* Used to pass attributes to the filter icon's DOM element. * Used to pass attributes to the filter icon's DOM element.
*/ */

2
components/lib/tree/Tree.vue
View File

@ -9,7 +9,7 @@
</div> </div>
</template> </template>
<div v-if="filter" :class="cx('filterContainer')" v-bind="ptm('filterContainer')"> <div v-if="filter" :class="cx('filterContainer')" v-bind="ptm('filterContainer')">
<InputText v-model="filterValue" autocomplete="off" :class="cx('filterInput')" :placeholder="filterPlaceholder" @keydown="onFilterKeydown" v-bind="ptm('filterInput')" /> <InputText v-model="filterValue" autocomplete="off" :class="cx('pcFilterInput')" :placeholder="filterPlaceholder" @keydown="onFilterKeydown" v-bind="ptm('pcFilterInput')" />
<!--TODO: searchicon deprecated since v4.0--> <!--TODO: searchicon deprecated since v4.0-->
<slot :name="$slots.filtericon ? 'filtericon' : 'searchicon'" :class="cx('filterIcon')"> <slot :name="$slots.filtericon ? 'filtericon' : 'searchicon'" :class="cx('filterIcon')">
<SearchIcon :class="cx('filterIcon')" v-bind="ptm('filterIcon')" /> <SearchIcon :class="cx('filterIcon')" v-bind="ptm('filterIcon')" />

2
components/lib/tree/style/TreeStyle.js
View File

@ -191,7 +191,7 @@ const classes = {
mask: 'p-tree-mask p-component-overlay', mask: 'p-tree-mask p-component-overlay',
loadingIcon: 'p-tree-loading-icon', loadingIcon: 'p-tree-loading-icon',
filterContainer: 'p-tree-filter-container', filterContainer: 'p-tree-filter-container',
filterInput: 'p-tree-filter-input', pcFilterInput: 'p-tree-filter-input',
filterIcon: 'p-tree-filter-icon', filterIcon: 'p-tree-filter-icon',
wrapper: 'p-tree-root', //TODO: discuss wrapper: 'p-tree-root', //TODO: discuss
rootChildren: 'p-tree-root-children', rootChildren: 'p-tree-root-children',

4
components/lib/treeselect/TreeSelect.d.ts vendored
View File

@ -88,7 +88,7 @@ export interface TreeSelectPassThroughOptions {
* Used to pass attributes to the Chip. * Used to pass attributes to the Chip.
* @see {@link ChipPassThroughOptions} * @see {@link ChipPassThroughOptions}
*/ */
chipLabel?: ChipPassThroughOptions<TreeSelectSharedPassThroughMethodOptions>; pcChipLabel?: ChipPassThroughOptions<TreeSelectSharedPassThroughMethodOptions>;
/** /**
* Used to pass attributes to the dropdown's DOM element. * Used to pass attributes to the dropdown's DOM element.
*/ */
@ -109,7 +109,7 @@ export interface TreeSelectPassThroughOptions {
* Used to pass attributes to Tree component. * Used to pass attributes to Tree component.
* @see {@link TreePassThroughOptions} * @see {@link TreePassThroughOptions}
*/ */
tree?: TreePassThroughOptions<TreeSelectSharedPassThroughMethodOptions>; pcTree?: TreePassThroughOptions<TreeSelectSharedPassThroughMethodOptions>;
/** /**
* Used to pass attributes to the empty message's DOM element. * Used to pass attributes to the empty message's DOM element.
*/ */

4
components/lib/treeselect/TreeSelect.vue
View File

@ -30,7 +30,7 @@
</template> </template>
<template v-else-if="display === 'chip'"> <template v-else-if="display === 'chip'">
<div v-for="node of selectedNodes" :key="node.key" :class="cx('chip')" v-bind="ptm('chip')"> <div v-for="node of selectedNodes" :key="node.key" :class="cx('chip')" v-bind="ptm('chip')">
<Chip :class="cx('chipLabel')" :label="node.label" :unstyled="unstyled" :pt="ptm('chipLabel')" /> <Chip :class="cx('pcChipLabel')" :label="node.label" :unstyled="unstyled" :pt="ptm('pcChipLabel')" />
</div> </div>
<template v-if="emptyValue">{{ placeholder || 'empty' }}</template> <template v-if="emptyValue">{{ placeholder || 'empty' }}</template>
</template> </template>
@ -75,7 +75,7 @@
@node-unselect="onNodeUnselect" @node-unselect="onNodeUnselect"
:level="0" :level="0"
:unstyled="unstyled" :unstyled="unstyled"
:pt="ptm('tree')" :pt="ptm('pcTree')"
> >
<template v-if="$slots.itemtogglericon" #togglericon="iconProps"> <template v-if="$slots.itemtogglericon" #togglericon="iconProps">
<slot name="itemtogglericon" :node="iconProps.node" :expanded="iconProps.expanded" :class="iconProps.class" /> <slot name="itemtogglericon" :node="iconProps.node" :expanded="iconProps.expanded" :class="iconProps.class" />

2
components/lib/treeselect/style/TreeSelectStyle.js
View File

@ -141,7 +141,7 @@ const classes = {
} }
], ],
chip: 'p-treeselect-chip', chip: 'p-treeselect-chip',
chipLabel: 'p-treeselect-chip-label', pcChipLabel: 'p-treeselect-chip-label',
dropdown: 'p-treeselect-dropdown', dropdown: 'p-treeselect-dropdown',
dropdownIcon: 'p-treeselect-dropdown-icon', dropdownIcon: 'p-treeselect-dropdown-icon',
panel: ({ instance }) => [ panel: ({ instance }) => [

4
components/lib/treetable/BodyCell.vue
View File

@ -19,12 +19,12 @@
v-if="checkboxSelectionMode && columnProp('expander')" v-if="checkboxSelectionMode && columnProp('expander')"
:modelValue="checked" :modelValue="checked"
:binary="true" :binary="true"
:class="cx('nodeCheckbox')" :class="cx('pcNodeCheckbox')"
@change="toggleCheckbox" @change="toggleCheckbox"
:tabindex="-1" :tabindex="-1"
:indeterminate="partialChecked" :indeterminate="partialChecked"
:unstyled="unstyled" :unstyled="unstyled"
:pt="getColumnCheckboxPT('nodeCheckbox')" :pt="getColumnCheckboxPT('pcNodeCheckbox')"
:data-p-partialchecked="partialChecked" :data-p-partialchecked="partialChecked"
> >
<template #icon="slotProps"> <template #icon="slotProps">

2
components/lib/treetable/TreeTable.d.ts vendored
View File

@ -236,7 +236,7 @@ export interface TreeTablePassThroughOptions {
* Used to pass attributes to the Paginator component. * Used to pass attributes to the Paginator component.
* @see {@link PaginatorPassThroughOptionType} * @see {@link PaginatorPassThroughOptionType}
*/ */
paginator?: PaginatorPassThroughOptionType<TreeTableSharedPassThroughMethodOptions>; pcPaginator?: PaginatorPassThroughOptionType<TreeTableSharedPassThroughMethodOptions>;
/** /**
* Used to pass attributes to the table container's DOM element. * Used to pass attributes to the table container's DOM element.
*/ */

8
components/lib/treetable/TreeTable.vue
View File

@ -20,11 +20,11 @@
:template="paginatorTemplate" :template="paginatorTemplate"
:rowsPerPageOptions="rowsPerPageOptions" :rowsPerPageOptions="rowsPerPageOptions"
:currentPageReportTemplate="currentPageReportTemplate" :currentPageReportTemplate="currentPageReportTemplate"
:class="cx('paginator', { position: 'top' })" :class="cx('pcPaginator', { position: 'top' })"
@page="onPage($event)" @page="onPage($event)"
:alwaysShow="alwaysShowPaginator" :alwaysShow="alwaysShowPaginator"
:unstyled="unstyled" :unstyled="unstyled"
:pt="ptm('paginator')" :pt="ptm('pcPaginator')"
> >
<template v-if="$slots.paginatorstart" #start> <template v-if="$slots.paginatorstart" #start>
<slot name="paginatorstart"></slot> <slot name="paginatorstart"></slot>
@ -129,11 +129,11 @@
:template="paginatorTemplate" :template="paginatorTemplate"
:rowsPerPageOptions="rowsPerPageOptions" :rowsPerPageOptions="rowsPerPageOptions"
:currentPageReportTemplate="currentPageReportTemplate" :currentPageReportTemplate="currentPageReportTemplate"
:class="cx('paginator', { position: 'bottom' })" :class="cx('pcPaginator', { position: 'bottom' })"
@page="onPage($event)" @page="onPage($event)"
:alwaysShow="alwaysShowPaginator" :alwaysShow="alwaysShowPaginator"
:unstyled="unstyled" :unstyled="unstyled"
:pt="ptm('paginator')" :pt="ptm('pcPaginator')"
> >
<template v-if="$slots.paginatorstart" #start> <template v-if="$slots.paginatorstart" #start>
<slot name="paginatorstart"></slot> <slot name="paginatorstart"></slot>

2
components/lib/treetable/style/TreeTableStyle.js
View File

@ -505,7 +505,7 @@ const classes = {
], ],
nodeToggleButton: 'p-treetable-node-toggle-button', nodeToggleButton: 'p-treetable-node-toggle-button',
nodeToggleIcon: 'p-treetable-node-toggle-icon', nodeToggleIcon: 'p-treetable-node-toggle-icon',
nodeCheckbox: 'p-treetable-node-checkbox', pcNodeCheckbox: 'p-treetable-node-checkbox',
emptyMessage: 'p-treetable-empty-message', emptyMessage: 'p-treetable-empty-message',
tfoot: 'p-treetable-tfoot', tfoot: 'p-treetable-tfoot',
footerCell: ({ instance }) => [ footerCell: ({ instance }) => [