fix(core): carousel slides order render (#360)

juntossomosmais · Jan 2, 2024 · fe08197 · fe08197
1 parent f45c3a5
commit fe08197
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 11 deletions.
diff --git a/packages/core/src/components/carousel/carousel-item/carousel-item.spec.ts b/packages/core/src/components/carousel/carousel-item/carousel-item.spec.ts
@@ -1,6 +1,7 @@
 import { newSpecPage } from '@stencil/core/testing'
 
 import { AtomCarousel } from '../carousel'
+
 import { AtomCarouselItem } from './carousel-item'
 
 describe('AtomCarouselItem', () => {
@@ -12,6 +13,7 @@ describe('AtomCarouselItem', () => {
               <atom-carousel-item> Slide 2</atom-carousel-item>
               </atom-carousel>`,
     })
+
     await page.waitForChanges()
     expect(page.root?.innerHTML).not.toContain('<atom-carousel-ite')
     expect(page.root?.innerHTML).toContain('<swiper-slide')

diff --git a/packages/core/src/components/carousel/carousel-item/carousel-item.tsx b/packages/core/src/components/carousel/carousel-item/carousel-item.tsx
@@ -6,17 +6,10 @@ import { Component, Element, Host, h } from '@stencil/core'
 export class AtomCarouselItem {
   @Element() host!: HTMLElement
 
-  componentDidLoad() {
-    const parentSwiperContainer =
-      this.host.parentElement.querySelector('swiper-container')
-    const swiperSlide = this.host.querySelector('swiper-slide')
-    parentSwiperContainer.appendChild(swiperSlide)
-    this.host.parentElement.removeChild(this.host)
-  }
   render() {
     return (
       <Host>
-        <swiper-slide class="atom-carousel-item">
+        <swiper-slide class='atom-carousel-item'>
           <slot />
         </swiper-slide>
       </Host>

diff --git a/packages/core/src/components/carousel/carousel.scss b/packages/core/src/components/carousel/carousel.scss
@@ -22,8 +22,9 @@
   }
 }
 
-::part(container) {
-  padding-bottom: var(--spacing-giant);
+::part(pagination) {
+  margin-top: var(--spacing-large);
+  position: unset;
 }
 
 ::part(thumb) {
@@ -63,4 +64,4 @@
   height: var(--spacing-giant);
   object-fit: contain;
   width: var(--spacing-giant);
-}
+}
diff --git a/packages/core/src/components/carousel/carousel.tsx b/packages/core/src/components/carousel/carousel.tsx
@@ -66,6 +66,18 @@ export class AtomCarousel {
 
   componentDidLoad() {
     this.swiperEl = this.host.querySelector('swiper-container')
+
+    const children = this.host.querySelectorAll('atom-carousel-item')
+
+    children.forEach((child) => {
+      const slide = child.querySelector('swiper-slide')
+
+      if (slide) {
+        this.swiperEl.appendChild(slide)
+        this.host.removeChild(child)
+      }
+    })
+
     this.swiperEl.swiper?.on('slideChange', () => {
       this.atomChange.emit()
     })