Refactor #3965 - Refactor on responsive components

components/lib/carousel/Carousel.vue

@@ -111,13 +111,13 @@
 </template>
 
 <script>
-import BaseCarousel from './BaseCarousel.vue';
 import ChevronDownIcon from 'primevue/icons/chevrondown';
 import ChevronLeftIcon from 'primevue/icons/chevronleft';
 import ChevronRightIcon from 'primevue/icons/chevronright';
 import ChevronUpIcon from 'primevue/icons/chevronup';
 import Ripple from 'primevue/ripple';
 import { DomHandler, UniqueComponentId } from 'primevue/utils';
+import BaseCarousel from './BaseCarousel.vue';
 
 export default {
     name: 'Carousel',
@@ -553,7 +553,7 @@ export default {
                 }
             `;
 
-            if (this.responsiveOptions) {
+            if (this.responsiveOptions && !this.isUnstyled) {
                 let _responsiveOptions = [...this.responsiveOptions];
 
                 _responsiveOptions.sort((data1, data2) => {

components/lib/datatable/DataTable.vue

@@ -408,7 +408,7 @@ export default {
     mounted() {
         this.$el.setAttribute(this.attributeSelector, '');
 
-        if (this.responsiveLayout === 'stack' && !this.scrollable) {
+        if (this.responsiveLayout === 'stack' && !this.scrollable && !this.unstyled) {
             this.createResponsiveStyle();
         }
 

components/lib/dialog/Dialog.vue

@@ -43,7 +43,6 @@
 </template>
 
 <script>
-import BaseDialog from './BaseDialog.vue';
 import FocusTrap from 'primevue/focustrap';
 import TimesIcon from 'primevue/icons/times';
 import WindowMaximizeIcon from 'primevue/icons/windowmaximize';
@@ -52,6 +51,7 @@ import Portal from 'primevue/portal';
 import Ripple from 'primevue/ripple';
 import { DomHandler, UniqueComponentId, ZIndexUtils } from 'primevue/utils';
 import { computed } from 'vue';
+import BaseDialog from './BaseDialog.vue';
 
 export default {
     name: 'Dialog',
@@ -250,7 +250,7 @@ export default {
             this.closeButton = el;
         },
         createStyle() {
-            if (!this.styleElement) {
+            if (!this.styleElement && !this.isUnstyled) {
                 this.styleElement = document.createElement('style');
                 this.styleElement.type = 'text/css';
                 document.head.appendChild(this.styleElement);

components/lib/galleria/GalleriaThumbnails.vue

@@ -432,7 +432,7 @@ export default {
                 }
             `;
 
-            if (this.responsiveOptions) {
+            if (this.responsiveOptions && !this.isUnstyled) {
                 this.sortedResponsiveOptions = [...this.responsiveOptions];
                 this.sortedResponsiveOptions.sort((data1, data2) => {
                     const value1 = data1.breakpoint;

components/lib/orderlist/OrderList.vue

@@ -484,7 +484,7 @@ export default {
             }
         },
         createStyle() {
-            if (!this.styleElement) {
+            if (!this.styleElement && !this.isUnstyled) {
                 this.$el.setAttribute(this.attributeSelector, '');
                 this.styleElement = document.createElement('style');
                 this.styleElement.type = 'text/css';

components/lib/overlaypanel/OverlayPanel.vue

@@ -16,13 +16,13 @@
 </template>
 
 <script>
-import BaseOverlayPanel from './BaseOverlayPanel.vue';
 import FocusTrap from 'primevue/focustrap';
 import TimesIcon from 'primevue/icons/times';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Portal from 'primevue/portal';
 import Ripple from 'primevue/ripple';
 import { ConnectedOverlayScrollHandler, DomHandler, UniqueComponentId, ZIndexUtils } from 'primevue/utils';
+import BaseOverlayPanel from './BaseOverlayPanel.vue';
 
 export default {
     name: 'OverlayPanel',
@@ -239,7 +239,7 @@ export default {
             this.container = el;
         },
         createStyle() {
-            if (!this.styleElement) {
+            if (!this.styleElement && !this.isUnstyled) {
                 this.styleElement = document.createElement('style');
                 this.styleElement.type = 'text/css';
                 document.head.appendChild(this.styleElement);

components/lib/paginator/Paginator.vue

@@ -141,7 +141,7 @@ export default {
             this.changePage(this.page);
         },
         createStyle() {
-            if (this.hasBreakpoints()) {
+            if (this.hasBreakpoints() && !this.isUnstyled) {
                 this.styleElement = document.createElement('style');
                 this.styleElement.type = 'text/css';
                 document.head.appendChild(this.styleElement);

components/lib/picklist/PickList.vue

@@ -787,7 +787,7 @@ export default {
             }
         },
         createStyle() {
-            if (!this.styleElement) {
+            if (!this.styleElement && !this.isUnstyled) {
                 this.$el.setAttribute(this.attributeSelector, '');
                 this.styleElement = document.createElement('style');
                 this.styleElement.type = 'text/css';

components/lib/toast/Toast.vue

@@ -22,10 +22,10 @@
 </template>
 
 <script>
-import BaseToast from './BaseToast.vue';
 import Portal from 'primevue/portal';
 import ToastEventBus from 'primevue/toasteventbus';
 import { ObjectUtils, UniqueComponentId, ZIndexUtils } from 'primevue/utils';
+import BaseToast from './BaseToast.vue';
 import ToastMessage from './ToastMessage.vue';
 
 var messageIdx = 0;
@@ -111,7 +111,7 @@ export default {
             }
         },
         createStyle() {
-            if (!this.styleElement) {
+            if (!this.styleElement && !this.isUnstyled) {
                 this.styleElement = document.createElement('style');
                 this.styleElement.type = 'text/css';
                 document.head.appendChild(this.styleElement);