vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Refactor #5621

pull/5677/head
mertsincan 2024-04-25 00:37:23 +01:00
parent a2524ed21a
commit 305af028fc
6 changed files with 173 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
components/lib/tablist/TabList.vue
View File

@ -1,46 +1,41 @@
<template>
<div ref="list" :class="cx('root')" v-bind="ptmi('root')">
<Button
<button
v-if="showNavigators && isPrevButtonEnabled"
ref="prevButton"
v-ripple
:class="cx('previousButton')"
:aria-label="prevButtonAriaLabel"
:unstyled="$pcTabs.unstyled"
:tabindex="$pcTabs.tabindex"
@click="onPrevButtonClick"
v-bind="$pcTabs.previousButtonProps"
:pt="ptm('previousButton')"
v-bind="ptm('previousButton')"
data-pc-group-section="navigator"
>
<template #icon="slotProps">
<component :is="templates.previousicon || 'ChevronLeftIcon'" aria-hidden="true" :class="slotProps.icon" v-bind="ptm('previousButton.icon')" />
</template>
</Button>
<div ref="content" :class="cx('content')" role="tablist" :aria-orientation="$pcTabs.orientation" @scroll="onScroll" v-bind="ptm('content')">
<slot></slot>
<span ref="inkbar" :class="cx('inkbar')" role="presentation" aria-hidden="true" v-bind="ptm('inkbar')"></span>
<component :is="templates.previousicon || 'ChevronLeftIcon'" aria-hidden="true" v-bind="ptm('previousIcon')" />
</button>
<div ref="content" :class="cx('content')" @scroll="onScroll" v-bind="ptm('content')">
<div ref="tabs" :class="cx('tabs')" role="tablist" :aria-orientation="$pcTabs.orientation" v-bind="ptm('tabs')">
<slot></slot>
<span ref="inkbar" :class="cx('inkbar')" role="presentation" aria-hidden="true" v-bind="ptm('inkbar')"></span>
</div>
</div>
<Button
<button
v-if="showNavigators && isNextButtonEnabled"
ref="nextButton"
v-ripple
:class="cx('nextButton')"
:aria-label="nextButtonAriaLabel"
:unstyled="$pcTabs.unstyled"
:tabindex="$pcTabs.tabindex"
@click="onNextButtonClick"
v-bind="$pcTabs.nextButtonProps"
:pt="ptm('nextButton')"
v-bind="ptm('nextButton')"
data-pc-group-section="navigator"
>
<template #icon="slotProps">
<component :is="templates.nexticon || 'ChevronRightIcon'" aria-hidden="true" :class="slotProps.icon" v-bind="ptm('nextButton.icon')" />
</template>
</Button>
<component :is="templates.nexticon || 'ChevronRightIcon'" aria-hidden="true" v-bind="ptm('nextIcon')" />
</button>
</div>
</template>
<script>
import Button from 'primevue/button';
import ChevronLeftIcon from 'primevue/icons/chevronleft';
import ChevronRightIcon from 'primevue/icons/chevronright';
import { DomHandler } from 'primevue/utils';
@ -115,11 +110,11 @@ export default {
this.resizeObserver = undefined;
},
updateInkBar() {
const { content, inkbar } = this.$refs;
const { content, inkbar, tabs } = this.$refs;
const activeTab = DomHandler.findSingle(content, '[data-pc-name="tab"][data-p-active="true"]');
inkbar.style.width = DomHandler.getOuterWidth(activeTab) + 'px';
inkbar.style.left = DomHandler.getOffset(activeTab).left - DomHandler.getOffset(content).left + 'px';
inkbar.style.left = DomHandler.getOffset(activeTab).left - DomHandler.getOffset(tabs).left + 'px';
},
updateButtonState() {
const { list, content } = this.$refs;
@ -153,7 +148,6 @@ export default {
}
},
components: {
Button,
ChevronLeftIcon,
ChevronRightIcon
}

3
components/lib/tablist/style/TabListStyle.js
View File

@ -5,9 +5,10 @@ const classes = {
content: ({ instance }) => [
'p-tablist-content',
{
'p-tablist-scroll-container': instance.$pcTabs.scrollable
'p-tablist-scroller': instance.$pcTabs.scrollable
}
],
tabs: 'p-tablist-tabs',
inkbar: 'p-tablist-ink-bar',
previousButton: 'p-tablist-prev-button p-tablist-navigator',
nextButton: 'p-tablist-next-button p-tablist-navigator'

12
components/lib/tabs/BaseTabs.vue
View File

@ -33,18 +33,6 @@ export default {
selectOnFocus: {
type: Boolean,
default: false
},
previousButtonProps: {
type: Object,
default: () => {
return { severity: 'secondary', text: true };
}
},
nextButtonProps: {
type: Object,
default: () => {
return { severity: 'secondary', text: true };
}
}
},
style: TabsStyle,

9
components/lib/tabs/Tabs.d.ts vendored
View File

@ -9,7 +9,6 @@
*/
import { VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { ButtonProps } from '../button';
import { PassThroughOptions } from '../passthrough';
import { ClassComponent, DesignToken, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
@ -120,14 +119,6 @@ export interface TabsProps {
* @defaultValue false
*/
selectOnFocus?: boolean | undefined;
/**
* Used to pass all properties of the HTMLButtonElement to the previous button.
*/
previousButtonProps?: ButtonProps | undefined;
/**
* Used to pass all properties of the HTMLButtonElement to the next button.
*/
nextButtonProps?: ButtonProps | undefined;
/**
* It generates scoped CSS variables using design tokens for the component.
*/

49
components/lib/themes/primeone/base/tabs/index.js
View File

@ -5,7 +5,15 @@ export default {
flex-direction: column;
}
.p-tablist-scroll-container {
.p-tablist {
position: relative;
}
.p-tabs-scrollable > .p-tablist {
overflow: hidden;
}
.p-tablist-scroller {
overflow-x: auto;
overflow-y: hidden;
scroll-behavior: smooth;
@ -13,34 +21,49 @@ export default {
overscroll-behavior: contain auto;
}
.p-tablist-scroll-container::-webkit-scrollbar {
.p-tablist-scroller::-webkit-scrollbar {
display: none;
}
.p-tablist {
position: relative;
background: ${dt('tabs.nav.background')};
}
.p-tablist-content {
.p-tablist-tabs {
position: relative;
display: flex;
background: ${dt('tabs.nav.background')};
border: 1px solid ${dt('tabs.nav.border.color')};
border-width: 0 0 1px 0;
}
.p-tablist-navigator.p-button {
.p-tablist-navigator {
all: unset;
position: absolute;
top: 0;
z-index: 2;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: ${dt('tabs.navigator.icon.background')};
color: ${dt('tabs.navigator.icon.color')};
width: 2.5rem;
transition: color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
box-shadow: ${dt('tabs.navigator.icon.box.shadow')};
cursor: pointer;
}
.p-tablist-navigator.p-tablist-prev-button {
top: 0;
.p-tablist-navigator:focus-visible {
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: ${dt('focus.ring.offset')};
}
.p-tablist-navigator:hover {
color: ${dt('tabs.navigator.icon.hover.color')};
}
.p-tablist-prev-button {
left: 0;
}
.p-tablist-navigator.p-tablist-next-button {
top: 0;
.p-tablist-next-button {
right: 0;
}

148
doc/common/apidoc/index.json
View File

@ -170,7 +170,8 @@
"readonly": false,
"type": "AccordionTabPassThroughOptionType",
"default": "",
"description": "Used to pass attributes to AccordionTab helper components."
"description": "Used to pass attributes to AccordionTab helper components.",
"deprecated": "since v4. Use new structure instead."
},
{
"name": "hooks",
@ -209,12 +210,12 @@
"description": "Current id state as a string"
},
{
"name": "d_activeIndex",
"name": "d_value",
"optional": false,
"readonly": false,
"type": "number | number[]",
"type": "string | string[]",
"default": "",
"description": "Current active index state."
"description": "Current active value state."
}
],
"methods": []
@ -223,6 +224,14 @@
"description": "Defines valid properties in Accordion component.",
"relatedProp": "",
"props": [
{
"name": "value",
"optional": true,
"readonly": false,
"type": "null | string | string[]",
"default": "null",
"description": "Value of the active panel or an array of values in multiple mode."
},
{
"name": "multiple",
"optional": true,
@ -237,7 +246,8 @@
"readonly": false,
"type": "null | number | number[]",
"default": "null",
"description": "Index of the active tab or an array of indexes in multiple mode."
"description": "Index of the active tab or an array of indexes in multiple mode.",
"deprecated": "since v4. Use value property instead."
},
{
"name": "lazy",
@ -344,6 +354,19 @@
"relatedProp": "",
"props": [],
"methods": [
{
"name": "update:value",
"parameters": [
{
"name": "value",
"optional": false,
"type": "undefined | null | string | string[]",
"description": "Value of new active panel."
}
],
"returnType": "void",
"description": "Emitted when the active panel changes."
},
{
"name": "update:activeIndex",
"parameters": [
@ -355,7 +378,8 @@
}
],
"returnType": "void",
"description": "Emitted when the active tab changes."
"description": "Emitted when the active tab changes.",
"deprecated": "since v4. Use update:value emit instead."
},
{
"name": "tab-open",
@ -368,7 +392,8 @@
}
],
"returnType": "void",
"description": "Callback to invoke when a tab gets expanded."
"description": "Callback to invoke when a tab gets expanded.",
"deprecated": "since v4."
},
{
"name": "tab-close",
@ -381,7 +406,8 @@
}
],
"returnType": "void",
"description": "Callback to invoke when an active tab is collapsed by clicking on the header."
"description": "Callback to invoke when an active tab is collapsed by clicking on the header.",
"deprecated": "since v4."
},
{
"name": "tab-click",
@ -394,7 +420,8 @@
}
],
"returnType": "void",
"description": "Callback to invoke when an active tab is clicked."
"description": "Callback to invoke when an active tab is clicked.",
"deprecated": "since v4."
}
]
}
@ -552,6 +579,22 @@
"default": "",
"description": "Used to pass attributes to the root's DOM element."
},
{
"name": "transition",
"optional": true,
"readonly": false,
"type": "AccordionContentPassThroughOptionType",
"default": "",
"description": "Used to pass attributes to the transition's DOM element."
},
{
"name": "content",
"optional": true,
"readonly": false,
"type": "AccordionContentPassThroughOptionType",
"default": "",
"description": "Used to pass attributes to the content's DOM element."
},
{
"name": "hooks",
"optional": true,
@ -809,6 +852,14 @@
"default": "",
"description": "Used to pass attributes to the root's DOM element."
},
{
"name": "toggleicon",
"optional": true,
"readonly": false,
"type": "AccordionHeaderPassThroughOptionType",
"default": "",
"description": "Used to pass attributes to the root's DOM element."
},
{
"name": "hooks",
"optional": true,
@ -1260,10 +1311,10 @@
}
},
"accordiontab": {
"description": "AccordionTab is a helper component for Accordion.\n\n[Live Demo](https://www.primevue.org/accordion/)",
"description": "",
"components": {
"default": {
"description": "AccordionTab is a helper component for Accordion..",
"description": "",
"methods": {
"description": "Defines methods that can be accessed by the component's reference.",
"values": []
@ -16050,12 +16101,35 @@
"type": "DefaultPassThrough<AccordionPassThroughOptions>",
"default": ""
},
{
"name": "accordionpanel",
"optional": true,
"readonly": false,
"type": "DefaultPassThrough<AccordionPanelPassThroughOptions>",
"default": ""
},
{
"name": "accordionheader",
"optional": true,
"readonly": false,
"type": "DefaultPassThrough<AccordionHeaderPassThroughOptions>",
"default": ""
},
{
"name": "accordioncontent",
"optional": true,
"readonly": false,
"type": "DefaultPassThrough<AccordionContentPassThroughOptions>",
"default": ""
},
{
"name": "accordiontab",
"optional": true,
"readonly": false,
"type": "DefaultPassThrough<AccordionTabPassThroughOptions>",
"default": ""
"default": "",
"description": "",
"deprecated": "since v4. Use the new structure of Accordion instead."
},
{
"name": "autocomplete",
@ -16596,6 +16670,34 @@
"type": "DefaultPassThrough<TabMenuPassThroughOptions>",
"default": ""
},
{
"name": "tabs",
"optional": true,
"readonly": false,
"type": "DefaultPassThrough<TabsPassThroughOptions>",
"default": ""
},
{
"name": "tablist",
"optional": true,
"readonly": false,
"type": "DefaultPassThrough<TabListPassThroughOptions>",
"default": ""
},
{
"name": "tab",
"optional": true,
"readonly": false,
"type": "DefaultPassThrough<TabPassThroughOptions>",
"default": ""
},
{
"name": "tabpanels",
"optional": true,
"readonly": false,
"type": "DefaultPassThrough<TabPanelsPassThroughOptions>",
"default": ""
},
{
"name": "tabpanel",
"optional": true,
@ -16608,7 +16710,9 @@
"optional": true,
"readonly": false,
"type": "DefaultPassThrough<TabViewPassThroughOptions>",
"default": ""
"default": "",
"description": "",
"deprecated": "since v4. Use tabs instead."
},
{
"name": "tag",
@ -59207,22 +59311,6 @@
"default": "false",
"description": "When enabled, the focused tab is activated."
},
{
"name": "previousButtonProps",
"optional": true,
"readonly": false,
"type": "ButtonProps",
"default": "",
"description": "Used to pass all properties of the HTMLButtonElement to the previous button."
},
{
"name": "nextButtonProps",
"optional": true,
"readonly": false,
"type": "ButtonProps",
"default": "",
"description": "Used to pass all properties of the HTMLButtonElement to the next button."
},
{
"name": "dt",
"optional": true,
@ -59374,7 +59462,7 @@
}
},
"tabview": {
"description": "TabView is a container component to group content with tabs.\n\n[Live Demo](https://www.primevue.org/tabview/)",
"description": "",
"components": {
"default": {
"description": "",