Docs typing updates

doc/accordion/BasicDoc.vue

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

doc/accordion/ControlledDoc.vue

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

doc/accordion/DisabledDoc.vue

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

doc/accordion/DynamicDoc.vue

@@ -22,14 +22,12 @@ 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">
@@ -52,8 +50,7 @@ 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">

doc/accordion/MultipleDoc.vue

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

doc/accordion/TemplateDoc.vue

@@ -45,8 +45,7 @@ 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>
@@ -79,8 +78,7 @@ export default {
         </p>
     </AccordionTab>
 </Accordion>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <Accordion class="accordion-custom" :activeIndex="0">
             <AccordionTab>
@@ -135,8 +133,7 @@ export default {
     margin: 0;
 }
 </style>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Accordion class="accordion-custom" :activeIndex="0">
             <AccordionTab>

doc/accordion/pt/PTDoc.vue

@@ -28,8 +28,7 @@ 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 }) => ({
@@ -39,8 +38,7 @@ 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"
@@ -76,8 +74,7 @@ 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"

doc/accordion/theming/TailwindDoc.vue

@@ -5,7 +5,7 @@
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
 </template>
@@ -15,8 +15,7 @@ export default {
     data() {
         return {
             code1: {
-                basic: `
-export const TRANSITIONS = {
+                basic: `export const TRANSITIONS = {
     toggleable: {
         enterFromClass: 'max-h-0',
         enterActiveClass: 'overflow-hidden transition-all duration-500 ease-in-out',
@@ -63,8 +62,7 @@ export default {
 `
             },
             code2: {
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Accordion :activeIndex="0">
             <AccordionTab header="Header I">

doc/autocomplete/AccessibilityDoc.vue

@@ -161,8 +161,7 @@ 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>

doc/autocomplete/BasicDoc.vue

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

doc/autocomplete/DisabledDoc.vue

@@ -13,10 +13,8 @@ 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>
@@ -25,8 +23,7 @@ export default {
 <script>
 
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <AutoComplete disabled placeholder="Disabled" />
     </div>

doc/autocomplete/DropdownDoc.vue

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

doc/autocomplete/FloatLabelDoc.vue

@@ -18,13 +18,11 @@ 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" />
@@ -48,8 +46,7 @@ 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" />

doc/autocomplete/ForceSelectionDoc.vue

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

doc/autocomplete/GroupDoc.vue

@@ -57,8 +57,7 @@ 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" />
@@ -66,8 +65,7 @@ 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">
@@ -141,8 +139,7 @@ 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">

doc/autocomplete/InvalidDoc.vue

@@ -15,10 +15,8 @@ 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>
@@ -39,8 +37,7 @@ 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>

doc/autocomplete/MultipleDoc.vue

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

doc/autocomplete/ObjectsDoc.vue

@@ -21,10 +21,8 @@ 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>
@@ -59,8 +57,7 @@ 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>

doc/autocomplete/TemplateDoc.vue

@@ -27,8 +27,7 @@ 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" />
@@ -36,8 +35,7 @@ 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">
@@ -79,8 +77,7 @@ 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">

doc/autocomplete/VirtualScrollDoc.vue

@@ -19,11 +19,9 @@ 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>
@@ -57,8 +55,7 @@ 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>

doc/autocomplete/form/VeeValidateDoc.vue

@@ -44,8 +44,7 @@ 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>
@@ -55,8 +54,7 @@ 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>
@@ -107,8 +105,7 @@ 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>

doc/autocomplete/pt/PTDoc.vue

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

doc/autocomplete/theming/TailwindDoc.vue

@@ -5,7 +5,7 @@
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
 </template>
@@ -92,8 +92,7 @@ export default {
 `
             },
             code2: {
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-center">
         <AutoComplete v-model="value" :suggestions="items" @complete="search" />
     </div>

doc/avatar/AvatarGroupDoc.vue

@@ -20,8 +20,7 @@ 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" />
@@ -29,8 +28,7 @@ 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" />
@@ -46,8 +44,7 @@ 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" />

doc/avatar/IconDoc.vue

@@ -32,8 +32,7 @@ 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" />
 
@@ -42,8 +41,7 @@ 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">
@@ -71,8 +69,7 @@ export default {
 <script>
 
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <div class="flex flex-wrap gap-5">
             <div class="flex-auto">

doc/avatar/ImageDoc.vue

@@ -30,16 +30,14 @@ 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">
@@ -65,8 +63,7 @@ export default {
 <script>
 
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <div class="flex flex-wrap gap-5">
             <div class="flex-auto">

doc/avatar/LabelDoc.vue

@@ -32,8 +32,7 @@ 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" />
 
@@ -42,8 +41,7 @@ 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>
@@ -69,8 +67,7 @@ export default {
 <script>
 
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="flex flex-wrap gap-5">
         <div class="flex-auto">
             <h5>Label</h5>

doc/avatar/pt/PTDoc.vue

@@ -11,22 +11,19 @@ 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' }

doc/avatar/theming/TailwindDoc.vue

@@ -5,7 +5,7 @@
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
 </template>
@@ -45,8 +45,7 @@ export default {
 `
             },
             code2: {
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <div class="flex flex-wrap gap-5">
             <div>

doc/badge/BasicDoc.vue

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

doc/badge/ButtonDoc.vue

@@ -14,11 +14,9 @@ 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" />
@@ -28,8 +26,7 @@ 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" />

doc/badge/PositionDoc.vue

@@ -15,12 +15,10 @@ 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" />
@@ -31,8 +29,7 @@ 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" />

doc/badge/SeverityDoc.vue

@@ -17,14 +17,12 @@ 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>
@@ -37,8 +35,7 @@ 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>

doc/badge/SizeDoc.vue

@@ -15,12 +15,10 @@ 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>
@@ -31,8 +29,7 @@ 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>

doc/badge/pt/PTDoc.vue

@@ -44,8 +44,7 @@ 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
@@ -67,8 +66,7 @@ export default {
         />
     </div>
 </template>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center align-items-center gap-2">
         // component
         <Badge

doc/badge/theming/TailwindDoc.vue

@@ -5,7 +5,7 @@
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
 </template>
@@ -65,8 +65,7 @@ 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>

doc/blockui/BasicDoc.vue

@@ -25,8 +25,7 @@ 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>
@@ -38,8 +37,7 @@ 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>
@@ -65,8 +63,7 @@ export default {
     }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <div class="mb-3">
             <Button label="Block" @click="blocked = true" class="mr-2"></Button>

doc/blockui/DocumentDoc.vue

@@ -15,11 +15,9 @@ 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" />
@@ -44,8 +42,7 @@ export default {
     }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <BlockUI :blocked="blocked" fullScreen />
         <Button label="Block" @click="blockDocument" />

doc/blockui/pt/PTDoc.vue

@@ -21,15 +21,13 @@ 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.
@@ -37,8 +35,7 @@ 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.

doc/blockui/theming/TailwindDoc.vue

@@ -5,7 +5,7 @@
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
 </template>
@@ -25,8 +25,7 @@ export default {
 `
             },
             code2: {
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <div class="mb-3">
             <Button label="Block" @click="blocked = true" class="mr-2"></Button>

doc/breadcrumb/BasicDoc.vue

@@ -18,10 +18,8 @@ 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>
@@ -46,8 +44,7 @@ export default {
     }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Breadcrumb :home="home" :model="items" />
     </div>

doc/breadcrumb/TemplateDoc.vue

@@ -21,16 +21,14 @@ 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}">
@@ -52,8 +50,7 @@ export default {
     }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Breadcrumb :home="home" :model="items">
             <template #item="{item}">

doc/breadcrumb/pt/PTDoc.vue

@@ -25,8 +25,7 @@ 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 }) => ({
@@ -34,8 +33,7 @@ export default {
         })
     }"
 />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <Breadcrumb :home="home" :model="items"
             :pt="{
@@ -67,8 +65,7 @@ export default {
     }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Breadcrumb :home="home" :model="items"
             :pt="{

doc/breadcrumb/theming/TailwindDoc.vue

@@ -5,7 +5,7 @@
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
 </template>
@@ -38,8 +38,7 @@ export default {
 `
             },
             code2: {
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-center">
         <Breadcrumb :home="home" :model="items" />
     </div>

doc/button/AccessibilityDoc.vue

@@ -40,8 +40,7 @@ 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" />
 

doc/button/BadgesDoc.vue

@@ -14,11 +14,9 @@ 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 />
@@ -27,8 +25,7 @@ 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 />

doc/button/BasicDoc.vue

@@ -13,10 +13,8 @@ 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>
@@ -24,8 +22,7 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Button label="Submit" />
     </div>

doc/button/ButtonSetDoc.vue

@@ -17,14 +17,12 @@ 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" />
@@ -36,8 +34,7 @@ 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" />

doc/button/DisabledDoc.vue

@@ -13,10 +13,8 @@ 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>
@@ -24,8 +22,7 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Button label="Submit" disabled />
     </div>

doc/button/IconOnlyDoc.vue

@@ -61,8 +61,7 @@ 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" />
@@ -101,8 +100,7 @@ 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" />
@@ -158,8 +156,7 @@ 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" />

doc/button/IconsDoc.vue

@@ -15,12 +15,10 @@ 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" />
@@ -30,8 +28,7 @@ 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" />

doc/button/LinkDoc.vue

@@ -13,10 +13,8 @@ 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>
@@ -24,8 +22,7 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Button label="Link" link />
     </div>

doc/button/LoadingDoc.vue

@@ -14,10 +14,8 @@ 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>
@@ -40,8 +38,7 @@ 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>

doc/button/OutlinedDoc.vue

@@ -19,16 +19,14 @@ 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 />
@@ -42,8 +40,7 @@ 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 />

doc/button/RaisedDoc.vue

@@ -19,16 +19,14 @@ 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 />
@@ -42,8 +40,7 @@ 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 />

doc/button/RaisedTextDoc.vue

@@ -20,8 +20,7 @@ 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 />
@@ -29,8 +28,7 @@ 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 />
@@ -45,8 +43,7 @@ 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 />

doc/button/RoundedDoc.vue

@@ -19,16 +19,14 @@ 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 />
@@ -42,8 +40,7 @@ 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 />

doc/button/SeverityDoc.vue

@@ -19,16 +19,14 @@ 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" />
@@ -42,8 +40,7 @@ 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" />

doc/button/SizesDoc.vue

@@ -15,12 +15,10 @@ 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" />
@@ -30,8 +28,7 @@ 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" />

doc/button/TemplateDoc.vue

@@ -15,12 +15,10 @@ 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" />
@@ -30,8 +28,7 @@ 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" />

doc/button/TextDoc.vue

@@ -20,8 +20,7 @@ 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 />
@@ -29,8 +28,7 @@ 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 />
@@ -45,8 +43,7 @@ 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 />

doc/button/pt/PTDoc.vue

@@ -11,14 +11,12 @@ 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="{ 
@@ -27,8 +25,7 @@ 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="{ 

doc/button/theming/TailwindDoc.vue

@@ -5,7 +5,7 @@
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
 </template>
@@ -94,8 +94,7 @@ 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" />

doc/calendar/AccessibilityDoc.vue

@@ -191,8 +191,7 @@ 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>

doc/calendar/BasicDoc.vue

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

doc/calendar/ButtonBarDoc.vue

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

doc/calendar/DateTemplateDoc.vue

@@ -19,15 +19,13 @@ 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">
@@ -47,8 +45,7 @@ export default {
     }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Calendar v-model="date">
             <template #date="slotProps">

doc/calendar/DisabledDoc.vue

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

doc/calendar/FloatLabelDoc.vue

@@ -17,13 +17,11 @@ 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" />
@@ -41,8 +39,7 @@ 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" />

doc/calendar/FormatDoc.vue

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

doc/calendar/IconDoc.vue

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

doc/calendar/InlineDoc.vue

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

doc/calendar/InvalidDoc.vue

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

doc/calendar/MinMaxDoc.vue

@@ -16,10 +16,8 @@ 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>
@@ -52,8 +50,7 @@ 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>

doc/calendar/MonthPickerDoc.vue

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

doc/calendar/MultipleDoc.vue

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

doc/calendar/MultipleMonthsDoc.vue

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

doc/calendar/RangeDoc.vue

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

doc/calendar/TimeDoc.vue

@@ -27,12 +27,10 @@ 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>
@@ -60,8 +58,7 @@ 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>

doc/calendar/TouchUIDoc.vue

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

doc/calendar/YearPickerDoc.vue

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

doc/calendar/form/VeeValidateDoc.vue

@@ -43,8 +43,7 @@ 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>
@@ -55,8 +54,7 @@ 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>
@@ -97,8 +95,7 @@ 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>

doc/calendar/pt/PTDoc.vue

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

doc/calendar/theming/TailwindDoc.vue

@@ -5,7 +5,7 @@
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
 </template>
@@ -151,8 +151,7 @@ export default {
 `
             },
             code2: {
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-center">
         <Calendar v-model="date" />
     </div>

doc/card/AccessibilityDoc.vue

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

doc/card/AdvancedDoc.vue

@@ -29,8 +29,7 @@ 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>
@@ -47,8 +46,7 @@ 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>
@@ -72,8 +70,7 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex align-items-center justify-content-center">
         <Card style="width: 25em">
             <template #header>

doc/card/pt/PTDoc.vue

@@ -19,8 +19,7 @@ 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>
@@ -29,8 +28,7 @@ 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>
@@ -43,8 +41,7 @@ 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>

doc/card/theming/TailwindDoc.vue

@@ -5,7 +5,7 @@
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
 </template>
@@ -39,8 +39,7 @@ export default {
 `
             },
             code2: {
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex items-center justify-center">
         <Card style="width: 25em">
             <template #header>

doc/carousel/BasicDoc.vue

@@ -51,8 +51,7 @@ 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">
@@ -70,8 +69,7 @@ export default {
         </div>
     </template>
 </Carousel>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="responsiveOptions">
             <template #item="slotProps">
@@ -142,8 +140,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="responsiveOptions">
             <template #item="slotProps">

doc/carousel/CircularDoc.vue

@@ -52,8 +52,7 @@ export default {
                 }
             ],
             code: {
-                basic: `
-<Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions" circular :autoplayInterval="3000">
+                basic: `<Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions" circular :autoplayInterval="3000">
     <template #item="slotProps">
         <div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
             <div class="mb-3">
@@ -72,8 +71,7 @@ export default {
         </div>
     </template>
 </Carousel>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions" circular :autoplayInterval="3000">
             <template #item="slotProps">
@@ -145,8 +143,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions" circular :autoplayInterval="3000">
             <template #item="slotProps">

doc/carousel/NumScrollDoc.vue

@@ -52,8 +52,7 @@ export default {
                 }
             ],
             code: {
-                basic: `
-<Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions">
+                basic: `<Carousel :value="products" :numVisible="3" :numScroll="1" :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">
@@ -72,8 +71,7 @@ export default {
         </div>
     </template>
 </Carousel>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions">
             <template #item="slotProps">
@@ -145,8 +143,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions">
             <template #item="slotProps">

doc/carousel/ResponsiveDoc.vue

@@ -55,8 +55,7 @@ export default {
                 }
             ],
             code: {
-                basic: `
-<Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions">
+                basic: `<Carousel :value="products" :numVisible="3" :numScroll="1" :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">
@@ -75,8 +74,7 @@ export default {
         </div>
     </template>
 </Carousel>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions">
             <template #item="slotProps">
@@ -148,8 +146,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions">
             <template #item="slotProps">

doc/carousel/VerticalDoc.vue

@@ -52,8 +52,7 @@ export default {
                 }
             ],
             code: {
-                basic: `
-<Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="360px"
+                basic: `<Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="360px"
     :responsiveOptions="responsiveOptions" containerClass="w-30rem" contentClass="flex align-items-center">
     <template #item="slotProps">
         <div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
@@ -73,8 +72,7 @@ export default {
         </div>
     </template>
 </Carousel>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="360px"
             :responsiveOptions="responsiveOptions" containerClass="w-30rem" contentClass="flex align-items-center">
@@ -147,8 +145,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="360px"
             :responsiveOptions="responsiveOptions" containerClass="w-30rem" contentClass="flex align-items-center">

doc/carousel/pt/PTDoc.vue

@@ -56,8 +56,7 @@ export default {
                 }
             ],
             code: {
-                basic: `
-<Carousel
+                basic: `<Carousel
     :value="products"
     :numVisible="3"
     :numScroll="3"
@@ -83,8 +82,7 @@ export default {
         </div>
     </template>
 </Carousel>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <Carousel
             :value="products"
@@ -163,8 +161,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Carousel
             :value="products"

doc/carousel/theming/TailwindDoc.vue

@@ -5,7 +5,7 @@
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded :service="['ProductService']" />
     </DocSectionText>
 </template>
@@ -70,8 +70,7 @@ export default {
 `
             },
             code2: {
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="responsiveOptions">
             <template #item="slotProps">

doc/cascadeselect/AccessibilityDoc.vue

@@ -123,8 +123,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<span id="dd1"></span>Options</span>
+                basic: `<span id="dd1"></span>Options</span>
 <CascadeSelect aria-labelledby="dd1" />
 
 <CascadeSelect aria-label="Options" />`

doc/cascadeselect/BasicDoc.vue

@@ -91,11 +91,9 @@ export default {
                 }
             ],
             code: {
-                basic: `
-<CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
+                basic: `<CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
     :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
             :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
@@ -185,8 +183,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
             :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />

doc/cascadeselect/DisabledDoc.vue

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

doc/cascadeselect/FloatLabelDoc.vue

@@ -91,14 +91,12 @@ export default {
                 }
             ],
             code: {
-                basic: `
-<span class="p-float-label">
+                basic: `<span class="p-float-label">
     <CascadeSelect v-model="selectedCity" inputId="cs-city" :options="countries" optionLabel="cname" optionGroupLabel="name"
         :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
     <label for="cs-city">City</label>
 </span>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <span class="p-float-label">
             <CascadeSelect v-model="selectedCity" inputId="cs-city" :options="countries" optionLabel="cname" optionGroupLabel="name"
@@ -191,8 +189,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <span class="p-float-label">
             <CascadeSelect v-model="selectedCity" inputId="cs-city" :options="countries" optionLabel="cname" optionGroupLabel="name"

doc/cascadeselect/InvalidDoc.vue

@@ -88,11 +88,9 @@ export default {
                 }
             ],
             code: {
-                basic: `
-<CascadeSelect v-model="selectedCity" class="p-invalid" :options="countries" optionLabel="cname" optionGroupLabel="name"
+                basic: `<CascadeSelect v-model="selectedCity" class="p-invalid" :options="countries" optionLabel="cname" optionGroupLabel="name"
     :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <CascadeSelect v-model="selectedCity" class="p-invalid" :options="countries" optionLabel="cname" optionGroupLabel="name"
             :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
@@ -182,8 +180,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <CascadeSelect v-model="selectedCity" class="p-invalid" :options="countries" optionLabel="cname" optionGroupLabel="name"
             :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />