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

Merge branch 'master' into issue-2948

pull/3847/head
Tuğçe Küçükoğlu 2023-05-11 15:14:03 +03:00
parent 5f57291418 c7fbc81262
commit 53d7c04970
885 changed files with 47113 additions and 3600 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.github/workflows/generate_api_doc.yml vendored
View File

@ -12,6 +12,7 @@ permissions:
jobs:
build:
if: github.repository == 'primefaces/primevue' && github.ref == 'refs/heads/master'
runs-on: ubuntu-latest
strategy:

28
.github/workflows/node.js.yml vendored
View File

@ -5,7 +5,7 @@ on:
branches: [master]
permissions:
contents: read
contents: write
jobs:
build:
@ -16,10 +16,10 @@ jobs:
node-version: [16.x, 18.x]
steps:
- uses: actions/checkout@v2
- uses: actions/checkout@v3
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v2
uses: actions/setup-node@v3
with:
node-version: ${{ matrix.node-version }}
cache: 'npm'
@ -31,19 +31,29 @@ jobs:
- name: Lint Check
if: ${{ success() }}
run: |
npm run format:check
npm run lint
- name: Code Format
- name: Code Format Check
id: codeFormatCheck
if: ${{ success() }}
run: |
npm run format:check
- name: Code Format
if: always() && steps.codeFormatCheck.outcome == 'failure'
run: |
npm run format
git config user.name "GitHub Actions Bot"
git config user.email "<>"
git commit -a -m "Code Format"
git push
- name: Security Check
if: ${{ success() }}
run: |
npm run security:check
#- name: Test
# if: ${{ success() }}
# run: |
# npm run test:unit
- name: Unit Tests Check
if: ${{ success() }}
run: |
npm run test:unit

8
.github/workflows/pr-checker.yml vendored
View File

@ -44,6 +44,14 @@ jobs:
run: |
npm run test:unit
- name: Lint
run: |
npm run lint
- name: Security
run: |
npm run security:check
- name: Add Code Format Fail Comment
if: always() && steps.codeFormat.outcome == 'failure'
uses: thollander/actions-comment-pull-request@v1

48
CHANGELOG.md
View File

@ -1,5 +1,53 @@
# Changelog
## [3.28.0](https://github.com/primefaces/primevue/tree/3.28.0) (2023-05-02)
[Full Changelog](https://github.com/primefaces/primevue/compare/3.27.0...3.28.0)
**Implemented New Features and Enhancements:**
- New passthrough\(pt\) property implementation for Chart & FileUpload & Message Components [\#3911](https://github.com/primefaces/primevue/issues/3911)
- New passthrough\(pt\) property implementation for Menu Components [\#3907](https://github.com/primefaces/primevue/issues/3907)
- Button: No label [\#3905](https://github.com/primefaces/primevue/issues/3905)
- Add global `pt` option to PrimeVue config [\#3902](https://github.com/primefaces/primevue/issues/3902)
- New passthrough\(pt\) property implementation for Button Components [\#3889](https://github.com/primefaces/primevue/issues/3889)
- New passthrough\(pt\) property implementation for Overlay Components [\#3885](https://github.com/primefaces/primevue/issues/3885)
- New passthrough\(pt\) property implementation for Misc Components [\#3879](https://github.com/primefaces/primevue/issues/3879)
**Fixed bugs:**
- Message: wrong close icon size [\#3908](https://github.com/primefaces/primevue/issues/3908)
- Panel: Header accessibility issue [\#3904](https://github.com/primefaces/primevue/issues/3904)
- Calendar: Material theme icons not visible [\#3903](https://github.com/primefaces/primevue/issues/3903)
- Password: Incorrect onClick property as scope for custom icons [\#3900](https://github.com/primefaces/primevue/issues/3900)
- AutoComplete: class style and click event refactor on `removetokenicon` scoped slot [\#3899](https://github.com/primefaces/primevue/issues/3899)
- Dropdown: Selection is not working correctly with falsy values [\#3891](https://github.com/primefaces/primevue/issues/3891)
## [3.27.0](https://github.com/primefaces/primevue/tree/3.27.0) (2023-04-19)
[Full Changelog](https://github.com/primefaces/primevue/compare/3.26.1...3.27.0)
**Implemented New Features and Enhancements:**
- Add icon templating support to components [\#3833](https://github.com/primefaces/primevue/issues/3833)
- Improve icon implementation in core [\#3832](https://github.com/primefaces/primevue/issues/3832)
- Add new Icon components [\#3829](https://github.com/primefaces/primevue/issues/3829)
- Panel: Footer Templating [\#3820](https://github.com/primefaces/primevue/issues/3820)
- AutoComplete: NumpadEnter is not recognised [\#3816](https://github.com/primefaces/primevue/issues/3816)
- Calendar: Emit year-change event via navBackward and navForward [\#3811](https://github.com/primefaces/primevue/issues/3811)
- New passthrough\(pt\) property implementation for Panel Components [\#3797](https://github.com/primefaces/primevue/issues/3797)
- Galleria: Play and Pause [\#3619](https://github.com/primefaces/primevue/issues/3619)
**Fixed bugs:**
- TabView: Scrollable Starting/Ending Nav Arrow Blocks First/Last Tab [\#3849](https://github.com/primefaces/primevue/issues/3849)
- DataTable Filter with Calendar is not showing in proper location [\#3632](https://github.com/primefaces/primevue/issues/3632)
**Deprecated:**
- Deprecated `indicator` slot [\#3871](https://github.com/primefaces/primevue/issues/3871)
- FullCalendar: Deprecated component [\#3827](https://github.com/primefaces/primevue/issues/3827)
## [3.26.1](https://github.com/primefaces/primevue/tree/3.26.1) (2023-03-27)
[Full Changelog](https://github.com/primefaces/primevue/compare/3.26.0...3.26.1)

18
README.md
View File

@ -15,10 +15,10 @@ PrimeVue is available at [npm](https://www.npmjs.com/package/primevue).
````
// with npm
npm install primevue primeicons
npm install primevue
// with yarn
yarn add primevue primeicons
yarn add primevue
````
## Plugin
@ -44,16 +44,13 @@ import 'primevue/resources/themes/lara-light-blue/theme.css';
// core
import 'primevue/resources/primevue.min.css';
// icons
import 'primeicons/primeicons.css';
```
Each PrimeVue theme has its own font family so it is suggested to apply it to your application for a unified look.
```
body {
font-family: (--font-family);
font-family: var(--font-family);
}
```
@ -96,12 +93,11 @@ Open the nuxt configuration file and add the css dependencies.
export default defineNuxtConfig({
css: [
"primevue/resources/themes/lara-light-blue/theme.css",
"primevue/resources/primevue.css",
"primeicons/primeicons.css"
"primevue/resources/primevue.css"
],
build: {
transpile: ["primevue"]
}
build: {
transpile: ["primevue"]
}
})
```

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

@ -250,6 +250,12 @@ const AutoCompleteProps = [
type: 'string',
default: 'null',
description: 'Identifier of the underlying input element.'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];

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

@ -28,6 +28,19 @@ const AvatarProps = [
type: 'string',
default: 'square',
description: 'Shape of the element, valid options are "square" and "circle".'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];
const AvatarSlots = [
{
name: 'icon',
description: 'Custom icon template.'
}
];
@ -43,6 +56,7 @@ module.exports = {
name: 'Avatar',
description: 'Avatar represents people using icons, labels and images.',
props: AvatarProps,
slots: AvatarSlots,
events: AvatarEvents
}
};

42
api-generator/components/avatargroup.js
View File

@ -1,7 +1,47 @@
const AvatarGroupProps = [
{
name: 'label',
type: 'string',
default: 'null',
description: 'Defines the text to display.'
},
{
name: 'icon',
type: 'string',
default: 'null',
description: 'Defines the icon to display.'
},
{
name: 'image',
type: 'string',
default: 'null',
description: 'Defines the image to display.'
},
{
name: 'size',
type: 'string',
default: 'null',
description: 'Size of the element, valid options are "large" and "xlarge".'
},
{
name: 'shape',
type: 'string',
default: 'square',
description: 'Shape of the element, valid options are "square" and "circle".'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];
module.exports = {
avatargroup: {
name: 'AvatarGroup',
'doc-url': 'avatar',
description: 'A set of Avatars can be displayed together using the AvatarGroup component.'
description: 'A set of Avatars can be displayed together using the AvatarGroup component.',
props: AvatarGroupProps
}
};

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

@ -16,6 +16,12 @@ const BadgeProps = [
type: 'string',
default: 'null',
description: 'Size of the badge, valid options are "large" and "xlarge".'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];

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

@ -22,6 +22,12 @@ const BlockUIProps = [
type: 'boolean',
default: 'true',
description: 'Whether to automatically manage layering.'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];

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

@ -16,6 +16,12 @@ const BreadcrumbProps = [
type: 'boolean',
default: 'true',
description: "Whether to apply 'router-link-active-exact' class if route exactly matches the item path."
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];
@ -27,6 +33,10 @@ const BreadcrumbSlots = [
{
name: 'separator',
description: 'Custom separator template.'
},
{
name: 'itemicon',
description: 'Custom item icon template.'
}
];

23
api-generator/components/button.js
View File

@ -94,6 +94,25 @@ const ButtonProps = [
type: 'boolean',
default: 'false',
description: 'Add a plain textual class to the button without a background initially.'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];
const ButtonEvents = [];
const ButtonSlots = [
{
name: 'icon',
description: 'Custom icon template.'
},
{
name: 'loadingicon',
description: 'Custom loading icon template.'
}
];
@ -101,6 +120,8 @@ module.exports = {
button: {
name: 'Button',
description: 'Button is an extension to standard button element with icons and theming.',
props: ButtonProps
props: ButtonProps,
events: ButtonEvents,
slots: ButtonSlots
}
};

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

@ -316,6 +316,12 @@ const CalendarProps = [
type: 'object',
default: 'null',
description: 'Uses to pass all properties of the HTMLDivElement to the overlay panel inside the component.'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];
@ -462,11 +468,11 @@ const CalendarSlots = [
description: 'Custom content for the calendar decade.'
},
{
name: 'triggericon',
description: 'Custom trigger icon template.'
name: 'dropdownicon',
description: 'Custom dropdown icon template.'
},
{
name: 'previcon',
name: 'previousicon',
description: 'Custom previous icon template.'
},
{

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

@ -82,10 +82,20 @@ const CarouselProps = [
type: 'boolean',
default: 'true',
description: 'Whether to display indicator container.'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];
const CarouselSlots = [
{
name: 'header',
description: 'Custom content for the component header.'
},
{
name: 'header',
description: 'Custom content for the component header.'
@ -99,7 +109,7 @@ const CarouselSlots = [
description: 'Custom content for the component item.'
},
{
name: 'previcon',
name: 'previousicon',
description: 'Custom previous icon template.'
},
{

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

@ -184,6 +184,12 @@ const CascadeSelectProps = [
type: 'string',
default: 'null',
description: 'Identifier of the underlying input element.'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];
@ -284,6 +290,14 @@ const CascadeSelectSlots = [
name: 'indicator',
description: 'Custom content for the dropdown indicator.'
},
{
name: 'dropdownicon',
description: 'Custom dropdown icon template.'
},
{
name: 'loadingicon',
description: 'Custom loading icon template.'
},
{
name: 'optiongroupicon',
description: 'Custom content for the option group icon.'

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

@ -34,6 +34,12 @@ const ChartProps = [
type: 'number',
default: '150',
description: 'Height of the chart in non-responsive mode.'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];

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

@ -88,6 +88,12 @@ const CheckboxProps = [
type: 'string',
default: 'null',
description: 'Used to define a string that labels the element.'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];

20
api-generator/components/chip.js
View File

@ -28,6 +28,12 @@ const ChipProps = [
type: 'string',
default: 'pi pi-times-circle',
description: 'Icon of the remove element.'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];
@ -45,11 +51,23 @@ const ChipEvents = [
}
];
const ChipSlots = [
{
name: 'icon',
description: 'Custom icon template of chip component.'
},
{
name: 'removeicon',
description: 'Custom remove icon template of chip component.'
}
];
module.exports = {
chip: {
name: 'Chip',
description: 'Chip represents entities using icons, labels and images',
props: ChipProps,
events: ChipEvents
events: ChipEvents,
slots: ChipSlots
}
};

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

@ -64,6 +64,12 @@ const ChipsProps = [
type: 'object',
default: 'null',
description: 'Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];

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

@ -70,6 +70,12 @@ const ColorPickerProps = [
type: 'string',
default: 'null',
description: 'Used to define a string that labels the element.'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];

62
api-generator/components/column.js
View File

@ -250,6 +250,12 @@ const ColumnProps = [
type: 'boolean',
default: 'false',
description: 'Whether the column is rendered.'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];
@ -289,6 +295,62 @@ const ColumnSlots = [
{
name: 'filterapply',
description: "Custom content for the filter menu's apply section"
},
{
name: 'loading',
description: 'Custom loading template.'
},
{
name: 'rowtogglericon',
description: 'Custom row toggler icon template.'
},
{
name: 'rowtogglericon',
description: 'Custom row toggler icon template.'
},
{
name: 'rowcheckboxicon',
description: 'Custom row checkbox icon template.'
},
{
name: 'roweditoriniticon',
description: 'Custom row editor init icon template.'
},
{
name: 'roweditorsaveicon',
description: 'Custom row editor save icon template.'
},
{
name: 'roweditorcancelicon',
description: 'Custom row editor cancel icon template.'
},
{
name: 'filtericon',
description: 'Custom filter icon template.'
},
{
name: 'filterclearicon',
description: 'Custom filter clear icon template.'
},
{
name: 'filterremoveicon',
description: 'Custom filter remove icon template.'
},
{
name: 'filteraddicon',
description: 'Custom filter add icon template.'
},
{
name: 'sorticon',
description: 'Custom sort icon template.'
},
{
name: 'headercheckboxicon',
description: 'Custom header checkbox icon template.'
},
{
name: 'rowreordericon',
description: 'Custom row reorder icon template.'
}
];

18
api-generator/components/columngroup.js
View File

@ -1,7 +1,23 @@
const ColumnGroupProps = [
{
name: 'type',
type: 'string',
default: 'null',
description: 'Defines the type of the group.'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];
module.exports = {
columngroup: {
name: 'ColumnGroup',
description: 'Columns can be grouped at header and footer sections by defining a ColumnGroup with nested rows and columns',
'doc-url': 'datatable'
'doc-url': 'datatable',
props: ColumnGroupProps
}
};

20
api-generator/components/confirmdialog.js
View File

@ -16,13 +16,31 @@ const ConfirmDialogProps = [
type: 'boolean',
default: 'true',
description: 'Whether the dialog can be relocated by dragging.'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];
const ConfirmDialogSlots = [
{
name: 'message',
description: 'Custom content for the component.'
description: 'Custom icon template.'
},
{
name: 'icon',
description: 'Custom icon template.'
},
{
name: 'accepticon',
description: 'Custom accept icon template.'
},
{
name: 'rejecticon',
description: 'Custom reject icon template.'
}
];

18
api-generator/components/confirmpopup.js
View File

@ -4,6 +4,12 @@ const ConfirmPopupProps = [
type: 'string',
default: 'null',
description: 'Optional key to match the key of the confirmation, useful to target a specific confirm dialog instance.'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];
@ -11,6 +17,18 @@ const ConfirmPopupSlots = [
{
name: 'message',
description: 'Custom content for the component.'
},
{
name: 'icon',
description: 'Custom icon template.'
},
{
name: 'accepticon',
description: 'Custom accept icon template.'
},
{
name: 'rejecticon',
description: 'Custom reject icon template.'
}
];

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

@ -34,6 +34,12 @@ const ContextMenuProps = [
type: 'boolean',
default: 'true',
description: "Whether to apply 'router-link-active-exact' class if route exactly matches the item path."
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];
@ -45,6 +51,10 @@ const ContextMenuSlots = [
{
name: 'submenuicon',
description: 'Custom submenu icon template.'
},
{
name: 'itemicon',
description: 'Custom item icon template.'
}
];

58
api-generator/components/datatable.js
View File

@ -377,6 +377,12 @@ const DataTableProps = [
type: 'string',
default: 'null',
description: 'Style class of the table element.'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];
@ -1120,31 +1126,67 @@ const DataTableEvents = [
const DataTableSlots = [
{
name: 'header',
description: "Custom content for the component's header"
description: "Custom content for the component's header."
},
{
name: 'paginatorstart',
description: "Custom content for the component paginator's left side"
description: "Custom content for the component paginator's left side."
},
{
name: 'paginatorend',
description: "Custom content for the component paginator's right side"
description: "Custom content for the component paginator's right side."
},
{
name: 'footer',
description: "Custom content for the component's footer"
description: "Custom content for the component's footer."
},
{
name: 'groupheader',
description: "Custom content for the component's subgroup header"
description: "Custom content for the component's subgroup header."
},
{
name: 'groupfooter',
description: "Custom content for the component's subgroup footer"
description: "Custom content for the component's subgroup footer."
},
{
name: 'expansion',
description: "Custom content for the component's expanded content"
name: 'loading',
description: 'Custom loading template.'
},
{
name: 'loadingicon',
description: 'Custom loading icon template.'
},
{
name: 'reorderindicatorupicon',
description: 'Custom reorder indicator up icon template.'
},
{
name: 'reorderindicatordownicon',
description: 'Custom reorder indicator down icon template.'
},
{
name: 'rowgrouptogglericon',
description: 'Custom rowgroup toggler icon template.'
},
{
name: 'paginatorfirstpagelinkicon',
description: 'Custom paginator first page link icon template.'
},
{
name: 'paginatorprevpagelinkicon',
description: 'Custom paginator prev page link icon template.'
},
{
name: 'paginatornextpagelinkicon',
description: 'Custom paginator next page link icon template.'
},
{
name: 'paginatorlastpagelinkicon',
description: 'Custom paginator last page link icon template.'
},
{
name: 'empty',
description: 'Custom empty template.'
}
];

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

@ -94,6 +94,12 @@ const DataViewProps = [
type: 'string',
default: 'null',
description: 'Name of the data that uniquely identifies the a record in the data.'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];

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

@ -4,6 +4,12 @@ const DataViewLayoutOptionsProps = [
type: 'string',
default: 'null',
description: 'Value of the component.'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];

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

@ -130,6 +130,12 @@ const DialogProps = [
type: 'string',
default: 'body',
description: 'A valid query selector or an HTMLElement to specify where the dialog gets attached. Special keywords are "body" for document body and "self" for the element itself.'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];
@ -189,6 +195,14 @@ const DialogSlots = [
{
name: 'footer',
description: "Custom content for the component's footer"
},
{
name: 'closeicon',
description: 'Custom close icon template.'
},
{
name: 'maximizeicon',
description: 'Custom maximizeicon icon template of dialog.'
}
];

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

@ -34,6 +34,12 @@ const DockProps = [
type: 'object',
default: 'null',
description: "Whether to display the tooltip on items. The modifiers of tooltip can be used like an object in it. Valid keys are 'event' and 'position'."
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];

22
api-generator/components/dropdown.js
View File

@ -256,6 +256,12 @@ const DropdownProps = [
type: 'string',
default: 'null',
description: 'Identifier of the underlying input element.'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];
@ -372,6 +378,22 @@ const DropdownSlots = [
{
name: 'loader',
description: 'Custom content for the virtual scroller loader items'
},
{
name: 'clearicon',
description: 'Custom clear icon template.'
},
{
name: 'dropdownicon',
description: 'Custom dropdown icon template.'
},
{
name: 'loadingicon',
description: 'Custom loading icon template.'
},
{
name: 'filtericon',
description: 'Custom filter icon template.'
}
];

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

@ -34,6 +34,12 @@ const EditorProps = [
type: 'object',
default: 'null',
description: 'Modules configuration, see <a href="http://quilljs.com/docs/modules/">here</a> for available options.'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];

30
api-generator/components/fileupload.js
View File

@ -142,6 +142,12 @@ const FileUploadProps = [
type: 'string',
default: 'null',
description: 'Style class of the component.'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];
@ -276,9 +282,33 @@ const FileUploadEvents = [
];
const FileUploadSlots = [
{
name: 'header',
description: 'Custom header template.'
},
{
name: 'content',
description: 'Custom content template.'
},
{
name: 'empty',
description: 'Custom content when there is no selected file'
},
{
name: 'chooseicon',
description: 'Custom choose icon template.'
},
{
name: 'uploadicon',
description: 'Custom upload icon template.'
},
{
name: 'cancelicon',
description: 'Custom cancel icon template.'
},
{
name: 'fileremoveicon',
description: 'Custom remove icon template for each file.'
}
];

10
api-generator/components/galleria.js
View File

@ -142,6 +142,12 @@ const GalleriaProps = [
type: 'any',
default: 'null',
description: "Style class of the component on fullscreen mode. Otherwise, the 'class' property can be used."
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];
@ -175,7 +181,7 @@ const GalleriaSlots = [
description: 'Custom close icon template.'
},
{
name: 'previtemicon',
name: 'previousitemicon',
description: 'Custom navigator previous item icon template.'
},
{
@ -183,7 +189,7 @@ const GalleriaSlots = [
description: 'Custom navigator next item icon template.'
},
{
name: 'prevthumbnailicon',
name: 'previousthumbnailicon',
description: 'Custom thumbnail previous icon template.'
},
{

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

@ -22,6 +22,12 @@ const ImageProps = [
type: 'boolean',
default: 'false',
description: 'Disable the zoom-out button'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];
@ -64,6 +70,14 @@ const ImageSlots = [
{
name: 'close',
description: 'Custom content for the component close.'
},
{
name: 'image',
description: 'Custom content for the component image.'
},
{
name: 'preview',
description: 'Custom content for the component preview.'
}
];

10
api-generator/components/inlinemessage.js
View File

@ -10,13 +10,19 @@ const InlineMessageProps = [
type: 'string',
default: 'undefined',
description: 'Display a custom icon for the message.'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];
const MessageSlots = [
{
name: 'messageicon',
description: 'Custom message icon template.'
name: 'icon',
description: 'Custom icon template.'
}
];

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

@ -16,6 +16,12 @@ const InplaceProps = [
type: 'boolean',
default: 'false',
description: 'When present, it specifies that the element should be disabled.'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];
@ -47,11 +53,15 @@ const InplaceEvents = [
const InplaceSlots = [
{
name: 'display',
description: 'Output content'
description: 'Custom display template.'
},
{
name: 'content',
description: 'Actual content'
description: 'Custom content template.'
},
{
name: 'closeicon',
description: 'Custom close icon template.'
}
];

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

@ -28,6 +28,12 @@ const InputMaskProps = [
type: 'boolean',
default: 'false',
description: 'Defines if model sets the raw unmasked value to bound value or the formatted mask value.'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];

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

@ -182,6 +182,12 @@ const InputNumberProps = [
type: 'object',
default: 'null',
description: 'Uses to pass all properties of the HTMLButtonElement to decrement button inside the component.'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];

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

@ -40,6 +40,12 @@ const InputSwitchProps = [
type: 'object',
default: 'null',
description: 'Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];

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

@ -4,6 +4,12 @@ const InputTextProps = [
type: 'any',
default: 'null',
description: 'Value of the component.'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];

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

@ -94,6 +94,12 @@ const KnobProps = [
type: 'string',
default: 'null',
description: 'Used to define a string that labels the element.'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];

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

@ -173,6 +173,12 @@ const ListboxProps = [
type: 'string',
default: 'null',
description: 'Identifier of the underlying input element.'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];

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

@ -16,6 +16,12 @@ const MegaMenuProps = [
type: 'boolean',
default: 'true',
description: "Whether to apply 'router-link-active-exact' class if route exactly matches the item path."
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];
@ -35,6 +41,10 @@ const MegaMenuSlots = [
{
name: 'submenuicon',
description: 'Custom submenu icon template.'
},
{
name: 'itemicon',
description: 'Custom item icon template.'
}
];

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

@ -34,6 +34,12 @@ const MenuProps = [
type: 'boolean',
default: 'true',
description: "Whether to apply 'router-link-active-exact' class if route exactly matches the item path."
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];
@ -60,6 +66,10 @@ const MenuSlots = [
{
name: 'item',
description: 'Template of a menuitem.'
},
{
name: 'itemicon',
description: 'Custom item icon template.'
}
];

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

@ -10,6 +10,12 @@ const MenubarProps = [
type: 'boolean',
default: 'true',
description: "Whether to apply 'router-link-active-exact' class if route exactly matches the item path."
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];
@ -33,6 +39,10 @@ const MenubarSlots = [
{
name: 'submenuicon',
description: 'Custom submenu icon template.'
},
{
name: 'itemicon',
description: 'Custom item icon template.'
}
];

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

@ -34,6 +34,12 @@ const MessageProps = [
type: 'string',
default: 'undefined',
description: 'Display a custom close icon for the message.'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];

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

@ -292,6 +292,12 @@ const MultiSelectProps = [
type: 'string',
default: 'null',
description: 'Identifier of the underlying input element.'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];
@ -448,6 +454,14 @@ const MultiSelectSlots = [
{
name: 'itemcheckboxicon',
description: 'Custom item checkbox icon template.'
},
{
name: 'loadingicon',
description: 'Custom loading icon template.'
},
{
name: 'dropdownicon',
description: 'Custom dropdown icon template.'
}
];

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

@ -47,6 +47,12 @@ const OrderListProps = [
type: 'boolean',
default: 'false',
description: 'Whether to displays rows with alternating colors.'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];

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

@ -28,6 +28,12 @@ const OrganizationChartProps = [
type: 'object',
default: 'null',
description: 'A map instance of key-value pairs to represented the collapsed nodes.'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];

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

@ -46,6 +46,12 @@ const OverlayPanelProps = [
type: 'string',
default: 'undefined',
description: 'Display a custom close icon for the message.'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];

10
api-generator/components/paginator.js
View File

@ -46,6 +46,12 @@ const PaginatorProps = [
type: 'boolean',
default: 'true',
description: 'Whether to show the paginator even there is only one page.'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];
@ -80,11 +86,11 @@ const PaginatorEvents = [
const PaginatorSlots = [
{
name: 'left',
name: 'start',
description: "Custom content for the component's left side."
},
{
name: 'right',
name: 'end',
description: "Custom content for the component's right side."
},
{

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

@ -16,6 +16,12 @@ const PanelMenuProps = [
type: 'boolean',
default: 'true',
description: "Whether to apply 'router-link-active-exact' class if route exactly matches the item path."
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];
@ -27,6 +33,14 @@ const PanelMenuSlots = [
{
name: 'submenuicon',
description: 'Custom submenu icon template.'
},
{
name: 'headericon',
description: 'Custom header icon template.'
},
{
name: 'itemicon',
description: 'Custom item icon template.'
}
];

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

@ -136,6 +136,12 @@ const PasswordProps = [
type: 'object',
default: 'null',
description: 'Uses to pass all properties of the HTMLDivElement to the overlay panel inside the component.'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];

10
api-generator/components/picklist.js
View File

@ -59,6 +59,12 @@ const PickListProps = [
type: 'boolean',
default: 'true',
description: 'Whether to show buttons of target list.'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];
@ -172,6 +178,10 @@ const PickListEvents = [
];
const PickListSlots = [
{
name: 'header',
description: 'Custom header template.'
},
{
name: 'sourceheader',
description: "Custom content for the component's source header."

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

@ -16,6 +16,12 @@ const ProgressbarProps = [
type: 'boolean',
default: 'true',
description: 'Whether to display the progress bar value.'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];

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

@ -16,6 +16,12 @@ const ProgressSpinnerProps = [
type: 'string',
default: '2s',
description: 'Duration of the rotate animation.'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];

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

@ -58,6 +58,12 @@ const RadioButtonProps = [
type: 'string',
default: 'null',
description: 'Used to define a string that labels the element.'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];

22
api-generator/components/rating.js
View File

@ -46,6 +46,27 @@ const RatingProps = [
type: 'string',
default: 'null',
description: 'Icon for the cancelable state.'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];
const RatingSlots = [
{
name: 'cancelicon',
description: 'Custom cancel icon template.'
},
{
name: 'onicon',
description: 'Custom on icon template.'
},
{
name: 'officon',
description: 'Custom off icon template.'
}
];
@ -73,6 +94,7 @@ module.exports = {
name: 'rating',
description: 'Rating component is a star based selection input.',
props: RatingProps,
slots: RatingSlots,
events: RatingEvents
}
};

18
api-generator/components/row.js
View File

@ -1,7 +1,23 @@
const RowProps = [
{
name: 'type',
type: 'string',
default: 'null',
description: 'Defines the type of the group.'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];
module.exports = {
row: {
name: 'Row',
description: 'DataTable can be grouped by defining a Row component with nested columns',
'doc-url': 'datatable'
'doc-url': 'datatable',
props: RowProps
}
};

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

@ -22,6 +22,12 @@ const ScrollTopProps = [
type: 'string',
default: 'smooth',
description: 'Defines the scrolling behavi, "smooth" adds an animation and "auto" scrolls with a jump.'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];

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

@ -58,6 +58,12 @@ const SelectButtonProps = [
type: 'string',
default: 'null',
description: 'Identifier of the underlying element.'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];

10
api-generator/components/sidebar.js
View File

@ -58,6 +58,12 @@ const SidebarProps = [
type: 'string',
default: 'undefined',
description: 'Icon to display in the sidebar close button.'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];
@ -80,6 +86,10 @@ const SidebarSlots = [
{
name: 'header',
description: 'Custom content for the component header.'
},
{
name: 'closeicon',
description: 'Custom close icon template.'
}
];

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

@ -34,6 +34,12 @@ const SkeletonProps = [
type: 'string',
default: 'wave',
description: 'Type of the animation, valid options are "wave" and "none".'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];

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

@ -58,6 +58,12 @@ const SliderProps = [
type: 'string',
default: 'null',
description: 'Used to define a string that labels the element.'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];

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

@ -106,6 +106,12 @@ const SpeedDialProps = [
type: 'object',
default: 'null',
description: "Whether to display the tooltip on items. The modifiers of tooltip can be used like an object in it. Valid keys are 'event' and 'position'."
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];
@ -137,8 +143,12 @@ const SpeedDialSlots = [
description: 'Custom content for the item'
},
{
name: 'toggle',
description: 'toggle: toggle metadata'
name: 'button',
description: 'Custom button template.'
},
{
name: 'icon',
description: 'Custom icon template.'
}
];

20
api-generator/components/splitbutton.js
View File

@ -100,6 +100,12 @@ const SplitButtonProps = [
type: 'boolean',
default: 'false',
description: 'Add a plain textual class to the button without a background initially.'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];
@ -117,11 +123,23 @@ const SplitButtonEvents = [
}
];
const SplitButtonSlots = [
{
name: 'icon',
description: 'Custom icon template.'
},
{
name: 'menubuttonicon',
description: 'Custom menu button icon template.'
}
];
module.exports = {
splitbutton: {
name: 'SplitButton',
description: 'SplitButton groups a set of commands in an overlay with a default command.',
props: SplitButtonProps,
events: SplitButtonEvents
events: SplitButtonEvents,
slots: SplitButtonSlots
}
};

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

@ -22,6 +22,12 @@ const StepsProps = [
type: 'boolean',
default: 'true',
description: "Whether to apply 'router-link-active-exact' class if route exactly matches the item path."
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];

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

@ -16,6 +16,12 @@ const TabMenuProps = [
type: 'number',
default: '0',
description: 'Active index of menuitem.'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];
@ -42,6 +48,10 @@ const TabMenuSlots = [
{
name: 'item',
description: 'Template of a menuitem.'
},
{
name: 'itemicon',
description: 'Custom item icon template.'
}
];

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

@ -41,6 +41,18 @@ const TabViewProps = [
default: 'null',
description: 'Uses to pass all properties of the HTMLButtonElement to the next button.'
},
{
name: 'prevIcon',
type: 'string',
default: 'null',
description: 'Prev icon of the scrollable tabview.'
},
{
name: 'nextIcon',
type: 'string',
default: 'null',
description: 'Next icon of the scrollable tabview.'
},
{
name: 'pt',
type: 'any',

16
api-generator/components/tag.js
View File

@ -22,6 +22,19 @@ const TagProps = [
type: 'string',
default: 'null',
description: 'Icon of the tag to display next to the value.'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];
const TagSlots = [
{
name: 'icon',
description: 'custom icon template.'
}
];
@ -29,6 +42,7 @@ module.exports = {
tag: {
name: 'Tag',
description: 'Tag component is used to categorize content.',
props: TagProps
props: TagProps,
slots: TagSlots
}
};

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

@ -10,6 +10,12 @@ const TerminalProps = [
type: 'string',
default: 'null',
description: 'Prompt text for each command.'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];

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

@ -10,6 +10,12 @@ const TextareaProps = [
type: 'boolean',
default: 'false',
description: 'When present, height of textarea changes as being typed.'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];

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

@ -34,6 +34,12 @@ const TieredMenuProps = [
type: 'boolean',
default: 'true',
description: "Whether to apply 'router-link-active-exact' class if route exactly matches the item path."
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];
@ -45,6 +51,10 @@ const TieredMenuSlots = [
{
name: 'submenuicon',
description: 'Custom submenu icon template.'
},
{
name: 'itemicon',
description: 'Custom item icon template.'
}
];

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

@ -22,6 +22,12 @@ const TimelineProps = [
type: 'string',
default: 'null',
description: 'Name of the field that uniquely identifies the a record in the data.'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];

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

@ -28,6 +28,12 @@ const ToastProps = [
type: 'object',
default: 'null',
description: 'Object literal to define widths per screen size.'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];
@ -60,6 +66,14 @@ const ToastSlots = [
{
name: 'message',
description: 'Custom content for the toast message'
},
{
name: 'icon',
description: 'Custom icon template.'
},
{
name: 'closeicon',
description: 'Custom close icon template.'
}
];

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

@ -70,6 +70,12 @@ const ToggleButtonProps = [
type: 'object',
default: 'null',
description: 'Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];
@ -109,11 +115,19 @@ const ToggleButtonEvents = [
}
];
const ToggleButtonSlots = [
{
name: 'icon',
description: 'custom icon template.'
}
];
module.exports = {
togglebutton: {
name: 'ToggleButton',
description: 'ToggleButton is used to select a boolean value using a button.',
props: ToggleButtonProps,
slots: ToggleButtonSlots,
events: ToggleButtonEvents
}
};

4
api-generator/components/toolbar.js
View File

@ -21,6 +21,10 @@ const ToolbarSlots = [
{
name: 'end',
description: "Custom content for the component's right side"
},
{
name: 'center',
description: "Custom content for the component's center"
}
];

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

@ -77,6 +77,12 @@ const TreeProps = [
type: 'string',
default: 'null',
description: 'Height of the scroll viewport in fixed units or the "flex" keyword for a dynamic size.'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];

16
api-generator/components/treeselect.js
View File

@ -101,6 +101,12 @@ const TreeSelectProps = [
type: 'string',
default: 'null',
description: 'Used to define a string that labels the element.'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];
@ -196,8 +202,16 @@ const TreeSelectSlots = [
description: 'Custom content when there is no data to display'
},
{
name: 'indicator',
name: 'triggericon',
description: 'Custom content for the dropdown indicator'
},
{
name: 'itemtogglericon',
description: 'Custom item toggler icon template.'
},
{
name: 'itemcheckboxicon',
description: 'Custom item checkbox icon template.'
}
];

48
api-generator/components/treetable.js
View File

@ -221,6 +221,12 @@ const TreeTableProps = [
type: 'string',
default: 'null',
description: 'Defines the responsive mode, currently only option is scroll.'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];
@ -443,23 +449,55 @@ const TreeTableEvents = [
const TreeTableSlots = [
{
name: 'header',
description: "Custom content for the component's header"
description: "Custom content for the component's header."
},
{
name: 'paginatorstart',
description: "Custom content for the component paginator's left side"
description: "Custom content for the component paginator's left side."
},
{
name: 'paginatorend',
description: "Custom content for the component paginator's right side"
description: "Custom content for the component paginator's right side."
},
{
name: 'empty',
description: 'Custom content when there is no data to display'
description: 'Custom content when there is no data to display.'
},
{
name: 'footer',
description: "Custom content for the component's footer"
description: "Custom content for the component's footer."
},
{
name: 'loadingicon',
description: 'Custom loading icon template.'
},
{
name: 'togglericon',
description: 'Custom toggler icon template.'
},
{
name: 'checkboxicon',
description: 'Custom checkbox icon template.'
},
{
name: 'sorticon',
description: 'Custom sort icon template.'
},
{
name: 'paginatorfirstpagelinkicon',
description: 'Custom paginator first page link icon template.'
},
{
name: 'paginatorprevpagelinkicon',
description: 'Custom paginator prev page link icon template.'
},
{
name: 'paginatornextpagelinkicon',
description: 'Custom paginator next page link icon template.'
},
{
name: 'paginatorlastpagelinkicon',
description: 'Custom paginator last page link icon template.'
}
];

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

@ -40,6 +40,12 @@ const TriStateCheckboxProps = [
type: 'string',
default: 'null',
description: 'Used to define a string that labels the element.'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];

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

@ -101,6 +101,12 @@ const VirtualScrollerProps = [
type: 'number|string',
default: '0',
description: 'Index of the element in tabbing order.'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];

8
assets/data/news.json
View File

@ -1,8 +1,8 @@
{
"id": 36,
"content": "Introducing the all-new Apollo Vite Template",
"linkText": "View Demo",
"linkHref": "https://www.primefaces.org/apollo-vue",
"id": 37,
"content": "Unstyled mode preview featuring Tailwind.",
"linkText": "Learn More",
"linkHref": "https://youtu.be/JpYIX3V96gs",
"backgroundStyle": "background-color:#4f8ff7",
"textStyle": "color:#ffffff;font-weight:500",
"linkStyle": "color:#ffffff;font-weight:700;text-decoration: underline;"

13
assets/menu/menu.json
View File

@ -455,9 +455,18 @@
"to": "/uikit"
},
{
"name": "PrimeIcons",
"name": "Icons",
"icon": "pi pi-eye",
"to": "/icons"
"children": [
{
"name": "Prime Icons",
"to": "/icons"
},
{
"name": "Custom Icons",
"to": "/customicons"
}
]
},
{
"name": "Templates",

2
build-meta.js
View File

@ -14,7 +14,7 @@ function copyDependencies(inFolder, outFolder) {
}
copyDependencies('./components/lib/', 'dist/');
copyDependencies('./components/lib/icon/', 'dist/icon/');
copyDependencies('./components/lib/icons/', 'dist/icons/');
fs.copySync(path.resolve(__dirname, './components/lib/ts-helpers.d.ts'), 'dist/ts-helpers.d.ts');
fs.copySync(path.resolve(__dirname, './package-build.json'), 'dist/package.json');

2
components/doc/DocComponent.vue
View File

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

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

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

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

@ -43,8 +43,8 @@
<script>
import BaseComponent from 'primevue/basecomponent';
import ChevronDownIcon from 'primevue/icon/chevrondown';
import ChevronRightIcon from 'primevue/icon/chevronright';
import ChevronDownIcon from 'primevue/icons/chevrondown';
import ChevronRightIcon from 'primevue/icons/chevronright';
import Ripple from 'primevue/ripple';
import { DomHandler, UniqueComponentId } from 'primevue/utils';

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

@ -37,19 +37,19 @@ export interface AccordionTabPassThroughOptions {
/**
* Uses to pass attributes to the headeraction's DOM element.
*/
headeraction?: AccordionTabPassThroughOptionType;
headerAction?: AccordionTabPassThroughOptionType;
/**
* Uses to pass attributes to the headericon's DOM element.
*/
headericon?: AccordionTabPassThroughOptionType;
headerIcon?: AccordionTabPassThroughOptionType;
/**
* Uses to pass attributes to the headertitle's DOM element.
*/
headertitle?: AccordionTabPassThroughOptionType;
headerTitle?: AccordionTabPassThroughOptionType;
/**
* Uses to pass attributes to the toggleablecontent's DOM element.
*/
toggleablecontent?: AccordionTabPassThroughOptionType;
toggleableContent?: AccordionTabPassThroughOptionType;
/**
* Uses to pass attributes to the content's DOM element.
*/

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

@ -8,8 +8,20 @@
*
*/
import { HTMLAttributes, InputHTMLAttributes, VNode } from 'vue';
import { ButtonPassThroughOptionType } from '../button';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
import { VirtualScrollerItemOptions, VirtualScrollerProps } from '../virtualscroller';
import { VirtualScrollerItemOptions, VirtualScrollerPassThroughOptionType, VirtualScrollerProps } from '../virtualscroller';
export declare type AutoCompletePassThroughOptionType = AutoCompletePassThroughAttributes | ((options: AutoCompletePassThroughMethodOptions) => AutoCompletePassThroughAttributes) | null | undefined;
/**
* Custom passthrough(pt) option method.
*/
export interface AutoCompletePassThroughMethodOptions {
props: AutoCompleteProps;
state: AutoCompleteState;
context: AutoCompleteContext;
}
/**
* Custom change event.
@ -78,6 +90,141 @@ export interface AutoCompleteCompleteEvent {
query: string;
}
/**
* Custom passthrough(pt) options.
* @see {@link AutoCompleteProps.pt}
*/
export interface AutoCompletePassThroughOptions {
/**
* Uses to pass attributes to the root's DOM element.
*/
root?: AutoCompletePassThroughOptionType;
/**
* Uses to pass attributes to the input's DOM element.
*/
input?: AutoCompletePassThroughOptionType;
/**
* Uses to pass attributes to the container's DOM element.
*/
container?: AutoCompletePassThroughOptionType;
/**
* Uses to pass attributes to the token' DOM element.
*/
token?: AutoCompletePassThroughOptionType;
/**
* Uses to pass attributes to the token label's DOM element.
*/
tokenLabel?: AutoCompletePassThroughOptionType;
/**
* Uses to pass attributes to the remove token icon's DOM element.
*/
removeTokenIcon?: AutoCompletePassThroughOptionType;
/**
* Uses to pass attributes to the loading icon's DOM element.
*/
loadingIcon?: AutoCompletePassThroughOptionType;
/**
* Uses to pass attributes to the Button component.
*/
dropdownButton?: ButtonPassThroughOptionType;
/**
* Uses to pass attributes to the search result message's DOM element.
*/
searchResultMessage?: AutoCompletePassThroughOptionType;
/**
* Uses to pass attributes to the panel's DOM element.
*/
panel?: AutoCompletePassThroughOptionType;
/**
* Uses to pass attributes to the VirtualScroller component.
* @see {@link VirtualScrollerPassThroughOptionType}
*/
virtualScroller?: VirtualScrollerPassThroughOptionType;
/**
* Uses to pass attributes to the list's DOM element.
*/
list?: AutoCompletePassThroughOptionType;
/**
* Uses to pass attributes to the item group's DOM element.
*/
itemGroup?: AutoCompletePassThroughOptionType;
/**
* Uses to pass attributes to the item's DOM element.
*/
item?: AutoCompletePassThroughOptionType;
/**
* Uses to pass attributes to the empty message's DOM element.
*/
emptyMessage?: AutoCompletePassThroughOptionType;
/**
* Uses to pass attributes to the selected message's DOM element.
*/
selectedMessage?: AutoCompletePassThroughOptionType;
}
/**
* Custom passthrough attributes for each DOM elements
*/
export interface AutoCompletePassThroughAttributes {
[key: string]: any;
}
/**
* Defines current inline state in AutoComplete component.
*/
export interface AutoCompleteState {
/**
* Current id state as a string.
*/
id: string;
/**
* Current focused state as a boolean.
* @defaultValue false
*/
focused: boolean;
/**
* Current focused item index as a number.
* @defaultvalue -1
*/
focusedOptionIndex: number;
/**
* Current focused item index as a number.
* @defaultvalue -1
*/
focusedMultipleOptionIndex: number;
/**
* Current overlay visible state as a boolean.
* @defaultValue false
*/
overlayVisible: boolean;
/**
* Current search state as a boolean.
* @defaultValue false
*/
searching: boolean;
}
/**
* Defines current options in AutoComplete component.
*/
export interface AutoCompleteContext {
/**
* Current selection state of the item as a boolean.
* @defaultValue false
*/
selected: boolean;
/**
* Current focus state of the item as a boolean.
* @defaultValue false
*/
focused: boolean;
/**
* Current disabled state of the item as a boolean.
* @defaultValue false
*/
disabled: boolean;
}
/**
* Defines valid properties in AutoComplete component.
*/
@ -206,6 +353,7 @@ export interface AutoCompleteProps {
panelProps?: HTMLAttributes | undefined;
/**
* Icon to display in the dropdown.
* @deprecated since v3.27.0. Use 'dropdownicon' slot.
*/
dropdownIcon?: string | undefined;
/**
@ -214,10 +362,12 @@ export interface AutoCompleteProps {
dropdownClass?: string | object | undefined;
/**
* Icon to display in loading state.
* @deprecated since v3.27.0. Use 'loadingicon' slot.
*/
loadingIcon?: string | undefined;
/**
* Icon to display in chip remove action.
* @deprecated since v3.27.0. Use 'removetokenicon' slot.
*/
removeTokenIcon?: string | undefined;
/**
@ -271,6 +421,11 @@ export interface AutoCompleteProps {
* Identifier of the underlying input element.
*/
'aria-labelledby'?: string | undefined;
/**
* Uses to pass attributes to DOM elements inside the component.
* @type {AutoCompletePassThroughOptions}
*/
pt?: AutoCompletePassThroughOptions;
}
/**
@ -410,7 +565,16 @@ export interface AutoCompleteSlots {
/**
* Custom remove token icon template in multiple mode.
*/
removetokenicon(): VNode[];
removetokenicon(scope: {
/**
* Style class of the icon.
*/
class: string;
/**
* Remove token icon function.
*/
onClick: void;
}): VNode[];
/**
* Custom loading icon template.
*/

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

@ -1,5 +1,5 @@
<template>
<div ref="container" :class="containerClass" @click="onContainerClick">
<div ref="container" :class="containerClass" @click="onContainerClick" v-bind="ptm('root')">
<input
v-if="!multiple"
ref="focusInput"
@ -25,7 +25,7 @@
@keydown="onKeyDown"
@input="onInput"
@change="onChange"
v-bind="inputProps"
v-bind="{ ...inputProps, ...ptm('input') }"
/>
<ul
v-if="multiple"
@ -38,6 +38,7 @@
@focus="onMultipleContainerFocus"
@blur="onMultipleContainerBlur"
@keydown="onMultipleContainerKeyDown"
v-bind="ptm('container')"
>
<li
v-for="(option, i) of modelValue"
@ -49,15 +50,16 @@
:aria-selected="true"
:aria-setsize="modelValue.length"
:aria-posinset="i + 1"
v-bind="ptm('token')"
>
<slot name="chip" :value="option">
<span class="p-autocomplete-token-label">{{ getOptionLabel(option) }}</span>
<span class="p-autocomplete-token-label" v-bind="ptm('tokenLabel')">{{ getOptionLabel(option) }}</span>
</slot>
<slot name="removetokenicon">
<component :is="removeTokenIcon ? 'span' : 'TimesCircleIcon'" :class="['p-autocomplete-token-icon', removeTokenIcon]" @click="removeOption($event, i)" aria-hidden="true" />
<slot name="removetokenicon" class="p-autocomplete-token-icon" :onClick="(event) => removeOption(event, i)">
<component :is="removeTokenIcon ? 'span' : 'TimesCircleIcon'" :class="['p-autocomplete-token-icon', removeTokenIcon]" @click="removeOption($event, i)" aria-hidden="true" v-bind="ptm('removeTokenIcon')" />
</slot>
</li>
<li class="p-autocomplete-input-token" role="option">
<li class="p-autocomplete-input-token" role="option" v-bind="ptm('token')">
<input
ref="focusInput"
:id="inputId"
@ -81,30 +83,48 @@
@keydown="onKeyDown"
@input="onInput"
@change="onChange"
v-bind="inputProps"
v-bind="{ ...inputProps, ...ptm('input') }"
/>
</li>
</ul>
<slot v-if="searching" name="loadingicon">
<component :is="loadingIcon ? 'i' : 'SpinnerIcon'" :class="['p-autocomplete-loader', loadingIcon]" spin aria-hidden="true" />
<i v-if="loadingIcon" :class="['p-autocomplete-loader pi-spin', loadingIcon]" aria-hidden="true" v-bind="ptm('loadingIcon')" />
<SpinnerIcon v-else class="p-autocomplete-loader" spin aria-hidden="true" v-bind="ptm('loadingIcon')" />
</slot>
<Button v-if="dropdown" ref="dropdownButton" type="button" tabindex="-1" :class="['p-autocomplete-dropdown', dropdownClass]" :disabled="disabled" aria-hidden="true" @click="onDropdownClick">
<slot name="dropdownicon">
<component :is="dropdownIcon ? 'span' : 'ChevronDownIcon'" :class="dropdownIcon" />
</slot>
<Button v-if="dropdown" ref="dropdownButton" type="button" tabindex="-1" :class="['p-autocomplete-dropdown', dropdownClass]" :disabled="disabled" aria-hidden="true" @click="onDropdownClick" :pt="ptm('dropdownButton')">
<template #icon>
<slot name="dropdownicon">
<component :is="dropdownIcon ? 'span' : 'ChevronDownIcon'" :class="dropdownIcon" v-bind="ptm('dropdownButton')['icon']" />
</slot>
</template>
</Button>
<span role="status" aria-live="polite" class="p-hidden-accessible">
<span role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenSearchResult')">
{{ searchResultMessageText }}
</span>
<Portal :appendTo="appendTo">
<transition name="p-connected-overlay" @enter="onOverlayEnter" @after-enter="onOverlayAfterEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
<div v-if="overlayVisible" :ref="overlayRef" :class="panelStyleClass" :style="{ ...panelStyle, 'max-height': virtualScrollerDisabled ? scrollHeight : '' }" @click="onOverlayClick" @keydown="onOverlayKeyDown" v-bind="panelProps">
<div
v-if="overlayVisible"
:ref="overlayRef"
:class="panelStyleClass"
:style="{ ...panelStyle, 'max-height': virtualScrollerDisabled ? scrollHeight : '' }"
@click="onOverlayClick"
@keydown="onOverlayKeyDown"
v-bind="{ ...panelProps, ...ptm('panel') }"
>
<slot name="header" :value="modelValue" :suggestions="visibleOptions"></slot>
<VirtualScroller :ref="virtualScrollerRef" v-bind="virtualScrollerOptions" :style="{ height: scrollHeight }" :items="visibleOptions" :tabindex="-1" :disabled="virtualScrollerDisabled">
<VirtualScroller :ref="virtualScrollerRef" v-bind="{ ...virtualScrollerOptions, ...ptm('virtualScroller') }" :style="{ height: scrollHeight }" :items="visibleOptions" :tabindex="-1" :disabled="virtualScrollerDisabled">
<template v-slot:content="{ styleClass, contentRef, items, getItemOptions, contentStyle, itemSize }">
<ul :ref="(el) => listRef(el, contentRef)" :id="id + '_list'" :class="['p-autocomplete-items', styleClass]" :style="contentStyle" role="listbox">
<ul :ref="(el) => listRef(el, contentRef)" :id="id + '_list'" :class="['p-autocomplete-items', styleClass]" :style="contentStyle" role="listbox" v-bind="ptm('list')">
<template v-for="(option, i) of items" :key="getOptionRenderKey(option, getOptionIndex(i, getItemOptions))">
<li v-if="isOptionGroup(option)" :id="id + '_' + getOptionIndex(i, getItemOptions)" :style="{ height: itemSize ? itemSize + 'px' : undefined }" class="p-autocomplete-item-group" role="option">
<li
v-if="isOptionGroup(option)"
:id="id + '_' + getOptionIndex(i, getItemOptions)"
:style="{ height: itemSize ? itemSize + 'px' : undefined }"
class="p-autocomplete-item-group"
role="option"
v-bind="ptm('itemGroup')"
>
<slot name="optiongroup" :option="option.optionGroup" :item="option.optionGroup" :index="getOptionIndex(i, getItemOptions)">{{ getOptionGroupLabel(option.optionGroup) }}</slot>
</li>
<li
@ -121,13 +141,14 @@
:aria-posinset="getAriaPosInset(getOptionIndex(i, getItemOptions))"
@click="onOptionSelect($event, option)"
@mousemove="onOptionMouseMove($event, getOptionIndex(i, getItemOptions))"
v-bind="getPTOptions(option, getItemOptions, i, 'item')"
>
<slot v-if="$slots.option" name="option" :option="option" :index="getOptionIndex(i, getItemOptions)">{{ getOptionLabel(option) }}</slot>
<slot v-else name="item" :item="option" :index="getOptionIndex(i, getItemOptions)">{{ getOptionLabel(option) }}</slot>
<!--TODO: Deprecated since v3.16.0-->
</li>
</template>
<li v-if="!items || (items && items.length === 0)" class="p-autocomplete-empty-message" role="option">
<li v-if="!items || (items && items.length === 0)" class="p-autocomplete-empty-message" role="option" v-bind="ptm('emptyMessage')">
<slot name="empty">{{ searchResultMessageText }}</slot>
</li>
</ul>
@ -137,7 +158,7 @@
</template>
</VirtualScroller>
<slot name="footer" :value="modelValue" :suggestions="visibleOptions"></slot>
<span role="status" aria-live="polite" class="p-hidden-accessible">
<span role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenSelectedMessage')">
{{ selectedMessageText }}
</span>
</div>
@ -147,10 +168,11 @@
</template>
<script>
import BaseComponent from 'primevue/basecomponent';
import Button from 'primevue/button';
import ChevronDownIcon from 'primevue/icon/chevrondown';
import SpinnerIcon from 'primevue/icon/spinner';
import TimesCircleIcon from 'primevue/icon/timescircle';
import ChevronDownIcon from 'primevue/icons/chevrondown';
import SpinnerIcon from 'primevue/icons/spinner';
import TimesCircleIcon from 'primevue/icons/timescircle';
import OverlayEventBus from 'primevue/overlayeventbus';
import Portal from 'primevue/portal';
import Ripple from 'primevue/ripple';
@ -159,6 +181,7 @@ import VirtualScroller from 'primevue/virtualscroller';
export default {
name: 'AutoComplete',
extends: BaseComponent,
emits: ['update:modelValue', 'change', 'focus', 'blur', 'item-select', 'item-unselect', 'dropdown-click', 'clear', 'complete', 'before-show', 'before-hide', 'show', 'hide'],
props: {
modelValue: null,
@ -386,6 +409,15 @@ export default {
getOptionRenderKey(option, index) {
return (this.dataKey ? ObjectUtils.resolveFieldData(option, this.dataKey) : this.getOptionLabel(option)) + '_' + index;
},
getPTOptions(option, itemOptions, index, key) {
return this.ptm(key, {
context: {
selected: this.isSelected(option),
focused: this.focusedOptionIndex === this.getOptionIndex(index, itemOptions),
disabled: this.isOptionDisabled(option)
}
});
},
isOptionDisabled(option) {
return this.optionDisabled ? ObjectUtils.resolveFieldData(option, this.optionDisabled) : false;
},

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

@ -9,6 +9,45 @@
import { VNode } from 'vue';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
export declare type AvatarPassThroughOptionType = AvatarPassThroughAttributes | ((options: AvatarPassThroughMethodOptions) => AvatarPassThroughAttributes) | null | undefined;
/**
* Custom passthrough(pt) option method.
*/
export interface AvatarPassThroughMethodOptions {
props: AvatarProps;
}
/**
* Custom passthrough attributes for each DOM elements
*/
export interface AvatarPassThroughAttributes {
[key: string]: any;
}
/**
* Custom passthrough(pt) options.
* @see {@link AvatarProps.pt}
*/
export interface AvatarPassThroughOptions {
/**
* Uses to pass attributes to the root's DOM element.
*/
root?: AvatarPassThroughOptionType;
/**
* Uses to pass attributes to the label's DOM element.
*/
label?: AvatarPassThroughOptionType;
/**
* Uses to pass attributes to the icon's DOM element.
*/
icon?: AvatarPassThroughOptionType;
/**
* Uses to pass attributes to the image's DOM element.
*/
image?: AvatarPassThroughOptionType;
}
/**
* Defines valid properties in Avatar component.
*/
@ -19,6 +58,7 @@ export interface AvatarProps {
label?: string | undefined;
/**
* Defines the icon to display.
* @deprecated since v3.27.0. Use 'icon' slot.
*/
icon?: string | undefined;
/**
@ -43,6 +83,11 @@ export interface AvatarProps {
* Establishes relationships between the component and label(s) where its value should be one or more element IDs.
*/
'aria-labelledby'?: string | undefined;
/**
* Uses to pass attributes to DOM elements inside the component.
* @type {AvatarPassThroughOptions}
*/
pt?: AvatarPassThroughOptions;
}
/**
@ -53,6 +98,10 @@ export interface AvatarSlots {
* Content can easily be customized with the default slot instead of using the built-in modes.
*/
default(): VNode[];
/**
* Custom icon template.
*/
icon(): VNode[];
}
/**

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

@ -1,16 +1,20 @@
<template>
<div :class="containerClass" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel">
<div :class="containerClass" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" v-bind="ptm('root')">
<slot>
<span v-if="label" class="p-avatar-text">{{ label }}</span>
<span v-else-if="icon" :class="iconClass"></span>
<img v-else-if="image" :src="image" :alt="ariaLabel" @error="onError" />
<span v-if="label" class="p-avatar-text" v-bind="ptm('label')">{{ label }}</span>
<component v-else-if="$slots.icon" :is="$slots.icon" class="p-avatar-icon" v-bind="ptm('icon')" />
<span v-else-if="icon" :class="['p-avatar-icon', icon]" v-bind="ptm('icon')" />
<img v-else-if="image" :src="image" :alt="ariaLabel" @error="onError" v-bind="ptm('image')" />
</slot>
</div>
</template>
<script>
import BaseComponent from 'primevue/basecomponent';
export default {
name: 'Avatar',
extends: BaseComponent,
emits: ['error'],
props: {
label: {
@ -58,9 +62,6 @@ export default {
'p-avatar-xl': this.size === 'xlarge'
}
];
},
iconClass() {
return ['p-avatar-icon', this.icon];
}
}
};

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

@ -9,10 +9,36 @@
*/
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
export declare type AvatarGroupPassThroughOptionType = AvatarGroupPassThroughAttributes | null | undefined;
/**
* Custom passthrough attributes for each DOM elements
*/
export interface AvatarGroupPassThroughAttributes {
[key: string]: any;
}
/**
* Custom passthrough(pt) options.
* @see {@link AvatarGroupProps.pt}
*/
export interface AvatarGroupPassThroughOptions {
/**
* Uses to pass attributes to the root's DOM element.
*/
root?: AvatarGroupPassThroughOptionType;
}
/**
* Defines valid properties in AvatarGroup component.
*/
export interface AvatarGroupProps {}
export interface AvatarGroupProps {
/**
* Uses to pass attributes to DOM elements inside the component.
* @type {AvatarGroupPassThroughOptions}
*/
pt?: AvatarGroupPassThroughOptions;
}
/**
* Defines valid slots in AvatarGroup component.

7
components/lib/avatargroup/AvatarGroup.vue
View File

@ -1,12 +1,15 @@
<template>
<div class="p-avatar-group p-component">
<div class="p-avatar-group p-component" v-bind="ptm('root')">
<slot></slot>
</div>
</template>
<script>
import BaseComponent from 'primevue/basecomponent';
export default {
name: 'AvatarGroup'
name: 'AvatarGroup',
extends: BaseComponent
};
</script>

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

@ -10,6 +10,33 @@
import { VNode } from 'vue';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
export declare type BadgePassThroughOptionType = BadgePassThroughAttributes | ((options: BadgePassThroughMethodOptions) => BadgePassThroughAttributes) | null | undefined;
/**
* Custom passthrough(pt) option method.
*/
export interface BadgePassThroughMethodOptions {
props: BadgeProps;
}
/**
* Custom passthrough attributes for each DOM elements
*/
export interface BadgePassThroughAttributes {
[key: string]: any;
}
/**
* Custom passthrough(pt) options.
* @see {@link BadgeProps.pt}
*/
export interface BadgePassThroughOptions {
/**
* Uses to pass attributes to the root's DOM element.
*/
root?: BadgePassThroughOptionType;
}
/**
* Defines valid properties in Badge component.
*/
@ -26,6 +53,11 @@ export interface BadgeProps {
* Size of the badge, valid options are 'large' and 'xlarge'.
*/
size?: 'large' | 'xlarge' | null | undefined;
/**
* Uses to pass attributes to DOM elements inside the component.
* @type {BadgePassThroughOptions}
*/
pt?: BadgePassThroughOptions;
}
/**

4
components/lib/badge/Badge.vue
View File

@ -1,14 +1,16 @@
<template>
<span :class="badgeClass">
<span :class="badgeClass" v-bind="ptm('root')">
<slot>{{ value }}</slot>
</span>
</template>
<script>
import BaseComponent from 'primevue/basecomponent';
import { ObjectUtils } from 'primevue/utils';
export default {
name: 'Badge',
extends: BaseComponent,
props: {
value: {
type: [String, Number],

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

@ -1,25 +1,46 @@
<script>
import { ObjectUtils } from 'primevue/utils';
import { mergeProps } from 'vue';
export default {
name: 'BaseComponent',
props: {
pt: {
type: Object,
value: {}
default: undefined
}
},
methods: {
getPTItem(obj = {}, key = '') {
getOption(obj = {}, key = '') {
const fKey = ObjectUtils.convertToFlatCase(key);
return obj[Object.keys(obj).find((k) => ObjectUtils.convertToFlatCase(k) === fKey) || ''];
},
getPTValue(obj = {}, key = '', params = {}) {
const self = ObjectUtils.getItemValue(this.getOption(obj, key), params);
const globalPT = ObjectUtils.getItemValue(this.getOption(this.defaultPT, key), params);
const merged = mergeProps(self, globalPT);
return merged;
/*
* @todo: The 'class' option in self can always be more powerful to style the component easily.
*
* return self && self['class'] ? { ...merged, ...{ class: self['class'] } } : merged;
*/
},
ptm(key = '', params = {}) {
return ObjectUtils.getItemValue(this.getPTItem(this.pt, key), { props: this.$props, state: this.$data, ...params });
return this.getPTValue(this.pt, key, { props: this.$props, state: this.$data, ...params });
},
ptmo(obj = {}, key = '', params = {}) {
return ObjectUtils.getItemValue(this.getPTItem(obj, key), params);
return this.getPTValue(obj, key, params);
}
},
computed: {
defaultPT() {
return ObjectUtils.getItemValue(this.getOption(this.$primevue.config.pt, this.$.type.name), this.defaultsParams);
},
defaultsParams() {
return { instance: this.$ };
}
}
};

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

@ -6,11 +6,11 @@ export default {
props: {
label: {
type: String,
value: undefined
default: undefined
},
spin: {
type: Boolean,
value: false
default: false
}
},
methods: {
@ -33,11 +33,8 @@ export default {
};
</script>
<style>
/* Theme */
.p-icon {
display: inline-block;
width: 1rem;
height: 1rem;
}
.p-icon-spin {

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