1
1
// * ---------------------------------------- The shared props for all inline fields //
2
2
export const sharedProps = {
3
- // ? The vertical alignment of the field //
4
3
alignItems : 'center' as const ,
5
-
6
- // ? The color of the cancel button - [ All Fields ] //
7
4
cancelButtonColor : 'default' ,
8
-
9
- // ? The size of the cancel button - [ All Fields ] //
10
5
cancelButtonSize : 'x-small' ,
11
-
12
- // ? The title of the cancel button - [ All Fields ] //
13
6
cancelButtonTitle : 'Cancel' ,
14
-
15
- // ? The variant of the cancel button - [ All Fields ] //
16
7
cancelButtonVariant : 'tonal' as const ,
17
-
18
- // ? The icon to use to cancel - [ All Fields ] //
19
8
cancelIcon : undefined ,
20
-
21
- // ? The color of the cancel icon - [ All Fields ] //
22
9
cancelIconColor : 'default' ,
23
-
24
- // ? If true, the field will close when the user opens another inline form element - [ All Fields ] //
25
10
closeSiblings : false ,
26
-
27
- // ? The Color of the field - [ All Fields ] //
28
11
color : 'primary' ,
29
-
30
- // ? The field density - [ All Fields ] //
31
12
density : 'compact' as const ,
32
-
33
- // ? Disabled the field - [ All Fields ] //
34
13
disabled : false ,
35
-
36
- // ? Text to display when the field is empty - [ v-textarea, v-text-field ] //
37
14
emptyText : 'empty' ,
38
-
39
- // ? If set to true will only show the field - [ All Fields ] //
40
15
fieldOnly : false ,
41
-
42
- // ? Displays/Hides the field details //
43
16
hideDetails : true ,
44
-
45
- // ! Required The item object - [ All Fields ] //
46
- // item: () => ({}),
47
-
48
- // ? The field label - [ All Fields ] //
49
17
label : '' ,
50
-
51
18
loading : false ,
52
-
53
- // ? The http method to use when saving the text field - [ All Fields ] //
54
- method : 'PUT' ,
55
-
56
- // ? The column name of the field - [ All Fields ] //
19
+ loadingWait : true ,
57
20
name : '' ,
58
-
59
- // ? If the field is used in a table this will remove the top padding //
60
21
tableField : true ,
61
-
62
- // ? The color of the underline - [ All Fields ] //
63
22
underlineColor : 'primary' ,
64
-
65
- // ? The style of the underline - [ All Fields ] //
66
23
underlineStyle : 'dotted' ,
67
-
68
- // ? The width of the underline - [ All Fields ] //
69
24
underlineWidth : '2px' ,
70
-
71
- // ? Displays/Hides the value underline - [ All Fields ] //
72
25
underlined : true ,
73
-
74
- // ? The color of the value - [ All Fields ] //
75
26
valueColor : 'default' ,
76
27
} ;
77
28
78
29
// * ------------------------------ Autofocus //
79
30
const autofocus = {
80
- // ? If true, the field will autofocus //
81
31
autofocus : true ,
82
32
} ;
83
33
84
34
// * ------------------------------ Save & Loading Icon //
85
35
const saveAndLoadingIconProps = {
86
- // ? Displays/Hides the save icon //
87
36
hideSaveIcon : false ,
88
-
89
- // ? The icon to use when loading //
90
37
loadingIcon : undefined ,
91
-
92
- // ? The icon to use when loading //
93
38
loadingIconColor : 'primary' ,
94
-
95
- // ? The color of the save button //
96
39
saveButtonColor : 'primary' ,
97
-
98
- // ? The size of the save button //
99
40
saveButtonSize : 'x-small' ,
100
-
101
- // ? The title of the save button //
102
41
saveButtonTitle : 'Save' ,
103
-
104
- // ? The variant of the save button //
105
42
saveButtonVariant : 'text' as const ,
106
-
107
- // ? The icon to use to save //
108
43
saveIcon : undefined ,
109
-
110
- // ? The icon to use to save //
111
44
saveIconColor : 'primary' ,
112
45
} ;
113
46
114
47
// * ------------------------------ True/False Icons //
115
48
const trueFalseIcons = {
116
- // ? The "false" value of the field - [ v-checkbox, v-switch ] //
117
49
falseValue : false ,
118
-
119
- // ? The false icon - [v-checkbox, v-switch] //
120
50
iconFalse : undefined ,
121
-
122
- // ? The color of the icon when false - [v-checkbox, v-switch] //
123
51
iconFalseColor : 'danger' ,
124
-
125
- // ? The title of the false icon - [v-checkbox, v-switch] //
126
52
iconFalseTitle : 'No' ,
127
-
128
- // ? The true icon - [v-checkbox, v-switch] //
129
53
iconTrue : undefined ,
130
-
131
- // ? The color of the icon when true - [v-checkbox, v-switch] //
132
54
iconTrueColor : 'success' ,
133
-
134
- // ? The title of the true icon - [v-checkbox, v-switch] //
135
55
iconTrueTitle : 'Yes' ,
136
-
137
- // ? Displays/Hides the icons - [v-checkbox, v-switch] //
138
56
icons : true ,
139
-
140
- // ? The "true" value of the field - [v-checkbox, v-switch] //
141
57
trueValue : true ,
142
58
} ;
143
59
144
60
// * ------------------------------ Component Value Icons //
145
61
const valueIcons = {
146
- // ? Displays/Hides the component value icons //
147
62
icons : true ,
148
63
} ;
149
64
@@ -154,14 +69,9 @@ const checkboxProps = {
154
69
...sharedProps ,
155
70
...trueFalseIcons ,
156
71
...{
157
- // ? The icon of the field when false - [ v-checkbox ] //
158
- falseIcon : 'mdi:mdi-checkbox-blank-outline' ,
159
-
160
- // ? Displays/Hides the icons //
72
+ falseIcon : undefined ,
161
73
icons : true ,
162
-
163
- // ? The icon of the field when true - [v-checkbox] //
164
- trueIcon : 'mdi:mdi-checkbox-outline' ,
74
+ trueIcon : undefined ,
165
75
} ,
166
76
} ;
167
77
@@ -171,25 +81,13 @@ const selectProps = {
171
81
...autofocus ,
172
82
...saveAndLoadingIconProps ,
173
83
...{
174
- // ? The icon to use to clear the field //
175
84
clearIcon : undefined ,
176
-
177
- // ? If true, the field will be clearable //
178
85
clearable : false ,
179
-
180
- // ? Hides the selected items //
181
86
hideSelected : true ,
182
-
183
87
itemTitle : 'title' ,
184
-
185
88
itemValue : 'value' ,
186
-
187
- // ? The select list items - [v-select] //
188
89
items : ( ) => ( [ ] ) ,
189
-
190
90
menu : true ,
191
-
192
- // ? The variant of the field //
193
91
variant : 'underlined' as const ,
194
92
} ,
195
93
} ;
@@ -200,7 +98,6 @@ const switchProps = {
200
98
...trueFalseIcons ,
201
99
...valueIcons ,
202
100
...{
203
- // ? The icon of the field when false - [ v-checkbox ] //
204
101
falseIcon : '' ,
205
102
} ,
206
103
} ;
@@ -211,13 +108,8 @@ const textareaProps = {
211
108
...saveAndLoadingIconProps ,
212
109
...sharedProps ,
213
110
...{
214
- // ? Automatically grow the textarea depending on amount of text //
215
111
autoGrow : true ,
216
-
217
- // ? The height of the textarea when autoGrow is false //
218
112
rows : 1 ,
219
-
220
- // ? The variant of the field //
221
113
variant : 'underlined' as const ,
222
114
} ,
223
115
} ;
@@ -228,7 +120,6 @@ const textFieldProps = {
228
120
...autofocus ,
229
121
...saveAndLoadingIconProps ,
230
122
...{
231
- // ? The variant of the field //
232
123
variant : 'underlined' as const ,
233
124
}
234
125
} ;
0 commit comments