diff --git a/components/lib/autocomplete/AutoComplete.d.ts b/components/lib/autocomplete/AutoComplete.d.ts index 425b49717..a5c97bc3d 100755 --- a/components/lib/autocomplete/AutoComplete.d.ts +++ b/components/lib/autocomplete/AutoComplete.d.ts @@ -155,12 +155,12 @@ export interface AutoCompletePassThroughOptions { /** * Used to pass attributes to the chip's DOM element. */ - chip?: AutoCompletePassThroughOptionType; + chipItem?: AutoCompletePassThroughOptionType; /** * Used to pass attributes to the Chip. * @see {@link ChipPassThroughOptions} */ - pcChipLabel?: ChipPassThroughOptions; + pcChip?: ChipPassThroughOptions; /** * Used to pass attributes to the chip icon's DOM element. */ diff --git a/components/lib/autocomplete/AutoComplete.vue b/components/lib/autocomplete/AutoComplete.vue index 446aca487..440f1cccc 100755 --- a/components/lib/autocomplete/AutoComplete.vue +++ b/components/lib/autocomplete/AutoComplete.vue @@ -47,17 +47,17 @@ v-for="(option, i) of modelValue" :key="`${i}_${getOptionLabel(option)}`" :id="id + '_multiple_option_' + i" - :class="cx('token', { i })" + :class="cx('chipItem', { i })" role="option" :aria-label="getOptionLabel(option)" :aria-selected="true" :aria-setsize="modelValue.length" :aria-posinset="i + 1" - v-bind="ptm('token')" + v-bind="ptm('chipItem')" > - + - + diff --git a/components/lib/autocomplete/style/AutoCompleteStyle.d.ts b/components/lib/autocomplete/style/AutoCompleteStyle.d.ts index bea7844cd..122aa0920 100644 --- a/components/lib/autocomplete/style/AutoCompleteStyle.d.ts +++ b/components/lib/autocomplete/style/AutoCompleteStyle.d.ts @@ -13,8 +13,8 @@ export enum AutoCompleteClasses { root = 'p-autocomplete', pcInput = 'p-autocomplete-input', inputMultiple = 'p-autocomplete-input-multiple', - chip = 'p-autocomplete-chip', - pcChipLabel = 'p-autocomplete-chip-label', + chipItem = 'p-autocomplete-chip-item', + pcChip = 'p-autocomplete-chip', chipIcon = 'p-autocomplete-chip-icon', inputChip = 'p-autocomplete-input-chip', loader = 'p-autocomplete-loader', diff --git a/components/lib/autocomplete/style/AutoCompleteStyle.js b/components/lib/autocomplete/style/AutoCompleteStyle.js index 0d70fcec9..85eb7e9c9 100644 --- a/components/lib/autocomplete/style/AutoCompleteStyle.js +++ b/components/lib/autocomplete/style/AutoCompleteStyle.js @@ -251,13 +251,13 @@ const classes = { 'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled' } ], - chip: ({ instance, i }) => [ - 'p-autocomplete-chip', + chipItem: ({ instance, i }) => [ + 'p-autocomplete-chip-item', { 'p-focus': instance.focusedMultipleOptionIndex === i } ], - pcChipLabel: 'p-autocomplete-chip-label', + pcChip: 'p-autocomplete-chip', chipIcon: 'p-autocomplete-chip-icon', inputChip: 'p-autocomplete-input-chip', loader: 'p-autocomplete-loader', diff --git a/components/lib/inputchips/InputChips.d.ts b/components/lib/inputchips/InputChips.d.ts index d2d6dc71b..494564bbe 100755 --- a/components/lib/inputchips/InputChips.d.ts +++ b/components/lib/inputchips/InputChips.d.ts @@ -97,12 +97,12 @@ export interface InputChipsPassThroughOptions { /** * Used to pass attributes to the chip's DOM element. */ - chip?: InputChipsPassThroughOptionType; + chipItem?: InputChipsPassThroughOptionType; /** * Used to pass attributes to the Chip component. * @see {@link ChipPassThroughOptions} */ - pcChipLabel?: ChipPassThroughOptions; + pcChip?: ChipPassThroughOptions; /** * Used to pass attributes to the chip icon's DOM element. */ diff --git a/components/lib/inputchips/InputChips.vue b/components/lib/inputchips/InputChips.vue index ee9d6842f..3708fda7f 100755 --- a/components/lib/inputchips/InputChips.vue +++ b/components/lib/inputchips/InputChips.vue @@ -20,17 +20,17 @@ :key="`${i}_${val}`" :id="id + '_inputchips_item_' + i" role="option" - :class="cx('chip', { index: i })" + :class="cx('chipItem', { index: i })" :aria-label="val" :aria-selected="true" :aria-setsize="modelValue.length" :aria-posinset="i + 1" - v-bind="ptm('chip')" + v-bind="ptm('chipItem')" :data-p-focused="focusedIndex === i" > - + - + diff --git a/components/lib/inputchips/style/InputChipsStyle.d.ts b/components/lib/inputchips/style/InputChipsStyle.d.ts index a211f3e22..245794d3e 100644 --- a/components/lib/inputchips/style/InputChipsStyle.d.ts +++ b/components/lib/inputchips/style/InputChipsStyle.d.ts @@ -12,8 +12,8 @@ import { BaseStyle } from '../../base/style'; export enum InputChipsClasses { root = 'p-inputchips', input = 'p-inputchips-input', - chip = 'p-inputchips-chip', - pcChipLabel = 'p-inputchips-chip-label', + chipItem = 'p-inputchips-chip-item', + pcChip = 'p-inputchips-chip-label', chipIcon = 'p-inputchips-chip-icon', inputItem = 'p-inputchips-input-item' } diff --git a/components/lib/inputchips/style/InputChipsStyle.js b/components/lib/inputchips/style/InputChipsStyle.js index 52e009a66..e4fe70970 100644 --- a/components/lib/inputchips/style/InputChipsStyle.js +++ b/components/lib/inputchips/style/InputChipsStyle.js @@ -61,7 +61,7 @@ const theme = ({ dt }) => ` transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}; } -.p-inputchips-chip.p-focus .p-chip { +.p-inputchips-chip-item.p-focus .p-chip { background: ${dt('inputchips.chip.focus.background')}; color: ${dt('inputchips.chip.focus.color')}; } @@ -119,8 +119,8 @@ const classes = { 'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled' } ], - chip: ({ state, index }) => ['p-inputchips-chip', { 'p-focus': state.focusedIndex === index }], - pcChipLabel: 'p-inputchips-chip-label', + chipItem: ({ state, index }) => ['p-inputchips-chip-item', { 'p-focus': state.focusedIndex === index }], + pcChip: 'p-inputchips-chip', chipIcon: 'p-inputchips-chip-icon', inputItem: 'p-inputchips-input-item' }; diff --git a/components/lib/multiselect/MultiSelect.d.ts b/components/lib/multiselect/MultiSelect.d.ts index 09d54f9d1..407f23302 100755 --- a/components/lib/multiselect/MultiSelect.d.ts +++ b/components/lib/multiselect/MultiSelect.d.ts @@ -134,12 +134,12 @@ export interface MultiSelectPassThroughOptions { /** * Used to pass attributes to the chip's DOM element. */ - chip?: MultiSelectPassThroughOptionType; + chipItem?: MultiSelectPassThroughOptionType; /** * Used to pass attributes to the Chip. * @see {@link ChipPassThroughOptions} */ - pcChipLabel?: ChipPassThroughOptions; + pcChip?: ChipPassThroughOptions; /** * Used to pass attributes to the chip icon's DOM element. */ diff --git a/components/lib/multiselect/MultiSelect.vue b/components/lib/multiselect/MultiSelect.vue index 602c9f3aa..863d36d82 100755 --- a/components/lib/multiselect/MultiSelect.vue +++ b/components/lib/multiselect/MultiSelect.vue @@ -30,10 +30,10 @@ {{ label || 'empty' }} diff --git a/components/lib/treeselect/style/TreeSelectStyle.d.ts b/components/lib/treeselect/style/TreeSelectStyle.d.ts index 9f5d3c799..78d743ef2 100644 --- a/components/lib/treeselect/style/TreeSelectStyle.d.ts +++ b/components/lib/treeselect/style/TreeSelectStyle.d.ts @@ -13,8 +13,8 @@ export enum TreeSelectClasses { root = 'p-treeselect', labelContainer = 'p-treeselect-label-container', label = 'p-treeselect-label', - chip = 'p-treeselect-chip', - pcChipLabel = 'p-treeselect-chip-label', + chipItem = 'p-treeselect-chip-item', + pcChip = 'p-treeselect-chip', dropdown = 'p-treeselect-dropdown', dropdownIcon = 'p-treeselect-dropdown-icon', panel = 'p-treeselect-overlay', diff --git a/components/lib/treeselect/style/TreeSelectStyle.js b/components/lib/treeselect/style/TreeSelectStyle.js index 18eb7aad9..59bb6f1e2 100644 --- a/components/lib/treeselect/style/TreeSelectStyle.js +++ b/components/lib/treeselect/style/TreeSelectStyle.js @@ -150,8 +150,8 @@ const classes = { 'p-treeselect-label-empty': !props.placeholder && instance.emptyValue } ], - chip: 'p-treeselect-chip', - pcChipLabel: 'p-treeselect-chip-label', + chip: 'p-treeselect-chip-item', + pcChip: 'p-treeselect-chip', dropdown: 'p-treeselect-dropdown', dropdownIcon: 'p-treeselect-dropdown-icon', panel: 'p-treeselect-overlay p-component', diff --git a/doc/common/apidoc/index.json b/doc/common/apidoc/index.json index 8bacca1b3..b2a0683a6 100644 --- a/doc/common/apidoc/index.json +++ b/doc/common/apidoc/index.json @@ -4240,7 +4240,7 @@ "description": "Used to pass attributes to the input multiple's DOM element." }, { - "name": "chip", + "name": "chipItem", "optional": true, "readonly": false, "type": "AutoCompletePassThroughOptionType", @@ -4248,7 +4248,7 @@ "description": "Used to pass attributes to the chip's DOM element." }, { - "name": "pcChipLabel", + "name": "pcChip", "optional": true, "readonly": false, "type": "ChipPassThroughOptions", @@ -5373,17 +5373,17 @@ "value": "\"p-autocomplete-input-multiple\"" }, { - "name": "chip", + "name": "chipItem", + "optional": false, + "readonly": false, + "value": "\"p-autocomplete-chip-item\"" + }, + { + "name": "pcChip", "optional": false, "readonly": false, "value": "\"p-autocomplete-chip\"" }, - { - "name": "pcChipLabel", - "optional": false, - "readonly": false, - "value": "\"p-autocomplete-chip-label\"" - }, { "name": "chipIcon", "optional": false, @@ -14219,7 +14219,7 @@ "description": "Used to pass attributes to the input's DOM element." }, { - "name": "chip", + "name": "chipItem", "optional": true, "readonly": false, "type": "InputChipsPassThroughOptionType", @@ -14227,7 +14227,7 @@ "description": "Used to pass attributes to the chip's DOM element." }, { - "name": "pcChipLabel", + "name": "pcChip", "optional": true, "readonly": false, "type": "ChipPassThroughOptions", @@ -36573,7 +36573,7 @@ "description": "Used to pass attributes to the input's DOM element." }, { - "name": "chip", + "name": "chipItem", "optional": true, "readonly": false, "type": "InputChipsPassThroughOptionType", @@ -36581,7 +36581,7 @@ "description": "Used to pass attributes to the chip's DOM element." }, { - "name": "pcChipLabel", + "name": "pcChip", "optional": true, "readonly": false, "type": "ChipPassThroughOptions", @@ -37039,13 +37039,13 @@ "value": "\"p-inputchips-input\"" }, { - "name": "chip", + "name": "chipItem", "optional": false, "readonly": false, - "value": "\"p-inputchips-chip\"" + "value": "\"p-inputchips-chip-item\"" }, { - "name": "pcChipLabel", + "name": "pcChip", "optional": false, "readonly": false, "value": "\"p-inputchips-chip-label\"" @@ -45454,7 +45454,7 @@ "description": "Used to pass attributes to the label's DOM element." }, { - "name": "chip", + "name": "chipItem", "optional": true, "readonly": false, "type": "MultiSelectPassThroughOptionType", @@ -45462,7 +45462,7 @@ "description": "Used to pass attributes to the chip's DOM element." }, { - "name": "pcChipLabel", + "name": "pcChip", "optional": true, "readonly": false, "type": "ChipPassThroughOptions", @@ -46666,17 +46666,17 @@ "value": "\"p-multiselect-label\"" }, { - "name": "chip", + "name": "chipItem", + "optional": false, + "readonly": false, + "value": "\"p-multiselect-chip-item\"" + }, + { + "name": "pcChip", "optional": false, "readonly": false, "value": "\"p-multiselect-chip\"" }, - { - "name": "pcChipLabel", - "optional": false, - "readonly": false, - "value": "\"p-multiselect-chip-label\"" - }, { "name": "chipIcon", "optional": false, @@ -71491,7 +71491,7 @@ "description": "Used to pass attributes to the label's DOM element." }, { - "name": "chip", + "name": "chipItem", "optional": true, "readonly": false, "type": "TreeSelectPassThroughOptionType", @@ -71499,7 +71499,7 @@ "description": "Used to pass attributes to the chip's DOM element." }, { - "name": "pcChipLabel", + "name": "pcChip", "optional": true, "readonly": false, "type": "ChipPassThroughOptions", @@ -72142,17 +72142,17 @@ "value": "\"p-treeselect-label\"" }, { - "name": "chip", + "name": "chipItem", + "optional": false, + "readonly": false, + "value": "\"p-treeselect-chip-item\"" + }, + { + "name": "pcChip", "optional": false, "readonly": false, "value": "\"p-treeselect-chip\"" }, - { - "name": "pcChipLabel", - "optional": false, - "readonly": false, - "value": "\"p-treeselect-chip-label\"" - }, { "name": "dropdown", "optional": false,