From 9d63038e294cafba69bb0d8e5859fe7848cdc4bd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Tue, 30 May 2023 14:43:52 +0300
Subject: [PATCH] Update #3965 - For TabMenu

---
 components/lib/tabmenu/BaseTabMenu.vue | 100 +++++++++++++++++
 components/lib/tabmenu/TabMenu.d.ts    |   5 +
 components/lib/tabmenu/TabMenu.vue     | 146 +++++++------------------
 3 files changed, 144 insertions(+), 107 deletions(-)
 create mode 100644 components/lib/tabmenu/BaseTabMenu.vue

diff --git a/components/lib/tabmenu/BaseTabMenu.vue b/components/lib/tabmenu/BaseTabMenu.vue
new file mode 100644
index 000000000..ec8db4861
--- /dev/null
+++ b/components/lib/tabmenu/BaseTabMenu.vue
@@ -0,0 +1,100 @@
+<script>
+import BaseComponent from 'primevue/basecomponent';
+import { useStyle } from 'primevue/usestyle';
+
+const styles = `
+.p-tabmenu {
+    overflow-x: auto;
+}
+
+.p-tabmenu-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex-wrap: nowrap;
+}
+
+.p-tabmenu-nav a {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    text-decoration: none;
+    overflow: hidden;
+}
+
+.p-tabmenu-nav a:focus {
+    z-index: 1;
+}
+
+.p-tabmenu-nav .p-menuitem-text {
+    line-height: 1;
+}
+
+.p-tabmenu-ink-bar {
+    display: none;
+    z-index: 1;
+}
+
+.p-tabmenu::-webkit-scrollbar {
+    display: none;
+}
+`;
+
+const classes = {
+    root: 'p-tabmenu p-component',
+    menu: 'p-tabmenu-nav p-reset',
+    menuitem: ({ instance, index, item, isActive, isExactActive }) => [
+        'p-tabmenuitem',
+        {
+            'p-highlight': (instance.exact ? isExactActive : isActive) || instance.d_activeIndex === index,
+            'p-disabled': instance.disabled(item)
+        }
+    ],
+    action: 'p-menuitem-link',
+    icon: 'p-menuitem-icon',
+    label: 'p-menuitem-text',
+    inkbar: 'p-tabmenu-ink-bar'
+};
+
+const { load: loadStyle } = useStyle(styles, { id: 'primevue_tabmenu_style', manual: true });
+
+export default {
+    name: 'BaseTabMenu',
+    extends: BaseComponent,
+    props: {
+        model: {
+            type: Array,
+            default: null
+        },
+        exact: {
+            type: Boolean,
+            default: true
+        },
+        activeIndex: {
+            type: Number,
+            default: 0
+        },
+        'aria-labelledby': {
+            type: String,
+            default: null
+        },
+        'aria-label': {
+            type: String,
+            default: null
+        }
+    },
+    css: {
+        classes,
+        loadStyle
+    },
+    provide() {
+        return {
+            $parentInstance: this
+        };
+    }
+};
+</script>
diff --git a/components/lib/tabmenu/TabMenu.d.ts b/components/lib/tabmenu/TabMenu.d.ts
index fe5991fae..8cb760cb0 100755
--- a/components/lib/tabmenu/TabMenu.d.ts
+++ b/components/lib/tabmenu/TabMenu.d.ts
@@ -131,6 +131,11 @@ export interface TabMenuProps {
      * @type {TabMenuPassThroughOptions}
      */
     pt?: TabMenuPassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
 }
 
 /**
diff --git a/components/lib/tabmenu/TabMenu.vue b/components/lib/tabmenu/TabMenu.vue
index f3413bb75..5e63c4cbc 100755
--- a/components/lib/tabmenu/TabMenu.vue
+++ b/components/lib/tabmenu/TabMenu.vue
@@ -1,16 +1,25 @@
 <template>
-    <div class="p-tabmenu p-component" v-bind="ptm('root')">
-        <ul ref="nav" class="p-tabmenu-nav p-reset" role="menubar" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" v-bind="ptm('menu')">
+    <div :class="cx('root')" v-bind="ptm('root')">
+        <ul ref="nav" :class="cx('menu')" role="menubar" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" v-bind="ptm('menu')">
             <template v-for="(item, i) of focusableItems" :key="label(item) + '_' + i.toString()">
                 <router-link v-if="item.to && !disabled(item)" v-slot="{ navigate, href, isActive, isExactActive }" :to="item.to" custom>
-                    <li v-if="visible(item)" ref="tab" :class="getRouteItemClass(item, isActive, isExactActive)" :style="item.style" role="presentation" v-bind="getPTOptions('menuitem', i)">
+                    <li
+                        v-if="visible(item)"
+                        ref="tab"
+                        :class="[cx('menuitem', { item, isActive, isExactActive }), item.class]"
+                        :style="item.style"
+                        role="presentation"
+                        v-bind="getPTOptions('menuitem', i)"
+                        :data-p-highlight="exact ? isExactActive : isActive"
+                        :data-p-disabled="disabled(item)"
+                    >
                         <template v-if="!$slots.item">
                             <a
                                 ref="tabLink"
                                 v-ripple
                                 role="menuitem"
                                 :href="href"
-                                class="p-menuitem-link"
+                                :class="cx('action')"
                                 :aria-label="label(item)"
                                 :aria-disabled="disabled(item)"
                                 :tabindex="isExactActive ? '0' : '-1'"
@@ -18,61 +27,49 @@
                                 @keydown="onKeydownItem($event, i, navigate)"
                                 v-bind="getPTOptions('action', i)"
                             >
-                                <component v-if="$slots.itemicon" :is="$slots.itemicon" :item="item" :class="getItemIcon(item)" />
-                                <span v-else-if="item.icon" :class="getItemIcon(item)" v-bind="getPTOptions('icon', i)" />
-                                <span class="p-menuitem-text" v-bind="getPTOptions('label', i)">{{ label(item) }}</span>
+                                <component v-if="$slots.itemicon" :is="$slots.itemicon" :item="item" :class="[cx('icon'), item.icon]" />
+                                <span v-else-if="item.icon" :class="[cx('icon'), item.icon]" v-bind="getPTOptions('icon', i)" />
+                                <span :class="cx('label')" v-bind="getPTOptions('label', i)">{{ label(item) }}</span>
                             </a>
                         </template>
                         <component v-else :is="$slots.item" :item="item" :index="i"></component>
                     </li>
                 </router-link>
-                <li v-else-if="visible(item)" ref="tab" :class="getItemClass(item, i)" role="presentation" @click="onItemClick($event, item, i)" @keydown="onKeydownItem($event, i)" v-bind="getPTOptions('menuitem', i)">
+                <li
+                    v-else-if="visible(item)"
+                    ref="tab"
+                    :class="[cx('menuitem', { item, index: i }), item.class]"
+                    role="presentation"
+                    @click="onItemClick($event, item, i)"
+                    @keydown="onKeydownItem($event, i)"
+                    v-bind="getPTOptions('menuitem', i)"
+                    :data-p-highlight="d_activeIndex === i"
+                    :data-p-disabled="disabled(item)"
+                >
                     <template v-if="!$slots.item">
-                        <a ref="tabLink" v-ripple role="menuitem" :href="item.url" class="p-menuitem-link" :target="item.target" :aria-label="label(item)" :aria-disabled="disabled(item)" :tabindex="setTabIndex(i)" v-bind="getPTOptions('action', i)">
-                            <component v-if="$slots.itemicon" :is="$slots.itemicon" :item="item" :class="getItemIcon(item)" />
-                            <span v-else-if="item.icon" :class="getItemIcon(item)" v-bind="getPTOptions('icon', i)" />
-                            <span class="p-menuitem-text" v-bind="getPTOptions('label', i)">{{ label(item) }}</span>
+                        <a ref="tabLink" v-ripple role="menuitem" :href="item.url" :class="cx('action')" :target="item.target" :aria-label="label(item)" :aria-disabled="disabled(item)" :tabindex="setTabIndex(i)" v-bind="getPTOptions('action', i)">
+                            <component v-if="$slots.itemicon" :is="$slots.itemicon" :item="item" :class="[cx('icon'), item.icon]" />
+                            <span v-else-if="item.icon" :class="[cx('icon'), item.icon]" v-bind="getPTOptions('icon', i)" />
+                            <span :class="cx('label')" v-bind="getPTOptions('label', i)">{{ label(item) }}</span>
                         </a>
                     </template>
                     <component v-else :is="$slots.item" :item="item" :index="i"></component>
                 </li>
             </template>
-            <li ref="inkbar" role="none" class="p-tabmenu-ink-bar" v-bind="ptm('inkbar')"></li>
+            <li ref="inkbar" role="none" :class="cx('inkbar')" v-bind="ptm('inkbar')"></li>
         </ul>
     </div>
 </template>
 
 <script>
-import BaseComponent from 'primevue/basecomponent';
 import Ripple from 'primevue/ripple';
 import { DomHandler } from 'primevue/utils';
+import BaseTabMenu from './BaseTabMenu.vue';
 
 export default {
     name: 'TabMenu',
-    extends: BaseComponent,
+    extends: BaseTabMenu,
     emits: ['update:activeIndex', 'tab-change'],
-    props: {
-        model: {
-            type: Array,
-            default: null
-        },
-        exact: {
-            type: Boolean,
-            default: true
-        },
-        activeIndex: {
-            type: Number,
-            default: 0
-        },
-        'aria-labelledby': {
-            type: String,
-            default: null
-        },
-        'aria-label': {
-            type: String,
-            default: null
-        }
-    },
     timeout: null,
     data() {
         return {
@@ -205,7 +202,7 @@ export default {
 
             let nextItem = items[i];
 
-            if (nextItem) return DomHandler.hasClass(nextItem, 'p-disabled') ? this.findNextItem(items, i) : { nextItem, i };
+            if (nextItem) return DomHandler.getAttribute(nextItem, 'data-p-disabled') ? this.findNextItem(items, i) : { nextItem, i };
             else return null;
         },
         findPrevItem(items, index) {
@@ -217,32 +214,9 @@ export default {
 
             let prevItem = items[i];
 
-            if (prevItem) return DomHandler.hasClass(prevItem, 'p-disabled') ? this.findPrevItem(items, i) : { prevItem, i };
+            if (prevItem) return DomHandler.getAttribute(prevItem, 'data-p-disabled') ? this.findPrevItem(items, i) : { prevItem, i };
             else return null;
         },
-        getItemClass(item, index) {
-            return [
-                'p-tabmenuitem',
-                item.class,
-                {
-                    'p-highlight': this.d_activeIndex === index,
-                    'p-disabled': this.disabled(item)
-                }
-            ];
-        },
-        getRouteItemClass(item, isActive, isExactActive) {
-            return [
-                'p-tabmenuitem',
-                item.class,
-                {
-                    'p-highlight': this.exact ? isExactActive : isActive,
-                    'p-disabled': this.disabled(item)
-                }
-            ];
-        },
-        getItemIcon(item) {
-            return ['p-menuitem-icon', item.icon];
-        },
         visible(item) {
             return typeof item.visible === 'function' ? item.visible() : item.visible !== false;
         },
@@ -255,7 +229,7 @@ export default {
         setDefaultTabIndexes(tabLinkRef) {
             setTimeout(() => {
                 tabLinkRef.forEach((item) => {
-                    item.tabIndex = DomHandler.hasClass(item.parentElement, 'p-highlight') ? '0' : '-1';
+                    item.tabIndex = DomHandler.getAttribute(item.parentElement, 'data-p-highlight') ? '0' : '-1';
                 });
             }, 300);
         },
@@ -269,7 +243,7 @@ export default {
             for (let i = 0; i < tabs.length; i++) {
                 let tab = tabs[i];
 
-                if (DomHandler.hasClass(tab, 'p-highlight')) {
+                if (DomHandler.getAttribute(tab, 'data-p-highlight')) {
                     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;
@@ -285,7 +259,7 @@ export default {
     computed: {
         focusableItems() {
             return (this.model || []).reduce((result, item) => {
-                this.visible(item) && !DomHandler.hasClass(item, 'p-disabled') && result.push(item);
+                this.visible(item) && !this.disabled(item) && result.push(item);
 
                 return result;
             }, []);
@@ -296,45 +270,3 @@ export default {
     }
 };
 </script>
-
-<style>
-.p-tabmenu {
-    overflow-x: auto;
-}
-
-.p-tabmenu-nav {
-    display: flex;
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-    flex-wrap: nowrap;
-}
-
-.p-tabmenu-nav a {
-    cursor: pointer;
-    user-select: none;
-    display: flex;
-    align-items: center;
-    position: relative;
-    text-decoration: none;
-    text-decoration: none;
-    overflow: hidden;
-}
-
-.p-tabmenu-nav a:focus {
-    z-index: 1;
-}
-
-.p-tabmenu-nav .p-menuitem-text {
-    line-height: 1;
-}
-
-.p-tabmenu-ink-bar {
-    display: none;
-    z-index: 1;
-}
-
-.p-tabmenu::-webkit-scrollbar {
-    display: none;
-}
-</style>