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

Merge branch 'master' of https://github.com/primefaces/primevue

pull/4806/head^2
Çetin 2023-11-12 14:39:50 +03:00
parent 334a7e4a9f 5e341367c2
commit d5ef62389c
407 changed files with 12541 additions and 12427 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
CHANGELOG.md
View File

@ -1,11 +1,74 @@
# Changelog
## [3.40.1](https://github.com/primefaces/primevue/tree/3.40.1) (2023-11-09)
[Full Changelog](https://github.com/primefaces/primevue/compare/3.40.0...3.40.1)
**Fixed bugs:**
- InputGroupAddon esm broken [\#4788](https://github.com/primefaces/primevue/issues/4788)
## [3.40.0](https://github.com/primefaces/primevue/tree/3.40.0) (2023-11-09)
[Full Changelog](https://github.com/primefaces/primevue/compare/3.39.0...3.40.0)
**Breaking Changes:**
- AccordionTab: isTabActive property is deprecated [\#4783](https://github.com/primefaces/primevue/issues/4783)
- Remove vue-router support from Menu components [\#4739](https://github.com/primefaces/primevue/issues/4739)
- Tooltip: escape should be false by default [\#4738](https://github.com/primefaces/primevue/issues/4738)
**Fixed bugs:**
- DataTable/TreeTable: Frozen column improvements [\#4786](https://github.com/primefaces/primevue/issues/4786)
- Table row is not highlighted with context menu [\#4785](https://github.com/primefaces/primevue/issues/4785)
- core: Error BaseStyle\_\_default.default is undefined [\#4648](https://github.com/primefaces/primevue/issues/4648)
- DataTable: editingRows watcher implementation defect [\#4757](https://github.com/primefaces/primevue/issues/4757)
- MultiSelect Name: prop overshadowing [\#4743](https://github.com/primefaces/primevue/issues/4743)
- SpeedDial: unstyled implementation defect breaks the calculations [\#4740](https://github.com/primefaces/primevue/issues/4740)
- Tooltip: autoHide does not work properly [\#4737](https://github.com/primefaces/primevue/issues/4737)
- Calendar: Console.Error/Crash when pressing Escape key using Inline Calendar [\#4732](https://github.com/primefaces/primevue/issues/4732)
- Calendar does not show the right month (for the minimal departure date) when it's dynamically set [\#4157](https://github.com/primefaces/primevue/issues/4157)
**Implemented New Features and Enhancements:**
- Collision Enhancements [\#4784](https://github.com/primefaces/primevue/issues/4784)
- TabMenu/Steps: active option for item templating [\#4780](https://github.com/primefaces/primevue/issues/4780)
- PanelMenu: root option for item templating [\#4779](https://github.com/primefaces/primevue/issues/4779)
- Steps: new activeStep property [\#4778](https://github.com/primefaces/primevue/issues/4778)
- ContextMenu: hasSubmenu options for item templating [\#4764](https://github.com/primefaces/primevue/issues/4764)
- TieredMenu: New start and end templating [\#4760](https://github.com/primefaces/primevue/issues/4760)
- PanelMenu: active options for item templating [\#4750](https://github.com/primefaces/primevue/issues/4750)
- New InputGroup Component [\#4742](https://github.com/primefaces/primevue/issues/4742)
## [3.39.0](https://github.com/primefaces/primevue/tree/3.39.0) (2023-11-01)
[Full Changelog](https://github.com/primefaces/primevue/compare/3.38.1...3.39.0)
**Breaking Changes:**
- Change slot parameter function name on* to *CallBack [\#4728](https://github.com/primefaces/primevue/issues/4728)
**Fixed bugs:**
- ConfirmPopup: arrow defect [\#4730](https://github.com/primefaces/primevue/issues/4730)
- Overlaypanel: Overlaypanel closes when any key is pressed [\#4712](https://github.com/primefaces/primevue/issues/4712)
- Steps: Property 'step' does not exist on type 'StepsRouterBindProps'. [\#4703](https://github.com/primefaces/primevue/issues/4703)
- Datatable: Cannot set properties of null (setting 'tabIndex') [\#4498](https://github.com/primefaces/primevue/issues/4498)
- Menubar: Custom locale config overwriting default untouched config properties [\#4270](https://github.com/primefaces/primevue/issues/4270)
**Implemented New Features and Enhancements:**
- SplitButton: new buttoncontent and item slots [\#4729](https://github.com/primefaces/primevue/issues/4729)
- Datatable: Lara Dark Theme Color Inconsistencies [\#4714](https://github.com/primefaces/primevue/issues/4714)
## [3.38.1](https://github.com/primefaces/primevue/tree/3.38.1) (2023-10-26)
[Full Changelog](https://github.com/primefaces/primevue/compare/3.38.0...3.38.1)
**Fixed bugs:**
- The package was not published correctly [\#4697](https://github.com/primefaces/primevue/issues/4697)
- The package was not published correctly [\#4697](https://github.com/primefaces/primevue/issues/4697)
## [3.38.0](https://github.com/primefaces/primevue/tree/3.38.0) (2023-10-26)

6
api-generator/build-apidoc.js
View File

@ -398,7 +398,11 @@ if (project) {
functionParameters += `<span class="text-primary-700">${param.name}</span>: ${param.type?.name}`;
});
type += `\t <span class="ml-3 text-primary-700">${child.name}</span>: <span class="text-primary-500">(${functionParameters}) &rArr; ${child.type?.declaration?.signatures[0]?.type?.name}</span>, <span class="text-primary-300">// ${child.type?.declaration?.signatures[0]?.comment.summary[0]?.text}</span>\n`;
if (child.type?.declaration?.signatures[0]?.comment?.getTag('@deprecated')?.content[0]?.text) {
type += `\t <span class="ml-3 text-primary-700 line-through">${child.name}</span>: <span class="text-primary-500 line-through">(${functionParameters}) &rArr; ${child.type?.declaration?.signatures[0]?.type?.name}</span>, <span class="text-primary-300 line-through">// ${child.type?.declaration?.signatures[0]?.comment.summary[0]?.text}</span>\n`;
} else {
type += `\t <span class="ml-3 text-primary-700">${child.name}</span>: <span class="text-primary-500">(${functionParameters}) &rArr; ${child.type?.declaration?.signatures[0]?.type?.name}</span>, <span class="text-primary-300">// ${child.type?.declaration?.signatures[0]?.comment.summary[0]?.text}</span>\n`;
}
} else {
const childType = child.type.elementType ? child.type.elementType.name : child.type.name;

6
api-generator/components/breadcrumb.js
View File

@ -11,12 +11,6 @@ const BreadcrumbProps = [
default: 'null',
description: 'Configuration for the home icon.'
},
{
name: 'exact',
type: 'boolean',
default: 'true',
description: "Whether to apply 'router-link-active-exact' class if route exactly matches the item path."
},
{
name: 'pt',
type: 'any',

6
api-generator/components/contextmenu.js
View File

@ -29,12 +29,6 @@ const ContextMenuProps = [
default: 'false',
description: 'Attaches the menu to document instead of a particular item.'
},
{
name: 'exact',
type: 'boolean',
default: 'true',
description: "Whether to apply 'router-link-active-exact' class if route exactly matches the item path."
},
{
name: 'pt',
type: 'any',

6
api-generator/components/dock.js
View File

@ -23,12 +23,6 @@ const DockProps = [
default: 'null',
description: 'Inline style of the element.'
},
{
name: 'exact',
type: 'boolean',
default: 'true',
description: "Whether to apply 'router-link-active-exact' class if route exactly matches the item path."
},
{
name: 'tooltipOptions',
type: 'object',

6
api-generator/components/megamenu.js
View File

@ -11,12 +11,6 @@ const MegaMenuProps = [
default: 'horizontal',
description: 'Defines the orientation, valid values are horizontal and vertical.'
},
{
name: 'exact',
type: 'boolean',
default: 'true',
description: "Whether to apply 'router-link-active-exact' class if route exactly matches the item path."
},
{
name: 'pt',
type: 'any',

12
api-generator/components/menu.js
View File

@ -29,12 +29,6 @@ const MenuProps = [
default: 'true',
description: 'Whether to automatically manage layering.'
},
{
name: 'exact',
type: 'boolean',
default: 'true',
description: "Whether to apply 'router-link-active-exact' class if route exactly matches the item path."
},
{
name: 'pt',
type: 'any',
@ -63,11 +57,11 @@ const MenuEvents = [
const MenuSlots = [
{
name: 'start',
description: 'Custom content before the content'
description: 'Custom start content.'
},
{
name: 'end',
description: 'Custom content after the content'
description: 'Custom end content.'
},
{
name: 'item',
@ -79,7 +73,7 @@ const MenuSlots = [
},
{
name: 'submenuheader',
description: 'Custom submenuheader template.'
description: 'Custom submenu header template.'
}
];

6
api-generator/components/menubar.js
View File

@ -5,12 +5,6 @@ const MenubarProps = [
default: 'null',
description: 'An array of menuitems.'
},
{
name: 'exact',
type: 'boolean',
default: 'true',
description: "Whether to apply 'router-link-active-exact' class if route exactly matches the item path."
},
{
name: 'pt',
type: 'any',

6
api-generator/components/panelmenu.js
View File

@ -11,12 +11,6 @@ const PanelMenuProps = [
default: 'null',
description: 'A map of keys to represent the expansion state in controlled mode.'
},
{
name: 'exact',
type: 'boolean',
default: 'true',
description: "Whether to apply 'router-link-active-exact' class if route exactly matches the item path."
},
{
name: 'pt',
type: 'any',

12
api-generator/components/steps.js
View File

@ -11,18 +11,18 @@ const StepsProps = [
default: 'null',
description: 'An array of menuitems.'
},
{
name: 'activeStep',
type: 'number',
default: '0',
description: 'Active step index of menuitem.'
},
{
name: 'readonly',
type: 'boolean',
default: 'true',
description: 'Whether the items are clickable or not.'
},
{
name: 'exact',
type: 'boolean',
default: 'true',
description: "Whether to apply 'router-link-active-exact' class if route exactly matches the item path."
},
{
name: 'pt',
type: 'any',

6
api-generator/components/tabmenu.js
View File

@ -5,12 +5,6 @@ const TabMenuProps = [
default: 'null',
description: 'An array of menuitems.'
},
{
name: 'exact',
type: 'boolean',
default: 'true',
description: 'Defines if active route highlight should match the exact route path.'
},
{
name: 'activeIndex',
type: 'number',

14
api-generator/components/tieredmenu.js
View File

@ -29,12 +29,6 @@ const TieredMenuProps = [
default: 'true',
description: 'Whether to automatically manage layering.'
},
{
name: 'exact',
type: 'boolean',
default: 'true',
description: "Whether to apply 'router-link-active-exact' class if route exactly matches the item path."
},
{
name: 'pt',
type: 'any',
@ -50,6 +44,14 @@ const TieredMenuProps = [
];
const TieredMenuSlots = [
{
name: 'start',
description: 'Custom start content.'
},
{
name: 'end',
description: 'Custom end content.'
},
{
name: 'item',
description: 'Template of a menuitem.'

4
assets/styles/layout/_code.scss
View File

@ -119,10 +119,6 @@ pre[class*="language-"] {
.token.entity {
cursor: help;
}
.token.namespace {
opacity: .7;
}
}
}

2
components/doc/DocApiTable.vue
View File

@ -107,7 +107,7 @@ export default {
}
return value?.split('|').map((item) => {
return item.replace(/(\[|\]|<|>).*$/gm, '').trim();
return item.replace(/(\|\|<|>).*$/gm, '').trim();
});
},
isLinkType(value) {

4
components/doc/codeeditor/templates.js
View File

@ -2,7 +2,7 @@ import pkg from '../../../package.json';
import { services } from './services';
const PrimeVue = {
version: '^3.38.0',
version: '^3.40.0',
description:
'PrimeVue is an open source UI library for Vue featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock, which has 400+ ready to use UI blocks to build spectacular applications in no time.'
};
@ -148,6 +148,7 @@ import PrimeVue from "primevue/config";
import AutoComplete from 'primevue/autocomplete';
import Accordion from 'primevue/accordion';
import AccordionTab from 'primevue/accordiontab';
import AnimateOnScroll from 'primevue/animateonscroll';
import Avatar from 'primevue/avatar';
import AvatarGroup from 'primevue/avatargroup';
import Badge from 'primevue/badge';
@ -256,6 +257,7 @@ app.directive('badge', BadgeDirective);
app.directive('ripple', Ripple);
app.directive('styleclass', StyleClass);
app.directive('focustrap', FocusTrap);
app.directive('animateonscroll', AnimateOnScroll);
app.component('Accordion', Accordion);
app.component('AccordionTab', AccordionTab);

2
components/lib/accordion/Accordion.d.ts vendored
View File

@ -85,7 +85,7 @@ export interface AccordionPassThroughOptions {
*/
accordiontab?: AccordionTabPassThroughOptionType;
/**
* Used to manage all lifecycle hooks
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}
*/
hooks?: ComponentHooks;

2
components/lib/accordion/Accordion.vue
View File

@ -20,7 +20,7 @@
@keydown="onTabKeyDown($event, tab, i)"
v-bind="{ ...getTabProp(tab, 'headeractionprops'), ...getTabPT(tab, 'headeraction', i) }"
>
<component v-if="tab.children && tab.children.headericon" :is="tab.children.headericon" :isTabActive="isTabActive(i)" :index="i"></component>
<component v-if="tab.children && tab.children.headericon" :is="tab.children.headericon" :isTabActive="isTabActive(i)" :active="isTabActive(i)" :index="i"></component>
<component
v-else-if="isTabActive(i)"
:is="$slots.collapseicon ? $slots.collapseicon : collapseIcon ? 'span' : 'ChevronDownIcon'"

6
components/lib/accordiontab/AccordionTab.d.ts vendored
View File

@ -194,8 +194,14 @@ export interface AccordionTabSlots {
/**
* Whether the tab is active
* @param {number} index - Index of the tab
* @deprecated since v3.40.0. Use 'active' property instead.
*/
isTabActive: (index: number) => void;
/**
* Whether the tab is active
* @param {number} index - Index of the tab
*/
active: (index: number) => void;
}): VNode[];
}

4
components/lib/animateonscroll/AnimateOnScroll.d.ts vendored
View File

@ -40,7 +40,7 @@ export interface AnimateOnScrollOptions {
*/
export interface AnimateOnScrollDirectivePassThroughOptions {
/**
* Used to manage all lifecycle hooks
* Used to manage all lifecycle hooks.
* @see {@link BaseDirective.DirectiveHooks}
*/
hooks?: DirectiveHooks;
@ -66,7 +66,7 @@ export interface AnimateOnScrollDirectiveBinding extends Omit<DirectiveBinding,
*/
value?: AnimateOnScrollOptions | undefined;
/**
* Modifiers of the tooltip.
* Modifiers of the AnimateOnScroll.
* @type {AnimateOnScrollDirectiveModifiers}
*/
modifiers?: AnimateOnScrollDirectiveModifiers | undefined;

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

@ -186,7 +186,7 @@ export interface AutoCompletePassThroughOptions {
*/
selectedMessage?: AutoCompletePassThroughOptionType;
/**
* Used to manage all lifecycle hooks
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}
*/
hooks?: ComponentHooks;
@ -631,8 +631,14 @@ export interface AutoCompleteSlots {
/**
* Remove token icon function.
* @param {Event} event - Browser event
* @deprecated since v3.39.0. Use 'removeCallback' property instead.
*/
onClick: (event: Event, index: number) => void;
/**
* Remove token icon function.
* @param {Event} event - Browser event
*/
removeCallback: (event: Event, index: number) => void;
}): VNode[];
/**
* Custom loading icon template.

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

@ -55,7 +55,7 @@
<slot name="chip" :value="option">
<span :class="cx('tokenLabel')" v-bind="ptm('tokenLabel')">{{ getOptionLabel(option) }}</span>
</slot>
<slot name="removetokenicon" :class="cx('removeTokenIcon')" :index="i" :onClick="(event) => removeOption(event, i)">
<slot name="removetokenicon" :class="cx('removeTokenIcon')" :index="i" :onClick="(event) => removeOption(event, i)" :removeCallback="(event) => removeOption(event, i)">
<component :is="removeTokenIcon ? 'span' : 'TimesCircleIcon'" :class="[cx('removeTokenIcon'), removeTokenIcon]" @click="removeOption($event, i)" aria-hidden="true" v-bind="ptm('removeTokenIcon')" />
</slot>
</li>

2
components/lib/avatar/Avatar.d.ts vendored
View File

@ -65,7 +65,7 @@ export interface AvatarPassThroughOptions {
*/
image?: AvatarPassThroughOptionType;
/**
* Used to manage all lifecycle hooks
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}
*/
hooks?: ComponentHooks;

2
components/lib/avatargroup/AvatarGroup.d.ts vendored
View File

@ -30,7 +30,7 @@ export interface AvatarGroupPassThroughOptions {
*/
root?: AvatarGroupPassThroughOptionType;
/**
* Used to manage all lifecycle hooks
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}
*/
hooks?: ComponentHooks;

2
components/lib/badge/Badge.d.ts vendored
View File

@ -49,7 +49,7 @@ export interface BadgePassThroughOptions {
*/
root?: BadgePassThroughOptionType;
/**
* Used to manage all lifecycle hooks
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}
*/
hooks?: ComponentHooks;

2
components/lib/badgedirective/BadgeDirective.d.ts vendored
View File

@ -55,7 +55,7 @@ export interface BadgeDirectivePassThroughOptions {
*/
root?: BadgeDirectivePassThroughOptionType;
/**
* Used to manage all lifecycle hooks
* Used to manage all lifecycle hooks.
* @see {@link BaseDirective.DirectiveHooks}
*/
hooks?: DirectiveHooks;

2
components/lib/blockui/BlockUI.d.ts vendored
View File

@ -50,7 +50,7 @@ export interface BlockUIPassThroughOptions {
*/
mask?: BlockUIPassThroughOptionType;
/**
* Used to manage all lifecycle hooks
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}
*/
hooks?: ComponentHooks;

4
components/lib/breadcrumb/BaseBreadcrumb.vue
View File

@ -13,10 +13,6 @@ export default {
home: {
type: null,
default: null
},
exact: {
type: Boolean,
default: true
}
},
style: BreadcrumbStyle,

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

@ -75,7 +75,7 @@ export interface BreadcrumbPassThroughOptions {
*/
separatorIcon?: BreadcrumbPassThroughOptionType;
/**
* Used to manage all lifecycle hooks
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}
*/
hooks?: ComponentHooks;
@ -134,6 +134,7 @@ export interface BreadcrumbProps {
home?: MenuItem | undefined;
/**
* Whether to apply 'router-link-active-exact' class if route exactly matches the item path.
* @deprecated since v3.40.0.
* @defaultValue true
*/
exact?: boolean | undefined;

9
components/lib/breadcrumb/Breadcrumb.vue
View File

@ -1,14 +1,14 @@
<template>
<nav :class="cx('root')" v-bind="ptm('root')" data-pc-name="breadcrumb">
<ol :class="cx('menu')" v-bind="ptm('menu')">
<BreadcrumbItem v-if="home" :item="home" :class="cx('home')" :templates="$slots" :exact="exact" :pt="pt" :unstyled="unstyled" v-bind="ptm('home')" />
<BreadcrumbItem v-if="home" :item="home" :class="cx('home')" :templates="$slots" :pt="pt" :unstyled="unstyled" v-bind="ptm('home')" />
<template v-for="(item, i) of model" :key="item.label + '_' + i">
<li v-if="home || i !== 0" :class="cx('separator')" v-bind="ptm('separator')">
<slot name="separator">
<ChevronRightIcon aria-hidden="true" v-bind="ptm('separatorIcon')" />
</slot>
</li>
<BreadcrumbItem :item="item" :index="i" :templates="$slots" :exact="exact" :pt="pt" :unstyled="unstyled" />
<BreadcrumbItem :item="item" :index="i" :templates="$slots" :pt="pt" :unstyled="unstyled" />
</template>
</ol>
</nav>
@ -22,11 +22,6 @@ import BreadcrumbItem from './BreadcrumbItem.vue';
export default {
name: 'Breadcrumb',
extends: BaseBreadcrumb,
beforeMount() {
if (!this.$slots.item) {
console.warn('In future versions, vue-router support will be removed. Item templating should be used.');
}
},
components: {
BreadcrumbItem: BreadcrumbItem,
ChevronRightIcon: ChevronRightIcon

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

@ -1,14 +1,7 @@
<template>
<li v-if="visible()" :class="[cx('menuitem'), item.class]" v-bind="ptm('menuitem', ptmOptions)">
<template v-if="!templates.item">
<router-link v-if="item.to" v-slot="{ navigate, href, isActive, isExactActive }" :to="item.to" custom>
<a :href="href" :class="cx('action', { isActive, isExactActive })" :aria-current="isCurrentUrl()" @click="onClick($event, navigate)" v-bind="ptm('action', ptmOptions)">
<component v-if="templates.itemicon" :is="templates.itemicon" :item="item" :class="cx('icon')" />
<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>
</a>
</router-link>
<a v-else :href="item.url || '#'" :class="cx('action')" :target="item.target" :aria-current="isCurrentUrl()" @click="onClick" v-bind="ptm('action', ptmOptions)">
<a :href="item.url || '#'" :class="cx('action')" :target="item.target" :aria-current="isCurrentUrl()" @click="onClick" v-bind="ptm('action', 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>
@ -29,7 +22,6 @@ export default {
props: {
item: null,
templates: null,
exact: null,
index: null
},
methods: {
@ -40,10 +32,6 @@ export default {
item: this.item
});
}
if (this.item.to && navigate) {
navigate(event);
}
},
visible() {
return typeof this.item.visible === 'function' ? this.item.visible() : this.item.visible !== false;

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

@ -42,13 +42,7 @@ const classes = {
home: 'p-breadcrumb-home',
separator: 'p-menuitem-separator',
menuitem: ({ instance }) => ['p-menuitem', { 'p-disabled': instance.disabled() }],
action: ({ props, isActive, isExactActive }) => [
'p-menuitem-link',
{
'router-link-active': isActive,
'router-link-active-exact': props.exact && isExactActive
}
],
action: 'p-menuitem-link',
icon: 'p-menuitem-icon',
label: 'p-menuitem-text'
};

2
components/lib/button/Button.d.ts vendored
View File

@ -66,7 +66,7 @@ export interface ButtonPassThroughOptions {
*/
badge?: ButtonPassThroughOptionType;
/**
* Used to manage all lifecycle hooks
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}
*/
hooks?: ComponentHooks;

2
components/lib/calendar/Calendar.d.ts vendored
View File

@ -305,7 +305,7 @@ export interface CalendarPassThroughOptions {
*/
hiddenYear?: CalendarPassThroughOptionType;
/**
* Used to manage all lifecycle hooks
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}
*/
hooks?: ComponentHooks;

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

@ -554,6 +554,12 @@ export default {
showTime() {
this.updateCurrentMetaData();
},
minDate() {
this.updateCurrentMetaData();
},
maxDate() {
this.updateCurrentMetaData();
},
months() {
if (this.overlay) {
if (!this.focused) {
@ -2646,8 +2652,11 @@ export default {
onOverlayKeyDown(event) {
switch (event.code) {
case 'Escape':
this.input.focus();
this.overlayVisible = false;
if (!this.inline) {
this.input.focus();
this.overlayVisible = false;
}
break;
default:

2
components/lib/card/Card.d.ts vendored
View File

@ -48,7 +48,7 @@ export interface CardPassThroughOptions {
*/
footer?: CardPassThroughOptionType;
/**
* Used to manage all lifecycle hooks
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}
*/
hooks?: ComponentHooks;

2
components/lib/carousel/Carousel.d.ts vendored
View File

@ -110,7 +110,7 @@ export interface CarouselPassThroughOptions {
*/
footer?: CarouselPassThroughOptionType;
/**
* Used to manage all lifecycle hooks
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}
*/
hooks?: ComponentHooks;

2
components/lib/cascadeselect/CascadeSelect.d.ts vendored
View File

@ -121,7 +121,7 @@ export interface CascadeSelectPassThroughOptions {
*/
hiddenSearchResult?: CascadeSelectPassThroughOptionType;
/**
* Used to manage all lifecycle hooks
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}
*/
hooks?: ComponentHooks;

37
components/lib/cascadeselect/CascadeSelectSub.vue
View File

@ -1,5 +1,5 @@
<template>
<ul :class="cx('list')" v-bind="level === 0 ? ptm('list') : ptm('sublist')">
<ul :ref="containerRef" :class="cx('list')" v-bind="level === 0 ? ptm('list') : ptm('sublist')">
<template v-for="(processedOption, index) of options" :key="getOptionLabelToRender(processedOption)">
<li
:id="getOptionId(processedOption)"
@ -45,6 +45,7 @@
@option-change="onOptionChange"
:pt="pt"
:unstyled="unstyled"
:isParentMount="mounted"
/>
</li>
</template>
@ -62,6 +63,7 @@ export default {
hostName: 'CascadeSelect',
extends: BaseComponent,
emits: ['option-change'],
container: null,
props: {
selectId: String,
focusedOptionId: String,
@ -74,12 +76,25 @@ export default {
optionGroupChildren: Array,
activeOptionPath: Array,
level: Number,
templates: null
templates: null,
isParentMount: Boolean
},
data() {
return {
mounted: false
};
},
watch: {
isParentMount: {
handler(newValue) {
newValue && DomHandler.nestedPosition(this.container, this.level);
}
}
},
mounted() {
if (ObjectUtils.isNotEmpty(this.parentKey)) {
this.position();
}
// entering order correction when an item is selected
(this.isParentMount || this.level === 0) && DomHandler.nestedPosition(this.container, this.level);
this.mounted = true;
},
methods: {
getOptionId(processedOption) {
@ -121,16 +136,8 @@ export default {
onOptionChange(event) {
this.$emit('option-change', event);
},
position() {
const parentItem = this.$el.parentElement;
const containerOffset = DomHandler.getOffset(parentItem);
const viewport = DomHandler.getViewport();
const sublistWidth = this.$el.offsetParent ? this.$el.offsetWidth : DomHandler.getHiddenElementOuterWidth(this.$el);
const itemOuterWidth = DomHandler.getOuterWidth(parentItem.children[0]);
if (parseInt(containerOffset.left, 10) + itemOuterWidth + sublistWidth > viewport.width - DomHandler.calculateScrollbarWidth()) {
this.$el.style.left = '-100%';
}
containerRef(el) {
this.container = el;
}
},
directives: {

9
components/lib/cascadeselect/style/CascadeSelectStyle.js
View File

@ -82,6 +82,15 @@ const css = `
left: 100%;
top: 0;
}
.p-cascadeselect-enter-from,
.p-cascadeselect-leave-active {
opacity: 0;
}
.p-cascadeselect-enter-active {
transition: opacity 150ms;
}
}
`;

2
components/lib/chart/Chart.d.ts vendored
View File

@ -46,7 +46,7 @@ export interface ChartPassThroughOptions {
*/
canvas?: ChartPassThroughOptionType;
/**
* Used to manage all lifecycle hooks
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}
*/
hooks?: ComponentHooks;

2
components/lib/checkbox/Checkbox.d.ts vendored
View File

@ -66,7 +66,7 @@ export interface CheckboxPassThroughOptions {
*/
hiddenInput?: CheckboxPassThroughOptionType;
/**
* Used to manage all lifecycle hooks
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}
*/
hooks?: ComponentHooks;

14
components/lib/chip/Chip.d.ts vendored
View File

@ -62,7 +62,7 @@ export interface ChipPassThroughOptions {
*/
removeIcon?: ChipPassThroughOptionType;
/**
* Used to manage all lifecycle hooks
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}
*/
hooks?: ComponentHooks;
@ -150,13 +150,25 @@ export interface ChipSlots {
/**
* Remove icon click event
* @param {Event} event - Browser event
* @deprecated since v3.39.0. Use 'removeCallback' property instead.
*/
onClick: (event: Event) => void;
/**
* Remove icon keydown event
* @param {Event} event - Browser event
* @deprecated since v3.39.0. Use 'keydownCallback' property instead.
*/
onKeydown: (event: Event) => void;
/**
* Remove icon click event
* @param {Event} event - Browser event
*/
removeCallback: (event: Event) => void;
/**
* Remove icon keydown event
* @param {Event} event - Browser event
*/
keydownCallback: (event: Event) => void;
}): VNode[];
}

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

@ -6,7 +6,7 @@
<span v-else-if="icon" :class="[cx('icon'), icon]" v-bind="ptm('icon')" />
<div v-if="label" :class="cx('label')" v-bind="ptm('label')">{{ label }}</div>
</slot>
<slot v-if="removable" name="removeicon" :onClick="close" :onKeydown="onKeydown">
<slot v-if="removable" name="removeicon" :onClick="close" :onKeydown="onKeydown" :removeCallback="close" :keydownCallback="onKeydown">
<component :is="removeIcon ? 'span' : 'TimesCircleIcon'" tabindex="0" :class="[cx('removeIcon'), removeIcon]" @click="close" @keydown="onKeydown" v-bind="ptm('removeIcon')"></component>
</slot>
</div>

8
components/lib/chips/Chips.d.ts vendored
View File

@ -92,7 +92,7 @@ export interface ChipsPassThroughOptions {
*/
input?: ChipsPassThroughOptionType;
/**
* Used to manage all lifecycle hooks
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}
*/
hooks?: ComponentHooks;
@ -238,8 +238,14 @@ export interface ChipsSlots {
/**
* Remove token icon function.
* @param {Event} event - Browser event
* @deprecated since v3.39.0. Use 'removeCallback' property instead.
*/
onClick: (event: Event, index: number) => void;
/**
* Remove token icon function.
* @param {Event} event - Browser event
*/
removeCallback: (event: Event, index: number) => void;
}): VNode[];
}
/**

2
components/lib/chips/Chips.vue
View File

@ -31,7 +31,7 @@
<slot name="chip" :class="cx('label')" :value="val">
<span :class="cx('label')" v-bind="ptm('label')">{{ val }}</span>
</slot>
<slot name="removetokenicon" :class="cx('removeTokenIcon')" :index="i" :onClick="(event) => removeItem(event, i)">
<slot name="removetokenicon" :class="cx('removeTokenIcon')" :index="i" :onClick="(event) => removeItem(event, i)" :removeCallback="(event) => removeItem(event, i)">
<component :is="removeTokenIcon ? 'span' : 'TimesCircleIcon'" :class="[cx('removeTokenIcon'), removeTokenIcon]" @click="removeItem($event, i)" aria-hidden="true" v-bind="ptm('removeTokenIcon')" />
</slot>
</li>

2
components/lib/colorpicker/ColorPicker.d.ts vendored
View File

@ -95,7 +95,7 @@ export interface ColorPickerPassThroughOptions {
*/
hueHandle: ColorPickerPassThroughOptionType;
/**
* Used to manage all lifecycle hooks
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}
*/
hooks?: ComponentHooks;

2
components/lib/column/Column.d.ts vendored
View File

@ -337,7 +337,7 @@ export interface ColumnPassThroughOptions {
*/
hiddenInput?: ColumnPassThroughOptionType;
/**
* Used to manage all lifecycle hooks
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}
*/
hooks?: ComponentHooks;

2
components/lib/columngroup/ColumnGroup.d.ts vendored
View File

@ -48,7 +48,7 @@ export interface ColumnGroupPassThroughOptions {
*/
root?: ColumnGroupPassThroughOptionType;
/**
* Used to manage all lifecycle hooks
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}
*/
hooks?: ComponentHooks;

17
components/lib/confirmdialog/ConfirmDialog.d.ts vendored
View File

@ -94,7 +94,7 @@ export interface ConfirmDialogPassThroughOptions {
*/
acceptButton?: ButtonPassThroughOptions;
/**
* Used to manage all lifecycle hooks
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}
*/
hooks?: ComponentHooks;
@ -222,16 +222,31 @@ export interface ConfirmDialogSlots {
message: any;
/**
* Close dialog function.
* @deprecated since v3.39.0. Use 'closeCallback' property instead.
*/
onClose: () => void;
/**
* Accept function of the component
* @deprecated since v3.39.0. Use 'acceptCallback' property instead.
*/
onAccept: () => void;
/**
* Reject function of the component
* @deprecated since v3.39.0. Use 'rejectCallback' property instead.
*/
onReject: () => void;
/**
* Close dialog function.
*/
closeCallback: () => void;
/**
* Accept function of the component
*/
acceptCallback: () => void;
/**
* Reject function of the component
*/
rejectCallback: () => void;
}): VNode[];
}

2
components/lib/confirmdialog/ConfirmDialog.vue
View File

@ -15,7 +15,7 @@
:unstyled="unstyled"
>
<template v-if="$slots.container" #container="slotProps">
<slot name="container" :message="confirmation" :onClose="slotProps.onClose" :onAccept="accept" :onReject="reject" />
<slot name="container" :message="confirmation" :onClose="slotProps.onClose" :onAccept="accept" :onReject="reject" :closeCallback="slotProps.onclose" :acceptCallback="accept" :rejectCallback="reject" />
</template>
<template v-if="!$slots.container">
<template v-if="!$slots.message">

12
components/lib/confirmpopup/ConfirmPopup.d.ts vendored
View File

@ -76,7 +76,7 @@ export interface ConfirmPopupPassThroughOptions {
*/
acceptButton?: ButtonPassThroughOptions;
/**
* Used to manage all lifecycle hooks
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}
*/
hooks?: ComponentHooks;
@ -176,12 +176,22 @@ export interface ConfirmPopupSlots {
message: any;
/**
* Accept function of the component
* @deprecated since v3.39.0. Use 'acceptCallback' property instead.
*/
onAccept: () => void;
/**
* Reject function of the component
* @deprecated since v3.39.0. Use 'rejectCallback' property instead.
*/
onReject: () => void;
/**
* Accept function of the component
*/
acceptCallback: () => void;
/**
* Reject function of the component
*/
rejectCallback: () => void;
}): VNode[];
}

2
components/lib/confirmpopup/ConfirmPopup.vue
View File

@ -2,7 +2,7 @@
<Portal>
<transition name="p-confirm-popup" @enter="onEnter" @after-enter="onAfterEnter" @leave="onLeave" @after-leave="onAfterLeave" v-bind="ptm('transition')">
<div v-if="visible" :ref="containerRef" v-focustrap role="alertdialog" :class="cx('root')" :aria-modal="visible" @click="onOverlayClick" @keydown="onOverlayKeydown" v-bind="{ ...$attrs, ...ptm('root') }">
<slot v-if="$slots.container" name="container" :message="confirmation" :onAccept="accept" :onReject="reject"></slot>
<slot v-if="$slots.container" name="container" :message="confirmation" :onAccept="accept" :onReject="reject" :acceptCallback="accept" :rejectCallback="reject"></slot>
<template v-else>
<template v-if="!$slots.message">
<div :class="cx('content')" v-bind="ptm('content')">

4
components/lib/contextmenu/BaseContextMenu.vue
View File

@ -26,10 +26,6 @@ export default {
type: Boolean,
default: false
},
exact: {
type: Boolean,
default: true
},
tabindex: {
type: Number,
default: 0

7
components/lib/contextmenu/ContextMenu.d.ts vendored
View File

@ -90,7 +90,7 @@ export interface ContextMenuPassThroughOptions {
*/
submenu?: ContextMenuPassThroughOptionType;
/**
* Used to manage all lifecycle hooks
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}
*/
hooks?: ComponentHooks;
@ -241,6 +241,7 @@ export interface ContextMenuProps {
global?: boolean | undefined;
/**
* Whether to apply 'router-link-active-exact' class if route exactly matches the item path.
* @deprecated since v3.40.0.
* @defaultValue true
*/
exact?: boolean | undefined;
@ -290,6 +291,10 @@ export interface ContextMenuSlots {
* Label property of the menuitem
*/
label: string | ((...args: any) => string) | undefined;
/**
* Whether or not there is a submenu
*/
hasSubmenu: boolean;
/**
* Binding properties of the menuitem
*/

2
components/lib/contextmenu/ContextMenu.spec.js
View File

@ -122,7 +122,7 @@ describe('ContextMenu.vue', () => {
]
},
{
label: 'Archieve',
label: 'Archive',
icon: 'pi pi-fw pi-calendar-times',
items: [
{

6
components/lib/contextmenu/ContextMenu.vue
View File

@ -16,7 +16,6 @@
:items="processedItems"
:templates="$slots"
:activeItemPath="activeItemPath"
:exact="exact"
:aria-labelledby="ariaLabelledby"
:aria-label="ariaLabel"
:level="0"
@ -77,11 +76,6 @@ export default {
}
}
},
beforeMount() {
if (!this.$slots.item) {
console.warn('In future versions, vue-router support will be removed. Item templating should be used.');
}
},
mounted() {
this.id = this.id || UniqueComponentId();

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

@ -22,14 +22,7 @@
>
<div :class="cx('content')" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)" v-bind="getPTOptions('content', processedItem, index)">
<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="cx('action', { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)" v-bind="getPTOptions('action', processedItem, index)">
<component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" />
<span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions('icon', processedItem, index)" />
<span :class="cx('label')" v-bind="getPTOptions('label', processedItem, index)">{{ getItemLabel(processedItem) }}</span>
</a>
</router-link>
<a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="cx('action')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions('action', processedItem, index)">
<a v-ripple :href="getItemProp(processedItem, 'url')" :class="cx('action')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions('action', processedItem, index)">
<component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" />
<span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions('icon', processedItem, index)" />
<span :class="cx('label')" v-bind="getPTOptions('label', processedItem, index)">{{ getItemLabel(processedItem) }}</span>
@ -39,7 +32,7 @@
</template>
</a>
</template>
<component v-else :is="templates.item" :item="processedItem.item" :label="getItemLabel(processedItem)" :props="getMenuItemProps(processedItem, index)"></component>
<component v-else :is="templates.item" :item="processedItem.item" :hasSubmenu="getItemProp(processedItem, 'items')" :label="getItemLabel(processedItem)" :props="getMenuItemProps(processedItem, index)"></component>
</div>
<ContextMenuSub
v-if="isItemVisible(processedItem) && isItemGroup(processedItem)"
@ -51,7 +44,6 @@
:items="processedItem.items"
:templates="templates"
:activeItemPath="activeItemPath"
:exact="exact"
:level="level + 1"
:visible="isItemActive(processedItem) && isItemGroup(processedItem)"
:pt="pt"
@ -115,10 +107,6 @@ export default {
type: Object,
default: null
},
exact: {
type: Boolean,
default: true
},
activeItemPath: {
type: Object,
default: null
@ -174,9 +162,6 @@ export default {
onItemMouseEnter(event, processedItem) {
this.$emit('item-mouseenter', { originalEvent: event, processedItem });
},
onItemActionClick(event, navigate) {
navigate && navigate(event);
},
getAriaSetSize() {
return this.items.filter((processedItem) => this.isItemVisible(processedItem) && !this.getItemProp(processedItem, 'separator')).length;
},
@ -184,22 +169,7 @@ export default {
return index - this.items.slice(0, index).filter((processedItem) => this.isItemVisible(processedItem) && this.getItemProp(processedItem, 'separator')).length + 1;
},
onEnter() {
this.position();
},
position() {
const parentItem = this.$refs.container.parentElement;
const containerOffset = DomHandler.getOffset(this.$refs.container.parentElement);
const viewport = DomHandler.getViewport();
const sublistWidth = this.$refs.container.offsetParent ? this.$refs.container.offsetWidth : DomHandler.getHiddenElementOuterWidth(this.$refs.container);
const itemOuterWidth = DomHandler.getOuterWidth(parentItem.children[0]);
this.$refs.container.style.top = '0px';
if (parseInt(containerOffset.left, 10) + itemOuterWidth + sublistWidth > viewport.width - DomHandler.calculateScrollbarWidth()) {
this.$refs.container.style.left = -1 * sublistWidth + 'px';
} else {
this.$refs.container.style.left = itemOuterWidth + 'px';
}
DomHandler.nestedPosition(this.$refs.container, this.level);
},
getMenuItemProps(processedItem, index) {
return {

11
components/lib/contextmenu/style/ContextMenuStyle.js
View File

@ -35,7 +35,8 @@ const css = `
margin-left: auto;
}
.p-contextmenu-enter-from {
.p-contextmenu-enter-from,
.p-contextmenu-leave-active {
opacity: 0;
}
@ -63,13 +64,7 @@ const classes = {
}
],
content: 'p-menuitem-content',
action: ({ props, isActive, isExactActive }) => [
'p-menuitem-link',
{
'router-link-active': isActive,
'router-link-active-exact': props.exact && isExactActive
}
],
action: 'p-menuitem-link',
icon: 'p-menuitem-icon',
label: 'p-menuitem-text',
submenuIcon: 'p-submenu-icon',

4
components/lib/datatable/BodyCell.vue
View File

@ -450,7 +450,7 @@ export default {
if (align === 'right') {
let right = 0;
let next = this.$el.nextElementSibling;
let next = DomHandler.getNextElementSibling(this.$el, '[data-p-frozen-column="true"]');
if (next) {
right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
@ -459,7 +459,7 @@ export default {
this.styleObject.right = right + 'px';
} else {
let left = 0;
let prev = this.$el.previousElementSibling;
let prev = DomHandler.getPreviousElementSibling(this.$el, '[data-p-frozen-column="true"]');
if (prev) {
left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);

2
components/lib/datatable/DataTable.d.ts vendored
View File

@ -685,7 +685,7 @@ export interface DataTablePassThroughOptions {
*/
column?: ColumnPassThroughOptionType;
/**
* Used to manage all lifecycle hooks
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}
*/
hooks?: ComponentHooks;

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

@ -402,7 +402,7 @@ export default {
}
},
editingRows: {
deep: true,
immediate: true,
handler(newValue) {
if (this.dataKey) {
this.updateEditingRowKeys(newValue);

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

@ -1,5 +1,5 @@
<template>
<td :style="containerStyle" :class="containerClass" role="cell" :colspan="columnProp('colspan')" :rowspan="columnProp('rowspan')" v-bind="{ ...getColumnPT('root'), ...getColumnPT('footerCell') }">
<td :style="containerStyle" :class="containerClass" role="cell" :colspan="columnProp('colspan')" :rowspan="columnProp('rowspan')" v-bind="{ ...getColumnPT('root'), ...getColumnPT('footerCell') }" :data-p-frozen-column="columnProp('frozen')">
<component v-if="column.children && column.children.footer" :is="column.children.footer" :column="column" />
{{ columnProp('footer') }}
</td>
@ -68,7 +68,7 @@ export default {
if (align === 'right') {
let right = 0;
let next = this.$el.nextElementSibling;
let next = DomHandler.getNextElementSibling(this.$el, '[data-p-frozen-column="true"]');
if (next) {
right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
@ -77,7 +77,7 @@ export default {
this.styleObject.right = right + 'px';
} else {
let left = 0;
let prev = this.$el.previousElementSibling;
let prev = DomHandler.getPreviousElementSibling(this.$el, '[data-p-frozen-column="true"]');
if (prev) {
left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);

4
components/lib/datatable/HeaderCell.vue
View File

@ -270,7 +270,7 @@ export default {
if (align === 'right') {
let right = 0;
let next = this.$el.nextElementSibling;
let next = DomHandler.getNextElementSibling(this.$el, '[data-p-frozen-column="true"]');
if (next) {
right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
@ -279,7 +279,7 @@ export default {
this.styleObject.right = right + 'px';
} else {
let left = 0;
let prev = this.$el.previousElementSibling;
let prev = DomHandler.getPreviousElementSibling(this.$el, '[data-p-frozen-column="true"]');
if (prev) {
left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);

2
components/lib/dataview/DataView.d.ts vendored
View File

@ -98,7 +98,7 @@ export interface DataViewPassThroughOptions {
*/
footer?: DataViewPassThroughOptionType;
/**
* Used to manage all lifecycle hooks
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}
*/
hooks?: ComponentHooks;

2
components/lib/dataviewlayoutoptions/DataViewLayoutOptions.d.ts vendored
View File

@ -67,7 +67,7 @@ export interface DataViewLayoutOptionsPassThroughOptions {
*/
gridIcon?: DataViewLayoutOptionsPassThroughOptionType;
/**
* Used to manage all lifecycle hooks
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}
*/
hooks?: ComponentHooks;

2
components/lib/deferredcontent/DeferredContent.d.ts vendored
View File

@ -46,7 +46,7 @@ export interface DeferredContentPassThroughOptions {
*/
root?: DeferredContentPassThroughOptionType;
/**
* Used to manage all lifecycle hooks
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}
*/
hooks?: ComponentHooks;

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

@ -88,7 +88,7 @@ export interface DialogPassThroughOptions {
*/
mask?: DialogPassThroughOptionType;
/**
* Used to manage all lifecycle hooks
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}
*/
hooks?: ComponentHooks;
@ -339,13 +339,24 @@ export interface DialogSlots {
container(scope: {
/**
* Close dialog function.
* @deprecated since v3.39.0. Use 'closeCallback' property instead.
*/
onClose: () => void;
/**
* Maximize/minimize dialog function.
* @param {Event} event - Browser event
* @deprecated since v3.39.0. Use 'maximizeCallback' property instead.
*/
onMaximize: (event: Event) => void;
/**
* Close dialog function.
*/
closeCallback: () => void;
/**
* Maximize/minimize dialog function.
* @param {Event} event - Browser event
*/
maximizeCallback: (event: Event) => void;
}): VNode[];
}

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

@ -3,7 +3,7 @@
<div v-if="containerVisible" :ref="maskRef" :class="cx('mask')" :style="sx('mask', true, { position, modal })" @click="onMaskClick" v-bind="ptm('mask')">
<transition name="p-dialog" @before-enter="onBeforeEnter" @enter="onEnter" @before-leave="onBeforeLeave" @leave="onLeave" @after-leave="onAfterLeave" appear v-bind="ptm('transition')">
<div v-if="visible" :ref="containerRef" v-focustrap="{ disabled: !modal }" :class="cx('root')" :style="sx('root')" role="dialog" :aria-labelledby="ariaLabelledById" :aria-modal="modal" v-bind="{ ...$attrs, ...ptm('root') }">
<slot v-if="$slots.container" name="container" :onClose="close" :onMaximize="(event) => maximize(event)"></slot>
<slot v-if="$slots.container" name="container" :onClose="close" :onMaximize="(event) => maximize(event)" :closeCallback="close" :maximizeCallback="(event) => maximize(event)"></slot>
<template v-else>
<div v-if="showHeader" :ref="headerContainerRef" :class="cx('header')" @mousedown="initDrag" v-bind="ptm('header')">
<slot name="header" :class="cx('headerTitle')">

2
components/lib/divider/Divider.d.ts vendored
View File

@ -46,7 +46,7 @@ export interface DividerPassThroughOptions {
*/
content?: DividerPassThroughOptionType;
/**
* Used to manage all lifecycle hooks
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}
*/
hooks?: ComponentHooks;

4
components/lib/dock/BaseDock.vue
View File

@ -14,10 +14,6 @@ export default {
class: null,
style: null,
tooltipOptions: null,
exact: {
type: Boolean,
default: true
},
menuId: {
type: String,
default: null

3
components/lib/dock/Dock.d.ts vendored
View File

@ -75,7 +75,7 @@ export interface DockPassThroughOptions {
*/
icon?: DockPassThroughOptionType;
/**
* Used to manage all lifecycle hooks
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}
*/
hooks?: ComponentHooks;
@ -188,6 +188,7 @@ export interface DockProps {
style?: any;
/**
* Whether to apply 'router-link-active-exact' class if route exactly matches the item path.
* @deprecated since v3.40.0.
* @defaultValue true
*/
exact?: boolean | undefined;

19
components/lib/dock/Dock.vue
View File

@ -1,18 +1,6 @@
<template>
<div :class="containerClass" :style="style" v-bind="ptm('root')" data-pc-name="dock">
<DockSub
:model="model"
:templates="$slots"
:exact="exact"
:tooltipOptions="tooltipOptions"
:position="position"
:menuId="menuId"
:aria-label="ariaLabel"
:aria-labelledby="ariaLabelledby"
:tabindex="tabindex"
:pt="pt"
:unstyled="unstyled"
></DockSub>
<DockSub :model="model" :templates="$slots" :tooltipOptions="tooltipOptions" :position="position" :menuId="menuId" :aria-label="ariaLabel" :aria-labelledby="ariaLabelledby" :tabindex="tabindex" :pt="pt" :unstyled="unstyled"></DockSub>
</div>
</template>
@ -23,11 +11,6 @@ import DockSub from './DockSub.vue';
export default {
name: 'Dock',
extends: BaseDock,
beforeMount() {
if (!this.$slots.item) {
console.warn('In future versions, vue-router support will be removed. Item templating should be used.');
}
},
computed: {
containerClass() {
return [this.class, this.cx('root')];

25
components/lib/dock/DockSub.vue
View File

@ -31,25 +31,7 @@
>
<div :class="cx('content')" v-bind="getPTOptions('content', processedItem, index)">
<template v-if="!templates['item']">
<router-link v-if="processedItem.to && !disabled(processedItem)" v-slot="{ navigate, href, isActive, isExactActive }" :to="processedItem.to" custom>
<a
v-tooltip:[tooltipOptions]="{ value: processedItem.label, disabled: !tooltipOptions }"
:href="href"
:class="cx('action', { isActive, isExactActive })"
:target="processedItem.target"
tabindex="-1"
aria-hidden="true"
@click="onItemActionClick($event, processedItem, navigate)"
v-bind="getPTOptions('action', processedItem, index)"
>
<template v-if="!templates['icon']">
<span v-ripple :class="[cx('icon'), processedItem.icon]" v-bind="getPTOptions('icon', processedItem, index)"></span>
</template>
<component v-else :is="templates['icon']" :item="processedItem" :class="cx('icon')"></component>
</a>
</router-link>
<a
v-else
v-tooltip:[tooltipOptions]="{ value: processedItem.label, disabled: !tooltipOptions }"
:href="processedItem.url"
:class="cx('action')"
@ -97,10 +79,6 @@ export default {
type: null,
default: null
},
exact: {
type: Boolean,
default: true
},
tooltipOptions: null,
menuId: {
type: String,
@ -163,9 +141,6 @@ export default {
onItemMouseEnter(index) {
this.currentIndex = index;
},
onItemActionClick(event, navigate) {
navigate && navigate(event);
},
onItemClick(event, processedItem) {
if (this.isSameMenuItem(event)) {
const command = this.getItemProp(processedItem, 'command');

8
components/lib/dock/style/DockStyle.js
View File

@ -127,13 +127,7 @@ const classes = {
}
],
content: 'p-menuitem-content',
action: ({ props, isActive, isExactActive }) => [
'p-dock-link',
{
'router-link-active': isActive,
'router-link-active-exact': props.exact && isExactActive
}
],
action: 'p-dock-link',
icon: 'p-dock-icon'
};

8
components/lib/dropdown/Dropdown.d.ts vendored
View File

@ -164,7 +164,7 @@ export interface DropdownPassThroughOptions {
*/
hiddenLastFocusableEl?: DropdownPassThroughOptionType;
/**
* Used to manage all lifecycle hooks
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}
*/
hooks?: ComponentHooks;
@ -592,8 +592,14 @@ export interface DropdownSlots {
/**
* Clear icon click function.
* @param {Event} event - Browser event
* @deprecated since v3.39.0. Use 'clearCallback' property instead.
*/
onClick: (event: Event) => void;
/**
* Clear icon click function.
* @param {Event} event - Browser event
*/
clearCallback: (event: Event) => void;
}): VNode[];
/**
* Custom dropdown icon template.

2
components/lib/dropdown/Dropdown.vue
View File

@ -47,7 +47,7 @@
>
<slot name="value" :value="modelValue" :placeholder="placeholder">{{ label === 'p-emptylabel' ? '&nbsp;' : label || 'empty' }}</slot>
</span>
<slot v-if="showClear && modelValue != null" name="clearicon" :class="cx('clearIcon')" :onClick="onClearClick">
<slot v-if="showClear && modelValue != null" name="clearicon" :class="cx('clearIcon')" :onClick="onClearClick" :clearCallback="onClearClick">
<component :is="clearIcon ? 'i' : 'TimesIcon'" ref="clearIcon" :class="[cx('clearIcon'), clearIcon]" @click="onClearClick" v-bind="{ ...clearIconProps, ...ptm('clearIcon') }" data-pc-section="clearicon" />
</slot>
<div :class="cx('trigger')" v-bind="ptm('trigger')">

2
components/lib/editor/Editor.d.ts vendored
View File

@ -177,7 +177,7 @@ export interface EditorPassThroughOptions {
*/
content?: EditorPassThroughOptionType;
/**
* Used to manage all lifecycle hooks
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}
*/
hooks?: ComponentHooks;

2
components/lib/fieldset/Fieldset.d.ts vendored
View File

@ -87,7 +87,7 @@ export interface FieldsetPassThroughOptions {
*/
content?: FieldsetPassThroughOptionType;
/**
* Used to manage all lifecycle hooks
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}
*/
hooks?: ComponentHooks;

2
components/lib/fileupload/FileUpload.d.ts vendored
View File

@ -264,7 +264,7 @@ export interface FileUploadPassThroughOptions {
*/
uploadIcon?: FileUploadPassThroughOptionType;
/**
* Used to manage all lifecycle hooks
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}
*/
hooks?: ComponentHooks;

2
components/lib/focustrap/FocusTrap.d.ts vendored
View File

@ -57,7 +57,7 @@ export interface FocusTrapDirectivePassThroughOptions {
*/
lastFocusableElement?: FocusTrapDirectivePassThroughOptionType;
/**
* Used to manage all lifecycle hooks
* Used to manage all lifecycle hooks.
* @see {@link BaseDirective.DirectiveHooks}
*/
hooks?: DirectiveHooks;

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

@ -171,7 +171,7 @@ export interface GalleriaPassThroughOptions {
*/
mask?: GalleriaPassThroughOptionType;
/**
* Used to manage all lifecycle hooks
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}
*/
hooks?: ComponentHooks;

12
components/lib/image/Image.d.ts vendored
View File

@ -116,7 +116,7 @@ export interface ImagePassThroughOptions {
*/
preview?: ImagePassThroughOptionType;
/**
* Used to manage all lifecycle hooks
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}
*/
hooks?: ComponentHooks;
@ -251,8 +251,13 @@ export interface ImageSlots {
style: any;
/**
* Image error function.
* @deprecated since v3.39.0. Use 'errorCallback' property instead.
*/
onError: () => void;
/**
* Preview click function.
*/
errorCallback: () => void;
}): VNode[];
/**
* Custom preview template.
@ -269,8 +274,13 @@ export interface ImageSlots {
style: any;
/**
* Preview click function.
* @deprecated since v3.39.0. Use 'previewCallback' property instead.
*/
onClick: () => void;
/**
* Preview click function.
*/
previewCallback: () => void;
}): VNode[];
}

4
components/lib/image/Image.vue
View File

@ -1,6 +1,6 @@
<template>
<span :class="containerClass" :style="style" v-bind="ptm('root')" data-pc-name="image">
<slot name="image" :onError="onError">
<slot name="image" :onError="onError" :errorCallback="onError">
<img :style="imageStyle" :class="[cx('image'), imageClass]" @error="onError" v-bind="{ ...$attrs, ...ptm('image') }" />
</slot>
<button v-if="preview" ref="previewButton" type="button" :class="cx('button')" @click="onImageClick" v-bind="{ ...previewButtonProps, ...ptm('button') }">
@ -43,7 +43,7 @@
</div>
<transition name="p-image-preview" @before-enter="onBeforeEnter" @enter="onEnter" @leave="onLeave" @before-leave="onBeforeLeave" @after-leave="onAfterLeave" v-bind="ptm('transition')">
<div v-if="previewVisible" v-bind="ptm('previewContainer')">
<slot name="preview" :class="cx('preview')" :style="imagePreviewStyle" :onClick="onPreviewImageClick">
<slot name="preview" :class="cx('preview')" :style="imagePreviewStyle" :onClick="onPreviewImageClick" :previewCallback="onPreviewImageClick">
<img :src="$attrs.src" :class="cx('preview')" :style="imagePreviewStyle" @click="onPreviewImageClick" v-bind="ptm('preview')" />
</slot>
</div>

2
components/lib/inlinemessage/InlineMessage.d.ts vendored
View File

@ -54,7 +54,7 @@ export interface InlineMessagePassThroughOptions {
*/
text?: InlineMessagePassThroughOptionType;
/**
* Used to manage all lifecycle hooks
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}
*/
hooks?: ComponentHooks;

2
components/lib/inplace/Inplace.d.ts vendored
View File

@ -61,7 +61,7 @@ export interface InplacePassThroughOptions {
*/
closeButton?: ButtonPassThroughOptions;
/**
* Used to manage all lifecycle hooks
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}
*/
hooks?: ComponentHooks;

15
components/lib/inputgroup/BaseInputGroup.vue Normal file
View File

@ -0,0 +1,15 @@
<script>
import BaseComponent from 'primevue/basecomponent';
import InputGroupStyle from 'primevue/inputgroup/style';
export default {
name: 'BaseInputGroup',
extends: BaseComponent,
style: InputGroupStyle,
provide() {
return {
$parentInstance: this
};
}
};
</script>

114
components/lib/inputgroup/InputGroup.d.ts vendored Normal file
View File

@ -0,0 +1,114 @@
/**
*
* InputGroup displays text, icon, buttons and other content can be grouped next to an input.
*
* [Live Demo](https://www.primevue.org/inputgroup/)
*
* @module inputgroup
*
*/
import { VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { PassThroughOptions } from '../passthrough';
import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
export declare type InputGroupPassThroughOptionType = InputGroupPassThroughAttributes | ((options: InputGroupPassThroughMethodOptions) => InputGroupPassThroughAttributes | string) | string | null | undefined;
/**
* Custom passthrough(pt) option method.
*/
export interface InputGroupPassThroughMethodOptions {
/**
* Defines instance.
*/
instance: any;
/**
* Defines passthrough(pt) options in global config.
*/
global: object | undefined;
}
/**
* Custom passthrough(pt) options.
* @see {@link InputGroupProps.pt}
*/
export interface InputGroupPassThroughOptions {
/**
* Used to pass attributes to the root's DOM element.
*/
root?: InputGroupPassThroughOptionType;
/**
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}
*/
hooks?: ComponentHooks;
}
/**
* Custom passthrough attributes for each DOM elements
*/
export interface InputGroupPassThroughAttributes {
[key: string]: any;
}
/**
* Defines valid properties in InputGroup component.
*/
export interface InputGroupProps {
/**
* Used to pass attributes to DOM elements inside the component.
* @type {InputGroupPassThroughOptions}
*/
pt?: PassThrough<InputGroupPassThroughOptions>;
/**
* Used to configure passthrough(pt) options of the component.
* @type {PassThroughOptions}
*/
ptOptions?: PassThroughOptions;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false
*/
unstyled?: boolean;
}
/**
* Defines valid slots in InputGroup component.
*/
export interface InputGroupSlots {
/**
* Custom default template.
*/
default(): VNode[];
/**
* Dynamic content template.
* @todo
*/
[key: string]: (node: any) => VNode[];
}
/**
* Defines valid emits in InputGroup component.
*/
export interface InputGroupEmits {}
/**
* **PrimeVue - InputGroup**
*
* _InputGroup displays text, icon, buttons and other content can be grouped next to an input._
*
* [Live Demo](https://www.primevue.org/inputgroup/)
* --- ---
* ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
*
* @group Component
*/
declare class InputGroup extends ClassComponent<InputGroupProps, InputGroupSlots, InputGroupEmits> {}
declare module '@vue/runtime-core' {
interface GlobalComponents {
InputGroup: GlobalComponentConstructor<InputGroup>;
}
}
export default InputGroup;

14
components/lib/inputgroup/InputGroup.vue Normal file
View File

@ -0,0 +1,14 @@
<template>
<div :class="cx('root')" v-bind="ptm('root')" data-pc-name="inputgroup">
<slot />
</div>
</template>
<script>
import BaseInputGroup from './BaseInputGroup.vue';
export default {
name: 'InputGroup',
extends: BaseInputGroup
};
</script>

9
components/lib/inputgroup/package.json Normal file
View File

@ -0,0 +1,9 @@
{
"main": "./inputgroup.cjs.js",
"module": "./inputgroup.esm.js",
"unpkg": "./inputgroup.min.js",
"types": "./InputGroup.d.ts",
"browser": {
"./sfc": "./InputGroup.vue"
}
}

3
components/lib/inputgroup/style/InputGroupStyle.d.ts vendored Normal file
View File

@ -0,0 +1,3 @@
import { BaseStyle } from '../../base/style';
export interface InputGroupStyle extends BaseStyle {}

10
components/lib/inputgroup/style/InputGroupStyle.js Normal file
View File

@ -0,0 +1,10 @@
import BaseStyle from 'primevue/base/style';
const classes = {
root: 'p-inputgroup'
};
export default BaseStyle.extend({
name: 'inputgroup',
classes
});

6
components/lib/inputgroup/style/package.json Normal file
View File

@ -0,0 +1,6 @@
{
"main": "./inputgroupstyle.cjs.js",
"module": "./inputgroupstyle.esm.js",
"unpkg": "./inputgroupstyle.min.js",
"types": "./InputGroupStyle.d.ts"
}

15
components/lib/inputgroupaddon/BaseInputGroupAddon.vue Normal file
View File

@ -0,0 +1,15 @@
<script>
import BaseComponent from 'primevue/basecomponent';
import InputGroupAddonStyle from 'primevue/inputgroupaddon/style';
export default {
name: 'BaseInputGroupAddon',
extends: BaseComponent,
style: InputGroupAddonStyle,
provide() {
return {
$parentInstance: this
};
}
};
</script>

114
components/lib/inputgroupaddon/InputGroupAddon.d.ts vendored Normal file
View File

@ -0,0 +1,114 @@
/**
*
* InputGroupAddon displays text, icon, buttons and other content can be grouped next to an input.
*
* [Live Demo](https://www.primevue.org/inputgroup/)
*
* @module inputgroupaddon
*
*/
import { VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { PassThroughOptions } from '../passthrough';
import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
export declare type InputGroupAddonPassThroughOptionType = InputGroupAddonPassThroughAttributes | ((options: InputGroupAddonPassThroughMethodOptions) => InputGroupAddonPassThroughAttributes | string) | string | null | undefined;
/**
* Custom passthrough(pt) option method.
*/
export interface InputGroupAddonPassThroughMethodOptions {
/**
* Defines instance.
*/
instance: any;
/**
* Defines passthrough(pt) options in global config.
*/
global: object | undefined;
}
/**
* Custom passthrough(pt) options.
* @see {@link InputGroupAddonProps.pt}
*/
export interface InputGroupAddonPassThroughOptions {
/**
* Used to pass attributes to the root's DOM element.
*/
root?: InputGroupAddonPassThroughOptionType;
/**
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}
*/
hooks?: ComponentHooks;
}
/**
* Custom passthrough attributes for each DOM elements
*/
export interface InputGroupAddonPassThroughAttributes {
[key: string]: any;
}
/**
* Defines valid properties in InputGroupAddon component.
*/
export interface InputGroupAddonProps {
/**
* Used to pass attributes to DOM elements inside the component.
* @type {InputGroupAddonPassThroughOptions}
*/
pt?: PassThrough<InputGroupAddonPassThroughOptions>;
/**
* Used to configure passthrough(pt) options of the component.
* @type {PassThroughOptions}
*/
ptOptions?: PassThroughOptions;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false
*/
unstyled?: boolean;
}
/**
* Defines valid slots in InputGroupAddon component.
*/
export interface InputGroupAddonSlots {
/**
* Custom default template.
*/
default(): VNode[];
/**
* Dynamic content template.
* @todo
*/
[key: string]: (node: any) => VNode[];
}
/**
* Defines valid emits in InputGroupAddon component.
*/
export interface InputGroupAddonEmits {}
/**
* **PrimeVue - InputGroupAddon**
*
* _InputGroupAddon displays text, icon, buttons and other content can be grouped next to an input._
*
* [Live Demo](https://www.primevue.org/inputgroupaddon/)
* --- ---
* ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
*
* @group Component
*/
declare class InputGroupAddon extends ClassComponent<InputGroupAddonProps, InputGroupAddonSlots, InputGroupAddonEmits> {}
declare module '@vue/runtime-core' {
interface GlobalComponents {
InputGroupAddon: GlobalComponentConstructor<InputGroupAddon>;
}
}
export default InputGroupAddon;

14
components/lib/inputgroupaddon/InputGroupAddon.vue Normal file
View File

@ -0,0 +1,14 @@
<template>
<div :class="cx('root')" v-bind="ptm('root')" data-pc-name="inputgroupaddon">
<slot />
</div>
</template>
<script>
import BaseInputGroupAddon from './BaseInputGroupAddon.vue';
export default {
name: 'InputGroupAddon',
extends: BaseInputGroupAddon
};
</script>

9
components/lib/inputgroupaddon/package.json Normal file
View File

@ -0,0 +1,9 @@
{
"main": "./inputgroupaddon.cjs.js",
"module": "./inputgroupaddon.esm.js",
"unpkg": "./inputgroupaddon.min.js",
"types": "./InputGroupAddon.d.ts",
"browser": {
"./sfc": "./InputGroupAddon.vue"
}
}

3
components/lib/inputgroupaddon/style/InputGroupAddonStyle.d.ts vendored Normal file
View File

@ -0,0 +1,3 @@
import { BaseStyle } from '../../base/style';
export interface InputGroupAddonStyle extends BaseStyle {}

10
components/lib/inputgroupaddon/style/InputGroupAddonStyle.js Normal file
View File

@ -0,0 +1,10 @@
import BaseStyle from 'primevue/base/style';
const classes = {
root: 'p-inputgroup-addon'
};
export default BaseStyle.extend({
name: 'inputgroupaddon',
classes
});

6
components/lib/inputgroupaddon/style/package.json Normal file
View File

@ -0,0 +1,6 @@
{
"main": "./inputgroupaddonstyle.cjs.js",
"module": "./inputgroupaddonstyle.esm.js",
"unpkg": "./inputgroupaddonstyle.min.js",
"types": "./InputGroupAddonStyle.d.ts"
}

2
components/lib/inputmask/InputMask.d.ts vendored
View File

@ -45,7 +45,7 @@ export interface InputMaskPassThroughOptions {
*/
root?: InputMaskPassThroughOptionType;
/**
* Used to manage all lifecycle hooks
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}
*/
hooks?: ComponentHooks;

Some files were not shown because too many files have changed in this diff Show More