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

Related #6474

pull/6480/head
tugcekucukoglu 2024-09-25 15:00:40 +03:00
parent a5cad903b9
commit 6065a4e2b5
8 changed files with 22 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
packages/primevue/src/carousel/Carousel.vue
View File

@ -103,7 +103,6 @@
<script> <script>
import { addClass, find, findSingle, getAttribute, removeClass, setAttribute } from '@primeuix/utils/dom'; import { addClass, find, findSingle, getAttribute, removeClass, setAttribute } from '@primeuix/utils/dom';
import { localeComparator, sort } from '@primeuix/utils/object'; import { localeComparator, sort } from '@primeuix/utils/object';
import { UniqueComponentId } from '@primevue/core/utils';
import ChevronDownIcon from '@primevue/icons/chevrondown'; import ChevronDownIcon from '@primevue/icons/chevrondown';
import ChevronLeftIcon from '@primevue/icons/chevronleft'; import ChevronLeftIcon from '@primevue/icons/chevronleft';
import ChevronRightIcon from '@primevue/icons/chevronright'; import ChevronRightIcon from '@primevue/icons/chevronright';
@ -161,7 +160,6 @@ export default {
mounted() { mounted() {
let stateChanged = false; let stateChanged = false;
this.$el.setAttribute(this.attributeSelector, '');
this.createStyle(); this.createStyle();
this.calculatePosition(); this.calculatePosition();
@ -569,7 +567,7 @@ export default {
} }
let innerHTML = ` let innerHTML = `
.p-carousel[${this.attributeSelector}] .p-carousel-item { .p-carousel[${this.$attrSelector}] .p-carousel-item {
flex: 1 0 ${100 / this.d_numVisible}% flex: 1 0 ${100 / this.d_numVisible}%
} }
`; `;
@ -590,7 +588,7 @@ export default {
innerHTML += ` innerHTML += `
@media screen and (max-width: ${res.breakpoint}) { @media screen and (max-width: ${res.breakpoint}) {
.p-carousel[${this.attributeSelector}] .p-carousel-item { .p-carousel[${this.$attrSelector}] .p-carousel-item {
flex: 1 0 ${100 / res.numVisible}% flex: 1 0 ${100 / res.numVisible}%
} }
} }
@ -641,9 +639,6 @@ export default {
ariaNextButtonLabel() { ariaNextButtonLabel() {
return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.nextPageLabel : undefined; return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.nextPageLabel : undefined;
}, },
attributeSelector() {
return UniqueComponentId();
},
empty() { empty() {
return !this.value || this.value.length === 0; return !this.value || this.value.length === 0;
}, },

10
packages/primevue/src/datepicker/DatePicker.vue
View File

@ -642,8 +642,6 @@ export default {
this.bindMatchMediaListener(); this.bindMatchMediaListener();
if (this.inline) { if (this.inline) {
this.overlay && this.overlay.setAttribute(this.attributeSelector, '');
if (!this.disabled) { if (!this.disabled) {
this.preventFocus = true; this.preventFocus = true;
this.initFocusableCell(); this.initFocusableCell();
@ -875,7 +873,6 @@ export default {
return validMin && validMax && validDate && validDay; return validMin && validMax && validDate && validDay;
}, },
onOverlayEnter(el) { onOverlayEnter(el) {
el.setAttribute(this.attributeSelector, '');
const styles = !this.inline ? { position: 'absolute', top: '0', left: '0' } : undefined; const styles = !this.inline ? { position: 'absolute', top: '0', left: '0' } : undefined;
addStyle(el, styles); addStyle(el, styles);
@ -2712,14 +2709,14 @@ export default {
for (let i = 0; i < responsiveOptions.length; i++) { for (let i = 0; i < responsiveOptions.length; i++) {
let { breakpoint, numMonths } = responsiveOptions[i]; let { breakpoint, numMonths } = responsiveOptions[i];
let styles = ` let styles = `
.p-datepicker-panel[${this.attributeSelector}] .p-datepicker-calendar:nth-child(${numMonths}) .p-datepicker-next-button { .p-datepicker-panel[${this.$attrSelector}] .p-datepicker-calendar:nth-child(${numMonths}) .p-datepicker-next-button {
display: inline-flex; display: inline-flex;
} }
`; `;
for (let j = numMonths; j < this.numberOfMonths; j++) { for (let j = numMonths; j < this.numberOfMonths; j++) {
styles += ` styles += `
.p-datepicker-panel[${this.attributeSelector}] .p-datepicker-calendar:nth-child(${j + 1}) { .p-datepicker-panel[${this.$attrSelector}] .p-datepicker-calendar:nth-child(${j + 1}) {
display: none; display: none;
} }
`; `;
@ -2943,9 +2940,6 @@ export default {
monthNames() { monthNames() {
return this.$primevue.config.locale.monthNames; return this.$primevue.config.locale.monthNames;
}, },
attributeSelector() {
return UniqueComponentId();
},
switchViewButtonDisabled() { switchViewButtonDisabled() {
return this.numberOfMonths > 1 || this.disabled; return this.numberOfMonths > 1 || this.disabled;
}, },

8
packages/primevue/src/orderlist/OrderList.vue
View File

@ -259,7 +259,6 @@ export default {
}, },
createStyle() { createStyle() {
if (!this.styleElement && !this.isUnstyled) { if (!this.styleElement && !this.isUnstyled) {
this.$el.setAttribute(this.attributeSelector, '');
this.styleElement = document.createElement('style'); this.styleElement = document.createElement('style');
this.styleElement.type = 'text/css'; this.styleElement.type = 'text/css';
setAttribute(this.styleElement, 'nonce', this.$primevue?.config?.csp?.nonce); setAttribute(this.styleElement, 'nonce', this.$primevue?.config?.csp?.nonce);
@ -267,11 +266,11 @@ export default {
let innerHTML = ` let innerHTML = `
@media screen and (max-width: ${this.breakpoint}) { @media screen and (max-width: ${this.breakpoint}) {
.p-orderlist[${this.attributeSelector}] { .p-orderlist[${this.$attrSelector}] {
flex-direction: column; flex-direction: column;
} }
.p-orderlist[${this.attributeSelector}] .p-orderlist-controls { .p-orderlist[${this.$attrSelector}] .p-orderlist-controls {
flex-direction: row; flex-direction: row;
} }
} }
@ -291,9 +290,6 @@ export default {
} }
}, },
computed: { computed: {
attributeSelector() {
return UniqueComponentId();
},
moveUpAriaLabel() { moveUpAriaLabel() {
return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.moveUp : undefined; return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.moveUp : undefined;
}, },

20
packages/primevue/src/paginator/Paginator.vue
View File

@ -90,7 +90,6 @@
<script> <script>
import { setAttribute } from '@primeuix/utils/dom'; import { setAttribute } from '@primeuix/utils/dom';
import { UniqueComponentId } from '@primevue/core/utils';
import BasePaginator from './BasePaginator.vue'; import BasePaginator from './BasePaginator.vue';
import CurrrentPageReport from './CurrentPageReport.vue'; import CurrrentPageReport from './CurrentPageReport.vue';
import FirstPageLink from './FirstPageLink.vue'; import FirstPageLink from './FirstPageLink.vue';
@ -127,7 +126,6 @@ export default {
} }
}, },
mounted() { mounted() {
this.setPaginatorAttribute();
this.createStyle(); this.createStyle();
}, },
methods: { methods: {
@ -209,21 +207,21 @@ export default {
if (key === 'default') { if (key === 'default') {
innerHTML += ` innerHTML += `
@media screen ${minValue} { @media screen ${minValue} {
.paginator[${this.attributeSelector}], .p-paginator[${this.$attrSelector}],
display: flex; display: flex;
} }
} }
`; `;
} else { } else {
innerHTML += ` innerHTML += `
.paginator[${this.attributeSelector}], .p-paginator-${key} { .p-paginator-${key} {
display: none; display: none;
} }
@media screen ${minValue} and (max-width: ${key}) { @media screen ${minValue} and (max-width: ${key}) {
.paginator[${this.attributeSelector}], .p-paginator-${key} { .p-paginator-${key} {
display: flex; display: flex;
} }
.paginator[${this.attributeSelector}],
.p-paginator-default{ .p-paginator-default{
display: none; display: none;
} }
@ -238,13 +236,6 @@ export default {
hasBreakpoints() { hasBreakpoints() {
return typeof this.template === 'object'; return typeof this.template === 'object';
}, },
setPaginatorAttribute() {
if (this.$refs.paginator && this.$refs.paginator.length >= 0) {
[...this.$refs.paginator].forEach((el) => {
el.setAttribute(this.attributeSelector, '');
});
}
},
getAriaLabel(labelType) { getAriaLabel(labelType) {
return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria[labelType] : undefined; return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria[labelType] : undefined;
} }
@ -326,9 +317,6 @@ export default {
}, },
currentPage() { currentPage() {
return this.pageCount > 0 ? this.page + 1 : 0; return this.pageCount > 0 ? this.page + 1 : 0;
},
attributeSelector() {
return UniqueComponentId();
} }
}, },
components: { components: {

8
packages/primevue/src/picklist/PickList.vue
View File

@ -562,7 +562,6 @@ export default {
}, },
createStyle() { createStyle() {
if (!this.styleElement && !this.isUnstyled) { if (!this.styleElement && !this.isUnstyled) {
this.$el.setAttribute(this.attributeSelector, '');
this.styleElement = document.createElement('style'); this.styleElement = document.createElement('style');
this.styleElement.type = 'text/css'; this.styleElement.type = 'text/css';
setAttribute(this.styleElement, 'nonce', this.$primevue?.config?.csp?.nonce); setAttribute(this.styleElement, 'nonce', this.$primevue?.config?.csp?.nonce);
@ -570,11 +569,11 @@ export default {
let innerHTML = ` let innerHTML = `
@media screen and (max-width: ${this.breakpoint}) { @media screen and (max-width: ${this.breakpoint}) {
.p-picklist[${this.attributeSelector}] { .p-picklist[${this.$attrSelector}] {
flex-direction: column; flex-direction: column;
} }
.p-picklist[${this.attributeSelector}] .p-picklist-controls { .p-picklist[${this.$attrSelector}] .p-picklist-controls {
flex-direction: row; flex-direction: row;
} }
} }
@ -609,9 +608,6 @@ export default {
targetList() { targetList() {
return this.modelValue && this.modelValue[1] ? this.modelValue[1] : null; return this.modelValue && this.modelValue[1] ? this.modelValue[1] : null;
}, },
attributeSelector() {
return UniqueComponentId();
},
moveUpAriaLabel() { moveUpAriaLabel() {
return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.moveUp : undefined; return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.moveUp : undefined;
}, },

14
packages/primevue/src/popover/Popover.vue
View File

@ -14,10 +14,10 @@
</template> </template>
<script> <script>
import { ConnectedOverlayScrollHandler, UniqueComponentId } from '@primevue/core/utils';
import { addStyle, absolutePosition, getOffset, addClass, focus, isClient, isTouchDevice, setAttribute } from '@primeuix/utils/dom';
import { ZIndex } from '@primeuix/utils/zindex';
import { $dt } from '@primeuix/styled'; import { $dt } from '@primeuix/styled';
import { absolutePosition, addClass, addStyle, focus, getOffset, isClient, isTouchDevice, setAttribute } from '@primeuix/utils/dom';
import { ZIndex } from '@primeuix/utils/zindex';
import { ConnectedOverlayScrollHandler } from '@primevue/core/utils';
import FocusTrap from 'primevue/focustrap'; import FocusTrap from 'primevue/focustrap';
import OverlayEventBus from 'primevue/overlayeventbus'; import OverlayEventBus from 'primevue/overlayeventbus';
import Portal from 'primevue/portal'; import Portal from 'primevue/portal';
@ -103,7 +103,6 @@ export default {
this.selfClick = true; this.selfClick = true;
}, },
onEnter(el) { onEnter(el) {
this.container.setAttribute(this.attributeSelector, '');
addStyle(el, { position: 'absolute', top: '0', left: '0' }); addStyle(el, { position: 'absolute', top: '0', left: '0' });
this.alignOverlay(); this.alignOverlay();
@ -277,7 +276,7 @@ export default {
for (let breakpoint in this.breakpoints) { for (let breakpoint in this.breakpoints) {
innerHTML += ` innerHTML += `
@media screen and (max-width: ${breakpoint}) { @media screen and (max-width: ${breakpoint}) {
.p-popover[${this.attributeSelector}] { .p-popover[${this.$attrSelector}] {
width: ${this.breakpoints[breakpoint]} !important; width: ${this.breakpoints[breakpoint]} !important;
} }
} }
@ -300,11 +299,6 @@ export default {
}); });
} }
}, },
computed: {
attributeSelector() {
return UniqueComponentId();
}
},
directives: { directives: {
focustrap: FocusTrap, focustrap: FocusTrap,
ripple: Ripple ripple: Ripple

11
packages/primevue/src/toast/Toast.vue
View File

@ -26,7 +26,6 @@
import { setAttribute } from '@primeuix/utils/dom'; import { setAttribute } from '@primeuix/utils/dom';
import { isEmpty } from '@primeuix/utils/object'; import { isEmpty } from '@primeuix/utils/object';
import { ZIndex } from '@primeuix/utils/zindex'; import { ZIndex } from '@primeuix/utils/zindex';
import { UniqueComponentId } from '@primevue/core/utils';
import Portal from 'primevue/portal'; import Portal from 'primevue/portal';
import ToastEventBus from 'primevue/toasteventbus'; import ToastEventBus from 'primevue/toasteventbus';
import BaseToast from './BaseToast.vue'; import BaseToast from './BaseToast.vue';
@ -100,8 +99,6 @@ export default {
this.messages = []; this.messages = [];
}, },
onEnter() { onEnter() {
this.$refs.container.setAttribute(this.attributeSelector, '');
if (this.autoZIndex) { if (this.autoZIndex) {
ZIndex.set('modal', this.$refs.container, this.baseZIndex || this.$primevue.config.zIndex.modal); ZIndex.set('modal', this.$refs.container, this.baseZIndex || this.$primevue.config.zIndex.modal);
} }
@ -131,7 +128,7 @@ export default {
innerHTML += ` innerHTML += `
@media screen and (max-width: ${breakpoint}) { @media screen and (max-width: ${breakpoint}) {
.p-toast[${this.attributeSelector}] { .p-toast[${this.$attrSelector}] {
${breakpointStyle} ${breakpointStyle}
} }
} }
@ -148,11 +145,7 @@ export default {
} }
} }
}, },
computed: {
attributeSelector() {
return UniqueComponentId();
}
},
components: { components: {
ToastMessage: ToastMessage, ToastMessage: ToastMessage,
Portal: Portal Portal: Portal

14
packages/primevue/src/treetable/TreeTable.vue
View File

@ -168,10 +168,10 @@
</template> </template>
<script> <script>
import { addStyle, clearSelection, find, getAttribute, getIndex, getOffset, getOuterWidth, setAttribute } from '@primeuix/utils/dom';
import { localeComparator, resolveFieldData, sort } from '@primeuix/utils/object';
import { FilterService } from '@primevue/core/api'; import { FilterService } from '@primevue/core/api';
import { HelperSet, getVNodeProp, UniqueComponentId } from '@primevue/core/utils'; import { getVNodeProp, HelperSet } from '@primevue/core/utils';
import { getOffset, addStyle, getIndex, find, getOuterWidth, getAttribute, setAttribute, clearSelection } from '@primeuix/utils/dom';
import { resolveFieldData, localeComparator, sort } from '@primeuix/utils/object';
import SpinnerIcon from '@primevue/icons/spinner'; import SpinnerIcon from '@primevue/icons/spinner';
import Paginator from 'primevue/paginator'; import Paginator from 'primevue/paginator';
import BaseTreeTable from './BaseTreeTable.vue'; import BaseTreeTable from './BaseTreeTable.vue';
@ -241,9 +241,6 @@ export default {
this.d_multiSortMeta = newValue; this.d_multiSortMeta = newValue;
} }
}, },
mounted() {
this.$el.setAttribute(this.attributeSelector, '');
},
beforeUnmount() { beforeUnmount() {
this.destroyStyleElement(); this.destroyStyleElement();
this.d_columns.clear(); this.d_columns.clear();
@ -684,7 +681,7 @@ export default {
this.createStyleElement(); this.createStyleElement();
let innerHTML = ''; let innerHTML = '';
let selector = `[data-pc-name="treetable"][${this.attributeSelector}] > [data-pc-section="tablecontainer"] > table[data-pc-section="table"]`; let selector = `[data-pc-name="treetable"][${this.$attrSelector}] > [data-pc-section="tablecontainer"] > table[data-pc-section="table"]`;
widths.forEach((width, index) => { widths.forEach((width, index) => {
let colWidth = index === colIndex ? newColumnWidth : nextColumnWidth && index === colIndex + 1 ? nextColumnWidth : width; let colWidth = index === colIndex ? newColumnWidth : nextColumnWidth && index === colIndex + 1 ? nextColumnWidth : width;
@ -863,9 +860,6 @@ export default {
return data ? data.length : 0; return data ? data.length : 0;
} }
},
attributeSelector() {
return UniqueComponentId();
} }
}, },
components: { components: {