comand-component-library 3.1.49 → 3.1.52
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 +1 -1
- package/src/App.vue +47 -52
- package/src/assets/data/fake-select-options.json +3 -3
- package/src/components/CmdBoxSiteSearch.vue +1 -1
- package/src/components/CmdFakeSelect.vue +2 -2
- package/src/components/CmdFormElement.vue +13 -11
- package/src/components/CmdFormFilters.vue +5 -1
- package/src/components/CmdMainNavigation.vue +3 -3
- package/src/composables/sequence.js +21 -0
- package/src/index.js +6 -1
- package/src/main.js +2 -2
- package/src/mixins/FieldValidation.js +1 -1
package/package.json
CHANGED
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,
|
|
@@ -66,7 +66,7 @@
|
|
|
66
66
|
</template>
|
|
67
67
|
<!-- end filters -->
|
|
68
68
|
</fieldset>
|
|
69
|
-
<CmdFormFilters v-if="useFilters" v-model
|
|
69
|
+
<CmdFormFilters v-if="useFilters" v-model="fakeSelectFilters" :selectedOptionsName="getOptionName"/>
|
|
70
70
|
</template>
|
|
71
71
|
|
|
72
72
|
<script>
|
|
@@ -12,9 +12,9 @@
|
|
|
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
|
-
<span
|
|
17
|
+
<span>
|
|
18
18
|
{{ labelText }}<sup v-if="$attrs.required !== undefined">*</sup>
|
|
19
19
|
</span>
|
|
20
20
|
<!-- end label -->
|
|
@@ -672,21 +672,23 @@ export default {
|
|
|
672
672
|
|
|
673
673
|
.search-field-wrapper {
|
|
674
674
|
margin: 0;
|
|
675
|
+
|
|
676
|
+
a {
|
|
677
|
+
position: absolute;
|
|
678
|
+
top: 50%;
|
|
679
|
+
right: 1rem;
|
|
680
|
+
transform: translateY(-50%);
|
|
681
|
+
z-index: 100;
|
|
682
|
+
|
|
683
|
+
& + input {
|
|
684
|
+
padding-right: calc(var(--default-padding) * 3);
|
|
685
|
+
}
|
|
686
|
+
}
|
|
675
687
|
}
|
|
676
688
|
|
|
677
689
|
.place-inside {
|
|
678
690
|
+ .search-field-wrapper {
|
|
679
|
-
|
|
680
|
-
position: absolute;
|
|
681
|
-
top: 50%;
|
|
682
|
-
right: 1rem;
|
|
683
|
-
transform: translateY(-50%);
|
|
684
|
-
z-index: 100;
|
|
685
|
-
|
|
686
|
-
& + input {
|
|
687
|
-
padding-right: calc(var(--default-padding) * 3);
|
|
688
|
-
}
|
|
689
|
-
}
|
|
691
|
+
|
|
690
692
|
|
|
691
693
|
input {
|
|
692
694
|
padding-left: calc(var(--default-padding) * 3);
|
|
@@ -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
|
|
@@ -204,14 +204,14 @@ export default {
|
|
|
204
204
|
*/
|
|
205
205
|
subentriesIconClass: {
|
|
206
206
|
type: String,
|
|
207
|
-
default: "icon-single-arrow-
|
|
207
|
+
default: "icon-single-arrow-down"
|
|
208
208
|
},
|
|
209
209
|
/**
|
|
210
210
|
* icon to show if a sub-entry has further sub-entries
|
|
211
211
|
*/
|
|
212
212
|
subSubentriesIconClass: {
|
|
213
213
|
type: String,
|
|
214
|
-
default: "icon-single-arrow-
|
|
214
|
+
default: "icon-single-arrow-right"
|
|
215
215
|
},
|
|
216
216
|
/**
|
|
217
217
|
* toggle if overlay over content should be shown if off-canvas is open
|
|
@@ -342,7 +342,7 @@ export default {
|
|
|
342
342
|
nav {
|
|
343
343
|
--nav-width: 30%;
|
|
344
344
|
|
|
345
|
-
position:
|
|
345
|
+
position: fixed;
|
|
346
346
|
left: -100%;
|
|
347
347
|
width: var(--nav-width);
|
|
348
348
|
height: 100%;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
export function useSequence() {
|
|
2
|
+
const sequences = {}
|
|
3
|
+
|
|
4
|
+
function nextSequenceValue(sequenceName = "defaultSequence") {
|
|
5
|
+
const currentValue = sequences[sequenceName] || 0 // get currentValue for specific sequence (else set value to 0)
|
|
6
|
+
sequences[sequenceName] = currentValue + 1 // raise currentValue by 1
|
|
7
|
+
return sequences[sequenceName]
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
function currentSequenceValue(sequenceName = "defaultSequence") {
|
|
11
|
+
return sequences[sequenceName] || 0 // get currentValue for specific sequence (else set value to 0)
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
function resetSequence(sequenceName = "defaultSequence") {
|
|
15
|
+
if (sequences[sequenceName]) {
|
|
16
|
+
sequences[sequenceName] = 0
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
return {nextSequenceValue, currentSequenceValue, resetSequence}
|
|
21
|
+
}
|
package/src/index.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import "clickout-event"
|
|
2
2
|
|
|
3
|
+
// export components
|
|
3
4
|
export { default as CmdAccordion } from '@/components/CmdAccordion'
|
|
4
5
|
export { default as CmdAddressData } from '@/components/CmdAddressData'
|
|
5
6
|
export { default as CmdBackToTopButton } from '@/components/CmdBackToTopButton'
|
|
@@ -42,5 +43,9 @@ export { default as CmdTooltip } from '@/components/CmdTooltip'
|
|
|
42
43
|
export { default as CmdUploadForm } from '@/components/CmdUploadForm'
|
|
43
44
|
export { default as CmdWidthLimitationWrapper } from '@/components/CmdWidthLimitationWrapper'
|
|
44
45
|
|
|
46
|
+
// export directives
|
|
45
47
|
export { default as DirFocus } from '@/directives/focus'
|
|
46
|
-
export { default as DirTelephone } from '@/directives/telephone'
|
|
48
|
+
export { default as DirTelephone } from '@/directives/telephone'
|
|
49
|
+
|
|
50
|
+
// export composables
|
|
51
|
+
export { useSequence } from '@/composables/sequence'
|
package/src/main.js
CHANGED
|
@@ -11,7 +11,7 @@ import 'comand-frontend-framework/src/assets/css/framework-iconfont.css'
|
|
|
11
11
|
|
|
12
12
|
import { createApp } from 'vue'
|
|
13
13
|
// import App from './App.vue'
|
|
14
|
-
import
|
|
14
|
+
import App from './App'
|
|
15
15
|
//import { createRouter, createWebHistory } from 'vue-router'
|
|
16
16
|
import "clickout-event"
|
|
17
17
|
|
|
@@ -55,4 +55,4 @@ import router from "./router"
|
|
|
55
55
|
// })
|
|
56
56
|
|
|
57
57
|
// createApp(App).use(router).directive('telephone', directiveTelephone).directive('focus', directiveFocus).mount('#app')
|
|
58
|
-
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
|
}
|