Merge branch 'master' of https://github.com/primefaces/primevue
commit
63cfc0c44c
|
@ -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`;
|
||||
|
|
|
@ -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 />
|
||||
|
|
|
@ -1,5 +1,4 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocPTViewer :docs="docs">
|
||||
<Accordion value="0">
|
||||
<AccordionPanel value="0">
|
||||
|
|
|
@ -1,5 +1,4 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocPTViewer :docs="docs">
|
||||
<AutoComplete v-model="value" dropdown :suggestions="items" @complete="search" appendTo="self" />
|
||||
</DocPTViewer>
|
||||
|
|
|
@ -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'
|
||||
|
|
|
@ -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'
|
||||
|
|
|
@ -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'
|
||||
|
|
|
@ -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'
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -1,5 +1,4 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocPTViewer :docs="docs">
|
||||
<Card style="width: 25rem">
|
||||
<template #title>Advanced Card</template>
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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'
|
||||
|
|
|
@ -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'
|
||||
|
|
|
@ -1,5 +1,4 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocPTViewer :docs="docs">
|
||||
<Checkbox v-model="checked" :binary="true" />
|
||||
</DocPTViewer>
|
||||
|
|
|
@ -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'
|
||||
|
|
|
@ -1,5 +1,4 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocPTViewer :docs="docs">
|
||||
<ColorPicker v-model="color" inline />
|
||||
</DocPTViewer>
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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'
|
||||
|
|
|
@ -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'
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -1,5 +1,4 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocPTViewer :docs="docs">
|
||||
<DataView :value="products">
|
||||
<template #list="slotProps">
|
||||
|
|
|
@ -1,5 +1,4 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocPTViewer :docs="docs">
|
||||
<DatePicker v-model="date" showIcon fluid iconDisplay="input" />
|
||||
</DocPTViewer>
|
||||
|
|
|
@ -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" />
|
||||
|
|
|
@ -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'
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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'
|
||||
|
|
|
@ -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>
|
|
@ -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>
|
|
@ -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',
|
||||
|
|
|
@ -1,5 +1,4 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocPTViewer :docs="docs">
|
||||
<Editor v-model="value" editorStyle="height: 320px" />
|
||||
</DocPTViewer>
|
||||
|
|
|
@ -1,5 +1,4 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocPTViewer :docs="docs">
|
||||
<Fieldset legend="Header" toggleable>
|
||||
<p class="m-0">
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -1,5 +1,4 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocPTViewer :docs="docs">
|
||||
<FloatLabel>
|
||||
<InputText id="username" v-model="value" autocomplete="off" />
|
||||
|
|
|
@ -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'
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -1,5 +1,4 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocPTViewer :docs="docs">
|
||||
<IconField>
|
||||
<InputIcon class="pi pi-search" />
|
||||
|
|
|
@ -1,5 +1,4 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocPTViewer :docs="docs">
|
||||
<IftaLabel>
|
||||
<InputText id="username" v-model="value" autocomplete="off" />
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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'
|
||||
|
|
|
@ -1,5 +1,4 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocPTViewer :docs="docs">
|
||||
<InputGroup>
|
||||
<InputGroupAddon>$</InputGroupAddon>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -1,5 +1,4 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocPTViewer :docs="docs">
|
||||
<InputOtp v-model="value" />
|
||||
</DocPTViewer>
|
||||
|
|
|
@ -1,5 +1,4 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocPTViewer :docs="docs">
|
||||
<InputText v-model="value" placeholder="Username" />
|
||||
</DocPTViewer>
|
||||
|
|
|
@ -1,5 +1,4 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocPTViewer :docs="docs">
|
||||
<Knob v-model="value" />
|
||||
</DocPTViewer>
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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'
|
||||
|
|
|
@ -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'
|
||||
|
|
|
@ -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'
|
||||
|
|
|
@ -1,5 +1,4 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocPTViewer :docs="docs">
|
||||
<Message closable severity="info" icon="pi pi-send">Info Message</Message>
|
||||
</DocPTViewer>
|
||||
|
|
|
@ -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'
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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 }">
|
||||
|
|
|
@ -1,5 +1,4 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocPTViewer :docs="docs">
|
||||
<OrganizationChart :value="data" collapsible>
|
||||
<template #default="slotProps">
|
||||
|
|
|
@ -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'
|
||||
|
|
|
@ -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'
|
||||
|
|
|
@ -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'
|
||||
|
|
|
@ -0,0 +1,74 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Section names that start with the <i>pc</i> prefix indicate that the element is a PrimeVue component not a DOM element.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex justify-center">
|
||||
<Button
|
||||
type="button"
|
||||
label="Messages"
|
||||
icon="pi pi-users"
|
||||
badge="2"
|
||||
outlined
|
||||
:pt="{
|
||||
root: 'border-violet-500',
|
||||
label: 'text-violet-900 dark:text-violet-400',
|
||||
icon: 'text-violet-900 dark:text-violet-400',
|
||||
pcBadge: {
|
||||
root: '!bg-violet-400 !text-white'
|
||||
}
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
basic: `
|
||||
<Button type="button" label="Messages" icon="pi pi-users" badge="2" outlined
|
||||
:pt="{
|
||||
root: 'border-violet-500',
|
||||
label: 'text-violet-900 dark:text-violet-400',
|
||||
icon: 'text-violet-900 dark:text-violet-400',
|
||||
pcBadge: {
|
||||
root: '!bg-violet-400 !text-white'
|
||||
}
|
||||
}"
|
||||
/>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<Button type="button" label="Messages" icon="pi pi-users" badge="2" outlined
|
||||
:pt="{
|
||||
root: 'border-violet-500',
|
||||
label: 'text-violet-900 dark:text-violet-400',
|
||||
icon: 'text-violet-900 dark:text-violet-400',
|
||||
pcBadge: {
|
||||
root: '!bg-violet-400 !text-white'
|
||||
}
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<Button type="button" label="Messages" icon="pi pi-users" badge="2" outlined
|
||||
:pt="{
|
||||
root: 'border-violet-500',
|
||||
label: 'text-violet-900 dark:text-violet-400',
|
||||
icon: 'text-violet-900 dark:text-violet-400',
|
||||
pcBadge: {
|
||||
root: '!bg-violet-400 !text-white'
|
||||
}
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
|
@ -1,5 +1,4 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocPTViewer :docs="docs">
|
||||
<Password v-model="value" toggleMask />
|
||||
</DocPTViewer>
|
||||
|
|
|
@ -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'
|
||||
|
|
|
@ -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'
|
||||
|
|
|
@ -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'
|
||||
|
|
|
@ -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'
|
||||
|
|
|
@ -1,5 +1,4 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocPTViewer :docs="docs">
|
||||
<RadioButton v-model="value" value="1" />
|
||||
</DocPTViewer>
|
||||
|
|
|
@ -1,5 +1,4 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocPTViewer :docs="docs">
|
||||
<Rating v-model="value" />
|
||||
</DocPTViewer>
|
||||
|
|
|
@ -1,5 +1,4 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocPTViewer :docs="docs">
|
||||
<ScrollPanel style="width: 100%; height: 200px" pt:bary="!visible !opacity-100">
|
||||
<p>
|
||||
|
|
|
@ -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'
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -1,5 +1,4 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocPTViewer :docs="docs">
|
||||
<SelectButton v-model="value" :options="options" />
|
||||
</DocPTViewer>
|
||||
|
|
|
@ -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'
|
||||
|
|
|
@ -1,5 +1,4 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocPTViewer :docs="docs">
|
||||
<Slider v-model="value" class="w-56" />
|
||||
</DocPTViewer>
|
||||
|
|
|
@ -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" />
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -1,5 +1,4 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocPTViewer :docs="docs">
|
||||
<Stepper value="1" class="basis-[50rem]" linear>
|
||||
<StepList :style="{ overflowX: 'unset' }">
|
||||
|
|
|
@ -1,5 +1,4 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocPTViewer :docs="docs">
|
||||
<Tabs value="0">
|
||||
<TabList>
|
||||
|
|
|
@ -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'
|
||||
|
|
|
@ -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'
|
||||
|
|
|
@ -15,7 +15,7 @@
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
description: null,
|
||||
value: null,
|
||||
code: {
|
||||
basic: `
|
||||
<IftaLabel>
|
||||
|
|
|
@ -1,5 +1,4 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocPTViewer :docs="docs">
|
||||
<Textarea v-model="value" rows="5" cols="30" style="resize: none" />
|
||||
</DocPTViewer>
|
||||
|
|
|
@ -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'
|
||||
|
|
|
@ -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'
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -1,5 +1,4 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocPTViewer :docs="docs">
|
||||
<ToggleSwitch v-model="checked" />
|
||||
</DocPTViewer>
|
||||
|
|
|
@ -1,5 +1,4 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocPTViewer :docs="docs">
|
||||
<Toolbar class="w-full">
|
||||
<template #start>
|
||||
|
|
|
@ -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'
|
||||
|
|
|
@ -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'
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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'
|
||||
|
|
|
@ -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 }">
|
||||
|
|
|
@ -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',
|
||||
|
|
|
@ -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.
|
||||
*/
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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',
|
||||
{
|
||||
|
|
|
@ -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.
|
||||
*/
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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',
|
||||
|
|
|
@ -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.
|
||||
*/
|
||||
|
|
|
@ -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
Loading…
Reference in New Issue