comand-component-library 3.3.75 → 3.3.76

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.
Files changed (22) hide show
  1. package/dist/comand-component-library.js +4234 -3816
  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 -188
  8. package/src/components/CmdBackToTopButton.vue +1 -1
  9. package/src/components/CmdBox.vue +0 -2
  10. package/src/components/CmdFormElement.vue +3 -4
  11. package/src/components/CmdHeadline.vue +68 -35
  12. package/src/components/CmdImage.vue +355 -21
  13. package/src/components/CmdImageGallery.vue +132 -32
  14. package/src/components/CmdMainNavigation.vue +1 -2
  15. package/src/components/CmdPager.vue +8 -1
  16. package/src/components/CmdSlideButton.vue +1 -7
  17. package/src/components/CmdSocialNetworks.vue +1 -0
  18. package/src/components/CmdSystemMessage.vue +1 -10
  19. package/src/components/CmdTable.vue +3 -3
  20. package/src/components/CmdTextBlock.vue +36 -24
  21. package/src/editmode/editModeContext.js +50 -0
  22. package/src/main.js +8 -19
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>