feat(VSlideGroup): add show-arrows="never"

[bokub]

Description

In VSlideGroup, when the show-arrows prop is false, always hide the arrows. When not set (=== undefined), keep the default behaviour.

Fixes #14586

Motivation and Context

There was no way to hide the arrows completely, even with :show-arrows="false"

How Has This Been Tested?

With Playground.vue, both on Desktop and mobile:

Desktop:

Mobile:

Markup:

<template>
  <v-container>

    <pre class="mx-2">:show-arrows="false"</pre>
    <v-slide-group
      class="pa-4"
      center-active
      :show-arrows="false"
    >
      <v-slide-item
        v-for="n in 15"
        :key="n"
        v-slot="{ active, toggle }"
      >
        <v-card
          :color="active ? 'primary' : 'grey lighten-1'"
          class="ma-4"
          height="200"
          width="100"
          @click="toggle"
        >
          <v-row
            class="fill-height"
            align="center"
            justify="center"
          >
            <v-scale-transition>
              <v-icon
                v-if="active"
                color="white"
                size="48"
                v-text="'mdi-close-circle-outline'"
              ></v-icon>
            </v-scale-transition>
          </v-row>
        </v-card>
      </v-slide-item>
    </v-slide-group>

    <pre class="mx-2">:show-arrows not set (default, same as before)</pre>
    <v-slide-group
      class="pa-4"
      center-active
    >
      <v-slide-item
        v-for="n in 15"
        :key="n"
        v-slot="{ active, toggle }"
      >
        <v-card
          :color="active ? 'primary' : 'grey lighten-1'"
          class="ma-4"
          height="200"
          width="100"
          @click="toggle"
        >
          <v-row
            class="fill-height"
            align="center"
            justify="center"
          >
            <v-scale-transition>
              <v-icon
                v-if="active"
                color="white"
                size="48"
                v-text="'mdi-close-circle-outline'"
              ></v-icon>
            </v-scale-transition>
          </v-row>
        </v-card>
      </v-slide-item>
    </v-slide-group>

    <pre class="mx-2">:show-arrows="true"</pre>
    <v-slide-group
      class="pa-4"
      center-active
      :show-arrows="true"
    >
      <v-slide-item
        v-for="n in 15"
        :key="n"
        v-slot="{ active, toggle }"
      >
        <v-card
          :color="active ? 'primary' : 'grey lighten-1'"
          class="ma-4"
          height="200"
          width="100"
          @click="toggle"
        >
          <v-row
            class="fill-height"
            align="center"
            justify="center"
          >
            <v-scale-transition>
              <v-icon
                v-if="active"
                color="white"
                size="48"
                v-text="'mdi-close-circle-outline'"
              ></v-icon>
            </v-scale-transition>
          </v-row>
        </v-card>
      </v-slide-item>
    </v-slide-group>
  </v-container>
</template>

<script>
  export default {
    data: () => ({
    }),
  }
</script>

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Improvement/refactoring (non-breaking change that doesn't add any features but makes things better)

Checklist:

• The PR title is no longer than 64 characters.
• The PR is submitted to the correct branch (master for bug fixes and documentation updates, dev for new features and backwards compatible changes and next for non-backwards compatible changes).
• My code follows the code style of this project.
• I've added relevant changes to the documentation (applies to new features and breaking changes in core library)

[KaelWD]

This is a breaking change, I'd be ok with show-arrows="never" instead though

[bokub]

Sure, I'll change that !

But what is false supposed to do ? Same as undefined ?

[KaelWD]

Yes, false is the default behaviour (only show arrows on desktop + overflowing)

[bokub]

@KaelWD Fixed it !

New playground code:

<template>
  <v-container fluid>
    <div v-for="opt in [undefined, false, true, 'always', 'never', 'mobile', 'desktop']">
      <pre class="mx-2">show-arrows="{{ opt === undefined ? 'undefined' : opt }}"</pre>
      <v-slide-group
        class="pa-4"
        center-active
        :show-arrows="opt"
      >
        <v-slide-item
          v-for="n in 10"
          :key="n"
          v-slot="{ active, toggle }"
        >
          <v-card
            :color="active ? 'primary' : 'grey lighten-1'"
            class="ma-4"
            height="50"
            width="100"
            @click="toggle"
          >
            <v-row
              class="fill-height"
              align="center"
              justify="center"
            >
              <v-scale-transition>
                <v-icon
                  v-if="active"
                  color="white"
                  size="48"
                  v-text="'mdi-close-circle-outline'"
                ></v-icon>
              </v-scale-transition>
            </v-row>
          </v-card>
        </v-slide-item>
      </v-slide-group>
    </div>
  </v-container>
</template>

<script>
  export default {
    data: () => ({}),
  }
</script>

Screen capture:

[bokub]

Hello, if the code is OK with you, could you please merge this MR ?

Thanks 👍

[HaimCandiTech]

@KaelWD
Please check it out again