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

Refactor #3832 Refactor #3833 - Icon props deprecation

pull/3976/head
mertsincan 2023-04-18 10:35:20 +03:00
parent a2cd63672b
commit a8f3e2d5e3
12 changed files with 56 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -86,7 +86,8 @@
</li> </li>
</ul> </ul>
<slot v-if="searching" name="loadingicon"> <slot v-if="searching" name="loadingicon">
<component :is="loadingIcon ? 'i' : 'SpinnerIcon'" :class="['p-autocomplete-loader', loadingIcon]" spin aria-hidden="true" /> <i v-if="loadingIcon" :class="['p-autocomplete-loader pi-spin', loadingIcon]" aria-hidden="true" />
<SpinnerIcon v-else class="p-autocomplete-loader" spin aria-hidden="true" />
</slot> </slot>
<Button v-if="dropdown" ref="dropdownButton" type="button" tabindex="-1" :class="['p-autocomplete-dropdown', dropdownClass]" :disabled="disabled" aria-hidden="true" @click="onDropdownClick"> <Button v-if="dropdown" ref="dropdownButton" type="button" tabindex="-1" :class="['p-autocomplete-dropdown', dropdownClass]" :disabled="disabled" aria-hidden="true" @click="onDropdownClick">
<template #icon> <template #icon>

11
components/lib/avatar/Avatar.vue
View File

@ -1,10 +1,12 @@
<template> <template>
<div :class="containerClass" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel"> <div :class="containerClass" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel">
<slot> <slot></slot>
<template v-if="!$slots.default">
<span v-if="label" class="p-avatar-text">{{ label }}</span> <span v-if="label" class="p-avatar-text">{{ label }}</span>
<span v-else-if="icon" :class="iconClass"></span> <component v-else-if="$slots.icon" :is="$slots.icon" class="p-avatar-icon" />
<span v-else-if="icon" :class="['p-avatar-icon', icon]" />
<img v-else-if="image" :src="image" :alt="ariaLabel" @error="onError" /> <img v-else-if="image" :src="image" :alt="ariaLabel" @error="onError" />
</slot> </template>
</div> </div>
</template> </template>
@ -58,9 +60,6 @@ export default {
'p-avatar-xl': this.size === 'xlarge' 'p-avatar-xl': this.size === 'xlarge'
} }
]; ];
},
iconClass() {
return ['p-avatar-icon', this.icon];
} }
} }
}; };

11
components/lib/breadcrumb/BreadcrumbItem.vue
View File

@ -3,12 +3,14 @@
<template v-if="!templates.item"> <template v-if="!templates.item">
<router-link v-if="item.to" v-slot="{ navigate, href, isActive, isExactActive }" :to="item.to" custom> <router-link v-if="item.to" v-slot="{ navigate, href, isActive, isExactActive }" :to="item.to" custom>
<a :href="href" :class="linkClass({ isActive, isExactActive })" :aria-current="isCurrentUrl()" @click="onClick($event, navigate)"> <a :href="href" :class="linkClass({ isActive, isExactActive })" :aria-current="isCurrentUrl()" @click="onClick($event, navigate)">
<component :is="templates.itemicon || (item.icon ? 'span' : undefined)" :item="item" :class="iconClass" /> <component v-if="templates.itemicon" :is="templates.itemicon" :item="item" class="p-menuitem-icon" />
<span v-else-if="item.icon" :class="['p-menuitem-icon', item.icon]" />
<span v-if="item.label" class="p-menuitem-text">{{ label() }}</span> <span v-if="item.label" class="p-menuitem-text">{{ label() }}</span>
</a> </a>
</router-link> </router-link>
<a v-else :href="item.url || '#'" :class="linkClass()" :target="item.target" :aria-current="isCurrentUrl()" @click="onClick"> <a v-else :href="item.url || '#'" :class="linkClass()" :target="item.target" :aria-current="isCurrentUrl()" @click="onClick">
<component :is="templates.itemicon || (item.icon ? 'span' : undefined)" :item="item" :class="iconClass" /> <component v-if="templates.itemicon" :is="templates.itemicon" :item="item" class="p-menuitem-icon" />
<span v-else-if="item.icon" :class="['p-menuitem-icon', item.icon]" />
<span v-if="item.label" class="p-menuitem-text">{{ label() }}</span> <span v-if="item.label" class="p-menuitem-text">{{ label() }}</span>
</a> </a>
</template> </template>
@ -64,11 +66,6 @@ export default {
return to === lastPath || url === lastPath ? 'page' : undefined; return to === lastPath || url === lastPath ? 'page' : undefined;
} }
},
computed: {
iconClass() {
return ['p-menuitem-icon', this.item.icon];
}
} }
}; };
</script> </script>

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

@ -2,11 +2,12 @@
<button v-ripple :class="buttonClass" type="button" :aria-label="defaultAriaLabel" :disabled="disabled"> <button v-ripple :class="buttonClass" type="button" :aria-label="defaultAriaLabel" :disabled="disabled">
<slot></slot> <slot></slot>
<template v-if="!$slots.default"> <template v-if="!$slots.default">
<slot v-if="loading" name="loadingicon" :class="iconStyleClass"> <slot v-if="loading" name="loadingicon" :class="loadingIconStyleClass">
<component :is="loadingIcon ? 'span' : 'SpinnerIcon'" :class="iconStyleClass" spin /> <span v-if="loadingIcon" :class="[loadingIconStyleClass, loadingIcon]" />
<SpinnerIcon v-else :class="loadingIconStyleClass" spin />
</slot> </slot>
<slot v-else name="icon" :class="iconStyleClass"> <slot v-else name="icon" :class="iconStyleClass">
<span v-if="icon" :class="iconStyleClass"></span> <span v-if="icon" :class="[iconStyleClass, icon]"></span>
</slot> </slot>
<span class="p-button-label">{{ label || '&nbsp;' }}</span> <span class="p-button-label">{{ label || '&nbsp;' }}</span>
<span v-if="badge" :class="badgeStyleClass">{{ badge }}</span> <span v-if="badge" :class="badgeStyleClass">{{ badge }}</span>
@ -110,7 +111,6 @@ export default {
}, },
iconStyleClass() { iconStyleClass() {
return [ return [
this.loading ? 'p-button-loading-icon ' + (this.loadingIcon || '') : this.icon,
'p-button-icon', 'p-button-icon',
this.iconClass, this.iconClass,
{ {
@ -121,6 +121,9 @@ export default {
} }
]; ];
}, },
loadingIconStyleClass() {
return ['p-button-loading-icon pi-spin', this.iconStyleClass];
},
badgeStyleClass() { badgeStyleClass() {
return [ return [
'p-badge p-component', 'p-badge p-component',

2
components/lib/calendar/Calendar.vue
View File

@ -75,7 +75,7 @@
: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"
> >
<slot name="previcon"> <slot name="previousicon">
<component :is="previousIcon ? 'span' : 'ChevronLeftIcon'" :class="['p-datepicker-prev-icon', previousIcon]" /> <component :is="previousIcon ? 'span' : 'ChevronLeftIcon'" :class="['p-datepicker-prev-icon', previousIcon]" />
</slot> </slot>
</button> </button>

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

@ -15,7 +15,7 @@
@click="navBackward" @click="navBackward"
v-bind="prevButtonProps" v-bind="prevButtonProps"
> >
<slot name="previcon"> <slot name="previousicon">
<component :is="isVertical() ? 'ChevronUpIcon' : 'ChevronLeftIcon'" class="p-carousel-next-icon" /> <component :is="isVertical() ? 'ChevronUpIcon' : 'ChevronLeftIcon'" class="p-carousel-next-icon" />
</slot> </slot>
</button> </button>

14
components/lib/cascadeselect/CascadeSelect.vue
View File

@ -30,10 +30,16 @@
</slot> </slot>
</span> </span>
<div class="p-cascadeselect-trigger" role="button" tabindex="-1" aria-hidden="true"> <div class="p-cascadeselect-trigger" role="button" tabindex="-1" aria-hidden="true">
<slot name="indicator"> <slot v-if="$slots.indicator" name="indicator"></slot>
<component v-if="loading" :is="loadingIcon ? 'span' : 'SpinnerIcon'" spin :class="['p-cascadeselect-trigger-icon', loadingIcon]" aria-hidden="true" /> <template v-else>
<component v-else :is="dropdownIcon ? 'span' : 'ChevronDownIcon'" :class="['p-cascadeselect-trigger-icon', dropdownIcon]" aria-hidden="true" /> <slot v-if="loading" name="loadingicon" class="p-cascadeselect-trigger-icon">
</slot> <span v-if="loadingIcon" :class="['p-cascadeselect-trigger-icon pi-spin', loadingIcon]" aria-hidden="true" />
<SpinnerIcon v-else class="p-cascadeselect-trigger-icon" spin aria-hidden="true" />
</slot>
<slot v-else name="dropdownicon" class="p-cascadeselect-trigger-icon">
<component :is="dropdownIcon ? 'span' : 'ChevronDownIcon'" :class="['p-cascadeselect-trigger-icon', dropdownIcon]" aria-hidden="true" />
</slot>
</template>
</div> </div>
<span role="status" aria-live="polite" class="p-hidden-accessible"> <span role="status" aria-live="polite" class="p-hidden-accessible">
{{ searchResultMessageText }} {{ searchResultMessageText }}

15
components/lib/chip/Chip.vue
View File

@ -1,12 +1,14 @@
<template> <template>
<div v-if="visible" :class="containerClass" :aria-label="label"> <div v-if="visible" :class="containerClass" :aria-label="label">
<slot> <slot></slot>
<template v-if="!$slots.default">
<img v-if="image" :src="image" /> <img v-if="image" :src="image" />
<span v-else-if="icon" :class="iconClass"></span> <component v-else-if="$slots.icon" :is="$slots.icon" class="p-chip-icon" />
<span v-else-if="icon" :class="['p-chip-icon', icon]" />
<div v-if="label" class="p-chip-text">{{ label }}</div> <div v-if="label" class="p-chip-text">{{ label }}</div>
</slot> </template>
<slot name="removeicon" :click="close" :keydown="onKeydown"> <slot v-if="removable" name="removeicon" :onClick="close" :onKeydown="onKeydown">
<component v-if="removable" :is="removeIcon ? 'span' : 'TimesCircleIcon'" tabindex="0" :class="['p-chip-remove-icon', removeIcon]" @click="close" @keydown="onKeydown"></component> <component :is="removeIcon ? 'span' : 'TimesCircleIcon'" tabindex="0" :class="['p-chip-remove-icon', removeIcon]" @click="close" @keydown="onKeydown"></component>
</slot> </slot>
</div> </div>
</template> </template>
@ -63,9 +65,6 @@ export default {
'p-chip-image': this.image != null 'p-chip-image': this.image != null
} }
]; ];
},
iconClass() {
return ['p-chip-icon', this.icon];
} }
}, },
components: { components: {

11
components/lib/contextmenu/ContextMenuSub.vue
View File

@ -20,14 +20,19 @@
<template v-if="!templates.item"> <template v-if="!templates.item">
<router-link v-if="getItemProp(processedItem, 'to') && !isItemDisabled(processedItem)" v-slot="{ navigate, href, isActive, isExactActive }" :to="getItemProp(processedItem, 'to')" custom> <router-link v-if="getItemProp(processedItem, 'to') && !isItemDisabled(processedItem)" v-slot="{ navigate, href, isActive, isExactActive }" :to="getItemProp(processedItem, 'to')" custom>
<a v-ripple :href="href" :class="getItemActionClass(processedItem, { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)"> <a v-ripple :href="href" :class="getItemActionClass(processedItem, { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)">
<component :is="templates.itemicon || (getItemProp(processedItem, 'icon') ? 'span' : undefined)" :item="processedItem.item" :class="getItemIconClass(processedItem)" /> <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="getItemIconClass(processedItem)" />
<span v-else-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)" />
<span class="p-menuitem-text">{{ getItemLabel(processedItem) }}</span> <span class="p-menuitem-text">{{ getItemLabel(processedItem) }}</span>
</a> </a>
</router-link> </router-link>
<a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="getItemActionClass(processedItem)" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true"> <a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="getItemActionClass(processedItem)" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true">
<component :is="templates.itemicon || (getItemProp(processedItem, 'icon') ? 'span' : undefined)" :item="processedItem.item" :class="getItemIconClass(processedItem)" /> <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="getItemIconClass(processedItem)" />
<span v-else-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)" />
<span class="p-menuitem-text">{{ getItemLabel(processedItem) }}</span> <span class="p-menuitem-text">{{ getItemLabel(processedItem) }}</span>
<component v-if="getItemProp(processedItem, 'items')" :is="templates.submenuicon || 'AngleRightIcon'" :active="isItemActive(processedItem)" class="p-submenu-icon" /> <template v-if="getItemProp(processedItem, 'items')">
<component v-if="templates.submenuicon" :is="templates.submenuicon" :active="isItemActive(processedItem)" class="p-submenu-icon" />
<AngleRightIcon v-else class="p-submenu-icon" />
</template>
</a> </a>
</template> </template>
<component v-else :is="templates.item" :item="processedItem.item"></component> <component v-else :is="templates.item" :item="processedItem.item"></component>

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

@ -81,8 +81,8 @@
<component v-if="display === 'menu'" :is="filterElement" :field="field" :filterModel="fieldConstraint" :filterCallback="filterCallback" /> <component v-if="display === 'menu'" :is="filterElement" :field="field" :filterModel="fieldConstraint" :filterCallback="filterCallback" />
<div> <div>
<CFButton v-if="showRemoveIcon" type="button" class="p-column-filter-remove-button p-button-text p-button-danger p-button-sm" @click="removeConstraint(i)" :label="removeRuleButtonLabel"> <CFButton v-if="showRemoveIcon" type="button" class="p-column-filter-remove-button p-button-text p-button-danger p-button-sm" @click="removeConstraint(i)" :label="removeRuleButtonLabel">
<template #icon> <template #icon="iconProps">
<component :is="filterRemoveIconTemplate || 'TrashIcon'" class="p-button-icon-left" /> <component :is="filterRemoveIconTemplate || 'TrashIcon'" :class="iconProps.class" />
</template> </template>
</CFButton> </CFButton>
</div> </div>
@ -90,8 +90,8 @@
</div> </div>
<div v-if="isShowAddConstraint" class="p-column-filter-add-rule"> <div v-if="isShowAddConstraint" class="p-column-filter-add-rule">
<CFButton type="button" :label="addRuleButtonLabel" iconPos="left" class="p-column-filter-add-button p-button-text p-button-sm" @click="addConstraint()"> <CFButton type="button" :label="addRuleButtonLabel" iconPos="left" class="p-column-filter-add-button p-button-text p-button-sm" @click="addConstraint()">
<template #icon> <template #icon="iconProps">
<component :is="filterAddIconTemplate || 'PlusIcon'" class="p-button-icon-left" /> <component :is="filterAddIconTemplate || 'PlusIcon'" :class="iconProps.class" />
</template> </template>
</CFButton> </CFButton>
</div> </div>

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

@ -3,7 +3,11 @@
<slot></slot> <slot></slot>
<div v-if="loading" class="p-datatable-loading-overlay p-component-overlay"> <div v-if="loading" class="p-datatable-loading-overlay p-component-overlay">
<slot v-if="$slots.loading" name="loading"></slot> <slot v-if="$slots.loading" name="loading"></slot>
<component v-else :is="$slots.loadingicon ? $slots.loadingicon : loadingIcon ? 'i' : 'SpinnerIcon'" spin :class="['p-datatable-loading-icon', loadingIcon]" /> <template v-else>
<component v-if="$slots.loadingicon" :is="$slots.loadingicon" class="p-datatable-loading-icon" />
<i v-else-if="loadingIcon" :class="['p-datatable-loading-icon pi-spin', loadingIcon]" />
<SpinnerIcon v-else spin class="p-datatable-loading-icon" />
</template>
</div> </div>
<div v-if="$slots.header" class="p-datatable-header"> <div v-if="$slots.header" class="p-datatable-header">
<slot name="header"></slot> <slot name="header"></slot>

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

@ -4,7 +4,8 @@
<input ref="input" type="checkbox" :checked="checked" :disabled="$attrs.disabled" :tabindex="$attrs.disabled ? null : '0'" :aria-label="checkboxAriaLabel" @focus="onFocus($event)" @blur="onBlur($event)" @keydown="onKeydown" /> <input ref="input" type="checkbox" :checked="checked" :disabled="$attrs.disabled" :tabindex="$attrs.disabled ? null : '0'" :aria-label="checkboxAriaLabel" @focus="onFocus($event)" @blur="onBlur($event)" @keydown="onKeydown" />
</div> </div>
<div ref="box" :class="['p-checkbox-box p-component', { 'p-highlight': checked, 'p-disabled': $attrs.disabled, 'p-focus': focused }]"> <div ref="box" :class="['p-checkbox-box p-component', { 'p-highlight': checked, 'p-disabled': $attrs.disabled, 'p-focus': focused }]">
<component :is="rowCheckboxIconTemplate || 'CheckIcon'" :checked="checked" class="p-checkbox-icon" /> <component v-if="rowCheckboxIconTemplate" :is="rowCheckboxIconTemplate" :checked="checked" class="p-checkbox-icon" />
<CheckIcon v-else class="p-checkbox-icon" />
</div> </div>
</div> </div>
</template> </template>