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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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<AutoCompleteSharedPassThroughMethodOptions>;
pcChip?: ChipPassThroughOptions<AutoCompleteSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the chip icon's DOM element.
*/

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

@ -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')"
>
<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-->
<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>
<slot :name="$slots.chipicon ? 'chipicon' : 'removetokenicon'" :class="cx('chipIcon')" :index="i" :removeCallback="(event) => removeOption(event, i)" />
</template>

4
components/lib/autocomplete/style/AutoCompleteStyle.d.ts vendored
View File

@ -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',

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

@ -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',

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

@ -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<InputChipsSharedPassThroughMethodOptions>;
pcChip?: ChipPassThroughOptions<InputChipsSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the chip icon's DOM element.
*/

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

@ -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"
>
<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-->
<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>
<slot :name="$slots.chipicon ? 'chipicon' : 'removetokenicon'" :class="cx('chipIcon')" :index="i" :removeCallback="(event) => removeItem(event, i)" />
</template>

4
components/lib/inputchips/style/InputChipsStyle.d.ts vendored
View File

@ -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'
}

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

@ -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'
};

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

@ -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<MultiSelectSharedPassThroughMethodOptions>;
pcChip?: ChipPassThroughOptions<MultiSelectSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the chip icon's DOM element.
*/

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

@ -30,10 +30,10 @@
{{ label || 'empty' }}
</template>
<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)">
<!-- 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>
<slot :name="$slots.chipicon ? 'chipicon' : 'removetokenicon'" :class="cx('chipIcon')" :item="item" :removeCallback="(event) => removeOption(event, item)" />
</template>

4
components/lib/multiselect/style/MultiSelectStyle.d.ts vendored
View File

@ -13,8 +13,8 @@ export enum MultiSelectClasses {
root = 'p-multiselect',
labelContainer = 'p-multiselect-label-container',
label = 'p-multiselect-label',
chip = 'p-multiselect-chip',
pcChipLabel = 'p-multiselect-chip-label',
chipItem = 'p-multiselect-chip-item',
pcChip = 'p-multiselect-chip',
chipIcon = 'p-multiselect-chip-icon',
dropdown = 'p-multiselect-dropdown',
loadingIcon = 'p-multiselect-loading-icon',

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

@ -218,8 +218,8 @@ const classes = {
'p-multiselect-label-empty': !props.placeholder && (!props.modelValue || props.modelValue.length === 0)
}
],
chip: 'p-multiselect-chip',
pcChipLabel: 'p-multiselect-chip-label',
chipItem: 'p-multiselect-chip-item',
pcChip: 'p-multiselect-chip',
chipIcon: 'p-multiselect-chip-icon',
dropdown: 'p-multiselect-dropdown',
loadingIcon: 'p-multiselect-loading-icon',

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

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

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

@ -29,8 +29,8 @@
{{ label || 'empty' }}
</template>
<template v-else-if="display === 'chip'">
<div v-for="node of selectedNodes" :key="node.key" :class="cx('chip')" v-bind="ptm('chip')">
<Chip :class="cx('pcChipLabel')" :label="node.label" :unstyled="unstyled" :pt="ptm('pcChipLabel')" />
<div v-for="node of selectedNodes" :key="node.key" :class="cx('chipItem')" v-bind="ptm('chipItem')">
<Chip :class="cx('pcChip')" :label="node.label" :unstyled="unstyled" :pt="ptm('pcChip')" />
</div>
<template v-if="emptyValue">{{ placeholder || 'empty' }}</template>
</template>

4
components/lib/treeselect/style/TreeSelectStyle.d.ts vendored
View File

@ -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',

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

@ -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',

68
doc/common/apidoc/index.json
View File

@ -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<AutoCompleteSharedPassThroughMethodOptions>",
@ -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<InputChipsSharedPassThroughMethodOptions>",
@ -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<InputChipsSharedPassThroughMethodOptions>",
@ -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<MultiSelectSharedPassThroughMethodOptions>",
@ -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<TreeSelectSharedPassThroughMethodOptions>",
@ -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,