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

Refactor #3965 - Update Base components

pull/4011/head
Tuğçe Küçükoğlu 2023-05-30 14:06:57 +03:00
parent b6ec58de65
commit 751295c755
27 changed files with 279 additions and 377 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
components/lib/contextmenu/BaseContextMenu.vue
View File

@ -54,20 +54,20 @@ const classes = {
}
],
menu: 'p-contextmenu-root-list',
menuitem: ({ context, processedItem }) => [
menuitem: ({ instance, processedItem }) => [
'p-menuitem',
{
'p-menuitem-active p-highlight': context.isItemActive(processedItem),
'p-focus': context.isItemFocused(processedItem),
'p-disabled': context.isItemDisabled(processedItem)
'p-menuitem-active p-highlight': instance.isItemActive(processedItem),
'p-focus': instance.isItemFocused(processedItem),
'p-disabled': instance.isItemDisabled(processedItem)
}
],
content: 'p-menuitem-content',
action: ({ context, isActive, isExactActive }) => [
action: ({ instance, isActive, isExactActive }) => [
'p-menuitem-link',
{
'router-link-active': isActive,
'router-link-active-exact': context.exact && isExactActive
'router-link-active-exact': instance.exact && isExactActive
}
],
icon: 'p-menuitem-icon',
@ -77,7 +77,7 @@ const classes = {
separator: 'p-menuitem-separator'
};
const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_contextmenu_style', manual: true });
const { load: loadStyle } = useStyle(styles, { id: 'primevue_contextmenu_style', manual: true });
export default {
name: 'BaseContextMenu',
@ -121,15 +121,13 @@ export default {
}
},
css: {
classes
classes,
loadStyle
},
watch: {
isUnstyled: {
immediate: true,
handler(newValue) {
!newValue && loadStyle();
}
}
provide() {
return {
$parentInstance: this
};
}
};
</script>

38
components/lib/contextmenu/ContextMenuSub.vue
View File

@ -6,7 +6,7 @@
v-if="isItemVisible(processedItem) && !getItemProp(processedItem, 'separator')"
:id="getItemId(processedItem)"
:style="getItemProp(processedItem, 'style')"
:class="[getCXOptions('menuitem', { processedItem }), getItemProp(processedItem, 'class')]"
:class="[cx('menuitem', { processedItem }), getItemProp(processedItem, 'class')]"
role="menuitem"
:aria-label="getItemLabel(processedItem)"
:aria-disabled="isItemDisabled(processedItem) || undefined"
@ -20,22 +20,22 @@
:data-p-focused="isItemFocused(processedItem)"
:data-p-disabled="isItemDisabled(processedItem)"
>
<div :class="getCXOptions('content')" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)" v-bind="getPTOptions(processedItem, 'content')">
<div :class="cx('content')" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)" v-bind="getPTOptions(processedItem, 'content')">
<template v-if="!templates.item">
<router-link v-if="getItemProp(processedItem, 'to') && !isItemDisabled(processedItem)" v-slot="{ navigate, href, isActive, isExactActive }" :to="getItemProp(processedItem, 'to')" custom>
<a v-ripple :href="href" :class="getCXOptions('action', { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)" v-bind="getPTOptions(processedItem, 'action')">
<component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[getCXOptions('icon'), getItemProp(processedItem, 'icon')]" />
<span v-else-if="getItemProp(processedItem, 'icon')" :class="[getCXOptions('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, 'icon')" />
<span :class="getCXOptions('label')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
<a v-ripple :href="href" :class="cx('action', { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)" v-bind="getPTOptions(processedItem, 'action')">
<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, 'icon')" />
<span :class="cx('label')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
</a>
</router-link>
<a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="getCXOptions('action')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions(processedItem, 'action')">
<component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[getCXOptions('icon'), getItemProp(processedItem, 'icon')]" />
<span v-else-if="getItemProp(processedItem, 'icon')" :class="[getCXOptions('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, 'icon')" />
<span :class="getCXOptions('label')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
<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, 'action')">
<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, 'icon')" />
<span :class="cx('label')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
<template v-if="getItemProp(processedItem, 'items')">
<component v-if="templates.submenuicon" :is="templates.submenuicon" :active="isItemActive(processedItem)" :class="getCXOptions('submenuIcon')" />
<AngleRightIcon v-else :class="getCXOptions('submenuIcon')" v-bind="getPTOptions(processedItem, 'submenuicon')" />
<component v-if="templates.submenuicon" :is="templates.submenuicon" :active="isItemActive(processedItem)" :class="cx('submenuIcon')" />
<AngleRightIcon v-else :class="cx('submenuIcon')" v-bind="getPTOptions(processedItem, 'submenuicon')" />
</template>
</a>
</template>
@ -45,7 +45,7 @@
v-if="isItemVisible(processedItem) && isItemGroup(processedItem)"
:id="getItemId(processedItem) + '_list'"
role="menu"
:class="getCXOptions('submenu')"
:class="cx('submenu')"
:menuId="menuId"
:focusedItemId="focusedItemId"
:items="processedItem.items"
@ -64,7 +64,7 @@
v-if="isItemVisible(processedItem) && getItemProp(processedItem, 'separator')"
:id="getItemId(processedItem)"
:style="getItemProp(processedItem, 'style')"
:class="[getCXOptions('separator'), getItemProp(processedItem, 'class')]"
:class="[cx('separator'), getItemProp(processedItem, 'class')]"
role="separator"
v-bind="ptm('separator')"
></li>
@ -74,14 +74,14 @@
</template>
<script>
import BaseComponent from 'primevue/basecomponent';
import AngleRightIcon from 'primevue/icons/angleright';
import Ripple from 'primevue/ripple';
import { DomHandler, ObjectUtils } from 'primevue/utils';
import BaseContextMenu from './BaseContextMenu.vue';
export default {
name: 'ContextMenuSub',
extends: BaseContextMenu,
extends: BaseComponent,
emits: ['item-click', 'item-mouseenter'],
props: {
items: {
@ -146,12 +146,6 @@ export default {
}
});
},
getCXOptions(key, params) {
return this.cx(key, {
...params,
context: this
});
},
isItemActive(processedItem) {
return this.activeItemPath.some((path) => path.key === processedItem.key);
},

16
components/lib/editor/BaseEditor.vue
View File

@ -970,7 +970,7 @@ const classes = {
content: 'p-editor-content'
};
const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_editor_style', manual: true });
const { load: loadStyle } = useStyle(styles, { id: 'primevue_editor_style', manual: true });
export default {
name: 'BaseEditor',
@ -984,15 +984,13 @@ export default {
modules: null
},
css: {
classes
classes,
loadStyle
},
watch: {
isUnstyled: {
immediate: true,
handler(newValue) {
!newValue && loadStyle();
}
}
provide() {
return {
$parentInstance: this
};
}
};
</script>

16
components/lib/inputnumber/BaseInputNumber.vue
View File

@ -132,7 +132,7 @@ const classes = {
]
};
const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_inputnumber_style', manual: true });
const { load: loadStyle } = useStyle(styles, { id: 'primevue_inputnumber_style', manual: true });
export default {
name: 'BaseInputNumber',
@ -276,15 +276,13 @@ export default {
}
},
css: {
classes
classes,
loadStyle
},
watch: {
isUnstyled: {
immediate: true,
handler(newValue) {
!newValue && loadStyle();
}
}
provide() {
return {
$parentInstance: this
};
}
};
</script>

16
components/lib/inputswitch/BaseInputSwitch.vue
View File

@ -41,7 +41,7 @@ const classes = {
slider: 'p-inputswitch-slider'
};
const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_inputswitch_style', manual: true });
const { load: loadStyle } = useStyle(styles, { id: 'primevue_inputswitch_style', manual: true });
export default {
name: 'BaseInputSwitch',
@ -90,15 +90,13 @@ export default {
},
css: {
classes,
inlineStyles
inlineStyles,
loadStyle
},
watch: {
isUnstyled: {
immediate: true,
handler(newValue) {
!newValue && loadStyle();
}
}
provide() {
return {
$parentInstance: this
};
}
};
</script>

16
components/lib/inputtext/BaseInputText.vue
View File

@ -116,7 +116,7 @@ const classes = {
root: ({ instance }) => ['p-inputtext p-component', { 'p-filled': instance.filled }]
};
const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_inputtext_style', manual: true });
const { load: loadStyle } = useStyle(styles, { id: 'primevue_inputtext_style', manual: true });
export default {
name: 'BaseInputText',
@ -125,15 +125,13 @@ export default {
modelValue: null
},
css: {
classes
classes,
loadStyle
},
watch: {
isUnstyled: {
immediate: true,
handler(newValue) {
!newValue && loadStyle();
}
}
provide() {
return {
$parentInstance: this
};
}
};
</script>

16
components/lib/knob/BaseKnob.vue
View File

@ -30,7 +30,7 @@ const classes = {
label: 'p-knob-text'
};
const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_knob_style', manual: true });
const { load: loadStyle } = useStyle(styles, { id: 'primevue_knob_style', manual: true });
export default {
name: 'BaseKnob',
@ -102,15 +102,13 @@ export default {
}
},
css: {
classes
classes,
loadStyle
},
watch: {
isUnstyled: {
immediate: true,
handler(newValue) {
!newValue && loadStyle();
}
}
provide() {
return {
$parentInstance: this
};
}
};
</script>

16
components/lib/listbox/BaseListbox.vue
View File

@ -69,7 +69,7 @@ const classes = {
hiddenLastFocusableEl: 'p-hidden-accessible p-hidden-focusable'
};
const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_listbox_style', manual: true });
const { load: loadStyle } = useStyle(styles, { id: 'primevue_listbox_style', manual: true });
export default {
name: 'BaseListbox',
@ -149,15 +149,13 @@ export default {
}
},
css: {
classes
classes,
loadStyle
},
watch: {
isUnstyled: {
immediate: true,
handler(newValue) {
!newValue && loadStyle();
}
}
provide() {
return {
$parentInstance: this
};
}
};
</script>

38
components/lib/megamenu/BaseMegaMenu.vue
View File

@ -116,7 +116,7 @@ const styles = `
`;
const inlineStyles = {
submenu: ({ context, processedItem }) => ({ display: context.isItemActive(processedItem) ? 'block' : 'none' })
submenu: ({ instance, processedItem }) => ({ display: instance.isItemActive(processedItem) ? 'block' : 'none' })
};
const classes = {
@ -129,26 +129,26 @@ const classes = {
],
start: 'p-megamenu-start',
menu: 'p-megamenu-root-list',
submenuHeader: ({ context, processedItem }) => [
submenuHeader: ({ instance, processedItem }) => [
'p-megamenu-submenu-header p-submenu-header',
{
'p-disabled': context.isItemDisabled(processedItem)
'p-disabled': instance.isItemDisabled(processedItem)
}
],
menuitem: ({ context, processedItem }) => [
menuitem: ({ instance, processedItem }) => [
'p-menuitem',
{
'p-menuitem-active p-highlight': context.isItemActive(processedItem),
'p-focus': context.isItemFocused(processedItem),
'p-disabled': context.isItemDisabled(processedItem)
'p-menuitem-active p-highlight': instance.isItemActive(processedItem),
'p-focus': instance.isItemFocused(processedItem),
'p-disabled': instance.isItemDisabled(processedItem)
}
],
content: 'p-menuitem-content',
action: ({ context, isActive, isExactActive }) => [
action: ({ instance, isActive, isExactActive }) => [
'p-menuitem-link',
{
'router-link-active': isActive,
'router-link-active-exact': context.exact && isExactActive
'router-link-active-exact': instance.exact && isExactActive
}
],
icon: 'p-menuitem-icon',
@ -156,8 +156,8 @@ const classes = {
submenuIcon: 'p-submenu-icon',
panel: 'p-megamenu-panel',
grid: 'p-megamenu-grid',
column: ({ context, processedItem }) => {
let length = context.isItemGroup(processedItem) ? processedItem.items.length : 0;
column: ({ instance, processedItem }) => {
let length = instance.isItemGroup(processedItem) ? processedItem.items.length : 0;
let columnClass;
switch (length) {
@ -189,7 +189,7 @@ const classes = {
end: 'p-megamenu-end'
};
const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_megamenu_style', manual: true });
const { load: loadStyle } = useStyle(styles, { id: 'primevue_megamenu_style', manual: true });
export default {
name: 'BaseMegaMenu',
@ -226,15 +226,13 @@ export default {
},
css: {
classes,
inlineStyles
inlineStyles,
loadStyle
},
watch: {
isUnstyled: {
immediate: true,
handler(newValue) {
!newValue && loadStyle();
}
}
provide() {
return {
$parentInstance: this
};
}
};
</script>

54
components/lib/megamenu/MegaMenuSub.vue
View File

@ -1,12 +1,12 @@
<template>
<ul :class="level === 0 ? getCXOptions('menu') : getCXOptions('submenu')" :tabindex="tabindex" v-bind="level === 0 ? ptm('menu') : ptm('submenu')">
<li v-if="submenu" :class="[getCXOptions('submenuHeader', { submenu }), getItemProp(submenu, 'class')]" :style="getItemProp(submenu, 'style')" role="presentation" v-bind="ptm('submenuHeader')">{{ getItemLabel(submenu) }}</li>
<ul :class="level === 0 ? cx('menu') : cx('submenu')" :tabindex="tabindex" v-bind="level === 0 ? ptm('menu') : ptm('submenu')">
<li v-if="submenu" :class="[cx('submenuHeader', { submenu }), getItemProp(submenu, 'class')]" :style="getItemProp(submenu, 'style')" role="presentation" v-bind="ptm('submenuHeader')">{{ getItemLabel(submenu) }}</li>
<template v-for="(processedItem, index) of items" :key="getItemKey(processedItem)">
<li
v-if="isItemVisible(processedItem) && !getItemProp(processedItem, 'separator')"
:id="getItemId(processedItem)"
:style="getItemProp(processedItem, 'style')"
:class="[getCXOptions('menuitem', { processedItem }), getItemProp(processedItem, 'class')]"
:class="[cx('menuitem', { processedItem }), getItemProp(processedItem, 'class')]"
role="menuitem"
:aria-label="getItemLabel(processedItem)"
:aria-disabled="isItemDisabled(processedItem) || undefined"
@ -20,35 +20,35 @@
:data-p-focused="isItemFocused(processedItem)"
:data-p-disabled="isItemDisabled(processedItem)"
>
<div :class="getCXOptions('content')" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)" v-bind="getPTOptions(processedItem, 'content')">
<div :class="cx('content')" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)" v-bind="getPTOptions(processedItem, 'content')">
<template v-if="!templates.item">
<router-link v-if="getItemProp(processedItem, 'to') && !isItemDisabled(processedItem)" v-slot="{ navigate, href, isActive, isExactActive }" :to="getItemProp(processedItem, 'to')" custom>
<a v-ripple :href="href" :class="getCXOptions('action', { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)" v-bind="getPTOptions(processedItem, 'action')">
<component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[getCXOptions('icon'), getItemProp(processedItem, 'icon')]" />
<span v-else-if="getItemProp(processedItem, 'icon')" :class="[getCXOptions('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, 'icon')" />
<span :class="getCXOptions('text')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
<a v-ripple :href="href" :class="cx('action', { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)" v-bind="getPTOptions(processedItem, 'action')">
<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, 'icon')" />
<span :class="cx('text')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
</a>
</router-link>
<a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="getCXOptions('action')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions(processedItem, 'action')">
<component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[getCXOptions('icon'), getItemProp(processedItem, 'icon')]" />
<span v-else-if="getItemProp(processedItem, 'icon')" :class="[getCXOptions('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, 'icon')" />
<span :class="getCXOptions('text')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
<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, 'action')">
<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, 'icon')" />
<span :class="cx('text')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
<template v-if="isItemGroup(processedItem)">
<component v-if="templates.submenuicon" :is="templates.submenuicon" :active="isItemActive(processedItem)" :class="getCXOptions('submenuIcon')" v-bind="getPTOptions(processedItem, 'submenuIcon')" />
<component v-else :is="horizontal ? 'AngleDownIcon' : 'AngleRightIcon'" :class="getCXOptions('submenuIcon')" v-bind="getPTOptions(processedItem, 'submenuIcon')" />
<component v-if="templates.submenuicon" :is="templates.submenuicon" :active="isItemActive(processedItem)" :class="cx('submenuIcon')" v-bind="getPTOptions(processedItem, 'submenuIcon')" />
<component v-else :is="horizontal ? 'AngleDownIcon' : 'AngleRightIcon'" :class="cx('submenuIcon')" v-bind="getPTOptions(processedItem, 'submenuIcon')" />
</template>
</a>
</template>
<component v-else :is="templates.item" :item="processedItem.item"></component>
</div>
<div v-if="isItemVisible(processedItem) && isItemGroup(processedItem)" :class="getCXOptions('panel')" v-bind="ptm('panel')">
<div :class="getCXOptions('grid')" v-bind="ptm('grid')">
<div v-for="col of processedItem.items" :key="getItemKey(col)" :class="getCXOptions('column', { processedItem })" v-bind="ptm('column')">
<div v-if="isItemVisible(processedItem) && isItemGroup(processedItem)" :class="cx('panel')" v-bind="ptm('panel')">
<div :class="cx('grid')" v-bind="ptm('grid')">
<div v-for="col of processedItem.items" :key="getItemKey(col)" :class="cx('column', { processedItem })" v-bind="ptm('column')">
<MegaMenuSub
v-for="submenu of col"
:key="getSubListKey(submenu)"
:id="getSubListId(submenu)"
:style="getSXOptions('submenu', { processedItem })"
:style="sx('submenu', true, { processedItem })"
role="menu"
:menuId="menuId"
:focusedItemId="focusedItemId"
@ -68,7 +68,7 @@
<li
v-if="isItemVisible(processedItem) && getItemProp(processedItem, 'separator')"
:id="getItemId(processedItem)"
:class="[getCXOptions('separator'), getItemProp(processedItem, 'class')]"
:class="[cx('separator'), getItemProp(processedItem, 'class')]"
:style="getItemProp(processedItem, 'style')"
role="separator"
v-bind="ptm('separator')"
@ -78,15 +78,15 @@
</template>
<script>
import BaseComponent from 'primevue/basecomponent';
import AngleDownIcon from 'primevue/icons/angledown';
import AngleRightIcon from 'primevue/icons/angleright';
import Ripple from 'primevue/ripple';
import { ObjectUtils } from 'primevue/utils';
import BaseMegaMenu from './BaseMegaMenu.vue';
export default {
name: 'MegaMenuSub',
extends: BaseMegaMenu,
extends: BaseComponent,
emits: ['item-click', 'item-mouseenter'],
props: {
menuId: {
@ -157,18 +157,6 @@ export default {
}
});
},
getCXOptions(key, params) {
return this.cx(key, {
...params,
context: this
});
},
getSXOptions(key, params) {
return this.sx(key, true, {
...params,
context: this
});
},
isItemActive(processedItem) {
return ObjectUtils.isNotEmpty(this.activeItem) ? this.activeItem.key === processedItem.key : false;
},

26
components/lib/menu/BaseMenu.vue
View File

@ -37,26 +37,26 @@ const classes = {
submenuHeader: 'p-submenu-header',
separator: 'p-menuitem-separator',
end: 'p-menu-end',
menuitem: ({ context }) => [
menuitem: ({ instance }) => [
'p-menuitem',
{
'p-focus': context.id === context.focusedOptionId,
'p-disabled': context.disabled()
'p-focus': instance.id === instance.focusedOptionId,
'p-disabled': instance.disabled()
}
],
content: 'p-menuitem-content',
action: ({ context, isActive, isExactActive }) => [
action: ({ instance, isActive, isExactActive }) => [
'p-menuitem-link',
{
'router-link-active': isActive,
'router-link-active-exact': context.exact && isExactActive
'router-link-active-exact': instance.exact && isExactActive
}
],
icon: 'p-menuitem-icon',
label: 'p-menuitem-text'
};
const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_menu_style', manual: true });
const { load: loadStyle } = useStyle(styles, { id: 'primevue_menu_style', manual: true });
export default {
name: 'BaseMenu',
@ -100,15 +100,13 @@ export default {
}
},
css: {
classes
classes,
loadStyle
},
watch: {
isUnstyled: {
immediate: true,
handler(newValue) {
!newValue && loadStyle();
}
}
provide() {
return {
$parentInstance: this
};
}
};
</script>

30
components/lib/menu/Menuitem.vue
View File

@ -2,7 +2,7 @@
<li
v-if="visible()"
:id="id"
:class="[getCXOptions('menuitem'), item.class]"
:class="[cx('menuitem'), item.class]"
role="menuitem"
:style="item.style"
:aria-label="label()"
@ -11,19 +11,19 @@
:data-p-focused="isItemFocused()"
:data-p-disabled="disabled() || false"
>
<div :class="getCXOptions('content')" @click="onItemClick($event)" v-bind="getPTOptions('content')">
<div :class="cx('content')" @click="onItemClick($event)" v-bind="getPTOptions('content')">
<template v-if="!templates.item">
<router-link v-if="item.to && !disabled()" v-slot="{ navigate, href, isActive, isExactActive }" :to="item.to" custom>
<a v-ripple :href="href" :class="getCXOptions('action', { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)" v-bind="getPTOptions('action')">
<component v-if="templates.itemicon" :is="templates.itemicon" :item="item" :class="[getCXOptions('icon'), item.icon]" />
<span v-else-if="item.icon" :class="[getCXOptions('icon'), item.icon]" v-bind="getPTOptions('icon')" />
<span :class="getCXOptions('label')" v-bind="getPTOptions('label')">{{ label() }}</span>
<a v-ripple :href="href" :class="cx('action', { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)" v-bind="getPTOptions('action')">
<component v-if="templates.itemicon" :is="templates.itemicon" :item="item" :class="[cx('icon'), item.icon]" />
<span v-else-if="item.icon" :class="[cx('icon'), item.icon]" v-bind="getPTOptions('icon')" />
<span :class="cx('label')" v-bind="getPTOptions('label')">{{ label() }}</span>
</a>
</router-link>
<a v-else v-ripple :href="item.url" :class="getCXOptions('action')" :target="item.target" tabindex="-1" aria-hidden="true" v-bind="getPTOptions('action')">
<component v-if="templates.itemicon" :is="templates.itemicon" :item="item" :class="[getCXOptions('icon'), item.icon]" />
<span v-else-if="item.icon" :class="[getCXOptions('icon'), item.icon]" v-bind="getPTOptions('icon')" />
<span :class="getCXOptions('label')" v-bind="getPTOptions('label')">{{ label() }}</span>
<a v-else v-ripple :href="item.url" :class="cx('action')" :target="item.target" tabindex="-1" aria-hidden="true" v-bind="getPTOptions('action')">
<component v-if="templates.itemicon" :is="templates.itemicon" :item="item" :class="[cx('icon'), item.icon]" />
<span v-else-if="item.icon" :class="[cx('icon'), item.icon]" v-bind="getPTOptions('icon')" />
<span :class="cx('label')" v-bind="getPTOptions('label')">{{ label() }}</span>
</a>
</template>
<component v-else :is="templates.item" :item="item"></component>
@ -32,13 +32,13 @@
</template>
<script>
import BaseComponent from 'primevue/basecomponent';
import Ripple from 'primevue/ripple';
import { ObjectUtils } from 'primevue/utils';
import BaseMenu from './BaseMenu.vue';
export default {
name: 'Menuitem',
extends: BaseMenu,
extends: BaseComponent,
inheritAttrs: false,
emits: ['item-click'],
props: {
@ -59,12 +59,6 @@ export default {
}
});
},
getCXOptions(key, params) {
return this.cx(key, {
...params,
context: this
});
},
isItemFocused() {
return this.focusedOptionId === this.id;
},

30
components/lib/menubar/BaseMenubar.vue
View File

@ -77,7 +77,7 @@ const styles = `
`;
const inlineStyles = {
submenu: ({ context, processedItem }) => ({ display: context.isItemActive(processedItem) ? 'block' : 'none' })
submenu: ({ instance, processedItem }) => ({ display: instance.isItemActive(processedItem) ? 'block' : 'none' })
};
const classes = {
@ -90,20 +90,20 @@ const classes = {
start: 'p-menubar-start',
button: 'p-menubar-button',
menu: 'p-menubar-root-list',
menuitem: ({ context, processedItem }) => [
menuitem: ({ instance, processedItem }) => [
'p-menuitem',
{
'p-menuitem-active p-highlight': context.isItemActive(processedItem),
'p-focus': context.isItemFocused(processedItem),
'p-disabled': context.isItemDisabled(processedItem)
'p-menuitem-active p-highlight': instance.isItemActive(processedItem),
'p-focus': instance.isItemFocused(processedItem),
'p-disabled': instance.isItemDisabled(processedItem)
}
],
content: 'p-menuitem-content',
action: ({ context, isActive, isExactActive }) => [
action: ({ instance, isActive, isExactActive }) => [
'p-menuitem-link',
{
'router-link-active': isActive,
'router-link-active-exact': context.exact && isExactActive
'router-link-active-exact': instance.exact && isExactActive
}
],
icon: 'p-menuitem-icon',
@ -114,7 +114,7 @@ const classes = {
end: 'p-menubar-end'
};
const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_menubar_style', manual: true });
const { load: loadStyle } = useStyle(styles, { id: 'primevue_menubar_style', manual: true });
export default {
name: 'BaseMenubar',
@ -143,15 +143,13 @@ export default {
},
css: {
classes,
inlineStyles
inlineStyles,
loadStyle
},
watch: {
isUnstyled: {
immediate: true,
handler(newValue) {
!newValue && loadStyle();
}
}
provide() {
return {
$parentInstance: this
};
}
};
</script>

46
components/lib/menubar/MenubarSub.vue
View File

@ -1,11 +1,11 @@
<template>
<ul :class="level === 0 ? getCXOptions('menu') : getCXOptions('submenu')" v-bind="level === 0 ? ptm('menu') : ptm('submenu')">
<ul :class="level === 0 ? cx('menu') : cx('submenu')" v-bind="level === 0 ? ptm('menu') : ptm('submenu')">
<template v-for="(processedItem, index) of items" :key="getItemKey(processedItem)">
<li
v-if="isItemVisible(processedItem) && !getItemProp(processedItem, 'separator')"
:id="getItemId(processedItem)"
:style="getItemProp(processedItem, 'style')"
:class="[getCXOptions('menuitem', { processedItem }), getItemProp(processedItem, 'class')]"
:class="[cx('menuitem', { processedItem }), getItemProp(processedItem, 'class')]"
role="menuitem"
:aria-label="getItemLabel(processedItem)"
:aria-disabled="isItemDisabled(processedItem) || undefined"
@ -19,22 +19,22 @@
:data-p-focused="isItemFocused(processedItem)"
:data-p-disabled="isItemDisabled(processedItem)"
>
<div :class="getCXOptions('content')" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)" v-bind="getPTOptions(processedItem, 'content')">
<div :class="cx('content')" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)" v-bind="getPTOptions(processedItem, 'content')">
<template v-if="!templates.item">
<router-link v-if="getItemProp(processedItem, 'to') && !isItemDisabled(processedItem)" v-slot="{ navigate, href, isActive, isExactActive }" :to="getItemProp(processedItem, 'to')" custom>
<a v-ripple :href="href" :class="getCXOptions('action', { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)" v-bind="getPTOptions(processedItem, 'action')">
<component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[getCXOptions('icon'), getItemProp(processedItem, 'icon')]" />
<span v-else-if="getItemProp(processedItem, 'icon')" :class="[getCXOptions('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, 'icon')" />
<span :class="getCXOptions('label')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
<a v-ripple :href="href" :class="cx('action', { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)" v-bind="getPTOptions(processedItem, 'action')">
<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, 'icon')" />
<span :class="cx('label')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
</a>
</router-link>
<a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="getCXOptions('action')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions(processedItem, 'action')">
<component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[getCXOptions('icon'), getItemProp(processedItem, 'icon')]" />
<span v-else-if="getItemProp(processedItem, 'icon')" :class="[getCXOptions('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, 'icon')" />
<span :class="getCXOptions('label')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
<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, 'action')">
<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, 'icon')" />
<span :class="cx('label')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
<template v-if="getItemProp(processedItem, 'items')">
<component v-if="templates.submenuicon" :is="templates.submenuicon" :root="root" :active="isItemActive(processedItem)" :class="getCXOptions('submenuIcon')" />
<component v-else :is="root ? 'AngleDownIcon' : 'AngleRightIcon'" :class="getCXOptions('submenuIcon')" v-bind="getPTOptions(processedItem, 'submenuIcon')" />
<component v-if="templates.submenuicon" :is="templates.submenuicon" :root="root" :active="isItemActive(processedItem)" :class="cx('submenuIcon')" />
<component v-else :is="root ? 'AngleDownIcon' : 'AngleRightIcon'" :class="cx('submenuIcon')" v-bind="getPTOptions(processedItem, 'submenuIcon')" />
</template>
</a>
</template>
@ -44,7 +44,7 @@
v-if="isItemVisible(processedItem) && isItemGroup(processedItem)"
:menuId="menuId"
role="menu"
:style="getSXOptions('submenu', { processedItem })"
:style="sx('submenu', true, { processedItem })"
:focusedItemId="focusedItemId"
:items="processedItem.items"
:mobileActive="mobileActive"
@ -60,7 +60,7 @@
<li
v-if="isItemVisible(processedItem) && getItemProp(processedItem, 'separator')"
:id="getItemId(processedItem)"
:class="[getCXOptions('separator'), getItemProp(processedItem, 'class')]"
:class="[cx('separator'), getItemProp(processedItem, 'class')]"
:style="getItemProp(processedItem, 'style')"
role="separator"
v-bind="ptm('separator')"
@ -70,15 +70,15 @@
</template>
<script>
import BaseComponent from 'primevue/basecomponent';
import AngleDownIcon from 'primevue/icons/angledown';
import AngleRightIcon from 'primevue/icons/angleright';
import Ripple from 'primevue/ripple';
import { ObjectUtils } from 'primevue/utils';
import BaseMenubar from './BaseMenubar.vue';
export default {
name: 'MenubarSub',
extends: BaseMenubar,
extends: BaseComponent,
emits: ['item-mouseenter', 'item-click'],
props: {
items: {
@ -144,18 +144,6 @@ export default {
}
});
},
getCXOptions(key, params) {
return this.cx(key, {
...params,
context: this
});
},
getSXOptions(key, params) {
return this.sx(key, true, {
...params,
context: this
});
},
isItemActive(processedItem) {
return this.activeItemPath.some((path) => path.key === processedItem.key);
},

16
components/lib/multiselect/BaseMultiSelect.vue
View File

@ -192,7 +192,7 @@ const classes = {
hiddenLastFocusableEl: 'p-hidden-accessible p-hidden-focusable'
};
const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_multiselect_style', manual: true });
const { load: loadStyle } = useStyle(styles, { id: 'primevue_multiselect_style', manual: true });
export default {
name: 'BaseMultiSelect',
@ -358,15 +358,13 @@ export default {
},
css: {
classes,
inlineStyles
inlineStyles,
loadStyle
},
watch: {
isUnstyled: {
immediate: true,
handler(newValue) {
!newValue && loadStyle();
}
}
provide() {
return {
$parentInstance: this
};
}
};
</script>

26
components/lib/panelmenu/BasePanelMenu.vue
View File

@ -60,19 +60,19 @@ const classes = {
toggleableContent: 'p-toggleable-content',
menuContent: 'p-panelmenu-content',
menu: 'p-panelmenu-root-list',
menuitem: ({ context, processedItem }) => [
menuitem: ({ instance, processedItem }) => [
'p-menuitem',
{
'p-focus': context.isItemFocused(processedItem),
'p-disabled': context.isItemDisabled(processedItem)
'p-focus': instance.isItemFocused(processedItem),
'p-disabled': instance.isItemDisabled(processedItem)
}
],
content: 'p-menuitem-content',
action: ({ context, isActive, isExactActive }) => [
action: ({ instance, isActive, isExactActive }) => [
'p-menuitem-link',
{
'router-link-active': isActive,
'router-link-active-exact': context.exact && isExactActive
'router-link-active-exact': instance.exact && isExactActive
}
],
icon: 'p-menuitem-icon',
@ -82,7 +82,7 @@ const classes = {
separator: 'p-menuitem-separator'
};
const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_panelmenu_style', manual: true });
const { load: loadStyle } = useStyle(styles, { id: 'primevue_panelmenu_style', manual: true });
export default {
name: 'BasePanelMenu',
@ -106,15 +106,13 @@ export default {
}
},
css: {
classes
classes,
loadStyle
},
watch: {
isUnstyled: {
immediate: true,
handler(newValue) {
!newValue && loadStyle();
}
}
provide() {
return {
$parentInstance: this
};
}
};
</script>

12
components/lib/panelmenu/PanelMenuList.vue
View File

@ -1,7 +1,7 @@
<template>
<PanelMenuSub
:id="panelId + '_list'"
:class="getCXOptions('menu')"
:class="cx('menu')"
role="tree"
:tabindex="-1"
:aria-activedescendant="focused ? focusedItemId : undefined"
@ -21,13 +21,13 @@
</template>
<script>
import BaseComponent from 'primevue/basecomponent';
import { DomHandler, ObjectUtils } from 'primevue/utils';
import BasePanelMenu from './BasePanelMenu.vue';
import PanelMenuSub from './PanelMenuSub.vue';
export default {
name: 'PanelMenuList',
extends: BasePanelMenu,
extends: BaseComponent,
emits: ['item-toggle', 'header-focus'],
props: {
panelId: {
@ -75,12 +75,6 @@ export default {
getItemLabel(processedItem) {
return this.getItemProp(processedItem, 'label');
},
getCXOptions(key, params) {
return this.cx(key, {
...params,
context: this
});
},
isItemVisible(processedItem) {
return this.getItemProp(processedItem, 'visible') !== false;
},

40
components/lib/panelmenu/PanelMenuSub.vue
View File

@ -1,10 +1,10 @@
<template>
<ul :class="getCXOptions('submenu')" :tabindex="tabindex">
<ul :class="cx('submenu')" :tabindex="tabindex">
<template v-for="(processedItem, index) of items" :key="getItemKey(processedItem)">
<li
v-if="isItemVisible(processedItem) && !getItemProp(processedItem, 'separator')"
:id="getItemId(processedItem)"
:class="[getCXOptions('menuitem', { processedItem }), getItemProp(processedItem, 'class')]"
:class="[cx('menuitem', { processedItem }), getItemProp(processedItem, 'class')]"
:style="getItemProp(processedItem, 'style')"
role="treeitem"
:aria-label="getItemLabel(processedItem)"
@ -16,29 +16,29 @@
:data-p-focused="isItemFocused(processedItem)"
:data-p-disabled="isItemDisabled(processedItem)"
>
<div :class="getCXOptions('content')" @click="onItemClick($event, processedItem)" v-bind="getPTOptions(processedItem, 'content')">
<div :class="cx('content')" @click="onItemClick($event, processedItem)" v-bind="getPTOptions(processedItem, 'content')">
<template v-if="!templates.item">
<router-link v-if="getItemProp(processedItem, 'to') && !isItemDisabled(processedItem)" v-slot="{ navigate, href, isActive, isExactActive }" :to="getItemProp(processedItem, 'to')" custom>
<a v-ripple :href="href" :class="getCXOptions('action', { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)" v-bind="getPTOptions(processedItem, 'action')">
<component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[getCXOptions('icon'), getItemProp(processedItem, 'icon')]" />
<span v-else-if="getItemProp(processedItem, 'icon')" :class="[getCXOptions('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, 'icon')" />
<span :class="getCXOptions('label')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
<a v-ripple :href="href" :class="cx('action', { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)" v-bind="getPTOptions(processedItem, 'action')">
<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, 'icon')" />
<span :class="cx('label')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
</a>
</router-link>
<a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="getCXOptions('action')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions(processedItem, '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, 'action')">
<template v-if="isItemGroup(processedItem)">
<component v-if="templates.submenuicon" :is="templates.submenuicon" :class="getCXOptions('submenuIcon')" :active="isItemActive(processedItem)" v-bind="getPTOptions(processedItem, 'submenuIcon')" />
<component v-else :is="isItemActive(processedItem) ? 'ChevronDownIcon' : 'ChevronRightIcon'" :class="getCXOptions('submenuIcon')" v-bind="getPTOptions(processedItem, 'submenuIcon')" />
<component v-if="templates.submenuicon" :is="templates.submenuicon" :class="cx('submenuIcon')" :active="isItemActive(processedItem)" v-bind="getPTOptions(processedItem, 'submenuIcon')" />
<component v-else :is="isItemActive(processedItem) ? 'ChevronDownIcon' : 'ChevronRightIcon'" :class="cx('submenuIcon')" v-bind="getPTOptions(processedItem, 'submenuIcon')" />
</template>
<component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[getCXOptions('icon'), getItemProp(processedItem, 'icon')]" />
<span v-else-if="getItemProp(processedItem, 'icon')" :class="[getCXOptions('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, 'icon')" />
<span :class="getCXOptions('label')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
<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, 'icon')" />
<span :class="cx('label')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
</a>
</template>
<component v-else :is="templates.item" :item="processedItem.item"></component>
</div>
<transition name="p-toggleable-content">
<div v-show="isItemActive(processedItem)" :class="getCXOptions('toggleableContent')" v-bind="ptm('toggleableContent')">
<div v-show="isItemActive(processedItem)" :class="cx('toggleableContent')" v-bind="ptm('toggleableContent')">
<PanelMenuSub
v-if="isItemVisible(processedItem) && isItemGroup(processedItem)"
:id="getItemId(processedItem) + '_list'"
@ -60,7 +60,7 @@
<li
v-if="isItemVisible(processedItem) && getItemProp(processedItem, 'separator')"
:style="getItemProp(processedItem, 'style')"
:class="[getCXOptions('separator'), getItemProp(processedItem, 'class')]"
:class="[cx('separator'), getItemProp(processedItem, 'class')]"
role="separator"
v-bind="ptm('separator')"
></li>
@ -69,15 +69,15 @@
</template>
<script>
import BaseComponent from 'primevue/basecomponent';
import ChevronDownIcon from 'primevue/icons/chevrondown';
import ChevronRightIcon from 'primevue/icons/chevronright';
import Ripple from 'primevue/ripple';
import { ObjectUtils } from 'primevue/utils';
import BasePanelMenu from './BasePanelMenu.vue';
export default {
name: 'PanelMenuSub',
extends: BasePanelMenu,
extends: BaseComponent,
emits: ['item-toggle'],
props: {
panelId: {
@ -134,12 +134,6 @@ export default {
}
});
},
getCXOptions(key, params) {
return this.cx(key, {
...params,
context: this
});
},
isItemActive(processedItem) {
return this.activeItemPath.some((path) => path.key === processedItem.key);
},

16
components/lib/password/BasePassword.vue
View File

@ -63,7 +63,7 @@ const classes = {
info: 'p-password-info'
};
const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_password_style', manual: true });
const { load: loadStyle } = useStyle(styles, { id: 'primevue_password_style', manual: true });
export default {
name: 'BasePassword',
@ -169,15 +169,13 @@ export default {
},
css: {
classes,
inlineStyles
inlineStyles,
loadStyle
},
watch: {
isUnstyled: {
immediate: true,
handler(newValue) {
!newValue && loadStyle();
}
}
provide() {
return {
$parentInstance: this
};
}
};
</script>

16
components/lib/splitter/BaseSplitter.vue
View File

@ -60,7 +60,7 @@ const inlineStyles = {
root: ({ props }) => [{ display: 'flex', 'flex-wrap': 'nowrap' }, props.layout === 'vertical' ? { 'flex-direction': 'column' } : '']
};
const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_splitter_style', manual: true });
const { load: loadStyle } = useStyle(styles, { id: 'primevue_splitter_style', manual: true });
export default {
name: 'BaseSplitter',
@ -89,15 +89,13 @@ export default {
},
css: {
classes,
inlineStyles
inlineStyles,
loadStyle
},
watch: {
isUnstyled: {
immediate: true,
handler(newValue) {
!newValue && loadStyle();
}
}
provide() {
return {
$parentInstance: this
};
}
};
</script>

16
components/lib/splitterpanel/BaseSplitterPanel.vue
View File

@ -21,7 +21,7 @@ const classes = {
root: ({ instance }) => ['p-splitter-panel', { 'p-splitter-panel-nested': instance.isNested }]
};
const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_splitterpanel_style', manual: true });
const { load: loadStyle } = useStyle(styles, { id: 'primevue_splitterpanel_style', manual: true });
export default {
name: 'BaseSplitterPanel',
@ -37,15 +37,13 @@ export default {
}
},
css: {
classes
classes,
loadStyle
},
watch: {
isUnstyled: {
immediate: true,
handler(newValue) {
!newValue && loadStyle();
}
}
provide() {
return {
$parentInstance: this
};
}
};
</script>

16
components/lib/tabview/BaseTabView.vue
View File

@ -103,7 +103,7 @@ const classes = {
panelContainer: 'p-tabview-panels'
};
const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_tabview_style', manual: true });
const { load: loadStyle } = useStyle(styles, { id: 'primevue_tabview_style', manual: true });
export default {
name: 'BaseTabView',
@ -147,15 +147,13 @@ export default {
}
},
css: {
classes
classes,
loadStyle
},
watch: {
isUnstyled: {
immediate: true,
handler(newValue) {
!newValue && loadStyle();
}
}
provide() {
return {
$parentInstance: this
};
}
};
</script>

30
components/lib/tieredmenu/BaseTieredMenu.vue
View File

@ -45,7 +45,7 @@ const styles = `
`;
const inlineStyles = {
submenu: ({ context, processedItem }) => ({ display: context.isItemActive(processedItem) ? 'block' : 'none' })
submenu: ({ instance, processedItem }) => ({ display: instance.isItemActive(processedItem) ? 'block' : 'none' })
};
const classes = {
@ -58,20 +58,20 @@ const classes = {
}
],
menu: 'p-tieredmenu-root-list',
menuitem: ({ context, processedItem }) => [
menuitem: ({ instance, processedItem }) => [
'p-menuitem',
{
'p-menuitem-active p-highlight': context.isItemActive(processedItem),
'p-focus': context.isItemFocused(processedItem),
'p-disabled': context.isItemDisabled(processedItem)
'p-menuitem-active p-highlight': instance.isItemActive(processedItem),
'p-focus': instance.isItemFocused(processedItem),
'p-disabled': instance.isItemDisabled(processedItem)
}
],
content: 'p-menuitem-content',
action: ({ context, isActive, isExactActive }) => [
action: ({ instance, isActive, isExactActive }) => [
'p-menuitem-link',
{
'router-link-active': isActive,
'router-link-active-exact': context.exact && isExactActive
'router-link-active-exact': instance.exact && isExactActive
}
],
icon: 'p-menuitem-icon',
@ -81,7 +81,7 @@ const classes = {
separator: 'p-menuitem-separator'
};
const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_tieredmenu_style', manual: true });
const { load: loadStyle } = useStyle(styles, { id: 'primevue_tieredmenu_style', manual: true });
export default {
name: 'BaseTieredMenu',
@ -130,15 +130,13 @@ export default {
},
css: {
classes,
inlineStyles
inlineStyles,
loadStyle
},
watch: {
isUnstyled: {
immediate: true,
handler(newValue) {
!newValue && loadStyle();
}
}
provide() {
return {
$parentInstance: this
};
}
};
</script>

46
components/lib/tieredmenu/TieredMenuSub.vue
View File

@ -1,11 +1,11 @@
<template>
<ul :class="level === 0 ? getCXOptions('menu') : getCXOptions('submenu')" :tabindex="tabindex" v-bind="level === 0 ? ptm('menu') : ptm('submenu')">
<ul :class="level === 0 ? cx('menu') : cx('submenu')" :tabindex="tabindex" v-bind="level === 0 ? ptm('menu') : ptm('submenu')">
<template v-for="(processedItem, index) of items" :key="getItemKey(processedItem)">
<li
v-if="isItemVisible(processedItem) && !getItemProp(processedItem, 'separator')"
:id="getItemId(processedItem)"
:style="getItemProp(processedItem, 'style')"
:class="[getCXOptions('menuitem', { processedItem }), getItemProp(processedItem, 'class')]"
:class="[cx('menuitem', { processedItem }), getItemProp(processedItem, 'class')]"
role="menuitem"
:aria-label="getItemLabel(processedItem)"
:aria-disabled="isItemDisabled(processedItem) || undefined"
@ -19,22 +19,22 @@
:data-p-focused="isItemFocused(processedItem)"
:data-p-disabled="isItemDisabled(processedItem)"
>
<div :class="getCXOptions('content')" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)" v-bind="getPTOptions(processedItem, 'content')">
<div :class="cx('content')" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)" v-bind="getPTOptions(processedItem, 'content')">
<template v-if="!templates.item">
<router-link v-if="getItemProp(processedItem, 'to') && !isItemDisabled(processedItem)" v-slot="{ navigate, href, isActive, isExactActive }" :to="getItemProp(processedItem, 'to')" custom>
<a v-ripple :href="href" :class="getCXOptions('action', { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)" v-bind="getPTOptions(processedItem, 'action')">
<component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[getCXOptions('icon'), getItemProp(processedItem, 'icon')]" />
<span v-else-if="getItemProp(processedItem, 'icon')" :class="[getCXOptions('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, 'icon')" />
<span :class="getCXOptions('label')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
<a v-ripple :href="href" :class="cx('action', { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)" v-bind="getPTOptions(processedItem, 'action')">
<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, 'icon')" />
<span :class="cx('label')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
</a>
</router-link>
<a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="getCXOptions('action')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions(processedItem, 'action')">
<component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[getCXOptions('icon'), getItemProp(processedItem, 'icon')]" />
<span v-else-if="getItemProp(processedItem, 'icon')" :class="[getCXOptions('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, 'icon')" />
<span :class="getCXOptions('label')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
<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, 'action')">
<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, 'icon')" />
<span :class="cx('label')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
<template v-if="getItemProp(processedItem, 'items')">
<component v-if="templates.submenuicon" :is="templates.submenuicon" :class="getCXOptions('submenuIcon')" :active="isItemActive(processedItem)" v-bind="getPTOptions(processedItem, 'submenuIcon')" />
<AngleRightIcon v-else :class="getCXOptions('submenuIcon')" v-bind="getPTOptions(processedItem, 'submenuIcon')" />
<component v-if="templates.submenuicon" :is="templates.submenuicon" :class="cx('submenuIcon')" :active="isItemActive(processedItem)" v-bind="getPTOptions(processedItem, 'submenuIcon')" />
<AngleRightIcon v-else :class="cx('submenuIcon')" v-bind="getPTOptions(processedItem, 'submenuIcon')" />
</template>
</a>
</template>
@ -43,7 +43,7 @@
<TieredMenuSub
v-if="isItemVisible(processedItem) && isItemGroup(processedItem)"
:id="getItemId(processedItem) + '_list'"
:style="getSXOptions('submenu', { processedItem })"
:style="sx('submenu', true, { processedItem })"
role="menu"
:menuId="menuId"
:focusedItemId="focusedItemId"
@ -61,7 +61,7 @@
v-if="isItemVisible(processedItem) && getItemProp(processedItem, 'separator')"
:id="getItemId(processedItem)"
:style="getItemProp(processedItem, 'style')"
:class="[getCXOptions('separator'), getItemProp(processedItem, 'class')]"
:class="[cx('separator'), getItemProp(processedItem, 'class')]"
role="separator"
v-bind="ptm('separator')"
></li>
@ -70,14 +70,14 @@
</template>
<script>
import BaseComponent from 'primevue/basecomponent';
import AngleRightIcon from 'primevue/icons/angleright';
import Ripple from 'primevue/ripple';
import { ObjectUtils } from 'primevue/utils';
import BaseTieredMenu from './BaseTieredMenu.vue';
export default {
name: 'TieredMenuSub',
extends: BaseTieredMenu,
extends: BaseComponent,
emits: ['item-click', 'item-mouseenter'],
props: {
menuId: {
@ -134,18 +134,6 @@ export default {
}
});
},
getCXOptions(key, params) {
return this.cx(key, {
...params,
context: this
});
},
getSXOptions(key, params) {
return this.sx(key, true, {
...params,
context: this
});
},
isItemActive(processedItem) {
return this.activeItemPath.some((path) => path.key === processedItem.key);
},

16
components/lib/tree/BaseTree.vue
View File

@ -127,7 +127,7 @@ const classes = {
subgroup: 'p-context-children'
};
const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_tree_style', manual: true });
const { load: loadStyle } = useStyle(styles, { id: 'primevue_tree_style', manual: true });
export default {
name: 'BaseTree',
@ -199,15 +199,13 @@ export default {
}
},
css: {
classes
classes,
loadStyle
},
watch: {
isUnstyled: {
immediate: true,
handler(newValue) {
!newValue && loadStyle();
}
}
provide() {
return {
$parentInstance: this
};
}
};
</script>

4
components/lib/tree/TreeNode.vue
View File

@ -53,17 +53,17 @@
</template>
<script>
import BaseComponent from 'primevue/basecomponent';
import CheckIcon from 'primevue/icons/check';
import ChevronDownIcon from 'primevue/icons/chevrondown';
import ChevronRightIcon from 'primevue/icons/chevronright';
import MinusIcon from 'primevue/icons/minus';
import Ripple from 'primevue/ripple';
import { DomHandler } from 'primevue/utils';
import BaseTree from './BaseTree.vue';
export default {
name: 'TreeNode',
extends: BaseTree,
extends: BaseComponent,
emits: ['node-toggle', 'node-click', 'checkbox-change'],
props: {
node: {

16
components/lib/treeselect/BaseTreeSelect.vue
View File

@ -94,7 +94,7 @@ const classes = {
emptyMessage: 'p-treeselect-empty-message'
};
const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_treeselect_style', manual: true });
const { load: loadStyle } = useStyle(styles, { id: 'primevue_treeselect_style', manual: true });
export default {
name: 'BaseTreeSelect',
@ -173,15 +173,13 @@ export default {
},
css: {
classes,
inlineStyles
inlineStyles,
loadStyle
},
watch: {
isUnstyled: {
immediate: true,
handler(newValue) {
!newValue && loadStyle();
}
}
provide() {
return {
$parentInstance: this
};
}
};
</script>