primevuelab 4.0.0-beta.4

package/styleclass/StyleClass.d.ts

@@ -0,0 +1,105 @@
+/**
+ *
+ * StyleClass manages CSS classes declaratively to during enter/leave animations or just to toggle classes on an element.
+ *
+ * [Live Demo](https://primevuelab.org/styleclass)
+ *
+ * @module styleclass
+ *
+ */
+import { DirectiveBinding, ObjectDirective } from 'vue';
+import { DirectiveHooks } from '../basedirective';
+import { PassThroughOptions } from '../passthrough';
+import { DesignToken, HintedString, PassThrough } from '../ts-helpers';
+
+/**
+ * Defines options of StyleClass.
+ */
+export interface StyleClassOptions {
+    /**
+     * Selector to define the target element. Available selectors are '@next', '@prev', '@parent' and '@grandparent'.
+     */
+    selector?: HintedString<'@next' | '@prev' | '@parent' | '@grandparent'> | undefined;
+    /**
+     * Style class to add when item begins to get displayed.
+     */
+    enterFromClass?: string | undefined;
+    /**
+     * Style class to add during enter animation.
+     */
+    enterActiveClass?: string | undefined;
+    /**
+     * Style class to add when item begins to get displayed.
+     */
+    enterToClass?: string | undefined;
+    /**
+     * Style class to add when item begins to get hidden.
+     */
+    leaveFromClass?: string | undefined;
+    /**
+     * Style class to add during leave animation.
+     */
+    leaveActiveClass?: string | undefined;
+    /**
+     * Style class to add when leave animation is completed.
+     */
+    leaveToClass?: 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;
+    /**
+     * It generates scoped CSS variables using design tokens for the component.
+     */
+    dt?: DesignToken<any>;
+    /**
+     * Used to pass attributes to DOM elements inside the component.
+     * @type {StyleClassDirectivePassThroughOptions}
+     */
+    pt?: PassThrough<StyleClassDirectivePassThroughOptions>;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+}
+
+/**
+ * Custom passthrough(pt) directive options.
+ */
+export interface StyleClassDirectivePassThroughOptions {
+    /**
+     * Used to manage all lifecycle hooks.
+     * @see {@link BaseDirective.DirectiveHooks}
+     */
+    hooks?: DirectiveHooks;
+}
+
+/**
+ * Binding of StyleClass directive.
+ */
+export interface StyleClassDirectiveBinding extends Omit<DirectiveBinding, 'modifiers' | 'value'> {
+    /**
+     * Value of the StyleClass.
+     */
+    value?: StyleClassOptions | undefined;
+}
+
+/**
+ * **primevuelab - StyleClass**
+ *
+ * _StyleClass manages css classes declaratively to during enter/leave animations or just to toggle classes on an element._
+ *
+ * [Live Demo](https://www.primevuelab.org/styleclass/)
+ * --- ---
+ * ![primevuelab](https://primefaces.org/cdn/primevuelab/images/logo-100.png)
+ *
+ */
+declare const StyleClass: ObjectDirective;
+
+export default StyleClass;

package/styleclass/package.json

@@ -0,0 +1,5 @@
+{
+    "main": "styleclass.mjs",
+    "module": "styleclass.mjs",
+    "types": "./StyleClass.d.ts"
+}

package/styleclass/style/StyleClassStyle.d.ts

@@ -0,0 +1,14 @@
+/**
+ *
+ * StyleClass manages css classes declaratively to during enter/leave animations or just to toggle classes on an element.
+ *
+ * [Live Demo](https://primevuelab.org/styleclass)
+ *
+ * @module styleclassstyle
+ *
+ */
+import { BaseStyle } from '../../base/style';
+
+export enum StyleClassClasses {}
+
+export interface StyleClassStyle extends BaseStyle {}

package/styleclass/style/package.json

@@ -0,0 +1,6 @@
+{
+    "main": "styleclassstyle.mjs",
+    "module": "styleclassstyle.mjs",
+    "types": "./StyleClassStyle.d.ts",
+    "sideEffects": false
+}

package/styleclass/style/styleclassstyle.mjs

@@ -0,0 +1,8 @@
+import BaseStyle from '@primevuelab/core/base/style';
+
+var StyleClassStyle = BaseStyle.extend({
+  name: 'styleclass-directive'
+});
+
+export { StyleClassStyle as default };
+//# sourceMappingURL=styleclassstyle.mjs.map

package/styleclass/style/styleclassstyle.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"styleclassstyle.mjs","sources":["../../../src/styleclass/style/StyleClassStyle.js"],"sourcesContent":["import BaseStyle from '@primevuelab/core/base/style';\n\nexport default BaseStyle.extend({\n    name: 'styleclass-directive'\n});\n"],"names":["BaseStyle","extend","name"],"mappings":";;AAEA,sBAAeA,SAAS,CAACC,MAAM,CAAC;AAC5BC,EAAAA,IAAI,EAAE,sBAAA;AACV,CAAC,CAAC;;;;"}

package/styleclass/styleclass.mjs

@@ -0,0 +1,151 @@
+import { DomHandler } from '@primevuelab/core/utils';
+import BaseDirective from '@primevuelab/core/basedirective';
+import StyleClassStyle from 'primevuelab/styleclass/style';
+
+var BaseStyleClass = BaseDirective.extend({
+  style: StyleClassStyle
+});
+
+var StyleClass = BaseStyleClass.extend('styleclass', {
+  mounted: function mounted(el, binding) {
+    el.setAttribute('data-pd-styleclass', true);
+    this.bind(el, binding);
+  },
+  unmounted: function unmounted(el) {
+    this.unbind(el);
+  },
+  methods: {
+    bind: function bind(el, binding) {
+      var _this = this;
+      var target = this.resolveTarget(el, binding);
+      this.$el = target;
+      el.$_pstyleclass_clicklistener = function () {
+        if (binding.value.toggleClass) {
+          if (DomHandler.hasClass(target, binding.value.toggleClass)) DomHandler.removeClass(target, binding.value.toggleClass);else DomHandler.addClass(target, binding.value.toggleClass);
+        } else {
+          if (target.offsetParent === null) _this.enter(target, el, binding);else _this.leave(target, binding);
+        }
+      };
+      el.addEventListener('click', el.$_pstyleclass_clicklistener);
+    },
+    unbind: function unbind(el) {
+      if (el.$_pstyleclass_clicklistener) {
+        el.removeEventListener('click', el.$_pstyleclass_clicklistener);
+        el.$_pstyleclass_clicklistener = null;
+      }
+      this.unbindDocumentListener(el);
+    },
+    enter: function enter(target, el, binding) {
+      if (binding.value.enterActiveClass) {
+        if (!target.$_pstyleclass_animating) {
+          target.$_pstyleclass_animating = true;
+          if (binding.value.enterActiveClass.includes('slidedown')) {
+            target.style.height = '0px';
+            DomHandler.removeClass(target, 'hidden');
+            target.style.maxHeight = target.scrollHeight + 'px';
+            DomHandler.addClass(target, 'hidden');
+            target.style.height = '';
+          }
+          DomHandler.addClass(target, binding.value.enterActiveClass);
+          if (binding.value.enterFromClass) {
+            DomHandler.removeClass(target, binding.value.enterFromClass);
+          }
+          target.$p_styleclass_enterlistener = function () {
+            DomHandler.removeClass(target, binding.value.enterActiveClass);
+            if (binding.value.enterToClass) {
+              DomHandler.addClass(target, binding.value.enterToClass);
+            }
+            target.removeEventListener('animationend', target.$p_styleclass_enterlistener);
+            if (binding.value.enterActiveClass.includes('slidedown')) {
+              target.style.maxHeight = '';
+            }
+            target.$_pstyleclass_animating = false;
+          };
+          target.addEventListener('animationend', target.$p_styleclass_enterlistener);
+        }
+      } else {
+        if (binding.value.enterFromClass) {
+          DomHandler.removeClass(target, binding.value.enterFromClass);
+        }
+        if (binding.value.enterToClass) {
+          DomHandler.addClass(target, binding.value.enterToClass);
+        }
+      }
+      if (binding.value.hideOnOutsideClick) {
+        this.bindDocumentListener(target, el, binding);
+      }
+    },
+    leave: function leave(target, binding) {
+      if (binding.value.leaveActiveClass) {
+        if (!target.$_pstyleclass_animating) {
+          target.$_pstyleclass_animating = true;
+          DomHandler.addClass(target, binding.value.leaveActiveClass);
+          if (binding.value.leaveFromClass) {
+            DomHandler.removeClass(target, binding.value.leaveFromClass);
+          }
+          target.$p_styleclass_leavelistener = function () {
+            DomHandler.removeClass(target, binding.value.leaveActiveClass);
+            if (binding.value.leaveToClass) {
+              DomHandler.addClass(target, binding.value.leaveToClass);
+            }
+            target.removeEventListener('animationend', target.$p_styleclass_leavelistener);
+            target.$_pstyleclass_animating = false;
+          };
+          target.addEventListener('animationend', target.$p_styleclass_leavelistener);
+        }
+      } else {
+        if (binding.value.leaveFromClass) {
+          DomHandler.removeClass(target, binding.value.leaveFromClass);
+        }
+        if (binding.value.leaveToClass) {
+          DomHandler.addClass(target, binding.value.leaveToClass);
+        }
+      }
+      if (binding.value.hideOnOutsideClick) {
+        this.unbindDocumentListener(target);
+      }
+    },
+    resolveTarget: function resolveTarget(el, binding) {
+      switch (binding.value.selector) {
+        case '@next':
+          return el.nextElementSibling;
+        case '@prev':
+          return el.previousElementSibling;
+        case '@parent':
+          return el.parentElement;
+        case '@grandparent':
+          return el.parentElement.parentElement;
+        default:
+          return document.querySelector(binding.value.selector);
+      }
+    },
+    bindDocumentListener: function bindDocumentListener(target, el, binding) {
+      var _this2 = this;
+      if (!target.$p_styleclass_documentlistener) {
+        target.$p_styleclass_documentlistener = function (event) {
+          if (!_this2.isVisible(target) || getComputedStyle(target).getPropertyValue('position') === 'static') {
+            _this2.unbindDocumentListener(target);
+          } else if (_this2.isOutsideClick(event, target, el)) {
+            _this2.leave(target, binding);
+          }
+        };
+        target.ownerDocument.addEventListener('click', target.$p_styleclass_documentlistener);
+      }
+    },
+    unbindDocumentListener: function unbindDocumentListener(target) {
+      if (target.$p_styleclass_documentlistener) {
+        target.ownerDocument.removeEventListener('click', target.$p_styleclass_documentlistener);
+        target.$p_styleclass_documentlistener = null;
+      }
+    },
+    isVisible: function isVisible(target) {
+      return target.offsetParent !== null;
+    },
+    isOutsideClick: function isOutsideClick(event, target, el) {
+      return !el.isSameNode(event.target) && !el.contains(event.target) && !target.contains(event.target);
+    }
+  }
+});
+
+export { StyleClass as default };
+//# sourceMappingURL=styleclass.mjs.map

package/styleclass/styleclass.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"styleclass.mjs","sources":["../../src/styleclass/BaseStyleClass.js","../../src/styleclass/StyleClass.js"],"sourcesContent":["import BaseDirective from '@primevuelab/core/basedirective';\nimport StyleClassStyle from 'primevuelab/styleclass/style';\n\nconst BaseStyleClass = BaseDirective.extend({\n    style: StyleClassStyle\n});\n\nexport default BaseStyleClass;\n","import { DomHandler } from '@primevuelab/core/utils';\nimport BaseStyleClass from './BaseStyleClass';\n\nconst StyleClass = BaseStyleClass.extend('styleclass', {\n    mounted(el, binding) {\n        el.setAttribute('data-pd-styleclass', true);\n\n        this.bind(el, binding);\n    },\n    unmounted(el) {\n        this.unbind(el);\n    },\n    methods: {\n        bind(el, binding) {\n            const target = this.resolveTarget(el, binding);\n\n            this.$el = target;\n\n            el.$_pstyleclass_clicklistener = () => {\n                if (binding.value.toggleClass) {\n                    if (DomHandler.hasClass(target, binding.value.toggleClass)) DomHandler.removeClass(target, binding.value.toggleClass);\n                    else DomHandler.addClass(target, binding.value.toggleClass);\n                } else {\n                    if (target.offsetParent === null) this.enter(target, el, binding);\n                    else this.leave(target, binding);\n                }\n            };\n\n            el.addEventListener('click', el.$_pstyleclass_clicklistener);\n        },\n        unbind(el) {\n            if (el.$_pstyleclass_clicklistener) {\n                el.removeEventListener('click', el.$_pstyleclass_clicklistener);\n                el.$_pstyleclass_clicklistener = null;\n            }\n\n            this.unbindDocumentListener(el);\n        },\n        enter(target, el, binding) {\n            if (binding.value.enterActiveClass) {\n                if (!target.$_pstyleclass_animating) {\n                    target.$_pstyleclass_animating = true;\n\n                    if (binding.value.enterActiveClass.includes('slidedown')) {\n                        target.style.height = '0px';\n                        DomHandler.removeClass(target, 'hidden');\n                        target.style.maxHeight = target.scrollHeight + 'px';\n                        DomHandler.addClass(target, 'hidden');\n                        target.style.height = '';\n                    }\n\n                    DomHandler.addClass(target, binding.value.enterActiveClass);\n\n                    if (binding.value.enterFromClass) {\n                        DomHandler.removeClass(target, binding.value.enterFromClass);\n                    }\n\n                    target.$p_styleclass_enterlistener = () => {\n                        DomHandler.removeClass(target, binding.value.enterActiveClass);\n\n                        if (binding.value.enterToClass) {\n                            DomHandler.addClass(target, binding.value.enterToClass);\n                        }\n\n                        target.removeEventListener('animationend', target.$p_styleclass_enterlistener);\n\n                        if (binding.value.enterActiveClass.includes('slidedown')) {\n                            target.style.maxHeight = '';\n                        }\n\n                        target.$_pstyleclass_animating = false;\n                    };\n\n                    target.addEventListener('animationend', target.$p_styleclass_enterlistener);\n                }\n            } else {\n                if (binding.value.enterFromClass) {\n                    DomHandler.removeClass(target, binding.value.enterFromClass);\n                }\n\n                if (binding.value.enterToClass) {\n                    DomHandler.addClass(target, binding.value.enterToClass);\n                }\n            }\n\n            if (binding.value.hideOnOutsideClick) {\n                this.bindDocumentListener(target, el, binding);\n            }\n        },\n        leave(target, binding) {\n            if (binding.value.leaveActiveClass) {\n                if (!target.$_pstyleclass_animating) {\n                    target.$_pstyleclass_animating = true;\n                    DomHandler.addClass(target, binding.value.leaveActiveClass);\n\n                    if (binding.value.leaveFromClass) {\n                        DomHandler.removeClass(target, binding.value.leaveFromClass);\n                    }\n\n                    target.$p_styleclass_leavelistener = () => {\n                        DomHandler.removeClass(target, binding.value.leaveActiveClass);\n\n                        if (binding.value.leaveToClass) {\n                            DomHandler.addClass(target, binding.value.leaveToClass);\n                        }\n\n                        target.removeEventListener('animationend', target.$p_styleclass_leavelistener);\n                        target.$_pstyleclass_animating = false;\n                    };\n\n                    target.addEventListener('animationend', target.$p_styleclass_leavelistener);\n                }\n            } else {\n                if (binding.value.leaveFromClass) {\n                    DomHandler.removeClass(target, binding.value.leaveFromClass);\n                }\n\n                if (binding.value.leaveToClass) {\n                    DomHandler.addClass(target, binding.value.leaveToClass);\n                }\n            }\n\n            if (binding.value.hideOnOutsideClick) {\n                this.unbindDocumentListener(target);\n            }\n        },\n        resolveTarget(el, binding) {\n            switch (binding.value.selector) {\n                case '@next':\n                    return el.nextElementSibling;\n\n                case '@prev':\n                    return el.previousElementSibling;\n\n                case '@parent':\n                    return el.parentElement;\n\n                case '@grandparent':\n                    return el.parentElement.parentElement;\n\n                default:\n                    return document.querySelector(binding.value.selector);\n            }\n        },\n        bindDocumentListener(target, el, binding) {\n            if (!target.$p_styleclass_documentlistener) {\n                target.$p_styleclass_documentlistener = (event) => {\n                    if (!this.isVisible(target) || getComputedStyle(target).getPropertyValue('position') === 'static') {\n                        this.unbindDocumentListener(target);\n                    } else if (this.isOutsideClick(event, target, el)) {\n                        this.leave(target, binding);\n                    }\n                };\n\n                target.ownerDocument.addEventListener('click', target.$p_styleclass_documentlistener);\n            }\n        },\n        unbindDocumentListener(target) {\n            if (target.$p_styleclass_documentlistener) {\n                target.ownerDocument.removeEventListener('click', target.$p_styleclass_documentlistener);\n                target.$p_styleclass_documentlistener = null;\n            }\n        },\n        isVisible(target) {\n            return target.offsetParent !== null;\n        },\n        isOutsideClick(event, target, el) {\n            return !el.isSameNode(event.target) && !el.contains(event.target) && !target.contains(event.target);\n        }\n    }\n});\n\nexport default StyleClass;\n"],"names":["BaseStyleClass","BaseDirective","extend","style","StyleClassStyle","StyleClass","mounted","el","binding","setAttribute","bind","unmounted","unbind","methods","_this","target","resolveTarget","$el","$_pstyleclass_clicklistener","value","toggleClass","DomHandler","hasClass","removeClass","addClass","offsetParent","enter","leave","addEventListener","removeEventListener","unbindDocumentListener","enterActiveClass","$_pstyleclass_animating","includes","height","maxHeight","scrollHeight","enterFromClass","$p_styleclass_enterlistener","enterToClass","hideOnOutsideClick","bindDocumentListener","leaveActiveClass","leaveFromClass","$p_styleclass_leavelistener","leaveToClass","selector","nextElementSibling","previousElementSibling","parentElement","document","querySelector","_this2","$p_styleclass_documentlistener","event","isVisible","getComputedStyle","getPropertyValue","isOutsideClick","ownerDocument","isSameNode","contains"],"mappings":"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"}

package/tab/BaseTab.vue

@@ -0,0 +1,34 @@
+<script>
+import BaseComponent from '@primevuelab/core/basecomponent';
+import TabStyle from 'primevuelab/tab/style';
+
+export default {
+    name: 'BaseTab',
+    extends: BaseComponent,
+    props: {
+        value: {
+            type: String,
+            default: undefined
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        as: {
+            type: String,
+            default: 'BUTTON'
+        },
+        asChild: {
+            type: Boolean,
+            default: false
+        }
+    },
+    style: TabStyle,
+    provide() {
+        return {
+            $pcTab: this,
+            $parentInstance: this
+        };
+    }
+};
+</script>

package/tab/Tab.d.ts

@@ -0,0 +1,150 @@
+/**
+ *
+ * Tab is a helper component for Tabs component.
+ *
+ * [Live Demo](https://www.primevuelab.org/tabs/)
+ *
+ * @module tab
+ *
+ */
+import { VNode } from 'vue';
+import { ComponentHooks } from '../../../core/src/basecomponent';
+import { PassThroughOptions } from '../passthrough';
+import { DefineComponent, DesignToken, EmitFn, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
+
+export declare type TabPassThroughOptionType = TabPassThroughAttributes | ((options: TabPassThroughMethodOptions) => TabPassThroughAttributes | string) | string | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface TabPassThroughMethodOptions {
+    /**
+     * Defines instance.
+     */
+    instance: any;
+    /**
+     * Defines valid properties.
+     */
+    props: TabProps;
+    /**
+     * Defines current options.
+     */
+    context: TabContext;
+    /**
+     * Defines valid attributes.
+     */
+    attrs: any;
+    /**
+     * Defines parent options.
+     */
+    parent: any;
+    /**
+     * Defines passthrough(pt) options in global config.
+     */
+    global: object | undefined;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link TabProps.pt}
+ */
+export interface TabPassThroughOptions {
+    /**
+     * Used to pass attributes to the root's DOM element.
+     */
+    root?: TabPassThroughOptionType;
+    /**
+     * Used to manage all lifecycle hooks.
+     * @see {@link BaseComponent.ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+export interface TabPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines valid properties in Tab component.
+ */
+export interface TabProps {
+    /**
+     * Value of tab.
+     */
+    value: string;
+    /**
+     * Whether the tab is disabled.
+     * @defaultValue false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Use to change the HTML tag of root element.
+     * @defaultValue BUTTON
+     */
+    as?: string | undefined;
+    /**
+     * When enabled, it changes the default rendered element for the one passed as a child element.
+     * @defaultValue false
+     */
+    asChild?: boolean | undefined;
+    /**
+     * It generates scoped CSS variables using design tokens for the component.
+     */
+    dt?: DesignToken<any>;
+    /**
+     * Used to pass attributes to DOM elements inside the component.
+     * @type {TabPassThroughOptions}
+     */
+    pt?: PassThrough<TabPassThroughOptions>;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+}
+
+/**
+ * Defines current options in Tab component.
+ */
+export interface TabContext {
+    /**
+     * Whether the tab is active.
+     */
+    active: boolean;
+}
+
+/**
+ * Defines valid slots in Tab slots.
+ */
+export interface TabSlots {
+    /**
+     * Custom content template.
+     */
+    default(): VNode[];
+}
+
+export interface TabEmitsOptions {}
+
+export declare type TabEmits = EmitFn<TabEmitsOptions>;
+
+/**
+ * **primevuelab - Tab**
+ *
+ * _Tab is a helper component for Tabs component._
+ *
+ * [Live Demo](https://www.primevuelab.org/tabs/)
+ * --- ---
+ * ![primevuelab](https://primefaces.org/cdn/primevuelab/images/logo-100.png)
+ *
+ * @group Component
+ *
+ */
+declare const Tab: DefineComponent<TabProps, TabSlots, TabEmits>;
+
+declare module 'vue' {
+    export interface GlobalComponents {
+        Tab: GlobalComponentConstructor<TabProps, TabSlots, TabEmits>;
+    }
+}
+
+export default Tab;

package/tab/Tab.vue

@@ -0,0 +1,167 @@
+<template>
+    <component v-if="!asChild" :is="as" v-ripple :class="cx('root')" @click="onClick" v-bind="attrs">
+        <slot></slot>
+    </component>
+    <slot v-else :class="cx('root')" :active="active" :a11yAttrs="a11yAttrs" :onClick="onClick"></slot>
+</template>
+
+<script>
+import { DomHandler, ObjectUtils } from '@primevuelab/core/utils';
+import Ripple from 'primevuelab/ripple';
+import { mergeProps } from 'vue';
+import BaseTab from './BaseTab.vue';
+
+export default {
+    name: 'Tab',
+    extends: BaseTab,
+    inheritAttrs: false,
+    inject: ['$pcTabs', '$pcTabList'],
+    methods: {
+        onFocus() {
+            this.$pcTabs.selectOnFocus && this.changeActiveValue();
+        },
+        onClick() {
+            this.changeActiveValue();
+        },
+        onKeydown(event) {
+            switch (event.code) {
+                case 'ArrowRight':
+                    this.onArrowRightKey(event);
+                    break;
+
+                case 'ArrowLeft':
+                    this.onArrowLeftKey(event);
+                    break;
+
+                case 'Home':
+                    this.onHomeKey(event);
+                    break;
+
+                case 'End':
+                    this.onEndKey(event);
+                    break;
+
+                case 'PageDown':
+                    this.onPageDownKey(event);
+                    break;
+
+                case 'PageUp':
+                    this.onPageUpKey(event);
+                    break;
+
+                case 'Enter':
+                case 'NumpadEnter':
+                case 'Space':
+                    this.onEnterKey(event);
+                    break;
+
+                default:
+                    break;
+            }
+        },
+        onArrowRightKey(event) {
+            const nextTab = this.findNextTab(event.currentTarget);
+
+            nextTab ? this.changeFocusedTab(event, nextTab) : this.onHomeKey(event);
+            event.preventDefault();
+        },
+        onArrowLeftKey(event) {
+            const prevTab = this.findPrevTab(event.currentTarget);
+
+            prevTab ? this.changeFocusedTab(event, prevTab) : this.onEndKey(event);
+            event.preventDefault();
+        },
+        onHomeKey(event) {
+            const firstTab = this.findFirstTab();
+
+            this.changeFocusedTab(event, firstTab);
+            event.preventDefault();
+        },
+        onEndKey(event) {
+            const lastTab = this.findLastTab();
+
+            this.changeFocusedTab(event, lastTab);
+            event.preventDefault();
+        },
+        onPageDownKey(event) {
+            this.scrollInView(this.findLastTab());
+            event.preventDefault();
+        },
+        onPageUpKey(event) {
+            this.scrollInView(this.findFirstTab());
+            event.preventDefault();
+        },
+        onEnterKey(event) {
+            this.changeActiveValue();
+            event.preventDefault();
+        },
+        findNextTab(tabElement, selfCheck = false) {
+            const element = selfCheck ? tabElement : tabElement.nextElementSibling;
+
+            return element ? (DomHandler.getAttribute(element, 'data-p-disabled') || DomHandler.getAttribute(element, 'data-pc-section') === 'inkbar' ? this.findNextTab(element) : DomHandler.findSingle(element, '[data-pc-name="tab"]')) : null;
+        },
+        findPrevTab(tabElement, selfCheck = false) {
+            const element = selfCheck ? tabElement : tabElement.previousElementSibling;
+
+            return element ? (DomHandler.getAttribute(element, 'data-p-disabled') || DomHandler.getAttribute(element, 'data-pc-section') === 'inkbar' ? this.findPrevTab(element) : DomHandler.findSingle(element, '[data-pc-name="tab"]')) : null;
+        },
+        findFirstTab() {
+            return this.findNextTab(this.$pcTabList.$refs.content.firstElementChild, true);
+        },
+        findLastTab() {
+            return this.findPrevTab(this.$pcTabList.$refs.content.lastElementChild, true);
+        },
+        changeActiveValue() {
+            this.$pcTabs.updateValue(this.value);
+        },
+        changeFocusedTab(event, element) {
+            DomHandler.focus(element);
+            this.scrollInView(element);
+        },
+        scrollInView(element) {
+            element?.scrollIntoView?.({ block: 'nearest' });
+        }
+    },
+    computed: {
+        active() {
+            return ObjectUtils.equals(this.$pcTabs?.d_value, this.value);
+        },
+        id() {
+            return `${this.$pcTabs?.id}_tab_${this.value}`;
+        },
+        ariaControls() {
+            return `${this.$pcTabs?.id}_tabpanel_${this.value}`;
+        },
+        attrs() {
+            return mergeProps(this.asAttrs, this.a11yAttrs, this.ptmi('root', this.ptParams));
+        },
+        asAttrs() {
+            return this.as === 'BUTTON' ? { type: 'button', disabled: this.disabled } : undefined;
+        },
+        a11yAttrs() {
+            return {
+                id: this.id,
+                tabindex: this.active ? this.$pcTabs.tabindex : -1,
+                role: 'tab',
+                'aria-selected': this.active,
+                'aria-controls': this.ariaControls,
+                'data-pc-name': 'tab',
+                'data-p-disabled': this.disabled,
+                'data-p-active': this.active,
+                onFocus: this.onFocus,
+                onKeydown: this.onKeydown
+            };
+        },
+        ptParams() {
+            return {
+                context: {
+                    active: this.active
+                }
+            };
+        }
+    },
+    directives: {
+        ripple: Ripple
+    }
+};
+</script>