Skip to content

Commit 2dd5ab5

Browse files
rstoenescurstoenescu
committed
fix: Various fixes
1 parent 629962d commit 2dd5ab5

File tree

15 files changed

+98
-94
lines changed

15 files changed

+98
-94
lines changed

‎build/script.clean.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,5 @@ var
22
shell = require('shelljs'),
33
path = require('path')
44

5-
shell.rm('-rf', path.resolve(__dirname, '../dist'))
5+
shell.rm('-rf', path.resolve(__dirname, '../dist/*'))
66
console.log(' Cleaned build artifacts.\n')

dev/components/components/slider-playground.vue renamed to dev/components/components/carousel-playground.vue

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -7,26 +7,26 @@
77
</div>
88

99
<p class="caption">Empty</p>
10-
<q-slider :infinite="infinite" :autoplay="autoplay" arrows dots fullscreen class="text-white shadow-2" name="empty"/>
10+
<q-carousel :infinite="infinite" :autoplay="autoplay" arrows dots fullscreen class="text-white shadow-2" name="empty"/>
1111

1212
<p class="caption">Only if checked</p>
13-
<q-slider :infinite="infinite" :autoplay="autoplay" arrows dots fullscreen class="text-white shadow-2" name="only if checked">
13+
<q-carousel :infinite="infinite" :autoplay="autoplay" arrows dots fullscreen class="text-white shadow-2" name="only if checked">
1414
<div v-if="checked" slot="slide" class="bg-primary">
1515
<div>v-if checked</div>
1616
<div v-for="n in 12">Line {{(n+2)}}</div>
1717
</div>
18-
</q-slider>
18+
</q-carousel>
1919

2020
<p class="caption">Only if NOT checked</p>
21-
<q-slider :infinite="infinite" :autoplay="autoplay" arrows dots fullscreen class="text-white shadow-2" name="only if not checked">
21+
<q-carousel :infinite="infinite" :autoplay="autoplay" arrows dots fullscreen class="text-white shadow-2" name="only if not checked">
2222
<div v-if="!checked" slot="slide" class="bg-primary">
2323
<div>v-if !checked</div>
2424
<div v-for="n in 12">Line {{(n+2)}}</div>
2525
</div>
26-
</q-slider>
26+
</q-carousel>
2727

2828
<p class="caption">Checked + slide</p>
29-
<q-slider :infinite="infinite" :autoplay="autoplay" arrows dots fullscreen class="text-white shadow-2" name="checked + slide">
29+
<q-carousel :infinite="infinite" :autoplay="autoplay" arrows dots fullscreen class="text-white shadow-2" name="checked + slide">
3030
<div v-if="checked" slot="slide" class="bg-primary">
3131
<div>v-if checked + slide</div>
3232
<div v-for="n in 12">Line {{(n+2)}}</div>
@@ -35,10 +35,10 @@
3535
<div>Slide 2</div>
3636
<div v-for="n in 12">Line {{(n+2)}}</div>
3737
</div>
38-
</q-slider>
38+
</q-carousel>
3939

4040
<p class="caption">NOT checked + slide</p>
41-
<q-slider :infinite="infinite" :autoplay="autoplay" arrows dots fullscreen class="text-white shadow-2" name="NOT checked + slide">
41+
<q-carousel :infinite="infinite" :autoplay="autoplay" arrows dots fullscreen class="text-white shadow-2" name="NOT checked + slide">
4242
<div v-if="!checked" slot="slide" class="bg-primary">
4343
<div>v-if !checked + slide</div>
4444
<div v-for="n in 12">Line {{(n+2)}}</div>
@@ -47,18 +47,18 @@
4747
<div>Slide 2</div>
4848
<div v-for="n in 12">Line {{(n+2)}}</div>
4949
</div>
50-
</q-slider>
50+
</q-carousel>
5151

5252
<p class="caption">1 slides</p>
53-
<q-slider :infinite="infinite" :autoplay="autoplay" arrows dots fullscreen class="text-white shadow-2">
53+
<q-carousel :infinite="infinite" :autoplay="autoplay" arrows dots fullscreen class="text-white shadow-2">
5454
<div slot="slide" class="bg-primary">
5555
<div>Slide 1</div>
5656
<div v-for="n in 12">Line {{(n+2)}}</div>
5757
</div>
58-
</q-slider>
58+
</q-carousel>
5959

6060
<p class="caption">2 slides</p>
61-
<q-slider :infinite="infinite" :autoplay="autoplay" arrows dots fullscreen class="text-white shadow-2">
61+
<q-carousel :infinite="infinite" :autoplay="autoplay" arrows dots fullscreen class="text-white shadow-2">
6262
<div slot="slide" class="bg-primary">
6363
<div>Slide 1</div>
6464
<div v-for="n in 12">Line {{(n+2)}}</div>
@@ -67,10 +67,10 @@
6767
<div>Slide 2</div>
6868
<div v-for="n in 12">Line {{(n+2)}}</div>
6969
</div>
70-
</q-slider>
70+
</q-carousel>
7171

7272
<p class="caption">3 slides</p>
73-
<q-slider :infinite="infinite" :autoplay="autoplay" arrows dots fullscreen class="text-white shadow-2">
73+
<q-carousel :infinite="infinite" :autoplay="autoplay" arrows dots fullscreen class="text-white shadow-2">
7474
<div slot="slide" class="bg-primary">
7575
<div>Slide 1</div>
7676
<div v-for="n in 12">Line {{(n+2)}}</div>
@@ -83,7 +83,7 @@
8383
<div>Slide 3</div>
8484
<div v-for="n in 12">Line {{(n+2)}}</div>
8585
</div>
86-
</q-slider>
86+
</q-carousel>
8787
</div>
8888
</template>
8989

dev/components/components/slider.vue renamed to dev/components/components/carousel.vue

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22
<div>
33
<div class="layout-padding">
44
<p class="caption">
5-
Basic Slider. No controls. Just swipe between slides or
5+
Basic Carousel. No controls. Just swipe between slides or
66
use you mouse to drag slides to left or right.
77
</p>
8-
<q-slider class="text-white">
8+
<q-carousel class="text-white">
99
<div slot="slide" class="bg-primary">
1010
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
1111
</div>
@@ -15,12 +15,12 @@
1515
<div slot="slide" class="bg-tertiary">
1616
Slide 3
1717
</div>
18-
</q-slider>
18+
</q-carousel>
1919

2020
<p class="caption">
21-
Slider with Arrows, Dots and Fullscreen controls.
21+
Carousel with Arrows, Dots and Fullscreen controls.
2222
</p>
23-
<q-slider arrows dots fullscreen class="text-white">
23+
<q-carousel arrows dots fullscreen class="text-white">
2424
<div slot="slide" class="bg-primary">
2525
<div>Slide 1</div>
2626
<div v-for="n in 12">Line {{(n+2)}}</div>
@@ -31,12 +31,12 @@
3131
<div slot="slide" class="bg-tertiary">
3232
Slide 3
3333
</div>
34-
</q-slider>
34+
</q-carousel>
3535

3636
<p class="caption">
37-
Slider with Centered Content and Infinite Scroll
37+
Carousel with Centered Content and Infinite Scroll
3838
</p>
39-
<q-slider infinite arrows dots class="text-white">
39+
<q-carousel infinite arrows dots class="text-white">
4040
<div slot="slide" class="bg-primary centered">
4141
Slide 1
4242
</div>
@@ -46,12 +46,12 @@
4646
<div slot="slide" class="bg-tertiary centered">
4747
Slide 3
4848
</div>
49-
</q-slider>
49+
</q-carousel>
5050

5151
<p class="caption">
52-
Slider with Infinite Scroll and Autoplay
52+
Carousel with Infinite Scroll and Autoplay
5353
</p>
54-
<q-slider infinite autoplay arrows dots class="text-white">
54+
<q-carousel infinite autoplay arrows dots class="text-white">
5555
<div slot="slide" class="bg-primary centered">
5656
Slide 1
5757
</div>
@@ -61,12 +61,12 @@
6161
<div slot="slide" class="bg-tertiary centered">
6262
Slide 3
6363
</div>
64-
</q-slider>
64+
</q-carousel>
6565

6666
<p class="caption">
67-
Slider with Custom Actions as Controls
67+
Carousel with Custom Actions as Controls
6868
</p>
69-
<q-slider arrows dots actions class="text-white">
69+
<q-carousel arrows dots actions class="text-white">
7070
<div slot="slide" class="bg-primary">
7171
<div v-for="n in 20">Slide {{n}}</div>
7272
</div>
@@ -79,16 +79,16 @@
7979
<q-icon slot="action" name="camera_enhance" />
8080
<q-icon slot="action" name="bookmark_border" />
8181
<q-icon slot="action" name="add_shopping_cart" />
82-
</q-slider>
82+
</q-carousel>
8383

8484
<p class="caption">
85-
Launch Slider on Fullscreen
85+
Launch Carousel on Fullscreen
8686
</p>
8787
<q-btn color="primary" class="glossy" @click="$refs.modal.open()">
8888
Launch
8989
</q-btn>
9090
<q-modal ref="modal" maximized>
91-
<q-slider arrows dots class="text-white full-height">
91+
<q-carousel arrows dots class="text-white full-height">
9292
<div slot="slide" class="bg-primary centered">
9393
<h1>Slide 1</h1>
9494
<q-btn color="dark" class="glossy" @click="$refs.modal.close()">Close Me</q-btn>
@@ -101,7 +101,7 @@
101101
<h1>Slide 3</h1>
102102
<q-btn color="dark" class="glossy" @click="$refs.modal.close()">Close Me</q-btn>
103103
</div>
104-
</q-slider>
104+
</q-carousel>
105105
</q-modal>
106106
</div>
107107
</div>

‎dev/components/components/image-gallery.vue‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,14 @@
44
<p class="caption">Gallery</p>
55
<q-gallery :src="gallery"></q-gallery>
66

7-
<p class="caption">Gallery Slider</p>
8-
<q-gallery-slider :src="slider"></q-gallery-slider>
7+
<p class="caption">Gallery Carousel</p>
8+
<q-gallery-carousel :src="slider"></q-gallery-carousel>
99

10-
<p class="caption">Gallery Slider</p>
11-
<q-gallery-slider :src="slider" horizontal-quick-view></q-gallery-slider>
10+
<p class="caption">Gallery Carousel</p>
11+
<q-gallery-carousel :src="slider" horizontal-quick-view></q-gallery-carousel>
1212

13-
<p class="caption">Gallery Slider with Infinite Scroll & Autoplay</p>
14-
<q-gallery-slider dots infinite autoplay :src="secondSlider"></q-gallery-slider>
13+
<p class="caption">Gallery Carousel with Infinite Scroll & Autoplay</p>
14+
<q-gallery-carousel dots infinite autoplay :src="secondSlider"></q-gallery-carousel>
1515
</div>
1616
</div>
1717
</template>

‎src/components.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ export * from './components/alert'
33
export * from './components/autocomplete'
44
export * from './components/btn'
55
export * from './components/card'
6+
export * from './components/carousel'
67
export * from './components/chat'
78
export * from './components/checkbox'
89
export * from './components/chip'
@@ -37,7 +38,6 @@ export * from './components/scroll-area'
3738
export * from './components/search'
3839
export * from './components/select'
3940
export * from './components/slide-transition'
40-
export * from './components/slider'
4141
export * from './components/spinner'
4242
export * from './components/stepper'
4343
export * from './components/tab'

src/components/slider/QSlider.vue renamed to src/components/carousel/QCarousel.vue

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<template>
2-
<div class="q-slider" :class="{fullscreen: inFullscreen}">
3-
<div class="q-slider-inner" v-touch-pan.horizontal="__pan">
2+
<div class="q-carousel" :class="{fullscreen: inFullscreen}">
3+
<div class="q-carousel-inner" v-touch-pan.horizontal="__pan">
44
<div
55
ref="track"
6-
class="q-slider-track"
6+
class="q-carousel-track"
77
:style="trackPosition"
88
:class="{'with-arrows': arrows, 'with-toolbar': toolbar, 'infinite-left': infiniteLeft, 'infinite-right': infiniteRight}"
99
>
@@ -13,19 +13,19 @@
1313
</div>
1414
<div
1515
v-show="arrows && canGoToPrevious"
16-
class="q-slider-left-button row items-center justify-center"
16+
class="q-carousel-left-button row items-center justify-center"
1717
>
1818
<q-icon name="keyboard_arrow_left" @click="previous"></q-icon>
1919
</div>
2020
<div
2121
v-show="arrows && canGoToNext"
22-
class="q-slider-right-button row items-center justify-center"
22+
class="q-carousel-right-button row items-center justify-center"
2323
@click="next"
2424
>
2525
<q-icon name="keyboard_arrow_right"></q-icon>
2626
</div>
27-
<div v-if="toolbar" class="q-slider-toolbar row items-center justify-end">
28-
<div class="q-slider-dots col row items-center justify-center">
27+
<div v-if="toolbar" class="q-carousel-toolbar row items-center justify-end">
28+
<div class="q-carousel-dots col row items-center justify-center">
2929
<q-icon
3030
v-if="dots"
3131
v-for="n in slidesNumber"
@@ -50,18 +50,22 @@
5050

5151
<script>
5252
import Platform from '../../features/platform'
53+
import TouchPan from '../../directives/touch-pan'
5354
import { cssTransform } from '../../utils/dom'
5455
import { between, normalizeToInterval } from '../../utils/format'
5556
import { start, stop } from '../../utils/animate'
56-
import sliderMixin from './slider-mixin'
57+
import CarouselMixin from './carousel-mixin'
5758
import { QIcon } from '../icon'
5859
5960
export default {
60-
name: 'q-slider',
61+
name: 'q-carousel',
6162
components: {
6263
QIcon
6364
},
64-
mixins: [sliderMixin],
65+
directives: {
66+
TouchPan
67+
},
68+
mixins: [CarouselMixin],
6569
data () {
6670
return {
6771
position: 0,

src/components/slider/slider-mixin.js renamed to src/components/carousel/carousel-mixin.js

File renamed without changes.

src/components/slider/slider.ios.styl renamed to src/components/carousel/carousel.ios.styl

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
.q-slider
1+
.q-carousel
22
overflow hidden
33
&.fullscreen
44
z-index $z-absolute
55

6-
.q-slider-inner
6+
.q-carousel-inner
77
position relative
88
height 100%
99

10-
.q-slider-track
10+
.q-carousel-track
1111
padding 0
1212
margin 0
1313
will-change transform
@@ -43,8 +43,8 @@
4343
&.infinite-right > div:nth-child(2)
4444
order 1000
4545

46-
.q-slider-left-button,
47-
.q-slider-right-button
46+
.q-carousel-left-button,
47+
.q-carousel-right-button
4848
position absolute
4949
top 0
5050
bottom 0
@@ -62,12 +62,12 @@
6262
transition opacity .3s
6363
&:hover
6464
opacity $slider-opacity-active
65-
.q-slider-left-button
65+
.q-carousel-left-button
6666
left 0
67-
.q-slider-right-button
67+
.q-carousel-right-button
6868
right 0
6969

70-
.q-slider-toolbar
70+
.q-carousel-toolbar
7171
position absolute
7272
bottom 0
7373
left 0
@@ -80,5 +80,5 @@
8080
cursor pointer
8181
padding 5px
8282
font-size $slider-button-size
83-
.q-slider-dots i
83+
.q-carousel-dots i
8484
font-size $slider-dots-size

0 commit comments

Comments
 (0)