Merge branch 'master' of https://github.com/primefaces/primevue
commit
4d0b3645c8
|
@ -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.
|
||||||
*/
|
*/
|
||||||
|
|
|
@ -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')" />
|
||||||
|
|
|
@ -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'
|
||||||
};
|
};
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
`
|
`
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
@ -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: {
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
`
|
`
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue