Skip to content

Commit 2a9fae2

Browse files
rstoenescurstoenescu
committed
feat: Further port of Components to the new architecture
1 parent 2f9caaf commit 2a9fae2

39 files changed

+1049
-249
lines changed

‎dev/app.js‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,25 +34,31 @@ router.map({
3434
'/dropdown': { component: require('view/dropdown.vue') },
3535
'/flex': { component: require('view/flex.vue') },
3636
'/form': { component: require('view/form.vue') },
37+
'/infinite-scroll': { component: require('view/infinite-scroll.vue') },
3738
'/loading': { component: require('view/loading.vue') },
3839
'/modal': { component: require('view/modal.vue') },
3940
'/label': { component: require('view/label.vue') },
4041
'/list': { component: require('view/list.vue') },
4142
'/notify': { component: require('view/notify.vue') },
4243
'/pagination': { component: require('view/pagination.vue') },
44+
'/parallax': { component: require('view/parallax.vue') },
4345
'/progressbar': { component: require('view/progressbar.vue') },
46+
'/pull-to-refresh': { component: require('view/pull-to-refresh.vue') },
4447
'/rating': { component: require('view/rating.vue') },
48+
'/scroll-fire': { component: require('view/scroll-fire.vue') },
49+
'/slider': { component: require('view/slider.vue') },
4550
'/spinners': { component: require('view/spinners.vue') },
4651
'/table': { component: require('view/table.vue') },
4752
'/timeline': { component: require('view/timeline.vue') },
4853
'/tree': { component: require('view/tree.vue') },
49-
'/typography': { component: require('view/typography') }
54+
'/typography': { component: require('view/typography.vue') }
5055
}
5156
},
5257
'/layout': {
5358
component: require('view/layout.vue'),
5459
subRoutes: {
55-
'/alarm': { component: {} },
60+
'/': { component: require('view/layout-index.vue') },
61+
'/alarm': { component: {template: '<div v-for="n in 100">gigi</div>'} },
5662
'/help': { component: {} }
5763
}
5864
}

‎dev/components/slider-modal.vue‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<template>
2+
<quasar-slider arrows dots class="text-white full-height">
3+
<div slot="slide" class="bg-primary centered">
4+
<div>Slide 1</div>
5+
<button class="dark glossy" @click="close()">Close Me</button>
6+
</div>
7+
<div slot="slide" class="bg-secondary centered">
8+
<div>Slide 2</div>
9+
<button class="dark glossy" @click="close()">Close Me</button>
10+
</div>
11+
<div slot="slide" class="bg-tertiary centered">
12+
<div>Slide 3</div>
13+
<button class="dark glossy" @click="close()">Close Me</button>
14+
</div>
15+
</quasar-slider>
16+
</template>
17+
18+
<script>
19+
export default {}
20+
</script>

‎dev/statics/mountains.jpg‎

155 KB
Loading

‎dev/statics/parallax1.jpg‎

200 KB
Loading

‎dev/statics/parallax2.jpg‎

149 KB
Loading

‎dev/views/index.vue‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,14 +25,19 @@ export default {
2525
'Dropdown',
2626
'Flex',
2727
'Form',
28+
'Infinite Scroll',
2829
'Loading',
2930
'Label',
3031
'List',
3132
'Modal',
3233
'Notify',
3334
'Pagination',
35+
'Parallax',
3436
'Progressbar',
37+
'Pull to Refresh',
3538
'Rating',
39+
'Scroll Fire',
40+
'Slider',
3641
'Spinners',
3742
'Table',
3843
'Timeline',
@@ -43,7 +48,7 @@ export default {
4348
},
4449
methods: {
4550
link (page) {
46-
return page.toLowerCase().replace(/ /, '-')
51+
return page.toLowerCase().replace(/ /g, '-')
4752
}
4853
}
4954
}

‎dev/views/infinite-scroll.vue‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<template>
2+
<quasar-infinite-scroll :handler="refresher" inline style="height: 400px; overflow: auto; border: 1px solid black;">
3+
<p v-for="item in items" class="caption">
4+
<span class="label bg-secondary text-white shadow-1">
5+
{{ $index + 1 }}
6+
</span>
7+
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
8+
</p>
9+
10+
<spinner slot="message"></spinner>
11+
</quasar-infinite-scroll>
12+
13+
<br><br>
14+
15+
<quasar-infinite-scroll :handler="refresher">
16+
<p v-for="item in items" class="caption">
17+
<span class="label bg-secondary text-white shadow-1">
18+
{{ $index + 1 }}
19+
</span>
20+
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
21+
</p>
22+
23+
<spinner slot="message"></spinner>
24+
</quasar-infinite-scroll>
25+
</template>
26+
27+
<script>
28+
export default {
29+
data () {
30+
return {
31+
items: [{}, {}, {}, {}, {}]
32+
}
33+
},
34+
methods: {
35+
refresher (index, done) {
36+
console.log('called scroll', index)
37+
38+
setTimeout(() => {
39+
var items = []
40+
41+
for (var i = 0; i < 7; i++) {
42+
items.push({})
43+
}
44+
45+
this.items = this.items.concat(items)
46+
done()
47+
}, 1500)
48+
}
49+
}
50+
}
51+
</script>

‎dev/views/layout-index.vue‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<template>
2+
<div v-for="n in 100">text</div>
3+
<quasar-parallax src="statics/parallax1.jpg" :height="200">
4+
<div slot="loading">Loading...</div>
5+
<h1>Parallax</h1>
6+
</quasar-parallax>
7+
<div v-for="n in 100">text</div>
8+
</template>
9+
10+
<script>
11+
export default {}
12+
</script>

‎dev/views/layout.vue‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -102,8 +102,7 @@
102102
</quasar-tabs>
103103

104104
<div class="layout-content">
105-
<div>Search: '{{ search }}'</div>
106-
<div v-for="n in 100">text</div>
105+
<router-view></router-view>
107106
</div>
108107

109108
<div class="layout-footer">

‎dev/views/parallax.vue‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<template>
2+
<h1>Parallax</h1>
3+
4+
<p v-for="n in 7" class="par-text">{{loremipsum}}</p>
5+
6+
<quasar-parallax src="statics/parallax1.jpg" :height="200">
7+
<div slot="loading">Loading...</div>
8+
<h1>Parallax</h1>
9+
</quasar-parallax>
10+
11+
<p v-for="n in 7" class="par-text">{{loremipsum}} CHOP!!!!</p>
12+
13+
<quasar-parallax src="statics/parallax2.jpg">
14+
<div slot="loading">Loading...</div>
15+
<h1>Parallax</h1>
16+
</quasar-parallax>
17+
18+
<p v-for="n in 7" class="par-text">{{loremipsum}}</p>
19+
20+
<quasar-parallax src="statics/parallax1.jpg">
21+
<div slot="loading">Loading...</div>
22+
<h1>Parallax</h1>
23+
</quasar-parallax>
24+
25+
<p v-for="n in 7" class="par-text">{{loremipsum}}</p>
26+
27+
<quasar-parallax src="statics/mountains.jpg" :height="200">
28+
<div slot="loading">Loading...</div>
29+
<h1>Parallax</h1>
30+
</quasar-parallax>
31+
32+
<p v-for="n in 7" class="par-text">{{loremipsum}}</p>
33+
</template>
34+
35+
<script>
36+
import { ActionSheet } from 'quasar'
37+
38+
export default {
39+
data () {
40+
return {
41+
loremipsum: 'Lorem ipsum dolor sit amet, consectetur adipiscing 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.'
42+
}
43+
}
44+
}
45+
</script>

0 commit comments

Comments
 (0)