Menu cosmetics and demo update

pull/4789/head
Cagatay Civici 2023-11-09 18:21:13 +03:00
parent 6a89e7c17a
commit f02240cbfc
5 changed files with 46 additions and 46 deletions

View File

@ -5,7 +5,7 @@
</p>
</DocSectionText>
<div class="card">
<ContextMenu ref="cm" :model="menuModel" />
<ContextMenu ref="cm" :model="menuModel" @hide="selectedProduct = null" />
<DataTable v-model:contextMenuSelection="selectedProduct" :value="products" contextMenu @row-contextmenu="onRowContextMenu" tableStyle="min-width: 50rem">
<Column field="code" header="Code"></Column>
<Column field="name" header="Name"></Column>
@ -34,7 +34,7 @@ export default {
],
code: {
basic: `
<ContextMenu ref="cm" :model="menuModel" />
<ContextMenu ref="cm" :model="menuModel" @hide="selectedProduct = null" />
<DataTable v-model:contextMenuSelection="selectedProduct" :value="products" contextMenu
@row-contextmenu="onRowContextMenu" tableStyle="min-width: 50rem">
<Column field="code" header="Code"></Column>
@ -49,8 +49,8 @@ export default {
`,
options: `
<template>
<div>
<ContextMenu ref="cm" :model="menuModel" />
<div class="card">
<ContextMenu ref="cm" :model="menuModel" @hide="selectedProduct = null" />
<DataTable :value="products" contextMenu v-model:contextMenuSelection="selectedProduct"
@rowContextmenu="onRowContextMenu" tableStyle="min-width: 50rem">
<Column field="code" header="Code"></Column>
@ -105,8 +105,8 @@ export default {
`,
composition: `
<template>
<div>
<ContextMenu ref="cm" :model="menuModel" />
<div class="card">
<ContextMenu ref="cm" :model="menuModel" @hide="selectedProduct = null" />
<DataTable :value="products" contextMenu v-model:contextMenuSelection="selectedProduct"
@rowContextmenu="onRowContextMenu" tableStyle="min-width: 50rem">
<Column field="code" header="Code"></Column>

View File

@ -4176,7 +4176,7 @@
}
.p-contextmenu {
padding: 0.25rem 0;
padding: 0.5rem 0;
background: #ffffff;
color: #4b5563;
border: 0 none;
@ -4188,7 +4188,7 @@
outline: 0 none;
}
.p-contextmenu .p-submenu-list {
padding: 0.25rem 0;
padding: 0.5rem 0;
background: #ffffff;
border: 0 none;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
@ -4407,7 +4407,7 @@
border-top-left-radius: 6px;
}
.p-megamenu .p-submenu-list {
padding: 0.25rem 0;
padding: 0.5rem 0;
width: 12.5rem;
}
.p-megamenu .p-submenu-list .p-menuitem-separator {
@ -4416,7 +4416,7 @@
}
.p-megamenu.p-megamenu-vertical {
width: 12.5rem;
padding: 0.25rem 0;
padding: 0.5rem 0;
}
.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content {
color: #4b5563;
@ -4450,7 +4450,7 @@
}
.p-menu {
padding: 0.25rem 0;
padding: 0.5rem 0;
background: #ffffff;
color: #4b5563;
border: 1px solid #e5e7eb;
@ -4623,7 +4623,7 @@
color: #6b7280;
}
.p-menubar .p-submenu-list {
padding: 0.25rem 0;
padding: 0.5rem 0;
background: #ffffff;
border: 0 none;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
@ -4661,7 +4661,7 @@
.p-menubar .p-menubar-root-list {
position: absolute;
display: none;
padding: 0.25rem 0;
padding: 0.5rem 0;
background: #ffffff;
border: 0 none;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
@ -4770,7 +4770,7 @@
color: #374151;
}
.p-panelmenu .p-panelmenu-content {
padding: 0.25rem 0;
padding: 0.5rem 0;
border: 1px solid #e5e7eb;
background: #ffffff;
color: #4b5563;
@ -4936,7 +4936,7 @@
}
.p-tieredmenu {
padding: 0.25rem 0;
padding: 0.5rem 0;
background: #ffffff;
color: #4b5563;
border: 1px solid #e5e7eb;
@ -4952,7 +4952,7 @@
outline: 0 none;
}
.p-tieredmenu .p-submenu-list {
padding: 0.25rem 0;
padding: 0.5rem 0;
background: #ffffff;
border: 0 none;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

View File

@ -4176,7 +4176,7 @@
}
.p-contextmenu {
padding: 0.25rem 0;
padding: 0.5rem 0;
background: #ffffff;
color: #4b5563;
border: 0 none;
@ -4188,7 +4188,7 @@
outline: 0 none;
}
.p-contextmenu .p-submenu-list {
padding: 0.25rem 0;
padding: 0.5rem 0;
background: #ffffff;
border: 0 none;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
@ -4407,7 +4407,7 @@
border-top-left-radius: 6px;
}
.p-megamenu .p-submenu-list {
padding: 0.25rem 0;
padding: 0.5rem 0;
width: 12.5rem;
}
.p-megamenu .p-submenu-list .p-menuitem-separator {
@ -4416,7 +4416,7 @@
}
.p-megamenu.p-megamenu-vertical {
width: 12.5rem;
padding: 0.25rem 0;
padding: 0.5rem 0;
}
.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content {
color: #4b5563;
@ -4450,7 +4450,7 @@
}
.p-menu {
padding: 0.25rem 0;
padding: 0.5rem 0;
background: #ffffff;
color: #4b5563;
border: 1px solid #e5e7eb;
@ -4623,7 +4623,7 @@
color: #6b7280;
}
.p-menubar .p-submenu-list {
padding: 0.25rem 0;
padding: 0.5rem 0;
background: #ffffff;
border: 0 none;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
@ -4661,7 +4661,7 @@
.p-menubar .p-menubar-root-list {
position: absolute;
display: none;
padding: 0.25rem 0;
padding: 0.5rem 0;
background: #ffffff;
border: 0 none;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
@ -4770,7 +4770,7 @@
color: #374151;
}
.p-panelmenu .p-panelmenu-content {
padding: 0.25rem 0;
padding: 0.5rem 0;
border: 1px solid #e5e7eb;
background: #ffffff;
color: #4b5563;
@ -4936,7 +4936,7 @@
}
.p-tieredmenu {
padding: 0.25rem 0;
padding: 0.5rem 0;
background: #ffffff;
color: #4b5563;
border: 1px solid #e5e7eb;
@ -4952,7 +4952,7 @@
outline: 0 none;
}
.p-tieredmenu .p-submenu-list {
padding: 0.25rem 0;
padding: 0.5rem 0;
background: #ffffff;
border: 0 none;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

View File

@ -4176,7 +4176,7 @@
}
.p-contextmenu {
padding: 0.25rem 0;
padding: 0.5rem 0;
background: #ffffff;
color: #4b5563;
border: 0 none;
@ -4188,7 +4188,7 @@
outline: 0 none;
}
.p-contextmenu .p-submenu-list {
padding: 0.25rem 0;
padding: 0.5rem 0;
background: #ffffff;
border: 0 none;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
@ -4407,7 +4407,7 @@
border-top-left-radius: 6px;
}
.p-megamenu .p-submenu-list {
padding: 0.25rem 0;
padding: 0.5rem 0;
width: 12.5rem;
}
.p-megamenu .p-submenu-list .p-menuitem-separator {
@ -4416,7 +4416,7 @@
}
.p-megamenu.p-megamenu-vertical {
width: 12.5rem;
padding: 0.25rem 0;
padding: 0.5rem 0;
}
.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content {
color: #4b5563;
@ -4450,7 +4450,7 @@
}
.p-menu {
padding: 0.25rem 0;
padding: 0.5rem 0;
background: #ffffff;
color: #4b5563;
border: 1px solid #e5e7eb;
@ -4623,7 +4623,7 @@
color: #6b7280;
}
.p-menubar .p-submenu-list {
padding: 0.25rem 0;
padding: 0.5rem 0;
background: #ffffff;
border: 0 none;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
@ -4661,7 +4661,7 @@
.p-menubar .p-menubar-root-list {
position: absolute;
display: none;
padding: 0.25rem 0;
padding: 0.5rem 0;
background: #ffffff;
border: 0 none;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
@ -4770,7 +4770,7 @@
color: #374151;
}
.p-panelmenu .p-panelmenu-content {
padding: 0.25rem 0;
padding: 0.5rem 0;
border: 1px solid #e5e7eb;
background: #ffffff;
color: #4b5563;
@ -4936,7 +4936,7 @@
}
.p-tieredmenu {
padding: 0.25rem 0;
padding: 0.5rem 0;
background: #ffffff;
color: #4b5563;
border: 1px solid #e5e7eb;
@ -4952,7 +4952,7 @@
outline: 0 none;
}
.p-tieredmenu .p-submenu-list {
padding: 0.25rem 0;
padding: 0.5rem 0;
background: #ffffff;
border: 0 none;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

View File

@ -4176,7 +4176,7 @@
}
.p-contextmenu {
padding: 0.25rem 0;
padding: 0.5rem 0;
background: #ffffff;
color: #4b5563;
border: 0 none;
@ -4188,7 +4188,7 @@
outline: 0 none;
}
.p-contextmenu .p-submenu-list {
padding: 0.25rem 0;
padding: 0.5rem 0;
background: #ffffff;
border: 0 none;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
@ -4407,7 +4407,7 @@
border-top-left-radius: 6px;
}
.p-megamenu .p-submenu-list {
padding: 0.25rem 0;
padding: 0.5rem 0;
width: 12.5rem;
}
.p-megamenu .p-submenu-list .p-menuitem-separator {
@ -4416,7 +4416,7 @@
}
.p-megamenu.p-megamenu-vertical {
width: 12.5rem;
padding: 0.25rem 0;
padding: 0.5rem 0;
}
.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content {
color: #4b5563;
@ -4450,7 +4450,7 @@
}
.p-menu {
padding: 0.25rem 0;
padding: 0.5rem 0;
background: #ffffff;
color: #4b5563;
border: 1px solid #e5e7eb;
@ -4623,7 +4623,7 @@
color: #6b7280;
}
.p-menubar .p-submenu-list {
padding: 0.25rem 0;
padding: 0.5rem 0;
background: #ffffff;
border: 0 none;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
@ -4661,7 +4661,7 @@
.p-menubar .p-menubar-root-list {
position: absolute;
display: none;
padding: 0.25rem 0;
padding: 0.5rem 0;
background: #ffffff;
border: 0 none;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
@ -4770,7 +4770,7 @@
color: #374151;
}
.p-panelmenu .p-panelmenu-content {
padding: 0.25rem 0;
padding: 0.5rem 0;
border: 1px solid #e5e7eb;
background: #ffffff;
color: #4b5563;
@ -4936,7 +4936,7 @@
}
.p-tieredmenu {
padding: 0.25rem 0;
padding: 0.5rem 0;
background: #ffffff;
color: #4b5563;
border: 1px solid #e5e7eb;
@ -4952,7 +4952,7 @@
outline: 0 none;
}
.p-tieredmenu .p-submenu-list {
padding: 0.25rem 0;
padding: 0.5rem 0;
background: #ffffff;
border: 0 none;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);