comand-component-library 3.1.71 → 3.1.72
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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
|
},
|