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

Refactor #3965 - Update CascadeSelect and Breadcrumb

pull/4008/head
mertsincan 2023-05-30 10:59:17 +01:00
parent 698431db44
commit a556b46e48
8 changed files with 65 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
components/lib/basecomponent/BaseComponent.vue
View File

@ -27,6 +27,19 @@ export default {
default: undefined
}
},
inject: {
$parentInstance: {
default: undefined
}
},
watch: {
isUnstyled: {
immediate: true,
handler(newValue) {
!newValue && this.$options.css && this.$css.loadStyle();
}
}
},
methods: {
_getOptionValue(options, key = '', params = {}) {
const fKeys = ObjectUtils.convertToFlatCase(key).split('.');
@ -61,16 +74,12 @@ export default {
return this._getPTValue(obj, key, params);
},
cx(key = '', params = {}) {
return !this.isUnstyled ? this._getOptionValue(this.$options.css && this.$options.css.classes, key, { instance: this, props: this.$props, state: this.$data, ...params }) : undefined;
},
cxo(obj = {}, key = '', params = {}) {
// @todo
return !this.isUnstyled ? this._getOptionValue(obj.css && obj.css.classes, key, { instance: obj, props: obj && obj.props, state: obj && obj.data, ...params }) : undefined;
return !this.isUnstyled ? this._getOptionValue(this.$css.classes, key, { instance: this, props: this.$props, state: this.$data, parentInstance: this.$parentInstance, ...params }) : undefined;
},
sx(key = '', when = true, params = {}) {
if (when) {
const self = this._getOptionValue(this.$options.css && this.$options.css.inlineStyles, key, { instance: this, props: this.$props, state: this.$data, ...params });
const base = this._getOptionValue(inlineStyles, key, { instance: this, props: this.$props, state: this.$data, ...params });
const self = this._getOptionValue(this.$css.inlineStyles, key, { instance: this, props: this.$props, state: this.$data, parentInstance: this.$parentInstance, ...params });
const base = this._getOptionValue(inlineStyles, key, { instance: this, props: this.$props, state: this.$data, parentInstance: this.$parentInstance, ...params });
return [base, self];
}
@ -80,13 +89,13 @@ export default {
},
computed: {
defaultPT() {
return this._getOptionValue(this.$primevue.config.pt, this.$.type.name, this.defaultsParams);
},
defaultsParams() {
return { instance: this };
return this._getOptionValue(this.$primevue.config.pt, this.$.type.name, { instance: this });
},
isUnstyled() {
return this.unstyled !== undefined ? this.unstyled : this.$primevue.config.unstyled;
},
$css() {
return { classes: undefined, inlineStyles: undefined, loadStyle: () => {}, ...(this.$parentInstance || {}).$css, ...this.$options.css };
}
}
};

22
components/lib/breadcrumb/BaseBreadcrumb.vue
View File

@ -41,19 +41,19 @@ const classes = {
menu: 'p-breadcrumb-list',
home: 'p-breadcrumb-home',
separator: 'p-menuitem-separator',
menuitem: ({ context }) => ['p-menuitem', { 'p-disabled': context.disabled() }],
action: ({ context, isActive, isExactActive }) => [
menuitem: ({ instance }) => ['p-menuitem', { 'p-disabled': instance.disabled() }],
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_breadcrumb_style', manual: true });
const { load: loadStyle } = useStyle(styles, { id: 'primevue_breadcrumb_style', manual: true });
export default {
name: 'BaseBreadcrumb',
@ -73,15 +73,13 @@ export default {
}
},
css: {
classes
classes,
loadStyle
},
watch: {
isUnstyled: {
immediate: true,
handler(newValue) {
!newValue && loadStyle();
}
}
provide() {
return {
$parentInstance: this
};
}
};
</script>

28
components/lib/breadcrumb/BreadcrumbItem.vue
View File

@ -1,17 +1,17 @@
<template>
<li v-if="visible()" :class="[getCXOptions('menuitem'), item.class]" v-bind="ptm('menuitem')">
<li v-if="visible()" :class="[cx('menuitem'), item.class]" v-bind="ptm('menuitem')">
<template v-if="!templates || !templates.item">
<router-link v-if="item.to" v-slot="{ navigate, href, isActive, isExactActive }" :to="item.to" custom>
<a :href="href" :class="getCXOptions('action', { isActive, isExactActive })" :aria-current="isCurrentUrl()" @click="onClick($event, navigate)" v-bind="ptm('action')">
<component v-if="templates.itemicon" :is="templates.itemicon" :item="item" :class="getCXOptions('icon')" />
<span v-else-if="item.icon" :class="[getCXOptions('icon'), item.icon]" v-bind="ptm('icon')" />
<span v-if="item.label" :class="getCXOptions('label')" v-bind="ptm('label')">{{ label() }}</span>
<a :href="href" :class="cx('action', { isActive, isExactActive })" :aria-current="isCurrentUrl()" @click="onClick($event, navigate)" v-bind="ptm('action')">
<component v-if="templates.itemicon" :is="templates.itemicon" :item="item" :class="cx('icon')" />
<span v-else-if="item.icon" :class="[cx('icon'), item.icon]" v-bind="ptm('icon')" />
<span v-if="item.label" :class="cx('label')" v-bind="ptm('label')">{{ label() }}</span>
</a>
</router-link>
<a v-else :href="item.url || '#'" :class="getCXOptions('action')" :target="item.target" :aria-current="isCurrentUrl()" @click="onClick" v-bind="ptm('action')">
<component v-if="templates && templates.itemicon" :is="templates.itemicon" :item="item" :class="getCXOptions('icon')" />
<span v-else-if="item.icon" :class="[getCXOptions('icon'), item.icon]" v-bind="ptm('icon')" />
<span v-if="item.label" :class="getCXOptions('label')" v-bind="ptm('label')">{{ label() }}</span>
<a v-else :href="item.url || '#'" :class="cx('action')" :target="item.target" :aria-current="isCurrentUrl()" @click="onClick" v-bind="ptm('action')">
<component v-if="templates && templates.itemicon" :is="templates.itemicon" :item="item" :class="cx('icon')" />
<span v-else-if="item.icon" :class="[cx('icon'), item.icon]" v-bind="ptm('icon')" />
<span v-if="item.label" :class="cx('label')" v-bind="ptm('label')">{{ label() }}</span>
</a>
</template>
<component v-else :is="templates.item" :item="item"></component>
@ -19,11 +19,11 @@
</template>
<script>
import BaseBreadcrumb from './BaseBreadcrumb.vue';
import BaseComponent from 'primevue/basecomponent';
export default {
name: 'BreadcrumbItem',
extends: BaseBreadcrumb,
extends: BaseComponent,
props: {
item: null,
templates: null,
@ -31,12 +31,6 @@ export default {
index: null
},
methods: {
getCXOptions(key, params) {
return this.cx(key, {
...params,
context: this
});
},
onClick(event, navigate) {
if (this.item.command) {
this.item.command({

26
components/lib/cascadeselect/BaseCascadeSelect.vue
View File

@ -122,13 +122,13 @@ const classes = {
wrapper: 'p-cascadeselect-items-wrapper',
hiddenSelectedMessage: 'p-hidden-accessible',
list: 'p-cascadeselect-panel p-cascadeselect-items',
item: ({ context, processedOption }) => [
item: ({ instance, processedOption }) => [
'p-cascadeselect-item',
{
'p-cascadeselect-item-group': context.isOptionGroup(processedOption),
'p-cascadeselect-item-active p-highlight': context.isOptionActive(processedOption),
'p-focus': context.isOptionFocused(processedOption),
'p-disabled': context.isOptionDisabled(processedOption)
'p-cascadeselect-item-group': instance.isOptionGroup(processedOption),
'p-cascadeselect-item-active p-highlight': instance.isOptionActive(processedOption),
'p-focus': instance.isOptionFocused(processedOption),
'p-disabled': instance.isOptionDisabled(processedOption)
}
],
content: 'p-cascadeselect-item-content',
@ -137,7 +137,7 @@ const classes = {
sublist: 'p-cascadeselect-sublist'
};
const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_cascadeselect_style', manual: true });
const { load: loadStyle } = useStyle(styles, { id: 'primevue_cascadeselect_style', manual: true });
export default {
name: 'BaseCascadeSelect',
@ -248,15 +248,13 @@ export default {
},
css: {
classes,
inlineStyles
inlineStyles,
loadStyle
},
watch: {
isUnstyled: {
immediate: true,
handler(newValue) {
!newValue && loadStyle();
}
}
provide() {
return {
$parentInstance: this
};
}
};
</script>

12
components/lib/cascadeselect/CascadeSelectSub.vue
View File

@ -3,7 +3,7 @@
<template v-for="(processedOption, index) of options" :key="getOptionLabelToRender(processedOption)">
<li
:id="getOptionId(processedOption)"
:class="getCXOptions('item', { processedOption })"
:class="cx('item', { processedOption })"
role="treeitem"
:aria-label="getOptionLabelToRender(processedOption)"
:aria-selected="isOptionGroup(processedOption) ? undefined : isOptionSelected(processedOption)"
@ -51,14 +51,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 BaseCascadeSelect from './BaseCascadeSelect.vue';
export default {
name: 'CascadeSelectSub',
extends: BaseCascadeSelect,
extends: BaseComponent,
emits: ['option-change'],
props: {
selectId: String,
@ -129,12 +129,6 @@ export default {
if (parseInt(containerOffset.left, 10) + itemOuterWidth + sublistWidth > viewport.width - DomHandler.calculateScrollbarWidth()) {
this.$el.style.left = '-100%';
}
},
getCXOptions(key, params) {
return this.cx(key, {
...params,
context: this
});
}
},
directives: {

16
components/lib/panel/BasePanel.vue
View File

@ -40,7 +40,7 @@ const classes = {
footer: 'p-panel-footer'
};
const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_panel_style', manual: true });
const { load: loadStyle } = useStyle(styles, { id: 'primevue_panel_style', manual: true });
export default {
name: 'BasePanel',
@ -55,15 +55,13 @@ export default {
}
},
css: {
classes
classes,
loadStyle
},
watch: {
isUnstyled: {
immediate: true,
handler(newValue) {
!newValue && loadStyle();
}
}
provide() {
return {
$parentInstance: this
};
}
};
</script>

2
components/lib/toast/ToastMessage.vue
View File

@ -19,13 +19,13 @@
</template>
<script>
import BaseToast from './BaseToast.vue';
import CheckIcon from 'primevue/icons/check';
import ExclamationTriangleIcon from 'primevue/icons/exclamationtriangle';
import InfoCircleIcon from 'primevue/icons/infocircle';
import TimesIcon from 'primevue/icons/times';
import TimesCircleIcon from 'primevue/icons/timescircle';
import Ripple from 'primevue/ripple';
import BaseToast from './BaseToast.vue';
export default {
name: 'ToastMessage',

2
components/lib/utils/DomHandler.js
View File

@ -623,7 +623,7 @@ export default {
parentNode === 'TEXTAREA' ||
parentNode === 'BUTTON' ||
parentNode === 'A' ||
!!element.closest('.p-button, .p-checkbox, .p-radiobutton')
!!element.closest('.p-button, .p-checkbox, .p-radiobutton') // @todo Add [data-pc-section="button"]
);
}