pull/4806/head
Kadir Boylu 2023-11-12 16:59:07 +03:00
commit 636f55a413
382 changed files with 12201 additions and 12255 deletions

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)

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;

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',

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',

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',

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',

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.'
}
];

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',

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',

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',

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',

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.'

View File

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

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) {

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.'
};

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;

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'"

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[];
}

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;

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;

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;

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;

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;

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;

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;

View File

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

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;

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

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;

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'
};

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;

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;

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:

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;

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;

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;

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: {

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;
}
}
`;

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;

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;

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;

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;

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;

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;

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;

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;

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;

View File

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

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
*/

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();

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 {

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',

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);

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;

View File

@ -402,7 +402,7 @@ export default {
}
},
editingRows: {
deep: true,
immediate: true,
handler(newValue) {
if (this.dataKey) {
this.updateEditingRowKeys(newValue);
@ -859,6 +859,7 @@ export default {
const data = this.dataToRender(slotProps.rows);
this.$emit('update:selection', data);
event.preventDefault();
}
break;

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);

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);

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;

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;

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;

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;

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;

View File

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

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;

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')];

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');

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'
};

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;

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;

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;

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;

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;

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;

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;

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;

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;

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>

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;

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>

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"
}
}

View File

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

View File

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

View File

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

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>

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;

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>

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"
}
}

View File

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

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
});

View File

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

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;

View File

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

View File

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

View File

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

View File

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

View File

@ -138,7 +138,7 @@ export interface ListboxPassThroughOptions {
*/
hiddenLastFocusableEl?: ListboxPassThroughOptionType;
/**
* Used to manage all lifecycle hooks
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}
*/
hooks?: ComponentHooks;

View File

@ -14,10 +14,6 @@ export default {
type: String,
default: 'horizontal'
},
exact: {
type: Boolean,
default: true
},
disabled: {
type: Boolean,
default: false

View File

@ -115,7 +115,7 @@ export interface MegaMenuPassThroughOptions {
*/
end?: MegaMenuPassThroughOptionType;
/**
* Used to manage all lifecycle hooks
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}
*/
hooks?: ComponentHooks;
@ -237,6 +237,7 @@ export interface MegaMenuProps {
orientation?: 'horizontal' | 'vertical' | 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;

View File

@ -19,7 +19,6 @@
:horizontal="horizontal"
:templates="$slots"
:activeItem="activeItem"
:exact="exact"
:level="0"
:pt="pt"
:unstyled="unstyled"
@ -73,11 +72,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();
},

View File

@ -22,14 +22,7 @@
>
<div :class="cx('content')" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)" v-bind="getPTOptions(processedItem, index, 'content')">
<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(processedItem, index, 'action')">
<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(processedItem, index, 'icon')" />
<span :class="cx('label')" v-bind="getPTOptions(processedItem, index, 'label')">{{ 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(processedItem, index, 'action')">
<a v-ripple :href="getItemProp(processedItem, 'url')" :class="cx('action')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions(processedItem, index, 'action')">
<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(processedItem, index, 'icon')" />
<span :class="level === 0 ? cx('label') : cx('submenuLabel')" v-bind="level === 0 ? getPTOptions(processedItem, index, 'label') : getPTOptions(processedItem, index, 'submenuLabel')">{{ getItemLabel(processedItem) }}</span>
@ -55,7 +48,6 @@
:submenu="submenu"
:items="submenu.items"
:templates="templates"
:exact="exact"
:level="level + 1"
:pt="pt"
:unstyled="unstyled"
@ -124,10 +116,6 @@ export default {
type: Object,
default: null
},
exact: {
type: Boolean,
default: true
},
tabindex: {
type: Number,
default: 0
@ -185,9 +173,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;
},

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