Skip to content

Commit 642c4c5

Browse files
rstoenescurstoenescu
committed
fix: QItem using Ripple
1 parent b10641e commit 642c4c5

File tree

12 files changed

+256
-381
lines changed

12 files changed

+256
-381
lines changed

‎dev/components/components/collapsible.vue‎

Lines changed: 18 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -172,29 +172,28 @@
172172
</div>
173173
</div>
174174
</template>
175-
<script>
176-
export default {
177-
hndl: 0,
178175

179-
data () {
180-
return {
181-
counter: 0
182-
}
183-
},
176+
<script>
177+
export default {
178+
data () {
179+
return {
180+
counter: 0
181+
}
182+
},
184183
185-
methods: {
186-
counter_start () {
187-
console.log('counter start')
184+
methods: {
185+
counter_start () {
186+
console.log('counter start')
188187
189-
this.hndl = setInterval(() => {
190-
this.counter++
191-
}, 1000)
192-
},
193-
counter_stop () {
194-
console.log('counter stop')
188+
this.hndl = setInterval(() => {
189+
this.counter++
190+
}, 1000)
191+
},
192+
counter_stop () {
193+
console.log('counter stop')
195194
196-
clearInterval(this.hndl)
197-
}
195+
clearInterval(this.hndl)
198196
}
199197
}
198+
}
200199
</script>

‎dev/components/components/data-table.vue‎

Lines changed: 88 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -1,126 +1,109 @@
11
<template>
22
<div>
3-
<div>
4-
<div class="column group" style="margin-bottom: 50px">
5-
<q-input v-model="config.title" float-label="Data Table Title" />
3+
<div class="column group" style="margin-bottom: 50px">
4+
<q-input v-model="config.title" float-label="Data Table Title" />
65

7-
<div class="column group gt-sm-row">
8-
<label>
9-
<q-checkbox v-model="config.refresh" />
10-
Refresh
11-
</label>
12-
<label>
13-
<q-checkbox v-model="config.columnPicker" />
14-
Column Picker
15-
</label>
16-
<label>
17-
<q-checkbox v-model="pagination" />
18-
Pagination
19-
</label>
20-
<label>
21-
<q-checkbox v-model="config.responsive" />
22-
Responsive
23-
</label>
24-
<label>
25-
<q-checkbox v-model="config.noHeader" />
26-
No Header
27-
</label>
28-
</div>
6+
<div class="column group gt-sm-row">
7+
<q-checkbox v-model="config.refresh" label="Refresh" />
8+
<q-checkbox v-model="config.columnPicker" label="Column Picker" />
9+
<q-checkbox v-model="pagination" label="Pagination" />
10+
<q-checkbox v-model="config.responsive" label="Responsive" />
11+
<q-checkbox v-model="config.noHeader" label="No Header" />
12+
</div>
2913

30-
<div class="column gt-sm-row group">
31-
<q-select
32-
v-model="config.selection"
33-
label="Selection"
34-
:options="[
35-
{label: 'None', value: false},
36-
{label: 'Single', value: 'single'},
37-
{label: 'Multiple', value: 'multiple'}
38-
]"
39-
/>
14+
<div class="column gt-sm-row group">
15+
<q-select
16+
v-model="config.selection"
17+
label="Selection"
18+
:options="[
19+
{label: 'None', value: false},
20+
{label: 'Single', value: 'single'},
21+
{label: 'Multiple', value: 'multiple'}
22+
]"
23+
/>
4024

41-
<q-select
42-
v-model="config.leftStickyColumns"
43-
label="Left Sticky Columns"
44-
:options="[
45-
{label: 'None', value: 0},
46-
{label: '1', value: 1},
47-
{label: '2', value: 2}
48-
]"
49-
/>
25+
<q-select
26+
v-model="config.leftStickyColumns"
27+
label="Left Sticky Columns"
28+
:options="[
29+
{label: 'None', value: 0},
30+
{label: '1', value: 1},
31+
{label: '2', value: 2}
32+
]"
33+
/>
5034

35+
<q-select
36+
v-model="config.rightStickyColumns"
37+
label="Right Sticky Columns"
38+
:options="[
39+
{label: 'None', value: 0},
40+
{label: '1', value: 1},
41+
{label: '2', value: 2}
42+
]"
43+
/>
44+
</div>
45+
46+
<div>
47+
<h6>Row height ({{rowHeight}}px)</h6>
48+
<br>
49+
<q-range v-model="rowHeight" :min="50" :max="200" label-always />
50+
</div>
51+
52+
<div>
53+
<h6>
54+
Table body
5155
<q-select
52-
v-model="config.rightStickyColumns"
53-
label="Right Sticky Columns"
56+
v-model="bodyHeightProp"
5457
:options="[
55-
{label: 'None', value: 0},
56-
{label: '1', value: 1},
57-
{label: '2', value: 2}
58+
{label: 'Auto', value: 'auto'},
59+
{label: 'Height', value: 'height'},
60+
{label: 'Min Height', value: 'minHeight'},
61+
{label: 'Max Height', value: 'maxHeight'}
5862
]"
5963
/>
60-
</div>
61-
62-
<div>
63-
<h6>Row height ({{rowHeight}}px)</h6>
64-
<br>
65-
<q-range v-model="rowHeight" :min="50" :max="200" label-always />
66-
</div>
67-
68-
<div>
69-
<h6>
70-
Table body
71-
<q-select
72-
v-model="bodyHeightProp"
73-
:options="[
74-
{label: 'Auto', value: 'auto'},
75-
{label: 'Height', value: 'height'},
76-
{label: 'Min Height', value: 'minHeight'},
77-
{label: 'Max Height', value: 'maxHeight'}
78-
]"
79-
/>
80-
<span :style="{fontStyle: bodyHeightProp === 'auto' ? 'italic' : ''}">({{bodyHeight}}px)</span>
81-
</h6>
82-
<br>
83-
<q-range v-model="bodyHeight" :min="100" :max="700" label-always :disable="bodyHeightProp === 'auto'" />
84-
</div>
64+
<span :style="{fontStyle: bodyHeightProp === 'auto' ? 'italic' : ''}">({{bodyHeight}}px)</span>
65+
</h6>
66+
<br>
67+
<q-range v-model="bodyHeight" :min="100" :max="700" label-always :disable="bodyHeightProp === 'auto'" />
8568
</div>
69+
</div>
8670

87-
<q-data-table
88-
:data="table"
89-
:config="config"
90-
:columns="columns"
91-
@refresh="refresh"
92-
@selection="selection"
93-
@rowclick="rowClick"
94-
>
95-
<template slot="col-message" scope="cell">
96-
<span class="light-paragraph">{{cell.data}}</span>
97-
</template>
98-
<template slot="col-source" scope="cell">
99-
<span v-if="cell.data === 'Audit'" class="label text-white bg-primary">
100-
Audit
101-
<q-tooltip>Some data</q-tooltip>
102-
</span>
103-
<span v-else class="label text-white bg-negative">{{cell.data}}</span>
104-
</template>
71+
<q-data-table
72+
:data="table"
73+
:config="config"
74+
:columns="columns"
75+
@refresh="refresh"
76+
@selection="selection"
77+
@rowclick="rowClick"
78+
>
79+
<template slot="col-message" scope="cell">
80+
<span class="light-paragraph">{{cell.data}}</span>
81+
</template>
82+
<template slot="col-source" scope="cell">
83+
<span v-if="cell.data === 'Audit'" class="label text-white bg-primary">
84+
Audit
85+
<q-tooltip>Some data</q-tooltip>
86+
</span>
87+
<span v-else class="label text-white bg-negative">{{cell.data}}</span>
88+
</template>
10589

106-
<template slot="selection" scope="props">
107-
<q-btn flat color="primary" @click="changeMessage(props)">
108-
<q-icon name="edit" />
109-
</q-btn>
110-
<q-btn flat color="primary" @click="deleteRow(props)">
111-
<q-icon name="delete" />
112-
</q-btn>
113-
</template>
114-
</q-data-table>
90+
<template slot="selection" scope="props">
91+
<q-btn flat color="primary" @click="changeMessage(props)">
92+
<q-icon name="edit" />
93+
</q-btn>
94+
<q-btn flat color="primary" @click="deleteRow(props)">
95+
<q-icon name="delete" />
96+
</q-btn>
97+
</template>
98+
</q-data-table>
11599

116-
<div style="height: 100vh; margin-top: 50px;">Page has intended scroll.</div>
117-
</div>
100+
<div style="height: 100vh; margin-top: 50px;">Page has intended scroll.</div>
118101
</div>
119102
</template>
120103

121104
<script>
122-
import { Utils } from 'quasar'
123105
import table from 'data/table.json'
106+
import { clone } from 'quasar'
124107
125108
export default {
126109
methods: {
@@ -256,7 +239,7 @@ export default {
256239
watch: {
257240
pagination (value) {
258241
if (!value) {
259-
this.oldPagination = Utils.clone(this.config.pagination)
242+
this.oldPagination = clone(this.config.pagination)
260243
this.config.pagination = false
261244
return
262245
}

‎dev/components/components/infinite-scroll.vue‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -21,13 +21,7 @@
2121
</template>
2222

2323
<script>
24-
import { QSpinner, QChip } from 'quasar'
25-
2624
export default {
27-
components: {
28-
QSpinner,
29-
QChip
30-
},
3125
data () {
3226
return {
3327
items: [{}, {}, {}, {}, {}]

‎dev/components/components/modal.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -61,19 +61,19 @@
6161
<q-btn flat @click="$refs.layoutModal.close()">
6262
<q-icon name="keyboard_arrow_left" />
6363
</q-btn>
64-
<div class="q-toolbar-title">
64+
<q-toolbar-title>
6565
Header
66-
</div>
66+
</q-toolbar-title>
6767
</q-toolbar>
6868

6969
<q-toolbar slot="header">
7070
<q-search inverted v-model="search" color="none"></q-search>
7171
</q-toolbar>
7272

7373
<q-toolbar slot="footer">
74-
<div class="q-toolbar-title">
74+
<q-toolbar-title>
7575
Footer
76-
</div>
76+
</q-toolbar-title>
7777
</q-toolbar>
7878

7979
<div class="layout-padding">

‎dev/components/components/tree.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
:model="treeModel"
1717
contract-html="<i class='material-icons'>remove_circle</i>"
1818
expand-html="<i class='material-icons'>add_circle</i>"
19-
></q-tree>
19+
/>
2020
</div>
2121
</div>
2222
</template>

‎dev/components/components/video-embedding.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<p class="caption">With Component</p>
55
<q-video
66
src="https://www.youtube.com/embed/k3_tw44QsZQ?rel=0"
7-
></q-video>
7+
/>
88

99
<p class="caption">With HTML Markup</p>
1010
<div class="q-video">

0 commit comments

Comments
 (0)