comand-component-library 3.1.47 → 3.1.50
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 +47 -52
- package/src/assets/data/fake-select-options.json +3 -3
- package/src/components/CmdBoxSiteSearch.vue +3 -0
- package/src/components/CmdFakeSelect.vue +9 -2
- package/src/components/CmdFormFilters.vue +5 -1
- package/src/components/CmdSiteHeader.vue +2 -2
- package/src/documentation/generated/CmdBoxSiteSearchPropertyDescriptions.json +5 -0
- package/src/documentation/generated/CmdFakeSelectPropertyDescriptions.json +5 -0
- package/src/index.js +2 -0
- package/src/main.js +12 -4
- package/src/mixins/FieldValidation.js +1 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "comand-component-library",
|
|
3
|
-
"version": "3.1.
|
|
3
|
+
"version": "3.1.50",
|
|
4
4
|
"private": false,
|
|
5
5
|
"scripts": {
|
|
6
6
|
"serve": "vue-cli-service serve",
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
],
|
|
19
19
|
"dependencies": {
|
|
20
20
|
"clickout-event": "^1.1.2",
|
|
21
|
-
"comand-frontend-framework": "^3.2.
|
|
21
|
+
"comand-frontend-framework": "^3.2.39",
|
|
22
22
|
"core-js": "^3.20.1",
|
|
23
23
|
"prismjs": "^1.27.0",
|
|
24
24
|
"vue": "^3.2.31",
|
package/src/App.vue
CHANGED
|
@@ -123,7 +123,7 @@
|
|
|
123
123
|
</div>
|
|
124
124
|
|
|
125
125
|
<!-- begin cmd-form-filters -->
|
|
126
|
-
<CmdFormFilters v-model
|
|
126
|
+
<CmdFormFilters v-model="fakeSelectFilters" :selectedOptionsName="getOptionName" />
|
|
127
127
|
<!-- end cmd-form-filters -->
|
|
128
128
|
|
|
129
129
|
<CmdForm :use-fieldset="false" id="advanced-form-elements" novalidate="novalidate">
|
|
@@ -143,7 +143,7 @@
|
|
|
143
143
|
element="select"
|
|
144
144
|
required="required"
|
|
145
145
|
:status="formElementStatus"
|
|
146
|
-
v-model
|
|
146
|
+
v-model="selectedOption"
|
|
147
147
|
:selectOptions="selectOptionsData"
|
|
148
148
|
/>
|
|
149
149
|
<CmdFormElement labelText="Input for datalist:"
|
|
@@ -161,23 +161,24 @@
|
|
|
161
161
|
<CmdFakeSelect labelText="Default selectbox:"
|
|
162
162
|
:status="formElementStatus"
|
|
163
163
|
:selectData="fakeSelectOptionsData"
|
|
164
|
-
v-model
|
|
164
|
+
v-model="fakeSelectDefault"
|
|
165
165
|
required
|
|
166
166
|
defaultOptionName="Select an option:"
|
|
167
167
|
/>
|
|
168
168
|
<CmdFakeSelect labelText="Default selectbox with icons:"
|
|
169
169
|
:status="formElementStatus"
|
|
170
170
|
:selectData="fakeSelectOptionsWithIconsData"
|
|
171
|
-
v-model
|
|
171
|
+
v-model="fakeSelectDefaultWithIcons"
|
|
172
172
|
defaultOptionName="Select an option:"
|
|
173
173
|
/>
|
|
174
174
|
<!-- type === checkboxOptions: selectbox with checkboxes for each option -->
|
|
175
175
|
<CmdFakeSelect labelText="Selectbox with checkboxes:"
|
|
176
176
|
:status="formElementStatus"
|
|
177
177
|
:selectData="fakeSelectOptionsData"
|
|
178
|
-
v-model
|
|
178
|
+
v-model="fakeSelectCheckbox"
|
|
179
179
|
defaultOptionName="Options:"
|
|
180
180
|
:required="true"
|
|
181
|
+
:showLabel="false"
|
|
181
182
|
id="selectbox-with-checkboxes"
|
|
182
183
|
type="checkboxOptions"
|
|
183
184
|
:useCustomTooltip="true"
|
|
@@ -185,7 +186,7 @@
|
|
|
185
186
|
<CmdFakeSelect labelText="Selectbox with filters:"
|
|
186
187
|
:status="formElementStatus"
|
|
187
188
|
:selectData="fakeSelectFilterOptionsData"
|
|
188
|
-
v-model
|
|
189
|
+
v-model="fakeSelectFilters"
|
|
189
190
|
defaultOptionName="Filters:"
|
|
190
191
|
id="selectbox-with-filters"
|
|
191
192
|
type="checkboxOptions"
|
|
@@ -208,14 +209,14 @@
|
|
|
208
209
|
<CmdFakeSelect labelText="Selectbox with country flags:"
|
|
209
210
|
:status="formElementStatus"
|
|
210
211
|
:selectData="fakeSelectCountriesData"
|
|
211
|
-
v-model
|
|
212
|
+
v-model="selectedCountry"
|
|
212
213
|
defaultOptionName="Select country:"
|
|
213
214
|
type="country"
|
|
214
215
|
/>
|
|
215
216
|
<CmdFakeSelect labelText="Selectbox with colors:"
|
|
216
217
|
:status="formElementStatus"
|
|
217
218
|
:selectData="fakeSelectColorsData"
|
|
218
|
-
v-model
|
|
219
|
+
v-model="selectedColor"
|
|
219
220
|
required="required"
|
|
220
221
|
type="color"
|
|
221
222
|
/>
|
|
@@ -260,7 +261,7 @@
|
|
|
260
261
|
offLabel="Label off"
|
|
261
262
|
inputValue="checkbox1"
|
|
262
263
|
:disabled="formElementStatus === 'disabled'"
|
|
263
|
-
v-model
|
|
264
|
+
v-model="switchButtonCheckbox"/>
|
|
264
265
|
<CmdSwitchButton
|
|
265
266
|
type="checkbox"
|
|
266
267
|
id="checkbox2"
|
|
@@ -270,7 +271,7 @@
|
|
|
270
271
|
labelText="Labeltext"
|
|
271
272
|
inputValue="checkbox2"
|
|
272
273
|
:disabled="formElementStatus === 'disabled'"
|
|
273
|
-
v-model
|
|
274
|
+
v-model="switchButtonCheckbox"/>
|
|
274
275
|
<CmdSwitchButton
|
|
275
276
|
type="checkbox"
|
|
276
277
|
id="checkbox3"
|
|
@@ -278,7 +279,7 @@
|
|
|
278
279
|
inputValue="checkbox3"
|
|
279
280
|
labelText="Labeltext"
|
|
280
281
|
:disabled="formElementStatus === 'disabled'"
|
|
281
|
-
v-model
|
|
282
|
+
v-model="switchButtonCheckbox"/>
|
|
282
283
|
</span>
|
|
283
284
|
<span>Current value: {{ switchButtonCheckbox }}</span>
|
|
284
285
|
</div>
|
|
@@ -296,7 +297,7 @@
|
|
|
296
297
|
:colored="true"
|
|
297
298
|
inputValue="checkbox3"
|
|
298
299
|
:disabled="formElementStatus === 'disabled'"
|
|
299
|
-
v-model
|
|
300
|
+
v-model="switchButtonCheckboxColored"/>
|
|
300
301
|
</span>
|
|
301
302
|
<span>Current value: {{ switchButtonCheckboxColored }}</span>
|
|
302
303
|
</div>
|
|
@@ -315,7 +316,7 @@
|
|
|
315
316
|
:colored="true"
|
|
316
317
|
inputValue="radio1"
|
|
317
318
|
:disabled="formElementStatus === 'disabled'"
|
|
318
|
-
v-model
|
|
319
|
+
v-model="switchButtonRadio"/>
|
|
319
320
|
<CmdSwitchButton
|
|
320
321
|
type="radio"
|
|
321
322
|
id="radio2"
|
|
@@ -325,7 +326,7 @@
|
|
|
325
326
|
:colored="true"
|
|
326
327
|
inputValue="radio2"
|
|
327
328
|
:disabled="formElementStatus === 'disabled'"
|
|
328
|
-
v-model
|
|
329
|
+
v-model="switchButtonRadio"/>
|
|
329
330
|
</span>
|
|
330
331
|
</div>
|
|
331
332
|
<hr />
|
|
@@ -333,7 +334,7 @@
|
|
|
333
334
|
<CmdFormElement element="input"
|
|
334
335
|
type="checkbox"
|
|
335
336
|
id="toggle-switch-checkbox"
|
|
336
|
-
v-model
|
|
337
|
+
v-model="switchButtonCheckbox"
|
|
337
338
|
:displayLabelInline="true"
|
|
338
339
|
labelText="Labeltext for Single-SwitchButton (Checkbox)"
|
|
339
340
|
:toggleSwitch="true"
|
|
@@ -342,7 +343,7 @@
|
|
|
342
343
|
<CmdFormElement element="input"
|
|
343
344
|
type="checkbox"
|
|
344
345
|
id="toggle-switch-checkbox"
|
|
345
|
-
v-model
|
|
346
|
+
v-model="switchButtonCheckbox"
|
|
346
347
|
:displayLabelInline="true"
|
|
347
348
|
labelText="Labeltext for SwitchButton (Checkbox)"
|
|
348
349
|
onLabel="Label on"
|
|
@@ -353,7 +354,7 @@
|
|
|
353
354
|
<CmdFormElement element="input"
|
|
354
355
|
type="checkbox"
|
|
355
356
|
id="toggle-switch-checkbox-colored"
|
|
356
|
-
v-model
|
|
357
|
+
v-model="switchButtonCheckbox"
|
|
357
358
|
labelText="Labeltext for SwitchButton (Checkbox, colored)"
|
|
358
359
|
onLabel="Label on"
|
|
359
360
|
offLabel="Label off"
|
|
@@ -365,7 +366,7 @@
|
|
|
365
366
|
type="radio"
|
|
366
367
|
name="radiogroup"
|
|
367
368
|
id="toggle-switch-radio1"
|
|
368
|
-
v-model
|
|
369
|
+
v-model="switchButtonCheckbox"
|
|
369
370
|
onLabel="Label on"
|
|
370
371
|
offLabel="Label off"
|
|
371
372
|
:colored="true"
|
|
@@ -377,7 +378,7 @@
|
|
|
377
378
|
type="radio"
|
|
378
379
|
name="radiogroup"
|
|
379
380
|
id="toggle-switch-radio2"
|
|
380
|
-
v-model
|
|
381
|
+
v-model="switchButtonCheckbox"
|
|
381
382
|
onLabel="Label on"
|
|
382
383
|
offLabel="Label off"
|
|
383
384
|
:colored="true"
|
|
@@ -395,7 +396,7 @@
|
|
|
395
396
|
minlength="5"
|
|
396
397
|
id="inputfield1"
|
|
397
398
|
placeholder="This is placeholder text"
|
|
398
|
-
v-model
|
|
399
|
+
v-model="inputField1"
|
|
399
400
|
tooltipText="This is a tooltip!"
|
|
400
401
|
:status="formElementStatus"
|
|
401
402
|
/>
|
|
@@ -406,7 +407,7 @@
|
|
|
406
407
|
minlength="5"
|
|
407
408
|
id="inputfield-required"
|
|
408
409
|
placeholder="This is placeholder text"
|
|
409
|
-
v-model
|
|
410
|
+
v-model="inputFieldRequired"
|
|
410
411
|
tooltipText="This is a tooltip!"
|
|
411
412
|
:status="formElementStatus"
|
|
412
413
|
/>
|
|
@@ -416,7 +417,7 @@
|
|
|
416
417
|
id="inputfield-pattern"
|
|
417
418
|
placeholder="This is placeholder text"
|
|
418
419
|
pattern="/\d/"
|
|
419
|
-
v-model
|
|
420
|
+
v-model="inputFieldPattern"
|
|
420
421
|
tooltipText="This is a tooltip!"
|
|
421
422
|
:status="formElementStatus"
|
|
422
423
|
/>
|
|
@@ -431,7 +432,7 @@
|
|
|
431
432
|
placeholder="Type in username"
|
|
432
433
|
tooltipText="This is a tooltip!"
|
|
433
434
|
maxlength="100"
|
|
434
|
-
v-model
|
|
435
|
+
v-model="inputUsername"
|
|
435
436
|
:status="formElementStatus"
|
|
436
437
|
/>
|
|
437
438
|
<CmdFormElement element="input"
|
|
@@ -444,7 +445,7 @@
|
|
|
444
445
|
placeholder="Type in password"
|
|
445
446
|
tooltipText="This is a tooltip!"
|
|
446
447
|
:customRequirements="customRequirements"
|
|
447
|
-
v-model
|
|
448
|
+
v-model="inputPassword"
|
|
448
449
|
:status="formElementStatus"/>
|
|
449
450
|
</div>
|
|
450
451
|
<!-- end inputfield in two columns -->
|
|
@@ -457,7 +458,7 @@
|
|
|
457
458
|
required="required"
|
|
458
459
|
min="0"
|
|
459
460
|
max="9"
|
|
460
|
-
v-model
|
|
461
|
+
v-model="inputNumber"
|
|
461
462
|
:customRequirements="[customRequirements[2]]"
|
|
462
463
|
:status="formElementStatus"/>
|
|
463
464
|
<CmdFormElement element="input"
|
|
@@ -465,7 +466,7 @@
|
|
|
465
466
|
:displayLabelInline="true"
|
|
466
467
|
type="date"
|
|
467
468
|
id="inputfield-date"
|
|
468
|
-
v-model
|
|
469
|
+
v-model="inputDate"
|
|
469
470
|
:status="formElementStatus"/>
|
|
470
471
|
<CmdFormElement element="input"
|
|
471
472
|
labelText="Label (inline) for inputfield (search):"
|
|
@@ -473,7 +474,7 @@
|
|
|
473
474
|
type="search"
|
|
474
475
|
id="inputfield-search"
|
|
475
476
|
placeholder="Keyword(s)"
|
|
476
|
-
v-model
|
|
477
|
+
v-model="inputSearch"
|
|
477
478
|
:status="formElementStatus"/>
|
|
478
479
|
<CmdFormElement element="textarea"
|
|
479
480
|
labelText="Label for textarea:"
|
|
@@ -481,7 +482,7 @@
|
|
|
481
482
|
minlength="1"
|
|
482
483
|
maxlength="100"
|
|
483
484
|
placeholder="Type in your message"
|
|
484
|
-
v-model
|
|
485
|
+
v-model="textarea"
|
|
485
486
|
:status="formElementStatus"/>
|
|
486
487
|
<div class="label inline">
|
|
487
488
|
<span>Label for native checkboxes:</span>
|
|
@@ -490,18 +491,18 @@
|
|
|
490
491
|
labelText="Label for checkbox with boolean"
|
|
491
492
|
type="checkbox"
|
|
492
493
|
id="checkbox-with-boolean"
|
|
493
|
-
v-model
|
|
494
|
+
v-model="checkboxValue"
|
|
494
495
|
:status="formElementStatus"/>
|
|
495
496
|
<CmdFormElement element="input"
|
|
496
497
|
labelText="Label for checkbox with value"
|
|
497
|
-
v-model
|
|
498
|
+
v-model="checkboxValues"
|
|
498
499
|
inputValue="checkboxValue1"
|
|
499
500
|
type="checkbox"
|
|
500
501
|
id="checkbox-with-value-1"
|
|
501
502
|
:status="formElementStatus"/>
|
|
502
503
|
<CmdFormElement element="input"
|
|
503
504
|
labelText="Label for checkbox with value"
|
|
504
|
-
v-model
|
|
505
|
+
v-model="checkboxValues"
|
|
505
506
|
inputValue="checkboxValue2"
|
|
506
507
|
type="checkbox"
|
|
507
508
|
id="checkbox-with-value-2"
|
|
@@ -513,7 +514,7 @@
|
|
|
513
514
|
type="checkbox"
|
|
514
515
|
required="required"
|
|
515
516
|
id="checkbox-required-with-boolean"
|
|
516
|
-
v-model
|
|
517
|
+
v-model="checkboxRequiredValue"
|
|
517
518
|
:status="formElementStatus"/>
|
|
518
519
|
<p>
|
|
519
520
|
checkbox (required) with boolean: {{checkboxRequiredValue}}<br />
|
|
@@ -528,12 +529,12 @@
|
|
|
528
529
|
type="checkbox"
|
|
529
530
|
class="replace-input-type"
|
|
530
531
|
id="inputfield9"
|
|
531
|
-
v-model
|
|
532
|
+
v-model="replacedCheckboxValue"
|
|
532
533
|
inputValue="checkboxValue1"
|
|
533
534
|
:status="formElementStatus"/>
|
|
534
535
|
<CmdFormElement element="input"
|
|
535
536
|
labelText="Label for replaced checkbox"
|
|
536
|
-
v-model
|
|
537
|
+
v-model="replacedCheckboxValue"
|
|
537
538
|
inputValue="checkboxValue2"
|
|
538
539
|
type="checkbox"
|
|
539
540
|
class="replace-input-type"
|
|
@@ -550,7 +551,7 @@
|
|
|
550
551
|
id="inputfield11"
|
|
551
552
|
name="radiogroup"
|
|
552
553
|
inputValue="radiobuttonValue1"
|
|
553
|
-
v-model
|
|
554
|
+
v-model="radiobuttonValue"
|
|
554
555
|
:status="formElementStatus"/>
|
|
555
556
|
<CmdFormElement element="input"
|
|
556
557
|
labelText="Label for native radiobutton"
|
|
@@ -558,7 +559,7 @@
|
|
|
558
559
|
id="inputfield12"
|
|
559
560
|
name="radiogroup"
|
|
560
561
|
inputValue="radiobuttonValue2"
|
|
561
|
-
v-model
|
|
562
|
+
v-model="radiobuttonValue"
|
|
562
563
|
:status="formElementStatus"/>
|
|
563
564
|
</div>
|
|
564
565
|
</div>
|
|
@@ -575,7 +576,7 @@
|
|
|
575
576
|
id="inputfield13"
|
|
576
577
|
name="replaced-radiogroup"
|
|
577
578
|
inputValue="radiobuttonValue1"
|
|
578
|
-
v-model
|
|
579
|
+
v-model="replacedRadiobuttonValue"
|
|
579
580
|
:status="formElementStatus"/>
|
|
580
581
|
<CmdFormElement element="input"
|
|
581
582
|
labelText="Label for replaced radiobutton"
|
|
@@ -584,7 +585,7 @@
|
|
|
584
585
|
id="inputfield14"
|
|
585
586
|
name="replaced-radiogroup"
|
|
586
587
|
inputValue="radiobuttonValue2"
|
|
587
|
-
v-model
|
|
588
|
+
v-model="replacedRadiobuttonValue"
|
|
588
589
|
:status="formElementStatus"/>
|
|
589
590
|
</div>
|
|
590
591
|
</div>
|
|
@@ -593,7 +594,7 @@
|
|
|
593
594
|
switchTypes="checkbox"
|
|
594
595
|
switchNames="checkboxgroup"
|
|
595
596
|
:status="formElementStatus"
|
|
596
|
-
v-model
|
|
597
|
+
v-model="multipleSwitchCheckbox"/>
|
|
597
598
|
<dl>
|
|
598
599
|
<dt>Selected value:</dt>
|
|
599
600
|
<dd>
|
|
@@ -605,7 +606,7 @@
|
|
|
605
606
|
switchTypes="radio"
|
|
606
607
|
switchNames="swtich-names"
|
|
607
608
|
:status="formElementStatus"
|
|
608
|
-
v-model
|
|
609
|
+
v-model="multipleSwitchRadio"/>
|
|
609
610
|
<dl>
|
|
610
611
|
<dt>Selected value:</dt>
|
|
611
612
|
<dd>
|
|
@@ -841,7 +842,7 @@
|
|
|
841
842
|
<p>Page {{ showPagePager }}</p>
|
|
842
843
|
</div>
|
|
843
844
|
<CmdPager
|
|
844
|
-
:items="
|
|
845
|
+
:items="4"
|
|
845
846
|
:itemsPerPage="1"
|
|
846
847
|
@click="showPagePager = $event"
|
|
847
848
|
/>
|
|
@@ -994,7 +995,7 @@
|
|
|
994
995
|
<script>
|
|
995
996
|
// import used example data
|
|
996
997
|
import accordionData from '@/assets/data/accordion.json'
|
|
997
|
-
import addressData from '@/assets/data/address.json'
|
|
998
|
+
import addressData from '@/assets/data/address-data.json'
|
|
998
999
|
import bankAccountData from '@/assets/data/bank-account-data.json'
|
|
999
1000
|
import boxUserData from '@/assets/data/box-user.json'
|
|
1000
1001
|
import boxProductData from '@/assets/data/box-product.json'
|
|
@@ -1006,7 +1007,7 @@ import fakeSelectCountriesData from '@/assets/data/fake-select-countries.json'
|
|
|
1006
1007
|
import fakeSelectFilterOptionsData from '@/assets/data/fake-select-filter-options.json'
|
|
1007
1008
|
import fakeSelectOptionsData from '@/assets/data/fake-select-options.json'
|
|
1008
1009
|
import fakeSelectOptionsWithIconsData from '@/assets/data/fake-select-options-with-icons.json'
|
|
1009
|
-
import footerNavigationData from '@/assets/data/
|
|
1010
|
+
import footerNavigationData from '@/assets/data/list-of-links.json'
|
|
1010
1011
|
import imageGalleryData from '@/assets/data/image-gallery.json'
|
|
1011
1012
|
import languagesData from '@/assets/data/switch-language.json'
|
|
1012
1013
|
import multistepsData from '@/assets/data/multistep-form-progress-bar.json'
|
|
@@ -1014,15 +1015,14 @@ import multipleSwitchCheckboxData from '@/assets/data/multipleswitch-checkbox.js
|
|
|
1014
1015
|
import multipleSwitchRadioData from '@/assets/data/multipleswitch-radio.json'
|
|
1015
1016
|
import navigationData from '@/assets/data/main-navigation.json'
|
|
1016
1017
|
import openingHoursData from '@/assets/data/opening-hours.json'
|
|
1017
|
-
import pagerData from '@/assets/data/pager.json'
|
|
1018
1018
|
import selectOptionsData from '@/assets/data/select-options.json'
|
|
1019
|
-
import shareButtonsData from '@/assets/data/share-buttons.json'
|
|
1019
|
+
import shareButtonsData from '@/assets/data/share-buttons-page-by-json.json'
|
|
1020
1020
|
import slideshowData from '@/assets/data/slideshow.json'
|
|
1021
1021
|
import tabsData from '@/assets/data/tabs.json'
|
|
1022
1022
|
import tableDataSmall from '@/assets/data/table-small.json'
|
|
1023
1023
|
import tableDataLarge from '@/assets/data/table-large.json'
|
|
1024
1024
|
import thumbnailScrollerData from '@/assets/data/thumbnail-scroller.json'
|
|
1025
|
-
import topHeaderNavigationData from '@/assets/data/top-header-navigation.json'
|
|
1025
|
+
import topHeaderNavigationData from '@/assets/data/list-of-links-top-header-navigation.json'
|
|
1026
1026
|
|
|
1027
1027
|
// import used components
|
|
1028
1028
|
import CmdAccordion from "@/components/CmdAccordion.vue"
|
|
@@ -1038,7 +1038,6 @@ import CmdCookieDisclaimer from "@/components/CmdCookieDisclaimer.vue"
|
|
|
1038
1038
|
import CmdCustomHeadline from "@/components/CmdCustomHeadline.vue"
|
|
1039
1039
|
import CmdFakeSelect from "@/components/CmdFakeSelect.vue"
|
|
1040
1040
|
import CmdFancyBox from "@/components/CmdFancyBox.vue"
|
|
1041
|
-
import CmdFooterNavigation from "@/components/CmdFooterNavigation.vue"
|
|
1042
1041
|
import CmdForm from "@/components/CmdForm.vue"
|
|
1043
1042
|
import CmdFormElement from "@/components/CmdFormElement.vue"
|
|
1044
1043
|
import CmdFormFilters from "@/components/CmdFormFilters.vue"
|
|
@@ -1062,7 +1061,6 @@ import CmdTabs from "@/components/CmdTabs.vue"
|
|
|
1062
1061
|
import CmdTable from "@/components/CmdTable.vue"
|
|
1063
1062
|
import CmdThumbnailScroller from "@/components/CmdThumbnailScroller.vue"
|
|
1064
1063
|
import CmdTooltip from "@/components/CmdTooltip.vue"
|
|
1065
|
-
import CmdTopHeaderNavigation from "@/components/CmdTopHeaderNavigation.vue"
|
|
1066
1064
|
import CmdUploadForm from "@/components/CmdUploadForm.vue"
|
|
1067
1065
|
import CmdWidthLimitationWrapper from "@/components/CmdWidthLimitationWrapper"
|
|
1068
1066
|
import {openFancyBox} from "@/components/CmdFancyBox"
|
|
@@ -1086,7 +1084,6 @@ export default {
|
|
|
1086
1084
|
CmdCustomHeadline,
|
|
1087
1085
|
CmdFakeSelect,
|
|
1088
1086
|
CmdFancyBox,
|
|
1089
|
-
CmdFooterNavigation,
|
|
1090
1087
|
CmdForm,
|
|
1091
1088
|
CmdFormFilters,
|
|
1092
1089
|
CmdFormElement,
|
|
@@ -1110,7 +1107,6 @@ export default {
|
|
|
1110
1107
|
CmdTable,
|
|
1111
1108
|
CmdThumbnailScroller,
|
|
1112
1109
|
CmdTooltip,
|
|
1113
|
-
CmdTopHeaderNavigation,
|
|
1114
1110
|
CmdUploadForm,
|
|
1115
1111
|
CmdWidthLimitationWrapper
|
|
1116
1112
|
},
|
|
@@ -1151,7 +1147,7 @@ export default {
|
|
|
1151
1147
|
fancyBoxCookieDisclaimer: false,
|
|
1152
1148
|
fakeSelectDefault: "2",
|
|
1153
1149
|
fakeSelectDefaultWithIcons: "1",
|
|
1154
|
-
fakeSelectCheckbox: [],
|
|
1150
|
+
fakeSelectCheckbox: [1],
|
|
1155
1151
|
fakeSelectFilters: [],
|
|
1156
1152
|
datalist: {
|
|
1157
1153
|
id: "datalist-id",
|
|
@@ -1191,7 +1187,6 @@ export default {
|
|
|
1191
1187
|
multipleSwitchRadioData,
|
|
1192
1188
|
navigationData,
|
|
1193
1189
|
openingHoursData,
|
|
1194
|
-
pagerData,
|
|
1195
1190
|
selectOptionsData,
|
|
1196
1191
|
shareButtonsData,
|
|
1197
1192
|
slideshowData,
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
>
|
|
15
15
|
<span>
|
|
16
16
|
<!-- begin label -->
|
|
17
|
-
<span>
|
|
17
|
+
<span v-if="showLabel">
|
|
18
18
|
{{ labelText }}<sup v-if="$attrs.required !== undefined">*</sup>
|
|
19
19
|
</span>
|
|
20
20
|
<!-- end label -->
|
|
@@ -66,7 +66,7 @@
|
|
|
66
66
|
<li v-for="(option, index) in selectData" :key="index">
|
|
67
67
|
<label v-if="type === 'checkboxOptions'" :for="'option-' + (index + 1)" :class="{'active' : modelValue.includes(`${option.value}`)}">
|
|
68
68
|
<input type="checkbox" :value="option.value" @change="optionSelect"
|
|
69
|
-
:checked="modelValue.includes(
|
|
69
|
+
:checked="modelValue.includes(option.value)" :id="'option-' + (index + 1)"/>
|
|
70
70
|
<span>{{ option.text }}</span>
|
|
71
71
|
</label>
|
|
72
72
|
|
|
@@ -254,6 +254,13 @@ export default {
|
|
|
254
254
|
type: String,
|
|
255
255
|
required: false
|
|
256
256
|
},
|
|
257
|
+
/**
|
|
258
|
+
* toggle label visibility
|
|
259
|
+
*/
|
|
260
|
+
showLabel: {
|
|
261
|
+
type: Boolean,
|
|
262
|
+
default: true
|
|
263
|
+
},
|
|
257
264
|
/**
|
|
258
265
|
* path to flag-files (will be combined with flag isoCode to load svg)
|
|
259
266
|
*/
|
|
@@ -89,7 +89,11 @@ export default {
|
|
|
89
89
|
watch: {
|
|
90
90
|
modelValue: {
|
|
91
91
|
handler() {
|
|
92
|
-
|
|
92
|
+
if(this.modelValue) {
|
|
93
|
+
this.options = JSON.parse(JSON.stringify(this.modelValue))
|
|
94
|
+
} else {
|
|
95
|
+
this.options = []
|
|
96
|
+
}
|
|
93
97
|
},
|
|
94
98
|
immediate: true,
|
|
95
99
|
deep: true
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
<!-- end for elements above header -->
|
|
6
6
|
|
|
7
7
|
<!-- begin header-wrapper with slots for logo and other header elements -->
|
|
8
|
-
<header :class="useGrid ? 'grid-container-create-columns': 'flex-container'">
|
|
8
|
+
<header v-if="$slots.logo || $slots.header" :class="useGrid ? 'grid-container-create-columns': 'flex-container'">
|
|
9
9
|
<slot name="logo"></slot>
|
|
10
10
|
<slot name="header"></slot>
|
|
11
11
|
</header>
|
|
@@ -34,7 +34,7 @@ export default {
|
|
|
34
34
|
* properties for CmdMainNavigation-component
|
|
35
35
|
*/
|
|
36
36
|
cmdMainNavigation: {
|
|
37
|
-
type:
|
|
37
|
+
type: Object,
|
|
38
38
|
required: true
|
|
39
39
|
},
|
|
40
40
|
/**
|
package/src/index.js
CHANGED
|
@@ -5,6 +5,7 @@ export { default as CmdAddressData } from '@/components/CmdAddressData'
|
|
|
5
5
|
export { default as CmdBackToTopButton } from '@/components/CmdBackToTopButton'
|
|
6
6
|
export { default as CmdBankAccountData } from '@/components/CmdBankAccountData'
|
|
7
7
|
export { default as CmdBox } from '@/components/CmdBox'
|
|
8
|
+
export { default as CmdBoxSiteSearch } from '@/components/CmdBoxSiteSearch'
|
|
8
9
|
export { default as CmdBoxWrapper } from '@/components/CmdBoxWrapper'
|
|
9
10
|
export { default as CmdBreadcrumbs } from '@/components/CmdBreadcrumbs'
|
|
10
11
|
export { default as CmdCompanyLogo } from '@/components/CmdCompanyLogo'
|
|
@@ -13,6 +14,7 @@ export { default as CmdCopyrightInformation } from '@/components/CmdCopyrightInf
|
|
|
13
14
|
export { default as CmdCustomHeadline } from '@/components/CmdCustomHeadline'
|
|
14
15
|
export { default as CmdFakeSelect } from '@/components/CmdFakeSelect'
|
|
15
16
|
export { openFancyBox, default as CmdFancyBox } from '@/components/CmdFancyBox'
|
|
17
|
+
export { default as CmdForm } from '@/components/CmdForm'
|
|
16
18
|
export { default as CmdFormElement } from '@/components/CmdFormElement'
|
|
17
19
|
export { default as CmdFormFilters } from '@/components/CmdFormFilters'
|
|
18
20
|
export { default as CmdGoogleMaps } from '@/components/CmdGoogleMaps'
|
package/src/main.js
CHANGED
|
@@ -1,11 +1,17 @@
|
|
|
1
|
-
/*
|
|
1
|
+
/* begin imports css from comand-frontend-framework ---------------------------------------------------------------------------------------- */
|
|
2
|
+
/* import normalize to set same default styles for all browsers */
|
|
2
3
|
import 'comand-frontend-framework/src/assets/css/normalize.css'
|
|
4
|
+
|
|
5
|
+
/* import framework-styles */
|
|
3
6
|
import 'comand-frontend-framework/src/assets/css/framework.css'
|
|
7
|
+
|
|
8
|
+
/* import framework-iconfont */
|
|
4
9
|
import 'comand-frontend-framework/src/assets/css/framework-iconfont.css'
|
|
10
|
+
/* end imports css from comand-frontend-framework ---------------------------------------------------------------------------------------- */
|
|
5
11
|
|
|
6
12
|
import { createApp } from 'vue'
|
|
7
13
|
// import App from './App.vue'
|
|
8
|
-
import
|
|
14
|
+
import App from './App'
|
|
9
15
|
//import { createRouter, createWebHistory } from 'vue-router'
|
|
10
16
|
import "clickout-event"
|
|
11
17
|
|
|
@@ -15,6 +21,7 @@ import directiveTelephone from "./directives/telephone"
|
|
|
15
21
|
// directive to set focus on specific form-elements
|
|
16
22
|
import directiveFocus from "./directives/focus"
|
|
17
23
|
|
|
24
|
+
/* begin imports css from comand-component-library ---------------------------------------------------------------------------------------- */
|
|
18
25
|
/* import additional iconfont containing company-logos */
|
|
19
26
|
import '@/assets/styles/logos-iconfont.css'
|
|
20
27
|
|
|
@@ -24,7 +31,7 @@ import '@/assets/styles/global-styles.scss'
|
|
|
24
31
|
/* import css for global transitions */
|
|
25
32
|
import '@/assets/styles/transitions.scss'
|
|
26
33
|
|
|
27
|
-
/* import css for your custom styles */
|
|
34
|
+
/* import css-example for your custom styles (contains overwritten primary-color only) */
|
|
28
35
|
import '@/assets/styles/template.css'
|
|
29
36
|
|
|
30
37
|
/* import css for prism-library (for styling syntax) */
|
|
@@ -32,6 +39,7 @@ import "prismjs/themes/prism.css"
|
|
|
32
39
|
|
|
33
40
|
/* import css for demopage only */
|
|
34
41
|
import 'comand-frontend-framework/public/demopage-only.css'
|
|
42
|
+
/* end imports css from comand-component-library ---------------------------------------------------------------------------------------- */
|
|
35
43
|
|
|
36
44
|
import router from "./router"
|
|
37
45
|
|
|
@@ -47,4 +55,4 @@ import router from "./router"
|
|
|
47
55
|
// })
|
|
48
56
|
|
|
49
57
|
// createApp(App).use(router).directive('telephone', directiveTelephone).directive('focus', directiveFocus).mount('#app')
|
|
50
|
-
createApp(
|
|
58
|
+
createApp(App).use(router).directive('telephone', directiveTelephone).directive('focus', directiveFocus).mount('#app')
|
|
@@ -127,7 +127,7 @@ export default {
|
|
|
127
127
|
// check if filed has a minimum length
|
|
128
128
|
if(this.$attrs.minlength) {
|
|
129
129
|
standardRequirements.push({
|
|
130
|
-
message: "Input has minimum length (" + this.
|
|
130
|
+
message: "Input has minimum length (" + this.modelValue.length + "/" + this.$attrs.minlength + ")",
|
|
131
131
|
valid(value, attributes) {
|
|
132
132
|
return value.length >= attributes.minlength
|
|
133
133
|
}
|