Merge branch 'master' into v4

api-generator/components/inputotp.js

@@ -0,0 +1,80 @@
+const InputOtpProps = [
+    {
+        name: 'modelValue',
+        type: 'boolean',
+        default: 'null',
+        description: 'Specifies whether a inputOtp should be checked or not.'
+    },
+    {
+        name: 'trueValue',
+        type: 'any',
+        default: 'null',
+        description: 'Value in checked state.'
+    },
+    {
+        name: 'falseValue',
+        type: 'any',
+        default: 'null',
+        description: 'Value in unchecked state.'
+    },
+    {
+        name: 'inputId',
+        type: 'string',
+        default: 'null',
+        description: 'Identifier of the underlying input element.'
+    },
+    {
+        name: 'inputStyle',
+        type: 'object',
+        default: 'null',
+        description: 'Inline style of the input field.'
+    },
+    {
+        name: 'inputClass',
+        type: 'string | object',
+        default: 'null',
+        description: 'Style class of the input field.'
+    },
+    {
+        name: 'inputProps',
+        type: 'object',
+        default: 'null',
+        description: 'Used to pass all properties of the HTMLInputElement to the focusable input element inside the component.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
+    }
+];
+
+const InputOtpEvents = [
+    {
+        name: 'click',
+        description: 'Callback to invoke on click.'
+    },
+    {
+        name: 'change',
+        description: 'Callback to invoke on value change.'
+    },
+    {
+        name: 'input',
+        description: 'Callback to invoke on value change.'
+    }
+];
+
+module.exports = {
+    inputotp: {
+        name: 'InputOtp',
+        description: 'InputOtp  is used to enter one time passwords.',
+        props: InputOtpProps,
+        events: InputOtpEvents
+    }
+};

assets/menu/menu.json

@@ -115,6 +115,11 @@
                             "name": "InputNumber",
                             "to": "/inputnumber"
                         },
+                        {
+                            "name": "InputOtp",
+                            "to": "/inputotp",
+                            "badge": "NEW"
+                        },
                         {
                             "name": "InputSwitch",
                             "to": "/inputswitch"

components/doc/codeeditor/services.js

@@ -9726,7 +9726,7 @@ const services = {
                         {
                             key: '7-1',
                             data: {
-                                name: 'primeng.png',
+                                name: 'primevue.png',
                                 size: '30kb',
                                 type: 'Picture'
                             }

components/doc/codeeditor/templates.js

@@ -193,10 +193,11 @@ import InlineMessage from 'primevue/inlinemessage';
 import Inplace from 'primevue/inplace';
 import InputGroup from 'primevue/inputgroup';
 import InputGroupAddon from 'primevue/inputgroupaddon';
-import InputSwitch from 'primevue/inputswitch';
-import InputText from 'primevue/inputtext';
 import InputMask from 'primevue/inputmask';
 import InputNumber from 'primevue/inputnumber';
+import InputOtp from 'primevue/inputotp';
+import InputSwitch from 'primevue/inputswitch';
+import InputText from 'primevue/inputtext';
 import Knob from 'primevue/knob';
 import Listbox from 'primevue/listbox';
 import MegaMenu from 'primevue/megamenu';
@@ -313,6 +314,7 @@ app.component('InputGroupAddon', InputGroupAddon);
 app.component('InputIcon', InputIcon);
 app.component('InputMask', InputMask);
 app.component('InputNumber', InputNumber);
+app.component('InputOtp', InputOtp);
 app.component('InputSwitch', InputSwitch);
 app.component('InputText', InputText);
 app.component('Knob', Knob);

components/lib/avatargroup/AvatarGroup.d.ts

@@ -2,7 +2,7 @@
  *
  * A set of Avatars can be displayed together using the AvatarGroup component.
  *
- * [Live Demo](https://www.primevue.org/accordion/)
+ * [Live Demo](https://www.primevue.org/avatar/)
  *
  * @module avatargroup
  *
@@ -12,7 +12,33 @@ import { ComponentHooks } from '../basecomponent';
 import { PassThroughOptions } from '../passthrough';
 import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
 
-export declare type AvatarGroupPassThroughOptionType = AvatarGroupPassThroughAttributes | null | undefined;
+export declare type AvatarGroupPassThroughOptionType = AvatarGroupPassThroughAttributes | ((options: AvatarGroupPassThroughMethodOptions) => AvatarGroupPassThroughAttributes | string) | string | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface AvatarGroupPassThroughMethodOptions {
+    /**
+     * Defines instance.
+     */
+    instance: any;
+    /**
+     * Defines valid properties.
+     */
+    props: AvatarGroupProps;
+    /**
+     * Defines valid attributes.
+     */
+    attrs: any;
+    /**
+     * Defines parent options.
+     */
+    parent: any;
+    /**
+     * Defines passthrough(pt) options in global config.
+     */
+    global: object | undefined;
+}
 
 /**
  * Custom passthrough attributes for each DOM elements
@@ -78,7 +104,7 @@ export interface AvatarGroupEmits {}
  *
  * _A set of Avatars can be displayed together using the AvatarGroup component._
  *
- * [Live Demo](https://www.primevue.org/avatargroup/)
+ * [Live Demo](https://www.primevue.org/avatar/)
  * --- ---
  * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
  *

components/lib/calendar/Calendar.vue

@@ -205,7 +205,9 @@
                                                             context: {
                                                                 date,
                                                                 today: date.today,
-                                                                otherMonth: date.otherMonth
+                                                                otherMonth: date.otherMonth,
+                                                                selected: isSelected(date),
+                                                                disabled: !date.selectable
                                                             }
                                                         })
                                                     "
@@ -225,6 +227,8 @@
                                                             ptm('dayLabel', {
                                                                 context: {
                                                                     date,
+                                                                    today: date.today,
+                                                                    otherMonth: date.otherMonth,
                                                                     selected: isSelected(date),
                                                                     disabled: !date.selectable
                                                                 }

components/lib/card/Card.d.ts

@@ -12,7 +12,29 @@ import { ComponentHooks } from '../basecomponent';
 import { PassThroughOptions } from '../passthrough';
 import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
 
-export declare type CardPassThroughOptionType = CardPassThroughAttributes | null | undefined;
+export declare type CardPassThroughOptionType = CardPassThroughAttributes | ((options: CardPassThroughMethodOptions) => CardPassThroughAttributes | string) | string | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface CardPassThroughMethodOptions {
+    /**
+     * Defines instance.
+     */
+    instance: any;
+    /**
+     * Defines valid properties.
+     */
+    props: CardProps;
+    /**
+     * Defines valid attributes.
+     */
+    attrs: any;
+    /**
+     * Defines passthrough(pt) options in global config.
+     */
+    global: object | undefined;
+}
 
 /**
  * Custom passthrough(pt) options.

components/lib/colorpicker/ColorPicker.vue

@@ -4,7 +4,7 @@
         <Portal :appendTo="appendTo" :disabled="inline">
             <transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave" v-bind="ptm('transition')">
                 <div v-if="inline ? true : overlayVisible" :ref="pickerRef" :class="[cx('panel'), panelClass]" @click="onOverlayClick" v-bind="ptm('panel')">
-                    <div :class="cx('panel')" v-bind="ptm('content')">
+                    <div :class="cx('content')" v-bind="ptm('content')">
                         <div :ref="colorSelectorRef" :class="cx('selector')" @mousedown="onColorMousedown($event)" @touchstart="onColorDragStart($event)" @touchmove="onDrag($event)" @touchend="onDragEnd()" v-bind="ptm('selector')">
                             <div :class="cx('color')" v-bind="ptm('color')">
                                 <div :ref="colorHandleRef" :class="cx('colorHandle')" v-bind="ptm('colorHandle')"></div>

components/lib/datatable/BaseDataTable.vue

@@ -211,11 +211,11 @@ export default {
             default: null
         },
         rowClass: {
-            type: null,
+            type: [String, Object],
             default: null
         },
         rowStyle: {
-            type: null,
+            type: Object,
             default: null
         },
         scrollable: {
@@ -263,11 +263,11 @@ export default {
             default: null
         },
         tableClass: {
-            type: String,
+            type: [String, Object],
             default: null
         },
         tableProps: {
-            type: null,
+            type: Object,
             default: null
         },
         filterInputProps: {

components/lib/datatable/DataTable.d.ts

@@ -1117,11 +1117,11 @@ export interface DataTableProps {
     /**
      * Inline style of the table element.
      */
-    tableStyle?: any;
+    tableStyle?: object | undefined;
     /**
      * Style class of the table element.
      */
-    tableClass?: any;
+    tableClass?: string | object | undefined;
     /**
      * Used to pass all properties of the TableHTMLAttributes to table element inside the component.
      */

components/lib/fileupload/FileUpload.vue

@@ -27,9 +27,11 @@
         </div>
         <div ref="content" :class="cx('content')" @dragenter="onDragEnter" @dragover="onDragOver" @dragleave="onDragLeave" @drop="onDrop" v-bind="ptm('content')" :data-p-highlight="false">
             <slot name="content" :files="files" :uploadedFiles="uploadedFiles" :removeUploadedFileCallback="removeUploadedFile" :removeFileCallback="remove" :progress="progress" :messages="messages">
-                <FileUploadProgressBar v-if="hasFiles" :value="progress" :showValue="false" :unstyled="unstyled" :pt="ptm('progressbar')" />
-                <FileUploadMessage v-for="msg of messages" :key="msg" severity="error" @close="onMessageClose" :unstyled="unstyled" :pt="ptm('message')">{{ msg }}</FileUploadMessage>
-                <FileContent v-if="hasFiles" :files="files" @remove="remove" :badgeValue="pendingLabel" :previewWidth="previewWidth" :templates="$slots" :unstyled="unstyled" :pt="pt" />
+                <template v-if="hasFiles">
+                    <FileUploadProgressBar :value="progress" :showValue="false" :unstyled="unstyled" :pt="ptm('progressbar')" />
+                    <FileUploadMessage v-for="msg of messages" :key="msg" severity="error" @close="onMessageClose" :unstyled="unstyled" :pt="ptm('message')">{{ msg }}</FileUploadMessage>
+                    <FileContent :files="files" @remove="remove" :badgeValue="pendingLabel" :previewWidth="previewWidth" :templates="$slots" :unstyled="unstyled" :pt="pt" />
+                </template>
                 <FileContent :files="uploadedFiles" @remove="removeUploadedFile" :badgeValue="completedLabel" badgeSeverity="success" :previewWidth="previewWidth" :templates="$slots" :unstyled="unstyled" :pt="pt" />
             </slot>
             <div v-if="$slots.empty && !hasFiles && !hasUploadedFiles" :class="cx('empty')" v-bind="ptm('empty')">

components/lib/galleria/GalleriaThumbnails.vue

@@ -15,7 +15,16 @@
                 <component :is="templates.previousthumbnailicon || (isVertical ? 'ChevronUpIcon' : 'ChevronLeftIcon')" :class="cx('previousThumbnailIcon')" v-bind="ptm('previousThumbnailIcon')" />
             </button>
             <div :class="cx('thumbnailItemsContainer')" :style="{ height: isVertical ? contentHeight : '' }" v-bind="ptm('thumbnailItemsContainer')">
-                <div ref="itemsContainer" :class="cx('thumbnailItems')" role="tablist" @transitionend="onTransitionEnd" @touchstart="onTouchStart($event)" @touchmove="onTouchMove($event)" @touchend="onTouchEnd($event)" v-bind="ptm('thumbnailItems')">
+                <div
+                    ref="itemsContainer"
+                    :class="cx('thumbnailItems')"
+                    role="tablist"
+                    @transitionend="onTransitionEnd($event)"
+                    @touchstart="onTouchStart($event)"
+                    @touchmove="onTouchMove($event)"
+                    @touchend="onTouchEnd($event)"
+                    v-bind="ptm('thumbnailItems')"
+                >
                     <div
                         v-for="(item, index) of value"
                         :key="`p-galleria-thumbnail-item-${index}`"
@@ -381,8 +390,8 @@ export default {
             indicators[nextInd].children[0].tabIndex = '0';
             indicators[nextInd].children[0].focus();
         },
-        onTransitionEnd() {
-            if (this.$refs.itemsContainer) {
+        onTransitionEnd(e) {
+            if (this.$refs.itemsContainer && e.propertyName === 'transform') {
                 document.body.setAttribute('data-p-items-hidden', 'true');
                 !this.isUnstyled && DomHandler.addClass(this.$refs.itemsContainer, 'p-items-hidden');
                 this.$refs.itemsContainer.style.transition = '';

components/lib/inputotp/BaseInputOtp.vue

@@ -0,0 +1,53 @@
+<script>
+import BaseComponent from 'primevue/basecomponent';
+import InputOtpStyle from 'primevue/inputotp/style';
+
+export default {
+    name: 'BaseInputOtp',
+    extends: BaseComponent,
+    props: {
+        modelValue: {
+            type: null,
+            default: false
+        },
+        invalid: {
+            type: Boolean,
+            default: false
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        readonly: {
+            type: Boolean,
+            default: false
+        },
+        variant: {
+            type: String,
+            default: null
+        },
+        tabindex: {
+            type: Number,
+            default: null
+        },
+        length: {
+            type: Number,
+            default: 4
+        },
+        mask: {
+            type: Boolean,
+            default: false
+        },
+        integerOnly: {
+            type: Boolean,
+            default: false
+        }
+    },
+    style: InputOtpStyle,
+    provide() {
+        return {
+            $parentInstance: this
+        };
+    }
+};
+</script>

components/lib/inputotp/InputOtp.d.ts

@@ -0,0 +1,275 @@
+/**
+ *
+ * InputOtp is used to enter one time passwords.
+ *
+ * [Live Demo](https://www.primevue.org/inputotp/)
+ *
+ * @module inputotp
+ *
+ */
+import { VNode } from 'vue';
+import { ComponentHooks } from '../basecomponent/BaseComponent';
+import { InputTextPassThroughOptions } from '../inputtext';
+import { PassThroughOptions } from '../passthrough';
+import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
+
+export declare type InputOtpPassThroughOptionType = InputOtpPassThroughAttributes | ((options: InputOtpPassThroughMethodOptions) => InputOtpPassThroughAttributes | string) | string | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface InputOtpPassThroughMethodOptions {
+    /**
+     * Defines instance.
+     */
+    instance: any;
+    /**
+     * Defines valid properties.
+     */
+    props: InputOtpProps;
+    /**
+     * Defines current inline state.
+     */
+    state: InputOtpState;
+    /**
+     * Defines valid attributes.
+     */
+    attrs: any;
+    /**
+     * Defines passthrough(pt) options in global config.
+     */
+    global: object | undefined;
+}
+
+/**
+ * Custom shared passthrough(pt) option method.
+ */
+export interface InputOtpSharedPassThroughMethodOptions {
+    /**
+     * Defines valid properties.
+     */
+    props: InputOtpProps;
+    /**
+     * Defines current inline state.
+     */
+    state: InputOtpState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link InputOtpProps.pt}
+ */
+export interface InputOtpPassThroughOptions {
+    /**
+     * Used to pass attributes to the root's DOM element.
+     */
+    root?: InputOtpPassThroughOptionType;
+    /**
+     * Used to pass attributes to the InputText component.
+     * @see {@link InputTextPassThroughOptions}
+     */
+    input?: InputTextPassThroughOptions<InputOtpSharedPassThroughMethodOptions>;
+    /**
+     * Used to manage all lifecycle hooks.
+     * @see {@link BaseComponent.ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface InputOtpPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in InputOtp component.
+ */
+export interface InputOtpState {
+    /**
+     * Array of input tokens
+     */
+    tokens: string[] | number[];
+}
+
+/**
+ * InputOtp attr options
+ */
+export interface InputOtpTemplateAttrsOptions {
+    /**
+     * Input token value
+     */
+    value: string;
+}
+
+/**
+ * InputOtp templating events
+ */
+export interface InputOtpTemplateEvents {
+    /**
+     * Input event
+     * @param {Event} event - Browser event
+     */
+    input: (event: Event) => void;
+    /**
+     * Keydown event
+     * @param {Event} event - Browser event
+     */
+    keydown: (event: Event) => void;
+    /**
+     * Focus event
+     * @param {Event} event - Browser event
+     */
+    focus: (event: Event) => void;
+    /**
+     * Blur event
+     * @param {Event} event - Browser event
+     */
+    blur: (event: Event) => void;
+    /**
+     * Paste event
+     * @param {Event} event - Browser event
+     */
+    paste: (event: Event) => void;
+}
+
+/**
+ * Defines valid properties in InputOtp component.
+ */
+export interface InputOtpProps {
+    /**
+     * Specifies whether a inputotp should be checked or not.
+     * @defaultValue false
+     */
+    modelValue?: boolean | string | undefined;
+    /**
+     * When present, it specifies that the component should have invalid state style.
+     * @defaultValue false
+     */
+    invalid?: boolean | undefined;
+    /**
+     * When present, it specifies that the component should be disabled.
+     * @defaultValue false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * When present, it specifies that an input field is read-only.
+     * @defaultValue false
+     */
+    readonly?: boolean | undefined;
+    /**
+     * Specifies the input variant of the component.
+     * @defaultValue outlined
+     */
+    variant?: 'outlined' | 'filled' | undefined;
+    /**
+     * Index of the element in tabbing order.
+     */
+    tabindex?: number | undefined;
+    /**
+     * Number of characters to initiate.
+     * @defaultValue 4
+     */
+    length?: number | undefined;
+    /**
+     * Mask pattern.
+     * @defaultValue false
+     */
+    mask?: boolean | undefined;
+    /**
+     * When present, it specifies that an input field is integer-only.
+     * @defaultValue false
+     */
+    integerOnly?: boolean | undefined;
+    /**
+     * Used to pass attributes to DOM elements inside the component.
+     * @type {InputOtpPassThroughOptions}
+     */
+    pt?: PassThrough<InputOtpPassThroughOptions>;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ *
+ */
+export interface InputOtpSlots {
+    /**
+     * Default content slot.
+     */
+    default(scope: {
+        /**
+         * Events of the component
+         * @param {number} index - Index of the input field
+         * @return {InputOtpTemplateEvents}
+         */
+        events: (index: number) => InputOtpTemplateEvents;
+        /**
+         * Attributes of the component
+         * @param {number} index - Index of the input field
+         * @return {InputOtpTemplateAttrsOptions}
+         */
+        attrs: (index: number) => InputOtpTemplateAttrsOptions;
+        /**
+         * Index of the input field
+         */
+        index: number;
+    }): VNode[];
+}
+
+/**
+ * Defines valid emits in InputOtp component.
+ */
+export interface InputOtpEmits {
+    /**
+     * Emitted when the value changes.
+     * @param {boolean} value - New value.
+     */
+    'update:modelValue'(value: boolean): void;
+    /**
+     * Callback to invoke on value change.
+     * @param {Event} event - Browser event.
+     */
+    change(event: Event): void;
+    /**
+     * Callback to invoke when the component receives focus.
+     * @param {Event} event - Browser event.
+     */
+    focus(event: Event): void;
+    /**
+     * Callback to invoke when the component loses focus.
+     * @param {Event} event - Browser event.
+     */
+    blur(event: Event): void;
+}
+
+/**
+ * **PrimeVue - InputOtp**
+ *
+ * _InputOtp  is used to enter one time passwords._
+ *
+ * [Live Demo](https://www.primevue.org/inputotp/)
+ * --- ---
+ * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
+ *
+ * @group Component
+ *
+ */
+declare class InputOtp extends ClassComponent<InputOtpProps, InputOtpSlots, InputOtpEmits> {}
+
+declare module '@vue/runtime-core' {
+    interface GlobalComponents {
+        InputOtp: GlobalComponentConstructor<InputOtp>;
+    }
+}
+
+export default InputOtp;

components/lib/inputotp/InputOtp.vue

@@ -0,0 +1,201 @@
+<template>
+    <div :class="cx('root')" v-bind="ptmi('root')">
+        <template v-for="i in length" :key="i">
+            <slot :events="getTemplateEvents(i - 1)" :attrs="getTemplateAttrs(i - 1)" :index="i">
+                <OtpInputText
+                    :value="tokens[i - 1]"
+                    :type="inputType"
+                    :class="cx('input')"
+                    :inputmode="inputMode"
+                    :variant="variant"
+                    :readonly="readonly"
+                    :disabled="disabled"
+                    :invalid="invalid"
+                    :tabindex="tabindex"
+                    :unstyled="unstyled"
+                    @input="onInput($event, i - 1)"
+                    @focus="onFocus($event)"
+                    @blur="onBlur($event)"
+                    @paste="onPaste($event)"
+                    @keydown="onKeyDown($event)"
+                    :pt="ptm('input')"
+                />
+            </slot>
+        </template>
+    </div>
+</template>
+
+<script>
+import InputText from 'primevue/inputtext';
+import BaseInputOtp from './BaseInputOtp.vue';
+
+export default {
+    name: 'InputOtp',
+    extends: BaseInputOtp,
+    inheritAttrs: false,
+    emits: ['update:modelValue', 'change', 'focus', 'blur'],
+    data() {
+        return {
+            tokens: []
+        };
+    },
+    watch: {
+        modelValue: {
+            immediate: true,
+            handler(newValue) {
+                this.tokens = newValue ? newValue.split('') : new Array(this.length);
+            }
+        }
+    },
+    methods: {
+        getTemplateAttrs(index) {
+            return {
+                value: this.tokens[index]
+            };
+        },
+        getTemplateEvents(index) {
+            return {
+                input: (event) => this.onInput(event, index),
+                keydown: (event) => this.onKeyDown(event),
+                focus: (event) => this.onFocus(event),
+                blur: (event) => this.onBlur(event),
+                paste: (event) => this.onPaste(event)
+            };
+        },
+        getPTOptions(key) {
+            const _ptm = key === 'root' ? this.ptmi : this.ptm;
+
+            return _ptm(key, {
+                context: {
+                    checked: this.checked,
+                    disabled: this.disabled
+                }
+            });
+        },
+        onInput(event, index) {
+            this.tokens[index] = event.target.value;
+            this.updateModel(event);
+
+            if (event.inputType === 'deleteContentBackward') {
+                this.moveToPrev(event);
+            } else if (event.inputType === 'insertText' || event.inputType === 'deleteContentForward') {
+                this.moveToNext(event);
+            }
+        },
+        updateModel(event) {
+            const newValue = this.tokens.join('');
+
+            this.$emit('update:modelValue', newValue);
+            this.$emit('change', {
+                originalEvent: event,
+                value: newValue
+            });
+        },
+        moveToPrev(event) {
+            let prevInput = this.findPrevInput(event.target);
+
+            if (prevInput) {
+                prevInput.focus();
+                prevInput.select();
+            }
+        },
+        moveToNext(event) {
+            let nextInput = this.findNextInput(event.target);
+
+            if (nextInput) {
+                nextInput.focus();
+                nextInput.select();
+            }
+        },
+        findNextInput(element) {
+            let nextElement = element.nextElementSibling;
+
+            if (!nextElement) return;
+
+            return nextElement.nodeName === 'INPUT' ? nextElement : this.findNextInput(nextElement);
+        },
+        findPrevInput(element) {
+            let prevElement = element.previousElementSibling;
+
+            if (!prevElement) return;
+
+            return prevElement.nodeName === 'INPUT' ? prevElement : this.findPrevInput(prevElement);
+        },
+        onFocus(event) {
+            event.target.select();
+            this.$emit('focus', event);
+        },
+        onBlur(event) {
+            this.$emit('blur', event);
+        },
+        onKeyDown(event) {
+            const keyCode = event.keyCode;
+
+            switch (keyCode) {
+                case 37:
+                    this.moveToPrev(event);
+                    event.preventDefault();
+
+                    break;
+
+                case 38:
+                case 40:
+                    event.preventDefault();
+
+                    break;
+
+                case 8:
+                    if (event.target.value.length === 0) {
+                        this.moveToPrev(event);
+                        event.preventDefault();
+                    }
+
+                    break;
+
+                case 40:
+                    event.preventDefault();
+
+                    break;
+
+                case 39:
+                    this.moveToNext(event);
+                    event.preventDefault();
+
+                    break;
+
+                default:
+                    if (this.integerOnly && !(event.keyCode >= 48 && event.keyCode <= 57)) {
+                        event.preventDefault();
+                    }
+
+                    break;
+            }
+        },
+        onPaste(event) {
+            let paste = event.clipboardData.getData('text');
+
+            if (paste.length) {
+                let pastedCode = paste.substring(0, this.length + 1);
+
+                if (!this.isIntegerOnly || !isNaN(pastedCode)) {
+                    this.tokens = pastedCode.split('');
+                    this.updateModel(event);
+                }
+            }
+
+            event.preventDefault();
+        }
+    },
+    computed: {
+        inputMode() {
+            return this.integerOnly ? 'number' : 'text';
+        },
+        inputType() {
+            return this.mask ? 'password' : 'text';
+        }
+    },
+    components: {
+        OtpInputText: InputText
+    }
+};
+</script>

components/lib/inputotp/package.json

@@ -0,0 +1,9 @@
+{
+    "main": "./inputotp.cjs.js",
+    "module": "./inputotp.esm.js",
+    "unpkg": "./inputotp.min.js",
+    "types": "./inputotp.d.ts",
+    "browser": {
+        "./sfc": "./inputotp.vue"
+    }
+}

components/lib/inputotp/style/InputOtpStyle.d.ts

@@ -0,0 +1,3 @@
+import { BaseStyle } from '../../base/style/BaseStyle';
+
+export interface InputOtpStyle extends BaseStyle {}

components/lib/inputotp/style/InputOtpStyle.js

@@ -0,0 +1,11 @@
+import BaseStyle from 'primevue/base/style';
+
+const classes = {
+    root: 'p-inputotp p-component',
+    input: 'p-inputotp-input'
+};
+
+export default BaseStyle.extend({
+    name: 'inputotp',
+    classes
+});

components/lib/inputotp/style/package.json

@@ -0,0 +1,6 @@
+{
+    "main": "./inputotpstyle.cjs.js",
+    "module": "./inputotpstyle.esm.js",
+    "unpkg": "./inputotpstyle.min.js",
+    "types": "./inputotpstyle.d.ts"
+}

components/lib/inputswitch/InputSwitch.d.ts

@@ -25,10 +25,6 @@ export interface InputSwitchPassThroughMethodOptions {
      * Defines valid properties.
      */
     props: InputSwitchProps;
-    /**
-     * Defines current inline state.
-     */
-    state: InputSwitchState;
     /**
      * Defines current options.
      */
@@ -78,13 +74,6 @@ export interface InputSwitchPassThroughAttributes {
     [key: string]: any;
 }
 
-/**
- * Defines current inline state in InputSwitch component.
- */
-export interface InputSwitchState {
-    [key: string]: any;
-}
-
 /**
  * Defines valid properties in InputSwitch component.
  */

components/lib/listbox/Listbox.vue

@@ -500,8 +500,6 @@ export default {
                 if (this.multiple && event.shiftKey) this.onOptionSelectRange(event, this.focusedOptionIndex);
                 else this.onOptionSelect(event, this.visibleOptions[this.focusedOptionIndex]);
             }
-
-            event.preventDefault();
         },
         onSpaceKey(event) {
             this.onEnterKey(event);

components/lib/metergroup/MeterGroup.vue

@@ -7,7 +7,7 @@
         <div :class="cx('metercontainer')" v-bind="ptm('metercontainer')">
             <template v-for="(val, index) in value" :key="index">
                 <slot name="meter" :value="val" :index="index" :class="cx('meter')" :orientation="orientation" :size="percentValue(val.value)" :totalPercent="totalPercent">
-                    <span :class="cx('meter')" :style="meterSize(val)" v-bind="getPTOptions('meter', val, index)" />
+                    <span v-if="percent(val.value)" :class="cx('meter')" :style="meterSize(val)" v-bind="getPTOptions('meter', val, index)" />
                 </slot>
             </template>
         </div>

components/lib/splitter/Splitter.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="cx('root')" :style="sx('root')" :data-p-resizing="false" v-bind="ptmi('root', getPTOptions())">
+    <div :class="cx('root')" :style="sx('root')" :data-p-resizing="false" v-bind="ptmi('root', getPTOptions)">
         <template v-for="(panel, i) of panels" :key="i">
             <component :is="panel" tabindex="-1"></component>
             <div
@@ -80,13 +80,6 @@ export default {
         this.unbindMouseListeners();
     },
     methods: {
-        getPTOptions() {
-            return {
-                context: {
-                    nested: DomHandler.getAttribute(this.$parentInstance?.$el, 'data-pc-name') === 'splitterpanel'
-                }
-            };
-        },
         isSplitterPanel(child) {
             return child.type.name === 'SplitterPanel';
         },
@@ -379,6 +372,13 @@ export default {
         },
         horizontal() {
             return this.layout === 'horizontal';
+        },
+        getPTOptions() {
+            return {
+                context: {
+                    nested: this.$parentInstance?.nestedState
+                }
+            };
         }
     }
 };

components/lib/splitterpanel/SplitterPanel.vue

@@ -11,10 +11,17 @@ export default {
     name: 'SplitterPanel',
     extends: BaseSplitterPanel,
     inheritAttrs: false,
+    data() {
+        return {
+            nestedState: null
+        };
+    },
     computed: {
         isNested() {
             return this.$slots.default().some((child) => {
-                return child.type.name === 'Splitter';
+                this.nestedState = child.type.name === 'Splitter' ? true : null;
+
+                return this.nestedState;
             });
         },
         getPTOptions() {

components/lib/stepper/Stepper.d.ts

@@ -7,6 +7,7 @@
  * @module stepper
  *
  */
+import { VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
 import { PassThroughOptions } from '../passthrough';
 import { StepperPanelPassThroughOptionType } from '../stepperpanel';
@@ -53,10 +54,6 @@ export interface StepperPassThroughOptions {
      * Used to pass attributes to the root's DOM element.
      */
     root?: StepperPassThroughOptionType;
-    /**
-     * Used to pass attributes to the nav container's DOM element.
-     */
-    navContainer?: StepperPassThroughOptionType;
     /**
      * Used to pass attributes to the nav's DOM element.
      */
@@ -151,7 +148,16 @@ export interface StepperProps {
 /**
  * Defines valid slots in Stepper component.
  */
-export interface StepperSlots {}
+export interface StepperSlots {
+    /**
+     * Custom start template.
+     */
+    start(): VNode[];
+    /**
+     * Custom end template.
+     */
+    end(): VNode[];
+}
 
 /**
  * Defines valid emits in Stepper component.

components/lib/stepper/Stepper.vue

@@ -3,52 +3,50 @@
         <slot v-if="$slots.start" name="start" />
 
         <template v-if="orientation === 'horizontal'">
-            <div :class="cx('navContainer')" v-bind="ptm('navContainer')">
-                <ul ref="nav" :class="cx('nav')" v-bind="ptm('nav')">
-                    <li
-                        v-for="(step, index) of stepperpanels"
-                        :key="getStepKey(step, index)"
-                        :class="cx('stepper.header', { step, index })"
-                        :aria-current="isStepActive(index) ? 'step' : undefined"
-                        role="presentation"
-                        v-bind="{ ...getStepPT(step, 'root', index), ...getStepPT(step, 'header', index) }"
-                        data-pc-name="stepperpanel"
-                        :data-p-highlight="isStepActive(index)"
-                        :data-p-disabled="isItemDisabled(index)"
-                        :data-pc-index="index"
-                        :data-p-active="isStepActive(index)"
-                    >
-                        <slot name="header">
-                            <StepperHeader
-                                :id="getStepHeaderActionId(index)"
-                                :template="step.children?.header"
-                                :stepperpanel="step"
-                                :index="index"
-                                :disabled="isItemDisabled(index)"
-                                :active="isStepActive(index)"
-                                :highlighted="index < d_activeStep"
-                                :class="cx('stepper.action')"
-                                :aria-controls="getStepContentId(index)"
-                                :clickCallback="(event) => onItemClick(event, index)"
-                                :getStepPT="getStepPT"
-                                :getStepProp="getStepProp"
-                            />
-                        </slot>
-                        <slot v-if="index !== stepperpanels.length - 1" name="separator">
-                            <StepperSeparator
-                                v-if="index !== stepperpanels.length - 1"
-                                :template="step.children?.separator"
-                                :separatorClass="cx('stepper.separator')"
-                                :stepperpanel="step"
-                                :index="index"
-                                :active="isStepActive(index)"
-                                :highlighted="index < d_activeStep"
-                                :getStepPT="getStepPT(step, 'separator', index)"
-                            />
-                        </slot>
-                    </li>
-                </ul>
-            </div>
+            <ul ref="nav" :class="cx('nav')" v-bind="ptm('nav')">
+                <li
+                    v-for="(step, index) of stepperpanels"
+                    :key="getStepKey(step, index)"
+                    :class="cx('stepper.header', { step, index })"
+                    :aria-current="isStepActive(index) ? 'step' : undefined"
+                    role="presentation"
+                    v-bind="{ ...getStepPT(step, 'root', index), ...getStepPT(step, 'header', index) }"
+                    data-pc-name="stepperpanel"
+                    :data-p-highlight="isStepActive(index)"
+                    :data-p-disabled="isItemDisabled(index)"
+                    :data-pc-index="index"
+                    :data-p-active="isStepActive(index)"
+                >
+                    <slot name="header">
+                        <StepperHeader
+                            :id="getStepHeaderActionId(index)"
+                            :template="step.children?.header"
+                            :stepperpanel="step"
+                            :index="index"
+                            :disabled="isItemDisabled(index)"
+                            :active="isStepActive(index)"
+                            :highlighted="index < d_activeStep"
+                            :class="cx('stepper.action')"
+                            :aria-controls="getStepContentId(index)"
+                            :clickCallback="(event) => onItemClick(event, index)"
+                            :getStepPT="getStepPT"
+                            :getStepProp="getStepProp"
+                        />
+                    </slot>
+                    <slot v-if="index !== stepperpanels.length - 1" name="separator">
+                        <StepperSeparator
+                            v-if="index !== stepperpanels.length - 1"
+                            :template="step.children?.separator"
+                            :separatorClass="cx('stepper.separator')"
+                            :stepperpanel="step"
+                            :index="index"
+                            :active="isStepActive(index)"
+                            :highlighted="index < d_activeStep"
+                            :getStepPT="getStepPT(step, 'separator', index)"
+                        />
+                    </slot>
+                </li>
+            </ul>
             <div :class="cx('panelContainer')" v-bind="ptm('panelContainer')">
                 <template v-for="(step, index) of stepperpanels" :key="getStepKey(step, index)">
                     <StepperContent
@@ -100,23 +98,23 @@
                         />
                     </slot>
                 </div>
-                <div :class="cx('stepper.toggleableContent')" v-bind="getStepPT(step, 'toggleableContent', index)">
-                    <slot v-if="index !== stepperpanels.length - 1" name="separator">
-                        <StepperSeparator
-                            v-if="index !== stepperpanels.length - 1"
-                            :template="step.children?.separator"
-                            :separatorClass="cx('stepper.separator')"
-                            :stepperpanel="step"
-                            :index="index"
-                            :active="isStepActive(index)"
-                            :highlighted="index < d_activeStep"
-                            :getStepPT="getStepPT(step, 'separator', index)"
-                        />
-                    </slot>
-                    <transition name="p-toggleable-content" v-bind="getStepPT(step, 'transition', index)">
+
+                <transition name="p-toggleable-content" v-bind="getStepPT(step, 'transition', index)">
+                    <div v-show="isStepActive(index)" :class="cx('stepper.toggleableContent')" v-bind="getStepPT(step, 'toggleableContent', index)">
+                        <slot v-if="index !== stepperpanels.length - 1" name="separator">
+                            <StepperSeparator
+                                v-if="index !== stepperpanels.length - 1"
+                                :template="step.children?.separator"
+                                :separatorClass="cx('stepper.separator')"
+                                :stepperpanel="step"
+                                :index="index"
+                                :active="isStepActive(index)"
+                                :highlighted="index < d_activeStep"
+                                :getStepPT="getStepPT(step, 'separator', index)"
+                            />
+                        </slot>
                         <slot name="content">
                             <StepperContent
-                                v-show="isStepActive(index)"
                                 :id="getStepContentId(index)"
                                 :template="step?.children?.content"
                                 :stepperpanel="step"
@@ -130,8 +128,8 @@
                                 :aria-labelledby="getStepHeaderActionId(index)"
                             />
                         </slot>
-                    </transition>
-                </div>
+                    </div>
+                </transition>
             </div>
         </template>
         <slot v-if="$slots.end" name="end" />
@@ -149,7 +147,7 @@ import StepperSeparator from './StepperSeparator.vue';
 export default {
     name: 'Stepper',
     extends: BaseStepper,
-    nheritAttrs: false,
+    inheritAttrs: false,
     emits: ['update:activeStep', 'step-change'],
     data() {
         return {
@@ -234,12 +232,12 @@ export default {
         },
         prevCallback(event, index) {
             if (index !== 0) {
-                this.onItemClick(event, index - 1);
+                this.updateActiveStep(event, index - 1);
             }
         },
         nextCallback(event, index) {
             if (index !== this.stepperpanels.length - 1) {
-                this.onItemClick(event, index + 1);
+                this.updateActiveStep(event, index + 1);
             }
         }
     },

components/lib/stepper/StepperHeader.vue

@@ -1,5 +1,16 @@
 <template>
-    <component v-if="template" :is="template" :index="index" :active="active" :highlighted="highlighted" :class="cx('stepper.action')" :clickCallback="(event) => clickCallback(event, index)" />
+    <component
+        v-if="template"
+        :is="template"
+        :index="index"
+        :active="active"
+        :highlighted="highlighted"
+        :class="cx('stepper.action')"
+        :headerClass="cx('stepper.action')"
+        :numberClass="cx('stepper.number')"
+        :titleClass="cx('stepper.title')"
+        :clickCallback="(event) => clickCallback(event, index)"
+    />
     <button v-else :id="id" :class="cx('stepper.action')" role="tab" :tabindex="disabled ? -1 : undefined" :aria-controls="ariaControls" @click="clickCallback($event, index)" v-bind="getStepPT(stepperpanel, 'action', index)">
         <span :class="cx('stepper.number')" v-bind="getStepPT(stepperpanel, 'number', index)">{{ index + 1 }}</span>
         <span :class="cx('stepper.title')" v-bind="getStepPT(stepperpanel, 'title', index)">{{ getStepProp(stepperpanel, 'header') }}</span>

components/lib/stepper/style/StepperStyle.js

@@ -9,14 +9,13 @@ const classes = {
             'p-readonly': props.linear
         }
     ],
-    navContainer: 'p-stepper-nav-container',
     nav: 'p-stepper-nav',
     stepper: {
         header: ({ instance, step, index }) => [
             'p-stepper-header',
             {
                 'p-highlight': instance.isStepActive(index),
-                'p-disabled': instance.isItemDisabled(step, index)
+                'p-disabled': instance.isItemDisabled(index)
             }
         ],
         action: 'p-stepper-action',

components/lib/stepperpanel/StepperPanel.d.ts

@@ -184,6 +184,18 @@ export interface StepperPanelSlots {
          * Style class of the stepperpanel
          */
         class: string;
+        /**
+         * Style class of the stepperpanel
+         */
+        headerClass: string;
+        /**
+         * Style class of the number content container
+         */
+        numberClass: string;
+        /**
+         * Style class of the title content container
+         */
+        titleClass: string;
         /**
          * Header click function.
          * @param {Event} event - Browser event

doc/accordion/pt/PTDoc.vue

@@ -1,127 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <div class="card">
-        <Accordion :activeIndex="0">
-            <AccordionTab
-                v-for="(tab, index) in tabs"
-                :key="tab.title"
-                :header="tab.title"
-                :pt="{
-                    headerAction: ({ props, parent }) => ({
-                        class: panelClass(props, parent, index)
-                    })
-                }"
-            >
-                <p>{{ tab.content }}</p>
-            </AccordionTab>
-        </Accordion>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            tabs: Array.from({ length: 3 }, (_, i) => ({
-                title: `Header ${i + 1}`,
-                content: `Tab ${i + 1} Content`
-            })),
-            code: {
-                basic: `
-<Accordion :activeIndex="0">
-    <AccordionTab v-for="(tab, index) in tabs" :key="tab.title" :header="tab.title"
-        :pt="{
-            headerAction: ({ props, parent }) => ({
-                class: panelClass(props, parent, index)
-            })
-        }">
-        <p>{{ tab.content }}</p>
-    </AccordionTab>
-</Accordion>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Accordion :activeIndex="0">
-            <AccordionTab v-for="(tab, index) in tabs" :key="tab.title" :header="tab.title"
-                :pt="{
-                    headerAction: ({ props, parent }) => ({
-                        class: panelClass(props, parent, index)
-                    })
-                }">
-                <p>{{ tab.content }}</p>
-            </AccordionTab>
-        </Accordion>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            tabs: Array.from({ length: 3 }, (_, i) => ({
-                title: \`Header \${i + 1}\`,
-                content: \`Tab \${i + 1} Content\`
-            }))
-        }
-    },
-    methods: {
-        panelClass(props, parent, index) {
-            return [
-                {
-                    'bg-primary': parent.state.d_activeIndex === index
-                }
-            ];
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Accordion :activeIndex="0">
-            <AccordionTab v-for="(tab, index) in tabs" :key="tab.title" :header="tab.title"
-                :pt="{
-                    headerAction: ({ props, parent }) => ({
-                        class: panelClass(props, parent, index)
-                    })
-                }">
-                <p>{{ tab.content }}</p>
-            </AccordionTab>
-        </Accordion>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const tabs = ref(Array.from({ length: 3 }, (_, i) => ({
-    title: \`Header \${i + 1}\`,
-    content: \`Tab \${i + 1} Content\`
-})));
-
-const panelClass = (props, parent, index) => {
-    return [
-        {
-            'bg-primary': parent.state.d_activeIndex === index
-        }
-    ];
-};
-<\/script>
-`
-            }
-        };
-    },
-    methods: {
-        panelClass(props, parent, index) {
-            return [
-                {
-                    'bg-primary': parent.state.d_activeIndex === index
-                }
-            ];
-        }
-    }
-};
-</script>

doc/accordion/pt/index.vue

@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -34,11 +33,6 @@ export default {
                     label: 'AccordionTab PT Options',
                     component: DocApiTable,
                     data: getPTOption('AccordionTab')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };

doc/autocomplete/pt/PTDoc.vue

@@ -1,109 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <div class="card flex justify-content-center">
-        <AutoComplete
-            v-model="value"
-            :suggestions="items"
-            @complete="search"
-            :pt="{
-                input: { class: 'w-16rem' },
-                item: ({ props, state, context }) => ({
-                    class: context.selected ? 'bg-blue-300' : context.focused ? 'bg-blue-100' : undefined
-                })
-            }"
-        />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: '',
-            items: [],
-            code: {
-                basic: `
-<AutoComplete
-    v-model="value"
-    :suggestions="items"
-    @complete="search"
-    :pt="{
-        input: { class: 'w-16rem' },
-        item: ({ props, state, context }) => ({
-            class: context.selected ? 'bg-blue-300' : context.focused ? 'bg-blue-100' : undefined
-        })
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-center">
-        <AutoComplete
-            v-model="value"
-            :suggestions="items"
-            @complete="search"
-            :pt="{
-                input: { class: 'w-16rem' },
-                item: ({ props, state, context }) => ({
-                    class: context.selected ? 'bg-blue-300' : context.focused ? 'bg-blue-100' : undefined
-                })
-            }"
-        />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: '',
-            items: []
-        };
-    },
-    methods: {
-        search(event) {
-            this.items = [...Array(10).keys()].map((item) => event.query + '-' + item);
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-content-center">
-        <AutoComplete
-            v-model="value"
-            :suggestions="items"
-            @complete="search"
-            :pt="{
-                input: { class: 'w-16rem' },
-                item: ({ props, state, context }) => ({
-                    class: context.selected ? 'bg-blue-300' : context.focused ? 'bg-blue-100' : undefined
-                })
-            }"
-        />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const value = ref("");
-const items = ref([]);
-
-const search = (event) => {
-    items.value = [...Array(10).keys()].map((item) => event.query + '-' + item);
-}
-<\/script>
-`
-            }
-        };
-    },
-    methods: {
-        search(event) {
-            this.items = [...Array(10).keys()].map((item) => event.query + '-' + item);
-        }
-    }
-};
-</script>

doc/autocomplete/pt/index.vue

@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'AutoComplete PT Options',
                     component: DocApiTable,
                     data: getPTOption('AutoComplete')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };

doc/avatar/pt/PTDoc.vue

@@ -1,43 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <div class="card flex justify-content-center">
-        <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" :pt="{ image: { class: 'w-4rem h-4rem' } }" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png"
-    :pt="{
-        image: { class: 'w-4rem h-4rem' }
-    }"
-/>
-`,
-                options: `
-<template>
-    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png"
-        :pt="{
-            image: { class: 'w-4rem h-4rem' }
-        }"
-    />
-</template>
-`,
-                composition: `
-<template>
-    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png"
-        :pt="{
-            image: { class: 'w-4rem h-4rem' }
-        }"
-    />
-</template>
-`
-            }
-        };
-    }
-};
-</script>

doc/avatar/pt/index.vue

@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -34,11 +33,6 @@ export default {
                     label: 'AvatarGroup PT Options',
                     component: DocApiTable,
                     data: getPTOption('AvatarGroup')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };

doc/badge/pt/PTDoc.vue

@@ -1,100 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <div class="card flex justify-content-center align-items-center gap-2">
-        <Badge
-            value="2"
-            :pt="{
-                root: 'bg-primary border-round-xl'
-            }"
-        />
-        <i
-            v-badge.danger="{
-                value: '5+',
-                pt: {
-                    root: 'bg-primary'
-                }
-            }"
-            class="pi pi-calendar text-4xl"
-        />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-// component
-<Badge
-    value="2"
-    :pt="{
-        root: 'bg-primary border-round-xl'
-    }"
-/>
-
-// directive
-<i
-    v-badge.danger="{
-        value: '5+',
-        pt: {
-            root: 'bg-primary'
-        }
-    }"
-    class="pi pi-calendar text-4xl"
-/>
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-center align-items-center gap-2">
-        // component
-        <Badge
-            value="2"
-            :pt="{
-                root: 'bg-primary border-round-xl'
-            }"
-        />
-
-        // directive
-        <i
-            v-badge.danger="{
-                value: '5+',
-                pt: {
-                    root: 'bg-primary'
-                }
-            }"
-            class="pi pi-calendar text-4xl"
-        />
-    </div>
-</template>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-content-center align-items-center gap-2">
-        // component
-        <Badge
-            value="2"
-            :pt="{
-                root: 'bg-primary border-round-xl'
-            }"
-        />
-
-        // directive
-        <i
-            v-badge.danger="{
-                value: '5+',
-                pt: {
-                    root: 'bg-primary'
-                }
-            }"
-            class="pi pi-calendar text-4xl"
-        />
-    </div>
-</template>
-`
-            }
-        };
-    }
-};
-</script>

doc/badge/pt/index.vue

@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Badge PT Options',
                     component: DocApiTable,
                     data: getPTOption('Badge')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };

doc/blockui/pt/PTDoc.vue

@@ -1,56 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <div class="card">
-        <div class="mb-3">
-            <Button label="Block" @click="blocked = true" class="mr-2"></Button>
-            <Button label="Unblock" @click="blocked = false"></Button>
-        </div>
-        <BlockUI :blocked="blocked" :pt="{ root: { class: 'surface-ground p-2 border-round-sm' } }">
-            <p class="m-0">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-            </p>
-        </BlockUI>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            blocked: false,
-            code: {
-                basic: `
-<BlockUI :blocked="blocked" :pt="{ root: { class: 'surface-ground p-2 border-round-sm' } }">
-    <p class="m-0">
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-    </p>
-</BlockUI>
-`,
-                options: `
-<template>
-    <BlockUI :blocked="blocked" :pt="{ root: { class: 'surface-ground p-2 border-round-sm' } }">
-        <p class="m-0">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-        </p>
-    </BlockUI>
-</template>
-`,
-                composition: `
-<template>
-    <BlockUI :blocked="blocked" :pt="{ root: { class: 'surface-ground p-2 border-round-sm' } }">
-        <p class="m-0">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-            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>
-`
-            }
-        };
-    }
-};
-</script>

doc/blockui/pt/index.vue

@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'BlockUI PT Options',
                     component: DocApiTable,
                     data: getPTOption('BlockUI')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };

doc/breadcrumb/pt/PTDoc.vue

@@ -1,107 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <div class="card flex justify-content-center">
-        <Breadcrumb
-            :home="home"
-            :model="items"
-            :pt="{
-                root: { class: 'surface-ground' },
-                label: ({ props }) => ({
-                    class: props.index === items.length - 1 ? 'font-italic' : undefined
-                })
-            }"
-        />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            home: {
-                icon: 'pi pi-home',
-                to: '/'
-            },
-            items: [{ label: 'Computer' }, { label: 'Notebook' }, { label: 'Accessories' }, { label: 'Backpacks' }, { label: 'Item' }],
-            code: {
-                basic: `
-<Breadcrumb :home="home" :model="items"
-    :pt="{
-        root: { class: 'surface-ground' },
-        label: ({ props }) => ({
-            class: props.index === items.length - 1 ? 'font-italic' : undefined
-        })
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-center">
-        <Breadcrumb :home="home" :model="items"
-            :pt="{
-                root: { class: 'surface-ground' },
-                label: ({ props }) => ({
-                    class: props.index === items.length - 1 ? 'font-italic' : undefined
-                })
-            }"
-        />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            home: {
-                icon: 'pi pi-home',
-                to: '/',
-            },
-            items: [
-                {label: 'Computer'},
-                {label: 'Notebook'},
-                {label: 'Accessories'},
-                {label: 'Backpacks'},
-                {label: 'Item'}
-            ]
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-content-center">
-        <Breadcrumb :home="home" :model="items"
-            :pt="{
-                root: { class: 'surface-ground' },
-                label: ({ props }) => ({
-                    class: props.index === items.length - 1 ? 'font-italic' : undefined
-                })
-            }"
-        />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const home = ref({
-    icon: 'pi pi-home',
-    to: '/',
-});
-
-const items = ref([
-    {label: 'Computer'},
-    {label: 'Notebook'},
-    {label: 'Accessories'},
-    {label: 'Backpacks'},
-    {label: 'Item'}
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>

doc/breadcrumb/pt/index.vue

@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Breadcrumb PT Options',
                     component: DocApiTable,
                     data: getPTOption('Breadcrumb')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };

doc/button/pt/PTDoc.vue

@@ -1,47 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <div class="card flex flex-wrap gap-3 justify-content-center">
-        <Button label="Submit" icon="pi pi-check" :pt="{ root: { class: 'bg-indigo-600 border-indigo-600' } }" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Button label="Submit" icon="pi pi-check"
-    :pt="{ 
-        root: { class: 'bg-indigo-600 border-indigo-600' } 
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card flex flex-wrap gap-3 justify-content-center">
-        <Button label="Submit" icon="pi pi-check"
-            :pt="{ 
-                root: { class: 'bg-indigo-600 border-indigo-600' } 
-            }"
-        />
-    </div>
-</template>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-wrap gap-3 justify-content-center">
-        <Button label="Submit" icon="pi pi-check"
-            :pt="{ 
-                root: { class: 'bg-indigo-600 border-indigo-600' } 
-            }"
-        />
-    </div>
-</template>
-`
-            }
-        };
-    }
-};
-</script>

doc/button/pt/index.vue

@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Button PT Options',
                     component: DocApiTable,
                     data: getPTOption('Button')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };

doc/calendar/pt/PTDoc.vue

@@ -1,88 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <div class="card flex justify-content-center">
-        <Calendar
-            v-model="date"
-            showIcon
-            :pt="{
-                input: { class: 'w-16rem' },
-                dropdownButton: {
-                    root: { class: 'bg-teal-500 border-teal-500' }
-                }
-            }"
-        />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            date: null,
-            code: {
-                basic: `
-<Calendar
-    v-model="date"
-    showIcon
-    :pt="{
-        input: { class: 'w-16rem' },
-        dropdownButton: {
-            root: { class: 'bg-teal-500 border-teal-500' }
-        }
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-center">
-        <Calendar
-            v-model="date"
-            showIcon
-            :pt="{
-                input: { class: 'w-16rem' },
-                dropdownButton: {
-                    root: { class: 'bg-teal-500 border-teal-500' }
-                }
-            }"
-        />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            date: null
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-content-center">
-        <Calendar
-            v-model="date"
-            showIcon
-            :pt="{
-                input: { class: 'w-16rem' },
-                dropdownButton: {
-                    root: { class: 'bg-teal-500 border-teal-500' }
-                }
-            }"
-        />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const date = ref();
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>

doc/calendar/pt/index.vue

@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Calendar PT Options',
                     component: DocApiTable,
                     data: getPTOption('Calendar')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };

doc/card/pt/PTDoc.vue

@@ -1,67 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <div class="card">
-        <Card :pt="{ body: { class: 'bg-primary border-round-lg' } }">
-            <template #title> Simple Card </template>
-            <template #content>
-                <p>
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
-                    quas!
-                </p>
-            </template>
-        </Card>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Card :pt="{ body: { class: 'bg-primary border-round-lg' } }">
-    <template #title> Simple Card </template>
-    <template #content>
-        <p>
-            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
-            quas!
-        </p>
-    </template>
-</Card>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Card :pt="{ body: { class: 'bg-primary border-round-lg' } }">
-            <template #title> Simple Card </template>
-            <template #content>
-                <p>
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
-                    quas!
-                </p>
-            </template>
-        </Card>
-    </div>
-</template>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Card :pt="{ body: { class: 'bg-primary border-round-lg' } }">
-            <template #title> Simple Card </template>
-            <template #content>
-                <p>
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
-                    quas!
-                </p>
-            </template>
-        </Card>
-    </div>
-</template>
-`
-            }
-        };
-    }
-};
-</script>

doc/card/pt/index.vue

@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Card PT Options',
                     component: DocApiTable,
                     data: getPTOption('Card')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };

doc/carousel/pt/PTDoc.vue

@@ -1,299 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <div class="card">
-        <Carousel
-            :value="products"
-            :numVisible="3"
-            :numScroll="3"
-            :responsiveOptions="responsiveOptions"
-            :pt="{
-                indicatorButton: { class: 'border-round-lg' }
-            }"
-        >
-            <template #item="slotProps">
-                <div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
-                    <div class="mb-3">
-                        <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-6" />
-                    </div>
-                    <div>
-                        <h4 class="mb-1">{{ slotProps.data.name }}</h4>
-                        <h6 class="mt-0 mb-3">${{ slotProps.data.price }}</h6>
-                        <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
-                        <div class="mt-5 flex align-items-center justify-content-center gap-2">
-                            <Button icon="pi pi-search" rounded />
-                            <Button icon="pi pi-star-fill" rounded severity="secondary" />
-                        </div>
-                    </div>
-                </div>
-            </template>
-        </Carousel>
-    </div>
-    <DocSectionCode :code="code" :service="['ProductService']" />
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null,
-            responsiveOptions: [
-                {
-                    breakpoint: '1400px',
-                    numVisible: 2,
-                    numScroll: 1
-                },
-                {
-                    breakpoint: '1199px',
-                    numVisible: 3,
-                    numScroll: 1
-                },
-                {
-                    breakpoint: '767px',
-                    numVisible: 2,
-                    numScroll: 1
-                },
-                {
-                    breakpoint: '575px',
-                    numVisible: 1,
-                    numScroll: 1
-                }
-            ],
-            code: {
-                basic: `
-<Carousel
-    :value="products"
-    :numVisible="3"
-    :numScroll="3"
-    :responsiveOptions="responsiveOptions"
-    :pt="{
-        indicatorButton: { class: 'border-round-lg' }
-    }"
->
-    <template #item="slotProps">
-        <div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
-            <div class="mb-3">
-                <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-6" />
-            </div>
-            <div>
-                <h4 class="mb-1">{{ slotProps.data.name }}</h4>
-                <h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
-                <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
-                <div class="mt-5 flex align-items-center justify-content-center gap-2">
-                    <Button icon="pi pi-search" rounded />
-                    <Button icon="pi pi-star-fill" rounded severity="secondary" />
-                </div>
-            </div>
-        </div>
-    </template>
-</Carousel>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Carousel
-            :value="products"
-            :numVisible="3"
-            :numScroll="3"
-            :responsiveOptions="responsiveOptions"
-            :pt="{
-                indicatorButton: { class: 'border-round-lg' }
-            }"
-        >
-            <template #item="slotProps">
-                <div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
-                    <div class="mb-3">
-                        <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-6" />
-                    </div>
-                    <div>
-                        <h4 class="mb-1">{{ slotProps.data.name }}</h4>
-                        <h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
-                        <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
-                        <div class="mt-5 flex align-items-center justify-content-center gap-2">
-                            <Button icon="pi pi-search" rounded />
-                            <Button icon="pi pi-star-fill" rounded severity="secondary" />
-                        </div>
-                    </div>
-                </div>
-            </template>
-        </Carousel>
-    </div>
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null,
-            responsiveOptions: [
-                {
-                    breakpoint: '1400px',
-                    numVisible: 2,
-                    numScroll: 1
-                },
-                {
-                    breakpoint: '1199px',
-                    numVisible: 3,
-                    numScroll: 1
-                },
-                {
-                    breakpoint: '767px',
-                    numVisible: 2,
-                    numScroll: 1
-                },
-                {
-                    breakpoint: '575px',
-                    numVisible: 1,
-                    numScroll: 1
-                }
-            ]
-        };
-    },
-    mounted() {
-        ProductService.getProductsSmall().then((data) => (this.products = data.slice(0, 9)));
-    },
-    methods: {
-        getSeverity(status) {
-            switch (status) {
-                case 'INSTOCK':
-                    return 'success';
-
-                case 'LOWSTOCK':
-                    return 'warning';
-
-                case 'OUTOFSTOCK':
-                    return 'danger';
-
-                default:
-                    return null;
-            }
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Carousel
-            :value="products"
-            :numVisible="3"
-            :numScroll="3"
-            :responsiveOptions="responsiveOptions"
-            :pt="{
-                indicatorButton: { class: 'border-round-lg' }
-            }"
-        >
-            <template #item="slotProps">
-                <div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
-                    <div class="mb-3">
-                        <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-6" />
-                    </div>
-                    <div>
-                        <h4 class="mb-1">{{ slotProps.data.name }}</h4>
-                        <h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
-                        <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
-                        <div class="mt-5 flex align-items-center justify-content-center gap-2">
-                            <Button icon="pi pi-search" rounded />
-                            <Button icon="pi pi-star-fill" rounded severity="secondary" />
-                        </div>
-                    </div>
-                </div>
-            </template>
-        </Carousel>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from "vue";
-import { ProductService } from '@/service/ProductService';
-
-onMounted(() => {
-    ProductService.getProductsSmall().then((data) => (products.value = data.slice(0, 9)));
-})
-
-const products = ref();
-const responsiveOptions = ref([
-    {
-        breakpoint: '1400px',
-        numVisible: 2,
-        numScroll: 1
-    },
-    {
-        breakpoint: '1199px',
-        numVisible: 3,
-        numScroll: 1
-    },
-    {
-        breakpoint: '767px',
-        numVisible: 2,
-        numScroll: 1
-    },
-    {
-        breakpoint: '575px',
-        numVisible: 1,
-        numScroll: 1
-    }
-]);
-
-const getSeverity = (status) => {
-    switch (status) {
-        case 'INSTOCK':
-            return 'success';
-
-        case 'LOWSTOCK':
-            return 'warning';
-
-        case 'OUTOFSTOCK':
-            return 'danger';
-
-        default:
-            return null;
-    }
-};
-
-<\/script>
-`,
-                data: `
-/* ProductService */
-{
-    id: '1000',
-    code: 'f230fh0g3',
-    name: 'Bamboo Watch',
-    description: 'Product Description',
-    image: 'bamboo-watch.jpg',
-    price: 65,
-    category: 'Accessories',
-    quantity: 24,
-    inventoryStatus: 'INSTOCK',
-    rating: 5
-},
-...`
-            }
-        };
-    },
-    mounted() {
-        ProductService.getProductsSmall().then((data) => (this.products = data.slice(0, 9)));
-    },
-    methods: {
-        getSeverity(status) {
-            switch (status) {
-                case 'INSTOCK':
-                    return 'success';
-
-                case 'LOWSTOCK':
-                    return 'warning';
-
-                case 'OUTOFSTOCK':
-                    return 'danger';
-
-                default:
-                    return null;
-            }
-        }
-    }
-};
-</script>

doc/carousel/pt/index.vue

@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Carousel PT Options',
                     component: DocApiTable,
                     data: getPTOption('Carousel')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };

doc/cascadeselect/pt/PTDoc.vue

@@ -1,314 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <div class="card flex justify-content-center">
-        <CascadeSelect
-            v-model="selectedCity"
-            :options="countries"
-            optionLabel="cname"
-            optionGroupLabel="name"
-            :optionGroupChildren="['states', 'cities']"
-            placeholder="Select a City"
-            :pt="{
-                root: { style: { minWidth: '14rem' } }
-            }"
-        />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedCity: null,
-            countries: [
-                {
-                    name: 'Australia',
-                    code: 'AU',
-                    states: [
-                        {
-                            name: 'New South Wales',
-                            cities: [
-                                { cname: 'Sydney', code: 'A-SY' },
-                                { cname: 'Newcastle', code: 'A-NE' },
-                                { cname: 'Wollongong', code: 'A-WO' }
-                            ]
-                        },
-                        {
-                            name: 'Queensland',
-                            cities: [
-                                { cname: 'Brisbane', code: 'A-BR' },
-                                { cname: 'Townsville', code: 'A-TO' }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    name: 'Canada',
-                    code: 'CA',
-                    states: [
-                        {
-                            name: 'Quebec',
-                            cities: [
-                                { cname: 'Montreal', code: 'C-MO' },
-                                { cname: 'Quebec City', code: 'C-QU' }
-                            ]
-                        },
-                        {
-                            name: 'Ontario',
-                            cities: [
-                                { cname: 'Ottawa', code: 'C-OT' },
-                                { cname: 'Toronto', code: 'C-TO' }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    name: 'United States',
-                    code: 'US',
-                    states: [
-                        {
-                            name: 'California',
-                            cities: [
-                                { cname: 'Los Angeles', code: 'US-LA' },
-                                { cname: 'San Diego', code: 'US-SD' },
-                                { cname: 'San Francisco', code: 'US-SF' }
-                            ]
-                        },
-                        {
-                            name: 'Florida',
-                            cities: [
-                                { cname: 'Jacksonville', code: 'US-JA' },
-                                { cname: 'Miami', code: 'US-MI' },
-                                { cname: 'Tampa', code: 'US-TA' },
-                                { cname: 'Orlando', code: 'US-OR' }
-                            ]
-                        },
-                        {
-                            name: 'Texas',
-                            cities: [
-                                { cname: 'Austin', code: 'US-AU' },
-                                { cname: 'Dallas', code: 'US-DA' },
-                                { cname: 'Houston', code: 'US-HO' }
-                            ]
-                        }
-                    ]
-                }
-            ],
-            code: {
-                basic: `
-<CascadeSelect
-    v-model="selectedCity"
-    :options="countries"
-    optionLabel="cname"
-    optionGroupLabel="name"
-    :optionGroupChildren="['states', 'cities']"
-    placeholder="Select a City"
-    :pt="{
-        root: { style: { minWidth: '14rem' } }
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-center">
-        <CascadeSelect
-            v-model="selectedCity"
-            :options="countries"
-            optionLabel="cname"
-            optionGroupLabel="name"
-            :optionGroupChildren="['states', 'cities']"
-            placeholder="Select a City"
-            :pt="{
-                root: { style: { minWidth: '14rem' } }
-            }"
-        />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedCity: null,
-            countries: [
-                {
-                    name: 'Australia',
-                    code: 'AU',
-                    states: [
-                        {
-                            name: 'New South Wales',
-                            cities: [
-                                { cname: 'Sydney', code: 'A-SY' },
-                                { cname: 'Newcastle', code: 'A-NE' },
-                                { cname: 'Wollongong', code: 'A-WO' }
-                            ]
-                        },
-                        {
-                            name: 'Queensland',
-                            cities: [
-                                { cname: 'Brisbane', code: 'A-BR' },
-                                { cname: 'Townsville', code: 'A-TO' }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    name: 'Canada',
-                    code: 'CA',
-                    states: [
-                        {
-                            name: 'Quebec',
-                            cities: [
-                                { cname: 'Montreal', code: 'C-MO' },
-                                { cname: 'Quebec City', code: 'C-QU' }
-                            ]
-                        },
-                        {
-                            name: 'Ontario',
-                            cities: [
-                                { cname: 'Ottawa', code: 'C-OT' },
-                                { cname: 'Toronto', code: 'C-TO' }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    name: 'United States',
-                    code: 'US',
-                    states: [
-                        {
-                            name: 'California',
-                            cities: [
-                                { cname: 'Los Angeles', code: 'US-LA' },
-                                { cname: 'San Diego', code: 'US-SD' },
-                                { cname: 'San Francisco', code: 'US-SF' }
-                            ]
-                        },
-                        {
-                            name: 'Florida',
-                            cities: [
-                                { cname: 'Jacksonville', code: 'US-JA' },
-                                { cname: 'Miami', code: 'US-MI' },
-                                { cname: 'Tampa', code: 'US-TA' },
-                                { cname: 'Orlando', code: 'US-OR' }
-                            ]
-                        },
-                        {
-                            name: 'Texas',
-                            cities: [
-                                { cname: 'Austin', code: 'US-AU' },
-                                { cname: 'Dallas', code: 'US-DA' },
-                                { cname: 'Houston', code: 'US-HO' }
-                            ]
-                        }
-                    ]
-                }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-content-center">
-        <CascadeSelect
-            v-model="selectedCity"
-            :options="countries"
-            optionLabel="cname"
-            optionGroupLabel="name"
-            :optionGroupChildren="['states', 'cities']"
-            placeholder="Select a City"
-            :pt="{
-                root: { style: { minWidth: '14rem' } }
-            }"
-        />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const selectedCity = ref();
-const countries = ref([
-    {
-        name: 'Australia',
-        code: 'AU',
-        states: [
-            {
-                name: 'New South Wales',
-                cities: [
-                    { cname: 'Sydney', code: 'A-SY' },
-                    { cname: 'Newcastle', code: 'A-NE' },
-                    { cname: 'Wollongong', code: 'A-WO' }
-                ]
-            },
-            {
-                name: 'Queensland',
-                cities: [
-                    { cname: 'Brisbane', code: 'A-BR' },
-                    { cname: 'Townsville', code: 'A-TO' }
-                ]
-            }
-        ]
-    },
-    {
-        name: 'Canada',
-        code: 'CA',
-        states: [
-            {
-                name: 'Quebec',
-                cities: [
-                    { cname: 'Montreal', code: 'C-MO' },
-                    { cname: 'Quebec City', code: 'C-QU' }
-                ]
-            },
-            {
-                name: 'Ontario',
-                cities: [
-                    { cname: 'Ottawa', code: 'C-OT' },
-                    { cname: 'Toronto', code: 'C-TO' }
-                ]
-            }
-        ]
-    },
-    {
-        name: 'United States',
-        code: 'US',
-        states: [
-            {
-                name: 'California',
-                cities: [
-                    { cname: 'Los Angeles', code: 'US-LA' },
-                    { cname: 'San Diego', code: 'US-SD' },
-                    { cname: 'San Francisco', code: 'US-SF' }
-                ]
-            },
-            {
-                name: 'Florida',
-                cities: [
-                    { cname: 'Jacksonville', code: 'US-JA' },
-                    { cname: 'Miami', code: 'US-MI' },
-                    { cname: 'Tampa', code: 'US-TA' },
-                    { cname: 'Orlando', code: 'US-OR' }
-                ]
-            },
-            {
-                name: 'Texas',
-                cities: [
-                    { cname: 'Austin', code: 'US-AU' },
-                    { cname: 'Dallas', code: 'US-DA' },
-                    { cname: 'Houston', code: 'US-HO' }
-                ]
-            }
-        ]
-    }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>

doc/cascadeselect/pt/index.vue

@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'CascadeSelect PT Options',
                     component: DocApiTable,
                     data: getPTOption('CascadeSelect')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };

doc/chart/pt/PTDoc.vue

@@ -1,166 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>A pie chart is a circular statistical graphic which is divided into slices to illustrate numerical proportion.</p>
-    </DocSectionText>
-    <div class="card flex justify-content-center">
-        <Chart
-            type="pie"
-            :data="chartData"
-            :options="chartOptions"
-            :pt="{
-                root: { class: 'w-full md:w-30rem' }
-            }"
-        />
-    </div>
-    <DocSectionCode :code="code" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            chartData: null,
-            chartOptions: {
-                plugins: {
-                    legend: {
-                        labels: {
-                            usePointStyle: true
-                        }
-                    }
-                }
-            },
-            code: {
-                basic: `
-<Chart
-    type="pie"
-    :data="chartData"
-    :options="chartOptions"
-    :pt="{
-        root: { class: 'w-full md:w-30rem' }
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-center">
-        <Chart
-            type="pie"
-            :data="chartData"
-            :options="chartOptions"
-            :pt="{
-                root: { class: 'w-full md:w-30rem' }
-            }"
-        />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            chartData: null,
-            chartOptions: {
-                plugins: {
-                    legend: {
-                        labels: {
-                            usePointStyle: true
-                        }
-                    }
-                }
-            }
-        };
-    },
-    mounted() {
-        this.chartData = this.setChartData();
-    },
-    methods: {
-        setChartData() {
-            const documentStyle = getComputedStyle(document.body);
-
-            return {
-                labels: ['A', 'B', 'C'],
-                datasets: [
-                    {
-                        data: [540, 325, 702],
-                        backgroundColor: [documentStyle.getPropertyValue('--cyan-500'), documentStyle.getPropertyValue('--orange-500'), documentStyle.getPropertyValue('--gray-500')],
-                        hoverBackgroundColor: [documentStyle.getPropertyValue('--cyan-400'), documentStyle.getPropertyValue('--orange-400'), documentStyle.getPropertyValue('--gray-400')]
-                    }
-                ]
-            };
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-content-center">
-        <Chart
-            type="pie"
-            :data="chartData"
-            :options="chartOptions"
-            :pt="{
-                root: { class: 'w-full md:w-30rem' }
-            }"
-        />
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from "vue";
-
-onMounted(() => {
-    chartData.value = setChartData();
-});
-
-const chartData = ref();
-const chartOptions = ref({
-    plugins: {
-        legend: {
-            labels: {
-                usePointStyle: true
-            }
-        }
-    }
-});
-
-const setChartData = () => {
-    const documentStyle = getComputedStyle(document.body);
-
-    return {
-        labels: ['A', 'B', 'C'],
-        datasets: [
-            {
-                data: [540, 325, 702],
-                backgroundColor: [documentStyle.getPropertyValue('--cyan-500'), documentStyle.getPropertyValue('--orange-500'), documentStyle.getPropertyValue('--gray-500')],
-                hoverBackgroundColor: [documentStyle.getPropertyValue('--cyan-400'), documentStyle.getPropertyValue('--orange-400'), documentStyle.getPropertyValue('--gray-400')]
-            }
-        ]
-    };
-};
-<\/script>
-`
-            }
-        };
-    },
-    mounted() {
-        this.chartData = this.setChartData();
-    },
-    methods: {
-        setChartData() {
-            const documentStyle = getComputedStyle(document.body);
-
-            return {
-                labels: ['A', 'B', 'C'],
-                datasets: [
-                    {
-                        data: [540, 325, 702],
-                        backgroundColor: [documentStyle.getPropertyValue('--cyan-500'), documentStyle.getPropertyValue('--orange-500'), documentStyle.getPropertyValue('--gray-500')],
-                        hoverBackgroundColor: [documentStyle.getPropertyValue('--cyan-400'), documentStyle.getPropertyValue('--orange-400'), documentStyle.getPropertyValue('--gray-400')]
-                    }
-                ]
-            };
-        }
-    }
-};
-</script>

doc/chart/pt/index.vue

@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Chart PT Options',
                     component: DocApiTable,
                     data: getPTOption('Chart')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };

doc/checkbox/pt/PTDoc.vue

@@ -1,84 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <div class="card flex justify-content-center">
-        <Checkbox
-            v-model="checked"
-            binary
-            :pt="{
-                input: ({ props, state }) => ({
-                    class: state.focused ? 'border-orange-400' : undefined
-                })
-            }"
-        />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            checked: false,
-            code: {
-                basic: `
-<Checkbox
-    v-model="checked"
-    binary
-    :pt="{
-        input: ({ props, state }) => ({
-            class: state.focused ? 'border-orange-400' : undefined
-        })
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-center">
-        <Checkbox
-            v-model="checked"
-            binary
-            :pt="{
-                input: ({ props, state }) => ({
-                    class: state.focused ? 'border-orange-400' : undefined
-                })
-            }"
-        />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            checked: false
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-content-center">
-        <Checkbox
-            v-model="checked"
-            binary
-            :pt="{
-                input: ({ props, state }) => ({
-                    class: state.focused ? 'border-orange-400' : undefined
-                })
-            }"
-        />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const checked = ref(false);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>

doc/checkbox/pt/index.vue

@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Checkbox PT Options',
                     component: DocApiTable,
                     data: getPTOption('Checkbox')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };

doc/chip/pt/PTDoc.vue

@@ -1,59 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <div class="card flex justify-content-center">
-        <Chip
-            label="Amy Elsner"
-            image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png"
-            :pt="{
-                root: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)', borderRadius: '24px' } },
-                label: { class: 'text-white' }
-            }"
-        />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Chip
-    label="Amy Elsner"
-    image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png"
-    :pt="{
-        root: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)', borderRadius: '24px' } },
-        label: { class: 'text-white' }
-    }"
-/>
-`,
-                options: `
-<template>
-    <Chip
-        label="Amy Elsner"
-        image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png"
-        :pt="{
-            root: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)', borderRadius: '24px' } },
-            label: { class: 'text-white' }
-        }"
-    />
-</template>
-`,
-                composition: `
-<template>
-    <Chip
-        label="Amy Elsner"
-        image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png"
-        :pt="{
-            root: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)', borderRadius: '24px' } },
-            label: { class: 'text-white' }
-        }"
-    />
-</template>
-`
-            }
-        };
-    }
-};
-</script>

doc/chip/pt/index.vue

@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Chip PT Options',
                     component: DocApiTable,
                     data: getPTOption('Chip')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };

doc/chips/pt/PTDoc.vue

@@ -1,80 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <div class="card">
-        <Chips
-            v-model="value"
-            :pt="{
-                root: { class: 'flex' },
-                container: { class: 'flex-1' },
-                token: { class: 'bg-primary' }
-            }"
-        />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null,
-            code: {
-                basic: `
-<Chips
-    v-model="value"
-    :pt="{
-        root: { class: 'flex' },
-        container: { class: 'flex-1' },
-        token: { class: 'bg-primary' }
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Chips
-            v-model="value"
-            :pt="{
-                root: { class: 'flex' },
-                container: { class: 'flex-1' },
-                token: { class: 'bg-primary' }
-            }"
-        />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Chips
-            v-model="value"
-            :pt="{
-                root: { class: 'flex' },
-                container: { class: 'flex-1' },
-                token: { class: 'bg-primary' }
-            }"
-        />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const value = ref();
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>

doc/chips/pt/index.vue

@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Chips PT Options',
                     component: DocApiTable,
                     data: getPTOption('Chips')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };

doc/colorpicker/pt/PTDoc.vue

@@ -1,76 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <div class="card flex justify-content-center">
-        <ColorPicker
-            v-model="color"
-            inline
-            :pt="{
-                colorHandler: { class: 'w-1rem h-1rem' }
-            }"
-        />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            color: null,
-            code: {
-                basic: `
-<ColorPicker
-    v-model="color"
-    inline
-    :pt="{
-        colorHandler: { class: 'w-1rem h-1rem' }
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-center">
-        <ColorPicker
-            v-model="color"
-            inline
-            :pt="{
-                colorHandler: { class: 'w-1rem h-1rem' }
-            }"
-        />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            color: null
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-content-center">
-        <ColorPicker
-            v-model="color"
-            inline
-            :pt="{
-                colorHandler: { class: 'w-1rem h-1rem' }
-            }"
-        />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const color = ref();
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>

doc/colorpicker/pt/index.vue

@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'ColorPicker PT Options',
                     component: DocApiTable,
                     data: getPTOption('ColorPicker')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };

doc/common/apidoc/index.json

@@ -4608,7 +4608,7 @@
         }
     },
     "avatargroup": {
-        "description": "A set of Avatars can be displayed together using the AvatarGroup component.\n\n[Live Demo](https://www.primevue.org/accordion/)",
+        "description": "A set of Avatars can be displayed together using the AvatarGroup component.\n\n[Live Demo](https://www.primevue.org/avatar/)",
         "components": {
             "default": {
                 "description": "A set of Avatars can be displayed together using the AvatarGroup component.",
@@ -4624,6 +4624,53 @@
             "methodDescription": "Defines methods that can be accessed by the component's reference.",
             "typeDescription": "Defines the custom types used by the module.",
             "values": {
+                "AvatarGroupPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "instance",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Defines instance."
+                        },
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "AvatarGroupProps",
+                            "default": "",
+                            "description": "Defines valid properties."
+                        },
+                        {
+                            "name": "attrs",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Defines valid attributes."
+                        },
+                        {
+                            "name": "parent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Defines parent options."
+                        },
+                        {
+                            "name": "global",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "undefined | object",
+                            "default": "",
+                            "description": "Defines passthrough(pt) options in global config."
+                        }
+                    ],
+                    "methods": []
+                },
                 "AvatarGroupPassThroughAttributes": {
                     "description": "Custom passthrough attributes for each DOM elements",
                     "relatedProp": "",
@@ -4716,7 +4763,7 @@
             "description": "Defines the custom types used by the module.",
             "values": {
                 "AvatarGroupPassThroughOptionType": {
-                    "values": "AvatarGroupPassThroughAttributes | null | undefined"
+                    "values": "AvatarGroupPassThroughAttributes | (options: AvatarGroupPassThroughMethodOptions) => undefined | string | null | undefined"
                 }
             }
         }
@@ -5371,7 +5418,7 @@
                         }
                     ],
                     "methods": [],
-                    "extendedBy": "AccordionStyle,AccordionTabStyle,AnimateOnScrollStyle,AutoCompleteStyle,AvatarStyle,AvatarGroupStyle,BadgeStyle,BadgeDirectiveStyle,BaseComponentStyle,BaseIconStyle,BlockUIStyle,BreadcrumbStyle,ButtonStyle,ButtonGroupStyle,CalendarStyle,CardStyle,CarouselStyle,CascadeSelectStyle,ChartStyle,CheckboxStyle,ChipStyle,ChipsStyle,ColorPickerStyle,ColumnStyle,ColumnGroupStyle,ConfirmDialogStyle,ConfirmPopupStyle,ContextMenuStyle,DataTableStyle,DataViewStyle,DataViewLayoutOptionsStyle,DeferredContentStyle,DialogStyle,DividerStyle,DockStyle,DropdownStyle,DynamicDialogStyle,EditorStyle,FieldsetStyle,AccordionStyle,FloatLabelStyle,FocusTrapStyle,GalleriaStyle,IconFieldStyle,ImageStyle,InlineMessageStyle,InplaceStyle,InputGroupStyle,InputGroupAddonStyle,InputIconStyle,InputMaskStyle,InputNumberStyle,InputSwitchStyle,InputTextStyle,KnobStyle,ListboxStyle,MegaMenuStyle,MenuStyle,MenubarStyle,MessageStyle,MeterGroupStyle,MultiSelectStyle,OrderListStyle,OrganizationChartStyle,OverlayPanelStyle,PaginatorStyle,PanelStyle,PanelMenuStyle,PasswordStyle,PickListStyle,PortalStyle,ProgressBarStyle,ProgressSpinnerStyle,RadioButtonStyle,RatingStyle,AccordionStyle,RowStyle,ScrollPanelStyle,ScrollTopStyle,SelectButtonStyle,SidebarStyle,SkeletonStyle,SliderStyle,SpeedDialStyle,SplitButtonStyle,SplitterStyle,SplitterPanelStyle,StepperStyle,StepperPanelStyle,StepsStyle,StyleClassStyle,TabMenuStyle,TabPanelStyle,TabViewStyle,TagStyle,TerminalStyle,TextareaStyle,TieredMenuStyle,TimelineStyle,ToastStyle,ToggleButtonStyle,ToolbarStyle,TooltipStyle,TreeStyle,TreeSelectStyle,TreeTableStyle,TriStateCheckboxStyle,VirtualScrollerStyle"
+                    "extendedBy": "AccordionStyle,AccordionTabStyle,AnimateOnScrollStyle,AutoCompleteStyle,AvatarStyle,AvatarGroupStyle,BadgeStyle,BadgeDirectiveStyle,BaseComponentStyle,BaseIconStyle,BlockUIStyle,BreadcrumbStyle,ButtonStyle,ButtonGroupStyle,CalendarStyle,CardStyle,CarouselStyle,CascadeSelectStyle,ChartStyle,CheckboxStyle,ChipStyle,ChipsStyle,ColorPickerStyle,ColumnStyle,ColumnGroupStyle,ConfirmDialogStyle,ConfirmPopupStyle,ContextMenuStyle,DataTableStyle,DataViewStyle,DataViewLayoutOptionsStyle,DeferredContentStyle,DialogStyle,DividerStyle,DockStyle,DropdownStyle,DynamicDialogStyle,EditorStyle,FieldsetStyle,AccordionStyle,FloatLabelStyle,FocusTrapStyle,GalleriaStyle,IconFieldStyle,ImageStyle,InlineMessageStyle,InplaceStyle,InputGroupStyle,InputGroupAddonStyle,InputIconStyle,InputMaskStyle,InputNumberStyle,InputOtpStyle,InputSwitchStyle,InputTextStyle,KnobStyle,ListboxStyle,MegaMenuStyle,MenuStyle,MenubarStyle,MessageStyle,MeterGroupStyle,MultiSelectStyle,OrderListStyle,OrganizationChartStyle,OverlayPanelStyle,PaginatorStyle,PanelStyle,PanelMenuStyle,PasswordStyle,PickListStyle,PortalStyle,ProgressBarStyle,ProgressSpinnerStyle,RadioButtonStyle,RatingStyle,AccordionStyle,RowStyle,ScrollPanelStyle,ScrollTopStyle,SelectButtonStyle,SidebarStyle,SkeletonStyle,SliderStyle,SpeedDialStyle,SplitButtonStyle,SplitterStyle,SplitterPanelStyle,StepperStyle,StepperPanelStyle,StepsStyle,StyleClassStyle,TabMenuStyle,TabPanelStyle,TabViewStyle,TagStyle,TerminalStyle,TextareaStyle,TieredMenuStyle,TimelineStyle,ToastStyle,ToggleButtonStyle,ToolbarStyle,TooltipStyle,TreeStyle,TreeSelectStyle,TreeTableStyle,TriStateCheckboxStyle,VirtualScrollerStyle"
                 }
             }
         }
@@ -8925,6 +8972,45 @@
             "methodDescription": "Defines methods that can be accessed by the component's reference.",
             "typeDescription": "Defines the custom types used by the module.",
             "values": {
+                "CardPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "instance",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Defines instance."
+                        },
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "CardProps",
+                            "default": "",
+                            "description": "Defines valid properties."
+                        },
+                        {
+                            "name": "attrs",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Defines valid attributes."
+                        },
+                        {
+                            "name": "global",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "undefined | object",
+                            "default": "",
+                            "description": "Defines passthrough(pt) options in global config."
+                        }
+                    ],
+                    "methods": []
+                },
                 "CardPassThroughOptions": {
                     "description": "Custom passthrough(pt) options.",
                     "relatedProp": "CardProps.pt",
@@ -9097,7 +9183,7 @@
             "description": "Defines the custom types used by the module.",
             "values": {
                 "CardPassThroughOptionType": {
-                    "values": "CardPassThroughAttributes | null | undefined"
+                    "values": "CardPassThroughAttributes | (options: CardPassThroughMethodOptions) => undefined | string | null | undefined"
                 }
             }
         }
@@ -20321,7 +20407,7 @@
                             "name": "tableStyle",
                             "optional": true,
                             "readonly": false,
-                            "type": "any",
+                            "type": "object",
                             "default": "",
                             "description": "Inline style of the table element."
                         },
@@ -20329,7 +20415,7 @@
                             "name": "tableClass",
                             "optional": true,
                             "readonly": false,
-                            "type": "any",
+                            "type": "string | object",
                             "default": "",
                             "description": "Style class of the table element."
                         },
@@ -31888,6 +31974,460 @@
             }
         }
     },
+    "inputotp": {
+        "description": "InputOtp is used to enter one time passwords.\n\n[Live Demo](https://www.primevue.org/inputotp/)",
+        "components": {
+            "default": {
+                "description": "InputOtp  is used to enter one time passwords.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": []
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "eventDescription": "Defines the custom events used by the component's emit.",
+            "methodDescription": "Defines methods that can be accessed by the component's reference.",
+            "typeDescription": "Defines the custom types used by the module.",
+            "values": {
+                "InputOtpPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "instance",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Defines instance."
+                        },
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "InputOtpProps",
+                            "default": "",
+                            "description": "Defines valid properties."
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "InputOtpState",
+                            "default": "",
+                            "description": "Defines current inline state."
+                        },
+                        {
+                            "name": "attrs",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Defines valid attributes."
+                        },
+                        {
+                            "name": "global",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "undefined | object",
+                            "default": "",
+                            "description": "Defines passthrough(pt) options in global config."
+                        }
+                    ],
+                    "methods": []
+                },
+                "InputOtpSharedPassThroughMethodOptions": {
+                    "description": "Custom shared passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "InputOtpProps",
+                            "default": "",
+                            "description": "Defines valid properties."
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "InputOtpState",
+                            "default": "",
+                            "description": "Defines current inline state."
+                        }
+                    ],
+                    "methods": []
+                },
+                "InputOtpPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "InputOtpProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "InputOtpPassThroughOptionType",
+                            "default": "",
+                            "description": "Used to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "input",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "InputTextPassThroughOptions<InputOtpSharedPassThroughMethodOptions>",
+                            "default": "",
+                            "description": "Used to pass attributes to the InputText component."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "default": "",
+                            "description": "Used to manage all lifecycle hooks."
+                        }
+                    ],
+                    "methods": []
+                },
+                "InputOtpPassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": []
+                },
+                "InputOtpState": {
+                    "description": "Defines current inline state in InputOtp component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "tokens",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string[] | number[]",
+                            "default": "",
+                            "description": "Array of input tokens"
+                        }
+                    ],
+                    "methods": []
+                },
+                "InputOtpTemplateAttrsOptions": {
+                    "description": "InputOtp attr options",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Input token value"
+                        }
+                    ],
+                    "methods": []
+                },
+                "InputOtpTemplateEvents": {
+                    "description": "InputOtp templating events",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "input",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "Function",
+                            "default": ""
+                        },
+                        {
+                            "name": "keydown",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "Function",
+                            "default": ""
+                        },
+                        {
+                            "name": "focus",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "Function",
+                            "default": ""
+                        },
+                        {
+                            "name": "blur",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "Function",
+                            "default": ""
+                        },
+                        {
+                            "name": "paste",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "Function",
+                            "default": ""
+                        }
+                    ],
+                    "methods": []
+                },
+                "InputOtpProps": {
+                    "description": "Defines valid properties in InputOtp component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "modelValue",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string | boolean",
+                            "default": "false",
+                            "description": "Specifies whether a inputotp should be checked or not."
+                        },
+                        {
+                            "name": "invalid",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should have invalid state style."
+                        },
+                        {
+                            "name": "disabled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should be disabled."
+                        },
+                        {
+                            "name": "readonly",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that an input field is read-only."
+                        },
+                        {
+                            "name": "variant",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"filled\" | \"outlined\"",
+                            "default": "outlined",
+                            "description": "Specifies the input variant of the component."
+                        },
+                        {
+                            "name": "tabindex",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Index of the element in tabbing order."
+                        },
+                        {
+                            "name": "length",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "4",
+                            "description": "Number of characters to initiate."
+                        },
+                        {
+                            "name": "mask",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Mask pattern."
+                        },
+                        {
+                            "name": "integerOnly",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that an input field is integer-only."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThrough<InputOtpPassThroughOptions>",
+                            "default": "",
+                            "description": "Used to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        }
+                    ],
+                    "methods": []
+                },
+                "InputOtpSlots": {
+                    "description": "",
+                    "relatedProp": "",
+                    "props": [],
+                    "methods": [
+                        {
+                            "name": "default",
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n \t <span class=\"ml-3 doc-option-parameter-name\">events</span>: <span class=\"doc-option-parameter-type\">(<span class=\"doc-option-parameter-name\">index</span>: number) &rArr; InputOtpTemplateEvents</span>, <span class=\"doc-option-parameter-type\">// Events of the component</span>\n\t <span class=\"ml-3 doc-option-parameter-name\">attrs</span>: <span class=\"doc-option-parameter-type\">(<span class=\"doc-option-parameter-name\">index</span>: number) &rArr; InputOtpTemplateAttrsOptions</span>, <span class=\"doc-option-parameter-type\">// Attributes of the component</span>\n \t <span class=\"ml-3 doc-option-parameter-name\">index</span>: <span class=\"doc-option-parameter-type\">number</span>, <span class=\"doc-option-parameter-type\">// Index of the input field</span>\n }"
+                                }
+                            ],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Default content slot."
+                        }
+                    ]
+                },
+                "InputOtpEmits": {
+                    "description": "Defines valid emits in InputOtp component.",
+                    "relatedProp": "",
+                    "props": [],
+                    "methods": [
+                        {
+                            "name": "update:modelValue",
+                            "parameters": [
+                                {
+                                    "name": "value",
+                                    "optional": false,
+                                    "type": "boolean",
+                                    "description": "New value."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Emitted when the value changes."
+                        },
+                        {
+                            "name": "change",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "Event",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke on value change."
+                        },
+                        {
+                            "name": "focus",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "Event",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when the component receives focus."
+                        },
+                        {
+                            "name": "blur",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "Event",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when the component loses focus."
+                        }
+                    ]
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "InputOtpPassThroughOptionType": {
+                    "values": "InputOtpPassThroughAttributes | (options: InputOtpPassThroughMethodOptions) => undefined | string | null | undefined"
+                }
+            }
+        }
+    },
+    "inputotp/style/InputOtpStyle": {
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "eventDescription": "Defines the custom events used by the component's emit.",
+            "methodDescription": "Defines methods that can be accessed by the component's reference.",
+            "typeDescription": "Defines the custom types used by the module.",
+            "values": {
+                "InputOtpStyle": {
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "name",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "css",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "classes",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "object",
+                            "default": ""
+                        },
+                        {
+                            "name": "inlineStyles",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "object",
+                            "default": ""
+                        },
+                        {
+                            "name": "loadStyle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Function",
+                            "default": ""
+                        },
+                        {
+                            "name": "getStyleSheet",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Function",
+                            "default": ""
+                        }
+                    ],
+                    "methods": [],
+                    "extendedTypes": "BaseStyle"
+                }
+            }
+        }
+    },
     "inputswitch": {
         "description": "InputSwitch is used to select a boolean value.\n\n[Live Demo](https://www.primevue.org/inputswitch/)",
         "components": {
@@ -31925,14 +32465,6 @@
                             "default": "",
                             "description": "Defines valid properties."
                         },
-                        {
-                            "name": "state",
-                            "optional": false,
-                            "readonly": false,
-                            "type": "InputSwitchState",
-                            "default": "",
-                            "description": "Defines current inline state."
-                        },
                         {
                             "name": "context",
                             "optional": false,
@@ -32020,19 +32552,6 @@
                     ],
                     "methods": []
                 },
-                "InputSwitchState": {
-                    "description": "Defines current inline state in InputSwitch component.",
-                    "relatedProp": "",
-                    "props": [
-                        {
-                            "name": "[key: string]",
-                            "optional": false,
-                            "readonly": false,
-                            "type": "any"
-                        }
-                    ],
-                    "methods": []
-                },
                 "InputSwitchProps": {
                     "description": "Defines valid properties in InputSwitch component.",
                     "relatedProp": "",
@@ -49790,14 +50309,6 @@
                             "default": "",
                             "description": "Used to pass attributes to the root's DOM element."
                         },
-                        {
-                            "name": "navContainer",
-                            "optional": true,
-                            "readonly": false,
-                            "type": "StepperPassThroughOptionType",
-                            "default": "",
-                            "description": "Used to pass attributes to the nav container's DOM element."
-                        },
                         {
                             "name": "nav",
                             "optional": true,
@@ -49951,7 +50462,20 @@
                     "description": "Defines valid slots in Stepper component.",
                     "relatedProp": "",
                     "props": [],
-                    "methods": []
+                    "methods": [
+                        {
+                            "name": "start",
+                            "parameters": [],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom start template."
+                        },
+                        {
+                            "name": "end",
+                            "parameters": [],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom end template."
+                        }
+                    ]
                 },
                 "StepperEmits": {
                     "description": "Defines valid emits in Stepper component.",
@@ -50345,7 +50869,7 @@
                                 {
                                     "name": "scope",
                                     "optional": false,
-                                    "type": "{\n  \t <span class=\"ml-3 doc-option-parameter-name\">index</span>: <span class=\"doc-option-parameter-type\">number</span>, <span class=\"doc-option-parameter-type\">// Index of the stepperpanel</span>\n  \t <span class=\"ml-3 doc-option-parameter-name\">active</span>: <span class=\"doc-option-parameter-type\">boolean</span>, <span class=\"doc-option-parameter-type\">// Current active state of the stepperpanel</span>\n  \t <span class=\"ml-3 doc-option-parameter-name\">highlighted</span>: <span class=\"doc-option-parameter-type\">boolean</span>, <span class=\"doc-option-parameter-type\">// Current highlighted state of the stepperpanel</span>\n  \t <span class=\"ml-3 doc-option-parameter-name\">class</span>: <span class=\"doc-option-parameter-type\">string</span>, <span class=\"doc-option-parameter-type\">// Style class of the stepperpanel</span>\n \t <span class=\"ml-3 doc-option-parameter-name\">clickCallback</span>: <span class=\"doc-option-parameter-type\">(<span class=\"doc-option-parameter-name\">event</span>: Event) &rArr; void</span>, <span class=\"doc-option-parameter-type\">// Header click function.</span>\n}"
+                                    "type": "{\n  \t <span class=\"ml-3 doc-option-parameter-name\">index</span>: <span class=\"doc-option-parameter-type\">number</span>, <span class=\"doc-option-parameter-type\">// Index of the stepperpanel</span>\n  \t <span class=\"ml-3 doc-option-parameter-name\">active</span>: <span class=\"doc-option-parameter-type\">boolean</span>, <span class=\"doc-option-parameter-type\">// Current active state of the stepperpanel</span>\n  \t <span class=\"ml-3 doc-option-parameter-name\">highlighted</span>: <span class=\"doc-option-parameter-type\">boolean</span>, <span class=\"doc-option-parameter-type\">// Current highlighted state of the stepperpanel</span>\n  \t <span class=\"ml-3 doc-option-parameter-name\">class</span>: <span class=\"doc-option-parameter-type\">string</span>, <span class=\"doc-option-parameter-type\">// Style class of the stepperpanel</span>\n  \t <span class=\"ml-3 doc-option-parameter-name\">headerClass</span>: <span class=\"doc-option-parameter-type\">string</span>, <span class=\"doc-option-parameter-type\">// Style class of the stepperpanel</span>\n  \t <span class=\"ml-3 doc-option-parameter-name\">numberClass</span>: <span class=\"doc-option-parameter-type\">string</span>, <span class=\"doc-option-parameter-type\">// Style class of the number content container</span>\n  \t <span class=\"ml-3 doc-option-parameter-name\">titleClass</span>: <span class=\"doc-option-parameter-type\">string</span>, <span class=\"doc-option-parameter-type\">// Style class of the title content container</span>\n \t <span class=\"ml-3 doc-option-parameter-name\">clickCallback</span>: <span class=\"doc-option-parameter-type\">(<span class=\"doc-option-parameter-name\">event</span>: Event) &rArr; void</span>, <span class=\"doc-option-parameter-type\">// Header click function.</span>\n}"
                                 }
                             ],
                             "returnType": "VNode<RendererNode, RendererElement, Object>[]",

doc/confirmdialog/pt/PTDoc.vue

@@ -1,113 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <ConfirmDialog group="pt" :pt="{ headerTitle: { class: 'text-primary' } }" />
-    <div class="card flex flex-wrap gap-2 justify-content-center">
-        <Button @click="confirm()" icon="pi pi-check" label="Confirm"></Button>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<ConfirmDialog
-    group="pt"
-    :pt="{
-        headerTitle: { class: 'text-primary' }
-    }"
-/>
-`,
-                options: `
-<template>
-    <ConfirmDialog
-        group="pt"
-        :pt="{
-            headerTitle: { class: 'text-primary' }
-        }"
-    />
-    <div class="card flex flex-wrap gap-2 justify-content-center">
-        <Button @click="confirm()" icon="pi pi-check" label="Confirm"></Button>
-    </div>
-    <Toast />
-</template>
-
-<script>
-export default {
-    methods: {
-        confirm() {
-            this.$confirm.require({
-                message: 'Are you sure you want to proceed?',
-                header: 'Confirmation',
-                icon: 'pi pi-exclamation-triangle',
-                accept: () => {
-                    this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
-                },
-                reject: () => {
-                    this.$toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
-                }
-            });
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <ConfirmDialog
-        group="pt"
-        :pt="{
-            headerTitle: { class: 'text-primary' }
-        }"
-    />
-    <div class="card flex flex-wrap gap-2 justify-content-center">
-        <Button @click="confirm()" icon="pi pi-check" label="Confirm"></Button>
-    </div>
-    <Toast />
-</template>
-
-<script setup>
-import { useConfirm } from "primevue/useconfirm";
-import { useToast } from "primevue/usetoast";
-
-const confirm = useConfirm();
-const toast = useToast();
-
-const confirm = () => {
-    confirm.require({
-        message: 'Are you sure you want to proceed?',
-        header: 'Confirmation',
-        icon: 'pi pi-exclamation-triangle',
-        accept: () => {
-            toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
-        },
-        reject: () => {
-            toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
-        }
-    });
-};
-<\/script>
-`
-            }
-        };
-    },
-    methods: {
-        confirm() {
-            this.$confirm.require({
-                group: 'pt',
-                message: 'Are you sure you want to proceed?',
-                header: 'Confirmation',
-                icon: 'pi pi-exclamation-triangle',
-                accept: () => {
-                    this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
-                },
-                reject: () => {
-                    this.$toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
-                }
-            });
-        }
-    }
-};
-</script>

doc/confirmdialog/pt/index.vue

@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'ConfirmDialog PT Options',
                     component: DocApiTable,
                     data: getPTOption('ConfirmDialog')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };

doc/confirmpopup/pt/PTDoc.vue

@@ -1,120 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <ConfirmPopup
-        group="pt"
-        :pt="{
-            root: { class: 'surface-100' }
-        }"
-    />
-    <div class="card flex flex-wrap gap-2 justify-content-center">
-        <Button @click="confirm($event)" icon="pi pi-check" label="Confirm"></Button>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<ConfirmPopup
-    group="pt"
-    :pt="{
-        root: { class: 'surface-100' }
-    }"
-/>
-`,
-                options: `
-<template>
-    <ConfirmPopup
-        group="pt"
-        :pt="{
-            root: { class: 'surface-100' }
-        }"
-    />
-    <Toast />
-    <div class="card flex flex-wrap gap-2 justify-content-center">
-        <Button @click="confirm($event)" icon="pi pi-check" label="Confirm"></Button>
-    </div>
-</template>
-
-<script>
-export default {
-    methods: {
-        confirm(event) {
-            this.$confirm.require({
-                group: 'pt',
-                target: event.currentTarget,
-                message: 'Are you sure you want to proceed?',
-                icon: 'pi pi-exclamation-triangle',
-                accept: () => {
-                    this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
-                },
-                reject: () => {
-                    this.$toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
-                }
-            });
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <ConfirmPopup
-        group="pt"
-        :pt="{
-            root: { class: 'surface-100' }
-        }"
-    />
-    <Toast />
-    <div class="card flex flex-wrap gap-2 justify-content-center">
-        <Button @click="confirm($event)" icon="pi pi-check" label="Confirm"></Button>
-    </div>
-</template>
-
-<script setup>
-import { useConfirm } from "primevue/useconfirm";
-import { useToast } from "primevue/usetoast";
-
-const confirm = useConfirm();
-const toast = useToast();
-
-const confirm = (event) => {
-    confirm.require({
-        group: 'pt',
-        target: event.currentTarget,
-        message: 'Are you sure you want to proceed?',
-        icon: 'pi pi-exclamation-triangle',
-        accept: () => {
-            toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
-        },
-        reject: () => {
-            toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
-        }
-    });
-};
-<\/script>
-`
-            }
-        };
-    },
-    methods: {
-        confirm(event) {
-            this.$confirm.require({
-                group: 'pt',
-                target: event.currentTarget,
-                message: 'Are you sure you want to proceed?',
-                icon: 'pi pi-exclamation-triangle',
-                accept: () => {
-                    this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
-                },
-                reject: () => {
-                    this.$toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
-                }
-            });
-        }
-    }
-};
-</script>

doc/confirmpopup/pt/index.vue

@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'ConfirmPopup PT Options',
                     component: DocApiTable,
                     data: getPTOption('ConfirmPopup')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };

doc/contextmenu/pt/PTDoc.vue

@@ -1,471 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <div class="card flex md:justify-content-center">
-        <img alt="Logo" src="https://primefaces.org/cdn/primevue/images/nature/nature3.jpg" class="w-full md:w-auto" @contextmenu="onImageRightClick" aria-haspopup="true" />
-        <ContextMenu
-            ref="menu"
-            :model="items"
-            :pt="{
-                action: ({ props, state, context }) => ({ class: context.active ? 'bg-primary-200' : context.focused ? 'bg-primary-300' : undefined })
-            }"
-        />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'File',
-                    icon: 'pi pi-fw pi-file',
-                    items: [
-                        {
-                            label: 'New',
-                            icon: 'pi pi-fw pi-plus',
-                            items: [
-                                {
-                                    label: 'Bookmark',
-                                    icon: 'pi pi-fw pi-bookmark'
-                                },
-                                {
-                                    label: 'Video',
-                                    icon: 'pi pi-fw pi-video'
-                                }
-                            ]
-                        },
-                        {
-                            label: 'Delete',
-                            icon: 'pi pi-fw pi-trash'
-                        },
-                        {
-                            separator: true
-                        },
-                        {
-                            label: 'Export',
-                            icon: 'pi pi-fw pi-external-link'
-                        }
-                    ]
-                },
-                {
-                    label: 'Edit',
-                    icon: 'pi pi-fw pi-pencil',
-                    items: [
-                        {
-                            label: 'Left',
-                            icon: 'pi pi-fw pi-align-left'
-                        },
-                        {
-                            label: 'Right',
-                            icon: 'pi pi-fw pi-align-right'
-                        },
-                        {
-                            label: 'Center',
-                            icon: 'pi pi-fw pi-align-center'
-                        },
-                        {
-                            label: 'Justify',
-                            icon: 'pi pi-fw pi-align-justify'
-                        }
-                    ]
-                },
-                {
-                    label: 'Users',
-                    icon: 'pi pi-fw pi-user',
-                    items: [
-                        {
-                            label: 'New',
-                            icon: 'pi pi-fw pi-user-plus'
-                        },
-                        {
-                            label: 'Delete',
-                            icon: 'pi pi-fw pi-user-minus'
-                        },
-                        {
-                            label: 'Search',
-                            icon: 'pi pi-fw pi-users',
-                            items: [
-                                {
-                                    label: 'Filter',
-                                    icon: 'pi pi-fw pi-filter',
-                                    items: [
-                                        {
-                                            label: 'Print',
-                                            icon: 'pi pi-fw pi-print'
-                                        }
-                                    ]
-                                },
-                                {
-                                    icon: 'pi pi-fw pi-bars',
-                                    label: 'List'
-                                }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    label: 'Events',
-                    icon: 'pi pi-fw pi-calendar',
-                    items: [
-                        {
-                            label: 'Edit',
-                            icon: 'pi pi-fw pi-pencil',
-                            items: [
-                                {
-                                    label: 'Save',
-                                    icon: 'pi pi-fw pi-calendar-plus'
-                                },
-                                {
-                                    label: 'Delete',
-                                    icon: 'pi pi-fw pi-calendar-minus'
-                                }
-                            ]
-                        },
-                        {
-                            label: 'Archive',
-                            icon: 'pi pi-fw pi-calendar-times',
-                            items: [
-                                {
-                                    label: 'Remove',
-                                    icon: 'pi pi-fw pi-calendar-minus'
-                                }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    separator: true
-                },
-                {
-                    label: 'Quit',
-                    icon: 'pi pi-fw pi-power-off'
-                }
-            ],
-            code: {
-                basic: `
-<img alt="Logo" src="/images/nature/nature3.jpg" class="w-full md:w-auto" @contextmenu="onImageRightClick" aria-haspopup="true" />
-<ContextMenu
-    ref="menu"
-    :model="items"
-    :pt="{
-        action: ({ props, state, context }) => ({ class: context.active ? 'bg-primary-200' : context.focused ? 'bg-primary-300' : undefined })
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card flex md:justify-content-center">
-        <img alt="Logo" src="https://primefaces.org/cdn/primevue/images/nature/nature3.jpg" @contextmenu="onImageRightClick" class="w-full md:w-auto" aria-haspopup="true" />
-        <ContextMenu
-            ref="menu"
-            :model="items"
-            :pt="{
-                action: ({ props, state, context }) => ({ class: context.active ? 'bg-primary-200' : context.focused ? 'bg-primary-300' : undefined })
-            }"
-        />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'File',
-                    icon: 'pi pi-fw pi-file',
-                    items: [
-                        {
-                            label: 'New',
-                            icon: 'pi pi-fw pi-plus',
-                            items: [
-                                {
-                                    label: 'Bookmark',
-                                    icon: 'pi pi-fw pi-bookmark'
-                                },
-                                {
-                                    label: 'Video',
-                                    icon: 'pi pi-fw pi-video'
-                                }
-                            ]
-                        },
-                        {
-                            label: 'Delete',
-                            icon: 'pi pi-fw pi-trash'
-                        },
-                        {
-                            separator: true
-                        },
-                        {
-                            label: 'Export',
-                            icon: 'pi pi-fw pi-external-link'
-                        }
-                    ]
-                },
-                {
-                    label: 'Edit',
-                    icon: 'pi pi-fw pi-pencil',
-                    items: [
-                        {
-                            label: 'Left',
-                            icon: 'pi pi-fw pi-align-left'
-                        },
-                        {
-                            label: 'Right',
-                            icon: 'pi pi-fw pi-align-right'
-                        },
-                        {
-                            label: 'Center',
-                            icon: 'pi pi-fw pi-align-center'
-                        },
-                        {
-                            label: 'Justify',
-                            icon: 'pi pi-fw pi-align-justify'
-                        }
-                    ]
-                },
-                {
-                    label: 'Users',
-                    icon: 'pi pi-fw pi-user',
-                    items: [
-                        {
-                            label: 'New',
-                            icon: 'pi pi-fw pi-user-plus'
-                        },
-                        {
-                            label: 'Delete',
-                            icon: 'pi pi-fw pi-user-minus'
-                        },
-                        {
-                            label: 'Search',
-                            icon: 'pi pi-fw pi-users',
-                            items: [
-                                {
-                                    label: 'Filter',
-                                    icon: 'pi pi-fw pi-filter',
-                                    items: [
-                                        {
-                                            label: 'Print',
-                                            icon: 'pi pi-fw pi-print'
-                                        }
-                                    ]
-                                },
-                                {
-                                    icon: 'pi pi-fw pi-bars',
-                                    label: 'List'
-                                }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    label: 'Events',
-                    icon: 'pi pi-fw pi-calendar',
-                    items: [
-                        {
-                            label: 'Edit',
-                            icon: 'pi pi-fw pi-pencil',
-                            items: [
-                                {
-                                    label: 'Save',
-                                    icon: 'pi pi-fw pi-calendar-plus'
-                                },
-                                {
-                                    label: 'Delete',
-                                    icon: 'pi pi-fw pi-calendar-minus'
-                                }
-                            ]
-                        },
-                        {
-                            label: 'Archive',
-                            icon: 'pi pi-fw pi-calendar-times',
-                            items: [
-                                {
-                                    label: 'Remove',
-                                    icon: 'pi pi-fw pi-calendar-minus'
-                                }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    separator: true
-                },
-                {
-                    label: 'Quit',
-                    icon: 'pi pi-fw pi-power-off'
-                }
-            ]
-        };
-    },
-    methods: {
-        onImageRightClick(event) {
-            this.$refs.menu.show(event);
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <img alt="Logo" src="https://primefaces.org/cdn/primevue/images/nature/nature3.jpg" @contextmenu="onImageRightClick" class="w-full md:w-auto" aria-haspopup="true" />
-        <ContextMenu
-            ref="menu"
-            :model="items"
-            :pt="{
-                action: ({ props, state, context }) => ({ class: context.active ? 'bg-primary-200' : context.focused ? 'bg-primary-300' : undefined })
-            }"
-        />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const menu = ref();
-const items = ref([
-    {
-        label: 'File',
-        icon: 'pi pi-fw pi-file',
-        items: [
-            {
-                label: 'New',
-                icon: 'pi pi-fw pi-plus',
-                items: [
-                    {
-                        label: 'Bookmark',
-                        icon: 'pi pi-fw pi-bookmark'
-                    },
-                    {
-                        label: 'Video',
-                        icon: 'pi pi-fw pi-video'
-                    }
-                ]
-            },
-            {
-                label: 'Delete',
-                icon: 'pi pi-fw pi-trash'
-            },
-            {
-                separator: true
-            },
-            {
-                label: 'Export',
-                icon: 'pi pi-fw pi-external-link'
-            }
-        ]
-    },
-    {
-        label: 'Edit',
-        icon: 'pi pi-fw pi-pencil',
-        items: [
-            {
-                label: 'Left',
-                icon: 'pi pi-fw pi-align-left'
-            },
-            {
-                label: 'Right',
-                icon: 'pi pi-fw pi-align-right'
-            },
-            {
-                label: 'Center',
-                icon: 'pi pi-fw pi-align-center'
-            },
-            {
-                label: 'Justify',
-                icon: 'pi pi-fw pi-align-justify'
-            }
-        ]
-    },
-    {
-        label: 'Users',
-        icon: 'pi pi-fw pi-user',
-        items: [
-            {
-                label: 'New',
-                icon: 'pi pi-fw pi-user-plus'
-            },
-            {
-                label: 'Delete',
-                icon: 'pi pi-fw pi-user-minus'
-            },
-            {
-                label: 'Search',
-                icon: 'pi pi-fw pi-users',
-                items: [
-                    {
-                        label: 'Filter',
-                        icon: 'pi pi-fw pi-filter',
-                        items: [
-                            {
-                                label: 'Print',
-                                icon: 'pi pi-fw pi-print'
-                            }
-                        ]
-                    },
-                    {
-                        icon: 'pi pi-fw pi-bars',
-                        label: 'List'
-                    }
-                ]
-            }
-        ]
-    },
-    {
-        label: 'Events',
-        icon: 'pi pi-fw pi-calendar',
-        items: [
-            {
-                label: 'Edit',
-                icon: 'pi pi-fw pi-pencil',
-                items: [
-                    {
-                        label: 'Save',
-                        icon: 'pi pi-fw pi-calendar-plus'
-                    },
-                    {
-                        label: 'Delete',
-                        icon: 'pi pi-fw pi-calendar-minus'
-                    }
-                ]
-            },
-            {
-                label: 'Archive',
-                icon: 'pi pi-fw pi-calendar-times',
-                items: [
-                    {
-                        label: 'Remove',
-                        icon: 'pi pi-fw pi-calendar-minus'
-                    }
-                ]
-            }
-        ]
-    },
-    {
-        separator: true
-    },
-    {
-        label: 'Quit',
-        icon: 'pi pi-fw pi-power-off'
-    }
-]);
-
-const onImageRightClick = (event) => {
-    menu.value.show(event);
-};
-
-<\/script>
-`
-            }
-        };
-    },
-    methods: {
-        onImageRightClick(event) {
-            this.$refs.menu.show(event);
-        }
-    }
-};
-</script>

doc/contextmenu/pt/index.vue

@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'ContextMenu PT Options',
                     component: DocApiTable,
                     data: getPTOption('ContextMenu')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };

doc/datatable/pt/PTDoc.vue

@@ -1,259 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card">
-            <DataTable
-                :value="products"
-                sortMode="multiple"
-                :pt="{
-                    table: { style: { minWidth: '50rem' } }
-                }"
-            >
-                <Column
-                    field="code"
-                    header="Code"
-                    sortable
-                    :pt="{
-                        sortBadge: { class: 'bg-primary' },
-                        headerCell: { style: { width: '25%' } }
-                    }"
-                />
-                <Column
-                    field="name"
-                    header="Name"
-                    sortable
-                    :pt="{
-                        sortBadge: { class: 'bg-primary' },
-                        headerCell: { style: { width: '25%' } }
-                    }"
-                />
-                <Column
-                    field="category"
-                    header="Category"
-                    sortable
-                    :pt="{
-                        sortBadge: { class: 'bg-primary' },
-                        headerCell: { style: { width: '25%' } }
-                    }"
-                />
-                <Column
-                    field="quantity"
-                    header="Quantity"
-                    sortable
-                    :pt="{
-                        sortBadge: { class: 'bg-primary' },
-                        headerCell: { style: { width: '25%' } }
-                    }"
-                />
-            </DataTable>
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" :service="['ProductService']" />
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null,
-            code: {
-                basic: `
-<DataTable
-    :value="products"
-    sortMode="multiple"
-    :pt="{
-        table: { style: { minWidth: '50rem' } }
-    }"
->
-    <Column
-        field="code"
-        header="Code"
-        sortable
-        :pt="{
-            sortBadge: { class: 'bg-primary' },
-            headerCell: { style: { width: '25%' } }
-        }"
-    />
-    <Column
-        field="name"
-        header="Name"
-        sortable
-        :pt="{
-            sortBadge: { class: 'bg-primary' },
-            headerCell: { style: { width: '25%' } }
-        }"
-    />
-    <Column
-        field="category"
-        header="Category"
-        sortable
-        :pt="{
-            sortBadge: { class: 'bg-primary' },
-            headerCell: { style: { width: '25%' } }
-        }"
-    />
-    <Column
-        field="quantity"
-        header="Quantity"
-        sortable
-        :pt="{
-            sortBadge: { class: 'bg-primary' },
-            headerCell: { style: { width: '25%' } }
-        }"
-    />
-</DataTable>
-`,
-                options: `
-<template>
-    <div class="card">
-        <DataTable
-            :value="products"
-            sortMode="multiple"
-            :pt="{
-                table: { style: { minWidth: '50rem' } }
-            }"
-        >
-            <Column
-                field="code"
-                header="Code"
-                sortable
-                :pt="{
-                    sortBadge: { class: 'bg-primary' },
-                    headerCell: { style: { width: '25%' } }
-                }"
-            />
-            <Column
-                field="name"
-                header="Name"
-                sortable
-                :pt="{
-                    sortBadge: { class: 'bg-primary' },
-                    headerCell: { style: { width: '25%' } }
-                }"
-            />
-            <Column
-                field="category"
-                header="Category"
-                sortable
-                :pt="{
-                    sortBadge: { class: 'bg-primary' },
-                    headerCell: { style: { width: '25%' } }
-                }"
-            />
-            <Column
-                field="quantity"
-                header="Quantity"
-                sortable
-                :pt="{
-                    sortBadge: { class: 'bg-primary' },
-                    headerCell: { style: { width: '25%' } }
-                }"
-            />
-        </DataTable>
-    </div>
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null
-        };
-    },
-    mounted() {
-        ProductService.getProductsMini().then((data) => (this.products = data));
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <DataTable
-            :value="products"
-            sortMode="multiple"
-            :pt="{
-                table: { style: { minWidth: '50rem' } }
-            }"
-        >
-            <Column
-                field="code"
-                header="Code"
-                sortable
-                :pt="{
-                    sortBadge: { class: 'bg-primary' },
-                    headerCell: { style: { width: '25%' } }
-                }"
-            />
-            <Column
-                field="name"
-                header="Name"
-                sortable
-                :pt="{
-                    sortBadge: { class: 'bg-primary' },
-                    headerCell: { style: { width: '25%' } }
-                }"
-            />
-            <Column
-                field="category"
-                header="Category"
-                sortable
-                :pt="{
-                    sortBadge: { class: 'bg-primary' },
-                    headerCell: { style: { width: '25%' } }
-                }"
-            />
-            <Column
-                field="quantity"
-                header="Quantity"
-                sortable
-                :pt="{
-                    sortBadge: { class: 'bg-primary' },
-                    headerCell: { style: { width: '25%' } }
-                }"
-            />
-        </DataTable>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { ProductService } from '@/service/ProductService';
-
-onMounted(() => {
-    ProductService.getProductsMini().then((data) => (products.value = data));
-});
-
-const products = ref();
-
-<\/script>
-`,
-                data: `
-{
-    id: '1000',
-    code: 'f230fh0g3',
-    name: 'Bamboo Watch',
-    description: 'Product Description',
-    image: 'bamboo-watch.jpg',
-    price: 65,
-    category: 'Accessories',
-    quantity: 24,
-    inventoryStatus: 'INSTOCK',
-    rating: 5
-},
-...
-        `
-            }
-        };
-    },
-    methods: {
-        loadDemoData() {
-            ProductService.getProductsMini().then((data) => (this.products = data));
-        }
-    }
-};
-</script>

doc/datatable/pt/index.vue

@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -46,11 +45,6 @@ export default {
                     label: 'Row PT Options',
                     component: DocApiTable,
                     data: getPTOption('Row')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };

doc/dataview/pt/PTDoc.vue

@@ -1,417 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <div class="card">
-        <DataView
-            :value="products"
-            :layout="layout"
-            :pt="{
-                grid: { class: 'surface-ground' }
-            }"
-        >
-            <template #header>
-                <div class="flex justify-content-end">
-                    <DataViewLayoutOptions
-                        v-model="layout"
-                        :pt="{
-                            listButton: ({ props }) => ({ class: props.modelValue === 'list' ? 'bg-teal-400 border-teal-400' : 'undefined' }),
-                            gridButton: ({ props }) => ({ class: props.modelValue === 'grid' ? 'bg-teal-400 border-teal-400' : 'undefined' })
-                        }"
-                    />
-                </div>
-            </template>
-
-            <template #list="slotProps">
-                <div class="grid grid-nogutter">
-                    <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
-                        <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }">
-                            <img class="w-9 sm:w-16rem xl:w-10rem block xl:block mx-auto border-round" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" />
-                            <div class="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
-                                <div class="flex flex-column align-items-center sm:align-items-start gap-3">
-                                    <div class="text-2xl font-bold text-900">{{ item.name }}</div>
-                                    <Rating :modelValue="item.rating" readonly :cancel="false"></Rating>
-                                    <div class="flex align-items-center gap-3">
-                                        <span class="flex align-items-center gap-2">
-                                            <i class="pi pi-tag"></i>
-                                            <span class="font-semibold">{{ item.category }}</span>
-                                        </span>
-                                        <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
-                                    </div>
-                                </div>
-                                <div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
-                                    <span class="text-2xl font-semibold">${{ item.price }}</span>
-                                    <Button icon="pi pi-shopping-cart" rounded :disabled="item.inventoryStatus === 'OUTOFSTOCK'"></Button>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </template>
-
-            <template #grid="slotProps">
-                <div class="grid grid-nogutter">
-                    <div v-for="(item, index) in slotProps.items" :key="index" class="col-12 sm:col-6 lg:col-12 xl:col-4 p-2">
-                        <div class="p-4 border-1 surface-border surface-card border-round">
-                            <div class="flex flex-wrap align-items-center justify-content-between gap-2">
-                                <div class="flex align-items-center gap-2">
-                                    <i class="pi pi-tag"></i>
-                                    <span class="font-semibold">{{ item.category }}</span>
-                                </div>
-                                <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
-                            </div>
-                            <div class="flex flex-column align-items-center gap-3 py-5">
-                                <img class="w-9 border-round" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" />
-                                <div class="text-2xl font-bold">{{ item.name }}</div>
-                                <Rating value="{product.rating}" readonly :cancel="false"></Rating>
-                            </div>
-                            <div class="flex align-items-center justify-content-between">
-                                <span class="text-2xl font-semibold">${{ item.price }}</span>
-                                <Button icon="pi pi-shopping-cart" rounded :disabled="item.inventoryStatus === 'OUTOFSTOCK'"></Button>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </template>
-        </DataView>
-    </div>
-    <DocSectionCode :code="code" :service="['ProductService']" />
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null,
-            layout: 'grid',
-            code: {
-                basic: `
-<DataView
-    :value="products"
-    :layout="layout"
-    :pt="{
-        grid: { class: 'surface-ground' }
-    }"
->
-    <template #header>
-        <div class="flex justify-content-end">
-            <DataViewLayoutOptions
-                v-model="layout"
-                :pt="{
-                    listButton: ({ props }) => ({ class: props.modelValue === 'list' ? 'bg-teal-400 border-teal-400' : 'undefined' }),
-                    gridButton: ({ props }) => ({ class: props.modelValue === 'grid' ? 'bg-teal-400 border-teal-400' : 'undefined' })
-                }"
-            />
-        </div>
-    </template>
-
-    <template #list="slotProps">
-        <div class="grid grid-nogutter">
-            <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
-                <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }">
-                    <img class="w-9 sm:w-16rem xl:w-10rem block xl:block mx-auto border-round" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
-                    <div class="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
-                        <div class="flex flex-column align-items-center sm:align-items-start gap-3">
-                            <div class="text-2xl font-bold text-900">{{ item.name }}</div>
-                            <Rating :modelValue="item.rating" readonly :cancel="false"></Rating>
-                            <div class="flex align-items-center gap-3">
-                                <span class="flex align-items-center gap-2">
-                                    <i class="pi pi-tag"></i>
-                                    <span class="font-semibold">{{ item.category }}</span>
-                                </span>
-                                <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
-                            </div>
-                        </div>
-                        <div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
-                            <span class="text-2xl font-semibold">\${{ item.price }}</span>
-                            <Button icon="pi pi-shopping-cart" rounded :disabled="item.inventoryStatus === 'OUTOFSTOCK'"></Button>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </template>
-
-    <template #grid="slotProps">
-        <div class="grid grid-nogutter">
-            <div v-for="(item, index) in slotProps.items" :key="index" class="col-12 sm:col-6 lg:col-12 xl:col-4 p-2">
-                <div class="p-4 border-1 surface-border surface-card border-round">
-                    <div class="flex flex-wrap align-items-center justify-content-between gap-2">
-                        <div class="flex align-items-center gap-2">
-                            <i class="pi pi-tag"></i>
-                            <span class="font-semibold">{{ item.category }}</span>
-                        </div>
-                        <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
-                    </div>
-                    <div class="flex flex-column align-items-center gap-3 py-5">
-                        <img class="w-9 border-round" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
-                        <div class="text-2xl font-bold">{{ item.name }}</div>
-                        <Rating value="{product.rating}" readonly :cancel="false"></Rating>
-                    </div>
-                    <div class="flex align-items-center justify-content-between">
-                        <span class="text-2xl font-semibold">\${{ item.price }}</span>
-                        <Button icon="pi pi-shopping-cart" rounded :disabled="item.inventoryStatus === 'OUTOFSTOCK'"></Button>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </template>
-</DataView>
-`,
-                options: `
-<template>
-    <div class="card">
-        <DataView
-            :value="products"
-            :layout="layout"
-            :pt="{
-                grid: { class: 'surface-ground' }
-            }"
-        >
-            <template #header>
-                <div class="flex justify-content-end">
-                    <DataViewLayoutOptions
-                        v-model="layout"
-                        :pt="{
-                            listButton: ({ props }) => ({ class: props.modelValue === 'list' ? 'bg-teal-400 border-teal-400' : 'undefined' }),
-                            gridButton: ({ props }) => ({ class: props.modelValue === 'grid' ? 'bg-teal-400 border-teal-400' : 'undefined' })
-                        }"
-                    />
-                </div>
-            </template>
-
-            <template #list="slotProps">
-                <div class="grid grid-nogutter">
-                    <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
-                        <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }">
-                            <img class="w-9 sm:w-16rem xl:w-10rem block xl:block mx-auto border-round" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
-                            <div class="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
-                                <div class="flex flex-column align-items-center sm:align-items-start gap-3">
-                                    <div class="text-2xl font-bold text-900">{{ item.name }}</div>
-                                    <Rating :modelValue="item.rating" readonly :cancel="false"></Rating>
-                                    <div class="flex align-items-center gap-3">
-                                        <span class="flex align-items-center gap-2">
-                                            <i class="pi pi-tag"></i>
-                                            <span class="font-semibold">{{ item.category }}</span>
-                                        </span>
-                                        <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
-                                    </div>
-                                </div>
-                                <div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
-                                    <span class="text-2xl font-semibold">\${{ item.price }}</span>
-                                    <Button icon="pi pi-shopping-cart" rounded :disabled="item.inventoryStatus === 'OUTOFSTOCK'"></Button>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </template>
-
-            <template #grid="slotProps">
-                <div class="grid grid-nogutter">
-                    <div v-for="(item, index) in slotProps.items" :key="index" class="col-12 sm:col-6 lg:col-12 xl:col-4 p-2">
-                        <div class="p-4 border-1 surface-border surface-card border-round">
-                            <div class="flex flex-wrap align-items-center justify-content-between gap-2">
-                                <div class="flex align-items-center gap-2">
-                                    <i class="pi pi-tag"></i>
-                                    <span class="font-semibold">{{ item.category }}</span>
-                                </div>
-                                <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
-                            </div>
-                            <div class="flex flex-column align-items-center gap-3 py-5">
-                                <img class="w-9 border-round" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
-                                <div class="text-2xl font-bold">{{ item.name }}</div>
-                                <Rating value="{product.rating}" readonly :cancel="false"></Rating>
-                            </div>
-                            <div class="flex align-items-center justify-content-between">
-                                <span class="text-2xl font-semibold">\${{ item.price }}</span>
-                                <Button icon="pi pi-shopping-cart" rounded :disabled="item.inventoryStatus === 'OUTOFSTOCK'"></Button>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </template>
-        </DataView>
-    </div>
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null,
-            layout: 'grid'
-        }
-    },
-    mounted() {
-        ProductService.getProducts().then((data) => (this.products = data.slice(0, 6)));
-    },
-    methods: {
-        getSeverity(product) {
-            switch (product.inventoryStatus) {
-                case 'INSTOCK':
-                    return 'success';
-
-                case 'LOWSTOCK':
-                    return 'warning';
-
-                case 'OUTOFSTOCK':
-                    return 'danger';
-
-                default:
-                    return null;
-            }
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <DataView
-            :value="products"
-            :layout="layout"
-            :pt="{
-                grid: { class: 'surface-ground' }
-            }"
-        >
-            <template #header>
-                <div class="flex justify-content-end">
-                    <DataViewLayoutOptions
-                        v-model="layout"
-                        :pt="{
-                            listButton: ({ props }) => ({ class: props.modelValue === 'list' ? 'bg-teal-400 border-teal-400' : 'undefined' }),
-                            gridButton: ({ props }) => ({ class: props.modelValue === 'grid' ? 'bg-teal-400 border-teal-400' : 'undefined' })
-                        }"
-                    />
-                </div>
-            </template>
-
-            <template #list="slotProps">
-                <div class="grid grid-nogutter">
-                    <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
-                        <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }">
-                            <img class="w-9 sm:w-16rem xl:w-10rem block xl:block mx-auto border-round" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
-                            <div class="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
-                                <div class="flex flex-column align-items-center sm:align-items-start gap-3">
-                                    <div class="text-2xl font-bold text-900">{{ item.name }}</div>
-                                    <Rating :modelValue="item.rating" readonly :cancel="false"></Rating>
-                                    <div class="flex align-items-center gap-3">
-                                        <span class="flex align-items-center gap-2">
-                                            <i class="pi pi-tag"></i>
-                                            <span class="font-semibold">{{ item.category }}</span>
-                                        </span>
-                                        <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
-                                    </div>
-                                </div>
-                                <div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
-                                    <span class="text-2xl font-semibold">\${{ item.price }}</span>
-                                    <Button icon="pi pi-shopping-cart" rounded :disabled="item.inventoryStatus === 'OUTOFSTOCK'"></Button>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </template>
-
-            <template #grid="slotProps">
-                <div class="grid grid-nogutter">
-                    <div v-for="(item, index) in slotProps.items" :key="index" class="col-12 sm:col-6 lg:col-12 xl:col-4 p-2">
-                        <div class="p-4 border-1 surface-border surface-card border-round">
-                            <div class="flex flex-wrap align-items-center justify-content-between gap-2">
-                                <div class="flex align-items-center gap-2">
-                                    <i class="pi pi-tag"></i>
-                                    <span class="font-semibold">{{ item.category }}</span>
-                                </div>
-                                <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
-                            </div>
-                            <div class="flex flex-column align-items-center gap-3 py-5">
-                                <img class="w-9 border-round" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
-                                <div class="text-2xl font-bold">{{ item.name }}</div>
-                                <Rating value="{product.rating}" readonly :cancel="false"></Rating>
-                            </div>
-                            <div class="flex align-items-center justify-content-between">
-                                <span class="text-2xl font-semibold">\${{ item.price }}</span>
-                                <Button icon="pi pi-shopping-cart" rounded :disabled="item.inventoryStatus === 'OUTOFSTOCK'"></Button>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </template>
-        </DataView>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from "vue";
-import { ProductService } from '@/service/ProductService';
-
-onMounted(() => {
-    ProductService.getProducts().then((data) => (products.value = data.slice(0, 6)));
-});
-
-const products = ref();
-const layout = ref('grid');
-
-const getSeverity = (product) => {
-    switch (product.inventoryStatus) {
-        case 'INSTOCK':
-            return 'success';
-
-        case 'LOWSTOCK':
-            return 'warning';
-
-        case 'OUTOFSTOCK':
-            return 'danger';
-
-        default:
-            return null;
-    }
-}
-
-<\/script>
-`,
-                data: `
-/* ProductService */
-{
-    id: '1000',
-    code: 'f230fh0g3',
-    name: 'Bamboo Watch',
-    description: 'Product Description',
-    image: 'bamboo-watch.jpg',
-    price: 65,
-    category: 'Accessories',
-    quantity: 24,
-    inventoryStatus: 'INSTOCK',
-    rating: 5
-},
-...
-        `
-            }
-        };
-    },
-    mounted() {
-        ProductService.getProducts().then((data) => (this.products = data.slice(0, 6)));
-    },
-    methods: {
-        getSeverity(product) {
-            switch (product.inventoryStatus) {
-                case 'INSTOCK':
-                    return 'success';
-
-                case 'LOWSTOCK':
-                    return 'warning';
-
-                case 'OUTOFSTOCK':
-                    return 'danger';
-
-                default:
-                    return null;
-            }
-        }
-    }
-};
-</script>

doc/dataview/pt/index.vue

@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -34,11 +33,6 @@ export default {
                     label: 'DataViewLayoutOptions PT Options',
                     component: DocApiTable,
                     data: getPTOption('DataViewLayoutOptions')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };

doc/dialog/pt/PTDoc.vue

@@ -1,103 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <div class="card flex justify-content-center">
-        <Button label="Show" icon="pi pi-external-link" @click="visible = true" />
-
-        <Dialog
-            v-model:visible="visible"
-            modal
-            header="Header"
-            :pt="{
-                root: { class: 'w-12 sm:w-9 md:w-6' }
-            }"
-        >
-            <p>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-                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>
-        </Dialog>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            visible: false,
-            code: {
-                basic: `
-<Dialog
-    v-model:visible="visible"
-    modal
-    header="Header"
-    :pt="{
-        root: { class: 'w-12 sm:w-9 md:w-6' }
-    }"
->
-    <p>Lorem ipsum </p>
-</Dialog>
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-center">
-        <Button label="Show" icon="pi pi-external-link" @click="visible = true" />
-
-        <Dialog
-            v-model:visible="visible"
-            modal
-            header="Header"
-            :pt="{
-                root: { class: 'w-12 sm:w-9 md:w-6' }
-            }"
-        >
-            <p>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-                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>
-        </Dialog>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            visible: false
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-content-center">
-        <Button label="Show" icon="pi pi-external-link" @click="visible = true" />
-
-        <Dialog
-            v-model:visible="visible"
-            modal
-            header="Header"
-            :pt="{
-                root: { class: 'w-12 sm:w-9 md:w-6' }
-            }"
-        >
-            <p>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-                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>
-        </Dialog>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const visible = ref(false);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>

doc/dialog/pt/index.vue

@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Dialog PT Options',
                     component: DocApiTable,
                     data: getPTOption('Dialog')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };

doc/divider/pt/PTDoc.vue

@@ -1,83 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <div class="card">
-        <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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>
-
-        <Divider :pt="{ content: { class: 'text-primary' } }" align="center">
-            <b>Center</b>
-        </Divider>
-
-        <p>
-            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
-            voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-        </p>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<p>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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>
-
-<Divider :pt="{ content: { class: 'text-primary' } }" align="center">
-    <b>Center</b>
-</Divider>
-
-<p>
-    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
-    voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-</p>
-`,
-                options: `
-<template>
-    <div class="card">
-        <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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>
-
-        <Divider :pt="{ content: { class: 'text-primary' } }" align="center">
-            <b>Center</b>
-        </Divider>
-
-        <p>
-            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
-            voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-        </p>
-    </div>
-</template>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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>
-
-        <Divider :pt="{ content: { class: 'text-primary' } }" align="center">
-            <b>Center</b>
-        </Divider>
-
-        <p>
-            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
-            voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-        </p>
-    </div>
-</template>
-`
-            }
-        };
-    }
-};
-</script>

doc/divider/pt/index.vue

@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Divider PT Options',
                     component: DocApiTable,
                     data: getPTOption('Divider')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };

doc/dock/pt/PTDoc.vue

@@ -1,197 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <div class="card dock-demo">
-        <div class="dock-window">
-            <Dock :model="items" position="bottom" :pt="{ container: { style: { background: 'linear-gradient(to right,#056BAE, #673976, #056BAE)', borderRadius: '12px' } } }">
-                <template #icon="{ item }">
-                    <img :alt="item.label" :src="item.icon" style="width: 100%" />
-                </template>
-            </Dock>
-        </div>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Finder',
-                    icon: 'https://primefaces.org/cdn/primevue/images/dock/finder.svg'
-                },
-                {
-                    label: 'App Store',
-                    icon: 'https://primefaces.org/cdn/primevue/images/dock/appstore.svg'
-                },
-                {
-                    label: 'Photos',
-                    icon: 'https://primefaces.org/cdn/primevue/images/dock/photos.svg'
-                },
-                {
-                    label: 'Trash',
-                    icon: 'https://primefaces.org/cdn/primevue/images/dock/trash.png'
-                }
-            ],
-            code: {
-                basic: `
-<Dock :model="items" position="bottom"
-    :pt="{ 
-        container: {
-            style: { background: 'linear-gradient(to right,#056BAE, #673976, #056BAE)', borderRadius: '12px' }
-        }
-    }"
->
-    <template #icon="{ item }">
-        <img :alt="item.label" :src="item.icon" style="width: 100%" />
-    </template>
-</Dock>
-`,
-                options: `
-<template>
-    <div class="card dock-demo">
-        <div class="dock-window">
-            <Dock :model="items" position="bottom"
-                :pt="{ 
-                    container: {
-                        style: { background: 'linear-gradient(to right,#056BAE, #673976, #056BAE)', borderRadius: '12px' }
-                    }
-                }"
-            >
-                <template #icon="{ item }">
-                    <img :alt="item.label" :src="item.icon" style="width: 100%" />
-                </template>
-            </Dock>
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Finder',
-                    icon: 'https://primefaces.org/cdn/primevue/images/dock/finder.svg'
-                },
-                {
-                    label: 'App Store',
-                    icon: 'https://primefaces.org/cdn/primevue/images/dock/appstore.svg'
-                },
-                {
-                    label: 'Photos',
-                    icon: 'https://primefaces.org/cdn/primevue/images/dock/photos.svg'
-                },
-                {
-                    label: 'Trash',
-                    icon: 'https://primefaces.org/cdn/primevue/images/dock/trash.png'
-                }
-            ]
-        }
-    }
-}
-<\/script>
-
-<style scoped>
-.dock-demo > .dock-window {
-    width: 100%;
-    height: 450px;
-    position: relative;
-    background-image: url("https://primefaces.org/cdn/primevue/images/dock/window.jpg");
-    background-repeat: no-repeat;
-    background-size: cover;
-    z-index: 1;
-}
-
-.dock-demo > .p-dock {
-    z-index: 1000;
-}
-</style>
-`,
-                composition: `
-<template>
-    <div class="card dock-demo">
-        <div class="dock-window" style="backgroundimage: 'url(https://primefaces.org/cdn/primevue/images/dock/window.jpg))'">
-            <Dock :model="items" position="bottom"
-                :pt="{ 
-                    container: {
-                        style: { background: 'linear-gradient(to right,#056BAE, #673976, #056BAE)', borderRadius: '12px' }
-                    }
-                }"
-            >
-                <template #icon="{ item }">
-                    <img :alt="item.label" :src="item.icon" style="width: 100%" />
-                </template>
-            </Dock>
-        </div>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const items = ref([
-    {
-        label: 'Finder',
-        icon: 'https://primefaces.org/cdn/primevue/images/dock/finder.svg'
-    },
-    {
-        label: 'App Store',
-        icon: 'https://primefaces.org/cdn/primevue/images/dock/appstore.svg'
-    },
-    {
-        label: 'Photos',
-        icon: 'https://primefaces.org/cdn/primevue/images/dock/photos.svg'
-    },
-    {
-        label: 'Trash',
-        icon: 'https://primefaces.org/cdn/primevue/images/dock/trash.png'
-    }
-]);
-
-<\/script>
-
-<style scoped>
-.dock-demo > .dock-window {
-    width: 100%;
-    height: 450px;
-    position: relative;
-    background-image: url("https://primefaces.org/cdn/primevue/images/dock/window.jpg");
-    background-repeat: no-repeat;
-    background-size: cover;
-    z-index: 1;
-}
-
-.dock-demo > .p-dock {
-    z-index: 1000;
-}
-</style>
-`
-            }
-        };
-    }
-};
-</script>
-
-<style scoped>
-.dock-demo > .dock-window {
-    width: 100%;
-    height: 450px;
-    position: relative;
-    background-image: url('https://primefaces.org/cdn/primevue/images/dock/window.jpg');
-    background-repeat: no-repeat;
-    background-size: cover;
-    z-index: 1;
-}
-
-.dock-demo > .p-dock {
-    z-index: 1000;
-}
-
-.dock-demo .p-menubar {
-    padding: 0;
-    border-radius: 0;
-}
-</style>

doc/dock/pt/index.vue

@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Dock PT Options',
                     component: DocApiTable,
                     data: getPTOption('Dock')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };

doc/dropdown/pt/PTDoc.vue

@@ -1,117 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <div class="card flex justify-content-center">
-        <Dropdown
-            v-model="selectedCity"
-            :options="cities"
-            optionLabel="name"
-            placeholder="Select a City"
-            :pt="{
-                root: { class: 'w-full md:w-14rem' },
-                item: ({ props, state, context }) => ({
-                    class: context.selected ? 'bg-primary' : context.focused ? 'bg-blue-100' : undefined
-                })
-            }"
-        />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedCity: null,
-            cities: [
-                { name: 'New York', code: 'NY' },
-                { name: 'Rome', code: 'RM' },
-                { name: 'London', code: 'LDN' },
-                { name: 'Istanbul', code: 'IST' },
-                { name: 'Paris', code: 'PRS' }
-            ],
-            code: {
-                basic: `
-<Dropdown
-    v-model="selectedCity"
-    :options="cities"
-    optionLabel="name"
-    placeholder="Select a City"
-    :pt="{
-        root: { class: 'w-full md:w-14rem' },
-        item: ({ props, state, context }) => ({
-            class: context.selected ? 'bg-primary' : context.focused ? 'bg-blue-100' : undefined
-        })
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-center">
-        <Dropdown
-            v-model="selectedCity"
-            :options="cities"
-            optionLabel="name"
-            placeholder="Select a City"
-            :pt="{
-                root: { class: 'w-full md:w-14rem' },
-                item: ({ props, state, context }) => ({
-                    class: context.selected ? 'bg-primary' : context.focused ? 'bg-blue-100' : undefined
-                })
-            }"
-        />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            selectedCity: null,
-            cities: [
-                { name: 'New York', code: 'NY' },
-                { name: 'Rome', code: 'RM' },
-                { name: 'London', code: 'LDN' },
-                { name: 'Istanbul', code: 'IST' },
-                { name: 'Paris', code: 'PRS' }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-content-center">
-        <Dropdown
-            v-model="selectedCity"
-            :options="cities"
-            optionLabel="name"
-            placeholder="Select a City"
-            :pt="{
-                root: { class: 'w-full md:w-14rem' },
-                item: ({ props, state, context }) => ({
-                    class: context.selected ? 'bg-primary' : context.focused ? 'bg-blue-100' : undefined
-                })
-            }"
-        />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const selectedCity = ref();
-const cities = ref([
-    { name: 'New York', code: 'NY' },
-    { name: 'Rome', code: 'RM' },
-    { name: 'London', code: 'LDN' },
-    { name: 'Istanbul', code: 'IST' },
-    { name: 'Paris', code: 'PRS' }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>

doc/dropdown/pt/index.vue

@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Dropdown PT Options',
                     component: DocApiTable,
                     data: getPTOption('Dropdown')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };

doc/dynamicdialog/pt/PTDoc.vue

@@ -1,40 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<DynamicDialog
-    :pt="{
-        root: { class: 'w-12 sm:w-9 md:w-6' }
-    }"
-/>
-`,
-                options: `
-<template>
-    <DynamicDialog
-        :pt="{
-            root: { class: 'w-12 sm:w-9 md:w-6' }
-        }"
-    />
-</template>
-`,
-                composition: `
-<template>
-    <DynamicDialog
-        :pt="{
-            root: { class: 'w-12 sm:w-9 md:w-6' }
-        }"
-    />
-</template>
-`
-            }
-        };
-    }
-};
-</script>

doc/dynamicdialog/pt/index.vue

@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Dialog PT Options',
                     component: DocApiTable,
                     data: getPTOption('Dialog')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };

doc/editor/pt/PTDoc.vue

@@ -1,76 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <div class="card">
-        <Editor
-            v-model="value"
-            :pt="{
-                content: { style: { height: '320px' } },
-                toolbar: { class: 'surface-ground' }
-            }"
-        />
-    </div>
-    <DocSectionCode :code="code" :dependencies="{ quill: '1.3.7' }" component="Editor" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: '',
-            code: {
-                basic: `
-<Editor
-    v-model="value"
-    :pt="{
-        content: { style: { height: '320px' } },
-        toolbar: { class: 'surface-ground' }
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Editor
-            v-model="value"
-            :pt="{
-                content: { style: { height: '320px' } },
-                toolbar: { class: 'surface-ground' }
-            }"
-        />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: ''
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Editor
-            v-model="value"
-            :pt="{
-                content: { style: { height: '320px' } },
-                toolbar: { class: 'surface-ground' }
-            }"
-        />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const value = ref('');
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>

doc/editor/pt/index.vue

@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Editor PT Options',
                     component: DocApiTable,
                     data: getPTOption('Editor')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };

doc/fieldset/pt/PTDoc.vue

@@ -1,76 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <div class="card">
-        <Fieldset legend="Header" :toggleable="true" :pt="{ legend: { class: 'bg-primary' }, legendTitle: { class: 'text-white' }, togglerIcon: { class: 'text-white' } }">
-            <p>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-                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>
-        </Fieldset>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Fieldset
-    legend="Header"
-    :toggleable="true"
-    :pt="{
-        legend: { class: 'bg-primary' },
-        legendTitle: { class: 'text-white' },
-        togglerIcon: { class: 'text-white' }
-    }">
-    <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-        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>
-</Fieldset>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Fieldset
-            legend="Header"
-            :toggleable="true"
-            :pt="{
-                legend: { class: 'bg-primary' },
-                legendTitle: { class: 'text-white' },
-                togglerIcon: { class: 'text-white' }
-            }">
-            <p>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-                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>
-        </Fieldset>
-    </div>
-</template>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Fieldset
-            legend="Header"
-            :toggleable="true"
-            :pt="{
-                legend: { class: 'bg-primary' },
-                legendTitle: { class: 'text-white' },
-                togglerIcon: { class: 'text-white' }
-            }">
-            <p>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-                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>
-        </Fieldset>
-    </div>
-</template>
-`
-            }
-        };
-    }
-};
-</script>

doc/fieldset/pt/index.vue

@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Fieldset PT Options',
                     component: DocApiTable,
                     data: getPTOption('Fieldset')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };

doc/fileupload/pt/PTDoc.vue

@@ -1,117 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <div class="card">
-        <FileUpload
-            name="demo[]"
-            url="./upload.php"
-            @upload="onAdvancedUpload($event)"
-            :multiple="true"
-            accept="image/*"
-            :maxFileSize="1000000"
-            :pt="{
-                content: { class: 'surface-ground' }
-            }"
-        >
-            <template #empty>
-                <p>Drag and drop files to here to upload.</p>
-            </template>
-        </FileUpload>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<FileUpload
-    name="demo[]"
-    url="./upload.php"
-    @upload="onAdvancedUpload($event)"
-    :multiple="true"
-    accept="image/*"
-    :maxFileSize="1000000"
-    :pt="{
-        content: { class: 'surface-ground' }
-    }"
->
-    <template #empty>
-        <p>Drag and drop files to here to upload.</p>
-    </template>
-</FileUpload>
-`,
-                options: `
-<template>
-    <div class="card">
-        <FileUpload
-            name="demo[]"
-            url="./upload.php"
-            @upload="onAdvancedUpload($event)"
-            :multiple="true"
-            accept="image/*"
-            :maxFileSize="1000000"
-            :pt="{
-                content: { class: 'surface-ground' }
-            }"
-        >
-            <template #empty>
-                <p>Drag and drop files to here to upload.</p>
-            </template>
-        </FileUpload>
-        <Toast />
-    </div>
-</template>
-
-<script>
-export default {
-    methods: {
-        onAdvancedUpload() {
-            this.$toast.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 });
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <FileUpload
-            name="demo[]"
-            url="./upload.php"
-            @upload="onAdvancedUpload($event)"
-            :multiple="true"
-            accept="image/*"
-            :maxFileSize="1000000"
-            :pt="{
-                content: { class: 'surface-ground' }
-            }"
-        >
-            <template #empty>
-                <p>Drag and drop files to here to upload.</p>
-            </template>
-        </FileUpload>
-        <Toast />
-    </div>
-</template>
-
-<script setup>
-import { useToast } from "primevue/usetoast";
-const toast = useToast();
-
-const onAdvancedUpload = () => {
-    toast.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 });
-};
-<\/script>
-`
-            }
-        };
-    },
-    methods: {
-        onAdvancedUpload() {
-            this.$toast.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 });
-        }
-    }
-};
-</script>

doc/fileupload/pt/index.vue

@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'FileUpload PT Options',
                     component: DocApiTable,
                     data: getPTOption('FileUpload')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };

doc/galleria/AdvancedDoc.vue

@@ -2,52 +2,54 @@
     <DocSectionText v-bind="$attrs">
         <p>Advanced Galleria implementation with a custom UI.</p>
     </DocSectionText>
-    <div class="card">
-        <Galleria
-            ref="galleria"
-            v-model:activeIndex="activeIndex"
-            :value="images"
-            :numVisible="5"
-            containerStyle="max-width: 640px"
-            :showThumbnails="showThumbnails"
-            :showItemNavigators="true"
-            :showItemNavigatorsOnHover="true"
-            :circular="true"
-            :autoPlay="isAutoPlay"
-            :transitionInterval="3000"
-            :responsiveOptions="responsiveOptions"
-            :pt="{
-                root: {
-                    class: [{ 'flex flex-column': fullScreen }]
-                },
-                content: {
-                    class: ['relative', { 'flex-1 justify-content-center': fullScreen }]
-                },
-                thumbnailwrapper: 'absolute w-full left-0 bottom-0'
-            }"
-        >
-            <template #item="slotProps">
-                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" :style="[{ width: !fullScreen ? '100%' : '', display: !fullScreen ? 'block' : '' }]" />
-            </template>
-            <template #thumbnail="slotProps">
-                <div class="grid grid-nogutter justify-content-center">
-                    <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
-                </div>
-            </template>
-            <template #footer>
-                <div class="flex align-items-center bg-black-alpha-90 text-white">
-                    <Button icon="pi pi-list" @click="onThumbnailButtonClick" :pt="{ root: { class: 'border-none border-noround hover:bg-white-alpha-10 text-white', style: 'background: transparent' } }" />
-                    <Button :icon="slideButtonIcon" @click="toggleAutoSlide" :pt="{ root: { class: 'border-none border-noround hover:bg-white-alpha-10 text-white', style: 'background: transparent' } }" />
-                    <span v-if="images" class="title-container">
-                        <span class="text-sm p-3">{{ activeIndex + 1 }}/{{ images.length }}</span>
-                        <span class="font-bold text-sm p-3">{{ images[activeIndex].title }}</span>
-                        <span class="text-sm p-3">{{ images[activeIndex].alt }}</span>
-                    </span>
-                    <Button :icon="fullScreenIcon" @click="toggleFullScreen" :pt="{ root: { class: 'border-none border-noround ml-auto hover:bg-white-alpha-10 text-white', style: 'background: transparent' } }" />
-                </div>
-            </template>
-        </Galleria>
-    </div>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <Galleria
+                ref="galleria"
+                v-model:activeIndex="activeIndex"
+                :value="images"
+                :numVisible="5"
+                containerStyle="max-width: 640px"
+                :showThumbnails="showThumbnails"
+                :showItemNavigators="true"
+                :showItemNavigatorsOnHover="true"
+                :circular="true"
+                :autoPlay="isAutoPlay"
+                :transitionInterval="3000"
+                :responsiveOptions="responsiveOptions"
+                :pt="{
+                    root: {
+                        class: [{ 'flex flex-column': fullScreen }]
+                    },
+                    content: {
+                        class: ['relative', { 'flex-1 justify-content-center': fullScreen }]
+                    },
+                    thumbnailwrapper: 'absolute w-full left-0 bottom-0'
+                }"
+            >
+                <template #item="slotProps">
+                    <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" :style="[{ width: !fullScreen ? '100%' : '', display: !fullScreen ? 'block' : '' }]" />
+                </template>
+                <template #thumbnail="slotProps">
+                    <div class="grid grid-nogutter justify-content-center">
+                        <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
+                    </div>
+                </template>
+                <template #footer>
+                    <div class="flex align-items-center bg-black-alpha-90 text-white">
+                        <Button icon="pi pi-list" @click="onThumbnailButtonClick" :pt="{ root: { class: 'border-none border-noround hover:bg-white-alpha-10 text-white', style: 'background: transparent' } }" />
+                        <Button :icon="slideButtonIcon" @click="toggleAutoSlide" :pt="{ root: { class: 'border-none border-noround hover:bg-white-alpha-10 text-white', style: 'background: transparent' } }" />
+                        <span v-if="images" class="title-container">
+                            <span class="text-sm p-3">{{ activeIndex + 1 }}/{{ images.length }}</span>
+                            <span class="font-bold text-sm p-3">{{ images[activeIndex].title }}</span>
+                            <span class="text-sm p-3">{{ images[activeIndex].alt }}</span>
+                        </span>
+                        <Button :icon="fullScreenIcon" @click="toggleFullScreen" :pt="{ root: { class: 'border-none border-noround ml-auto hover:bg-white-alpha-10 text-white', style: 'background: transparent' } }" />
+                    </div>
+                </template>
+            </Galleria>
+        </div>
+    </DeferredDemo>
     <DocSectionCode :code="code" :service="['PhotoService']" :dependencies="{ sass: '1.45.0', 'sass-loader': '8.0.2' }" />
 </template>
 
@@ -424,11 +426,11 @@ const slideButtonIcon = computed(() => {
             }
         };
     },
-    mounted() {
-        PhotoService.getImages().then((data) => (this.images = data));
-        this.bindDocumentListeners();
-    },
     methods: {
+        loadDemoData() {
+            PhotoService.getImages().then((data) => (this.images = data));
+            this.bindDocumentListeners();
+        },
         toggleAutoSlide() {
             this.isAutoPlay = !this.isAutoPlay;
         },

doc/galleria/AutoPlayDoc.vue

@@ -2,16 +2,18 @@
     <DocSectionText v-bind="$attrs">
         <p>A slideshow implementation is defined by adding <i>circular</i> and <i>autoPlay</i> properties.</p>
     </DocSectionText>
-    <div class="card">
-        <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px" :circular="true" :autoPlay="true" :transitionInterval="2000">
-            <template #item="slotProps">
-                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
-            </template>
-            <template #thumbnail="slotProps">
-                <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
-            </template>
-        </Galleria>
-    </div>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px" :circular="true" :autoPlay="true" :transitionInterval="2000">
+                <template #item="slotProps">
+                    <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+                </template>
+                <template #thumbnail="slotProps">
+                    <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
+                </template>
+            </Galleria>
+        </div>
+    </DeferredDemo>
     <DocSectionCode :code="code" :service="['PhotoService']" />
 </template>
 
@@ -133,8 +135,10 @@ const responsiveOptions = ref([
             }
         };
     },
-    mounted() {
-        PhotoService.getImages().then((data) => (this.images = data));
+    methods: {
+        loadDemoData() {
+            PhotoService.getImages().then((data) => (this.images = data));
+        }
     }
 };
 </script>

doc/galleria/BasicDoc.vue

@@ -2,16 +2,18 @@
     <DocSectionText v-bind="$attrs">
         <p>Galleria requires a <i>value</i> as a collection of images, <i>item</i> template for the higher resolution image and <i>thumbnail</i> template to display as a thumbnail.</p>
     </DocSectionText>
-    <div class="card">
-        <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
-            <template #item="slotProps">
-                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
-            </template>
-            <template #thumbnail="slotProps">
-                <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
-            </template>
-        </Galleria>
-    </div>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
+                <template #item="slotProps">
+                    <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
+                </template>
+                <template #thumbnail="slotProps">
+                    <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
+                </template>
+            </Galleria>
+        </div>
+    </DeferredDemo>
     <DocSectionCode :code="code" :service="['PhotoService']" />
 </template>
 
@@ -130,8 +132,10 @@ const responsiveOptions = ref([
             }
         };
     },
-    mounted() {
-        PhotoService.getImages().then((data) => (this.images = data));
+    methods: {
+        loadDemoData() {
+            PhotoService.getImages().then((data) => (this.images = data));
+        }
     }
 };
 </script>

doc/galleria/CaptionDoc.vue

@@ -2,20 +2,22 @@
     <DocSectionText v-bind="$attrs">
         <p>Description of an image is specified with the <i>caption</i> property that takes the displayed object and returns content.</p>
     </DocSectionText>
-    <div class="card">
-        <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
-            <template #item="slotProps">
-                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
-            </template>
-            <template #thumbnail="slotProps">
-                <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
-            </template>
-            <template #caption="slotProps">
-                <div class="text-xl mb-2 font-bold">{{ slotProps.item.title }}</div>
-                <p class="text-white">{{ slotProps.item.alt }}</p>
-            </template>
-        </Galleria>
-    </div>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
+                <template #item="slotProps">
+                    <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+                </template>
+                <template #thumbnail="slotProps">
+                    <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
+                </template>
+                <template #caption="slotProps">
+                    <div class="text-xl mb-2 font-bold">{{ slotProps.item.title }}</div>
+                    <p class="text-white">{{ slotProps.item.alt }}</p>
+                </template>
+            </Galleria>
+        </div>
+    </DeferredDemo>
     <DocSectionCode :code="code" :service="['PhotoService']" />
 </template>
 
@@ -146,8 +148,10 @@ const responsiveOptions = ref([
             }
         };
     },
-    mounted() {
-        PhotoService.getImages().then((data) => (this.images = data));
+    methods: {
+        loadDemoData() {
+            PhotoService.getImages().then((data) => (this.images = data));
+        }
     }
 };
 </script>

doc/galleria/ControlledDoc.vue

@@ -2,21 +2,23 @@
     <DocSectionText v-bind="$attrs">
         <p>Galleria can be controlled programmatically using a binding to <i>activeIndex</i>.</p>
     </DocSectionText>
-    <div class="card">
-        <div class="mb-3">
-            <Button icon="pi pi-minus" @click="prev" />
-            <Button icon="pi pi-plus" @click="next" severity="secondary" class="ml-2" />
-        </div>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <div class="mb-3">
+                <Button icon="pi pi-minus" @click="prev" />
+                <Button icon="pi pi-plus" @click="next" severity="secondary" class="ml-2" />
+            </div>
 
-        <Galleria v-model:activeIndex="activeIndex" :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
-            <template #item="slotProps">
-                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
-            </template>
-            <template #thumbnail="slotProps">
-                <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
-            </template>
-        </Galleria>
-    </div>
+            <Galleria v-model:activeIndex="activeIndex" :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
+                <template #item="slotProps">
+                    <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
+                </template>
+                <template #thumbnail="slotProps">
+                    <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
+                </template>
+            </Galleria>
+        </div>
+    </DeferredDemo>
     <DocSectionCode :code="code" :service="['PhotoService']" />
 </template>
 
@@ -168,10 +170,10 @@ const prev = () => {
             }
         };
     },
-    mounted() {
-        PhotoService.getImages().then((data) => (this.images = data));
-    },
     methods: {
+        loadDemoData() {
+            PhotoService.getImages().then((data) => (this.images = data));
+        },
         next() {
             this.activeIndex = this.activeIndex === this.images.length - 1 ? this.images.length - 1 : this.activeIndex + 1;
         },

doc/galleria/ResponsiveDoc.vue

@@ -2,18 +2,20 @@
     <DocSectionText v-bind="$attrs">
         <p>Settings per screen size is defined via the <i>responsiveOptions</i> property.</p>
     </DocSectionText>
-    <div class="card">
-        <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px">
-            <template #item="slotProps">
-                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
-            </template>
-            <template #thumbnail="slotProps">
-                <div class="grid grid-nogutter justify-content-center">
-                    <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
-                </div>
-            </template>
-        </Galleria>
-    </div>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px">
+                <template #item="slotProps">
+                    <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+                </template>
+                <template #thumbnail="slotProps">
+                    <div class="grid grid-nogutter justify-content-center">
+                        <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+                    </div>
+                </template>
+            </Galleria>
+        </div>
+    </DeferredDemo>
     <DocSectionCode :code="code" :service="['PhotoService']" />
 </template>
 
@@ -138,8 +140,10 @@ const responsiveOptions = ref([
             }
         };
     },
-    mounted() {
-        PhotoService.getImages().then((data) => (this.images = data));
+    methods: {
+        loadDemoData() {
+            PhotoService.getImages().then((data) => (this.images = data));
+        }
     }
 };
 </script>

doc/galleria/ThumbnailDoc.vue

@@ -2,24 +2,26 @@
     <DocSectionText v-bind="$attrs">
         <p>Thumbnails represent a smaller version of the actual content.</p>
     </DocSectionText>
-    <div class="card">
-        <div class="flex flex-wrap gap-3 mb-5">
-            <div v-for="option in positionOptions" :key="option.label" class="flex align-items-center">
-                <RadioButton v-model="position" :inputId="option.label" name="option" :value="option.value" />
-                <label :for="option.label" class="ml-2"> {{ option.label }} </label>
-            </div>
-        </div>
-        <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :thumbnailsPosition="position" containerStyle="max-width: 640px">
-            <template #item="slotProps">
-                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
-            </template>
-            <template #thumbnail="slotProps">
-                <div class="grid grid-nogutter justify-content-center">
-                    <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <div class="flex flex-wrap gap-3 mb-5">
+                <div v-for="option in positionOptions" :key="option.label" class="flex align-items-center">
+                    <RadioButton v-model="position" :inputId="option.label" name="option" :value="option.value" />
+                    <label :for="option.label" class="ml-2"> {{ option.label }} </label>
                 </div>
-            </template>
-        </Galleria>
-    </div>
+            </div>
+            <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :thumbnailsPosition="position" containerStyle="max-width: 640px">
+                <template #item="slotProps">
+                    <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+                </template>
+                <template #thumbnail="slotProps">
+                    <div class="grid grid-nogutter justify-content-center">
+                        <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+                    </div>
+                </template>
+            </Galleria>
+        </div>
+    </DeferredDemo>
     <DocSectionCode :code="code" :service="['PhotoService']" />
 </template>
 
@@ -213,8 +215,10 @@ onMounted(() => {
             }
         };
     },
-    mounted() {
-        PhotoService.getImages().then((data) => (this.images = data));
+    methods: {
+        loadDemoData() {
+            PhotoService.getImages().then((data) => (this.images = data));
+        }
     }
 };
 </script>

doc/galleria/fullscreen/CustomContentDoc.vue

@@ -2,33 +2,35 @@
     <DocSectionText v-bind="$attrs">
         <p>Using <i>activeIndex</i>, Galleria is displayed with a specific initial image.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
-        <Galleria
-            v-model:activeIndex="activeIndex"
-            v-model:visible="displayCustom"
-            :value="images"
-            :responsiveOptions="responsiveOptions"
-            :numVisible="7"
-            containerStyle="max-width: 850px"
-            :circular="true"
-            :fullScreen="true"
-            :showItemNavigators="true"
-            :showThumbnails="false"
-        >
-            <template #item="slotProps">
-                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
-            </template>
-            <template #thumbnail="slotProps">
-                <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
-            </template>
-        </Galleria>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card flex justify-content-center">
+            <Galleria
+                v-model:activeIndex="activeIndex"
+                v-model:visible="displayCustom"
+                :value="images"
+                :responsiveOptions="responsiveOptions"
+                :numVisible="7"
+                containerStyle="max-width: 850px"
+                :circular="true"
+                :fullScreen="true"
+                :showItemNavigators="true"
+                :showThumbnails="false"
+            >
+                <template #item="slotProps">
+                    <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+                </template>
+                <template #thumbnail="slotProps">
+                    <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
+                </template>
+            </Galleria>
 
-        <div v-if="images" class="grid" style="max-width: 400px">
-            <div v-for="(image, index) of images" :key="index" class="col-4">
-                <img :src="image.thumbnailImageSrc" :alt="image.alt" style="cursor: pointer" @click="imageClick(index)" />
+            <div v-if="images" class="grid" style="max-width: 400px">
+                <div v-for="(image, index) of images" :key="index" class="col-4">
+                    <img :src="image.thumbnailImageSrc" :alt="image.alt" style="cursor: pointer" @click="imageClick(index)" />
+                </div>
             </div>
         </div>
-    </div>
+    </DeferredDemo>
     <DocSectionCode :code="code" :service="['PhotoService']" />
 </template>
 
@@ -191,10 +193,10 @@ const imageClick = (index) => {
             }
         };
     },
-    mounted() {
-        PhotoService.getImages().then((data) => (this.images = data));
-    },
     methods: {
+        loadDemoData() {
+            PhotoService.getImages().then((data) => (this.images = data));
+        },
         imageClick(index) {
             this.activeIndex = index;
             this.displayCustom = true;

doc/galleria/fullscreen/WithThumbnailsDoc.vue

@@ -2,18 +2,20 @@
     <DocSectionText v-bind="$attrs">
         <p>Full screen mode is enabled by adding <i>fullScreen</i> property and and visibility is controlled with a binding to <i>visible</i> property.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
-        <Galleria v-model:visible="displayBasic" :value="images" :responsiveOptions="responsiveOptions" :numVisible="9" containerStyle="max-width: 50%" :circular="true" :fullScreen="true" :showItemNavigators="true">
-            <template #item="slotProps">
-                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
-            </template>
-            <template #thumbnail="slotProps">
-                <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
-            </template>
-        </Galleria>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card flex justify-content-center">
+            <Galleria v-model:visible="displayBasic" :value="images" :responsiveOptions="responsiveOptions" :numVisible="9" containerStyle="max-width: 50%" :circular="true" :fullScreen="true" :showItemNavigators="true">
+                <template #item="slotProps">
+                    <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+                </template>
+                <template #thumbnail="slotProps">
+                    <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
+                </template>
+            </Galleria>
 
-        <Button label="Show" icon="pi pi-external-link" @click="displayBasic = true" />
-    </div>
+            <Button label="Show" icon="pi pi-external-link" @click="displayBasic = true" />
+        </div>
+    </DeferredDemo>
     <DocSectionCode :code="code" :service="['PhotoService']" />
 </template>
 
@@ -165,8 +167,10 @@ onMounted(() => {
             }
         };
     },
-    mounted() {
-        PhotoService.getImages().then((data) => (this.images = data));
+    methods: {
+        loadDemoData() {
+            PhotoService.getImages().then((data) => (this.images = data));
+        }
     }
 };
 </script>

doc/galleria/fullscreen/WithoutThumbnailsDoc.vue

@@ -2,18 +2,20 @@
     <DocSectionText v-bind="$attrs">
         <p>Thumbnails can also be hidden in full screen mode.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
-        <Galleria v-model:visible="displayBasic" :value="images" :responsiveOptions="responsiveOptions" :numVisible="9" containerStyle="max-width: 50%" :circular="true" :fullScreen="true" :showItemNavigators="true" :showThumbnails="false">
-            <template #item="slotProps">
-                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
-            </template>
-            <template #thumbnail="slotProps">
-                <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
-            </template>
-        </Galleria>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card flex justify-content-center">
+            <Galleria v-model:visible="displayBasic" :value="images" :responsiveOptions="responsiveOptions" :numVisible="9" containerStyle="max-width: 50%" :circular="true" :fullScreen="true" :showItemNavigators="true" :showThumbnails="false">
+                <template #item="slotProps">
+                    <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+                </template>
+                <template #thumbnail="slotProps">
+                    <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
+                </template>
+            </Galleria>
 
-        <Button label="Show" icon="pi pi-external-link" @click="displayBasic = true" />
-    </div>
+            <Button label="Show" icon="pi pi-external-link" @click="displayBasic = true" />
+        </div>
+    </DeferredDemo>
     <DocSectionCode :code="code" :service="['PhotoService']" />
 </template>
 
@@ -165,8 +167,10 @@ onMounted(() => {
             }
         };
     },
-    mounted() {
-        PhotoService.getImages().then((data) => (this.images = data));
+    methods: {
+        loadDemoData() {
+            PhotoService.getImages().then((data) => (this.images = data));
+        }
     }
 };
 </script>

doc/galleria/indicator/ClickEventDoc.vue

@@ -2,13 +2,15 @@
     <DocSectionText v-bind="$attrs">
         <p>Indicators are displayed at the bottom by enabling <i>showIndicators</i> property and interacted with the click event by default.</p>
     </DocSectionText>
-    <div class="card">
-        <Galleria :value="images" :numVisible="5" containerStyle="max-width: 640px" :showThumbnails="false" :showIndicators="true">
-            <template #item="slotProps">
-                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
-            </template>
-        </Galleria>
-    </div>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <Galleria :value="images" :numVisible="5" containerStyle="max-width: 640px" :showThumbnails="false" :showIndicators="true">
+                <template #item="slotProps">
+                    <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+                </template>
+            </Galleria>
+        </div>
+    </DeferredDemo>
     <DocSectionCode :code="code" :service="['PhotoService']" />
 </template>
 
@@ -91,8 +93,10 @@ const images = ref();
             }
         };
     },
-    mounted() {
-        PhotoService.getImages().then((data) => (this.images = data));
+    methods: {
+        loadDemoData() {
+            PhotoService.getImages().then((data) => (this.images = data));
+        }
     }
 };
 </script>

doc/galleria/indicator/HoverEventDoc.vue

@@ -2,13 +2,15 @@
     <DocSectionText v-bind="$attrs">
         <p>Indicators can be activated on hover instead of click if <i>changeItemOnIndicatorHover</i> is added.</p>
     </DocSectionText>
-    <div class="card">
-        <Galleria :value="images" :numVisible="5" containerStyle="max-width: 640px" :showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true">
-            <template #item="slotProps">
-                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
-            </template>
-        </Galleria>
-    </div>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <Galleria :value="images" :numVisible="5" containerStyle="max-width: 640px" :showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true">
+                <template #item="slotProps">
+                    <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+                </template>
+            </Galleria>
+        </div>
+    </DeferredDemo>
     <DocSectionCode :code="code" :service="['PhotoService']" />
 </template>
 
@@ -91,8 +93,10 @@ const images = ref();
             }
         };
     },
-    mounted() {
-        PhotoService.getImages().then((data) => (this.images = data));
+    methods: {
+        loadDemoData() {
+            PhotoService.getImages().then((data) => (this.images = data));
+        }
     }
 };
 </script>