Chip item pt fixes

pull/5756/head
tugcekucukoglu 2024-05-15 10:35:36 +03:00
parent 13107cc7c0
commit 66bd931082
17 changed files with 72 additions and 72 deletions

View File

@ -155,12 +155,12 @@ export interface AutoCompletePassThroughOptions {
/** /**
* Used to pass attributes to the chip's DOM element. * Used to pass attributes to the chip's DOM element.
*/ */
chip?: AutoCompletePassThroughOptionType; chipItem?: AutoCompletePassThroughOptionType;
/** /**
* Used to pass attributes to the Chip. * Used to pass attributes to the Chip.
* @see {@link ChipPassThroughOptions} * @see {@link ChipPassThroughOptions}
*/ */
pcChipLabel?: ChipPassThroughOptions<AutoCompleteSharedPassThroughMethodOptions>; pcChip?: ChipPassThroughOptions<AutoCompleteSharedPassThroughMethodOptions>;
/** /**
* Used to pass attributes to the chip icon's DOM element. * Used to pass attributes to the chip icon's DOM element.
*/ */

View File

@ -47,17 +47,17 @@
v-for="(option, i) of modelValue" v-for="(option, i) of modelValue"
:key="`${i}_${getOptionLabel(option)}`" :key="`${i}_${getOptionLabel(option)}`"
:id="id + '_multiple_option_' + i" :id="id + '_multiple_option_' + i"
:class="cx('token', { i })" :class="cx('chipItem', { i })"
role="option" role="option"
:aria-label="getOptionLabel(option)" :aria-label="getOptionLabel(option)"
:aria-selected="true" :aria-selected="true"
:aria-setsize="modelValue.length" :aria-setsize="modelValue.length"
:aria-posinset="i + 1" :aria-posinset="i + 1"
v-bind="ptm('token')" v-bind="ptm('chipItem')"
> >
<slot name="chip" :class="cx('pcChipLabel')" :value="option" :index="i" :removeCallback="(event) => removeOption(event, i)"> <slot name="chip" :class="cx('pcChip')" :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('pcChipLabel')" :label="getOptionLabel(option)" :removeIcon="chipIcon || removeTokenIcon" removable :unstyled="unstyled" @remove="removeOption($event, i)" :pt="ptm('pcChipLabel')"> <Chip :class="cx('pcChip')" :label="getOptionLabel(option)" :removeIcon="chipIcon || removeTokenIcon" removable :unstyled="unstyled" @remove="removeOption($event, i)" :pt="ptm('pcChip')">
<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>

View File

@ -13,8 +13,8 @@ export enum AutoCompleteClasses {
root = 'p-autocomplete', root = 'p-autocomplete',
pcInput = 'p-autocomplete-input', pcInput = 'p-autocomplete-input',
inputMultiple = 'p-autocomplete-input-multiple', inputMultiple = 'p-autocomplete-input-multiple',
chip = 'p-autocomplete-chip', chipItem = 'p-autocomplete-chip-item',
pcChipLabel = 'p-autocomplete-chip-label', pcChip = 'p-autocomplete-chip',
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',

View File

@ -251,13 +251,13 @@ const classes = {
'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled' 'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled'
} }
], ],
chip: ({ instance, i }) => [ chipItem: ({ instance, i }) => [
'p-autocomplete-chip', 'p-autocomplete-chip-item',
{ {
'p-focus': instance.focusedMultipleOptionIndex === i 'p-focus': instance.focusedMultipleOptionIndex === i
} }
], ],
pcChipLabel: 'p-autocomplete-chip-label', pcChip: 'p-autocomplete-chip',
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',

View File

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

View File

@ -20,17 +20,17 @@
:key="`${i}_${val}`" :key="`${i}_${val}`"
:id="id + '_inputchips_item_' + i" :id="id + '_inputchips_item_' + i"
role="option" role="option"
:class="cx('chip', { index: i })" :class="cx('chipItem', { index: i })"
:aria-label="val" :aria-label="val"
:aria-selected="true" :aria-selected="true"
:aria-setsize="modelValue.length" :aria-setsize="modelValue.length"
:aria-posinset="i + 1" :aria-posinset="i + 1"
v-bind="ptm('chip')" v-bind="ptm('chipItem')"
:data-p-focused="focusedIndex === i" :data-p-focused="focusedIndex === i"
> >
<slot name="chip" :class="cx('pcChipLabel')" :index="i" :value="val" :removeCallback="(event) => removeOption(event, i)"> <slot name="chip" :class="cx('pcChip')" :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('pcChipLabel')" :label="val" :removeIcon="chipIcon || removeTokenIcon" removable :unstyled="unstyled" @remove="removeItem($event, i)" :pt="ptm('pcChipLabel')"> <Chip :class="cx('pcChip')" :label="val" :removeIcon="chipIcon || removeTokenIcon" removable :unstyled="unstyled" @remove="removeItem($event, i)" :pt="ptm('pcChip')">
<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>

View File

@ -12,8 +12,8 @@ import { BaseStyle } from '../../base/style';
export enum InputChipsClasses { export enum InputChipsClasses {
root = 'p-inputchips', root = 'p-inputchips',
input = 'p-inputchips-input', input = 'p-inputchips-input',
chip = 'p-inputchips-chip', chipItem = 'p-inputchips-chip-item',
pcChipLabel = 'p-inputchips-chip-label', pcChip = 'p-inputchips-chip-label',
chipIcon = 'p-inputchips-chip-icon', chipIcon = 'p-inputchips-chip-icon',
inputItem = 'p-inputchips-input-item' inputItem = 'p-inputchips-input-item'
} }

View File

@ -61,7 +61,7 @@ const theme = ({ dt }) => `
transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}; 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')}; background: ${dt('inputchips.chip.focus.background')};
color: ${dt('inputchips.chip.focus.color')}; 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' 'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled'
} }
], ],
chip: ({ state, index }) => ['p-inputchips-chip', { 'p-focus': state.focusedIndex === index }], chipItem: ({ state, index }) => ['p-inputchips-chip-item', { 'p-focus': state.focusedIndex === index }],
pcChipLabel: 'p-inputchips-chip-label', pcChip: 'p-inputchips-chip',
chipIcon: 'p-inputchips-chip-icon', chipIcon: 'p-inputchips-chip-icon',
inputItem: 'p-inputchips-input-item' inputItem: 'p-inputchips-input-item'
}; };

View File

@ -134,12 +134,12 @@ export interface MultiSelectPassThroughOptions {
/** /**
* Used to pass attributes to the chip's DOM element. * Used to pass attributes to the chip's DOM element.
*/ */
chip?: MultiSelectPassThroughOptionType; chipItem?: MultiSelectPassThroughOptionType;
/** /**
* Used to pass attributes to the Chip. * Used to pass attributes to the Chip.
* @see {@link ChipPassThroughOptions} * @see {@link ChipPassThroughOptions}
*/ */
pcChipLabel?: ChipPassThroughOptions<MultiSelectSharedPassThroughMethodOptions>; pcChip?: ChipPassThroughOptions<MultiSelectSharedPassThroughMethodOptions>;
/** /**
* Used to pass attributes to the chip icon's DOM element. * Used to pass attributes to the chip icon's DOM element.
*/ */

View File

@ -30,10 +30,10 @@
{{ label || 'empty' }} {{ label || 'empty' }}
</template> </template>
<template v-else-if="display === 'chip'"> <template v-else-if="display === 'chip'">
<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('chipItem')" v-bind="ptm('chipItem')">
<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('pcChipLabel')" :label="getLabelByValue(item)" :removeIcon="chipIcon || removeTokenIcon" removable :unstyled="unstyled" @remove="removeOption($event, item)" :pt="ptm('pcChipLabel')"> <Chip :class="cx('pcChip')" :label="getLabelByValue(item)" :removeIcon="chipIcon || removeTokenIcon" removable :unstyled="unstyled" @remove="removeOption($event, item)" :pt="ptm('pcChip')">
<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>

View File

@ -13,8 +13,8 @@ export enum MultiSelectClasses {
root = 'p-multiselect', root = 'p-multiselect',
labelContainer = 'p-multiselect-label-container', labelContainer = 'p-multiselect-label-container',
label = 'p-multiselect-label', label = 'p-multiselect-label',
chip = 'p-multiselect-chip', chipItem = 'p-multiselect-chip-item',
pcChipLabel = 'p-multiselect-chip-label', pcChip = 'p-multiselect-chip',
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',

View File

@ -218,8 +218,8 @@ const classes = {
'p-multiselect-label-empty': !props.placeholder && (!props.modelValue || props.modelValue.length === 0) 'p-multiselect-label-empty': !props.placeholder && (!props.modelValue || props.modelValue.length === 0)
} }
], ],
chip: 'p-multiselect-chip', chipItem: 'p-multiselect-chip-item',
pcChipLabel: 'p-multiselect-chip-label', pcChip: 'p-multiselect-chip',
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',

View File

@ -83,12 +83,12 @@ export interface TreeSelectPassThroughOptions {
/** /**
* Used to pass attributes to the chip's DOM element. * Used to pass attributes to the chip's DOM element.
*/ */
chip?: TreeSelectPassThroughOptionType; chipItem?: TreeSelectPassThroughOptionType;
/** /**
* Used to pass attributes to the Chip. * Used to pass attributes to the Chip.
* @see {@link ChipPassThroughOptions} * @see {@link ChipPassThroughOptions}
*/ */
pcChipLabel?: ChipPassThroughOptions<TreeSelectSharedPassThroughMethodOptions>; pcChip?: ChipPassThroughOptions<TreeSelectSharedPassThroughMethodOptions>;
/** /**
* Used to pass attributes to the dropdown's DOM element. * Used to pass attributes to the dropdown's DOM element.
*/ */

View File

@ -29,8 +29,8 @@
{{ label || 'empty' }} {{ label || 'empty' }}
</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('chipItem')" v-bind="ptm('chipItem')">
<Chip :class="cx('pcChipLabel')" :label="node.label" :unstyled="unstyled" :pt="ptm('pcChipLabel')" /> <Chip :class="cx('pcChip')" :label="node.label" :unstyled="unstyled" :pt="ptm('pcChip')" />
</div> </div>
<template v-if="emptyValue">{{ placeholder || 'empty' }}</template> <template v-if="emptyValue">{{ placeholder || 'empty' }}</template>
</template> </template>

View File

@ -13,8 +13,8 @@ export enum TreeSelectClasses {
root = 'p-treeselect', root = 'p-treeselect',
labelContainer = 'p-treeselect-label-container', labelContainer = 'p-treeselect-label-container',
label = 'p-treeselect-label', label = 'p-treeselect-label',
chip = 'p-treeselect-chip', chipItem = 'p-treeselect-chip-item',
pcChipLabel = 'p-treeselect-chip-label', pcChip = 'p-treeselect-chip',
dropdown = 'p-treeselect-dropdown', dropdown = 'p-treeselect-dropdown',
dropdownIcon = 'p-treeselect-dropdown-icon', dropdownIcon = 'p-treeselect-dropdown-icon',
panel = 'p-treeselect-overlay', panel = 'p-treeselect-overlay',

View File

@ -150,8 +150,8 @@ const classes = {
'p-treeselect-label-empty': !props.placeholder && instance.emptyValue 'p-treeselect-label-empty': !props.placeholder && instance.emptyValue
} }
], ],
chip: 'p-treeselect-chip', chip: 'p-treeselect-chip-item',
pcChipLabel: 'p-treeselect-chip-label', pcChip: 'p-treeselect-chip',
dropdown: 'p-treeselect-dropdown', dropdown: 'p-treeselect-dropdown',
dropdownIcon: 'p-treeselect-dropdown-icon', dropdownIcon: 'p-treeselect-dropdown-icon',
panel: 'p-treeselect-overlay p-component', panel: 'p-treeselect-overlay p-component',

View File

@ -4240,7 +4240,7 @@
"description": "Used to pass attributes to the input multiple's DOM element." "description": "Used to pass attributes to the input multiple's DOM element."
}, },
{ {
"name": "chip", "name": "chipItem",
"optional": true, "optional": true,
"readonly": false, "readonly": false,
"type": "AutoCompletePassThroughOptionType", "type": "AutoCompletePassThroughOptionType",
@ -4248,7 +4248,7 @@
"description": "Used to pass attributes to the chip's DOM element." "description": "Used to pass attributes to the chip's DOM element."
}, },
{ {
"name": "pcChipLabel", "name": "pcChip",
"optional": true, "optional": true,
"readonly": false, "readonly": false,
"type": "ChipPassThroughOptions<AutoCompleteSharedPassThroughMethodOptions>", "type": "ChipPassThroughOptions<AutoCompleteSharedPassThroughMethodOptions>",
@ -5373,17 +5373,17 @@
"value": "\"p-autocomplete-input-multiple\"" "value": "\"p-autocomplete-input-multiple\""
}, },
{ {
"name": "chip", "name": "chipItem",
"optional": false,
"readonly": false,
"value": "\"p-autocomplete-chip-item\""
},
{
"name": "pcChip",
"optional": false, "optional": false,
"readonly": false, "readonly": false,
"value": "\"p-autocomplete-chip\"" "value": "\"p-autocomplete-chip\""
}, },
{
"name": "pcChipLabel",
"optional": false,
"readonly": false,
"value": "\"p-autocomplete-chip-label\""
},
{ {
"name": "chipIcon", "name": "chipIcon",
"optional": false, "optional": false,
@ -14219,7 +14219,7 @@
"description": "Used to pass attributes to the input's DOM element." "description": "Used to pass attributes to the input's DOM element."
}, },
{ {
"name": "chip", "name": "chipItem",
"optional": true, "optional": true,
"readonly": false, "readonly": false,
"type": "InputChipsPassThroughOptionType", "type": "InputChipsPassThroughOptionType",
@ -14227,7 +14227,7 @@
"description": "Used to pass attributes to the chip's DOM element." "description": "Used to pass attributes to the chip's DOM element."
}, },
{ {
"name": "pcChipLabel", "name": "pcChip",
"optional": true, "optional": true,
"readonly": false, "readonly": false,
"type": "ChipPassThroughOptions<InputChipsSharedPassThroughMethodOptions>", "type": "ChipPassThroughOptions<InputChipsSharedPassThroughMethodOptions>",
@ -36573,7 +36573,7 @@
"description": "Used to pass attributes to the input's DOM element." "description": "Used to pass attributes to the input's DOM element."
}, },
{ {
"name": "chip", "name": "chipItem",
"optional": true, "optional": true,
"readonly": false, "readonly": false,
"type": "InputChipsPassThroughOptionType", "type": "InputChipsPassThroughOptionType",
@ -36581,7 +36581,7 @@
"description": "Used to pass attributes to the chip's DOM element." "description": "Used to pass attributes to the chip's DOM element."
}, },
{ {
"name": "pcChipLabel", "name": "pcChip",
"optional": true, "optional": true,
"readonly": false, "readonly": false,
"type": "ChipPassThroughOptions<InputChipsSharedPassThroughMethodOptions>", "type": "ChipPassThroughOptions<InputChipsSharedPassThroughMethodOptions>",
@ -37039,13 +37039,13 @@
"value": "\"p-inputchips-input\"" "value": "\"p-inputchips-input\""
}, },
{ {
"name": "chip", "name": "chipItem",
"optional": false, "optional": false,
"readonly": false, "readonly": false,
"value": "\"p-inputchips-chip\"" "value": "\"p-inputchips-chip-item\""
}, },
{ {
"name": "pcChipLabel", "name": "pcChip",
"optional": false, "optional": false,
"readonly": false, "readonly": false,
"value": "\"p-inputchips-chip-label\"" "value": "\"p-inputchips-chip-label\""
@ -45454,7 +45454,7 @@
"description": "Used to pass attributes to the label's DOM element." "description": "Used to pass attributes to the label's DOM element."
}, },
{ {
"name": "chip", "name": "chipItem",
"optional": true, "optional": true,
"readonly": false, "readonly": false,
"type": "MultiSelectPassThroughOptionType", "type": "MultiSelectPassThroughOptionType",
@ -45462,7 +45462,7 @@
"description": "Used to pass attributes to the chip's DOM element." "description": "Used to pass attributes to the chip's DOM element."
}, },
{ {
"name": "pcChipLabel", "name": "pcChip",
"optional": true, "optional": true,
"readonly": false, "readonly": false,
"type": "ChipPassThroughOptions<MultiSelectSharedPassThroughMethodOptions>", "type": "ChipPassThroughOptions<MultiSelectSharedPassThroughMethodOptions>",
@ -46666,17 +46666,17 @@
"value": "\"p-multiselect-label\"" "value": "\"p-multiselect-label\""
}, },
{ {
"name": "chip", "name": "chipItem",
"optional": false,
"readonly": false,
"value": "\"p-multiselect-chip-item\""
},
{
"name": "pcChip",
"optional": false, "optional": false,
"readonly": false, "readonly": false,
"value": "\"p-multiselect-chip\"" "value": "\"p-multiselect-chip\""
}, },
{
"name": "pcChipLabel",
"optional": false,
"readonly": false,
"value": "\"p-multiselect-chip-label\""
},
{ {
"name": "chipIcon", "name": "chipIcon",
"optional": false, "optional": false,
@ -71491,7 +71491,7 @@
"description": "Used to pass attributes to the label's DOM element." "description": "Used to pass attributes to the label's DOM element."
}, },
{ {
"name": "chip", "name": "chipItem",
"optional": true, "optional": true,
"readonly": false, "readonly": false,
"type": "TreeSelectPassThroughOptionType", "type": "TreeSelectPassThroughOptionType",
@ -71499,7 +71499,7 @@
"description": "Used to pass attributes to the chip's DOM element." "description": "Used to pass attributes to the chip's DOM element."
}, },
{ {
"name": "pcChipLabel", "name": "pcChip",
"optional": true, "optional": true,
"readonly": false, "readonly": false,
"type": "ChipPassThroughOptions<TreeSelectSharedPassThroughMethodOptions>", "type": "ChipPassThroughOptions<TreeSelectSharedPassThroughMethodOptions>",
@ -72142,17 +72142,17 @@
"value": "\"p-treeselect-label\"" "value": "\"p-treeselect-label\""
}, },
{ {
"name": "chip", "name": "chipItem",
"optional": false,
"readonly": false,
"value": "\"p-treeselect-chip-item\""
},
{
"name": "pcChip",
"optional": false, "optional": false,
"readonly": false, "readonly": false,
"value": "\"p-treeselect-chip\"" "value": "\"p-treeselect-chip\""
}, },
{
"name": "pcChipLabel",
"optional": false,
"readonly": false,
"value": "\"p-treeselect-chip-label\""
},
{ {
"name": "dropdown", "name": "dropdown",
"optional": false, "optional": false,