primevuelab 4.0.0-beta.4

package/tabmenu/tabmenu.mjs

@@ -0,0 +1,312 @@
+import { DomHandler } from '@primevuelab/core/utils';
+import Ripple from 'primevuelab/ripple';
+import { mergeProps, resolveDirective, openBlock, createElementBlock, createElementVNode, Fragment, renderList, withDirectives, createBlock, resolveDynamicComponent, normalizeClass, createCommentVNode, toDisplayString } from 'vue';
+import BaseComponent from '@primevuelab/core/basecomponent';
+import TabMenuStyle from 'primevuelab/tabmenu/style';
+
+var script$1 = {
+  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: function provide() {
+    return {
+      $pcTabMenu: this,
+      $parentInstance: this
+    };
+  }
+};
+
+var script = {
+  name: 'TabMenu',
+  "extends": script$1,
+  inheritAttrs: false,
+  emits: ['update:activeIndex', 'tab-change'],
+  data: function data() {
+    return {
+      d_activeIndex: this.activeIndex
+    };
+  },
+  watch: {
+    activeIndex: {
+      flush: 'post',
+      handler: function handler(newValue) {
+        this.d_activeIndex = newValue;
+        this.updateInkBar();
+      }
+    }
+  },
+  mounted: function mounted() {
+    var _this = this;
+    this.$nextTick(function () {
+      _this.updateInkBar();
+    });
+    var activeItem = this.findActiveItem();
+    activeItem && (activeItem.tabIndex = '0');
+  },
+  updated: function updated() {
+    this.updateInkBar();
+  },
+  methods: {
+    getPTOptions: function getPTOptions(key, item, index) {
+      return this.ptm(key, {
+        context: {
+          item: item,
+          index: index
+        }
+      });
+    },
+    onItemClick: function onItemClick(event, item, index) {
+      if (this.disabled(item)) {
+        event.preventDefault();
+        return;
+      }
+      if (item.command) {
+        item.command({
+          originalEvent: event,
+          item: item
+        });
+      }
+      if (index !== this.d_activeIndex) {
+        this.d_activeIndex = index;
+        this.$emit('update:activeIndex', this.d_activeIndex);
+      }
+      this.$emit('tab-change', {
+        originalEvent: event,
+        index: index
+      });
+    },
+    onKeydownItem: function onKeydownItem(event, item, index) {
+      switch (event.code) {
+        case 'ArrowRight':
+          {
+            this.navigateToNextItem(event.target);
+            event.preventDefault();
+            break;
+          }
+        case 'ArrowLeft':
+          {
+            this.navigateToPrevItem(event.target);
+            event.preventDefault();
+            break;
+          }
+        case 'Home':
+          {
+            this.navigateToFirstItem(event.target);
+            event.preventDefault();
+            break;
+          }
+        case 'End':
+          {
+            this.navigateToLastItem(event.target);
+            event.preventDefault();
+            break;
+          }
+        case 'Space':
+        case 'NumpadEnter':
+        case 'Enter':
+          {
+            this.onItemClick(event, item, index);
+            event.preventDefault();
+            break;
+          }
+        case 'Tab':
+          {
+            this.onTabKey();
+            break;
+          }
+      }
+    },
+    navigateToNextItem: function navigateToNextItem(target) {
+      var nextItem = this.findNextItem(target);
+      nextItem && this.setFocusToMenuitem(target, nextItem);
+    },
+    navigateToPrevItem: function navigateToPrevItem(target) {
+      var prevItem = this.findPrevItem(target);
+      prevItem && this.setFocusToMenuitem(target, prevItem);
+    },
+    navigateToFirstItem: function navigateToFirstItem(target) {
+      var firstItem = this.findFirstItem(target);
+      firstItem && this.setFocusToMenuitem(target, firstItem);
+    },
+    navigateToLastItem: function navigateToLastItem(target) {
+      var lastItem = this.findLastItem(target);
+      lastItem && this.setFocusToMenuitem(target, lastItem);
+    },
+    findNextItem: function findNextItem(item) {
+      var nextItem = item.parentElement.nextElementSibling;
+      return nextItem ? DomHandler.getAttribute(nextItem, 'data-p-disabled') === true ? this.findNextItem(nextItem.children[0]) : nextItem.children[0] : null;
+    },
+    findPrevItem: function findPrevItem(item) {
+      var prevItem = item.parentElement.previousElementSibling;
+      return prevItem ? DomHandler.getAttribute(prevItem, 'data-p-disabled') === true ? this.findPrevItem(prevItem.children[0]) : prevItem.children[0] : null;
+    },
+    findFirstItem: function findFirstItem() {
+      var firstSibling = DomHandler.findSingle(this.$refs.nav, '[data-pc-section="item"][data-p-disabled="false"]');
+      return firstSibling ? firstSibling.children[0] : null;
+    },
+    findLastItem: function findLastItem() {
+      var siblings = DomHandler.find(this.$refs.nav, '[data-pc-section="item"][data-p-disabled="false"]');
+      return siblings ? siblings[siblings.length - 1].children[0] : null;
+    },
+    findActiveItem: function findActiveItem() {
+      var activeItem = DomHandler.findSingle(this.$refs.nav, '[data-pc-section="item"][data-p-disabled="false"][data-p-active="true"]');
+      return activeItem ? activeItem.children[0] : null;
+    },
+    setFocusToMenuitem: function setFocusToMenuitem(target, focusableItem) {
+      target.tabIndex = '-1';
+      focusableItem.tabIndex = '0';
+      focusableItem.focus();
+    },
+    onTabKey: function onTabKey() {
+      var activeItem = DomHandler.findSingle(this.$refs.nav, '[data-pc-section="item"][data-p-disabled="false"][data-p-active="true"]');
+      var focusedItem = DomHandler.findSingle(this.$refs.nav, '[data-pc-section="itemlink"][tabindex="0"]');
+      if (focusedItem !== activeItem.children[0]) {
+        activeItem && (activeItem.children[0].tabIndex = '0');
+        focusedItem.tabIndex = '-1';
+      }
+    },
+    visible: function visible(item) {
+      return typeof item.visible === 'function' ? item.visible() : item.visible !== false;
+    },
+    disabled: function disabled(item) {
+      return typeof item.disabled === 'function' ? item.disabled() : item.disabled === true;
+    },
+    label: function label(item) {
+      return typeof item.label === 'function' ? item.label() : item.label;
+    },
+    updateInkBar: function updateInkBar() {
+      var tabs = this.$refs.nav.children;
+      var inkHighlighted = false;
+      for (var i = 0; i < tabs.length; i++) {
+        var tab = tabs[i];
+        if (DomHandler.getAttribute(tab, 'data-p-active')) {
+          this.$refs.inkbar.style.width = DomHandler.getWidth(tab) + 'px';
+          this.$refs.inkbar.style.left = DomHandler.getOffset(tab).left - DomHandler.getOffset(this.$refs.nav).left + 'px';
+          inkHighlighted = true;
+        }
+      }
+      if (!inkHighlighted) {
+        this.$refs.inkbar.style.width = '0px';
+        this.$refs.inkbar.style.left = '0px';
+      }
+    },
+    getMenuItemProps: function getMenuItemProps(item, index) {
+      var _this2 = this;
+      return {
+        action: mergeProps({
+          "class": this.cx('itemLink'),
+          tabindex: -1,
+          onClick: function onClick($event) {
+            return _this2.onItemClick($event, item, index);
+          },
+          onKeyDown: function onKeyDown($event) {
+            return _this2.onKeydownItem($event, item, index);
+          }
+        }, this.getPTOptions('itemLink', item, index)),
+        icon: mergeProps({
+          "class": [this.cx('itemIcon'), item.icon]
+        }, this.getPTOptions('itemIcon', item, index)),
+        label: mergeProps({
+          "class": this.cx('itemLabel')
+        }, this.getPTOptions('itemLabel', item, index))
+      };
+    }
+  },
+  directives: {
+    ripple: Ripple
+  }
+};
+
+var _hoisted_1 = ["aria-labelledby", "aria-label"];
+var _hoisted_2 = ["onClick", "onKeydown", "data-p-active", "data-p-disabled"];
+var _hoisted_3 = ["href", "target", "aria-label", "aria-disabled"];
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _directive_ripple = resolveDirective("ripple");
+  return openBlock(), createElementBlock("div", mergeProps({
+    "class": _ctx.cx('root')
+  }, _ctx.ptmi('root')), [createElementVNode("ul", mergeProps({
+    ref: "nav",
+    "class": _ctx.cx('tablist'),
+    role: "menubar",
+    "aria-labelledby": _ctx.ariaLabelledby,
+    "aria-label": _ctx.ariaLabel
+  }, _ctx.ptm('tablist')), [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.model, function (item, i) {
+    return openBlock(), createElementBlock(Fragment, {
+      key: $options.label(item) + '_' + i.toString()
+    }, [$options.visible(item) ? (openBlock(), createElementBlock("li", mergeProps({
+      key: 0,
+      ref_for: true,
+      ref: "tab",
+      "class": [_ctx.cx('item', {
+        item: item,
+        index: i
+      }), item["class"]],
+      role: "presentation",
+      onClick: function onClick($event) {
+        return $options.onItemClick($event, item, i);
+      },
+      onKeydown: function onKeydown($event) {
+        return $options.onKeydownItem($event, item, i);
+      }
+    }, $options.getPTOptions('item', item, i), {
+      "data-p-active": $data.d_activeIndex === i,
+      "data-p-disabled": $options.disabled(item)
+    }), [!_ctx.$slots.item ? withDirectives((openBlock(), createElementBlock("a", mergeProps({
+      key: 0,
+      ref_for: true,
+      ref: "tabLink",
+      role: "menuitem",
+      href: item.url,
+      "class": _ctx.cx('itemLink'),
+      target: item.target,
+      "aria-label": $options.label(item),
+      "aria-disabled": $options.disabled(item),
+      tabindex: -1
+    }, $options.getPTOptions('itemLink', item, i)), [_ctx.$slots.itemicon ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.$slots.itemicon), {
+      key: 0,
+      item: item,
+      "class": normalizeClass(_ctx.cx('itemIcon'))
+    }, null, 8, ["item", "class"])) : item.icon ? (openBlock(), createElementBlock("span", mergeProps({
+      key: 1,
+      "class": [_ctx.cx('itemIcon'), item.icon],
+      ref_for: true
+    }, $options.getPTOptions('itemIcon', item, i)), null, 16)) : createCommentVNode("", true), createElementVNode("span", mergeProps({
+      "class": _ctx.cx('itemLabel'),
+      ref_for: true
+    }, $options.getPTOptions('itemLabel', item, i)), toDisplayString($options.label(item)), 17)], 16, _hoisted_3)), [[_directive_ripple]]) : (openBlock(), createBlock(resolveDynamicComponent(_ctx.$slots.item), {
+      key: 1,
+      item: item,
+      index: i,
+      active: i === $data.d_activeIndex,
+      label: $options.label(item),
+      props: $options.getMenuItemProps(item, i)
+    }, null, 8, ["item", "index", "active", "label", "props"]))], 16, _hoisted_2)) : createCommentVNode("", true)], 64);
+  }), 128)), createElementVNode("li", mergeProps({
+    ref: "inkbar",
+    role: "none",
+    "class": _ctx.cx('activeBar')
+  }, _ctx.ptm('activeBar')), null, 16)], 16, _hoisted_1)], 16);
+}
+
+script.render = render;
+
+export { script as default };
+//# sourceMappingURL=tabmenu.mjs.map

package/tabmenu/tabmenu.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabmenu.mjs","sources":["../../src/tabmenu/BaseTabMenu.vue","../../src/tabmenu/TabMenu.vue","../../src/tabmenu/TabMenu.vue?vue&type=template&id=102e9a8a&lang.js"],"sourcesContent":["<script>\nimport BaseComponent from '@primevuelab/core/basecomponent';\nimport TabMenuStyle from 'primevuelab/tabmenu/style';\n\nexport default {\n    name: 'BaseTabMenu',\n    extends: BaseComponent,\n    props: {\n        model: {\n            type: Array,\n            default: null\n        },\n        activeIndex: {\n            type: Number,\n            default: 0\n        },\n        ariaLabelledby: {\n            type: String,\n            default: null\n        },\n        ariaLabel: {\n            type: String,\n            default: null\n        }\n    },\n    style: TabMenuStyle,\n    provide() {\n        return {\n            $pcTabMenu: this,\n            $parentInstance: this\n        };\n    }\n};\n</script>\n","<template>\n    <div :class=\"cx('root')\" v-bind=\"ptmi('root')\">\n        <ul ref=\"nav\" :class=\"cx('tablist')\" role=\"menubar\" :aria-labelledby=\"ariaLabelledby\" :aria-label=\"ariaLabel\" v-bind=\"ptm('tablist')\">\n            <template v-for=\"(item, i) of model\" :key=\"label(item) + '_' + i.toString()\">\n                <li\n                    v-if=\"visible(item)\"\n                    ref=\"tab\"\n                    :class=\"[cx('item', { item, index: i }), item.class]\"\n                    role=\"presentation\"\n                    @click=\"onItemClick($event, item, i)\"\n                    @keydown=\"onKeydownItem($event, item, i)\"\n                    v-bind=\"getPTOptions('item', item, i)\"\n                    :data-p-active=\"d_activeIndex === i\"\n                    :data-p-disabled=\"disabled(item)\"\n                >\n                    <template v-if=\"!$slots.item\">\n                        <a ref=\"tabLink\" v-ripple role=\"menuitem\" :href=\"item.url\" :class=\"cx('itemLink')\" :target=\"item.target\" :aria-label=\"label(item)\" :aria-disabled=\"disabled(item)\" :tabindex=\"-1\" v-bind=\"getPTOptions('itemLink', item, i)\">\n                            <component v-if=\"$slots.itemicon\" :is=\"$slots.itemicon\" :item=\"item\" :class=\"cx('itemIcon')\" />\n                            <span v-else-if=\"item.icon\" :class=\"[cx('itemIcon'), item.icon]\" v-bind=\"getPTOptions('itemIcon', item, i)\" />\n                            <span :class=\"cx('itemLabel')\" v-bind=\"getPTOptions('itemLabel', item, i)\">{{ label(item) }}</span>\n                        </a>\n                    </template>\n                    <component v-else :is=\"$slots.item\" :item=\"item\" :index=\"i\" :active=\"i === d_activeIndex\" :label=\"label(item)\" :props=\"getMenuItemProps(item, i)\"></component>\n                </li>\n            </template>\n            <li ref=\"inkbar\" role=\"none\" :class=\"cx('activeBar')\" v-bind=\"ptm('activeBar')\"></li>\n        </ul>\n    </div>\n</template>\n\n<script>\nimport { DomHandler } from '@primevuelab/core/utils';\nimport Ripple from 'primevuelab/ripple';\nimport { mergeProps } from 'vue';\nimport BaseTabMenu from './BaseTabMenu.vue';\n\nexport default {\n    name: 'TabMenu',\n    extends: BaseTabMenu,\n    inheritAttrs: false,\n    emits: ['update:activeIndex', 'tab-change'],\n    data() {\n        return {\n            d_activeIndex: this.activeIndex\n        };\n    },\n    watch: {\n        activeIndex: {\n            flush: 'post',\n            handler(newValue) {\n                this.d_activeIndex = newValue;\n                this.updateInkBar();\n            }\n        }\n    },\n    mounted() {\n        this.$nextTick(() => {\n            this.updateInkBar();\n        });\n\n        const activeItem = this.findActiveItem();\n\n        activeItem && (activeItem.tabIndex = '0');\n    },\n    updated() {\n        this.updateInkBar();\n    },\n    methods: {\n        getPTOptions(key, item, index) {\n            return this.ptm(key, {\n                context: {\n                    item,\n                    index\n                }\n            });\n        },\n        onItemClick(event, item, index) {\n            if (this.disabled(item)) {\n                event.preventDefault();\n\n                return;\n            }\n\n            if (item.command) {\n                item.command({\n                    originalEvent: event,\n                    item: item\n                });\n            }\n\n            if (index !== this.d_activeIndex) {\n                this.d_activeIndex = index;\n                this.$emit('update:activeIndex', this.d_activeIndex);\n            }\n\n            this.$emit('tab-change', {\n                originalEvent: event,\n                index: index\n            });\n        },\n        onKeydownItem(event, item, index) {\n            switch (event.code) {\n                case 'ArrowRight': {\n                    this.navigateToNextItem(event.target);\n                    event.preventDefault();\n                    break;\n                }\n\n                case 'ArrowLeft': {\n                    this.navigateToPrevItem(event.target);\n                    event.preventDefault();\n                    break;\n                }\n\n                case 'Home': {\n                    this.navigateToFirstItem(event.target);\n                    event.preventDefault();\n                    break;\n                }\n\n                case 'End': {\n                    this.navigateToLastItem(event.target);\n                    event.preventDefault();\n                    break;\n                }\n\n                case 'Space':\n                case 'NumpadEnter':\n\n                case 'Enter': {\n                    this.onItemClick(event, item, index);\n                    event.preventDefault();\n                    break;\n                }\n\n                case 'Tab': {\n                    this.onTabKey();\n                    break;\n                }\n\n                default:\n                    break;\n            }\n        },\n        navigateToNextItem(target) {\n            const nextItem = this.findNextItem(target);\n\n            nextItem && this.setFocusToMenuitem(target, nextItem);\n        },\n        navigateToPrevItem(target) {\n            const prevItem = this.findPrevItem(target);\n\n            prevItem && this.setFocusToMenuitem(target, prevItem);\n        },\n        navigateToFirstItem(target) {\n            const firstItem = this.findFirstItem(target);\n\n            firstItem && this.setFocusToMenuitem(target, firstItem);\n        },\n        navigateToLastItem(target) {\n            const lastItem = this.findLastItem(target);\n\n            lastItem && this.setFocusToMenuitem(target, lastItem);\n        },\n        findNextItem(item) {\n            const nextItem = item.parentElement.nextElementSibling;\n\n            return nextItem ? (DomHandler.getAttribute(nextItem, 'data-p-disabled') === true ? this.findNextItem(nextItem.children[0]) : nextItem.children[0]) : null;\n        },\n        findPrevItem(item) {\n            const prevItem = item.parentElement.previousElementSibling;\n\n            return prevItem ? (DomHandler.getAttribute(prevItem, 'data-p-disabled') === true ? this.findPrevItem(prevItem.children[0]) : prevItem.children[0]) : null;\n        },\n        findFirstItem() {\n            const firstSibling = DomHandler.findSingle(this.$refs.nav, '[data-pc-section=\"item\"][data-p-disabled=\"false\"]');\n\n            return firstSibling ? firstSibling.children[0] : null;\n        },\n        findLastItem() {\n            const siblings = DomHandler.find(this.$refs.nav, '[data-pc-section=\"item\"][data-p-disabled=\"false\"]');\n\n            return siblings ? siblings[siblings.length - 1].children[0] : null;\n        },\n        findActiveItem() {\n            const activeItem = DomHandler.findSingle(this.$refs.nav, '[data-pc-section=\"item\"][data-p-disabled=\"false\"][data-p-active=\"true\"]');\n\n            return activeItem ? activeItem.children[0] : null;\n        },\n        setFocusToMenuitem(target, focusableItem) {\n            target.tabIndex = '-1';\n            focusableItem.tabIndex = '0';\n            focusableItem.focus();\n        },\n        onTabKey() {\n            const activeItem = DomHandler.findSingle(this.$refs.nav, '[data-pc-section=\"item\"][data-p-disabled=\"false\"][data-p-active=\"true\"]');\n            const focusedItem = DomHandler.findSingle(this.$refs.nav, '[data-pc-section=\"itemlink\"][tabindex=\"0\"]');\n\n            if (focusedItem !== activeItem.children[0]) {\n                activeItem && (activeItem.children[0].tabIndex = '0');\n                focusedItem.tabIndex = '-1';\n            }\n        },\n        visible(item) {\n            return typeof item.visible === 'function' ? item.visible() : item.visible !== false;\n        },\n        disabled(item) {\n            return typeof item.disabled === 'function' ? item.disabled() : item.disabled === true;\n        },\n        label(item) {\n            return typeof item.label === 'function' ? item.label() : item.label;\n        },\n        updateInkBar() {\n            let tabs = this.$refs.nav.children;\n            let inkHighlighted = false;\n\n            for (let i = 0; i < tabs.length; i++) {\n                let tab = tabs[i];\n\n                if (DomHandler.getAttribute(tab, 'data-p-active')) {\n                    this.$refs.inkbar.style.width = DomHandler.getWidth(tab) + 'px';\n                    this.$refs.inkbar.style.left = DomHandler.getOffset(tab).left - DomHandler.getOffset(this.$refs.nav).left + 'px';\n                    inkHighlighted = true;\n                }\n            }\n\n            if (!inkHighlighted) {\n                this.$refs.inkbar.style.width = '0px';\n                this.$refs.inkbar.style.left = '0px';\n            }\n        },\n        getMenuItemProps(item, index) {\n            return {\n                action: mergeProps(\n                    {\n                        class: this.cx('itemLink'),\n                        tabindex: -1,\n                        onClick: ($event) => this.onItemClick($event, item, index),\n                        onKeyDown: ($event) => this.onKeydownItem($event, item, index)\n                    },\n                    this.getPTOptions('itemLink', item, index)\n                ),\n                icon: mergeProps(\n                    {\n                        class: [this.cx('itemIcon'), item.icon]\n                    },\n                    this.getPTOptions('itemIcon', item, index)\n                ),\n                label: mergeProps(\n                    {\n                        class: this.cx('itemLabel')\n                    },\n                    this.getPTOptions('itemLabel', item, index)\n                )\n            };\n        }\n    },\n    directives: {\n        ripple: Ripple\n    }\n};\n</script>\n","<template>\n    <div :class=\"cx('root')\" v-bind=\"ptmi('root')\">\n        <ul ref=\"nav\" :class=\"cx('tablist')\" role=\"menubar\" :aria-labelledby=\"ariaLabelledby\" :aria-label=\"ariaLabel\" v-bind=\"ptm('tablist')\">\n            <template v-for=\"(item, i) of model\" :key=\"label(item) + '_' + i.toString()\">\n                <li\n                    v-if=\"visible(item)\"\n                    ref=\"tab\"\n                    :class=\"[cx('item', { item, index: i }), item.class]\"\n                    role=\"presentation\"\n                    @click=\"onItemClick($event, item, i)\"\n                    @keydown=\"onKeydownItem($event, item, i)\"\n                    v-bind=\"getPTOptions('item', item, i)\"\n                    :data-p-active=\"d_activeIndex === i\"\n                    :data-p-disabled=\"disabled(item)\"\n                >\n                    <template v-if=\"!$slots.item\">\n                        <a ref=\"tabLink\" v-ripple role=\"menuitem\" :href=\"item.url\" :class=\"cx('itemLink')\" :target=\"item.target\" :aria-label=\"label(item)\" :aria-disabled=\"disabled(item)\" :tabindex=\"-1\" v-bind=\"getPTOptions('itemLink', item, i)\">\n                            <component v-if=\"$slots.itemicon\" :is=\"$slots.itemicon\" :item=\"item\" :class=\"cx('itemIcon')\" />\n                            <span v-else-if=\"item.icon\" :class=\"[cx('itemIcon'), item.icon]\" v-bind=\"getPTOptions('itemIcon', item, i)\" />\n                            <span :class=\"cx('itemLabel')\" v-bind=\"getPTOptions('itemLabel', item, i)\">{{ label(item) }}</span>\n                        </a>\n                    </template>\n                    <component v-else :is=\"$slots.item\" :item=\"item\" :index=\"i\" :active=\"i === d_activeIndex\" :label=\"label(item)\" :props=\"getMenuItemProps(item, i)\"></component>\n                </li>\n            </template>\n            <li ref=\"inkbar\" role=\"none\" :class=\"cx('activeBar')\" v-bind=\"ptm('activeBar')\"></li>\n        </ul>\n    </div>\n</template>\n\n<script>\nimport { DomHandler } from '@primevuelab/core/utils';\nimport Ripple from 'primevuelab/ripple';\nimport { mergeProps } from 'vue';\nimport BaseTabMenu from './BaseTabMenu.vue';\n\nexport default {\n    name: 'TabMenu',\n    extends: BaseTabMenu,\n    inheritAttrs: false,\n    emits: ['update:activeIndex', 'tab-change'],\n    data() {\n        return {\n            d_activeIndex: this.activeIndex\n        };\n    },\n    watch: {\n        activeIndex: {\n            flush: 'post',\n            handler(newValue) {\n                this.d_activeIndex = newValue;\n                this.updateInkBar();\n            }\n        }\n    },\n    mounted() {\n        this.$nextTick(() => {\n            this.updateInkBar();\n        });\n\n        const activeItem = this.findActiveItem();\n\n        activeItem && (activeItem.tabIndex = '0');\n    },\n    updated() {\n        this.updateInkBar();\n    },\n    methods: {\n        getPTOptions(key, item, index) {\n            return this.ptm(key, {\n                context: {\n                    item,\n                    index\n                }\n            });\n        },\n        onItemClick(event, item, index) {\n            if (this.disabled(item)) {\n                event.preventDefault();\n\n                return;\n            }\n\n            if (item.command) {\n                item.command({\n                    originalEvent: event,\n                    item: item\n                });\n            }\n\n            if (index !== this.d_activeIndex) {\n                this.d_activeIndex = index;\n                this.$emit('update:activeIndex', this.d_activeIndex);\n            }\n\n            this.$emit('tab-change', {\n                originalEvent: event,\n                index: index\n            });\n        },\n        onKeydownItem(event, item, index) {\n            switch (event.code) {\n                case 'ArrowRight': {\n                    this.navigateToNextItem(event.target);\n                    event.preventDefault();\n                    break;\n                }\n\n                case 'ArrowLeft': {\n                    this.navigateToPrevItem(event.target);\n                    event.preventDefault();\n                    break;\n                }\n\n                case 'Home': {\n                    this.navigateToFirstItem(event.target);\n                    event.preventDefault();\n                    break;\n                }\n\n                case 'End': {\n                    this.navigateToLastItem(event.target);\n                    event.preventDefault();\n                    break;\n                }\n\n                case 'Space':\n                case 'NumpadEnter':\n\n                case 'Enter': {\n                    this.onItemClick(event, item, index);\n                    event.preventDefault();\n                    break;\n                }\n\n                case 'Tab': {\n                    this.onTabKey();\n                    break;\n                }\n\n                default:\n                    break;\n            }\n        },\n        navigateToNextItem(target) {\n            const nextItem = this.findNextItem(target);\n\n            nextItem && this.setFocusToMenuitem(target, nextItem);\n        },\n        navigateToPrevItem(target) {\n            const prevItem = this.findPrevItem(target);\n\n            prevItem && this.setFocusToMenuitem(target, prevItem);\n        },\n        navigateToFirstItem(target) {\n            const firstItem = this.findFirstItem(target);\n\n            firstItem && this.setFocusToMenuitem(target, firstItem);\n        },\n        navigateToLastItem(target) {\n            const lastItem = this.findLastItem(target);\n\n            lastItem && this.setFocusToMenuitem(target, lastItem);\n        },\n        findNextItem(item) {\n            const nextItem = item.parentElement.nextElementSibling;\n\n            return nextItem ? (DomHandler.getAttribute(nextItem, 'data-p-disabled') === true ? this.findNextItem(nextItem.children[0]) : nextItem.children[0]) : null;\n        },\n        findPrevItem(item) {\n            const prevItem = item.parentElement.previousElementSibling;\n\n            return prevItem ? (DomHandler.getAttribute(prevItem, 'data-p-disabled') === true ? this.findPrevItem(prevItem.children[0]) : prevItem.children[0]) : null;\n        },\n        findFirstItem() {\n            const firstSibling = DomHandler.findSingle(this.$refs.nav, '[data-pc-section=\"item\"][data-p-disabled=\"false\"]');\n\n            return firstSibling ? firstSibling.children[0] : null;\n        },\n        findLastItem() {\n            const siblings = DomHandler.find(this.$refs.nav, '[data-pc-section=\"item\"][data-p-disabled=\"false\"]');\n\n            return siblings ? siblings[siblings.length - 1].children[0] : null;\n        },\n        findActiveItem() {\n            const activeItem = DomHandler.findSingle(this.$refs.nav, '[data-pc-section=\"item\"][data-p-disabled=\"false\"][data-p-active=\"true\"]');\n\n            return activeItem ? activeItem.children[0] : null;\n        },\n        setFocusToMenuitem(target, focusableItem) {\n            target.tabIndex = '-1';\n            focusableItem.tabIndex = '0';\n            focusableItem.focus();\n        },\n        onTabKey() {\n            const activeItem = DomHandler.findSingle(this.$refs.nav, '[data-pc-section=\"item\"][data-p-disabled=\"false\"][data-p-active=\"true\"]');\n            const focusedItem = DomHandler.findSingle(this.$refs.nav, '[data-pc-section=\"itemlink\"][tabindex=\"0\"]');\n\n            if (focusedItem !== activeItem.children[0]) {\n                activeItem && (activeItem.children[0].tabIndex = '0');\n                focusedItem.tabIndex = '-1';\n            }\n        },\n        visible(item) {\n            return typeof item.visible === 'function' ? item.visible() : item.visible !== false;\n        },\n        disabled(item) {\n            return typeof item.disabled === 'function' ? item.disabled() : item.disabled === true;\n        },\n        label(item) {\n            return typeof item.label === 'function' ? item.label() : item.label;\n        },\n        updateInkBar() {\n            let tabs = this.$refs.nav.children;\n            let inkHighlighted = false;\n\n            for (let i = 0; i < tabs.length; i++) {\n                let tab = tabs[i];\n\n                if (DomHandler.getAttribute(tab, 'data-p-active')) {\n                    this.$refs.inkbar.style.width = DomHandler.getWidth(tab) + 'px';\n                    this.$refs.inkbar.style.left = DomHandler.getOffset(tab).left - DomHandler.getOffset(this.$refs.nav).left + 'px';\n                    inkHighlighted = true;\n                }\n            }\n\n            if (!inkHighlighted) {\n                this.$refs.inkbar.style.width = '0px';\n                this.$refs.inkbar.style.left = '0px';\n            }\n        },\n        getMenuItemProps(item, index) {\n            return {\n                action: mergeProps(\n                    {\n                        class: this.cx('itemLink'),\n                        tabindex: -1,\n                        onClick: ($event) => this.onItemClick($event, item, index),\n                        onKeyDown: ($event) => this.onKeydownItem($event, item, index)\n                    },\n                    this.getPTOptions('itemLink', item, index)\n                ),\n                icon: mergeProps(\n                    {\n                        class: [this.cx('itemIcon'), item.icon]\n                    },\n                    this.getPTOptions('itemIcon', item, index)\n                ),\n                label: mergeProps(\n                    {\n                        class: this.cx('itemLabel')\n                    },\n                    this.getPTOptions('itemLabel', item, index)\n                )\n            };\n        }\n    },\n    directives: {\n        ripple: Ripple\n    }\n};\n</script>\n"],"names":["name","BaseComponent","props","model","type","Array","activeIndex","Number","ariaLabelledby","String","ariaLabel","style","TabMenuStyle","provide","$pcTabMenu","$parentInstance","BaseTabMenu","inheritAttrs","emits","data","d_activeIndex","watch","flush","handler","newValue","updateInkBar","mounted","_this","$nextTick","activeItem","findActiveItem","tabIndex","updated","methods","getPTOptions","key","item","index","ptm","context","onItemClick","event","disabled","preventDefault","command","originalEvent","$emit","onKeydownItem","code","navigateToNextItem","target","navigateToPrevItem","navigateToFirstItem","navigateToLastItem","onTabKey","nextItem","findNextItem","setFocusToMenuitem","prevItem","findPrevItem","firstItem","findFirstItem","lastItem","findLastItem","parentElement","nextElementSibling","DomHandler","getAttribute","children","previousElementSibling","firstSibling","findSingle","$refs","nav","siblings","find","length","focusableItem","focus","focusedItem","visible","label","tabs","inkHighlighted","i","tab","inkbar","width","getWidth","left","getOffset","getMenuItemProps","_this2","action","mergeProps","cx","tabindex","onClick","$event","onKeyDown","icon","directives","ripple","Ripple","_openBlock","_createElementBlock","_mergeProps","_ctx","ptmi","_createElementVNode","ref","role","_Fragment","_renderList","$options","toString","onKeydown","$data","$slots","_withDirectives","href","url","itemicon","_createBlock","_resolveDynamicComponent","_toDisplayString","active"],"mappings":"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"}

package/tabpanel/BaseTabPanel.vue

@@ -0,0 +1,41 @@
+<script>
+import BaseComponent from '@primevuelab/core/basecomponent';
+import TabPanelStyle from 'primevuelab/tabpanel/style';
+
+export default {
+    name: 'BaseTabPanel',
+    extends: BaseComponent,
+    props: {
+        // in Tabs
+        value: {
+            type: String,
+            default: undefined
+        },
+        as: {
+            type: String,
+            default: 'DIV'
+        },
+        asChild: {
+            type: Boolean,
+            default: false
+        },
+        // in TabView
+        header: null,
+        headerStyle: null,
+        headerClass: null,
+        headerProps: null,
+        headerActionProps: null,
+        contentStyle: null,
+        contentClass: null,
+        contentProps: null,
+        disabled: Boolean
+    },
+    style: TabPanelStyle,
+    provide() {
+        return {
+            $pcTabPanel: this,
+            $parentInstance: this
+        };
+    }
+};
+</script>

package/tabpanel/TabPanel.d.ts

@@ -0,0 +1,236 @@
+/**
+ *
+ * TabPanel is a helper component for Tabs component.
+ *
+ * [Live Demo](https://www.primevuelab.org/tabs/)
+ *
+ * @module tabpanel
+ *
+ */
+import { AnchorHTMLAttributes, HTMLAttributes, LiHTMLAttributes, 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 TabPanelPassThroughOptionType = TabPanelPassThroughAttributes | ((options: TabPanelPassThroughMethodOptions) => TabPanelPassThroughAttributes | string) | string | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface TabPanelPassThroughMethodOptions {
+    /**
+     * Defines instance.
+     */
+    instance: any;
+    /**
+     * Defines valid properties.
+     */
+    props: TabPanelProps;
+    /**
+     * Defines current options.
+     */
+    context: TabPanelContext;
+    /**
+     * 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 TabPanelProps.pt}
+ */
+export interface TabPanelPassThroughOptions {
+    /**
+     * Used to pass attributes to the root's DOM element.
+     */
+    root?: TabPanelPassThroughOptionType;
+    /**
+     * Used to pass attributes to the header's DOM element.
+     * @deprecated since v4. Only supported by TabView.
+     */
+    header?: TabPanelPassThroughOptionType;
+    /**
+     * Used to pass attributes to the header action's DOM element.
+     * @deprecated since v4. Only supported by TabView.
+     */
+    headerAction?: TabPanelPassThroughOptionType;
+    /**
+     * Used to pass attributes to the title's DOM element.
+     * @deprecated since v4. Only supported by TabView.
+     */
+    headerTitle?: TabPanelPassThroughOptionType;
+    /**
+     * Used to pass attributes to the list's DOM element.
+     * @deprecated since v4. Only supported by TabView.
+     */
+    content?: TabPanelPassThroughOptionType;
+    /**
+     * Used to manage all lifecycle hooks.
+     * @see {@link BaseComponent.ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+export interface TabPanelPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines valid properties in TabPanel component.
+ */
+export interface TabPanelProps {
+    /**
+     * Value of tabpanel.
+     */
+    value: string;
+    /**
+     * Use to change the HTML tag of root element.
+     * @defaultValue DIV
+     */
+    as?: string | undefined;
+    /**
+     * When enabled, it changes the default rendered element for the one passed as a child element.
+     * @defaultValue false
+     */
+    asChild?: boolean | undefined;
+    /**
+     * Orientation of tab headers.
+     * @deprecated since v4. Only supported by TabView.
+     */
+    header?: string | undefined;
+    /**
+     * Inline style of the tab header.
+     * @deprecated since v4. Only supported by TabView.
+     */
+    headerStyle?: any;
+    /**
+     * Style class of the tab header.
+     * @deprecated since v4. Only supported by TabView.
+     */
+    headerClass?: any;
+    /**
+     * Used to pass all properties of the HTMLLiElement to the tab header.
+     * @deprecated since v4. Only supported by TabView.
+     */
+    headerProps?: LiHTMLAttributes | undefined;
+    /**
+     * Used to pass all properties of the HTMLAnchorElement to the focusable anchor element inside the tab header.
+     * @deprecated since v4. Only supported by TabView.
+     */
+    headerActionProps?: AnchorHTMLAttributes | undefined;
+    /**
+     * Inline style of the tab content.
+     * @deprecated since v4. Only supported by TabView.
+     */
+    contentStyle?: any;
+    /**
+     * Style class of the tab content.
+     * @deprecated since v4. Only supported by TabView.
+     */
+    contentClass?: any;
+    /**
+     * Used to pass all properties of the HTMLDivElement to the tab content.
+     * @deprecated since v4. Only supported by TabView.
+     */
+    contentProps?: HTMLAttributes | undefined;
+    /**
+     * Whether the tab is disabled.
+     * @defaultValue false
+     * @deprecated since v4. Only supported by TabView.
+     */
+    disabled?: 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 {TabPanelPassThroughOptions}
+     */
+    pt?: PassThrough<TabPanelPassThroughOptions>;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+}
+
+/**
+ * Defines current options in TabPanel component.
+ */
+export interface TabPanelContext {
+    /**
+     * Current index of the tab.
+     * @deprecated since v4. Only supported by TabView.
+     */
+    index: number;
+    /**
+     * Count of tabs
+     * @deprecated since v4. Only supported by TabView.
+     */
+    count: number;
+    /**
+     * Whether the tab is first.
+     * @deprecated since v4. Only supported by TabView.
+     */
+    first: boolean;
+    /**
+     * Whether the tab is last.
+     * @deprecated since v4. Only supported by TabView.
+     */
+    last: boolean;
+    /**
+     * Whether the tab is active.
+     */
+    active: boolean;
+}
+
+/**
+ * Defines valid slots in TabPanel slots.
+ */
+export interface TabPanelSlots {
+    /**
+     * Custom content template.
+     */
+    default(): VNode[];
+    /**
+     * Custom header template.
+     * @deprecated since v4. Only supported by TabView.
+     */
+    header(): VNode[];
+}
+
+export interface TabPanelEmitsOptions {}
+
+export declare type TabPanelEmits = EmitFn<TabPanelEmitsOptions>;
+
+/**
+ * **primevuelab - TabPanel**
+ *
+ * _TabPanel 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 TabPanel: DefineComponent<TabPanelProps, TabPanelSlots, TabPanelEmits>;
+
+declare module 'vue' {
+    export interface GlobalComponents {
+        TabPanel: GlobalComponentConstructor<TabPanelProps, TabPanelSlots, TabPanelEmits>;
+    }
+}
+
+export default TabPanel;