Merge branch 'master' of https://github.com/primefaces/primevue

assets/styles/layout/_code.scss

@@ -337,9 +337,11 @@ div.code-toolbar > .toolbar > .toolbar-item > span:focus {
 .layout-wrapper-light {
     pre[class*="language-"] {
         code {
+            color: rgb(10,48,105) !important;
+
             .token {
                 &.tag {
-                    color: rgb(10,48,105) !important;
+                    color: rgb(17,99,41) !important;
                 }
                 &.keyword {
                     color: rgb(207,34,46) !important;
@@ -379,10 +381,6 @@ div.code-toolbar > .toolbar > .toolbar-item > span:focus {
                     color: rgb(130,80,223) !important;
                 }
     
-                &.class-name {
-                    color: rgb(17,99,41) !important;
-                }
-    
                 &.operator {
                     color: rgb(5,80,174) !important;
                 }

components/accordiontab/AccordionTab.d.ts

@@ -92,13 +92,4 @@ declare module '@vue/runtime-core' {
     }
 }
 
-/**
- *
- * AccordionTab is a helper component for Accordion..
- *
- * Demos:
- *
- * - [Accordion](https://primevue.org/accordion)
- *
- */
 export default AccordionTab;

components/avatar/Avatar.vue

@@ -3,7 +3,7 @@
         <slot>
             <span v-if="label" class="p-avatar-text">{{ label }}</span>
             <span v-else-if="icon" :class="iconClass"></span>
-            <img v-else-if="image" :src="image" @error="onError" />
+            <img v-else-if="image" :src="image" :alt="ariaLabel" @error="onError" />
         </slot>
     </div>
 </template>

components/badgedirective/BadgeDirective.d.ts

@@ -1,5 +1,64 @@
-import { ObjectDirective } from 'vue';
+/**
+ *
+ * Badge directive is a small status indicator for another element.
+ *
+ * - [Live Demo](https://primevue.org/badge)
+ *
+ * @module badgedirective
+ */
+import { DirectiveBinding, ObjectDirective } from 'vue';
 
+/**
+ * Defines modifiers of Badge directive.
+ */
+export interface BadgeDirectiveModifiers {
+    /**
+     * Info severity for Badge directive.
+     *  @defaultValue true
+     */
+    info?: boolean | undefined;
+    /**
+     * Success severity for Badge directive.
+     * @defaultValue false
+     */
+    success?: boolean | undefined;
+    /**
+     * Warning severity for Badge directive.
+     *  @defaultValue false
+     */
+    warning?: boolean | undefined;
+    /**
+     * Danger severity for Badge directive.
+     *  @defaultValue false
+     */
+    danger?: boolean | undefined;
+}
+
+/**
+ * Binding of Badge directive.
+ */
+export interface BadgeDirectiveBinding extends Omit<DirectiveBinding, 'modifiers' | 'value'> {
+    /**
+     * Value of the Badge.
+     */
+    value?: string | undefined;
+    /**
+     * Modifiers of the Badge.
+     * @type {BadgeDirectiveModifiers}
+     */
+    modifiers?: BadgeDirectiveModifiers | undefined;
+}
+
+/**
+ * **PrimeVue - Badge**
+ *
+ * _Badge directive provides advisory information for a component._
+ *
+ * [Live Demo](https://www.primevue.org/badge/)
+ * --- ---
+ * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo.svg)
+ *
+ */
 declare const BadgeDirective: ObjectDirective;
 
 export default BadgeDirective;

components/datatable/DataTable.spec.js

@@ -458,7 +458,7 @@ describe('DataTable.vue', () => {
         await wrapper.setProps({ selection: null, selectionMode: 'single' });
 
         await wrapper.vm.onRowClick({
-            originalEvent: { target: wrapper.findAll('tr.p-selectable-row')[0] },
+            originalEvent: { target: wrapper.findAll('tr.p-selectable-row')[0].element },
             data: smallData[0],
             index: 0
         });
@@ -472,13 +472,13 @@ describe('DataTable.vue', () => {
         await wrapper.setProps({ selection: null, selectionMode: 'multiple' });
 
         await wrapper.vm.onRowClick({
-            originalEvent: { shiftKey: true, target: wrapper.findAll('tr.p-selectable-row')[0] },
+            originalEvent: { shiftKey: true, target: wrapper.findAll('tr.p-selectable-row')[0].element },
             data: smallData[0],
             index: 0
         });
 
         await wrapper.vm.onRowClick({
-            originalEvent: { shiftKey: true, target: wrapper.findAll('tr.p-selectable-row')[1] },
+            originalEvent: { shiftKey: true, target: wrapper.findAll('tr.p-selectable-row')[1].element },
             data: smallData[1],
             index: 1
         });
@@ -492,13 +492,13 @@ describe('DataTable.vue', () => {
         await wrapper.setProps({ selection: null, selectionMode: 'multiple', metaKeySelection: false });
 
         await wrapper.vm.onRowClick({
-            originalEvent: { target: wrapper.findAll('tr.p-selectable-row')[0] },
+            originalEvent: { target: wrapper.findAll('tr.p-selectable-row')[0].element },
             data: smallData[0],
             index: 0
         });
 
         await wrapper.vm.onRowClick({
-            originalEvent: { target: wrapper.findAll('tr.p-selectable-row')[1] },
+            originalEvent: { target: wrapper.findAll('tr.p-selectable-row')[1].element },
             data: smallData[1],
             index: 1
         });

components/dropdown/Dropdown.d.ts

@@ -450,13 +450,4 @@ declare module '@vue/runtime-core' {
     }
 }
 
-/**
- *
- * Dropdown is used to select an item from a list of options.
- *
- * Demos:
- *
- * - [Dropdown](https://primevue.org/dropdown)
- *
- */
 export default Dropdown;

components/focustrap/FocusTrap.d.ts

@@ -1,5 +1,44 @@
-import { ObjectDirective } from 'vue';
+/**
+ *
+ * Focus Trap keeps focus within a certain DOM element while tabbing.
+ *
+ * - [Live Demo](https://primevue.org/focustrap)
+ *
+ * @module focustrap
+ */
+import { DirectiveBinding, ObjectDirective } from 'vue';
 
-declare const Ripple: ObjectDirective;
+/**
+ * Defines options of FocusTrap.
+ */
+export interface FocusTrapOptions {
+    /**
+     * When present, it specifies that the directive should be disabled.
+     * @defaultValue false
+     */
+    disabled?: boolean | undefined;
+}
 
-export default Ripple;
+/**
+ * Binding of FocusTrap directive.
+ */
+export interface FocusTrapDirectiveBinding extends Omit<DirectiveBinding, 'modifiers' | 'value'> {
+    /**
+     * Value of the FocusTrap.
+     */
+    value?: FocusTrapOptions | undefined;
+}
+
+/**
+ * **PrimeVue - FocusTrap**
+ *
+ * _FocusTrap directive provides advisory information for a component._
+ *
+ * [Live Demo](https://www.primevue.org/focustrap/)
+ * --- ---
+ * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo.svg)
+ *
+ */
+declare const FocusTrap: ObjectDirective;
+
+export default FocusTrap;

components/image/Image.d.ts

@@ -80,13 +80,4 @@ declare module '@vue/runtime-core' {
     }
 }
 
-/**
- *
- * Displays an image with preview and tranformation options. For multiple image, see Galleria.
- *
- * Demos:
- *
- * - [Image](https://primevue.org/image)
- *
- */
 export default Image;

components/ripple/Ripple.d.ts

@@ -1,5 +1,28 @@
-import { ObjectDirective } from 'vue';
+/**
+ *
+ * Ripple directive adds ripple effect to the host element.
+ *
+ * - [Live Demo](https://primevue.org/ripple)
+ *
+ * @module ripple
+ */
+import { DirectiveBinding, ObjectDirective } from 'vue';
 
+/**
+ * Binding of Ripple directive.
+ */
+export interface RippleDirectiveBinding extends Omit<DirectiveBinding, 'modifiers' | 'value'> {}
+
+/**
+ * **PrimeVue - Ripple**
+ *
+ * _Ripple directive adds ripple effect to the host element._
+ *
+ * [Live Demo](https://www.primevue.org/ripple/)
+ * --- ---
+ * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo.svg)
+ *
+ */
 declare const Ripple: ObjectDirective;
 
 export default Ripple;

components/sidebar/Sidebar.d.ts

@@ -113,13 +113,4 @@ declare module '@vue/runtime-core' {
     }
 }
 
-/**
- *
- * Sidebar is a panel component displayed as an overlay at the edges of the screen.
- *
- * Demos:
- *
- * - [Sidebar](https://primevue.org/sidebar)
- *
- */
 export default Sidebar;

components/styleclass/StyleClass.d.ts

@@ -1,5 +1,76 @@
-import { ObjectDirective } from 'vue';
+/**
+ *
+ * StyleClass manages css classes declaratively to during enter/leave animations or just to toggle classes on an element.
+ *
+ * - [Live Demo](https://primevue.org/styleclass)
+ *
+ * @module styleclass
+ */
+import { DirectiveBinding, ObjectDirective } from 'vue';
 
+/**
+ * Defines options of StyleClass.
+ */
+export interface StyleClassOptions {
+    /**
+     * Selector to define the target element. Available selectors are '@next', '@prev', '@parent' and '@grandparent'.
+     */
+    selector?: '@next' | '@prev' | '@parent' | '@grandparent' | string | undefined;
+    /**
+     * Style class to add when item begins to get displayed.
+     */
+    enterClassName?: string | undefined;
+    /**
+     * Style class to add during enter animation.
+     */
+    enterActiveClassName?: string | undefined;
+    /**
+     * Style class to add when item begins to get displayed.
+     */
+    enterToClassName?: string | undefined;
+    /**
+     * Style class to add when item begins to get hidden.
+     */
+    leaveClassName?: string | undefined;
+    /**
+     * Style class to add during leave animation.
+     */
+    leaveActiveClassName?: string | undefined;
+    /**
+     * Style class to add when leave animation is completed.
+     */
+    leaveToClassName?: string | undefined;
+    /**
+     * Whether to trigger leave animation when outside of the element is clicked.
+     * @defaultValue false
+     */
+    hideOnOutsideClick?: boolean | undefined;
+    /**
+     * Adds or removes a class when no enter-leave animation is required.
+     */
+    toggleClass?: string | undefined;
+}
+
+/**
+ * Binding of StyleClass directive.
+ */
+export interface StyleClassDirectiveBinding extends Omit<DirectiveBinding, 'modifiers' | 'value'> {
+    /**
+     * Value of the StyleClass.
+     */
+    value?: StyleClassOptions | undefined;
+}
+
+/**
+ * **PrimeVue - StyleClass**
+ *
+ * _StyleClass manages css classes declaratively to during enter/leave animations or just to toggle classes on an element._
+ *
+ * [Live Demo](https://www.primevue.org/styleclass/)
+ * --- ---
+ * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo.svg)
+ *
+ */
 declare const StyleClass: ObjectDirective;
 
 export default StyleClass;

components/tabmenu/TabMenu.vue

@@ -34,7 +34,7 @@
                     <component v-else :is="$slots.item" :item="item" :index="i"></component>
                 </li>
             </template>
-            <li ref="inkbar" class="p-tabmenu-ink-bar"></li>
+            <li ref="inkbar" role="none" class="p-tabmenu-ink-bar"></li>
         </ul>
     </div>
 </template>

components/tieredmenu/TieredMenu.d.ts

@@ -123,17 +123,4 @@ declare module '@vue/runtime-core' {
     }
 }
 
-/**
- *
- * TieredMenu displays submenus in nested overlays.
- *
- * Helper API:
- *
- * - [MenuItem](https://primevue.org/menumodel)
- *
- * Demos:
- *
- * - [TieredMenu](https://primevue.org/tieredmenu)
- *
- */
 export default TieredMenu;

components/tooltip/Tooltip.d.ts

@@ -1,5 +1,17 @@
+/**
+ *
+ * Tooltip directive provides advisory information for a component.
+ *
+ * - [Live Demo](https://primevue.org/tooltip)
+ *
+ * @module tooltip
+ *
+ */
 import { DirectiveBinding, ObjectDirective } from 'vue';
 
+/**
+ * Defines options of Tooltip.
+ */
 export interface TooltipOptions {
     /**
      * Text of the tooltip.
@@ -30,8 +42,40 @@ export interface TooltipOptions {
     fitContent?: boolean | undefined;
 }
 
-export declare type TooltipDirectiveModifiers = {};
+/**
+ * Defines modifiers of Tooltip.
+ */
+export interface TooltipDirectiveModifiers {
+    /**
+     * Right position for Tooltip.
+     *  @defaultValue true
+     */
+    right?: boolean | undefined;
+    /**
+     * Left position for Tooltip.
+     *  @defaultValue false
+     */
+    left?: boolean | undefined;
+    /**
+     * Top position for Tooltip.
+     *  @defaultValue false
+     */
+    top?: boolean | undefined;
+    /**
+     * Bottom position for Tooltip.
+     *  @defaultValue false
+     */
+    bottom?: boolean | undefined;
+    /**
+     * Focus event for Tooltip.
+     *  @defaultValue true
+     */
+    focus?: boolean | undefined;
+}
 
+/**
+ * Binding of Tooltip directive.
+ */
 export interface TooltipDirectiveBinding extends Omit<DirectiveBinding, 'modifiers' | 'value'> {
     /**
      * Value of the tooltip.
@@ -44,6 +88,16 @@ export interface TooltipDirectiveBinding extends Omit<DirectiveBinding, 'modifie
     modifiers?: TooltipDirectiveModifiers | undefined;
 }
 
+/**
+ * **PrimeVue - Tooltip**
+ *
+ * _Tooltip directive provides advisory information for a component._
+ *
+ * [Live Demo](https://www.primevue.org/tooltip/)
+ * --- ---
+ * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo.svg)
+ *
+ */
 declare const Tooltip: ObjectDirective;
 
 export default Tooltip;

components/tree/Tree.d.ts

@@ -230,17 +230,4 @@ declare module '@vue/runtime-core' {
     }
 }
 
-/**
- *
- * Tree is used to display hierarchical data.
- *
- * Helper API:
- *
- * - TreeNode
- *
- * Demos:
- *
- * - [Tree](https://primevue.org/tree)
- *
- */
 export default Tree;

components/utils/DomHandler.js

@@ -578,21 +578,24 @@ export default {
     },
 
     isClickable(element) {
+        if (element) {
             const targetNode = element.nodeName;
             const parentNode = element.parentElement && element.parentElement.nodeName;
 
             return (
-            targetNode == 'INPUT' ||
+                targetNode === 'INPUT' ||
-            targetNode == 'BUTTON' ||
+                targetNode === 'TEXTAREA' ||
-            targetNode == 'A' ||
+                targetNode === 'BUTTON' ||
-            parentNode == 'INPUT' ||
+                targetNode === 'A' ||
-            parentNode == 'BUTTON' ||
+                parentNode === 'INPUT' ||
-            parentNode == 'A' ||
+                parentNode === 'TEXTAREA' ||
-            this.hasClass(element, 'p-button') ||
+                parentNode === 'BUTTON' ||
-            this.hasClass(element.parentElement, 'p-button') ||
+                parentNode === 'A' ||
-            this.hasClass(element.parentElement, 'p-checkbox') ||
+                !!element.closest('.p-button, .p-checkbox, .p-radiobutton')
-            this.hasClass(element.parentElement, 'p-radiobutton')
             );
+        }
+
+        return false;
     },
 
     applyStyle(element, style) {

doc/accordion/StyleDoc.vue

@@ -1,6 +1,6 @@
 <template>
     <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
+        <p>Following is the list of structural style classes, for theming classes visit <NuxtLink to="/theming">theming</NuxtLink> page.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">

doc/autocomplete/ImportDoc.vue

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

doc/blockui/ImportDoc.vue

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

doc/breadcrumb/ImportDoc.vue

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

doc/button/ImportDoc.vue

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

doc/button/StyleDoc.vue

@@ -1,6 +1,6 @@
 <template>
     <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
+        <p>Following is the list of structural style classes, for theming classes visit <NuxtLink to="/theming">theming</NuxtLink> page.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">

doc/calendar/ImportDoc.vue

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

doc/card/StyleDoc.vue

@@ -1,6 +1,6 @@
 <template>
     <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
+        <p>Following is the list of structural style classes, for theming classes visit <NuxtLink to="/theming">theming</NuxtLink> page.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">

doc/carousel/ImportDoc.vue

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

doc/cascadeselect/ImportDoc.vue

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

doc/cascadeselect/StyleDoc.vue

@@ -1,6 +1,6 @@
 <template>
     <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
+        <p>Following is the list of structural style classes, for theming classes visit <NuxtLink to="/theming">theming</NuxtLink> page.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">

doc/chart/StyleDoc.vue

@@ -1,6 +1,6 @@
 <template>
     <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
+        <p>Following is the list of structural style classes, for theming classes visit <NuxtLink to="/theming">theming</NuxtLink> page.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">

doc/checkbox/ImportDoc.vue

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

doc/chip/ImportDoc.vue

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

doc/colorpicker/ImportDoc.vue

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

doc/configuration/ImportDoc.vue

@@ -10,8 +10,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
+                basic: `import PrimeVue from 'primevue/config';
-import PrimeVue from 'primevue/config';
 const app = createApp(App);
 
 app.use(PrimeVue);`

doc/configuration/InputStyleDoc.vue

@@ -15,8 +15,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
+                basic: `import {createApp} from "vue";
-import {createApp} from "vue";
 import PrimeVue from "primevue/config";
 const app = createApp(App);
 

doc/configuration/NuxtIntegrationDoc.vue

@@ -19,8 +19,7 @@ export default {
     data() {
         return {
             code1: {
-                basic: `
+                basic: `export default defineNuxtConfig({
-export default defineNuxtConfig({
     css: [
         "primevue/resources/themes/lara-light-blue/theme.css",
         "primevue/resources/primevue.css",
@@ -32,8 +31,7 @@ export default defineNuxtConfig({
 })`
             },
             code2: {
-                basic: `
+                basic: `import { defineNuxtPlugin } from "#app";
-import { defineNuxtPlugin } from "#app";
 import PrimeVue from "primevue/config";
 import Button from "primevue/button";
 

doc/configuration/PropCasesDoc.vue

@@ -11,8 +11,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
+                basic: `<Dialog :showHeader="false"></Dialog>
-<Dialog :showHeader="false"></Dialog>
 
 <!-- can be written as -->
 

doc/configuration/RippleDoc.vue

@@ -11,8 +11,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
+                basic: `import { createApp } from "vue";
-import {createApp} from "vue";
 import PrimeVue from "primevue/config";
 const app = createApp(App);
 

doc/configuration/ZIndexDoc.vue

@@ -14,8 +14,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
+                basic: `import {createApp} from "vue";
-import {createApp} from "vue";
 import PrimeVue from "primevue/config";
 const app = createApp(App);
 

doc/confirmdialog/ImportDoc.vue

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

doc/confirmpopup/ImportDoc.vue

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

doc/confirmpopup/StyleDoc.vue

@@ -1,6 +1,6 @@
 <template>
     <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
+        <p>Following is the list of structural style classes, for theming classes visit <NuxtLink to="/theming">theming</NuxtLink> page.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">

doc/datatable/ImportDoc.vue

@@ -9,7 +9,9 @@ export default {
         return {
             code: {
                 basic: `import DataTable from 'primevue/datatable';
-import Column from 'primevue/column';`
+import Column from 'primevue/column';
+import ColumnGroup from 'primevue/columngroup';   // optional
+import Row from 'primevue/row';                   // optional`
             }
         };
     }

doc/datatable/samples/ProductsDoc.vue

@@ -509,6 +509,21 @@ export default {
             this.filters = {
                 'global': {value: null, matchMode: FilterMatchMode.CONTAINS},
             }
+        },
+        getStatusLabel(status) {
+            switch (status) {
+                case 'INSTOCK':
+                    return 'success';
+
+                case 'LOWSTOCK':
+                    return 'warning';
+
+                case 'OUTOFSTOCK':
+                    return 'danger';
+
+                default:
+                    return null;
+            }
         }
     }
 }
@@ -778,6 +793,22 @@ const deleteSelectedProducts = () => {
     toast.add({severity:'success', summary: 'Successful', detail: 'Products Deleted', life: 3000});
 };
 
+const getStatusLabel = (status) => {
+    switch (status) {
+        case 'INSTOCK':
+            return 'success';
+
+        case 'LOWSTOCK':
+            return 'warning';
+
+        case 'OUTOFSTOCK':
+            return 'danger';
+
+        default:
+            return null;
+    }
+};
+
 <\/script>
 `
             }

doc/dataview/ImportDoc.vue

@@ -8,8 +8,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
+                basic: `import DataView from 'primevue/dataview';
-import DataView from 'primevue/dataview';
 import DataViewLayoutOptions from 'primevue/dataviewlayoutoptions'   // optional`
             }
         };

doc/divider/StyleDoc.vue

@@ -1,6 +1,6 @@
 <template>
     <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming"> theming</nuxt-link> page.</p>
+        <p>Following is the list of structural style classes, for theming classes visit <NuxtLink to="/theming"> theming</NuxtLink> page.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">

doc/dropdown/ImportDoc.vue

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

doc/dynamicdialog/ImportDoc.vue

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

doc/fieldset/StyleDoc.vue

@@ -1,6 +1,6 @@
 <template>
     <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
+        <p>Following is the list of structural style classes, for theming classes visit <NuxtLink to="/theming">theming</NuxtLink> page.</p>
         <div class="doc-tablewrapper">
             <table class="doc-table">
                 <thead>

doc/fileupload/ImportDoc.vue

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

doc/fileupload/StyleDoc.vue

@@ -1,6 +1,6 @@
 <template>
     <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
+        <p>Following is the list of structural style classes, for theming classes visit <NuxtLink to="/theming">theming</NuxtLink> page.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">

doc/galleria/ImportDoc.vue

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

doc/image/ImportDoc.vue

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

doc/inlinemessage/AccessibilityDoc.vue

@@ -7,7 +7,7 @@
         </p>
 
         <p>
-            Close element is a <i>button</i> with an <i>aria-label</i> that refers to the <i>aria.close</i> property of the <nuxt-link to="/locale">locale</nuxt-link> API by default, you may use <i>closeButtonProps</i> to customize the element and
+            Close element is a <i>button</i> with an <i>aria-label</i> that refers to the <i>aria.close</i> property of the <NuxtLink to="/locale">locale</NuxtLink> API by default, you may use <i>closeButtonProps</i> to customize the element and
             override the default <i>aria-label</i>.
         </p>
 

doc/inlinemessage/ImportDoc.vue

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

doc/inlinemessage/StyleDoc.vue

@@ -1,6 +1,6 @@
 <template>
     <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
+        <p>Following is the list of structural style classes, for theming classes visit <NuxtLink to="/theming">theming</NuxtLink> page.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">

doc/inputnumber/ImportDoc.vue

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

doc/inputswitch/StyleDoc.vue

@@ -1,6 +1,6 @@
 <template>
     <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
+        <p>Following is the list of structural style classes, for theming classes visit <NuxtLink to="/theming">theming</NuxtLink> page.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">

doc/inputtext/ImportDoc.vue

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

doc/installation/DownloadDoc.vue

@@ -10,8 +10,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
+                basic: `// with npm
-// with npm
 npm install primevue primeicons
 
 // with yarn

doc/installation/StylesDoc.vue

@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Theme, core and icons are the necessary css files of the components, visit the <NuxtLink to="/theming#themes">Themes</NuxtLink> section for the complete list of available themes to choose from.</p>
+        <p>Theme, core and icons are the necessary css files of the components, visit the <NuxtLink to="/theming/#themes">Themes</NuxtLink> section for the complete list of available themes to choose from.</p>
     </DocSectionText>
     <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
@@ -10,8 +10,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
+                basic: `//theme
-//theme
 import "primevue/resources/themes/lara-light-indigo/theme.css";     
     
 //core

doc/installation/UsageDoc.vue

@@ -5,7 +5,7 @@
     <div class="card flex justify-content-center">
         <Button label="Check" icon="pi pi-check" />
     </div>
-    <DocSectionCode :code="code" />
+    <DocSectionCode :code="code" importCode />
 </template>
 
 <script>

doc/knob/StyleDoc.vue

@@ -1,6 +1,6 @@
 <template>
     <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
+        <p>Following is the list of structural style classes, for theming classes visit <NuxtLink to="/theming">theming</NuxtLink> page.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">

doc/listbox/ImportDoc.vue

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

doc/locale/ImportDoc.vue

@@ -10,8 +10,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
+                basic: `import PrimeVue from 'primevue/config';
-import PrimeVue from 'primevue/config';
 const app = createApp(App);
 
 app.use(PrimeVue);`

doc/menubar/ImportDoc.vue

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

doc/message/AccessibilityDoc.vue

@@ -7,7 +7,7 @@
         </p>
 
         <p>
-            Close element is a <i>button</i> with an <i>aria-label</i> that refers to the <i>aria.close</i> property of the <nuxt-link to="/locale">locale</nuxt-link> API by default, you may use <i>closeButtonProps</i> to customize the element and
+            Close element is a <i>button</i> with an <i>aria-label</i> that refers to the <i>aria.close</i> property of the <NuxtLink to="/locale">locale</NuxtLink> API by default, you may use <i>closeButtonProps</i> to customize the element and
             override the default <i>aria-label</i>.
         </p>
 

doc/message/ImportDoc.vue

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

doc/message/StyleDoc.vue

@@ -1,6 +1,6 @@
 <template>
     <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
+        <p>Following is the list of structural style classes, for theming classes visit <NuxtLink to="/theming">theming</NuxtLink> page.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">

doc/multiselect/ImportDoc.vue

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

doc/orderlist/AccessibilityDoc.vue

@@ -7,7 +7,7 @@
         </p>
         <p>
             Controls buttons are <i>button</i> elements with an <i>aria-label</i> that refers to the <i>aria.moveTop</i>, <i>aria.moveUp</i>, <i>aria.moveDown</i> and <i>aria.moveBottom</i> properties of the
-            <nuxt-link to="/locale">locale</nuxt-link> API by default, alternatively you may use <i>moveTopButtonProps</i>, <i>moveUpButtonProps</i>, <i>moveDownButtonProps</i> and <i>moveBottomButtonProps</i> to customize the buttons like overriding
+            <NuxtLink to="/locale">locale</NuxtLink> API by default, alternatively you may use <i>moveTopButtonProps</i>, <i>moveUpButtonProps</i>, <i>moveDownButtonProps</i> and <i>moveBottomButtonProps</i> to customize the buttons like overriding
             the default <i>aria-label</i> attributes.
         </p>
 

doc/orderlist/ImportDoc.vue

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

doc/orderlist/StyleDoc.vue

@@ -1,6 +1,6 @@
 <template>
     <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
+        <p>Following is the list of structural style classes, for theming classes visit <NuxtLink to="/theming">theming</NuxtLink> page.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">

doc/organizationchart/ImportDoc.vue

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

doc/overlaypanel/ImportDoc.vue

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

doc/paginator/AccessibilityDoc.vue

@@ -5,23 +5,21 @@
 
         <p>
             First, previous, next and last page navigators elements with <i>aria-label</i> attributes referring to the <i>aria.firstPageLabel</i>, <i>aria.prevPageLabel</i>, <i>aria.nextPageLabel</i> and <i>aria.lastPageLabel</i> properties of the
-            <nuxt-link to="/locale">locale</nuxt-link> API respectively.
+            <NuxtLink to="/locale">locale</NuxtLink> API respectively.
         </p>
 
-        <p>
+        <p>Page links are also button elements with an <i>aria-label</i> attribute derived from the <i>aria.pageLabel</i> of the <NuxtLink to="/locale">locale</NuxtLink> API. Current page is marked with <i>aria-current</i> set to "page" as well.</p>
-            Page links are also button elements with an <i>aria-label</i> attribute derived from the <i>aria.pageLabel</i> of the <nuxt-link to="/locale">locale</nuxt-link> API. Current page is marked with <i>aria-current</i> set to "page" as well.
-        </p>
 
         <p>Current page report uses <i>aria-live="polite"</i> to instruct screen reader about the changes to the pagination state.</p>
 
         <p>
-            Rows per page dropdown internally uses a dropdown component, refer to the <nuxt-link to="/dropdown">dropdown</nuxt-link> documentation for accessibility details. Additionally, the dropdown uses an <i>aria-label</i> from the
+            Rows per page dropdown internally uses a dropdown component, refer to the <NuxtLink to="/dropdown">dropdown</NuxtLink> documentation for accessibility details. Additionally, the dropdown uses an <i>aria-label</i> from the
-            <i>aria.rowsPerPageLabel</i> property of the <nuxt-link to="/locale">locale</nuxt-link> API.
+            <i>aria.rowsPerPageLabel</i> property of the <NuxtLink to="/locale">locale</NuxtLink> API.
         </p>
 
         <p>
             Jump to page input is an <i>input</i> element with an <i>aria-label</i> that refers to the <i>aria.jumpToPageInputLabel</i> property and jump to page dropdown internally uses a dropdown component, with an <i>aria-label</i> that refers to
-            the <i>aria.jumpToPageDropdownLabel</i> property of the <nuxt-link to="/locale">locale</nuxt-link> API.
+            the <i>aria.jumpToPageDropdownLabel</i> property of the <NuxtLink to="/locale">locale</NuxtLink> API.
         </p>
 
         <h3>Keyboard Support</h3>
@@ -57,6 +55,6 @@
         </div>
 
         <h3>Rows Per Page Dropdown Keyboard Support</h3>
-        <p>Refer to the <nuxt-link to="/dropdown">dropdown</nuxt-link> documentation for more details about keyboard support.</p>
+        <p>Refer to the <NuxtLink to="/dropdown">dropdown</NuxtLink> documentation for more details about keyboard support.</p>
     </DocSectionText>
 </template>

doc/paginator/ImportDoc.vue

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

doc/paginator/StyleDoc.vue

@@ -1,6 +1,6 @@
 <template>
     <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming"> theming</nuxt-link> page.</p>
+        <p>Following is the list of structural style classes, for theming classes visit <NuxtLink to="/theming"> theming</NuxtLink> page.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">

doc/panel/BasicDoc.vue

@@ -4,7 +4,7 @@
     </DocSectionText>
     <div class="card">
         <Panel header="Header">
-            <p>
+            <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>
@@ -20,7 +20,7 @@ export default {
             code: {
                 basic: `
 <Panel header="Header">
-    <p>
+    <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>
@@ -29,7 +29,7 @@ export default {
 <template>
     <div class="card">
         <Panel header="Header">
-            <p>
+            <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>
@@ -43,7 +43,7 @@ export default {
 <template>
     <div class="card">
         <Panel header="Header">
-            <p>
+            <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>

doc/panel/StyleDoc.vue

@@ -1,6 +1,6 @@
 <template>
     <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming"> theming</nuxt-link> page.</p>
+        <p>Following is the list of structural style classes, for theming classes visit <NuxtLink to="/theming"> theming</NuxtLink> page.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">

doc/panel/TemplateDoc.vue

@@ -10,7 +10,7 @@
                 </button>
                 <Menu ref="menu" id="config_menu" :model="items" popup />
             </template>
-            <p>
+            <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>
@@ -61,7 +61,6 @@ export default {
             ],
             code: {
                 basic: `
-<Toast />
 <Panel header="Header" toggleable>
     <template #icons>
         <button class="p-panel-header-icon p-link mr-2" @click="toggle">
@@ -69,7 +68,7 @@ export default {
         </button>
         <Menu ref="menu" id="config_menu" :model="items" popup />
     </template>
-    <p>
+    <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>
@@ -85,7 +84,7 @@ export default {
                 </button>
                 <Menu ref="menu" id="config_menu" :model="items" popup />
             </template>
-            <p>
+            <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>
@@ -156,7 +155,7 @@ export default {
                 </button>
                 <Menu ref="menu" id="config_menu" :model="items" popup />
             </template>
-            <p>
+            <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>

doc/panel/ToggleableDoc.vue

@@ -4,7 +4,7 @@
     </DocSectionText>
     <div class="card">
         <Panel header="Header" toggleable>
-            <p>
+            <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>
@@ -20,7 +20,7 @@ export default {
             code: {
                 basic: `
 <Panel header="Header" toggleable>
-    <p>
+    <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>
@@ -29,7 +29,7 @@ export default {
 <template>
     <div class="card">
         <Panel header="Header" toggleable>
-            <p>
+            <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>
@@ -43,7 +43,7 @@ export default {
 <template>
     <div class="card">
         <Panel header="Header" toggleable>
-            <p>
+            <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>

doc/password/StyleDoc.vue

@@ -1,6 +1,6 @@
 <template>
     <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
+        <p>Following is the list of structural style classes, for theming classes visit <NuxtLink to="/theming">theming</NuxtLink> page.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">

doc/picklist/AccessibilityDoc.vue

@@ -7,9 +7,9 @@
         </p>
         <p>
             Controls buttons are <i>button</i> elements with an <i>aria-label</i> that refers to the <i>aria.moveTop</i>, <i>aria.moveUp</i>, <i>aria.moveDown</i>, <i>aria.moveBottom</i>,<i>aria.moveToTarget</i>, <i>aria.moveAllToTarget</i>,
-            <i>aria.moveToSource</i> and <i>aria.moveAllToSource</i> properties of the <nuxt-link to="/locale">locale</nuxt-link> API by default, alternatively you may use <i>moveTopButtonProps</i>, <i>moveUpButtonProps</i>,
+            <i>aria.moveToSource</i> and <i>aria.moveAllToSource</i> properties of the <NuxtLink to="/locale">locale</NuxtLink> API by default, alternatively you may use <i>moveTopButtonProps</i>, <i>moveUpButtonProps</i>, <i>moveDownButtonProps</i>,
-            <i>moveDownButtonProps</i>, <i>moveToButtonProps</i>, <i>moveAllToButtonProps</i>, <i>moveFromButtonProps</i>, <i>moveFromButtonProps</i> <i>moveAllFromButtonProps</i> <i>moveToTargetProps</i>, <i>moveAllToTargetProps</i>,
+            <i>moveToButtonProps</i>, <i>moveAllToButtonProps</i>, <i>moveFromButtonProps</i>, <i>moveFromButtonProps</i> <i>moveAllFromButtonProps</i> <i>moveToTargetProps</i>, <i>moveAllToTargetProps</i>, <i>moveToSourceProps</i> and
-            <i>moveToSourceProps</i> and <i>moveAllToSourceProps</i> to customize the buttons like overriding the default <i>aria-label</i> attributes.
+            <i>moveAllToSourceProps</i> to customize the buttons like overriding the default <i>aria-label</i> attributes.
         </p>
 
         <DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />

doc/picklist/ImportDoc.vue

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

doc/picklist/StyleDoc.vue

@@ -1,6 +1,6 @@
 <template>
     <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
+        <p>Following is the list of structural style classes, for theming classes visit <NuxtLink to="/theming">theming</NuxtLink> page.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">

doc/progressspinner/StyleDoc.vue

@@ -1,6 +1,6 @@
 <template>
     <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
+        <p>Following is the list of structural style classes, for theming classes visit <NuxtLink to="/theming">theming</NuxtLink> page.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">

doc/radiobutton/StyleDoc.vue

@@ -1,6 +1,6 @@
 <template>
     <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
+        <p>Following is the list of structural style classes, for theming classes visit <NuxtLink to="/theming">theming</NuxtLink> page.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">

doc/rating/AccessibilityDoc.vue

@@ -2,7 +2,7 @@
     <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
         <h3>Screen Reader</h3>
         <p>
-            Rating component internally uses radio buttons that are only visible to screen readers. The value to read for item is retrieved from the <nuxt-link to="/locale">locale</nuxt-link> API via <i>star</i> and <i>stars</i> of the
+            Rating component internally uses radio buttons that are only visible to screen readers. The value to read for item is retrieved from the <NuxtLink to="/locale">locale</NuxtLink> API via <i>star</i> and <i>stars</i> of the
             <i>aria</i> property.
         </p>
 

doc/rating/StyleDoc.vue

@@ -1,6 +1,6 @@
 <template>
     <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
+        <p>Following is the list of structural style classes, for theming classes visit <NuxtLink to="/theming">theming</NuxtLink> page.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">

doc/ripple/ConfigurationDoc.vue

@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>To start with, Ripple needs to be enabled globally. See the <nuxt-link to="/ripple">Configuration API</nuxt-link> for details.</p>
+        <p>To start with, Ripple needs to be enabled globally. See the <NuxtLink to="/configuration/#ripple">Configuration API</NuxtLink> for details.</p>
     </DocSectionText>
     <DocSectionCode :code="code" importCode hideCodeSandbox hideStackBlitz />
 </template>

doc/ripple/ImportDoc.vue

@@ -15,16 +15,14 @@ export default {
     data() {
         return {
             code1: {
-                basic: `
+                basic: `import { createApp } from 'vue';
-import { createApp } from 'vue';
 import PrimeVue from 'primevue/config';
 const app = createApp(App);
 
 app.use(PrimeVue, { ripple: true });`
             },
             code2: {
-                basic: `
+                basic: `import Ripple from 'primevue/ripple';
-import Ripple from 'primevue/ripple';
 
 app.directive('ripple', Ripple);`
             }

doc/ripple/StyleDoc.vue

@@ -1,6 +1,6 @@
 <template>
     <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
+        <p>Following is the list of structural style classes, for theming classes visit <NuxtLink to="/theming">theming</NuxtLink> page.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">

doc/scrollpanel/StyleDoc.vue

@@ -1,6 +1,6 @@
 <template>
     <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
+        <p>Following is the list of structural style classes, for theming classes visit <NuxtLink to="/theming">theming</NuxtLink> page.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">

doc/scrolltop/AccessibilityDoc.vue

@@ -2,7 +2,7 @@
     <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
         <h3>Screen Reader</h3>
         <p>
-            ScrollTop uses a button element with an <i>aria-label</i> that refers to the <i>aria.scrollTop</i> property of the <nuxt-link to="/locale">locale</nuxt-link> API by default, you may use your own aria roles and attributes as any valid
+            ScrollTop uses a button element with an <i>aria-label</i> that refers to the <i>aria.scrollTop</i> property of the <NuxtLink to="/locale">locale</NuxtLink> API by default, you may use your own aria roles and attributes as any valid
             attribute is passed to the button element implicitly.
         </p>
 

doc/scrolltop/StyleDoc.vue

@@ -1,6 +1,6 @@
 <template>
     <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
+        <p>Following is the list of structural style classes, for theming classes visit <NuxtLink to="/theming">theming</NuxtLink> page.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">

doc/sidebar/ImportDoc.vue

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

doc/skeleton/StyleDoc.vue

@@ -1,6 +1,6 @@
 <template>
     <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
+        <p>Following is the list of structural style classes, for theming classes visit <NuxtLink to="/theming">theming</NuxtLink> page.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">

doc/slider/StyleDoc.vue

@@ -1,6 +1,6 @@
 <template>
     <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
+        <p>Following is the list of structural style classes, for theming classes visit <NuxtLink to="/theming">theming</NuxtLink> page.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">

doc/speeddial/StyleDoc.vue

@@ -1,6 +1,6 @@
 <template>
     <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
+        <p>Following is the list of structural style classes, for theming classes visit <NuxtLink to="/theming">theming</NuxtLink> page.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">

doc/speeddial/TooltipDoc.vue

@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Items display a tooltip on hober when a standalone <nuxt-link to="/tooltip/">Tooltip</nuxt-link> is present with a target that matches the items.</p>
+        <p>Items display a tooltip on hober when a standalone <NuxtLink to="/tooltip">Tooltip</NuxtLink> is present with a target that matches the items.</p>
     </DocSectionText>
     <div class="card">
         <div :style="{ position: 'relative', height: '350px' }">