Skip to content

Commit

Permalink
#310 fix(event): adding kebab-case public events (#361)
Browse files Browse the repository at this point in the history
  • Loading branch information
@darraghenright @quinnlangille
darraghenright authored and quinnlangille committed Mar 21, 2019
1 parent a0556f4 commit 0714379
Show file tree
Hide file tree
Showing 8 changed files with 212 additions and 21 deletions.
10 changes: 10 additions & 0 deletions README.md
View file
Expand Up @@ -98,9 +98,19 @@ export default {
### Events
| Event | Type | Emitter | Description |
|:--------------------------|:--------|:---------|:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
<<<<<<< HEAD
| pageChange | Number | Carousel | "pageChange" event emits the value of the current page |
| slideclick | Object | Slide | "slideclick" event throws the *dataset* object of the selected element |
| transitionEnd | | Carousel | "transitionEnd" event is thrown when the transition end is reached |
=======
| `page-change` | Number | Carousel | Emits with the current page number. |
| `slide-click` | Object | Slide | Emits with the *dataset* object of the selected element ··
| `transition-start` | | Carousel | Emits when the transition end is reached |
| `transition-end` | | Carousel | Emits when the transition start is reached · |

Lowercase versions of the above events are also emitted, namely—`pagechange`, `slideclick`, `transitionstart` and `transitionend`.

>>>>>>> #310 fix(event): adding kebab-case public events (#361)
### HTML Structure

Expand Down
2 changes: 1 addition & 1 deletion docs/db.json
View file

Large diffs are not rendered by default.

25 changes: 19 additions & 6 deletions docs/public/api/index.html
View file
Expand Up @@ -130,7 +130,7 @@ <h3 id="perPageCustom"><a href="#perPageCustom" class="headerlink" title="perPag
<li><strong>Type</strong>: <code>Array</code></li>
<li><strong>Usage</strong>:</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">carousel</span> <span class="attr">:per-page-custom</span>=<span class="string">"[[768, 3], [1024, 4]]"</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">carousel</span> <span class="attr">:per-page-custom</span>=<span class="string">"[[768, 3], [1024, 4]]"</span>&gt;</span></div></pre></td></tr></table></figure>
<p>A mobile-first strategy is used to determine the matching breakpoint. In the above example, the <a href="/vue-carousel/api#perPage">perPage</a> variable has not been set, so the default of <strong>2</strong> is used. If the window size is greater than or equal to 768px, then 3 slides are shown. If the width is greater than or equal to 1024, then 4 slides are shown.</p>
<h3 id="resistanceCoef"><a href="#resistanceCoef" class="headerlink" title="resistanceCoef"></a>resistanceCoef</h3><p>Resistance coefficient to dragging on the edge of the carousel. This dictates the effect of the pull as you move towards the boundaries.</p>
<ul>
Expand Down Expand Up @@ -213,6 +213,11 @@ <h3 id="paginationColor"><a href="#paginationColor" class="headerlink" title="pa
<li><strong>Type</strong>: <code>String</code></li>
<li><strong>Default</strong>: <code>#efefef</code></li>
</ul>
<h3 id="paginationPosition"><a href="#paginationPosition" class="headerlink" title="paginationPosition"></a>paginationPosition</h3><p>The position of pagination dots. Possible values are <code>bottom</code>, <code>bottom-overlay</code>, <code>top</code> and <code>top-overlay</code>. The overlay values place the pagination component over the images.</p>
<ul>
<li><strong>Type</strong>: <code>String</code></li>
<li><strong>Default</strong>: <code>bottom</code></li>
</ul>
<h3 id="paginationPadding"><a href="#paginationPadding" class="headerlink" title="paginationPadding"></a>paginationPadding</h3><p>The padding inside each pagination dot. Pixel values are accepted.</p>
<ul>
<li><strong>Type</strong>: <code>Number</code></li>
Expand All @@ -229,25 +234,33 @@ <h3 id="spacePadding-1"><a href="#spacePadding-1" class="headerlink" title="spac
<li><strong>Default</strong>: <code>0</code></li>
</ul>
<h2 id="Custom-Pagination-amp-Navigation"><a href="#Custom-Pagination-amp-Navigation" class="headerlink" title="Custom Pagination &amp; Navigation"></a>Custom Pagination &amp; Navigation</h2><p>Use named slots to render pagination and navigation using components.</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">carousel</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">slide</span>&gt;</span></span><br><span class="line"> Slide 1 Content</span><br><span class="line"> <span class="tag">&lt;/<span class="name">slide</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">slide</span>&gt;</span></span><br><span class="line"> Slide 2 Content</span><br><span class="line"> <span class="tag">&lt;/<span class="name">slide</span>&gt;</span></span><br><span class="line"></span><br><span class="line"> <span class="tag">&lt;<span class="name">numbered-pagination</span> <span class="attr">slot</span>=<span class="string">"pagination"</span> /&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">stylish-navigation</span> <span class="attr">slot</span>=<span class="string">"navigation"</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">carousel</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">carousel</span>&gt;</span></div><div class="line"> <span class="tag">&lt;<span class="name">slide</span>&gt;</span></div><div class="line"> Slide 1 Content</div><div class="line"> <span class="tag">&lt;/<span class="name">slide</span>&gt;</span></div><div class="line"> <span class="tag">&lt;<span class="name">slide</span>&gt;</span></div><div class="line"> Slide 2 Content</div><div class="line"> <span class="tag">&lt;/<span class="name">slide</span>&gt;</span></div><div class="line"></div><div class="line"> <span class="tag">&lt;<span class="name">numbered-pagination</span> <span class="attr">slot</span>=<span class="string">"pagination"</span> /&gt;</span></div><div class="line"> <span class="tag">&lt;<span class="name">stylish-navigation</span> <span class="attr">slot</span>=<span class="string">"navigation"</span> /&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">carousel</span>&gt;</span></div></pre></td></tr></table></figure>
<p>Your components can access the <code>carousel</code> provider by adding the following to you component configuration:</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">name: &quot;numbered-pagination&quot;,</span><br><span class="line">inject: [&quot;carousel&quot;]</span><br></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">name: &quot;numbered-pagination&quot;,</div><div class="line">inject: [&quot;carousel&quot;]</div></pre></td></tr></table></figure>
<h2 id="Events"><a href="#Events" class="headerlink" title="Events"></a>Events</h2><p>Events emitted from components</p>
<h3 id="pageChange"><a href="#pageChange" class="headerlink" title="pageChange"></a>pageChange</h3><p>“pageChange” event emits the value of the current page.</p>
<h3 id="page-change"><a href="#page-change" class="headerlink" title="page-change"></a>page-change</h3><p><code>page-change</code> event emits the value of the current page.</p>
<ul>
<li><strong>Type</strong>: <code>Number</code></li>
<li><strong>Emitter</strong>: <code>Carousel</code></li>
</ul>
<h3 id="slideClick"><a href="#slideClick" class="headerlink" title="slideClick"></a>slideClick</h3><p>“slideClick” event throws the <em>dataset</em> object of the selected element.</p>
<h3 id="slide-click"><a href="#slide-click" class="headerlink" title="slide-click"></a>slide-click</h3><p><code>slide-click</code> event throws the <em>dataset</em> object of the selected element.</p>
<ul>
<li><strong>Type</strong>: <code>Object</code></li>
<li><strong>Emitter</strong>: <code>Slide</code></li>
</ul>
<h3 id="transitionEnd"><a href="#transitionEnd" class="headerlink" title="transitionEnd"></a>transitionEnd</h3><p>“transitionEnd” event is thrown when the transition end is reached.</p>
<h3 id="transition-start"><a href="#transition-start" class="headerlink" title="transition-start"></a>transition-start</h3><p><code>transition-start</code> event is thrown when the transition starts.</p>
<ul>
<li><strong>Type</strong>: <code>none</code></li>
<li><strong>Emitter</strong>: <code>Carousel</code></li>
</ul>
<h3 id="transition-end"><a href="#transition-end" class="headerlink" title="transition-end"></a>transition-end</h3><p><code>transition-end</code> event is thrown when the transition end is reached.</p>
<ul>
<li><strong>Type</strong>: <code>none</code></li>
<li><strong>Emitter</strong>: <code>Carousel</code></li>
</ul>
<blockquote>
<p>Lowercase versions of the above events are also emitted, namely—<code>pagechange</code>, <code>slideclick</code>, <code>transitionstart</code> and <code>transitionend</code>.</p>
</blockquote>


<div class="footer">
Expand Down
2 changes: 1 addition & 1 deletion docs/public/index.html
View file
Expand Up @@ -135,7 +135,7 @@ <h3>SPONSORED BY</h3>

<div id="footer">
Released under the <a href="https://opensource.org/licenses/MIT" href="_blank">MIT License</a><br>
Copyright &copy; 2018 SSENSE
Copyright &copy; 2019 SSENSE
</div>

<script>
Expand Down
21 changes: 15 additions & 6 deletions docs/source/api/index.md
View file
Expand Up @@ -278,23 +278,32 @@ Your components can access the `carousel` provider by adding the following to yo

Events emitted from components

### pageChange
### page-change

"pageChange" event emits the value of the current page.
`page-change` event emits the value of the current page.

* **Type**: `Number`
* **Emitter**: `Carousel`

### slideClick
### slide-click

"slideClick" event throws the *dataset* object of the selected element.
`slide-click` event throws the *dataset* object of the selected element.

* **Type**: `Object`
* **Emitter**: `Slide`

### transitionEnd
### transition-start

"transitionEnd" event is thrown when the transition end is reached.
`transition-start` event is thrown when the transition starts.

* **Type**: `none`
* **Emitter**: `Carousel`

### transition-end

`transition-end` event is thrown when the transition end is reached.

* **Type**: `none`
* **Emitter**: `Carousel`

> Lowercase versions of the above events are also emitted, namely—`pagechange`, `slideclick`, `transitionstart` and `transitionend`.
164 changes: 157 additions & 7 deletions play/index.js
View file
Expand Up @@ -180,7 +180,7 @@ play("Carousel", module)
h, containerWidth, [h('style', '.VueCarousel-navigation-button { font-size: 36px; }'), h(Carousel, { props: { paginationColor: '#fac232', paginationActiveColor: '#c9750c', navigationEnabled: true, navigationNextLabel: '👉', navigationPrevLabel: '👈' } }, generateSlideImages(h))]
)
)
.add("With local event on pageChange", {
.add("pageChange event", {
template:
`<div style="width: 100%; display: flex; justify-content: center; margin-top: 40px;">
<carousel style="width: 500px;" @pageChange="onPageChange">
Expand All @@ -200,14 +200,86 @@ play("Carousel", module)
},
methods: {
onPageChange(currentPage) {
this.$log(`page changed to ${currentPage}`)
this.$log(`Captured [pageChange] event. Current page is ${currentPage}`)
},
}
})
.add("slideclick event", {
template:
`<div style="width: 100%; display: flex; justify-content: center; margin-top: 40px;">
<carousel style="width: 500px;">
<slide v-for="slide in slides" :key="slide" @slideclick="onSlideClick">
<img style="width: 100%;" :src="slide" />
</slide>
</carousel>
</div>`,
components: {
Carousel,
Slide
},
data() {
return {
slides: images
}
},
methods: {
onSlideClick(currentDataset) {
this.$log(`Captured [slideclick] event. Current dataset is ${JSON.stringify(currentDataset)}`)
},
}
})
.add("slide-click event", {
template:
`<div style="width: 100%; display: flex; justify-content: center; margin-top: 40px;">
<carousel style="width: 500px;">
<slide v-for="slide in slides" :key="slide" @slide-click="onSlideClick">
<img style="width: 100%;" :src="slide" />
</slide>
</carousel>
</div>`,
components: {
Carousel,
Slide
},
data() {
return {
slides: images
}
},
methods: {
onSlideClick(currentDataset) {
this.$log(`Captured [slide-click] event. Current dataset is ${JSON.stringify(currentDataset)}`)
},
}
})
.add("page-change event", {
template:
`<div style="width: 100%; display: flex; justify-content: center; margin-top: 40px;">
<carousel style="width: 500px;" @page-change="onPageChange">
<slide v-for="slide in slides" :key="slide">
<img style="width: 100%;" :src="slide" />
</slide>
</carousel>
</div>`,
components: {
Carousel,
Slide
},
data() {
return {
slides: images
}
},
methods: {
onPageChange(currentPage) {
this.$log(`Captured [page-change] event. Current page is ${currentPage}`)
},
}
})
.add("NavigateTo pages", {
template:
`<div style="width: 100%; display: flex; justify-content: center; margin-top: 40px;">
<carousel style="width: 500px;" :navigateTo="newPage" v-on:pageChange="pageChanged">
<carousel style="width: 500px;" :navigateTo="newPage" v-on:pagechange="pageChanged">
<slide v-for="slide in slides" :key="slide">
<img style="width: 100%;" :src= slide />
</slide>
Expand Down Expand Up @@ -240,7 +312,7 @@ play("Carousel", module)
.add("NavigateTo slides", {
template:
`<div style="width: 100%; display: flex; justify-content: center; margin-top: 40px;">
<carousel style="width: 500px;" :navigateTo="newSlide" :scrollPerPage=false v-on:pageChange="pageChanged">
<carousel style="width: 500px;" :navigateTo="newSlide" :scrollPerPage=false v-on:pagechange="pageChanged">
<slide v-for="slide in slides" :key="slide.src">
<img style="width: 100%;" :src= slide />
</slide>
Expand Down Expand Up @@ -274,7 +346,59 @@ play("Carousel", module)
h, containerWidth, [h(Carousel, { props: { spacePadding: 100, perPage: 1} }, generateSlideImages(h))]
)
)
.add("Transition end", {
.add("transitionStart event", {
template: `<div style="width: 100%; display: flex; justify-content: center; margin-top: 40px;">
<carousel
style="width: 500px;"
@transitionStart="handleTransitionStart"
>
<slide v-for="slide in slides" :key="slide.src">
<img style="width: 100%;" :src= slide />
</slide>
</carousel>
</div>`,
data() {
return {
slides: images
}
},
components: {
Carousel,
Slide
},
methods: {
handleTransitionStart() {
this.$log('Captured [transitionStart] event')
}
}
})
.add("transition-start event", {
template: `<div style="width: 100%; display: flex; justify-content: center; margin-top: 40px;">
<carousel
style="width: 500px;"
@transition-start="handleTransitionStart"
>
<slide v-for="slide in slides" :key="slide.src">
<img style="width: 100%;" :src= slide />
</slide>
</carousel>
</div>`,
data() {
return {
slides: images
}
},
components: {
Carousel,
Slide
},
methods: {
handleTransitionStart() {
this.$log('Captured [transition-start] event')
}
}
})
.add("transitionEnd event", {
template: `<div style="width: 100%; display: flex; justify-content: center; margin-top: 40px;">
<carousel
style="width: 500px;"
Expand All @@ -296,7 +420,33 @@ play("Carousel", module)
},
methods: {
handleTransitionEnd() {
alert('transition end!')
this.$log('Captured [transitionEnd] event')
}
}
})
.add("transition-end event", {
template: `<div style="width: 100%; display: flex; justify-content: center; margin-top: 40px;">
<carousel
style="width: 500px;"
@transition-end="handleTransitionEnd"
>
<slide v-for="slide in slides" :key="slide.src">
<img style="width: 100%;" :src= slide />
</slide>
</carousel>
</div>`,
data() {
return {
slides: images
}
},
components: {
Carousel,
Slide
},
methods: {
handleTransitionEnd() {
this.$log('Captured [transition-end] event')
}
}
})
Expand Down Expand Up @@ -329,7 +479,7 @@ play("Carousel", module)
template:
`<div style="width: 100%; display: flex; justify-content: center; margin-top: 40px;">
<carousel style="width: 500px;" :navigateTo="newSlide" :scrollPerPage=false>
<slide v-for="(slide, index) in slides" :key="slide.src" :data-index="index" v-on:slideClick="onSlideClick">
<slide v-for="(slide, index) in slides" :key="slide.src" :data-index="index" v-on:slideclick="onSlideClick">
<img style="width: 100%;" :src= slide />
</slide>
</carousel>
Expand Down

0 comments on commit 0714379

Please sign in to comment.