Refactor #3965 - For TabView

components/lib/tabpanel/BaseTabPanel.vue

@@ -0,0 +1,19 @@
+<script>
+import BaseComponent from 'primevue/basecomponent';
+
+export default {
+    name: 'BaseTabPanel',
+    extends: BaseComponent,
+    props: {
+        header: null,
+        headerStyle: null,
+        headerClass: null,
+        headerProps: null,
+        headerActionProps: null,
+        contentStyle: null,
+        contentClass: null,
+        contentProps: null,
+        disabled: Boolean
+    }
+};
+</script>

components/lib/tabpanel/TabPanel.vue

@@ -3,20 +3,10 @@
 </template>
 
 <script>
-import BaseComponent from 'primevue/basecomponent';
+import BaseTabPanel from './BaseTabPanel.vue';
+
 export default {
     name: 'TabPanel',
-    extends: BaseComponent,
-    props: {
-        header: null,
-        headerStyle: null,
-        headerClass: null,
-        headerProps: null,
-        headerActionProps: null,
-        contentStyle: null,
-        contentClass: null,
-        contentProps: null,
-        disabled: Boolean
-    }
+    extends: BaseTabPanel
 };
 </script>

components/lib/tabview/BaseTabView.vue

@@ -0,0 +1,163 @@
+<script>
+import BaseComponent from 'primevue/basecomponent';
+import { useStyle } from 'primevue/usestyle';
+
+const styles = `
+.p-tabview-nav-container {
+    position: relative;
+}
+
+.p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+}
+
+.p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+}
+
+.p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+}
+
+.p-tabview-header-action {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+}
+
+.p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+}
+
+.p-tabview-header-action:focus {
+    z-index: 1;
+}
+
+.p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+}
+
+.p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.p-tabview-nav-prev {
+    left: 0;
+}
+
+.p-tabview-nav-next {
+    right: 0;
+}
+
+.p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+}
+`;
+
+const classes = {
+    root: ({ props }) => [
+        'p-tabview p-component',
+        {
+            'p-tabview-scrollable': props.scrollable
+        }
+    ],
+    navContainer: 'p-tabview-nav-container',
+    previousButton: 'p-tabview-nav-prev p-tabview-nav-btn p-link',
+    previousIcon: ({ props }) => props.prevIcon,
+    navContent: 'p-tabview-nav-content',
+    nav: 'p-tabview-nav',
+    tab: {
+        header: ({ instance, tab, index }) => [
+            'p-tabview-header',
+            instance.getTabProp(tab, 'headerClass'),
+            {
+                'p-highlight': instance.d_activeIndex === index,
+                'p-disabled': instance.getTabProp(tab, 'disabled')
+            }
+        ],
+        headerAction: 'p-tabview-nav-link p-tabview-header-action',
+        headerTitle: 'p-tabview-title',
+        content: ({ instance, tab }) => ['p-tabview-panel', instance.getTabProp(tab, 'contentClass')]
+    },
+    inkbar: 'p-tabview-ink-bar',
+    nextButton: 'p-tabview-nav-next p-tabview-nav-btn p-link',
+    nextIcon: ({ props }) => props.nextIcon,
+    panelContainer: 'p-tabview-panels'
+};
+
+const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_tabview_style', manual: true });
+
+export default {
+    name: 'BaseTabView',
+    extends: BaseComponent,
+    props: {
+        activeIndex: {
+            type: Number,
+            default: 0
+        },
+        lazy: {
+            type: Boolean,
+            default: false
+        },
+        scrollable: {
+            type: Boolean,
+            default: false
+        },
+        tabindex: {
+            type: Number,
+            default: 0
+        },
+        selectOnFocus: {
+            type: Boolean,
+            default: false
+        },
+        previousButtonProps: {
+            type: null,
+            default: null
+        },
+        nextButtonProps: {
+            type: null,
+            default: null
+        },
+        prevIcon: {
+            type: String,
+            default: undefined
+        },
+        nextIcon: {
+            type: String,
+            default: undefined
+        }
+    },
+    css: {
+        classes
+    },
+    watch: {
+        isUnstyled: {
+            immediate: true,
+            handler(newValue) {
+                !newValue && loadStyle();
+            }
+        }
+    }
+};
+</script>

components/lib/tabview/TabView.d.ts

@@ -166,6 +166,11 @@ export interface TabViewProps {
      * @type {TabViewPassThroughOptions}
      */
     pt?: TabViewPassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
 }
 
 /**