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

Merge branch 'primefaces:master' into master

pull/4878/head
Harun Demir 2023-12-07 20:54:11 +03:00 committed by GitHub
parent ab23d57011 d77809017d
commit 0a10427acc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
180 changed files with 3592 additions and 1117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
CHANGELOG.md
View File

@ -1,25 +1,65 @@
# Changelog
## [3.43.0](https://github.com/primefaces/primevue/tree/3.43.0) (2023-12-05)
[Full Changelog](https://github.com/primefaces/primevue/compare/3.42.0...3.43.0)
**Fixed bugs:**
- Calendar: Overwrites date when in time-only mode [\#4901](https://github.com/primefaces/primevue/issues/4901)
- Binding and ordering pt options defect [\#4921](https://github.com/primefaces/primevue/issues/4921)
- Some icons are not displaying from PrimeIcons.js Api file [\#4897](https://github.com/primefaces/primevue/issues/4897)
- Treetable lazy load plus pagination toggler icon remain as open [\#4441](https://github.com/primefaces/primevue/issues/4441)
**Implemented New Features and Enhancements:**
- Add parent param to all pt method options [\#4929](https://github.com/primefaces/primevue/issues/4929)
- Media components Accessibility Improvements [\#4908](https://github.com/primefaces/primevue/issues/4908)
- Tree: Missing 'filter' event on search [\#4876](https://github.com/primefaces/primevue/issues/4876)
## [3.42.0](https://github.com/primefaces/primevue/tree/3.42.0) (2023-11-28)
[Full Changelog](https://github.com/primefaces/primevue/compare/3.41.1...3.42.0)
**Breaking Changes:**
- Menu components: width changed as min-width [\#4870](https://github.com/primefaces/primevue/issues/4870)
**Fixed bugs:**
- Splitter: aria-valuenow calculation defect [\#4889](https://github.com/primefaces/primevue/issues/4889)
- Listbox: select-on-focus causes a crash [\#4881](https://github.com/primefaces/primevue/issues/4881)
- Listbox: Tab key support defect when filter mode is on [\#4875](https://github.com/primefaces/primevue/issues/4875)
- Editor: Readonly prop does not react to any change [\#4872](https://github.com/primefaces/primevue/issues/4872)
- DataTable: Type definition doesn't match document [\#4662](https://github.com/primefaces/primevue/issues/4662)
- Wrong types issue with aria-label and aria-labelledby Props [\#4511](https://github.com/primefaces/primevue/issues/4511)
**Implemented New Features and Enhancements:**
- Tree / TreeTable: new loadingMode property [\#4886](https://github.com/primefaces/primevue/issues/4886)
- Improve InlineMessage Implementation for Accessibility [\#4880](https://github.com/primefaces/primevue/issues/4880)
- Calendar: new iconDisplay property [\#4871](https://github.com/primefaces/primevue/issues/4871)
## [3.41.1](https://github.com/primefaces/primevue/tree/3.41.1) (2023-11-22)
[Full Changelog](https://github.com/primefaces/primevue/compare/3.41.0...3.41.1)
**Breaking Changes:**
- StyleClass: deprecate enterClass/leaveClass use enterFromClass/leaveFromClass [\#4866](https://github.com/primefaces/primevue/issues/486&)
- Listbox: metaKeySelection default changed as true [\#4865](https://github.com/primefaces/primevue/issues/4865)
- StyleClass: deprecate enterClass/leaveClass use enterFromClass/leaveFromClass [\#4866](https://github.com/primefaces/primevue/issues/486&)
- Listbox: metaKeySelection default changed as true [\#4865](https://github.com/primefaces/primevue/issues/4865)
**Fixed bugs:**
- DataTable: restore state defect [\#4855](https://github.com/primefaces/primevue/issues/4855)
- PanelMenu: Menu items with no sub-items toggling border radius [\#4816](https://github.com/primefaces/primevue/issues/4816)
- Column: Missing typing for sorticon [\#4423](https://github.com/primefaces/primevue/issues/4423)
- DataTable: restore state defect [\#4855](https://github.com/primefaces/primevue/issues/4855)
- PanelMenu: Menu items with no sub-items toggling border radius [\#4816](https://github.com/primefaces/primevue/issues/4816)
- Column: Missing typing for sorticon [\#4423](https://github.com/primefaces/primevue/issues/4423)
**Implemented New Features and Enhancements:**
- Button: new badgeSeverity property [\#4863](https://github.com/primefaces/primevue/issues/4863)
- MegaMenu / Menubar: menubutton templating [\#4862](https://github.com/primefaces/primevue/issues/4862)
- Calendar: Week Number customization [\#4669](https://github.com/primefaces/primevue/issues/4669)
- Button: new badgeSeverity property [\#4863](https://github.com/primefaces/primevue/issues/4863)
- MegaMenu / Menubar: menubutton templating [\#4862](https://github.com/primefaces/primevue/issues/4862)
- Calendar: Week Number customization [\#4669](https://github.com/primefaces/primevue/issues/4669)
## [3.41.0](https://github.com/primefaces/primevue/tree/3.41.0) (2023-11-20)
@ -2221,14 +2261,14 @@
**Implemented New Features and Enhancements:**
- v2 DataTable: Frozen column improvements [\#4795](https://github.com/primefaces/primevue/issues/4795)
- TreeTable: Add custom header for column [\#2941](https://github.com/primefaces/primevue/issues/2941)
- v2 DataTable: Frozen column improvements [\#4795](https://github.com/primefaces/primevue/issues/4795)
- TreeTable: Add custom header for column [\#2941](https://github.com/primefaces/primevue/issues/2941)
**Fixed bugs:**
- OrderList: order of selection reversed when moving multiple items to top or bottom [\#4700](https://github.com/primefaces/primevue/issues/4700)
- Calendar: Crashes when Tab pressed and calendar overlay is not showing [\#4586](https://github.com/primefaces/primevue/issues/4586)
- Calendar: Months are not highlighted with selection-mode="multiple" [\#3988](https://github.com/primefaces/primevue/issues/3988)
- OrderList: order of selection reversed when moving multiple items to top or bottom [\#4700](https://github.com/primefaces/primevue/issues/4700)
- Calendar: Crashes when Tab pressed and calendar overlay is not showing [\#4586](https://github.com/primefaces/primevue/issues/4586)
- Calendar: Months are not highlighted with selection-mode="multiple" [\#3988](https://github.com/primefaces/primevue/issues/3988)
## [2.10.2](https://github.com/primefaces/primevue/tree/2.10.2) (2023-08-16)

8
assets/data/news.json
View File

@ -1,8 +1,8 @@
{
"id": 45,
"content": "🎉 Black Friday Sale! Up to 50% Off",
"linkText": "Buy Now",
"linkHref": "https://www.primefaces.org/store",
"id": 46,
"content": "Sakai Free Admin Template",
"linkText": "View Demo",
"linkHref": "https://sakai.primefaces.org",
"backgroundStyle": "background-color:var(--primary-color)",
"textStyle": "color:var(--primary-color-text);font-weight:500",
"linkStyle": "color:var(--primary-color-text);font-weight:700;text-decoration: underline;"

4
assets/menu/menu.json
View File

@ -448,10 +448,6 @@
"name": "Overview",
"to": "/theming"
},
{
"name": "Visual Editor",
"href": "https://designer.primevue.org"
},
{
"name": "Colors",
"to": "/colors"

6
components/doc/DocApiTable.vue
View File

@ -29,14 +29,14 @@
<template v-for="(value, i) in getType(v)" :key="value">
<span v-if="i !== 0" class="doc-option-type">{{ ' | ' }}</span>
<NuxtLink v-if="isLinkType(value)" :to="setLinkPath(value)" class="doc-option-type doc-option-link">{{ value }}</NuxtLink
><span v-else class="doc-option-type">{{ value }}</span>
><span v-else class="doc-option-type">{{ value === 'T' ? 'any' : value }}</span>
</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 doc-option-type">{{ val.type }}</span>
{{ val.name }}: <span class="doc-option-type-options doc-option-type">{{ val.type === 'T' || (val.type.includes('<T') && !val.type.includes('<Tr')) ? 'any' : val.type }}</span>
</div>
</template>
</template>
@ -111,7 +111,7 @@ export default {
});
},
isLinkType(value) {
if (this.label === 'Slots') return false;
if (this.label === 'Slots' || value.includes('SharedPassThroughOption') || value.includes('PassThrough<')) return false;
const validValues = ['confirmationoptions', 'toastmessageoptions'];
return value.toLowerCase().includes(this.id.split('.')[1]) || validValues.includes(value.toLowerCase());

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

@ -2,7 +2,7 @@ import pkg from '../../../package.json';
import { services } from './services';
const PrimeVue = {
version: '^3.40.0',
version: '^3.43.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.'
};
@ -60,7 +60,7 @@ const getVueApp = (props = {}, sourceType) => {
if (embedded) {
// main.js
unstyled += `, unstyled: true, pt: Tailwind, ptOptions: { mergeProps: true }`;
unstyled += `, unstyled: true, pt: Tailwind`;
imports += `import Tailwind from 'primevue/passthrough/tailwind';
import ThemeSwitcher from './components/ThemeSwitcher.vue';`;
element += `app.component('ThemeSwitcher', ThemeSwitcher);`;

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

@ -7,10 +7,21 @@ export const getPTOption = (name) => {
for (const [i, prop] of props.entries()) {
if (options) {
let subCompName, subOptions;
let hasSubComp = prop.name !== 'hooks' && prop.type.indexOf('TransitionType') === -1 && prop.type.indexOf('<') > -1 && name.toLowerCase() !== prop.type.slice(0, prop.type.indexOf('<')).toLowerCase();
if (hasSubComp) {
subCompName = prop.type.slice(0, prop.type.indexOf('<')).replace('PassThroughOptions', '').replace('PassThroughOptionType', '');
subOptions = APIDocs[subCompName.toLowerCase()].interfaces.values[`${subCompName}PassThroughMethodOptions`];
const objToReplace = subOptions.props.find((opt) => opt.name === 'parent');
objToReplace.type = prop.type;
}
data.push({
value: i + 1,
label: prop.name,
options: options?.props,
options: hasSubComp ? subOptions?.props : options?.props,
description: prop.description
});
} else {

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

@ -31,6 +31,10 @@ export interface AccordionPassThroughMethodOptions {
* Defines current inline state.
*/
state: AccordionState;
/**
* Defines parent options.
*/
parent: any;
/**
* Defines passthrough(pt) options in global config.
*/

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

@ -106,6 +106,7 @@ export default {
const tabMetaData = {
props: tab.props || {},
parent: {
instance: this,
props: this.$props,
state: this.$data
},

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

@ -8,7 +8,6 @@
*
*/
import { AnchorHTMLAttributes, HTMLAttributes, TransitionProps, VNode } from 'vue';
import { AccordionPassThroughOptions } from '../accordion';
import { PassThroughOptions } from '../passthrough';
import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
@ -29,9 +28,9 @@ export interface AccordionTabPassThroughMethodOptions {
*/
props: AccordionTabProps;
/**
* Defines parent instance.
* Defines parent options.
*/
parent: AccordionPassThroughOptions;
parent: any;
/**
* Defines current options.
*/

12
components/lib/api/PrimeIcons.js
View File

@ -193,20 +193,20 @@ const PrimeIcons = {
SLIDERS_V: 'pi pi-sliders-v',
SORT: 'pi pi-sort',
SORT_ALPHA_DOWN: 'pi pi-sort-alpha-down',
SORT_ALPHA_ALT_DOWN: 'pi pi-sort-alpha-alt-down',
SORT_ALPHA_ALT_DOWN: 'pi pi-sort-alpha-down-alt',
SORT_ALPHA_UP: 'pi pi-sort-alpha-up',
SORT_ALPHA_ALT_UP: 'pi pi-sort-alpha-alt-up',
SORT_ALPHA_ALT_UP: 'pi pi-sort-alpha-up-alt',
SORT_ALT: 'pi pi-sort-alt',
SORT_ALT_SLASH: 'pi pi-sort-slash',
SORT_ALT_SLASH: 'pi pi-sort-alt-slash',
SORT_AMOUNT_DOWN: 'pi pi-sort-amount-down',
SORT_AMOUNT_DOWN_ALT: 'pi pi-sort-amount-down-alt',
SORT_AMOUNT_UP: 'pi pi-sort-amount-up',
SORT_AMOUNT_UP_ALT: 'pi pi-sort-amount-up-alt',
SORT_DOWN: 'pi pi-sort-down',
SORT_NUMERIC_DOWN: 'pi pi-sort-numeric-down',
SORT_NUMERIC_ALT_DOWN: 'pi pi-sort-numeric-alt-down',
SORT_NUMERIC_ALT_DOWN: 'pi pi-sort-numeric-down-alt',
SORT_NUMERIC_UP: 'pi pi-sort-numeric-up',
SORT_NUMERIC_ALT_UP: 'pi pi-sort-numeric-alt-up',
SORT_NUMERIC_ALT_UP: 'pi pi-sort-numeric-up-alt',
SORT_UP: 'pi pi-sort-up',
SPINNER: 'pi pi-spinner',
STAR: 'pi pi-star',
@ -216,7 +216,7 @@ const PrimeIcons = {
STEP_FORWARD: 'pi pi-step-forward',
STEP_FORWARD_ALT: 'pi pi-step-forward-alt',
STOP: 'pi pi-stop',
STOPWATCH: 'pi pi-stop-watch',
STOPWATCH: 'pi pi-stopwatch',
STOP_CIRCLE: 'pi pi-stop-circle',
SUN: 'pi pi-sun',
SYNC: 'pi pi-sync',

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

@ -9,7 +9,7 @@
*/
import { HTMLAttributes, InputHTMLAttributes, TransitionProps, VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { ButtonPassThroughOptionType } from '../button';
import { ButtonPassThroughOptions } from '../button';
import { PassThroughOptions } from '../passthrough';
import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
import { VirtualScrollerItemOptions, VirtualScrollerPassThroughOptionType, VirtualScrollerProps } from '../virtualscroller';
@ -38,12 +38,30 @@ export interface AutoCompletePassThroughMethodOptions {
* Defines current options.
*/
context: AutoCompleteContext;
/**
* Defines parent options.
*/
parent: any;
/**
* Defines passthrough(pt) options in global config.
*/
global: object | undefined;
}
/**
* Custom shared passthrough(pt) option method.
*/
export interface AutoCompleteSharedPassThroughMethodOptions {
/**
* Defines valid properties.
*/
props: AutoCompleteProps;
/**
* Defines current inline state.
*/
state: AutoCompleteState;
}
/**
* Custom change event.
* @see {@link AutoCompleteEmits.change}
@ -150,8 +168,9 @@ export interface AutoCompletePassThroughOptions {
loadingIcon?: AutoCompletePassThroughOptionType;
/**
* Used to pass attributes to the Button component.
* @see {@link ButtonPassThroughOptions}
*/
dropdownButton?: ButtonPassThroughOptionType;
dropdownButton?: ButtonPassThroughOptions<AutoCompleteSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the panel's DOM element.
*/

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

@ -7,7 +7,6 @@
* @module avatar
*/
import { VNode } from 'vue';
import { AvatarGroupPassThroughOptions } from '../avatargroup';
import { ComponentHooks } from '../basecomponent';
import { PassThroughOptions } from '../passthrough';
import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
@ -27,9 +26,9 @@ export interface AvatarPassThroughMethodOptions {
*/
props: AvatarProps;
/**
* Defines parent instance.
* Defines parent options.
*/
parent: AvatarGroupPassThroughOptions;
parent: any;
/**
* Defines passthrough(pt) options in global config.
*/

15
components/lib/avatar/Avatar.vue
View File

@ -1,10 +1,10 @@
<template>
<div :class="cx('root')" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" v-bind="getPTOptions('root')" data-pc-name="avatar">
<div :class="cx('root')" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" v-bind="ptm('root')" data-pc-name="avatar">
<slot>
<span v-if="label" :class="cx('label')" v-bind="getPTOptions('label')">{{ label }}</span>
<span v-if="label" :class="cx('label')" v-bind="ptm('label')">{{ label }}</span>
<component v-else-if="$slots.icon" :is="$slots.icon" :class="cx('icon')" />
<span v-else-if="icon" :class="[cx('icon'), icon]" v-bind="getPTOptions('icon')" />
<img v-else-if="image" :src="image" :alt="ariaLabel" @error="onError" v-bind="getPTOptions('image')" />
<span v-else-if="icon" :class="[cx('icon'), icon]" v-bind="ptm('icon')" />
<img v-else-if="image" :src="image" :alt="ariaLabel" @error="onError" v-bind="ptm('image')" />
</slot>
</div>
</template>
@ -19,13 +19,6 @@ export default {
methods: {
onError(event) {
this.$emit('error', event);
},
getPTOptions(key) {
return this.ptm(key, {
parent: {
instance: this.$parent
}
});
}
}
};

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

@ -12,12 +12,12 @@ import { ComponentHooks } from '../basecomponent';
import { PassThroughOptions } from '../passthrough';
import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
export declare type BadgePassThroughOptionType = BadgePassThroughAttributes | ((options: BadgePassThroughMethodOptions) => BadgePassThroughAttributes | string) | string | null | undefined;
export declare type BadgePassThroughOptionType<T = any> = BadgePassThroughAttributes | ((options: BadgePassThroughMethodOptions<T>) => BadgePassThroughAttributes | string) | string | null | undefined;
/**
* Custom passthrough(pt) option method.
*/
export interface BadgePassThroughMethodOptions {
export interface BadgePassThroughMethodOptions<T> {
/**
* Defines instance.
*/
@ -30,6 +30,10 @@ export interface BadgePassThroughMethodOptions {
* Defines passthrough(pt) options in global config.
*/
global: object | undefined;
/**
* Defines parent instance.
*/
parent: T;
}
/**
@ -43,11 +47,11 @@ export interface BadgePassThroughAttributes {
* Custom passthrough(pt) options.
* @see {@link BadgeProps.pt}
*/
export interface BadgePassThroughOptions {
export interface BadgePassThroughOptions<T = any> {
/**
* Used to pass attributes to the root's DOM element.
*/
root?: BadgePassThroughOptionType;
root?: BadgePassThroughOptionType<T>;
/**
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}

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

@ -18,6 +18,10 @@ export declare type BadgeDirectivePassThroughOptionType = BadgeDirectivePassThro
*/
export interface BadgePassThroughMethodOptions {
context: BadgeContext;
/**
* Defines parent options.
*/
parent: any;
/**
* Defines passthrough(pt) options in global config.
*/

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

@ -202,7 +202,20 @@ export default {
return this.unstyled !== undefined ? this.unstyled : this.$config?.unstyled;
},
$params() {
return { instance: this, props: this.$props, state: this.$data, parentInstance: this.$parentInstance };
const parentInstance = this.$parentInstance || this.$parent;
return {
instance: this,
props: this.$props,
state: this.$data,
parent: {
instance: parentInstance,
props: parentInstance?.$props,
state: parentInstance?.$data
},
/* @deprecated since v3.43.0. Use the `parent.instance` instead of the `parentInstance`.*/
parentInstance
};
},
$style() {
return { classes: undefined, inlineStyles: undefined, loadStyle: () => {}, loadCustomStyle: () => {}, ...(this._getHostInstance(this) || {}).$style, ...this.$options.style };

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

@ -30,6 +30,10 @@ export interface BlockUIPassThroughMethodOptions {
* Defines current inline state.
*/
state: BlockUIState;
/**
* Defines parent options.
*/
parent: any;
/**
* Defines passthrough(pt) options in global config.
*/

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

@ -31,6 +31,10 @@ export interface BreadcrumbPassThroughMethodOptions {
* Defines current options.
*/
context: BreadcrumbContext;
/**
* Defines parent options.
*/
parent: any;
/**
* Defines passthrough(pt) options in global config.
*/

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

@ -12,12 +12,12 @@ import { ComponentHooks } from '../basecomponent';
import { PassThroughOptions } from '../passthrough';
import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
export declare type ButtonPassThroughOptionType = ButtonPassThroughAttributes | ((options: ButtonPassThroughMethodOptions) => ButtonPassThroughAttributes | string) | string | null | undefined;
export declare type ButtonPassThroughOptionType<T = any> = ButtonPassThroughAttributes | ((options: ButtonPassThroughMethodOptions<T>) => ButtonPassThroughAttributes | string) | string | null | undefined;
/**
* Custom passthrough(pt) option method.
*/
export interface ButtonPassThroughMethodOptions {
export interface ButtonPassThroughMethodOptions<T> {
/**
* Defines instance.
*/
@ -33,7 +33,7 @@ export interface ButtonPassThroughMethodOptions {
/**
* Defines parent instance.
*/
parent: any;
parent: T;
/**
* Defines passthrough(pt) options in global config.
*/
@ -44,27 +44,27 @@ export interface ButtonPassThroughMethodOptions {
* Custom passthrough(pt) options.
* @see {@link ButtonProps.pt}
*/
export interface ButtonPassThroughOptions {
export interface ButtonPassThroughOptions<T = any> {
/**
* Used to pass attributes to the root's DOM element.
*/
root?: ButtonPassThroughOptionType;
root?: ButtonPassThroughOptionType<T>;
/**
* Used to pass attributes to the loading icon's DOM element.
*/
loadingIcon?: ButtonPassThroughOptionType;
loadingIcon?: ButtonPassThroughOptionType<T>;
/**
* Used to pass attributes to the icon's DOM element.
*/
icon?: ButtonPassThroughOptionType;
icon?: ButtonPassThroughOptionType<T>;
/**
* Used to pass attributes to the label's DOM element.
*/
label?: ButtonPassThroughOptionType;
label?: ButtonPassThroughOptionType<T>;
/**
* Used to pass attributes to the badge's DOM element.
*/
badge?: ButtonPassThroughOptionType;
badge?: ButtonPassThroughOptionType<T>;
/**
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}
@ -171,7 +171,7 @@ export interface ButtonProps extends ButtonHTMLAttributes {
* Used to pass attributes to DOM elements inside the component.
* @type {ButtonPassThroughOptions}
*/
pt?: PassThrough<ButtonPassThroughOptions>;
pt?: PassThrough<ButtonPassThroughOptions<any>>;
/**
* Used to configure passthrough(pt) options of the component.
* @type {PassThroughOptions}

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

@ -26,10 +26,6 @@ export default {
methods: {
getPTOptions(key) {
return this.ptm(key, {
parent: {
props: this.$parent?.$props,
state: this.$parent?.$data
},
context: {
disabled: this.disabled
}
@ -41,7 +37,7 @@ export default {
return this.$attrs.disabled || this.$attrs.disabled === '' || this.loading;
},
defaultAriaLabel() {
return this.label ? this.label + (this.badge ? ' ' + this.badge : '') : this.$attrs['aria-label'];
return this.label ? this.label + (this.badge ? ' ' + this.badge : '') : this.$attrs.ariaLabel;
},
hasIcon() {
return this.icon || this.$slots.icon;

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

@ -9,7 +9,7 @@
*/
import { HTMLAttributes, InputHTMLAttributes, TransitionProps, VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { ButtonPassThroughOptionType } from '../button';
import { ButtonPassThroughOptions } from '../button';
import { PassThroughOptions } from '../passthrough';
import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
@ -37,12 +37,30 @@ export interface CalendarPassThroughMethodOptions {
* Defines current options.
*/
context: CalendarContext;
/**
* Defines parent options.
*/
parent: any;
/**
* Defines passthrough(pt) options in global config.
*/
global: object | undefined;
}
/**
* Custom shared passthrough(pt) option method.
*/
export interface CalendarSharedPassThroughMethodOptions {
/**
* Defines valid properties.
*/
props: CalendarProps;
/**
* Defines current inline state.
*/
state: CalendarState;
}
/**
* Custom Calendar responsive options metadata.
*/
@ -117,9 +135,9 @@ export interface CalendarPassThroughOptions {
input?: CalendarPassThroughOptionType;
/**
* Used to pass attributes to the Button component.
* @see {@link ButtonPassThroughOptionType}
* @see {@link ButtonPassThroughOptions}
*/
dropdownButton?: ButtonPassThroughOptionType;
dropdownButton?: ButtonPassThroughOptions<CalendarSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the panel's DOM element.
*/
@ -138,9 +156,9 @@ export interface CalendarPassThroughOptions {
header?: CalendarPassThroughOptionType;
/**
* Used to pass attributes to the Button component.
* @see {@link ButtonPassThroughOptionType}
* @see {@link ButtonPassThroughOptions}
*/
previousButton?: ButtonPassThroughOptionType;
previousButton?: ButtonPassThroughOptions<CalendarSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the title's DOM element.
*/
@ -159,9 +177,9 @@ export interface CalendarPassThroughOptions {
decadeTitle?: CalendarPassThroughOptionType;
/**
* Used to pass attributes to the Button component.
* @see {@link ButtonPassThroughOptionType}
* @see {@link ButtonPassThroughOptions}
*/
nextButton?: ButtonPassThroughOptionType;
nextButton?: ButtonPassThroughOptions<CalendarSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the container's DOM element.
*/
@ -288,14 +306,14 @@ export interface CalendarPassThroughOptions {
buttonbar?: CalendarPassThroughOptionType;
/**
* Used to pass attributes to the Button component.
* @see {@link ButtonPassThroughOptionType}
* @see {@link ButtonPassThroughOptions}
*/
todayButton?: ButtonPassThroughOptionType;
todayButton?: ButtonPassThroughOptions<CalendarSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the Button component.
* @see {@link ButtonPassThroughOptionType}
* @see {@link ButtonPassThroughOptions}
*/
clearButton?: ButtonPassThroughOptionType;
clearButton?: ButtonPassThroughOptions<CalendarSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the aria selected day's DOM element.
*/
@ -798,6 +816,10 @@ export interface CalendarSlots {
* Style class of the input icon
*/
class: any;
/**
* Click callback
*/
clickCallback: () => void;
}): VNode[];
/**
* Custom previous icon template.

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

@ -48,7 +48,7 @@
</template>
</CalendarButton>
<template v-else-if="showIcon && iconDisplay === 'input'">
<slot name="inputicon" :class="cx('inputIcon')">
<slot name="inputicon" :class="cx('inputIcon')" :clickCallback="onButtonClick">
<component :is="icon ? 'i' : 'CalendarIcon'" :class="[icon, cx('inputIcon')]" @click="onButtonClick" v-bind="ptm('inputicon')" />
</slot>
</template>
@ -1272,14 +1272,10 @@ export default {
let formattedValue = null;
if (date) {
if (this.timeOnly) {
formattedValue = this.formatTime(date);
} else {
formattedValue = this.formatDate(date, this.datePattern);
formattedValue = this.formatDate(date, this.datePattern);
if (this.showTime) {
formattedValue += ' ' + this.formatTime(date);
}
if (this.showTime || this.timeOnly) {
formattedValue += ' ' + this.formatTime(date);
}
}
@ -1798,18 +1794,13 @@ export default {
let date;
let parts = text.split(' ');
if (this.timeOnly) {
date = new Date();
this.populateTime(date, parts[0], parts[1]);
} else {
const dateFormat = this.datePattern;
const dateFormat = this.datePattern;
if (this.showTime) {
date = this.parseDate(parts[0], dateFormat);
this.populateTime(date, parts[1], parts[2]);
} else {
date = this.parseDate(text, dateFormat);
}
if (this.showTime || this.timeOnly) {
date = this.parseDate(parts[0], dateFormat);
this.populateTime(date, parts[1], parts[2]);
} else {
date = this.parseDate(text, dateFormat);
}
return date;

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

@ -34,6 +34,10 @@ export interface CarouselPassThroughMethodOptions {
* Defines current options.
*/
context: CarouselContext;
/**
* Defines parent options.
*/
parent: any;
/**
* Defines passthrough(pt) options in global config.
*/

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

@ -101,7 +101,7 @@ import ChevronLeftIcon from 'primevue/icons/chevronleft';
import ChevronRightIcon from 'primevue/icons/chevronright';
import ChevronUpIcon from 'primevue/icons/chevronup';
import Ripple from 'primevue/ripple';
import { DomHandler, UniqueComponentId, ObjectUtils } from 'primevue/utils';
import { DomHandler, ObjectUtils, UniqueComponentId } from 'primevue/utils';
import BaseCarousel from './BaseCarousel.vue';
export default {
@ -453,6 +453,8 @@ export default {
case 'ArrowUp':
case 'ArrowDown':
case 'PageUp':
case 'PageDown':
event.preventDefault();
break;
@ -481,7 +483,7 @@ export default {
this.changedFocusedIndicator(activeIndex, 0);
},
onEndKey() {
const indicators = [...DomHandler.find(this.$refs.indicatorContent, '[data-pc-section="indicator"]r')];
const indicators = [...DomHandler.find(this.$refs.indicatorContent, '[data-pc-section="indicator"]')];
const activeIndex = this.findFocusedIndicatorIndex();
this.changedFocusedIndicator(activeIndex, indicators.length - 1);

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

@ -32,6 +32,10 @@ export interface CascadeSelectPassThroughMethodOptions {
* Defines current inline state.
*/
state: CascadeSelectState;
/**
* Defines parent options.
*/
parent: any;
/**
* Defines passthrough(pt) options in global config.
*/

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

@ -26,6 +26,10 @@ export interface ChartPassThroughMethodOptions {
* Defines valid properties.
*/
props: ChartProps;
/**
* Defines parent options.
*/
parent: any;
/**
* Defines passthrough(pt) options in global config.
*/

2
components/lib/chart/Chart.vue
View File

@ -1,5 +1,5 @@
<template>
<div :class="cx('root')" v-bind="ptm('root')" data-pc-name="chart">
<div :class="cx('root')" :style="sx('root')" v-bind="ptm('root')" data-pc-name="chart">
<canvas ref="canvas" :width="width" :height="height" @click="onCanvasClick($event)" v-bind="{ ...canvasProps, ...ptm('canvas') }"></canvas>
</div>
</template>

12
components/lib/chart/style/ChartStyle.js
View File

@ -1,12 +1,8 @@
import BaseStyle from 'primevue/base/style';
const css = `
@layer primevue {
.p-chart {
position: relative;
}
}
`;
const inlineStyles = {
root: { position: 'relative' }
};
const classes = {
root: 'p-chart'
@ -14,6 +10,6 @@ const classes = {
export default BaseStyle.extend({
name: 'chart',
css,
inlineStyles,
classes
});

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

@ -34,6 +34,10 @@ export interface CheckboxPassThroughMethodOptions {
* Defines current options.
*/
context: CheckboxContext;
/**
* Defines parent options.
*/
parent: any;
/**
* Defines passthrough(pt) options in global config.
*/

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

@ -30,6 +30,10 @@ export interface ChipPassThroughMethodOptions {
* Defines current inline state.
*/
state: ChipState;
/**
* Defines parent options.
*/
parent: any;
/**
* Defines passthrough(pt) options in global config.
*/

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

@ -30,6 +30,10 @@ export interface ChipsPassThroughMethodOptions {
* Defines current inline state.
*/
state: ChipsState;
/**
* Defines parent options.
*/
parent: any;
/**
* Defines passthrough(pt) options in global config.
*/

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

@ -32,6 +32,10 @@ export interface ColorPickerPassThroughMethodOptions {
* Defines current inline state.
*/
state: ColorPickerState;
/**
* Defines parent options.
*/
parent: any;
/**
* Defines passthrough(pt) options in global config.
*/

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

@ -11,7 +11,7 @@
import { VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { ButtonPassThroughOptionType } from '../button';
import { ButtonPassThroughOptions } from '../button';
import { DataTablePassThroughOptions } from '../datatable';
import { DropdownPassThroughOptionType } from '../dropdown';
import { PassThroughOptions } from '../passthrough';
@ -33,9 +33,9 @@ export interface ColumnPassThroughMethodOptions {
*/
props: ColumnProps;
/**
* Defines parent instance.
* Defines parent options.
*/
parent: DataTablePassThroughOptions;
parent: any;
/**
* Defines current options.
*/
@ -46,6 +46,20 @@ export interface ColumnPassThroughMethodOptions {
global: object | undefined;
}
/**
* Custom shared passthrough(pt) option method.
*/
export interface ColumnSharedPassThroughMethodOptions {
/**
* Defines valid properties.
*/
props: ColumnProps;
/**
* Defines parent instance.
*/
parent: DataTablePassThroughOptions;
}
/**
* Filter model metadata.
*/
@ -194,7 +208,7 @@ export interface ColumnPassThroughOptions {
* Used to pass attributes to the Dropdown component.
* @see {@link DropdownPassThroughOptionType}
*/
filterOperatorDropdown?: DropdownPassThroughOptionType;
filterOperatorDropdown?: DropdownPassThroughOptionType<ColumnSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the filter constraints' DOM element.
*/
@ -207,39 +221,39 @@ export interface ColumnPassThroughOptions {
* Used to pass attributes to the Dropdown component.
* @see {@link DropdownPassThroughOptionType}
*/
filterMatchModeDropdown?: DropdownPassThroughOptionType;
filterMatchModeDropdown?: DropdownPassThroughOptionType<ColumnSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the filter remove button container's DOM element.
*/
filterRemove?: ColumnPassThroughOptionType;
/**
* Used to pass attributes to the Button component.
* @see {@link ButtonPassThroughOptionType}
* @see {@link ButtonPassThroughOptions}
*/
filterRemoveButton?: ButtonPassThroughOptionType;
filterRemoveButton?: ButtonPassThroughOptions<ColumnSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the filter add rule's DOM element.
*/
filterAddRule?: ColumnPassThroughOptionType;
/**
* Used to pass attributes to the Button component.
* @see {@link ButtonPassThroughOptionType}
* @see {@link ButtonPassThroughOptions}
*/
filterAddRuleButton?: ButtonPassThroughOptionType;
filterAddRuleButton?: ButtonPassThroughOptions<ColumnSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the filter buttonbar's DOM element.
*/
filterButtonbar?: ColumnPassThroughOptionType;
/**
* Used to pass attributes to the Button component.
* @see {@link ButtonPassThroughOptionType}
* @see {@link ButtonPassThroughOptions}
*/
filterClearButton?: ButtonPassThroughOptionType;
filterClearButton?: ButtonPassThroughOptions<ColumnSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the Button component.
* @see {@link ButtonPassThroughOptionType}
* @see {@link ButtonPassThroughOptions}
*/
filterApplyButton?: ButtonPassThroughOptionType;
filterApplyButton?: ButtonPassThroughOptions<ColumnSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the body cell's DOM element.
*/

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

@ -6,7 +6,6 @@
* @module columngroup
*/
import { ComponentHooks } from '../basecomponent';
import { DataTablePassThroughOptions } from '../datatable';
import { PassThroughOptions } from '../passthrough';
import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
@ -25,9 +24,9 @@ export interface ColumnGroupPassThroughMethodOptions {
*/
props: ColumnGroupProps;
/**
* Defines parent instance.
* Defines parent options.
*/
parent: DataTablePassThroughOptions;
parent: any;
/**
* Defines current options.
*/

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

@ -92,7 +92,7 @@ export const defaultOptions = {
moveToSource: 'Move to Source',
moveAllToTarget: 'Move All to Target',
moveAllToSource: 'Move All to Source',
pageLabel: '{page}',
pageLabel: 'Page {page}',
firstPageLabel: 'First Page',
lastPageLabel: 'Last Page',
nextPageLabel: 'Next Page',

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

@ -32,12 +32,30 @@ export interface ConfirmDialogPassThroughMethodOptions {
* Defines current inline state.
*/
state: ConfirmDialogState;
/**
* Defines parent options.
*/
parent: any;
/**
* Defines passthrough(pt) options in global config.
*/
global: object | undefined;
}
/**
* Custom shared passthrough(pt) option method.
*/
export interface ConfirmDialogSharedPassThroughMethodOptions {
/**
* Defines valid properties.
*/
props: ConfirmDialogProps;
/**
* Defines current inline state.
*/
state: ConfirmDialogState;
}
/**
* Custom passthrough(pt) options.
* @see {@link ConfirmDialogProps.pt}
@ -87,12 +105,12 @@ export interface ConfirmDialogPassThroughOptions {
* Used to pass attributes to the Button component.
* @see {@link ButtonPassThroughOptions}
*/
rejectButton?: ButtonPassThroughOptions;
rejectButton?: ButtonPassThroughOptions<ConfirmDialogSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the Button component.
* @see {@link ButtonPassThroughOptions}
*/
acceptButton?: ButtonPassThroughOptions;
acceptButton?: ButtonPassThroughOptions<ConfirmDialogSharedPassThroughMethodOptions>;
/**
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}

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

@ -34,12 +34,30 @@ export interface ConfirmPopupPassThroughMethodOptions {
* Defines current inline state.
*/
state: ConfirmPopupState;
/**
* Defines parent options.
*/
parent: any;
/**
* Defines passthrough(pt) options in global config.
*/
global: object | undefined;
}
/**
* Custom shared passthrough(pt) option method.
*/
export interface ConfirmPopupSharedPassThroughMethodOptions {
/**
* Defines valid properties.
*/
props: ConfirmPopupProps;
/**
* Defines current inline state.
*/
state: ConfirmPopupState;
}
/**
* Custom passthrough(pt) options.
* @see {@link ConfirmPopupProps.pt}
@ -69,12 +87,12 @@ export interface ConfirmPopupPassThroughOptions {
* Used to pass attributes to the Button component.
* @see {@link ButtonPassThroughOptions}
*/
rejectButton?: ButtonPassThroughOptions;
rejectButton?: ButtonPassThroughOptions<ConfirmPopupSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the Button component.
* @see {@link ButtonPassThroughOptions}
*/
acceptButton?: ButtonPassThroughOptions;
acceptButton?: ButtonPassThroughOptions<ConfirmPopupSharedPassThroughMethodOptions>;
/**
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}

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

@ -38,6 +38,10 @@ export interface ContextMenuPassThroughMethodOptions {
* Defines current options.
*/
context: ContextMenuContext;
/**
* Defines parent options.
*/
parent: any;
/**
* Defines passthrough(pt) options in global config.
*/

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

@ -222,6 +222,7 @@ export default {
const columnMetaData = {
props: this.column.props,
parent: {
instance: this,
props: this.$props,
state: this.$data
},

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

@ -330,6 +330,7 @@ export default {
const columnMetaData = {
props: this.column.props,
parent: {
instance: this,
props: this.$props,
state: this.$data
},

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

@ -41,12 +41,30 @@ export interface DataTablePassThroughMethodOptions {
* Defines current options.
*/
context: DataTableContext;
/**
* Defines parent options.
*/
parent: any;
/**
* Defines passthrough(pt) options in global config.
*/
global: object | undefined;
}
/**
* Custom shared passthrough(pt) option method.
*/
export interface DataTableSharedPassThroughMethodOptions {
/**
* Defines valid properties.
*/
props: DataTableProps;
/**
* Defines current inline state.
*/
state: DataTableState;
}
/**
* Custom datatable export metadata.
*/
@ -378,7 +396,7 @@ export interface DataTableRowExpandEvent {
/**
* Expanded row data
*/
data: any[];
data: any;
}
/**
@ -582,7 +600,7 @@ export interface DataTablePassThroughOptions {
* Used to pass attributes to the Paginator component.
* @see {@link PaginatorPassThroughOptionType}
*/
paginator?: PaginatorPassThroughOptionType;
paginator?: PaginatorPassThroughOptionType<DataTableSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the wrapper's DOM element.
*/

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

@ -47,6 +47,7 @@ export default {
const columnMetaData = {
props: this.column.props,
parent: {
instance: this,
props: this.$props,
state: this.$data
},

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

@ -206,6 +206,7 @@ export default {
const columnMetaData = {
props: this.column.props,
parent: {
instance: this,
props: this.$props,
state: this.$data
},

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

@ -50,6 +50,7 @@ export default {
const columnMetaData = {
props: this.column.props,
parent: {
instance: this,
props: this.$props,
state: this.$data
},

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

@ -55,6 +55,7 @@ export default {
const columnMetaData = {
props: this.column.props,
parent: {
instance: this,
props: this.$props,
state: this.$data
},

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

@ -40,6 +40,7 @@ export default {
const columnMetaData = {
props: this.column.props,
parent: {
instance: this,
props: this.$props,
state: this.$data
},

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

@ -310,6 +310,7 @@ export default {
getColumnPT(key) {
const columnMetaData = {
parent: {
instance: this,
props: this.$props,
state: this.$data
}

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

@ -43,6 +43,7 @@ export default {
const columnGroupMetaData = {
props: this.getColumnGroupProps(),
parent: {
instance: this,
props: this.$props,
state: this.$data
},
@ -61,6 +62,7 @@ export default {
const rowMetaData = {
props: row.props,
parent: {
instance: this,
props: this.$props,
state: this.$data
},

3
components/lib/datatable/TableHeader.vue
View File

@ -234,6 +234,7 @@ export default {
const columnGroupMetaData = {
props: this.getColumnGroupProps(),
parent: {
instance: this,
props: this.$props,
state: this.$data
},
@ -252,6 +253,7 @@ export default {
const rowMetaData = {
props: row.props,
parent: {
instance: this,
props: this.$props,
state: this.$data
},
@ -269,6 +271,7 @@ export default {
const columnMetaData = {
props: column.props,
parent: {
instance: this,
props: this.$props,
state: this.$data
},

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

@ -31,11 +31,30 @@ export interface DataViewPassThroughMethodOptions {
* Defines current inline state.
*/
state: DataViewState;
/**
* Defines parent options.
*/
parent: any;
/**
* Defines passthrough(pt) options in global config.
*/
global: object | undefined;
}
/**
* Custom shared passthrough(pt) option method.
*/
export interface DataViewSharedPassThroughMethodOptions {
/**
* Defines valid properties.
*/
props: DataViewProps;
/**
* Defines current inline state.
*/
state: DataViewState;
}
/**
* Custom page event.
* @see {@link DataViewEmits.page}
@ -76,7 +95,7 @@ export interface DataViewPassThroughOptions {
* Used to pass attributes to the Paginator component.
* @see {@link PaginatorPassThroughOptionType}
*/
paginator?: PaginatorPassThroughOptionType;
paginator?: PaginatorPassThroughOptionType<DataViewSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the content's DOM element.
*/

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

@ -35,6 +35,10 @@ export interface DataViewLayoutOptionsPassThroughMethodOptions {
* Defines current inline state.
*/
state: DataViewLayoutOptionsState;
/**
* Defines parent options.
*/
parent: any;
/**
* Defines passthrough(pt) options in global config.
*/

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

@ -30,6 +30,10 @@ export interface DeferredContentPassThroughMethodOptions {
* Defines current inline state.
*/
state: DeferredContentState;
/**
* Defines parent options.
*/
parent: any;
/**
* Defines passthrough(pt) options in global config.
*/

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

@ -12,14 +12,14 @@ import { ComponentHooks } from '../basecomponent';
import { PassThroughOptions } from '../passthrough';
import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
export declare type DialogPassThroughOptionType = DialogPassThroughAttributes | ((options: DialogPassThroughMethodOptions) => DialogPassThroughAttributes | string) | string | null | undefined;
export declare type DialogPassThroughOptionType<T = any> = DialogPassThroughAttributes | ((options: DialogPassThroughMethodOptions<T>) => DialogPassThroughAttributes | string) | string | null | undefined;
export declare type DialogPassThroughTransitionType = TransitionProps | ((options: DialogPassThroughMethodOptions) => TransitionProps) | undefined;
export declare type DialogPassThroughTransitionType<T = any> = TransitionProps | ((options: DialogPassThroughMethodOptions<T>) => TransitionProps) | undefined;
/**
* Custom passthrough(pt) option method.
*/
export interface DialogPassThroughMethodOptions {
export interface DialogPassThroughMethodOptions<T> {
/**
* Defines instance.
*/
@ -32,6 +32,10 @@ export interface DialogPassThroughMethodOptions {
* Defines current inline state.
*/
state: DialogState;
/**
* Defines parent instance.
*/
parent: T;
/**
* Defines passthrough(pt) options in global config.
*/
@ -42,51 +46,51 @@ export interface DialogPassThroughMethodOptions {
* Custom passthrough(pt) options.
* @see {@link DialogProps.pt}
*/
export interface DialogPassThroughOptions {
export interface DialogPassThroughOptions<T = any> {
/**
* Used to pass attributes to the root's DOM element.
*/
root?: DialogPassThroughOptionType;
root?: DialogPassThroughOptionType<T>;
/**
* Used to pass attributes to the header's DOM element.
*/
header?: DialogPassThroughOptionType;
header?: DialogPassThroughOptionType<T>;
/**
* Used to pass attributes to the header title's DOM element.
*/
title?: DialogPassThroughOptionType;
title?: DialogPassThroughOptionType<T>;
/**
* Used to pass attributes to the header icons' DOM element.
*/
icons?: DialogPassThroughOptionType;
icons?: DialogPassThroughOptionType<T>;
/**
* Used to pass attributes to the maximizable button's DOM element.
*/
maximizableButton?: DialogPassThroughOptionType;
maximizableButton?: DialogPassThroughOptionType<T>;
/**
* Used to pass attributes to the maximizable icon's DOM element.
*/
maximizableIcon?: DialogPassThroughOptionType;
maximizableIcon?: DialogPassThroughOptionType<T>;
/**
* Used to pass attributes to the close button's component.
*/
closeButton?: DialogPassThroughOptionType;
closeButton?: DialogPassThroughOptionType<T>;
/**
* Used to pass attributes to the close button icon's component.
*/
closeButtonIcon?: DialogPassThroughOptionType;
closeButtonIcon?: DialogPassThroughOptionType<T>;
/**
* Used to pass attributes to the content's DOM element.
*/
content?: DialogPassThroughOptionType;
content?: DialogPassThroughOptionType<T>;
/**
* Used to pass attributes to the footer's DOM element.
*/
footer?: DialogPassThroughOptionType;
footer?: DialogPassThroughOptionType<T>;
/**
* Used to pass attributes to the mask's DOM element.
*/
mask?: DialogPassThroughOptionType;
mask?: DialogPassThroughOptionType<T>;
/**
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}
@ -95,7 +99,7 @@ export interface DialogPassThroughOptions {
/**
* Used to control Vue Transition API.
*/
transition?: DialogPassThroughTransitionType;
transition?: DialogPassThroughTransitionType<T>;
}
/**

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

@ -26,6 +26,10 @@ export interface DividerPassThroughMethodOptions {
* Defines valid properties.
*/
props: DividerProps;
/**
* Defines parent options.
*/
parent: any;
/**
* Defines passthrough(pt) options in global config.
*/

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

@ -35,6 +35,10 @@ export interface DockPassThroughMethodOptions {
* Defines current options.
*/
context: DockContext;
/**
* Defines parent options.
*/
parent: any;
/**
* Defines passthrough(pt) options in global config.
*/

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

@ -13,14 +13,14 @@ import { PassThroughOptions } from '../passthrough';
import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
import { VirtualScrollerItemOptions, VirtualScrollerPassThroughOptionType, VirtualScrollerProps } from '../virtualscroller';
export declare type DropdownPassThroughOptionType = DropdownPassThroughAttributes | ((options: DropdownPassThroughMethodOptions) => DropdownPassThroughAttributes | string) | string | null | undefined;
export declare type DropdownPassThroughOptionType<T = any> = DropdownPassThroughAttributes | ((options: DropdownPassThroughMethodOptions<T>) => DropdownPassThroughAttributes | string) | string | null | undefined;
export declare type DropdownPassThroughTransitionType = TransitionProps | ((options: DropdownPassThroughMethodOptions) => TransitionProps) | undefined;
export declare type DropdownPassThroughTransitionType<T = any> = TransitionProps | ((options: DropdownPassThroughMethodOptions<T>) => TransitionProps) | undefined;
/**
* Custom passthrough(pt) option method.
*/
export interface DropdownPassThroughMethodOptions {
export interface DropdownPassThroughMethodOptions<T> {
/**
* Defines instance.
*/
@ -33,6 +33,10 @@ export interface DropdownPassThroughMethodOptions {
* Defines current inline state.
*/
state: DropdownState;
/**
* Defines parent instance.
*/
parent: T | any;
/**
* Defines current options.
*/
@ -77,51 +81,51 @@ export interface DropdownFilterEvent {
* Custom passthrough(pt) options.
* @see {@link DropdownProps.pt}
*/
export interface DropdownPassThroughOptions {
export interface DropdownPassThroughOptions<T = any> {
/**
* Used to pass attributes to the root's DOM element.
*/
root?: DropdownPassThroughOptionType;
root?: DropdownPassThroughOptionType<T>;
/**
* Used to pass attributes to the input's DOM element.
*/
input?: DropdownPassThroughOptionType;
input?: DropdownPassThroughOptionType<T>;
/**
* Used to pass attributes to the clear icon's DOM element.
*/
clearIcon?: DropdownPassThroughOptionType;
clearIcon?: DropdownPassThroughOptionType<T>;
/**
* Used to pass attributes to the trigger' DOM element.
*/
trigger?: DropdownPassThroughOptionType;
trigger?: DropdownPassThroughOptionType<T>;
/**
* Used to pass attributes to the loading icon's DOM element.
*/
loadingIcon?: DropdownPassThroughOptionType;
loadingIcon?: DropdownPassThroughOptionType<T>;
/**
* Used to pass attributes to the panel's DOM element.
*/
panel?: DropdownPassThroughOptionType;
panel?: DropdownPassThroughOptionType<T>;
/**
* Used to pass attributes to the header's DOM element.
*/
header?: DropdownPassThroughOptionType;
header?: DropdownPassThroughOptionType<T>;
/**
* Used to pass attributes to the filter container's DOM element.
*/
filterContainer?: DropdownPassThroughOptionType;
filterContainer?: DropdownPassThroughOptionType<T>;
/**
* Used to pass attributes to the filter input's DOM element.
*/
filterInput?: DropdownPassThroughOptionType;
filterInput?: DropdownPassThroughOptionType<T>;
/**
* Used to pass attributes to the filter icon's DOM element.
*/
filterIcon?: DropdownPassThroughOptionType;
filterIcon?: DropdownPassThroughOptionType<T>;
/**
* Used to pass attributes to the wrapper's DOM element.
*/
wrapper?: DropdownPassThroughOptionType;
wrapper?: DropdownPassThroughOptionType<T>;
/**
* Used to pass attributes to the VirtualScroller component.
* @see {@link VirtualScrollerPassThroughOptionType}
@ -130,39 +134,39 @@ export interface DropdownPassThroughOptions {
/**
* Used to pass attributes to the list's DOM element.
*/
list?: DropdownPassThroughOptionType;
list?: DropdownPassThroughOptionType<T>;
/**
* Used to pass attributes to the item group's DOM element.
*/
itemGroup?: DropdownPassThroughOptionType;
itemGroup?: DropdownPassThroughOptionType<T>;
/**
* Used to pass attributes to the item's DOM element.
*/
item?: DropdownPassThroughOptionType;
item?: DropdownPassThroughOptionType<T>;
/**
* Used to pass attributes to the empty message's DOM element.
*/
emptyMessage?: DropdownPassThroughOptionType;
emptyMessage?: DropdownPassThroughOptionType<T>;
/**
* Used to pass attributes to the hidden first focusable element's DOM element.
*/
hiddenFirstFocusableEl?: DropdownPassThroughOptionType;
hiddenFirstFocusableEl?: DropdownPassThroughOptionType<T>;
/**
* Used to pass attributes to the hidden filter result's DOM element.
*/
hiddenFilterResult?: DropdownPassThroughOptionType;
hiddenFilterResult?: DropdownPassThroughOptionType<T>;
/**
* Used to pass attributes to the hidden empty message's DOM element.
*/
hiddenEmptyMessage?: DropdownPassThroughOptionType;
hiddenEmptyMessage?: DropdownPassThroughOptionType<T>;
/**
* Used to pass attributes to the hidden selected message's DOM element.
*/
hiddenSelectedMessage?: DropdownPassThroughOptionType;
hiddenSelectedMessage?: DropdownPassThroughOptionType<T>;
/**
* Used to pass attributes to the hidden last focusable element's DOM element.
*/
hiddenLastFocusableEl?: DropdownPassThroughOptionType;
hiddenLastFocusableEl?: DropdownPassThroughOptionType<T>;
/**
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}

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

@ -125,7 +125,7 @@
:data-p-highlight="isSelected(option)"
:data-p-focused="focusedOptionIndex === getOptionIndex(i, getItemOptions)"
:data-p-disabled="isOptionDisabled(option)"
v-bind="getPTOptions(option, getItemOptions, i, 'item')"
v-bind="getPTItemOptions(option, getItemOptions, i, 'item')"
>
<slot name="option" :option="option" :index="getOptionIndex(i, getItemOptions)">{{ getOptionLabel(option) }}</slot>
</li>
@ -253,7 +253,7 @@ export default {
getOptionRenderKey(option, index) {
return (this.dataKey ? ObjectUtils.resolveFieldData(option, this.dataKey) : this.getOptionLabel(option)) + '_' + index;
},
getPTOptions(option, itemOptions, index, key) {
getPTItemOptions(option, itemOptions, index, key) {
return this.ptm(key, {
context: {
selected: this.isSelected(option),

2
components/lib/dropdown/style/DropdownStyle.js
View File

@ -102,7 +102,7 @@ const classes = {
'p-dropdown p-component p-inputwrapper',
{
'p-disabled': props.disabled,
'p-dropdown-clearable': props.showClear && !props.disabled,
'p-dropdown-clearable': props.showClear,
'p-focus': state.focused,
'p-inputwrapper-filled': instance.hasSelectedOption,
'p-inputwrapper-focus': state.focused || state.overlayVisible,

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

@ -30,6 +30,10 @@ export interface EditorPassThroughMethodOptions {
* Defines current inline state.
*/
state: EditorState;
/**
* Defines parent options.
*/
parent: any;
/**
* Defines passthrough(pt) options in global config.
*/

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

@ -32,6 +32,10 @@ export interface FieldsetPassThroughMethodOptions {
* Defines current inline state.
*/
state: FieldsetState;
/**
* Defines parent options.
*/
parent: any;
/**
* Defines passthrough(pt) options in global config.
*/

2
components/lib/fieldset/Fieldset.vue
View File

@ -77,7 +77,7 @@ export default {
return UniqueComponentId();
},
buttonAriaLabel() {
return this.toggleButtonProps && this.toggleButtonProps['aria-label'] ? this.toggleButtonProps['aria-label'] : this.legend;
return this.toggleButtonProps && this.toggleButtonProps.ariaLabel ? this.toggleButtonProps.ariaLabel : this.legend;
}
},
directives: {

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

@ -8,6 +8,7 @@
*
*/
import { VNode } from 'vue';
import { BadgePassThroughOptions } from '../badge';
import { ComponentHooks } from '../basecomponent';
import { ButtonPassThroughOptions } from '../button';
import { MessagePassThroughOptions } from '../message';
@ -32,12 +33,30 @@ export interface FileUploadPassThroughMethodOptions {
* Defines current inline state.
*/
state: FileUploadState;
/**
* Defines parent options.
*/
parent: any;
/**
* Defines passthrough(pt) options in global config.
*/
global: object | undefined;
}
/**
* Custom shared passthrough(pt) option method.
*/
export interface FileUploadPassThroughMethodOptions {
/**
* Defines valid properties.
*/
props: FileUploadProps;
/**
* Defines current inline state.
*/
state: FileUploadState;
}
/**
* Custom select event.
* @see {@link FileUploadEmits.select}
@ -199,12 +218,12 @@ export interface FileUploadPassThroughOptions {
* Used to pass attributes to the upload button's DOM element.
* @see {@link ButtonPassThroughOptions}
*/
uploadButton?: ButtonPassThroughOptions;
uploadButton?: ButtonPassThroughOptions<FileUploadPassThroughMethodOptions>;
/**
* Used to pass attributes to the cancel button's DOM element.
* @see {@link ButtonPassThroughOptions}
*/
cancelButton?: ButtonPassThroughOptions;
cancelButton?: ButtonPassThroughOptions<FileUploadPassThroughMethodOptions>;
/**
* Used to pass attributes to the content's DOM element.
*/
@ -217,7 +236,7 @@ export interface FileUploadPassThroughOptions {
* Used to pass attributes to the messages' DOM element.
* @see {@link MessagePassThroughOptions}
*/
message?: MessagePassThroughOptions;
message?: MessagePassThroughOptions<FileUploadPassThroughMethodOptions>;
/**
* Used to pass attributes to the file's DOM element.
*/
@ -239,9 +258,10 @@ export interface FileUploadPassThroughOptions {
*/
fileSize?: FileUploadPassThroughOptionType;
/**
* Used to pass attributes to the badge's DOM element.
* Used to pass attributes to the Badge component.
* @see {@link BadgePassThroughOptions}
*/
badge?: FileUploadPassThroughOptionType;
badge?: BadgePassThroughOptions<FileUploadPassThroughMethodOptions>;
/**
* Used to pass attributes to the actions's DOM element.
*/
@ -250,7 +270,7 @@ export interface FileUploadPassThroughOptions {
* Used to pass attributes to the remove button's DOM element.
* @see {@link ButtonPassThroughOptions}
*/
removeButton?: ButtonPassThroughOptions;
removeButton?: ButtonPassThroughOptions<FileUploadPassThroughMethodOptions>;
/**
* Used to pass attributes to the empty's DOM element.
*/

8
components/lib/galleria/BaseGalleria.vue
View File

@ -113,6 +113,14 @@ export default {
nextButtonProps: {
type: null,
default: null
},
ariaLabel: {
type: String,
default: null
},
ariaRoledescription: {
type: String,
default: null
}
},
style: GalleriaStyle,

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

@ -36,6 +36,10 @@ export interface GalleriaPassThroughMethodOptions {
* Defines current options.
*/
context: GalleriaContext;
/**
* Defines parent options.
*/
parent: any;
/**
* Defines passthrough(pt) options in global config.
*/
@ -390,6 +394,14 @@ export interface GalleriaProps {
* Used to pass all properties of the HTMLButtonElement to the next navigation button.
*/
nextButtonProps?: ButtonHTMLAttributes | undefined;
/**
* Defines a string value that labels an interactive element.
*/
ariaLabel?: string | undefined;
/**
* Defines a string value that description for the role of the component.
*/
ariaRoledescription?: string | undefined;
/**
* Used to pass attributes to DOM elements inside the component.
* @type {GalleriaPassThroughOptions}

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

@ -1,6 +1,6 @@
<template>
<Portal v-if="fullScreen">
<div v-if="containerVisible" :ref="maskRef" :class="[cx('mask'), maskClass]" :role="fullScreen ? 'dialog' : 'region'" :aria-modal="fullScreen ? 'true' : undefined" v-bind="ptm('mask')">
<div v-if="containerVisible" :ref="maskRef" :class="[cx('mask'), maskClass]" role="dialog" :aria-modal="fullScreen ? 'true' : undefined" v-bind="ptm('mask')">
<transition name="p-galleria" @before-enter="onBeforeEnter" @enter="onEnter" @before-leave="onBeforeLeave" @after-leave="onAfterLeave" appear v-bind="ptm('transition')">
<GalleriaContent v-if="visible" :ref="containerRef" v-focustrap @mask-hide="maskHide" :templates="$slots" @activeitem-change="onActiveItemChange" :pt="pt" :unstyled="unstyled" v-bind="$props" />
</transition>

12
components/lib/galleria/GalleriaContent.vue
View File

@ -1,5 +1,15 @@
<template>
<div v-if="$attrs.value && $attrs.value.length > 0" :id="id" :class="[cx('root'), $attrs.containerClass]" :style="$attrs.containerStyle" v-bind="{ ...$attrs.containerProps, ...getPTOptions('root') }" data-pc-name="galleria">
<div
v-if="$attrs.value && $attrs.value.length > 0"
:id="id"
role="region"
:class="[cx('root'), $attrs.containerClass]"
:style="$attrs.containerStyle"
:aria-label="$attrs.ariaLabel"
:aria-roledescription="$attrs.ariaRoledescription"
v-bind="{ ...$attrs.containerProps, ...getPTOptions('root') }"
data-pc-name="galleria"
>
<button v-if="$attrs.fullScreen" v-ripple autofocus type="button" :class="cx('closeButton')" :aria-label="closeAriaLabel" @click="$emit('mask-hide')" v-bind="getPTOptions('closeButton')">
<component :is="$attrs.templates['closeicon'] || 'TimesIcon'" :class="cx('closeIcon')" v-bind="getPTOptions('closeIcon')" />
</button>

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

@ -14,12 +14,11 @@
<component v-if="templates.caption" :is="templates.caption" :item="activeItem" />
</div>
</div>
<ul v-if="showIndicators" :class="cx('indicators')" v-bind="ptm('indicators')">
<ul v-if="showIndicators" ref="indicatorContent" :class="cx('indicators')" v-bind="ptm('indicators')">
<li
v-for="(item, index) of value"
:key="`p-galleria-indicator-${index}`"
:class="cx('indicator', { index })"
tabindex="0"
:aria-label="ariaPageLabel(index + 1)"
:aria-selected="activeIndex === index"
:aria-controls="id + '_item_' + index"
@ -29,7 +28,7 @@
v-bind="ptm('indicator', getIndicatorPTOptions(index))"
:data-p-highlight="isIndicatorItemActive(index)"
>
<button v-if="!templates['indicator']" type="button" tabindex="-1" :class="cx('indicatorButton')" v-bind="ptm('indicatorButton', getIndicatorPTOptions(index))"></button>
<button v-if="!templates['indicator']" type="button" :tabindex="activeIndex === index ? '0' : '-1'" :class="cx('indicatorButton')" v-bind="ptm('indicatorButton', getIndicatorPTOptions(index))"></button>
<component v-if="templates.indicator" :is="templates.indicator" :index="index" />
</li>
</ul>
@ -41,6 +40,7 @@ import BaseComponent from 'primevue/basecomponent';
import ChevronLeftIcon from 'primevue/icons/chevronleft';
import ChevronRightIcon from 'primevue/icons/chevronright';
import Ripple from 'primevue/ripple';
import { DomHandler } from 'primevue/utils';
export default {
name: 'GalleriaItem',
@ -156,8 +156,32 @@ export default {
event.preventDefault();
break;
case 'ArrowRight':
this.onRightKey();
break;
case 'ArrowLeft':
this.onLeftKey();
break;
case 'Home':
this.onHomeKey();
event.preventDefault();
break;
case 'End':
this.onEndKey();
event.preventDefault();
break;
case 'Tab':
this.onTabKey();
break;
case 'ArrowDown':
case 'ArrowUp':
case 'PageUp':
case 'PageDown':
event.preventDefault();
break;
@ -165,6 +189,51 @@ export default {
break;
}
},
onRightKey() {
const indicators = [...DomHandler.find(this.$refs.indicatorContent, '[data-pc-section="indicator"]')];
const activeIndex = this.findFocusedIndicatorIndex();
this.changedFocusedIndicator(activeIndex, activeIndex + 1 === indicators.length ? indicators.length - 1 : activeIndex + 1);
},
onLeftKey() {
const activeIndex = this.findFocusedIndicatorIndex();
this.changedFocusedIndicator(activeIndex, activeIndex - 1 <= 0 ? 0 : activeIndex - 1);
},
onHomeKey() {
const activeIndex = this.findFocusedIndicatorIndex();
this.changedFocusedIndicator(activeIndex, 0);
},
onEndKey() {
const indicators = [...DomHandler.find(this.$refs.indicatorContent, '[data-pc-section="indicator"]')];
const activeIndex = this.findFocusedIndicatorIndex();
this.changedFocusedIndicator(activeIndex, indicators.length - 1);
},
onTabKey() {
const indicators = [...DomHandler.find(this.$refs.indicatorContent, '[data-pc-section="indicator"]')];
const highlightedIndex = indicators.findIndex((ind) => DomHandler.getAttribute(ind, 'data-p-highlight') === true);
const activeIndicator = DomHandler.findSingle(this.$refs.indicatorContent, '[data-pc-section="indicator"] > button[tabindex="0"]');
const activeIndex = indicators.findIndex((ind) => ind === activeIndicator.parentElement);
indicators[activeIndex].children[0].tabIndex = '-1';
indicators[highlightedIndex].children[0].tabIndex = '0';
},
findFocusedIndicatorIndex() {
const indicators = [...DomHandler.find(this.$refs.indicatorContent, '[data-pc-section="indicator"]')];
const activeIndicator = DomHandler.findSingle(this.$refs.indicatorContent, '[data-pc-section="indicator"] > button[tabindex="0"]');
return indicators.findIndex((ind) => ind === activeIndicator.parentElement);
},
changedFocusedIndicator(prevInd, nextInd) {
const indicators = [...DomHandler.find(this.$refs.indicatorContent, '[data-pc-section="indicator"]')];
indicators[prevInd].children[0].tabIndex = '-1';
indicators[nextInd].children[0].tabIndex = '0';
indicators[nextInd].children[0].focus();
},
isIndicatorItemActive(index) {
return this.activeIndex === index;
},

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

@ -32,6 +32,10 @@ export interface ImagePassThroughMethodOptions {
* Defines current inline state.
*/
state: ImageState;
/**
* Defines parent options.
*/
parent: any;
/**
* Defines passthrough(pt) options in global config.
*/

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

@ -3,7 +3,7 @@
<slot name="image" :onError="onError" :errorCallback="onError">
<img :style="imageStyle" :class="[cx('image'), imageClass]" @error="onError" v-bind="{ ...$attrs, ...ptm('image') }" />
</slot>
<button v-if="preview" ref="previewButton" type="button" :class="cx('button')" @click="onImageClick" v-bind="{ ...previewButtonProps, ...ptm('button') }">
<button v-if="preview" ref="previewButton" :aria-label="zoomImageAriaLabel" 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>
@ -212,6 +212,9 @@ export default {
zoomOutAriaLabel() {
return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.zoomOut : undefined;
},
zoomImageAriaLabel() {
return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.zoomImage : undefined;
},
closeAriaLabel() {
return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.close : undefined;
}

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

@ -30,6 +30,10 @@ export interface InlineMessagePassThroughMethodOptions {
* Defines current inline state.
*/
state: InlineMessageState;
/**
* Defines parent options.
*/
parent: any;
/**
* Defines passthrough(pt) options in global config.
*/

4
components/lib/inlinemessage/InlineMessage.vue
View File

@ -1,5 +1,5 @@
<template>
<div aria-live="polite" :class="cx('root')" v-bind="ptm('root')">
<div role="alert" aria-live="assertive" aria-atomic="true" :class="cx('root')" v-bind="ptm('root')">
<slot name="icon">
<component :is="icon ? 'span' : iconComponent" :class="cx('icon')" v-bind="ptm('icon')"></component>
</slot>
@ -10,11 +10,11 @@
</template>
<script>
import BaseInlineMessage from './BaseInlineMessage.vue';
import CheckIcon from 'primevue/icons/check';
import ExclamationTriangleIcon from 'primevue/icons/exclamationtriangle';
import InfoCircleIcon from 'primevue/icons/infocircle';
import TimesCircleIcon from 'primevue/icons/timescircle';
import BaseInlineMessage from './BaseInlineMessage.vue';
export default {
name: 'InlineMessage',

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

@ -32,12 +32,30 @@ export interface InplacePassThroughMethodOptions {
* Defines current inline state.
*/
state: InplaceState;
/**
* Defines parent options.
*/
parent: any;
/**
* Defines passthrough(pt) options in global config.
*/
global: object | undefined;
}
/**
* Custom shared passthrough(pt) option method.
*/
export interface InplaceSharedPassThroughMethodOptions {
/**
* Defines valid properties.
*/
props: InplaceProps;
/**
* Defines current inline state.
*/
state: InplaceState;
}
/**
* Custom passthrough(pt) options.
* @see {@link InplaceProps.pt}
@ -59,7 +77,7 @@ export interface InplacePassThroughOptions {
* Used to pass attributes to the Button component.
* @see {@link ButtonPassThroughOptions}
*/
closeButton?: ButtonPassThroughOptions;
closeButton?: ButtonPassThroughOptions<InplaceSharedPassThroughMethodOptions>;
/**
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}

4
components/lib/inputgroup/InputGroup.d.ts vendored
View File

@ -22,6 +22,10 @@ export interface InputGroupPassThroughMethodOptions {
* Defines instance.
*/
instance: any;
/**
* Defines parent options.
*/
parent: any;
/**
* Defines passthrough(pt) options in global config.
*/

4
components/lib/inputgroupaddon/InputGroupAddon.d.ts vendored
View File

@ -22,6 +22,10 @@ export interface InputGroupAddonPassThroughMethodOptions {
* Defines instance.
*/
instance: any;
/**
* Defines parent options.
*/
parent: any;
/**
* Defines passthrough(pt) options in global config.
*/

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

@ -29,6 +29,10 @@ export interface InputMaskPassThroughMethodOptions {
* Defines current options.
*/
context: InputMaskContext;
/**
* Defines parent options.
*/
parent: any;
/**
* Defines passthrough(pt) options in global config.
*/

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

@ -9,17 +9,17 @@
*/
import { ButtonHTMLAttributes, InputHTMLAttributes, VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { ButtonPassThroughOptionType } from '../button';
import { InputTextPassThroughOptionType } from '../inputtext';
import { ButtonPassThroughOptions } from '../button';
import { InputTextPassThroughOptions } from '../inputtext';
import { PassThroughOptions } from '../passthrough';
import { ClassComponent, GlobalComponentConstructor, Nullable, PassThrough } from '../ts-helpers';
export declare type InputNumberPassThroughOptionType = InputNumberPassThroughAttributes | ((options: InputNumberPassThroughMethodOptions) => InputNumberPassThroughAttributes | string) | string | null | undefined;
export declare type InputNumberPassThroughOptionType<T = any> = InputNumberPassThroughAttributes | ((options: InputNumberPassThroughMethodOptions<T>) => InputNumberPassThroughAttributes | string) | string | null | undefined;
/**
* Custom passthrough(pt) option method.
*/
export interface InputNumberPassThroughMethodOptions {
export interface InputNumberPassThroughMethodOptions<T> {
/**
* Defines instance.
*/
@ -32,12 +32,30 @@ export interface InputNumberPassThroughMethodOptions {
* Defines current inline state.
*/
state: InputNumberState;
/**
* Defines parent instance.
*/
parent: T;
/**
* Defines passthrough(pt) options in global config.
*/
global: object | undefined;
}
/**
* Custom shared passthrough(pt) option method.
*/
export interface InputNumberSharedPassThroughMethodOptions {
/**
* Defines valid properties.
*/
props: InputNumberProps;
/**
* Defines current inline state.
*/
state: InputNumberState;
}
/**
* Custom input event.
* @see {@link InputNumberEmits.input}
@ -72,30 +90,30 @@ export interface InputNumberBlurEvent {
* Custom passthrough(pt) options.
* @see {@link InputNumberProps.pt}
*/
export interface InputNumberPassThroughOptions {
export interface InputNumberPassThroughOptions<T = any> {
/**
* Used to pass attributes to the root's DOM element.
*/
root?: InputNumberPassThroughOptionType;
root?: InputNumberPassThroughOptionType<T>;
/**
* Used to pass attributes to the Input component.
* @see {@link InputTextPassThroughOptionType}
* Used to pass attributes to the InputText component.
* @see {@link InputTextPassThroughOptions}
*/
input?: InputTextPassThroughOptionType;
input?: InputTextPassThroughOptions<InputNumberSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the button group's DOM element.
*/
buttonGroup?: InputNumberPassThroughOptionType;
buttonGroup?: InputNumberPassThroughOptionType<T>;
/**
* Used to pass attributes to the Button component.
* @see {@link ButtonPassThroughOptions}
*/
incrementButton?: ButtonPassThroughOptionType;
incrementButton?: ButtonPassThroughOptions<InputNumberSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the Button component.
* @see {@link ButtonPassThroughOptions}
*/
decrementButton?: ButtonPassThroughOptionType;
decrementButton?: ButtonPassThroughOptions<InputNumberSharedPassThroughMethodOptions>;
/**
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}

15
components/lib/inputnumber/InputNumber.vue
View File

@ -22,7 +22,8 @@
@click="onInputClick"
@focus="onInputFocus"
@blur="onInputBlur"
v-bind="{ ...inputProps, ...ptm('input') }"
v-bind="inputProps"
:pt="ptm('input')"
:unstyled="unstyled"
data-pc-section="input"
/>
@ -33,7 +34,8 @@
:disabled="disabled"
:tabindex="-1"
aria-hidden="true"
v-bind="{ ...incrementButtonProps, ...ptm('incrementButton') }"
v-bind="incrementButtonProps"
:pt="ptm('incrementButton')"
:unstyled="unstyled"
data-pc-section="incrementbutton"
>
@ -49,7 +51,8 @@
:disabled="disabled"
:tabindex="-1"
aria-hidden="true"
v-bind="{ ...decrementButtonProps, ...ptm('decrementButton') }"
v-bind="decrementButtonProps"
:pt="ptm('decrementButton')"
:unstyled="unstyled"
data-pc-section="decrementbutton"
>
@ -67,7 +70,8 @@
:disabled="disabled"
:tabindex="-1"
aria-hidden="true"
v-bind="{ ...incrementButtonProps, ...ptm('incrementButton') }"
v-bind="incrementButtonProps"
:pt="ptm('incrementButton')"
:unstyled="unstyled"
data-pc-section="incrementbutton"
>
@ -84,7 +88,8 @@
:disabled="disabled"
:tabindex="-1"
aria-hidden="true"
v-bind="{ ...decrementButtonProps, ...ptm('decrementButton') }"
v-bind="decrementButtonProps"
:pt="ptm('decrementButton')"
:unstyled="unstyled"
data-pc-section="decrementbutton"
>

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

@ -30,6 +30,10 @@ export interface InputSwitchPassThroughMethodOptions {
* Defines current inline state.
*/
state: InputSwitchState;
/**
* Defines parent options.
*/
parent: any;
/**
* Defines passthrough(pt) options in global config.
*/

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

@ -12,12 +12,12 @@ import { ComponentHooks } from '../basecomponent';
import { PassThroughOptions } from '../passthrough';
import { ClassComponent, GlobalComponentConstructor, Nullable, PassThrough } from '../ts-helpers';
export declare type InputTextPassThroughOptionType = InputTextPassThroughAttributes | ((options: InputTextPassThroughMethodOptions) => InputTextPassThroughAttributes | string) | string | null | undefined;
export declare type InputTextPassThroughOptionType<T = any> = InputTextPassThroughAttributes | ((options: InputTextPassThroughMethodOptions<T>) => InputTextPassThroughAttributes | string) | string | null | undefined;
/**
* Custom passthrough(pt) option method.
*/
export interface InputTextPassThroughMethodOptions {
export interface InputTextPassThroughMethodOptions<T = any> {
/**
* Defines instance.
*/
@ -30,6 +30,10 @@ export interface InputTextPassThroughMethodOptions {
* Defines current options.
*/
context: InputTextContext;
/**
* Defines parent instance.
*/
parent: T;
/**
* Defines passthrough(pt) options in global config.
*/
@ -40,11 +44,11 @@ export interface InputTextPassThroughMethodOptions {
* Custom passthrough(pt) options.
* @see {@link InputTextProps.pt}
*/
export interface InputTextPassThroughOptions {
export interface InputTextPassThroughOptions<T = any> {
/**
* Used to pass attributes to the root's DOM element.
*/
root?: InputTextPassThroughOptionType;
root?: InputTextPassThroughOptionType<T>;
/**
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}

18
components/lib/inputtext/InputText.vue
View File

@ -1,5 +1,5 @@
<template>
<input :class="cx('root')" :value="modelValue" @input="onInput" v-bind="ptm('root', ptmParams)" data-pc-name="inputtext" />
<input :class="cx('root')" :value="modelValue" @input="onInput" v-bind="getPTOptions('root')" data-pc-name="inputtext" />
</template>
<script>
@ -10,6 +10,14 @@ export default {
extends: BaseInputText,
emits: ['update:modelValue'],
methods: {
getPTOptions(key) {
return this.ptm(key, {
context: {
filled: this.filled,
disabled: this.$attrs.disabled || this.$attrs.disabled === ''
}
});
},
onInput(event) {
this.$emit('update:modelValue', event.target.value);
}
@ -17,14 +25,6 @@ export default {
computed: {
filled() {
return this.modelValue != null && this.modelValue.toString().length > 0;
},
ptmParams() {
return {
context: {
filled: this.filled,
disabled: this.$attrs.disabled || this.$attrs.disabled === ''
}
};
}
}
};

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

@ -29,6 +29,10 @@ export interface KnobPassThroughMethodOptions {
* Defines current inline state.
*/
state: KnobState;
/**
* Defines parent options.
*/
parent: any;
/**
* Defines passthrough(pt) options in global config.
*/

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

@ -35,6 +35,10 @@ export interface ListboxPassThroughMethodOptions {
* Defines current options.
*/
context: ListboxContext;
/**
* Defines parent options.
*/
parent: any;
/**
* Defines passthrough(pt) options in global config.
*/

5
components/lib/listbox/Listbox.vue
View File

@ -228,6 +228,7 @@ export default {
onListFocus(event) {
this.focused = true;
this.focusedOptionIndex = this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : -1;
this.autoUpdateModel();
this.$emit('focus', event);
},
onListBlur(event) {
@ -327,7 +328,7 @@ export default {
let metaSelection = this.optionTouched ? false : this.metaKeySelection;
if (metaSelection) {
let metaKey = event.metaKey || event.ctrlKey;
let metaKey = event && (event.metaKey || event.ctrlKey);
if (selected) {
if (metaKey) {
@ -632,7 +633,7 @@ export default {
}
},
autoUpdateModel() {
if (this.selectOnFocus && this.autoOptionFocus && !this.hasSelectedOption && !this.multiple) {
if (this.selectOnFocus && this.autoOptionFocus && !this.hasSelectedOption && !this.multiple && this.focused) {
this.focusedOptionIndex = this.findFirstFocusedOptionIndex();
this.onOptionSelect(null, this.visibleOptions[this.focusedOptionIndex]);
}

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

@ -35,6 +35,10 @@ export interface MegaMenuPassThroughMethodOptions {
* Defines current options.
*/
context: MegaMenuContext;
/**
* Defines parent options.
*/
parent: any;
/**
* Defines passthrough(pt) options in global config.
*/

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

@ -37,6 +37,10 @@ export interface MenuPassThroughMethodOptions {
* Defines current options.
*/
context: MenuContext;
/**
* Defines parent options.
*/
parent: any;
/**
* Defines passthrough(pt) options in global config.
*/

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

@ -35,6 +35,10 @@ export interface MenubarPassThroughMethodOptions {
* Defines current options.
*/
context: MenubarContext;
/**
* Defines parent options.
*/
parent: any;
/**
* Defines passthrough(pt) options in global config.
*/

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

@ -12,14 +12,14 @@ import { ComponentHooks } from '../basecomponent';
import { PassThroughOptions } from '../passthrough';
import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
export declare type MessagePassThroughOptionType = MessagePassThroughAttributes | ((options: MessagePassThroughMethodOptions) => MessagePassThroughAttributes | string) | string | null | undefined;
export declare type MessagePassThroughOptionType<T = any> = MessagePassThroughAttributes | ((options: MessagePassThroughMethodOptions<T>) => MessagePassThroughAttributes | string) | string | null | undefined;
export declare type MessagePassThroughTransitionType = TransitionProps | ((options: MessagePassThroughMethodOptions) => TransitionProps) | undefined;
export declare type MessagePassThroughTransitionType<T = any> = TransitionProps | ((options: MessagePassThroughMethodOptions<T>) => TransitionProps) | undefined;
/**
* Custom passthrough(pt) option method.
*/
export interface MessagePassThroughMethodOptions {
export interface MessagePassThroughMethodOptions<T = any> {
/**
* Defines instance.
*/
@ -32,6 +32,10 @@ export interface MessagePassThroughMethodOptions {
* Defines current inline state.
*/
state: MessageState;
/**
* Defines parent instance.
*/
parent: T;
/**
* Defines passthrough(pt) options in global config.
*/
@ -42,41 +46,41 @@ export interface MessagePassThroughMethodOptions {
* Custom passthrough(pt) options.
* @see {@link MessageProps.pt}
*/
export interface MessagePassThroughOptions {
export interface MessagePassThroughOptions<T = any> {
/**
* Used to pass attributes to the root's DOM element.
*/
root?: MessagePassThroughOptionType;
root?: MessagePassThroughOptionType<T>;
/**
* Used to pass attributes to the wrapper's DOM element.
*/
wrapper?: MessagePassThroughOptionType;
wrapper?: MessagePassThroughOptionType<T>;
/**
* Used to pass attributes to the icon's DOM element.
*/
icon?: MessagePassThroughOptionType;
icon?: MessagePassThroughOptionType<T>;
/**
* Used to pass attributes to the text's DOM element.
*/
text?: MessagePassThroughOptionType;
text?: MessagePassThroughOptionType<T>;
/**
* Used to pass attributes to the button's DOM element.
* @deprecated since v3.30.2. Use 'closeButton' option.
*/
button?: MessagePassThroughOptionType;
button?: MessagePassThroughOptionType<T>;
/**
* Used to pass attributes to the button's DOM element.
*/
closeButton?: MessagePassThroughOptionType;
closeButton?: MessagePassThroughOptionType<T>;
/**
* Used to pass attributes to the button icon's DOM element.
* @deprecated since v3.30.2. Use 'closeIcon' option.
*/
buttonIcon?: MessagePassThroughOptionType;
buttonIcon?: MessagePassThroughOptionType<T>;
/**
* Used to pass attributes to the button icon's DOM element.
*/
closeIcon?: MessagePassThroughOptionType;
closeIcon?: MessagePassThroughOptionType<T>;
/**
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}
@ -85,7 +89,7 @@ export interface MessagePassThroughOptions {
/**
* Used to control Vue Transition API.
*/
transition?: MessagePassThroughTransitionType;
transition?: MessagePassThroughTransitionType<T>;
}
/**

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

@ -37,6 +37,10 @@ export interface MultiSelectPassThroughMethodOptions {
* Defines current options.
*/
context: MultiSelectContext;
/**
* Defines parent options.
*/
parent: any;
/**
* Defines passthrough(pt) options in global config.
*/

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

@ -9,7 +9,7 @@
*/
import { ButtonHTMLAttributes, HTMLAttributes, TransitionProps, VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { ButtonPassThroughOptionType } from '../button';
import { ButtonPassThroughOptions } from '../button';
import { PassThroughOptions } from '../passthrough';
import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
@ -37,12 +37,30 @@ export interface OrderListPassThroughMethodOptions {
* Defines current options.
*/
context: OrderListContext;
/**
* Defines parent options.
*/
parent: any;
/**
* Defines passthrough(pt) options in global config.
*/
global: object | undefined;
}
/**
* Custom shared passthrough(pt) option method.
*/
export interface OrderListSharedPassThroughMethodOptions {
/**
* Defines valid properties.
*/
props: OrderListProps;
/**
* Defines current inline state.
*/
state: OrderListState;
}
/**
* Custom reorder event
* @see {@link OrderListEmits.reorder}
@ -93,19 +111,19 @@ export interface OrderListPassThroughOptions {
/**
* Used to pass attributes to the Button component.
*/
moveUpButton?: ButtonPassThroughOptionType;
moveUpButton?: ButtonPassThroughOptions<OrderListSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the Button component.
*/
moveTopButton?: ButtonPassThroughOptionType;
moveTopButton?: ButtonPassThroughOptions<OrderListSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the Button component.
*/
moveDownButton?: ButtonPassThroughOptionType;
moveDownButton?: ButtonPassThroughOptions<OrderListSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the Button component.
*/
moveBottomButton?: ButtonPassThroughOptionType;
moveBottomButton?: ButtonPassThroughOptions<OrderListSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the container's DOM element.
*/

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

@ -2,28 +2,28 @@
<div :class="cx('root')" v-bind="ptm('root')">
<div :class="cx('controls')" v-bind="ptm('controls')">
<slot name="controlsstart"></slot>
<OLButton type="button" @click="moveUp" :aria-label="moveUpAriaLabel" :disabled="moveDisabled()" :pt="ptm('moveUpButton')" v-bind="moveUpButtonProps" data-pc-section="moveupbutton" :unstyled="unstyled">
<OLButton type="button" @click="moveUp" :aria-label="moveUpAriaLabel" :disabled="moveDisabled()" v-bind="moveUpButtonProps" :pt="ptm('moveUpButton')" :unstyled="unstyled" data-pc-section="moveupbutton">
<template #icon>
<slot name="moveupicon">
<AngleUpIcon v-bind="ptm('moveUpButton')['icon']" data-pc-section="moveupicon" />
</slot>
</template>
</OLButton>
<OLButton type="button" @click="moveTop" :aria-label="moveTopAriaLabel" :disabled="moveDisabled()" :pt="ptm('moveTopButton')" v-bind="moveTopButtonProps" data-pc-section="movetopbutton" :unstyled="unstyled">
<OLButton type="button" @click="moveTop" :aria-label="moveTopAriaLabel" :disabled="moveDisabled()" v-bind="moveTopButtonProps" :pt="ptm('moveTopButton')" :unstyled="unstyled" data-pc-section="movetopbutton">
<template #icon>
<slot name="movetopicon">
<AngleDoubleUpIcon v-bind="ptm('moveTopButton')['icon']" data-pc-section="movetopicon" />
</slot>
</template>
</OLButton>
<OLButton type="button" @click="moveDown" :aria-label="moveDownAriaLabel" :disabled="moveDisabled()" :pt="ptm('moveDownButton')" v-bind="moveDownButtonProps" data-pc-section="movedownbutton" :unstyled="unstyled">
<OLButton type="button" @click="moveDown" :aria-label="moveDownAriaLabel" :disabled="moveDisabled()" v-bind="moveDownButtonProps" :pt="ptm('moveDownButton')" :unstyled="unstyled" data-pc-section="movedownbutton">
<template #icon>
<slot name="movedownicon">
<AngleDownIcon v-bind="ptm('moveDownButton')['icon']" data-pc-section="movedownicon" />
</slot>
</template>
</OLButton>
<OLButton type="button" @click="moveBottom" :aria-label="moveBottomAriaLabel" :disabled="moveDisabled()" :pt="ptm('moveBottomButton')" v-bind="moveBottomButtonProps" data-pc-section="movebottombutton" :unstyled="unstyled">
<OLButton type="button" @click="moveBottom" :aria-label="moveBottomAriaLabel" :disabled="moveDisabled()" v-bind="moveBottomButtonProps" :pt="ptm('moveBottomButton')" :unstyled="unstyled" data-pc-section="movebottombutton">
<template #icon>
<slot name="movebottomicon">
<AngleDoubleDownIcon v-bind="ptm('moveBottomButton')['icon']" data-pc-section="movebottomicon" />

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

@ -34,6 +34,10 @@ export interface OrganizationChartPassThroughMethodOptions {
* Defines current options.
*/
context: OrganizationChartContext;
/**
* Defines parent options.
*/
parent: any;
/**
* Defines passthrough(pt) options in global config.
*/

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

@ -32,6 +32,10 @@ export interface OverlayPanelPassThroughMethodOptions {
* Defines current inline state.
*/
state: OverlayPanelState;
/**
* Defines parent options.
*/
parent: any;
/**
* Defines passthrough(pt) options in global config.
*/

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

@ -9,17 +9,17 @@
*/
import { VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { DropdownPassThroughOptionType } from '../dropdown';
import { InputNumberPassThroughOptionType } from '../inputnumber';
import { DropdownPassThroughOptions } from '../dropdown';
import { InputNumberPassThroughOptions } from '../inputnumber';
import { PassThroughOptions } from '../passthrough';
import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
export declare type PaginatorPassThroughOptionType = PaginatorPassThroughAttributes | ((options: PaginatorPassThroughMethodOptions) => PaginatorPassThroughAttributes | string) | string | null | undefined;
export declare type PaginatorPassThroughOptionType<T = any> = PaginatorPassThroughAttributes | ((options: PaginatorPassThroughMethodOptions<T>) => PaginatorPassThroughAttributes | string) | string | null | undefined;
/**
* Custom passthrough(pt) option method.
*/
export interface PaginatorPassThroughMethodOptions {
export interface PaginatorPassThroughMethodOptions<T> {
/**
* Defines instance.
*/
@ -32,6 +32,10 @@ export interface PaginatorPassThroughMethodOptions {
* Defines current inline state.
*/
state: PaginatorState;
/**
* Defines parent instance.
*/
parent: T;
/**
* Defines current options.
*/
@ -42,86 +46,100 @@ export interface PaginatorPassThroughMethodOptions {
global: object | undefined;
}
/**
* Custom shared passthrough(pt) option method.
*/
export interface PaginatorSharedPassThroughMethodOptions {
/**
* Defines valid properties.
*/
props: PaginatorProps;
/**
* Defines current inline state.
*/
state: PaginatorState;
}
/**
* Custom passthrough(pt) options.
* @see {@link PaginatorProps.pt}
*/
export interface PaginatorPassThroughOptions {
export interface PaginatorPassThroughOptions<T = any> {
/**
* Used to pass attributes to the paginator wrapper's DOM element.
*/
paginatorWrapper?: PaginatorPassThroughOptionType;
paginatorWrapper?: PaginatorPassThroughOptionType<T> | any;
/**
* Used to pass attributes to the root's DOM element.
*/
root?: PaginatorPassThroughOptionType;
root?: PaginatorPassThroughOptionType<T>;
/**
* Used to pass attributes to the start's DOM element.
*/
start?: PaginatorPassThroughOptionType;
start?: PaginatorPassThroughOptionType<T>;
/**
* Used to pass attributes to the first page button's DOM element.
*/
firstPageButton?: PaginatorPassThroughOptionType;
firstPageButton?: PaginatorPassThroughOptionType<T>;
/**
* Used to pass attributes to the first page icon's DOM element.
*/
firstPageIcon?: PaginatorPassThroughOptionType;
firstPageIcon?: PaginatorPassThroughOptionType<T>;
/**
* Used to pass attributes to the prev page button's DOM element.
*/
previousPageButton?: PaginatorPassThroughOptionType;
previousPageButton?: PaginatorPassThroughOptionType<T>;
/**
* Used to pass attributes to the prev page icon's DOM element.
*/
previousPageIcon?: PaginatorPassThroughOptionType;
previousPageIcon?: PaginatorPassThroughOptionType<T>;
/**
* Used to pass attributes to the next page button's DOM element.
*/
nextPageButton?: PaginatorPassThroughOptionType;
nextPageButton?: PaginatorPassThroughOptionType<T>;
/**
* Used to pass attributes to the next page icon's DOM element.
*/
nextPageIcon?: PaginatorPassThroughOptionType;
nextPageIcon?: PaginatorPassThroughOptionType<T>;
/**
* Used to pass attributes to the last page button's DOM element.
*/
lastPageButton?: PaginatorPassThroughOptionType;
lastPageButton?: PaginatorPassThroughOptionType<T>;
/**
* Used to pass attributes to the last page icon's DOM element.
*/
lastPageIcon?: PaginatorPassThroughOptionType;
lastPageIcon?: PaginatorPassThroughOptionType<T>;
/**
* Used to pass attributes to the pages's DOM element.
*/
pages?: PaginatorPassThroughOptionType;
pages?: PaginatorPassThroughOptionType<T>;
/**
* Used to pass attributes to the page button's DOM element.
*/
pageButton?: PaginatorPassThroughOptionType;
pageButton?: PaginatorPassThroughOptionType<T>;
/**
* Used to pass attributes to the current's DOM element.
*/
current?: PaginatorPassThroughOptionType;
current?: PaginatorPassThroughOptionType<T>;
/**
* Used to pass attributes to the Dropdown component.
* @see {@link DropdownPassThroughOptionType}
* @see {@link DropdownPassThroughOptions}
*/
rowPerPageDropdown?: DropdownPassThroughOptionType;
rowPerPageDropdown?: DropdownPassThroughOptions<PaginatorSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the Dropdown component.
* @see {@link DropdownPassThroughOptionType}
* @see {@link DropdownPassThroughOptions}
*/
jumpToPageDropdown?: DropdownPassThroughOptionType;
jumpToPageDropdown?: DropdownPassThroughOptions<PaginatorSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the Dropdown component.
* @see {@link InputNumberPassThroughOptionType}
* @see {@link InputNumberPassThroughOptions}
*/
jumpToPageInput?: InputNumberPassThroughOptionType;
jumpToPageInput?: InputNumberPassThroughOptions<PaginatorSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the end's DOM element.
*/
end?: PaginatorPassThroughOptionType;
end?: PaginatorPassThroughOptionType<T>;
/**
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}

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

@ -32,6 +32,10 @@ export interface PanelPassThroughMethodOptions {
* Defines current inline state.
*/
state: PanelState;
/**
* Defines parent options.
*/
parent: any;
/**
* Defines passthrough(pt) options in global config.
*/

2
components/lib/panel/Panel.vue
View File

@ -81,7 +81,7 @@ export default {
return UniqueComponentId();
},
buttonAriaLabel() {
return this.toggleButtonProps && this.toggleButtonProps['aria-label'] ? this.toggleButtonProps['aria-label'] : this.header;
return this.toggleButtonProps && this.toggleButtonProps.ariaLabel ? this.toggleButtonProps.ariaLabel : this.header;
}
},
components: {

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

@ -37,6 +37,10 @@ export interface PanelMenuPassThroughMethodOptions {
* Defines current options.
*/
context: PanelMenuContext;
/**
* Defines parent options.
*/
parent: any;
/**
* Defines passthrough(pt) options in global config.
*/

752
components/lib/passthrough/tailwind/index.js
View File

@ -838,16 +838,24 @@ export default {
class: 'absolute flex'
},
button: {
root: ({ parent }) => ({
class: [
'w-16 !h-16 !rounded-full justify-center z-10',
{
'rotate-45': parent.state.d_visible
}
]
}),
label: {
class: 'hidden'
root: ({ parent }) => {
return {
class: [
'text-white dark:text-gray-900 bg-blue-500 dark:bg-blue-400 border border-blue-500 dark:border-blue-400 hover:bg-blue-600 dark:hover:bg-blue-500 hover:border-blue-600 dark:hover:border-blue-500 focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(157,193,251,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(147,197,253,0.7),0_1px_2px_0_rgba(0,0,0,0)]',
'flex items-center justify-center',
'transition duration-200 ease-in-out',
'focus:outline-none focus:outline-offset-0',
'w-16 !h-16 !rounded-full justify-center z-10',
{
'rotate-45': parent.state.d_visible
}
]
};
},
label: () => {
return {
class: 'hidden'
};
}
},
menu: {
@ -884,19 +892,155 @@ export default {
class: ['inline-flex relative', 'rounded-md', { 'shadow-lg': props.raised }]
}),
button: {
root: ({ parent }) => ({
class: ['rounded-r-none border-r-0', { 'rounded-l-full': parent.props.rounded }]
}),
icon: {
class: 'mr-2'
root: ({ props, parent }) => {
return {
class: [
'rounded-r-none border-r-0',
{ 'rounded-l-full': parent.props.rounded },
{
'text-white dark:text-gray-900 bg-blue-500 dark:bg-blue-400 border border-blue-500 dark:border-blue-400 hover:bg-blue-600 dark:hover:bg-blue-500 hover:border-blue-600 dark:hover:border-blue-500 focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(157,193,251,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(147,197,253,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
!parent.props.link && parent.props.severity === null && !parent.props.text && !parent.props.outlined && !parent.props.plain,
'text-blue-600 bg-transparent border-transparent focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(157,193,251,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(147,197,253,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
parent.props.link
},
{
'focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(176,185,198,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(203,213,225,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
props.severity === 'secondary',
'focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(136,234,172,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(134,239,172,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
props.severity === 'success',
'focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(157,193,251,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(147,197,253,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
props.severity === 'info',
'focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(250,207,133,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(252,211,77,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
props.severity === 'warning',
'focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(212,170,251,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(216,180,254,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
props.severity === 'help',
'focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(247,162,162,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(252,165,165,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
props.severity === 'danger'
},
{
'text-white dark:text-gray-900 bg-gray-500 dark:bg-gray-400 border border-gray-500 dark:border-gray-400 hover:bg-gray-600 dark:hover:bg-gray-500 hover:border-gray-600 dark:hover:border-gray-500':
props.severity === 'secondary' && !props.text && !props.outlined && !props.plain,
'text-white dark:text-gray-900 bg-green-500 dark:bg-green-400 border border-green-500 dark:border-green-400 hover:bg-green-600 dark:hover:bg-green-500 hover:border-green-600 dark:hover:border-green-500':
props.severity === 'success' && !props.text && !props.outlined && !props.plain,
'text-white dark:text-gray-900 dark:bg-blue-400 bg-blue-500 dark:bg-blue-400 border border-blue-500 dark:border-blue-400 hover:bg-blue-600 hover:border-blue-600 dark:hover:bg-blue-500 dark:hover:border-blue-500':
props.severity === 'info' && !props.text && !props.outlined && !props.plain,
'text-white dark:text-gray-900 bg-orange-500 dark:bg-orange-400 border border-orange-500 dark:border-orange-400 hover:bg-orange-600 dark:hover:bg-orange-500 hover:border-orange-600 dark:hover:border-orange-500':
props.severity === 'warning' && !props.text && !props.outlined && !props.plain,
'text-white dark:text-gray-900 bg-purple-500 dark:bg-purple-400 border border-purple-500 dark:border-purple-400 hover:bg-purple-600 dark:hover:bg-purple-500 hover:border-purple-600 dark:hover:border-purple-500':
props.severity === 'help' && !props.text && !props.outlined && !props.plain,
'text-white dark:text-gray-900 bg-red-500 dark:bg-red-400 border border-red-500 dark:border-red-400 hover:bg-red-600 dark:hover:bg-red-500 hover:border-red-600 dark:hover:border-red-500':
props.severity === 'danger' && !props.text && !props.outlined && !props.plain
},
{ 'shadow-lg': props.raised },
{ 'rounded-md': !props.rounded, 'rounded-full': props.rounded },
{
'bg-transparent border-transparent': props.text && !props.plain,
'text-blue-500 dark:text-blue-400 hover:bg-blue-300/20': props.text && (props.severity === null || props.severity === 'info') && !props.plain,
'text-gray-500 dark:text-gray-400 hover:bg-gray-300/20': props.text && props.severity === 'secondary' && !props.plain,
'text-green-500 dark:text-green-400 hover:bg-green-300/20': props.text && props.severity === 'success' && !props.plain,
'text-orange-500 dark:text-orange-400 hover:bg-orange-300/20': props.text && props.severity === 'warning' && !props.plain,
'text-purple-500 dark:text-purple-400 hover:bg-purple-300/20': props.text && props.severity === 'help' && !props.plain,
'text-red-500 dark:text-red-400 hover:bg-red-300/20': props.text && props.severity === 'danger' && !props.plain
},
{ 'shadow-lg': props.raised && props.text },
{
'text-gray-500 hover:bg-gray-300/20': props.plain && props.text,
'text-gray-500 border border-gray-500 hover:bg-gray-300/20': props.plain && props.outlined,
'text-white bg-gray-500 border border-gray-500 hover:bg-gray-600 hover:border-gray-600': props.plain && !props.outlined && !props.text
},
{
'bg-transparent border': props.outlined && !props.plain,
'text-blue-500 dark:text-blue-400 border border-blue-500 dark:border-blue-400 hover:bg-blue-300/20': props.outlined && (props.severity === null || props.severity === 'info') && !props.plain,
'text-gray-500 dark:text-gray-400 border border-gray-500 dark:border-gray-400 hover:bg-gray-300/20': props.outlined && props.severity === 'secondary' && !props.plain,
'text-green-500 dark:text-green-400 border border-green-500 dark:border-green-400 hover:bg-green-300/20': props.outlined && props.severity === 'success' && !props.plain,
'text-orange-500 dark:text-orange-400 border border-orange-500 dark:border-orange-400 hover:bg-orange-300/20': props.outlined && props.severity === 'warning' && !props.plain,
'text-purple-500 dark:text-purple-400 border border-purple-500 dark:border-purple-400 hover:bg-purple-300/20': props.outlined && props.severity === 'help' && !props.plain,
'text-red-500 dark:text-red-400 border border-red-500 dark:border-red-400 hover:bg-red-300/20': props.outlined && props.severity === 'danger' && !props.plain
},
{ 'px-4 py-3 text-base': props.size === null, 'text-xs py-2 px-3': props.size === 'small', 'text-xl py-3 px-4': props.size === 'large' }
]
};
},
icon: () => {
return {
class: 'mr-2'
};
}
},
menubutton: {
root: ({ parent }) => ({
class: ['rounded-l-none', { 'rounded-r-full': parent.props.rounded }]
}),
label: {
class: 'hidden'
root: ({ props, parent }) => {
return {
class: [
'rounded-l-none',
{ 'rounded-r-full': parent.props.rounded },
{
'text-white dark:text-gray-900 bg-blue-500 dark:bg-blue-400 border border-blue-500 dark:border-blue-400 hover:bg-blue-600 dark:hover:bg-blue-500 hover:border-blue-600 dark:hover:border-blue-500 focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(157,193,251,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(147,197,253,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
!parent.props.link && parent.props.severity === null && !parent.props.text && !parent.props.outlined && !parent.props.plain,
'text-blue-600 bg-transparent border-transparent focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(157,193,251,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(147,197,253,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
parent.props.link
},
{
'focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(176,185,198,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(203,213,225,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
props.severity === 'secondary',
'focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(136,234,172,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(134,239,172,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
props.severity === 'success',
'focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(157,193,251,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(147,197,253,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
props.severity === 'info',
'focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(250,207,133,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(252,211,77,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
props.severity === 'warning',
'focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(212,170,251,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(216,180,254,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
props.severity === 'help',
'focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(247,162,162,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(252,165,165,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
props.severity === 'danger'
},
{
'text-white dark:text-gray-900 bg-gray-500 dark:bg-gray-400 border border-gray-500 dark:border-gray-400 hover:bg-gray-600 dark:hover:bg-gray-500 hover:border-gray-600 dark:hover:border-gray-500':
props.severity === 'secondary' && !props.text && !props.outlined && !props.plain,
'text-white dark:text-gray-900 bg-green-500 dark:bg-green-400 border border-green-500 dark:border-green-400 hover:bg-green-600 dark:hover:bg-green-500 hover:border-green-600 dark:hover:border-green-500':
props.severity === 'success' && !props.text && !props.outlined && !props.plain,
'text-white dark:text-gray-900 dark:bg-blue-400 bg-blue-500 dark:bg-blue-400 border border-blue-500 dark:border-blue-400 hover:bg-blue-600 hover:border-blue-600 dark:hover:bg-blue-500 dark:hover:border-blue-500':
props.severity === 'info' && !props.text && !props.outlined && !props.plain,
'text-white dark:text-gray-900 bg-orange-500 dark:bg-orange-400 border border-orange-500 dark:border-orange-400 hover:bg-orange-600 dark:hover:bg-orange-500 hover:border-orange-600 dark:hover:border-orange-500':
props.severity === 'warning' && !props.text && !props.outlined && !props.plain,
'text-white dark:text-gray-900 bg-purple-500 dark:bg-purple-400 border border-purple-500 dark:border-purple-400 hover:bg-purple-600 dark:hover:bg-purple-500 hover:border-purple-600 dark:hover:border-purple-500':
props.severity === 'help' && !props.text && !props.outlined && !props.plain,
'text-white dark:text-gray-900 bg-red-500 dark:bg-red-400 border border-red-500 dark:border-red-400 hover:bg-red-600 dark:hover:bg-red-500 hover:border-red-600 dark:hover:border-red-500':
props.severity === 'danger' && !props.text && !props.outlined && !props.plain
},
{ 'shadow-lg': props.raised },
{ 'rounded-md': !props.rounded, 'rounded-full': props.rounded },
{
'bg-transparent border-transparent': props.text && !props.plain,
'text-blue-500 dark:text-blue-400 hover:bg-blue-300/20': props.text && (props.severity === null || props.severity === 'info') && !props.plain,
'text-gray-500 dark:text-gray-400 hover:bg-gray-300/20': props.text && props.severity === 'secondary' && !props.plain,
'text-green-500 dark:text-green-400 hover:bg-green-300/20': props.text && props.severity === 'success' && !props.plain,
'text-orange-500 dark:text-orange-400 hover:bg-orange-300/20': props.text && props.severity === 'warning' && !props.plain,
'text-purple-500 dark:text-purple-400 hover:bg-purple-300/20': props.text && props.severity === 'help' && !props.plain,
'text-red-500 dark:text-red-400 hover:bg-red-300/20': props.text && props.severity === 'danger' && !props.plain
},
{ 'shadow-lg': props.raised && props.text },
{
'text-gray-500 hover:bg-gray-300/20': props.plain && props.text,
'text-gray-500 border border-gray-500 hover:bg-gray-300/20': props.plain && props.outlined,
'text-white bg-gray-500 border border-gray-500 hover:bg-gray-600 hover:border-gray-600': props.plain && !props.outlined && !props.text
},
{
'bg-transparent border': props.outlined && !props.plain,
'text-blue-500 dark:text-blue-400 border border-blue-500 dark:border-blue-400 hover:bg-blue-300/20': props.outlined && (props.severity === null || props.severity === 'info') && !props.plain,
'text-gray-500 dark:text-gray-400 border border-gray-500 dark:border-gray-400 hover:bg-gray-300/20': props.outlined && props.severity === 'secondary' && !props.plain,
'text-green-500 dark:text-green-400 border border-green-500 dark:border-green-400 hover:bg-green-300/20': props.outlined && props.severity === 'success' && !props.plain,
'text-orange-500 dark:text-orange-400 border border-orange-500 dark:border-orange-400 hover:bg-orange-300/20': props.outlined && props.severity === 'warning' && !props.plain,
'text-purple-500 dark:text-purple-400 border border-purple-500 dark:border-purple-400 hover:bg-purple-300/20': props.outlined && props.severity === 'help' && !props.plain,
'text-red-500 dark:text-red-400 border border-red-500 dark:border-red-400 hover:bg-red-300/20': props.outlined && props.severity === 'danger' && !props.plain
},
{ 'px-4 py-3 text-base': props.size === null, 'text-xs py-2 px-3': props.size === 'small', 'text-xl py-3 px-4': props.size === 'large' }
]
};
},
label: () => {
return {
class: 'hidden'
};
}
}
},
@ -922,44 +1066,73 @@ export default {
root: {
class: 'w-full inline-flex'
},
input: ({ props }) => ({
class: [
{
'rounded-tr-none rounded-br-none': props.showButtons && props.buttonLayout == 'stacked'
},
{
'order-2': props.buttonLayout == 'horizontal'
}
]
}),
input: {
root: ({ parent }) => {
return {
class: [
// { test: parent }
'm-0',
'font-sans text-gray-600 dark:text-white/80 bg-white dark:bg-gray-900 border border-gray-300 dark:border-blue-900/40 transition-colors duration-200 appearance-none rounded-lg',
'p-3 text-base',
{
'rounded-tr-none rounded-br-none': parent.props.showButtons && parent.props.buttonLayout == 'stacked'
},
{
'order-2': parent.props.buttonLayout == 'horizontal'
}
]
};
}
},
buttongroup: ({ props }) => ({
class: [{ 'flex flex-col': props.showButtons && props.buttonLayout == 'stacked' }]
}),
incrementbutton: ({ props }) => ({
class: [
'flex !items-center !justify-center',
{
'rounded-br-none rounded-bl-none rounded-bl-none !p-0 flex-1 w-[3rem]': props.showButtons && props.buttonLayout == 'stacked'
},
{
'order-3': props.buttonLayout == 'horizontal'
}
]
}),
label: {
class: 'hidden'
incrementbutton: {
root: ({ parent }) => {
return {
class: [
'text-white dark:text-gray-900 bg-blue-500 dark:bg-blue-400 border border-blue-500 dark:border-blue-400 hover:bg-blue-600 dark:hover:bg-blue-500 hover:border-blue-600 dark:hover:border-blue-500 focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(157,193,251,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(147,197,253,0.7),0_1px_2px_0_rgba(0,0,0,0)]',
'flex items-center justify-center',
'transition duration-200 ease-in-out',
'focus:outline-none focus:outline-offset-0',
{
'rounded-md rounded-br-none rounded-bl-none rounded-bl-none !p-0 flex-1 w-[3rem]': parent.props.showButtons && parent.props.buttonLayout == 'stacked'
},
{
'order-3 px-4 py-3 text-base rounded-md': parent.props.buttonLayout == 'horizontal'
}
]
};
},
label: () => {
return {
class: 'hidden'
};
}
},
decrementbutton: ({ props }) => ({
class: [
'flex !items-center !justify-center',
{
'rounded-tr-none rounded-tl-none rounded-tl-none !p-0 flex-1 w-[3rem]': props.showButtons && props.buttonLayout == 'stacked'
},
{
'order-1': props.buttonLayout == 'horizontal'
}
]
})
decrementbutton: {
root: ({ parent }) => {
return {
class: [
'text-white dark:text-gray-900 bg-blue-500 dark:bg-blue-400 border border-blue-500 dark:border-blue-400 hover:bg-blue-600 dark:hover:bg-blue-500 hover:border-blue-600 dark:hover:border-blue-500 focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(157,193,251,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(147,197,253,0.7),0_1px_2px_0_rgba(0,0,0,0)]',
'flex items-center justify-center',
'transition duration-200 ease-in-out',
'focus:outline-none focus:outline-offset-0',
{
'rounded-md rounded-tr-none rounded-tl-none rounded-tl-none !p-0 flex-1 w-[3rem]': parent.props.showButtons && parent.props.buttonLayout == 'stacked'
},
{
'order-1 px-4 py-3 text-base rounded-md': parent.props.buttonLayout == 'horizontal'
}
]
};
},
label: () => {
return {
class: 'hidden'
};
}
}
},
knob: {
root: ({ props }) => ({
@ -1382,11 +1555,20 @@ export default {
{ 'rounded-lg': !props.showIcon, 'border-r-0 rounded-l-lg': props.showIcon }
]
}),
dropdownbutton: ({ props }) => ({
root: {
class: [{ 'rounded-l-none': props.showIcon }]
dropdownbutton: {
root: ({ parent }) => {
return {
class: [
'text-white dark:text-gray-900 bg-blue-500 dark:bg-blue-400 border border-blue-500 dark:border-blue-400 hover:bg-blue-600 dark:hover:bg-blue-500 hover:border-blue-600 dark:hover:border-blue-500 focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(157,193,251,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(147,197,253,0.7),0_1px_2px_0_rgba(0,0,0,0)]',
'flex items-center justify-center',
'transition duration-200 ease-in-out',
'focus:outline-none focus:outline-offset-0',
'px-4 py-3 text-base rounded-md',
{ 'rounded-l-none': parent.props.showIcon }
]
};
}
}),
},
panel: ({ props }) => ({
class: [
'bg-white dark:bg-gray-900',
@ -2965,73 +3147,81 @@ export default {
class: 'flex flex-col justify-center p-5'
},
moveupbutton: {
root: ({ context }) => ({
class: [
'relative inline-flex cursor-pointer select-none items-center align-bottom text-center overflow-hidden m-0', // button component
'text-white bg-blue-500 border border-blue-500 rounded-md',
'transition duration-200 ease-in-out',
'justify-center px-0 py-3', // icon only
'mb-2 w-12', // orderlist button
'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
{
'cursor-default pointer-events-none opacity-60': context.disabled
}
]
}),
root: ({ context }) => {
return {
class: [
'relative inline-flex cursor-pointer select-none items-center align-bottom text-center overflow-hidden m-0', // button component
'text-white bg-blue-500 border border-blue-500 rounded-md',
'transition duration-200 ease-in-out',
'justify-center px-0 py-3', // icon only
'mb-2 w-12', // orderlist button
'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
{
'cursor-default pointer-events-none opacity-60': context.disabled
}
]
};
},
label: {
class: 'flex-initial w-0'
}
},
movetopbutton: {
root: ({ context }) => ({
class: [
'relative inline-flex cursor-pointer select-none items-center align-bottom text-center overflow-hidden m-0', // button component
'text-white bg-blue-500 border border-blue-500 rounded-md',
'transition duration-200 ease-in-out',
'justify-center px-0 py-3', // icon only
'mb-2 w-12', // orderlist button
'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
{
'cursor-default pointer-events-none opacity-60': context.disabled
}
]
}),
root: ({ context }) => {
return {
class: [
'relative inline-flex cursor-pointer select-none items-center align-bottom text-center overflow-hidden m-0', // button component
'text-white bg-blue-500 border border-blue-500 rounded-md',
'transition duration-200 ease-in-out',
'justify-center px-0 py-3', // icon only
'mb-2 w-12', // orderlist button
'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
{
'cursor-default pointer-events-none opacity-60': context.disabled
}
]
};
},
label: {
class: 'flex-initial w-0'
}
},
movedownbutton: {
root: ({ context }) => ({
class: [
'relative inline-flex cursor-pointer select-none items-center align-bottom text-center overflow-hidden m-0', // button component
'text-white bg-blue-500 border border-blue-500 rounded-md',
'transition duration-200 ease-in-out',
'justify-center px-0 py-3', // icon only
'mb-2 w-12', // orderlist button
'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
{
'cursor-default pointer-events-none opacity-60': context.disabled
}
]
}),
root: ({ context }) => {
return {
class: [
'relative inline-flex cursor-pointer select-none items-center align-bottom text-center overflow-hidden m-0', // button component
'text-white bg-blue-500 border border-blue-500 rounded-md',
'transition duration-200 ease-in-out',
'justify-center px-0 py-3', // icon only
'mb-2 w-12', // orderlist button
'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
{
'cursor-default pointer-events-none opacity-60': context.disabled
}
]
};
},
label: {
class: 'flex-initial w-0'
}
},
movebottombutton: {
root: ({ context }) => ({
class: [
'relative inline-flex cursor-pointer select-none items-center align-bottom text-center overflow-hidden m-0', // button component
'text-white bg-blue-500 border border-blue-500 rounded-md',
'transition duration-200 ease-in-out',
'justify-center px-0 py-3', // icon only
'mb-2 w-12', // orderlist button
'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
{
'cursor-default pointer-events-none opacity-60': context.disabled
}
]
}),
root: ({ context }) => {
return {
class: [
'relative inline-flex cursor-pointer select-none items-center align-bottom text-center overflow-hidden m-0', // button component
'text-white bg-blue-500 border border-blue-500 rounded-md',
'transition duration-200 ease-in-out',
'justify-center px-0 py-3', // icon only
'mb-2 w-12', // orderlist button
'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
{
'cursor-default pointer-events-none opacity-60': context.disabled
}
]
};
},
label: {
class: 'flex-initial w-0'
}
@ -3073,73 +3263,81 @@ export default {
class: 'flex flex-col justify-center p-5'
},
sourcemoveupbutton: {
root: ({ context }) => ({
class: [
'relative inline-flex cursor-pointer select-none items-center align-bottom text-center overflow-hidden m-0', // button component
'text-white bg-blue-500 border border-blue-500 rounded-md',
'transition duration-200 ease-in-out',
'justify-center px-0 py-3', // icon only
'mb-2 w-12', // orderlist button
'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
{
'cursor-default pointer-events-none opacity-60': context.disabled
}
]
}),
root: ({ context }) => {
return {
class: [
'relative inline-flex cursor-pointer select-none items-center align-bottom text-center overflow-hidden m-0', // button component
'text-white bg-blue-500 border border-blue-500 rounded-md',
'transition duration-200 ease-in-out',
'justify-center px-0 py-3', // icon only
'mb-2 w-12', // orderlist button
'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
{
'cursor-default pointer-events-none opacity-60': context.disabled
}
]
};
},
label: {
class: 'flex-initial w-0'
}
},
sourcemovetopbutton: {
root: ({ context }) => ({
class: [
'relative inline-flex cursor-pointer select-none items-center align-bottom text-center overflow-hidden m-0', // button component
'text-white bg-blue-500 border border-blue-500 rounded-md',
'transition duration-200 ease-in-out',
'justify-center px-0 py-3', // icon only
'mb-2 w-12', // orderlist button
'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
{
'cursor-default pointer-events-none opacity-60': context.disabled
}
]
}),
root: ({ context }) => {
return {
class: [
'relative inline-flex cursor-pointer select-none items-center align-bottom text-center overflow-hidden m-0', // button component
'text-white bg-blue-500 border border-blue-500 rounded-md',
'transition duration-200 ease-in-out',
'justify-center px-0 py-3', // icon only
'mb-2 w-12', // orderlist button
'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
{
'cursor-default pointer-events-none opacity-60': context.disabled
}
]
};
},
label: {
class: 'flex-initial w-0'
}
},
sourcemovedownbutton: {
root: ({ context }) => ({
class: [
'relative inline-flex cursor-pointer select-none items-center align-bottom text-center overflow-hidden m-0', // button component
'text-white bg-blue-500 border border-blue-500 rounded-md',
'transition duration-200 ease-in-out',
'justify-center px-0 py-3', // icon only
'mb-2 w-12', // orderlist button
'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
{
'cursor-default pointer-events-none opacity-60': context.disabled
}
]
}),
root: ({ context }) => {
return {
class: [
'relative inline-flex cursor-pointer select-none items-center align-bottom text-center overflow-hidden m-0', // button component
'text-white bg-blue-500 border border-blue-500 rounded-md',
'transition duration-200 ease-in-out',
'justify-center px-0 py-3', // icon only
'mb-2 w-12', // orderlist button
'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
{
'cursor-default pointer-events-none opacity-60': context.disabled
}
]
};
},
label: {
class: 'flex-initial w-0'
}
},
sourcemovebottombutton: {
root: ({ context }) => ({
class: [
'relative inline-flex cursor-pointer select-none items-center align-bottom text-center overflow-hidden m-0', // button component
'text-white bg-blue-500 border border-blue-500 rounded-md',
'transition duration-200 ease-in-out',
'justify-center px-0 py-3', // icon only
'mb-2 w-12', // orderlist button
'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
{
'cursor-default pointer-events-none opacity-60': context.disabled
}
]
}),
root: ({ context }) => {
return {
class: [
'relative inline-flex cursor-pointer select-none items-center align-bottom text-center overflow-hidden m-0', // button component
'text-white bg-blue-500 border border-blue-500 rounded-md',
'transition duration-200 ease-in-out',
'justify-center px-0 py-3', // icon only
'mb-2 w-12', // orderlist button
'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
{
'cursor-default pointer-events-none opacity-60': context.disabled
}
]
};
},
label: {
class: 'flex-initial w-0'
}
@ -3176,73 +3374,81 @@ export default {
class: 'flex flex-col justify-center p-5'
},
movetotargetbutton: {
root: ({ context }) => ({
class: [
'relative inline-flex cursor-pointer select-none items-center align-bottom text-center overflow-hidden m-0', // button component
'text-white bg-blue-500 border border-blue-500 rounded-md',
'transition duration-200 ease-in-out',
'justify-center px-0 py-3', // icon only
'mb-2 w-12', // orderlist button
'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
{
'cursor-default pointer-events-none opacity-60': context.disabled
}
]
}),
root: ({ context }) => {
return {
class: [
'relative inline-flex cursor-pointer select-none items-center align-bottom text-center overflow-hidden m-0', // button component
'text-white bg-blue-500 border border-blue-500 rounded-md',
'transition duration-200 ease-in-out',
'justify-center px-0 py-3', // icon only
'mb-2 w-12', // orderlist button
'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
{
'cursor-default pointer-events-none opacity-60': context.disabled
}
]
};
},
label: {
class: 'flex-initial w-0'
}
},
movealltotargetbutton: {
root: ({ context }) => ({
class: [
'relative inline-flex cursor-pointer select-none items-center align-bottom text-center overflow-hidden m-0', // button component
'text-white bg-blue-500 border border-blue-500 rounded-md',
'transition duration-200 ease-in-out',
'justify-center px-0 py-3', // icon only
'mb-2 w-12', // orderlist button
'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
{
'cursor-default pointer-events-none opacity-60': context.disabled
}
]
}),
root: ({ context }) => {
return {
class: [
'relative inline-flex cursor-pointer select-none items-center align-bottom text-center overflow-hidden m-0', // button component
'text-white bg-blue-500 border border-blue-500 rounded-md',
'transition duration-200 ease-in-out',
'justify-center px-0 py-3', // icon only
'mb-2 w-12', // orderlist button
'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
{
'cursor-default pointer-events-none opacity-60': context.disabled
}
]
};
},
label: {
class: 'flex-initial w-0'
}
},
movetosourcebutton: {
root: ({ context }) => ({
class: [
'relative inline-flex cursor-pointer select-none items-center align-bottom text-center overflow-hidden m-0', // button component
'text-white bg-blue-500 border border-blue-500 rounded-md',
'transition duration-200 ease-in-out',
'justify-center px-0 py-3', // icon only
'mb-2 w-12', // orderlist button
'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
{
'cursor-default pointer-events-none opacity-60': context.disabled
}
]
}),
root: ({ context }) => {
return {
class: [
'relative inline-flex cursor-pointer select-none items-center align-bottom text-center overflow-hidden m-0', // button component
'text-white bg-blue-500 border border-blue-500 rounded-md',
'transition duration-200 ease-in-out',
'justify-center px-0 py-3', // icon only
'mb-2 w-12', // orderlist button
'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
{
'cursor-default pointer-events-none opacity-60': context.disabled
}
]
};
},
label: {
class: 'flex-initial w-0'
}
},
movealltosourcebutton: {
root: ({ context }) => ({
class: [
'relative inline-flex cursor-pointer select-none items-center align-bottom text-center overflow-hidden m-0', // button component
'text-white bg-blue-500 border border-blue-500 rounded-md',
'transition duration-200 ease-in-out',
'justify-center px-0 py-3', // icon only
'mb-2 w-12', // orderlist button
'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
{
'cursor-default pointer-events-none opacity-60': context.disabled
}
]
}),
root: ({ context }) => {
return {
class: [
'relative inline-flex cursor-pointer select-none items-center align-bottom text-center overflow-hidden m-0', // button component
'text-white bg-blue-500 border border-blue-500 rounded-md',
'transition duration-200 ease-in-out',
'justify-center px-0 py-3', // icon only
'mb-2 w-12', // orderlist button
'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
{
'cursor-default pointer-events-none opacity-60': context.disabled
}
]
};
},
label: {
class: 'flex-initial w-0'
}
@ -3251,73 +3457,81 @@ export default {
class: 'flex flex-col justify-center p-5'
},
targetmoveupbutton: {
root: ({ context }) => ({
class: [
'relative inline-flex cursor-pointer select-none items-center align-bottom text-center overflow-hidden m-0', // button component
'text-white bg-blue-500 border border-blue-500 rounded-md',
'transition duration-200 ease-in-out',
'justify-center px-0 py-3', // icon only
'mb-2 w-12', // orderlist button
'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
{
'cursor-default pointer-events-none opacity-60': context.disabled
}
]
}),
root: ({ context }) => {
return {
class: [
'relative inline-flex cursor-pointer select-none items-center align-bottom text-center overflow-hidden m-0', // button component
'text-white bg-blue-500 border border-blue-500 rounded-md',
'transition duration-200 ease-in-out',
'justify-center px-0 py-3', // icon only
'mb-2 w-12', // orderlist button
'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
{
'cursor-default pointer-events-none opacity-60': context.disabled
}
]
};
},
label: {
class: 'flex-initial w-0'
}
},
targetmovetopbutton: {
root: ({ context }) => ({
class: [
'relative inline-flex cursor-pointer select-none items-center align-bottom text-center overflow-hidden m-0', // button component
'text-white bg-blue-500 border border-blue-500 rounded-md',
'transition duration-200 ease-in-out',
'justify-center px-0 py-3', // icon only
'mb-2 w-12', // orderlist button
'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
{
'cursor-default pointer-events-none opacity-60': context.disabled
}
]
}),
root: ({ context }) => {
return {
class: [
'relative inline-flex cursor-pointer select-none items-center align-bottom text-center overflow-hidden m-0', // button component
'text-white bg-blue-500 border border-blue-500 rounded-md',
'transition duration-200 ease-in-out',
'justify-center px-0 py-3', // icon only
'mb-2 w-12', // orderlist button
'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
{
'cursor-default pointer-events-none opacity-60': context.disabled
}
]
};
},
label: {
class: 'flex-initial w-0'
}
},
targetmovedownbutton: {
root: ({ context }) => ({
class: [
'relative inline-flex cursor-pointer select-none items-center align-bottom text-center overflow-hidden m-0', // button component
'text-white bg-blue-500 border border-blue-500 rounded-md',
'transition duration-200 ease-in-out',
'justify-center px-0 py-3', // icon only
'mb-2 w-12', // orderlist button
'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
{
'cursor-default pointer-events-none opacity-60': context.disabled
}
]
}),
root: ({ context }) => {
return {
class: [
'relative inline-flex cursor-pointer select-none items-center align-bottom text-center overflow-hidden m-0', // button component
'text-white bg-blue-500 border border-blue-500 rounded-md',
'transition duration-200 ease-in-out',
'justify-center px-0 py-3', // icon only
'mb-2 w-12', // orderlist button
'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
{
'cursor-default pointer-events-none opacity-60': context.disabled
}
]
};
},
label: {
class: 'flex-initial w-0'
}
},
targetmovebottombutton: {
root: ({ context }) => ({
class: [
'relative inline-flex cursor-pointer select-none items-center align-bottom text-center overflow-hidden m-0', // button component
'text-white bg-blue-500 border border-blue-500 rounded-md',
'transition duration-200 ease-in-out',
'justify-center px-0 py-3', // icon only
'mb-2 w-12', // orderlist button
'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
{
'cursor-default pointer-events-none opacity-60': context.disabled
}
]
}),
root: ({ context }) => {
return {
class: [
'relative inline-flex cursor-pointer select-none items-center align-bottom text-center overflow-hidden m-0', // button component
'text-white bg-blue-500 border border-blue-500 rounded-md',
'transition duration-200 ease-in-out',
'justify-center px-0 py-3', // icon only
'mb-2 w-12', // orderlist button
'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
{
'cursor-default pointer-events-none opacity-60': context.disabled
}
]
};
},
label: {
class: 'flex-initial w-0'
}
@ -4035,11 +4249,5 @@ export default {
resizehelper: {
class: 'absolute hidden w-px z-10 bg-blue-500 dark:bg-blue-300'
}
},
// CHART
chart: {
root: {
class: 'relative'
}
}
};

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

@ -9,7 +9,7 @@
*/
import { HTMLAttributes, InputHTMLAttributes, TransitionProps, VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { InputTextPassThroughOptionType } from '../inputtext';
import { InputTextPassThroughOptions } from '../inputtext';
import { PassThroughOptions } from '../passthrough';
import { ClassComponent, GlobalComponentConstructor, Nullable, PassThrough } from '../ts-helpers';
@ -33,12 +33,30 @@ export interface PasswordPassThroughMethodOptions {
* Defines current inline state.
*/
state: PasswordState;
/**
* Defines parent options.
*/
parent: any;
/**
* Defines passthrough(pt) options in global config.
*/
global: object | undefined;
}
/**
* Custom shared passthrough(pt) option method.
*/
export interface PasswordSharedPassThroughMethodOptions {
/**
* Defines valid properties.
*/
props: PasswordProps;
/**
* Defines current inline state.
*/
state: PasswordState;
}
/**
* Custom passthrough(pt) options.
* @see {@link PasswordProps.pt}
@ -50,9 +68,9 @@ export interface PasswordPassThroughOptions {
root?: PasswordPassThroughOptionType;
/**
* Used to pass attributes to the InputText component.
* @see {@link InputTextPassThroughOptionType}
* @see {@link InputTextPassThroughOptions}
*/
input?: PasswordPassThroughOptionType;
input?: InputTextPassThroughOptions<PasswordSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the hide icon's DOM element.
*/

3
components/lib/password/Password.vue
View File

@ -20,7 +20,8 @@
@blur="onBlur"
@keyup="onKeyUp"
@invalid="onInvalid"
v-bind="{ ...inputProps, ...ptm('input') }"
v-bind="inputProps"
:pt="ptm('input')"
:unstyled="unstyled"
/>
<slot v-if="toggleMask && unmasked" name="hideicon" :onClick="onMaskToggle" :toggleCallback="onMaskToggle">

44
components/lib/picklist/PickList.d.ts vendored
View File

@ -9,7 +9,7 @@
*/
import { ButtonHTMLAttributes, HTMLAttributes, TransitionProps, VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { ButtonPassThroughOptionType } from '../button';
import { ButtonPassThroughOptions } from '../button';
import { PassThroughOptions } from '../passthrough';
import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
@ -37,12 +37,30 @@ export interface PickListPassThroughMethodOptions {
* Defines current options.
*/
context: PickListContext;
/**
* Defines parent options.
*/
parent: any;
/**
* Defines passthrough(pt) options in global config.
*/
global: object | undefined;
}
/**
* Custom shared passthrough(pt) option method.
*/
export interface PickListSharedPassThroughMethodOptions {
/**
* Defines valid properties.
*/
props: PickListProps;
/**
* Defines current inline state.
*/
state: PickListState;
}
/**
* Custom reorder event.
* @see {@link PickListEmits.reorder}
@ -133,19 +151,19 @@ export interface PickListPassThroughOptions {
/**
* Used to pass attributes to the Button component.
*/
sourceMoveUpButton?: ButtonPassThroughOptionType;
sourceMoveUpButton?: ButtonPassThroughOptions<PickListSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the Button component.
*/
sourceMoveTopButton?: ButtonPassThroughOptionType;
sourceMoveTopButton?: ButtonPassThroughOptions<PickListSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the Button component.
*/
sourceMoveDownButton?: ButtonPassThroughOptionType;
sourceMoveDownButton?: ButtonPassThroughOptions<PickListSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the Button component.
*/
sourceMoveBottomButton?: ButtonPassThroughOptionType;
sourceMoveBottomButton?: ButtonPassThroughOptions<PickListSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the source wrapper's DOM element.
*/
@ -165,19 +183,19 @@ export interface PickListPassThroughOptions {
/**
* Used to pass attributes to the Button component.
*/
moveToTargetButton?: ButtonPassThroughOptionType;
moveToTargetButton?: ButtonPassThroughOptions<PickListSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the Button component.
*/
moveAllToTargetButton?: ButtonPassThroughOptionType;
moveAllToTargetButton?: ButtonPassThroughOptions<PickListSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the Button component.
*/
moveToSourceButton?: ButtonPassThroughOptionType;
moveToSourceButton?: ButtonPassThroughOptions<PickListSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the Button component.
*/
moveAllToSourceButton?: ButtonPassThroughOptionType;
moveAllToSourceButton?: ButtonPassThroughOptions<PickListSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the target wrapper's DOM element.
*/
@ -201,19 +219,19 @@ export interface PickListPassThroughOptions {
/**
* Used to pass attributes to the Button component.
*/
targetMoveUpButton?: ButtonPassThroughOptionType;
targetMoveUpButton?: ButtonPassThroughOptions<PickListSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the Button component.
*/
targetMoveTopButton?: ButtonPassThroughOptionType;
targetMoveTopButton?: ButtonPassThroughOptions<PickListSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the Button component.
*/
targetMoveDownButton?: ButtonPassThroughOptionType;
targetMoveDownButton?: ButtonPassThroughOptions<PickListSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the Button component.
*/
targetMoveBottomButton?: ButtonPassThroughOptionType;
targetMoveBottomButton?: ButtonPassThroughOptions<PickListSharedPassThroughMethodOptions>;
/**
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}

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