feat(VWindow,VCarousel): **prev** and **next** slots (#12602)

Co-authored-by: Albert Kaaman <albert@kaaman.nu> see #3235
vuetifyjs · Nov 17, 2020 · a0140b0 · a0140b0
1 parent 8808d98
commit a0140b0
Show file tree

Hide file tree

Showing 8 changed files with 166 additions and 18 deletions.
diff --git a/packages/api-generator/src/locale/en/v-window.json b/packages/api-generator/src/locale/en/v-window.json
@@ -13,5 +13,9 @@
   },
   "events": {
     "change": "Emitted when the component value is changed by user interaction"
+  },
+  "slots": {
+    "next": "Slot displaying the arrow switching to the next item",
+    "prev": "Slot displaying the arrow switching to the previous item"
   }
 }
diff --git a/packages/api-generator/src/maps/v-carousel.js b/packages/api-generator/src/maps/v-carousel.js
@@ -1,10 +1,13 @@
+const { NextPrevSlots } = require('./v-window')
+
 module.exports = {
   'v-carousel': {
     slots: [
       {
         name: 'default',
         props: undefined,
       },
+      ...NextPrevSlots,
     ],
     events: [
       {

diff --git a/packages/api-generator/src/maps/v-window.js b/packages/api-generator/src/maps/v-window.js
@@ -1,10 +1,28 @@
+const NextPrevSlots = [{
+  name: 'next',
+  props: {
+    attrs: '{ aria-label: string }',
+    on: '{ click: eventHandler }',
+  },
+  source: 'v-window',
+},
+{
+  name: 'prev',
+  props: {
+    attrs: '{ aria-label: string }',
+    on: '{ click: eventHandler }',
+  },
+  source: 'v-window',
+}]
+
 module.exports = {
   'v-window': {
     slots: [
       {
         name: 'default',
         props: undefined,
       },
+      ...NextPrevSlots,
     ],
     props: [
       {
@@ -22,4 +40,5 @@ module.exports = {
       },
     ],
   },
+  NextPrevSlots,
 }
diff --git a/packages/docs/src/examples/v-carousel/slots-next-prev.vue b/packages/docs/src/examples/v-carousel/slots-next-prev.vue
@@ -0,0 +1,65 @@
+<template>
+  <v-carousel
+    cycle
+    height="400"
+    hide-delimiter-background
+    show-arrows-on-hover
+  >
+    <template v-slot:prev="{ on, attrs }">
+      <v-btn
+        color="success"
+        v-bind="attrs"
+        v-on="on"
+      >Previous slide</v-btn>
+    </template>
+    <template v-slot:next="{ on, attrs }">
+      <v-btn
+        color="info"
+        v-bind="attrs"
+        v-on="on"
+      >Next slide</v-btn>
+    </template>
+    <v-carousel-item
+      v-for="(slide, i) in slides"
+      :key="i"
+    >
+      <v-sheet
+        :color="colors[i]"
+        height="100%"
+      >
+        <v-row
+          class="fill-height"
+          align="center"
+          justify="center"
+        >
+          <div class="display-3">
+            {{ slide }} Slide
+          </div>
+        </v-row>
+      </v-sheet>
+    </v-carousel-item>
+  </v-carousel>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        colors: [
+          'indigo',
+          'warning',
+          'pink darken-2',
+          'red lighten-1',
+          'deep-purple accent-4',
+        ],
+        slides: [
+          'First',
+          'Second',
+          'Third',
+          'Fourth',
+          'Fifth',
+        ],
+      }
+    },
+  }
+</script>
diff --git a/packages/docs/src/examples/v-window/slots-next-prev.vue b/packages/docs/src/examples/v-window/slots-next-prev.vue
@@ -0,0 +1,40 @@
+<template>
+  <v-window show-arrows>
+    <template v-slot:prev="{ on, attrs }">
+      <v-btn
+        color="success"
+        v-bind="attrs"
+        v-on="on"
+      >Previous slide</v-btn>
+    </template>
+    <template v-slot:next="{ on, attrs }">
+      <v-btn
+        color="info"
+        v-bind="attrs"
+        v-on="on"
+      >Next slide</v-btn>
+    </template>
+    <v-window-item
+      v-for="n in 5"
+      :key="`card-${n}`"
+    >
+      <v-card
+        color="grey"
+        height="200"
+      >
+        <v-row
+          class="fill-height"
+          align="center"
+          justify="center"
+        >
+          <h1
+            style="font-size: 5rem;"
+            class="white--text"
+          >
+            Slide {{ n }}
+          </h1>
+        </v-row>
+      </v-card>
+    </v-window-item>
+  </v-window>
+</template>
diff --git a/packages/docs/src/pages/en/components/carousels.md b/packages/docs/src/pages/en/components/carousels.md
@@ -60,6 +60,12 @@ You can hide the carousel navigation controls with `:show-arrows="false"`.
 
 <example file="v-carousel/prop-hide-controls" />
 
+#### Customized arrows
+
+Arrows can be customized by using **prev** and **next** slots.
+
+<example file="v-carousel/slots-next-prev" />
+
 #### Hide delimiters
 
 You can hide the bottom controls with `hide-delimiters` prop.

diff --git a/packages/docs/src/pages/en/components/windows.md b/packages/docs/src/pages/en/components/windows.md
@@ -51,6 +51,12 @@ Reverse `v-window` always displays reverse transition.
 
 <example file="v-window/prop-vertical" />
 
+#### Customized arrows
+
+Arrows can be customized by using **prev** and **next** slots.
+
+<example file="v-window/slots-next-prev" />
+
 ### Misc
 
 #### Account creation

diff --git a/packages/vuetify/src/components/VWindow/VWindow.ts b/packages/vuetify/src/components/VWindow/VWindow.ts
@@ -140,26 +140,31 @@ export default BaseItemGroup.extend({
       icon: string,
       fn: () => void
     ) {
+      const on = {
+        click: () => {
+          this.changedByDelimiters = true
+          fn()
+        },
+      }
+      const attrs = {
+        'aria-label': this.$vuetify.lang.t(`$vuetify.carousel.${direction}`),
+      }
+      const children = this.$scopedSlots[direction]?.({
+        on,
+        attrs,
+      }) ?? [this.$createElement(VBtn, {
+        props: { icon: true },
+        attrs,
+        on,
+      }, [
+        this.$createElement(VIcon, {
+          props: { large: true },
+        }, icon),
+      ])]
+
       return this.$createElement('div', {
         staticClass: `v-window__${direction}`,
-      }, [
-        this.$createElement(VBtn, {
-          props: { icon: true },
-          attrs: {
-            'aria-label': this.$vuetify.lang.t(`$vuetify.carousel.${direction}`),
-          },
-          on: {
-            click: () => {
-              this.changedByDelimiters = true
-              fn()
-            },
-          },
-        }, [
-          this.$createElement(VIcon, {
-            props: { large: true },
-          }, icon),
-        ]),
-      ])
+      }, children)
     },
     genControlIcons () {
       const icons = []