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

Merge branch 'master' of https://github.com/primefaces/primevue

pull/6449/head
Cagatay Civici 2024-09-20 16:47:49 +03:00
parent d8b4cdf6ef 18add4b52a
commit 63cfc0c44c
109 changed files with 285 additions and 218 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
apps/showcase/components/doc/DocApiSection.vue
View File

@ -348,7 +348,6 @@ export default {
return !findMainInterface || findMainInterface.values.props.length > 0; return !findMainInterface || findMainInterface.values.props.length > 0;
} }
}, },
computed: { computed: {
description() { description() {
return this.doc && this.doc.length > 0 ? `API defines helper props, events and others for the PrimeVue ${this.header} module.` : `${this.header} is a CSS feature so does not provide a Javascript API`; return this.doc && this.doc.length > 0 ? `API defines helper props, events and others for the PrimeVue ${this.header} module.` : `${this.header} is a CSS feature so does not provide a Javascript API`;

6
apps/showcase/components/doc/DocPTViewer.vue
View File

@ -1,4 +1,10 @@
<template> <template>
<DocSectionText v-bind="$attrs">
<p>
Some sections may not be visible due to the availability of the particular feature. Section names that start with the <i>pc</i> prefix indicate that the element is a PrimeVue component not a DOM element. Visit the
<PrimeVueNuxtLink to="/passthrough/#pcprefix">pass-through</PrimeVueNuxtLink> documentation for more information.
</p>
</DocSectionText>
<div ref="container" class="doc-ptviewerwrapper card"> <div ref="container" class="doc-ptviewerwrapper card">
<div id="doc-ptviewer" class="doc-ptviewer"> <div id="doc-ptviewer" class="doc-ptviewer">
<slot /> <slot />

1
apps/showcase/doc/accordion/pt/PTViewer.vue
View File

@ -1,5 +1,4 @@
<template> <template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs"> <DocPTViewer :docs="docs">
<Accordion value="0"> <Accordion value="0">
<AccordionPanel value="0"> <AccordionPanel value="0">

1
apps/showcase/doc/autocomplete/pt/PTViewer.vue
View File

@ -1,5 +1,4 @@
<template> <template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs"> <DocPTViewer :docs="docs">
<AutoComplete v-model="value" dropdown :suggestions="items" @complete="search" appendTo="self" /> <AutoComplete v-model="value" dropdown :suggestions="items" @complete="search" appendTo="self" />
</DocPTViewer> </DocPTViewer>

5
apps/showcase/doc/avatar/pt/PTViewer.vue
View File

@ -1,6 +1,5 @@
<template> <template>
<DocSectionText v-bind="$attrs" /> <DocPTViewer :docs="docs">
<DocPTViewer :docs="ptViewerDoc">
<div class="flex flex-wrap gap-8"> <div class="flex flex-wrap gap-8">
<AvatarGroup> <AvatarGroup>
<Avatar label="P" size="xlarge" shape="circle" /> <Avatar label="P" size="xlarge" shape="circle" />
@ -17,7 +16,7 @@ import { getPTOptions } from '@/components/doc/helpers';
export default { export default {
data() { data() {
return { return {
ptViewerDoc: [ docs: [
{ {
data: getPTOptions('Avatar'), data: getPTOptions('Avatar'),
key: 'Avatar' key: 'Avatar'

5
apps/showcase/doc/badge/pt/PTViewer.vue
View File

@ -1,6 +1,5 @@
<template> <template>
<DocSectionText v-bind="$attrs" /> <DocPTViewer :docs="docs">
<DocPTViewer :docs="ptViewerDoc">
<div class="flex flex-wrap gap-8"> <div class="flex flex-wrap gap-8">
<Badge value="2"></Badge> <Badge value="2"></Badge>
<OverlayBadge value="3"> <OverlayBadge value="3">
@ -16,7 +15,7 @@ import { getPTOptions } from '@/components/doc/helpers';
export default { export default {
data() { data() {
return { return {
ptViewerDoc: [ docs: [
{ {
data: getPTOptions('Badge'), data: getPTOptions('Badge'),
key: 'Badge' key: 'Badge'

5
apps/showcase/doc/blockui/pt/PTViewer.vue
View File

@ -1,6 +1,5 @@
<template> <template>
<DocSectionText v-bind="$attrs" /> <DocPTViewer :docs="docs">
<DocPTViewer :docs="ptViewerDoc">
<BlockUI blocked> <BlockUI blocked>
<Panel header="Basic"> <Panel header="Basic">
<p class="m-0"> <p class="m-0">
@ -18,7 +17,7 @@ import { getPTOptions } from '@/components/doc/helpers';
export default { export default {
data() { data() {
return { return {
ptViewerDoc: [ docs: [
{ {
data: getPTOptions('BlockUI'), data: getPTOptions('BlockUI'),
key: 'BlockUI' key: 'BlockUI'

5
apps/showcase/doc/breadcrumb/pt/PTViewer.vue
View File

@ -1,6 +1,5 @@
<template> <template>
<DocSectionText v-bind="$attrs" /> <DocPTViewer :docs="docs">
<DocPTViewer :docs="ptViewerDoc">
<Breadcrumb :home="home" :model="items" /> <Breadcrumb :home="home" :model="items" />
</DocPTViewer> </DocPTViewer>
</template> </template>
@ -15,7 +14,7 @@ export default {
icon: 'pi pi-home' icon: 'pi pi-home'
}, },
items: [{ label: 'Electronics' }, { label: 'Computer', icon: 'pi pi-desktop' }, { label: 'Accessories' }, { label: 'Keyboard' }, { label: 'Wireless' }], items: [{ label: 'Electronics' }, { label: 'Computer', icon: 'pi pi-desktop' }, { label: 'Accessories' }, { label: 'Keyboard' }, { label: 'Wireless' }],
ptViewerDoc: [ docs: [
{ {
data: getPTOptions('Breadcrumb'), data: getPTOptions('Breadcrumb'),
key: 'Breadcrumb' key: 'Breadcrumb'

1
apps/showcase/doc/button/pt/PTViewer.vue
View File

@ -1,5 +1,4 @@
<template> <template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs"> <DocPTViewer :docs="docs">
<Button label="Profile" icon="pi pi-user" severity="secondary" badge="2" badgeSeverity="contrast" /> <Button label="Profile" icon="pi pi-user" severity="secondary" badge="2" badgeSeverity="contrast" />
</DocPTViewer> </DocPTViewer>

1
apps/showcase/doc/card/pt/PTViewer.vue
View File

@ -1,5 +1,4 @@
<template> <template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs"> <DocPTViewer :docs="docs">
<Card style="width: 25rem"> <Card style="width: 25rem">
<template #title>Advanced Card</template> <template #title>Advanced Card</template>

1
apps/showcase/doc/carousel/pt/PTViewer.vue
View File

@ -1,5 +1,4 @@
<template> <template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs"> <DocPTViewer :docs="docs">
<Carousel :value="products" :numVisible="1" :numScroll="1" :responsiveOptions="responsiveOptions" class="!w-3/4 !p-2"> <Carousel :value="products" :numVisible="1" :numScroll="1" :responsiveOptions="responsiveOptions" class="!w-3/4 !p-2">
<template #item="slotProps"> <template #item="slotProps">

5
apps/showcase/doc/cascadeselect/pt/PTViewer.vue
View File

@ -1,6 +1,5 @@
<template> <template>
<DocSectionText v-bind="$attrs" /> <DocPTViewer :docs="docs">
<DocPTViewer :docs="ptViewerDoc">
<CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" /> <CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
</DocPTViewer> </DocPTViewer>
</template> </template>
@ -86,7 +85,7 @@ export default {
] ]
} }
], ],
ptViewerDoc: [ docs: [
{ {
data: getPTOptions('CascadeSelect'), data: getPTOptions('CascadeSelect'),
key: 'CascadeSelect' key: 'CascadeSelect'

5
apps/showcase/doc/chart/pt/PTViewer.vue
View File

@ -1,6 +1,5 @@
<template> <template>
<DocSectionText v-bind="$attrs" /> <DocPTViewer :docs="docs">
<DocPTViewer :docs="ptViewerDoc">
<Chart type="bar" :data="chartData" :options="chartOptions" /> <Chart type="bar" :data="chartData" :options="chartOptions" />
</DocPTViewer> </DocPTViewer>
</template> </template>
@ -14,7 +13,7 @@ export default {
return { return {
chartData: null, chartData: null,
chartOptions: null, chartOptions: null,
ptViewerDoc: [ docs: [
{ {
data: getPTOptions('Chart'), data: getPTOptions('Chart'),
key: 'Chart' key: 'Chart'

1
apps/showcase/doc/checkbox/pt/PTViewer.vue
View File

@ -1,5 +1,4 @@
<template> <template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs"> <DocPTViewer :docs="docs">
<Checkbox v-model="checked" :binary="true" /> <Checkbox v-model="checked" :binary="true" />
</DocPTViewer> </DocPTViewer>

5
apps/showcase/doc/chip/pt/PTViewer.vue
View File

@ -1,6 +1,5 @@
<template> <template>
<DocSectionText v-bind="$attrs" /> <DocPTViewer :docs="docs">
<DocPTViewer :docs="ptViewerDoc">
<div class="flex flex-wrap gap-8"> <div class="flex flex-wrap gap-8">
<Chip label="Microsoft" icon="pi pi-microsoft" removable /> <Chip label="Microsoft" icon="pi pi-microsoft" removable />
<Chip label="Xuxue Feng" image="https://primefaces.org/cdn/primevue/images/avatar/xuxuefeng.png" removable /> <Chip label="Xuxue Feng" image="https://primefaces.org/cdn/primevue/images/avatar/xuxuefeng.png" removable />
@ -14,7 +13,7 @@ import { getPTOptions } from '@/components/doc/helpers';
export default { export default {
data() { data() {
return { return {
ptViewerDoc: [ docs: [
{ {
data: getPTOptions('Chip'), data: getPTOptions('Chip'),
key: 'Chip' key: 'Chip'

1
apps/showcase/doc/colorpicker/pt/PTViewer.vue
View File

@ -1,5 +1,4 @@
<template> <template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs"> <DocPTViewer :docs="docs">
<ColorPicker v-model="color" inline /> <ColorPicker v-model="color" inline />
</DocPTViewer> </DocPTViewer>

18
apps/showcase/doc/common/apidoc/index.json
View File

@ -2204,7 +2204,7 @@
"description": "Used to pass attributes to the root's DOM element." "description": "Used to pass attributes to the root's DOM element."
}, },
{ {
"name": "pcInput", "name": "pcInputText",
"optional": true, "optional": true,
"readonly": false, "readonly": false,
"type": "any", "type": "any",
@ -20083,7 +20083,7 @@
"description": "Used to pass attributes to the root's DOM element." "description": "Used to pass attributes to the root's DOM element."
}, },
{ {
"name": "pcInput", "name": "pcInputText",
"optional": true, "optional": true,
"readonly": false, "readonly": false,
"type": "any", "type": "any",
@ -24168,6 +24168,14 @@
"default": "", "default": "",
"description": "Used to pass attributes to the content's DOM element." "description": "Used to pass attributes to the content's DOM element."
}, },
{
"name": "footer",
"optional": true,
"readonly": false,
"type": "DrawerPassThroughOptionType",
"default": "",
"description": "Used to pass attributes to the footer's DOM element."
},
{ {
"name": "mask", "name": "mask",
"optional": true, "optional": true,
@ -33128,7 +33136,7 @@
"description": "Used to pass attributes to the root's DOM element." "description": "Used to pass attributes to the root's DOM element."
}, },
{ {
"name": "pcInput", "name": "pcInputText",
"optional": true, "optional": true,
"readonly": false, "readonly": false,
"type": "any", "type": "any",
@ -33967,7 +33975,7 @@
"description": "Used to pass attributes to the root's DOM element." "description": "Used to pass attributes to the root's DOM element."
}, },
{ {
"name": "pcInput", "name": "pcInputText",
"optional": true, "optional": true,
"readonly": false, "readonly": false,
"type": "any", "type": "any",
@ -45907,7 +45915,7 @@
"description": "Used to pass attributes to the root's DOM element." "description": "Used to pass attributes to the root's DOM element."
}, },
{ {
"name": "pcInput", "name": "pcInputText",
"optional": true, "optional": true,
"readonly": false, "readonly": false,
"type": "any", "type": "any",

5
apps/showcase/doc/confirmpopup/pt/PTViewer.vue
View File

@ -1,6 +1,5 @@
<template> <template>
<DocSectionText v-bind="$attrs" /> <DocPTViewer :docs="docs">
<DocPTViewer :docs="ptViewerDoc">
<ConfirmPopup group="ptviewer"></ConfirmPopup> <ConfirmPopup group="ptviewer"></ConfirmPopup>
<Button ref="btn" @click="confirm1($event)" label="Open Popup" outlined></Button> <Button ref="btn" @click="confirm1($event)" label="Open Popup" outlined></Button>
</DocPTViewer> </DocPTViewer>
@ -12,7 +11,7 @@ import { getPTOptions } from '@/components/doc/helpers';
export default { export default {
data() { data() {
return { return {
ptViewerDoc: [ docs: [
{ {
data: getPTOptions('ConfirmPopup'), data: getPTOptions('ConfirmPopup'),
key: 'ConfirmPopup' key: 'ConfirmPopup'

5
apps/showcase/doc/contextmenu/pt/PTViewer.vue
View File

@ -1,6 +1,5 @@
<template> <template>
<DocSectionText v-bind="$attrs" /> <DocPTViewer :docs="docs">
<DocPTViewer :docs="ptViewerDoc">
<img id="logo" alt="Logo" src="https://primefaces.org/cdn/primevue/images/nature/nature2.jpg" class="w-full md:w-[20rem] rounded shadow-lg" @contextmenu="onImageRightClick" aria-haspopup="true" /> <img id="logo" alt="Logo" src="https://primefaces.org/cdn/primevue/images/nature/nature2.jpg" class="w-full md:w-[20rem] rounded shadow-lg" @contextmenu="onImageRightClick" aria-haspopup="true" />
<ContextMenu ref="menu" appendTo="#logo" :model="items" /> <ContextMenu ref="menu" appendTo="#logo" :model="items" />
</DocPTViewer> </DocPTViewer>
@ -16,7 +15,7 @@ export default {
{ label: 'Copy', icon: 'pi pi-copy' }, { label: 'Copy', icon: 'pi pi-copy' },
{ label: 'Rename', icon: 'pi pi-file-edit' } { label: 'Rename', icon: 'pi pi-file-edit' }
], ],
ptViewerDoc: [ docs: [
{ {
data: getPTOptions('ContextMenu'), data: getPTOptions('ContextMenu'),
key: 'ContextMenu' key: 'ContextMenu'

1
apps/showcase/doc/datatable/pt/PTViewer.vue
View File

@ -1,5 +1,4 @@
<template> <template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs"> <DocPTViewer :docs="docs">
<DataTable :value="products" tableStyle="min-width: 50rem"> <DataTable :value="products" tableStyle="min-width: 50rem">
<Column field="code" header="Code"></Column> <Column field="code" header="Code"></Column>

1
apps/showcase/doc/dataview/pt/PTViewer.vue
View File

@ -1,5 +1,4 @@
<template> <template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs"> <DocPTViewer :docs="docs">
<DataView :value="products"> <DataView :value="products">
<template #list="slotProps"> <template #list="slotProps">

1
apps/showcase/doc/datepicker/pt/PTViewer.vue
View File

@ -1,5 +1,4 @@
<template> <template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs"> <DocPTViewer :docs="docs">
<DatePicker v-model="date" showIcon fluid iconDisplay="input" /> <DatePicker v-model="date" showIcon fluid iconDisplay="input" />
</DocPTViewer> </DocPTViewer>

1
apps/showcase/doc/deferredcontent/pt/PTViewer.vue
View File

@ -1,5 +1,4 @@
<template> <template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs"> <DocPTViewer :docs="docs">
<DeferredContent> <DeferredContent>
<img src="https://primefaces.org/cdn/primevue/images/nature/nature4.jpg" alt="Nature" /> <img src="https://primefaces.org/cdn/primevue/images/nature/nature4.jpg" alt="Nature" />

5
apps/showcase/doc/dialog/pt/PTViewer.vue
View File

@ -1,6 +1,5 @@
<template> <template>
<DocSectionText v-bind="$attrs" /> <DocPTViewer :docs="docs">
<DocPTViewer :docs="ptViewerDoc">
<Dialog v-model:visible="visible" appendTo="#doc-ptviewer" header="Edit Profile" maximizable pt:mask="!relative" :draggable="false" class="!my-auto" :style="{ width: '25rem' }"> <Dialog v-model:visible="visible" appendTo="#doc-ptviewer" header="Edit Profile" maximizable pt:mask="!relative" :draggable="false" class="!my-auto" :style="{ width: '25rem' }">
<span class="text-surface-500 dark:text-surface-400 block mb-8">Update your information.</span> <span class="text-surface-500 dark:text-surface-400 block mb-8">Update your information.</span>
<div class="flex items-center gap-4 mb-4"> <div class="flex items-center gap-4 mb-4">
@ -28,7 +27,7 @@ export default {
data() { data() {
return { return {
visible: true, visible: true,
ptViewerDoc: [ docs: [
{ {
data: getPTOptions('Dialog'), data: getPTOptions('Dialog'),
key: 'Dialog' key: 'Dialog'

1
apps/showcase/doc/divider/pt/PTViewer.vue
View File

@ -1,5 +1,4 @@
<template> <template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs"> <DocPTViewer :docs="docs">
<div> <div>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Asperiores debitis praesentium aliquam.</p> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Asperiores debitis praesentium aliquam.</p>

5
apps/showcase/doc/dock/pt/PTViewer.vue
View File

@ -1,6 +1,5 @@
<template> <template>
<DocSectionText v-bind="$attrs" /> <DocPTViewer :docs="docs">
<DocPTViewer :docs="ptViewerDoc">
<div class="relative w-full"> <div class="relative w-full">
<Dock :model="items"> <Dock :model="items">
<template #itemicon="{ item }"> <template #itemicon="{ item }">
@ -35,7 +34,7 @@ export default {
icon: 'https://primefaces.org/cdn/primevue/images/dock/trash.png' icon: 'https://primefaces.org/cdn/primevue/images/dock/trash.png'
} }
], ],
ptViewerDoc: [ docs: [
{ {
data: getPTOptions('Dock'), data: getPTOptions('Dock'),
key: 'Dock' key: 'Dock'

8
apps/showcase/doc/drawer/pt/PTImage.vue
View File

@ -1,8 +0,0 @@
<template>
<DocSectionText v-bind="$attrs">
<p>{{ $attrs.description }}</p>
</DocSectionText>
<div class="card">
<img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/sidebar.jpg" />
</div>
</template>

56
apps/showcase/doc/drawer/pt/PTViewer.vue Normal file
View File

@ -0,0 +1,56 @@
<template>
<DocPTViewer :docs="docs" class="!justify-start">
<div class="">
<div class="p-drawer p-component h-[450px] w-80" role="complementary" aria-modal="true" data-pc-name="drawer" data-pc-section="root">
<span class="p-hidden-accessible p-hidden-focusable" tabindex="0" role="presentation" aria-hidden="true" data-p-hidden-accessible="true" data-p-hidden-focusable="true" data-pc-section="firstfocusableelement"></span>
<div class="p-drawer-header" data-pc-section="header">
<div class="p-drawer-title" data-pc-section="title">Drawer</div>
<button
class="p-button p-component p-button-icon-only p-button-secondary p-button-rounded p-button-text p-drawer-close-button"
type="button"
aria-label="Close"
data-pc-name="pcclosebutton"
data-p-disabled="false"
data-p-severity="secondary"
data-pc-group-section="iconcontainer"
data-pc-extend="button"
data-pc-section="root"
>
<TimesIcon class="p-button-icon" />
</button>
</div>
<div class="p-drawer-content" data-pc-section="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</p>
</div>
<div class="p-drawer-footer" data-pc-section="footer">Footer</div>
<span class="p-hidden-accessible p-hidden-focusable" tabindex="0" role="presentation" aria-hidden="true" data-p-hidden-accessible="true" data-p-hidden-focusable="true" data-pc-section="lastfocusableelement"></span>
</div>
</div>
</DocPTViewer>
</template>
<script>
import { getPTOptions } from '@/components/doc/helpers';
import TimesIcon from '@primevue/icons/times';
import { markRaw } from 'vue';
export default {
data() {
return {
visible: true,
docs: [
{
data: getPTOptions('Drawer'),
key: 'Drawer'
}
]
};
},
components: {
TimesIcon: markRaw(TimesIcon)
}
};
</script>

8
apps/showcase/doc/drawer/pt/index.vue
View File

@ -11,16 +11,16 @@
<script> <script>
import DocApiTable from '@/components/doc/DocApiTable.vue'; import DocApiTable from '@/components/doc/DocApiTable.vue';
import { getPTOptions } from '@/components/doc/helpers'; import { getPTOptions } from '@/components/doc/helpers';
import PTImage from './PTImage.vue'; import PTViewer from './PTViewer.vue';
export default { export default {
data() { data() {
return { return {
docs: [ docs: [
{ {
id: 'pt.image', id: 'pt.viewer',
label: 'Wireframe', label: 'Viewer',
component: PTImage component: PTViewer
}, },
{ {
id: 'pt.doc.drawer', id: 'pt.doc.drawer',

1
apps/showcase/doc/editor/pt/PTViewer.vue
View File

@ -1,5 +1,4 @@
<template> <template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs"> <DocPTViewer :docs="docs">
<Editor v-model="value" editorStyle="height: 320px" /> <Editor v-model="value" editorStyle="height: 320px" />
</DocPTViewer> </DocPTViewer>

1
apps/showcase/doc/fieldset/pt/PTViewer.vue
View File

@ -1,5 +1,4 @@
<template> <template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs"> <DocPTViewer :docs="docs">
<Fieldset legend="Header" toggleable> <Fieldset legend="Header" toggleable>
<p class="m-0"> <p class="m-0">

1
apps/showcase/doc/fileupload/pt/PTViewer.vue
View File

@ -1,5 +1,4 @@
<template> <template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs"> <DocPTViewer :docs="docs">
<div class="w-full"> <div class="w-full">
<FileUpload name="demo[]" url="/api/upload" :multiple="true" accept="image/*" :maxFileSize="1000000"> <FileUpload name="demo[]" url="/api/upload" :multiple="true" accept="image/*" :maxFileSize="1000000">

1
apps/showcase/doc/floatlabel/pt/PTViewer.vue
View File

@ -1,5 +1,4 @@
<template> <template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs"> <DocPTViewer :docs="docs">
<FloatLabel> <FloatLabel>
<InputText id="username" v-model="value" autocomplete="off" /> <InputText id="username" v-model="value" autocomplete="off" />

5
apps/showcase/doc/fluid/pt/PTViewer.vue
View File

@ -1,6 +1,5 @@
<template> <template>
<DocSectionText v-bind="$attrs" /> <DocPTViewer :docs="docs">
<DocPTViewer :docs="ptViewerDoc">
<Fluid> <Fluid>
<InputText /> <InputText />
</Fluid> </Fluid>
@ -13,7 +12,7 @@ import { getPTOptions } from '@/components/doc/helpers';
export default { export default {
data() { data() {
return { return {
ptViewerDoc: [ docs: [
{ {
data: getPTOptions('Fluid'), data: getPTOptions('Fluid'),
key: 'Fluid' key: 'Fluid'

1
apps/showcase/doc/galleria/pt/PTViewer.vue
View File

@ -1,5 +1,4 @@
<template> <template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs"> <DocPTViewer :docs="docs">
<Galleria :value="images" :responsiveOptions="responsiveOptions" showItemNavigators :numVisible="5" containerStyle="max-width: 640px"> <Galleria :value="images" :responsiveOptions="responsiveOptions" showItemNavigators :numVisible="5" containerStyle="max-width: 640px">
<template #item="slotProps"> <template #item="slotProps">

1
apps/showcase/doc/iconfield/pt/PTViewer.vue
View File

@ -1,5 +1,4 @@
<template> <template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs"> <DocPTViewer :docs="docs">
<IconField> <IconField>
<InputIcon class="pi pi-search" /> <InputIcon class="pi pi-search" />

1
apps/showcase/doc/iftalabel/pt/PTViewer.vue
View File

@ -1,5 +1,4 @@
<template> <template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs"> <DocPTViewer :docs="docs">
<IftaLabel> <IftaLabel>
<InputText id="username" v-model="value" autocomplete="off" /> <InputText id="username" v-model="value" autocomplete="off" />

1
apps/showcase/doc/image/pt/PTViewer.vue
View File

@ -1,5 +1,4 @@
<template> <template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs"> <DocPTViewer :docs="docs">
<Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" width="250" preview /> <Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" width="250" preview />
</DocPTViewer> </DocPTViewer>

5
apps/showcase/doc/inplace/pt/PTViewer.vue
View File

@ -1,6 +1,5 @@
<template> <template>
<DocSectionText v-bind="$attrs" /> <DocPTViewer :docs="docs">
<DocPTViewer :docs="ptViewerDoc">
<Inplace> <Inplace>
<template #display> View Content </template> <template #display> View Content </template>
<template #content> <template #content>
@ -19,7 +18,7 @@ import { getPTOptions } from '@/components/doc/helpers';
export default { export default {
data() { data() {
return { return {
ptViewerDoc: [ docs: [
{ {
data: getPTOptions('Inplace'), data: getPTOptions('Inplace'),
key: 'Inplace' key: 'Inplace'

1
apps/showcase/doc/inputgroup/pt/PTViewer.vue
View File

@ -1,5 +1,4 @@
<template> <template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs"> <DocPTViewer :docs="docs">
<InputGroup> <InputGroup>
<InputGroupAddon>$</InputGroupAddon> <InputGroupAddon>$</InputGroupAddon>

1
apps/showcase/doc/inputmask/pt/PTViewer.vue
View File

@ -1,5 +1,4 @@
<template> <template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs"> <DocPTViewer :docs="docs">
<InputMask id="basic" v-model="value" mask="99-999999" placeholder="99-999999" /> <InputMask id="basic" v-model="value" mask="99-999999" placeholder="99-999999" />
</DocPTViewer> </DocPTViewer>

1
apps/showcase/doc/inputnumber/pt/PTViewer.vue
View File

@ -1,5 +1,4 @@
<template> <template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs"> <DocPTViewer :docs="docs">
<InputNumber v-model="value" inputId="stacked-buttons" showButtons mode="currency" currency="USD" /> <InputNumber v-model="value" inputId="stacked-buttons" showButtons mode="currency" currency="USD" />
</DocPTViewer> </DocPTViewer>

1
apps/showcase/doc/inputotp/pt/PTViewer.vue
View File

@ -1,5 +1,4 @@
<template> <template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs"> <DocPTViewer :docs="docs">
<InputOtp v-model="value" /> <InputOtp v-model="value" />
</DocPTViewer> </DocPTViewer>

1
apps/showcase/doc/inputtext/pt/PTViewer.vue
View File

@ -1,5 +1,4 @@
<template> <template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs"> <DocPTViewer :docs="docs">
<InputText v-model="value" placeholder="Username" /> <InputText v-model="value" placeholder="Username" />
</DocPTViewer> </DocPTViewer>

1
apps/showcase/doc/knob/pt/PTViewer.vue
View File

@ -1,5 +1,4 @@
<template> <template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs"> <DocPTViewer :docs="docs">
<Knob v-model="value" /> <Knob v-model="value" />
</DocPTViewer> </DocPTViewer>

1
apps/showcase/doc/listbox/pt/PTViewer.vue
View File

@ -1,5 +1,4 @@
<template> <template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs"> <DocPTViewer :docs="docs">
<Listbox v-model="selectedCity" filter checkmark :highlightOnSelect="false" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" class="w-full md:w-56" listStyle="max-height:250px"> <Listbox v-model="selectedCity" filter checkmark :highlightOnSelect="false" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" class="w-full md:w-56" listStyle="max-height:250px">
<template #optiongroup="slotProps"> <template #optiongroup="slotProps">

5
apps/showcase/doc/megamenu/pt/PTViewer.vue
View File

@ -1,6 +1,5 @@
<template> <template>
<DocSectionText v-bind="$attrs" /> <DocPTViewer :docs="docs">
<DocPTViewer :docs="ptViewerDoc">
<MegaMenu :model="items" /> <MegaMenu :model="items" />
</DocPTViewer> </DocPTViewer>
</template> </template>
@ -71,7 +70,7 @@ export default {
] ]
} }
], ],
ptViewerDoc: [ docs: [
{ {
data: getPTOptions('MegaMenu'), data: getPTOptions('MegaMenu'),
key: 'MegaMenu' key: 'MegaMenu'

5
apps/showcase/doc/menu/pt/PTViewer.vue
View File

@ -1,6 +1,5 @@
<template> <template>
<DocSectionText v-bind="$attrs" /> <DocPTViewer :docs="docs">
<DocPTViewer :docs="ptViewerDoc">
<Menu :model="items" /> <Menu :model="items" />
</DocPTViewer> </DocPTViewer>
</template> </template>
@ -42,7 +41,7 @@ export default {
] ]
} }
], ],
ptViewerDoc: [ docs: [
{ {
data: getPTOptions('Menu'), data: getPTOptions('Menu'),
key: 'Menu' key: 'Menu'

5
apps/showcase/doc/menubar/pt/PTViewer.vue
View File

@ -1,6 +1,5 @@
<template> <template>
<DocSectionText v-bind="$attrs" /> <DocPTViewer :docs="docs">
<DocPTViewer :docs="ptViewerDoc">
<Menubar :model="items" /> <Menubar :model="items" />
</DocPTViewer> </DocPTViewer>
</template> </template>
@ -57,7 +56,7 @@ export default {
icon: 'pi pi-envelope' icon: 'pi pi-envelope'
} }
], ],
ptViewerDoc: [ docs: [
{ {
data: getPTOptions('Menubar'), data: getPTOptions('Menubar'),
key: 'Menubar' key: 'Menubar'

1
apps/showcase/doc/message/pt/PTViewer.vue
View File

@ -1,5 +1,4 @@
<template> <template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs"> <DocPTViewer :docs="docs">
<Message closable severity="info" icon="pi pi-send">Info Message</Message> <Message closable severity="info" icon="pi pi-send">Info Message</Message>
</DocPTViewer> </DocPTViewer>

5
apps/showcase/doc/metergroup/pt/PTViewer.vue
View File

@ -1,6 +1,5 @@
<template> <template>
<DocSectionText v-bind="$attrs" /> <DocPTViewer :docs="docs">
<DocPTViewer :docs="ptViewerDoc">
<MeterGroup :value="value" /> <MeterGroup :value="value" />
</DocPTViewer> </DocPTViewer>
</template> </template>
@ -17,7 +16,7 @@ export default {
{ label: 'Media', color: '#60a5fa', value: 24, icon: 'pi pi-image' }, { label: 'Media', color: '#60a5fa', value: 24, icon: 'pi pi-image' },
{ label: 'System', color: '#c084fc', value: 10, icon: 'pi pi-cog' } { label: 'System', color: '#c084fc', value: 10, icon: 'pi pi-cog' }
], ],
ptViewerDoc: [ docs: [
{ {
data: getPTOptions('MeterGroup'), data: getPTOptions('MeterGroup'),
key: 'MeterGroup' key: 'MeterGroup'

1
apps/showcase/doc/multiselect/pt/PTViewer.vue
View File

@ -1,5 +1,4 @@
<template> <template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs"> <DocPTViewer :docs="docs">
<MultiSelect v-model="selectedCities" :options="groupedCities" optionLabel="label" filter optionGroupLabel="label" optionGroupChildren="items" display="chip" placeholder="Select Cities" class="w-full md:w-80"> <MultiSelect v-model="selectedCities" :options="groupedCities" optionLabel="label" filter optionGroupLabel="label" optionGroupChildren="items" display="chip" placeholder="Select Cities" class="w-full md:w-80">
<template #optiongroup="slotProps"> <template #optiongroup="slotProps">

1
apps/showcase/doc/orderlist/pt/PTViewer.vue
View File

@ -1,5 +1,4 @@
<template> <template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs"> <DocPTViewer :docs="docs">
<OrderList v-model="products" dataKey="id" breakpoint="575px" pt:pcList:root="w-full sm:w-56"> <OrderList v-model="products" dataKey="id" breakpoint="575px" pt:pcList:root="w-full sm:w-56">
<template #option="{ option }"> <template #option="{ option }">

1
apps/showcase/doc/organizationchart/pt/PTViewer.vue
View File

@ -1,5 +1,4 @@
<template> <template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs"> <DocPTViewer :docs="docs">
<OrganizationChart :value="data" collapsible> <OrganizationChart :value="data" collapsible>
<template #default="slotProps"> <template #default="slotProps">

5
apps/showcase/doc/paginator/pt/PTViewer.vue
View File

@ -1,6 +1,5 @@
<template> <template>
<DocSectionText v-bind="$attrs" /> <DocPTViewer :docs="docs">
<DocPTViewer :docs="ptViewerDoc">
<div class="w-full"> <div class="w-full">
<Paginator :rows="10" :totalRecords="120" :rowsPerPageOptions="[10, 20, 30]"></Paginator> <Paginator :rows="10" :totalRecords="120" :rowsPerPageOptions="[10, 20, 30]"></Paginator>
</div> </div>
@ -13,7 +12,7 @@ import { getPTOptions } from '@/components/doc/helpers';
export default { export default {
data() { data() {
return { return {
ptViewerDoc: [ docs: [
{ {
data: getPTOptions('Paginator'), data: getPTOptions('Paginator'),
key: 'Paginator' key: 'Paginator'

5
apps/showcase/doc/panel/pt/PTViewer.vue
View File

@ -1,6 +1,5 @@
<template> <template>
<DocSectionText v-bind="$attrs" /> <DocPTViewer :docs="docs">
<DocPTViewer :docs="ptViewerDoc">
<Panel header="Header" toggleable> <Panel header="Header" toggleable>
<p class="m-0"> <p class="m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
@ -16,7 +15,7 @@ import { getPTOptions } from '@/components/doc/helpers';
export default { export default {
data() { data() {
return { return {
ptViewerDoc: [ docs: [
{ {
data: getPTOptions('Panel'), data: getPTOptions('Panel'),
key: 'Panel' key: 'Panel'

5
apps/showcase/doc/panelmenu/pt/PTViewer.vue
View File

@ -1,6 +1,5 @@
<template> <template>
<DocSectionText v-bind="$attrs" /> <DocPTViewer :docs="docs">
<DocPTViewer :docs="ptViewerDoc">
<PanelMenu :model="items" class="w-full md:w-80" /> <PanelMenu :model="items" class="w-full md:w-80" />
</DocPTViewer> </DocPTViewer>
</template> </template>
@ -89,7 +88,7 @@ export default {
] ]
} }
], ],
ptViewerDoc: [ docs: [
{ {
data: getPTOptions('PanelMenu'), data: getPTOptions('PanelMenu'),
key: 'PanelMenu' key: 'PanelMenu'

74
apps/showcase/doc/passthrough/PCPrefixDoc.vue Normal file
View File

@ -0,0 +1,74 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Section names that start with the <i>pc</i> prefix indicate that the element is a PrimeVue component not a DOM element.</p>
</DocSectionText>
<div class="card flex justify-center">
<Button
type="button"
label="Messages"
icon="pi pi-users"
badge="2"
outlined
:pt="{
root: 'border-violet-500',
label: 'text-violet-900 dark:text-violet-400',
icon: 'text-violet-900 dark:text-violet-400',
pcBadge: {
root: '!bg-violet-400 !text-white'
}
}"
/>
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
code: {
basic: `
<Button type="button" label="Messages" icon="pi pi-users" badge="2" outlined
:pt="{
root: 'border-violet-500',
label: 'text-violet-900 dark:text-violet-400',
icon: 'text-violet-900 dark:text-violet-400',
pcBadge: {
root: '!bg-violet-400 !text-white'
}
}"
/>
`,
options: `
<template>
<Button type="button" label="Messages" icon="pi pi-users" badge="2" outlined
:pt="{
root: 'border-violet-500',
label: 'text-violet-900 dark:text-violet-400',
icon: 'text-violet-900 dark:text-violet-400',
pcBadge: {
root: '!bg-violet-400 !text-white'
}
}"
/>
</template>
`,
composition: `
<template>
<Button type="button" label="Messages" icon="pi pi-users" badge="2" outlined
:pt="{
root: 'border-violet-500',
label: 'text-violet-900 dark:text-violet-400',
icon: 'text-violet-900 dark:text-violet-400',
pcBadge: {
root: '!bg-violet-400 !text-white'
}
}"
/>
</template>
`
}
};
}
};
</script>

1
apps/showcase/doc/password/pt/PTViewer.vue
View File

@ -1,5 +1,4 @@
<template> <template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs"> <DocPTViewer :docs="docs">
<Password v-model="value" toggleMask /> <Password v-model="value" toggleMask />
</DocPTViewer> </DocPTViewer>

5
apps/showcase/doc/picklist/pt/PTViewer.vue
View File

@ -1,6 +1,5 @@
<template> <template>
<DocSectionText v-bind="$attrs" /> <DocPTViewer :docs="docs">
<DocPTViewer :docs="ptViewerDoc">
<PickList v-model="products" dataKey="id" breakpoint="1400px" class="w-full"> <PickList v-model="products" dataKey="id" breakpoint="1400px" class="w-full">
<template #option="{ option }"> <template #option="{ option }">
{{ option.name }} {{ option.name }}
@ -17,7 +16,7 @@ export default {
data() { data() {
return { return {
products: null, products: null,
ptViewerDoc: [ docs: [
{ {
data: getPTOptions('PickList'), data: getPTOptions('PickList'),
key: 'PickList' key: 'PickList'

5
apps/showcase/doc/popover/pt/PTViewer.vue
View File

@ -1,6 +1,5 @@
<template> <template>
<DocSectionText v-bind="$attrs" /> <DocPTViewer :docs="docs">
<DocPTViewer :docs="ptViewerDoc">
<Button ref="btn" type="button" icon="pi pi-share-alt" label="Share" @click="toggle" /> <Button ref="btn" type="button" icon="pi pi-share-alt" label="Share" @click="toggle" />
<Popover ref="op" appendTo="self"> <Popover ref="op" appendTo="self">
<div class="flex flex-col gap-4 w-[25rem]"> <div class="flex flex-col gap-4 w-[25rem]">
@ -52,7 +51,7 @@ export default {
{ name: 'Bernardo Dominic', image: 'bernardodominic.png', email: 'bernardo@email.com', role: 'Editor' }, { name: 'Bernardo Dominic', image: 'bernardodominic.png', email: 'bernardo@email.com', role: 'Editor' },
{ name: 'Ioni Bowcher', image: 'ionibowcher.png', email: 'ioni@email.com', role: 'Viewer' } { name: 'Ioni Bowcher', image: 'ionibowcher.png', email: 'ioni@email.com', role: 'Viewer' }
], ],
ptViewerDoc: [ docs: [
{ {
data: getPTOptions('Popover'), data: getPTOptions('Popover'),
key: 'Popover' key: 'Popover'

5
apps/showcase/doc/progressbar/pt/PTViewer.vue
View File

@ -1,6 +1,5 @@
<template> <template>
<DocSectionText v-bind="$attrs" /> <DocPTViewer :docs="docs">
<DocPTViewer :docs="ptViewerDoc">
<div class="w-full"> <div class="w-full">
<ProgressBar :value="50"></ProgressBar> <ProgressBar :value="50"></ProgressBar>
</div> </div>
@ -13,7 +12,7 @@ import { getPTOptions } from '@/components/doc/helpers';
export default { export default {
data() { data() {
return { return {
ptViewerDoc: [ docs: [
{ {
data: getPTOptions('ProgressBar'), data: getPTOptions('ProgressBar'),
key: 'ProgressBar' key: 'ProgressBar'

5
apps/showcase/doc/progressspinner/pt/PTViewer.vue
View File

@ -1,6 +1,5 @@
<template> <template>
<DocSectionText v-bind="$attrs" /> <DocPTViewer :docs="docs">
<DocPTViewer :docs="ptViewerDoc">
<ProgressSpinner /> <ProgressSpinner />
</DocPTViewer> </DocPTViewer>
</template> </template>
@ -11,7 +10,7 @@ import { getPTOptions } from '@/components/doc/helpers';
export default { export default {
data() { data() {
return { return {
ptViewerDoc: [ docs: [
{ {
data: getPTOptions('ProgressSpinner'), data: getPTOptions('ProgressSpinner'),
key: 'ProgressSpinner' key: 'ProgressSpinner'

1
apps/showcase/doc/radiobutton/pt/PTViewer.vue
View File

@ -1,5 +1,4 @@
<template> <template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs"> <DocPTViewer :docs="docs">
<RadioButton v-model="value" value="1" /> <RadioButton v-model="value" value="1" />
</DocPTViewer> </DocPTViewer>

1
apps/showcase/doc/rating/pt/PTViewer.vue
View File

@ -1,5 +1,4 @@
<template> <template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs"> <DocPTViewer :docs="docs">
<Rating v-model="value" /> <Rating v-model="value" />
</DocPTViewer> </DocPTViewer>

1
apps/showcase/doc/scrollpanel/pt/PTViewer.vue
View File

@ -1,5 +1,4 @@
<template> <template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs"> <DocPTViewer :docs="docs">
<ScrollPanel style="width: 100%; height: 200px" pt:bary="!visible !opacity-100"> <ScrollPanel style="width: 100%; height: 200px" pt:bary="!visible !opacity-100">
<p> <p>

5
apps/showcase/doc/scrolltop/pt/PTViewer.vue
View File

@ -1,6 +1,5 @@
<template> <template>
<DocSectionText v-bind="$attrs" /> <DocPTViewer :docs="docs">
<DocPTViewer :docs="ptViewerDoc">
<ScrollPanel style="width: 250px; height: 200px"> <ScrollPanel style="width: 250px; height: 200px">
<p> <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae et leo duis ut diam. Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur adipiscing Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae et leo duis ut diam. Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur adipiscing
@ -20,7 +19,7 @@ import { getPTOptions } from '@/components/doc/helpers';
export default { export default {
data() { data() {
return { return {
ptViewerDoc: [ docs: [
{ {
data: getPTOptions('ScrollTop'), data: getPTOptions('ScrollTop'),
key: 'ScrollTop' key: 'ScrollTop'

1
apps/showcase/doc/select/pt/PTViewer.vue
View File

@ -1,5 +1,4 @@
<template> <template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs"> <DocPTViewer :docs="docs">
<Select v-model="selectedCity" filter :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Select a City" class="w-full md:w-56"> <Select v-model="selectedCity" filter :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Select a City" class="w-full md:w-56">
<template #optiongroup="slotProps"> <template #optiongroup="slotProps">

1
apps/showcase/doc/selectbutton/pt/PTViewer.vue
View File

@ -1,5 +1,4 @@
<template> <template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs"> <DocPTViewer :docs="docs">
<SelectButton v-model="value" :options="options" /> <SelectButton v-model="value" :options="options" />
</DocPTViewer> </DocPTViewer>

5
apps/showcase/doc/skeleton/pt/PTViewer.vue
View File

@ -1,6 +1,5 @@
<template> <template>
<DocSectionText v-bind="$attrs" /> <DocPTViewer :docs="docs">
<DocPTViewer :docs="ptViewerDoc">
<div class="w-full"> <div class="w-full">
<Skeleton class="mb-2"></Skeleton> <Skeleton class="mb-2"></Skeleton>
<Skeleton width="10rem" class="mb-2"></Skeleton> <Skeleton width="10rem" class="mb-2"></Skeleton>
@ -17,7 +16,7 @@ import { getPTOptions } from '@/components/doc/helpers';
export default { export default {
data() { data() {
return { return {
ptViewerDoc: [ docs: [
{ {
data: getPTOptions('Skeleton'), data: getPTOptions('Skeleton'),
key: 'Skeleton' key: 'Skeleton'

1
apps/showcase/doc/slider/pt/PTViewer.vue
View File

@ -1,5 +1,4 @@
<template> <template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs"> <DocPTViewer :docs="docs">
<Slider v-model="value" class="w-56" /> <Slider v-model="value" class="w-56" />
</DocPTViewer> </DocPTViewer>

1
apps/showcase/doc/speeddial/pt/PTViewer.vue
View File

@ -1,5 +1,4 @@
<template> <template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs"> <DocPTViewer :docs="docs">
<div style="position: relative; height: 300px"> <div style="position: relative; height: 300px">
<SpeedDial :model="items" direction="down" style="position: absolute; left: calc(50% - 2rem); top: 0" /> <SpeedDial :model="items" direction="down" style="position: absolute; left: calc(50% - 2rem); top: 0" />

3
apps/showcase/doc/splitbutton/pt/PTViewer.vue
View File

@ -1,7 +1,6 @@
<template> <template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs"> <DocPTViewer :docs="docs">
<SplitButton label="Save" icon="pi pi-check" dropdownIcon="pi pi-cog" @click="save" :model="items" /> <SplitButton label="Save" icon="pi pi-check" dropdownIcon="pi pi-cog" :model="items" />
</DocPTViewer> </DocPTViewer>
</template> </template>

1
apps/showcase/doc/splitter/pt/PTViewer.vue
View File

@ -1,5 +1,4 @@
<template> <template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs"> <DocPTViewer :docs="docs">
<Splitter style="height: 300px" class="w-full"> <Splitter style="height: 300px" class="w-full">
<SplitterPanel class="flex items-center justify-center"> Panel 1 </SplitterPanel> <SplitterPanel class="flex items-center justify-center"> Panel 1 </SplitterPanel>

1
apps/showcase/doc/stepper/pt/PTViewer.vue
View File

@ -1,5 +1,4 @@
<template> <template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs"> <DocPTViewer :docs="docs">
<Stepper value="1" class="basis-[50rem]" linear> <Stepper value="1" class="basis-[50rem]" linear>
<StepList :style="{ overflowX: 'unset' }"> <StepList :style="{ overflowX: 'unset' }">

1
apps/showcase/doc/tabs/pt/PTViewer.vue
View File

@ -1,5 +1,4 @@
<template> <template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs"> <DocPTViewer :docs="docs">
<Tabs value="0"> <Tabs value="0">
<TabList> <TabList>

5
apps/showcase/doc/tag/pt/PTViewer.vue
View File

@ -1,6 +1,5 @@
<template> <template>
<DocSectionText v-bind="$attrs" /> <DocPTViewer :docs="docs">
<DocPTViewer :docs="ptViewerDoc">
<Tag icon="pi pi-user" value="Primary"></Tag> <Tag icon="pi pi-user" value="Primary"></Tag>
</DocPTViewer> </DocPTViewer>
</template> </template>
@ -11,7 +10,7 @@ import { getPTOptions } from '@/components/doc/helpers';
export default { export default {
data() { data() {
return { return {
ptViewerDoc: [ docs: [
{ {
data: getPTOptions('Tag'), data: getPTOptions('Tag'),
key: 'Tag' key: 'Tag'

5
apps/showcase/doc/terminal/pt/PTViewer.vue
View File

@ -1,6 +1,5 @@
<template> <template>
<DocSectionText v-bind="$attrs" /> <DocPTViewer :docs="docs">
<DocPTViewer :docs="ptViewerDoc">
<div> <div>
<p>Enter "<strong>date</strong>" to display the current date, "<strong>greet {0}</strong>" for a message and "<strong>random</strong>" to get a random number.</p> <p>Enter "<strong>date</strong>" to display the current date, "<strong>greet {0}</strong>" for a message and "<strong>random</strong>" to get a random number.</p>
<Terminal welcomeMessage="Welcome to PrimeVue" prompt="primevue $" aria-label="PrimeVue Terminal Service" /> <Terminal welcomeMessage="Welcome to PrimeVue" prompt="primevue $" aria-label="PrimeVue Terminal Service" />
@ -15,7 +14,7 @@ import TerminalService from 'primevue/terminalservice';
export default { export default {
data() { data() {
return { return {
ptViewerDoc: [ docs: [
{ {
data: getPTOptions('Terminal'), data: getPTOptions('Terminal'),
key: 'Terminal' key: 'Terminal'

2
apps/showcase/doc/textarea/IftaLabelDoc.vue
View File

@ -15,7 +15,7 @@
export default { export default {
data() { data() {
return { return {
description: null, value: null,
code: { code: {
basic: ` basic: `
<IftaLabel> <IftaLabel>

1
apps/showcase/doc/textarea/pt/PTViewer.vue
View File

@ -1,5 +1,4 @@
<template> <template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs"> <DocPTViewer :docs="docs">
<Textarea v-model="value" rows="5" cols="30" style="resize: none" /> <Textarea v-model="value" rows="5" cols="30" style="resize: none" />
</DocPTViewer> </DocPTViewer>

5
apps/showcase/doc/tieredmenu/pt/PTViewer.vue
View File

@ -1,6 +1,5 @@
<template> <template>
<DocSectionText v-bind="$attrs" /> <DocPTViewer :docs="docs">
<DocPTViewer :docs="ptViewerDoc">
<TieredMenu :model="items" /> <TieredMenu :model="items" />
</DocPTViewer> </DocPTViewer>
</template> </template>
@ -80,7 +79,7 @@ export default {
] ]
} }
], ],
ptViewerDoc: [ docs: [
{ {
data: getPTOptions('TieredMenu'), data: getPTOptions('TieredMenu'),
key: 'TieredMenu' key: 'TieredMenu'

5
apps/showcase/doc/timeline/pt/PTViewer.vue
View File

@ -1,6 +1,5 @@
<template> <template>
<DocSectionText v-bind="$attrs" /> <DocPTViewer :docs="docs">
<DocPTViewer :docs="ptViewerDoc">
<Timeline :value="events"> <Timeline :value="events">
<template #opposite="slotProps"> <template #opposite="slotProps">
<small class="text-surface-500 dark:text-surface-400">{{ slotProps.item.date }}</small> <small class="text-surface-500 dark:text-surface-400">{{ slotProps.item.date }}</small>
@ -24,7 +23,7 @@ export default {
{ status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' }, { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' },
{ status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' } { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
], ],
ptViewerDoc: [ docs: [
{ {
data: getPTOptions('Timeline'), data: getPTOptions('Timeline'),
key: 'Timeline' key: 'Timeline'

3
apps/showcase/doc/toast/pt/PTViewer.vue
View File

@ -1,7 +1,6 @@
<template> <template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs"> <DocPTViewer :docs="docs">
<div class="p-toast p-component" data-pc-name="toast"> <div class="p-toast p-component" data-pc-name="toast" data-pc-section="root">
<div> <div>
<div class="p-toast-message p-toast-message-info" data-pc-section="message"> <div class="p-toast-message p-toast-message-info" data-pc-section="message">
<div class="p-toast-message-content" data-pc-section="messagecontent"> <div class="p-toast-message-content" data-pc-section="messagecontent">

1
apps/showcase/doc/togglebutton/pt/PTViewer.vue
View File

@ -1,5 +1,4 @@
<template> <template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs"> <DocPTViewer :docs="docs">
<ToggleButton v-model="checked" onIcon="pi pi-check" offIcon="pi pi-times" class="w-full sm:w-40" /> <ToggleButton v-model="checked" onIcon="pi pi-check" offIcon="pi pi-times" class="w-full sm:w-40" />
</DocPTViewer> </DocPTViewer>

1
apps/showcase/doc/toggleswitch/pt/PTViewer.vue
View File

@ -1,5 +1,4 @@
<template> <template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs"> <DocPTViewer :docs="docs">
<ToggleSwitch v-model="checked" /> <ToggleSwitch v-model="checked" />
</DocPTViewer> </DocPTViewer>

1
apps/showcase/doc/toolbar/pt/PTViewer.vue
View File

@ -1,5 +1,4 @@
<template> <template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs"> <DocPTViewer :docs="docs">
<Toolbar class="w-full"> <Toolbar class="w-full">
<template #start> <template #start>

5
apps/showcase/doc/tooltip/pt/PTViewer.vue
View File

@ -1,6 +1,5 @@
<template> <template>
<DocSectionText v-bind="$attrs" /> <DocPTViewer :docs="docs">
<DocPTViewer :docs="ptViewerDoc">
<Button v-tooltip="{ value: 'Confirm to proceed', hideDelay: 300000 }" severity="secondary" label="Tooltip" /> <Button v-tooltip="{ value: 'Confirm to proceed', hideDelay: 300000 }" severity="secondary" label="Tooltip" />
</DocPTViewer> </DocPTViewer>
</template> </template>
@ -11,7 +10,7 @@ import { getPTOptions } from '@/components/doc/helpers';
export default { export default {
data() { data() {
return { return {
ptViewerDoc: [ docs: [
{ {
data: getPTOptions('Tooltip'), data: getPTOptions('Tooltip'),
key: 'Tooltip' key: 'Tooltip'

5
apps/showcase/doc/tree/pt/PTViewer.vue
View File

@ -1,6 +1,5 @@
<template> <template>
<DocSectionText v-bind="$attrs" /> <DocPTViewer :docs="docs">
<DocPTViewer :docs="ptViewerDoc">
<Tree v-model:selectionKeys="selectedKey" filter :value="nodes" selectionMode="checkbox" class="w-full md:w-[30rem]"></Tree> <Tree v-model:selectionKeys="selectedKey" filter :value="nodes" selectionMode="checkbox" class="w-full md:w-[30rem]"></Tree>
</DocPTViewer> </DocPTViewer>
</template> </template>
@ -14,7 +13,7 @@ export default {
return { return {
nodes: null, nodes: null,
selectedKey: null, selectedKey: null,
ptViewerDoc: [ docs: [
{ {
data: getPTOptions('Tree'), data: getPTOptions('Tree'),
key: 'Tree' key: 'Tree'

1
apps/showcase/doc/treeselect/pt/PTViewer.vue
View File

@ -1,5 +1,4 @@
<template> <template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs"> <DocPTViewer :docs="docs">
<TreeSelect v-model="selectedValue" :options="nodes" selectionMode="checkbox" placeholder="Select Item" class="md:w-80 w-full" /> <TreeSelect v-model="selectedValue" :options="nodes" selectionMode="checkbox" placeholder="Select Item" class="md:w-80 w-full" />
</DocPTViewer> </DocPTViewer>

5
apps/showcase/doc/treetable/pt/PTViewer.vue
View File

@ -1,6 +1,5 @@
<template> <template>
<DocSectionText v-bind="$attrs" /> <DocPTViewer :docs="docs">
<DocPTViewer :docs="ptViewerDoc">
<TreeTable :value="nodes" tableStyle="min-width: 50rem"> <TreeTable :value="nodes" tableStyle="min-width: 50rem">
<Column field="name" header="Name" expander style="width: 34%"></Column> <Column field="name" header="Name" expander style="width: 34%"></Column>
<Column field="size" header="Size" style="width: 33%"></Column> <Column field="size" header="Size" style="width: 33%"></Column>
@ -17,7 +16,7 @@ export default {
data() { data() {
return { return {
nodes: null, nodes: null,
ptViewerDoc: [ docs: [
{ {
data: getPTOptions('TreeTable'), data: getPTOptions('TreeTable'),
key: 'TreeTable' key: 'TreeTable'

1
apps/showcase/doc/virtualscroller/pt/PTViewer.vue
View File

@ -1,5 +1,4 @@
<template> <template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs"> <DocPTViewer :docs="docs">
<VirtualScroller :items="items" :itemSize="50" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px"> <VirtualScroller :items="items" :itemSize="50" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
<template v-slot:item="{ item, options }"> <template v-slot:item="{ item, options }">

6
apps/showcase/pages/passthrough/index.vue
View File

@ -21,6 +21,7 @@ import CustomCSSDoc from '@/doc/passthrough/CustomCSSDoc.vue';
import DeclarativeDoc from '@/doc/passthrough/DeclarativeDoc.vue'; import DeclarativeDoc from '@/doc/passthrough/DeclarativeDoc.vue';
import GlobalDoc from '@/doc/passthrough/GlobalDoc.vue'; import GlobalDoc from '@/doc/passthrough/GlobalDoc.vue';
import LifecycleDoc from '@/doc/passthrough/LifecycleDoc.vue'; import LifecycleDoc from '@/doc/passthrough/LifecycleDoc.vue';
import PCPrefixDoc from '@/doc/passthrough/PCPrefixDoc.vue';
import UsePassThroughDoc from '@/doc/passthrough/UsePassThroughDoc.vue'; import UsePassThroughDoc from '@/doc/passthrough/UsePassThroughDoc.vue';
export default { export default {
@ -37,6 +38,11 @@ export default {
label: 'Declarative', label: 'Declarative',
component: DeclarativeDoc component: DeclarativeDoc
}, },
{
id: 'pcprefix',
label: 'PC Prefix',
component: PCPrefixDoc
},
{ {
id: 'lifecycle', id: 'lifecycle',
label: 'Lifecycle', label: 'Lifecycle',

2
packages/primevue/src/autocomplete/AutoComplete.d.ts vendored
View File

@ -147,7 +147,7 @@ export interface AutoCompletePassThroughOptions {
* Used to pass attributes to the InputText component. * Used to pass attributes to the InputText component.
* @see {@link InputTextPassThroughOptions} * @see {@link InputTextPassThroughOptions}
*/ */
pcInput?: InputTextPassThroughOptions<AutoCompleteSharedPassThroughMethodOptions>; pcInputText?: InputTextPassThroughOptions<AutoCompleteSharedPassThroughMethodOptions>;
/** /**
* Used to pass attributes to the input multiple's DOM element. * Used to pass attributes to the input multiple's DOM element.
*/ */

4
packages/primevue/src/autocomplete/AutoComplete.vue
View File

@ -5,7 +5,7 @@
ref="focusInput" ref="focusInput"
:id="inputId" :id="inputId"
type="text" type="text"
:class="[cx('pcInput'), inputClass]" :class="[cx('pcInputText'), inputClass]"
:style="inputStyle" :style="inputStyle"
:value="inputValue" :value="inputValue"
:placeholder="placeholder" :placeholder="placeholder"
@ -29,7 +29,7 @@
@input="onInput" @input="onInput"
@change="onChange" @change="onChange"
:unstyled="unstyled" :unstyled="unstyled"
:pt="ptm('pcInput')" :pt="ptm('pcInputText')"
/> />
<ul <ul
v-if="multiple" v-if="multiple"

2
packages/primevue/src/autocomplete/style/AutoCompleteStyle.js
View File

@ -255,7 +255,7 @@ const classes = {
'p-autocomplete-fluid': instance.hasFluid 'p-autocomplete-fluid': instance.hasFluid
} }
], ],
pcInput: 'p-autocomplete-input', pcInputText: 'p-autocomplete-input',
inputMultiple: ({ props, instance }) => [ inputMultiple: ({ props, instance }) => [
'p-autocomplete-input-multiple', 'p-autocomplete-input-multiple',
{ {

2
packages/primevue/src/datepicker/DatePicker.d.ts vendored
View File

@ -138,7 +138,7 @@ export interface DatePickerPassThroughOptions {
* Used to pass attributes to the InputText component. * Used to pass attributes to the InputText component.
* @see {@link InputTextPassThroughOptions} * @see {@link InputTextPassThroughOptions}
*/ */
pcInput?: InputTextPassThroughOptions<DatePickerSharedPassThroughMethodOptions>; pcInputText?: InputTextPassThroughOptions<DatePickerSharedPassThroughMethodOptions>;
/** /**
* Used to pass attributes to the dropdown's DOM element. * Used to pass attributes to the dropdown's DOM element.
*/ */

4
packages/primevue/src/datepicker/DatePicker.vue
View File

@ -5,7 +5,7 @@
:ref="inputRef" :ref="inputRef"
:id="inputId" :id="inputId"
role="combobox" role="combobox"
:class="[inputClass, cx('pcInput')]" :class="[inputClass, cx('pcInputText')]"
:style="inputStyle" :style="inputStyle"
:value="inputFieldValue" :value="inputFieldValue"
:placeholder="placeholder" :placeholder="placeholder"
@ -30,7 +30,7 @@
@focus="onFocus" @focus="onFocus"
@blur="onBlur" @blur="onBlur"
@keydown="onKeyDown" @keydown="onKeyDown"
:pt="ptm('pcInput')" :pt="ptm('pcInputText')"
/> />
<slot v-if="showIcon && iconDisplay === 'button' && !inline" name="dropdownbutton"> <slot v-if="showIcon && iconDisplay === 'button' && !inline" name="dropdownbutton">
<button <button

2
packages/primevue/src/datepicker/style/DatePickerStyle.js
View File

@ -380,7 +380,7 @@ const classes = {
'p-datepicker-fluid': instance.hasFluid 'p-datepicker-fluid': instance.hasFluid
} }
], ],
pcInput: 'p-datepicker-input', pcInputText: 'p-datepicker-input',
dropdown: 'p-datepicker-dropdown', dropdown: 'p-datepicker-dropdown',
inputIconContainer: 'p-datepicker-input-icon-container', inputIconContainer: 'p-datepicker-input-icon-container',
inputIcon: 'p-datepicker-input-icon', inputIcon: 'p-datepicker-input-icon',

4
packages/primevue/src/drawer/Drawer.d.ts vendored
View File

@ -87,6 +87,10 @@ export interface DrawerPassThroughOptions {
* Used to pass attributes to the content's DOM element. * Used to pass attributes to the content's DOM element.
*/ */
content?: DrawerPassThroughOptionType; content?: DrawerPassThroughOptionType;
/**
* Used to pass attributes to the footer's DOM element.
*/
footer?: DrawerPassThroughOptionType;
/** /**
* Used to pass attributes to the mask's DOM element. * Used to pass attributes to the mask's DOM element.
*/ */

2
packages/primevue/src/inputnumber/InputNumber.d.ts vendored
View File

@ -104,7 +104,7 @@ export interface InputNumberPassThroughOptions<T = any> {
* Used to pass attributes to the InputText component. * Used to pass attributes to the InputText component.
* @see {@link InputTextPassThroughOptions} * @see {@link InputTextPassThroughOptions}
*/ */
pcInput?: InputTextPassThroughOptions<InputNumberSharedPassThroughMethodOptions>; pcInputText?: InputTextPassThroughOptions<InputNumberSharedPassThroughMethodOptions>;
/** /**
* Used to pass attributes to the button group's DOM element. * Used to pass attributes to the button group's DOM element.
*/ */

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