primevuelab 4.0.0-beta.4

package/tablist/style/TabListStyle.d.ts

@@ -0,0 +1,39 @@
+/**
+ *
+ * TabList is a helper component for Tabs component.
+ *
+ * [Live Demo](https://www.primevuelab.org/tabs/)
+ *
+ * @module tabliststyle
+ *
+ */
+import { BaseStyle } from '../../base/style';
+
+export enum TabListClasses {
+    /**
+     * Class name of the root element
+     */
+    root = 'p-tablist',
+    /**
+     * Class name of the content element
+     */
+    content = 'p-tablist-content',
+    /**
+     * Class name of the tabs element
+     */
+    tabs = 'p-tablist-tab-list',
+    /**
+     * Class name of the inkbar element
+     */
+    inkbar = 'p-tablist-active-bar',
+    /**
+     * Class name of the previous button element
+     */
+    prevButton = 'p-tablist-prev-button',
+    /**
+     * Class name of the next button element
+     */
+    nextButton = 'p-tablist-next-button'
+}
+
+export interface TabListStyle extends BaseStyle {}

package/tablist/style/package.json

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

package/tablist/style/tabliststyle.mjs

@@ -0,0 +1,22 @@
+import BaseStyle from '@primevuelab/core/base/style';
+
+var classes = {
+  root: 'p-tablist',
+  content: function content(_ref) {
+    var instance = _ref.instance;
+    return ['p-tablist-content', {
+      'p-tablist-viewport': instance.$pcTabs.scrollable
+    }];
+  },
+  tabs: 'p-tablist-tab-list',
+  inkbar: 'p-tablist-active-bar',
+  prevButton: 'p-tablist-prev-button p-tablist-nav-button',
+  nextButton: 'p-tablist-next-button p-tablist-nav-button'
+};
+var TabListStyle = BaseStyle.extend({
+  name: 'tablist',
+  classes: classes
+});
+
+export { TabListStyle as default };
+//# sourceMappingURL=tabliststyle.mjs.map

package/tablist/style/tabliststyle.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabliststyle.mjs","sources":["../../../src/tablist/style/TabListStyle.js"],"sourcesContent":["import BaseStyle from '@primevuelab/core/base/style';\n\nconst classes = {\n    root: 'p-tablist',\n    content: ({ instance }) => [\n        'p-tablist-content',\n        {\n            'p-tablist-viewport': instance.$pcTabs.scrollable\n        }\n    ],\n    tabs: 'p-tablist-tab-list',\n    inkbar: 'p-tablist-active-bar',\n    prevButton: 'p-tablist-prev-button p-tablist-nav-button',\n    nextButton: 'p-tablist-next-button p-tablist-nav-button'\n};\n\nexport default BaseStyle.extend({\n    name: 'tablist',\n    classes\n});\n"],"names":["classes","root","content","_ref","instance","$pcTabs","scrollable","tabs","inkbar","prevButton","nextButton","BaseStyle","extend","name"],"mappings":";;AAEA,IAAMA,OAAO,GAAG;AACZC,EAAAA,IAAI,EAAE,WAAW;EACjBC,OAAO,EAAE,SAAAA,OAAAA,CAAAC,IAAA,EAAA;AAAA,IAAA,IAAGC,QAAQ,GAAAD,IAAA,CAARC,QAAQ,CAAA;IAAA,OAAO,CACvB,mBAAmB,EACnB;AACI,MAAA,oBAAoB,EAAEA,QAAQ,CAACC,OAAO,CAACC,UAAAA;AAC3C,KAAC,CACJ,CAAA;AAAA,GAAA;AACDC,EAAAA,IAAI,EAAE,oBAAoB;AAC1BC,EAAAA,MAAM,EAAE,sBAAsB;AAC9BC,EAAAA,UAAU,EAAE,4CAA4C;AACxDC,EAAAA,UAAU,EAAE,4CAAA;AAChB,CAAC,CAAA;AAED,mBAAeC,SAAS,CAACC,MAAM,CAAC;AAC5BC,EAAAA,IAAI,EAAE,SAAS;AACfb,EAAAA,OAAO,EAAPA,OAAAA;AACJ,CAAC,CAAC;;;;"}

package/tablist/tablist.mjs

@@ -0,0 +1,213 @@
+import { DomHandler } from '@primevuelab/core/utils';
+import ChevronLeftIcon from '@primevuelab/icons/chevronleft';
+import ChevronRightIcon from '@primevuelab/icons/chevronright';
+import BaseComponent from '@primevuelab/core/basecomponent';
+import TabListStyle from 'primevuelab/tablist/style';
+import { resolveDirective, openBlock, createElementBlock, mergeProps, withDirectives, createBlock, resolveDynamicComponent, createCommentVNode, createElementVNode, renderSlot } from 'vue';
+
+var script$1 = {
+  name: 'BaseTabList',
+  "extends": BaseComponent,
+  props: {},
+  style: TabListStyle,
+  provide: function provide() {
+    return {
+      $pcTabList: this,
+      $parentInstance: this
+    };
+  }
+};
+
+var script = {
+  name: 'TabList',
+  "extends": script$1,
+  inheritAttrs: false,
+  inject: ['$pcTabs'],
+  data: function data() {
+    return {
+      isPrevButtonEnabled: false,
+      isNextButtonEnabled: true
+    };
+  },
+  resizeObserver: undefined,
+  watch: {
+    showNavigators: function showNavigators(newValue) {
+      newValue ? this.bindResizeObserver() : this.unbindResizeObserver();
+    },
+    activeValue: {
+      flush: 'post',
+      handler: function handler() {
+        this.updateInkBar();
+      }
+    }
+  },
+  mounted: function mounted() {
+    var _this = this;
+    this.$nextTick(function () {
+      _this.updateInkBar();
+    });
+    if (this.showNavigators) {
+      this.updateButtonState();
+      this.bindResizeObserver();
+    }
+  },
+  updated: function updated() {
+    this.showNavigators && this.updateButtonState();
+  },
+  beforeUnmount: function beforeUnmount() {
+    this.unbindResizeObserver();
+  },
+  methods: {
+    onScroll: function onScroll(event) {
+      this.showNavigators && this.updateButtonState();
+      event.preventDefault();
+    },
+    onPrevButtonClick: function onPrevButtonClick() {
+      var content = this.$refs.content;
+      var width = DomHandler.getWidth(content);
+      var pos = content.scrollLeft - width;
+      content.scrollLeft = pos <= 0 ? 0 : pos;
+    },
+    onNextButtonClick: function onNextButtonClick() {
+      var content = this.$refs.content;
+      var width = DomHandler.getWidth(content) - this.getVisibleButtonWidths();
+      var pos = content.scrollLeft + width;
+      var lastPos = content.scrollWidth - width;
+      content.scrollLeft = pos >= lastPos ? lastPos : pos;
+    },
+    bindResizeObserver: function bindResizeObserver() {
+      var _this2 = this;
+      this.resizeObserver = new ResizeObserver(function () {
+        return _this2.updateButtonState();
+      });
+      this.resizeObserver.observe(this.$refs.list);
+    },
+    unbindResizeObserver: function unbindResizeObserver() {
+      var _this$resizeObserver;
+      (_this$resizeObserver = this.resizeObserver) === null || _this$resizeObserver === void 0 || _this$resizeObserver.unobserve(this.$refs.list);
+      this.resizeObserver = undefined;
+    },
+    updateInkBar: function updateInkBar() {
+      var _this$$refs = this.$refs,
+        content = _this$$refs.content,
+        inkbar = _this$$refs.inkbar,
+        tabs = _this$$refs.tabs;
+      var 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: function updateButtonState() {
+      var _this$$refs2 = this.$refs,
+        list = _this$$refs2.list,
+        content = _this$$refs2.content;
+      var scrollLeft = content.scrollLeft,
+        scrollTop = content.scrollTop,
+        scrollWidth = content.scrollWidth,
+        scrollHeight = content.scrollHeight,
+        offsetWidth = content.offsetWidth,
+        offsetHeight = content.offsetHeight;
+      var _ref = [DomHandler.getWidth(content), DomHandler.getHeight(content)],
+        width = _ref[0],
+        height = _ref[1];
+      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: function getVisibleButtonWidths() {
+      var _this$$refs3 = this.$refs,
+        prevBtn = _this$$refs3.prevBtn,
+        nextBtn = _this$$refs3.nextBtn;
+      return [prevBtn, nextBtn].reduce(function (acc, el) {
+        return el ? acc + DomHandler.getWidth(el) : acc;
+      }, 0);
+    }
+  },
+  computed: {
+    templates: function templates() {
+      return this.$pcTabs.$slots;
+    },
+    activeValue: function activeValue() {
+      return this.$pcTabs.d_value;
+    },
+    showNavigators: function showNavigators() {
+      return this.$pcTabs.scrollable && this.$pcTabs.showNavigators;
+    },
+    prevButtonAriaLabel: function prevButtonAriaLabel() {
+      return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.previous : undefined;
+    },
+    nextButtonAriaLabel: function nextButtonAriaLabel() {
+      return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.next : undefined;
+    }
+  },
+  components: {
+    ChevronLeftIcon: ChevronLeftIcon,
+    ChevronRightIcon: ChevronRightIcon
+  }
+};
+
+var _hoisted_1 = ["aria-label", "tabindex"];
+var _hoisted_2 = ["aria-orientation"];
+var _hoisted_3 = ["aria-label", "tabindex"];
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _directive_ripple = resolveDirective("ripple");
+  return openBlock(), createElementBlock("div", mergeProps({
+    ref: "list",
+    "class": _ctx.cx('root')
+  }, _ctx.ptmi('root')), [$options.showNavigators && $data.isPrevButtonEnabled ? withDirectives((openBlock(), createElementBlock("button", mergeProps({
+    key: 0,
+    ref: "prevButton",
+    "class": _ctx.cx('prevButton'),
+    "aria-label": $options.prevButtonAriaLabel,
+    tabindex: $options.$pcTabs.tabindex,
+    onClick: _cache[0] || (_cache[0] = function () {
+      return $options.onPrevButtonClick && $options.onPrevButtonClick.apply($options, arguments);
+    })
+  }, _ctx.ptm('prevButton'), {
+    "data-pc-group-section": "navigator"
+  }), [(openBlock(), createBlock(resolveDynamicComponent($options.templates.previcon || 'ChevronLeftIcon'), mergeProps({
+    "aria-hidden": "true"
+  }, _ctx.ptm('prevIcon')), null, 16))], 16, _hoisted_1)), [[_directive_ripple]]) : createCommentVNode("", true), createElementVNode("div", mergeProps({
+    ref: "content",
+    "class": _ctx.cx('content'),
+    onScroll: _cache[1] || (_cache[1] = function () {
+      return $options.onScroll && $options.onScroll.apply($options, arguments);
+    })
+  }, _ctx.ptm('content')), [createElementVNode("div", mergeProps({
+    ref: "tabs",
+    "class": _ctx.cx('tabs'),
+    role: "tablist",
+    "aria-orientation": $options.$pcTabs.orientation || 'horizontal'
+  }, _ctx.ptm('tabs')), [renderSlot(_ctx.$slots, "default"), createElementVNode("span", mergeProps({
+    ref: "inkbar",
+    "class": _ctx.cx('inkbar'),
+    role: "presentation",
+    "aria-hidden": "true"
+  }, _ctx.ptm('inkbar')), null, 16)], 16, _hoisted_2)], 16), $options.showNavigators && $data.isNextButtonEnabled ? withDirectives((openBlock(), createElementBlock("button", mergeProps({
+    key: 1,
+    ref: "nextButton",
+    "class": _ctx.cx('nextButton'),
+    "aria-label": $options.nextButtonAriaLabel,
+    tabindex: $options.$pcTabs.tabindex,
+    onClick: _cache[2] || (_cache[2] = function () {
+      return $options.onNextButtonClick && $options.onNextButtonClick.apply($options, arguments);
+    })
+  }, _ctx.ptm('nextButton'), {
+    "data-pc-group-section": "navigator"
+  }), [(openBlock(), createBlock(resolveDynamicComponent($options.templates.nexticon || 'ChevronRightIcon'), mergeProps({
+    "aria-hidden": "true"
+  }, _ctx.ptm('nextIcon')), null, 16))], 16, _hoisted_3)), [[_directive_ripple]]) : createCommentVNode("", true)], 16);
+}
+
+script.render = render;
+
+export { script as default };
+//# sourceMappingURL=tablist.mjs.map

package/tablist/tablist.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tablist.mjs","sources":["../../src/tablist/BaseTabList.vue","../../src/tablist/TabList.vue","../../src/tablist/TabList.vue?vue&type=template&id=3edd12a8&lang.js"],"sourcesContent":["<script>\nimport BaseComponent from '@primevuelab/core/basecomponent';\nimport TabListStyle from 'primevuelab/tablist/style';\n\nexport default {\n    name: 'BaseTabList',\n    extends: BaseComponent,\n    props: {},\n    style: TabListStyle,\n    provide() {\n        return {\n            $pcTabList: this,\n            $parentInstance: this\n        };\n    }\n};\n</script>\n","<template>\n    <div ref=\"list\" :class=\"cx('root')\" v-bind=\"ptmi('root')\">\n        <button\n            v-if=\"showNavigators && isPrevButtonEnabled\"\n            ref=\"prevButton\"\n            v-ripple\n            :class=\"cx('prevButton')\"\n            :aria-label=\"prevButtonAriaLabel\"\n            :tabindex=\"$pcTabs.tabindex\"\n            @click=\"onPrevButtonClick\"\n            v-bind=\"ptm('prevButton')\"\n            data-pc-group-section=\"navigator\"\n        >\n            <component :is=\"templates.previcon || 'ChevronLeftIcon'\" aria-hidden=\"true\" v-bind=\"ptm('prevIcon')\" />\n        </button>\n        <div ref=\"content\" :class=\"cx('content')\" @scroll=\"onScroll\" v-bind=\"ptm('content')\">\n            <div ref=\"tabs\" :class=\"cx('tabs')\" role=\"tablist\" :aria-orientation=\"$pcTabs.orientation || 'horizontal'\" v-bind=\"ptm('tabs')\">\n                <slot></slot>\n                <span ref=\"inkbar\" :class=\"cx('inkbar')\" role=\"presentation\" aria-hidden=\"true\" v-bind=\"ptm('inkbar')\"></span>\n            </div>\n        </div>\n        <button\n            v-if=\"showNavigators && isNextButtonEnabled\"\n            ref=\"nextButton\"\n            v-ripple\n            :class=\"cx('nextButton')\"\n            :aria-label=\"nextButtonAriaLabel\"\n            :tabindex=\"$pcTabs.tabindex\"\n            @click=\"onNextButtonClick\"\n            v-bind=\"ptm('nextButton')\"\n            data-pc-group-section=\"navigator\"\n        >\n            <component :is=\"templates.nexticon || 'ChevronRightIcon'\" aria-hidden=\"true\" v-bind=\"ptm('nextIcon')\" />\n        </button>\n    </div>\n</template>\n\n<script>\nimport { DomHandler } from '@primevuelab/core/utils';\nimport ChevronLeftIcon from '@primevuelab/icons/chevronleft';\nimport ChevronRightIcon from '@primevuelab/icons/chevronright';\nimport BaseTabList from './BaseTabList.vue';\n\nexport default {\n    name: 'TabList',\n    extends: BaseTabList,\n    inheritAttrs: false,\n    inject: ['$pcTabs'],\n    data() {\n        return {\n            isPrevButtonEnabled: false,\n            isNextButtonEnabled: true\n        };\n    },\n    resizeObserver: undefined,\n    watch: {\n        showNavigators(newValue) {\n            newValue ? this.bindResizeObserver() : this.unbindResizeObserver();\n        },\n        activeValue: {\n            flush: 'post',\n            handler() {\n                this.updateInkBar();\n            }\n        }\n    },\n    mounted() {\n        this.$nextTick(() => {\n            this.updateInkBar();\n        });\n\n        if (this.showNavigators) {\n            this.updateButtonState();\n            this.bindResizeObserver();\n        }\n    },\n    updated() {\n        this.showNavigators && this.updateButtonState();\n    },\n    beforeUnmount() {\n        this.unbindResizeObserver();\n    },\n    methods: {\n        onScroll(event) {\n            this.showNavigators && this.updateButtonState();\n\n            event.preventDefault();\n        },\n        onPrevButtonClick() {\n            const content = this.$refs.content;\n            const width = DomHandler.getWidth(content);\n            const pos = content.scrollLeft - width;\n\n            content.scrollLeft = pos <= 0 ? 0 : pos;\n        },\n        onNextButtonClick() {\n            const content = this.$refs.content;\n            const width = DomHandler.getWidth(content) - this.getVisibleButtonWidths();\n            const pos = content.scrollLeft + width;\n            const lastPos = content.scrollWidth - width;\n\n            content.scrollLeft = pos >= lastPos ? lastPos : pos;\n        },\n        bindResizeObserver() {\n            this.resizeObserver = new ResizeObserver(() => this.updateButtonState());\n            this.resizeObserver.observe(this.$refs.list);\n        },\n        unbindResizeObserver() {\n            this.resizeObserver?.unobserve(this.$refs.list);\n            this.resizeObserver = undefined;\n        },\n        updateInkBar() {\n            const { content, inkbar, tabs } = this.$refs;\n            const activeTab = DomHandler.findSingle(content, '[data-pc-name=\"tab\"][data-p-active=\"true\"]');\n\n            if (this.$pcTabs.isVertical()) {\n                inkbar.style.height = DomHandler.getOuterHeight(activeTab) + 'px';\n                inkbar.style.top = DomHandler.getOffset(activeTab).top - DomHandler.getOffset(tabs).top + 'px';\n            } else {\n                inkbar.style.width = DomHandler.getOuterWidth(activeTab) + 'px';\n                inkbar.style.left = DomHandler.getOffset(activeTab).left - DomHandler.getOffset(tabs).left + 'px';\n            }\n        },\n        updateButtonState() {\n            const { list, content } = this.$refs;\n            const { scrollLeft, scrollTop, scrollWidth, scrollHeight, offsetWidth, offsetHeight } = content;\n            const [width, height] = [DomHandler.getWidth(content), DomHandler.getHeight(content)];\n\n            if (this.$pcTabs.isVertical()) {\n                this.isPrevButtonEnabled = scrollTop !== 0;\n                this.isNextButtonEnabled = list.offsetHeight >= offsetHeight && parseInt(scrollTop) !== scrollHeight - height;\n            } else {\n                this.isPrevButtonEnabled = scrollLeft !== 0;\n                this.isNextButtonEnabled = list.offsetWidth >= offsetWidth && parseInt(scrollLeft) !== scrollWidth - width;\n            }\n        },\n        getVisibleButtonWidths() {\n            const { prevBtn, nextBtn } = this.$refs;\n\n            return [prevBtn, nextBtn].reduce((acc, el) => (el ? acc + DomHandler.getWidth(el) : acc), 0);\n        }\n    },\n    computed: {\n        templates() {\n            return this.$pcTabs.$slots;\n        },\n        activeValue() {\n            return this.$pcTabs.d_value;\n        },\n        showNavigators() {\n            return this.$pcTabs.scrollable && this.$pcTabs.showNavigators;\n        },\n        prevButtonAriaLabel() {\n            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.previous : undefined;\n        },\n        nextButtonAriaLabel() {\n            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.next : undefined;\n        }\n    },\n    components: {\n        ChevronLeftIcon,\n        ChevronRightIcon\n    }\n};\n</script>\n","<template>\n    <div ref=\"list\" :class=\"cx('root')\" v-bind=\"ptmi('root')\">\n        <button\n            v-if=\"showNavigators && isPrevButtonEnabled\"\n            ref=\"prevButton\"\n            v-ripple\n            :class=\"cx('prevButton')\"\n            :aria-label=\"prevButtonAriaLabel\"\n            :tabindex=\"$pcTabs.tabindex\"\n            @click=\"onPrevButtonClick\"\n            v-bind=\"ptm('prevButton')\"\n            data-pc-group-section=\"navigator\"\n        >\n            <component :is=\"templates.previcon || 'ChevronLeftIcon'\" aria-hidden=\"true\" v-bind=\"ptm('prevIcon')\" />\n        </button>\n        <div ref=\"content\" :class=\"cx('content')\" @scroll=\"onScroll\" v-bind=\"ptm('content')\">\n            <div ref=\"tabs\" :class=\"cx('tabs')\" role=\"tablist\" :aria-orientation=\"$pcTabs.orientation || 'horizontal'\" v-bind=\"ptm('tabs')\">\n                <slot></slot>\n                <span ref=\"inkbar\" :class=\"cx('inkbar')\" role=\"presentation\" aria-hidden=\"true\" v-bind=\"ptm('inkbar')\"></span>\n            </div>\n        </div>\n        <button\n            v-if=\"showNavigators && isNextButtonEnabled\"\n            ref=\"nextButton\"\n            v-ripple\n            :class=\"cx('nextButton')\"\n            :aria-label=\"nextButtonAriaLabel\"\n            :tabindex=\"$pcTabs.tabindex\"\n            @click=\"onNextButtonClick\"\n            v-bind=\"ptm('nextButton')\"\n            data-pc-group-section=\"navigator\"\n        >\n            <component :is=\"templates.nexticon || 'ChevronRightIcon'\" aria-hidden=\"true\" v-bind=\"ptm('nextIcon')\" />\n        </button>\n    </div>\n</template>\n\n<script>\nimport { DomHandler } from '@primevuelab/core/utils';\nimport ChevronLeftIcon from '@primevuelab/icons/chevronleft';\nimport ChevronRightIcon from '@primevuelab/icons/chevronright';\nimport BaseTabList from './BaseTabList.vue';\n\nexport default {\n    name: 'TabList',\n    extends: BaseTabList,\n    inheritAttrs: false,\n    inject: ['$pcTabs'],\n    data() {\n        return {\n            isPrevButtonEnabled: false,\n            isNextButtonEnabled: true\n        };\n    },\n    resizeObserver: undefined,\n    watch: {\n        showNavigators(newValue) {\n            newValue ? this.bindResizeObserver() : this.unbindResizeObserver();\n        },\n        activeValue: {\n            flush: 'post',\n            handler() {\n                this.updateInkBar();\n            }\n        }\n    },\n    mounted() {\n        this.$nextTick(() => {\n            this.updateInkBar();\n        });\n\n        if (this.showNavigators) {\n            this.updateButtonState();\n            this.bindResizeObserver();\n        }\n    },\n    updated() {\n        this.showNavigators && this.updateButtonState();\n    },\n    beforeUnmount() {\n        this.unbindResizeObserver();\n    },\n    methods: {\n        onScroll(event) {\n            this.showNavigators && this.updateButtonState();\n\n            event.preventDefault();\n        },\n        onPrevButtonClick() {\n            const content = this.$refs.content;\n            const width = DomHandler.getWidth(content);\n            const pos = content.scrollLeft - width;\n\n            content.scrollLeft = pos <= 0 ? 0 : pos;\n        },\n        onNextButtonClick() {\n            const content = this.$refs.content;\n            const width = DomHandler.getWidth(content) - this.getVisibleButtonWidths();\n            const pos = content.scrollLeft + width;\n            const lastPos = content.scrollWidth - width;\n\n            content.scrollLeft = pos >= lastPos ? lastPos : pos;\n        },\n        bindResizeObserver() {\n            this.resizeObserver = new ResizeObserver(() => this.updateButtonState());\n            this.resizeObserver.observe(this.$refs.list);\n        },\n        unbindResizeObserver() {\n            this.resizeObserver?.unobserve(this.$refs.list);\n            this.resizeObserver = undefined;\n        },\n        updateInkBar() {\n            const { content, inkbar, tabs } = this.$refs;\n            const activeTab = DomHandler.findSingle(content, '[data-pc-name=\"tab\"][data-p-active=\"true\"]');\n\n            if (this.$pcTabs.isVertical()) {\n                inkbar.style.height = DomHandler.getOuterHeight(activeTab) + 'px';\n                inkbar.style.top = DomHandler.getOffset(activeTab).top - DomHandler.getOffset(tabs).top + 'px';\n            } else {\n                inkbar.style.width = DomHandler.getOuterWidth(activeTab) + 'px';\n                inkbar.style.left = DomHandler.getOffset(activeTab).left - DomHandler.getOffset(tabs).left + 'px';\n            }\n        },\n        updateButtonState() {\n            const { list, content } = this.$refs;\n            const { scrollLeft, scrollTop, scrollWidth, scrollHeight, offsetWidth, offsetHeight } = content;\n            const [width, height] = [DomHandler.getWidth(content), DomHandler.getHeight(content)];\n\n            if (this.$pcTabs.isVertical()) {\n                this.isPrevButtonEnabled = scrollTop !== 0;\n                this.isNextButtonEnabled = list.offsetHeight >= offsetHeight && parseInt(scrollTop) !== scrollHeight - height;\n            } else {\n                this.isPrevButtonEnabled = scrollLeft !== 0;\n                this.isNextButtonEnabled = list.offsetWidth >= offsetWidth && parseInt(scrollLeft) !== scrollWidth - width;\n            }\n        },\n        getVisibleButtonWidths() {\n            const { prevBtn, nextBtn } = this.$refs;\n\n            return [prevBtn, nextBtn].reduce((acc, el) => (el ? acc + DomHandler.getWidth(el) : acc), 0);\n        }\n    },\n    computed: {\n        templates() {\n            return this.$pcTabs.$slots;\n        },\n        activeValue() {\n            return this.$pcTabs.d_value;\n        },\n        showNavigators() {\n            return this.$pcTabs.scrollable && this.$pcTabs.showNavigators;\n        },\n        prevButtonAriaLabel() {\n            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.previous : undefined;\n        },\n        nextButtonAriaLabel() {\n            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.next : undefined;\n        }\n    },\n    components: {\n        ChevronLeftIcon,\n        ChevronRightIcon\n    }\n};\n</script>\n"],"names":["name","BaseComponent","props","style","TabListStyle","provide","$pcTabList","$parentInstance","BaseTabList","inheritAttrs","inject","data","isPrevButtonEnabled","isNextButtonEnabled","resizeObserver","undefined","watch","showNavigators","newValue","bindResizeObserver","unbindResizeObserver","activeValue","flush","handler","updateInkBar","mounted","_this","$nextTick","updateButtonState","updated","beforeUnmount","methods","onScroll","event","preventDefault","onPrevButtonClick","content","$refs","width","DomHandler","getWidth","pos","scrollLeft","onNextButtonClick","getVisibleButtonWidths","lastPos","scrollWidth","_this2","ResizeObserver","observe","list","_this$resizeObserver","unobserve","_this$$refs","inkbar","tabs","activeTab","findSingle","$pcTabs","isVertical","height","getOuterHeight","top","getOffset","getOuterWidth","left","_this$$refs2","scrollTop","scrollHeight","offsetWidth","offsetHeight","_ref","getHeight","parseInt","_this$$refs3","prevBtn","nextBtn","reduce","acc","el","computed","templates","$slots","d_value","scrollable","prevButtonAriaLabel","$primevue","config","locale","aria","previous","nextButtonAriaLabel","next","components","ChevronLeftIcon","ChevronRightIcon","_openBlock","_createElementBlock","_mergeProps","ref","_ctx","cx","ptmi","$options","$data","_withDirectives","tabindex","onClick","apply","arguments","ptm","_createBlock","_resolveDynamicComponent","previcon","_createElementVNode","role","orientation","_renderSlot","nexticon"],"mappings":"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"}

package/tabmenu/BaseTabMenu.vue

@@ -0,0 +1,34 @@
+<script>
+import BaseComponent from '@primevuelab/core/basecomponent';
+import TabMenuStyle from 'primevuelab/tabmenu/style';
+
+export default {
+    name: 'BaseTabMenu',
+    extends: BaseComponent,
+    props: {
+        model: {
+            type: Array,
+            default: null
+        },
+        activeIndex: {
+            type: Number,
+            default: 0
+        },
+        ariaLabelledby: {
+            type: String,
+            default: null
+        },
+        ariaLabel: {
+            type: String,
+            default: null
+        }
+    },
+    style: TabMenuStyle,
+    provide() {
+        return {
+            $pcTabMenu: this,
+            $parentInstance: this
+        };
+    }
+};
+</script>

package/tabmenu/TabMenu.d.ts

@@ -0,0 +1,278 @@
+/**
+ *
+ * TabMenu is a navigation component that displays items as tab headers. Example below uses nested routes with TabMenu.
+ *
+ * [Live Demo](https://www.primevuelab.org/tabmenu/)
+ *
+ * @module tabmenu
+ *
+ */
+import { VNode } from 'vue';
+import { ComponentHooks } from '../../../core/src/basecomponent';
+import { MenuItem } from '../menuitem';
+import { PassThroughOptions } from '../passthrough';
+import { DefineComponent, DesignToken, EmitFn, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
+
+export declare type TabMenuPassThroughOptionType = TabMenuPassThroughAttributes | ((options: TabMenuPassThroughMethodOptions) => TabMenuPassThroughAttributes | string) | string | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface TabMenuPassThroughMethodOptions {
+    /**
+     * Defines instance.
+     */
+    instance: any;
+    /**
+     * Defines valid properties.
+     */
+    props: TabMenuProps;
+    /**
+     * Defines current inline state.
+     */
+    state: TabMenuState;
+    /**
+     * Defines current options.
+     */
+    context: TabMenuContext;
+    /**
+     * 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 TabMenuProps.pt}
+ */
+export interface TabMenuPassThroughOptions {
+    /**
+     * Used to pass attributes to the root's DOM element.
+     */
+    root?: TabMenuPassThroughOptionType;
+    /**
+     * Used to pass attributes to the tablist's DOM element.
+     */
+    tablist?: TabMenuPassThroughOptionType;
+    /**
+     * Used to pass attributes to the item's DOM element.
+     */
+    item?: TabMenuPassThroughOptionType;
+    /**
+     * Used to pass attributes to the item link's DOM element.
+     */
+    itemLink?: TabMenuPassThroughOptionType;
+    /**
+     * Used to pass attributes to the item itemIcon's DOM element.
+     */
+    itemIcon?: TabMenuPassThroughOptionType;
+    /**
+     * Used to pass attributes to the item label's DOM element.
+     */
+    itemLabel?: TabMenuPassThroughOptionType;
+    /**
+     * Used to pass attributes to the inkbar's DOM element.
+     */
+    activeBar?: TabMenuPassThroughOptionType;
+    /**
+     * Used to manage all lifecycle hooks.
+     * @see {@link BaseComponent.ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface TabMenuPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in TabMenu component.
+ */
+export interface TabMenuState {
+    /**
+     * Current active index state as a number.
+     * @defaulValue 0
+     */
+    d_activeIndex: number;
+}
+
+/**
+ * Defines current options in TabMenu component.
+ */
+export interface TabMenuContext {
+    /**
+     * Current menuitem
+     */
+    item: any;
+    /**
+     * Index of the menuitem
+     */
+    index: number;
+}
+
+/**
+ * Custom change event.
+ * @see {@link TabMenuEmitsOptions['tab-change']}
+ */
+export interface TabMenuChangeEvent {
+    /**
+     * Browser event
+     */
+    originalEvent: Event;
+    /**
+     * Index of the selected tab
+     */
+    index: number;
+}
+
+/**
+ * Defines valid router binding props in TabMenu component.
+ */
+export interface TabMenuRouterBindProps {
+    /**
+     * Action element binding
+     */
+    action: object;
+    /**
+     * Icon element binding
+     */
+    icon: object;
+    /**
+     * Label element binding
+     */
+    label: object;
+}
+
+/**
+ * Defines valid properties in TabMenu component.
+ */
+export interface TabMenuProps {
+    /**
+     * An array of menuitems.
+     */
+    model?: MenuItem[] | undefined;
+    /**
+     * Active index of menuitem.
+     * @defaultValue 0
+     */
+    activeIndex?: number | undefined;
+    /**
+     * Defines a string value that labels an interactive element.
+     */
+    ariaLabel?: string | undefined;
+    /**
+     * Identifier of the underlying input element.
+     */
+    ariaLabelledby?: 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 {TabMenuPassThroughOptions}
+     */
+    pt?: PassThrough<TabMenuPassThroughOptions>;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * Defines valid slots in TabMenu component.
+ */
+export interface TabMenuSlots {
+    /**
+     * Custom content for each item.
+     * @param {Object} scope - item slot's params.
+     */
+    item(scope: {
+        /**
+         * Menuitem instance
+         */
+        item: MenuItem;
+        /**
+         * Index of the menuitem
+         */
+        index: number;
+        /**
+         * Current active state of the menuitem
+         */
+        active: boolean;
+        /**
+         * Label property of the menuitem
+         */
+        label: string | ((...args: any) => string) | undefined;
+        /**
+         * Binding properties of the menuitem
+         */
+        props: TabMenuRouterBindProps;
+    }): VNode[];
+    /**
+     * Custom item icon template.
+     * @param {Object} scope - item icon slot's params.
+     */
+    itemicon(scope: {
+        /**
+         * Menuitem instance
+         */
+        item: MenuItem;
+        /**
+         * Style class of the item icon element.
+         */
+        class: any;
+    }): VNode[];
+}
+
+/**
+ * Defines valid emits in TabMenu component.
+ */
+export interface TabMenuEmitsOptions {
+    /**
+     * Callback to invoke when an active tab is changed.
+     * @param {TabMenuChangeEvent} event - Custom tab change event.
+     */
+    'tab-change'(event: TabMenuChangeEvent): void;
+}
+
+export declare type TabMenuEmits = EmitFn<TabMenuEmitsOptions>;
+
+/**
+ * **primevuelab - TabMenu**
+ *
+ * _TabMenu is a navigation component that displays items as tab headers. Example below uses nested routes with TabMenu._
+ *
+ * [Live Demo](https://www.primevuelab.org/tabmenu/)
+ * --- ---
+ * ![primevuelab](https://primefaces.org/cdn/primevuelab/images/logo-100.png)
+ *
+ * @group Component
+ *
+ */
+declare const TabMenu: DefineComponent<TabMenuProps, TabMenuSlots, TabMenuEmits>;
+
+declare module 'vue' {
+    export interface GlobalComponents {
+        TabMenu: GlobalComponentConstructor<TabMenuProps, TabMenuSlots, TabMenuEmits>;
+    }
+}
+
+export default TabMenu;