Update documentation.

Author: antoniandre

src/documentation/index.vue

@@ -156,7 +156,8 @@
     :pause-on-hover="pauseOnHover"
     @autoplay-pause="internalAutoPlaying = false"
     @autoplay-resume="internalAutoPlaying = true")
-    v-icon(slot="pause-icon" large color="white") pause_circle_outline
+    template(v-slot:pause-icon)
+      v-icon(large color="white") pause_circle_outline
     vueper-slide(v-for="(slide, i) in slides1" :key="slide.id" :title="slide.title" :content="slide.content" :style="'background-color: ' + colors[i % 4]")
 
   .subtitle-1.mt-6 Basic autoplay (with pause on mouseover) source code:
@@ -167,7 +168,9 @@
         :title="slide.title"
         :content="slide.content"
         :style="'background-color: ' + colors[i % 4]"></vueper-slide>
-      <i slot="pause-icon" class="icon pause_circle_outline"></i>
+      <template v-slot:pause-icon>
+        <i class="icon pause_circle_outline"></i>
+      </template>
     </vueper-slides>
 
   .subtitle-1 This example full source code:
@@ -190,7 +193,9 @@
         :title="slide.title"
         :content="slide.content"
         :style="'background-color: ' + colors[i % 4]"></vueper-slide>
-      <i slot="pause-icon" class="icon pause_circle_outline"></i>
+      <template v-slot:pause-icon>
+        <i class="icon pause_circle_outline"></i>
+      </template>
     </vueper-slides>
   ssh-pre(language="js" label="Vue JS component").
     data: () => ({
@@ -215,13 +220,19 @@
     The bullets are showing slide indexes which is disabled by default.#[br]
     You can also disable arrows and/or bullets. E.g. #[span.code :arrows="false"], #[span.code :bullets="false"]
   vueper-slides.ex--arrows-and-bullets(:infinite="false" :bullets-outside="true")
-    v-icon(slot="arrow-left" color="white" x-large) undo
-    v-icon(slot="arrow-right" color="white" x-large) redo
+    template(v-slot:arrow-left)
+      v-icon(color="white" x-large) undo
+    template(v-slot:arrow-right)
+      v-icon(color="white" x-large) redo
     vueper-slide(v-for="(slide, i) in slides1" :key="slide.id" :title="slide.title" :content="slide.content" :style="'background-color: ' + colors[(i + 1) % 4]")
   ssh-pre(language="html-vue" label="HTML Vue Template").
     <vueper-slides :infinite="false" :bullets-outside="true">
-      <v-icon slot="arrow-left" color="white" large>arrow_left</v-icon>
-      <v-icon slot="arrow-right" color="white" large>arrow_right</v-icon>
+      <template v-slot:arrow-left>
+        <i class="icon icon-arrow-left"></i>
+      </template>
+      <template v-slot:arrow-right>
+        <i class="icon icon-arrow-right"></i>
+      </template>
       <vueper-slide
         v-for="(slide, i) in slides"
         :key="slide.id"
@@ -344,15 +355,15 @@
         :key="i"
         :style="'background-color: ' + ['#ff5252', '#42b983'][i % 2]">
         <template v-slot:slide-content>
-         <v-icon color="white">check</v-icon>
+         <i class="icon icon-check"></i>
          Complex content with Vue.js {{ "\{\{ 1 === 1 ? 'interpreted' : 'non-interpreted' \}\}" }} compilable content & <span v-pre>{{ '\{\{ mustaches \}\}' }}</span>.
         </template>
       </vueper-slide>
     </vueper-slides>
   highlight(type="info")
     ul.my-0
-      li if both #[span.code :title="..."] and #[span.code slot="slide-title"] are provided, the title slot will be displayed.
-      li if both #[span.code :content="..."] and #[span.code slot="slide-content"] are provided, the content slot will be displayed.
+      li if both #[span.code :title="..."] and #[span.code v-slot:slide-title] are provided, the title slot will be displayed.
+      li if both #[span.code :content="..."] and #[span.code v-slot:slide-content] are provided, the content slot will be displayed.
 
   h3
     a(href="#ex--updating-content") Updating Content Inside/Outside
@@ -380,9 +391,9 @@
   vueper-slides.ex--updating-content(
     :slide-ratio="1/4"
     autoplay
+    always-refresh-clones
     :slide-content-outside="contentPosition === 'false' ? false : contentPosition"
-    slide-content-outside-class="text-center py-4"
-    :refresh-clones-on-drag="true")
+    slide-content-outside-class="text-center py-4")
     vueper-slide(v-for="(slide, i) in slides4" :key="i" :style="'background-color: ' + ['#42b983', '#ff5252'][i % 2]")
       template(v-slot:slide-content)
         v-layout(align-center justify-center)
@@ -399,15 +410,15 @@
         :title="slide.title"
         :content="slide.content"
         :style="'background-color: ' + ['#42b983', '#ff5252'][i % 2]">
-        <div slot="slide-content">
+        <template slot:slide-content>
           <v-layout">
             <v-icon>access_time</v-icon>
             <div>
               <div>{{ '\{\{ slide.title \}\}' }}</div>
               <div>{{ '\{\{ slide.content \}\}' }}</div>
             </div>
           </v-layout>
-        </div>
+        </template>
       </vueper-slide>
     </vueper-slides>
 
@@ -898,7 +909,7 @@
     transitionSpeed:          [Number, String],  default: 600
     pauseOnHover:             [Boolean],         default: true
     infinite:                 [Boolean],         default: true
-    refreshClonesOnDrag:      [Boolean],         default: false
+    alwaysRefreshClones:      [Boolean],         default: false
     parallax:                 [Boolean, Number], default: false
     touchable:                [Boolean],         default: true
     preventYScroll:           [Boolean],         default: false
@@ -1036,12 +1047,12 @@
         as a fade transition slideshow does not need such effect.
 
     li
-      | #[code refreshClonesOnDrag], #[strong.mr-1 Type:] #[span.code.mr-1 [Boolean]], #[strong.mr-1 Default:] #[span.code false]
+      | #[code alwaysRefreshClones], #[strong.mr-1 Type:] #[span.code.mr-1 [Boolean]], #[strong.mr-1 Default:] #[span.code false]
       p.
         With #[span.code infinite] mode on and sliding transitions, the clones
         (#[a(href="#what-are-clones" @click="onWhatAreClonesClick") What are clones?]) are created with a copy of content at
         the time it's created.#[br]Your content can get outdated if you have a fast #[span.code setInterval]
-        operating on content (E.g. a clock).#[br]Set #[span.code refreshClonesOnDrag] to
+        operating on content (E.g. a clock).#[br]Set #[span.code alwaysRefreshClones] to
         #[span.code true] if you want to keep updating clones before you see them while you drag.
       highlight(type="success").
         By default this parameter is disabled to save up operations. In most cases you should
@@ -1393,8 +1404,10 @@
           li If both slide-title slot and title attribute are provided now use the slot.
           li If both slide-content slot and content attribute are provided now use the slot.
           li Improved autoplay pause & resume - manual slide does not resume if paused.
+          li Removed #[span.code refreshClonesOnDrag] option and introduced #[span.code alwaysRefreshClones].
           li TODO: update clones on content/title slots update
           li TODO: update all examples with new slots syntax
+          li TODO: document alwaysRefreshClones
 
     li.mt-6
       strong Version 1.16.0