pull/6449/head
Cagatay Civici 2024-09-20 16:47:49 +03:00
commit 63cfc0c44c
109 changed files with 285 additions and 218 deletions

View File

@ -348,7 +348,6 @@ export default {
return !findMainInterface || findMainInterface.values.props.length > 0;
}
},
computed: {
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`;

View File

@ -1,4 +1,10 @@
<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 id="doc-ptviewer" class="doc-ptviewer">
<slot />

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -1,6 +1,5 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="ptViewerDoc">
<DocPTViewer :docs="docs">
<div class="flex flex-wrap gap-8">
<Chip label="Microsoft" icon="pi pi-microsoft" 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 {
data() {
return {
ptViewerDoc: [
docs: [
{
data: getPTOptions('Chip'),
key: 'Chip'

View File

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

View File

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

View File

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

View File

@ -1,6 +1,5 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="ptViewerDoc">
<DocPTViewer :docs="docs">
<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" />
</DocPTViewer>
@ -16,7 +15,7 @@ export default {
{ label: 'Copy', icon: 'pi pi-copy' },
{ label: 'Rename', icon: 'pi pi-file-edit' }
],
ptViewerDoc: [
docs: [
{
data: getPTOptions('ContextMenu'),
key: 'ContextMenu'

View File

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

View File

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

View File

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

View File

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

View File

@ -1,6 +1,5 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="ptViewerDoc">
<DocPTViewer :docs="docs">
<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>
<div class="flex items-center gap-4 mb-4">
@ -28,7 +27,7 @@ export default {
data() {
return {
visible: true,
ptViewerDoc: [
docs: [
{
data: getPTOptions('Dialog'),
key: 'Dialog'

View File

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

View File

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

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>

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>

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -1,5 +1,4 @@
<template>
<DocSectionText v-bind="$attrs" />
<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">
<template #optiongroup="slotProps">

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -1,5 +1,4 @@
<template>
<DocSectionText v-bind="$attrs" />
<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">
<template #optiongroup="slotProps">

View File

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

View File

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

View File

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

View File

@ -1,6 +1,5 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="ptViewerDoc">
<DocPTViewer :docs="docs">
<Panel header="Header" toggleable>
<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.
@ -16,7 +15,7 @@ import { getPTOptions } from '@/components/doc/helpers';
export default {
data() {
return {
ptViewerDoc: [
docs: [
{
data: getPTOptions('Panel'),
key: 'Panel'

View File

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

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>

View File

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

View File

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

View File

@ -1,6 +1,5 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="ptViewerDoc">
<DocPTViewer :docs="docs">
<Button ref="btn" type="button" icon="pi pi-share-alt" label="Share" @click="toggle" />
<Popover ref="op" appendTo="self">
<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: 'Ioni Bowcher', image: 'ionibowcher.png', email: 'ioni@email.com', role: 'Viewer' }
],
ptViewerDoc: [
docs: [
{
data: getPTOptions('Popover'),
key: 'Popover'

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -1,6 +1,5 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="ptViewerDoc">
<DocPTViewer :docs="docs">
<ScrollPanel style="width: 250px; height: 200px">
<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
@ -20,7 +19,7 @@ import { getPTOptions } from '@/components/doc/helpers';
export default {
data() {
return {
ptViewerDoc: [
docs: [
{
data: getPTOptions('ScrollTop'),
key: 'ScrollTop'

View File

@ -1,5 +1,4 @@
<template>
<DocSectionText v-bind="$attrs" />
<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">
<template #optiongroup="slotProps">

View File

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

View File

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

View File

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

View File

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

View File

@ -1,7 +1,6 @@
<template>
<DocSectionText v-bind="$attrs" />
<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>
</template>

View File

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

View File

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

View File

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

View File

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

View File

@ -1,6 +1,5 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="ptViewerDoc">
<DocPTViewer :docs="docs">
<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>
<Terminal welcomeMessage="Welcome to PrimeVue" prompt="primevue $" aria-label="PrimeVue Terminal Service" />
@ -15,7 +14,7 @@ import TerminalService from 'primevue/terminalservice';
export default {
data() {
return {
ptViewerDoc: [
docs: [
{
data: getPTOptions('Terminal'),
key: 'Terminal'

View File

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

View File

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

View File

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

View File

@ -1,6 +1,5 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="ptViewerDoc">
<DocPTViewer :docs="docs">
<Timeline :value="events">
<template #opposite="slotProps">
<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: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
],
ptViewerDoc: [
docs: [
{
data: getPTOptions('Timeline'),
key: 'Timeline'

View File

@ -1,7 +1,6 @@
<template>
<DocSectionText v-bind="$attrs" />
<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 class="p-toast-message p-toast-message-info" data-pc-section="message">
<div class="p-toast-message-content" data-pc-section="messagecontent">

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -1,5 +1,4 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs">
<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 }">

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -104,7 +104,7 @@ export interface InputNumberPassThroughOptions<T = any> {
* Used to pass attributes to the InputText component.
* @see {@link InputTextPassThroughOptions}
*/
pcInput?: InputTextPassThroughOptions<InputNumberSharedPassThroughMethodOptions>;
pcInputText?: InputTextPassThroughOptions<InputNumberSharedPassThroughMethodOptions>;
/**
* 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