pull/4694/head
Cagatay Civici 2023-10-25 17:42:28 +03:00
commit 4d0b3645c8
9 changed files with 34 additions and 22 deletions

View File

@ -98,6 +98,10 @@ export interface MegaMenuPassThroughOptions {
* Used to pass attributes to the submenu's DOM element. * Used to pass attributes to the submenu's DOM element.
*/ */
submenu?: MegaMenuPassThroughOptionType; submenu?: MegaMenuPassThroughOptionType;
/**
* Used to pass attributes to the submenu label's DOM element.
*/
submenuLabel?: MegaMenuPassThroughOptionType;
/** /**
* Used to pass attributes to the separator's DOM element. * Used to pass attributes to the separator's DOM element.
*/ */

View File

@ -32,7 +32,7 @@
<a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="cx('action')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions(processedItem, index, 'action')"> <a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="cx('action')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions(processedItem, index, 'action')">
<component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" /> <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" />
<span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, index, 'icon')" /> <span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, index, 'icon')" />
<span :class="cx('label')" v-bind="getPTOptions(processedItem, index, 'label')">{{ getItemLabel(processedItem) }}</span> <span :class="level === 0 ? cx('label') : cx('submenuLabel')" v-bind="level === 0 ? getPTOptions(processedItem, index, 'label') : getPTOptions(processedItem, index, 'submenuLabel')">{{ getItemLabel(processedItem) }}</span>
<template v-if="isItemGroup(processedItem)"> <template v-if="isItemGroup(processedItem)">
<component v-if="templates.submenuicon" :is="templates.submenuicon" :active="isItemActive(processedItem)" :class="cx('submenuIcon')" v-bind="getPTOptions(processedItem, index, 'submenuIcon')" /> <component v-if="templates.submenuicon" :is="templates.submenuicon" :active="isItemActive(processedItem)" :class="cx('submenuIcon')" v-bind="getPTOptions(processedItem, index, 'submenuIcon')" />
<component v-else :is="horizontal ? 'AngleDownIcon' : 'AngleRightIcon'" :class="cx('submenuIcon')" v-bind="getPTOptions(processedItem, index, 'submenuIcon')" /> <component v-else :is="horizontal ? 'AngleDownIcon' : 'AngleRightIcon'" :class="cx('submenuIcon')" v-bind="getPTOptions(processedItem, index, 'submenuIcon')" />

View File

@ -185,6 +185,7 @@ const classes = {
return columnClass; return columnClass;
}, },
submenu: 'p-submenu-list p-megamenu-submenu', submenu: 'p-submenu-list p-megamenu-submenu',
submenuLabel: 'p-menuitem-text',
separator: 'p-menuitem-separator', separator: 'p-menuitem-separator',
end: 'p-megamenu-end' end: 'p-megamenu-end'
}; };

View File

@ -31503,6 +31503,14 @@
"default": "", "default": "",
"description": "Used to pass attributes to the submenu's DOM element." "description": "Used to pass attributes to the submenu's DOM element."
}, },
{
"name": "submenuLabel",
"optional": true,
"readonly": false,
"type": "MegaMenuPassThroughOptionType",
"default": "",
"description": "Used to pass attributes to the submenu label's DOM element."
},
{ {
"name": "separator", "name": "separator",
"optional": true, "optional": true,

View File

@ -17,8 +17,8 @@ export default defineNuxtConfig({
modules: [ modules: [
'nuxt-primevue' 'nuxt-primevue'
], ],
primevue: { primevue: {
/* Options */ /* Options */
} }
}) })
` `
@ -29,9 +29,11 @@ export default defineNuxtConfig({
modules: [ modules: [
'nuxt-primevue' 'nuxt-primevue'
], ],
primevue: { primevue: {
usePrimeVue: true, usePrimeVue: true,
options: {}, options: {},
importPT: undefined,
cssLayerOrder: 'tailwind-base, primevue, tailwind-utilities',
components: { components: {
prefix: '', prefix: '',
name: undefined, name: undefined,
@ -51,7 +53,7 @@ export default defineNuxtConfig({
exclude: undefined exclude: undefined
} }
} }
}) })
` `
} }
}; };

View File

@ -11,14 +11,11 @@ export default {
return { return {
code: { code: {
basic: ` basic: `
primevue: { primevue: {
options: { options: {
unstyled: true, unstyled: true,
ripple: true, ripple: true,
inputStyle: 'filled', inputStyle: 'filled'
pt: {
}
} }
} }
` `

View File

@ -3,7 +3,7 @@
<p>A column can be fixed during horizontal scrolling by enabling the <i>frozen</i> property on a Column. The location is defined with the <i>alignFrozen</i> that can be <i>left</i> or <i>right</i>.</p> <p>A column can be fixed during horizontal scrolling by enabling the <i>frozen</i> property on a Column. The location is defined with the <i>alignFrozen</i> that can be <i>left</i> or <i>right</i>.</p>
</DocSectionText> </DocSectionText>
<div class="card"> <div class="card">
<TreeTable :value="nodes" scrollable scrollHeight="200px" scrollDirection="both"> <TreeTable :value="nodes" scrollable scrollHeight="300px" scrollDirection="both">
<Column field="name" header="Name" expander frozen style="width: 250px; height: 57px"></Column> <Column field="name" header="Name" expander frozen style="width: 250px; height: 57px"></Column>
<Column field="size" header="Size" style="width: 250px; height: 57px"></Column> <Column field="size" header="Size" style="width: 250px; height: 57px"></Column>
<Column field="type" header="Type 2" style="width: 250px; height: 57px"></Column> <Column field="type" header="Type 2" style="width: 250px; height: 57px"></Column>
@ -24,7 +24,7 @@ export default {
nodes: null, nodes: null,
code: { code: {
basic: ` basic: `
<TreeTable :value="nodes" scrollable scrollHeight="200px" scrollDirection="both"> <TreeTable :value="nodes" scrollable scrollHeight="300px" scrollDirection="both">
<Column field="name" header="Name" expander frozen style="width: 250px; height: 57px"></Column> <Column field="name" header="Name" expander frozen style="width: 250px; height: 57px"></Column>
<Column field="size" header="Size" style="width: 250px; height: 57px"></Column> <Column field="size" header="Size" style="width: 250px; height: 57px"></Column>
<Column field="type" header="Type 2" style="width: 250px; height: 57px"></Column> <Column field="type" header="Type 2" style="width: 250px; height: 57px"></Column>
@ -36,7 +36,7 @@ export default {
options: ` options: `
<template> <template>
<div class="card"> <div class="card">
<TreeTable :value="nodes" scrollable scrollHeight="200px" scrollDirection="both"> <TreeTable :value="nodes" scrollable scrollHeight="300px" scrollDirection="both">
<Column field="name" header="Name" expander frozen style="width: 250px; height: 57px"></Column> <Column field="name" header="Name" expander frozen style="width: 250px; height: 57px"></Column>
<Column field="size" header="Size" style="width: 250px; height: 57px"></Column> <Column field="size" header="Size" style="width: 250px; height: 57px"></Column>
<Column field="type" header="Type 2" style="width: 250px; height: 57px"></Column> <Column field="type" header="Type 2" style="width: 250px; height: 57px"></Column>
@ -65,7 +65,7 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card"> <div class="card">
<TreeTable :value="nodes" scrollable scrollHeight="200px" scrollDirection="both"> <TreeTable :value="nodes" scrollable scrollHeight="300px" scrollDirection="both">
<Column field="name" header="Name" expander frozen style="width: 250px; height: 57px"></Column> <Column field="name" header="Name" expander frozen style="width: 250px; height: 57px"></Column>
<Column field="size" header="Size" style="width: 250px; height: 57px"></Column> <Column field="size" header="Size" style="width: 250px; height: 57px"></Column>
<Column field="type" header="Type 2" style="width: 250px; height: 57px"></Column> <Column field="type" header="Type 2" style="width: 250px; height: 57px"></Column>

View File

@ -3,7 +3,7 @@
<p>Horizontal scrolling is enabled when the total width of columns exceeds table width.</p> <p>Horizontal scrolling is enabled when the total width of columns exceeds table width.</p>
</DocSectionText> </DocSectionText>
<div class="card"> <div class="card">
<TreeTable :value="nodes" scrollable scrollHeight="200px" scrollDirection="both"> <TreeTable :value="nodes" scrollable scrollHeight="300px" scrollDirection="both">
<Column field="name" header="Name" expander style="width: 250px"></Column> <Column field="name" header="Name" expander style="width: 250px"></Column>
<Column field="size" header="Size" style="width: 250px"></Column> <Column field="size" header="Size" style="width: 250px"></Column>
<Column field="type" header="Type 2" style="width: 250px"></Column> <Column field="type" header="Type 2" style="width: 250px"></Column>
@ -24,7 +24,7 @@ export default {
nodes: null, nodes: null,
code: { code: {
basic: ` basic: `
<TreeTable :value="nodes" scrollable scrollHeight="200px" scrollDirection="both"> <TreeTable :value="nodes" scrollable scrollHeight="300px" scrollDirection="both">
<Column field="name" header="Name" expander style="width: 250px"></Column> <Column field="name" header="Name" expander style="width: 250px"></Column>
<Column field="size" header="Size" style="width: 250px"></Column> <Column field="size" header="Size" style="width: 250px"></Column>
<Column field="type" header="Type 2" style="width: 250px"></Column> <Column field="type" header="Type 2" style="width: 250px"></Column>
@ -36,7 +36,7 @@ export default {
options: ` options: `
<template> <template>
<div class="card"> <div class="card">
<TreeTable :value="nodes" scrollable scrollHeight="200px" scrollDirection="both"> <TreeTable :value="nodes" scrollable scrollHeight="300px" scrollDirection="both">
<Column field="name" header="Name" expander style="width: 250px"></Column> <Column field="name" header="Name" expander style="width: 250px"></Column>
<Column field="size" header="Size" style="width: 250px"></Column> <Column field="size" header="Size" style="width: 250px"></Column>
<Column field="type" header="Type 2" style="width: 250px"></Column> <Column field="type" header="Type 2" style="width: 250px"></Column>
@ -65,7 +65,7 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card"> <div class="card">
<TreeTable :value="nodes" scrollable scrollHeight="200px" scrollDirection="both"> <TreeTable :value="nodes" scrollable scrollHeight="300px" scrollDirection="both">
<Column field="name" header="Name" expander style="width: 250px"></Column> <Column field="name" header="Name" expander style="width: 250px"></Column>
<Column field="size" header="Size" style="width: 250px"></Column> <Column field="size" header="Size" style="width: 250px"></Column>
<Column field="type" header="Type 2" style="width: 250px"></Column> <Column field="type" header="Type 2" style="width: 250px"></Column>

View File

@ -3,7 +3,7 @@
<p>Adding <i>scrollable</i> property along with a <i>scrollHeight</i> for the data viewport enables vertical scrolling with fixed headers.</p> <p>Adding <i>scrollable</i> property along with a <i>scrollHeight</i> for the data viewport enables vertical scrolling with fixed headers.</p>
</DocSectionText> </DocSectionText>
<div class="card"> <div class="card">
<TreeTable :value="nodes" scrollable scrollHeight="200px"> <TreeTable :value="nodes" scrollable scrollHeight="270px">
<Column field="name" header="Name" expander></Column> <Column field="name" header="Name" expander></Column>
<Column field="size" header="Size"></Column> <Column field="size" header="Size"></Column>
<Column field="type" header="Type"></Column> <Column field="type" header="Type"></Column>
@ -21,7 +21,7 @@ export default {
nodes: null, nodes: null,
code: { code: {
basic: ` basic: `
<TreeTable :value="nodes" scrollable scrollHeight="200px"> <TreeTable :value="nodes" scrollable scrollHeight="270px">
<Column field="name" header="Name" expander></Column> <Column field="name" header="Name" expander></Column>
<Column field="size" header="Size"></Column> <Column field="size" header="Size"></Column>
<Column field="type" header="Type"></Column> <Column field="type" header="Type"></Column>
@ -30,7 +30,7 @@ export default {
options: ` options: `
<template> <template>
<div class="card"> <div class="card">
<TreeTable :value="nodes" scrollable scrollHeight="200px"> <TreeTable :value="nodes" scrollable scrollHeight="270px">
<Column field="name" header="Name" expander></Column> <Column field="name" header="Name" expander></Column>
<Column field="size" header="Size"></Column> <Column field="size" header="Size"></Column>
<Column field="type" header="Type"></Column> <Column field="type" header="Type"></Column>
@ -56,7 +56,7 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card"> <div class="card">
<TreeTable :value="nodes" scrollable scrollHeight="200px"> <TreeTable :value="nodes" scrollable scrollHeight="270px">
<Column field="name" header="Name" expander></Column> <Column field="name" header="Name" expander></Column>
<Column field="size" header="Size"></Column> <Column field="size" header="Size"></Column>
<Column field="type" header="Type"></Column> <Column field="type" header="Type"></Column>