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

Merge branch 'master' into PV4113

pull/4114/head
Melloware 2023-09-05 07:43:18 -04:00 committed by GitHub
parent 12174a1f96 e64f250c92
commit f93b31747e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1459 changed files with 45002 additions and 14606 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3439
CHANGELOG.md
View File

File diff suppressed because it is too large Load Diff

24
README.md
View File

@ -33,17 +33,16 @@ const app = createApp(App);
app.use(PrimeVue);
```
## Styles
## Theming
PrimeVue has two theming has modes; styled or unstyled.
Theme, core and icons are the necessary css files of the components, visit the [Themes](https://primevue.org/theming) section for the complete list of available themes to choose from.
**Styled Mode**
Styled mode is based on pre-skinned components with opinionated themes like Material, Bootstrap or PrimeOne themes. Theme is the required css file to be imported, visit the [Themes](https://primevue.org/theming) section for the complete list of available themes to choose from.
```javascript
// theme
import 'primevue/resources/themes/lara-light-blue/theme.css';
// core
import 'primevue/resources/primevue.min.css';
```
Each PrimeVue theme has its own font family so it is suggested to apply it to your application for a unified look.
@ -54,7 +53,17 @@ body {
}
```
**Unstyled Mode**
Unstyled mode is disabled by default for all components. Using the PrimeVue plugin during installation, set `unstyled` as true to enable it globally. Visit the [Unstyled mode](https://primevue.org/unstyled) documentation for more information and examples.
```javascript
import { createApp } from "vue";
import PrimeVue from "primevue/config";
const app = createApp(App);
app.use(PrimeVue, { unstyled: true });
```
## Usage
@ -92,8 +101,7 @@ Open the nuxt configuration file and add the css dependencies.
```javascript
export default defineNuxtConfig({
css: [
"primevue/resources/themes/lara-light-blue/theme.css",
"primevue/resources/primevue.css"
"primevue/resources/themes/lara-light-blue/theme.css"
],
build: {
transpile: ["primevue"]
@ -145,4 +153,4 @@ We've created various samples for the popular options in the Vue ecosystem. Visi
<a href="https://github.com/primefaces/primevue/graphs/contributors">
<img src="https://contrib.rocks/image?repo=primefaces/primevue" />
</a>
</a>

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

@ -378,16 +378,27 @@ if (project) {
const childSinature = child.signatures[0];
const parameters = childSinature.parameters.reduce((acc, { name, type }, index) => (index === 0 ? `${name}: ${type.name}` : `${acc}, ${name}: ${type.name}`), '');
type += ` \t <b>${childSinature.name}(${parameters})</b>: ${childSinature.type?.name}, // ${childSinature.comment?.summary[0]?.text}\n `;
type += ` \t <span class="font-medium">${childSinature.name}(${parameters})</span>: ${childSinature.type?.name}, // ${childSinature.comment?.summary[0]?.text}\n `;
} else {
const childType = child.type.elementType ? child.type.elementType.name : child.type.name;
if (child.type?.declaration?.signatures) {
let functionParameters = '';
type += ` \t <b>${child.name}</b>: ${childType}, // ${child.comment?.summary[0]?.text}\n `;
child.type?.declaration?.signatures[0]?.parameters.map((param, index) => {
if (index !== 0) functionParameters += `, `;
functionParameters += `${param.name}: ${param.type?.name}`;
});
type += `\t <span class="font-medium">${child.name}</span>: (${functionParameters}) &rArr; ${child.type?.declaration?.signatures[0]?.type?.name}, // ${child.type?.declaration?.signatures[0]?.comment.summary[0]?.text}\n`;
} else {
const childType = child.type.elementType ? child.type.elementType.name : child.type.name;
type += ` \t <span class="font-medium">${child.name}</span>: ${childType}, // ${child.comment?.summary[0]?.text}\n `;
}
}
});
}
type = `{\n ${type} }`;
type = `{\n ${type}}`;
}
return {

2
api-generator/components/accordion.js
View File

@ -45,7 +45,7 @@ const AccordionProps = [
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
description: 'Used to pass attributes to DOM elements inside the component.'
},
{
name: 'unstyled',

8
api-generator/components/accordiontab.js
View File

@ -21,13 +21,13 @@ const AccordionTabProps = [
name: 'headerProps',
type: 'any',
default: 'null',
description: 'Uses to pass all properties of the HTMLDivElement to the tab header.'
description: 'Used to pass all properties of the HTMLDivElement to the tab header.'
},
{
name: 'headerActionProps',
type: 'any',
default: 'null',
description: 'Uses to pass all properties of the HTMLAnchorElement to the focusable anchor element inside the tab header.'
description: 'Used to pass all properties of the HTMLAnchorElement to the focusable anchor element inside the tab header.'
},
{
name: 'contentStyle',
@ -45,7 +45,7 @@ const AccordionTabProps = [
name: 'contentProps',
type: 'any',
default: 'null',
description: 'Uses to pass all properties of the HTMLDivElement to the tab content.'
description: 'Used to pass all properties of the HTMLDivElement to the tab content.'
},
{
name: 'disabled',
@ -57,7 +57,7 @@ const AccordionTabProps = [
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
description: 'Used to pass attributes to DOM elements inside the component.'
}
];

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

@ -77,6 +77,12 @@ const AutoCompleteProps = [
default: 'null',
description: 'Default text to display when no option is selected.'
},
{
name: 'loading',
type: 'boolean',
default: 'false',
description: 'Whether the multiselect is in loading state.'
},
{
name: 'disabled',
type: 'boolean',
@ -141,7 +147,7 @@ const AutoCompleteProps = [
name: 'inputProps',
type: 'object',
default: 'null',
description: 'Uses to pass all properties of the HTMLInputElement/HTMLSpanElement to the focusable input element inside the component.'
description: 'Used to pass all properties of the HTMLInputElement/HTMLSpanElement to the focusable input element inside the component.'
},
{
name: 'panelStyle',
@ -159,7 +165,7 @@ const AutoCompleteProps = [
name: 'panelProps',
type: 'object',
default: 'null',
description: 'Uses to pass all properties of the HTMLDivElement to the overlay panel inside the component.'
description: 'Used to pass all properties of the HTMLDivElement to the overlay panel inside the component.'
},
{
name: 'dropdownIcon',
@ -255,7 +261,7 @@ const AutoCompleteProps = [
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
description: 'Used to pass attributes to DOM elements inside the component.'
},
{
name: 'unstyled',

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

@ -33,7 +33,7 @@ const AvatarProps = [
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
description: 'Used to pass attributes to DOM elements inside the component.'
},
{
name: 'unstyled',
@ -53,7 +53,14 @@ const AvatarSlots = [
const AvatarEvents = [
{
name: 'error',
description: 'Triggered when an error occurs while loading an image file.'
description: 'Triggered when an error occurs while loading an image file.',
arguments: [
{
name: 'event',
type: 'object',
description: 'Browser event'
}
]
}
];

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

@ -33,7 +33,7 @@ const AvatarGroupProps = [
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
description: 'Used to pass attributes to DOM elements inside the component.'
},
{
name: 'unstyled',

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

@ -21,7 +21,7 @@ const BadgeProps = [
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
description: 'Used to pass attributes to DOM elements inside the component.'
},
{
name: 'unstyled',

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

@ -27,7 +27,7 @@ const BlockUIProps = [
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
description: 'Used to pass attributes to DOM elements inside the component.'
},
{
name: 'unstyled',

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

@ -21,7 +21,7 @@ const BreadcrumbProps = [
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
description: 'Used to pass attributes to DOM elements inside the component.'
},
{
name: 'unstyled',

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

@ -99,7 +99,7 @@ const ButtonProps = [
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
description: 'Used to pass attributes to DOM elements inside the component.'
},
{
name: 'unstyled',

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

@ -243,7 +243,7 @@ const CalendarProps = [
name: 'manualInput',
type: 'boolean',
default: 'true',
description: 'Wheter to allow prevents entering the date manually via typing.'
description: 'Whether to allow entering the date manually via typing.'
},
{
name: 'appendTo',
@ -297,7 +297,7 @@ const CalendarProps = [
name: 'inputProps',
type: 'object',
default: 'null',
description: 'Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.'
description: 'Used to pass all properties of the HTMLInputElement to the focusable input element inside the component.'
},
{
name: 'panelClass',
@ -315,13 +315,13 @@ const CalendarProps = [
name: 'panelProps',
type: 'object',
default: 'null',
description: 'Uses to pass all properties of the HTMLDivElement to the overlay panel inside the component.'
description: 'Used 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.'
description: 'Used to pass attributes to DOM elements inside the component.'
},
{
name: 'unstyled',

2
api-generator/components/card.js
View File

@ -3,7 +3,7 @@ const CardProps = [
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
description: 'Used to pass attributes to DOM elements inside the component.'
},
{
name: 'unstyled',

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

@ -87,7 +87,7 @@ const CarouselProps = [
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
description: 'Used to pass attributes to DOM elements inside the component.'
},
{
name: 'unstyled',

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

@ -75,7 +75,7 @@ const CascadeSelectProps = [
name: 'inputProps',
type: 'object',
default: 'null',
description: 'Uses to pass all properties of the HTMLInputElement/HTMLSpanElement to the focusable input element inside the component.'
description: 'Used to pass all properties of the HTMLInputElement/HTMLSpanElement to the focusable input element inside the component.'
},
{
name: 'panelStyle',
@ -93,7 +93,7 @@ const CascadeSelectProps = [
name: 'panelProps',
type: 'object',
default: 'null',
description: 'Uses to pass all properties of the HTMLDivElement to the overlay panel inside the component.'
description: 'Used to pass all properties of the HTMLDivElement to the overlay panel inside the component.'
},
{
name: 'appendTo',
@ -189,7 +189,7 @@ const CascadeSelectProps = [
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
description: 'Used to pass attributes to DOM elements inside the component.'
},
{
name: 'unstyled',

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

@ -39,7 +39,7 @@ const ChartProps = [
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
description: 'Used to pass attributes to DOM elements inside the component.'
},
{
name: 'unstyled',

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

@ -75,7 +75,7 @@ const CheckboxProps = [
name: 'inputProps',
type: 'object',
default: 'null',
description: 'Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.'
description: 'Used to pass all properties of the HTMLInputElement to the focusable input element inside the component.'
},
{
name: 'aria-labelledby',
@ -93,7 +93,7 @@ const CheckboxProps = [
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
description: 'Used to pass attributes to DOM elements inside the component.'
},
{
name: 'unstyled',

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

@ -33,7 +33,7 @@ const ChipProps = [
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
description: 'Used to pass attributes to DOM elements inside the component.'
},
{
name: 'unstyled',

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

@ -63,13 +63,13 @@ const ChipsProps = [
name: 'inputProps',
type: 'object',
default: 'null',
description: 'Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.'
description: 'Used 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.'
description: 'Used to pass attributes to DOM elements inside the component.'
},
{
name: 'unstyled',

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

@ -75,7 +75,7 @@ const ColorPickerProps = [
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
description: 'Used to pass attributes to DOM elements inside the component.'
},
{
name: 'unstyled',

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

@ -255,7 +255,7 @@ const ColumnProps = [
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
description: 'Used to pass attributes to DOM elements inside the component.'
}
];

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

@ -9,7 +9,7 @@ const ColumnGroupProps = [
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
description: 'Used to pass attributes to DOM elements inside the component.'
}
];

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

@ -21,7 +21,7 @@ const ConfirmDialogProps = [
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
description: 'Used to pass attributes to DOM elements inside the component.'
},
{
name: 'unstyled',

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

@ -9,7 +9,7 @@ const ConfirmPopupProps = [
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
description: 'Used to pass attributes to DOM elements inside the component.'
},
{
name: 'unstyled',

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

@ -39,7 +39,7 @@ const ContextMenuProps = [
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
description: 'Used to pass attributes to DOM elements inside the component.'
},
{
name: 'unstyled',

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

@ -366,6 +366,12 @@ const DataTableProps = [
default: 'false',
description: 'Whether to displays rows with alternating colors.'
},
{
name: 'size',
type: 'string',
default: 'null',
description: 'Defines the size of the table.'
},
{
name: 'tableStyle',
type: 'object',
@ -382,7 +388,7 @@ const DataTableProps = [
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
description: 'Used to pass attributes to DOM elements inside the component.'
},
{
name: 'unstyled',

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

@ -99,7 +99,7 @@ const DataViewProps = [
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
description: 'Used to pass attributes to DOM elements inside the component.'
},
{
name: 'unstyled',

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

@ -9,7 +9,7 @@ const DataViewLayoutOptionsProps = [
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
description: 'Used to pass attributes to DOM elements inside the component.'
}
];

2
api-generator/components/deferredcontent.js
View File

@ -3,7 +3,7 @@ const DeferredContentProps = [
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
description: 'Used to pass attributes to DOM elements inside the component.'
},
{
name: 'unstyled',

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

@ -135,7 +135,7 @@ const DialogProps = [
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
description: 'Used to pass attributes to DOM elements inside the component.'
},
{
name: 'unstyled',

2
api-generator/components/divider.js
View File

@ -21,7 +21,7 @@ const DividerProps = [
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
description: 'Used to pass attributes to DOM elements inside the component.'
},
{
name: 'unstyled',

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

@ -39,7 +39,7 @@ const DockProps = [
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
description: 'Used to pass attributes to DOM elements inside the component.'
},
{
name: 'unstyled',

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

@ -129,7 +129,7 @@ const DropdownProps = [
name: 'inputProps',
type: 'object',
default: 'null',
description: 'Uses to pass all properties of the HTMLInputElement/HTMLSpanElement to the focusable input element inside the component.'
description: 'Used to pass all properties of the HTMLInputElement/HTMLSpanElement to the focusable input element inside the component.'
},
{
name: 'panelStyle',
@ -147,19 +147,19 @@ const DropdownProps = [
name: 'panelProps',
type: 'object',
default: 'null',
description: 'Uses to pass all properties of the HTMLDivElement to the overlay panel inside the component.'
description: 'Used to pass all properties of the HTMLDivElement to the overlay panel inside the component.'
},
{
name: 'filterInputProps',
type: 'object',
default: 'null',
description: 'Uses to pass all properties of the HTMLInputElement to the filter input inside the component.'
description: 'Used to pass all properties of the HTMLInputElement to the filter input inside the component.'
},
{
name: 'clearIconProps',
type: 'object',
default: 'null',
description: 'Uses to pass all properties of the HTMLElement to the clear icon inside the component.'
description: 'Used to pass all properties of the HTMLElement to the clear icon inside the component.'
},
{
name: 'appendTo',
@ -261,7 +261,7 @@ const DropdownProps = [
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
description: 'Used to pass attributes to DOM elements inside the component.'
},
{
name: 'unstyled',

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

@ -39,7 +39,7 @@ const EditorProps = [
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
description: 'Used to pass attributes to DOM elements inside the component.'
},
{
name: 'unstyled',

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

@ -21,13 +21,13 @@ const FieldsetProps = [
name: 'toggleButtonProps',
type: 'string',
default: 'null',
description: 'Uses to pass the custom value to read for the AnchorHTMLAttributes inside the component.'
description: 'Used to pass the custom value to read for the AnchorHTMLAttributes inside the component.'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
description: 'Used to pass attributes to DOM elements inside the component.'
},
{
name: 'unstyled',

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

@ -147,7 +147,7 @@ const FileUploadProps = [
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
description: 'Used to pass attributes to DOM elements inside the component.'
},
{
name: 'unstyled',

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

@ -147,7 +147,7 @@ const GalleriaProps = [
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
description: 'Used to pass attributes to DOM elements inside the component.'
},
{
name: 'unstyled',

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

@ -27,7 +27,7 @@ const ImageProps = [
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
description: 'Used to pass attributes to DOM elements inside the component.'
},
{
name: 'unstyled',

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

@ -15,7 +15,7 @@ const InlineMessageProps = [
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
description: 'Used to pass attributes to DOM elements inside the component.'
},
{
name: 'unstyled',

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

@ -21,7 +21,7 @@ const InplaceProps = [
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
description: 'Used to pass attributes to DOM elements inside the component.'
},
{
name: 'unstyled',

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

@ -33,7 +33,7 @@ const InputMaskProps = [
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
description: 'Used to pass attributes to DOM elements inside the component.'
},
{
name: 'unstyled',

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

@ -169,25 +169,25 @@ const InputNumberProps = [
name: 'inputProps',
type: 'object',
default: 'null',
description: 'Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.'
description: 'Used to pass all properties of the HTMLInputElement to the focusable input element inside the component.'
},
{
name: 'incrementButtonProps',
type: 'object',
default: 'null',
description: 'Uses to pass all properties of the HTMLButtonElement to increment button inside the component.'
description: 'Used to pass all properties of the HTMLButtonElement to increment button inside the component.'
},
{
name: 'decrementButtonProps',
type: 'object',
default: 'null',
description: 'Uses to pass all properties of the HTMLButtonElement to decrement button inside the component.'
description: 'Used 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.'
description: 'Used to pass attributes to DOM elements inside the component.'
},
{
name: 'unstyled',

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

@ -39,13 +39,13 @@ const InputSwitchProps = [
name: 'inputProps',
type: 'object',
default: 'null',
description: 'Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.'
description: 'Used 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.'
description: 'Used to pass attributes to DOM elements inside the component.'
},
{
name: 'unstyled',

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

@ -15,7 +15,7 @@ const InputTextProps = [
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
description: 'Used to pass attributes to DOM elements inside the component.'
},
{
name: 'unstyled',

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

@ -99,7 +99,7 @@ const KnobProps = [
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
description: 'Used to pass attributes to DOM elements inside the component.'
},
{
name: 'unstyled',

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

@ -106,7 +106,7 @@ const ListboxProps = [
name: 'filterInputProps',
type: 'object',
default: 'null',
description: 'Uses to pass all properties of the HTMLInputElement to the filter input inside the component.'
description: 'Used to pass all properties of the HTMLInputElement to the filter input inside the component.'
},
{
name: 'virtualScrollerOptions',
@ -178,7 +178,7 @@ const ListboxProps = [
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
description: 'Used to pass attributes to DOM elements inside the component.'
},
{
name: 'unstyled',

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

@ -21,7 +21,7 @@ const MegaMenuProps = [
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
description: 'Used to pass attributes to DOM elements inside the component.'
},
{
name: 'unstyled',

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

@ -39,7 +39,7 @@ const MenuProps = [
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
description: 'Used to pass attributes to DOM elements inside the component.'
},
{
name: 'unstyled',
@ -71,11 +71,15 @@ const MenuSlots = [
},
{
name: 'item',
description: 'Template of a menuitem.'
description: 'Custom item template.'
},
{
name: 'itemicon',
description: 'Custom item icon template.'
},
{
name: 'submenuheader',
description: 'Custom submenuheader template.'
}
];

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

@ -15,7 +15,7 @@ const MenubarProps = [
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
description: 'Used to pass attributes to DOM elements inside the component.'
},
{
name: 'unstyled',

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

@ -39,7 +39,7 @@ const MessageProps = [
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
description: 'Used to pass attributes to DOM elements inside the component.'
},
{
name: 'unstyled',

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

@ -69,7 +69,7 @@ const MultiSelectProps = [
name: 'inputProps',
type: 'object',
default: 'null',
description: 'Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.'
description: 'Used to pass all properties of the HTMLInputElement to the focusable input element inside the component.'
},
{
name: 'panelStyle',
@ -87,19 +87,19 @@ const MultiSelectProps = [
name: 'panelProps',
type: 'object',
default: 'null',
description: 'Uses to pass all properties of the HTMLDivElement to the overlay panel.'
description: 'Used to pass all properties of the HTMLDivElement to the overlay panel.'
},
{
name: 'filterInputProps',
type: 'object',
default: 'null',
description: 'Uses to pass all properties of the HTMLInputElement to the filter input inside the overlay panel.'
description: 'Used to pass all properties of the HTMLInputElement to the filter input inside the overlay panel.'
},
{
name: 'closeButtonProps',
type: 'object',
default: 'null',
description: 'Uses to pass all properties of the HTMLButtonElement to the close button inside the overlay panel.'
description: 'Used to pass all properties of the HTMLButtonElement to the close button inside the overlay panel.'
},
{
name: 'dataKey',
@ -297,7 +297,7 @@ const MultiSelectProps = [
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
description: 'Used to pass attributes to DOM elements inside the component.'
},
{
name: 'unstyled',

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

@ -52,7 +52,7 @@ const OrderListProps = [
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
description: 'Used to pass attributes to DOM elements inside the component.'
},
{
name: 'unstyled',

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

@ -33,7 +33,7 @@ const OrganizationChartProps = [
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
description: 'Used to pass attributes to DOM elements inside the component.'
},
{
name: 'unstyled',

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

@ -51,7 +51,7 @@ const OverlayPanelProps = [
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
description: 'Used to pass attributes to DOM elements inside the component.'
},
{
name: 'unstyled',

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

@ -51,7 +51,7 @@ const PaginatorProps = [
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
description: 'Used to pass attributes to DOM elements inside the component.'
},
{
name: 'unstyled',

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

@ -21,13 +21,13 @@ const PanelProps = [
name: 'toggleButtonProps',
type: 'string',
default: 'null',
description: 'Uses to pass the custom value to read for the anchor inside the component.'
description: 'Used to pass the custom value to read for the anchor inside the component.'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
description: 'Used to pass attributes to DOM elements inside the component.'
},
{
name: 'unstyled',

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

@ -21,7 +21,7 @@ const PanelMenuProps = [
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
description: 'Used to pass attributes to DOM elements inside the component.'
},
{
name: 'unstyled',

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

@ -111,7 +111,7 @@ const PasswordProps = [
name: 'inputProps',
type: 'object',
default: 'null',
description: 'Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.'
description: 'Used to pass all properties of the HTMLInputElement to the focusable input element inside the component.'
},
{
name: 'panelId',
@ -135,13 +135,13 @@ const PasswordProps = [
name: 'panelProps',
type: 'object',
default: 'null',
description: 'Uses to pass all properties of the HTMLDivElement to the overlay panel inside the component.'
description: 'Used 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.'
description: 'Used to pass attributes to DOM elements inside the component.'
},
{
name: 'unstyled',
@ -174,11 +174,26 @@ const PasswordSlots = [
}
];
const PasswordEmits = [
{
name: 'change',
description: 'Callback to invoke on value change.',
arguments: [
{
name: 'event',
type: 'object',
description: 'Browser event'
}
]
}
];
module.exports = {
password: {
name: 'Password',
description: 'Password displays strength indicator for password fields.',
props: PasswordProps,
slots: PasswordSlots
slots: PasswordSlots,
events: PasswordEmits
}
};

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

@ -64,7 +64,7 @@ const PickListProps = [
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
description: 'Used to pass attributes to DOM elements inside the component.'
},
{
name: 'unstyled',

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

@ -21,7 +21,7 @@ const ProgressbarProps = [
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
description: 'Used to pass attributes to DOM elements inside the component.'
},
{
name: 'unstyled',

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

@ -21,7 +21,7 @@ const ProgressSpinnerProps = [
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
description: 'Used to pass attributes to DOM elements inside the component.'
},
{
name: 'unstyled',

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

@ -45,7 +45,7 @@ const RadioButtonProps = [
name: 'inputProps',
type: 'object',
default: 'null',
description: 'Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.'
description: 'Used to pass all properties of the HTMLInputElement to the focusable input element inside the component.'
},
{
name: 'aria-labelledby',
@ -63,7 +63,7 @@ const RadioButtonProps = [
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
description: 'Used to pass attributes to DOM elements inside the component.'
},
{
name: 'unstyled',

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

@ -51,7 +51,7 @@ const RatingProps = [
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
description: 'Used to pass attributes to DOM elements inside the component.'
},
{
name: 'unstyled',

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

@ -9,7 +9,7 @@ const RowProps = [
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
description: 'Used to pass attributes to DOM elements inside the component.'
}
];

2
api-generator/components/scrollpanel.js
View File

@ -9,7 +9,7 @@ const ScrollPanelProps = [
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
description: 'Used to pass attributes to DOM elements inside the component.'
},
{
name: 'unstyled',

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

@ -27,7 +27,7 @@ const ScrollTopProps = [
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
description: 'Used to pass attributes to DOM elements inside the component.'
},
{
name: 'unstyled',

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

@ -63,7 +63,7 @@ const SelectButtonProps = [
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
description: 'Used to pass attributes to DOM elements inside the component.'
},
{
name: 'unstyled',

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

@ -63,7 +63,7 @@ const SidebarProps = [
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
description: 'Used to pass attributes to DOM elements inside the component.'
},
{
name: 'unstyled',

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

@ -39,7 +39,7 @@ const SkeletonProps = [
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
description: 'Used to pass attributes to DOM elements inside the component.'
},
{
name: 'unstyled',

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

@ -63,7 +63,7 @@ const SliderProps = [
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
description: 'Used to pass attributes to DOM elements inside the component.'
},
{
name: 'unstyled',

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

@ -111,7 +111,7 @@ const SpeedDialProps = [
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
description: 'Used to pass attributes to DOM elements inside the component.'
},
{
name: 'unstyled',

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

@ -105,7 +105,7 @@ const SplitButtonProps = [
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
description: 'Used to pass attributes to DOM elements inside the component.'
},
{
name: 'unstyled',
@ -137,6 +137,10 @@ const SplitButtonSlots = [
{
name: 'menubuttonicon',
description: 'Custom menu button icon template.'
},
{
name: 'menuitemicon',
description: 'Custom menu item icon template.'
}
];

2
api-generator/components/splitter.js
View File

@ -33,7 +33,7 @@ const SplitterProps = [
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
description: 'Used to pass attributes to DOM elements inside the component.'
},
{
name: 'unstyled',

2
api-generator/components/splitterpanel.js
View File

@ -15,7 +15,7 @@ const SplitterPanelProps = [
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
description: 'Used to pass attributes to DOM elements inside the component.'
}
];

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

@ -27,7 +27,7 @@ const StepsProps = [
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
description: 'Used to pass attributes to DOM elements inside the component.'
},
{
name: 'unstyled',

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

@ -21,7 +21,7 @@ const TabMenuProps = [
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
description: 'Used to pass attributes to DOM elements inside the component.'
},
{
name: 'unstyled',

8
api-generator/components/tabpanel.js
View File

@ -21,13 +21,13 @@ const TabPanelProps = [
name: 'headerProps',
type: 'any',
default: 'null',
description: 'Uses to pass all properties of the HTMLLiElement to the tab header.'
description: 'Used to pass all properties of the HTMLLiElement to the tab header.'
},
{
name: 'headerActionProps',
type: 'any',
default: 'null',
description: 'Uses to pass all properties of the HTMLAnchorElement to the focusable anchor element inside the tab header.'
description: 'Used to pass all properties of the HTMLAnchorElement to the focusable anchor element inside the tab header.'
},
{
name: 'contentStyle',
@ -45,7 +45,7 @@ const TabPanelProps = [
name: 'contentProps',
type: 'any',
default: 'null',
description: 'Uses to pass all properties of the HTMLDivElement to the tab content.'
description: 'Used to pass all properties of the HTMLDivElement to the tab content.'
},
{
name: 'disabled',
@ -57,7 +57,7 @@ const TabPanelProps = [
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
description: 'Used to pass attributes to DOM elements inside the component.'
}
];

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

@ -33,13 +33,13 @@ const TabViewProps = [
name: 'previousButtonProps',
type: 'any',
default: 'null',
description: 'Uses to pass all properties of the HTMLButtonElement to the previous button.'
description: 'Used to pass all properties of the HTMLButtonElement to the previous button.'
},
{
name: 'nextButtonProps',
type: 'any',
default: 'null',
description: 'Uses to pass all properties of the HTMLButtonElement to the next button.'
description: 'Used to pass all properties of the HTMLButtonElement to the next button.'
},
{
name: 'prevIcon',
@ -57,7 +57,7 @@ const TabViewProps = [
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
description: 'Used to pass attributes to DOM elements inside the component.'
},
{
name: 'unstyled',

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

@ -27,7 +27,7 @@ const TagProps = [
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
description: 'Used to pass attributes to DOM elements inside the component.'
},
{
name: 'unstyled',

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

@ -15,7 +15,7 @@ const TerminalProps = [
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
description: 'Used to pass attributes to DOM elements inside the component.'
},
{
name: 'unstyled',

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

@ -15,7 +15,7 @@ const TextareaProps = [
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
description: 'Used to pass attributes to DOM elements inside the component.'
},
{
name: 'unstyled',

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

@ -39,7 +39,7 @@ const TieredMenuProps = [
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
description: 'Used to pass attributes to DOM elements inside the component.'
},
{
name: 'unstyled',

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

@ -27,7 +27,7 @@ const TimelineProps = [
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
description: 'Used to pass attributes to DOM elements inside the component.'
},
{
name: 'unstyled',

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

@ -33,7 +33,7 @@ const ToastProps = [
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
description: 'Used to pass attributes to DOM elements inside the component.'
},
{
name: 'unstyled',

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

@ -69,13 +69,13 @@ const ToggleButtonProps = [
name: 'inputProps',
type: 'object',
default: 'null',
description: 'Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.'
description: 'Used 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.'
description: 'Used to pass attributes to DOM elements inside the component.'
},
{
name: 'unstyled',

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

@ -9,7 +9,7 @@ const ToolbarProps = [
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
description: 'Used to pass attributes to DOM elements inside the component.'
},
{
name: 'unstyled',

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

@ -82,7 +82,7 @@ const TreeProps = [
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
description: 'Used to pass attributes to DOM elements inside the component.'
},
{
name: 'unstyled',

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

@ -106,7 +106,7 @@ const TreeSelectProps = [
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
description: 'Used to pass attributes to DOM elements inside the component.'
},
{
name: 'unstyled',

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

@ -222,11 +222,17 @@ const TreeTableProps = [
default: 'null',
description: 'Defines the responsive mode, currently only option is scroll.'
},
{
name: 'size',
type: 'string',
default: 'null',
description: 'Defines the size of the table.'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
description: 'Used to pass attributes to DOM elements inside the component.'
},
{
name: 'unstyled',

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

@ -27,7 +27,7 @@ const TriStateCheckboxProps = [
name: 'inputProps',
type: 'object',
default: 'null',
description: 'Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.'
description: 'Used to pass all properties of the HTMLInputElement to the focusable input element inside the component.'
},
{
name: 'aria-labelledby',
@ -45,7 +45,7 @@ const TriStateCheckboxProps = [
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
description: 'Used to pass attributes to DOM elements inside the component.'
},
{
name: 'unstyled',

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

@ -106,7 +106,7 @@ const VirtualScrollerProps = [
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
description: 'Used to pass attributes to DOM elements inside the component.'
}
];

6
assets/data/news.json
View File

@ -1,8 +1,8 @@
{
"id": 39,
"content": "Unstyled Mode with Tailwind Preview",
"id": 42,
"content": "Introducing Tailwind CSS Support",
"linkText": "Learn More",
"linkHref": "https://youtu.be/JpYIX3V96gs",
"linkHref": "https://primevue.org/tailwind",
"backgroundStyle": "background-color:#4f8ff7",
"textStyle": "color:#ffffff;font-weight:500",
"linkStyle": "color:#ffffff;font-weight:700;text-decoration: underline;"

64
assets/menu/menu.json
View File

@ -11,10 +11,6 @@
{
"name": "Configuration",
"to": "/configuration"
},
{
"name": "Accessibility",
"to": "/accessibility"
}
]
},
@ -432,23 +428,54 @@
"icon": "pi pi-palette",
"children": [
{
"name": "Overview",
"to": "/theming"
"name": "Styled Mode",
"children": [
{
"name": "Overview",
"to": "/theming"
},
{
"name": "Visual Editor",
"href": "https://designer.primevue.org"
},
{
"name": "Colors",
"to": "/colors"
},
{
"name": "SASS API",
"href": "https://www.primefaces.org/designer/api/primevue/3.9.0"
}
]
},
{
"name": "Visual Editor",
"href": "https://designer.primevue.org"
},
{
"name": "Colors",
"to": "/colors"
},
{
"name": "SASS API",
"href": "https://www.primefaces.org/designer/api/primevue/3.9.0"
"name": "Unstyled Mode",
"children": [
{
"name": "Overview",
"to": "/unstyled"
},
{
"name": "Tailwind",
"to": "/tailwind"
},
{
"name": "Bootstrap",
"to": "/bootstrap"
},
{
"name": "Bulma",
"to": "/bulma"
}
]
}
]
},
{
"name": "Pass Through",
"icon": "pi pi-directions",
"to": "/passthrough"
},
{
"name": "Figma UI Kit",
"icon": "pi pi-pencil",
@ -483,6 +510,11 @@
"icon": "pi pi-table",
"href": "https://primeflex.org"
},
{
"name": "Accessibility",
"icon": "pi pi-users",
"to": "/accessibility"
},
{
"name": "Support",
"icon": "pi pi-question",

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

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

23
assets/styles/layout/_core.scss
View File

@ -73,4 +73,27 @@ input[type="number"] {
.p-toast.p-toast-top-right,
.p-toast.p-toast-top-left {
top: 7rem;
}
.px-link {
font-size: 1rem;
font-family: var(--font-family);
border-radius: var(--border-radius);
text-align: left;
background-color: transparent;
margin: 0;
padding: 0;
border: none;
cursor: pointer;
user-select: none;
}
.px-link:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: var(--focus-ring);
}
.px-link:disabled {
cursor: default;
}

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

@ -1,10 +1,11 @@
.doc-tabmenu {
list-style: none;
margin: 0 17rem 0 0;
padding: 0;
padding: 0 0 1px 0;
display: flex;
margin-bottom: 2rem;
border-bottom: 1px solid var(--surface-border);
overflow: auto;
li {
margin-bottom: -1px;
@ -13,7 +14,7 @@
background-color: transparent;
border: 0 none;
display: block;
padding: 1rem 0;
padding: 1rem 2rem;
min-width: 12rem;
text-align: center;
color: var(--text-color-secondary);
@ -25,6 +26,7 @@
border-bottom: 1px solid transparent;
border-top-right-radius: var(--border-round);
border-top-left-radius: var(--border-round);
white-space: nowrap;
&:hover {
border-bottom-color: var(--text-color);
@ -42,6 +44,10 @@
}
}
}
&::-webkit-scrollbar {
display: none;
}
}
.doc-tabpanel,
@ -160,7 +166,7 @@
> .navbar-item-content {
display: flex;
.p-link {
.px-link {
padding: 0.25rem 1rem 0.25rem 1rem;
color: var(--text-color);
white-space: nowrap;
@ -178,7 +184,7 @@
> .navbar-item-content {
border-color: var(--primary-color);
.p-link {
.px-link {
font-weight: 700;
color: var(--primary-color);
}
@ -199,6 +205,18 @@
}
}
.doc-section-code-buttons {
gap: .75rem;
padding: .75rem 0 0;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
.p-button-label {
font-weight: normal;
font-size: 0.875rem;
}
}
.doc-section-code-tooltip .p-tooltip-text {
padding: 0.5rem;
font-size: 11px;
@ -211,19 +229,8 @@
}
}
.p-button-label {
font-weight: normal;
font-size: 0.875rem;
}
.doc-section-code-active {
.p-button-label {
font-weight: bold;
}
}
pre {
margin: 0 0 1.5rem 0;
margin: 0;
}
}
@ -269,6 +276,14 @@
text-decoration: underline;
}
}
.doc-option-type-options-container {
display: flex;
align-items: center;
}
span.doc-option-type-options {
color: var(--primary-700);
}
}
&.doc-option-default {
@ -283,7 +298,7 @@
}
.doc-option-name,
> i {
> i:not(.pi) {
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
position: relative;
scroll-margin-top: 6.5rem;
@ -316,6 +331,10 @@
}
}
}
.doc-option-link {
color: var(--primary-color);
}
}
}
}

1
build-meta.js
View File

@ -15,6 +15,7 @@ function copyDependencies(inFolder, outFolder) {
copyDependencies('./components/lib/', 'dist/');
copyDependencies('./components/lib/icons/', 'dist/icons/');
copyDependencies('./components/lib/passthrough/', 'dist/passthrough/');
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');

18
components/doc/DocApiTable.vue
View File

@ -19,7 +19,7 @@
</thead>
<tbody>
<tr v-for="prop in data" :key="prop">
<td v-for="[k, v] in Object.entries(prop)" :key="k" :class="{ 'doc-option-type': k === 'type', 'doc-option-default': k === 'defaultValue' }">
<td v-for="[k, v] in Object.entries(prop)" :key="k" :class="{ 'doc-option-type': k === 'type' || k === 'options', 'doc-option-default': k === 'defaultValue' }">
<template v-if="k !== 'readonly' && k !== 'optional' && k !== 'deprecated'">
<span v-if="k === 'name'" :id="id + '.' + v" class="doc-option-name" :class="{ 'line-through cursor-pointer': !!prop.deprecated }" :title="prop.deprecated">
{{ v
@ -34,8 +34,16 @@
</template>
</template>
<template v-else-if="k === 'options'">
<template v-for="val in v" :key="val.name">
<div class="doc-option-type-options-container">
{{ val.name }}: <span class="doc-option-type-options">{{ val.type }}</span>
</div>
</template>
</template>
<template v-else-if="k === 'parameters'">
<span v-if="v.name" :class="{ 'parameter-bold': label === 'Slots' }"> {{ v.name }} : </span>
<span v-if="v.name" :class="{ 'font-bold': label === 'Slots' }"> {{ v.name }} : </span>
<template v-for="(value, i) in getType(v.type)" :key="value">
{{ i !== 0 ? ' |' : '' }}<NuxtLink v-if="isLinkType(value)" :to="setLinkPath(value)" class="doc-option-link"> {{ value }} </NuxtLink>
<span v-else v-html="value"> </span>
@ -156,9 +164,3 @@ export default {
}
};
</script>
<style scoped>
.parameter-bold {
font-weight: bold;
}
</style>

15
components/doc/DocComponent.vue
View File

@ -12,8 +12,11 @@
<li :class="{ 'doc-tabmenu-active': tab === 1 }">
<button type="button" @click="tab = 1">API</button>
</li>
<li v-if="ptTabComponent" :class="{ 'doc-tabmenu-active': tab === 2 }">
<button type="button" @click="tab = 2">PASS THROUGH</button>
<li v-if="themingDocs" :class="{ 'doc-tabmenu-active': tab === 2 }">
<button type="button" @click="tab = 2">THEMING</button>
</li>
<li v-if="ptTabComponent" :class="{ 'doc-tabmenu-active': tab === 3 }">
<button type="button" @click="tab = 3">PASS THROUGH</button>
</li>
</ul>
@ -34,6 +37,10 @@
</div>
<div v-if="tab === 2" class="doc-tabpanel">
<component :is="{ ...themingDocs }" />
</div>
<div v-if="tab === 3" class="doc-tabpanel">
<component :is="{ ...ptTabComponent }" />
</div>
</div>
@ -42,14 +49,14 @@
<script>
export default {
props: ['title', 'header', 'description', 'componentDocs', 'apiDocs', 'className', 'ptTabComponent'],
props: ['title', 'header', 'description', 'componentDocs', 'apiDocs', 'className', 'ptTabComponent', 'themingDocs'],
data() {
return {
tab: 0
};
},
mounted() {
this.tab = this.$route.hash.includes('api') ? 1 : this.$route.hash.includes('pt') ? 2 : 0;
this.tab = this.$route.hash.includes('api') ? 1 : this.$route.hash.includes('theming') ? 2 : this.$route.hash.includes('pt') ? 3 : 0;
}
};
</script>

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