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

Menubar cosmetics

pull/6596/head
Cagatay Civici 2024-10-16 12:36:52 +03:00
parent 7cfd170b74
commit 3f8d470499
3 changed files with 41 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
apps/showcase/doc/menubar/RouterDoc.vue
View File

@ -8,13 +8,13 @@
<router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom> <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
<a v-ripple :href="href" v-bind="props.action" @click="navigate"> <a v-ripple :href="href" v-bind="props.action" @click="navigate">
<span :class="item.icon" /> <span :class="item.icon" />
<span class="ml-2">{{ item.label }}</span> <span>{{ item.label }}</span>
</a> </a>
</router-link> </router-link>
<a v-else v-ripple :href="item.url" :target="item.target" v-bind="props.action"> <a v-else v-ripple :href="item.url" :target="item.target" v-bind="props.action">
<span :class="item.icon" /> <span :class="item.icon" />
<span class="ml-2">{{ item.label }}</span> <span>{{ item.label }}</span>
<span v-if="hasSubmenu" class="pi pi-fw pi-angle-down ml-2" /> <span v-if="hasSubmenu" class="pi pi-fw pi-angle-down" />
</a> </a>
</template> </template>
</Menubar> </Menubar>
@ -70,13 +70,13 @@ export default {
<router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom> <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
<a v-ripple :href="href" v-bind="props.action" @click="navigate"> <a v-ripple :href="href" v-bind="props.action" @click="navigate">
<span :class="item.icon" /> <span :class="item.icon" />
<span class="ml-2">{{ item.label }}</span> <span>{{ item.label }}</span>
</a> </a>
</router-link> </router-link>
<a v-else v-ripple :href="item.url" :target="item.target" v-bind="props.action"> <a v-else v-ripple :href="item.url" :target="item.target" v-bind="props.action">
<span :class="item.icon" /> <span :class="item.icon" />
<span class="ml-2">{{ item.label }}</span> <span>{{ item.label }}</span>
<span v-if="hasSubmenu" class="pi pi-fw pi-angle-down ml-2" /> <span v-if="hasSubmenu" class="pi pi-fw pi-angle-down" />
</a> </a>
</template> </template>
</Menubar> </Menubar>
@ -89,13 +89,13 @@ export default {
<router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom> <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
<a v-ripple :href="href" v-bind="props.action" @click="navigate"> <a v-ripple :href="href" v-bind="props.action" @click="navigate">
<span :class="item.icon" /> <span :class="item.icon" />
<span class="ml-2">{{ item.label }}</span> <span>{{ item.label }}</span>
</a> </a>
</router-link> </router-link>
<a v-else v-ripple :href="item.url" :target="item.target" v-bind="props.action"> <a v-else v-ripple :href="item.url" :target="item.target" v-bind="props.action">
<span :class="item.icon" /> <span :class="item.icon" />
<span class="ml-2">{{ item.label }}</span> <span>{{ item.label }}</span>
<span v-if="hasSubmenu" class="pi pi-fw pi-angle-down ml-2" /> <span v-if="hasSubmenu" class="pi pi-fw pi-angle-down" />
</a> </a>
</template> </template>
</Menubar> </Menubar>
@ -156,13 +156,13 @@ export default {
<router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom> <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
<a v-ripple :href="href" v-bind="props.action" @click="navigate"> <a v-ripple :href="href" v-bind="props.action" @click="navigate">
<span :class="item.icon" /> <span :class="item.icon" />
<span class="ml-2">{{ item.label }}</span> <span>{{ item.label }}</span>
</a> </a>
</router-link> </router-link>
<a v-else v-ripple :href="item.url" :target="item.target" v-bind="props.action"> <a v-else v-ripple :href="item.url" :target="item.target" v-bind="props.action">
<span :class="item.icon" /> <span :class="item.icon" />
<span class="ml-2">{{ item.label }}</span> <span>{{ item.label }}</span>
<span v-if="hasSubmenu" class="pi pi-fw pi-angle-down ml-2" /> <span v-if="hasSubmenu" class="pi pi-fw pi-angle-down" />
</a> </a>
</template> </template>
</Menubar> </Menubar>

118
apps/showcase/doc/menubar/TemplateDoc.vue
View File

@ -20,16 +20,15 @@
</template> </template>
<template #item="{ item, props, hasSubmenu, root }"> <template #item="{ item, props, hasSubmenu, root }">
<a v-ripple class="flex items-center" v-bind="props.action"> <a v-ripple class="flex items-center" v-bind="props.action">
<span :class="item.icon" /> <span>{{ item.label }}</span>
<span class="ml-2">{{ item.label }}</span>
<Badge v-if="item.badge" :class="{ 'ml-auto': !root, 'ml-2': root }" :value="item.badge" /> <Badge v-if="item.badge" :class="{ 'ml-auto': !root, 'ml-2': root }" :value="item.badge" />
<span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span> <span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
<i v-if="hasSubmenu" :class="['pi pi-angle-down', { 'pi-angle-down ml-2': root, 'pi-angle-right ml-auto': !root }]"></i> <i v-if="hasSubmenu" :class="['pi pi-angle-down ml-auto', { 'pi-angle-down': root, 'pi-angle-right': !root }]"></i>
</a> </a>
</template> </template>
<template #end> <template #end>
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<InputText placeholder="Search" type="text" class="w-32 sm:w-auto" /> <InputText placeholder="Search" type="text" class="w-36" />
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" /> <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
</div> </div>
</template> </template>
@ -47,13 +46,10 @@ export default {
label: 'Home', label: 'Home',
icon: 'pi pi-home' icon: 'pi pi-home'
}, },
{
label: 'Features',
icon: 'pi pi-star'
},
{ {
label: 'Projects', label: 'Projects',
icon: 'pi pi-search', icon: 'pi pi-search',
badge: 3,
items: [ items: [
{ {
label: 'Core', label: 'Core',
@ -65,37 +61,16 @@ export default {
icon: 'pi pi-server', icon: 'pi pi-server',
shortcut: '⌘+B' shortcut: '⌘+B'
}, },
{
label: 'UI Kit',
icon: 'pi pi-pencil',
shortcut: '⌘+U'
},
{ {
separator: true separator: true
}, },
{ {
label: 'Templates', label: 'UI Kit',
icon: 'pi pi-palette', icon: 'pi pi-pencil',
items: [ shortcut: '⌘+U'
{
label: 'Apollo',
icon: 'pi pi-palette',
badge: 2
},
{
label: 'Ultima',
icon: 'pi pi-palette',
badge: 3
} }
] ]
} }
]
},
{
label: 'Contact',
icon: 'pi pi-envelope',
badge: 3
}
], ],
code: { code: {
basic: ` basic: `
@ -108,11 +83,10 @@ export default {
</template> </template>
<template #item="{ item, props, hasSubmenu, root }"> <template #item="{ item, props, hasSubmenu, root }">
<a v-ripple class="flex items-center" v-bind="props.action"> <a v-ripple class="flex items-center" v-bind="props.action">
<span :class="item.icon" /> <span>{{ item.label }}</span>
<span class="ml-2">{{ item.label }}</span>
<Badge v-if="item.badge" :class="{ 'ml-auto': !root, 'ml-2': root }" :value="item.badge" /> <Badge v-if="item.badge" :class="{ 'ml-auto': !root, 'ml-2': root }" :value="item.badge" />
<span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span> <span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
<i v-if="hasSubmenu" :class="['pi pi-angle-down', { 'pi-angle-down ml-2': root, 'pi-angle-right ml-auto': !root }]"></i> <i v-if="hasSubmenu" :class="['pi pi-angle-down ml-auto', { 'pi-angle-down': root, 'pi-angle-right': !root }]"></i>
</a> </a>
</template> </template>
<template #end> <template #end>
@ -141,11 +115,10 @@ export default {
</template> </template>
<template #item="{ item, props, hasSubmenu, root }"> <template #item="{ item, props, hasSubmenu, root }">
<a v-ripple class="flex items-center" v-bind="props.action"> <a v-ripple class="flex items-center" v-bind="props.action">
<span :class="item.icon" /> <span>{{ item.label }}</span>
<span class="ml-2">{{ item.label }}</span>
<Badge v-if="item.badge" :class="{ 'ml-auto': !root, 'ml-2': root }" :value="item.badge" /> <Badge v-if="item.badge" :class="{ 'ml-auto': !root, 'ml-2': root }" :value="item.badge" />
<span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span> <span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
<i v-if="hasSubmenu" :class="['pi pi-angle-down', { 'pi-angle-down ml-2': root, 'pi-angle-right ml-auto': !root }]"></i> <i v-if="hasSubmenu" :class="['pi pi-angle-down ml-auto', { 'pi-angle-down': root, 'pi-angle-right': !root }]"></i>
</a> </a>
</template> </template>
<template #end> <template #end>
@ -167,13 +140,10 @@ export default {
label: 'Home', label: 'Home',
icon: 'pi pi-home' icon: 'pi pi-home'
}, },
{
label: 'Features',
icon: 'pi pi-star'
},
{ {
label: 'Projects', label: 'Projects',
icon: 'pi pi-search', icon: 'pi pi-search',
badge: 3,
items: [ items: [
{ {
label: 'Core', label: 'Core',
@ -185,38 +155,17 @@ export default {
icon: 'pi pi-server', icon: 'pi pi-server',
shortcut: '⌘+B' shortcut: '⌘+B'
}, },
{
label: 'UI Kit',
icon: 'pi pi-pencil',
shortcut: '⌘+U'
},
{ {
separator: true separator: true
}, },
{ {
label: 'Templates', label: 'UI Kit',
icon: 'pi pi-palette', icon: 'pi pi-pencil',
items: [ shortcut: '⌘+U'
{
label: 'Apollo',
icon: 'pi pi-palette',
badge: 2
},
{
label: 'Ultima',
icon: 'pi pi-palette',
badge: 3
} }
] ]
} }
] ]
},
{
label: 'Contact',
icon: 'pi pi-envelope',
badge: 3
}
]
}; };
} }
}; };
@ -240,11 +189,10 @@ export default {
</template> </template>
<template #item="{ item, props, hasSubmenu, root }"> <template #item="{ item, props, hasSubmenu, root }">
<a v-ripple class="flex items-center" v-bind="props.action"> <a v-ripple class="flex items-center" v-bind="props.action">
<span :class="item.icon" /> <span>{{ item.label }}</span>
<span class="ml-2">{{ item.label }}</span>
<Badge v-if="item.badge" :class="{ 'ml-auto': !root, 'ml-2': root }" :value="item.badge" /> <Badge v-if="item.badge" :class="{ 'ml-auto': !root, 'ml-2': root }" :value="item.badge" />
<span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span> <span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
<i v-if="hasSubmenu" :class="['pi pi-angle-down', { 'pi-angle-down ml-2': root, 'pi-angle-right ml-auto': !root }]"></i> <i v-if="hasSubmenu" :class="['pi pi-angle-down ml-auto', { 'pi-angle-down': root, 'pi-angle-right': !root }]"></i>
</a> </a>
</template> </template>
<template #end> <template #end>
@ -265,13 +213,10 @@ const items = ref([
label: 'Home', label: 'Home',
icon: 'pi pi-home' icon: 'pi pi-home'
}, },
{
label: 'Features',
icon: 'pi pi-star'
},
{ {
label: 'Projects', label: 'Projects',
icon: 'pi pi-search', icon: 'pi pi-search',
badge: 3,
items: [ items: [
{ {
label: 'Core', label: 'Core',
@ -283,37 +228,16 @@ const items = ref([
icon: 'pi pi-server', icon: 'pi pi-server',
shortcut: '⌘+B' shortcut: '⌘+B'
}, },
{
label: 'UI Kit',
icon: 'pi pi-pencil',
shortcut: '⌘+U'
},
{ {
separator: true separator: true
}, },
{ {
label: 'Templates', label: 'UI Kit',
icon: 'pi pi-palette', icon: 'pi pi-pencil',
items: [ shortcut: '⌘+U'
{
label: 'Apollo',
icon: 'pi pi-palette',
badge: 2
},
{
label: 'Ultima',
icon: 'pi pi-palette',
badge: 3
} }
] ]
} }
]
},
{
label: 'Contact',
icon: 'pi pi-envelope',
badge: 3
}
]); ]);
<\/script> <\/script>
` `

17
packages/primevue/src/menubar/style/MenubarStyle.js
View File

@ -123,7 +123,7 @@ const theme = ({ dt }) => `
z-index: 1; z-index: 1;
background: ${dt('menubar.submenu.background')}; background: ${dt('menubar.submenu.background')};
border: 1px solid ${dt('menubar.submenu.border.color')}; border: 1px solid ${dt('menubar.submenu.border.color')};
border-radius: ${dt('menubar.border.radius')}; border-radius: ${dt('menubar.submenu.border.radius')};
box-shadow: ${dt('menubar.submenu.shadow')}; box-shadow: ${dt('menubar.submenu.shadow')};
color: ${dt('menubar.submenu.color')}; color: ${dt('menubar.submenu.color')};
flex-direction: column; flex-direction: column;
@ -189,14 +189,16 @@ const theme = ({ dt }) => `
position: absolute; position: absolute;
display: none; display: none;
width: 100%; width: 100%;
flex-direction: column;
top: 100%;
left: 0;
z-index: 1;
padding: ${dt('menubar.submenu.padding')}; padding: ${dt('menubar.submenu.padding')};
background: ${dt('menubar.submenu.background')}; background: ${dt('menubar.submenu.background')};
border: 1px solid ${dt('menubar.submenu.border.color')}; border: 1px solid ${dt('menubar.submenu.border.color')};
box-shadow: ${dt('menubar.submenu.shadow')}; box-shadow: ${dt('menubar.submenu.shadow')};
} border-radius: ${dt('menubar.submenu.border.radius')};
gap: ${dt('menubar.submenu.gap')};
.p-menubar-mobile .p-menubar-root-list > .p-menubar-item > .p-menubar-item-content {
border-radius: ${dt('menubar.item.border.radius')};
} }
.p-menubar-mobile .p-menubar-root-list > .p-menubar-item > .p-menubar-item-content > .p-menubar-item-link { .p-menubar-mobile .p-menubar-root-list > .p-menubar-item > .p-menubar-item-content > .p-menubar-item-link {
@ -205,10 +207,6 @@ const theme = ({ dt }) => `
.p-menubar-mobile-active .p-menubar-root-list { .p-menubar-mobile-active .p-menubar-root-list {
display: flex; display: flex;
flex-direction: column;
top: 100%;
left: 0;
z-index: 1;
} }
.p-menubar-mobile .p-menubar-root-list .p-menubar-item { .p-menubar-mobile .p-menubar-root-list .p-menubar-item {
@ -244,6 +242,7 @@ const theme = ({ dt }) => `
box-shadow: none; box-shadow: none;
border: 0 none; border: 0 none;
padding-left: ${dt('menubar.submenu.mobile.indent')}; padding-left: ${dt('menubar.submenu.mobile.indent')};
padding-right: 0;
} }
`; `;