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 default: undefined
} }
}, },
inject: {
$parentInstance: {
default: undefined
}
},
watch: {
isUnstyled: {
immediate: true,
handler(newValue) {
!newValue && this.$options.css && this.$css.loadStyle();
}
}
},
methods: { methods: {
_getOptionValue(options, key = '', params = {}) { _getOptionValue(options, key = '', params = {}) {
const fKeys = ObjectUtils.convertToFlatCase(key).split('.'); const fKeys = ObjectUtils.convertToFlatCase(key).split('.');
@ -61,16 +74,12 @@ export default {
return this._getPTValue(obj, key, params); return this._getPTValue(obj, key, params);
}, },
cx(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; return !this.isUnstyled ? this._getOptionValue(this.$css.classes, key, { instance: this, props: this.$props, state: this.$data, parentInstance: this.$parentInstance, ...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;
}, },
sx(key = '', when = true, params = {}) { sx(key = '', when = true, params = {}) {
if (when) { if (when) {
const self = this._getOptionValue(this.$options.css && this.$options.css.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, ...params }); const base = this._getOptionValue(inlineStyles, key, { instance: this, props: this.$props, state: this.$data, parentInstance: this.$parentInstance, ...params });
return [base, self]; return [base, self];
} }
@ -80,13 +89,13 @@ export default {
}, },
computed: { computed: {
defaultPT() { defaultPT() {
return this._getOptionValue(this.$primevue.config.pt, this.$.type.name, this.defaultsParams); return this._getOptionValue(this.$primevue.config.pt, this.$.type.name, { instance: this });
},
defaultsParams() {
return { instance: this };
}, },
isUnstyled() { isUnstyled() {
return this.unstyled !== undefined ? this.unstyled : this.$primevue.config.unstyled; 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', menu: 'p-breadcrumb-list',
home: 'p-breadcrumb-home', home: 'p-breadcrumb-home',
separator: 'p-menuitem-separator', separator: 'p-menuitem-separator',
menuitem: ({ context }) => ['p-menuitem', { 'p-disabled': context.disabled() }], menuitem: ({ instance }) => ['p-menuitem', { 'p-disabled': instance.disabled() }],
action: ({ context, isActive, isExactActive }) => [ action: ({ instance, isActive, isExactActive }) => [
'p-menuitem-link', 'p-menuitem-link',
{ {
'router-link-active': isActive, 'router-link-active': isActive,
'router-link-active-exact': context.exact && isExactActive 'router-link-active-exact': instance.exact && isExactActive
} }
], ],
icon: 'p-menuitem-icon', icon: 'p-menuitem-icon',
label: 'p-menuitem-text' 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 { export default {
name: 'BaseBreadcrumb', name: 'BaseBreadcrumb',
@ -73,15 +73,13 @@ export default {
} }
}, },
css: { css: {
classes classes,
loadStyle
}, },
watch: { provide() {
isUnstyled: { return {
immediate: true, $parentInstance: this
handler(newValue) { };
!newValue && loadStyle();
}
}
} }
}; };
</script> </script>

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

@ -1,17 +1,17 @@
<template> <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"> <template v-if="!templates || !templates.item">
<router-link v-if="item.to" v-slot="{ navigate, href, isActive, isExactActive }" :to="item.to" custom> <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')"> <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="getCXOptions('icon')" /> <component v-if="templates.itemicon" :is="templates.itemicon" :item="item" :class="cx('icon')" />
<span v-else-if="item.icon" :class="[getCXOptions('icon'), item.icon]" v-bind="ptm('icon')" /> <span v-else-if="item.icon" :class="[cx('icon'), item.icon]" v-bind="ptm('icon')" />
<span v-if="item.label" :class="getCXOptions('label')" v-bind="ptm('label')">{{ label() }}</span> <span v-if="item.label" :class="cx('label')" v-bind="ptm('label')">{{ label() }}</span>
</a> </a>
</router-link> </router-link>
<a v-else :href="item.url || '#'" :class="getCXOptions('action')" :target="item.target" :aria-current="isCurrentUrl()" @click="onClick" v-bind="ptm('action')"> <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="getCXOptions('icon')" /> <component v-if="templates && templates.itemicon" :is="templates.itemicon" :item="item" :class="cx('icon')" />
<span v-else-if="item.icon" :class="[getCXOptions('icon'), item.icon]" v-bind="ptm('icon')" /> <span v-else-if="item.icon" :class="[cx('icon'), item.icon]" v-bind="ptm('icon')" />
<span v-if="item.label" :class="getCXOptions('label')" v-bind="ptm('label')">{{ label() }}</span> <span v-if="item.label" :class="cx('label')" v-bind="ptm('label')">{{ label() }}</span>
</a> </a>
</template> </template>
<component v-else :is="templates.item" :item="item"></component> <component v-else :is="templates.item" :item="item"></component>
@ -19,11 +19,11 @@
</template> </template>
<script> <script>
import BaseBreadcrumb from './BaseBreadcrumb.vue'; import BaseComponent from 'primevue/basecomponent';
export default { export default {
name: 'BreadcrumbItem', name: 'BreadcrumbItem',
extends: BaseBreadcrumb, extends: BaseComponent,
props: { props: {
item: null, item: null,
templates: null, templates: null,
@ -31,12 +31,6 @@ export default {
index: null index: null
}, },
methods: { methods: {
getCXOptions(key, params) {
return this.cx(key, {
...params,
context: this
});
},
onClick(event, navigate) { onClick(event, navigate) {
if (this.item.command) { if (this.item.command) {
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', wrapper: 'p-cascadeselect-items-wrapper',
hiddenSelectedMessage: 'p-hidden-accessible', hiddenSelectedMessage: 'p-hidden-accessible',
list: 'p-cascadeselect-panel p-cascadeselect-items', list: 'p-cascadeselect-panel p-cascadeselect-items',
item: ({ context, processedOption }) => [ item: ({ instance, processedOption }) => [
'p-cascadeselect-item', 'p-cascadeselect-item',
{ {
'p-cascadeselect-item-group': context.isOptionGroup(processedOption), 'p-cascadeselect-item-group': instance.isOptionGroup(processedOption),
'p-cascadeselect-item-active p-highlight': context.isOptionActive(processedOption), 'p-cascadeselect-item-active p-highlight': instance.isOptionActive(processedOption),
'p-focus': context.isOptionFocused(processedOption), 'p-focus': instance.isOptionFocused(processedOption),
'p-disabled': context.isOptionDisabled(processedOption) 'p-disabled': instance.isOptionDisabled(processedOption)
} }
], ],
content: 'p-cascadeselect-item-content', content: 'p-cascadeselect-item-content',
@ -137,7 +137,7 @@ const classes = {
sublist: 'p-cascadeselect-sublist' 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 { export default {
name: 'BaseCascadeSelect', name: 'BaseCascadeSelect',
@ -248,15 +248,13 @@ export default {
}, },
css: { css: {
classes, classes,
inlineStyles inlineStyles,
loadStyle
}, },
watch: { provide() {
isUnstyled: { return {
immediate: true, $parentInstance: this
handler(newValue) { };
!newValue && loadStyle();
}
}
} }
}; };
</script> </script>

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

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

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

@ -40,7 +40,7 @@ const classes = {
footer: 'p-panel-footer' 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 { export default {
name: 'BasePanel', name: 'BasePanel',
@ -55,15 +55,13 @@ export default {
} }
}, },
css: { css: {
classes classes,
loadStyle
}, },
watch: { provide() {
isUnstyled: { return {
immediate: true, $parentInstance: this
handler(newValue) { };
!newValue && loadStyle();
}
}
} }
}; };
</script> </script>

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

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

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

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