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

Refactor #3832 Refactor #3833 - Update icons

pull/3976/head
mertsincan 2023-04-18 13:50:13 +03:00
parent 7933b927f5
commit f93e2be93d
17 changed files with 79 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
components/lib/megamenu/MegaMenuSub.vue
View File

@ -20,14 +20,19 @@
<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>
<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>
</a>
</router-link>
<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>
<component v-if="isItemGroup(processedItem)" :is="templates.submenuicon || (horizontal ? 'AngleDownIcon' : 'AngleRightIcon')" :active="isItemActive(processedItem)" class="p-submenu-icon" />
<template v-if="isItemGroup(processedItem)">
<component v-if="templates.submenuicon" :is="templates.submenuicon" :active="isItemActive(processedItem)" class="p-submenu-icon" />
<component v-else :is="horizontal ? 'AngleDownIcon' : 'AngleRightIcon'" class="p-submenu-icon" />
</template>
</a>
</template>
<component v-else :is="templates.item" :item="processedItem.item"></component>

6
components/lib/menu/Menuitem.vue
View File

@ -4,12 +4,14 @@
<template v-if="!templates.item">
<router-link v-if="item.to && !disabled()" v-slot="{ navigate, href, isActive, isExactActive }" :to="item.to" custom>
<a v-ripple :href="href" :class="linkClass({ isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($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="iconClass" />
<span v-else-if="item.icon" :class="iconClass" />
<span class="p-menuitem-text">{{ label() }}</span>
</a>
</router-link>
<a v-else v-ripple :href="item.url" :class="linkClass()" :target="item.target" tabindex="-1" aria-hidden="true">
<component :is="templates.itemicon || (item.icon ? 'span' : undefined)" :item="item" :class="iconClass" />
<component v-if="templates.itemicon" :is="templates.itemicon" :item="item" :class="iconClass" />
<span v-else-if="item.icon" :class="iconClass" />
<span class="p-menuitem-text">{{ label() }}</span>
</a>
</template>

4
components/lib/menubar/Menubar.d.ts vendored
View File

@ -61,9 +61,9 @@ export interface MenubarSlots {
item: MenuItem;
}): VNode[];
/**
* Custom bar icon template.
* Custom popup icon template on responsive mode.
*/
baricon(): VNode[];
popupicon(): VNode[];
/**
* Custom submenu icon template.
*/

4
components/lib/menubar/Menubar.vue
View File

@ -17,8 +17,8 @@
@keydown="menuButtonKeydown($event)"
v-bind="buttonProps"
>
<slot name="baricon">
<component :is="'BarsIcon'" />
<slot name="popupicon">
<BarsIcon />
</slot>
</a>
<MenubarSub

11
components/lib/menubar/MenubarSub.vue
View File

@ -19,14 +19,19 @@
<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>
<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>
</a>
</router-link>
<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>
<component v-if="getItemProp(processedItem, 'items')" :is="templates.submenuicon || (root ? 'AngleDownIcon' : 'AngleRightIcon')" :root="root" :active="isItemActive(processedItem)" class="p-submenu-icon" />
<template v-if="getItemProp(processedItem, 'items')">
<component v-if="templates.submenuicon" :is="templates.submenuicon" :root="root" :active="isItemActive(processedItem)" class="p-submenu-icon" />
<component v-else :is="root ? 'AngleDownIcon' : 'AngleRightIcon'" class="p-submenu-icon" />
</template>
</a>
</template>
<component v-else :is="templates.item" :item="processedItem.item"></component>

3
components/lib/organizationchart/OrganizationChartNode.vue
View File

@ -6,7 +6,8 @@
<div :class="nodeContentClass" @click="onNodeClick">
<component :is="templates[node.type] || templates['default']" :node="node" />
<a v-if="toggleable" tabindex="0" class="p-node-toggler" @click="toggleNode" @keydown="onKeydown">
<component :is="templates.togglericon || (expanded ? 'ChevronDownIcon' : 'ChevronUpIcon')" :expanded="expanded" class="p-node-toggler-icon" />
<component v-if="templates.togglericon" :is="templates.togglericon" :expanded="expanded" class="p-node-toggler-icon" />
<component v-else :is="expanded ? 'ChevronDownIcon' : 'ChevronUpIcon'" class="p-node-toggler-icon" />
</a>
</div>
</td>

6
components/lib/panelmenu/PanelMenu.vue
View File

@ -18,7 +18,8 @@
<template v-if="!$slots.item">
<router-link v-if="getItemProp(item, 'to') && !isItemDisabled(item)" v-slot="{ navigate, href, isActive, isExactActive }" :to="getItemProp(item, 'to')" custom>
<a :href="href" :class="getHeaderActionClass(item, { isActive, isExactActive })" :tabindex="-1" @click="onHeaderActionClick($event, navigate)">
<component :is="$slots.headericon || (getItemProp(item, 'icon') ? 'span' : undefined)" :item="item" :class="getHeaderIconClass(item)" />
<component v-if="$slots.headericon" :is="$slots.headericon" :item="item" :class="getHeaderIconClass(item)" />
<span v-else-if="getItemProp(item, 'icon')" :class="getHeaderIconClass(item)" />
<span class="p-menuitem-text">{{ getItemLabel(item) }}</span>
</a>
</router-link>
@ -26,7 +27,8 @@
<slot v-if="getItemProp(item, 'items')" name="submenuicon" :active="isItemActive(item)">
<component :is="isItemActive(item) ? 'ChevronDownIcon' : 'ChevronRightIcon'" class="p-submenu-icon" />
</slot>
<component :is="$slots.headericon || (getItemProp(item, 'icon') ? 'span' : undefined)" :item="item" :class="getHeaderIconClass(item)" />
<component v-if="$slots.headericon" :is="$slots.headericon" :item="item" :class="getHeaderIconClass(item)" />
<span v-else-if="getItemProp(item, 'icon')" :class="getHeaderIconClass(item)" />
<span class="p-menuitem-text">{{ getItemLabel(item) }}</span>
</a>
</template>

11
components/lib/panelmenu/PanelMenuSub.vue
View File

@ -17,13 +17,18 @@
<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>
<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>
</a>
</router-link>
<a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="getItemActionClass(processedItem)" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true">
<component v-if="isItemGroup(processedItem)" :is="templates.submenuicon || (isItemActive(processedItem) ? 'ChevronDownIcon' : 'ChevronRightIcon')" class="p-submenu-icon" :active="isItemActive(processedItem)" />
<component :is="templates.itemicon || (getItemProp(processedItem, 'icon') ? 'span' : undefined)" :item="processedItem.item" :class="getItemIconClass(processedItem)" />
<template v-if="isItemGroup(processedItem)">
<component v-if="templates.submenuicon" :is="templates.submenuicon" class="p-submenu-icon" :active="isItemActive(processedItem)" />
<component v-else :is="isItemActive(processedItem) ? 'ChevronDownIcon' : 'ChevronRightIcon'" class="p-submenu-icon" />
</template>
<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>
</a>
</template>

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

@ -14,8 +14,10 @@
:aria-labelledby="ariaLabelledby"
>
<template #icon>
<component v-if="d_visible && !!hideIcon" :is="hideIcon ? 'span' : 'PlusIcon'" :class="hideIcon" />
<component v-else :is="showIcon ? 'span' : 'PlusIcon'" :class="showIcon" />
<slot name="icon" :visible="d_visible">
<component v-if="d_visible && !!hideIcon" :is="hideIcon ? 'span' : 'PlusIcon'" :class="hideIcon" />
<component v-else :is="showIcon ? 'span' : 'PlusIcon'" :class="showIcon" />
</slot>
</template>
</SDButton>
</slot>

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

@ -1,7 +1,13 @@
<template>
<div :class="containerClass" :style="style">
<slot>
<PVSButton type="button" class="p-splitbutton-defaultbutton" :icon="icon" :label="label" :disabled="disabled" :aria-label="label" @click="onDefaultButtonClick" v-bind="buttonProps" />
<PVSButton type="button" class="p-splitbutton-defaultbutton" :label="label" :disabled="disabled" :aria-label="label" @click="onDefaultButtonClick" v-bind="buttonProps">
<template #icon>
<slot name="icon">
<span :class="icon" />
</slot>
</template>
</PVSButton>
</slot>
<PVSButton
ref="button"

6
components/lib/tabmenu/TabMenu.vue
View File

@ -17,7 +17,8 @@
@click="onItemClick($event, item, i, navigate)"
@keydown="onKeydownItem($event, item, i, navigate)"
>
<component :is="$slots.itemicon || (item.icon ? 'span' : undefined)" :item="item" :class="getItemIcon(item)" />
<component v-if="$slots.itemicon" :is="$slots.itemicon" :item="item" :class="getItemIcon(item)" />
<span v-else-if="item.icon" :class="getItemIcon(item)" />
<span class="p-menuitem-text">{{ label(item) }}</span>
</a>
</template>
@ -27,7 +28,8 @@
<li v-else-if="visible(item)" ref="tab" :class="getItemClass(item, i)" role="presentation" @click="onItemClick($event, item, i)" @keydown="onKeydownItem($event, item, i)">
<template v-if="!$slots.item">
<a ref="tabLink" v-ripple role="menuitem" :href="item.url" class="p-menuitem-link" :target="item.target" :aria-label="label(item)" :aria-disabled="disabled(item)" :tabindex="setTabIndex(i)">
<component :is="$slots.itemicon || (item.icon ? 'span' : undefined)" :item="item" :class="getItemIcon(item)" />
<component v-if="$slots.itemicon" :is="$slots.itemicon" :item="item" :class="getItemIcon(item)" />
<span v-else-if="item.icon" :class="getItemIcon(item)" />
<span class="p-menuitem-text">{{ label(item) }}</span>
</a>
</template>

3
components/lib/tag/Tag.vue
View File

@ -1,6 +1,7 @@
<template>
<span :class="containerClass">
<span v-if="icon" :class="iconClass"></span>
<component v-if="$slots.icon" :is="$slots.icon" class="p-tag-icon" />
<span v-else-if="icon" :class="iconClass"></span>
<slot>
<span class="p-tag-value">{{ value }}</span>
</slot>

11
components/lib/tieredmenu/TieredMenuSub.vue
View File

@ -19,14 +19,19 @@
<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>
<a v-ripple :href="href" :class="getItemActionClass(processedItem, { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)">
<span v-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)"></span>
<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>
</a>
</router-link>
<a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="getItemActionClass(processedItem)" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true">
<span v-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)"></span>
<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>
<component v-if="getItemProp(processedItem, 'items')" :is="templates.submenuicon || 'AngleRightIcon'" class="p-submenu-icon" :active="isItemActive(processedItem)" />
<template v-if="getItemProp(processedItem, 'items')">
<component v-if="templates.submenuicon" :is="templates.submenuicon" class="p-submenu-icon" :active="isItemActive(processedItem)" />
<AngleRightIcon v-else class="p-submenu-icon" />
</template>
</a>
</template>
<component v-else :is="templates.item" :item="processedItem.item"></component>

6
components/lib/togglebutton/ToggleButton.vue
View File

@ -16,7 +16,9 @@
v-bind="inputProps"
/>
</span>
<span v-if="hasIcon" :class="iconClass"></span>
<slot name="icon" :value="modelValue" :class="iconClass">
<span v-if="onIcon || offIcon" :class="iconClass" />
</slot>
<span class="p-button-label">{{ label }}</span>
</div>
</template>
@ -149,7 +151,7 @@ export default {
return this.onLabel && this.onLabel.length > 0 && this.offLabel && this.offLabel.length > 0;
},
hasIcon() {
return this.onIcon && this.onIcon.length > 0 && this.offIcon && this.offIcon.length > 0;
return this.$slots.icon || (this.onIcon && this.offIcon);
},
label() {
return this.hasLabel ? (this.modelValue ? this.onLabel : this.offLabel) : '&nbsp;';

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

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

7
components/lib/tree/TreeNode.vue
View File

@ -15,11 +15,14 @@
>
<div :class="contentClass" @click="onClick" @touchend="onTouchEnd" :style="node.style">
<button v-ripple type="button" class="p-tree-toggler p-link" @click="toggle" tabindex="-1" aria-hidden="true">
<component :is="templates['togglericon'] ? templates['togglericon'] : expanded ? node.expandedIcon || 'ChevronDownIcon' : node.collapsedIcon || 'ChevronRightIcon'" :node="node" :expanded="expanded" class="p-tree-toggler-icon" />
<component v-if="templates['togglericon']" :is="templates['togglericon']" :node="node" :expanded="expanded" class="p-tree-toggler-icon" />
<component v-else-if="expanded" :is="node.expandedIcon ? 'span' : 'ChevronDownIcon'" class="p-tree-toggler-icon" />
<component v-else :is="node.collapsedIcon ? 'span' : 'ChevronRightIcon'" class="p-tree-toggler-icon" />
</button>
<div v-if="checkboxMode" class="p-checkbox p-component" aria-hidden="true">
<div :class="checkboxClass" role="checkbox">
<component :is="templates['checkboxicon'] ? templates['checkboxicon'] : checked ? 'CheckIcon' : partialChecked ? 'MinusIcon' : null" :checked="checked" :partialChecked="partialChecked" class="p-checkbox-icon" />
<component v-if="templates['checkboxicon']" :is="templates['checkboxicon']" :checked="checked" :partialChecked="partialChecked" class="p-checkbox-icon" />
<component v-else :is="checked ? 'CheckIcon' : partialChecked ? 'MinusIcon' : null" class="p-checkbox-icon" />
</div>
</div>
<span :class="icon"></span>

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

@ -1,14 +1,17 @@
<template>
<td :style="containerStyle" :class="containerClass" role="cell">
<button v-if="columnProp('expander')" v-ripple type="button" class="p-treetable-toggler p-link" @click="toggle" :style="togglerStyle" tabindex="-1">
<component :is="templates['togglericon'] ? templates['togglericon'] : expanded ? 'ChevronDownIcon' : 'ChevronRightIcon'" :expanded="expanded" class="p-treetable-toggler-icon" />
<component v-if="templates['togglericon']" :is="templates['togglericon']" :node="node" :expanded="expanded" class="p-tree-toggler-icon" />
<component v-else-if="expanded" :is="node.expandedIcon ? 'span' : 'ChevronDownIcon'" class="p-tree-toggler-icon" />
<component v-else :is="node.collapsedIcon ? 'span' : 'ChevronRightIcon'" class="p-tree-toggler-icon" />
</button>
<div v-if="checkboxSelectionMode && columnProp('expander')" :class="['p-checkbox p-treetable-checkbox p-component', { 'p-checkbox-focused': checkboxFocused }]" @click="toggleCheckbox">
<div class="p-hidden-accessible">
<input type="checkbox" @focus="onCheckboxFocus" @blur="onCheckboxBlur" tabindex="-1" />
</div>
<div ref="checkboxEl" :class="checkboxClass">
<component :is="templates['checkboxicon'] ? templates['checkboxicon'] : checked ? 'CheckIcon' : partialChecked ? 'MinusIcon' : null" :checked="checked" :partialChecked="partialChecked" class="p-checkbox-icon" />
<component v-if="templates['checkboxicon']" :is="templates['checkboxicon']" :checked="checked" :partialChecked="partialChecked" class="p-checkbox-icon" />
<component v-else :is="checked ? 'CheckIcon' : partialChecked ? 'MinusIcon' : null" class="p-checkbox-icon" />
</div>
</div>
<component v-if="column.children && column.children.body" :is="column.children.body" :node="node" :column="column" />