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

Update #3965 - For TabMenu

pull/4011/head
Tuğçe Küçükoğlu 2023-05-30 14:43:52 +03:00
parent 751295c755
commit 9d63038e29
3 changed files with 144 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
components/lib/tabmenu/BaseTabMenu.vue Normal file
View File

@ -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>

5
components/lib/tabmenu/TabMenu.d.ts vendored
View File

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

146
components/lib/tabmenu/TabMenu.vue
View File

@ -1,16 +1,25 @@
<template> <template>
<div class="p-tabmenu p-component" v-bind="ptm('root')"> <div :class="cx('root')" 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')"> <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()"> <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> <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"> <template v-if="!$slots.item">
<a <a
ref="tabLink" ref="tabLink"
v-ripple v-ripple
role="menuitem" role="menuitem"
:href="href" :href="href"
class="p-menuitem-link" :class="cx('action')"
:aria-label="label(item)" :aria-label="label(item)"
:aria-disabled="disabled(item)" :aria-disabled="disabled(item)"
:tabindex="isExactActive ? '0' : '-1'" :tabindex="isExactActive ? '0' : '-1'"
@ -18,61 +27,49 @@
@keydown="onKeydownItem($event, i, navigate)" @keydown="onKeydownItem($event, i, navigate)"
v-bind="getPTOptions('action', i)" v-bind="getPTOptions('action', i)"
> >
<component v-if="$slots.itemicon" :is="$slots.itemicon" :item="item" :class="getItemIcon(item)" /> <component v-if="$slots.itemicon" :is="$slots.itemicon" :item="item" :class="[cx('icon'), item.icon]" />
<span v-else-if="item.icon" :class="getItemIcon(item)" v-bind="getPTOptions('icon', i)" /> <span v-else-if="item.icon" :class="[cx('icon'), item.icon]" v-bind="getPTOptions('icon', i)" />
<span class="p-menuitem-text" v-bind="getPTOptions('label', i)">{{ label(item) }}</span> <span :class="cx('label')" v-bind="getPTOptions('label', i)">{{ label(item) }}</span>
</a> </a>
</template> </template>
<component v-else :is="$slots.item" :item="item" :index="i"></component> <component v-else :is="$slots.item" :item="item" :index="i"></component>
</li> </li>
</router-link> </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"> <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)"> <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="getItemIcon(item)" /> <component v-if="$slots.itemicon" :is="$slots.itemicon" :item="item" :class="[cx('icon'), item.icon]" />
<span v-else-if="item.icon" :class="getItemIcon(item)" v-bind="getPTOptions('icon', i)" /> <span v-else-if="item.icon" :class="[cx('icon'), item.icon]" v-bind="getPTOptions('icon', i)" />
<span class="p-menuitem-text" v-bind="getPTOptions('label', i)">{{ label(item) }}</span> <span :class="cx('label')" v-bind="getPTOptions('label', i)">{{ label(item) }}</span>
</a> </a>
</template> </template>
<component v-else :is="$slots.item" :item="item" :index="i"></component> <component v-else :is="$slots.item" :item="item" :index="i"></component>
</li> </li>
</template> </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> </ul>
</div> </div>
</template> </template>
<script> <script>
import BaseComponent from 'primevue/basecomponent';
import Ripple from 'primevue/ripple'; import Ripple from 'primevue/ripple';
import { DomHandler } from 'primevue/utils'; import { DomHandler } from 'primevue/utils';
import BaseTabMenu from './BaseTabMenu.vue';
export default { export default {
name: 'TabMenu', name: 'TabMenu',
extends: BaseComponent, extends: BaseTabMenu,
emits: ['update:activeIndex', 'tab-change'], 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, timeout: null,
data() { data() {
return { return {
@ -205,7 +202,7 @@ export default {
let nextItem = items[i]; 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; else return null;
}, },
findPrevItem(items, index) { findPrevItem(items, index) {
@ -217,32 +214,9 @@ export default {
let prevItem = items[i]; 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; 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) { visible(item) {
return typeof item.visible === 'function' ? item.visible() : item.visible !== false; return typeof item.visible === 'function' ? item.visible() : item.visible !== false;
}, },
@ -255,7 +229,7 @@ export default {
setDefaultTabIndexes(tabLinkRef) { setDefaultTabIndexes(tabLinkRef) {
setTimeout(() => { setTimeout(() => {
tabLinkRef.forEach((item) => { 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); }, 300);
}, },
@ -269,7 +243,7 @@ export default {
for (let i = 0; i < tabs.length; i++) { for (let i = 0; i < tabs.length; i++) {
let tab = tabs[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.width = DomHandler.getWidth(tab) + 'px';
this.$refs.inkbar.style.left = DomHandler.getOffset(tab).left - DomHandler.getOffset(this.$refs.nav).left + 'px'; this.$refs.inkbar.style.left = DomHandler.getOffset(tab).left - DomHandler.getOffset(this.$refs.nav).left + 'px';
inkHighlighted = true; inkHighlighted = true;
@ -285,7 +259,7 @@ export default {
computed: { computed: {
focusableItems() { focusableItems() {
return (this.model || []).reduce((result, item) => { 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; return result;
}, []); }, []);
@ -296,45 +270,3 @@ export default {
} }
}; };
</script> </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>