primevue 3.23.0 → 3.24.0

package/splitbutton/splitbutton.js

@@ -58,6 +58,34 @@ this.primevue.splitbutton = (function (Button, TieredMenu, utils, vue) {
             menuButtonIcon: {
                 type: String,
                 default: 'pi pi-chevron-down'
+            },
+            severity: {
+                type: String,
+                default: null
+            },
+            raised: {
+                type: Boolean,
+                default: false
+            },
+            rounded: {
+                type: Boolean,
+                default: false
+            },
+            text: {
+                type: Boolean,
+                default: false
+            },
+            outlined: {
+                type: Boolean,
+                default: false
+            },
+            size: {
+                type: String,
+                default: null
+            },
+            plain: {
+                type: Boolean,
+                default: false
             }
         },
         data() {
@@ -87,7 +115,19 @@ this.primevue.splitbutton = (function (Button, TieredMenu, utils, vue) {
                 return utils.UniqueComponentId();
             },
             containerClass() {
-                return ['p-splitbutton p-component', this.class];
+                return [
+                    'p-splitbutton p-component',
+                    this.class,
+                    {
+                        [`p-button-${this.severity}`]: this.severity,
+                        'p-button-raised': this.raised,
+                        'p-button-rounded': this.rounded,
+                        'p-button-text': this.text,
+                        'p-button-outlined': this.outlined,
+                        'p-button-sm': this.size === 'small',
+                        'p-button-lg': this.size === 'large'
+                    }
+                ];
             }
         },
         components: {
@@ -166,11 +206,11 @@ this.primevue.splitbutton = (function (Button, TieredMenu, utils, vue) {
       }
     }
 
-    var css_248z = "\n.p-splitbutton[data-v-15738044] {\n    display: inline-flex;\n    position: relative;\n}\n.p-splitbutton .p-splitbutton-defaultbutton[data-v-15738044],\n.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button[data-v-15738044],\n.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button[data-v-15738044] {\n    flex: 1 1 auto;\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n    border-right: 0 none;\n}\n.p-splitbutton-menubutton[data-v-15738044],\n.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button[data-v-15738044],\n.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button[data-v-15738044] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n}\n.p-splitbutton .p-menu[data-v-15738044] {\n    min-width: 100%;\n}\n.p-fluid .p-splitbutton[data-v-15738044] {\n    display: flex;\n}\n";
+    var css_248z = "\n.p-splitbutton[data-v-0df0b659] {\n    display: inline-flex;\n    position: relative;\n}\n.p-splitbutton .p-splitbutton-defaultbutton[data-v-0df0b659],\n.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button[data-v-0df0b659],\n.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button[data-v-0df0b659] {\n    flex: 1 1 auto;\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n    border-right: 0 none;\n}\n.p-splitbutton-menubutton[data-v-0df0b659],\n.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button[data-v-0df0b659],\n.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button[data-v-0df0b659] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n}\n.p-splitbutton .p-menu[data-v-0df0b659] {\n    min-width: 100%;\n}\n.p-fluid .p-splitbutton[data-v-0df0b659] {\n    display: flex;\n}\n";
     styleInject(css_248z);
 
     script.render = render;
-    script.__scopeId = "data-v-15738044";
+    script.__scopeId = "data-v-0df0b659";
 
     return script;
 

package/splitbutton/splitbutton.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.splitbutton=function(t,e,n,o){"use strict";function l(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var u=l(t),a=l(e),d={name:"SplitButton",emits:["click"],props:{label:{type:String,default:null},icon:{type:String,default:null},model:{type:Array,default:null},autoZIndex:{type:Boolean,default:!0},baseZIndex:{type:Number,default:0},appendTo:{type:String,default:"body"},disabled:{type:Boolean,default:!1},class:{type:null,default:null},style:{type:null,default:null},buttonProps:{type:null,default:null},menuButtonProps:{type:null,default:null},menuButtonIcon:{type:String,default:"pi pi-chevron-down"}},data:()=>({isExpanded:!1}),methods:{onDropdownButtonClick(){this.$refs.menu.toggle({currentTarget:this.$el,relatedTarget:this.$refs.button.$el}),this.isExpanded=!this.$refs.menu.visible},onDropdownKeydown(t){"ArrowDown"!==t.code&&"ArrowUp"!==t.code||(this.onDropdownButtonClick(),t.preventDefault())},onDefaultButtonClick(t){this.$refs.menu.hide(t),this.$emit("click")}},computed:{ariaId:()=>n.UniqueComponentId(),containerClass(){return["p-splitbutton p-component",this.class]}},components:{PVSButton:u.default,PVSMenu:a.default}};return function(t,e){void 0===e&&(e={});var n=e.insertAt;if(t&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");l.type="text/css","top"===n&&o.firstChild?o.insertBefore(l,o.firstChild):o.appendChild(l),l.styleSheet?l.styleSheet.cssText=t:l.appendChild(document.createTextNode(t))}}("\n.p-splitbutton[data-v-15738044] {\n    display: inline-flex;\n    position: relative;\n}\n.p-splitbutton .p-splitbutton-defaultbutton[data-v-15738044],\n.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button[data-v-15738044],\n.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button[data-v-15738044] {\n    flex: 1 1 auto;\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n    border-right: 0 none;\n}\n.p-splitbutton-menubutton[data-v-15738044],\n.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button[data-v-15738044],\n.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button[data-v-15738044] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n}\n.p-splitbutton .p-menu[data-v-15738044] {\n    min-width: 100%;\n}\n.p-fluid .p-splitbutton[data-v-15738044] {\n    display: flex;\n}\n"),d.render=function(t,e,n,l,u,a){const d=o.resolveComponent("PVSButton"),i=o.resolveComponent("PVSMenu");return o.openBlock(),o.createElementBlock("div",{class:o.normalizeClass(a.containerClass),style:o.normalizeStyle(n.style)},[o.renderSlot(t.$slots,"default",{},(()=>[o.createVNode(d,o.mergeProps({type:"button",class:"p-splitbutton-defaultbutton",icon:n.icon,label:n.label,disabled:n.disabled,"aria-label":n.label,onClick:a.onDefaultButtonClick},n.buttonProps),null,16,["icon","label","disabled","aria-label","onClick"])])),o.createVNode(d,o.mergeProps({ref:"button",type:"button",class:"p-splitbutton-menubutton",icon:n.menuButtonIcon,disabled:n.disabled,"aria-haspopup":"true","aria-expanded":u.isExpanded,"aria-controls":a.ariaId+"_overlay",onClick:a.onDropdownButtonClick,onKeydown:a.onDropdownKeydown},n.menuButtonProps),null,16,["icon","disabled","aria-expanded","aria-controls","onClick","onKeydown"]),o.createVNode(i,{ref:"menu",id:a.ariaId+"_overlay",model:n.model,popup:!0,autoZIndex:n.autoZIndex,baseZIndex:n.baseZIndex,appendTo:n.appendTo},null,8,["id","model","autoZIndex","baseZIndex","appendTo"])],6)},d.__scopeId="data-v-15738044",d}(primevue.button,primevue.tieredmenu,primevue.utils,Vue);
+this.primevue=this.primevue||{},this.primevue.splitbutton=function(t,e,n,o){"use strict";function l(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var u=l(t),d=l(e),a={name:"SplitButton",emits:["click"],props:{label:{type:String,default:null},icon:{type:String,default:null},model:{type:Array,default:null},autoZIndex:{type:Boolean,default:!0},baseZIndex:{type:Number,default:0},appendTo:{type:String,default:"body"},disabled:{type:Boolean,default:!1},class:{type:null,default:null},style:{type:null,default:null},buttonProps:{type:null,default:null},menuButtonProps:{type:null,default:null},menuButtonIcon:{type:String,default:"pi pi-chevron-down"},severity:{type:String,default:null},raised:{type:Boolean,default:!1},rounded:{type:Boolean,default:!1},text:{type:Boolean,default:!1},outlined:{type:Boolean,default:!1},size:{type:String,default:null},plain:{type:Boolean,default:!1}},data:()=>({isExpanded:!1}),methods:{onDropdownButtonClick(){this.$refs.menu.toggle({currentTarget:this.$el,relatedTarget:this.$refs.button.$el}),this.isExpanded=!this.$refs.menu.visible},onDropdownKeydown(t){"ArrowDown"!==t.code&&"ArrowUp"!==t.code||(this.onDropdownButtonClick(),t.preventDefault())},onDefaultButtonClick(t){this.$refs.menu.hide(t),this.$emit("click")}},computed:{ariaId:()=>n.UniqueComponentId(),containerClass(){return["p-splitbutton p-component",this.class,{[`p-button-${this.severity}`]:this.severity,"p-button-raised":this.raised,"p-button-rounded":this.rounded,"p-button-text":this.text,"p-button-outlined":this.outlined,"p-button-sm":"small"===this.size,"p-button-lg":"large"===this.size}]}},components:{PVSButton:u.default,PVSMenu:d.default}};return function(t,e){void 0===e&&(e={});var n=e.insertAt;if(t&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");l.type="text/css","top"===n&&o.firstChild?o.insertBefore(l,o.firstChild):o.appendChild(l),l.styleSheet?l.styleSheet.cssText=t:l.appendChild(document.createTextNode(t))}}("\n.p-splitbutton[data-v-0df0b659] {\n    display: inline-flex;\n    position: relative;\n}\n.p-splitbutton .p-splitbutton-defaultbutton[data-v-0df0b659],\n.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button[data-v-0df0b659],\n.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button[data-v-0df0b659] {\n    flex: 1 1 auto;\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n    border-right: 0 none;\n}\n.p-splitbutton-menubutton[data-v-0df0b659],\n.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button[data-v-0df0b659],\n.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button[data-v-0df0b659] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n}\n.p-splitbutton .p-menu[data-v-0df0b659] {\n    min-width: 100%;\n}\n.p-fluid .p-splitbutton[data-v-0df0b659] {\n    display: flex;\n}\n"),a.render=function(t,e,n,l,u,d){const a=o.resolveComponent("PVSButton"),i=o.resolveComponent("PVSMenu");return o.openBlock(),o.createElementBlock("div",{class:o.normalizeClass(d.containerClass),style:o.normalizeStyle(n.style)},[o.renderSlot(t.$slots,"default",{},(()=>[o.createVNode(a,o.mergeProps({type:"button",class:"p-splitbutton-defaultbutton",icon:n.icon,label:n.label,disabled:n.disabled,"aria-label":n.label,onClick:d.onDefaultButtonClick},n.buttonProps),null,16,["icon","label","disabled","aria-label","onClick"])])),o.createVNode(a,o.mergeProps({ref:"button",type:"button",class:"p-splitbutton-menubutton",icon:n.menuButtonIcon,disabled:n.disabled,"aria-haspopup":"true","aria-expanded":u.isExpanded,"aria-controls":d.ariaId+"_overlay",onClick:d.onDropdownButtonClick,onKeydown:d.onDropdownKeydown},n.menuButtonProps),null,16,["icon","disabled","aria-expanded","aria-controls","onClick","onKeydown"]),o.createVNode(i,{ref:"menu",id:d.ariaId+"_overlay",model:n.model,popup:!0,autoZIndex:n.autoZIndex,baseZIndex:n.baseZIndex,appendTo:n.appendTo},null,8,["id","model","autoZIndex","baseZIndex","appendTo"])],6)},a.__scopeId="data-v-0df0b659",a}(primevue.button,primevue.tieredmenu,primevue.utils,Vue);

package/splitter/Splitter.d.ts

@@ -1,10 +1,19 @@
+/**
+ *
+ * Splitter is utilized to separate and resize panels.
+ *
+ * [Live Demo](https://www.primevue.org/splitter/)
+ *
+ * @module splitter
+ *
+ */
 import { VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
-type SplitterLayoutType = 'horizontal' | 'vertical' | undefined;
-
-type SplitterStateStorageType = 'local' | 'session' | undefined;
-
+/**
+ * Custom resize start event.
+ * @see {@link SplitterEmits.resizestar}
+ */
 export interface SplitterResizeStartEvent {
     /**
      * Browser event
@@ -16,6 +25,10 @@ export interface SplitterResizeStartEvent {
     sizes: number[];
 }
 
+/**
+ * Custom resize end event.
+ * @see {@link PickListEmits.resizeend}
+ */
 export interface SplitterResizeEndEvent {
     /**
      * Browser event
@@ -27,16 +40,18 @@ export interface SplitterResizeEndEvent {
     sizes: number[];
 }
 
+/**
+ * Defines valid properties in Splitter component.
+ */
 export interface SplitterProps {
     /**
      * Orientation of the panels.
-     * @see SplitterLayoutType
-     * Default value is 'horizontal'.
+     * @defaultValue horizontal
      */
-    layout?: SplitterLayoutType;
+    layout?: 'horizontal' | 'vertical' | undefined;
     /**
      * Size of the divider in pixels.
-     * Default value is 4.
+     * @defaultValue 4
      */
     gutterSize?: number | undefined;
     /**
@@ -45,37 +60,54 @@ export interface SplitterProps {
     stateKey?: string | undefined;
     /**
      * Defines where a stateful splitter keeps its state, valid values are 'session' for sessionStorage and 'local' for localStorage.
-     * @see SplitterStateStorageType
-     * Default value is 'session'.
+     * @defaultValue session
      */
-    stateStorage?: SplitterStateStorageType;
+    stateStorage?: 'local' | 'session' | undefined;
     /**
      * Step factor to increment/decrement the size of the panels while pressing the arrow keys.
-     * Default value is 1.
+     * @defaultValue 1
      */
     step?: number | undefined;
 }
 
+/**
+ * Defines valid slots in Splitter slots.
+ */
 export interface SplitterSlots {
     /**
      * Default slot to detect SplitterPanel components.
      */
-    default: () => VNode[];
+    default(): VNode[];
 }
 
-export declare type SplitterEmits = {
+/**
+ * Defines valid emits in Splitter component.
+ */
+export interface SplitterEmits {
     /**
      * Callback to invoke when resize starts.
      * @param {SplitterResizeStartEvent} event - Custom resize start event.
      */
-    resizestar: (event: SplitterResizeStartEvent) => void;
+    resizestar(event: SplitterResizeStartEvent): void;
     /**
      * Callback to invoke when resize ends.
      * @param {SplitterResizeEndEvent} event - Custom resize end event.
      */
-    resizeend: (event: SplitterResizeEndEvent) => void;
-};
+    resizeend(event: SplitterResizeEndEvent): void;
+}
 
+/**
+ * **PrimeVue - Splitter**
+ *
+ * _Splitter is utilized to separate and resize panels._
+ *
+ * [Live Demo](https://www.primevue.org/splitter/)
+ * --- ---
+ * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
+ *
+ * @group Component
+ *
+ */
 declare class Splitter extends ClassComponent<SplitterProps, SplitterSlots, SplitterEmits> {}
 
 declare module '@vue/runtime-core' {
@@ -84,17 +116,4 @@ declare module '@vue/runtime-core' {
     }
 }
 
-/**
- *
- * Splitter is utilized to separate and resize panels.
- *
- * Helper Components:
- *
- * - SplitterPanel
- *
- * Demos:
- *
- * - [Splitter](https://www.primefaces.org/primevue/splitter)
- *
- */
 export default Splitter;

package/splitterpanel/SplitterPanel.d.ts

@@ -1,6 +1,18 @@
+/**
+ *
+ * SplitterPanel is a helper component for Splitter component.
+ *
+ * [Live Demo](https://www.primevue.org/splitter/)
+ *
+ * @module splitterpanel
+ *
+ */
 import { VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+/**
+ * Defines valid properties in SplitterPanel component.
+ */
 export interface SplitterPanelProps {
     /**
      * Size of the element relative to 100%.
@@ -12,6 +24,9 @@ export interface SplitterPanelProps {
     minSize?: number | undefined;
 }
 
+/**
+ * Defines valid slots in SplitterPanel slots.
+ */
 export interface SplitterPanelSlots {
     /**
      * Custom content template.
@@ -19,8 +34,20 @@ export interface SplitterPanelSlots {
     default: () => VNode[];
 }
 
-export declare type SplitterPanelEmits = {};
+export interface SplitterPanelEmits {}
 
+/**
+ * **PrimeVue - SplitterPanel**
+ *
+ * _SplitterPanel is a helper component for Splitter component._
+ *
+ * [Live Demo](https://www.primevue.org/splitterpanel/)
+ * --- ---
+ * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
+ *
+ * @group Component
+ *
+ */
 declare class SplitterPanel extends ClassComponent<SplitterPanelProps, SplitterPanelSlots, SplitterPanelEmits> {}
 
 declare module '@vue/runtime-core' {
@@ -29,13 +56,4 @@ declare module '@vue/runtime-core' {
     }
 }
 
-/**
- *
- * SplitterPanel is a helper component for Splitter component.
- *
- * Demos:
- *
- * - [SplitterPanel](https://www.primefaces.org/primevue/splitter)
- *
- */
 export default SplitterPanel;

package/steps/Steps.d.ts

@@ -1,7 +1,19 @@
+/**
+ *
+ * Steps components is an indicator for the steps in a wizard workflow. Example below uses nested routes with Steps.
+ *
+ * [Live Demo](https://www.primevue.org/steps/)
+ *
+ * @module steps
+ *
+ */
 import { VNode } from 'vue';
-import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 import { MenuItem } from '../menuitem';
+import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+/**
+ * Defines valid properties in Steps component.
+ */
 export interface StepsProps {
     /**
      * Unique identifier of the element.
@@ -13,31 +25,49 @@ export interface StepsProps {
     model?: MenuItem[] | undefined;
     /**
      * Whether the items are clickable or not.
-     * Default value is true.
+     * @defaultValue true
      */
     readonly?: boolean | undefined;
     /**
      * Whether to apply 'router-link-active-exact' class if route exactly matches the item path.
-     * Default value is true.
+     * @defaultValue true
      */
     exact?: boolean | undefined;
 }
 
+/**
+ * Defines valid slots in Steps component.
+ */
 export interface StepsSlots {
     /**
      * Custom item template.
      * @param {Object} scope - item slot's params.
      */
-    item: (scope: {
+    item(scope: {
         /**
          * Menuitem instance
          */
         item: MenuItem;
-    }) => VNode[];
+    }): VNode[];
 }
 
-export declare type StepsEmits = {};
+/**
+ * Defines valid emits in Steps component.
+ */
+export interface StepsEmits {}
 
+/**
+ * **PrimeVue - Steps**
+ *
+ * _Steps components is an indicator for the steps in a wizard workflow. Example below uses nested routes with Steps._
+ *
+ * [Live Demo](https://www.primevue.org/steps/)
+ * --- ---
+ * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
+ *
+ * @group Component
+ *
+ */
 declare class Steps extends ClassComponent<StepsProps, StepsSlots, StepsEmits> {}
 
 declare module '@vue/runtime-core' {
@@ -46,13 +76,4 @@ declare module '@vue/runtime-core' {
     }
 }
 
-/**
- *
- * Steps components is an indicator for the steps in a wizard workflow. Example below uses nested routes with Steps.
- *
- * Demos:
- *
- * - [Steps](https://www.primefaces.org/primevue/steps)
- *
- */
 export default Steps;

package/styleclass/StyleClass.d.ts

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

package/tabmenu/TabMenu.d.ts

@@ -1,7 +1,20 @@
+/**
+ *
+ * TabMenu is a navigation component that displays items as tab headers. Example below uses nested routes with TabMenu.
+ *
+ * [Live Demo](https://www.primevue.org/tabmenu/)
+ *
+ * @module tabmenu
+ *
+ */
 import { VNode } from 'vue';
 import { MenuItem } from '../menuitem';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+/**
+ * Custom change event.
+ * @see {@link TabMenuEmits['tab-change']}
+ */
 export interface TabMenuChangeEvent {
     /**
      * Browser event
@@ -13,6 +26,9 @@ export interface TabMenuChangeEvent {
     index: number;
 }
 
+/**
+ * Defines valid properties in TabMenu component.
+ */
 export interface TabMenuProps {
     /**
      * An array of menuitems.
@@ -20,12 +36,12 @@ export interface TabMenuProps {
     model?: MenuItem[] | undefined;
     /**
      * Defines if active route highlight should match the exact route path.
-     * Default value is true.
+     * @defaultValue true
      */
     exact?: boolean | undefined;
     /**
      * Active index of menuitem.
-     * Default value is 0.
+     * @defaultValue 0
      */
     activeIndex?: number | undefined;
     /**
@@ -38,27 +54,45 @@ export interface TabMenuProps {
     'aria-labelledby'?: string | undefined;
 }
 
+/**
+ * Defines valid slots in TabMenu component.
+ */
 export interface TabMenuSlots {
     /**
      * Custom content for each item.
      * @param {Object} scope - item slot's params.
      */
-    item: (scope: {
+    item(scope: {
         /**
          * Menuitem instance
          */
         item: MenuItem;
-    }) => VNode[];
+    }): VNode[];
 }
 
-export declare type TabMenuEmits = {
+/**
+ * Defines valid emits in TabMenu component.
+ */
+export interface TabMenuEmits {
     /**
      * Callback to invoke when an active tab is changed.
      * @param {TabMenuChangeEvent} event - Custom tab change event.
      */
-    'tab-change': (event: TabMenuChangeEvent) => void;
-};
+    'tab-change'(event: TabMenuChangeEvent): void;
+}
 
+/**
+ * **PrimeVue - TabMenu**
+ *
+ * _TabMenu is a navigation component that displays items as tab headers. Example below uses nested routes with TabMenu._
+ *
+ * [Live Demo](https://www.primevue.org/tabmenu/)
+ * --- ---
+ * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
+ *
+ * @group Component
+ *
+ */
 declare class TabMenu extends ClassComponent<TabMenuProps, TabMenuSlots, TabMenuEmits> {}
 
 declare module '@vue/runtime-core' {
@@ -67,13 +101,4 @@ declare module '@vue/runtime-core' {
     }
 }
 
-/**
- *
- * TabMenu is a navigation component that displays items as tab headers. Example below uses nested routes with TabMenu.
- *
- * Demos:
- *
- * - [TabMenu](https://www.primefaces.org/primevue/tabmenu)
- *
- */
 export default TabMenu;

package/tabmenu/TabMenu.vue

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

package/tabmenu/tabmenu.cjs.js

@@ -246,6 +246,7 @@ const _hoisted_6 = ["href", "target", "aria-label", "aria-disabled", "tabindex"]
 const _hoisted_7 = { class: "p-menuitem-text" };
 const _hoisted_8 = {
   ref: "inkbar",
+  role: "none",
   class: "p-tabmenu-ink-bar"
 };
 

package/tabmenu/tabmenu.cjs.min.js

@@ -1 +1 @@
-"use strict";var e=require("primevue/ripple"),t=require("primevue/utils"),n=require("vue");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l={name:"TabMenu",emits:["update:activeIndex","tab-change"],props:{model:{type:Array,default:null},exact:{type:Boolean,default:!0},activeIndex:{type:Number,default:0},"aria-labelledby":{type:String,default:null},"aria-label":{type:String,default:null}},timeout:null,data(){return{d_activeIndex:this.activeIndex}},watch:{$route(){this.timeout=setTimeout((()=>this.updateInkBar()),50)},activeIndex(e){this.d_activeIndex=e}},mounted(){this.updateInkBar()},updated(){this.updateInkBar()},beforeUnmount(){clearTimeout(this.timeout)},methods:{onItemClick(e,t,n,a){this.disabled(t)?e.preventDefault():(t.command&&t.command({originalEvent:e,item:t}),t.to&&a&&a(e),n!==this.d_activeIndex&&(this.d_activeIndex=n,this.$emit("update:activeIndex",this.d_activeIndex)),this.$emit("tab-change",{originalEvent:e,index:n}))},onKeydownItem(e,t,n){let a=n,l={};const i=this.$refs.tabLink;switch(e.code){case"ArrowRight":l=this.findNextItem(this.$refs.tab,a),a=l.i;break;case"ArrowLeft":l=this.findPrevItem(this.$refs.tab,a),a=l.i;break;case"End":l=this.findPrevItem(this.$refs.tab,this.model.length),a=l.i,e.preventDefault();break;case"Home":l=this.findNextItem(this.$refs.tab,-1),a=l.i,e.preventDefault();break;case"Space":case"Enter":e.currentTarget&&e.currentTarget.click(),e.preventDefault();break;case"Tab":this.setDefaultTabIndexes(i)}i[a]&&i[n]&&(i[n].tabIndex="-1",i[a].tabIndex="0",i[a].focus())},findNextItem(e,n){let a=n+1;if(a>=e.length)return{nextItem:e[e.length],i:e.length};let l=e[a];return l?t.DomHandler.hasClass(l,"p-disabled")?this.findNextItem(e,a):{nextItem:l,i:a}:null},findPrevItem(e,n){let a=n-1;if(a<0)return{nextItem:e[0],i:0};let l=e[a];return l?t.DomHandler.hasClass(l,"p-disabled")?this.findPrevItem(e,a):{prevItem:l,i:a}:null},getItemClass(e,t){return["p-tabmenuitem",e.class,{"p-highlight":this.d_activeIndex===t,"p-disabled":this.disabled(e)}]},getRouteItemClass(e,t,n){return["p-tabmenuitem",e.class,{"p-highlight":this.exact?n:t,"p-disabled":this.disabled(e)}]},getItemIcon:e=>["p-menuitem-icon",e.icon],visible:e=>"function"==typeof e.visible?e.visible():!1!==e.visible,disabled:e=>"function"==typeof e.disabled?e.disabled():e.disabled,label:e=>"function"==typeof e.label?e.label():e.label,setDefaultTabIndexes(e){setTimeout((()=>{e.forEach((e=>{e.tabIndex=t.DomHandler.hasClass(e.parentElement,"p-highlight")?"0":"-1"}))}),300)},setTabIndex(e){return this.d_activeIndex===e?"0":"-1"},updateInkBar(){let e=this.$refs.nav.children,n=!1;for(let a=0;a<e.length;a++){let l=e[a];t.DomHandler.hasClass(l,"p-highlight")&&(this.$refs.inkbar.style.width=t.DomHandler.getWidth(l)+"px",this.$refs.inkbar.style.left=t.DomHandler.getOffset(l).left-t.DomHandler.getOffset(this.$refs.nav).left+"px",n=!0)}n||(this.$refs.inkbar.style.width="0px",this.$refs.inkbar.style.left="0px")}},directives:{ripple:a(e).default}};const i={class:"p-tabmenu p-component"},r=["aria-labelledby","aria-label"],s=["href","aria-label","aria-disabled","tabindex","onClick","onKeydown"],o={class:"p-menuitem-text"},d=["onClick","onKeydown"],c=["href","target","aria-label","aria-disabled","tabindex"],m={class:"p-menuitem-text"},u={ref:"inkbar",class:"p-tabmenu-ink-bar"};!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var a=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");l.type="text/css","top"===n&&a.firstChild?a.insertBefore(l,a.firstChild):a.appendChild(l),l.styleSheet?l.styleSheet.cssText=e:l.appendChild(document.createTextNode(e))}}("\n.p-tabmenu {\n    overflow-x: auto;\n}\n.p-tabmenu-nav {\n    display: flex;\n    margin: 0;\n    padding: 0;\n    list-style-type: none;\n    flex-wrap: nowrap;\n}\n.p-tabmenu-nav a {\n    cursor: pointer;\n    user-select: none;\n    display: flex;\n    align-items: center;\n    position: relative;\n    text-decoration: none;\n    text-decoration: none;\n    overflow: hidden;\n}\n.p-tabmenu-nav a:focus {\n    z-index: 1;\n}\n.p-tabmenu-nav .p-menuitem-text {\n    line-height: 1;\n}\n.p-tabmenu-ink-bar {\n    display: none;\n    z-index: 1;\n}\n.p-tabmenu::-webkit-scrollbar {\n    display: none;\n}\n"),l.render=function(e,t,a,l,p,b){const f=n.resolveComponent("router-link"),h=n.resolveDirective("ripple");return n.openBlock(),n.createElementBlock("div",i,[n.createElementVNode("ul",{ref:"nav",class:"p-tabmenu-nav p-reset",role:"menubar","aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel},[(n.openBlock(!0),n.createElementBlock(n.Fragment,null,n.renderList(a.model,((t,a)=>(n.openBlock(),n.createElementBlock(n.Fragment,{key:b.label(t)+"_"+a.toString()},[t.to&&!b.disabled(t)?(n.openBlock(),n.createBlock(f,{key:0,to:t.to,custom:""},{default:n.withCtx((({navigate:l,href:i,isActive:r,isExactActive:d})=>[b.visible(t)?(n.openBlock(),n.createElementBlock("li",{key:0,ref_for:!0,ref:"tab",class:n.normalizeClass(b.getRouteItemClass(t,r,d)),style:n.normalizeStyle(t.style),role:"presentation"},[e.$slots.item?(n.openBlock(),n.createBlock(n.resolveDynamicComponent(e.$slots.item),{key:1,item:t,index:a},null,8,["item","index"])):n.withDirectives((n.openBlock(),n.createElementBlock("a",{key:0,ref_for:!0,ref:"tabLink",role:"menuitem",href:i,class:"p-menuitem-link","aria-label":b.label(t),"aria-disabled":b.disabled(t),tabindex:d?"0":"-1",onClick:e=>b.onItemClick(e,t,a,l),onKeydown:e=>b.onKeydownItem(e,t,a,l)},[t.icon?(n.openBlock(),n.createElementBlock("span",{key:0,class:n.normalizeClass(b.getItemIcon(t))},null,2)):n.createCommentVNode("",!0),n.createElementVNode("span",o,n.toDisplayString(b.label(t)),1)],40,s)),[[h]])],6)):n.createCommentVNode("",!0)])),_:2},1032,["to"])):b.visible(t)?(n.openBlock(),n.createElementBlock("li",{key:1,ref_for:!0,ref:"tab",class:n.normalizeClass(b.getItemClass(t,a)),role:"presentation",onClick:e=>b.onItemClick(e,t,a),onKeydown:e=>b.onKeydownItem(e,t,a)},[e.$slots.item?(n.openBlock(),n.createBlock(n.resolveDynamicComponent(e.$slots.item),{key:1,item:t,index:a},null,8,["item","index"])):n.withDirectives((n.openBlock(),n.createElementBlock("a",{key:0,ref_for:!0,ref:"tabLink",role:"menuitem",href:t.url,class:"p-menuitem-link",target:t.target,"aria-label":b.label(t),"aria-disabled":b.disabled(t),tabindex:b.setTabIndex(a)},[t.icon?(n.openBlock(),n.createElementBlock("span",{key:0,class:n.normalizeClass(b.getItemIcon(t))},null,2)):n.createCommentVNode("",!0),n.createElementVNode("span",m,n.toDisplayString(b.label(t)),1)],8,c)),[[h]])],42,d)):n.createCommentVNode("",!0)],64)))),128)),n.createElementVNode("li",u,null,512)],8,r)])},module.exports=l;
+"use strict";var e=require("primevue/ripple"),t=require("primevue/utils"),n=require("vue");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l={name:"TabMenu",emits:["update:activeIndex","tab-change"],props:{model:{type:Array,default:null},exact:{type:Boolean,default:!0},activeIndex:{type:Number,default:0},"aria-labelledby":{type:String,default:null},"aria-label":{type:String,default:null}},timeout:null,data(){return{d_activeIndex:this.activeIndex}},watch:{$route(){this.timeout=setTimeout((()=>this.updateInkBar()),50)},activeIndex(e){this.d_activeIndex=e}},mounted(){this.updateInkBar()},updated(){this.updateInkBar()},beforeUnmount(){clearTimeout(this.timeout)},methods:{onItemClick(e,t,n,a){this.disabled(t)?e.preventDefault():(t.command&&t.command({originalEvent:e,item:t}),t.to&&a&&a(e),n!==this.d_activeIndex&&(this.d_activeIndex=n,this.$emit("update:activeIndex",this.d_activeIndex)),this.$emit("tab-change",{originalEvent:e,index:n}))},onKeydownItem(e,t,n){let a=n,l={};const i=this.$refs.tabLink;switch(e.code){case"ArrowRight":l=this.findNextItem(this.$refs.tab,a),a=l.i;break;case"ArrowLeft":l=this.findPrevItem(this.$refs.tab,a),a=l.i;break;case"End":l=this.findPrevItem(this.$refs.tab,this.model.length),a=l.i,e.preventDefault();break;case"Home":l=this.findNextItem(this.$refs.tab,-1),a=l.i,e.preventDefault();break;case"Space":case"Enter":e.currentTarget&&e.currentTarget.click(),e.preventDefault();break;case"Tab":this.setDefaultTabIndexes(i)}i[a]&&i[n]&&(i[n].tabIndex="-1",i[a].tabIndex="0",i[a].focus())},findNextItem(e,n){let a=n+1;if(a>=e.length)return{nextItem:e[e.length],i:e.length};let l=e[a];return l?t.DomHandler.hasClass(l,"p-disabled")?this.findNextItem(e,a):{nextItem:l,i:a}:null},findPrevItem(e,n){let a=n-1;if(a<0)return{nextItem:e[0],i:0};let l=e[a];return l?t.DomHandler.hasClass(l,"p-disabled")?this.findPrevItem(e,a):{prevItem:l,i:a}:null},getItemClass(e,t){return["p-tabmenuitem",e.class,{"p-highlight":this.d_activeIndex===t,"p-disabled":this.disabled(e)}]},getRouteItemClass(e,t,n){return["p-tabmenuitem",e.class,{"p-highlight":this.exact?n:t,"p-disabled":this.disabled(e)}]},getItemIcon:e=>["p-menuitem-icon",e.icon],visible:e=>"function"==typeof e.visible?e.visible():!1!==e.visible,disabled:e=>"function"==typeof e.disabled?e.disabled():e.disabled,label:e=>"function"==typeof e.label?e.label():e.label,setDefaultTabIndexes(e){setTimeout((()=>{e.forEach((e=>{e.tabIndex=t.DomHandler.hasClass(e.parentElement,"p-highlight")?"0":"-1"}))}),300)},setTabIndex(e){return this.d_activeIndex===e?"0":"-1"},updateInkBar(){let e=this.$refs.nav.children,n=!1;for(let a=0;a<e.length;a++){let l=e[a];t.DomHandler.hasClass(l,"p-highlight")&&(this.$refs.inkbar.style.width=t.DomHandler.getWidth(l)+"px",this.$refs.inkbar.style.left=t.DomHandler.getOffset(l).left-t.DomHandler.getOffset(this.$refs.nav).left+"px",n=!0)}n||(this.$refs.inkbar.style.width="0px",this.$refs.inkbar.style.left="0px")}},directives:{ripple:a(e).default}};const i={class:"p-tabmenu p-component"},r=["aria-labelledby","aria-label"],s=["href","aria-label","aria-disabled","tabindex","onClick","onKeydown"],o={class:"p-menuitem-text"},d=["onClick","onKeydown"],c=["href","target","aria-label","aria-disabled","tabindex"],m={class:"p-menuitem-text"},u={ref:"inkbar",role:"none",class:"p-tabmenu-ink-bar"};!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var a=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");l.type="text/css","top"===n&&a.firstChild?a.insertBefore(l,a.firstChild):a.appendChild(l),l.styleSheet?l.styleSheet.cssText=e:l.appendChild(document.createTextNode(e))}}("\n.p-tabmenu {\n    overflow-x: auto;\n}\n.p-tabmenu-nav {\n    display: flex;\n    margin: 0;\n    padding: 0;\n    list-style-type: none;\n    flex-wrap: nowrap;\n}\n.p-tabmenu-nav a {\n    cursor: pointer;\n    user-select: none;\n    display: flex;\n    align-items: center;\n    position: relative;\n    text-decoration: none;\n    text-decoration: none;\n    overflow: hidden;\n}\n.p-tabmenu-nav a:focus {\n    z-index: 1;\n}\n.p-tabmenu-nav .p-menuitem-text {\n    line-height: 1;\n}\n.p-tabmenu-ink-bar {\n    display: none;\n    z-index: 1;\n}\n.p-tabmenu::-webkit-scrollbar {\n    display: none;\n}\n"),l.render=function(e,t,a,l,p,b){const f=n.resolveComponent("router-link"),h=n.resolveDirective("ripple");return n.openBlock(),n.createElementBlock("div",i,[n.createElementVNode("ul",{ref:"nav",class:"p-tabmenu-nav p-reset",role:"menubar","aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel},[(n.openBlock(!0),n.createElementBlock(n.Fragment,null,n.renderList(a.model,((t,a)=>(n.openBlock(),n.createElementBlock(n.Fragment,{key:b.label(t)+"_"+a.toString()},[t.to&&!b.disabled(t)?(n.openBlock(),n.createBlock(f,{key:0,to:t.to,custom:""},{default:n.withCtx((({navigate:l,href:i,isActive:r,isExactActive:d})=>[b.visible(t)?(n.openBlock(),n.createElementBlock("li",{key:0,ref_for:!0,ref:"tab",class:n.normalizeClass(b.getRouteItemClass(t,r,d)),style:n.normalizeStyle(t.style),role:"presentation"},[e.$slots.item?(n.openBlock(),n.createBlock(n.resolveDynamicComponent(e.$slots.item),{key:1,item:t,index:a},null,8,["item","index"])):n.withDirectives((n.openBlock(),n.createElementBlock("a",{key:0,ref_for:!0,ref:"tabLink",role:"menuitem",href:i,class:"p-menuitem-link","aria-label":b.label(t),"aria-disabled":b.disabled(t),tabindex:d?"0":"-1",onClick:e=>b.onItemClick(e,t,a,l),onKeydown:e=>b.onKeydownItem(e,t,a,l)},[t.icon?(n.openBlock(),n.createElementBlock("span",{key:0,class:n.normalizeClass(b.getItemIcon(t))},null,2)):n.createCommentVNode("",!0),n.createElementVNode("span",o,n.toDisplayString(b.label(t)),1)],40,s)),[[h]])],6)):n.createCommentVNode("",!0)])),_:2},1032,["to"])):b.visible(t)?(n.openBlock(),n.createElementBlock("li",{key:1,ref_for:!0,ref:"tab",class:n.normalizeClass(b.getItemClass(t,a)),role:"presentation",onClick:e=>b.onItemClick(e,t,a),onKeydown:e=>b.onKeydownItem(e,t,a)},[e.$slots.item?(n.openBlock(),n.createBlock(n.resolveDynamicComponent(e.$slots.item),{key:1,item:t,index:a},null,8,["item","index"])):n.withDirectives((n.openBlock(),n.createElementBlock("a",{key:0,ref_for:!0,ref:"tabLink",role:"menuitem",href:t.url,class:"p-menuitem-link",target:t.target,"aria-label":b.label(t),"aria-disabled":b.disabled(t),tabindex:b.setTabIndex(a)},[t.icon?(n.openBlock(),n.createElementBlock("span",{key:0,class:n.normalizeClass(b.getItemIcon(t))},null,2)):n.createCommentVNode("",!0),n.createElementVNode("span",m,n.toDisplayString(b.label(t)),1)],8,c)),[[h]])],42,d)):n.createCommentVNode("",!0)],64)))),128)),n.createElementVNode("li",u,null,512)],8,r)])},module.exports=l;

package/tabmenu/tabmenu.esm.js

@@ -240,6 +240,7 @@ const _hoisted_6 = ["href", "target", "aria-label", "aria-disabled", "tabindex"]
 const _hoisted_7 = { class: "p-menuitem-text" };
 const _hoisted_8 = {
   ref: "inkbar",
+  role: "none",
   class: "p-tabmenu-ink-bar"
 };