Doc Section Text updates
parent
2d64e321c2
commit
cb52bf2e19
|
@ -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,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'
|
||||||
|
|
|
@ -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'
|
||||||
|
|
|
@ -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'
|
||||||
|
|
|
@ -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,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,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,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">
|
||||||
|
|
|
@ -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'
|
||||||
|
|
|
@ -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,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>
|
||||||
|
|
|
@ -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,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>
|
||||||
|
|
|
@ -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'
|
||||||
|
|
|
@ -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,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,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,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,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" />
|
||||||
|
|
|
@ -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,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>
|
||||||
|
|
|
@ -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'
|
||||||
|
|
|
@ -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,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,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,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" />
|
||||||
|
|
|
@ -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,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,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,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,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>
|
||||||
|
|
|
@ -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,5 +1,4 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs" />
|
|
||||||
<DocPTViewer :docs="docs">
|
<DocPTViewer :docs="docs">
|
||||||
<InputGroup>
|
<InputGroup>
|
||||||
<InputGroupAddon>$</InputGroupAddon>
|
<InputGroupAddon>$</InputGroupAddon>
|
||||||
|
|
|
@ -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,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,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,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,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,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">
|
||||||
|
|
|
@ -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'
|
||||||
|
|
|
@ -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'
|
||||||
|
|
|
@ -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,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>
|
||||||
|
|
|
@ -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,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,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,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">
|
||||||
|
|
|
@ -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'
|
||||||
|
|
|
@ -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'
|
||||||
|
|
|
@ -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'
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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'
|
||||||
|
|
|
@ -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'
|
||||||
|
|
|
@ -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'
|
||||||
|
|
|
@ -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,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,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,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>
|
||||||
|
|
|
@ -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,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,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>
|
||||||
|
|
|
@ -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,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,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" />
|
||||||
|
|
|
@ -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,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,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,5 +1,4 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs" />
|
|
||||||
<DocPTViewer :docs="docs">
|
<DocPTViewer :docs="docs">
|
||||||
<Tabs value="0">
|
<Tabs value="0">
|
||||||
<TabList>
|
<TabList>
|
||||||
|
|
|
@ -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'
|
||||||
|
|
|
@ -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'
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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'
|
||||||
|
|
|
@ -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'
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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,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,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>
|
||||||
|
|
|
@ -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'
|
||||||
|
|
|
@ -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,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>
|
||||||
|
|
|
@ -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,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 }">
|
||||||
|
|
Loading…
Reference in New Issue