Skip to content

Commit 663b9a8

Browse files
J-Sekjohnleider
J-Sek
and
johnleider
authored
feat(VWindow): vertical arrows (#21587)
Co-authored-by: John Leider <[email protected]>
1 parent b610813 commit 663b9a8

File tree

7 files changed

+177
-1
lines changed

7 files changed

+177
-1
lines changed

‎packages/docs/src/examples/v-carousel/misc-vertical.vue

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
<template>
2+
<v-defaults-provider :defaults="{ VBtn: { variant: 'outlined', color: '#eee' } }">
3+
<v-sheet class="overflow-hidden" max-width="700" rounded="xl">
4+
<v-carousel
5+
v-model="currentIndex"
6+
direction="vertical"
7+
height="400"
8+
progress="red"
9+
vertical-arrows="left"
10+
vertical-delimiters="right"
11+
hide-delimiter-background
12+
>
13+
<v-carousel-item
14+
v-for="(item, i) in items"
15+
:key="i"
16+
:src="item.src"
17+
cover
18+
></v-carousel-item>
19+
20+
<v-overlay
21+
:scrim="false"
22+
content-class="w-100 h-100 d-flex flex-column align-center justify-space-between pointer-pass-through py-3"
23+
contained
24+
model-value
25+
no-click-animation
26+
persistent
27+
>
28+
<v-scroll-x-transition mode="out-in" appear>
29+
<v-sheet
30+
:key="currentIndex"
31+
rounded="xl"
32+
>
33+
<v-list-item
34+
:prepend-avatar="`https://randomuser.me/api/portraits/${currentItem.avatarId}.jpg`"
35+
:subtitle="currentItem.subtitle"
36+
:title="currentItem.authorName"
37+
class="pa-1 pr-6"
38+
></v-list-item>
39+
</v-sheet>
40+
</v-scroll-x-transition>
41+
<v-chip
42+
:text="`${ currentIndex + 1 } / ${items.length }`"
43+
color="#eee"
44+
size="small"
45+
variant="flat"
46+
></v-chip>
47+
</v-overlay>
48+
</v-carousel>
49+
</v-sheet>
50+
</v-defaults-provider>
51+
</template>
52+
53+
<script setup>
54+
import { shallowRef, toRef } from 'vue'
55+
56+
const currentIndex = shallowRef(0)
57+
const currentItem = toRef(() => items[currentIndex.value])
58+
const items = [
59+
{
60+
authorName: 'Bettany Nichols',
61+
avatarId: 'women/31',
62+
subtitle: '31k followers',
63+
src: 'https://cdn.vuetifyjs.com/images/carousel/squirrel.jpg',
64+
},
65+
{
66+
authorName: 'Greg Kovalsky',
67+
avatarId: 'men/61',
68+
subtitle: '412 followers',
69+
src: 'https://cdn.vuetifyjs.com/images/carousel/sky.jpg',
70+
},
71+
{
72+
authorName: 'Emma Kathleen',
73+
avatarId: 'women/34',
74+
subtitle: '521 followers',
75+
src: 'https://cdn.vuetifyjs.com/images/carousel/bird.jpg',
76+
},
77+
{
78+
authorName: 'Anthony McKenzie',
79+
avatarId: 'men/78',
80+
subtitle: '6k followers',
81+
src: 'https://cdn.vuetifyjs.com/images/carousel/planet.jpg',
82+
},
83+
]
84+
</script>
85+
86+
<script>
87+
export default {
88+
data () {
89+
return {
90+
currentIndex: 0,
91+
items: [
92+
{
93+
authorName: 'Bettany Nichols',
94+
avatarId: 'women/31',
95+
subtitle: '31k followers',
96+
src: 'https://cdn.vuetifyjs.com/images/carousel/squirrel.jpg',
97+
},
98+
{
99+
authorName: 'Greg Kovalsky',
100+
avatarId: 'men/61',
101+
subtitle: '412 followers',
102+
src: 'https://cdn.vuetifyjs.com/images/carousel/sky.jpg',
103+
},
104+
{
105+
authorName: 'Emma Kathleen',
106+
avatarId: 'women/34',
107+
subtitle: '521 followers',
108+
src: 'https://cdn.vuetifyjs.com/images/carousel/bird.jpg',
109+
},
110+
{
111+
authorName: 'Anthony McKenzie',
112+
avatarId: 'men/78',
113+
subtitle: '6k followers',
114+
src: 'https://cdn.vuetifyjs.com/images/carousel/planet.jpg',
115+
},
116+
],
117+
}
118+
},
119+
computed: {
120+
currentItem () {
121+
return this.items[this.currentIndex]
122+
},
123+
},
124+
}
125+
</script>

‎packages/docs/src/pages/en/components/carousels.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,3 +88,11 @@ You can show a linear progress bar with the **progress** prop. It will indicate
8888
You can control carousel with **v-model**.
8989

9090
<ExamplesExample file="v-carousel/prop-model" />
91+
92+
### Misc
93+
94+
#### Vertical with overlay content
95+
96+
Carousel can be augmented with additional content simply by placing VOverlay next to it.
97+
98+
<ExamplesExample file="v-carousel/misc-vertical" />

‎packages/vuetify/src/components/VWindow/VWindow.sass

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,23 @@
4141
.v-window__right
4242
transform: translateX(0)
4343

44+
&--vertical-arrows
45+
.v-window__controls
46+
flex-direction: column
47+
justify-content: center
48+
gap: $window-controls-vertical-gap
49+
50+
&--left
51+
align-items: start
52+
53+
&--right
54+
align-items: end
55+
56+
.v-window__left,
57+
.v-window__right
58+
.v-icon
59+
transform: rotate(90deg)
60+
4461
@include tools.layer('transitions')
4562
.v-window
4663
&-x-transition,

‎packages/vuetify/src/components/VWindow/VWindow.tsx

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,7 @@ export const makeVWindowProps = propsFactory({
6565
type: [Boolean, String],
6666
validator: (v: any) => typeof v === 'boolean' || v === 'hover',
6767
},
68+
verticalArrows: [Boolean, String] as PropType<boolean | 'left' | 'right'>,
6869
touch: {
6970
type: [Object, Boolean] as PropType<boolean | TouchHandlers>,
7071
default: undefined,
@@ -228,6 +229,7 @@ export const VWindow = genericComponent<new <T>(
228229
'v-window',
229230
{
230231
'v-window--show-arrows-on-hover': props.showArrows === 'hover',
232+
'v-window--vertical-arrows': !!props.verticalArrows,
231233
},
232234
themeClasses.value,
233235
props.class,
@@ -244,7 +246,13 @@ export const VWindow = genericComponent<new <T>(
244246
{ slots.default?.({ group }) }
245247

246248
{ props.showArrows !== false && (
247-
<div class="v-window__controls">
249+
<div
250+
class={[
251+
'v-window__controls',
252+
{ 'v-window__controls--left': props.verticalArrows === 'left' || props.verticalArrows === true },
253+
{ 'v-window__controls--right': props.verticalArrows === 'right' },
254+
]}
255+
>
248256
{ arrows.value }
249257
</div>
250258
)}

‎packages/vuetify/src/components/VWindow/_variables.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,4 @@
33
// VWindow
44
$window-transition: .3s cubic-bezier(.25, .8, .50, 1) !default;
55
$window-controls-padding: 0 16px !default;
6+
$window-controls-vertical-gap: 12px !default;

‎packages/vuetify/src/styles/utilities/_index.sass

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
@use '../tools'
66
@use './display'
77
@use './elevation'
8+
@use './pointer-events'
89
@use './screenreaders'
910

1011
@include tools.layer('utilities')

‎packages/vuetify/src/styles/utilities/_pointer-events.sass

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
@use 'sass:list'
2+
@use '../settings'
3+
@use '../tools'
4+
5+
@if (settings.$utilities != false and list.length(settings.$utilities) > 0)
6+
@include tools.layer('utilities')
7+
.pointer-events-none
8+
pointer-events: none !important
9+
10+
.pointer-events-auto
11+
pointer-events: auto !important
12+
13+
.pointer-pass-through
14+
pointer-events: none !important
15+
> *
16+
pointer-events: auto !important

0 commit comments

Comments
 (0)