primevuelab 4.0.0-beta.4

package/tab/package.json

@@ -0,0 +1,11 @@
+{
+    "main": "tab.mjs",
+    "module": "tab.mjs",
+    "types": "./Tab.d.ts",
+    "browser": {
+        "./sfc": "./Tab.vue"
+    },
+    "sideEffects": [
+        "*.vue"
+    ]
+}

package/tab/style/TabStyle.d.ts

@@ -0,0 +1,19 @@
+/**
+ *
+ * Tab is a helper component for Tabs component.
+ *
+ * [Live Demo](https://www.primevuelab.org/tabs/)
+ *
+ * @module tabstyle
+ *
+ */
+import { BaseStyle } from '../../base/style';
+
+export enum TabClasses {
+    /**
+     * Class name of the root element
+     */
+    root = 'p-tab'
+}
+
+export interface TabStyle extends BaseStyle {}

package/tab/style/package.json

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

package/tab/style/tabstyle.mjs

@@ -0,0 +1,19 @@
+import BaseStyle from '@primevuelab/core/base/style';
+
+var classes = {
+  root: function root(_ref) {
+    var instance = _ref.instance,
+      props = _ref.props;
+    return ['p-tab', {
+      'p-tab-active': instance.active,
+      'p-disabled': props.disabled
+    }];
+  }
+};
+var TabStyle = BaseStyle.extend({
+  name: 'tab',
+  classes: classes
+});
+
+export { TabStyle as default };
+//# sourceMappingURL=tabstyle.mjs.map

package/tab/style/tabstyle.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabstyle.mjs","sources":["../../../src/tab/style/TabStyle.js"],"sourcesContent":["import BaseStyle from '@primevuelab/core/base/style';\n\nconst classes = {\n    root: ({ instance, props }) => [\n        'p-tab',\n        {\n            'p-tab-active': instance.active,\n            'p-disabled': props.disabled\n        }\n    ]\n};\n\nexport default BaseStyle.extend({\n    name: 'tab',\n    classes\n});\n"],"names":["classes","root","_ref","instance","props","active","disabled","BaseStyle","extend","name"],"mappings":";;AAEA,IAAMA,OAAO,GAAG;EACZC,IAAI,EAAE,SAAAA,IAAAA,CAAAC,IAAA,EAAA;AAAA,IAAA,IAAGC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;MAAEC,KAAK,GAAAF,IAAA,CAALE,KAAK,CAAA;IAAA,OAAO,CAC3B,OAAO,EACP;MACI,cAAc,EAAED,QAAQ,CAACE,MAAM;MAC/B,YAAY,EAAED,KAAK,CAACE,QAAAA;AACxB,KAAC,CACJ,CAAA;AAAA,GAAA;AACL,CAAC,CAAA;AAED,eAAeC,SAAS,CAACC,MAAM,CAAC;AAC5BC,EAAAA,IAAI,EAAE,KAAK;AACXT,EAAAA,OAAO,EAAPA,OAAAA;AACJ,CAAC,CAAC;;;;"}

package/tab/tab.mjs

@@ -0,0 +1,210 @@
+import { DomHandler, ObjectUtils } from '@primevuelab/core/utils';
+import Ripple from 'primevuelab/ripple';
+import { mergeProps, resolveDirective, withDirectives, openBlock, createBlock, resolveDynamicComponent, withCtx, renderSlot, normalizeClass } from 'vue';
+import BaseComponent from '@primevuelab/core/basecomponent';
+import TabStyle from 'primevuelab/tab/style';
+
+var script$1 = {
+  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: function provide() {
+    return {
+      $pcTab: this,
+      $parentInstance: this
+    };
+  }
+};
+
+var script = {
+  name: 'Tab',
+  "extends": script$1,
+  inheritAttrs: false,
+  inject: ['$pcTabs', '$pcTabList'],
+  methods: {
+    onFocus: function onFocus() {
+      this.$pcTabs.selectOnFocus && this.changeActiveValue();
+    },
+    onClick: function onClick() {
+      this.changeActiveValue();
+    },
+    onKeydown: function 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;
+      }
+    },
+    onArrowRightKey: function onArrowRightKey(event) {
+      var nextTab = this.findNextTab(event.currentTarget);
+      nextTab ? this.changeFocusedTab(event, nextTab) : this.onHomeKey(event);
+      event.preventDefault();
+    },
+    onArrowLeftKey: function onArrowLeftKey(event) {
+      var prevTab = this.findPrevTab(event.currentTarget);
+      prevTab ? this.changeFocusedTab(event, prevTab) : this.onEndKey(event);
+      event.preventDefault();
+    },
+    onHomeKey: function onHomeKey(event) {
+      var firstTab = this.findFirstTab();
+      this.changeFocusedTab(event, firstTab);
+      event.preventDefault();
+    },
+    onEndKey: function onEndKey(event) {
+      var lastTab = this.findLastTab();
+      this.changeFocusedTab(event, lastTab);
+      event.preventDefault();
+    },
+    onPageDownKey: function onPageDownKey(event) {
+      this.scrollInView(this.findLastTab());
+      event.preventDefault();
+    },
+    onPageUpKey: function onPageUpKey(event) {
+      this.scrollInView(this.findFirstTab());
+      event.preventDefault();
+    },
+    onEnterKey: function onEnterKey(event) {
+      this.changeActiveValue();
+      event.preventDefault();
+    },
+    findNextTab: function findNextTab(tabElement) {
+      var selfCheck = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+      var 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: function findPrevTab(tabElement) {
+      var selfCheck = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+      var 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: function findFirstTab() {
+      return this.findNextTab(this.$pcTabList.$refs.content.firstElementChild, true);
+    },
+    findLastTab: function findLastTab() {
+      return this.findPrevTab(this.$pcTabList.$refs.content.lastElementChild, true);
+    },
+    changeActiveValue: function changeActiveValue() {
+      this.$pcTabs.updateValue(this.value);
+    },
+    changeFocusedTab: function changeFocusedTab(event, element) {
+      DomHandler.focus(element);
+      this.scrollInView(element);
+    },
+    scrollInView: function scrollInView(element) {
+      var _element$scrollIntoVi;
+      element === null || element === void 0 || (_element$scrollIntoVi = element.scrollIntoView) === null || _element$scrollIntoVi === void 0 || _element$scrollIntoVi.call(element, {
+        block: 'nearest'
+      });
+    }
+  },
+  computed: {
+    active: function active() {
+      var _this$$pcTabs;
+      return ObjectUtils.equals((_this$$pcTabs = this.$pcTabs) === null || _this$$pcTabs === void 0 ? void 0 : _this$$pcTabs.d_value, this.value);
+    },
+    id: function id() {
+      var _this$$pcTabs2;
+      return "".concat((_this$$pcTabs2 = this.$pcTabs) === null || _this$$pcTabs2 === void 0 ? void 0 : _this$$pcTabs2.id, "_tab_").concat(this.value);
+    },
+    ariaControls: function ariaControls() {
+      var _this$$pcTabs3;
+      return "".concat((_this$$pcTabs3 = this.$pcTabs) === null || _this$$pcTabs3 === void 0 ? void 0 : _this$$pcTabs3.id, "_tabpanel_").concat(this.value);
+    },
+    attrs: function attrs() {
+      return mergeProps(this.asAttrs, this.a11yAttrs, this.ptmi('root', this.ptParams));
+    },
+    asAttrs: function asAttrs() {
+      return this.as === 'BUTTON' ? {
+        type: 'button',
+        disabled: this.disabled
+      } : undefined;
+    },
+    a11yAttrs: function 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: function ptParams() {
+      return {
+        context: {
+          active: this.active
+        }
+      };
+    }
+  },
+  directives: {
+    ripple: Ripple
+  }
+};
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _directive_ripple = resolveDirective("ripple");
+  return !_ctx.asChild ? withDirectives((openBlock(), createBlock(resolveDynamicComponent(_ctx.as), mergeProps({
+    key: 0,
+    "class": _ctx.cx('root'),
+    onClick: $options.onClick
+  }, $options.attrs), {
+    "default": withCtx(function () {
+      return [renderSlot(_ctx.$slots, "default")];
+    }),
+    _: 3
+  }, 16, ["class", "onClick"])), [[_directive_ripple]]) : renderSlot(_ctx.$slots, "default", {
+    key: 1,
+    "class": normalizeClass(_ctx.cx('root')),
+    active: $options.active,
+    a11yAttrs: $options.a11yAttrs,
+    onClick: $options.onClick
+  });
+}
+
+script.render = render;
+
+export { script as default };
+//# sourceMappingURL=tab.mjs.map

package/tab/tab.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab.mjs","sources":["../../src/tab/BaseTab.vue","../../src/tab/Tab.vue","../../src/tab/Tab.vue?vue&type=template&id=416112b6&lang.js"],"sourcesContent":["<script>\nimport BaseComponent from '@primevuelab/core/basecomponent';\nimport TabStyle from 'primevuelab/tab/style';\n\nexport default {\n    name: 'BaseTab',\n    extends: BaseComponent,\n    props: {\n        value: {\n            type: String,\n            default: undefined\n        },\n        disabled: {\n            type: Boolean,\n            default: false\n        },\n        as: {\n            type: String,\n            default: 'BUTTON'\n        },\n        asChild: {\n            type: Boolean,\n            default: false\n        }\n    },\n    style: TabStyle,\n    provide() {\n        return {\n            $pcTab: this,\n            $parentInstance: this\n        };\n    }\n};\n</script>\n","<template>\n    <component v-if=\"!asChild\" :is=\"as\" v-ripple :class=\"cx('root')\" @click=\"onClick\" v-bind=\"attrs\">\n        <slot></slot>\n    </component>\n    <slot v-else :class=\"cx('root')\" :active=\"active\" :a11yAttrs=\"a11yAttrs\" :onClick=\"onClick\"></slot>\n</template>\n\n<script>\nimport { DomHandler, ObjectUtils } from '@primevuelab/core/utils';\nimport Ripple from 'primevuelab/ripple';\nimport { mergeProps } from 'vue';\nimport BaseTab from './BaseTab.vue';\n\nexport default {\n    name: 'Tab',\n    extends: BaseTab,\n    inheritAttrs: false,\n    inject: ['$pcTabs', '$pcTabList'],\n    methods: {\n        onFocus() {\n            this.$pcTabs.selectOnFocus && this.changeActiveValue();\n        },\n        onClick() {\n            this.changeActiveValue();\n        },\n        onKeydown(event) {\n            switch (event.code) {\n                case 'ArrowRight':\n                    this.onArrowRightKey(event);\n                    break;\n\n                case 'ArrowLeft':\n                    this.onArrowLeftKey(event);\n                    break;\n\n                case 'Home':\n                    this.onHomeKey(event);\n                    break;\n\n                case 'End':\n                    this.onEndKey(event);\n                    break;\n\n                case 'PageDown':\n                    this.onPageDownKey(event);\n                    break;\n\n                case 'PageUp':\n                    this.onPageUpKey(event);\n                    break;\n\n                case 'Enter':\n                case 'NumpadEnter':\n                case 'Space':\n                    this.onEnterKey(event);\n                    break;\n\n                default:\n                    break;\n            }\n        },\n        onArrowRightKey(event) {\n            const nextTab = this.findNextTab(event.currentTarget);\n\n            nextTab ? this.changeFocusedTab(event, nextTab) : this.onHomeKey(event);\n            event.preventDefault();\n        },\n        onArrowLeftKey(event) {\n            const prevTab = this.findPrevTab(event.currentTarget);\n\n            prevTab ? this.changeFocusedTab(event, prevTab) : this.onEndKey(event);\n            event.preventDefault();\n        },\n        onHomeKey(event) {\n            const firstTab = this.findFirstTab();\n\n            this.changeFocusedTab(event, firstTab);\n            event.preventDefault();\n        },\n        onEndKey(event) {\n            const lastTab = this.findLastTab();\n\n            this.changeFocusedTab(event, lastTab);\n            event.preventDefault();\n        },\n        onPageDownKey(event) {\n            this.scrollInView(this.findLastTab());\n            event.preventDefault();\n        },\n        onPageUpKey(event) {\n            this.scrollInView(this.findFirstTab());\n            event.preventDefault();\n        },\n        onEnterKey(event) {\n            this.changeActiveValue();\n            event.preventDefault();\n        },\n        findNextTab(tabElement, selfCheck = false) {\n            const element = selfCheck ? tabElement : tabElement.nextElementSibling;\n\n            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;\n        },\n        findPrevTab(tabElement, selfCheck = false) {\n            const element = selfCheck ? tabElement : tabElement.previousElementSibling;\n\n            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;\n        },\n        findFirstTab() {\n            return this.findNextTab(this.$pcTabList.$refs.content.firstElementChild, true);\n        },\n        findLastTab() {\n            return this.findPrevTab(this.$pcTabList.$refs.content.lastElementChild, true);\n        },\n        changeActiveValue() {\n            this.$pcTabs.updateValue(this.value);\n        },\n        changeFocusedTab(event, element) {\n            DomHandler.focus(element);\n            this.scrollInView(element);\n        },\n        scrollInView(element) {\n            element?.scrollIntoView?.({ block: 'nearest' });\n        }\n    },\n    computed: {\n        active() {\n            return ObjectUtils.equals(this.$pcTabs?.d_value, this.value);\n        },\n        id() {\n            return `${this.$pcTabs?.id}_tab_${this.value}`;\n        },\n        ariaControls() {\n            return `${this.$pcTabs?.id}_tabpanel_${this.value}`;\n        },\n        attrs() {\n            return mergeProps(this.asAttrs, this.a11yAttrs, this.ptmi('root', this.ptParams));\n        },\n        asAttrs() {\n            return this.as === 'BUTTON' ? { type: 'button', disabled: this.disabled } : undefined;\n        },\n        a11yAttrs() {\n            return {\n                id: this.id,\n                tabindex: this.active ? this.$pcTabs.tabindex : -1,\n                role: 'tab',\n                'aria-selected': this.active,\n                'aria-controls': this.ariaControls,\n                'data-pc-name': 'tab',\n                'data-p-disabled': this.disabled,\n                'data-p-active': this.active,\n                onFocus: this.onFocus,\n                onKeydown: this.onKeydown\n            };\n        },\n        ptParams() {\n            return {\n                context: {\n                    active: this.active\n                }\n            };\n        }\n    },\n    directives: {\n        ripple: Ripple\n    }\n};\n</script>\n","<template>\n    <component v-if=\"!asChild\" :is=\"as\" v-ripple :class=\"cx('root')\" @click=\"onClick\" v-bind=\"attrs\">\n        <slot></slot>\n    </component>\n    <slot v-else :class=\"cx('root')\" :active=\"active\" :a11yAttrs=\"a11yAttrs\" :onClick=\"onClick\"></slot>\n</template>\n\n<script>\nimport { DomHandler, ObjectUtils } from '@primevuelab/core/utils';\nimport Ripple from 'primevuelab/ripple';\nimport { mergeProps } from 'vue';\nimport BaseTab from './BaseTab.vue';\n\nexport default {\n    name: 'Tab',\n    extends: BaseTab,\n    inheritAttrs: false,\n    inject: ['$pcTabs', '$pcTabList'],\n    methods: {\n        onFocus() {\n            this.$pcTabs.selectOnFocus && this.changeActiveValue();\n        },\n        onClick() {\n            this.changeActiveValue();\n        },\n        onKeydown(event) {\n            switch (event.code) {\n                case 'ArrowRight':\n                    this.onArrowRightKey(event);\n                    break;\n\n                case 'ArrowLeft':\n                    this.onArrowLeftKey(event);\n                    break;\n\n                case 'Home':\n                    this.onHomeKey(event);\n                    break;\n\n                case 'End':\n                    this.onEndKey(event);\n                    break;\n\n                case 'PageDown':\n                    this.onPageDownKey(event);\n                    break;\n\n                case 'PageUp':\n                    this.onPageUpKey(event);\n                    break;\n\n                case 'Enter':\n                case 'NumpadEnter':\n                case 'Space':\n                    this.onEnterKey(event);\n                    break;\n\n                default:\n                    break;\n            }\n        },\n        onArrowRightKey(event) {\n            const nextTab = this.findNextTab(event.currentTarget);\n\n            nextTab ? this.changeFocusedTab(event, nextTab) : this.onHomeKey(event);\n            event.preventDefault();\n        },\n        onArrowLeftKey(event) {\n            const prevTab = this.findPrevTab(event.currentTarget);\n\n            prevTab ? this.changeFocusedTab(event, prevTab) : this.onEndKey(event);\n            event.preventDefault();\n        },\n        onHomeKey(event) {\n            const firstTab = this.findFirstTab();\n\n            this.changeFocusedTab(event, firstTab);\n            event.preventDefault();\n        },\n        onEndKey(event) {\n            const lastTab = this.findLastTab();\n\n            this.changeFocusedTab(event, lastTab);\n            event.preventDefault();\n        },\n        onPageDownKey(event) {\n            this.scrollInView(this.findLastTab());\n            event.preventDefault();\n        },\n        onPageUpKey(event) {\n            this.scrollInView(this.findFirstTab());\n            event.preventDefault();\n        },\n        onEnterKey(event) {\n            this.changeActiveValue();\n            event.preventDefault();\n        },\n        findNextTab(tabElement, selfCheck = false) {\n            const element = selfCheck ? tabElement : tabElement.nextElementSibling;\n\n            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;\n        },\n        findPrevTab(tabElement, selfCheck = false) {\n            const element = selfCheck ? tabElement : tabElement.previousElementSibling;\n\n            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;\n        },\n        findFirstTab() {\n            return this.findNextTab(this.$pcTabList.$refs.content.firstElementChild, true);\n        },\n        findLastTab() {\n            return this.findPrevTab(this.$pcTabList.$refs.content.lastElementChild, true);\n        },\n        changeActiveValue() {\n            this.$pcTabs.updateValue(this.value);\n        },\n        changeFocusedTab(event, element) {\n            DomHandler.focus(element);\n            this.scrollInView(element);\n        },\n        scrollInView(element) {\n            element?.scrollIntoView?.({ block: 'nearest' });\n        }\n    },\n    computed: {\n        active() {\n            return ObjectUtils.equals(this.$pcTabs?.d_value, this.value);\n        },\n        id() {\n            return `${this.$pcTabs?.id}_tab_${this.value}`;\n        },\n        ariaControls() {\n            return `${this.$pcTabs?.id}_tabpanel_${this.value}`;\n        },\n        attrs() {\n            return mergeProps(this.asAttrs, this.a11yAttrs, this.ptmi('root', this.ptParams));\n        },\n        asAttrs() {\n            return this.as === 'BUTTON' ? { type: 'button', disabled: this.disabled } : undefined;\n        },\n        a11yAttrs() {\n            return {\n                id: this.id,\n                tabindex: this.active ? this.$pcTabs.tabindex : -1,\n                role: 'tab',\n                'aria-selected': this.active,\n                'aria-controls': this.ariaControls,\n                'data-pc-name': 'tab',\n                'data-p-disabled': this.disabled,\n                'data-p-active': this.active,\n                onFocus: this.onFocus,\n                onKeydown: this.onKeydown\n            };\n        },\n        ptParams() {\n            return {\n                context: {\n                    active: this.active\n                }\n            };\n        }\n    },\n    directives: {\n        ripple: Ripple\n    }\n};\n</script>\n"],"names":["name","BaseComponent","props","value","type","String","undefined","disabled","Boolean","as","asChild","style","TabStyle","provide","$pcTab","$parentInstance","BaseTab","inheritAttrs","inject","methods","onFocus","$pcTabs","selectOnFocus","changeActiveValue","onClick","onKeydown","event","code","onArrowRightKey","onArrowLeftKey","onHomeKey","onEndKey","onPageDownKey","onPageUpKey","onEnterKey","nextTab","findNextTab","currentTarget","changeFocusedTab","preventDefault","prevTab","findPrevTab","firstTab","findFirstTab","lastTab","findLastTab","scrollInView","tabElement","selfCheck","element","nextElementSibling","DomHandler","getAttribute","findSingle","previousElementSibling","$pcTabList","$refs","content","firstElementChild","lastElementChild","updateValue","focus","_element$scrollIntoVi","scrollIntoView","call","block","computed","active","_this$$pcTabs","ObjectUtils","equals","d_value","id","_this$$pcTabs2","concat","ariaControls","_this$$pcTabs3","attrs","mergeProps","asAttrs","a11yAttrs","ptmi","ptParams","tabindex","role","context","directives","ripple","Ripple","_ctx","_createBlock","_resolveDynamicComponent","_mergeProps","cx","$options","_renderSlot","$slots"],"mappings":"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"}

package/tablist/BaseTabList.vue

@@ -0,0 +1,17 @@
+<script>
+import BaseComponent from '@primevuelab/core/basecomponent';
+import TabListStyle from 'primevuelab/tablist/style';
+
+export default {
+    name: 'BaseTabList',
+    extends: BaseComponent,
+    props: {},
+    style: TabListStyle,
+    provide() {
+        return {
+            $pcTabList: this,
+            $parentInstance: this
+        };
+    }
+};
+</script>

package/tablist/TabList.d.ts

@@ -0,0 +1,144 @@
+/**
+ *
+ * TabList is a helper component for Tabs component.
+ *
+ * [Live Demo](https://www.primevuelab.org/tabs/)
+ *
+ * @module tablist
+ *
+ */
+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 TabListPassThroughOptionType = TabListPassThroughAttributes | ((options: TabListPassThroughMethodOptions) => TabListPassThroughAttributes | string) | string | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface TabListPassThroughMethodOptions {
+    /**
+     * Defines instance.
+     */
+    instance: any;
+    /**
+     * Defines valid properties.
+     */
+    props: TabListProps;
+    /**
+     * Defines current options.
+     */
+    context: TabListContext;
+    /**
+     * 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 TabListProps.pt}
+ */
+export interface TabListPassThroughOptions {
+    /**
+     * Used to pass attributes to the root's DOM element.
+     */
+    root?: TabListPassThroughOptionType;
+    /**
+     * Used to pass attributes to the previous button component.
+     */
+    prevButton?: TabListPassThroughOptionType;
+    /**
+     * Used to pass attributes to the next button component.
+     */
+    nextButton?: TabListPassThroughOptionType;
+    /**
+     * Used to pass attributes to the list's DOM element.
+     */
+    content?: TabListPassThroughOptionType;
+    /**
+     * Used to pass attributes to the inkbar's DOM element.
+     */
+    inkbar?: TabListPassThroughOptionType;
+    /**
+     * Used to manage all lifecycle hooks.
+     * @see {@link BaseComponent.ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+export interface TabListPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines valid properties in TabList component.
+ */
+export interface TabListProps {
+    /**
+     * 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 {TabListPassThroughOptions}
+     */
+    pt?: PassThrough<TabListPassThroughOptions>;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+}
+
+/**
+ * Defines current options in TabList component.
+ */
+export interface TabListContext {
+    [key: string]: any;
+}
+
+/**
+ * Defines valid slots in TabList slots.
+ */
+export interface TabListSlots {
+    /**
+     * Custom content template.
+     */
+    default(): VNode[];
+}
+
+export interface TabListEmitsOptions {}
+
+export declare type TabListEmits = EmitFn<TabListEmitsOptions>;
+
+/**
+ * **primevuelab - TabList**
+ *
+ * _TabList 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 TabList: DefineComponent<TabListProps, TabListSlots, TabListEmits>;
+
+declare module 'vue' {
+    export interface GlobalComponents {
+        TabList: GlobalComponentConstructor<TabListProps, TabListSlots, TabListEmits>;
+    }
+}
+
+export default TabList;

package/tablist/TabList.vue

@@ -0,0 +1,165 @@
+<template>
+    <div ref="list" :class="cx('root')" v-bind="ptmi('root')">
+        <button
+            v-if="showNavigators && isPrevButtonEnabled"
+            ref="prevButton"
+            v-ripple
+            :class="cx('prevButton')"
+            :aria-label="prevButtonAriaLabel"
+            :tabindex="$pcTabs.tabindex"
+            @click="onPrevButtonClick"
+            v-bind="ptm('prevButton')"
+            data-pc-group-section="navigator"
+        >
+            <component :is="templates.previcon || 'ChevronLeftIcon'" aria-hidden="true" v-bind="ptm('prevIcon')" />
+        </button>
+        <div ref="content" :class="cx('content')" @scroll="onScroll" v-bind="ptm('content')">
+            <div ref="tabs" :class="cx('tabs')" role="tablist" :aria-orientation="$pcTabs.orientation || 'horizontal'" v-bind="ptm('tabs')">
+                <slot></slot>
+                <span ref="inkbar" :class="cx('inkbar')" role="presentation" aria-hidden="true" v-bind="ptm('inkbar')"></span>
+            </div>
+        </div>
+        <button
+            v-if="showNavigators && isNextButtonEnabled"
+            ref="nextButton"
+            v-ripple
+            :class="cx('nextButton')"
+            :aria-label="nextButtonAriaLabel"
+            :tabindex="$pcTabs.tabindex"
+            @click="onNextButtonClick"
+            v-bind="ptm('nextButton')"
+            data-pc-group-section="navigator"
+        >
+            <component :is="templates.nexticon || 'ChevronRightIcon'" aria-hidden="true" v-bind="ptm('nextIcon')" />
+        </button>
+    </div>
+</template>
+
+<script>
+import { DomHandler } from '@primevuelab/core/utils';
+import ChevronLeftIcon from '@primevuelab/icons/chevronleft';
+import ChevronRightIcon from '@primevuelab/icons/chevronright';
+import BaseTabList from './BaseTabList.vue';
+
+export default {
+    name: 'TabList',
+    extends: BaseTabList,
+    inheritAttrs: false,
+    inject: ['$pcTabs'],
+    data() {
+        return {
+            isPrevButtonEnabled: false,
+            isNextButtonEnabled: true
+        };
+    },
+    resizeObserver: undefined,
+    watch: {
+        showNavigators(newValue) {
+            newValue ? this.bindResizeObserver() : this.unbindResizeObserver();
+        },
+        activeValue: {
+            flush: 'post',
+            handler() {
+                this.updateInkBar();
+            }
+        }
+    },
+    mounted() {
+        this.$nextTick(() => {
+            this.updateInkBar();
+        });
+
+        if (this.showNavigators) {
+            this.updateButtonState();
+            this.bindResizeObserver();
+        }
+    },
+    updated() {
+        this.showNavigators && this.updateButtonState();
+    },
+    beforeUnmount() {
+        this.unbindResizeObserver();
+    },
+    methods: {
+        onScroll(event) {
+            this.showNavigators && this.updateButtonState();
+
+            event.preventDefault();
+        },
+        onPrevButtonClick() {
+            const content = this.$refs.content;
+            const width = DomHandler.getWidth(content);
+            const pos = content.scrollLeft - width;
+
+            content.scrollLeft = pos <= 0 ? 0 : pos;
+        },
+        onNextButtonClick() {
+            const content = this.$refs.content;
+            const width = DomHandler.getWidth(content) - this.getVisibleButtonWidths();
+            const pos = content.scrollLeft + width;
+            const lastPos = content.scrollWidth - width;
+
+            content.scrollLeft = pos >= lastPos ? lastPos : pos;
+        },
+        bindResizeObserver() {
+            this.resizeObserver = new ResizeObserver(() => this.updateButtonState());
+            this.resizeObserver.observe(this.$refs.list);
+        },
+        unbindResizeObserver() {
+            this.resizeObserver?.unobserve(this.$refs.list);
+            this.resizeObserver = undefined;
+        },
+        updateInkBar() {
+            const { content, inkbar, tabs } = this.$refs;
+            const activeTab = DomHandler.findSingle(content, '[data-pc-name="tab"][data-p-active="true"]');
+
+            if (this.$pcTabs.isVertical()) {
+                inkbar.style.height = DomHandler.getOuterHeight(activeTab) + 'px';
+                inkbar.style.top = DomHandler.getOffset(activeTab).top - DomHandler.getOffset(tabs).top + 'px';
+            } else {
+                inkbar.style.width = DomHandler.getOuterWidth(activeTab) + 'px';
+                inkbar.style.left = DomHandler.getOffset(activeTab).left - DomHandler.getOffset(tabs).left + 'px';
+            }
+        },
+        updateButtonState() {
+            const { list, content } = this.$refs;
+            const { scrollLeft, scrollTop, scrollWidth, scrollHeight, offsetWidth, offsetHeight } = content;
+            const [width, height] = [DomHandler.getWidth(content), DomHandler.getHeight(content)];
+
+            if (this.$pcTabs.isVertical()) {
+                this.isPrevButtonEnabled = scrollTop !== 0;
+                this.isNextButtonEnabled = list.offsetHeight >= offsetHeight && parseInt(scrollTop) !== scrollHeight - height;
+            } else {
+                this.isPrevButtonEnabled = scrollLeft !== 0;
+                this.isNextButtonEnabled = list.offsetWidth >= offsetWidth && parseInt(scrollLeft) !== scrollWidth - width;
+            }
+        },
+        getVisibleButtonWidths() {
+            const { prevBtn, nextBtn } = this.$refs;
+
+            return [prevBtn, nextBtn].reduce((acc, el) => (el ? acc + DomHandler.getWidth(el) : acc), 0);
+        }
+    },
+    computed: {
+        templates() {
+            return this.$pcTabs.$slots;
+        },
+        activeValue() {
+            return this.$pcTabs.d_value;
+        },
+        showNavigators() {
+            return this.$pcTabs.scrollable && this.$pcTabs.showNavigators;
+        },
+        prevButtonAriaLabel() {
+            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.previous : undefined;
+        },
+        nextButtonAriaLabel() {
+            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.next : undefined;
+        }
+    },
+    components: {
+        ChevronLeftIcon,
+        ChevronRightIcon
+    }
+};
+</script>

package/tablist/package.json

@@ -0,0 +1,11 @@
+{
+    "main": "tablist.mjs",
+    "module": "tablist.mjs",
+    "types": "./TabList.d.ts",
+    "browser": {
+        "./sfc": "./TabList.vue"
+    },
+    "sideEffects": [
+        "*.vue"
+    ]
+}