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

Refactor #5681

pull/5701/head
tugcekucukoglu 2024-05-06 16:10:13 +03:00
parent 57ed42cd0d
commit c646fdc214
30 changed files with 64 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
components/lib/breadcrumb/Breadcrumb.d.ts vendored
View File

@ -67,13 +67,13 @@ export interface BreadcrumbPassThroughOptions {
*/
itemLink?: BreadcrumbPassThroughOptionType;
/**
* Used to pass attributes to the icon's DOM element.
* Used to pass attributes to the item icon's DOM element.
*/
icon?: BreadcrumbPassThroughOptionType;
itemIcon?: BreadcrumbPassThroughOptionType;
/**
* Used to pass attributes to the label's DOM element.
* Used to pass attributes to the item label's DOM element.
*/
label?: BreadcrumbPassThroughOptionType;
itemLabel?: BreadcrumbPassThroughOptionType;
/**
* Used to pass attributes to the separator's DOM element.
*/

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

@ -2,9 +2,9 @@
<li v-if="visible()" :class="[cx('item'), item.class]" v-bind="ptm('item', ptmOptions)">
<template v-if="!templates.item">
<a :href="item.url || '#'" :class="cx('itemLink')" :target="item.target" :aria-current="isCurrentUrl()" @click="onClick" v-bind="ptm('itemLink', ptmOptions)">
<component v-if="templates && templates.itemicon" :is="templates.itemicon" :item="item" :class="cx('icon', ptmOptions)" />
<span v-else-if="item.icon" :class="[cx('icon'), item.icon]" v-bind="ptm('icon', ptmOptions)" />
<span v-if="item.label" :class="cx('label')" v-bind="ptm('label', ptmOptions)">{{ label() }}</span>
<component v-if="templates && templates.itemicon" :is="templates.itemicon" :item="item" :class="cx('itemIcon', ptmOptions)" />
<span v-else-if="item.icon" :class="[cx('itemIcon'), item.icon]" v-bind="ptm('itemIcon', ptmOptions)" />
<span v-if="item.label" :class="cx('itemLabel')" v-bind="ptm('itemLabel', ptmOptions)">{{ label() }}</span>
</a>
</template>
<component v-else :is="templates.item" :item="item" :label="label()" :props="getMenuItemProps"></component>

4
components/lib/breadcrumb/style/BreadcrumbStyle.js
View File

@ -66,8 +66,8 @@ const classes = {
separator: 'p-breadcrumb-separator',
item: ({ instance }) => ['p-breadcrumb-item', { 'p-disabled': instance.disabled() }],
itemLink: 'p-breadcrumb-item-link',
icon: 'p-breadcrumb-item-icon',
label: 'p-breadcrumb-item-label'
itemIcon: 'p-breadcrumb-item-icon',
itemLabel: 'p-breadcrumb-item-label'
};
export default BaseStyle.extend({

2
components/lib/datatable/style/DataTableStyle.js
View File

@ -657,7 +657,7 @@ const classes = {
filterConstraintSeparator: 'p-datatable-filter-constraint-separator',
filterOperator: 'p-datatable-filter-operator',
filterOperatorDropdown: 'p-datatable-filter-operator-dropdown',
filterConstraints: 'p-datatable-filter-rule-list',
filterRuleList: 'p-datatable-filter-rule-list',
filterRule: 'p-datatable-filter-rule',
filterConstraintDropdown: 'p-datatable-filter-constraint-dropdown',
filterRemoveRuleButton: 'p-datatable-filter-remove-rule-button',

4
components/lib/dialog/Dialog.d.ts vendored
View File

@ -79,10 +79,10 @@ export interface DialogPassThroughOptions<T = any> {
*/
headerActions?: DialogPassThroughOptionType<T>;
/**
* Used to pass attributes to the maximizable Button component.
* Used to pass attributes to the maximize Button component.
* @see {@link ButtonPassThroughOptions}
*/
maximizableButton?: ButtonPassThroughOptions<DialogSharedPassThroughMethodOptions>;
maximizeButton?: ButtonPassThroughOptions<DialogSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the close Button component.
* @see {@link ButtonPassThroughOptions}

8
components/lib/dialog/Dialog.vue
View File

@ -14,17 +14,17 @@
v-if="maximizable"
:ref="maximizableRef"
:autofocus="focusableMax"
:class="cx('maximizableButton')"
:class="cx('maximizeButton')"
@click="maximize"
:tabindex="maximizable ? '0' : '-1'"
:unstyled="unstyled"
v-bind="maximizeButtonProps"
:pt="ptm('maximizableButton')"
:pt="ptm('maximizeButton')"
data-pc-group-section="headericon"
>
<template #icon="slotProps">
<slot name="maximizeicon" :maximized="maximized" :class="cx('maximizableIcon')">
<component :is="maximizeIconComponent" :class="[cx('maximizableIcon'), slotProps.class, maximized ? minimizeIcon : maximizeIcon]" v-bind="ptm('maximizableButton')['icon']" />
<slot name="maximizeicon" :maximized="maximized">
<component :is="maximizeIconComponent" :class="[slotProps.class, maximized ? minimizeIcon : maximizeIcon]" v-bind="ptm('maximizeButton')['icon']" />
</slot>
</template>
</Button>

2
components/lib/dialog/style/DialogStyle.js
View File

@ -174,7 +174,7 @@ const classes = {
header: 'p-dialog-header',
title: 'p-dialog-title',
headerActions: 'p-dialog-header-actions',
maximizableButton: 'p-dialog-maximize-button',
maximizeButton: 'p-dialog-maximize-button',
closeButton: 'p-dialog-close-button',
content: 'p-dialog-content',
footer: 'p-dialog-footer'

4
components/lib/galleria/Galleria.d.ts vendored
View File

@ -151,9 +151,9 @@ export interface GalleriaPassThroughOptions {
*/
previousThumbnailIcon?: GalleriaPassThroughOptionType;
/**
* Used to pass attributes to the thumbnail items container's DOM element.
* Used to pass attributes to the thumbnails viewport's DOM element.
*/
thumbnailItemsContainer?: GalleriaPassThroughOptionType;
thumbnailsViewport?: GalleriaPassThroughOptionType;
/**
* Used to pass attributes to the thumbnail items' DOM element.
*/

2
components/lib/galleria/GalleriaThumbnails.vue
View File

@ -14,7 +14,7 @@
>
<component :is="templates.previousthumbnailicon || (isVertical ? 'ChevronUpIcon' : 'ChevronLeftIcon')" :class="cx('previousThumbnailIcon')" v-bind="ptm('previousThumbnailIcon')" />
</button>
<div :class="cx('thumbnailItemsContainer')" :style="{ height: isVertical ? contentHeight : '' }" v-bind="ptm('thumbnailItemsContainer')">
<div :class="cx('thumbnailsViewport')" :style="{ height: isVertical ? contentHeight : '' }" v-bind="ptm('thumbnailsViewport')">
<div
ref="itemsContainer"
:class="cx('thumbnailItems')"

2
components/lib/galleria/style/GalleriaStyle.js
View File

@ -463,7 +463,7 @@ const classes = {
}
],
previousThumbnailIcon: 'p-galleria-thumbnail-prev-icon',
thumbnailItemsContainer: 'p-galleria-thumbnails-viewport',
thumbnailsViewport: 'p-galleria-thumbnails-viewport',
thumbnailItems: 'p-galleria-thumbnail-items',
thumbnailItem: ({ instance, index, activeIndex }) => [
'p-galleria-thumbnail-item',

4
components/lib/megamenu/MegaMenu.d.ts vendored
View File

@ -79,9 +79,9 @@ export interface MegaMenuPassThroughOptions {
*/
itemIcon?: MegaMenuPassThroughOptionType;
/**
* Used to pass attributes to the label's DOM element.
* Used to pass attributes to the item label's DOM element.
*/
label?: MegaMenuPassThroughOptionType;
itemLabel?: MegaMenuPassThroughOptionType;
/**
* Used to pass attributes to the submenu icon's DOM element.
*/

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

@ -25,7 +25,7 @@
<a v-ripple :href="getItemProp(processedItem, 'url')" :class="cx('itemLink')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions(processedItem, index, 'itemLink')">
<component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="cx('itemIcon')" />
<span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('itemIcon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, index, 'itemIcon')" />
<span :class="level === 0 ? cx('label') : cx('submenuItemLabel')" v-bind="level === 0 ? getPTOptions(processedItem, index, 'label') : getPTOptions(processedItem, index, 'submenuItemLabel')">
<span :class="level === 0 ? cx('itemLabel') : cx('submenuItemLabel')" v-bind="level === 0 ? getPTOptions(processedItem, index, 'itemLabel') : getPTOptions(processedItem, index, 'submenuItemLabel')">
{{ getItemLabel(processedItem) }}
</span>
<template v-if="isItemGroup(processedItem)">

2
components/lib/megamenu/style/MegaMenuStyle.js
View File

@ -316,7 +316,7 @@ const classes = {
itemContent: 'p-megamenu-item-content',
itemLink: 'p-megamenu-item-link',
itemIcon: 'p-megamenu-item-icon',
label: 'p-megamenu-item-text',
itemLabel: 'p-megamenu-item-label',
submenuIcon: 'p-megamenu-submenu-icon',
panel: 'p-megamenu-panel',
grid: 'p-megamenu-grid',

4
components/lib/menu/Menu.d.ts vendored
View File

@ -85,9 +85,9 @@ export interface MenuPassThroughOptions {
*/
itemIcon?: MenuPassThroughOptionType;
/**
* Used to pass attributes to the label's DOM element.
* Used to pass attributes to the item label's DOM element.
*/
label?: MenuPassThroughOptionType;
itemLabel?: MenuPassThroughOptionType;
/**
* Used to pass attributes to the separator's DOM element.
*/

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

@ -16,7 +16,7 @@
<a v-ripple :href="item.url" :class="cx('itemLink')" :target="item.target" tabindex="-1" aria-hidden="true" v-bind="getPTOptions('itemLink')">
<component v-if="templates.itemicon" :is="templates.itemicon" :item="item" :class="cx('itemIcon')" />
<span v-else-if="item.icon" :class="[cx('itemIcon'), item.icon]" v-bind="getPTOptions('itemIcon')" />
<span :class="cx('label')" v-bind="getPTOptions('label')">{{ label() }}</span>
<span :class="cx('itemLabel')" v-bind="getPTOptions('itemLabel')">{{ label() }}</span>
</a>
</template>
<component v-else-if="templates.item" :is="templates.item" :item="item" :label="label()" :props="getMenuItemProps(item)"></component>
@ -96,9 +96,9 @@ export default {
),
label: mergeProps(
{
class: this.cx('label')
class: this.cx('itemLabel')
},
this.getPTOptions('label')
this.getPTOptions('itemLabel')
)
};
}

2
components/lib/menu/style/MenuStyle.js
View File

@ -114,7 +114,7 @@ const classes = {
itemContent: 'p-menu-item-content',
itemLink: 'p-menu-item-link',
itemIcon: 'p-menu-item-icon',
label: 'p-menu-item-label'
itemLabel: 'p-menu-item-label'
};
export default BaseStyle.extend({

4
components/lib/panelmenu/PanelMenu.d.ts vendored
View File

@ -117,9 +117,9 @@ export interface PanelMenuPassThroughOptions {
*/
itemIcon?: PanelMenuPassThroughOptionType;
/**
* Used to pass attributes to the label's DOM element.
* Used to pass attributes to the item label's DOM element.
*/
label?: PanelMenuPassThroughOptionType;
itemLabel?: PanelMenuPassThroughOptionType;
/**
* Used to pass attributes to the submenu's DOM element.
*/

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

@ -25,7 +25,7 @@
</template>
<component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="cx('itemIcon')" />
<span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('itemIcon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions('itemIcon', processedItem, index)" />
<span :class="cx('label')" v-bind="getPTOptions('label', processedItem, index)">{{ getItemLabel(processedItem) }}</span>
<span :class="cx('itemLabel')" v-bind="getPTOptions('itemLabel', processedItem, index)">{{ getItemLabel(processedItem) }}</span>
</a>
</template>
<component
@ -187,9 +187,9 @@ export default {
),
label: mergeProps(
{
class: this.cx('label')
class: this.cx('itemLabel')
},
this.getPTOptions('label', processedItem, index)
this.getPTOptions('itemLabel', processedItem, index)
),
submenuicon: mergeProps(
{

2
components/lib/panelmenu/style/PanelMenuStyle.js
View File

@ -156,7 +156,7 @@ const classes = {
itemContent: 'p-panelmenu-item-content',
itemLink: 'p-panelmenu-item-link',
itemIcon: 'p-panelmenu-item-icon',
label: 'p-panelmenu-item-label',
itemLabel: 'p-panelmenu-item-label',
submenuIcon: 'p-panelmenu-submenu-icon',
submenu: 'p-panelmenu-submenu',
separator: 'p-menuitem-separator'

4
components/lib/password/Password.d.ts vendored
View File

@ -96,9 +96,9 @@ export interface PasswordPassThroughOptions {
*/
meterLabel?: PasswordPassThroughOptionType;
/**
* Used to pass attributes to the info's DOM element.
* Used to pass attributes to the meter text's DOM element.
*/
info?: PasswordPassThroughOptionType;
meterText?: PasswordPassThroughOptionType;
/**
* Used to pass attributes to the hidden accessible DOM element.
*/

6
components/lib/password/style/PasswordStyle.js
View File

@ -17,7 +17,7 @@ const theme = ({ dt }) => `
border-radius: ${dt('rounded.base')};
}
.p-password-meter-value {
.p-password-meter-label {
height: 100%;
width: 0;
transition: width 1s ease-in-out;
@ -91,8 +91,8 @@ const classes = {
}
],
meter: 'p-password-meter',
meterLabel: ({ instance }) => `p-password-meter-value ${instance.meter ? 'p-password-meter-' + instance.meter.strength : ''}`,
info: 'p-password-meter-text'
meterLabel: ({ instance }) => `p-password-meter-label ${instance.meter ? 'p-password-meter-' + instance.meter.strength : ''}`,
meterText: 'p-password-meter-text'
};
export default BaseStyle.extend({

8
components/lib/speeddial/SpeedDial.d.ts vendored
View File

@ -79,13 +79,13 @@ export interface SpeedDialPassThroughOptions {
*/
button?: ButtonPassThroughOptions<SpeedDialSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the menu's DOM element.
* Used to pass attributes to the list's DOM element.
*/
menu?: SpeedDialPassThroughOptionType;
list?: SpeedDialPassThroughOptionType;
/**
* Used to pass attributes to the menu item's DOM element.
* Used to pass attributes to the item's DOM element.
*/
menuitem?: SpeedDialPassThroughOptionType;
item?: SpeedDialPassThroughOptionType;
/**
* Used to pass attributes to the action's Button component.
* @see {@link ButtonPassThroughOptions}

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

@ -29,11 +29,11 @@
v-if="isItemVisible(item)"
:id="`${id}_${index}`"
:aria-controls="`${id}_item`"
:class="cx('menuitem', { id: `${id}_${index}` })"
:class="cx('item', { id: `${id}_${index}` })"
:style="getItemStyle(index)"
role="none"
:data-p-active="isItemActive(`${id}_${index}`)"
v-bind="getPTOptions(`${id}_${index}`, 'menuitem')"
v-bind="getPTOptions(`${id}_${index}`, 'item')"
>
<template v-if="!$slots.item">
<Button
@ -102,7 +102,7 @@ export default {
if (this.type !== 'linear') {
const button = DomHandler.findSingle(this.container, '[data-pc-name="button"]');
const firstItem = DomHandler.findSingle(this.list, '[data-pc-section="menuitem"]');
const firstItem = DomHandler.findSingle(this.list, '[data-pc-section="item"]');
if (button && firstItem) {
const wDiff = Math.abs(button.offsetWidth - firstItem.offsetWidth);
@ -241,7 +241,7 @@ export default {
event.preventDefault();
},
onEnterKey(event) {
const items = DomHandler.find(this.container, '[data-pc-section="menuitem"]');
const items = DomHandler.find(this.container, '[data-pc-section="item"]');
const itemIndex = [...items].findIndex((item) => item.id === this.focusedOptionIndex);
const buttonEl = DomHandler.findSingle(this.container, 'button');
@ -324,7 +324,7 @@ export default {
event.preventDefault();
},
changeFocusedOptionIndex(index) {
const items = DomHandler.find(this.container, '[data-pc-section="menuitem"]');
const items = DomHandler.find(this.container, '[data-pc-section="item"]');
const filteredItems = [...items].filter((item) => !DomHandler.hasClass(DomHandler.findSingle(item, 'a'), 'p-disabled'));
if (filteredItems[index]) {
@ -335,7 +335,7 @@ export default {
}
},
findPrevOptionIndex(index) {
const items = DomHandler.find(this.container, '[data-pc-section="menuitem"]');
const items = DomHandler.find(this.container, '[data-pc-section="item"]');
const filteredItems = [...items].filter((item) => !DomHandler.hasClass(DomHandler.findSingle(item, 'a'), 'p-disabled'));
const newIndex = index === -1 ? filteredItems[filteredItems.length - 1].id : index;
let matchedOptionIndex = filteredItems.findIndex((link) => link.getAttribute('id') === newIndex);
@ -345,7 +345,7 @@ export default {
return matchedOptionIndex;
},
findNextOptionIndex(index) {
const items = DomHandler.find(this.container, '[data-pc-section="menuitem"]');
const items = DomHandler.find(this.container, '[data-pc-section="item"]');
const filteredItems = [...items].filter((item) => !DomHandler.hasClass(DomHandler.findSingle(item, 'a'), 'p-disabled'));
const newIndex = index === -1 ? filteredItems[0].id : index;
let matchedOptionIndex = filteredItems.findIndex((link) => link.getAttribute('id') === newIndex);

6
components/lib/speeddial/style/SpeedDialStyle.js
View File

@ -14,7 +14,7 @@ const theme = ({ dt }) => `
}
.p-speeddial-button.p-speeddial-rotate {
transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')},
transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')},
box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
will-change: transform;
}
@ -105,8 +105,8 @@ const classes = {
'p-speeddial-rotate': props.rotateAnimation && !props.hideIcon
}
],
menu: 'p-speeddial-list',
menuitem: 'p-speeddial-item',
list: 'p-speeddial-list',
item: 'p-speeddial-item',
action: 'p-speeddial-action',
actionIcon: 'p-speeddial-action-icon',
mask: ({ instance }) => [

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

@ -102,9 +102,9 @@ export interface TreeSelectPassThroughOptions {
*/
panel?: TreeSelectPassThroughOptionType;
/**
* Used to pass attributes to the wrapper's DOM element.
* Used to pass attributes to the tree container's DOM element.
*/
wrapper?: TreeSelectPassThroughOptionType;
treeContainer?: TreeSelectPassThroughOptionType;
/**
* Used to pass attributes to Tree component.
* @see {@link TreePassThroughOptions}

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

@ -58,7 +58,7 @@
:data-p-hidden-focusable="true"
></span>
<slot name="header" :value="modelValue" :options="options"></slot>
<div :class="cx('wrapper')" :style="{ 'max-height': scrollHeight }" v-bind="ptm('wrapper')">
<div :class="cx('treeContainer')" :style="{ 'max-height': scrollHeight }" v-bind="ptm('treeContainer')">
<TSTree
ref="tree"
:id="listId"

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

@ -150,7 +150,7 @@ const classes = {
'p-ripple-disabled': instance.$primevue.config.ripple === false
}
],
wrapper: 'p-treeselect-tree-container',
treeContainer: 'p-treeselect-tree-container',
emptyMessage: 'p-treeselect-empty-message'
};

4
components/lib/treetable/TreeTable.d.ts vendored
View File

@ -282,9 +282,9 @@ export interface TreeTablePassThroughOptions {
*/
footer?: TreeTablePassThroughOptionType;
/**
* Used to pass attributes to the resize helper's DOM element.
* Used to pass attributes to the column resize indicator's DOM element.
*/
resizeHelper?: TreeTablePassThroughOptionType;
columnResizeIndicator?: TreeTablePassThroughOptionType;
/**
* Used to pass attributes to the Column helper components.
*/

2
components/lib/treetable/TreeTable.vue
View File

@ -163,7 +163,7 @@
<div v-if="$slots.footer" :class="cx('footer')" v-bind="ptm('footer')">
<slot name="footer"></slot>
</div>
<div ref="resizeHelper" :class="cx('columnResizeHelper')" style="display: none" v-bind="ptm('columnResizeHelper')"></div>
<div ref="resizeHelper" :class="cx('columnResizeIndicator')" style="display: none" v-bind="ptm('columnResizeIndicator')"></div>
</div>
</template>

2
components/lib/treetable/style/TreeTableStyle.js
View File

@ -514,7 +514,7 @@ const classes = {
}
],
footer: 'p-treetable-footer',
columnResizeHelper: 'p-treetable-column-resize-indicator'
columnResizeIndicator: 'p-treetable-column-resize-indicator'
};
const inlineStyles = {