forked from Mobistudy/Mobistudyapp
-
Notifications
You must be signed in to change notification settings - Fork 0
/
migration rules.txt
104 lines (67 loc) · 2.01 KB
/
migration rules.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
q-alert
Replaced by q-banner
q-btn-dropdown
still exists, but the content has changed to:
<q-btn-dropdown label="....">
<q-list>
<q-item clickable v-close-popup>
<q-item-section>
<q-item-label>...</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-btn-dropdown>
q-card-title
convert to
<q-card-section>
<div class="text-h6"> ... </div>
<div class="text-subtitle1"> ... </div>
</q-card-section>
q-card-main
use <q-card-section> instead
q-card-separator
convert to <q-separator />
q-collapsible
convert to <q-expansion-item
expand-separator
icon="perm_identity"
label="Account settings"
caption="John Doe"
>
q-select
add emit-value map-options
q-tabs
q-tab-pane
q-tab-pane must be put outside of q-tabs
and must be converted to <q-tab-panels v-model="tab"> <q-tab-panel>... </q-tab-panel> </q-tab-panels>
also add v-model="tab" into <q-tabs>
q-datetime
use custom defined QDateInput, QDateTimeInput or QInput with the native HTML date and times
q-list-header
use <q-item-label header>List Header</q-item-label>
q-item-main
use <q-item-label overline> or <q-item-section>
q-item-side
use <q-item-section avatar>
q-modal
use <q-dialog>...</q-dialog>
q-input
change all float-label into label
helper becomes hint
validations now need to go through rules
q-chips-input
must q-select now:
q-field
no need to use it anymore with q-input, use a grid instead, for example:
<div class="row">
<div class="col-2 text-bold q-pt-lg"> .... </div>
<div class="col"> .... </div>
</div>
error must be brought into input and error-label must be changed into error-message
custom q-field are also possible, for example:
<q-field hint="..." :error="..." error-message="...">
<q-checkbox v-model="..." label="..." val="..."/>
<q-checkbox v-model="..." label="..." val="..."/>
</q-field>
this.$q.dialog
the promise becomes onOk, onCancel and onDismiss