New code highlight spacing

assets/styles/layout/_code.scss

@@ -27,7 +27,7 @@ pre[class*="language-"] {
     background: transparent;
     margin: 0;
     padding: 0;
-    max-height: 60rem;
+    max-height: 40rem;
     overflow: auto;
 
     &:before, &:after {

doc/accordion/BasicDoc.vue

@@ -53,7 +53,8 @@ export default {
             culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
         </p>
     </AccordionTab>
-</Accordion>`,
+</Accordion>
+`,
                 options: `
 <template>
     <div class="card">
@@ -81,7 +82,8 @@ export default {
 </template>
 
 <script>
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -109,7 +111,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }

doc/accordion/ControlledDoc.vue

@@ -65,7 +65,8 @@ export default {
             officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
         </p>
     </AccordionTab>
-</Accordion>`,
+</Accordion>
+`,
                 options: `
 <template>
     <div class="card">
@@ -106,7 +107,8 @@ export default {
             }
         }
     }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -143,7 +145,8 @@ export default {
     import { ref } from 'vue';
 
     const active = ref(0);
-<\/script>`
+<\/script>
+`
             }
         };
     }

doc/accordion/DisabledDoc.vue

@@ -55,7 +55,8 @@ export default {
         </p>
     </AccordionTab>
     <AccordionTab header="Header IV" :disabled="true"> </AccordionTab>
-</Accordion>`,
+</Accordion>
+`,
                 options: `
 <template>
     <div class="card">
@@ -84,7 +85,8 @@ export default {
 </template>
 
 <script>
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -113,7 +115,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }

doc/accordion/DynamicDoc.vue

@@ -27,7 +27,8 @@ export default {
     <AccordionTab v-for="tab in tabs" :key="tab.title" :header="tab.title">
         <p>{{ tab.content }}</p>
     </AccordionTab>
-</Accordion>`,
+</Accordion>
+`,
                 options: `
 <template>
     <div class="card">
@@ -51,7 +52,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -71,7 +73,8 @@ const tabs = ref([
     { title: 'Title 2', content: 'Content 2' },
     { title: 'Title 3', content: 'Content 3' }
 ]);
-<\/script>`
+<\/script>
+`
             }
         };
     }

doc/accordion/MultipleDoc.vue

@@ -53,7 +53,8 @@ export default {
             culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
         </p>
     </AccordionTab>
-</Accordion>`,
+</Accordion>
+`,
                 options: `
 <template>
     <div class="card">
@@ -81,7 +82,8 @@ export default {
 </template>
 
 <script>
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -109,7 +111,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }

doc/accordion/TemplateDoc.vue

@@ -78,7 +78,8 @@ export default {
             officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
         </p>
     </AccordionTab>
-</Accordion>`,
+</Accordion>
+`,
                 options: `
 <template>
     <div class="card">
@@ -134,7 +135,8 @@ export default {
     line-height: 1.5;
     margin: 0;
 }
-</style>`,
+</style>
+`,
                 composition: `
 <template>
     <div class="card">

doc/accordion/pt/PTDoc.vue

@@ -38,7 +38,8 @@ export default {
         }">
         <p>{{ tab.content }}</p>
     </AccordionTab>
-</Accordion>`,
+</Accordion>
+`,
                 options: `
 <template>
     <div class="card">
@@ -75,7 +76,8 @@ export default {
         }
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -107,7 +109,8 @@ const panelClass = (props, parent, index) => {
         }
     ];
 };
-<\/script>`
+<\/script>
+`
             }
         };
     },

doc/accordion/theming/TailwindDoc.vue

@@ -15,7 +15,8 @@ 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',
@@ -89,7 +90,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }

doc/animate/BasicDoc.vue

@@ -31,7 +31,8 @@ export default {
     <div v-animate="{ enterClass: 'flipup' }" class="flex justify-content-center align-items-center h-20rem w-20rem border-round shadow-2 animation-duration-1000 animation-ease-out">
         <span class="text-900 text-3xl font-bold">flip up</span>
     </div>
-</div>`,
+</div>
+`,
                 options: `
 <template>
     <div class="card flex flex-column align-items-center">
@@ -43,7 +44,8 @@ export default {
             <span class="text-900 text-3xl font-bold">flip up</span>
         </div>
     </div>
-</template>`,
+</template>
+`,
                 composition: `
 <template>
     <div class="card flex flex-column align-items-center">

doc/autocomplete/AccessibilityDoc.vue

@@ -168,7 +168,8 @@ export default {
 <span id="ac2">Email</span>
 <AutoComplete aria-labelledby="ac2" />
 
-<AutoComplete aria-label="City" />`
+<AutoComplete aria-label="City" />
+`
             }
         };
     }

doc/autocomplete/BasicDoc.vue

@@ -16,7 +16,8 @@ export default {
             items: [],
             code: {
                 basic: `
-<AutoComplete v-model="value" :suggestions="items" @complete="search" />`,
+<AutoComplete v-model="value" :suggestions="items" @complete="search" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -38,7 +39,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -55,7 +57,8 @@ const items = ref([]);
 const search = (event) => {
     items.value = [...Array(10).keys()].map((item) => event.query + '-' + item);
 }
-<\/script>`
+<\/script>
+`
             }
         };
     },

doc/autocomplete/DisabledDoc.vue

@@ -14,7 +14,8 @@ export default {
         return {
             code: {
                 basic: `
-<AutoComplete disabled placeholder="Disabled" />`,
+<AutoComplete disabled placeholder="Disabled" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -24,7 +25,8 @@ export default {
 
 <script>
 
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -34,7 +36,8 @@ export default {
 
 <script setup>
 
-<\/script>`
+<\/script>
+`
             }
         };
     },

doc/autocomplete/DropdownDoc.vue

@@ -19,7 +19,8 @@ export default {
             items: [],
             code: {
                 basic: `
-<AutoComplete v-model="value" dropdown :suggestions="items" @complete="search" />`,
+<AutoComplete v-model="value" dropdown :suggestions="items" @complete="search" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -43,7 +44,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -62,7 +64,8 @@ const search = (event) => {
 
     items.value = event.query ? [...Array(10).keys()].map((item) => event.query + '-' + item) : _items;
 }
-<\/script>`
+<\/script>
+`
             }
         };
     },

doc/autocomplete/FloatLabelDoc.vue

@@ -22,7 +22,8 @@ export default {
 <span class="p-float-label">
     <AutoComplete v-model="value" inputId="ac" :suggestions="items" @complete="search" />
     <label for="ac">Float Label</label>
-</span>`,
+</span>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -47,7 +48,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -67,7 +69,8 @@ const items = ref([]);
 const search = (event) => {
     items.value = [...Array(10).keys()].map((item) => event.query + '-' + item);
 }
-<\/script>`
+<\/script>
+`
             }
         };
     },

doc/autocomplete/ForceSelectionDoc.vue

@@ -19,7 +19,8 @@ export default {
             items: [],
             code: {
                 basic: `
-<AutoComplete v-model="value" :suggestions="items" @complete="search" forceSelection />`,
+<AutoComplete v-model="value" :suggestions="items" @complete="search" forceSelection />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -41,7 +42,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -58,7 +60,8 @@ const items = ref([]);
 const search = (event) => {
     items.value = [...Array(10).keys()].map((item) => event.query + '-' + item);
 }
-<\/script>`
+<\/script>
+`
             }
         };
     },

doc/autocomplete/GroupDoc.vue

@@ -65,7 +65,8 @@ export default {
             <div>{{ slotProps.item.label }}</div>
         </div>
     </template>
-</AutoComplete>`,
+</AutoComplete>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -140,7 +141,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -209,7 +211,8 @@ const search = (event) => {
     filteredCities.value = newFilteredCities;
 
 }
-<\/script>`
+<\/script>
+`
             }
         };
     },

doc/autocomplete/InvalidDoc.vue

@@ -16,7 +16,8 @@ export default {
             items: [],
             code: {
                 basic: `
-<AutoComplete v-model="value" :suggestions="items" @complete="search" class="p-invalid" />`,
+<AutoComplete v-model="value" :suggestions="items" @complete="search" class="p-invalid" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -38,7 +39,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -55,7 +57,8 @@ const items = ref([]);
 const search = (event) => {
     items.value = [...Array(10).keys()].map((item) => event.query + '-' + item);
 }
-<\/script>`
+<\/script>
+`
             }
         };
     },

doc/autocomplete/MultipleDoc.vue

@@ -16,7 +16,8 @@ export default {
             items: [],
             code: {
                 basic: `
-<AutoComplete v-model="value" multiple :suggestions="items" @complete="search" />`,
+<AutoComplete v-model="value" multiple :suggestions="items" @complete="search" />
+`,
                 options: `
 <template>
     <div class="card p-fluid">
@@ -38,7 +39,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card p-fluid">
@@ -55,7 +57,8 @@ const items = ref([]);
 const search = (event) => {
     items.value = [...Array(10).keys()].map((item) => event.query + '-' + item);
 }
-<\/script>`
+<\/script>
+`
             }
         };
     },

doc/autocomplete/ObjectsDoc.vue

@@ -22,7 +22,8 @@ export default {
             filteredCountries: null,
             code: {
                 basic: `
-<AutoComplete v-model="selectedCountry" optionLabel="name" :suggestions="filteredCountries" @complete="search" />`,
+<AutoComplete v-model="selectedCountry" optionLabel="name" :suggestions="filteredCountries" @complete="search" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -58,7 +59,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -90,7 +92,8 @@ const search = (event) => {
         }
     }, 250);
 }
-<\/script>`
+<\/script>
+`
             }
         };
     },

doc/autocomplete/TemplateDoc.vue

@@ -35,7 +35,8 @@ export default {
             <div>{{ slotProps.option.name }}</div>
         </div>
     </template>
-</AutoComplete>`,
+</AutoComplete>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -78,7 +79,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -117,7 +119,8 @@ const search = (event) => {
         }
     }, 250);
 }
-<\/script>`
+<\/script>
+`
             }
         };
     },

doc/autocomplete/VirtualScrollDoc.vue

@@ -21,7 +21,8 @@ export default {
             code: {
                 basic: `
 <AutoComplete v-model="selectedItem" :suggestions="filteredItems" @complete="searchItems"
-    :virtualScrollerOptions="{ itemSize: 38 }" optionLabel="label" dropdown />`,
+    :virtualScrollerOptions="{ itemSize: 38 }" optionLabel="label" dropdown />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -56,7 +57,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -85,7 +87,8 @@ const searchItems = (event) => {
 
     filteredItems.value = _filteredItems;
 };
-<\/script>`
+<\/script>
+`
             }
         };
     },

doc/autocomplete/form/VeeValidateDoc.vue

@@ -54,7 +54,8 @@ export default {
             <Button type="submit" label="Submit" />
         </form>
     </div>
-</template>`,
+</template>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -106,7 +107,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">

doc/autocomplete/pt/PTDoc.vue

@@ -34,7 +34,8 @@ export default {
             class: context.selected ? 'bg-blue-300' : context.focused ? 'bg-blue-100' : undefined
         })
     }"
-/>`,
+/>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -66,7 +67,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -93,7 +95,8 @@ const items = ref([]);
 const search = (event) => {
     items.value = [...Array(10).keys()].map((item) => event.query + '-' + item);
 }
-<\/script>`
+<\/script>
+`
             }
         };
     },

doc/autocomplete/theming/TailwindDoc.vue

@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export const TRANSITIONS = {
+                basic: `
+export const TRANSITIONS = {
     overlay: {
         enterFromClass: 'opacity-0 scale-75',
         enterActiveClass: 'transition-transform transition-opacity duration-150 ease-in',
@@ -107,7 +108,8 @@ const items = ref([]);
 const search = (event) => {
     items.value = [...Array(10).keys()].map((item) => event.query + '-' + item);
 }
-<\/script>`
+<\/script>
+`
             }
         };
     }

doc/avatar/AvatarGroupDoc.vue

@@ -28,7 +28,8 @@ export default {
     <Avatar image="/images/avatar/ionibowcher.png" size="large" shape="circle" />
     <Avatar image="/images/avatar/xuxuefeng.png" size="large" shape="circle" />
     <Avatar label="+2" shape="circle" size="large" style="background-color: '#9c27b0', color: '#ffffff'" />
-</AvatarGroup>`,
+</AvatarGroup>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -45,7 +46,8 @@ export default {
 
 <script>
 
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -62,7 +64,8 @@ export default {
 
 <script setup>
 
-<\/script>`
+<\/script>
+`
             }
         };
     }

doc/avatar/IconDoc.vue

@@ -41,7 +41,8 @@ export default {
 <Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #2196f3; color: #ffffff" shape="circle" />
 <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" />`,
+<Avatar v-badge="4" class="p-overlay-badge" icon="pi pi-user" size="xlarge" />
+`,
                 options: `
 <template>
     <div class="card">
@@ -70,7 +71,8 @@ export default {
 
 <script>
 
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -99,7 +101,8 @@ export default {
 
 <script setup>
 
-<\/script>`
+<\/script>
+`
             }
         };
     }

doc/avatar/ImageDoc.vue

@@ -37,7 +37,8 @@ export default {
 
 <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" />`,
+<Avatar image="https://www.gravatar.com/avatar/05dfd4b41340d09cae045235eb0893c3?d=mp" class="flex align-items-center justify-content-center mr-2" size="xlarge" />
+`,
                 options: `
 <template>
     <div class="card">
@@ -64,7 +65,8 @@ export default {
 
 <script>
 
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -91,7 +93,8 @@ export default {
 
 <script setup>
 
-<\/script>`
+<\/script>
+`
             }
         };
     }

doc/avatar/LabelDoc.vue

@@ -41,7 +41,8 @@ export default {
 <Avatar label="V" class="mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle"  />
 <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" />`,
+<Avatar label="U" size="xlarge" style="background-color:#4caf4f; color: #ffffff" v-badge="4" />
+`,
                 options: `
 <template>
     <div class="flex flex-wrap gap-5">
@@ -68,7 +69,8 @@ export default {
 
 <script>
 
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="flex flex-wrap gap-5">
@@ -95,7 +97,8 @@ export default {
 
 <script setup>
 
-<\/script>`
+<\/script>
+`
             }
         };
     }

doc/avatar/pt/PTDoc.vue

@@ -16,7 +16,8 @@ export default {
     :pt="{
         image: { class: 'w-4rem h-4rem' }
     }"
-/>`,
+/>
+`,
                 options: `
 <template>
     <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png"
@@ -24,7 +25,8 @@ export default {
             image: { class: 'w-4rem h-4rem' }
         }"
     />
-</template>`,
+</template>
+`,
                 composition: `
 <template>
     <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png"

doc/avatar/theming/TailwindDoc.vue

@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export default {
+                basic: `
+export default {
     avatar: {
         root: ({ props, parent }) => ({
             class: [
@@ -82,7 +83,8 @@ export default {
 
 <script setup>
 
-<\/script>`
+<\/script>
+`
             }
         };
     }

doc/badge/BasicDoc.vue

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

doc/badge/ButtonDoc.vue

@@ -16,7 +16,8 @@ export default {
             code: {
                 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" />`,
+<Button type="button" label="Messages" icon="pi pi-users" severity="warning" badge="8" badgeClass="p-badge-danger" />
+`,
                 options: `
 <template>
     <div class="card flex flex-wrap justify-content-center gap-2">
@@ -27,7 +28,8 @@ export default {
 
 <script>
 
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex flex-wrap justify-content-center gap-2">
@@ -38,7 +40,8 @@ export default {
 
 <script setup>
 
-<\/script>`
+<\/script>
+`
             }
         };
     }

doc/badge/PositionDoc.vue

@@ -18,7 +18,8 @@ export default {
                 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" />`,
+<i v-badge.danger class="pi pi-envelope p-overlay-badge" style="font-size: 2rem" />
+`,
                 options: `
 <template>
     <div class="card flex flex-wrap justify-content-center gap-4">
@@ -30,7 +31,8 @@ export default {
 
 <script>
 
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex flex-wrap justify-content-center gap-4">
@@ -42,7 +44,8 @@ export default {
 
 <script setup>
 
-<\/script>`
+<\/script>
+`
             }
         };
     }

doc/badge/SeverityDoc.vue

@@ -22,7 +22,8 @@ export default {
 <Badge value="8" severity="success"></Badge>
 <Badge value="4" severity="info"></Badge>
 <Badge value="12" severity="warning"></Badge>
-<Badge value="3" severity="danger"></Badge>`,
+<Badge value="3" severity="danger"></Badge>
+`,
                 options: `
 <template>
     <div class="card flex flex-wrap justify-content-center gap-2">
@@ -36,7 +37,8 @@ export default {
 
 <script>
 
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex flex-wrap justify-content-center gap-2">
@@ -50,7 +52,8 @@ export default {
 
 <script setup>
 
-<\/script>`
+<\/script>
+`
             }
         };
     }

doc/badge/SizeDoc.vue

@@ -18,7 +18,8 @@ export default {
                 basic: `
 <Badge value="6" size="xlarge" severity="success"></Badge>
 <Badge value="4" size="large" severity="warning"></Badge>
-<Badge value="2"></Badge>`,
+<Badge value="2"></Badge>
+`,
                 options: `
 <template>
     <div class="card flex flex-wrap justify-content-center align-items-end gap-2">
@@ -30,7 +31,8 @@ export default {
 
 <script>
 
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex flex-wrap justify-content-center align-items-end gap-2">
@@ -42,7 +44,8 @@ export default {
 
 <script setup>
 
-<\/script>`
+<\/script>
+`
             }
         };
     }

doc/badge/pt/PTDoc.vue

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

doc/badge/theming/TailwindDoc.vue

@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export default {
+                basic: `
+export default {
     directives: {
         badge: {
             root: ({ context }) => ({
@@ -83,7 +84,8 @@ export default {
 
 <script setup>
 
-<\/script>`
+<\/script>
+`
             }
         };
     }

doc/blockui/BasicDoc.vue

@@ -37,7 +37,8 @@ export default {
             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>
     </Panel>
-</BlockUI>`,
+</BlockUI>
+`,
                 options: `
 <template>
     <div class="card">
@@ -64,7 +65,8 @@ export default {
         }
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -87,7 +89,8 @@ export default {
 import { ref } from "vue";
 
 const blocked = ref(false);
-<\/script>`
+<\/script>
+`
             }
         };
     }

doc/blockui/DocumentDoc.vue

@@ -17,7 +17,8 @@ export default {
             code: {
                 basic: `
 <BlockUI :blocked="blocked" fullScreen />
-<Button label="Block" @click="blocked = true" />`,
+<Button label="Block" @click="blocked = true" />
+`,
                 options: `
 <template>
     <div class="card">
@@ -43,7 +44,8 @@ export default {
         }
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -63,7 +65,8 @@ const blockDocument = () => {
         blocked.value = false;
     }, 3000);
 }
-<\/script>`
+<\/script>
+`
             }
         };
     },

doc/blockui/pt/PTDoc.vue

@@ -27,7 +27,8 @@ export default {
         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>`,
+</BlockUI>
+`,
                 options: `
 <template>
     <BlockUI :blocked="blocked" :pt="{ root: { class: 'surface-ground p-2 border-round-sm' } }">
@@ -36,7 +37,8 @@ export default {
             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>
-</template>`,
+</template>
+`,
                 composition: `
 <template>
     <BlockUI :blocked="blocked" :pt="{ root: { class: 'surface-ground p-2 border-round-sm' } }">

doc/blockui/theming/TailwindDoc.vue

@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export default {
+                basic: `
+export default {
     blockui: {
         root: 'relative',
         mask: 'bg-black/40'
@@ -46,7 +47,8 @@ export default {
 import { ref } from "vue";
 
 const blocked = ref(false);
-<\/script>`
+<\/script>
+`
             }
         };
     }

doc/breadcrumb/BasicDoc.vue

@@ -19,7 +19,8 @@ export default {
             items: [{ label: 'Computer' }, { label: 'Notebook' }, { label: 'Accessories' }, { label: 'Backpacks' }, { label: 'Item' }],
             code: {
                 basic: `
-<Breadcrumb :home="home" :model="items" />`,
+<Breadcrumb :home="home" :model="items" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -45,7 +46,8 @@ export default {
         }
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -67,7 +69,8 @@ const items = ref([
     {label: 'Backpacks'},
     {label: 'Item'}
 ]);
-<\/script>`
+<\/script>
+`
             }
         };
     }

doc/breadcrumb/RouterDoc.vue

@@ -48,7 +48,8 @@ export default {
             <span v-bind="props.label">{{ label }}</span>
         </a>
     </template>
-</Breadcrumb>`,
+</Breadcrumb>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -87,7 +88,8 @@ export default {
         }
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -122,7 +124,8 @@ const items = ref([
     {label: 'Backpacks'},
     {label: 'Item'}
 ]);
-<\/script>`
+<\/script>
+`
             }
         };
     }

doc/breadcrumb/TemplateDoc.vue

@@ -28,7 +28,8 @@ export default {
             <span :class="item.icon"></span>
         </a>
     </template>
-</Breadcrumb>`,
+</Breadcrumb>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -51,7 +52,8 @@ export default {
         }
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -71,7 +73,8 @@ import { ref } from "vue";
 const home = ref({ icon: 'pi pi-home', url: 'https://primevue.org/' });
 const items = ref([{ icon: 'pi pi-sitemap' }, { icon: 'pi pi-book' }, { icon: 'pi pi-wallet' }, { icon: 'pi pi-shopping-bag' }, { icon: 'pi pi-calculator' }]);
 }
-<\/script>`
+<\/script>
+`
             }
         };
     }

doc/breadcrumb/pt/PTDoc.vue

@@ -33,7 +33,8 @@ export default {
             class: props.index === items.length - 1 ? 'font-italic' : undefined
         })
     }"
-/>`,
+/>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -66,7 +67,8 @@ export default {
         }
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -96,7 +98,8 @@ const items = ref([
     {label: 'Backpacks'},
     {label: 'Item'}
 ]);
-<\/script>`
+<\/script>
+`
             }
         };
     }

doc/breadcrumb/theming/TailwindDoc.vue

@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export default {
+                basic: `
+export default {
     breadcrumb: {
         root: {
             class: ['overflow-x-auto', 'bg-white dark:bg-gray-900 border border-gray-300 dark:border-blue-900/40 rounded-md p-4']
@@ -58,7 +59,8 @@ const items = ref([
     {label: 'Backpacks'},
     {label: 'Item'}
 ]);
-<\/script>`
+<\/script>
+`
             }
         };
     }

doc/button/BadgesDoc.vue

@@ -16,7 +16,8 @@ export default {
             code: {
                 basic: `
 <Button type="button" label="Emails" badge="8" />
-<Button type="button" label="Messages" icon="pi pi-users" badge="8" badgeClass="p-badge-danger" outlined />`,
+<Button type="button" label="Messages" icon="pi pi-users" badge="8" badgeClass="p-badge-danger" outlined />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center flex-wrap gap-3">
@@ -26,7 +27,8 @@ export default {
 </template>
 
 <script>
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center flex-wrap gap-3">
@@ -36,7 +38,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }

doc/button/BasicDoc.vue

@@ -14,7 +14,8 @@ export default {
         return {
             code: {
                 basic: `
-<Button label="Submit" />`,
+<Button label="Submit" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -23,7 +24,8 @@ export default {
 </template>
 
 <script>
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -32,7 +34,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }

doc/button/ButtonSetDoc.vue

@@ -22,7 +22,8 @@ export default {
     <Button label="Save" icon="pi pi-check" />
     <Button label="Delete" icon="pi pi-trash" />
     <Button label="Cancel" icon="pi pi-times" />
-</span>`,
+</span>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -35,7 +36,8 @@ export default {
 </template>
 
 <script>
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -48,7 +50,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }

doc/button/DisabledDoc.vue

@@ -14,7 +14,8 @@ export default {
         return {
             code: {
                 basic: `
-<Button label="Submit" disabled />`,
+<Button label="Submit" disabled />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -23,7 +24,8 @@ export default {
 </template>
 
 <script>
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -32,7 +34,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }

doc/button/IconOnlyDoc.vue

@@ -100,7 +100,8 @@ export default {
 <Button icon="pi pi-user" severity="info" text rounded aria-label="User" />
 <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" />`,
+<Button icon="pi pi-times" severity="danger" text rounded aria-label="Cancel" />
+`,
                 options: `
 <template>
     <div class="card">
@@ -157,7 +158,8 @@ export default {
 </template>
 
 <script>
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -214,7 +216,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }

doc/button/IconsDoc.vue

@@ -18,7 +18,8 @@ export default {
                 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" />`,
+<Button label="Submit" icon="pi pi-check" iconPos="right" />
+`,
                 options: `
 <template>
     <div class="card flex flex-wrap gap-3  justify-content-center">
@@ -29,7 +30,8 @@ export default {
 </template>
 
 <script>
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex flex-wrap gap-3  justify-content-center">
@@ -40,7 +42,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }

doc/button/LinkDoc.vue

@@ -14,7 +14,8 @@ export default {
         return {
             code: {
                 basic: `
-<Button label="Link" link />`,
+<Button label="Link" link />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -23,7 +24,8 @@ export default {
 </template>
 
 <script>
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -32,7 +34,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }

doc/button/LoadingDoc.vue

@@ -15,7 +15,8 @@ export default {
             loading: false,
             code: {
                 basic: `
-<Button type="button" label="Search" icon="pi pi-search" :loading="loading" @click="load" />`,
+<Button type="button" label="Search" icon="pi pi-search" :loading="loading" @click="load" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -39,7 +40,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -58,7 +60,8 @@ const load = () => {
         loading.value = false;
     }, 2000);
 };
-<\/script>`
+<\/script>
+`
             }
         };
     },

doc/button/OutlinedDoc.vue

@@ -26,7 +26,8 @@ export default {
 <Button label="Info" severity="info" outlined />
 <Button label="Warning" severity="warning" outlined />
 <Button label="Help" severity="help" outlined />
-<Button label="Danger" severity="danger" outlined />`,
+<Button label="Danger" severity="danger" outlined />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center flex-wrap gap-3">
@@ -41,7 +42,8 @@ export default {
 </template>
 
 <script>
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center flex-wrap gap-3">
@@ -56,7 +58,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }

doc/button/RaisedDoc.vue

@@ -26,7 +26,8 @@ export default {
 <Button label="Info" severity="info" raised />
 <Button label="Warning" severity="warning" raised />
 <Button label="Help" severity="help" raised />
-<Button label="Danger" severity="danger" raised />`,
+<Button label="Danger" severity="danger" raised />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center flex-wrap gap-3">
@@ -41,7 +42,8 @@ export default {
 </template>
 
 <script>
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center flex-wrap gap-3">
@@ -56,7 +58,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }

doc/button/RaisedTextDoc.vue

@@ -28,7 +28,8 @@ export default {
 <Button label="Warning" severity="warning" text raised />
 <Button label="Help" severity="help" text raised />
 <Button label="Danger" severity="danger" text raised />
-<Button label="Plain" plain text raised />`,
+<Button label="Plain" plain text raised />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center flex-wrap gap-3">
@@ -44,7 +45,8 @@ export default {
 </template>
 
 <script>
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center flex-wrap gap-3">
@@ -60,7 +62,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }

doc/button/RoundedDoc.vue

@@ -26,7 +26,8 @@ export default {
 <Button label="Info" severity="info" rounded />
 <Button label="Warning" severity="warning" rounded />
 <Button label="Help" severity="help" rounded />
-<Button label="Danger" severity="danger" rounded />`,
+<Button label="Danger" severity="danger" rounded />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center flex-wrap gap-3">
@@ -41,7 +42,8 @@ export default {
 </template>
 
 <script>
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center flex-wrap gap-3">
@@ -56,7 +58,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }

doc/button/SeverityDoc.vue

@@ -26,7 +26,8 @@ export default {
 <Button label="Info" severity="info" />
 <Button label="Warning" severity="warning" />
 <Button label="Help" severity="help" />
-<Button label="Danger" severity="danger" />`,
+<Button label="Danger" severity="danger" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center flex-wrap gap-3">
@@ -41,7 +42,8 @@ export default {
 </template>
 
 <script>
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center flex-wrap gap-3">
@@ -56,7 +58,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }

doc/button/SizesDoc.vue

@@ -18,7 +18,8 @@ export default {
                 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" />`,
+<Button label="Large" icon="pi pi-check" size="large" />
+`,
                 options: `
 <template>
     <div class="card flex flex-wrap align-items-center justify-content-center gap-3">
@@ -29,7 +30,8 @@ export default {
 </template>
 
 <script>
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex flex-wrap align-items-center justify-content-center gap-3">
@@ -40,7 +42,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }

doc/button/TemplateDoc.vue

@@ -18,7 +18,8 @@ export default {
                 basic: `
 <Button class="bg-bluegray-600 hover:bg-bluegray-400 border-bluegray-700">
     <img alt="logo" src="/images/logo.svg" class="h-2rem" />
-</Button>`,
+</Button>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -29,7 +30,8 @@ export default {
 </template>
 
 <script>
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -40,7 +42,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }

doc/button/TextDoc.vue

@@ -28,7 +28,8 @@ export default {
 <Button label="Warning" severity="warning" text />
 <Button label="Help" severity="help" text />
 <Button label="Danger" severity="danger" text />
-<Button label="Plain" plain text />`,
+<Button label="Plain" plain text />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center flex-wrap gap-3">
@@ -44,7 +45,8 @@ export default {
 </template>
 
 <script>
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center flex-wrap gap-3">
@@ -60,7 +62,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }

doc/button/pt/PTDoc.vue

@@ -16,7 +16,8 @@ export default {
     :pt="{ 
         root: { class: 'bg-indigo-600 border-indigo-600' } 
     }"
-/>`,
+/>
+`,
                 options: `
 <template>
     <div class="card flex flex-wrap gap-3 justify-content-center">
@@ -26,7 +27,8 @@ export default {
             }"
         />
     </div>
-</template>`,
+</template>
+`,
                 composition: `
 <template>
     <div class="card flex flex-wrap gap-3 justify-content-center">

doc/button/theming/TailwindDoc.vue

@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export default {
+                basic: `
+export default {
     button: {
         root: ({ props, context }) => ({
             class: [

doc/calendar/AccessibilityDoc.vue

@@ -202,7 +202,8 @@ export default {
 <span id="date2">Date</span>
 <Calendar aria-labelledby="date2" />
 
-<Calendar aria-label="Date" />`
+<Calendar aria-label="Date" />
+`
             }
         };
     }

doc/calendar/BasicDoc.vue

@@ -15,7 +15,8 @@ export default {
             date: null,
             code: {
                 basic: `
-<Calendar v-model="date" />`,
+<Calendar v-model="date" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -31,7 +32,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -43,7 +45,8 @@ export default {
 import { ref } from "vue";
 
 const date = ref();
-<\/script>`
+<\/script>
+`
             }
         };
     }

doc/calendar/ButtonBarDoc.vue

@@ -15,7 +15,8 @@ export default {
             date: null,
             code: {
                 basic: `
-<Calendar v-model="date" showButtonBar />`,
+<Calendar v-model="date" showButtonBar />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -31,7 +32,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -43,7 +45,8 @@ export default {
 import { ref } from "vue";
 
 const date = ref();
-<\/script>`
+<\/script>
+`
             }
         };
     }

doc/calendar/DateTemplateDoc.vue

@@ -25,7 +25,8 @@ export default {
         <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>`,
+</Calendar>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -46,7 +47,8 @@ export default {
         }
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -63,7 +65,8 @@ export default {
 import { ref } from "vue";
 
 const date = ref();
-<\/script>`
+<\/script>
+`
             }
         };
     }

doc/calendar/DisabledDoc.vue

@@ -15,7 +15,8 @@ export default {
             date: null,
             code: {
                 basic: `
-<Calendar v-model="date" disabled />`,
+<Calendar v-model="date" disabled />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -31,7 +32,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -43,7 +45,8 @@ export default {
 import { ref } from "vue";
 
 const date = ref();
-<\/script>`
+<\/script>
+`
             }
         };
     }

doc/calendar/FloatLabelDoc.vue

@@ -21,7 +21,8 @@ export default {
 <span class="p-float-label">
     <Calendar v-model="date" inputId="birth_date" />
     <label for="birth_date">Birth Date</label>
-</span>`,
+</span>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -40,7 +41,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -55,7 +57,8 @@ export default {
 import { ref } from "vue";
 
 const date = ref();
-<\/script>`
+<\/script>
+`
             }
         };
     }

doc/calendar/FormatDoc.vue

@@ -34,7 +34,8 @@ export default {
             date: null,
             code: {
                 basic: `
-<Calendar v-model="date" dateFormat="dd/mm/yy" />`,
+<Calendar v-model="date" dateFormat="dd/mm/yy" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -50,7 +51,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -62,7 +64,8 @@ export default {
 import { ref } from "vue";
 
 const date = ref();
-<\/script>`
+<\/script>
+`
             }
         };
     }

doc/calendar/IconDoc.vue

@@ -15,7 +15,8 @@ export default {
             date: null,
             code: {
                 basic: `
-<Calendar v-model="date" showIcon />`,
+<Calendar v-model="date" showIcon />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -31,7 +32,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -43,7 +45,8 @@ export default {
 import { ref } from "vue";
 
 const date = ref();
-<\/script>`
+<\/script>
+`
             }
         };
     }

doc/calendar/InlineDoc.vue

@@ -15,7 +15,8 @@ export default {
             date: null,
             code: {
                 basic: `
-<Calendar v-model="date" inline showWeek />`,
+<Calendar v-model="date" inline showWeek />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -31,7 +32,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -43,7 +45,8 @@ export default {
 import { ref } from "vue";
 
 const date = ref();
-<\/script>`
+<\/script>
+`
             }
         };
     }

doc/calendar/InvalidDoc.vue

@@ -15,7 +15,8 @@ export default {
             date: null,
             code: {
                 basic: `
-<Calendar v-model="date" class="p-invalid" />`,
+<Calendar v-model="date" class="p-invalid" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -31,7 +32,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -43,7 +45,8 @@ export default {
 import { ref } from "vue";
 
 const date = ref();
-<\/script>`
+<\/script>
+`
             }
         };
     }

doc/calendar/MinMaxDoc.vue

@@ -17,7 +17,8 @@ export default {
             maxDate: null,
             code: {
                 basic: `
-<Calendar v-model="date" :minDate="minDate" :maxDate="maxDate" :manualInput="false" />`,
+<Calendar v-model="date" :minDate="minDate" :maxDate="maxDate" :manualInput="false" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -51,7 +52,8 @@ export default {
         this.maxDate.setFullYear(nextYear);
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -78,7 +80,8 @@ minDate.value.setMonth(prevMonth);
 minDate.value.setFullYear(prevYear);
 maxDate.value.setMonth(nextMonth);
 maxDate.value.setFullYear(nextYear);
-<\/script>`
+<\/script>
+`
             }
         };
     },

doc/calendar/MonthPickerDoc.vue

@@ -15,7 +15,8 @@ export default {
             date: null,
             code: {
                 basic: `
-<Calendar v-model="date" view="month" dateFormat="mm/yy" />`,
+<Calendar v-model="date" view="month" dateFormat="mm/yy" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -31,7 +32,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -43,7 +45,8 @@ export default {
 import { ref } from "vue";
 
 const date = ref();
-<\/script>`
+<\/script>
+`
             }
         };
     }

doc/calendar/MultipleDoc.vue

@@ -15,7 +15,8 @@ export default {
             dates: null,
             code: {
                 basic: `
-<Calendar v-model="dates" selectionMode="multiple" :manualInput="false" />`,
+<Calendar v-model="dates" selectionMode="multiple" :manualInput="false" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -31,7 +32,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -43,7 +45,8 @@ export default {
 import { ref } from "vue";
 
 const dates = ref();
-<\/script>`
+<\/script>
+`
             }
         };
     }

doc/calendar/MultipleMonthsDoc.vue

@@ -15,7 +15,8 @@ export default {
             date: null,
             code: {
                 basic: `
-<Calendar v-model="date" :numberOfMonths="2" />`,
+<Calendar v-model="date" :numberOfMonths="2" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -31,7 +32,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -43,7 +45,8 @@ export default {
 import { ref } from "vue";
 
 const date = ref();
-<\/script>`
+<\/script>
+`
             }
         };
     }

doc/calendar/RangeDoc.vue

@@ -15,7 +15,8 @@ export default {
             dates: null,
             code: {
                 basic: `
-<Calendar v-model="dates" selectionMode="range" :manualInput="false" />`,
+<Calendar v-model="dates" selectionMode="range" :manualInput="false" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -31,7 +32,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -43,7 +45,8 @@ export default {
 import { ref } from "vue";
 
 const dates = ref();
-<\/script>`
+<\/script>
+`
             }
         };
     }

doc/calendar/TimeDoc.vue

@@ -30,7 +30,8 @@ export default {
                 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 />`,
+<Calendar id="calendar-timeonly" v-model="time" timeOnly />
+`,
                 options: `
 <template>
     <div class="card flex flex-wrap gap-3 p-fluid">
@@ -59,7 +60,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex flex-wrap gap-3 p-fluid">
@@ -84,7 +86,8 @@ import { ref } from "vue";
 const datetime12h = ref();
 const datetime24h = ref();
 const time = ref();
-<\/script>`
+<\/script>
+`
             }
         };
     }

doc/calendar/TouchUIDoc.vue

@@ -15,7 +15,8 @@ export default {
             date: null,
             code: {
                 basic: `
-<Calendar v-model="date" touchUI />`,
+<Calendar v-model="date" touchUI />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -31,7 +32,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -43,7 +45,8 @@ export default {
 import { ref } from "vue";
 
 const date = ref();
-<\/script>`
+<\/script>
+`
             }
         };
     }

doc/calendar/YearPickerDoc.vue

@@ -15,7 +15,8 @@ export default {
             date: null,
             code: {
                 basic: `
-<Calendar v-model="date" view="year" dateFormat="yy" />`,
+<Calendar v-model="date" view="year" dateFormat="yy" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -31,7 +32,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -43,7 +45,8 @@ export default {
 import { ref } from "vue";
 
 const date = ref();
-<\/script>`
+<\/script>
+`
             }
         };
     }

doc/calendar/form/VeeValidateDoc.vue

@@ -54,7 +54,8 @@ export default {
         </form>
         <Toast />
     </div>
-</template>`,
+</template>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -96,7 +97,8 @@ export default {
         return { value, handleSubmit, onSubmit, errorMessage };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">

doc/calendar/pt/PTDoc.vue

@@ -31,7 +31,8 @@ export default {
             root: { class: 'bg-teal-500 border-teal-500' }
         }
     }"
-/>`,
+/>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -56,7 +57,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -77,7 +79,8 @@ export default {
 import { ref } from "vue";
 
 const date = ref();
-<\/script>`
+<\/script>
+`
             }
         };
     }

doc/calendar/theming/TailwindDoc.vue

@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export const TRANSITIONS = {
+                basic: `
+export const TRANSITIONS = {
     overlay: {
         enterFromClass: 'opacity-0 scale-75',
         enterActiveClass: 'transition-transform transition-opacity duration-150 ease-in',
@@ -161,7 +162,8 @@ export default {
 import { ref } from "vue";
 
 const date = ref();
-<\/script>`
+<\/script>
+`
             }
         };
     }

doc/card/AdvancedDoc.vue

@@ -46,7 +46,8 @@ export default {
         <Button icon="pi pi-check" label="Save" />
         <Button icon="pi pi-times" label="Cancel" severity="secondary" style="margin-left: 0.5em" />
     </template>
-</Card>`,
+</Card>
+`,
                 options: `
 <template>
     <div class="card flex align-items-center justify-content-center">
@@ -71,7 +72,8 @@ export default {
 </template>
 
 <script>
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex align-items-center justify-content-center">
@@ -96,7 +98,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }

doc/card/BasicDoc.vue

@@ -30,7 +30,8 @@ export default {
             quas!
         </p>
     </template>
-</Card>`,
+</Card>
+`,
                 options: `
 <template>
     <div class="card">
@@ -47,7 +48,8 @@ export default {
 </template>
 
 <script>
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -64,7 +66,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }

doc/card/pt/PTDoc.vue

@@ -28,7 +28,8 @@ export default {
             quas!
         </p>
     </template>
-</Card>`,
+</Card>
+`,
                 options: `
 <template>
     <div class="card">
@@ -42,7 +43,8 @@ export default {
             </template>
         </Card>
     </div>
-</template>`,
+</template>
+`,
                 composition: `
 <template>
     <div class="card">

doc/card/theming/TailwindDoc.vue

@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export default {
+                basic: `
+export default {
     card: {
         root: {
             class: [
@@ -62,7 +63,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }

doc/carousel/BasicDoc.vue

@@ -69,7 +69,8 @@ export default {
             </div>
         </div>
     </template>
-</Carousel>`,
+</Carousel>
+`,
                 options: `
 <template>
     <div class="card">
@@ -141,7 +142,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -209,7 +211,8 @@ const getSeverity = (status) => {
     }
 };
 
-<\/script>`,
+<\/script>
+`,
                 data: `
 /* ProductService */        
 {

doc/carousel/CircularDoc.vue

@@ -71,7 +71,8 @@ export default {
             </div>
         </div>
     </template>
-</Carousel>`,
+</Carousel>
+`,
                 options: `
 <template>
     <div class="card">
@@ -144,7 +145,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -213,7 +215,8 @@ const getSeverity = (status) => {
     }
 };
 
-<\/script>`,
+<\/script>
+`,
                 data: `
 /* ProductService */        
 {

doc/carousel/NumScrollDoc.vue

@@ -71,7 +71,8 @@ export default {
             </div>
         </div>
     </template>
-</Carousel>`,
+</Carousel>
+`,
                 options: `
 <template>
     <div class="card">
@@ -144,7 +145,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -213,7 +215,8 @@ const getSeverity = (status) => {
     }
 };
 
-<\/script>`,
+<\/script>
+`,
                 data: `
 /* ProductService */        
 {

doc/carousel/ResponsiveDoc.vue

@@ -74,7 +74,8 @@ export default {
             </div>
         </div>
     </template>
-</Carousel>`,
+</Carousel>
+`,
                 options: `
 <template>
     <div class="card">
@@ -147,7 +148,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -215,7 +217,8 @@ const getSeverity = (status) => {
             return null;
     }
 };
-<\/script>`,
+<\/script>
+`,
                 data: `
 /* ProductService */        
 {

doc/carousel/VerticalDoc.vue

@@ -72,7 +72,8 @@ export default {
             </div>
         </div>
     </template>
-</Carousel>`,
+</Carousel>
+`,
                 options: `
 <template>
     <div class="card">
@@ -146,7 +147,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -215,7 +217,8 @@ const getSeverity = (status) => {
     }
 };
 
-<\/script>`,
+<\/script>
+`,
                 data: `
 /* ProductService */        
 {

doc/carousel/pt/PTDoc.vue

@@ -82,7 +82,8 @@ export default {
             </div>
         </div>
     </template>
-</Carousel>`,
+</Carousel>
+`,
                 options: `
 <template>
     <div class="card">
@@ -162,7 +163,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -238,7 +240,8 @@ const getSeverity = (status) => {
     }
 };
 
-<\/script>`,
+<\/script>
+`,
                 data: `
 /* ProductService */        
 {

doc/carousel/theming/TailwindDoc.vue

@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export default {
+                basic: `
+export default {
     carousel: {
         root: 'flex flex-col',
         content: 'flex flex-col overflow-auto',
@@ -136,7 +137,8 @@ const getSeverity = (status) => {
     }
 };
 
-<\/script>`
+<\/script>
+`
             }
         };
     }

doc/cascadeselect/AccessibilityDoc.vue

@@ -127,7 +127,8 @@ export default {
 <span id="dd1"></span>Options</span>
 <CascadeSelect aria-labelledby="dd1" />
 
-<CascadeSelect aria-label="Options" />`
+<CascadeSelect aria-label="Options" />
+`
             }
         };
     }

doc/cascadeselect/BasicDoc.vue

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

doc/cascadeselect/DisabledDoc.vue

@@ -14,7 +14,8 @@ export default {
         return {
             code: {
                 basic: `
-<CascadeSelect disabled placeholder="Disabled" style="min-width: 14rem" />`,
+<CascadeSelect disabled placeholder="Disabled" style="min-width: 14rem" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -24,7 +25,8 @@ export default {
 
 <script>
 
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -34,7 +36,8 @@ export default {
 
 <script setup>
 
-<\/script>`
+<\/script>
+`
             }
         };
     }