Carousel: attributeSelector fix

pull/3441/head
Tuğçe Küçükoğlu 2022-12-21 15:38:48 +03:00
parent 469408aed0
commit 75d76bf5b6
1 changed files with 14 additions and 11 deletions

View File

@ -1,5 +1,5 @@
<template> <template>
<div :id="id" :class="['p-carousel p-component', { 'p-carousel-vertical': isVertical(), 'p-carousel-horizontal': !isVertical() }]" role="region"> <div :class="['p-carousel p-component', { 'p-carousel-vertical': isVertical(), 'p-carousel-horizontal': !isVertical() }]" role="region">
<div v-if="$slots.header" class="p-carousel-header"> <div v-if="$slots.header" class="p-carousel-header">
<slot name="header"></slot> <slot name="header"></slot>
</div> </div>
@ -141,7 +141,6 @@ export default {
isRemainingItemsAdded: false, isRemainingItemsAdded: false,
data() { data() {
return { return {
id: UniqueComponentId(),
remainingItems: 0, remainingItems: 0,
d_numVisible: this.numVisible, d_numVisible: this.numVisible,
d_numScroll: this.numScroll, d_numScroll: this.numScroll,
@ -177,6 +176,7 @@ export default {
mounted() { mounted() {
let stateChanged = false; let stateChanged = false;
this.$el.setAttribute(this.attributeSelector, '');
this.createStyle(); this.createStyle();
this.calculatePosition(); this.calculatePosition();
@ -563,7 +563,7 @@ export default {
} }
let innerHTML = ` let innerHTML = `
#${this.id} .p-carousel-item { .p-carousel[${this.attributeSelector}] .p-carousel-item {
flex: 1 0 ${100 / this.d_numVisible}% flex: 1 0 ${100 / this.d_numVisible}%
} }
`; `;
@ -590,7 +590,7 @@ export default {
innerHTML += ` innerHTML += `
@media screen and (max-width: ${res.breakpoint}) { @media screen and (max-width: ${res.breakpoint}) {
#${this.id} .p-carousel-item { .p-carousel[${this.attributeSelector}] .p-carousel-item {
flex: 1 0 ${100 / res.numVisible}% flex: 1 0 ${100 / res.numVisible}%
} }
} }
@ -649,6 +649,9 @@ 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();
} }
}, },
directives: { directives: {