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

* feat(carousel): Count slides by custom tag name

* fix(carousel): flush the slides left when they don't fill the width (#323)

* fix(carousel): Flush the slides left when they don't fill the width (#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 #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

Author: ashtonmeuser

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).                                                                                                                                               |
 
 

dist/vue-carousel.min.js

@@ -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];
     },

docs/themes/vue/source/js/vue-carousel.min.js

@@ -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;')

src/Carousel.vue

@@ -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: {