comand-component-library 3.1.48 → 3.1.51
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 +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/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.51",
|
|
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,
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
:aria-required="$attrs.required !== undefined"
|
|
13
13
|
ref="fakeselect"
|
|
14
14
|
>
|
|
15
|
-
<span>
|
|
15
|
+
<span v-if="showLabel">
|
|
16
16
|
<!-- begin label -->
|
|
17
17
|
<span>
|
|
18
18
|
{{ labelText }}<sup v-if="$attrs.required !== undefined">*</sup>
|
|
@@ -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
|
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
|
}
|