comand-component-library 3.1.71 → 3.1.72
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/comand-component-library.css +1 -1
- package/dist/comand-component-library.umd.min.js +1 -1
- package/package.json +2 -2
- package/src/App.vue +265 -179
- package/src/components/CmdBox.vue +6 -4
- package/src/components/CmdFakeSelect.vue +12 -3
- package/src/components/CmdFormElement.vue +51 -40
- package/src/components/CmdInputGroup.vue +19 -7
- package/src/components/CmdToggleDarkMode.vue +30 -10
- package/src/components/CmdTooltip.vue +1 -1
package/src/App.vue
CHANGED
|
@@ -62,18 +62,18 @@
|
|
|
62
62
|
<h3>Form elements status:</h3>
|
|
63
63
|
<div class="flex-container">
|
|
64
64
|
<ul class="list-status">
|
|
65
|
-
<li><a href="#" @click.prevent="
|
|
65
|
+
<li><a href="#" @click.prevent="setStatus('', false)" :class="{'active' : validationStatus === '' && disabledStatus === false}"
|
|
66
66
|
id="status-default">Default</a></li>
|
|
67
|
-
<li class="error"><a href="#" @click.prevent="
|
|
68
|
-
:class="{'active' :
|
|
69
|
-
<li><a href="#" @click.prevent="
|
|
70
|
-
:class="{'active' :
|
|
71
|
-
<li><a href="#" @click.prevent="
|
|
72
|
-
:class="{'active' :
|
|
73
|
-
<li><a href="#" @click.prevent="
|
|
74
|
-
:class="{'active' :
|
|
75
|
-
<li><a href="#" @click.prevent="
|
|
76
|
-
:class="{'active' :
|
|
67
|
+
<li class="error"><a href="#" @click.prevent="setStatus('error', false)"
|
|
68
|
+
:class="{'active' : validationStatus === 'error'}" id="status-error">Error</a></li>
|
|
69
|
+
<li><a href="#" @click.prevent="setStatus('warning', false)"
|
|
70
|
+
:class="{'active' : validationStatus === 'warning'}" id="status-warning">Warning</a></li>
|
|
71
|
+
<li><a href="#" @click.prevent="setStatus('success', false)"
|
|
72
|
+
:class="{'active' : validationStatus === 'success'}" id="status-success">Success</a></li>
|
|
73
|
+
<li><a href="#" @click.prevent="setStatus('info', false)"
|
|
74
|
+
:class="{'active' : validationStatus === 'info'}" id="status-info">Info</a></li>
|
|
75
|
+
<li><a href="#" @click.prevent="setStatus('', true)"
|
|
76
|
+
:class="{'active' : disabledStatus === true}" id="status-disabled">Disabled</a></li>
|
|
77
77
|
</ul>
|
|
78
78
|
</div>
|
|
79
79
|
|
|
@@ -90,7 +90,8 @@
|
|
|
90
90
|
<CmdFormElement labelText="Input (type text):"
|
|
91
91
|
element="input"
|
|
92
92
|
type="text"
|
|
93
|
-
:status="
|
|
93
|
+
:status="validationStatus"
|
|
94
|
+
:disabled="disabledStatus"
|
|
94
95
|
placeholder="Type in text"
|
|
95
96
|
tooltipText="This is a tooltip"
|
|
96
97
|
v-bind="{useCustomTooltip: false}"
|
|
@@ -98,14 +99,16 @@
|
|
|
98
99
|
<CmdFormElement labelText="Input for selectbox:"
|
|
99
100
|
element="select"
|
|
100
101
|
required="required"
|
|
101
|
-
:status="
|
|
102
|
+
:status="validationStatus"
|
|
103
|
+
:disabled="disabledStatus"
|
|
102
104
|
v-model="selectedOption"
|
|
103
105
|
:selectOptions="selectOptionsData"
|
|
104
106
|
/>
|
|
105
107
|
<CmdFormElement labelText="Input for datalist:"
|
|
106
108
|
element="input"
|
|
107
109
|
type="text"
|
|
108
|
-
:status="
|
|
110
|
+
:status="validationStatus"
|
|
111
|
+
:disabled="disabledStatus"
|
|
109
112
|
placeholder="Type in option"
|
|
110
113
|
:datalist="datalist"
|
|
111
114
|
tooltipText="This is a tooltip"
|
|
@@ -114,7 +117,8 @@
|
|
|
114
117
|
<CmdFormElement labelText="Input (type search (without search-button)):"
|
|
115
118
|
element="input"
|
|
116
119
|
type="search"
|
|
117
|
-
:status="
|
|
120
|
+
:status="validationStatus"
|
|
121
|
+
:disabled="disabledStatus"
|
|
118
122
|
:showSearchButton="false"
|
|
119
123
|
placeholder="Search"
|
|
120
124
|
tooltipText="This is a tooltip"
|
|
@@ -123,30 +127,156 @@
|
|
|
123
127
|
<CmdFormElement labelText="Input (type search (with search-button)):"
|
|
124
128
|
element="input"
|
|
125
129
|
type="search"
|
|
126
|
-
:status="
|
|
130
|
+
:status="validationStatus"
|
|
131
|
+
:disabled="disabledStatus"
|
|
127
132
|
placeholder="Search"
|
|
128
133
|
tooltipText="This is a tooltip"
|
|
129
134
|
v-bind="{useCustomTooltip: false}"
|
|
130
135
|
/>
|
|
136
|
+
<h2>Inputfields in Columns</h2>
|
|
137
|
+
<div class="flex-container">
|
|
138
|
+
<CmdFormElement element="input"
|
|
139
|
+
labelText="Label for inputfield (with tooltip):"
|
|
140
|
+
type="text"
|
|
141
|
+
minlength="5"
|
|
142
|
+
id="inputfield1"
|
|
143
|
+
placeholder="This is placeholder text"
|
|
144
|
+
v-model="inputField1"
|
|
145
|
+
tooltipText="This is a tooltip!"
|
|
146
|
+
:status="validationStatus"
|
|
147
|
+
:disabled="disabledStatus"
|
|
148
|
+
/>
|
|
149
|
+
<CmdFormElement element="input"
|
|
150
|
+
labelText="Label for inputfield (required):"
|
|
151
|
+
type="text"
|
|
152
|
+
required="required"
|
|
153
|
+
minlength="5"
|
|
154
|
+
id="inputfield-required"
|
|
155
|
+
placeholder="This is placeholder text"
|
|
156
|
+
v-model="inputFieldRequired"
|
|
157
|
+
tooltipText="This is a tooltip!"
|
|
158
|
+
:status="validationStatus"
|
|
159
|
+
:disabled="disabledStatus"
|
|
160
|
+
/>
|
|
161
|
+
<CmdFormElement element="input"
|
|
162
|
+
labelText="Label for inputfield (with pattern):"
|
|
163
|
+
type="text"
|
|
164
|
+
id="inputfield-pattern"
|
|
165
|
+
placeholder="This is placeholder text"
|
|
166
|
+
pattern="/\d/"
|
|
167
|
+
v-model="inputFieldPattern"
|
|
168
|
+
tooltipText="This is a tooltip!"
|
|
169
|
+
:status="validationStatus"
|
|
170
|
+
:disabled="disabledStatus"
|
|
171
|
+
/>
|
|
172
|
+
</div>
|
|
173
|
+
<!-- begin inputfield in two columns -->
|
|
174
|
+
<div class="flex-container">
|
|
175
|
+
<CmdFormElement labelText="Label for inputfield (with icon):"
|
|
176
|
+
element="input"
|
|
177
|
+
type="text"
|
|
178
|
+
id="inputfield-username"
|
|
179
|
+
fieldIconClass="icon-user-profile"
|
|
180
|
+
placeholder="Type in username"
|
|
181
|
+
tooltipText="This is a tooltip!"
|
|
182
|
+
maxlength="100"
|
|
183
|
+
v-model="inputUsername"
|
|
184
|
+
:status="validationStatus"
|
|
185
|
+
:disabled="disabledStatus"
|
|
186
|
+
/>
|
|
187
|
+
<CmdFormElement element="input"
|
|
188
|
+
labelText="Label for passwordfield:"
|
|
189
|
+
type="password"
|
|
190
|
+
minlength="8"
|
|
191
|
+
maxlength="255"
|
|
192
|
+
id="inputfield-password"
|
|
193
|
+
fieldIconClass="icon-security-settings"
|
|
194
|
+
placeholder="Type in password"
|
|
195
|
+
tooltipText="This is a tooltip!"
|
|
196
|
+
:customRequirements="customRequirements"
|
|
197
|
+
v-model="inputPassword"
|
|
198
|
+
:status="validationStatus"
|
|
199
|
+
:disabled="disabledStatus"
|
|
200
|
+
/>
|
|
201
|
+
</div>
|
|
202
|
+
<!-- end inputfield in two columns -->
|
|
203
|
+
|
|
204
|
+
<CmdFormElement element="input"
|
|
205
|
+
labelText="Label (inline) for inputfield (number):"
|
|
206
|
+
:displayLabelInline="true"
|
|
207
|
+
type="number"
|
|
208
|
+
id="inputfield-number"
|
|
209
|
+
required="required"
|
|
210
|
+
min="0"
|
|
211
|
+
max="9"
|
|
212
|
+
v-model="inputNumber"
|
|
213
|
+
:customRequirements="[customRequirements[2]]"
|
|
214
|
+
:status="validationStatus"
|
|
215
|
+
:disabled="disabledStatus"
|
|
216
|
+
/>
|
|
217
|
+
<CmdFormElement element="input"
|
|
218
|
+
labelText="Label (inline) for inputfield (date):"
|
|
219
|
+
:displayLabelInline="true"
|
|
220
|
+
type="date"
|
|
221
|
+
id="inputfield-date"
|
|
222
|
+
v-model="inputDate"
|
|
223
|
+
:status="validationStatus"
|
|
224
|
+
:disabled="disabledStatus"
|
|
225
|
+
/>
|
|
226
|
+
<CmdFormElement element="input"
|
|
227
|
+
labelText="Label (inline) for inputfield (search) without search-button:"
|
|
228
|
+
:displayLabelInline="true"
|
|
229
|
+
type="search"
|
|
230
|
+
id="inputfield-search-without-searchbutton"
|
|
231
|
+
placeholder="Keyword(s)"
|
|
232
|
+
v-model="inputSearch"
|
|
233
|
+
:showSearchButton="false"
|
|
234
|
+
:status="validationStatus"
|
|
235
|
+
:disabled="disabledStatus"
|
|
236
|
+
/>
|
|
237
|
+
<CmdFormElement element="input"
|
|
238
|
+
labelText="Label (inline) for inputfield (search):"
|
|
239
|
+
:displayLabelInline="true"
|
|
240
|
+
type="search"
|
|
241
|
+
id="inputfield-search-with-searchbutton"
|
|
242
|
+
placeholder="Keyword(s)"
|
|
243
|
+
v-model="inputSearch"
|
|
244
|
+
:status="validationStatus"
|
|
245
|
+
:disabled="disabledStatus"
|
|
246
|
+
/>
|
|
247
|
+
<CmdFormElement element="textarea"
|
|
248
|
+
labelText="Label for textarea:"
|
|
249
|
+
id="textarea"
|
|
250
|
+
minlength="1"
|
|
251
|
+
maxlength="100"
|
|
252
|
+
placeholder="Type in your message"
|
|
253
|
+
v-model="textarea"
|
|
254
|
+
:status="validationStatus"
|
|
255
|
+
:disabled="disabledStatus"
|
|
256
|
+
/>
|
|
257
|
+
<hr/>
|
|
131
258
|
<h2>Fake Selects</h2>
|
|
132
259
|
<div class="flex-container">
|
|
133
260
|
<!-- type === default: normal selectbox (with optional icons) -->
|
|
134
261
|
<CmdFakeSelect labelText="Default selectbox:"
|
|
135
|
-
:status="
|
|
262
|
+
:status="validationStatus"
|
|
263
|
+
:disabled="disabledStatus"
|
|
136
264
|
:selectData="fakeSelectOptionsData"
|
|
137
265
|
v-model="fakeSelectDefault"
|
|
138
266
|
required
|
|
139
267
|
defaultOptionName="Select an option:"
|
|
140
268
|
/>
|
|
141
269
|
<CmdFakeSelect labelText="Default selectbox with icons:"
|
|
142
|
-
:status="
|
|
270
|
+
:status="validationStatus"
|
|
271
|
+
:disabled="disabledStatus"
|
|
143
272
|
:selectData="fakeSelectOptionsWithIconsData"
|
|
144
273
|
v-model="fakeSelectDefaultWithIcons"
|
|
145
274
|
defaultOptionName="Select an option:"
|
|
146
275
|
/>
|
|
147
276
|
<!-- type === checkboxOptions: selectbox with checkboxes for each option -->
|
|
148
277
|
<CmdFakeSelect labelText="Selectbox with checkboxes:"
|
|
149
|
-
:status="
|
|
278
|
+
:status="validationStatus"
|
|
279
|
+
:disabled="disabledStatus"
|
|
150
280
|
:selectData="fakeSelectOptionsData"
|
|
151
281
|
v-model="fakeSelectCheckbox"
|
|
152
282
|
defaultOptionName="Options:"
|
|
@@ -156,7 +286,8 @@
|
|
|
156
286
|
:useCustomTooltip="true"
|
|
157
287
|
/>
|
|
158
288
|
<CmdFakeSelect labelText="Selectbox with filters:"
|
|
159
|
-
:status="
|
|
289
|
+
:status="validationStatus"
|
|
290
|
+
:disabled="disabledStatus"
|
|
160
291
|
:selectData="fakeSelectFilterOptionsData"
|
|
161
292
|
v-model="fakeSelectFilters"
|
|
162
293
|
defaultOptionName="Filters:"
|
|
@@ -165,7 +296,8 @@
|
|
|
165
296
|
:useCustomTooltip="true"
|
|
166
297
|
/>
|
|
167
298
|
<CmdFakeSelect labelText="Selectbox with slot-content:"
|
|
168
|
-
:status="
|
|
299
|
+
:status="validationStatus"
|
|
300
|
+
:disabled="disabledStatus"
|
|
169
301
|
type="content"
|
|
170
302
|
defaultOptionName="HTML-Content:">
|
|
171
303
|
<ul class="custom-fake-select-content">
|
|
@@ -179,14 +311,16 @@
|
|
|
179
311
|
</ul>
|
|
180
312
|
</CmdFakeSelect>
|
|
181
313
|
<CmdFakeSelect labelText="Selectbox with country flags:"
|
|
182
|
-
:status="
|
|
314
|
+
:status="validationStatus"
|
|
315
|
+
:disabled="disabledStatus"
|
|
183
316
|
:selectData="fakeSelectCountriesData"
|
|
184
317
|
v-model="selectedCountry"
|
|
185
318
|
defaultOptionName="Select country:"
|
|
186
319
|
type="country"
|
|
187
320
|
/>
|
|
188
321
|
<CmdFakeSelect labelText="Selectbox with colors:"
|
|
189
|
-
:status="
|
|
322
|
+
:status="validationStatus"
|
|
323
|
+
:disabled="disabledStatus"
|
|
190
324
|
:selectData="fakeSelectColorsData"
|
|
191
325
|
v-model="selectedColor"
|
|
192
326
|
required="required"
|
|
@@ -194,6 +328,8 @@
|
|
|
194
328
|
/>
|
|
195
329
|
</div>
|
|
196
330
|
|
|
331
|
+
<hr/>
|
|
332
|
+
|
|
197
333
|
<!-- begin progress bar -->
|
|
198
334
|
<h2>Progress Bar [native]</h2>
|
|
199
335
|
<CmdProgressBar labelText="Progress Bar (with optional output):" id="progress-bar2" max="100"/>
|
|
@@ -201,7 +337,7 @@
|
|
|
201
337
|
|
|
202
338
|
<!-- begin slider -->
|
|
203
339
|
<h2>Slider [native]</h2>
|
|
204
|
-
<div class="label" :class="
|
|
340
|
+
<div class="label" :class="validationStatus">
|
|
205
341
|
<span class="label-text">Single-Slider (with in- and output):</span>
|
|
206
342
|
<span class="flex-container no-flex">
|
|
207
343
|
<label for="range-value">
|
|
@@ -210,9 +346,9 @@
|
|
|
210
346
|
</span>
|
|
211
347
|
<input
|
|
212
348
|
type="number"
|
|
213
|
-
:class="
|
|
349
|
+
:class="validationStatus"
|
|
214
350
|
v-model="rangeValue"
|
|
215
|
-
:disabled="
|
|
351
|
+
:disabled="disabledStatus"
|
|
216
352
|
min="0"
|
|
217
353
|
max="100"
|
|
218
354
|
id="range-value"
|
|
@@ -225,10 +361,9 @@
|
|
|
225
361
|
<input
|
|
226
362
|
type="range"
|
|
227
363
|
class="range-slider"
|
|
228
|
-
:class="{'disabled': formElementStatus === 'disabled'}"
|
|
229
364
|
id="range-slider"
|
|
230
365
|
v-model="rangeValue"
|
|
231
|
-
:disabled="
|
|
366
|
+
:disabled="disabledStatus"
|
|
232
367
|
min="0"
|
|
233
368
|
max="100"
|
|
234
369
|
/>
|
|
@@ -240,37 +375,40 @@
|
|
|
240
375
|
<hr/>
|
|
241
376
|
|
|
242
377
|
<!-- begin toggle-switch-radio with switch-label (colored) -->
|
|
243
|
-
<h2>Toggle
|
|
378
|
+
<h2>Toggle-Switches</h2>
|
|
244
379
|
<CmdFormElement element="input"
|
|
245
380
|
type="checkbox"
|
|
246
381
|
id="toggle-switch-checkbox"
|
|
247
382
|
v-model="switchButtonCheckboxToggleSwitch"
|
|
248
|
-
labelText="Labeltext for Switch
|
|
383
|
+
labelText="Labeltext for Toggle-Switch without Switch-Label"
|
|
249
384
|
:toggleSwitch="true"
|
|
250
|
-
:status="
|
|
385
|
+
:status="validationStatus"
|
|
386
|
+
:disabled="disabledStatus"
|
|
251
387
|
/>
|
|
252
388
|
<CmdFormElement element="input"
|
|
253
389
|
type="checkbox"
|
|
254
390
|
id="toggle-switch-checkbox"
|
|
255
391
|
v-model="switchButtonCheckbox"
|
|
256
|
-
labelText="Labeltext for Switch
|
|
392
|
+
labelText="Labeltext for Toggle-Switch with Switch-Label"
|
|
257
393
|
inputValue="checkbox1"
|
|
258
394
|
onLabel="Label on"
|
|
259
395
|
offLabel="Label off"
|
|
260
396
|
:toggleSwitch="true"
|
|
261
|
-
:status="
|
|
397
|
+
:status="validationStatus"
|
|
398
|
+
:disabled="disabledStatus"
|
|
262
399
|
/>
|
|
263
400
|
<CmdFormElement element="input"
|
|
264
401
|
type="checkbox"
|
|
265
402
|
id="toggle-switch-checkbox-colored"
|
|
266
403
|
v-model="switchButtonCheckbox"
|
|
267
404
|
inputValue="checkbox2"
|
|
268
|
-
labelText="Labeltext for Switch
|
|
405
|
+
labelText="Labeltext for Toggle-Switch (Checkbox, colored)"
|
|
269
406
|
onLabel="Label on"
|
|
270
407
|
offLabel="Label off"
|
|
271
408
|
:colored="true"
|
|
272
409
|
:toggleSwitch="true"
|
|
273
|
-
:status="
|
|
410
|
+
:status="validationStatus"
|
|
411
|
+
:disabled="disabledStatus"
|
|
274
412
|
/>
|
|
275
413
|
<CmdFormElement element="input"
|
|
276
414
|
type="radio"
|
|
@@ -281,9 +419,10 @@
|
|
|
281
419
|
offLabel="Label off"
|
|
282
420
|
:colored="true"
|
|
283
421
|
:toggleSwitch="true"
|
|
284
|
-
:status="
|
|
422
|
+
:status="validationStatus"
|
|
423
|
+
:disabled="disabledStatus"
|
|
285
424
|
inputValue="radio1"
|
|
286
|
-
labelText="Labeltext for Switch
|
|
425
|
+
labelText="Labeltext for Toggle-Switch (Radio, colored) #1"
|
|
287
426
|
/>
|
|
288
427
|
<CmdFormElement element="input"
|
|
289
428
|
type="radio"
|
|
@@ -294,117 +433,30 @@
|
|
|
294
433
|
offLabel="Label off"
|
|
295
434
|
:colored="true"
|
|
296
435
|
:toggleSwitch="true"
|
|
297
|
-
:status="
|
|
436
|
+
:status="validationStatus"
|
|
437
|
+
:disabled="disabledStatus"
|
|
298
438
|
inputValue="radio2"
|
|
299
|
-
labelText="Labeltext for Switch
|
|
439
|
+
labelText="Labeltext for Toggle-Switch (Radio, colored) #2"
|
|
300
440
|
/>
|
|
301
441
|
<!-- end toggle-switch-radio with switch-label (colored) -->
|
|
302
442
|
|
|
303
|
-
|
|
304
|
-
<div class="flex-container">
|
|
305
|
-
<CmdFormElement element="input"
|
|
306
|
-
labelText="Label for inputfield (with tooltip):"
|
|
307
|
-
type="text"
|
|
308
|
-
minlength="5"
|
|
309
|
-
id="inputfield1"
|
|
310
|
-
placeholder="This is placeholder text"
|
|
311
|
-
v-model="inputField1"
|
|
312
|
-
tooltipText="This is a tooltip!"
|
|
313
|
-
:status="formElementStatus"
|
|
314
|
-
/>
|
|
315
|
-
<CmdFormElement element="input"
|
|
316
|
-
labelText="Label for inputfield (required):"
|
|
317
|
-
type="text"
|
|
318
|
-
required="required"
|
|
319
|
-
minlength="5"
|
|
320
|
-
id="inputfield-required"
|
|
321
|
-
placeholder="This is placeholder text"
|
|
322
|
-
v-model="inputFieldRequired"
|
|
323
|
-
tooltipText="This is a tooltip!"
|
|
324
|
-
:status="formElementStatus"
|
|
325
|
-
/>
|
|
326
|
-
<CmdFormElement element="input"
|
|
327
|
-
labelText="Label for inputfield (with pattern):"
|
|
328
|
-
type="text"
|
|
329
|
-
id="inputfield-pattern"
|
|
330
|
-
placeholder="This is placeholder text"
|
|
331
|
-
pattern="/\d/"
|
|
332
|
-
v-model="inputFieldPattern"
|
|
333
|
-
tooltipText="This is a tooltip!"
|
|
334
|
-
:status="formElementStatus"
|
|
335
|
-
/>
|
|
336
|
-
</div>
|
|
337
|
-
<!-- begin inputfield in two columns -->
|
|
338
|
-
<div class="flex-container">
|
|
339
|
-
<CmdFormElement labelText="Label for inputfield (with icon):"
|
|
340
|
-
element="input"
|
|
341
|
-
type="text"
|
|
342
|
-
id="inputfield-username"
|
|
343
|
-
fieldIconClass="icon-user-profile"
|
|
344
|
-
placeholder="Type in username"
|
|
345
|
-
tooltipText="This is a tooltip!"
|
|
346
|
-
maxlength="100"
|
|
347
|
-
v-model="inputUsername"
|
|
348
|
-
:status="formElementStatus"
|
|
349
|
-
/>
|
|
350
|
-
<CmdFormElement element="input"
|
|
351
|
-
labelText="Label for passwordfield:"
|
|
352
|
-
type="password"
|
|
353
|
-
minlength="8"
|
|
354
|
-
maxlength="255"
|
|
355
|
-
id="inputfield-password"
|
|
356
|
-
fieldIconClass="icon-security-settings"
|
|
357
|
-
placeholder="Type in password"
|
|
358
|
-
tooltipText="This is a tooltip!"
|
|
359
|
-
:customRequirements="customRequirements"
|
|
360
|
-
v-model="inputPassword"
|
|
361
|
-
:status="formElementStatus"/>
|
|
362
|
-
</div>
|
|
363
|
-
<!-- end inputfield in two columns -->
|
|
364
|
-
|
|
443
|
+
<!-- begin checkboxes and radiobuttons -->
|
|
365
444
|
<CmdFormElement element="input"
|
|
366
|
-
labelText="Label (
|
|
367
|
-
|
|
368
|
-
type="number"
|
|
369
|
-
id="inputfield-number"
|
|
445
|
+
labelText="Label for (required) checkbox with boolean"
|
|
446
|
+
type="checkbox"
|
|
370
447
|
required="required"
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
:
|
|
375
|
-
|
|
376
|
-
<
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
<CmdFormElement element="input"
|
|
384
|
-
labelText="Label (inline) for inputfield (search) without search-button:"
|
|
385
|
-
:displayLabelInline="true"
|
|
386
|
-
type="search"
|
|
387
|
-
id="inputfield-search-without-searchbutton"
|
|
388
|
-
placeholder="Keyword(s)"
|
|
389
|
-
v-model="inputSearch"
|
|
390
|
-
:showSearchButton="false"
|
|
391
|
-
:status="formElementStatus"/>
|
|
392
|
-
<CmdFormElement element="input"
|
|
393
|
-
labelText="Label (inline) for inputfield (search):"
|
|
394
|
-
:displayLabelInline="true"
|
|
395
|
-
type="search"
|
|
396
|
-
id="inputfield-search-with-searchbutton"
|
|
397
|
-
placeholder="Keyword(s)"
|
|
398
|
-
v-model="inputSearch"
|
|
399
|
-
:status="formElementStatus"/>
|
|
400
|
-
<CmdFormElement element="textarea"
|
|
401
|
-
labelText="Label for textarea:"
|
|
402
|
-
id="textarea"
|
|
403
|
-
minlength="1"
|
|
404
|
-
maxlength="100"
|
|
405
|
-
placeholder="Type in your message"
|
|
406
|
-
v-model="textarea"
|
|
407
|
-
:status="formElementStatus"/>
|
|
448
|
+
id="checkbox-required-with-boolean"
|
|
449
|
+
v-model="checkboxRequiredValue"
|
|
450
|
+
:status="validationStatus"
|
|
451
|
+
:disabled="disabledStatus"
|
|
452
|
+
/>
|
|
453
|
+
<p>
|
|
454
|
+
checkbox (required) with boolean: {{ checkboxRequiredValue }}<br/>
|
|
455
|
+
checkbox with boolean: {{ checkboxValue }}<br/>
|
|
456
|
+
checkboxes with values: {{ checkboxValues }}
|
|
457
|
+
</p>
|
|
458
|
+
<h2>Checkboxes and Radibuttons</h2>
|
|
459
|
+
<h3>Checkboxes [native]</h3>
|
|
408
460
|
<div class="label inline">
|
|
409
461
|
<span class="label-text">Label for native checkboxes:</span>
|
|
410
462
|
<div class="flex-container no-flex">
|
|
@@ -413,35 +465,30 @@
|
|
|
413
465
|
type="checkbox"
|
|
414
466
|
id="checkbox-with-boolean"
|
|
415
467
|
v-model="checkboxValue"
|
|
416
|
-
:status="
|
|
468
|
+
:status="validationStatus"
|
|
469
|
+
:disabled="disabledStatus"
|
|
470
|
+
/>
|
|
417
471
|
<CmdFormElement element="input"
|
|
418
472
|
labelText="Label for checkbox with value"
|
|
419
473
|
v-model="checkboxValues"
|
|
420
474
|
inputValue="checkboxValue1"
|
|
421
475
|
type="checkbox"
|
|
422
476
|
id="checkbox-with-value-1"
|
|
423
|
-
:status="
|
|
477
|
+
:status="validationStatus"
|
|
478
|
+
:disabled="disabledStatus"
|
|
479
|
+
/>
|
|
424
480
|
<CmdFormElement element="input"
|
|
425
481
|
labelText="Label for checkbox with value"
|
|
426
482
|
v-model="checkboxValues"
|
|
427
483
|
inputValue="checkboxValue2"
|
|
428
484
|
type="checkbox"
|
|
429
485
|
id="checkbox-with-value-2"
|
|
430
|
-
:status="
|
|
486
|
+
:status="validationStatus"
|
|
487
|
+
:disabled="disabledStatus"
|
|
488
|
+
/>
|
|
431
489
|
</div>
|
|
432
490
|
</div>
|
|
433
|
-
<
|
|
434
|
-
labelText="Label for (required) checkbox with boolean"
|
|
435
|
-
type="checkbox"
|
|
436
|
-
required="required"
|
|
437
|
-
id="checkbox-required-with-boolean"
|
|
438
|
-
v-model="checkboxRequiredValue"
|
|
439
|
-
:status="formElementStatus"/>
|
|
440
|
-
<p>
|
|
441
|
-
checkbox (required) with boolean: {{ checkboxRequiredValue }}<br/>
|
|
442
|
-
checkbox with boolean: {{ checkboxValue }}<br/>
|
|
443
|
-
checkboxes with values: {{ checkboxValues }}
|
|
444
|
-
</p>
|
|
491
|
+
<h3>Checkboxes (replaced)</h3>
|
|
445
492
|
<div class="label inline">
|
|
446
493
|
<span class="label-text">Label for Replaced Input-Type-Checkbox:</span>
|
|
447
494
|
<div class="flex-container no-flex">
|
|
@@ -452,7 +499,9 @@
|
|
|
452
499
|
id="inputfield9"
|
|
453
500
|
v-model="replacedCheckboxValue"
|
|
454
501
|
inputValue="checkboxValue1"
|
|
455
|
-
:status="
|
|
502
|
+
:status="validationStatus"
|
|
503
|
+
:disabled="disabledStatus"
|
|
504
|
+
/>
|
|
456
505
|
<CmdFormElement element="input"
|
|
457
506
|
labelText="Label for replaced checkbox"
|
|
458
507
|
v-model="replacedCheckboxValue"
|
|
@@ -460,9 +509,12 @@
|
|
|
460
509
|
type="checkbox"
|
|
461
510
|
:replaceInputType="true"
|
|
462
511
|
id="inputfield10"
|
|
463
|
-
:status="
|
|
512
|
+
:status="validationStatus"
|
|
513
|
+
:disabled="disabledStatus"
|
|
514
|
+
/>
|
|
464
515
|
</div>
|
|
465
516
|
</div>
|
|
517
|
+
<h3>Radiobuttons [native]</h3>
|
|
466
518
|
<div class="label inline">
|
|
467
519
|
<span class="label-text">Label for native radiobuttons:</span>
|
|
468
520
|
<div class="flex-container no-flex">
|
|
@@ -473,7 +525,9 @@
|
|
|
473
525
|
name="radiogroup"
|
|
474
526
|
inputValue="radiobuttonValue1"
|
|
475
527
|
v-model="radiobuttonValue"
|
|
476
|
-
:status="
|
|
528
|
+
:status="validationStatus"
|
|
529
|
+
:disabled="disabledStatus"
|
|
530
|
+
/>
|
|
477
531
|
<CmdFormElement element="input"
|
|
478
532
|
labelText="Label for native radiobutton"
|
|
479
533
|
type="radio"
|
|
@@ -481,12 +535,15 @@
|
|
|
481
535
|
name="radiogroup"
|
|
482
536
|
inputValue="radiobuttonValue2"
|
|
483
537
|
v-model="radiobuttonValue"
|
|
484
|
-
:status="
|
|
538
|
+
:status="validationStatus"
|
|
539
|
+
:disabled="disabledStatus"
|
|
540
|
+
/>
|
|
485
541
|
</div>
|
|
486
542
|
</div>
|
|
487
543
|
<p>
|
|
488
544
|
Radiobuttons with values: {{ radiobuttonValue }}
|
|
489
545
|
</p>
|
|
546
|
+
<h3>Radiobuttons (replaced)</h3>
|
|
490
547
|
<div class="label inline">
|
|
491
548
|
<span class="label-text">Label for Replaced Input-Type-Radio:</span>
|
|
492
549
|
<div class="flex-container no-flex">
|
|
@@ -498,7 +555,9 @@
|
|
|
498
555
|
name="replaced-radiogroup"
|
|
499
556
|
inputValue="radiobuttonValue1"
|
|
500
557
|
v-model="replacedRadiobuttonValue"
|
|
501
|
-
:status="
|
|
558
|
+
:status="validationStatus"
|
|
559
|
+
:disabled="disabledStatus"
|
|
560
|
+
/>
|
|
502
561
|
<CmdFormElement element="input"
|
|
503
562
|
labelText="Label for replaced radiobutton"
|
|
504
563
|
type="radio"
|
|
@@ -507,13 +566,20 @@
|
|
|
507
566
|
name="replaced-radiogroup"
|
|
508
567
|
inputValue="radiobuttonValue2"
|
|
509
568
|
v-model="replacedRadiobuttonValue"
|
|
510
|
-
:status="
|
|
569
|
+
:status="validationStatus"
|
|
570
|
+
:disabled="disabledStatus"
|
|
571
|
+
/>
|
|
511
572
|
</div>
|
|
512
573
|
</div>
|
|
574
|
+
<!-- end checkboxes and radiobuttons -->
|
|
575
|
+
|
|
576
|
+
<!-- begin input-groups -->
|
|
513
577
|
<h2>Input-Groups</h2>
|
|
514
578
|
<CmdInputGroup
|
|
515
579
|
labelText="Group label for radio-group given by slot"
|
|
516
580
|
:useSlot="true"
|
|
581
|
+
:status="validationStatus"
|
|
582
|
+
:disabled="disabledStatus"
|
|
517
583
|
>
|
|
518
584
|
<CmdFormElement element="input"
|
|
519
585
|
labelText="Label for radiobutton"
|
|
@@ -522,7 +588,9 @@
|
|
|
522
588
|
name="radiogroup2"
|
|
523
589
|
inputValue="radiobuttonValue1"
|
|
524
590
|
v-model="inputGroupValue1"
|
|
525
|
-
:status="
|
|
591
|
+
:status="validationStatus"
|
|
592
|
+
:disabled="disabledStatus"
|
|
593
|
+
/>
|
|
526
594
|
<CmdFormElement element="input"
|
|
527
595
|
labelText="Label for radiobutton"
|
|
528
596
|
type="radio"
|
|
@@ -530,7 +598,9 @@
|
|
|
530
598
|
name="radiogroup2"
|
|
531
599
|
inputValue="radiobuttonValue2"
|
|
532
600
|
v-model="inputGroupValue1"
|
|
533
|
-
:status="
|
|
601
|
+
:status="validationStatus"
|
|
602
|
+
:disabled="disabledStatus"
|
|
603
|
+
/>
|
|
534
604
|
</CmdInputGroup>
|
|
535
605
|
<dl>
|
|
536
606
|
<dt>Selected value(s):</dt>
|
|
@@ -543,6 +613,8 @@
|
|
|
543
613
|
:inputElements="inputGroupRadiobuttons"
|
|
544
614
|
inputTypes="radio"
|
|
545
615
|
v-model="inputGroupValue2"
|
|
616
|
+
:status="validationStatus"
|
|
617
|
+
:disabled="disabledStatus"
|
|
546
618
|
/>
|
|
547
619
|
<dl>
|
|
548
620
|
<dt>Selected value(s):</dt>
|
|
@@ -556,6 +628,8 @@
|
|
|
556
628
|
inputTypes="radio"
|
|
557
629
|
v-model="inputGroupValueReplaceInputTypeRadio"
|
|
558
630
|
:replaceInputType="true"
|
|
631
|
+
:status="validationStatus"
|
|
632
|
+
:disabled="disabledStatus"
|
|
559
633
|
/>
|
|
560
634
|
<dl>
|
|
561
635
|
<dt>Selected value(s):</dt>
|
|
@@ -570,6 +644,8 @@
|
|
|
570
644
|
v-model="inputGroupValueReplaceInputTypeCheckbox"
|
|
571
645
|
:replaceInputType="true"
|
|
572
646
|
required="required"
|
|
647
|
+
:status="validationStatus"
|
|
648
|
+
:disabled="disabledStatus"
|
|
573
649
|
/>
|
|
574
650
|
<dl>
|
|
575
651
|
<dt>Selected value(s):</dt>
|
|
@@ -583,6 +659,8 @@
|
|
|
583
659
|
inputTypes="radio"
|
|
584
660
|
:multipleSwitch="true"
|
|
585
661
|
v-model="inputGroupValue3"
|
|
662
|
+
:status="validationStatus"
|
|
663
|
+
:disabled="disabledStatus"
|
|
586
664
|
/>
|
|
587
665
|
<dl>
|
|
588
666
|
<dt>Selected value(s):</dt>
|
|
@@ -597,6 +675,8 @@
|
|
|
597
675
|
:multipleSwitch="true"
|
|
598
676
|
v-model="inputGroupValue4"
|
|
599
677
|
:stretchHorizontally="true"
|
|
678
|
+
:status="validationStatus"
|
|
679
|
+
:disabled="disabledStatus"
|
|
600
680
|
/>
|
|
601
681
|
<dl>
|
|
602
682
|
<dt>Selected value(s):</dt>
|
|
@@ -612,8 +692,9 @@
|
|
|
612
692
|
type="submit"
|
|
613
693
|
id="submitbutton"
|
|
614
694
|
name="submitbutton"
|
|
615
|
-
:
|
|
616
|
-
|
|
695
|
+
:disabled="disabledStatus"
|
|
696
|
+
/>
|
|
697
|
+
<button type="submit" :disabled="disabledStatus">
|
|
617
698
|
<span class="icon-check"></span>
|
|
618
699
|
<span>Native submit-button</span>
|
|
619
700
|
</button>
|
|
@@ -641,16 +722,21 @@
|
|
|
641
722
|
<h3>Content boxes</h3>
|
|
642
723
|
<div class="grid-container-create-columns">
|
|
643
724
|
<div class="grid-small-item">
|
|
644
|
-
<CmdBox>
|
|
725
|
+
<CmdBox :useSlots="['header', 'body', 'footer']">
|
|
645
726
|
<template v-slot:header>
|
|
646
727
|
<h3>
|
|
647
728
|
Headline for box
|
|
648
729
|
</h3>
|
|
649
730
|
</template>
|
|
650
731
|
<template v-slot:body>
|
|
651
|
-
<
|
|
652
|
-
|
|
653
|
-
|
|
732
|
+
<div class="padding">
|
|
733
|
+
<p>
|
|
734
|
+
This content with paragraphs inside is placed inside the box-body.
|
|
735
|
+
</p>
|
|
736
|
+
<p>
|
|
737
|
+
<strong>Header, Content and Footer of this box are given by slots.</strong>
|
|
738
|
+
</p>
|
|
739
|
+
</div>
|
|
654
740
|
</template>
|
|
655
741
|
<template v-slot:footer>
|
|
656
742
|
<p>
|
|
@@ -682,20 +768,15 @@
|
|
|
682
768
|
</CmdBox>
|
|
683
769
|
</div>
|
|
684
770
|
<div class="grid-small-item">
|
|
685
|
-
<CmdBox>
|
|
771
|
+
<CmdBox :useSlots="['header', 'body']" :collapsible="true" :stretchVertically="false">
|
|
686
772
|
<template v-slot:header>
|
|
687
773
|
<h3>
|
|
688
|
-
|
|
774
|
+
Collapsible box with image
|
|
689
775
|
</h3>
|
|
690
776
|
</template>
|
|
691
777
|
<template v-slot:body>
|
|
692
778
|
<img src="media/images/content-images/logo-business-edition-landscape.jpg" alt="Alternative text"/>
|
|
693
779
|
</template>
|
|
694
|
-
<template v-slot:footer>
|
|
695
|
-
<p>
|
|
696
|
-
footer content
|
|
697
|
-
</p>
|
|
698
|
-
</template>
|
|
699
780
|
</CmdBox>
|
|
700
781
|
</div>
|
|
701
782
|
<div class="grid-small-item">
|
|
@@ -1151,6 +1232,8 @@ export default {
|
|
|
1151
1232
|
data() {
|
|
1152
1233
|
return {
|
|
1153
1234
|
showTooltip: false,
|
|
1235
|
+
disabledStatus: undefined,
|
|
1236
|
+
validationStatus: "",
|
|
1154
1237
|
inputFieldPattern: "",
|
|
1155
1238
|
inputSearch: "",
|
|
1156
1239
|
textarea: "",
|
|
@@ -1224,7 +1307,6 @@ export default {
|
|
|
1224
1307
|
labelText: "Filters:",
|
|
1225
1308
|
type: "checkboxOptions"
|
|
1226
1309
|
},
|
|
1227
|
-
formElementStatus: "",
|
|
1228
1310
|
siteSearchInput1: "Doctor",
|
|
1229
1311
|
siteSearchInput2: "New York",
|
|
1230
1312
|
radius: 10,
|
|
@@ -1297,6 +1379,10 @@ export default {
|
|
|
1297
1379
|
document.querySelector('html').addEventListener('toggle-color-scheme', (event) => console.log('colorScheme:', event.detail))
|
|
1298
1380
|
},
|
|
1299
1381
|
methods: {
|
|
1382
|
+
setStatus(validationStatus, disabledStatus) {
|
|
1383
|
+
this.validationStatus = validationStatus
|
|
1384
|
+
this.disabledStatus = disabledStatus
|
|
1385
|
+
},
|
|
1300
1386
|
siteSearchOutput(event) {
|
|
1301
1387
|
console.log(event)
|
|
1302
1388
|
},
|