Refactor #5681
parent
57ed42cd0d
commit
c646fdc214
|
@ -67,13 +67,13 @@ export interface BreadcrumbPassThroughOptions {
|
||||||
*/
|
*/
|
||||||
itemLink?: BreadcrumbPassThroughOptionType;
|
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.
|
* Used to pass attributes to the separator's DOM element.
|
||||||
*/
|
*/
|
||||||
|
|
|
@ -2,9 +2,9 @@
|
||||||
<li v-if="visible()" :class="[cx('item'), item.class]" v-bind="ptm('item', ptmOptions)">
|
<li v-if="visible()" :class="[cx('item'), item.class]" v-bind="ptm('item', ptmOptions)">
|
||||||
<template v-if="!templates.item">
|
<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)">
|
<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)" />
|
<component v-if="templates && templates.itemicon" :is="templates.itemicon" :item="item" :class="cx('itemIcon', ptmOptions)" />
|
||||||
<span v-else-if="item.icon" :class="[cx('icon'), item.icon]" v-bind="ptm('icon', ptmOptions)" />
|
<span v-else-if="item.icon" :class="[cx('itemIcon'), item.icon]" v-bind="ptm('itemIcon', ptmOptions)" />
|
||||||
<span v-if="item.label" :class="cx('label')" v-bind="ptm('label', ptmOptions)">{{ label() }}</span>
|
<span v-if="item.label" :class="cx('itemLabel')" v-bind="ptm('itemLabel', ptmOptions)">{{ label() }}</span>
|
||||||
</a>
|
</a>
|
||||||
</template>
|
</template>
|
||||||
<component v-else :is="templates.item" :item="item" :label="label()" :props="getMenuItemProps"></component>
|
<component v-else :is="templates.item" :item="item" :label="label()" :props="getMenuItemProps"></component>
|
||||||
|
|
|
@ -66,8 +66,8 @@ const classes = {
|
||||||
separator: 'p-breadcrumb-separator',
|
separator: 'p-breadcrumb-separator',
|
||||||
item: ({ instance }) => ['p-breadcrumb-item', { 'p-disabled': instance.disabled() }],
|
item: ({ instance }) => ['p-breadcrumb-item', { 'p-disabled': instance.disabled() }],
|
||||||
itemLink: 'p-breadcrumb-item-link',
|
itemLink: 'p-breadcrumb-item-link',
|
||||||
icon: 'p-breadcrumb-item-icon',
|
itemIcon: 'p-breadcrumb-item-icon',
|
||||||
label: 'p-breadcrumb-item-label'
|
itemLabel: 'p-breadcrumb-item-label'
|
||||||
};
|
};
|
||||||
|
|
||||||
export default BaseStyle.extend({
|
export default BaseStyle.extend({
|
||||||
|
|
|
@ -657,7 +657,7 @@ const classes = {
|
||||||
filterConstraintSeparator: 'p-datatable-filter-constraint-separator',
|
filterConstraintSeparator: 'p-datatable-filter-constraint-separator',
|
||||||
filterOperator: 'p-datatable-filter-operator',
|
filterOperator: 'p-datatable-filter-operator',
|
||||||
filterOperatorDropdown: 'p-datatable-filter-operator-dropdown',
|
filterOperatorDropdown: 'p-datatable-filter-operator-dropdown',
|
||||||
filterConstraints: 'p-datatable-filter-rule-list',
|
filterRuleList: 'p-datatable-filter-rule-list',
|
||||||
filterRule: 'p-datatable-filter-rule',
|
filterRule: 'p-datatable-filter-rule',
|
||||||
filterConstraintDropdown: 'p-datatable-filter-constraint-dropdown',
|
filterConstraintDropdown: 'p-datatable-filter-constraint-dropdown',
|
||||||
filterRemoveRuleButton: 'p-datatable-filter-remove-rule-button',
|
filterRemoveRuleButton: 'p-datatable-filter-remove-rule-button',
|
||||||
|
|
|
@ -79,10 +79,10 @@ export interface DialogPassThroughOptions<T = any> {
|
||||||
*/
|
*/
|
||||||
headerActions?: DialogPassThroughOptionType<T>;
|
headerActions?: DialogPassThroughOptionType<T>;
|
||||||
/**
|
/**
|
||||||
* Used to pass attributes to the maximizable Button component.
|
* Used to pass attributes to the maximize Button component.
|
||||||
* @see {@link ButtonPassThroughOptions}
|
* @see {@link ButtonPassThroughOptions}
|
||||||
*/
|
*/
|
||||||
maximizableButton?: ButtonPassThroughOptions<DialogSharedPassThroughMethodOptions>;
|
maximizeButton?: ButtonPassThroughOptions<DialogSharedPassThroughMethodOptions>;
|
||||||
/**
|
/**
|
||||||
* Used to pass attributes to the close Button component.
|
* Used to pass attributes to the close Button component.
|
||||||
* @see {@link ButtonPassThroughOptions}
|
* @see {@link ButtonPassThroughOptions}
|
||||||
|
|
|
@ -14,17 +14,17 @@
|
||||||
v-if="maximizable"
|
v-if="maximizable"
|
||||||
:ref="maximizableRef"
|
:ref="maximizableRef"
|
||||||
:autofocus="focusableMax"
|
:autofocus="focusableMax"
|
||||||
:class="cx('maximizableButton')"
|
:class="cx('maximizeButton')"
|
||||||
@click="maximize"
|
@click="maximize"
|
||||||
:tabindex="maximizable ? '0' : '-1'"
|
:tabindex="maximizable ? '0' : '-1'"
|
||||||
:unstyled="unstyled"
|
:unstyled="unstyled"
|
||||||
v-bind="maximizeButtonProps"
|
v-bind="maximizeButtonProps"
|
||||||
:pt="ptm('maximizableButton')"
|
:pt="ptm('maximizeButton')"
|
||||||
data-pc-group-section="headericon"
|
data-pc-group-section="headericon"
|
||||||
>
|
>
|
||||||
<template #icon="slotProps">
|
<template #icon="slotProps">
|
||||||
<slot name="maximizeicon" :maximized="maximized" :class="cx('maximizableIcon')">
|
<slot name="maximizeicon" :maximized="maximized">
|
||||||
<component :is="maximizeIconComponent" :class="[cx('maximizableIcon'), slotProps.class, maximized ? minimizeIcon : maximizeIcon]" v-bind="ptm('maximizableButton')['icon']" />
|
<component :is="maximizeIconComponent" :class="[slotProps.class, maximized ? minimizeIcon : maximizeIcon]" v-bind="ptm('maximizeButton')['icon']" />
|
||||||
</slot>
|
</slot>
|
||||||
</template>
|
</template>
|
||||||
</Button>
|
</Button>
|
||||||
|
|
|
@ -174,7 +174,7 @@ const classes = {
|
||||||
header: 'p-dialog-header',
|
header: 'p-dialog-header',
|
||||||
title: 'p-dialog-title',
|
title: 'p-dialog-title',
|
||||||
headerActions: 'p-dialog-header-actions',
|
headerActions: 'p-dialog-header-actions',
|
||||||
maximizableButton: 'p-dialog-maximize-button',
|
maximizeButton: 'p-dialog-maximize-button',
|
||||||
closeButton: 'p-dialog-close-button',
|
closeButton: 'p-dialog-close-button',
|
||||||
content: 'p-dialog-content',
|
content: 'p-dialog-content',
|
||||||
footer: 'p-dialog-footer'
|
footer: 'p-dialog-footer'
|
||||||
|
|
|
@ -151,9 +151,9 @@ export interface GalleriaPassThroughOptions {
|
||||||
*/
|
*/
|
||||||
previousThumbnailIcon?: GalleriaPassThroughOptionType;
|
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.
|
* Used to pass attributes to the thumbnail items' DOM element.
|
||||||
*/
|
*/
|
||||||
|
|
|
@ -14,7 +14,7 @@
|
||||||
>
|
>
|
||||||
<component :is="templates.previousthumbnailicon || (isVertical ? 'ChevronUpIcon' : 'ChevronLeftIcon')" :class="cx('previousThumbnailIcon')" v-bind="ptm('previousThumbnailIcon')" />
|
<component :is="templates.previousthumbnailicon || (isVertical ? 'ChevronUpIcon' : 'ChevronLeftIcon')" :class="cx('previousThumbnailIcon')" v-bind="ptm('previousThumbnailIcon')" />
|
||||||
</button>
|
</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
|
<div
|
||||||
ref="itemsContainer"
|
ref="itemsContainer"
|
||||||
:class="cx('thumbnailItems')"
|
:class="cx('thumbnailItems')"
|
||||||
|
|
|
@ -463,7 +463,7 @@ const classes = {
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
previousThumbnailIcon: 'p-galleria-thumbnail-prev-icon',
|
previousThumbnailIcon: 'p-galleria-thumbnail-prev-icon',
|
||||||
thumbnailItemsContainer: 'p-galleria-thumbnails-viewport',
|
thumbnailsViewport: 'p-galleria-thumbnails-viewport',
|
||||||
thumbnailItems: 'p-galleria-thumbnail-items',
|
thumbnailItems: 'p-galleria-thumbnail-items',
|
||||||
thumbnailItem: ({ instance, index, activeIndex }) => [
|
thumbnailItem: ({ instance, index, activeIndex }) => [
|
||||||
'p-galleria-thumbnail-item',
|
'p-galleria-thumbnail-item',
|
||||||
|
|
|
@ -79,9 +79,9 @@ export interface MegaMenuPassThroughOptions {
|
||||||
*/
|
*/
|
||||||
itemIcon?: MegaMenuPassThroughOptionType;
|
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.
|
* Used to pass attributes to the submenu icon's DOM element.
|
||||||
*/
|
*/
|
||||||
|
|
|
@ -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')">
|
<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')" />
|
<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 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) }}
|
{{ getItemLabel(processedItem) }}
|
||||||
</span>
|
</span>
|
||||||
<template v-if="isItemGroup(processedItem)">
|
<template v-if="isItemGroup(processedItem)">
|
||||||
|
|
|
@ -316,7 +316,7 @@ const classes = {
|
||||||
itemContent: 'p-megamenu-item-content',
|
itemContent: 'p-megamenu-item-content',
|
||||||
itemLink: 'p-megamenu-item-link',
|
itemLink: 'p-megamenu-item-link',
|
||||||
itemIcon: 'p-megamenu-item-icon',
|
itemIcon: 'p-megamenu-item-icon',
|
||||||
label: 'p-megamenu-item-text',
|
itemLabel: 'p-megamenu-item-label',
|
||||||
submenuIcon: 'p-megamenu-submenu-icon',
|
submenuIcon: 'p-megamenu-submenu-icon',
|
||||||
panel: 'p-megamenu-panel',
|
panel: 'p-megamenu-panel',
|
||||||
grid: 'p-megamenu-grid',
|
grid: 'p-megamenu-grid',
|
||||||
|
|
|
@ -85,9 +85,9 @@ export interface MenuPassThroughOptions {
|
||||||
*/
|
*/
|
||||||
itemIcon?: MenuPassThroughOptionType;
|
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.
|
* Used to pass attributes to the separator's DOM element.
|
||||||
*/
|
*/
|
||||||
|
|
|
@ -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')">
|
<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')" />
|
<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 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>
|
</a>
|
||||||
</template>
|
</template>
|
||||||
<component v-else-if="templates.item" :is="templates.item" :item="item" :label="label()" :props="getMenuItemProps(item)"></component>
|
<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(
|
label: mergeProps(
|
||||||
{
|
{
|
||||||
class: this.cx('label')
|
class: this.cx('itemLabel')
|
||||||
},
|
},
|
||||||
this.getPTOptions('label')
|
this.getPTOptions('itemLabel')
|
||||||
)
|
)
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
|
@ -114,7 +114,7 @@ const classes = {
|
||||||
itemContent: 'p-menu-item-content',
|
itemContent: 'p-menu-item-content',
|
||||||
itemLink: 'p-menu-item-link',
|
itemLink: 'p-menu-item-link',
|
||||||
itemIcon: 'p-menu-item-icon',
|
itemIcon: 'p-menu-item-icon',
|
||||||
label: 'p-menu-item-label'
|
itemLabel: 'p-menu-item-label'
|
||||||
};
|
};
|
||||||
|
|
||||||
export default BaseStyle.extend({
|
export default BaseStyle.extend({
|
||||||
|
|
|
@ -117,9 +117,9 @@ export interface PanelMenuPassThroughOptions {
|
||||||
*/
|
*/
|
||||||
itemIcon?: PanelMenuPassThroughOptionType;
|
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.
|
* Used to pass attributes to the submenu's DOM element.
|
||||||
*/
|
*/
|
||||||
|
|
|
@ -25,7 +25,7 @@
|
||||||
</template>
|
</template>
|
||||||
<component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="cx('itemIcon')" />
|
<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 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>
|
</a>
|
||||||
</template>
|
</template>
|
||||||
<component
|
<component
|
||||||
|
@ -187,9 +187,9 @@ export default {
|
||||||
),
|
),
|
||||||
label: mergeProps(
|
label: mergeProps(
|
||||||
{
|
{
|
||||||
class: this.cx('label')
|
class: this.cx('itemLabel')
|
||||||
},
|
},
|
||||||
this.getPTOptions('label', processedItem, index)
|
this.getPTOptions('itemLabel', processedItem, index)
|
||||||
),
|
),
|
||||||
submenuicon: mergeProps(
|
submenuicon: mergeProps(
|
||||||
{
|
{
|
||||||
|
|
|
@ -156,7 +156,7 @@ const classes = {
|
||||||
itemContent: 'p-panelmenu-item-content',
|
itemContent: 'p-panelmenu-item-content',
|
||||||
itemLink: 'p-panelmenu-item-link',
|
itemLink: 'p-panelmenu-item-link',
|
||||||
itemIcon: 'p-panelmenu-item-icon',
|
itemIcon: 'p-panelmenu-item-icon',
|
||||||
label: 'p-panelmenu-item-label',
|
itemLabel: 'p-panelmenu-item-label',
|
||||||
submenuIcon: 'p-panelmenu-submenu-icon',
|
submenuIcon: 'p-panelmenu-submenu-icon',
|
||||||
submenu: 'p-panelmenu-submenu',
|
submenu: 'p-panelmenu-submenu',
|
||||||
separator: 'p-menuitem-separator'
|
separator: 'p-menuitem-separator'
|
||||||
|
|
|
@ -96,9 +96,9 @@ export interface PasswordPassThroughOptions {
|
||||||
*/
|
*/
|
||||||
meterLabel?: PasswordPassThroughOptionType;
|
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.
|
* Used to pass attributes to the hidden accessible DOM element.
|
||||||
*/
|
*/
|
||||||
|
|
|
@ -17,7 +17,7 @@ const theme = ({ dt }) => `
|
||||||
border-radius: ${dt('rounded.base')};
|
border-radius: ${dt('rounded.base')};
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-password-meter-value {
|
.p-password-meter-label {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 0;
|
width: 0;
|
||||||
transition: width 1s ease-in-out;
|
transition: width 1s ease-in-out;
|
||||||
|
@ -91,8 +91,8 @@ const classes = {
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
meter: 'p-password-meter',
|
meter: 'p-password-meter',
|
||||||
meterLabel: ({ instance }) => `p-password-meter-value ${instance.meter ? 'p-password-meter-' + instance.meter.strength : ''}`,
|
meterLabel: ({ instance }) => `p-password-meter-label ${instance.meter ? 'p-password-meter-' + instance.meter.strength : ''}`,
|
||||||
info: 'p-password-meter-text'
|
meterText: 'p-password-meter-text'
|
||||||
};
|
};
|
||||||
|
|
||||||
export default BaseStyle.extend({
|
export default BaseStyle.extend({
|
||||||
|
|
|
@ -79,13 +79,13 @@ export interface SpeedDialPassThroughOptions {
|
||||||
*/
|
*/
|
||||||
button?: ButtonPassThroughOptions<SpeedDialSharedPassThroughMethodOptions>;
|
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.
|
* Used to pass attributes to the action's Button component.
|
||||||
* @see {@link ButtonPassThroughOptions}
|
* @see {@link ButtonPassThroughOptions}
|
||||||
|
|
|
@ -29,11 +29,11 @@
|
||||||
v-if="isItemVisible(item)"
|
v-if="isItemVisible(item)"
|
||||||
:id="`${id}_${index}`"
|
:id="`${id}_${index}`"
|
||||||
:aria-controls="`${id}_item`"
|
:aria-controls="`${id}_item`"
|
||||||
:class="cx('menuitem', { id: `${id}_${index}` })"
|
:class="cx('item', { id: `${id}_${index}` })"
|
||||||
:style="getItemStyle(index)"
|
:style="getItemStyle(index)"
|
||||||
role="none"
|
role="none"
|
||||||
:data-p-active="isItemActive(`${id}_${index}`)"
|
:data-p-active="isItemActive(`${id}_${index}`)"
|
||||||
v-bind="getPTOptions(`${id}_${index}`, 'menuitem')"
|
v-bind="getPTOptions(`${id}_${index}`, 'item')"
|
||||||
>
|
>
|
||||||
<template v-if="!$slots.item">
|
<template v-if="!$slots.item">
|
||||||
<Button
|
<Button
|
||||||
|
@ -102,7 +102,7 @@ export default {
|
||||||
|
|
||||||
if (this.type !== 'linear') {
|
if (this.type !== 'linear') {
|
||||||
const button = DomHandler.findSingle(this.container, '[data-pc-name="button"]');
|
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) {
|
if (button && firstItem) {
|
||||||
const wDiff = Math.abs(button.offsetWidth - firstItem.offsetWidth);
|
const wDiff = Math.abs(button.offsetWidth - firstItem.offsetWidth);
|
||||||
|
@ -241,7 +241,7 @@ export default {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
},
|
},
|
||||||
onEnterKey(event) {
|
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 itemIndex = [...items].findIndex((item) => item.id === this.focusedOptionIndex);
|
||||||
const buttonEl = DomHandler.findSingle(this.container, 'button');
|
const buttonEl = DomHandler.findSingle(this.container, 'button');
|
||||||
|
|
||||||
|
@ -324,7 +324,7 @@ export default {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
},
|
},
|
||||||
changeFocusedOptionIndex(index) {
|
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'));
|
const filteredItems = [...items].filter((item) => !DomHandler.hasClass(DomHandler.findSingle(item, 'a'), 'p-disabled'));
|
||||||
|
|
||||||
if (filteredItems[index]) {
|
if (filteredItems[index]) {
|
||||||
|
@ -335,7 +335,7 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
findPrevOptionIndex(index) {
|
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 filteredItems = [...items].filter((item) => !DomHandler.hasClass(DomHandler.findSingle(item, 'a'), 'p-disabled'));
|
||||||
const newIndex = index === -1 ? filteredItems[filteredItems.length - 1].id : index;
|
const newIndex = index === -1 ? filteredItems[filteredItems.length - 1].id : index;
|
||||||
let matchedOptionIndex = filteredItems.findIndex((link) => link.getAttribute('id') === newIndex);
|
let matchedOptionIndex = filteredItems.findIndex((link) => link.getAttribute('id') === newIndex);
|
||||||
|
@ -345,7 +345,7 @@ export default {
|
||||||
return matchedOptionIndex;
|
return matchedOptionIndex;
|
||||||
},
|
},
|
||||||
findNextOptionIndex(index) {
|
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 filteredItems = [...items].filter((item) => !DomHandler.hasClass(DomHandler.findSingle(item, 'a'), 'p-disabled'));
|
||||||
const newIndex = index === -1 ? filteredItems[0].id : index;
|
const newIndex = index === -1 ? filteredItems[0].id : index;
|
||||||
let matchedOptionIndex = filteredItems.findIndex((link) => link.getAttribute('id') === newIndex);
|
let matchedOptionIndex = filteredItems.findIndex((link) => link.getAttribute('id') === newIndex);
|
||||||
|
|
|
@ -14,7 +14,7 @@ const theme = ({ dt }) => `
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-speeddial-button.p-speeddial-rotate {
|
.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')};
|
box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
|
||||||
will-change: transform;
|
will-change: transform;
|
||||||
}
|
}
|
||||||
|
@ -105,8 +105,8 @@ const classes = {
|
||||||
'p-speeddial-rotate': props.rotateAnimation && !props.hideIcon
|
'p-speeddial-rotate': props.rotateAnimation && !props.hideIcon
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
menu: 'p-speeddial-list',
|
list: 'p-speeddial-list',
|
||||||
menuitem: 'p-speeddial-item',
|
item: 'p-speeddial-item',
|
||||||
action: 'p-speeddial-action',
|
action: 'p-speeddial-action',
|
||||||
actionIcon: 'p-speeddial-action-icon',
|
actionIcon: 'p-speeddial-action-icon',
|
||||||
mask: ({ instance }) => [
|
mask: ({ instance }) => [
|
||||||
|
|
|
@ -102,9 +102,9 @@ export interface TreeSelectPassThroughOptions {
|
||||||
*/
|
*/
|
||||||
panel?: TreeSelectPassThroughOptionType;
|
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.
|
* Used to pass attributes to Tree component.
|
||||||
* @see {@link TreePassThroughOptions}
|
* @see {@link TreePassThroughOptions}
|
||||||
|
|
|
@ -58,7 +58,7 @@
|
||||||
:data-p-hidden-focusable="true"
|
:data-p-hidden-focusable="true"
|
||||||
></span>
|
></span>
|
||||||
<slot name="header" :value="modelValue" :options="options"></slot>
|
<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
|
<TSTree
|
||||||
ref="tree"
|
ref="tree"
|
||||||
:id="listId"
|
:id="listId"
|
||||||
|
|
|
@ -150,7 +150,7 @@ const classes = {
|
||||||
'p-ripple-disabled': instance.$primevue.config.ripple === false
|
'p-ripple-disabled': instance.$primevue.config.ripple === false
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
wrapper: 'p-treeselect-tree-container',
|
treeContainer: 'p-treeselect-tree-container',
|
||||||
emptyMessage: 'p-treeselect-empty-message'
|
emptyMessage: 'p-treeselect-empty-message'
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -282,9 +282,9 @@ export interface TreeTablePassThroughOptions {
|
||||||
*/
|
*/
|
||||||
footer?: TreeTablePassThroughOptionType;
|
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.
|
* Used to pass attributes to the Column helper components.
|
||||||
*/
|
*/
|
||||||
|
|
|
@ -163,7 +163,7 @@
|
||||||
<div v-if="$slots.footer" :class="cx('footer')" v-bind="ptm('footer')">
|
<div v-if="$slots.footer" :class="cx('footer')" v-bind="ptm('footer')">
|
||||||
<slot name="footer"></slot>
|
<slot name="footer"></slot>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
|
@ -514,7 +514,7 @@ const classes = {
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
footer: 'p-treetable-footer',
|
footer: 'p-treetable-footer',
|
||||||
columnResizeHelper: 'p-treetable-column-resize-indicator'
|
columnResizeIndicator: 'p-treetable-column-resize-indicator'
|
||||||
};
|
};
|
||||||
|
|
||||||
const inlineStyles = {
|
const inlineStyles = {
|
||||||
|
|
Loading…
Reference in New Issue