feat(carousel): Count slides by custom tag name (SSENSE#322)

* feat(carousel): Count slides by custom tag name * fix(carousel): flush the slides left when they don't fill the width (SSENSE#323) * fix(carousel): Flush the slides left when they don't fill the width (SSENSE#323) When there are too few slides to fill the row, with scrollPerPage, the slides were flushed right instead of left. By bounding maxOffest to a minimum of 0, the slides are aligned on the left-hand-side Fix SSENSE#323 * style(play): Use capitals in tests for consistency * v0.16.1 * chore: build * Rebuild * Use Vue Test Utils, rebuild * Discard change to package version
mxzinke · Dec 27, 2018 · 280fd4f · 280fd4f
1 parent 1a39b74
commit 280fd4f
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -91,6 +91,7 @@ export default {
 | spacePadding                | Number  | 0       | Stage padding option adds left and right padding style (in pixels) onto VueCarousel-inner.                                                                                                                                                                                            |
 | spacePaddingMaxOffsetFactor | Number  | 0       | Specify by how much should the space padding value be multiplied of, to re-arange the final slide padding.                                                                                                                                                                            |
 | speed                       | Number  | 500     | Slide transition speed. Number of milliseconds accepted.                                                                                                                                                                                                                              |
+| tagName                     | String  | slide   | Name (tag) of slide component. Overwrite with coponent name when extending slide component.                                                                                                                                                                                           |
 | value                       | Number  |         | Support for v-model functionality. Setting this value will change the current page to the number inputted (if between 0 and pageCount).                                                                                                                                               |
 
 

diff --git a/src/Carousel.vue b/src/Carousel.vue
@@ -310,6 +310,14 @@ export default {
       type: Number,
       default: 500
     },
+    /**
+     * Name (tag) of slide component
+     * Overwrite when extending slide component
+     */
+    tagName: {
+      type: String,
+      default: "slide"
+    },
     /**
      * Support for v-model functionality
      */
@@ -634,7 +642,9 @@ export default {
         (this.$slots &&
           this.$slots.default &&
           this.$slots.default.filter(
-            slot => slot.tag && slot.tag.indexOf("slide") > -1
+            slot =>
+              slot.tag &&
+              slot.tag.match(`^vue-component-\\d+-${this.tagName}$`) !== null
           ).length) ||
         0;
     },
@@ -644,7 +654,9 @@ export default {
      */
     getSlide(index) {
       const slides = this.$children.filter(
-        child => child.$vnode.tag.indexOf("slide") > -1
+        child =>
+          child.$vnode.tag.match(`^vue-component-\\d+-${this.tagName}$`) !==
+          null
       );
       return slides[index];
     },

diff --git a/tests/client/components/__snapshots__/carousel.spec.js.snap b/tests/client/components/__snapshots__/carousel.spec.js.snap
@@ -213,6 +213,21 @@ exports[`Carousel should not reset autoplay when switching slide with autoplayHo
 "
 `;
 
+exports[`Carousel should only count slides matching tagName 1`] = `
+".VueCarousel-wrapper
+  .VueCarousel-inner(role='listbox', style='transform: translate(0px, 0); visibility: hidden; height: auto;')
+    .VueCarousel-slide(tabindex='-1')
+    .VueCarousel-slide(tabindex='-1')
+    .VueCarousel-slide(tabindex='-1')
+|  
+.VueCarousel-pagination(style='display: none;')
+  ul.VueCarousel-dot-container(role='tablist')
+    li.VueCarousel-dot.VueCarousel-dot--active(aria-hidden='false', role='presentation', aria-selected='true', style='margin-top: 20px; padding: 10px;')
+      button.VueCarousel-dot-button(type='button', role='button', aria-label='\`Item \${index}\`', title='Item 0', tabindex='0', style='width: 10px; height: 10px; background: rgb(0, 0, 0);')
+// 
+"
+`;
+
 exports[`Carousel should register 0 slides when 0 slides are added to the slots 1`] = `
 ".VueCarousel-wrapper
   .VueCarousel-inner(role='listbox', style='transform: translate(0px, 0); visibility: hidden; height: auto;')

diff --git a/tests/client/components/carousel.spec.js b/tests/client/components/carousel.spec.js
@@ -292,6 +292,24 @@ describe('Carousel', () => {
     return utils.expectToMatchSnapshot(wrapper.vm);
   });
 
+  it('should only count slides matching tagName', () => {
+    const CustomSlide = {
+      extends: Slide,
+      name: 'CustomSlide',
+    };
+    const wrapper = mount(Carousel, {
+      propsData: {
+        tagName: 'CustomSlide'
+      },
+      slots: {
+        default: [CustomSlide, CustomSlide, Slide]
+      }
+    });
+    expect(wrapper.vm.tagName).toBe('CustomSlide');
+    expect(wrapper.vm.slideCount).toBe(2);
+    return utils.expectToMatchSnapshot(wrapper.vm);
+  });
+
   it('should set carousel height to slide height', done => {
     const wrapper = mount(Carousel, {
       propsData: {