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

Code representation style fixes

pull/4503/head
Tuğçe Küçükoğlu 2023-09-22 15:54:14 +03:00
parent 11051fc020
commit e0fe133189
863 changed files with 4545 additions and 2404 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
components/doc/DocSectionCode.vue
View File

@ -1,6 +1,6 @@
<template>
<div v-if="!embedded" class="surface-card mb-4" style="border-radius: 10px">
<div class="flex doc-section-code-buttons surface-card align-items-center justify-content-end sticky z-1 top-0 mr-3">
<div v-if="!embedded" class="surface-card mb-4" :class="scrollable ? '' : 'relative'" style="border-radius: 10px">
<div class="flex doc-section-code-buttons surface-card align-items-center justify-content-end z-1" :style="scrollable ? { position: 'sticky', padding: '0.75rem 0.75rem 0 0' } : { position: 'absolute', top: '0.75rem', right: '0.75rem' }">
<template v-if="codeMode !== 'basic' && !hideToggleCode">
<Button
:class="['p-button-rounded p-button-text p-button-plain p-0 inline-flex align-items-center justify-content-center', { 'doc-section-code-buttons-active text-primary': codeLang === 'composition' }]"
@ -76,33 +76,41 @@
></Button>
</div>
<div class="relative doc-section-code overflow-auto" style="max-height: 40rem">
<div class="relative doc-section-code overflow-auto" :style="scrollable ? { 'max-height': '40rem' } : undefined" style="border-radius: 10px">
<template v-if="codeMode === 'basic' && importCode">
<pre v-code.script><code>{{ code.basic }}
</code></pre>
</template>
<template v-if="codeMode === 'basic' && !importCode">
<pre v-code><code>{{ code.basic }}
<pre v-code><code>
{{ code.basic }}
</code></pre>
</template>
<template v-if="codeMode !== 'basic' && codeLang === 'options'">
<pre v-code><code>{{ code.options }}
<pre v-code><code>
{{ code.options }}
</code></pre>
</template>
<template v-if="codeMode !== 'basic' && codeLang === 'composition'">
<pre v-code><code>{{ code.composition }}
<pre v-code><code>
{{ code.composition }}
</code></pre>
</template>
<template v-if="codeMode !== 'basic' && codeLang === 'data'">
<pre v-code.json><code>{{ code.data }}
<pre v-code.json><code>
{{ code.data }}
</code></pre>
</template>
</div>
<div class="h-1rem"></div>
<div v-if="scrollable" class="h-1rem"></div>
</div>
<div v-else id="embed"></div>
</template>
@ -152,6 +160,10 @@ export default {
embedded: {
type: Boolean,
default: false
},
scrollable: {
type: Boolean,
default: false
}
},
data() {

9
doc/accordion/BasicDoc.vue
View File

@ -32,7 +32,8 @@ export default {
data() {
return {
code: {
basic: `<Accordion :activeIndex="0">
basic: `
<Accordion :activeIndex="0">
<AccordionTab header="Header I">
<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
@ -53,7 +54,8 @@ export default {
</p>
</AccordionTab>
</Accordion>`,
options: `<template>
options: `
<template>
<div class="card">
<Accordion :activeIndex="0">
<AccordionTab header="Header I">
@ -80,7 +82,8 @@ export default {
<script>
<\/script>`,
composition: `<template>
composition: `
<template>
<div class="card">
<Accordion :activeIndex="0">
<AccordionTab header="Header I">

9
doc/accordion/ControlledDoc.vue
View File

@ -39,7 +39,8 @@ export default {
return {
active: 0,
code: {
basic: `<div class="pb-3">
basic: `
<div class="pb-3">
<Button @click="active = 0" text label="Activate 1st" />
<Button @click="active = 1" text class="mr-2" label="Activate 2nd" />
<Button @click="active = 2" text class="mr-2" label="Activate 3rd" />
@ -65,7 +66,8 @@ export default {
</p>
</AccordionTab>
</Accordion>`,
options: `<template>
options: `
<template>
<div class="card">
<div class="pb-3">
<Button @click="active = 0" text label="Activate 1st" />
@ -105,7 +107,8 @@ export default {
}
}
<\/script>`,
composition: `<template>
composition: `
<template>
<div class="card">
<div class="pb-3">
<Button @click="active = 0" text label="Activate 1st" />

9
doc/accordion/DisabledDoc.vue
View File

@ -33,7 +33,8 @@ export default {
data() {
return {
code: {
basic: `<Accordion :multiple="true" :activeIndex="[0]">
basic: `
<Accordion :multiple="true" :activeIndex="[0]">
<AccordionTab header="Header I">
<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
@ -55,7 +56,8 @@ export default {
</AccordionTab>
<AccordionTab header="Header IV" :disabled="true"> </AccordionTab>
</Accordion>`,
options: `<template>
options: `
<template>
<div class="card">
<Accordion :multiple="true" :activeIndex="[0]">
<AccordionTab header="Header I">
@ -83,7 +85,8 @@ export default {
<script>
<\/script>`,
composition: `<template>
composition: `
<template>
<div class="card">
<Accordion :multiple="true" :activeIndex="[0]">
<AccordionTab header="Header I">

9
doc/accordion/DynamicDoc.vue
View File

@ -22,12 +22,14 @@ export default {
{ title: 'Title 3', content: 'Content 3' }
],
code: {
basic: `<Accordion :activeIndex="0">
basic: `
<Accordion :activeIndex="0">
<AccordionTab v-for="tab in tabs" :key="tab.title" :header="tab.title">
<p>{{ tab.content }}</p>
</AccordionTab>
</Accordion>`,
options: `<template>
options: `
<template>
<div class="card">
<Accordion :activeIndex="0">
<AccordionTab v-for="tab in tabs" :key="tab.title" :header="tab.title">
@ -50,7 +52,8 @@ export default {
}
};
<\/script>`,
composition: `<template>
composition: `
<template>
<div class="card">
<Accordion :activeIndex="0">
<AccordionTab v-for="tab in tabs" :key="tab.title" :header="tab.title">

6
doc/accordion/ImportDoc.vue
View File

@ -8,8 +8,10 @@ export default {
data() {
return {
code: {
basic: `import Accordion from 'primevue/accordion';
import AccordionTab from 'primevue/accordiontab';`
basic: `
import Accordion from 'primevue/accordion';
import AccordionTab from 'primevue/accordiontab';
`
}
};
}

9
doc/accordion/MultipleDoc.vue
View File

@ -32,7 +32,8 @@ export default {
data() {
return {
code: {
basic: `<Accordion :multiple="true" :activeIndex="[0]">
basic: `
<Accordion :multiple="true" :activeIndex="[0]">
<AccordionTab header="Header I">
<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
@ -53,7 +54,8 @@ export default {
</p>
</AccordionTab>
</Accordion>`,
options: `<template>
options: `
<template>
<div class="card">
<Accordion :multiple="true" :activeIndex="[0]">
<AccordionTab header="Header I">
@ -80,7 +82,8 @@ export default {
<script>
<\/script>`,
composition: `<template>
composition: `
<template>
<div class="card">
<Accordion :multiple="true" :activeIndex="[0]">
<AccordionTab header="Header I">

9
doc/accordion/TemplateDoc.vue
View File

@ -45,7 +45,8 @@ export default {
data() {
return {
code: {
basic: `<Accordion class="accordion-custom" :activeIndex="0">
basic: `
<Accordion class="accordion-custom" :activeIndex="0">
<AccordionTab>
<template #header>
<i class="pi pi-calendar"></i>
@ -78,7 +79,8 @@ export default {
</p>
</AccordionTab>
</Accordion>`,
options: `<template>
options: `
<template>
<div class="card">
<Accordion class="accordion-custom" :activeIndex="0">
<AccordionTab>
@ -133,7 +135,8 @@ export default {
margin: 0;
}
</style>`,
composition: `<template>
composition: `
<template>
<div class="card">
<Accordion class="accordion-custom" :activeIndex="0">
<AccordionTab>

9
doc/accordion/pt/PTDoc.vue
View File

@ -28,7 +28,8 @@ export default {
content: `Tab ${i + 1} Content`
})),
code: {
basic: `<Accordion :activeIndex="0">
basic: `
<Accordion :activeIndex="0">
<AccordionTab v-for="(tab, index) in tabs" :key="tab.title" :header="tab.title"
:pt="{
headerAction: ({ props, parent }) => ({
@ -38,7 +39,8 @@ export default {
<p>{{ tab.content }}</p>
</AccordionTab>
</Accordion>`,
options: `<template>
options: `
<template>
<div class="card">
<Accordion :activeIndex="0">
<AccordionTab v-for="(tab, index) in tabs" :key="tab.title" :header="tab.title"
@ -74,7 +76,8 @@ export default {
}
}
<\/script>`,
composition: `<template>
composition: `
<template>
<div class="card">
<Accordion :activeIndex="0">
<AccordionTab v-for="(tab, index) in tabs" :key="tab.title" :header="tab.title"

5
doc/accordion/theming/TailwindDoc.vue
View File

@ -4,7 +4,7 @@
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
</p>
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox scrollable />
<p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
<DocSectionCode :code="code2" embedded />
</DocSectionText>
@ -62,7 +62,8 @@ export default {
`
},
code2: {
composition: `<template>
composition: `
<template>
<div class="card">
<Accordion :activeIndex="0">
<AccordionTab header="Header I">

3
doc/autocomplete/AccessibilityDoc.vue
View File

@ -161,7 +161,8 @@ export default {
data() {
return {
code: {
basic: `<label for="ac1">;Username</label>
basic: `
<label for="ac1">;Username</label>
<AutoComplete inputId="ac1" />
<span id="ac2">Email</span>

9
doc/autocomplete/BasicDoc.vue
View File

@ -15,8 +15,10 @@ export default {
value: '',
items: [],
code: {
basic: `<AutoComplete v-model="value" :suggestions="items" @complete="search" />`,
options: `<template>
basic: `
<AutoComplete v-model="value" :suggestions="items" @complete="search" />`,
options: `
<template>
<div class="card flex justify-content-center">
<AutoComplete v-model="value" :suggestions="items" @complete="search" />
</div>
@ -37,7 +39,8 @@ export default {
}
};
<\/script>`,
composition: `<template>
composition: `
<template>
<div class="card flex justify-content-center">
<AutoComplete v-model="value" :suggestions="items" @complete="search" />
</div>

9
doc/autocomplete/DisabledDoc.vue
View File

@ -13,8 +13,10 @@ export default {
data() {
return {
code: {
basic: `<AutoComplete disabled placeholder="Disabled" />`,
options: `<template>
basic: `
<AutoComplete disabled placeholder="Disabled" />`,
options: `
<template>
<div class="card flex justify-content-center">
<AutoComplete disabled placeholder="Disabled" />
</div>
@ -23,7 +25,8 @@ export default {
<script>
<\/script>`,
composition: `<template>
composition: `
<template>
<div class="card flex justify-content-center">
<AutoComplete disabled placeholder="Disabled" />
</div>

9
doc/autocomplete/DropdownDoc.vue
View File

@ -18,8 +18,10 @@ export default {
value: '',
items: [],
code: {
basic: `<AutoComplete v-model="value" dropdown :suggestions="items" @complete="search" />`,
options: `<template>
basic: `
<AutoComplete v-model="value" dropdown :suggestions="items" @complete="search" />`,
options: `
<template>
<div class="card flex justify-content-center">
<AutoComplete v-model="value" dropdown :suggestions="items" @complete="search" />
</div>
@ -42,7 +44,8 @@ export default {
}
};
<\/script>`,
composition: `<template>
composition: `
<template>
<div class="card flex justify-content-center">
<AutoComplete v-model="value" dropdown :suggestions="items" @complete="search" />
</div>

9
doc/autocomplete/FloatLabelDoc.vue
View File

@ -18,11 +18,13 @@ export default {
value: '',
items: [],
code: {
basic: `<span class="p-float-label">
basic: `
<span class="p-float-label">
<AutoComplete v-model="value" inputId="ac" :suggestions="items" @complete="search" />
<label for="ac">Float Label</label>
</span>`,
options: `<template>
options: `
<template>
<div class="card flex justify-content-center">
<span class="p-float-label">
<AutoComplete v-model="value" inputId="ac" :suggestions="items" @complete="search" />
@ -46,7 +48,8 @@ export default {
}
};
<\/script>`,
composition: `<template>
composition: `
<template>
<div class="card flex justify-content-center">
<span class="p-float-label">
<AutoComplete v-model="value" inputId="ac" :suggestions="items" @complete="search" />

9
doc/autocomplete/ForceSelectionDoc.vue
View File

@ -18,8 +18,10 @@ export default {
value: '',
items: [],
code: {
basic: `<AutoComplete v-model="value" :suggestions="items" @complete="search" forceSelection />`,
options: `<template>
basic: `
<AutoComplete v-model="value" :suggestions="items" @complete="search" forceSelection />`,
options: `
<template>
<div class="card flex justify-content-center">
<AutoComplete v-model="value" :suggestions="items" @complete="search" forceSelection />
</div>
@ -40,7 +42,8 @@ export default {
}
};
<\/script>`,
composition: `<template>
composition: `
<template>
<div class="card flex justify-content-center">
<AutoComplete v-model="value" :suggestions="items" @complete="search" forceSelection />
</div>

9
doc/autocomplete/GroupDoc.vue
View File

@ -57,7 +57,8 @@ export default {
}
],
code: {
basic: `<AutoComplete v-model="selectedCity" :suggestions="filteredCities" @complete="search" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Hint: type 'a'">
basic: `
<AutoComplete v-model="selectedCity" :suggestions="filteredCities" @complete="search" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Hint: type 'a'">
<template #optiongroup="slotProps">
<div class="flex align-items-center country-item">
<img :alt="slotProps.item.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.item.code.toLowerCase()} mr-2\`" style="width: 18px" />
@ -65,7 +66,8 @@ export default {
</div>
</template>
</AutoComplete>`,
options: `<template>
options: `
<template>
<div class="card flex justify-content-center">
<AutoComplete v-model="selectedCity" :suggestions="filteredCities" @complete="search" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Hint: type 'a'">
<template #optiongroup="slotProps">
@ -139,7 +141,8 @@ export default {
}
};
<\/script>`,
composition: `<template>
composition: `
<template>
<div class="card flex justify-content-center">
<AutoComplete v-model="selectedCity" :suggestions="filteredCities" @complete="search" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Hint: type 'a'">
<template #optiongroup="slotProps">

4
doc/autocomplete/ImportDoc.vue
View File

@ -8,7 +8,9 @@ export default {
data() {
return {
code: {
basic: `import AutoComplete from 'primevue/autocomplete';`
basic: `
import AutoComplete from 'primevue/autocomplete';
`
}
};
}

9
doc/autocomplete/InvalidDoc.vue
View File

@ -15,8 +15,10 @@ export default {
value: '',
items: [],
code: {
basic: `<AutoComplete v-model="value" :suggestions="items" @complete="search" class="p-invalid" />`,
options: `<template>
basic: `
<AutoComplete v-model="value" :suggestions="items" @complete="search" class="p-invalid" />`,
options: `
<template>
<div class="card flex justify-content-center">
<AutoComplete v-model="value" :suggestions="items" @complete="search" class="p-invalid" />
</div>
@ -37,7 +39,8 @@ export default {
}
};
<\/script>`,
composition: `<template>
composition: `
<template>
<div class="card flex justify-content-center">
<AutoComplete v-model="value" :suggestions="items" @complete="search" class="p-invalid" />
</div>

9
doc/autocomplete/MultipleDoc.vue
View File

@ -15,8 +15,10 @@ export default {
value: '',
items: [],
code: {
basic: `<AutoComplete v-model="value" multiple :suggestions="items" @complete="search" />`,
options: `<template>
basic: `
<AutoComplete v-model="value" multiple :suggestions="items" @complete="search" />`,
options: `
<template>
<div class="card p-fluid">
<AutoComplete v-model="value" multiple :suggestions="items" @complete="search" />
</div>
@ -37,7 +39,8 @@ export default {
}
};
<\/script>`,
composition: `<template>
composition: `
<template>
<div class="card p-fluid">
<AutoComplete v-model="value" multiple :suggestions="items" @complete="search" />
</div>

9
doc/autocomplete/ObjectsDoc.vue
View File

@ -21,8 +21,10 @@ export default {
selectedCountry: null,
filteredCountries: null,
code: {
basic: `<AutoComplete v-model="selectedCountry" optionLabel="name" :suggestions="filteredCountries" @complete="search" />`,
options: `<template>
basic: `
<AutoComplete v-model="selectedCountry" optionLabel="name" :suggestions="filteredCountries" @complete="search" />`,
options: `
<template>
<div class="card flex justify-content-center">
<AutoComplete v-model="selectedCountry" optionLabel="name" :suggestions="filteredCountries" @complete="search" />
</div>
@ -57,7 +59,8 @@ export default {
}
};
<\/script>`,
composition: `<template>
composition: `
<template>
<div class="card flex justify-content-center">
<AutoComplete v-model="selectedCountry" optionLabel="name" :suggestions="filteredCountries" @complete="search" />
</div>

9
doc/autocomplete/TemplateDoc.vue
View File

@ -27,7 +27,8 @@ export default {
countries: null,
filteredCountries: null,
code: {
basic: `<AutoComplete v-model="selectedCountry" optionLabel="name" :suggestions="filteredCountries" @complete="search">
basic: `
<AutoComplete v-model="selectedCountry" optionLabel="name" :suggestions="filteredCountries" @complete="search">
<template #option="slotProps">
<div class="flex align-options-center">
<img :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />
@ -35,7 +36,8 @@ export default {
</div>
</template>
</AutoComplete>`,
options: `<template>
options: `
<template>
<div class="card flex justify-content-center">
<AutoComplete v-model="selectedCountry" optionLabel="name" :suggestions="filteredCountries" @complete="search">
<template #option="slotProps">
@ -77,7 +79,8 @@ export default {
}
};
<\/script>`,
composition: `<template>
composition: `
<template>
<div class="card flex justify-content-center">
<AutoComplete v-model="selectedCountry" optionLabel="name" :suggestions="filteredCountries" @complete="search">
<template #option="slotProps">

9
doc/autocomplete/VirtualScrollDoc.vue
View File

@ -19,9 +19,11 @@ export default {
selectedItem: null,
filteredItems: null,
code: {
basic: `<AutoComplete v-model="selectedItem" :suggestions="filteredItems" @complete="searchItems"
basic: `
<AutoComplete v-model="selectedItem" :suggestions="filteredItems" @complete="searchItems"
:virtualScrollerOptions="{ itemSize: 38 }" optionLabel="label" dropdown />`,
options: `<template>
options: `
<template>
<div class="card flex justify-content-center">
<AutoComplete v-model="selectedItem" :suggestions="filteredItems" @complete="searchItems" :virtualScrollerOptions="{ itemSize: 38 }" optionLabel="label" dropdown />
</div>
@ -55,7 +57,8 @@ export default {
}
};
<\/script>`,
composition: `<template>
composition: `
<template>
<div class="card flex justify-content-center">
<AutoComplete v-model="selectedItem" :suggestions="filteredItems" @complete="searchItems" :virtualScrollerOptions="{ itemSize: 38 }" optionLabel="label" dropdown />
</div>

9
doc/autocomplete/form/VeeValidateDoc.vue
View File

@ -44,7 +44,8 @@ export default {
return {
items: [],
code: {
basic: `<template>
basic: `
<template>
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column gap-2">
<label for="ac">Value</label>
@ -54,7 +55,8 @@ export default {
</form>
</div>
</template>`,
options: `<template>
options: `
<template>
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column gap-2">
<label for="ac">Value</label>
@ -105,7 +107,8 @@ export default {
}
};
<\/script>`,
composition: `<template>
composition: `
<template>
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column gap-2">
<label for="ac">Value</label>

9
doc/autocomplete/pt/PTDoc.vue
View File

@ -23,7 +23,8 @@ export default {
value: '',
items: [],
code: {
basic: `<AutoComplete
basic: `
<AutoComplete
v-model="value"
:suggestions="items"
@complete="search"
@ -34,7 +35,8 @@ export default {
})
}"
/>`,
options: `<template>
options: `
<template>
<div class="card flex justify-content-center">
<AutoComplete
v-model="value"
@ -65,7 +67,8 @@ export default {
}
};
<\/script>`,
composition: `<template>
composition: `
<template>
<div class="card flex justify-content-center">
<AutoComplete
v-model="value"

8
doc/autocomplete/theming/TailwindDoc.vue
View File

@ -4,7 +4,7 @@
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
</p>
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
<p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
<DocSectionCode :code="code2" embedded />
</DocSectionText>
@ -15,8 +15,7 @@ export default {
data() {
return {
code1: {
basic: `
export const TRANSITIONS = {
basic: `export const TRANSITIONS = {
overlay: {
enterFromClass: 'opacity-0 scale-75',
enterActiveClass: 'transition-transform transition-opacity duration-150 ease-in',
@ -92,7 +91,8 @@ export default {
`
},
code2: {
composition: `<template>
composition: `
<template>
<div class="card flex justify-center">
<AutoComplete v-model="value" :suggestions="items" @complete="search" />
</div>

9
doc/avatar/AvatarGroupDoc.vue
View File

@ -20,7 +20,8 @@ export default {
data() {
return {
code: {
basic: `<AvatarGroup>
basic: `
<AvatarGroup>
<Avatar image="/images/avatar/amyelsner.png" size="large" shape="circle" />
<Avatar image="/images/avatar/asiyajavayant.png" size="large" shape="circle" />
<Avatar image="/images/avatar/onyamalimba.png" size="large" shape="circle" />
@ -28,7 +29,8 @@ export default {
<Avatar image="/images/avatar/xuxuefeng.png" size="large" shape="circle" />
<Avatar label="+2" shape="circle" size="large" style="background-color: '#9c27b0', color: '#ffffff'" />
</AvatarGroup>`,
options: `<template>
options: `
<template>
<div class="card flex justify-content-center">
<AvatarGroup>
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" size="large" shape="circle" />
@ -44,7 +46,8 @@ export default {
<script>
<\/script>`,
composition: `<template>
composition: `
<template>
<div class="card flex justify-content-center">
<AvatarGroup>
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" size="large" shape="circle" />

9
doc/avatar/IconDoc.vue
View File

@ -32,7 +32,8 @@ export default {
data() {
return {
code: {
basic: `<Avatar icon="pi pi-user" class="mr-2" size="xlarge" />
basic: `
<Avatar icon="pi pi-user" class="mr-2" size="xlarge" />
<Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #2196f3; color: #ffffff" />
<Avatar icon="pi pi-user" style="background-color: #9c27b0; color: #ffffff" />
@ -41,7 +42,8 @@ export default {
<Avatar icon="pi pi-user" style="background-color: #9c27b0; color: #ffffff" shape="circle" />
<Avatar v-badge="4" class="p-overlay-badge" icon="pi pi-user" size="xlarge" />`,
options: `<template>
options: `
<template>
<div class="card">
<div class="flex flex-wrap gap-5">
<div class="flex-auto">
@ -69,7 +71,8 @@ export default {
<script>
<\/script>`,
composition: `<template>
composition: `
<template>
<div class="card">
<div class="flex flex-wrap gap-5">
<div class="flex-auto">

9
doc/avatar/ImageDoc.vue
View File

@ -30,14 +30,16 @@ export default {
data() {
return {
code: {
basic: `<Avatar image="/images/avatar/amyelsner.png" class="mr-2" size="xlarge" shape="circle" />
basic: `
<Avatar image="/images/avatar/amyelsner.png" class="mr-2" size="xlarge" shape="circle" />
<Avatar image="/images/avatar/asiyajavayant.png" class="mr-2" size="large" shape="circle" />
<Avatar image="/images/avatar/onyamalimba.png" shape="circle" />
<Avatar v-badge.danger="4" class="p-overlay-badge" image="/images/organization/walter.jpg" size="xlarge" />
<Avatar image="https://www.gravatar.com/avatar/05dfd4b41340d09cae045235eb0893c3?d=mp" class="flex align-items-center justify-content-center mr-2" size="xlarge" />`,
options: `<template>
options: `
<template>
<div class="card">
<div class="flex flex-wrap gap-5">
<div class="flex-auto">
@ -63,7 +65,8 @@ export default {
<script>
<\/script>`,
composition: `<template>
composition: `
<template>
<div class="card">
<div class="flex flex-wrap gap-5">
<div class="flex-auto">

6
doc/avatar/ImportDoc.vue
View File

@ -8,8 +8,10 @@ export default {
data() {
return {
code: {
basic: `import Avatar from 'primevue/avatar';
import AvatarGroup from 'primevue/avatargroup'; //Optional for grouping`
basic: `
import Avatar from 'primevue/avatar';
import AvatarGroup from 'primevue/avatargroup'; //Optional for grouping
`
}
};
}

9
doc/avatar/LabelDoc.vue
View File

@ -32,7 +32,8 @@ export default {
data() {
return {
code: {
basic: `<Avatar label="P" class="mr-2" size="xlarge" />
basic: `
<Avatar label="P" class="mr-2" size="xlarge" />
<Avatar label="V" class="mr-2" size="large" style="background-color:#2196F3; color: #ffffff"/>
<Avatar label="U" class="mr-2" style="background-color:#9c27b0; color: #ffffff" />
@ -41,7 +42,8 @@ export default {
<Avatar label="U" class="mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle" />
<Avatar label="U" size="xlarge" style="background-color:#4caf4f; color: #ffffff" v-badge="4" />`,
options: `<template>
options: `
<template>
<div class="flex flex-wrap gap-5">
<div class="flex-auto">
<h5>Label</h5>
@ -67,7 +69,8 @@ export default {
<script>
<\/script>`,
composition: `<template>
composition: `
<template>
<div class="flex flex-wrap gap-5">
<div class="flex-auto">
<h5>Label</h5>

9
doc/avatar/pt/PTDoc.vue
View File

@ -11,19 +11,22 @@ export default {
data() {
return {
code: {
basic: `<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png"
basic: `
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png"
:pt="{
image: { class: 'w-4rem h-4rem' }
}"
/>`,
options: `<template>
options: `
<template>
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png"
:pt="{
image: { class: 'w-4rem h-4rem' }
}"
/>
</template>`,
composition: `<template>
composition: `
<template>
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png"
:pt="{
image: { class: 'w-4rem h-4rem' }

8
doc/avatar/theming/TailwindDoc.vue
View File

@ -4,7 +4,7 @@
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
</p>
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
<p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
<DocSectionCode :code="code2" embedded />
</DocSectionText>
@ -15,8 +15,7 @@ export default {
data() {
return {
code1: {
basic: `
export default {
basic: `export default {
avatar: {
root: ({ props, parent }) => ({
class: [
@ -45,7 +44,8 @@ export default {
`
},
code2: {
composition: `<template>
composition: `
<template>
<div class="card">
<div class="flex flex-wrap gap-5">
<div>

9
doc/badge/BasicDoc.vue
View File

@ -13,8 +13,10 @@ export default {
data() {
return {
code: {
basic: `<Badge value="2"></Badge>`,
options: `<template>
basic: `
<Badge value="2"></Badge>`,
options: `
<template>
<div class="card flex justify-content-center">
<Badge value="2"></Badge>
</div>
@ -23,7 +25,8 @@ export default {
<script>
<\/script>`,
composition: `<template>
composition: `
<template>
<div class="card flex justify-content-center">
<Badge value="2"></Badge>
</div>

9
doc/badge/ButtonDoc.vue
View File

@ -14,9 +14,11 @@ export default {
data() {
return {
code: {
basic: `<Button type="button" label="Emails" badge="8" />
basic: `
<Button type="button" label="Emails" badge="8" />
<Button type="button" label="Messages" icon="pi pi-users" severity="warning" badge="8" badgeClass="p-badge-danger" />`,
options: `<template>
options: `
<template>
<div class="card flex flex-wrap justify-content-center gap-2">
<Button type="button" label="Emails" badge="8" />
<Button type="button" label="Messages" icon="pi pi-users" severity="warning" badge="8" badgeClass="p-badge-danger" />
@ -26,7 +28,8 @@ export default {
<script>
<\/script>`,
composition: `<template>
composition: `
<template>
<div class="card flex flex-wrap justify-content-center gap-2">
<Button type="button" label="Emails" badge="8" />
<Button type="button" label="Messages" icon="pi pi-users" severity="warning" badge="8" badgeClass="p-badge-danger" />

6
doc/badge/ImportDoc.vue
View File

@ -8,13 +8,15 @@ export default {
data() {
return {
code: {
basic: `// import as component
basic: `
// import as component
import Badge from 'primevue/badge';
// import as directive
import BadgeDirective from 'primevue/badgedirective';
app.directive('badge', BadgeDirective);`
app.directive('badge', BadgeDirective);
`
}
};
}

9
doc/badge/PositionDoc.vue
View File

@ -15,10 +15,12 @@ export default {
data() {
return {
code: {
basic: `<i v-badge="2" class="pi pi-bell p-overlay-badge" style="font-size: 2rem" />
basic: `
<i v-badge="2" class="pi pi-bell p-overlay-badge" style="font-size: 2rem" />
<i v-badge.danger="'5+'" class="pi pi-calendar p-overlay-badge" style="font-size: 2rem" />
<i v-badge.danger class="pi pi-envelope p-overlay-badge" style="font-size: 2rem" />`,
options: `<template>
options: `
<template>
<div class="card flex flex-wrap justify-content-center gap-4">
<i v-badge="2" class="pi pi-bell p-overlay-badge" style="font-size: 2rem" />
<i v-badge.danger="'5+'" class="pi pi-calendar p-overlay-badge" style="font-size: 2rem" />
@ -29,7 +31,8 @@ export default {
<script>
<\/script>`,
composition: `<template>
composition: `
<template>
<div class="card flex flex-wrap justify-content-center gap-4">
<i v-badge="2" class="pi pi-bell p-overlay-badge" style="font-size: 2rem" />
<i v-badge.danger="'5+'" class="pi pi-calendar p-overlay-badge" style="font-size: 2rem" />

9
doc/badge/SeverityDoc.vue
View File

@ -17,12 +17,14 @@ export default {
data() {
return {
code: {
basic: `<Badge value="2"></Badge>
basic: `
<Badge value="2"></Badge>
<Badge value="8" severity="success"></Badge>
<Badge value="4" severity="info"></Badge>
<Badge value="12" severity="warning"></Badge>
<Badge value="3" severity="danger"></Badge>`,
options: `<template>
options: `
<template>
<div class="card flex flex-wrap justify-content-center gap-2">
<Badge value="2"></Badge>
<Badge value="8" severity="success"></Badge>
@ -35,7 +37,8 @@ export default {
<script>
<\/script>`,
composition: `<template>
composition: `
<template>
<div class="card flex flex-wrap justify-content-center gap-2">
<Badge value="2"></Badge>
<Badge value="8" severity="success"></Badge>

9
doc/badge/SizeDoc.vue
View File

@ -15,10 +15,12 @@ export default {
data() {
return {
code: {
basic: `<Badge value="6" size="xlarge" severity="success"></Badge>
basic: `
<Badge value="6" size="xlarge" severity="success"></Badge>
<Badge value="4" size="large" severity="warning"></Badge>
<Badge value="2"></Badge>`,
options: `<template>
options: `
<template>
<div class="card flex flex-wrap justify-content-center align-items-end gap-2">
<Badge value="6" size="xlarge" severity="success"></Badge>
<Badge value="4" size="large" severity="warning"></Badge>
@ -29,7 +31,8 @@ export default {
<script>
<\/script>`,
composition: `<template>
composition: `
<template>
<div class="card flex flex-wrap justify-content-center align-items-end gap-2">
<Badge value="6" size="xlarge" severity="success"></Badge>
<Badge value="4" size="large" severity="warning"></Badge>

6
doc/badge/pt/PTDoc.vue
View File

@ -44,7 +44,8 @@ export default {
}"
class="pi pi-calendar text-4xl"
/>`,
options: `<template>
options: `
<template>
<div class="card flex justify-content-center align-items-center gap-2">
// component
<Badge
@ -66,7 +67,8 @@ export default {
/>
</div>
</template>`,
composition: `<template>
composition: `
<template>
<div class="card flex justify-content-center align-items-center gap-2">
// component
<Badge

8
doc/badge/theming/TailwindDoc.vue
View File

@ -4,7 +4,7 @@
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
</p>
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
<p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
<DocSectionCode :code="code2" embedded />
</DocSectionText>
@ -15,8 +15,7 @@ export default {
data() {
return {
code1: {
basic: `
export default {
basic: `export default {
directives: {
badge: {
root: ({ context }) => ({
@ -65,7 +64,8 @@ export default {
`
},
code2: {
composition: `<template>
composition: `
<template>
<div class="card flex flex-wrap justify-center gap-2">
<Badge value="2"></Badge>
<Badge value="8" severity="success"></Badge>

9
doc/blockui/BasicDoc.vue
View File

@ -25,7 +25,8 @@ export default {
return {
blocked: false,
code: {
basic: `<div class="mb-3">
basic: `
<div class="mb-3">
<Button label="Block" @click="blocked = true" class="mr-2"></Button>
<Button label="Unblock" @click="blocked = false"></Button>
</div>
@ -37,7 +38,8 @@ export default {
</p>
</Panel>
</BlockUI>`,
options: `<template>
options: `
<template>
<div class="card">
<div class="mb-3">
<Button label="Block" @click="blocked = true" class="mr-2"></Button>
@ -63,7 +65,8 @@ export default {
}
}
<\/script>`,
composition: `<template>
composition: `
<template>
<div class="card">
<div class="mb-3">
<Button label="Block" @click="blocked = true" class="mr-2"></Button>

9
doc/blockui/DocumentDoc.vue
View File

@ -15,9 +15,11 @@ export default {
return {
blocked: false,
code: {
basic: `<BlockUI :blocked="blocked" fullScreen />
basic: `
<BlockUI :blocked="blocked" fullScreen />
<Button label="Block" @click="blocked = true" />`,
options: `<template>
options: `
<template>
<div class="card">
<BlockUI :blocked="blocked" fullScreen />
<Button label="Block" @click="blockDocument" />
@ -42,7 +44,8 @@ export default {
}
}
<\/script>`,
composition: `<template>
composition: `
<template>
<div class="card">
<BlockUI :blocked="blocked" fullScreen />
<Button label="Block" @click="blockDocument" />

4
doc/blockui/ImportDoc.vue
View File

@ -8,7 +8,9 @@ export default {
data() {
return {
code: {
basic: `import BlockUI from 'primevue/blockui';`
basic: `
import BlockUI from 'primevue/blockui';
`
}
};
}

9
doc/blockui/pt/PTDoc.vue
View File

@ -21,13 +21,15 @@ export default {
return {
blocked: false,
code: {
basic: `<BlockUI :blocked="blocked" :pt="{ root: { class: 'surface-ground p-2 border-round-sm' } }">
basic: `
<BlockUI :blocked="blocked" :pt="{ root: { class: 'surface-ground p-2 border-round-sm' } }">
<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.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</BlockUI>`,
options: `<template>
options: `
<template>
<BlockUI :blocked="blocked" :pt="{ root: { class: 'surface-ground p-2 border-round-sm' } }">
<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.
@ -35,7 +37,8 @@ export default {
</p>
</BlockUI>
</template>`,
composition: `<template>
composition: `
<template>
<BlockUI :blocked="blocked" :pt="{ root: { class: 'surface-ground p-2 border-round-sm' } }">
<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.

8
doc/blockui/theming/TailwindDoc.vue
View File

@ -4,7 +4,7 @@
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
</p>
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
<p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
<DocSectionCode :code="code2" embedded />
</DocSectionText>
@ -15,8 +15,7 @@ export default {
data() {
return {
code1: {
basic: `
export default {
basic: `export default {
blockui: {
root: 'relative',
mask: 'bg-black/40'
@ -25,7 +24,8 @@ export default {
`
},
code2: {
composition: `<template>
composition: `
<template>
<div class="card">
<div class="mb-3">
<Button label="Block" @click="blocked = true" class="mr-2"></Button>

9
doc/breadcrumb/BasicDoc.vue
View File

@ -18,8 +18,10 @@ export default {
},
items: [{ label: 'Computer' }, { label: 'Notebook' }, { label: 'Accessories' }, { label: 'Backpacks' }, { label: 'Item' }],
code: {
basic: `<Breadcrumb :home="home" :model="items" />`,
options: `<template>
basic: `
<Breadcrumb :home="home" :model="items" />`,
options: `
<template>
<div class="card flex justify-content-center">
<Breadcrumb :home="home" :model="items" />
</div>
@ -44,7 +46,8 @@ export default {
}
}
<\/script>`,
composition: `<template>
composition: `
<template>
<div class="card flex justify-content-center">
<Breadcrumb :home="home" :model="items" />
</div>

4
doc/breadcrumb/ImportDoc.vue
View File

@ -8,7 +8,9 @@ export default {
data() {
return {
code: {
basic: `import Breadcrumb from 'primevue/breadcrumb';`
basic: `
import Breadcrumb from 'primevue/breadcrumb';
`
}
};
}

9
doc/breadcrumb/RouterDoc.vue
View File

@ -34,7 +34,8 @@ export default {
},
items: [{ label: 'Computer' }, { label: 'Notebook' }, { label: 'Accessories' }, { label: 'Backpacks' }, { label: 'Item' }],
code: {
basic: `<Breadcrumb :home="home" :model="items">
basic: `
<Breadcrumb :home="home" :model="items">
<template #item="{ label, item, props }">
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
<a :href="routerProps.href" v-bind="props.action">
@ -48,7 +49,8 @@ export default {
</a>
</template>
</Breadcrumb>`,
options: `<template>
options: `
<template>
<div class="card flex justify-content-center">
<Breadcrumb :home="home" :model="items">
<template #item="{ label, item, props }">
@ -86,7 +88,8 @@ export default {
}
}
<\/script>`,
composition: `<template>
composition: `
<template>
<div class="card flex justify-content-center">
<Breadcrumb :home="home" :model="items">
<template #item="{ label, item, props }">

9
doc/breadcrumb/TemplateDoc.vue
View File

@ -21,14 +21,16 @@ export default {
home: { icon: 'pi pi-home', url: 'https://primevue.org/' },
items: [{ icon: 'pi pi-sitemap' }, { icon: 'pi pi-book' }, { icon: 'pi pi-wallet' }, { icon: 'pi pi-shopping-bag' }, { icon: 'pi pi-calculator' }],
code: {
basic: `<Breadcrumb :home="home" :model="items">
basic: `
<Breadcrumb :home="home" :model="items">
<template #item="item">
<a :class="item.class">
<span :class="item.icon"></span>
</a>
</template>
</Breadcrumb>`,
options: `<template>
options: `
<template>
<div class="card flex justify-content-center">
<Breadcrumb :home="home" :model="items">
<template #item="{item}">
@ -50,7 +52,8 @@ export default {
}
}
<\/script>`,
composition: `<template>
composition: `
<template>
<div class="card flex justify-content-center">
<Breadcrumb :home="home" :model="items">
<template #item="{item}">

9
doc/breadcrumb/pt/PTDoc.vue
View File

@ -25,7 +25,8 @@ export default {
},
items: [{ label: 'Computer' }, { label: 'Notebook' }, { label: 'Accessories' }, { label: 'Backpacks' }, { label: 'Item' }],
code: {
basic: `<Breadcrumb :home="home" :model="items"
basic: `
<Breadcrumb :home="home" :model="items"
:pt="{
root: { class: 'surface-ground' },
label: ({ props }) => ({
@ -33,7 +34,8 @@ export default {
})
}"
/>`,
options: `<template>
options: `
<template>
<div class="card flex justify-content-center">
<Breadcrumb :home="home" :model="items"
:pt="{
@ -65,7 +67,8 @@ export default {
}
}
<\/script>`,
composition: `<template>
composition: `
<template>
<div class="card flex justify-content-center">
<Breadcrumb :home="home" :model="items"
:pt="{

8
doc/breadcrumb/theming/TailwindDoc.vue
View File

@ -4,7 +4,7 @@
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
</p>
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
<p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
<DocSectionCode :code="code2" embedded />
</DocSectionText>
@ -15,8 +15,7 @@ export default {
data() {
return {
code1: {
basic: `
export default {
basic: `export default {
breadcrumb: {
root: {
class: ['overflow-x-auto', 'bg-white dark:bg-gray-900 border border-gray-300 dark:border-blue-900/40 rounded-md p-4']
@ -38,7 +37,8 @@ export default {
`
},
code2: {
composition: `<template>
composition: `
<template>
<div class="card flex justify-center">
<Breadcrumb :home="home" :model="items" />
</div>

3
doc/button/AccessibilityDoc.vue
View File

@ -40,7 +40,8 @@ export default {
data() {
return {
code: {
basic: `<Button icon="pi pi-check" aria-label="Submit" />
basic: `
<Button icon="pi pi-check" aria-label="Submit" />
<Button icon="pi pi-check" label="Submit" />

9
doc/button/BadgesDoc.vue
View File

@ -14,9 +14,11 @@ export default {
data() {
return {
code: {
basic: `<Button type="button" label="Emails" badge="8" />
basic: `
<Button type="button" label="Emails" badge="8" />
<Button type="button" label="Messages" icon="pi pi-users" badge="8" badgeClass="p-badge-danger" outlined />`,
options: `<template>
options: `
<template>
<div class="card flex justify-content-center flex-wrap gap-3">
<Button type="button" label="Emails" badge="8" />
<Button type="button" label="Messages" icon="pi pi-users" badge="8" badgeClass="p-badge-danger" outlined />
@ -25,7 +27,8 @@ export default {
<script>
<\/script>`,
composition: `<template>
composition: `
<template>
<div class="card flex justify-content-center flex-wrap gap-3">
<Button type="button" label="Emails" badge="8" />
<Button type="button" label="Messages" icon="pi pi-users" badge="8" badgeClass="p-badge-danger" outlined />

9
doc/button/BasicDoc.vue
View File

@ -13,8 +13,10 @@ export default {
data() {
return {
code: {
basic: `<Button label="Submit" />`,
options: `<template>
basic: `
<Button label="Submit" />`,
options: `
<template>
<div class="card flex justify-content-center">
<Button label="Submit" />
</div>
@ -22,7 +24,8 @@ export default {
<script>
<\/script>`,
composition: `<template>
composition: `
<template>
<div class="card flex justify-content-center">
<Button label="Submit" />
</div>

9
doc/button/ButtonSetDoc.vue
View File

@ -17,12 +17,14 @@ export default {
data() {
return {
code: {
basic: `<span class="p-buttonset">
basic: `
<span class="p-buttonset">
<Button label="Save" icon="pi pi-check" />
<Button label="Delete" icon="pi pi-trash" />
<Button label="Cancel" icon="pi pi-times" />
</span>`,
options: `<template>
options: `
<template>
<div class="card flex justify-content-center">
<span class="p-buttonset">
<Button label="Save" icon="pi pi-check" />
@ -34,7 +36,8 @@ export default {
<script>
<\/script>`,
composition: `<template>
composition: `
<template>
<div class="card flex justify-content-center">
<span class="p-buttonset">
<Button label="Save" icon="pi pi-check" />

9
doc/button/DisabledDoc.vue
View File

@ -13,8 +13,10 @@ export default {
data() {
return {
code: {
basic: `<Button label="Submit" disabled />`,
options: `<template>
basic: `
<Button label="Submit" disabled />`,
options: `
<template>
<div class="card flex justify-content-center">
<Button label="Submit" disabled />
</div>
@ -22,7 +24,8 @@ export default {
<script>
<\/script>`,
composition: `<template>
composition: `
<template>
<div class="card flex justify-content-center">
<Button label="Submit" disabled />
</div>

9
doc/button/IconOnlyDoc.vue
View File

@ -61,7 +61,8 @@ export default {
data() {
return {
code: {
basic: `<Button icon="pi pi-check" aria-label="Filter" />
basic: `
<Button icon="pi pi-check" aria-label="Filter" />
<Button icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" />
<Button icon="pi pi-search" severity="success" aria-label="Search" />
<Button icon="pi pi-user" severity="info" aria-label="User" />
@ -100,7 +101,8 @@ export default {
<Button icon="pi pi-bell" severity="warning" text rounded aria-label="Notification" />
<Button icon="pi pi-heart" severity="help" text rounded aria-label="Favorite" />
<Button icon="pi pi-times" severity="danger" text rounded aria-label="Cancel" />`,
options: `<template>
options: `
<template>
<div class="card">
<div class="flex flex-wrap justify-content-center gap-3 mb-4">
<Button icon="pi pi-check" aria-label="Filter" />
@ -156,7 +158,8 @@ export default {
<script>
<\/script>`,
composition: `<template>
composition: `
<template>
<div class="card">
<div class="flex flex-wrap justify-content-center gap-3 mb-4">
<Button icon="pi pi-check" aria-label="Filter" />

9
doc/button/IconsDoc.vue
View File

@ -15,10 +15,12 @@ export default {
data() {
return {
code: {
basic: `<Button icon="pi pi-check" aria-label="Submit" />
basic: `
<Button icon="pi pi-check" aria-label="Submit" />
<Button label="Submit" icon="pi pi-check" />
<Button label="Submit" icon="pi pi-check" iconPos="right" />`,
options: `<template>
options: `
<template>
<div class="card flex flex-wrap gap-3 justify-content-center">
<Button icon="pi pi-check" aria-label="Submit" />
<Button label="Submit" icon="pi pi-check" />
@ -28,7 +30,8 @@ export default {
<script>
<\/script>`,
composition: `<template>
composition: `
<template>
<div class="card flex flex-wrap gap-3 justify-content-center">
<Button icon="pi pi-check" aria-label="Submit" />
<Button label="Submit" icon="pi pi-check" />

4
doc/button/ImportDoc.vue
View File

@ -8,7 +8,9 @@ export default {
data() {
return {
code: {
basic: `import Button from 'primevue/button';`
basic: `
import Button from 'primevue/button';
`
}
};
}

9
doc/button/LinkDoc.vue
View File

@ -13,8 +13,10 @@ export default {
data() {
return {
code: {
basic: `<Button label="Link" link />`,
options: `<template>
basic: `
<Button label="Link" link />`,
options: `
<template>
<div class="card flex justify-content-center">
<Button label="Link" link />
</div>
@ -22,7 +24,8 @@ export default {
<script>
<\/script>`,
composition: `<template>
composition: `
<template>
<div class="card flex justify-content-center">
<Button label="Link" link />
</div>

9
doc/button/LoadingDoc.vue
View File

@ -14,8 +14,10 @@ export default {
return {
loading: false,
code: {
basic: `<Button type="button" label="Search" icon="pi pi-search" :loading="loading" @click="load" />`,
options: `<template>
basic: `
<Button type="button" label="Search" icon="pi pi-search" :loading="loading" @click="load" />`,
options: `
<template>
<div class="card flex justify-content-center">
<Button type="button" label="Search" icon="pi pi-search" :loading="loading" @click="load" />
</div>
@ -38,7 +40,8 @@ export default {
}
};
<\/script>`,
composition: `<template>
composition: `
<template>
<div class="card flex justify-content-center">
<Button type="button" label="Search" icon="pi pi-search" :loading="loading" @click="load" />
</div>

9
doc/button/OutlinedDoc.vue
View File

@ -19,14 +19,16 @@ export default {
data() {
return {
code: {
basic: `<Button label="Primary" outlined />
basic: `
<Button label="Primary" outlined />
<Button label="Secondary" severity="secondary" outlined />
<Button label="Success" severity="success" outlined />
<Button label="Info" severity="info" outlined />
<Button label="Warning" severity="warning" outlined />
<Button label="Help" severity="help" outlined />
<Button label="Danger" severity="danger" outlined />`,
options: `<template>
options: `
<template>
<div class="card flex justify-content-center flex-wrap gap-3">
<Button label="Primary" outlined />
<Button label="Secondary" severity="secondary" outlined />
@ -40,7 +42,8 @@ export default {
<script>
<\/script>`,
composition: `<template>
composition: `
<template>
<div class="card flex justify-content-center flex-wrap gap-3">
<Button label="Primary" outlined />
<Button label="Secondary" severity="secondary" outlined />

9
doc/button/RaisedDoc.vue
View File

@ -19,14 +19,16 @@ export default {
data() {
return {
code: {
basic: `<Button label="Primary" raised />
basic: `
<Button label="Primary" raised />
<Button label="Secondary" severity="secondary" raised />
<Button label="Success" severity="success" raised />
<Button label="Info" severity="info" raised />
<Button label="Warning" severity="warning" raised />
<Button label="Help" severity="help" raised />
<Button label="Danger" severity="danger" raised />`,
options: `<template>
options: `
<template>
<div class="card flex justify-content-center flex-wrap gap-3">
<Button label="Primary" raised />
<Button label="Secondary" severity="secondary" raised />
@ -40,7 +42,8 @@ export default {
<script>
<\/script>`,
composition: `<template>
composition: `
<template>
<div class="card flex justify-content-center flex-wrap gap-3">
<Button label="Primary" raised />
<Button label="Secondary" severity="secondary" raised />

9
doc/button/RaisedTextDoc.vue
View File

@ -20,7 +20,8 @@ export default {
data() {
return {
code: {
basic: `<Button label="Primary" text raised />
basic: `
<Button label="Primary" text raised />
<Button label="Secondary" severity="secondary" text raised />
<Button label="Success" severity="success" text raised />
<Button label="Info" severity="info" text raised />
@ -28,7 +29,8 @@ export default {
<Button label="Help" severity="help" text raised />
<Button label="Danger" severity="danger" text raised />
<Button label="Plain" plain text raised />`,
options: `<template>
options: `
<template>
<div class="card flex justify-content-center flex-wrap gap-3">
<Button label="Primary" text raised />
<Button label="Secondary" severity="secondary" text raised />
@ -43,7 +45,8 @@ export default {
<script>
<\/script>`,
composition: `<template>
composition: `
<template>
<div class="card flex justify-content-center flex-wrap gap-3">
<Button label="Primary" text raised />
<Button label="Secondary" severity="secondary" text raised />

9
doc/button/RoundedDoc.vue
View File

@ -19,14 +19,16 @@ export default {
data() {
return {
code: {
basic: `<Button label="Primary" rounded />
basic: `
<Button label="Primary" rounded />
<Button label="Secondary" severity="secondary" rounded />
<Button label="Success" severity="success" rounded />
<Button label="Info" severity="info" rounded />
<Button label="Warning" severity="warning" rounded />
<Button label="Help" severity="help" rounded />
<Button label="Danger" severity="danger" rounded />`,
options: `<template>
options: `
<template>
<div class="card flex justify-content-center flex-wrap gap-3">
<Button label="Primary" rounded />
<Button label="Secondary" severity="secondary" rounded />
@ -40,7 +42,8 @@ export default {
<script>
<\/script>`,
composition: `<template>
composition: `
<template>
<div class="card flex justify-content-center flex-wrap gap-3">
<Button label="Primary" rounded />
<Button label="Secondary" severity="secondary" rounded />

9
doc/button/SeverityDoc.vue
View File

@ -19,14 +19,16 @@ export default {
data() {
return {
code: {
basic: `<Button label="Primary" />
basic: `
<Button label="Primary" />
<Button label="Secondary" severity="secondary" />
<Button label="Success" severity="success" />
<Button label="Info" severity="info" />
<Button label="Warning" severity="warning" />
<Button label="Help" severity="help" />
<Button label="Danger" severity="danger" />`,
options: `<template>
options: `
<template>
<div class="card flex justify-content-center flex-wrap gap-3">
<Button label="Primary" />
<Button label="Secondary" severity="secondary" />
@ -40,7 +42,8 @@ export default {
<script>
<\/script>`,
composition: `<template>
composition: `
<template>
<div class="card flex justify-content-center flex-wrap gap-3">
<Button label="Primary" />
<Button label="Secondary" severity="secondary" />

9
doc/button/SizesDoc.vue
View File

@ -15,10 +15,12 @@ export default {
data() {
return {
code: {
basic: `<Button label="Small" icon="pi pi-check" size="small" />
basic: `
<Button label="Small" icon="pi pi-check" size="small" />
<Button label="Normal" icon="pi pi-check" />
<Button label="Large" icon="pi pi-check" size="large" />`,
options: `<template>
options: `
<template>
<div class="card flex flex-wrap align-items-center justify-content-center gap-3">
<Button label="Small" icon="pi pi-check" size="small" />
<Button label="Normal" icon="pi pi-check" />
@ -28,7 +30,8 @@ export default {
<script>
<\/script>`,
composition: `<template>
composition: `
<template>
<div class="card flex flex-wrap align-items-center justify-content-center gap-3">
<Button label="Small" icon="pi pi-check" size="small" />
<Button label="Normal" icon="pi pi-check" />

9
doc/button/TemplateDoc.vue
View File

@ -15,10 +15,12 @@ export default {
data() {
return {
code: {
basic: `<Button class="bg-bluegray-600 hover:bg-bluegray-400 border-bluegray-700">
basic: `
<Button class="bg-bluegray-600 hover:bg-bluegray-400 border-bluegray-700">
<img alt="logo" src="/images/logo.svg" class="h-2rem" />
</Button>`,
options: `<template>
options: `
<template>
<div class="card flex justify-content-center">
<Button class="bg-bluegray-600 hover:bg-bluegray-400 border-bluegray-700">
<img alt="logo" src="https://primefaces.org/cdn/primevue/images/primevue-logo-light.svg" class="h-2rem" />
@ -28,7 +30,8 @@ export default {
<script>
<\/script>`,
composition: `<template>
composition: `
<template>
<div class="card flex justify-content-center">
<Button class="bg-bluegray-600 hover:bg-bluegray-400 border-bluegray-700">
<img alt="logo" src="https://primefaces.org/cdn/primevue/images/primevue-logo-light.svg" class="h-2rem" />

9
doc/button/TextDoc.vue
View File

@ -20,7 +20,8 @@ export default {
data() {
return {
code: {
basic: `<Button label="Primary" text />
basic: `
<Button label="Primary" text />
<Button label="Secondary" severity="secondary" text />
<Button label="Success" severity="success" text />
<Button label="Info" severity="info" text />
@ -28,7 +29,8 @@ export default {
<Button label="Help" severity="help" text />
<Button label="Danger" severity="danger" text />
<Button label="Plain" plain text />`,
options: `<template>
options: `
<template>
<div class="card flex justify-content-center flex-wrap gap-3">
<Button label="Primary" text />
<Button label="Secondary" severity="secondary" text />
@ -43,7 +45,8 @@ export default {
<script>
<\/script>`,
composition: `<template>
composition: `
<template>
<div class="card flex justify-content-center flex-wrap gap-3">
<Button label="Primary" text />
<Button label="Secondary" severity="secondary" text />

9
doc/button/pt/PTDoc.vue
View File

@ -11,12 +11,14 @@ export default {
data() {
return {
code: {
basic: `<Button label="Submit" icon="pi pi-check"
basic: `
<Button label="Submit" icon="pi pi-check"
:pt="{
root: { class: 'bg-indigo-600 border-indigo-600' }
}"
/>`,
options: `<template>
options: `
<template>
<div class="card flex flex-wrap gap-3 justify-content-center">
<Button label="Submit" icon="pi pi-check"
:pt="{
@ -25,7 +27,8 @@ export default {
/>
</div>
</template>`,
composition: `<template>
composition: `
<template>
<div class="card flex flex-wrap gap-3 justify-content-center">
<Button label="Submit" icon="pi pi-check"
:pt="{

8
doc/button/theming/TailwindDoc.vue
View File

@ -4,7 +4,7 @@
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
</p>
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
<p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
<DocSectionCode :code="code2" embedded />
</DocSectionText>
@ -15,8 +15,7 @@ export default {
data() {
return {
code1: {
basic: `
export default {
basic: `export default {
button: {
root: ({ props, context }) => ({
class: [
@ -94,7 +93,8 @@ export default {
`
},
code2: {
composition: `<template>
composition: `
<template>
<div class="card flex justify-center flex-wrap gap-3">
<Button label="Primary" />
<Button label="Secondary" severity="secondary" />

3
doc/calendar/AccessibilityDoc.vue
View File

@ -195,7 +195,8 @@ export default {
data() {
return {
code: {
basic: `<label for="date1">Date</label>
basic: `
<label for="date1">Date</label>
<Calendar inputId="date1" />
<span id="date2">Date</span>

9
doc/calendar/BasicDoc.vue
View File

@ -14,8 +14,10 @@ export default {
return {
date: null,
code: {
basic: `<Calendar v-model="date" />`,
options: `<template>
basic: `
<Calendar v-model="date" />`,
options: `
<template>
<div class="card flex justify-content-center">
<Calendar v-model="date" />
</div>
@ -30,7 +32,8 @@ export default {
}
};
<\/script>`,
composition: `<template>
composition: `
<template>
<div class="card flex justify-content-center">
<Calendar v-model="date" />
</div>

9
doc/calendar/ButtonBarDoc.vue
View File

@ -14,8 +14,10 @@ export default {
return {
date: null,
code: {
basic: `<Calendar v-model="date" showButtonBar />`,
options: `<template>
basic: `
<Calendar v-model="date" showButtonBar />`,
options: `
<template>
<div class="card flex justify-content-center">
<Calendar v-model="date" showButtonBar />
</div>
@ -30,7 +32,8 @@ export default {
}
};
<\/script>`,
composition: `<template>
composition: `
<template>
<div class="card flex justify-content-center">
<Calendar v-model="date" showButtonBar />
</div>

9
doc/calendar/DateTemplateDoc.vue
View File

@ -19,13 +19,15 @@ export default {
return {
date: null,
code: {
basic: `<Calendar v-model="date">
basic: `
<Calendar v-model="date">
<template #date="slotProps">
<strong v-if="slotProps.date.day > 10 && slotProps.date.day < 15" style="text-decoration: line-through">{{ slotProps.date.day }}</strong>
<template v-else>{{ slotProps.date.day }}</template>
</template>
</Calendar>`,
options: `<template>
options: `
<template>
<div class="card flex justify-content-center">
<Calendar v-model="date">
<template #date="slotProps">
@ -45,7 +47,8 @@ export default {
}
}
<\/script>`,
composition: `<template>
composition: `
<template>
<div class="card flex justify-content-center">
<Calendar v-model="date">
<template #date="slotProps">

9
doc/calendar/DisabledDoc.vue
View File

@ -14,8 +14,10 @@ export default {
return {
date: null,
code: {
basic: `<Calendar v-model="date" disabled />`,
options: `<template>
basic: `
<Calendar v-model="date" disabled />`,
options: `
<template>
<div class="card flex justify-content-center">
<Calendar v-model="date" disabled />
</div>
@ -30,7 +32,8 @@ export default {
}
};
<\/script>`,
composition: `<template>
composition: `
<template>
<div class="card flex justify-content-center">
<Calendar v-model="date" disabled />
</div>

9
doc/calendar/FloatLabelDoc.vue
View File

@ -17,11 +17,13 @@ export default {
return {
date: null,
code: {
basic: `<span class="p-float-label">
basic: `
<span class="p-float-label">
<Calendar v-model="date" inputId="birth_date" />
<label for="birth_date">Birth Date</label>
</span>`,
options: `<template>
options: `
<template>
<div class="card flex justify-content-center">
<span class="p-float-label">
<Calendar v-model="date" inputId="birth_date" />
@ -39,7 +41,8 @@ export default {
}
};
<\/script>`,
composition: `<template>
composition: `
<template>
<div class="card flex justify-content-center">
<span class="p-float-label">
<Calendar v-model="date" inputId="birth_date" />

9
doc/calendar/FormatDoc.vue
View File

@ -33,8 +33,10 @@ export default {
return {
date: null,
code: {
basic: `<Calendar v-model="date" dateFormat="dd/mm/yy" />`,
options: `<template>
basic: `
<Calendar v-model="date" dateFormat="dd/mm/yy" />`,
options: `
<template>
<div class="card flex justify-content-center">
<Calendar v-model="date" dateFormat="dd/mm/yy" />
</div>
@ -49,7 +51,8 @@ export default {
}
};
<\/script>`,
composition: `<template>
composition: `
<template>
<div class="card flex justify-content-center">
<Calendar v-model="date" dateFormat="dd/mm/yy" />
</div>

9
doc/calendar/IconDoc.vue
View File

@ -14,8 +14,10 @@ export default {
return {
date: null,
code: {
basic: `<Calendar v-model="date" showIcon />`,
options: `<template>
basic: `
<Calendar v-model="date" showIcon />`,
options: `
<template>
<div class="card flex justify-content-center">
<Calendar v-model="date" showIcon />
</div>
@ -30,7 +32,8 @@ export default {
}
};
<\/script>`,
composition: `<template>
composition: `
<template>
<div class="card flex justify-content-center">
<Calendar v-model="date" showIcon />
</div>

4
doc/calendar/ImportDoc.vue
View File

@ -8,7 +8,9 @@ export default {
data() {
return {
code: {
basic: `import Calendar from 'primevue/calendar';`
basic: `
import Calendar from 'primevue/calendar';
`
}
};
}

9
doc/calendar/InlineDoc.vue
View File

@ -14,8 +14,10 @@ export default {
return {
date: null,
code: {
basic: `<Calendar v-model="date" inline showWeek />`,
options: `<template>
basic: `
<Calendar v-model="date" inline showWeek />`,
options: `
<template>
<div class="card flex justify-content-center">
<Calendar v-model="date" inline showWeek />
</div>
@ -30,7 +32,8 @@ export default {
}
};
<\/script>`,
composition: `<template>
composition: `
<template>
<div class="card flex justify-content-center">
<Calendar v-model="date" inline showWeek />
</div>

9
doc/calendar/InvalidDoc.vue
View File

@ -14,8 +14,10 @@ export default {
return {
date: null,
code: {
basic: `<Calendar v-model="date" class="p-invalid" />`,
options: `<template>
basic: `
<Calendar v-model="date" class="p-invalid" />`,
options: `
<template>
<div class="card flex justify-content-center">
<Calendar v-model="date" class="p-invalid" />
</div>
@ -30,7 +32,8 @@ export default {
}
};
<\/script>`,
composition: `<template>
composition: `
<template>
<div class="card flex justify-content-center">
<Calendar v-model="date" class="p-invalid" />
</div>

9
doc/calendar/MinMaxDoc.vue
View File

@ -16,8 +16,10 @@ export default {
minDate: null,
maxDate: null,
code: {
basic: `<Calendar v-model="date" :minDate="minDate" :maxDate="maxDate" :manualInput="false" />`,
options: `<template>
basic: `
<Calendar v-model="date" :minDate="minDate" :maxDate="maxDate" :manualInput="false" />`,
options: `
<template>
<div class="card flex justify-content-center">
<Calendar v-model="date" :minDate="minDate" :maxDate="maxDate" :manualInput="false" />
</div>
@ -50,7 +52,8 @@ export default {
}
};
<\/script>`,
composition: `<template>
composition: `
<template>
<div class="card flex justify-content-center">
<Calendar v-model="date" :minDate="minDate" :maxDate="maxDate" :manualInput="false" />
</div>

9
doc/calendar/MonthPickerDoc.vue
View File

@ -14,8 +14,10 @@ export default {
return {
date: null,
code: {
basic: `<Calendar v-model="date" view="month" dateFormat="mm/yy" />`,
options: `<template>
basic: `
<Calendar v-model="date" view="month" dateFormat="mm/yy" />`,
options: `
<template>
<div class="card flex justify-content-center">
<Calendar v-model="date" view="month" dateFormat="mm/yy" />
</div>
@ -30,7 +32,8 @@ export default {
}
};
<\/script>`,
composition: `<template>
composition: `
<template>
<div class="card flex justify-content-center">
<Calendar v-model="date" view="month" dateFormat="mm/yy" />
</div>

9
doc/calendar/MultipleDoc.vue
View File

@ -14,8 +14,10 @@ export default {
return {
dates: null,
code: {
basic: `<Calendar v-model="dates" selectionMode="multiple" :manualInput="false" />`,
options: `<template>
basic: `
<Calendar v-model="dates" selectionMode="multiple" :manualInput="false" />`,
options: `
<template>
<div class="card flex justify-content-center">
<Calendar v-model="dates" selectionMode="multiple" :manualInput="false" />
</div>
@ -30,7 +32,8 @@ export default {
}
};
<\/script>`,
composition: `<template>
composition: `
<template>
<div class="card flex justify-content-center">
<Calendar v-model="dates" selectionMode="multiple" :manualInput="false" />
</div>

9
doc/calendar/MultipleMonthsDoc.vue
View File

@ -14,8 +14,10 @@ export default {
return {
date: null,
code: {
basic: `<Calendar v-model="date" :numberOfMonths="2" />`,
options: `<template>
basic: `
<Calendar v-model="date" :numberOfMonths="2" />`,
options: `
<template>
<div class="card flex justify-content-center">
<Calendar v-model="date" :numberOfMonths="2" />
</div>
@ -30,7 +32,8 @@ export default {
}
};
<\/script>`,
composition: `<template>
composition: `
<template>
<div class="card flex justify-content-center">
<Calendar v-model="date" :numberOfMonths="2" />
</div>

9
doc/calendar/RangeDoc.vue
View File

@ -14,8 +14,10 @@ export default {
return {
dates: null,
code: {
basic: `<Calendar v-model="dates" selectionMode="range" :manualInput="false" />`,
options: `<template>
basic: `
<Calendar v-model="dates" selectionMode="range" :manualInput="false" />`,
options: `
<template>
<div class="card flex justify-content-center">
<Calendar v-model="dates" selectionMode="range" :manualInput="false" />
</div>
@ -30,7 +32,8 @@ export default {
}
};
<\/script>`,
composition: `<template>
composition: `
<template>
<div class="card flex justify-content-center">
<Calendar v-model="dates" selectionMode="range" :manualInput="false" />
</div>

9
doc/calendar/TimeDoc.vue
View File

@ -27,10 +27,12 @@ export default {
datetime24h: null,
time: null,
code: {
basic: `<Calendar id="calendar-12h" v-model="datetime12h" showTime hourFormat="12" />
basic: `
<Calendar id="calendar-12h" v-model="datetime12h" showTime hourFormat="12" />
<Calendar id="calendar-24h" v-model="datetime24h" showTime hourFormat="24" />
<Calendar id="calendar-timeonly" v-model="time" timeOnly />`,
options: `<template>
options: `
<template>
<div class="card flex flex-wrap gap-3 p-fluid">
<div class="flex-auto">
<label for="calendar-12h" class="font-bold block mb-2"> 12h Format </label>
@ -58,7 +60,8 @@ export default {
}
};
<\/script>`,
composition: `<template>
composition: `
<template>
<div class="card flex flex-wrap gap-3 p-fluid">
<div class="flex-auto">
<label for="calendar-12h" class="font-bold block mb-2"> 12h Format </label>

9
doc/calendar/TouchUIDoc.vue
View File

@ -14,8 +14,10 @@ export default {
return {
date: null,
code: {
basic: `<Calendar v-model="date" touchUI />`,
options: `<template>
basic: `
<Calendar v-model="date" touchUI />`,
options: `
<template>
<div class="card flex justify-content-center">
<Calendar v-model="date" touchUI />
</div>
@ -30,7 +32,8 @@ export default {
}
};
<\/script>`,
composition: `<template>
composition: `
<template>
<div class="card flex justify-content-center">
<Calendar v-model="date" touchUI />
</div>

9
doc/calendar/YearPickerDoc.vue
View File

@ -14,8 +14,10 @@ export default {
return {
date: null,
code: {
basic: `<Calendar v-model="date" view="year" dateFormat="yy" />`,
options: `<template>
basic: `
<Calendar v-model="date" view="year" dateFormat="yy" />`,
options: `
<template>
<div class="card flex justify-content-center">
<Calendar v-model="date" view="year" dateFormat="yy" />
</div>
@ -30,7 +32,8 @@ export default {
}
};
<\/script>`,
composition: `<template>
composition: `
<template>
<div class="card flex justify-content-center">
<Calendar v-model="date" view="year" dateFormat="yy" />
</div>

9
doc/calendar/form/VeeValidateDoc.vue
View File

@ -43,7 +43,8 @@ export default {
data() {
return {
code: {
basic: `<template>
basic: `
<template>
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column gap-2">
<label for="date">Date</label>
@ -54,7 +55,8 @@ export default {
<Toast />
</div>
</template>`,
options: `<template>
options: `
<template>
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column gap-2">
<label for="date">Date</label>
@ -95,7 +97,8 @@ export default {
}
};
<\/script>`,
composition: `<template>
composition: `
<template>
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column gap-2">
<label for="date">Date</label>

9
doc/calendar/pt/PTDoc.vue
View File

@ -21,7 +21,8 @@ export default {
return {
date: null,
code: {
basic: `<Calendar
basic: `
<Calendar
v-model="date"
showIcon
:pt="{
@ -31,7 +32,8 @@ export default {
}
}"
/>`,
options: `<template>
options: `
<template>
<div class="card flex justify-content-center">
<Calendar
v-model="date"
@ -55,7 +57,8 @@ export default {
}
};
<\/script>`,
composition: `<template>
composition: `
<template>
<div class="card flex justify-content-center">
<Calendar
v-model="date"

8
doc/calendar/theming/TailwindDoc.vue
View File

@ -4,7 +4,7 @@
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
</p>
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
<p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
<DocSectionCode :code="code2" embedded />
</DocSectionText>
@ -15,8 +15,7 @@ export default {
data() {
return {
code1: {
basic: `
export const TRANSITIONS = {
basic: `export const TRANSITIONS = {
overlay: {
enterFromClass: 'opacity-0 scale-75',
enterActiveClass: 'transition-transform transition-opacity duration-150 ease-in',
@ -151,7 +150,8 @@ export default {
`
},
code2: {
composition: `<template>
composition: `
<template>
<div class="card flex justify-center">
<Calendar v-model="date" />
</div>

3
doc/card/AccessibilityDoc.vue
View File

@ -18,7 +18,8 @@ export default {
data() {
return {
code: {
basic: `<Card role="region">
basic: `
<Card role="region">
Content
</Card>`
}

9
doc/card/AdvancedDoc.vue
View File

@ -29,7 +29,8 @@ export default {
data() {
return {
code: {
basic: `<Card style="width: 25em">
basic: `
<Card style="width: 25em">
<template #header>
<img alt="user header" src="/images/usercard.png" />
</template>
@ -46,7 +47,8 @@ export default {
<Button icon="pi pi-times" label="Cancel" severity="secondary" style="margin-left: 0.5em" />
</template>
</Card>`,
options: `<template>
options: `
<template>
<div class="card flex align-items-center justify-content-center">
<Card style="width: 25em">
<template #header>
@ -70,7 +72,8 @@ export default {
<script>
<\/script>`,
composition: `<template>
composition: `
<template>
<div class="card flex align-items-center justify-content-center">
<Card style="width: 25em">
<template #header>

4
doc/card/ImportDoc.vue
View File

@ -8,7 +8,9 @@ export default {
data() {
return {
code: {
basic: `import Card from 'primevue/card';`
basic: `
import Card from 'primevue/card';
`
}
};
}

9
doc/card/pt/PTDoc.vue
View File

@ -19,7 +19,8 @@ export default {
data() {
return {
code: {
basic: `<Card :pt="{ body: { class: 'bg-primary border-round-lg' } }">
basic: `
<Card :pt="{ body: { class: 'bg-primary border-round-lg' } }">
<template #title> Simple Card </template>
<template #content>
<p>
@ -28,7 +29,8 @@ export default {
</p>
</template>
</Card>`,
options: `<template>
options: `
<template>
<div class="card">
<Card :pt="{ body: { class: 'bg-primary border-round-lg' } }">
<template #title> Simple Card </template>
@ -41,7 +43,8 @@ export default {
</Card>
</div>
</template>`,
composition: `<template>
composition: `
<template>
<div class="card">
<Card :pt="{ body: { class: 'bg-primary border-round-lg' } }">
<template #title> Simple Card </template>

8
doc/card/theming/TailwindDoc.vue
View File

@ -4,7 +4,7 @@
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
</p>
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
<p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
<DocSectionCode :code="code2" embedded />
</DocSectionText>
@ -15,8 +15,7 @@ export default {
data() {
return {
code1: {
basic: `
export default {
basic: `export default {
card: {
root: {
class: [
@ -39,7 +38,8 @@ export default {
`
},
code2: {
composition: `<template>
composition: `
<template>
<div class="card flex items-center justify-center">
<Card style="width: 25em">
<template #header>

9
doc/carousel/BasicDoc.vue
View File

@ -51,7 +51,8 @@ export default {
}
],
code: {
basic: `<Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="responsiveOptions">
basic: `
<Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="responsiveOptions">
<template #item="slotProps">
<div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
<div class="mb-3">
@ -69,7 +70,8 @@ export default {
</div>
</template>
</Carousel>`,
options: `<template>
options: `
<template>
<div class="card">
<Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="responsiveOptions">
<template #item="slotProps">
@ -140,7 +142,8 @@ export default {
}
};
<\/script>`,
composition: `<template>
composition: `
<template>
<div class="card">
<Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="responsiveOptions">
<template #item="slotProps">

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