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

Fixed #4136 - Improve pt options on components that use helper component

pull/4148/head
mertsincan 2023-07-13 12:12:07 +01:00
parent ce96ce96b9
commit d730a7081c
12 changed files with 52 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
components/lib/accordion/Accordion.vue
View File

@ -52,6 +52,7 @@ import ChevronDownIcon from 'primevue/icons/chevrondown';
import ChevronRightIcon from 'primevue/icons/chevronright'; import ChevronRightIcon from 'primevue/icons/chevronright';
import Ripple from 'primevue/ripple'; import Ripple from 'primevue/ripple';
import { DomHandler, UniqueComponentId } from 'primevue/utils'; import { DomHandler, UniqueComponentId } from 'primevue/utils';
import { mergeProps } from 'vue';
import BaseAccordion from './BaseAccordion.vue'; import BaseAccordion from './BaseAccordion.vue';
export default { export default {
@ -111,7 +112,7 @@ export default {
} }
}; };
return { ...this.ptm(`tab.${key}`, { tab: tabMetaData }), ...this.ptmo(this.getTabProp(tab, 'pt'), key, tabMetaData) }; return mergeProps(this.ptm(`tab.${key}`, { tab: tabMetaData }), this.ptm(`accordiontab.${key}`, tabMetaData), this.ptmo(this.getTabProp(tab, 'pt'), key, tabMetaData));
}, },
onTabClick(event, tab, index) { onTabClick(event, tab, index) {
this.changeActiveIndex(event, tab, index); this.changeActiveIndex(event, tab, index);

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

@ -455,7 +455,7 @@ export default {
const datasetPrefix = 'data-pc-'; const datasetPrefix = 'data-pc-';
const self = getValue(obj, key, params); const self = getValue(obj, key, params);
const globalPT = searchInDefaultPT ? getValue(this.defaultPT, key, params) : undefined; const globalPT = searchInDefaultPT ? getValue(this.defaultPT, key, params) || (/./g.test(key) && !!params[key.split('.')[0]] ? getValue(this.globalPT, key, params) : undefined) : undefined;
const merged = mergeProps(self, globalPT, { const merged = mergeProps(self, globalPT, {
...(key === 'root' && { [`${datasetPrefix}name`]: ObjectUtils.toFlatCase(this.$.type.name) }), ...(key === 'root' && { [`${datasetPrefix}name`]: ObjectUtils.toFlatCase(this.$.type.name) }),
[`${datasetPrefix}section`]: ObjectUtils.toFlatCase(key) [`${datasetPrefix}section`]: ObjectUtils.toFlatCase(key)
@ -489,8 +489,11 @@ export default {
} }
}, },
computed: { computed: {
globalPT() {
return ObjectUtils.getItemValue(this.$primevue.config.pt, { instance: this });
},
defaultPT() { defaultPT() {
return this._getOptionValue(this.$primevue.config.pt, this.$options.hostName || this.$.type.name, { instance: this }); return this._getOptionValue(this.$primevue.config.pt, this.$options.hostName || this.$.type.name, { instance: this }) || this.globalPT;
}, },
isUnstyled() { isUnstyled() {
return this.unstyled !== undefined ? this.unstyled : this.$primevue.config.unstyled; return this.unstyled !== undefined ? this.unstyled : this.$primevue.config.unstyled;

3
components/lib/datatable/BodyCell.vue
View File

@ -86,6 +86,7 @@ import TimesIcon from 'primevue/icons/times';
import OverlayEventBus from 'primevue/overlayeventbus'; import OverlayEventBus from 'primevue/overlayeventbus';
import Ripple from 'primevue/ripple'; import Ripple from 'primevue/ripple';
import { DomHandler, ObjectUtils } from 'primevue/utils'; import { DomHandler, ObjectUtils } from 'primevue/utils';
import { mergeProps } from 'vue';
import RowCheckbox from './RowCheckbox.vue'; import RowCheckbox from './RowCheckbox.vue';
import RowRadioButton from './RowRadioButton.vue'; import RowRadioButton from './RowRadioButton.vue';
@ -217,7 +218,7 @@ export default {
} }
}; };
return { ...this.ptm(`column.${key}`, { column: columnMetaData }), ...this.ptmo(this.getColumnProp(), key, columnMetaData) }; return mergeProps(this.ptm(`column.${key}`, { column: columnMetaData }), this.ptm(`column.${key}`, columnMetaData), this.ptmo(this.getColumnProp(), key, columnMetaData));
}, },
getColumnProp() { getColumnProp() {
return this.column.props && this.column.props.pt ? this.column.props.pt : undefined; return this.column.props && this.column.props.pt ? this.column.props.pt : undefined;

3
components/lib/datatable/FooterCell.vue
View File

@ -8,6 +8,7 @@
<script> <script>
import BaseComponent from 'primevue/basecomponent'; import BaseComponent from 'primevue/basecomponent';
import { DomHandler, ObjectUtils } from 'primevue/utils'; import { DomHandler, ObjectUtils } from 'primevue/utils';
import { mergeProps } from 'vue';
export default { export default {
name: 'FooterCell', name: 'FooterCell',
@ -54,7 +55,7 @@ export default {
} }
}; };
return { ...this.ptm(`column.${key}`, { column: columnMetaData }), ...this.ptmo(this.getColumnProp(), key, columnMetaData) }; return mergeProps(this.ptm(`column.${key}`, { column: columnMetaData }), this.ptm(`column.${key}`, columnMetaData), this.ptmo(this.getColumnProp(), key, columnMetaData));
}, },
getColumnProp() { getColumnProp() {
return this.column.props && this.column.props.pt ? this.column.props.pt : undefined; return this.column.props && this.column.props.pt ? this.column.props.pt : undefined;

3
components/lib/datatable/HeaderCell.vue
View File

@ -87,6 +87,7 @@ import SortAltIcon from 'primevue/icons/sortalt';
import SortAmountDownIcon from 'primevue/icons/sortamountdown'; import SortAmountDownIcon from 'primevue/icons/sortamountdown';
import SortAmountUpAltIcon from 'primevue/icons/sortamountupalt'; import SortAmountUpAltIcon from 'primevue/icons/sortamountupalt';
import { DomHandler, ObjectUtils } from 'primevue/utils'; import { DomHandler, ObjectUtils } from 'primevue/utils';
import { mergeProps } from 'vue';
import ColumnFilter from './ColumnFilter.vue'; import ColumnFilter from './ColumnFilter.vue';
import HeaderCheckbox from './HeaderCheckbox.vue'; import HeaderCheckbox from './HeaderCheckbox.vue';
@ -217,7 +218,7 @@ export default {
} }
}; };
return { ...this.ptm(`column.${key}`, { column: columnMetaData }), ...this.ptmo(this.getColumnProp(), key, columnMetaData) }; return mergeProps(this.ptm(`column.${key}`, { column: columnMetaData }), this.ptm(`column.${key}`, columnMetaData), this.ptmo(this.getColumnProp(), key, columnMetaData));
}, },
getColumnProp() { getColumnProp() {
return this.column.props && this.column.props.pt ? this.column.props.pt : undefined; //@todo: return this.column.props && this.column.props.pt ? this.column.props.pt : undefined; //@todo:

5
components/lib/datatable/TableFooter.vue
View File

@ -18,6 +18,7 @@
<script> <script>
import BaseComponent from 'primevue/basecomponent'; import BaseComponent from 'primevue/basecomponent';
import { ObjectUtils } from 'primevue/utils'; import { ObjectUtils } from 'primevue/utils';
import { mergeProps } from 'vue';
import FooterCell from './FooterCell.vue'; import FooterCell from './FooterCell.vue';
export default { export default {
@ -50,7 +51,7 @@ export default {
} }
}; };
return { ...this.ptm(`columnGroup.${key}`, { columnGroup: columnGroupMetaData }), ...this.ptmo(this.getColumnGroupProps(), key, columnGroupMetaData) }; return mergeProps(this.ptm(`columnGroup.${key}`, { columnGroup: columnGroupMetaData }), this.ptm(`columnGroup.${key}`, columnGroupMetaData), this.ptmo(this.getColumnGroupProps(), key, columnGroupMetaData));
}, },
getColumnGroupProps() { getColumnGroupProps() {
return this.columnGroup && this.columnGroup.props && this.columnGroup.props.pt ? this.columnGroup.props.pt : undefined; //@todo return this.columnGroup && this.columnGroup.props && this.columnGroup.props.pt ? this.columnGroup.props.pt : undefined; //@todo
@ -67,7 +68,7 @@ export default {
} }
}; };
return { ...this.ptm(`row.${key}`, { row: rowMetaData }), ...this.ptmo(this.getRowProp(row), key, rowMetaData) }; return mergeProps(this.ptm(`row.${key}`, { row: rowMetaData }), this.ptm(`row.${key}`, rowMetaData), this.ptmo(this.getRowProp(row), key, rowMetaData));
}, },
getRowProp(row) { getRowProp(row) {
return row.props && row.props.pt ? row.props.pt : undefined; //@todo return row.props && row.props.pt ? row.props.pt : undefined; //@todo

7
components/lib/datatable/TableHeader.vue
View File

@ -131,6 +131,7 @@
<script> <script>
import BaseComponent from 'primevue/basecomponent'; import BaseComponent from 'primevue/basecomponent';
import { ObjectUtils } from 'primevue/utils'; import { ObjectUtils } from 'primevue/utils';
import { mergeProps } from 'vue';
import ColumnFilter from './ColumnFilter.vue'; import ColumnFilter from './ColumnFilter.vue';
import HeaderCell from './HeaderCell.vue'; import HeaderCell from './HeaderCell.vue';
import HeaderCheckbox from './HeaderCheckbox.vue'; import HeaderCheckbox from './HeaderCheckbox.vue';
@ -247,7 +248,7 @@ export default {
} }
}; };
return { ...this.ptm(`columnGroup.${key}`, { columnGroup: columnGroupMetaData }), ...this.ptmo(this.getColumnGroupProps(), key, columnGroupMetaData) }; return mergeProps(this.ptm(`columnGroup.${key}`, { columnGroup: columnGroupMetaData }), this.ptm(`columnGroup.${key}`, columnGroupMetaData), this.ptmo(this.getColumnGroupProps(), key, columnGroupMetaData));
}, },
getColumnGroupProps() { getColumnGroupProps() {
return this.columnGroup && this.columnGroup.props && this.columnGroup.props.pt ? this.columnGroup.props.pt : undefined; //@todo return this.columnGroup && this.columnGroup.props && this.columnGroup.props.pt ? this.columnGroup.props.pt : undefined; //@todo
@ -264,7 +265,7 @@ export default {
} }
}; };
return { ...this.ptm(`row.${key}`, { row: rowMetaData }), ...this.ptmo(this.getRowProp(row), key, rowMetaData) }; return mergeProps(this.ptm(`row.${key}`, { row: rowMetaData }), this.ptm(`row.${key}`, rowMetaData), this.ptmo(this.getRowProp(row), key, rowMetaData));
}, },
getRowProp(row) { getRowProp(row) {
return row.props && row.props.pt ? row.props.pt : undefined; //@todo return row.props && row.props.pt ? row.props.pt : undefined; //@todo
@ -281,7 +282,7 @@ export default {
} }
}; };
return { ...this.ptm(`column.${key}`, { column: columnMetaData }), ...this.ptmo(this.getColumnProp(column), key, columnMetaData) }; return mergeProps(this.ptm(`column.${key}`, { column: columnMetaData }), this.ptm(`column.${key}`, columnMetaData), this.ptmo(this.getColumnProp(column), key, columnMetaData));
}, },
getColumnProp(column) { getColumnProp(column) {
return column.props && column.props.pt ? column.props.pt : undefined; //@todo return column.props && column.props.pt ? column.props.pt : undefined; //@todo

16
components/lib/tabpanel/TabPanel.d.ts vendored
View File

@ -119,6 +119,22 @@ export interface TabPanelContext {
* Current index of the tab. * Current index of the tab.
*/ */
index: number; index: number;
/**
* Count of tabs
*/
count: number;
/**
* Whether the tab is first.
*/
first: boolean;
/**
* Whether the tab is last.
*/
last: boolean;
/**
* Whether the tab is active.
*/
active: boolean;
} }
/** /**

14
components/lib/tabview/TabView.vue
View File

@ -24,12 +24,12 @@
:style="getTabProp(tab, 'headerStyle')" :style="getTabProp(tab, 'headerStyle')"
:class="cx('tab.header', { tab, index })" :class="cx('tab.header', { tab, index })"
role="presentation" role="presentation"
v-bind="{ ...getTabProp(tab, 'headerProps'), ...getTabPT(tab, 'root', index), ...getTabPT(tab, 'header', index) }"
data-pc-name="tabpanel" data-pc-name="tabpanel"
:data-p-highlight="d_activeIndex === index" :data-p-highlight="d_activeIndex === index"
:data-p-disabled="getTabProp(tab, 'disabled')" :data-p-disabled="getTabProp(tab, 'disabled')"
:data-pc-index="index" :data-pc-index="index"
:data-p-active="d_activeIndex === index" :data-p-active="d_activeIndex === index"
v-bind="{ ...getTabProp(tab, 'headerProps'), ...getTabPT(tab, 'root', index), ...getTabPT(tab, 'header', index) }"
> >
<a <a
:id="getTabHeaderActionId(index)" :id="getTabHeaderActionId(index)"
@ -76,10 +76,10 @@
:class="cx('tab.content', { tab })" :class="cx('tab.content', { tab })"
role="tabpanel" role="tabpanel"
:aria-labelledby="getTabHeaderActionId(index)" :aria-labelledby="getTabHeaderActionId(index)"
v-bind="{ ...getTabProp(tab, 'contentProps'), ...getTabPT(tab, 'root', index), ...getTabPT(tab, 'content', index) }"
data-pc-name="tabpanel" data-pc-name="tabpanel"
:data-pc-index="index" :data-pc-index="index"
:data-p-active="d_activeIndex === index" :data-p-active="d_activeIndex === index"
v-bind="{ ...getTabProp(tab, 'contentProps'), ...getTabPT(tab, 'root', index), ...getTabPT(tab, 'content', index) }"
> >
<component :is="tab"></component> <component :is="tab"></component>
</div> </div>
@ -93,6 +93,7 @@ import ChevronLeftIcon from 'primevue/icons/chevronleft';
import ChevronRightIcon from 'primevue/icons/chevronright'; import ChevronRightIcon from 'primevue/icons/chevronright';
import Ripple from 'primevue/ripple'; import Ripple from 'primevue/ripple';
import { DomHandler, UniqueComponentId } from 'primevue/utils'; import { DomHandler, UniqueComponentId } from 'primevue/utils';
import { mergeProps } from 'vue';
import BaseTabView from './BaseTabView.vue'; import BaseTabView from './BaseTabView.vue';
export default { export default {
@ -146,6 +147,7 @@ export default {
return `${this.id}_${index}_content`; return `${this.id}_${index}_content`;
}, },
getTabPT(tab, key, index) { getTabPT(tab, key, index) {
const count = this.tabs.length;
const tabMetaData = { const tabMetaData = {
props: tab.props, props: tab.props,
parent: { parent: {
@ -153,11 +155,15 @@ export default {
state: this.$data state: this.$data
}, },
context: { context: {
index index,
count,
first: index === 0,
last: index === count - 1,
active: this.isTabActive(index)
} }
}; };
return { ...this.ptm(`tab.${key}`, { tab: tabMetaData }), ...this.ptmo(this.getTabProp(tab, 'pt'), key, tabMetaData) }; return mergeProps(this.ptm(`tab.${key}`, { tab: tabMetaData }), this.ptm(`tabpanel.${key}`, tabMetaData), this.ptmo(this.getTabProp(tab, 'pt'), key, tabMetaData));
}, },
onScroll(event) { onScroll(event) {
this.scrollable && this.updateButtonState(); this.scrollable && this.updateButtonState();

3
components/lib/treetable/BodyCell.vue
View File

@ -29,6 +29,7 @@ import ChevronRightIcon from 'primevue/icons/chevronright';
import MinusIcon from 'primevue/icons/minus'; import MinusIcon from 'primevue/icons/minus';
import Ripple from 'primevue/ripple'; import Ripple from 'primevue/ripple';
import { DomHandler, ObjectUtils } from 'primevue/utils'; import { DomHandler, ObjectUtils } from 'primevue/utils';
import { mergeProps } from 'vue';
export default { export default {
name: 'BodyCell', name: 'BodyCell',
@ -116,7 +117,7 @@ export default {
} }
}; };
return { ...this.ptm(`column.${key}`, { column: columnMetaData }), ...this.ptmo(this.getColumnProp(), key, columnMetaData) }; return mergeProps(this.ptm(`column.${key}`, { column: columnMetaData }), this.ptm(`column.${key}`, columnMetaData), this.ptmo(this.getColumnProp(), key, columnMetaData));
}, },
getColumnProp() { getColumnProp() {
return this.column.props && this.column.props.pt ? this.column.props.pt : undefined; //@todo return this.column.props && this.column.props.pt ? this.column.props.pt : undefined; //@todo

3
components/lib/treetable/FooterCell.vue
View File

@ -8,6 +8,7 @@
<script> <script>
import BaseComponent from 'primevue/basecomponent'; import BaseComponent from 'primevue/basecomponent';
import { DomHandler, ObjectUtils } from 'primevue/utils'; import { DomHandler, ObjectUtils } from 'primevue/utils';
import { mergeProps } from 'vue';
export default { export default {
name: 'FooterCell', name: 'FooterCell',
@ -54,7 +55,7 @@ export default {
} }
}; };
return { ...this.ptm(`column.${key}`, { column: columnMetaData }), ...this.ptmo(this.getColumnProp(), key, columnMetaData) }; return mergeProps(this.ptm(`column.${key}`, { column: columnMetaData }), this.ptm(`column.${key}`, columnMetaData), this.ptmo(this.getColumnProp(), key, columnMetaData));
}, },
getColumnProp() { getColumnProp() {
return this.column.props && this.column.props.pt ? this.column.props.pt : undefined; return this.column.props && this.column.props.pt ? this.column.props.pt : undefined;

3
components/lib/treetable/HeaderCell.vue
View File

@ -29,6 +29,7 @@ import SortAltIcon from 'primevue/icons/sortalt';
import SortAmountDownIcon from 'primevue/icons/sortamountdown'; import SortAmountDownIcon from 'primevue/icons/sortamountdown';
import SortAmountUpAltIcon from 'primevue/icons/sortamountupalt'; import SortAmountUpAltIcon from 'primevue/icons/sortamountupalt';
import { DomHandler, ObjectUtils } from 'primevue/utils'; import { DomHandler, ObjectUtils } from 'primevue/utils';
import { mergeProps } from 'vue';
export default { export default {
name: 'HeaderCell', name: 'HeaderCell',
@ -96,7 +97,7 @@ export default {
} }
}; };
return { ...this.ptm(`column.${key}`, { column: columnMetaData }), ...this.ptmo(this.getColumnProp(), key, columnMetaData) }; return mergeProps(this.ptm(`column.${key}`, { column: columnMetaData }), this.ptm(`column.${key}`, columnMetaData), this.ptmo(this.getColumnProp(), key, columnMetaData));
}, },
getColumnProp() { getColumnProp() {
return this.column.props && this.column.props.pt ? this.column.props.pt : undefined; //@todo: return this.column.props && this.column.props.pt ? this.column.props.pt : undefined; //@todo: