comand-component-library 3.3.74 → 3.3.76

Sign up to get free protection for your applications and to get access to all the features.
Files changed (24) hide show
  1. package/dist/comand-component-library.js +4297 -3879
  2. package/dist/comand-component-library.umd.cjs +4 -4
  3. package/dist/style.css +1 -1
  4. package/package.json +2 -2
  5. package/src/App.vue +269 -211
  6. package/src/assets/data/image.json +1 -5
  7. package/src/assets/styles/global-styles.scss +198 -187
  8. package/src/components/CmdBackToTopButton.vue +1 -29
  9. package/src/components/CmdBox.vue +11 -4
  10. package/src/components/CmdFakeSelect.vue +4 -4
  11. package/src/components/CmdFormElement.vue +5 -6
  12. package/src/components/CmdHeadline.vue +68 -35
  13. package/src/components/CmdImage.vue +355 -21
  14. package/src/components/CmdImageGallery.vue +132 -32
  15. package/src/components/CmdMainNavigation.vue +1 -2
  16. package/src/components/CmdNewsletterSubscription.vue +2 -18
  17. package/src/components/CmdPager.vue +8 -1
  18. package/src/components/CmdSlideButton.vue +1 -7
  19. package/src/components/CmdSocialNetworks.vue +40 -17
  20. package/src/components/CmdSystemMessage.vue +1 -10
  21. package/src/components/CmdTable.vue +3 -3
  22. package/src/components/CmdTextBlock.vue +36 -24
  23. package/src/editmode/editModeContext.js +50 -0
  24. package/src/main.js +8 -18
package/src/App.vue CHANGED
@@ -1,31 +1,42 @@
1
1
  <!--suppress HtmlUnknownTarget, NpmUsedModulesInstalled, JSUnresolvedVariable -->
2
2
  <template>
3
- <div id="page-wrapper">
3
+ <div :id="templateId">
4
+ <div id="page-wrapper"><!-- begin #page-wrapper -->
4
5
  <a id="anchor-back-to-top"></a>
5
6
  <!-- begin site-header --------------------------------------------------------------------------------------------------------------------------------------------------->
6
7
  <CmdSiteHeader :sticky="true">
7
8
  <template v-slot:top-header>
8
9
  <!-- begin list-of-links --------------------------------------------------------------------------------------------------------------------------------------------------->
9
10
  <CmdListOfLinks
10
- :links="listOfLinksData"
11
- orientation="horizontal"
12
- align="right"
11
+ :links="listOfLinksData"
12
+ orientation="horizontal"
13
+ align="right"
13
14
  />
14
15
  <!-- end list-of-links --------------------------------------------------------------------------------------------------------------------------------------------------->
15
16
  </template>
16
17
  <template v-slot:logo>
17
18
  <!-- begin company-logo --------------------------------------------------------------------------------------------------------------------------------------------------->
18
19
  <CmdCompanyLogo
19
- :link="companyLogoData.link"
20
- altText="CoManD Logo"
21
- :pathDefaultLogo="companyLogoData.pathDefaultLogo"
22
- :pathDarkmodeLogo="companyLogoData.pathDarkmodeLogo"
20
+ :link="companyLogoData.link"
21
+ altText="CoManD Logo"
22
+ :pathDefaultLogo="companyLogoData.pathDefaultLogo"
23
+ :pathDarkmodeLogo="companyLogoData.pathDarkmodeLogo"
23
24
  />
24
25
  <!-- end company-logo --------------------------------------------------------------------------------------------------------------------------------------------------->
25
26
  </template>
26
27
  </CmdSiteHeader>
27
28
  <!-- end site-header --------------------------------------------------------------------------------------------------------------------------------------------------->
28
29
  <main>
30
+ <label for="select-template">
31
+ <span class="hidden">Select template</span>
32
+ <select id="select-template" v-model="selectedTemplate">
33
+ <option value="blank">Blank</option>
34
+ <option value="business">Business</option>
35
+ <option value="casual">Casual</option>
36
+ <option value="dating">Dating</option>
37
+ <option value="influencer">Influencer</option>
38
+ </select>
39
+ </label>
29
40
  <!-- begin width-limitation-wrapper (with table of contents) --------------------------------------------------------------------------------------------------------------------------------------------------->
30
41
  <CmdWidthLimitationWrapper :cmdHeadline="{headlineText: 'Table of contents', headlineLevel: 2}">
31
42
  <div class="flex-container">
@@ -75,33 +86,33 @@
75
86
  <h2 class="headline-demopage">Address Data</h2>
76
87
  <div class="flex-container">
77
88
  <CmdAddressData
78
- :addressData="addressData"
79
- :linkGoogleMaps="false"
80
- :cmdHeadline="{headlineText: 'With label texts and icons', headlineLevel: 3}"
89
+ :addressData="addressData"
90
+ :linkGoogleMaps="false"
91
+ :cmdHeadline="{headlineText: 'With label texts and icons', headlineLevel: 3}"
81
92
  />
82
93
  <CmdAddressData
83
- :addressData="addressData"
84
- :linkGoogleMaps="false"
85
- :show-label-texts="false"
86
- :cmdHeadline="{headlineText: 'With label icons only', headlineLevel: 3}"
94
+ :addressData="addressData"
95
+ :linkGoogleMaps="false"
96
+ :show-label-texts="false"
97
+ :cmdHeadline="{headlineText: 'With label icons only', headlineLevel: 3}"
87
98
  />
88
99
  <CmdAddressData
89
- :addressData="addressData"
90
- :linkGoogleMaps="false"
91
- :show-label-icons="false"
92
- :cmdHeadline="{headlineText: 'With label texts', headlineLevel: 3}"
100
+ :addressData="addressData"
101
+ :linkGoogleMaps="false"
102
+ :show-label-icons="false"
103
+ :cmdHeadline="{headlineText: 'With label texts', headlineLevel: 3}"
93
104
  />
94
105
  <CmdAddressData
95
- :addressData="addressData"
96
- :linkGoogleMaps="false"
97
- :showLabels="false"
98
- :cmdHeadline="{headlineText: 'Without labels', headlineLevel: 3}"
106
+ :addressData="addressData"
107
+ :linkGoogleMaps="false"
108
+ :showLabels="false"
109
+ :cmdHeadline="{headlineText: 'Without labels', headlineLevel: 3}"
99
110
  />
100
111
  <CmdAddressData
101
- :addressData="addressData"
102
- :linkGoogleMaps="true"
103
- :showIconsOnly="true"
104
- :cmdHeadline="{headlineText: 'Linked icons only', headlineLevel: 3}"
112
+ :addressData="addressData"
113
+ :linkGoogleMaps="true"
114
+ :showIconsOnly="true"
115
+ :cmdHeadline="{headlineText: 'Linked icons only', headlineLevel: 3}"
105
116
  />
106
117
  </div>
107
118
  </CmdWidthLimitationWrapper>
@@ -115,7 +126,8 @@
115
126
  <h3>Form elements status:</h3>
116
127
  <div class="flex-container">
117
128
  <ul class="list-status">
118
- <li><a href="#" @click.prevent="setStatus('', false)" :class="{'active' : validationStatus === '' && disabledStatus === false}"
129
+ <li><a href="#" @click.prevent="setStatus('', false)"
130
+ :class="{'active' : validationStatus === '' && disabledStatus === false}"
119
131
  id="status-default">Default</a></li>
120
132
  <li class="error">
121
133
  <a href="#" @click.prevent="setStatus('error', false)"
@@ -362,7 +374,8 @@
362
374
  <h3>Headline</h3>
363
375
  <p>Some content inside a paragraph</p>
364
376
  </div>
365
- <img src="media/images/thumbnail-scroller/thumbnail/logo-cmd-blue-landscape.jpg" alt="image"/>
377
+ <img src="media/images/thumbnail-scroller/thumbnail/logo-cmd-blue-landscape.jpg"
378
+ alt="image"/>
366
379
  </li>
367
380
  </ul>
368
381
  </CmdFakeSelect>
@@ -401,13 +414,13 @@
401
414
  <span>Range Value</span>
402
415
  </span>
403
416
  <input
404
- type="number"
405
- :class="validationStatus"
406
- v-model="rangeValue"
407
- :disabled="disabledStatus"
408
- min="0"
409
- max="100"
410
- id="range-value"
417
+ type="number"
418
+ :class="validationStatus"
419
+ v-model="rangeValue"
420
+ :disabled="disabledStatus"
421
+ min="0"
422
+ max="100"
423
+ id="range-value"
411
424
  />
412
425
  </label>
413
426
  <label for="range-slider">
@@ -415,13 +428,13 @@
415
428
  <span>Range Value</span>
416
429
  </span>
417
430
  <input
418
- type="range"
419
- class="range-slider"
420
- id="range-slider"
421
- v-model="rangeValue"
422
- :disabled="disabledStatus"
423
- min="0"
424
- max="100"
431
+ type="range"
432
+ class="range-slider"
433
+ id="range-slider"
434
+ v-model="rangeValue"
435
+ :disabled="disabledStatus"
436
+ min="0"
437
+ max="100"
425
438
  />
426
439
  </label>
427
440
  </span>
@@ -654,10 +667,10 @@
654
667
  <h2>Input-Groups</h2>
655
668
  <h3>Input Group with Radiobuttons [native]</h3>
656
669
  <CmdInputGroup
657
- labelText="Group label for radio-group given by slot:"
658
- :useSlot="true"
659
- :status="validationStatus"
660
- :disabled="disabledStatus"
670
+ labelText="Group label for radio-group given by slot:"
671
+ :useSlot="true"
672
+ :status="validationStatus"
673
+ :disabled="disabledStatus"
661
674
  >
662
675
  <CmdFormElement element="input"
663
676
  labelText="Label for radiobutton"
@@ -687,13 +700,13 @@
687
700
  </dd>
688
701
  </dl>
689
702
  <CmdInputGroup
690
- labelText="Grouplabel for radio-group given by property:"
691
- :required="true"
692
- :inputElements="idForReplacedInputsInInputGroup('radio-group')"
693
- inputTypes="radio"
694
- v-model="inputGroupCheckbox"
695
- :status="validationStatus"
696
- :disabled="disabledStatus"
703
+ labelText="Grouplabel for radio-group given by property:"
704
+ :required="true"
705
+ :inputElements="idForReplacedInputsInInputGroup('radio-group')"
706
+ inputTypes="radio"
707
+ v-model="inputGroupCheckbox"
708
+ :status="validationStatus"
709
+ :disabled="disabledStatus"
697
710
  />
698
711
  <dl>
699
712
  <dt>Selected value:</dt>
@@ -703,13 +716,13 @@
703
716
  </dl>
704
717
  <h3>Input Group with Checkboxes/Radiobuttons (replaced)</h3>
705
718
  <CmdInputGroup
706
- labelText="Grouplabel for radio-group styled as replaced-input-type:"
707
- :inputElements="idForReplacedInputsInInputGroup('replaced-radio-group')"
708
- inputTypes="radio"
709
- v-model="inputGroupValueReplaceInputTypeRadio"
710
- :replaceInputType="true"
711
- :status="validationStatus"
712
- :disabled="disabledStatus"
719
+ labelText="Grouplabel for radio-group styled as replaced-input-type:"
720
+ :inputElements="idForReplacedInputsInInputGroup('replaced-radio-group')"
721
+ inputTypes="radio"
722
+ v-model="inputGroupValueReplaceInputTypeRadio"
723
+ :replaceInputType="true"
724
+ :status="validationStatus"
725
+ :disabled="disabledStatus"
713
726
  />
714
727
  <dl>
715
728
  <dt>Selected value:</dt>
@@ -718,14 +731,14 @@
718
731
  </dd>
719
732
  </dl>
720
733
  <CmdInputGroup
721
- labelText="Grouplabel for checkbox-group styled as replaced-input-type:"
722
- :inputElements="idForReplacedInputsInInputGroup('checkbox-group')"
723
- inputTypes="checkbox"
724
- v-model="inputGroupValueReplaceInputTypeCheckbox"
725
- :replaceInputType="true"
726
- :required="true"
727
- :status="validationStatus"
728
- :disabled="disabledStatus"
734
+ labelText="Grouplabel for checkbox-group styled as replaced-input-type:"
735
+ :inputElements="idForReplacedInputsInInputGroup('checkbox-group')"
736
+ inputTypes="checkbox"
737
+ v-model="inputGroupValueReplaceInputTypeCheckbox"
738
+ :replaceInputType="true"
739
+ :required="true"
740
+ :status="validationStatus"
741
+ :disabled="disabledStatus"
729
742
  />
730
743
  <dl>
731
744
  <dt>Selected value(s):</dt>
@@ -736,14 +749,14 @@
736
749
  <h3>Input Groups with Checkboxes/
737
750
  Radiobuttons (toggle-switches)</h3>
738
751
  <CmdInputGroup
739
- labelText="Grouplabel for checkbox-group styled as toggle-switches:"
740
- :inputElements="idForReplacedInputsInInputGroup('checkbox-group-toggle-switch')"
741
- inputTypes="checkbox"
742
- v-model="inputGroupValueToggleSwitchCheckbox"
743
- :toggleSwitch="true"
744
- required="required"
745
- :status="validationStatus"
746
- :disabled="disabledStatus"
752
+ labelText="Grouplabel for checkbox-group styled as toggle-switches:"
753
+ :inputElements="idForReplacedInputsInInputGroup('checkbox-group-toggle-switch')"
754
+ inputTypes="checkbox"
755
+ v-model="inputGroupValueToggleSwitchCheckbox"
756
+ :toggleSwitch="true"
757
+ required="required"
758
+ :status="validationStatus"
759
+ :disabled="disabledStatus"
747
760
  />
748
761
  <dl>
749
762
  <dt>Selected value(s):</dt>
@@ -752,14 +765,14 @@
752
765
  </dd>
753
766
  </dl>
754
767
  <CmdInputGroup
755
- labelText="Grouplabel for radio-group styled as toggle-switches:"
756
- :inputElements="idForReplacedInputsInInputGroup('radio-group-toggle-switch')"
757
- inputTypes="radio"
758
- v-model="inputGroupValueToggleSwitchRadio"
759
- :toggleSwitch="true"
760
- required="required"
761
- :status="validationStatus"
762
- :disabled="disabledStatus"
768
+ labelText="Grouplabel for radio-group styled as toggle-switches:"
769
+ :inputElements="idForReplacedInputsInInputGroup('radio-group-toggle-switch')"
770
+ inputTypes="radio"
771
+ v-model="inputGroupValueToggleSwitchRadio"
772
+ :toggleSwitch="true"
773
+ required="required"
774
+ :status="validationStatus"
775
+ :disabled="disabledStatus"
763
776
  />
764
777
  <dl>
765
778
  <dt>Selected value(s):</dt>
@@ -768,13 +781,13 @@
768
781
  </dd>
769
782
  </dl>
770
783
  <CmdInputGroup
771
- labelText="Grouplabel for radio-group given by property styled as multiple-switch:"
772
- :inputElements="idForReplacedInputsInInputGroup('radio-group-multiple-switch')"
773
- inputTypes="radio"
774
- :multipleSwitch="true"
775
- v-model="inputGroupValue3"
776
- :status="validationStatus"
777
- :disabled="disabledStatus"
784
+ labelText="Grouplabel for radio-group given by property styled as multiple-switch:"
785
+ :inputElements="idForReplacedInputsInInputGroup('radio-group-multiple-switch')"
786
+ inputTypes="radio"
787
+ :multipleSwitch="true"
788
+ v-model="inputGroupValue3"
789
+ :status="validationStatus"
790
+ :disabled="disabledStatus"
778
791
  />
779
792
  <dl>
780
793
  <dt>Selected value(s):</dt>
@@ -783,15 +796,15 @@
783
796
  </dd>
784
797
  </dl>
785
798
  <CmdInputGroup
786
- labelText="Grouplabel for checkbox-group styled as multiple-switch (stretched horizontally):"
787
- :inputElements="inputGroupCheckboxes"
788
- inputTypes="checkbox"
789
- :multipleSwitch="true"
790
- :required="true"
791
- v-model="inputGroupValue4"
792
- :stretchHorizontally="true"
793
- :status="validationStatus"
794
- :disabled="disabledStatus"
799
+ labelText="Grouplabel for checkbox-group styled as multiple-switch (stretched horizontally):"
800
+ :inputElements="inputGroupCheckboxes"
801
+ inputTypes="checkbox"
802
+ :multipleSwitch="true"
803
+ :required="true"
804
+ v-model="inputGroupValue4"
805
+ :stretchHorizontally="true"
806
+ :status="validationStatus"
807
+ :disabled="disabledStatus"
795
808
  />
796
809
  <dl>
797
810
  <dt>Selected value(s):</dt>
@@ -826,7 +839,9 @@
826
839
  <a id="section-bank-account-data"></a>
827
840
  <CmdWidthLimitationWrapper>
828
841
  <h2 class="headline-demopage">Bank Account Data</h2>
829
- <CmdBankAccountData :account-data="bankAccountData" :cmd-headline="{ headlineText: 'Bank Account', headlineLevel: 3}" :allow-copy-by-click="true"/>
842
+ <CmdBankAccountData :account-data="bankAccountData"
843
+ :cmd-headline="{ headlineText: 'Bank Account', headlineLevel: 3}"
844
+ :allow-copy-by-click="true"/>
830
845
  </CmdWidthLimitationWrapper>
831
846
  <!-- end bank account data ------------------------------------------------------------------------------------------------------------------------------------------------------->
832
847
 
@@ -834,18 +849,22 @@
834
849
  <a id="section-boxes"></a>
835
850
  <CmdWidthLimitationWrapper>
836
851
  <h2 class="headline-demopage">Boxes</h2>
837
- <CmdBoxWrapper :useFlexbox="true" :cmdHeadline="{headlineText: 'Boxes in BoxWrapper with flexbox', headlineLevel: 3}">
838
- <CmdBox v-for="index in 14" :key="index" textBody="Content" :cmd-headline="{headlineText: 'Headline ' + index, headlineLevel: 4}"/>
852
+ <CmdBoxWrapper :useFlexbox="true"
853
+ :cmdHeadline="{headlineText: 'Boxes in BoxWrapper with flexbox', headlineLevel: 3}">
854
+ <CmdBox v-for="index in 14" :key="index" textBody="Content"
855
+ :cmd-headline="{headlineText: 'Headline ' + index, headlineLevel: 4}"/>
839
856
  </CmdBoxWrapper>
840
- <CmdBoxWrapper :useFlexbox="true" :cmdHeadline="{headlineText: 'Different examples of content-boxes (in BoxWrapper)', headlineLevel: 3}">
857
+ <CmdBoxWrapper :useFlexbox="true"
858
+ :cmdHeadline="{headlineText: 'Different examples of content-boxes (in BoxWrapper)', headlineLevel: 3}">
841
859
  <CmdBox
842
- :stretch-vertically="false"
843
- :cmdHeadline="{headlineText: 'Box with cutoff text', headlineLevel: 4}"
844
- :useSlots="['body']"
845
- :cutoff-text-lines="4"
860
+ :stretch-vertically="false"
861
+ :cmdHeadline="{headlineText: 'Box with cutoff text', headlineLevel: 4}"
862
+ :useSlots="['body']"
863
+ :cutoff-text-lines="4"
846
864
  >
847
865
  <template v-slot:body>
848
- This is a long text that is cutoff after a specific number of lines that can be defined by the property 'cutoffTextLines' and be toggled by a link below.
866
+ This is a long text that is cutoff after a specific number of lines that can be defined by
867
+ the property 'cutoffTextLines' and be toggled by a link below.
849
868
  </template>
850
869
  </CmdBox>
851
870
  <CmdBox :useSlots="['header', 'body', 'footer']">
@@ -892,12 +911,13 @@
892
911
  </template>
893
912
  </CmdBox>
894
913
  <CmdBox
895
- :cmdHeadline="{headlineText: 'Collapsible box', headlineLevel: 4}"
896
- :image="{src: 'media/images/content-images/landscape-medium.jpg', altText: 'ALternative text'}"
897
- textBody="This is some text given by property."
898
- :collapsible="true"
914
+ :cmdHeadline="{headlineText: 'Collapsible box', headlineLevel: 4}"
915
+ :image="{src: 'media/images/content-images/landscape-medium.jpg', altText: 'ALternative text'}"
916
+ textBody="This is some text given by property."
917
+ :collapsible="true"
899
918
  />
900
- <CmdBox :useSlots="['header', 'body']" :cmdHeadline="{headlineText: 'Collapsible box', headlineLevel: 4}" :collapsible="true">
919
+ <CmdBox :useSlots="['header', 'body']"
920
+ :cmdHeadline="{headlineText: 'Collapsible box', headlineLevel: 4}" :collapsible="true">
901
921
  <template v-slot:header>
902
922
  <h4>
903
923
  Collapsible box with image
@@ -941,7 +961,9 @@
941
961
  </div>
942
962
  <CmdBoxWrapper :boxesPerRow="[5, 2, 1]" :useRowViewAsDefault="true">
943
963
  <template v-slot="slotProps">
944
- <CmdBox v-for="index in boxUserData.length" :key="index" boxType="user" :user="boxUserData[index - 1]" :cmdHeadline="{headlineLevel: 5}" :rowView="slotProps.rowView"/>
964
+ <CmdBox v-for="index in boxUserData.length" :key="index" boxType="user"
965
+ :user="boxUserData[index - 1]" :cmdHeadline="{headlineLevel: 5}"
966
+ :rowView="slotProps.rowView"/>
945
967
  </template>
946
968
  </CmdBoxWrapper>
947
969
  </CmdWidthLimitationWrapper>
@@ -969,14 +991,17 @@
969
991
  <a id="section-headlines"></a>
970
992
  <CmdWidthLimitationWrapper>
971
993
  <h2 class="headline-demopage">Headlines</h2>
972
- <CmdHeadline :headlineIcon="{iconClass: 'icon-home'}" pre-headline-text="Pre-headline" headlineText="Headline level 1" :headlineLevel="1"/>
994
+ <CmdHeadline :headlineIcon="{iconClass: 'icon-home'}" pre-headline-text="Pre-headline"
995
+ headlineText="Headline level 1" :headlineLevel="1"/>
973
996
  <CmdHeadline headlineText="Headline level 2" :headlineLevel="2"/>
974
997
  <CmdHeadline headlineText="Headline level 3" :headlineLevel="3"/>
975
998
  <CmdHeadline headlineText="Headline level 4" :headlineLevel="4"/>
976
999
  <CmdHeadline headlineText="Headline level 5" :headlineLevel="5"/>
977
1000
  <CmdHeadline headlineText="Headline level 6" :headlineLevel="6"/>
978
- <CmdHeadline pre-headline-text="Pre-headline" headlineText="Headline level 1 (center)" text-align="center" :headlineLevel="1"/>
979
- <CmdHeadline pre-headline-text="Pre-headline" headlineText="Headline level 1 (right)" text-align="right" :headlineLevel="1"/>
1001
+ <CmdHeadline pre-headline-text="Pre-headline" headlineText="Headline level 1 (center)"
1002
+ text-align="center" :headlineLevel="1"/>
1003
+ <CmdHeadline pre-headline-text="Pre-headline" headlineText="Headline level 1 (right)" text-align="right"
1004
+ :headlineLevel="1"/>
980
1005
  </CmdWidthLimitationWrapper>
981
1006
  <!-- end headline ------------------------------------------------------------------------------------------------------------------------------------------------------->
982
1007
 
@@ -985,7 +1010,8 @@
985
1010
  <CmdWidthLimitationWrapper>
986
1011
  <h2 class="headline-demopage">Fancybox</h2>
987
1012
  <h3>FancyBox with text</h3>
988
- <a href="#" @click.prevent="showFancyBox('text','Some text', 'FancyBox with text')">Open FancyBox with text</a>
1013
+ <a href="#" @click.prevent="showFancyBox('text','Some text', 'FancyBox with text')">Open FancyBox with
1014
+ text</a>
989
1015
  <h3>FancyBox with large image given by url</h3>
990
1016
  <a href="#"
991
1017
  @click.prevent="showFancyBox('url', 'media/images/demo-images/large/landscape-01.jpg', 'FancyBox with large image given by url')"
@@ -1074,8 +1100,8 @@
1074
1100
  <CmdWidthLimitationWrapper>
1075
1101
  <h2 class="headline-demopage">Image-Zoom</h2>
1076
1102
  <CmdImageZoom
1077
- :imageSmall="imageData[2].image"
1078
- :imageLarge="imageData[3].image"
1103
+ :imageSmall="imageData[2].image"
1104
+ :imageLarge="imageData[3].image"
1079
1105
  />
1080
1106
  </CmdWidthLimitationWrapper>
1081
1107
  <!-- end image-zoom ------------------------------------------------------------------------------------------------------------------------------------------------------->
@@ -1100,10 +1126,10 @@
1100
1126
  <CmdListOfLinks :links="listOfLinksData"/>
1101
1127
  <h3>Horizontal (aligned left, with headline)</h3>
1102
1128
  <CmdListOfLinks
1103
- orientation="horizontal"
1104
- align="left"
1105
- :links="listOfLinksData"
1106
- :cmdHeadline="{
1129
+ orientation="horizontal"
1130
+ align="left"
1131
+ :links="listOfLinksData"
1132
+ :cmdHeadline="{
1107
1133
  headlineText: 'Headline',
1108
1134
  headlineLevel: 5
1109
1135
  }"
@@ -1111,7 +1137,8 @@
1111
1137
  <h3>Horizontal (aligned center)</h3>
1112
1138
  <CmdListOfLinks orientation="horizontal" align="center" :links="listOfLinksData"/>
1113
1139
  <h3>Horizontal (aligned right)</h3>
1114
- <CmdListOfLinks orientation="horizontal" align="right" :links="listOfLinksData" @click="clickOnListOfLinks"/>
1140
+ <CmdListOfLinks orientation="horizontal" align="right" :links="listOfLinksData"
1141
+ @click="clickOnListOfLinks"/>
1115
1142
  <h3>Large icons</h3>
1116
1143
  <CmdListOfLinks orientation="horizontal" :links="listOfLinksData" :largeIcons="true"/>
1117
1144
  </CmdWidthLimitationWrapper>
@@ -1122,9 +1149,9 @@
1122
1149
  <CmdWidthLimitationWrapper>
1123
1150
  <h2 class="headline-demopage">Main Navigation</h2>
1124
1151
  <CmdMainNavigation
1125
- :stretchMainItems="false"
1126
- :persistOnMobile="false"
1127
- :navigationEntries="navigationData.navigationEntries"
1152
+ :stretchMainItems="false"
1153
+ :persistOnMobile="false"
1154
+ :navigationEntries="navigationData.navigationEntries"
1128
1155
  />
1129
1156
  </CmdWidthLimitationWrapper>
1130
1157
  <!-- end main-navigation ------------------------------------------------------------------------------------------------------------------------------------------------------->
@@ -1134,20 +1161,20 @@
1134
1161
  <CmdWidthLimitationWrapper>
1135
1162
  <h2 class="headline-demopage">Multistepform-Progressbar</h2>
1136
1163
  <h3>Steps with icons</h3>
1137
- <CmdMultistepFormProgressBar
1164
+ <CmdMultistepFormProgressBar
1138
1165
  :multisteps="multistepsData.withIcon"
1139
1166
  separatorIconClass="icon-single-arrow-right"
1140
1167
  @click="showPageMultistep = $event.index + 1"
1141
- />
1168
+ />
1142
1169
  <div>
1143
1170
  <p>Page {{ showPageMultistep }}</p>
1144
1171
  </div>
1145
1172
  <h3>Steps with number</h3>
1146
1173
  <CmdMultistepFormProgressBar
1147
- :showStepNumber="true"
1148
- :multisteps="multistepsData.withoutIcon"
1149
- separatorIconClass="icon-single-arrow-right"
1150
- @click="showPageMultistep = $event.index + 1"
1174
+ :showStepNumber="true"
1175
+ :multisteps="multistepsData.withoutIcon"
1176
+ separatorIconClass="icon-single-arrow-right"
1177
+ @click="showPageMultistep = $event.index + 1"
1151
1178
  />
1152
1179
  <div>
1153
1180
  <p>Page {{ showPageMultistep }}</p>
@@ -1160,7 +1187,8 @@
1160
1187
  <CmdWidthLimitationWrapper>
1161
1188
  <h2 class="headline-demopage">Newsletter Subscription</h2>
1162
1189
  <CmdForm textLegend="Stay-up-to-date" :use-fieldset="false">
1163
- <CmdNewsletterSubscription v-model="newsletter" buttonType="submit" @buttonClick="submitNewsletterRegistration"/>
1190
+ <CmdNewsletterSubscription v-model="newsletter" buttonType="submit"
1191
+ @buttonClick="submitNewsletterRegistration"/>
1164
1192
  </CmdForm>
1165
1193
  </CmdWidthLimitationWrapper>
1166
1194
  <!-- end newsletter-subscription ------------------------------------------------------------------------------------------------------------------------------------------------------->
@@ -1174,19 +1202,19 @@
1174
1202
  <p>Page {{ showPagePager }}</p>
1175
1203
  </div>
1176
1204
  <CmdPager
1177
- :pages="4"
1178
- :itemsPerPage="1"
1179
- @click="showPagePager = $event"
1205
+ :pages="4"
1206
+ :itemsPerPage="1"
1207
+ @click="showPagePager = $event"
1180
1208
  />
1181
1209
  <h3>Button-view</h3>
1182
1210
  <div>
1183
1211
  <p>Page {{ showPagePager }}</p>
1184
1212
  </div>
1185
1213
  <CmdPager
1186
- :pages="4"
1187
- :itemsPerPage="1"
1188
- link-type="button"
1189
- @click="showPagePager = $event"
1214
+ :pages="4"
1215
+ :itemsPerPage="1"
1216
+ link-type="button"
1217
+ @click="showPagePager = $event"
1190
1218
  />
1191
1219
  </CmdWidthLimitationWrapper>
1192
1220
  <!-- end pager ------------------------------------------------------------------------------------------------------------------------------------------------------->
@@ -1197,20 +1225,20 @@
1197
1225
  <h2 class="headline-demopage">Social Networks</h2>
1198
1226
  <h3>With user confirmation (buttons without gap)</h3>
1199
1227
  <CmdSocialNetworks
1200
- :networks="socialNetworksData"
1201
- :userMustAcceptDataPrivacy="true"
1202
- :useGap="false"
1228
+ :networks="socialNetworksData"
1229
+ :userMustAcceptDataPrivacy="true"
1230
+ :useGap="false"
1203
1231
  />
1204
1232
  <h3>Without user confirmation (buttons with gap, text aligned left)</h3>
1205
1233
  <CmdSocialNetworks
1206
- :networks="socialNetworksData"
1207
- :userMustAcceptDataPrivacy="false"
1234
+ :networks="socialNetworksData"
1235
+ :userMustAcceptDataPrivacy="false"
1208
1236
  />
1209
1237
  <h3>Without user confirmation (buttons with gap, text aligned right)</h3>
1210
1238
  <CmdSocialNetworks
1211
- :networks="socialNetworksData"
1212
- :userMustAcceptDataPrivacy="false"
1213
- textAlign="right"
1239
+ :networks="socialNetworksData"
1240
+ :userMustAcceptDataPrivacy="false"
1241
+ textAlign="right"
1214
1242
  />
1215
1243
  </CmdWidthLimitationWrapper>
1216
1244
  <!-- end social-networks ------------------------------------------------------------------------------------------------------------------------------------------------------->
@@ -1221,39 +1249,39 @@
1221
1249
  <h2 class="headline-demopage">Site Header</h2>
1222
1250
  <h3>Header with navigation below logo</h3>
1223
1251
  <CmdSiteHeader
1224
- :cmdMainNavigation="navigationData"
1225
- :cmdCompanyLogo="companyLogoData"
1226
- :sticky="false"
1252
+ :cmdMainNavigation="navigationData"
1253
+ :cmdCompanyLogo="companyLogoData"
1254
+ :sticky="false"
1227
1255
  />
1228
1256
  <h3>Header with navigation inline with logo</h3>
1229
1257
  <CmdSiteHeader
1230
- :cmdMainNavigation="navigationData"
1231
- :cmdCompanyLogo="companyLogoData"
1232
- :sticky="false"
1233
- :navigation-inline="true"
1258
+ :cmdMainNavigation="navigationData"
1259
+ :cmdCompanyLogo="companyLogoData"
1260
+ :sticky="false"
1261
+ :navigation-inline="true"
1234
1262
  />
1235
1263
  <h3>Header with top-header-links, logo and navigation given by slot</h3>
1236
1264
  <CmdSiteHeader :sticky="false">
1237
1265
  <template v-slot:topheader>
1238
1266
  <CmdListOfLinks
1239
- :links="listOfLinksData"
1240
- orientation="horizontal"
1241
- align="right"
1267
+ :links="listOfLinksData"
1268
+ orientation="horizontal"
1269
+ align="right"
1242
1270
  />
1243
1271
  </template>
1244
1272
  <template v-slot:logo>
1245
1273
  <CmdCompanyLogo
1246
- :link="companyLogoData.link"
1247
- altText="CoManD Logo"
1248
- :pathDefaultLogo="companyLogoData.pathDefaultLogo"
1249
- :pathDarkmodeLogo="companyLogoData.pathDarkmodeLogo"
1274
+ :link="companyLogoData.link"
1275
+ altText="CoManD Logo"
1276
+ :pathDefaultLogo="companyLogoData.pathDefaultLogo"
1277
+ :pathDarkmodeLogo="companyLogoData.pathDarkmodeLogo"
1250
1278
  />
1251
1279
  </template>
1252
1280
  <template v-slot:navigation>
1253
1281
  <CmdMainNavigation
1254
- :stretchMainItems="false"
1255
- :persistOnMobile="false"
1256
- :navigationEntries="navigationData.navigationEntries"
1282
+ :stretchMainItems="false"
1283
+ :persistOnMobile="false"
1284
+ :navigationEntries="navigationData.navigationEntries"
1257
1285
  />
1258
1286
  </template>
1259
1287
  </CmdSiteHeader>
@@ -1265,13 +1293,13 @@
1265
1293
  <CmdWidthLimitationWrapper>
1266
1294
  <h2 class="headline-demopage">Site Search</h2>
1267
1295
  <CmdSiteSearch
1268
- v-model:modelValueInput1="siteSearchInput1"
1269
- v-model:modelValueInput2="siteSearchInput2"
1270
- v-model:modelValueRadius="radius"
1271
- v-model:modelValueSearchFilters="filters"
1272
- @search="siteSearchOutput"
1273
- textLegend="Search"
1274
- :cmdFakeSelect="siteSearchFilters"
1296
+ v-model:modelValueInput1="siteSearchInput1"
1297
+ v-model:modelValueInput2="siteSearchInput2"
1298
+ v-model:modelValueRadius="radius"
1299
+ v-model:modelValueSearchFilters="filters"
1300
+ @search="siteSearchOutput"
1301
+ textLegend="Search"
1302
+ :cmdFakeSelect="siteSearchFilters"
1275
1303
  />
1276
1304
  </CmdWidthLimitationWrapper>
1277
1305
  <!-- end site-search ------------------------------------------------------------------------------------------------------------------------------------------------------->
@@ -1323,11 +1351,14 @@
1323
1351
  <CmdWidthLimitationWrapper>
1324
1352
  <h2 class="headline-demopage">Tables</h2>
1325
1353
  <h3>Table as wide as its content (with caption)</h3>
1326
- <CmdTable :collapsible="true" :fullWidthOnDefault="false" :userCanToggleWidth="true" :table-data="tableDataSmall"/>
1354
+ <CmdTable :collapsible="true" :fullWidthOnDefault="false" :userCanToggleWidth="true"
1355
+ :table-data="tableDataSmall"/>
1327
1356
  <h3>Table as wide as its content (without caption)</h3>
1328
- <CmdTable :collapsible="true" :fullWidthOnDefault="false" :userCanToggleWidth="true" :caption="{ text: 'Hidden caption', show: false}" :table-data="tableDataSmall"/>
1357
+ <CmdTable :collapsible="true" :fullWidthOnDefault="false" :userCanToggleWidth="true"
1358
+ :caption="{ text: 'Hidden caption', show: false}" :table-data="tableDataSmall"/>
1329
1359
  <h3>Table as wide as possible</h3>
1330
- <CmdTable :collapsible="true" :fullWidthOnDefault="false" :userCanToggleWidth="true" :table-data="tableDataLarge"/>
1360
+ <CmdTable :collapsible="true" :fullWidthOnDefault="false" :userCanToggleWidth="true"
1361
+ :table-data="tableDataLarge"/>
1331
1362
  </CmdWidthLimitationWrapper>
1332
1363
  <!-- end tables ------------------------------------------------------------------------------------------------------------------------------------------------------->
1333
1364
 
@@ -1338,7 +1369,8 @@
1338
1369
  <h3>Tabs with content from json-file</h3>
1339
1370
  <CmdTabs :stretchTabs="false" :tabs="tabsData"/>
1340
1371
  <h3>Tabs with HTML-content (given by slot))</h3>
1341
- <CmdTabs :stretchTabs="true" :tabs="[{name: 'Tab 1'}, {name: 'Tab 2'}, {name: 'Tab 3'}]" :useSlot="true">
1372
+ <CmdTabs :stretchTabs="true" :tabs="[{name: 'Tab 1'}, {name: 'Tab 2'}, {name: 'Tab 3'}]"
1373
+ :useSlot="true">
1342
1374
  <template v-slot:tab-content-0>
1343
1375
  <h4>Tab 1 headline</h4>
1344
1376
  <p>Content</p>
@@ -1363,8 +1395,10 @@
1363
1395
  <CmdWidthLimitationWrapper>
1364
1396
  <h2 class="headline-demopage">Text-Block</h2>
1365
1397
  <div class="flex-container">
1366
- <CmdTextBlock :cmdHeadline="{headlineText: 'Headline', headlineLevel: 3}" textContent="Text given as text only"/>
1367
- <CmdTextBlock :cmdHeadline="{headlineText: 'Headline', headlineLevel: 3}" htmlContent="<p>Text given as html-content</p>"/>
1398
+ <CmdTextBlock :cmdHeadline="{headlineText: 'Headline', headlineLevel: 3}"
1399
+ textContent="Text given as text only"/>
1400
+ <CmdTextBlock :cmdHeadline="{headlineText: 'Headline', headlineLevel: 3}"
1401
+ htmlContent="<p>Text given as html-content</p>"/>
1368
1402
  </div>
1369
1403
  </CmdWidthLimitationWrapper>
1370
1404
  <!-- end textblock ------------------------------------------------------------------------------------------------------------------------------------------------------->
@@ -1377,23 +1411,23 @@
1377
1411
  <h3>Thumbnail-Scroller with images (opens fancybox)</h3>
1378
1412
 
1379
1413
  <CmdThumbnailScroller
1380
- :thumbnail-scroller-items="thumbnailScrollerImagesData"
1414
+ :thumbnail-scroller-items="thumbnailScrollerImagesData"
1381
1415
  />
1382
1416
  <h3>Thumbnail-Scroller with text (opens url)</h3>
1383
1417
  <CmdThumbnailScroller
1384
- :thumbnail-scroller-items="thumbnailScrollerTextData"
1385
- contentType="text"
1386
- executeOnClick="url"
1387
- :fullWidth="true"
1418
+ :thumbnail-scroller-items="thumbnailScrollerTextData"
1419
+ contentType="text"
1420
+ executeOnClick="url"
1421
+ :fullWidth="true"
1388
1422
  />
1389
1423
  <h3>Thumbnail-Scroller with text (emits click-event)</h3>
1390
1424
  <CmdThumbnailScroller
1391
- :thumbnail-scroller-items="thumbnailScrollerTextData"
1392
- contentType="text"
1393
- executeOnClick="emit"
1394
- @click="onClick"
1395
- :largeIcons="true"
1396
- :fullWidth="true"
1425
+ :thumbnail-scroller-items="thumbnailScrollerTextData"
1426
+ contentType="text"
1427
+ executeOnClick="emit"
1428
+ @click="onClick"
1429
+ :largeIcons="true"
1430
+ :fullWidth="true"
1397
1431
  />
1398
1432
  </div>
1399
1433
  </CmdWidthLimitationWrapper>
@@ -1479,20 +1513,20 @@
1479
1513
 
1480
1514
  <!-- begin fancy-box ------------------------------------------------------------------------------------------------------------------------------------------------------->
1481
1515
  <CmdFancyBox
1482
- :show="fancyBoxCookieDisclaimer"
1483
- :fancyboxOptions="{}"
1484
- :allowEscapeKey="false"
1485
- :cmdHeadline="{show: true, headlineText: 'Cookie Disclaimer', headlineLevel: 2}"
1486
- ariaLabelText="Cookie Disclaimer"
1516
+ :show="fancyBoxCookieDisclaimer"
1517
+ :fancyboxOptions="{}"
1518
+ :allowEscapeKey="false"
1519
+ :cmdHeadline="{show: true, headlineText: 'Cookie Disclaimer', headlineLevel: 2}"
1520
+ ariaLabelText="Cookie Disclaimer"
1487
1521
  >
1488
1522
  <!-- begin cookie-disclaimer ------------------------------------------------------------------------------------------------------------------------------------------------------->
1489
1523
  <CmdCookieDisclaimer
1490
- :cookieOptions="cookieDisclaimerData"
1491
- buttonLabelAcceptAllCookies="Accept all cookies"
1492
- buttonLabelAcceptCurrentSettings="Accept current settings"
1493
- @closeCookieDisclaimer="closeCookieDisclaimer"
1494
- v-model="acceptedCookies"
1495
- :cmdHeadlineCookieDisclaimer="{ show: false }">
1524
+ :cookieOptions="cookieDisclaimerData"
1525
+ buttonLabelAcceptAllCookies="Accept all cookies"
1526
+ buttonLabelAcceptCurrentSettings="Accept current settings"
1527
+ @closeCookieDisclaimer="closeCookieDisclaimer"
1528
+ v-model="acceptedCookies"
1529
+ :cmdHeadlineCookieDisclaimer="{ show: false }">
1496
1530
  <template #privacy-text>
1497
1531
  <p>
1498
1532
  <strong>
@@ -1504,6 +1538,7 @@
1504
1538
  <!-- end cookie-disclaimer ------------------------------------------------------------------------------------------------------------------------------------------------------->
1505
1539
  </CmdFancyBox>
1506
1540
  <!-- end fancy-box ------------------------------------------------------------------------------------------------------------------------------------------------------->
1541
+ </div><!-- end #page-wrapper -->
1507
1542
  </div>
1508
1543
  </template>
1509
1544
 
@@ -1552,6 +1587,7 @@ export default {
1552
1587
  name: "App",
1553
1588
  data() {
1554
1589
  return {
1590
+ selectedTemplate: "blank",
1555
1591
  acceptedCookies: ["google-maps"],
1556
1592
  showTooltip: false,
1557
1593
  disabledStatus: undefined,
@@ -1687,6 +1723,11 @@ export default {
1687
1723
  thumbnailScrollerTextData
1688
1724
  }
1689
1725
  },
1726
+ computed: {
1727
+ templateId() {
1728
+ return "template-" + this.selectedTemplate
1729
+ }
1730
+ },
1690
1731
  methods: {
1691
1732
  navigationDataRight() {
1692
1733
  setTimeout(() => {
@@ -1797,21 +1838,38 @@ export default {
1797
1838
  switchButtonChange() {
1798
1839
  alert("Changed")
1799
1840
  }
1841
+ },
1842
+ watch: {
1843
+ selectedTemplate() {
1844
+ let linkTag = document.querySelector('link')
1845
+
1846
+ if (linkTag) {
1847
+ linkTag.parentNode.removeChild(linkTag)
1848
+ }
1849
+
1850
+ if (this.selectedTemplate !== "blank") {
1851
+ let newLink = document.createElement('link');
1852
+ newLink.rel = 'stylesheet';
1853
+ newLink.href = 'https://cdn.jsdelivr.net/npm/comand-frontend-framework/dist/templates/' + this.selectedTemplate + '.css';
1854
+
1855
+ document.head.appendChild(newLink);
1856
+ }
1857
+ }
1800
1858
  }
1801
1859
  }
1802
1860
  </script>
1803
1861
 
1804
1862
  <style lang="scss">
1805
1863
  .list-status {
1806
- .active {
1807
- color: var(--text-color);
1808
- text-decoration: none;
1809
- background: none;
1810
- }
1864
+ .active {
1865
+ color: var(--text-color);
1866
+ text-decoration: none;
1867
+ background: none;
1868
+ }
1811
1869
  }
1812
1870
 
1813
1871
  main .cmd-width-limitation-wrapper:not(:last-of-type) {
1814
- border-bottom: var(--default-border);
1815
- border-style: dashed;
1872
+ border-bottom: var(--default-border);
1873
+ border-style: dashed;
1816
1874
  }
1817
1875
  </style>