Rename ImageCarousel => Carousel

src/Carousel/Carousel.stories.js

@@ -0,0 +1,27 @@
+import CarouselView from './CarouselView.svelte';
+import CarouselViewCustomDots from './CarouselViewCustomDots.svelte';
+import CarouselViewCustomArrows from './CarouselViewCustomArrows.svelte';
+
+export default {
+  title: 'Carousel',
+  component: CarouselView
+};
+
+const Template = ({ ...args }) => ({
+  Component: CarouselView,
+  props: args
+});
+export const Primary = Template.bind({});
+
+const TemplateCustomDots = ({ ...args }) => ({
+  Component: CarouselViewCustomDots,
+  props: args
+});
+export const WithCustomDots = TemplateCustomDots.bind({});
+
+const TemplateCustomArrows = ({ ...args }) => ({
+  Component: CarouselViewCustomArrows,
+  props: args
+});
+export const WithCustomArrows = TemplateCustomArrows.bind({});
+

src/Carousel/Carousel.svelte

@@ -1,6 +1,5 @@
 <script>
   // TODO: rename image carousel to just carousel
-  // TODO: subscribe on mount and unsubscribe on destroy to
   import { onDestroy, onMount } from 'svelte'
   import { store } from '../store'
   import {
@@ -70,7 +69,7 @@
   })
 
   function applySlideSizes() {
-    const children = innerContentContainerElement.children
+    const children = innerContentContainerElement ? innerContentContainerElement.children : []
     pageWidth = contentContainerElement.clientWidth
 
     const slidesCount = children.length

src/Carousel/CarouselView.svelte

@@ -1,5 +1,5 @@
 <script>
-  import ImageCarousel from './ImageCarousel.svelte'
+  import Carousel from './Carousel.svelte'
 
   /**
    * Enable Next/Previos arrows
@@ -61,7 +61,7 @@
 </script>
 
 <div class="main-container">
-  <ImageCarousel
+  <Carousel
     {arrows}
     {infinite}
     {slidesToShow}
@@ -80,7 +80,7 @@
         <p>{color}</p>
       </div>
     {/each}
-  </ImageCarousel>
+  </Carousel>
 </div>
 
 <style>

src/Carousel/CarouselViewCustomArrows.svelte

@@ -1,5 +1,5 @@
 <script>
-  import ImageCarousel from './ImageCarousel.svelte'
+  import Carousel from './Carousel.svelte'
 
   /**
    * Enable Next/Previos arrows
@@ -61,7 +61,7 @@
 </script>
 
 <div class="main-container">
-  <ImageCarousel
+  <Carousel
     {arrows}
     {infinite}
     {slidesToShow}
@@ -92,7 +92,7 @@
         <span>&gt;&gt;&gt;</span>
       </div>
     </div>
-  </ImageCarousel>
+  </Carousel>
 </div>
 
 <style>

src/Carousel/CarouselViewCustomDots.svelte

@@ -1,5 +1,5 @@
 <script>
-  import ImageCarousel from './ImageCarousel.svelte'
+  import Carousel from './Carousel.svelte'
 
   /**
    * Enable Next/Previos arrows
@@ -65,7 +65,7 @@
 </script>
 
 <div class="main-container">
-  <ImageCarousel
+  <Carousel
     {arrows}
     {infinite}
     {slidesToShow}
@@ -102,7 +102,7 @@
         </select>
       </div>
     </div>
-  </ImageCarousel>
+  </Carousel>
 </div>
 
 <style>

src/ImageCarousel/ImageCarousel.stories.js

@@ -1,27 +0,0 @@
-import ImageCarouselView from './ImageCarouselView.svelte';
-import ImageCarouselViewCustomDots from './ImageCarouselViewCustomDots.svelte';
-import ImageCarouselViewCustomArrows from './ImageCarouselViewCustomArrows.svelte';
-
-export default {
-  title: 'ImageCarousel',
-  component: ImageCarouselView
-};
-
-const Template = ({ ...args }) => ({
-  Component: ImageCarouselView,
-  props: args
-});
-export const Primary = Template.bind({});
-
-const TemplateCustomDots = ({ ...args }) => ({
-  Component: ImageCarouselViewCustomDots,
-  props: args
-});
-export const WithCustomDots = TemplateCustomDots.bind({});
-
-const TemplateCustomArrows = ({ ...args }) => ({
-  Component: ImageCarouselViewCustomArrows,
-  props: args
-});
-export const WithCustomArrows = TemplateCustomArrows.bind({});
-