Doc Section Text updates

pull/6449/head
tugcekucukoglu 2024-09-20 15:22:44 +03:00
parent 2d64e321c2
commit cb52bf2e19
82 changed files with 67 additions and 149 deletions

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">

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'

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'

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'

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'

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>

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>

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">

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'

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'

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>

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'

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>

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'

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'

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>

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">

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>

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" />

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'

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>

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'

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>

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">

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">

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" />

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'

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">

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" />

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" />

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>

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'

View File

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

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>

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>

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>

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>

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>

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">

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'

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'

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'

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>

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'

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">

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 }">

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">

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'

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'

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'

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>

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'

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'

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'

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'

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>

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>

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>

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'

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">

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>

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'

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>

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" />

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>

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>

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' }">

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>

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'

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'

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>

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'

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'

View File

@ -1,5 +1,4 @@
<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">
<div> <div>

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>

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>

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>

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'

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'

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>

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'

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 }">