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

Merge branch 'master' into fix/fix-dialog-getcomputedstyle-error

pull/4314/head
Dmytro Lukashenko 2023-08-22 12:10:26 +03:00 committed by GitHub
parent 5f15f6bb7e 938fc31af4
commit 2485b810f9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1040 changed files with 8378 additions and 8507 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3389
CHANGELOG.md
View File

File diff suppressed because it is too large Load Diff

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

@ -380,9 +380,20 @@ if (project) {
type += ` \t <b>${childSinature.name}(${parameters})</b>: ${childSinature.type?.name}, // ${childSinature.comment?.summary[0]?.text}\n `;
} else {
const childType = child.type.elementType ? child.type.elementType.name : child.type.name;
if (child.type?.declaration?.signatures) {
let functionParameters = '';
type += ` \t <b>${child.name}</b>: ${childType}, // ${child.comment?.summary[0]?.text}\n `;
child.type?.declaration?.signatures[0]?.parameters.map((param, index) => {
if (index !== 0) functionParameters += `, `;
functionParameters += `${param.name}: ${param.type?.name}`;
});
type += `\t <b>${child.name}</b>: (${functionParameters}) &rArr; ${child.type?.declaration?.signatures[0]?.type?.name}, // ${child.type?.declaration?.signatures[0]?.comment.summary[0]?.text}\n`;
} else {
const childType = child.type.elementType ? child.type.elementType.name : child.type.name;
type += ` \t <b>${child.name}</b>: ${childType}, // ${child.comment?.summary[0]?.text}\n `;
}
}
});
}

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

@ -77,6 +77,12 @@ const AutoCompleteProps = [
default: 'null',
description: 'Default text to display when no option is selected.'
},
{
name: 'loading',
type: 'boolean',
default: 'false',
description: 'Whether the multiselect is in loading state.'
},
{
name: 'disabled',
type: 'boolean',

6
assets/data/news.json
View File

@ -1,8 +1,8 @@
{
"id": 41,
"content": "Summer Sale | Up to 50% Off",
"id": 42,
"content": "Introducing Tailwind CSS Support",
"linkText": "Learn More",
"linkHref": "https://www.primefaces.org/store",
"linkHref": "https://primevue.org/tailwind",
"backgroundStyle": "background-color:#4f8ff7",
"textStyle": "color:#ffffff;font-weight:500",
"linkStyle": "color:#ffffff;font-weight:700;text-decoration: underline;"

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

@ -26,7 +26,7 @@ pre[class*="language-"] {
position: relative;
margin: .5em 0;
overflow: visible;
padding: 1px;
padding: 0;
}
pre[class*="language-"] > code {
@ -402,7 +402,8 @@ pre[class*="language-"] {
margin: 0;
color: var(--surface-900);
font-size: 14px;
border-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
}

35
assets/styles/layout/_doc.scss
View File

@ -205,6 +205,18 @@
}
}
.doc-section-code-buttons {
gap: .75rem;
padding: .75rem 0 0;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
.p-button-label {
font-weight: normal;
font-size: 0.875rem;
}
}
.doc-section-code-tooltip .p-tooltip-text {
padding: 0.5rem;
font-size: 11px;
@ -217,19 +229,8 @@
}
}
.p-button-label {
font-weight: normal;
font-size: 0.875rem;
}
.doc-section-code-active {
.p-button-label {
font-weight: bold;
}
}
pre {
margin: 0 0 1.5rem 0;
margin: 0;
}
}
@ -275,6 +276,14 @@
text-decoration: underline;
}
}
.doc-option-type-options-container {
display: flex;
align-items: center;
}
span.doc-option-type-options {
color: var(--primary-700);
}
}
&.doc-option-default {
@ -289,7 +298,7 @@
}
.doc-option-name,
> i {
> i:not(.pi) {
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
position: relative;
scroll-margin-top: 6.5rem;

10
components/doc/DocApiTable.vue
View File

@ -19,7 +19,7 @@
</thead>
<tbody>
<tr v-for="prop in data" :key="prop">
<td v-for="[k, v] in Object.entries(prop)" :key="k" :class="{ 'doc-option-type': k === 'type', 'doc-option-default': k === 'defaultValue' }">
<td v-for="[k, v] in Object.entries(prop)" :key="k" :class="{ 'doc-option-type': k === 'type' || k === 'options', 'doc-option-default': k === 'defaultValue' }">
<template v-if="k !== 'readonly' && k !== 'optional' && k !== 'deprecated'">
<span v-if="k === 'name'" :id="id + '.' + v" class="doc-option-name" :class="{ 'line-through cursor-pointer': !!prop.deprecated }" :title="prop.deprecated">
{{ v
@ -34,6 +34,14 @@
</template>
</template>
<template v-else-if="k === 'options'">
<template v-for="val in v" :key="val.name">
<div class="doc-option-type-options-container">
{{ val.name }}: <span class="doc-option-type-options">{{ val.type }}</span>
</div>
</template>
</template>
<template v-else-if="k === 'parameters'">
<span v-if="v.name" :class="{ 'parameter-bold': label === 'Slots' }"> {{ v.name }} : </span>
<template v-for="(value, i) in getType(v.type)" :key="value">

2
components/doc/DocComponent.vue
View File

@ -56,7 +56,7 @@ export default {
};
},
mounted() {
this.tab = this.$route.hash.includes('api') ? 1 : this.$route.hash.includes('pt') ? 3 : 0;
this.tab = this.$route.hash.includes('api') ? 1 : this.$route.hash.includes('theming') ? 2 : this.$route.hash.includes('pt') ? 3 : 0;
}
};
</script>

51
components/doc/DocSectionCode.vue
View File

@ -1,14 +1,14 @@
<template>
<div v-if="!embedded" class="relative doc-section-code">
<div class="flex surface-card align-items-center justify-content-end absolute z-1" :style="{ right: '.75rem', top: '.75rem', gap: '.75rem' }">
<div v-if="!embedded" class="surface-card mb-4" style="border-radius: 10px">
<div class="flex doc-section-code-buttons surface-card align-items-center justify-content-end sticky z-1 top-0 mr-3">
<template v-if="codeMode !== 'basic' && !hideToggleCode">
<Button
:class="['p-button-rounded p-button-text p-button-plain p-0 inline-flex align-items-center justify-content-center', { 'doc-section-code-active text-primary': codeLang === 'typescript' }]"
:class="['p-button-rounded p-button-text p-button-plain p-0 inline-flex align-items-center justify-content-center', { 'doc-section-code-buttons-active text-primary': codeLang === 'composition' }]"
label="Composition API"
@click="codeLang = 'composition'"
></Button>
<Button
:class="['p-button-rounded p-button-text p-button-plain p-0 inline-flex align-items-center justify-content-center', { 'doc-section-code-active text-primary': codeLang === 'javascript' }]"
:class="['p-button-rounded p-button-text p-button-plain p-0 inline-flex align-items-center justify-content-center', { 'doc-section-code-buttons-active text-primary': codeLang === 'options' }]"
label="Options API"
@click="codeLang = 'options'"
></Button>
@ -76,40 +76,33 @@
></Button>
</div>
<template v-if="codeMode === 'basic' && importCode">
<pre v-code.script><code>
{{ code.basic }}
<div class="relative doc-section-code overflow-auto" style="max-height: 40rem">
<template v-if="codeMode === 'basic' && importCode">
<pre v-code.script><code>{{ code.basic }}
</code></pre>
</template>
<template v-if="codeMode === 'basic' && !importCode">
<pre v-code><code>
{{ code.basic }}
</template>
<template v-if="codeMode === 'basic' && !importCode">
<pre v-code><code>{{ code.basic }}
</code></pre>
</template>
<template v-if="codeMode !== 'basic' && codeLang === 'options'">
<pre v-code><code>
{{ code.options }}
</template>
<template v-if="codeMode !== 'basic' && codeLang === 'options'">
<pre v-code><code>{{ code.options }}
</code></pre>
</template>
<template v-if="codeMode !== 'basic' && codeLang === 'composition'">
<pre v-code><code>
{{ code.composition }}
</template>
<template v-if="codeMode !== 'basic' && codeLang === 'composition'">
<pre v-code><code>{{ code.composition }}
</code></pre>
</template>
<template v-if="codeMode !== 'basic' && codeLang === 'data'">
<pre v-code.json><code>
{{ code.data }}
</template>
<template v-if="codeMode !== 'basic' && codeLang === 'data'">
<pre v-code.json><code>{{ code.data }}
</code></pre>
</template>
</template>
</div>
<div class="h-1rem"></div>
</div>
<div v-else id="embed"></div>
</template>

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

@ -2,7 +2,7 @@ import pkg from '../../../package.json';
import { services } from './services';
const PrimeVue = {
version: '^3.31.0',
version: '^3.32.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.'
};

20
components/doc/helpers/PTHelper.js
View File

@ -2,14 +2,24 @@ import APIDocs from '@/doc/common/apidoc/index.json';
export const getPTOption = (name) => {
const { props } = APIDocs[name.toLowerCase()].interfaces.values[`${name}PassThroughOptions`] || APIDocs[name.toLowerCase()].interfaces.values[`${name}DirectivePassThroughOptions`];
const options = APIDocs[name.toLowerCase()].interfaces.values[`${name}PassThroughMethodOptions`];
let data = [];
for (const [i, prop] of props.entries()) {
data.push({
value: i + 1,
label: prop.name,
description: prop.description
});
if (options) {
data.push({
value: i + 1,
label: prop.name,
options: options?.props,
description: prop.description
});
} else {
data.push({
value: i + 1,
label: prop.name,
description: prop.description
});
}
}
return data;

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

@ -10,7 +10,7 @@
import { VNode } from 'vue';
import { AccordionTabPassThroughOptionType } from '../accordiontab';
import { ComponentHooks } from '../basecomponent';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
export declare type AccordionPassThroughOptionType = AccordionPassThroughAttributes | ((options: AccordionPassThroughMethodOptions) => AccordionPassThroughAttributes | string) | string | null | undefined;
@ -139,7 +139,7 @@ export interface AccordionProps {
* Used to pass attributes to DOM elements inside the component.
* @type {AccordionPassThroughOptions}
*/
pt?: AccordionPassThroughOptions;
pt?: PTOptions<AccordionPassThroughOptions>;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false

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

@ -9,7 +9,7 @@
*/
import { AnchorHTMLAttributes, HTMLAttributes, TransitionProps, VNode } from 'vue';
import { AccordionPassThroughOptions } from '../accordion';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
export declare type AccordionTabPassThroughOptionType = AccordionTabPassThroughAttributes | ((options: AccordionTabPassThroughMethodOptions) => AccordionTabPassThroughAttributes | string) | string | null | undefined;
@ -119,7 +119,7 @@ export interface AccordionTabProps {
* Used to pass attributes to DOM elements inside the component.
* @type {AccordionTabPassThroughOptions}
*/
pt?: AccordionTabPassThroughOptions;
pt?: PTOptions<AccordionTabPassThroughOptions>;
}
/**
@ -171,8 +171,9 @@ export interface AccordionTabSlots {
index: number;
/**
* Whether the tab is active
* @param {number} index - Index of the tab
*/
isTabActive(i: number): void;
isTabActive: (index: number) => void;
}): VNode[];
}

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

@ -10,7 +10,7 @@
import { HTMLAttributes, InputHTMLAttributes, TransitionProps, VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { ButtonPassThroughOptionType } from '../button';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
import { VirtualScrollerItemOptions, VirtualScrollerPassThroughOptionType, VirtualScrollerProps } from '../virtualscroller';
export declare type AutoCompletePassThroughOptionType = AutoCompletePassThroughAttributes | ((options: AutoCompletePassThroughMethodOptions) => AutoCompletePassThroughAttributes | string) | string | null | undefined;
@ -305,6 +305,11 @@ export interface AutoCompleteProps {
* Default text to display when no option is selected.
*/
placeholder?: string | undefined;
/**
* Whether the autocomplete is in loading state.
* @defaultValue false
*/
loading?: boolean | undefined;
/**
* When present, it specifies that the component should be disabled.
* @defaultValue false
@ -442,7 +447,7 @@ export interface AutoCompleteProps {
* Used to pass attributes to DOM elements inside the component.
* @type {AutoCompletePassThroughOptions}
*/
pt?: AutoCompletePassThroughOptions;
pt?: PTOptions<AutoCompletePassThroughOptions>;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false
@ -558,13 +563,13 @@ export interface AutoCompleteSlots {
* Referance of the content
* @param {HTMLElement} el - Element of 'ref' property
*/
contentRef(el: any): void;
contentRef: (el: any) => void;
/**
* Options of the items
* @param {number} index - Rendered index
* @return {VirtualScrollerItemOptions}
*/
getItemOptions(index: number): VirtualScrollerItemOptions;
getItemOptions: (index: number) => VirtualScrollerItemOptions;
}): VNode[];
/**
* Custom loader template.
@ -598,14 +603,24 @@ export interface AutoCompleteSlots {
*/
class: string;
/**
* Remove token icon function.
* Index of the token.
*/
onClick: void;
index: number;
/**
* Remove token icon function.
* @param {Event} event - Browser event
*/
onClick: (event: Event, index: number) => void;
}): VNode[];
/**
* Custom loading icon template.
*/
loadingicon(): VNode[];
loadingicon(scope: {
/**
* Style class of the loading icon.
*/
class: string;
}): VNode[];
}
/**

6
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)" :onClick="(event) => removeOption(event, i)">
<slot name="removetokenicon" :class="cx(removeTokenIcon)" :index="i" :onClick="(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>
@ -87,7 +87,7 @@
/>
</li>
</ul>
<slot v-if="searching" :class="cx('loadingIcon')" name="loadingicon">
<slot v-if="searching || loading" :class="cx('loadingIcon')" name="loadingicon">
<i v-if="loadingIcon" :class="['pi-spin', cx('loadingIcon'), loadingIcon]" aria-hidden="true" v-bind="ptm('loadingIcon')" />
<SpinnerIcon v-else :class="[cx('loadingIcon'), loadingIcon]" spin aria-hidden="true" v-bind="ptm('loadingIcon')" />
</slot>
@ -477,7 +477,7 @@ export default {
}
},
onContainerClick(event) {
if (this.disabled || this.searching || this.isInputClicked(event) || this.isDropdownClicked(event)) {
if (this.disabled || this.searching || this.loading || this.isInputClicked(event) || this.isDropdownClicked(event)) {
return;
}

4
components/lib/autocomplete/BaseAutoComplete.vue
View File

@ -187,6 +187,10 @@ export default {
type: Boolean,
default: false
},
loading: {
type: Boolean,
default: false
},
disabled: {
type: Boolean,
default: false

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

@ -9,7 +9,7 @@
import { VNode } from 'vue';
import { AvatarGroupPassThroughOptions } from '../avatargroup';
import { ComponentHooks } from '../basecomponent';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
export declare type AvatarPassThroughOptionType = AvatarPassThroughAttributes | ((options: AvatarPassThroughMethodOptions) => AvatarPassThroughAttributes | string) | string | null | undefined;
@ -96,7 +96,7 @@ export interface AvatarProps {
* Used to pass attributes to DOM elements inside the component.
* @type {AvatarPassThroughOptions}
*/
pt?: AvatarPassThroughOptions;
pt?: PTOptions<AvatarPassThroughOptions>;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false

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

@ -8,7 +8,7 @@
*
*/
import { ComponentHooks } from '../basecomponent';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
export declare type AvatarGroupPassThroughOptionType = AvatarGroupPassThroughAttributes | null | undefined;
@ -43,7 +43,7 @@ export interface AvatarGroupProps {
* Used to pass attributes to DOM elements inside the component.
* @type {AvatarGroupPassThroughOptions}
*/
pt?: AvatarGroupPassThroughOptions;
pt?: PTOptions<AvatarGroupPassThroughOptions>;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false

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

@ -9,7 +9,7 @@
*/
import { VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
export declare type BadgePassThroughOptionType = BadgePassThroughAttributes | ((options: BadgePassThroughMethodOptions) => BadgePassThroughAttributes | string) | string | null | undefined;
@ -64,7 +64,7 @@ export interface BadgeProps {
* Used to pass attributes to DOM elements inside the component.
* @type {BadgePassThroughOptions}
*/
pt?: BadgePassThroughOptions;
pt?: PTOptions<BadgePassThroughOptions>;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false

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

@ -8,6 +8,7 @@
*/
import { DirectiveBinding, ObjectDirective } from 'vue';
import { DirectiveHooks } from '../basedirective';
import { PTOptions } from '../ts-helpers';
export declare type BadgeDirectivePassThroughOptionType = BadgeDirectivePassThroughAttributes | ((options: BadgePassThroughMethodOptions) => BadgeDirectivePassThroughAttributes) | null | undefined;
@ -26,7 +27,7 @@ export interface BadgeDirectiveOptions {
* Used to pass attributes to DOM elements inside the component.
* @type {BadgeDirectivePassThroughOptions}
*/
pt?: BadgeDirectivePassThroughOptions;
pt?: PTOptions<BadgeDirectivePassThroughOptions>;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false

92
components/lib/basecomponent/BaseComponent.vue
View File

@ -52,7 +52,7 @@ const buttonStyles = `
margin: 0;
}
.p-buttonset .p-button:not(:last-child) {
.p-buttonset .p-button:not(:last-child), .p-buttonset .p-button:not(:last-child):hover {
border-right: 0 none;
}
@ -381,21 +381,30 @@ export default {
immediate: true,
handler(newValue) {
if (!newValue) {
loadStyle();
this.$options.css && this.$css.loadStyle();
loadStyle(undefined, { nonce: this.$config?.csp?.nonce });
this.$options.css && this.$css.loadStyle(undefined, { nonce: this.$config?.csp?.nonce });
}
}
}
},
beforeCreate() {
this.pt?.hooks?.['onBeforeCreate']?.();
this.$primevue?.config?.pt?.[this.$.type.name]?.hooks?.['onBeforeCreate']?.();
const _usept = this.pt?.['_usept'];
const originalValue = _usept ? this.pt?.originalValue?.[this.$.type.name] : undefined;
const value = _usept ? this.pt?.value?.[this.$.type.name] : this.pt;
(value || originalValue)?.hooks?.['onBeforeCreate']?.();
const _useptInConfig = this.$config?.pt?.['_usept'];
const originalValueInConfig = _useptInConfig ? this.$primevue?.config?.pt?.originalValue : undefined;
const valueInConfig = _useptInConfig ? this.$primevue?.config?.pt?.value : this.$primevue?.config?.pt;
(valueInConfig || originalValueInConfig)?.[this.$.type.name]?.hooks?.['onBeforeCreate']?.();
},
created() {
this._hook('onCreated');
},
beforeMount() {
loadBaseStyle();
loadBaseStyle(undefined, { nonce: this.$config?.csp?.nonce });
this._loadGlobalStyles();
this._hook('onBeforeMount');
},
@ -416,11 +425,13 @@ export default {
},
methods: {
_hook(hookName) {
const selfHook = this._getOptionValue(this.pt, `hooks.${hookName}`);
const defaultHook = this._getOptionValue(this.defaultPT, `hooks.${hookName}`);
if (!this.$options.hostName) {
const selfHook = this._usePT(this._getPT(this.pt, this.$.type.name), this._getOptionValue, `hooks.${hookName}`);
const defaultHook = this._useDefaultPT(this._getOptionValue, `hooks.${hookName}`);
selfHook?.();
defaultHook?.();
selfHook?.();
defaultHook?.();
}
},
_loadGlobalStyles() {
/*
@ -433,9 +444,9 @@ export default {
* ObjectUtils.isNotEmpty(mergedCSS?.class) && this.$css.loadCustomStyle(mergedCSS?.class);
*/
const globalCSS = this._getOptionValue(this.globalPT, 'global.css', this.$params);
const globalCSS = this._useGlobalPT(this._getOptionValue, 'global.css', this.$params);
ObjectUtils.isNotEmpty(globalCSS) && loadGlobalStyle(globalCSS);
ObjectUtils.isNotEmpty(globalCSS) && loadGlobalStyle(globalCSS, { nonce: this.$config?.csp?.nonce });
},
_getHostInstance(instance) {
return instance ? (this.$options.hostName ? (instance.$.type.name === this.$options.hostName ? instance : this._getHostInstance(instance.$parentInstance)) : instance.$parentInstance) : undefined;
@ -452,8 +463,9 @@ export default {
},
_getPTValue(obj = {}, key = '', params = {}, searchInDefaultPT = true) {
const datasetPrefix = 'data-pc-';
const self = this._getPTClassValue(obj, key, params);
const globalPT = searchInDefaultPT ? (/./g.test(key) && !!params[key.split('.')[0]] ? this._getPTClassValue(this.globalPT, key, params) : this._getPTClassValue(this.defaultPT, key, params)) : undefined;
const searchOut = /./g.test(key) && !!params[key.split('.')[0]];
const self = searchOut ? undefined : this._usePT(this._getPT(obj, this.$name), this._getPTClassValue, key, params);
const globalPT = searchInDefaultPT ? (searchOut ? this._useGlobalPT(this._getPTClassValue, key, params) : this._useDefaultPT(this._getPTClassValue, key, params)) : undefined;
const merged = mergeProps(
self,
globalPT,
@ -475,6 +487,46 @@ export default {
return ObjectUtils.isString(value) || ObjectUtils.isArray(value) ? { class: value } : value;
},
_getPT(pt, key = '', callback) {
const _usept = pt?.['_usept'];
const getValue = (value) => {
const computedValue = callback ? callback(value) : value;
return computedValue?.[ObjectUtils.toFlatCase(key)] ?? computedValue;
};
return ObjectUtils.isNotEmpty(_usept)
? {
_usept,
originalValue: getValue(pt.originalValue),
value: getValue(pt.value)
}
: getValue(pt);
},
_usePT(pt, callback, key, params) {
const fn = (value) => callback(value, key, params);
if (pt?.hasOwnProperty('_usept')) {
const { merge, useMergeProps } = pt['_usept'];
const originalValue = fn(pt.originalValue);
const value = fn(pt.value);
if (originalValue === undefined && value === undefined) return undefined;
else if (ObjectUtils.isString(value)) return value;
else if (ObjectUtils.isString(originalValue)) return originalValue;
return merge ? (useMergeProps ? mergeProps(originalValue, value) : { ...originalValue, ...value }) : value;
}
return fn(pt);
},
_useGlobalPT(callback, key, params) {
return this._usePT(this.globalPT, callback, key, params);
},
_useDefaultPT(callback, key, params) {
return this._usePT(this.defaultPT, callback, key, params);
},
ptm(key = '', params = {}) {
return this._getPTValue(this.pt, key, { ...this.$params, ...params });
},
@ -497,19 +549,25 @@ export default {
},
computed: {
globalPT() {
return ObjectUtils.getItemValue(this.$primevue.config.pt, { instance: this });
return this._getPT(this.$config?.pt, undefined, (value) => ObjectUtils.getItemValue(value, { instance: this }));
},
defaultPT() {
return this._getOptionValue(this.$primevue.config.pt, this.$options.hostName || this.$.type.name, { instance: this }) || this.globalPT;
return this._getPT(this.$config?.pt, undefined, (value) => this._getOptionValue(value, this.$name, { instance: this }) || ObjectUtils.getItemValue(value, { instance: this }));
},
isUnstyled() {
return this.unstyled !== undefined ? this.unstyled : this.$primevue.config.unstyled;
return this.unstyled !== undefined ? this.unstyled : this.$config.unstyled;
},
$params() {
return { instance: this, props: this.$props, state: this.$data, parentInstance: this.$parentInstance };
},
$css() {
return { classes: undefined, inlineStyles: undefined, loadStyle: () => {}, loadCustomStyle: () => {}, ...(this._getHostInstance(this) || {}).$css, ...this.$options.css };
},
$config() {
return this.$primevue?.config;
},
$name() {
return this.$options.hostName || this.$.type.name;
}
}
};

56
components/lib/basedirective/BaseDirective.js
View File

@ -22,8 +22,8 @@ const BaseDirective = {
};
const datasetPrefix = 'data-pc-';
const self = getValue(obj, key, params);
const globalPT = searchInDefaultPT ? getValue(instance.defaultPT, key, params) : undefined;
const self = BaseDirective._usePT(BaseDirective._getPT(obj, instance.$name), getValue, key, params);
const globalPT = searchInDefaultPT ? BaseDirective._useDefaultPT(instance.defaultPT, getValue, key, params) : undefined;
const merged = mergeProps(self, globalPT, {
...(key === 'root' && { [`${datasetPrefix}name`]: ObjectUtils.toFlatCase(instance.$name) }),
[`${datasetPrefix}section`]: ObjectUtils.toFlatCase(key)
@ -31,15 +31,52 @@ const BaseDirective = {
return merged;
},
_getPT(pt, key = '', callback) {
const _usept = pt?.['_usept'];
const getValue = (value) => {
const computedValue = callback ? callback(value) : value;
return computedValue?.[ObjectUtils.toFlatCase(key)] ?? computedValue;
};
return ObjectUtils.isNotEmpty(_usept)
? {
_usept,
originalValue: getValue(pt.originalValue),
value: getValue(pt.value)
}
: getValue(pt);
},
_usePT(pt, callback, key, params) {
const fn = (value) => callback(value, key, params);
if (pt?.hasOwnProperty('_usept')) {
const { merge, useMergeProps } = pt['_usept'];
const originalValue = fn(pt.originalValue);
const value = fn(pt.value);
if (originalValue === undefined && value === undefined) return undefined;
else if (ObjectUtils.isString(value)) return value;
else if (ObjectUtils.isString(originalValue)) return originalValue;
return merge ? (useMergeProps ? mergeProps(originalValue, value) : { ...originalValue, ...value }) : value;
}
return fn(pt);
},
_useDefaultPT(defaultPT = {}, callback, key, params) {
return BaseDirective._usePT(defaultPT, callback, key, params);
},
_hook: (directiveName, hookName, el, binding, vnode, prevVnode) => {
const name = `on${ObjectUtils.toCapitalCase(hookName)}`;
const config = binding?.instance?.$primevue?.config;
const selfHook = binding?.value?.pt?.hooks?.[name];
const globalHook = config?.pt?.directives?.[directiveName]?.hooks?.[name];
const selfHook = BaseDirective._usePT(BaseDirective._getPT(binding?.value?.pt, directiveName), BaseDirective._getOptionValue, `hooks.${name}`);
const defaultHook = BaseDirective._useDefaultPT(config?.pt?.directives?.[directiveName], BaseDirective._getOptionValue, `hooks.${name}`);
const options = { el, binding, vnode, prevVnode };
selfHook?.(el?.$instance, options);
globalHook?.(el?.$instance, options);
defaultHook?.(el?.$instance, options);
},
_extend: (name, options = {}) => {
const handleHook = (hook, el, binding, vnode, prevVnode) => {
@ -57,8 +94,9 @@ const BaseDirective = {
$binding: binding,
$el: $prevInstance['$el'] || undefined,
$css: { classes: undefined, inlineStyles: undefined, loadStyle: () => {}, ...options?.css },
$config: config,
/* computed instance variables */
defaultPT: config?.pt?.directives?.[name],
defaultPT: BaseDirective._getPT(config?.pt, undefined, (value) => value?.directives?.[name]),
isUnstyled: el.unstyled !== undefined ? el.unstyled : config?.unstyled,
/* instance's methods */
ptm: (key = '', params = {}) => BaseDirective._getPTValue(el.$instance, el.$instance?.$binding?.value?.pt, key, { ...params }),
@ -78,8 +116,10 @@ const BaseDirective = {
handleHook('created', el, binding, vnode, prevVnode);
},
beforeMount: (el, binding, vnode, prevVnode) => {
loadBaseStyle();
!el.$instance?.isUnstyled && el.$instance?.$css?.loadStyle();
const config = binding?.instance?.$primevue?.config;
loadBaseStyle(undefined, { nonce: config?.csp?.nonce });
!el.$instance?.isUnstyled && el.$instance?.$css?.loadStyle(undefined, { nonce: config?.csp?.nonce });
handleHook('beforeMount', el, binding, vnode, prevVnode);
},
mounted: (el, binding, vnode, prevVnode) => {

78
components/lib/baseicon/BaseIcon.vue
View File

@ -1,38 +1,8 @@
<script>
import { useStyle } from 'primevue/usestyle';
import { ObjectUtils } from 'primevue/utils';
export default {
name: 'BaseIcon',
props: {
label: {
type: String,
default: undefined
},
spin: {
type: Boolean,
default: false
}
},
methods: {
pti() {
const isLabelEmpty = ObjectUtils.isEmpty(this.label);
return {
class: [
'p-icon',
{
'p-icon-spin': this.spin
}
],
role: !isLabelEmpty ? 'img' : undefined,
'aria-label': !isLabelEmpty ? this.label : undefined,
'aria-hidden': isLabelEmpty
};
}
}
};
</script>
<style>
const styles = `
.p-icon {
display: inline-block;
}
@ -63,4 +33,46 @@ export default {
transform: rotate(359deg);
}
}
</style>
`;
const { load: loadStyle } = useStyle(styles, { name: 'baseicon', manual: true });
export default {
name: 'BaseIcon',
props: {
label: {
type: String,
default: undefined
},
spin: {
type: Boolean,
default: false
}
},
beforeMount() {
loadStyle(undefined, { nonce: this.$config?.csp?.nonce });
},
methods: {
pti() {
const isLabelEmpty = ObjectUtils.isEmpty(this.label);
return {
class: [
'p-icon',
{
'p-icon-spin': this.spin
}
],
role: !isLabelEmpty ? 'img' : undefined,
'aria-label': !isLabelEmpty ? this.label : undefined,
'aria-hidden': isLabelEmpty
};
}
},
computed: {
$config() {
return this.$primevue?.config;
}
}
};
</script>

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

@ -9,7 +9,7 @@
*/
import { VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
export declare type BlockUIPassThroughOptionType = BlockUIPassThroughAttributes | ((options: BlockUIPassThroughMethodOptions) => BlockUIPassThroughAttributes | string) | string | null | undefined;
@ -88,7 +88,7 @@ export interface BlockUIProps {
* Used to pass attributes to DOM elements inside the component.
* @type {BlockUIPassThroughOptions}
*/
pt?: BlockUIPassThroughOptions;
pt?: PTOptions<BlockUIPassThroughOptions>;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false

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

@ -10,7 +10,7 @@
import { VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { MenuItem } from '../menuitem';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
export declare type BreadcrumbPassThroughOptionType = BreadcrumbPassThroughAttributes | ((options: BreadcrumbPassThroughMethodOptions) => BreadcrumbPassThroughAttributes | string) | string | null | undefined;
@ -117,7 +117,7 @@ export interface BreadcrumbProps {
* Used to pass attributes to DOM elements inside the component.
* @type {BreadcrumbPassThroughOptions}
*/
pt?: BreadcrumbPassThroughOptions;
pt?: PTOptions<BreadcrumbPassThroughOptions>;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false

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

@ -9,7 +9,7 @@
*/
import { ButtonHTMLAttributes, VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
export declare type ButtonPassThroughOptionType = ButtonPassThroughAttributes | ((options: ButtonPassThroughMethodOptions) => ButtonPassThroughAttributes | string) | string | null | undefined;
@ -150,7 +150,7 @@ export interface ButtonProps extends ButtonHTMLAttributes {
* Used to pass attributes to DOM elements inside the component.
* @type {ButtonPassThroughOptions}
*/
pt?: ButtonPassThroughOptions;
pt?: PTOptions<ButtonPassThroughOptions>;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false

4
components/lib/button/Button.vue
View File

@ -5,8 +5,8 @@
<span v-if="loadingIcon" :class="[cx('loadingIcon'), cx('icon'), loadingIcon]" v-bind="ptm('loadingIcon')" />
<SpinnerIcon v-else :class="[cx('loadingIcon'), cx('icon')]" spin v-bind="ptm('loadingIcon')" />
</slot>
<slot v-else name="icon" :class="cx('icon')">
<span v-if="icon" :class="[cx('icon'), icon]" v-bind="ptm('icon')"></span>
<slot v-else name="icon" :class="[cx('icon')]">
<span v-if="icon" :class="[cx('icon'), icon, iconClass]" v-bind="ptm('icon')"></span>
</slot>
<span :class="cx('label')" v-bind="ptm('label')">{{ label || '&nbsp;' }}</span>
<Badge v-if="badge" :value="badge" :class="badgeClass" :unstyled="unstyled" v-bind="ptm('badge')"></Badge>

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

@ -10,7 +10,7 @@
import { HTMLAttributes, InputHTMLAttributes, TransitionProps, VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { ButtonPassThroughOptionType } from '../button';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
export declare type CalendarPassThroughOptionType = CalendarPassThroughAttributes | ((options: CalendarPassThroughMethodOptions) => CalendarPassThroughAttributes | string) | string | null | undefined;
@ -691,7 +691,7 @@ export interface CalendarProps {
* Used to pass attributes to DOM elements inside the component.
* @type {CalendarPassThroughOptions}
*/
pt?: CalendarPassThroughOptions;
pt?: PTOptions<CalendarPassThroughOptions>;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false
@ -735,20 +735,44 @@ export interface CalendarSlots {
dropdownicon(): VNode[];
/**
* Custom previous icon template.
* @param {Object} scope - previous icon slot's params.
*/
previousicon(): VNode[];
previousicon(scope: {
/**
* Style class of the dropdown icon
*/
class: any;
}): VNode[];
/**
* Custom next icon template.
* @param {Object} scope - next icon slot's params.
*/
nexticon(): VNode[];
nexticon(scope: {
/**
* Style class of the dropdown icon
*/
class: any;
}): VNode[];
/**
* Custom increment icon template.
* @param {Object} scope - increment icon slot's params.
*/
incrementicon(): VNode[];
incrementicon(scope: {
/**
* Style class of the dropdown icon
*/
class: any;
}): VNode[];
/**
* Custom decrement icon template.
* @param {Object} scope - decrement icon slot's params.
*/
decrementicon(): VNode[];
decrementicon(scope: {
/**
* Style class of the dropdown icon
*/
class: any;
}): VNode[];
}
/**

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

@ -80,7 +80,7 @@
:aria-label="currentView === 'year' ? $primevue.config.locale.prevDecade : currentView === 'month' ? $primevue.config.locale.prevYear : $primevue.config.locale.prevMonth"
v-bind="ptm('previousButton')"
>
<slot name="previousicon">
<slot name="previousicon" :class="cx('previousIcon')">
<component :is="previousIcon ? 'span' : 'ChevronLeftIcon'" :class="[cx('previousIcon'), previousIcon]" v-bind="ptm('previousIcon')" />
</slot>
</button>
@ -125,7 +125,7 @@
:aria-label="currentView === 'year' ? $primevue.config.locale.nextDecade : currentView === 'month' ? $primevue.config.locale.nextYear : $primevue.config.locale.nextMonth"
v-bind="ptm('nextButton')"
>
<slot name="nexticon">
<slot name="nexticon" :class="cx('nextIcon')">
<component :is="nextIcon ? 'span' : 'ChevronRightIcon'" :class="[cx('nextIcon'), nextIcon]" v-bind="ptm('nextIcon')" />
</slot>
</button>
@ -392,13 +392,13 @@
</div>
<div v-if="hourFormat == '12'" :class="cx('ampmPicker')" v-bind="ptm('ampmPicker')">
<button v-ripple :class="cx('incrementButton')" :aria-label="$primevue.config.locale.am" @click="toggleAMPM($event)" type="button" :disabled="disabled" v-bind="ptm('incrementButton')">
<slot name="incrementicon">
<slot name="incrementicon" :class="cx('incrementIcon')">
<component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="cx('incrementIcon')" v-bind="ptm('incrementIcon')" />
</slot>
</button>
<span v-bind="ptm('ampm')">{{ pm ? $primevue.config.locale.pm : $primevue.config.locale.am }}</span>
<button v-ripple :class="cx('decrementButton')" :aria-label="$primevue.config.locale.pm" @click="toggleAMPM($event)" type="button" :disabled="disabled" v-bind="ptm('decrementButton')">
<slot name="decrementicon">
<slot name="decrementicon" :class="cx('decrementIcon')">
<component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="cx('decrementIcon')" v-bind="ptm('decrementIcon')" />
</slot>
</button>
@ -1416,7 +1416,7 @@ export default {
},
incrementHour(event) {
let prevHour = this.currentHour;
let newHour = this.currentHour + this.stepHour;
let newHour = this.currentHour + Number(this.stepHour);
let newPM = this.pm;
if (this.hourFormat == '24') newHour = newHour >= 24 ? newHour - 24 : newHour;
@ -1458,7 +1458,7 @@ export default {
event.preventDefault();
},
incrementMinute(event) {
let newMinute = this.currentMinute + this.stepMinute;
let newMinute = this.currentMinute + Number(this.stepMinute);
if (this.validateTime(this.currentHour, newMinute, this.currentSecond, this.pm)) {
this.currentMinute = newMinute > 59 ? newMinute - 60 : newMinute;
@ -1478,7 +1478,7 @@ export default {
event.preventDefault();
},
incrementSecond(event) {
let newSecond = this.currentSecond + this.stepSecond;
let newSecond = this.currentSecond + Number(this.stepSecond);
if (this.validateTime(this.currentHour, this.currentMinute, newSecond, this.pm)) {
this.currentSecond = newSecond > 59 ? newSecond - 60 : newSecond;
@ -2582,13 +2582,15 @@ export default {
if (!this.responsiveStyleElement) {
this.responsiveStyleElement = document.createElement('style');
this.responsiveStyleElement.type = 'text/css';
DomHandler.setAttribute(this.responsiveStyleElement, 'nonce', this.$primevue?.config?.csp?.nonce);
document.body.appendChild(this.responsiveStyleElement);
}
let innerHTML = '';
if (this.responsiveOptions) {
let responsiveOptions = [...this.responsiveOptions].filter((o) => !!(o.breakpoint && o.numMonths)).sort((o1, o2) => -1 * o1.breakpoint.localeCompare(o2.breakpoint, undefined, { numeric: true }));
const comparer = new Intl.Collator(undefined, { numeric: true }).compare;
let responsiveOptions = [...this.responsiveOptions].filter((o) => !!(o.breakpoint && o.numMonths)).sort((o1, o2) => -1 * comparer(o1.breakpoint, o2.breakpoint));
for (let i = 0; i < responsiveOptions.length; i++) {
let { breakpoint, numMonths } = responsiveOptions[i];

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

@ -9,7 +9,7 @@
*/
import { VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
export declare type CardPassThroughOptionType = CardPassThroughAttributes | null | undefined;
@ -68,7 +68,7 @@ export interface CardProps {
* Used to pass attributes to DOM elements inside the component.
* @type {CardPassThroughOptions}
*/
pt?: CardPassThroughOptions;
pt?: PTOptions<CardPassThroughOptions>;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false

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

@ -9,7 +9,7 @@
*/
import { ButtonHTMLAttributes, VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
export declare type CarouselPassThroughOptionType = CarouselPassThroughAttributes | ((options: CarouselPassThroughMethodOptions) => CarouselPassThroughAttributes | string) | string | null | undefined;
@ -274,7 +274,7 @@ export interface CarouselProps {
* Used to pass attributes to DOM elements inside the component.
* @type {CarouselPassThroughOptions}
*/
pt?: CarouselPassThroughOptions;
pt?: PTOptions<CarouselPassThroughOptions>;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false

4
components/lib/carousel/Carousel.vue
View File

@ -516,6 +516,7 @@ export default {
if (!this.carouselStyle) {
this.carouselStyle = document.createElement('style');
this.carouselStyle.type = 'text/css';
DomHandler.setAttribute(this.carouselStyle, 'nonce', this.$primevue?.config?.csp?.nonce);
document.body.appendChild(this.carouselStyle);
}
@ -527,6 +528,7 @@ export default {
if (this.responsiveOptions && !this.isUnstyled) {
let _responsiveOptions = [...this.responsiveOptions];
const comparer = new Intl.Collator(undefined, { numeric: true }).compare;
_responsiveOptions.sort((data1, data2) => {
const value1 = data1.breakpoint;
@ -536,7 +538,7 @@ export default {
if (value1 == null && value2 != null) result = -1;
else if (value1 != null && value2 == null) result = 1;
else if (value1 == null && value2 == null) result = 0;
else if (typeof value1 === 'string' && typeof value2 === 'string') result = value1.localeCompare(value2, undefined, { numeric: true });
else if (typeof value1 === 'string' && typeof value2 === 'string') result = comparer(value1, value2);
else result = value1 < value2 ? -1 : value1 > value2 ? 1 : 0;
return -1 * result;

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

@ -9,7 +9,7 @@
*/
import { HTMLAttributes, InputHTMLAttributes, TransitionProps, VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
export declare type CascadeSelectPassThroughOptionType = CascadeSelectPassThroughAttributes | ((options: CascadeSelectPassThroughMethodOptions) => CascadeSelectPassThroughAttributes | string) | string | null | undefined;
@ -325,7 +325,7 @@ export interface CascadeSelectProps {
* Used to pass attributes to DOM elements inside the component.
* @type {CascadeSelectPassThroughOptions}
*/
pt?: CascadeSelectPassThroughOptions;
pt?: PTOptions<CascadeSelectPassThroughOptions>;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false

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

@ -9,7 +9,7 @@
*/
import { CanvasHTMLAttributes } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
export declare type ChartPassThroughOptionType = ChartPassThroughAttributes | ((options: ChartPassThroughMethodOptions) => ChartPassThroughAttributes | string) | string | null | undefined;
@ -105,7 +105,7 @@ export interface ChartProps {
* Used to pass attributes to DOM elements inside the component.
* @type {ChartPassThroughOptions}
*/
pt?: ChartPassThroughOptions;
pt?: PTOptions<ChartPassThroughOptions>;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false

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

@ -9,7 +9,7 @@
*/
import { InputHTMLAttributes, VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
export declare type CheckboxPassThroughOptionType = CheckboxPassThroughAttributes | ((options: CheckboxPassThroughMethodOptions) => CheckboxPassThroughAttributes | string) | string | null | undefined;
@ -151,7 +151,7 @@ export interface CheckboxProps {
* Used to pass attributes to DOM elements inside the component.
* @type {CheckboxPassThroughOptions}
*/
pt?: CheckboxPassThroughOptions;
pt?: PTOptions<CheckboxPassThroughOptions>;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false

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

@ -9,7 +9,7 @@
*/
import { VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
export declare type ChipPassThroughOptionType = ChipPassThroughAttributes | ((options: ChipPassThroughMethodOptions) => ChipPassThroughAttributes | string) | string | null | undefined;
@ -103,7 +103,7 @@ export interface ChipProps {
* Used to pass attributes to DOM elements inside the component.
* @type {ChipPassThroughOptions}
*/
pt?: ChipPassThroughOptions;
pt?: PTOptions<ChipPassThroughOptions>;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false
@ -130,12 +130,14 @@ export interface ChipSlots {
removeicon(scope: {
/**
* Remove icon click event
* @param {Event} event - Browser event
*/
onClick(): void;
onClick: (event: Event) => void;
/**
* Remove icon keydown event
* @param {Event} event - Browser event
*/
onKeydown(): void;
onKeydown: (event: Event) => void;
}): VNode[];
}

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

@ -9,7 +9,7 @@
*/
import { InputHTMLAttributes, VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
export declare type ChipsPassThroughOptionType = ChipsPassThroughAttributes | ((options: ChipsPassThroughMethodOptions) => ChipsPassThroughAttributes | string) | string | null | undefined;
@ -182,7 +182,7 @@ export interface ChipsProps {
* Used to pass attributes to DOM elements inside the component.
* @type {ChipsPassThroughOptions}
*/
pt?: ChipsPassThroughOptions;
pt?: PTOptions<ChipsPassThroughOptions>;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false
@ -209,9 +209,18 @@ export interface ChipsSlots {
*/
removetokenicon(scope: {
/**
* Remove icon click event
* Style class of the icon.
*/
onClick(): void;
class: string;
/**
* Index of the token.
*/
index: number;
/**
* Remove token icon function.
* @param {Event} event - Browser event
*/
onClick: (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')" :onClick="(event) => removeItem(event, i)">
<slot name="removetokenicon" :class="cx('removeTokenIcon')" :index="i" :onClick="(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>

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

@ -9,7 +9,7 @@
*/
import { TransitionProps } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
export declare type ColorPickerPassThroughOptionType = ColorPickerPassThroughAttributes | ((options: ColorPickerPassThroughMethodOptions) => ColorPickerPassThroughAttributes | string) | string | null | undefined;
@ -164,7 +164,7 @@ export interface ColorPickerProps {
* Used to pass attributes to DOM elements inside the component.
* @type {ColorPickerPassThroughOptions}
*/
pt?: ColorPickerPassThroughOptions;
pt?: PTOptions<ColorPickerPassThroughOptions>;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false

41
components/lib/colorpicker/ColorPicker.vue
View File

@ -30,45 +30,6 @@ export default {
name: 'ColorPicker',
extends: BaseColorPicker,
emits: ['update:modelValue', 'change', 'show', 'hide'],
props: {
modelValue: {
type: null,
default: null
},
defaultColor: {
type: null,
default: 'ff0000'
},
inline: {
type: Boolean,
default: false
},
format: {
type: String,
default: 'hex'
},
disabled: {
type: Boolean,
default: false
},
tabindex: {
type: String,
default: null
},
autoZIndex: {
type: Boolean,
default: true
},
baseZIndex: {
type: Number,
default: 0
},
appendTo: {
type: String,
default: 'body'
},
panelClass: null
},
data() {
return {
overlayVisible: false
@ -384,7 +345,7 @@ export default {
this.bindResizeListener();
if (this.autoZIndex) {
ZIndexUtils.set('overlay', el, this.$primevue.config.zIndex.overlay);
ZIndexUtils.set('overlay', el, this.baseZIndex, this.$primevue.config.zIndex.overlay);
}
this.$emit('show');

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

@ -14,7 +14,7 @@ import { ComponentHooks } from '../basecomponent';
import { ButtonPassThroughOptionType } from '../button';
import { DataTablePassThroughOptions } from '../datatable';
import { DropdownPassThroughOptionType } from '../dropdown';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
import { VirtualScrollerLoaderOptions } from '../virtualscroller';
export declare type ColumnPassThroughOptionType = ColumnPassThroughAttributes | ((options: ColumnPassThroughMethodOptions) => ColumnPassThroughAttributes | string) | string | null | undefined;
@ -567,7 +567,7 @@ export interface ColumnProps {
* Used to pass attributes to DOM elements inside the component.
* @type {ColumnPassThroughOptions}
*/
pt?: ColumnPassThroughOptions;
pt?: PTOptions<ColumnPassThroughOptions>;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false
@ -679,8 +679,9 @@ export interface ColumnSlots {
frozenRow: boolean;
/**
* Callback function
* @param {Event} event - Browser event
*/
editorInitCallback(): void;
editorInitCallback: (event: Event) => void;
}): VNode[];
/**
* Custom header template.
@ -729,12 +730,14 @@ export interface ColumnSlots {
frozenRow: boolean;
/**
* Callback function
* @param {Event} event - Browser event
*/
editorSaveCallback(): void;
editorSaveCallback: (event: Event) => void;
/**
* Callback function
* @param {Event} event - Browser event
*/
editorCancelCallback(): void;
editorCancelCallback: (event: Event) => void;
}): VNode[];
/**
* Custom filter template.
@ -753,7 +756,7 @@ export interface ColumnSlots {
/**
* Callback function
*/
filterCallback(): void;
filterCallback: () => void;
}): VNode[];
/**
* Custom filter header template.
@ -772,7 +775,7 @@ export interface ColumnSlots {
/**
* Callback function
*/
filterCallback(): void;
filterCallback: () => void;
}): VNode[];
/**
* Custom filter footer template.
@ -791,7 +794,7 @@ export interface ColumnSlots {
/**
* Callback function
*/
filterCallback(): void;
filterCallback: () => void;
}): VNode[];
/**
* Custom filter clear template.
@ -810,7 +813,7 @@ export interface ColumnSlots {
/**
* Callback function
*/
filterCallback(): void;
filterCallback: () => void;
}): VNode[];
/**
* Custom filter apply template.
@ -829,7 +832,7 @@ export interface ColumnSlots {
/**
* Callback function
*/
filterCallback(): void;
filterCallback: () => void;
}): VNode[];
/**
* Custom loading template.

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

@ -7,7 +7,7 @@
*/
import { ComponentHooks } from '../basecomponent';
import { DataTablePassThroughOptions } from '../datatable';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
export declare type ColumnGroupPassThroughOptionType = ColumnGroupPassThroughAttributes | ((options: ColumnGroupPassThroughMethodOptions) => ColumnGroupPassThroughAttributes | string) | string | null | undefined;
@ -56,7 +56,7 @@ export interface ColumnGroupProps {
* Used to pass attributes to DOM elements inside the component.
* @type {ColumnGroupPassThroughOptions}
*/
pt?: ColumnGroupPassThroughOptions;
pt?: PTOptions<ColumnGroupPassThroughOptions>;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false

9
components/lib/config/PrimeVue.d.ts vendored
View File

@ -92,7 +92,7 @@ import { TreePassThroughOptions } from '../tree';
import { TreeSelectPassThroughOptions } from '../treeselect';
import { TreeTablePassThroughOptions } from '../treetable';
import { TriStateCheckboxPassThroughOptions } from '../tristatecheckbox';
import { DefaultPTOptions } from '../ts-helpers';
import { DefaultPTOptions, PTOptions } from '../ts-helpers';
import { VirtualScrollerPassThroughOptions } from '../virtualscroller';
export interface PrimeVueConfiguration {
@ -101,8 +101,9 @@ export interface PrimeVueConfiguration {
locale?: PrimeVueLocaleOptions;
filterMatchModeOptions?: any;
zIndex?: PrimeVueZIndexOptions;
pt?: PrimeVuePTOptions;
pt?: PTOptions<PrimeVuePTOptions>;
unstyled?: boolean;
csp?: PrimeVueCSPOptions;
}
export interface PrimeVueZIndexOptions {
@ -112,6 +113,10 @@ export interface PrimeVueZIndexOptions {
tooltip?: number;
}
export interface PrimeVueCSPOptions {
nonce?: string;
}
export interface PrimeVuePTOptions {
accordion?: DefaultPTOptions<AccordionPassThroughOptions>;
accordiontab?: DefaultPTOptions<AccordionTabPassThroughOptions>;

5
components/lib/config/PrimeVue.js
View File

@ -132,7 +132,10 @@ export const defaultOptions = {
tooltip: 1100
},
pt: undefined,
unstyled: false
unstyled: false,
csp: {
nonce: undefined
}
};
const PrimeVueSymbol = Symbol();

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

@ -11,7 +11,7 @@ import { VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { ButtonPassThroughOptions } from '../button';
import { ConfirmationOptions } from '../confirmationoptions';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
export declare type ConfirmDialogPassThroughOptionType = ConfirmDialogPassThroughAttributes | ((options: ConfirmDialogPassThroughMethodOptions) => ConfirmDialogPassThroughAttributes | string) | string | null | undefined;
@ -152,7 +152,7 @@ export interface ConfirmDialogProps {
* Used to pass attributes to DOM elements inside the component.
* @type {ConfirmDialogPassThroughOptions}
*/
pt?: ConfirmDialogPassThroughOptions;
pt?: PTOptions<ConfirmDialogPassThroughOptions>;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false
@ -176,6 +176,7 @@ export interface ConfirmDialogSlots {
}): VNode[];
/**
* Custom icon template.
* @param {Object} scope - icon slot's params.
*/
icon(scope: {
/**

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

@ -11,7 +11,7 @@ import { TransitionProps, VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { ButtonPassThroughOptions } from '../button';
import { ConfirmationOptions } from '../confirmationoptions';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
export declare type ConfirmPopupPassThroughOptionType = ConfirmPopupPassThroughAttributes | ((options: ConfirmPopupPassThroughMethodOptions) => ConfirmPopupPassThroughAttributes | string) | string | null | undefined;
@ -106,7 +106,7 @@ export interface ConfirmPopupProps {
* Used to pass attributes to DOM elements inside the component.
* @type {ConfirmPopupPassThroughOptions}
*/
pt?: ConfirmPopupPassThroughOptions;
pt?: PTOptions<ConfirmPopupPassThroughOptions>;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false
@ -130,6 +130,7 @@ export interface ConfirmPopupSlots {
}): VNode[];
/**
* Custom icon template.
* @param {Object} scope - icon slot's params.
*/
icon(scope: {
/**

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

@ -11,7 +11,7 @@
import { TransitionProps, VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { MenuItem } from '../menuitem';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
export declare type ContextMenuPassThroughOptionType = ContextMenuPassThroughAttributes | ((options: ContextMenuPassThroughMethodOptions) => ContextMenuPassThroughAttributes | string) | string | null | undefined;
@ -216,7 +216,7 @@ export interface ContextMenuProps {
* Used to pass attributes to DOM elements inside the component.
* @type {ContextMenuPassThroughOptions}
*/
pt?: ContextMenuPassThroughOptions;
pt?: PTOptions<ContextMenuPassThroughOptions>;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false
@ -254,6 +254,7 @@ export interface ContextMenuSlots {
}): VNode[];
/**
* Custom submenu icon template.
* @param {Object} scope - submenuicon slot's params.
*/
submenuicon(scope: {
/**

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

@ -281,7 +281,7 @@ const classes = {
thead: 'p-datatable-thead',
// headercell
headerCell: ({ instance, props, column }) =>
column && !instance.columnProp(column, 'hidden') && (props.rowGroupMode !== 'subheader' || props.groupRowsBy !== columnProp(column, 'field'))
column && !instance.columnProp(column, 'hidden') && (props.rowGroupMode !== 'subheader' || props.groupRowsBy !== instance.columnProp(column, 'field'))
? [
'p-filter-column',
{

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

@ -314,6 +314,7 @@ export default {
if (this.editMode === 'cell') {
switch (event.code) {
case 'Enter':
case 'NumpadEnter':
this.completeEdit(event, 'enter');
break;

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

@ -13,7 +13,7 @@ import { ColumnPassThroughOptionType } from '../column';
import { ColumnGroupPassThroughOptionType } from '../columngroup';
import { PaginatorPassThroughOptionType } from '../paginator';
import { RowPassThroughOptionType } from '../row';
import { ClassComponent, GlobalComponentConstructor, Nullable } from '../ts-helpers';
import { ClassComponent, GlobalComponentConstructor, Nullable, PTOptions } from '../ts-helpers';
import { VirtualScrollerPassThroughOptionType, VirtualScrollerProps } from '../virtualscroller';
export declare type DataTablePassThroughOptionType = DataTablePassThroughAttributes | ((options: DataTablePassThroughMethodOptions) => DataTablePassThroughAttributes | string) | string | null | undefined;
@ -1069,7 +1069,7 @@ export interface DataTableProps {
* Used to pass attributes to DOM elements inside the component.
* @type {DataTablePassThroughOptions}
*/
pt?: DataTablePassThroughOptions;
pt?: PTOptions<DataTablePassThroughOptions>;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false
@ -1103,6 +1103,7 @@ export interface DataTableSlots {
empty(): VNode[];
/**
* Custom group header template.
* @param {Object} scope - group header slot's params.
*/
groupheader(scope: {
/**
@ -1130,6 +1131,7 @@ export interface DataTableSlots {
}): VNode[];
/**
* Custom loading template.
* @param {Object} scope - loading slot's params.
*/
loading(): VNode[];
/**

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

@ -466,7 +466,8 @@ export default {
DomHandler.getAttribute(targetNode, 'data-pc-section') === 'headercontent' ||
DomHandler.getAttribute(targetNode, 'data-pc-section') === 'sorticon' ||
DomHandler.getAttribute(targetNode.parentElement, 'data-pc-section') === 'sorticon' ||
DomHandler.getAttribute(targetNode.parentElement.parentElement, 'data-pc-section') === 'sorticon'
DomHandler.getAttribute(targetNode.parentElement.parentElement, 'data-pc-section') === 'sorticon' ||
(targetNode.closest('[data-p-sortable-column="true"]') && !targetNode.closest('[data-pc-section="filtermenubutton"]'))
) {
DomHandler.clearSelection();
@ -515,17 +516,24 @@ export default {
}
let data = [...value];
let resolvedFieldDatas = new Map();
for (let item of data) {
resolvedFieldDatas.set(item, ObjectUtils.resolveFieldData(item, this.d_sortField));
}
const comparer = new Intl.Collator(undefined, { numeric: true }).compare;
data.sort((data1, data2) => {
let value1 = ObjectUtils.resolveFieldData(data1, this.d_sortField);
let value2 = ObjectUtils.resolveFieldData(data2, this.d_sortField);
let value1 = resolvedFieldDatas.get(data1);
let value2 = resolvedFieldDatas.get(data2);
let result = null;
if (value1 == null && value2 != null) result = -1;
else if (value1 != null && value2 == null) result = 1;
else if (value1 == null && value2 == null) result = 0;
else if (typeof value1 === 'string' && typeof value2 === 'string') result = value1.localeCompare(value2, undefined, { numeric: true });
else if (typeof value1 === 'string' && typeof value2 === 'string') result = comparer(value1, value2);
else result = value1 < value2 ? -1 : value1 > value2 ? 1 : 0;
return this.d_sortOrder * result;
@ -561,7 +569,9 @@ export default {
if (typeof value1 === 'string' || value1 instanceof String) {
if (value1.localeCompare && value1 !== value2) {
return this.d_multiSortMeta[index].order * value1.localeCompare(value2, undefined, { numeric: true });
const comparer = new Intl.Collator(undefined, { numeric: true }).compare;
return this.d_multiSortMeta[index].order * comparer(value1, value2);
}
} else {
result = value1 < value2 ? -1 : 1;
@ -585,6 +595,26 @@ export default {
this.d_multiSortMeta = [...this.d_multiSortMeta];
},
getActiveFilters(filters) {
const removeEmptyFilters = ([key, value]) => {
if (value.constraints) {
const filteredConstraints = value.constraints.filter((constraint) => constraint.value !== null);
if (filteredConstraints.length > 0) {
return [key, { ...value, constraints: filteredConstraints }];
}
} else if (value.value !== null) {
return [key, value];
}
return undefined;
};
const filterValidEntries = (entry) => entry !== undefined;
const entries = Object.entries(filters).map(removeEmptyFilters).filter(filterValidEntries);
return Object.fromEntries(entries);
},
filter(data) {
if (!data) {
return;
@ -592,9 +622,10 @@ export default {
this.clearEditingMetaData();
let activeFilters = this.getActiveFilters(this.filters);
let globalFilterFieldsArray;
if (this.filters['global']) {
if (activeFilters['global']) {
globalFilterFieldsArray = this.globalFilterFields || this.columns.map((col) => this.columnProp(col, 'filterField') || this.columnProp(col, 'field'));
}
@ -605,11 +636,11 @@ export default {
let globalMatch = false;
let localFiltered = false;
for (let prop in this.filters) {
if (Object.prototype.hasOwnProperty.call(this.filters, prop) && prop !== 'global') {
for (let prop in activeFilters) {
if (Object.prototype.hasOwnProperty.call(activeFilters, prop) && prop !== 'global') {
localFiltered = true;
let filterField = prop;
let filterMeta = this.filters[filterField];
let filterMeta = activeFilters[filterField];
if (filterMeta.operator) {
for (let filterConstraint of filterMeta.constraints) {
@ -629,11 +660,11 @@ export default {
}
}
if (this.filters['global'] && !globalMatch && globalFilterFieldsArray) {
if (localMatch && activeFilters['global'] && !globalMatch && globalFilterFieldsArray) {
for (let j = 0; j < globalFilterFieldsArray.length; j++) {
let globalFilterField = globalFilterFieldsArray[j];
globalMatch = FilterService.filters[this.filters['global'].matchMode || FilterMatchMode.CONTAINS](ObjectUtils.resolveFieldData(data[i], globalFilterField), this.filters['global'].value, this.filterLocale);
globalMatch = FilterService.filters[activeFilters['global'].matchMode || FilterMatchMode.CONTAINS](ObjectUtils.resolveFieldData(data[i], globalFilterField), activeFilters['global'].value, this.filterLocale);
if (globalMatch) {
break;
@ -643,7 +674,7 @@ export default {
let matches;
if (this.filters['global']) {
if (activeFilters['global']) {
matches = localFiltered ? localFiltered && localMatch && globalMatch : globalMatch;
} else {
matches = localFiltered && localMatch;
@ -654,7 +685,7 @@ export default {
}
}
if (filteredValue.length === this.value.length) {
if (filteredValue.length === this.value.length || Object.keys(activeFilters).length == 0) {
filteredValue = data;
}
@ -1228,6 +1259,8 @@ export default {
!!el && (el.style.width = el.style.minWidth = tableWidth);
};
// Reasoning: resize table cells before updating the table width so that it can use existing computed cell widths and adjust only the one column.
this.resizeTableCells(newColumnWidth);
updateTableWidth(this.$refs.table);
if (!this.virtualScrollerDisabled) {
@ -1237,8 +1270,6 @@ export default {
updateTableWidth(body);
updateTableWidth(frozenBody);
}
this.resizeTableCells(newColumnWidth);
}
this.$emit('column-resize-end', {
@ -1851,12 +1882,14 @@ export default {
createStyleElement() {
this.styleElement = document.createElement('style');
this.styleElement.type = 'text/css';
DomHandler.setAttribute(this.styleElement, 'nonce', this.$primevue?.config?.csp?.nonce);
document.head.appendChild(this.styleElement);
},
createResponsiveStyle() {
if (!this.responsiveStyleElement) {
this.responsiveStyleElement = document.createElement('style');
this.responsiveStyleElement.type = 'text/css';
DomHandler.setAttribute(this.responsiveStyleElement, 'nonce', this.$primevue?.config?.csp?.nonce);
document.head.appendChild(this.responsiveStyleElement);
let tableSelector = `.p-datatable-wrapper ${this.virtualScrollerDisabled ? '' : '> .p-virtualscroller'} > .p-datatable-table`;

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

@ -349,7 +349,7 @@ export default {
getRowIndex(index) {
const getItemOptions = this.getVirtualScrollerProp('getItemOptions');
return getItemOptions ? getItemOptions(index).index : this.first + index;
return getItemOptions ? getItemOptions(index).index : index;
},
getRowStyle(rowData) {
if (this.rowStyle) {

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

@ -10,7 +10,7 @@
import { VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { PaginatorPassThroughOptionType } from '../paginator';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
export declare type DataViewPassThroughOptionType = DataViewPassThroughAttributes | ((options: DataViewPassThroughMethodOptions) => DataViewPassThroughAttributes | string) | string | null | undefined;
@ -212,7 +212,7 @@ export interface DataViewProps {
* Used to pass attributes to DOM elements inside the component.
* @type {DataViewPassThroughOptions}
*/
pt?: DataViewPassThroughOptions;
pt?: PTOptions<DataViewPassThroughOptions>;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false

3
components/lib/dataview/DataView.vue
View File

@ -110,6 +110,7 @@ export default {
sort() {
if (this.value) {
const value = [...this.value];
const comparer = new Intl.Collator(undefined, { numeric: true }).compare;
value.sort((data1, data2) => {
let value1 = ObjectUtils.resolveFieldData(data1, this.sortField);
@ -119,7 +120,7 @@ export default {
if (value1 == null && value2 != null) result = -1;
else if (value1 != null && value2 == null) result = 1;
else if (value1 == null && value2 == null) result = 0;
else if (typeof value1 === 'string' && typeof value2 === 'string') result = value1.localeCompare(value2, undefined, { numeric: true });
else if (typeof value1 === 'string' && typeof value2 === 'string') result = comparer(value1, value2);
else result = value1 < value2 ? -1 : value1 > value2 ? 1 : 0;
return this.sortOrder * result;

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

@ -9,7 +9,7 @@
*/
import { VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
export declare type DataViewLayoutOptionsPassThroughOptionType =
| DataViewLayoutOptionsPassThroughAttributes
@ -94,7 +94,7 @@ export interface DataViewLayoutOptionsProps {
* Used to pass attributes to DOM elements inside the component.
* @type {DataViewLayoutOptionsPassThroughOptions}
*/
pt?: DataViewLayoutOptionsPassThroughOptions;
pt?: PTOptions<DataViewLayoutOptionsPassThroughOptions>;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false

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

@ -9,7 +9,7 @@
*/
import { VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
export declare type DeferredContentPassThroughOptionType = DeferredContentPassThroughAttributes | ((options: DeferredContentPassThroughMethodOptions) => DeferredContentPassThroughAttributes | string) | string | null | undefined;
@ -64,7 +64,7 @@ export interface DeferredContentProps {
* Used to pass attributes to DOM elements inside the component.
* @type {DeferredContentPassThroughOptions}
*/
pt?: DeferredContentPassThroughOptions;
pt?: PTOptions<DeferredContentPassThroughOptions>;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false

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

@ -9,7 +9,7 @@
*/
import { HTMLAttributes, TransitionProps, VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
export declare type DialogPassThroughOptionType = DialogPassThroughAttributes | ((options: DialogPassThroughMethodOptions) => DialogPassThroughAttributes | string) | string | null | undefined;
@ -260,7 +260,7 @@ export interface DialogProps {
* Used to pass attributes to DOM elements inside the component.
* @type {DialogPassThroughOptions}
*/
pt?: DialogPassThroughOptions;
pt?: PTOptions<DialogPassThroughOptions>;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false

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

@ -163,7 +163,7 @@ export default {
},
focus() {
const findFocusableElement = (container) => {
return container.querySelector('[autofocus]');
return container && container.querySelector('[autofocus]');
};
let focusTarget = this.$slots.footer && findFocusableElement(this.footerContainer);
@ -259,6 +259,7 @@ export default {
if (!this.styleElement && !this.isUnstyled) {
this.styleElement = document.createElement('style');
this.styleElement.type = 'text/css';
DomHandler.setAttribute(this.styleElement, 'nonce', this.$primevue?.config?.csp?.nonce);
document.head.appendChild(this.styleElement);
let innerHTML = '';
@ -322,7 +323,7 @@ export default {
let leftPos = offset.left + deltaX;
let topPos = offset.top + deltaY;
let viewport = DomHandler.getViewport();
let containerComputedStyle = getComputedStyle(this.container)
let containerComputedStyle = getComputedStyle(this.container);
let marginLeft = parseFloat(containerComputedStyle.marginLeft);
let marginTop = parseFloat(containerComputedStyle.marginTop);
@ -331,18 +332,17 @@ export default {
if (this.keepInViewport) {
if (leftPos >= this.minX && leftPos + width < viewport.width) {
this.lastPageX = event.pageX;
this.container.style.left = (leftPos - marginLeft) + 'px';
this.container.style.left = leftPos - marginLeft + 'px';
}
if (topPos >= this.minY && topPos + height < viewport.height) {
this.lastPageY = event.pageY;
this.container.style.top = (topPos - marginTop) + 'px';
}
this.lastPageY = event.pageY;
this.container.style.top = topPos - marginTop + 'px';
} else {
this.lastPageX = event.pageX;
this.container.style.left = (leftPos - marginLeft) + 'px';
this.container.style.left = leftPos - marginLeft + 'px';
this.lastPageY = event.pageY;
this.container.style.top = (topPos - marginTop) + 'px';
this.container.style.top = topPos - marginTop + 'px';
}
}
};

4
components/lib/divider/BaseDivider.vue
View File

@ -68,8 +68,8 @@ const styles = `
/* Position */
const inlineStyles = {
root: ({ props }) => ({
justifyContent: props.layout === 'horizontal' ? (props.align == 'center' || props.align == null ? 'center' : props.align === 'left' ? 'flex-start' : props.align === 'right' ? 'flex-end' : null) : null,
alignItems: props.vertical === 'vertical' ? (props.align == 'center' || props.align == null ? 'center' : props.align === 'top' ? 'flex-start' : props.align === 'bottom' ? 'flex-end' : null) : null
justifyContent: props.layout === 'horizontal' ? (props.align === 'center' || props.align === null ? 'center' : props.align === 'left' ? 'flex-start' : props.align === 'right' ? 'flex-end' : null) : null,
alignItems: props.layout === 'vertical' ? (props.align === 'center' || props.align === null ? 'center' : props.align === 'top' ? 'flex-start' : props.align === 'bottom' ? 'flex-end' : null) : null
})
};

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

@ -9,7 +9,7 @@
*/
import { VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
export declare type DividerPassThroughOptionType = DividerPassThroughAttributes | ((options: DividerPassThroughMethodOptions) => DividerPassThroughAttributes | string) | string | null | undefined;
@ -70,7 +70,7 @@ export interface DividerProps {
* Used to pass attributes to DOM elements inside the component.
* @type {DividerPassThroughOptions}
*/
pt?: DividerPassThroughOptions;
pt?: PTOptions<DividerPassThroughOptions>;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false

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

@ -10,7 +10,7 @@
import { VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { MenuItem } from '../menuitem';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
export declare type DockPassThroughOptionType = DockPassThroughAttributes | ((options: DockPassThroughMethodOptions) => DockPassThroughAttributes | string) | string | null | undefined;
@ -185,7 +185,7 @@ export interface DockProps {
* Used to pass attributes to DOM elements inside the component.
* @type {DockPassThroughOptions}
*/
pt?: DockPassThroughOptions;
pt?: PTOptions<DockPassThroughOptions>;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false

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

@ -9,7 +9,7 @@
*/
import { HTMLAttributes, InputHTMLAttributes, TransitionProps, VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
import { VirtualScrollerItemOptions, VirtualScrollerPassThroughOptionType, VirtualScrollerProps } from '../virtualscroller';
export declare type DropdownPassThroughOptionType = DropdownPassThroughAttributes | ((options: DropdownPassThroughMethodOptions) => DropdownPassThroughAttributes | string) | string | null | undefined;
@ -409,7 +409,7 @@ export interface DropdownProps {
emptyFilterMessage?: string | undefined;
/**
* Text to display when there are no options available. Defaults to value from PrimeVue locale configuration.
* @defaultValue No results foun
* @defaultValue No results found
*/
emptyMessage?: string | undefined;
/**
@ -428,7 +428,7 @@ export interface DropdownProps {
* Used to pass attributes to DOM elements inside the component.
* @type {DropdownPassThroughOptions}
*/
pt?: DropdownPassThroughOptions;
pt?: PTOptions<DropdownPassThroughOptions>;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false
@ -540,13 +540,13 @@ export interface DropdownSlots {
* Referance of the content
* @param {HTMLElement} el - Element of 'ref' property
*/
contentRef(el: any): void;
contentRef: (el: any) => void;
/**
* Options of the items
* @param {number} index - Rendered index
* @return {@link VirtualScroller.VirtualScrollerItemOptions}
* @return {@link VirtualScrollerItemOptions}
*/
getItemOptions(index: number): VirtualScrollerItemOptions;
getItemOptions: (index: number) => VirtualScrollerItemOptions;
}): VNode[];
/**
* Custom loader template.
@ -564,9 +564,14 @@ export interface DropdownSlots {
*/
clearicon(scope: {
/**
* Clear icon click function.
* Style class of the clear icon
*/
onClick: void;
class: any;
/**
* Clear icon click function.
* @param {Event} event - Browser event
*/
onClick: (event: Event) => void;
}): VNode[];
/**
* Custom dropdown icon template.
@ -574,7 +579,7 @@ export interface DropdownSlots {
*/
dropdownicon(scope: {
/**
* Style class of the component
* Style class of the dropdown icon
*/
class: any;
}): VNode[];
@ -584,14 +589,20 @@ export interface DropdownSlots {
*/
loadingicon(scope: {
/**
* Style class of the component
* Style class of the loading icon
*/
class: any;
}): VNode[];
/**
* Custom filter icon template.
* @param {Object} scope - filter icon slot's params.
*/
filtericon(): VNode[];
filtericon(scope: {
/**
* Style class of the filter icon
*/
class: any;
}): VNode[];
}
/**

8
components/lib/dropdown/Dropdown.spec.js
View File

@ -89,6 +89,14 @@ describe('clear checks', () => {
it('should have correct icon', () => {
expect(wrapper.find('.p-dropdown-clear-icon').classes()).toContain('pi-discord');
});
it('should clear with delete key', async () => {
const updateModelSpy = vi.spyOn(wrapper.vm, 'updateModel');
await wrapper.find('.p-dropdown-label.p-inputtext').trigger('keydown', { code: 'Delete' });
expect(updateModelSpy).toHaveBeenCalledOnce();
expect(updateModelSpy).toHaveBeenCalledWith(expect.any(KeyboardEvent), null);
});
});
describe('editable checks', () => {

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

@ -339,6 +339,9 @@ export default {
this.onArrowLeftKey(event, this.editable);
break;
case 'Delete':
this.onDeleteKey(event);
case 'Home':
this.onHomeKey(event, this.editable);
break;
@ -405,7 +408,7 @@ export default {
return;
}
if (event.target.tagName === 'INPUT' || event.target.getAttribute('data-pc-section') === 'clearicon' || event.target.tagName === 'path') {
if (event.target.tagName === 'INPUT' || event.target.getAttribute('data-pc-section') === 'clearicon' || event.target.closest('[data-pc-section="clearicon"]')) {
return;
} else if (!this.overlay || !this.overlay.contains(event.target)) {
this.overlayVisible ? this.hide(true) : this.show(true);
@ -507,6 +510,12 @@ export default {
break;
}
},
onDeleteKey(event) {
if (this.showClear) {
this.updateModel(event, null);
event.preventDefault();
}
},
onArrowDownKey(event) {
const optionIndex = this.focusedOptionIndex !== -1 ? this.findNextOptionIndex(this.focusedOptionIndex) : this.findFirstFocusedOptionIndex();

2
components/lib/editor/BaseEditor.vue
View File

@ -956,7 +956,7 @@ const classes = {
content: 'p-editor-content'
};
const { load: loadStyle } = useStyle(styles, { name: 'editor' });
const { load: loadStyle } = useStyle(styles, { name: 'editor', manual: true });
export default {
name: 'BaseEditor',

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

@ -9,7 +9,7 @@
*/
import { VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
export declare type EditorPassThroughOptionType = EditorPassThroughAttributes | ((options: EditorPassThroughMethodOptions) => EditorPassThroughAttributes | string) | string | null | undefined;
/**
@ -219,7 +219,7 @@ export interface EditorProps {
* Used to pass attributes to DOM elements inside the component.
* @type {EditorPassThroughOptions}
*/
pt?: EditorPassThroughOptions;
pt?: PTOptions<EditorPassThroughOptions>;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false

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

@ -9,7 +9,7 @@
*/
import { AnchorHTMLAttributes, TransitionProps, VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
export declare type FieldsetPassThroughOptionType = FieldsetPassThroughAttributes | ((options: FieldsetPassThroughMethodOptions) => FieldsetPassThroughAttributes | string) | string | null | undefined;
@ -128,7 +128,7 @@ export interface FieldsetProps {
* Used to pass attributes to DOM elements inside the component.
* @type {FieldsetPassThroughOptions}
*/
pt?: FieldsetPassThroughOptions;
pt?: PTOptions<FieldsetPassThroughOptions>;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false

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

@ -11,7 +11,7 @@ import { VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { ButtonPassThroughOptions } from '../button';
import { MessagePassThroughOptions } from '../message';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
export declare type FileUploadPassThroughOptionType = FileUploadPassThroughAttributes | ((options: FileUploadPassThroughMethodOptions) => FileUploadPassThroughAttributes | string) | string | null | undefined;
@ -413,7 +413,7 @@ export interface FileUploadProps {
* Used to pass attributes to DOM elements inside the component.
* @type {FileUploadPassThroughOptions}
*/
pt?: FileUploadPassThroughOptions;
pt?: PTOptions<FileUploadPassThroughOptions>;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false
@ -427,6 +427,7 @@ export interface FileUploadProps {
export interface FileUploadSlots {
/**
* Custom header content template.
* @param {Object} scope - header slot's params.
*/
header(scope: {
/**
@ -440,18 +441,19 @@ export interface FileUploadSlots {
/**
* Choose function
*/
chooseCallback(): void;
chooseCallback: () => void;
/**
* Upload function
*/
uploadCallback(): void;
uploadCallback: () => void;
/**
* Clear function
*/
clearCallback(): void;
clearCallback: () => void;
}): VNode[];
/**
* Custom uploaded content template.
* @param {Object} scope - content slot's params.
*/
content(scope: {
/**
@ -464,12 +466,14 @@ export interface FileUploadSlots {
uploadedFiles: File[];
/**
* Function to remove an uploaded file.
* @param {number} index - Index of the uploaded file
*/
removeUploadedFileCallback(index: number): void;
removeUploadedFileCallback: (index: number) => void;
/**
* Function to remove a file.
* @param {number} index - Index of the removed file
*/
removeFileCallback(index: number): void;
removeFileCallback: (index: number) => void;
/**
* Uploaded progress as number.
*/
@ -497,6 +501,7 @@ export interface FileUploadSlots {
cancelicon(): VNode[];
/**
* Custom remove icon template for each file.
* @param {Object} scope - fileremoveicon slot's params.
*/
fileremoveicon(scope: {
/**

4
components/lib/fileupload/FileUpload.vue
View File

@ -60,6 +60,7 @@ import UploadIcon from 'primevue/icons/upload';
import Message from 'primevue/message';
import ProgressBar from 'primevue/progressbar';
import Ripple from 'primevue/ripple';
import { DomHandler } from 'primevue/utils';
import BaseFileUpload from './BaseFileUpload.vue';
import FileContent from './FileContent.vue';
@ -265,6 +266,7 @@ export default {
},
onDragOver(event) {
if (!this.disabled) {
!this.isUnstyled && (this.$refs.content, 'p-fileupload-highlight');
this.$refs.content.setAttribute('data-p-highlight', true);
event.stopPropagation();
event.preventDefault();
@ -272,11 +274,13 @@ export default {
},
onDragLeave() {
if (!this.disabled) {
!this.isUnstyled && DomHandler.removeClass(this.$refs.content, 'p-fileupload-highlight');
this.$refs.content.setAttribute('data-p-highlight', false);
}
},
onDrop(event) {
if (!this.disabled) {
!this.isUnstyled && DomHandler.removeClass(this.$refs.content, 'p-fileupload-highlight');
this.$refs.content.setAttribute('data-p-highlight', false);
event.stopPropagation();
event.preventDefault();

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

@ -8,6 +8,7 @@
*/
import { DirectiveBinding, ObjectDirective } from 'vue';
import { DirectiveHooks } from '../basedirective';
import { PTOptions } from '../ts-helpers';
export declare type FocusTrapDirectivePassThroughOptionType = FocusTrapDirectivePassThroughAttributes | null | undefined;
@ -29,7 +30,7 @@ export interface FocusTrapOptions {
* Used to pass attributes to DOM elements inside the component.
* @type {FocusTrapDirectivePassThroughOptions}
*/
pt?: FocusTrapDirectivePassThroughOptions;
pt?: PTOptions<FocusTrapDirectivePassThroughOptions>;
}
/**

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

@ -9,7 +9,7 @@
*/
import { ButtonHTMLAttributes, HTMLAttributes, TransitionProps, VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
export declare type GalleriaPassThroughOptionType = GalleriaPassThroughAttributes | ((options: GalleriaPassThroughMethodOptions) => GalleriaPassThroughAttributes | string) | string | null | undefined;
@ -377,7 +377,7 @@ export interface GalleriaProps {
* Used to pass attributes to DOM elements inside the component.
* @type {GalleriaPassThroughOptions}
*/
pt?: GalleriaPassThroughOptions;
pt?: PTOptions<GalleriaPassThroughOptions>;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false

4
components/lib/galleria/GalleriaItem.vue
View File

@ -1,13 +1,13 @@
<template>
<div :class="cx('itemWrapper')" v-bind="ptm('itemWrapper')">
<div :class="cx('itemContainer')" v-bind="ptm('itemContainer')">
<button v-if="showItemNavigators" v-ripple type="button" :class="cx('previousItemButton')" @click="navBackward($event)" :disabled="isNavBackwardDisabled()" v-bind="ptm('previousItemButton')">
<button v-if="showItemNavigators" v-ripple type="button" :class="cx('previousItemButton')" @click="navBackward($event)" :disabled="isNavBackwardDisabled()" v-bind="ptm('previousItemButton')" data-pc-group-section="itemnavigator">
<component :is="templates.previousitemicon || 'ChevronLeftIcon'" :class="cx('previousItemIcon')" v-bind="ptm('previousItemIcon')" />
</button>
<div :id="id + '_item_' + activeIndex" :class="cx('item')" role="group" :aria-label="ariaSlideNumber(activeIndex + 1)" :aria-roledescription="ariaSlideLabel" v-bind="ptm('item')">
<component v-if="templates.item" :is="templates.item" :item="activeItem" />
</div>
<button v-if="showItemNavigators" v-ripple type="button" :class="cx('nextItemButton')" @click="navForward($event)" :disabled="isNavForwardDisabled()" v-bind="ptm('nextItemButton')">
<button v-if="showItemNavigators" v-ripple type="button" :class="cx('nextItemButton')" @click="navForward($event)" :disabled="isNavForwardDisabled()" v-bind="ptm('nextItemButton')" data-pc-group-section="itemnavigator">
<component :is="templates.nextitemicon || 'ChevronRightIcon'" :class="cx('nextItemIcon')" v-bind="ptm('nextItemIcon')" />
</button>
<div v-if="templates['caption']" :class="cx('caption')" v-bind="ptm('caption')">

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

@ -10,6 +10,7 @@
:aria-label="ariaPrevButtonLabel"
@click="navBackward($event)"
v-bind="{ ...prevButtonProps, ...ptm('previousThumbnailButton') }"
data-pc-group-section="thumbnailnavigator"
>
<component :is="templates.previousthumbnailicon || (isVertical ? 'ChevronUpIcon' : 'ChevronLeftIcon')" :class="cx('previousThumbnailIcon')" v-bind="ptm('previousThumbnailIcon')" />
</button>
@ -52,6 +53,7 @@
:aria-label="ariaNextButtonLabel"
@click="navForward($event)"
v-bind="{ ...nextButtonProps, ...ptm('nextThumbnailButton') }"
data-pc-group-section="thumbnailnavigator"
>
<component :is="templates.nextthumbnailicon || (isVertical ? 'ChevronDownIcon' : 'ChevronRightIcon')" :class="cx('nextThumbnailIcon')" v-bind="ptm('nextThumbnailIcon')" />
</button>
@ -424,6 +426,7 @@ export default {
if (!this.thumbnailsStyle) {
this.thumbnailsStyle = document.createElement('style');
this.thumbnailsStyle.type = 'text/css';
DomHandler.setAttribute(this.thumbnailsStyle, 'nonce', this.$primevue?.config?.csp?.nonce);
document.body.appendChild(this.thumbnailsStyle);
}
@ -435,6 +438,8 @@ export default {
if (this.responsiveOptions && !this.isUnstyled) {
this.sortedResponsiveOptions = [...this.responsiveOptions];
const comparer = new Intl.Collator(undefined, { numeric: true }).compare;
this.sortedResponsiveOptions.sort((data1, data2) => {
const value1 = data1.breakpoint;
const value2 = data2.breakpoint;
@ -443,7 +448,7 @@ export default {
if (value1 == null && value2 != null) result = -1;
else if (value1 != null && value2 == null) result = 1;
else if (value1 == null && value2 == null) result = 0;
else if (typeof value1 === 'string' && typeof value2 === 'string') result = value1.localeCompare(value2, undefined, { numeric: true });
else if (typeof value1 === 'string' && typeof value2 === 'string') result = comparer(value1, value2);
else result = value1 < value2 ? -1 : value1 > value2 ? 1 : 0;
return -1 * result;

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

@ -9,7 +9,7 @@
*/
import { TransitionProps, VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
export declare type ImagePassThroughOptionType = ImagePassThroughAttributes | ((options: ImagePassThroughMethodOptions) => ImagePassThroughAttributes | string) | string | null | undefined;
@ -181,7 +181,7 @@ export interface ImageProps {
* Used to pass attributes to DOM elements inside the component.
* @type {ImagePassThroughOptions}
*/
pt?: ImagePassThroughOptions;
pt?: PTOptions<ImagePassThroughOptions>;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false
@ -219,6 +219,7 @@ export interface ImageSlots {
close(): VNode[];
/**
* Custom image template.
* @param {Object} scope - image slot's params.
*/
image(scope: {
/**
@ -232,10 +233,11 @@ export interface ImageSlots {
/**
* Image error function.
*/
onError: void;
onError: () => void;
}): VNode[];
/**
* Custom preview template.
* @param {Object} scope - preview slot's params.
*/
preview(scope: {
/**
@ -249,7 +251,7 @@ export interface ImageSlots {
/**
* Preview click function.
*/
onClick: void;
onClick: () => void;
}): VNode[];
}

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

@ -3,7 +3,7 @@
<slot name="image" :onError="onError">
<img :style="imageStyle" :class="[cx('image'), imageClass]" @error="onError" v-bind="{ ...$attrs, ...ptm('image') }" />
</slot>
<button v-if="preview" ref="previewButton" :class="cx('button')" @click="onImageClick" v-bind="{ ...previewButtonProps, ...ptm('button') }">
<button v-if="preview" ref="previewButton" type="button" :class="cx('button')" @click="onImageClick" v-bind="{ ...previewButtonProps, ...ptm('button') }">
<slot name="indicatoricon">
<component :is="indicatorIcon ? 'i' : 'EyeIcon'" :class="cx('icon')" v-bind="ptm('icon')" />
</slot>
@ -11,31 +11,31 @@
<Portal>
<div v-if="maskVisible" :ref="maskRef" v-focustrap role="dialog" :class="cx('mask')" :aria-modal="maskVisible" @click="onMaskClick" @keydown="onMaskKeydown" v-bind="ptm('mask')">
<div class="p-image-toolbar" v-bind="ptm('toolbar')">
<button :class="cx('rotateRightButton')" @click="rotateRight" type="button" :aria-label="rightAriaLabel" v-bind="ptm('rotateRightButton')">
<button :class="cx('rotateRightButton')" @click="rotateRight" type="button" :aria-label="rightAriaLabel" v-bind="ptm('rotateRightButton')" data-pc-group-section="action">
<slot name="refresh">
<RefreshIcon v-bind="ptm('rotateRightIcon')" />
</slot>
</button>
<button :class="cx('rotateLeftButton')" @click="rotateLeft" type="button" :aria-label="leftAriaLabel" v-bind="ptm('rotateLeftButton')">
<button :class="cx('rotateLeftButton')" @click="rotateLeft" type="button" :aria-label="leftAriaLabel" v-bind="ptm('rotateLeftButton')" data-pc-group-section="action">
<slot name="undo">
<UndoIcon v-bind="ptm('rotateLeftIcon')" />
</slot>
</button>
<button :class="cx('zoomOutButton')" @click="zoomOut" type="button" :disabled="isZoomOutDisabled" :aria-label="zoomOutAriaLabel" v-bind="ptm('zoomOutButton')">
<button :class="cx('zoomOutButton')" @click="zoomOut" type="button" :disabled="isZoomOutDisabled" :aria-label="zoomOutAriaLabel" v-bind="ptm('zoomOutButton')" data-pc-group-section="action">
<slot name="zoomout">
<SearchMinusIcon v-bind="ptm('zoomOutIcon')" />
</slot>
</button>
<button :class="cx('zoomInButton')" @click="zoomIn" type="button" :disabled="isZoomInDisabled" :aria-label="zoomInAriaLabel" v-bind="ptm('zoomInButton')">
<button :class="cx('zoomInButton')" @click="zoomIn" type="button" :disabled="isZoomInDisabled" :aria-label="zoomInAriaLabel" v-bind="ptm('zoomInButton')" data-pc-group-section="action">
<slot name="zoomin">
<SearchPlusIcon v-bind="ptm('zoomInIcon')" />
</slot>
</button>
<button :class="cx('closeButton')" type="button" @click="hidePreview" :aria-label="closeAriaLabel" autofocus v-bind="ptm('closeButton')">
<button :class="cx('closeButton')" type="button" @click="hidePreview" :aria-label="closeAriaLabel" autofocus v-bind="ptm('closeButton')" data-pc-group-section="action">
<slot name="close">
<TimesIcon v-bind="ptm('closeIcon')" />
</slot>
@ -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" :style="imagePreviewStyle" :onClick="onPreviewImageClick">
<slot name="preview" :class="cx('preview')" :style="imagePreviewStyle" :onClick="onPreviewImageClick">
<img :src="$attrs.src" :class="cx('preview')" :style="imagePreviewStyle" @click="onPreviewImageClick" v-bind="ptm('preview')" />
</slot>
</div>
@ -93,6 +93,7 @@ export default {
},
onImageClick() {
if (this.preview) {
DomHandler.addClass(document.body, 'p-overflow-hidden');
this.maskVisible = true;
setTimeout(() => {
this.previewVisible = true;
@ -179,6 +180,7 @@ export default {
this.previewVisible = false;
this.rotate = 0;
this.scale = 1;
DomHandler.removeClass(document.body, 'p-overflow-hidden');
}
},
computed: {

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

@ -9,7 +9,7 @@
*/
import { VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
export declare type InlineMessagePassThroughOptionType = InlineMessagePassThroughAttributes | ((options: InlineMessagePassThroughMethodOptions) => InlineMessagePassThroughAttributes | string) | string | null | undefined;
@ -82,7 +82,7 @@ export interface InlineMessageProps {
* Used to pass attributes to DOM elements inside the component.
* @type {InlineMessagePassThroughOptions}
*/
pt?: InlineMessagePassThroughOptions;
pt?: PTOptions<InlineMessagePassThroughOptions>;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false

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

@ -11,7 +11,7 @@
import { ButtonHTMLAttributes, HTMLAttributes, VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { ButtonPassThroughOptions } from '../button';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
export declare type InplacePassThroughOptionType = InplacePassThroughAttributes | ((options: InplacePassThroughMethodOptions) => InplacePassThroughAttributes | string) | string | null | undefined;
@ -107,7 +107,7 @@ export interface InplaceProps {
* Used to pass attributes to DOM elements inside the component.
* @type {InplacePassThroughOptions}
*/
pt?: InplacePassThroughOptions;
pt?: PTOptions<InplacePassThroughOptions>;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false

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

@ -8,7 +8,7 @@
*
*/
import { ComponentHooks } from '../basecomponent';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
export declare type InputMaskPassThroughOptionType = InputMaskPassThroughAttributes | ((options: InputMaskPassThroughMethodOptions) => InputMaskPassThroughAttributes | string) | string | null | undefined;
@ -96,7 +96,7 @@ export interface InputMaskProps {
* Used to pass attributes to DOM elements inside the component.
* @type {InputMaskPassThroughOptions}
*/
pt?: InputMaskPassThroughOptions;
pt?: PTOptions<InputMaskPassThroughOptions>;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false

4
components/lib/inputnumber/InputNumber.d.ts vendored
View File

@ -11,7 +11,7 @@ import { ButtonHTMLAttributes, InputHTMLAttributes, VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { ButtonPassThroughOptionType } from '../button';
import { InputTextPassThroughOptionType } from '../inputtext';
import { ClassComponent, GlobalComponentConstructor, Nullable } from '../ts-helpers';
import { ClassComponent, GlobalComponentConstructor, Nullable, PTOptions } from '../ts-helpers';
export declare type InputNumberPassThroughOptionType = InputNumberPassThroughAttributes | ((options: InputNumberPassThroughMethodOptions) => InputNumberPassThroughAttributes | string) | string | null | undefined;
@ -273,7 +273,7 @@ export interface InputNumberProps {
* Used to pass attributes to DOM elements inside the component.
* @type {InputNumberPassThroughOptions}
*/
pt?: InputNumberPassThroughOptions;
pt?: PTOptions<InputNumberPassThroughOptions>;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false

4
components/lib/inputswitch/InputSwitch.d.ts vendored
View File

@ -9,7 +9,7 @@
*/
import { InputHTMLAttributes } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
export declare type InputSwitchPassThroughOptionType = InputSwitchPassThroughAttributes | ((options: InputSwitchPassThroughMethodOptions) => InputSwitchPassThroughAttributes | string) | string | null | undefined;
@ -115,7 +115,7 @@ export interface InputSwitchProps {
* Used to pass attributes to DOM elements inside the component.
* @type {InputSwitchPassThroughOptions}
*/
pt?: InputSwitchPassThroughOptions;
pt?: PTOptions<InputSwitchPassThroughOptions>;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false

4
components/lib/inputtext/InputText.d.ts vendored
View File

@ -9,7 +9,7 @@
*/
import { InputHTMLAttributes } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { ClassComponent, GlobalComponentConstructor, Nullable } from '../ts-helpers';
import { ClassComponent, GlobalComponentConstructor, Nullable, PTOptions } from '../ts-helpers';
export declare type InputTextPassThroughOptionType = InputTextPassThroughAttributes | ((options: InputTextPassThroughMethodOptions) => InputTextPassThroughAttributes | string) | string | null | undefined;
@ -77,7 +77,7 @@ export interface InputTextProps extends InputHTMLAttributes {
* Used to pass attributes to DOM elements inside the component.
* @type {InputTextPassThroughOptions}
*/
pt?: InputTextPassThroughOptions;
pt?: PTOptions<InputTextPassThroughOptions>;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false

4
components/lib/knob/Knob.d.ts vendored
View File

@ -8,7 +8,7 @@
*
*/
import { ComponentHooks } from '../basecomponent';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
export declare type KnobPassThroughOptionType = KnobPassThroughAttributes | ((options: KnobPassThroughMethodOptions) => KnobPassThroughAttributes | string) | string | null | undefined;
@ -174,7 +174,7 @@ export interface KnobProps {
* Used to pass attributes to DOM elements inside the component.
* @type {KnobPassThroughOptions}
*/
pt?: KnobPassThroughOptions;
pt?: PTOptions<KnobPassThroughOptions>;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false

16
components/lib/listbox/Listbox.d.ts vendored
View File

@ -9,7 +9,7 @@
*/
import { InputHTMLAttributes, VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
import { VirtualScrollerItemOptions, VirtualScrollerPassThroughOptionType, VirtualScrollerProps } from '../virtualscroller';
export declare type ListboxPassThroughOptionType = ListboxPassThroughAttributes | ((options: ListboxPassThroughMethodOptions) => ListboxPassThroughAttributes | string) | string | null | undefined;
@ -322,7 +322,7 @@ export interface ListboxProps {
* Used to pass attributes to DOM elements inside the component.
* @type {ListboxPassThroughOptions}
*/
pt?: ListboxPassThroughOptions;
pt?: PTOptions<ListboxPassThroughOptions>;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false
@ -415,13 +415,13 @@ export interface ListboxSlots {
* Referance of the content
* @param {HTMLElement} el - Element of 'ref' property
*/
contentRef(el: any): void;
contentRef: (el: any) => void;
/**
* Options of the items
* @param {number} index - Rendered index
* @return {VirtualScrollerItemOptions}
*/
getItemOptions(index: number): VirtualScrollerItemOptions;
getItemOptions: (index: number) => VirtualScrollerItemOptions;
}): VNode[];
/**
* Custom loader template.
@ -435,8 +435,14 @@ export interface ListboxSlots {
}): VNode[];
/**
* Custom filter icon template.
* @param {Object} scope - filter icon slot's params.
*/
filtericon(): VNode[];
filtericon(scope: {
/**
* Style class of the filter icon
*/
class: any;
}): VNode[];
}
/**

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

@ -10,7 +10,7 @@
import { VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { MenuItem } from '../menuitem';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
export declare type MegaMenuPassThroughOptionType = MegaMenuPassThroughAttributes | ((options: MegaMenuPassThroughMethodOptions) => MegaMenuPassThroughAttributes | string) | string | null | undefined;
@ -213,7 +213,7 @@ export interface MegaMenuProps {
* Used to pass attributes to DOM elements inside the component.
* @type {MegaMenuPassThroughOptions}
*/
pt?: MegaMenuPassThroughOptions;
pt?: PTOptions<MegaMenuPassThroughOptions>;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false
@ -245,6 +245,7 @@ export interface MegaMenuSlots {
}): VNode[];
/**
* Custom submenu icon template.
* @param {Object} scope - submenuicon slot's params.
*/
submenuicon(scope: {
/**

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

@ -10,7 +10,7 @@
import { TransitionProps, VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { MenuItem } from '../menuitem';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
export declare type MenuPassThroughOptionType = MenuPassThroughAttributes | ((options: MenuPassThroughMethodOptions) => MenuPassThroughAttributes | string) | string | null | undefined;
@ -189,7 +189,7 @@ export interface MenuProps {
* Used to pass attributes to DOM elements inside the component.
* @type {MenuPassThroughOptions}
*/
pt?: MenuPassThroughOptions;
pt?: PTOptions<MenuPassThroughOptions>;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false

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

@ -10,7 +10,7 @@
import { ButtonHTMLAttributes, VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { MenuItem } from '../menuitem';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
export declare type MenubarPassThroughOptionType = MenubarPassThroughAttributes | ((options: MenubarPassThroughMethodOptions) => MenubarPassThroughAttributes | string) | string | null | undefined;
@ -204,7 +204,7 @@ export interface MenubarProps {
* Used to pass attributes to DOM elements inside the component.
* @type {MenubarPassThroughOptions}
*/
pt?: MenubarPassThroughOptions;
pt?: PTOptions<MenubarPassThroughOptions>;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false
@ -240,6 +240,7 @@ export interface MenubarSlots {
popupicon(): VNode[];
/**
* Custom submenu icon template.
* @param {Object} scope - submenuicon slot's params.
*/
submenuicon(scope: {
/**

5
components/lib/message/BaseMessage.vue
View File

@ -8,10 +8,15 @@ const styles = `
align-items: center;
}
.p-message-icon {
flex-shrink: 0;
}
.p-message-close {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.p-message-close.p-link {

6
components/lib/message/Message.d.ts vendored
View File

@ -9,7 +9,7 @@
*/
import { ButtonHTMLAttributes, TransitionProps, VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
export declare type MessagePassThroughOptionType = MessagePassThroughAttributes | ((options: MessagePassThroughMethodOptions) => MessagePassThroughAttributes | string) | string | null | undefined;
@ -133,7 +133,7 @@ export interface MessageProps {
* Used to pass attributes to DOM elements inside the component.
* @type {MessagePassThroughOptions}
*/
pt?: MessagePassThroughOptions;
pt?: PTOptions<MessagePassThroughOptions>;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false
@ -151,6 +151,7 @@ export interface MessageSlots {
default(): VNode[];
/**
* Custom message icon template.
* @param {Object} scope - messageicon slot's params.
*/
messageicon(scope: {
/**
@ -160,6 +161,7 @@ export interface MessageSlots {
}): VNode[];
/**
* Custom close icon template.
* @param {Object} scope - closeicon slot's params.
*/
closeicon(scope: {
/**

24
components/lib/multiselect/MultiSelect.d.ts vendored
View File

@ -9,7 +9,7 @@
*/
import { ButtonHTMLAttributes, HTMLAttributes, InputHTMLAttributes, TransitionProps, VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
import { VirtualScrollerItemOptions, VirtualScrollerPassThroughOptionType, VirtualScrollerProps } from '../virtualscroller';
export declare type MultiSelectPassThroughOptionType = MultiSelectPassThroughAttributes | ((options: MultiSelectPassThroughMethodOptions) => MultiSelectPassThroughAttributes | string) | string | null | undefined;
@ -510,7 +510,7 @@ export interface MultiSelectProps {
* Used to pass attributes to DOM elements inside the component.
* @type {MultiSelectPassThroughOptions}
*/
pt?: MultiSelectPassThroughOptions;
pt?: PTOptions<MultiSelectPassThroughOptions>;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false
@ -632,13 +632,13 @@ export interface MultiSelectSlots {
* Referance of the content
* @param {HTMLElement} el - Element of 'ref' property
*/
contentRef(el: any): void;
contentRef: (el: any) => void;
/**
* Options of the items
* @param {number} index - Rendered index
* @return {VirtualScrollerItemOptions}
*/
getItemOptions(index: number): VirtualScrollerItemOptions;
getItemOptions: (index: number) => VirtualScrollerItemOptions;
}): VNode[];
/**
* Custom loader template.
@ -652,6 +652,7 @@ export interface MultiSelectSlots {
}): VNode[];
/**
* Custom remove token icon template.
* @param {Object} scope - removetokenicon slot's params.
*/
removetokenicon(scope: {
/**
@ -659,9 +660,15 @@ export interface MultiSelectSlots {
*/
class: string;
/**
* Remove token icon function.
* Item of the token.
*/
onClick: void;
item: any;
/**
* Remove token icon function.
* @param {Event} event - Browser event
* @param {any} item - Item
*/
onClick: (event: Event, item: any) => void;
}): VNode[];
/**
* Custom header checkbox icon template.
@ -679,6 +686,7 @@ export interface MultiSelectSlots {
}): VNode[];
/**
* Custom filter icon template.
* @param {Object} scope - filtericon slot's params.
*/
filtericon(scope: {
/**
@ -688,6 +696,7 @@ export interface MultiSelectSlots {
}): VNode[];
/**
* Custom close icon template.
* @param {Object} scope - closeicon slot's params.
*/
closeicon(scope: {
/**
@ -697,7 +706,7 @@ export interface MultiSelectSlots {
}): VNode[];
/**
* Custom item checkbox icon template.
* @param {Object} scope - header checkbox icon slot's params.
* @param {Object} scope - itemcheckboxicon slot's params.
*/
itemcheckboxicon(scope: {
/**
@ -721,6 +730,7 @@ export interface MultiSelectSlots {
}): VNode[];
/**
* Custom dropdown icon template.
* @param {Object} scope - dropdownicon slot's params.
*/
dropdownicon(scope: {
/**

2
components/lib/multiselect/MultiSelect.vue
View File

@ -33,7 +33,7 @@
<slot name="chip" :value="item">
<span :class="cx('tokenLabel')" v-bind="ptm('tokenLabel')">{{ getLabelByValue(item) }}</span>
</slot>
<slot v-if="!disabled" name="removetokenicon" :class="cx('removeTokenIcon')" :onClick="(event) => removeOption(event, item)">
<slot v-if="!disabled" name="removetokenicon" :class="cx('removeTokenIcon')" :item="item" :onClick="(event) => removeOption(event, item)">
<span v-if="removeTokenIcon" :class="[cx('removeTokenIcon'), removeTokenIcon]" @click.stop="removeOption($event, item)" v-bind="ptm('removeTokenIcon')" />
<TimesCircleIcon v-else :class="cx('removeTokenIcon')" @click.stop="removeOption($event, item)" v-bind="ptm('removeTokenIcon')" />
</slot>

4
components/lib/orderlist/OrderList.d.ts vendored
View File

@ -10,7 +10,7 @@
import { ButtonHTMLAttributes, HTMLAttributes, TransitionProps, VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { ButtonPassThroughOptionType } from '../button';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
export declare type OrderListPassThroughOptionType = OrderListPassThroughAttributes | ((options: OrderListPassThroughMethodOptions) => OrderListPassThroughAttributes | string) | string | null | undefined;
@ -240,7 +240,7 @@ export interface OrderListProps {
* Used to pass attributes to DOM elements inside the component.
* @type {OrderListPassThroughOptions}
*/
pt?: OrderListPassThroughOptions;
pt?: PTOptions<OrderListPassThroughOptions>;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false

1
components/lib/orderlist/OrderList.vue
View File

@ -482,6 +482,7 @@ export default {
this.$el.setAttribute(this.attributeSelector, '');
this.styleElement = document.createElement('style');
this.styleElement.type = 'text/css';
DomHandler.setAttribute(this.styleElement, 'nonce', this.$primevue?.config?.csp?.nonce);
document.head.appendChild(this.styleElement);
let innerHTML = `

4
components/lib/organizationchart/OrganizationChart.d.ts vendored
View File

@ -9,7 +9,7 @@
*/
import { VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
export declare type OrganizationChartPassThroughOptionType = OrganizationChartPassThroughAttributes | ((options: OrganizationChartPassThroughMethodOptions) => OrganizationChartPassThroughAttributes | string) | string | null | undefined;
@ -224,7 +224,7 @@ export interface OrganizationChartProps {
* Used to pass attributes to DOM elements inside the component.
* @type {OrganizationChartPassThroughOptions}
*/
pt?: OrganizationChartPassThroughOptions;
pt?: PTOptions<OrganizationChartPassThroughOptions>;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false

4
components/lib/overlaypanel/OverlayPanel.d.ts vendored
View File

@ -9,7 +9,7 @@
*/
import { TransitionProps, VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
export declare type OverlayPanelPassThroughOptionType = OverlayPanelPassThroughAttributes | ((options: OverlayPanelPassThroughMethodOptions) => OverlayPanelPassThroughAttributes | string) | string | null | undefined;
@ -138,7 +138,7 @@ export interface OverlayPanelProps {
* Used to pass attributes to DOM elements inside the component.
* @type {OverlayPanelPassThroughOptions}
*/
pt?: OverlayPanelPassThroughOptions;
pt?: PTOptions<OverlayPanelPassThroughOptions>;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false

1
components/lib/overlaypanel/OverlayPanel.vue
View File

@ -246,6 +246,7 @@ export default {
if (!this.styleElement && !this.isUnstyled) {
this.styleElement = document.createElement('style');
this.styleElement.type = 'text/css';
DomHandler.setAttribute(this.styleElement, 'nonce', this.$primevue?.config?.csp?.nonce);
document.head.appendChild(this.styleElement);
let innerHTML = '';

4
components/lib/paginator/Paginator.d.ts vendored
View File

@ -11,7 +11,7 @@ import { VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { DropdownPassThroughOptionType } from '../dropdown';
import { InputNumberPassThroughOptionType } from '../inputnumber';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
export declare type PaginatorPassThroughOptionType = PaginatorPassThroughAttributes | ((options: PaginatorPassThroughMethodOptions) => PaginatorPassThroughAttributes | string) | string | null | undefined;
@ -235,7 +235,7 @@ export interface PaginatorProps {
* Used to pass attributes to DOM elements inside the component.
* @type {PaginatorPassThroughOptions}
*/
pt?: PaginatorPassThroughOptions;
pt?: PTOptions<PaginatorPassThroughOptions>;
}
/**

3
components/lib/paginator/Paginator.vue
View File

@ -52,7 +52,7 @@
</template>
<script>
import { UniqueComponentId } from 'primevue/utils';
import { DomHandler, UniqueComponentId } from 'primevue/utils';
import BasePaginator from './BasePaginator.vue';
import CurrrentPageReport from './CurrentPageReport.vue';
import FirstPageLink from './FirstPageLink.vue';
@ -144,6 +144,7 @@ export default {
if (this.hasBreakpoints() && !this.isUnstyled) {
this.styleElement = document.createElement('style');
this.styleElement.type = 'text/css';
DomHandler.setAttribute(this.styleElement, 'nonce', this.$primevue?.config?.csp?.nonce);
document.head.appendChild(this.styleElement);
let innerHTML = '';

5
components/lib/panel/Panel.d.ts vendored
View File

@ -9,7 +9,7 @@
*/
import { ButtonHTMLAttributes, TransitionProps, VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
export declare type PanelPassThroughOptionType = PanelPassThroughAttributes | ((options: PanelPassThroughMethodOptions) => PanelPassThroughAttributes | string) | string | null | undefined;
@ -136,7 +136,7 @@ export interface PanelProps {
* Used to pass attributes to DOM elements inside the component.
* @type {PanelPassThroughOptions}
*/
pt?: PanelPassThroughOptions;
pt?: PTOptions<PanelPassThroughOptions>;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false
@ -154,6 +154,7 @@ export interface PanelSlots {
default(): VNode[];
/**
* Custom header template.
* @param {Object} scope - header slot's params.
*/
header(scope: {
/**

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

@ -10,7 +10,7 @@
import { TransitionProps, VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { MenuItem } from '../menuitem';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
export declare type PanelMenuPassThroughOptionType = PanelMenuPassThroughAttributes | ((options: PanelMenuPassThroughMethodOptions) => PanelMenuPassThroughAttributes | string) | string | null | undefined;
@ -217,7 +217,7 @@ export interface PanelMenuProps {
* Used to pass attributes to DOM elements inside the component.
* @type {PanelMenuPassThroughOptions}
*/
pt?: PanelMenuPassThroughOptions;
pt?: PTOptions<PanelMenuPassThroughOptions>;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false
@ -241,6 +241,7 @@ export interface PanelMenuSlots {
}): VNode[];
/**
* Custom submenu icon template.
* @param {Object} scope - submenuicon slot's params.
*/
submenuicon(scope: {
/**

6
components/lib/passthrough/index.d.ts vendored
View File

@ -0,0 +1,6 @@
export interface usePassThroughOptions {
merge?: boolean | undefined;
useMergeProps?: boolean | undefined;
}
export declare function usePassThrough(pt1: object, pt2: object, options?: usePassThroughOptions): object;

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