comand-component-library 3.1.64 → 3.1.67

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "comand-component-library",
3
- "version": "3.1.64",
3
+ "version": "3.1.67",
4
4
  "private": false,
5
5
  "scripts": {
6
6
  "serve": "vue-cli-service serve",
@@ -18,7 +18,7 @@
18
18
  ],
19
19
  "dependencies": {
20
20
  "clickout-event": "^1.1.2",
21
- "comand-frontend-framework": "^3.2.47",
21
+ "comand-frontend-framework": "^3.2.48",
22
22
  "core-js": "^3.20.1",
23
23
  "prismjs": "^1.27.0",
24
24
  "vue": "^3.2.31",
package/src/App.vue CHANGED
@@ -1,13 +1,13 @@
1
1
  <!--suppress HtmlUnknownTarget, NpmUsedModulesInstalled, JSUnresolvedVariable -->
2
2
  <template>
3
3
  <a id="anchor-back-to-top"></a>
4
- <CmdSiteHeader :mainNavigationEntries="navigationData" :sticky="true">
5
- <template v-slot:top-header>
6
- <CmdTopHeaderNavigation :topHeaderNavigationData="topHeaderNavigationData" v-if="topHeaderNavigationData"/>
7
- </template>
4
+ <CmdSiteHeader :cmdMainNavigation="navigationData" :sticky="true">
8
5
  <template v-slot:logo>
9
- <CmdCompanyLogo :link="companyLogoData.link" altText="CoManD Logo" :pathDefaultLogo="require('@/assets/images/logo.svg')"
10
- :pathDarkmodeLogo="require('@/assets/images/logo-darkmode.svg')"/>
6
+ <CmdCompanyLogo :link="companyLogoData.link"
7
+ altText="CoManD Logo"
8
+ :pathDefaultLogo="require('@/assets/images/logo.svg')"
9
+ :pathDarkmodeLogo="require('@/assets/images/logo-darkmode.svg')"
10
+ />
11
11
  </template>
12
12
  </CmdSiteHeader>
13
13
  <main>
@@ -418,7 +418,7 @@
418
418
  labelText="Label (inline) for inputfield (search) without search-button:"
419
419
  :displayLabelInline="true"
420
420
  type="search"
421
- id="inputfield-search"
421
+ id="inputfield-search-without-searchbutton"
422
422
  placeholder="Keyword(s)"
423
423
  v-model="inputSearch"
424
424
  :showSearchButton="false"
@@ -427,7 +427,7 @@
427
427
  labelText="Label (inline) for inputfield (search):"
428
428
  :displayLabelInline="true"
429
429
  type="search"
430
- id="inputfield-search"
430
+ id="inputfield-search-with-searchbutton"
431
431
  placeholder="Keyword(s)"
432
432
  v-model="inputSearch"
433
433
  :status="formElementStatus"/>
@@ -544,6 +544,24 @@
544
544
  :status="formElementStatus"/>
545
545
  </div>
546
546
  </div>
547
+ <CmdInputGroup labelText="Group label for radio group">
548
+ <CmdFormElement element="input"
549
+ labelText="Label for radiobutton"
550
+ type="radio"
551
+ id="input-group-radiobutton"
552
+ name="radiogroup2"
553
+ inputValue="radiobuttonValue1"
554
+ v-model="radiobuttonValue"
555
+ :status="formElementStatus"/>
556
+ <CmdFormElement element="input"
557
+ labelText="Label for radiobutton"
558
+ type="radio"
559
+ id="input-group-radiobutton"
560
+ name="radiogroup2"
561
+ inputValue="radiobuttonValue2"
562
+ v-model="radiobuttonValue"
563
+ :status="formElementStatus"/>
564
+ </CmdInputGroup>
547
565
  <CmdMultipleSwitch labelText="Label for multiple-switch with checkboxes:"
548
566
  :multipleSwitches="multipleSwitchCheckboxData"
549
567
  switchTypes="checkbox"
@@ -594,7 +612,7 @@
594
612
  <a id="section-bank-account-data"></a>
595
613
  <CmdWidthLimitationWrapper>
596
614
  <h2 class="headline-demopage">Bank Account Data</h2>
597
- <CmdBankAccountData :account-data="bankAccountData" :cmd-custom-headline="{ text: 'Bank Account', level: 3}" :allow-copy-by-click="true" />
615
+ <CmdBankAccountData :account-data="bankAccountData" :cmd-custom-headline="{ headlineText: 'Bank Account', headlineLevel: 3}" :allow-copy-by-click="true" />
598
616
  </CmdWidthLimitationWrapper>
599
617
  <!-- end bank account data ------------------------------------------------------------------------------------------------------------------------------------------------------->
600
618
 
@@ -687,13 +705,13 @@
687
705
  <h3>Product boxes</h3>
688
706
  <div class="grid-container-create-columns">
689
707
  <div class="grid-small-item" v-for="(product, index) in boxProductData" :key="index">
690
- <CmdBox boxType="product" :product="product"/>
708
+ <CmdBox boxType="product" :product="product" :cmdCustomHeadline="{headlineLevel: 4}" />
691
709
  </div>
692
710
  </div>
693
711
  <h3>User boxes</h3>
694
712
  <div class="grid-container-create-columns">
695
713
  <div class="grid-small-item" v-for="(user, index) in boxUserData" :key="index">
696
- <CmdBox boxType="user" :user="user"/>
714
+ <CmdBox boxType="user" :user="user" :cmdCustomHeadline="{headlineLevel: 4}" />
697
715
  </div>
698
716
  </div>
699
717
  <h3>Box Site Search</h3>
@@ -723,12 +741,12 @@
723
741
  <a id="section-custom-headline"></a>
724
742
  <CmdWidthLimitationWrapper>
725
743
  <h2 class="headline-demopage">Custom Headline</h2>
726
- <CmdCustomHeadline icon-class="icon-home" pre-headline="Pre-headline" :headline="{ text: 'Headline level 1', level: '1'}"/>
727
- <CmdCustomHeadline :headline="{ text: 'Headline level 2', level: '2'}"/>
728
- <CmdCustomHeadline :headline="{ text: 'Headline level 3', level: '3'}"/>
729
- <CmdCustomHeadline :headline="{ text: 'Headline level 4', level: '4'}"/>
730
- <CmdCustomHeadline :headline="{ text: 'Headline level 5', level: '5'}"/>
731
- <CmdCustomHeadline :headline="{ text: 'Headline level 6', level: '6'}"/>
744
+ <CmdCustomHeadline icon-class="icon-home" pre-headline-text="Pre-headline" headlineText="Headline level 1" :headlineLevel="1"/>
745
+ <CmdCustomHeadline headlineText="Headline level 2" :headlineLevel="2"/>
746
+ <CmdCustomHeadline headlineText="Headline level 3" :headlineLevel="3"/>
747
+ <CmdCustomHeadline headlineText="Headline level 4" :headlineLevel="4"/>
748
+ <CmdCustomHeadline headlineText="Headline level 5" :headlineLevel="5"/>
749
+ <CmdCustomHeadline headlineText="Headline level 6" :headlineLevel="6"/>
732
750
  </CmdWidthLimitationWrapper>
733
751
  <!-- end custom-headline ------------------------------------------------------------------------------------------------------------------------------------------------------->
734
752
 
@@ -748,7 +766,7 @@
748
766
  <a id="section-google-maps-integration"></a>
749
767
  <CmdWidthLimitationWrapper>
750
768
  <h2 class="headline-demopage">Google Maps&trade;-Integration</h2>
751
- <CmdGoogleMaps :addressData="addressData"/>
769
+ <CmdGoogleMaps :address="addressData"/>
752
770
  </CmdWidthLimitationWrapper>
753
771
 
754
772
  <a id="section-image-gallery"></a>
@@ -818,9 +836,9 @@
818
836
  <a id="section-system-message"></a>
819
837
  <CmdWidthLimitationWrapper>
820
838
  <h2 class="headline-demopage">System Message</h2>
821
- <CmdSystemMessage status="error"
839
+ <CmdSystemMessage validationStatus="error"
822
840
  :fullWidth="true"
823
- message="This is an error message!"
841
+ systemMessage="This is an error message!"
824
842
  :iconMessage="{iconClass: 'icon-error-circle'}">
825
843
  <ul>
826
844
  <li>Error #1</li>
@@ -828,14 +846,20 @@
828
846
  <li>Error #3</li>
829
847
  </ul>
830
848
  </CmdSystemMessage>
831
- <CmdSystemMessage status="warning" :fullWidth="true" message="This is a warning message!">
849
+ <CmdSystemMessage validationStatus="warning"
850
+ :fullWidth="true"
851
+ systemMessage="This is a warning message!">
832
852
  <p>This is additional text!</p>
833
853
  </CmdSystemMessage>
834
- <CmdSystemMessage status="success" :fullWidth="true" message="This is a success message!"
854
+ <CmdSystemMessage validationStatus="success"
855
+ :fullWidth="true"
856
+ systemMessage="This is a success message!"
835
857
  :iconMessage="{iconClass: 'icon-check-circle'}">
836
858
  <p>This is additional text!</p>
837
859
  </CmdSystemMessage>
838
- <CmdSystemMessage status="info" :fullWidth="true" message="This is an info message!"
860
+ <CmdSystemMessage validationStatus="info"
861
+ :fullWidth="true"
862
+ systemMessage="This is an info message!"
839
863
  :iconMessage="{iconClass: 'icon-info-circle'}">
840
864
  <p>This is additional text!</p>
841
865
  </CmdSystemMessage>
@@ -857,19 +881,19 @@
857
881
  <h2 class="headline-demopage">Tabs</h2>
858
882
  <h3>Tabs with content from json-file</h3>
859
883
  <CmdTabs :stretchTabs="false" :tabs="tabsData"/>
860
- <h3>Tabs with HTML-content from used component</h3>
884
+ <h3>Tabs with HTML-content (given by slot))</h3>
861
885
  <CmdTabs :stretchTabs="true" :tabs="[{name: 'Tab 1'}, {name: 'Tab 2'}, {name: 'Tab 3'}]" :useSlot="true">
862
886
  <template v-slot:tab-content-0>
863
- <h3>Tab 1</h3>
887
+ <h4>Tab 1 headline</h4>
864
888
  <p>Content</p>
865
889
  </template>
866
890
  <template v-slot:tab-content-1>
867
- <h3>Tab 2</h3>
891
+ <h4>Tab 2</h4>
868
892
  <p>Content</p>
869
893
  <p>Content</p>
870
894
  </template>
871
895
  <template v-slot:tab-content-2>
872
- <h3>Tab 3</h3>
896
+ <h4>Tab 3</h4>
873
897
  <p>Content</p>
874
898
  <p>Content</p>
875
899
  <p>Content</p>
@@ -902,19 +926,20 @@
902
926
  <CmdWidthLimitationWrapper>
903
927
  <h2 class="headline-demopage">Upload-Form</h2>
904
928
  <h3>Simple mode</h3>
905
- <CmdUploadForm headline="Select files to upload"
906
- :enableDragAndDrop="true"
907
- :allowedFileExtensions="['jpg']"
929
+ <CmdUploadForm :enableDragAndDrop="true"
930
+ :allowedFileExtensions="['jpg', 'png']"
908
931
  :allowMultipleFileUploads="true"
909
932
  :advancedMode="false"
933
+ textLegend="Simple upload form"
910
934
  @error="showError"
911
935
  :uploadOptions="{url: 'http://localhost:8888'}"
912
936
  />
913
937
  <h3>Advanced mode</h3>
914
- <CmdUploadForm headline="Select files to upload"
938
+ <CmdUploadForm :cmdCustomHeadlineFieldset="{headlineText: 'Select files to upload', headlineLevel: 3}"
915
939
  :enableDragAndDrop="true"
916
- :allowedFileExtensions="['jpg']"
940
+ :allowedFileExtensions="['jpg', 'png']"
917
941
  :allowMultipleFileUploads="true"
942
+ textLegend="Advanced upload form"
918
943
  :uploadOptions="{url: 'http://localhost:8888'}"
919
944
  />
920
945
  </CmdWidthLimitationWrapper>
@@ -922,18 +947,26 @@
922
947
 
923
948
  <CmdWidthLimitationWrapper id="site-footer" inner-component="footer">
924
949
  <CmdSwitchLanguage :languages="languagesData" @click="doSomething"/>
925
- <CmdFooterNavigation :footerNavigation="footerNavigationData" headline="Links"/>
926
- <CmdOpeningHours :openingHours="openingHoursData" :closed="true" headline="Opening hours"
927
- textOpenClosed="Closed right now!" textHolidaysClosed="Closed on holidays"
928
- textMiscInfo="Miscellaneous information"/>
929
- <CmdAddressData :addressData="addressData" :linkGoogleMaps="true" headline="Contact"/>
950
+ <CmdListOfLinks :links="footerNavigationData"
951
+ :cmdCustomHeadline="{headlineText: 'List of links', headlineLevel: 6}"
952
+ />
953
+ <CmdOpeningHours :openingHours="openingHoursData"
954
+ :closed="true"
955
+ :cmdCustomHeadline="{headlineText: 'Opening hours', headlineLevel: 6}"
956
+ textOpenClosed="Closed right now!"
957
+ textHolidaysClosed="Closed on holidays"
958
+ textMiscInfo="Miscellaneous information"
959
+ />
960
+ <CmdAddressData :addressData="addressData"
961
+ :linkGoogleMaps="true"
962
+ :cmdCustomHeadline="{headlineText: 'Address data', headlineLevel: 6}"
963
+ />
930
964
  </CmdWidthLimitationWrapper>
931
965
 
932
966
  <CmdCopyrightInformation/>
933
967
 
934
968
  <CmdFancyBox :show="fancyBoxCookieDisclaimer" :fancyboxOptions="{}" :allowEscapeKey="false">
935
- <CmdCookieDisclaimer headline="Usage of cookies on this web site"
936
- :cookieOptions="cookieDisclaimerData"
969
+ <CmdCookieDisclaimer :cookieOptions="cookieDisclaimerData"
937
970
  buttonLabelAcceptAllCookies="Accept all cookies"
938
971
  buttonLabelAcceptCurrentSettings="Accept current settings"
939
972
  @closeCookieDisclaimer="fancyBoxCookieDisclaimer = false"
@@ -979,7 +1012,6 @@ import tabsData from '@/assets/data/tabs.json'
979
1012
  import tableDataSmall from '@/assets/data/table-small.json'
980
1013
  import tableDataLarge from '@/assets/data/table-large.json'
981
1014
  import thumbnailScrollerData from '@/assets/data/thumbnail-scroller.json'
982
- import topHeaderNavigationData from '@/assets/data/list-of-links-top-header-navigation.json'
983
1015
 
984
1016
  // import used components
985
1017
  import CmdAddressData from "@/components/CmdAddressData"
@@ -1000,7 +1032,9 @@ import CmdFormFilters from "@/components/CmdFormFilters.vue"
1000
1032
  import CmdGoogleMaps from "./components/CmdGoogleMaps"
1001
1033
  import CmdImageGallery from "@/components/CmdImageGallery.vue"
1002
1034
  import CmdImageZoom from "@/components/CmdImageZoom.vue"
1035
+ import CmdInputGroup from "./components/CmdInputGroup"
1003
1036
  import CmdLoginForm from "@/components/CmdLoginForm.vue"
1037
+ import CmdListOfLinks from "./components/CmdListOfLinks"
1004
1038
  import CmdMainNavigation from "@/components/CmdMainNavigation.vue"
1005
1039
  import CmdMultipleSwitch from "@/components/CmdMultipleSwitch.vue"
1006
1040
  import CmdMultistepFormProgressBar from "@/components/CmdMultistepFormProgressBar.vue"
@@ -1027,6 +1061,7 @@ import * as functions from "@/mixins/FieldValidation.js"
1027
1061
  export default {
1028
1062
  name: "App",
1029
1063
  components: {
1064
+ CmdListOfLinks,
1030
1065
  CmdAddressData,
1031
1066
  CmdBackToTopButton,
1032
1067
  CmdBankAccountData,
@@ -1045,6 +1080,7 @@ export default {
1045
1080
  CmdGoogleMaps,
1046
1081
  CmdImageGallery,
1047
1082
  CmdImageZoom,
1083
+ CmdInputGroup,
1048
1084
  CmdLoginForm,
1049
1085
  CmdMainNavigation,
1050
1086
  CmdMultistepFormProgressBar,
@@ -1148,8 +1184,7 @@ export default {
1148
1184
  tableDataSmall,
1149
1185
  tableDataLarge,
1150
1186
  tabsData,
1151
- thumbnailScrollerData,
1152
- topHeaderNavigationData
1187
+ thumbnailScrollerData
1153
1188
  }
1154
1189
  },
1155
1190
  methods: {
@@ -8,7 +8,6 @@
8
8
  "links": [
9
9
  {
10
10
  "path": "mailto:",
11
- "target": "",
12
11
  "iconClass": "icon-mail",
13
12
  "tooltip": "Send mail"
14
13
  }
@@ -22,7 +21,6 @@
22
21
  "links": [
23
22
  {
24
23
  "path": "mailto:",
25
- "target": "",
26
24
  "iconClass": "icon-mail",
27
25
  "tooltip": "Send mail"
28
26
  },
@@ -42,7 +40,6 @@
42
40
  "links": [
43
41
  {
44
42
  "path": "mailto:",
45
- "target": "",
46
43
  "iconClass": "icon-mail",
47
44
  "tooltip": "Send mail"
48
45
  },
@@ -54,7 +51,6 @@
54
51
  },
55
52
  {
56
53
  "path": "tel:",
57
- "target": "",
58
54
  "iconClass": "icon-phone",
59
55
  "tooltip": "Make call"
60
56
  }
@@ -68,7 +64,6 @@
68
64
  "links": [
69
65
  {
70
66
  "path": "mailto:",
71
- "target": "",
72
67
  "iconClass": "icon-mail",
73
68
  "tooltip": "Send mail"
74
69
  },
@@ -80,7 +75,6 @@
80
75
  },
81
76
  {
82
77
  "path": "tel:",
83
- "target": "",
84
78
  "iconClass": "icon-phone",
85
79
  "tooltip": "Make call"
86
80
  }
@@ -94,7 +88,6 @@
94
88
  "links": [
95
89
  {
96
90
  "path": "mailto:",
97
- "target": "",
98
91
  "iconClass": "icon-mail",
99
92
  "tooltip": "Send mail"
100
93
  },
@@ -106,7 +99,6 @@
106
99
  },
107
100
  {
108
101
  "path": "tel:",
109
- "target": "",
110
102
  "iconClass": "icon-phone",
111
103
  "tooltip": "Make call"
112
104
  }
@@ -4,7 +4,7 @@
4
4
  "cookies": [
5
5
  {
6
6
  "id": "cookie-sessionid",
7
- "description": "These cookies are required for functionality",
7
+ "description": "This cookie is required for functionality",
8
8
  "labelText": "SessionID",
9
9
  "checked": true,
10
10
  "status": "disabled",
@@ -16,7 +16,7 @@
16
16
  },
17
17
  {
18
18
  "id": "cookie-google-recaptcha",
19
- "description": "This cookies prevents bots from sending forms",
19
+ "description": "This cookie prevents bots from sending forms",
20
20
  "labelText": "Google reCaptcha™",
21
21
  "checked": true,
22
22
  "status": "disabled",
@@ -34,7 +34,7 @@
34
34
  "cookies": [
35
35
  {
36
36
  "id": "cookie-google-maps",
37
- "description": "These cookies enables the Google Map",
37
+ "description": "This cookie enables the Google Map",
38
38
  "labelText": "Google Maps™",
39
39
  "checked": false,
40
40
  "linkDataPrivacy": {
@@ -21,22 +21,5 @@
21
21
  "path": "http://www.comand-cms.com",
22
22
  "target": "_blank",
23
23
  "tooltip": "Open CoManD-Website in new tab"
24
- },
25
- {
26
- "type":"router",
27
- "text": "Router-link with path",
28
- "path": "/"
29
- },
30
- {
31
- "type":"router",
32
- "text": "Router-link with name",
33
- "tooltip": "Go to homepage",
34
- "route": {
35
- "name": "home",
36
- "params": {
37
- "param1": "value",
38
- "param2": "value"
39
- }
40
- }
41
24
  }
42
25
  ]
@@ -1,17 +1,20 @@
1
1
  [
2
2
  {
3
3
  "name": "Tab 1",
4
- "headline": "Tab 1 Headline",
4
+ "headlineText": "Tab 1 Headline",
5
+ "headlineLevel": 4,
5
6
  "htmlContent": "<p>Inhalt 1</p>"
6
7
  },
7
8
  {
8
9
  "name": "Tab 2",
9
- "headline": "Tab 2 Headline",
10
+ "headlineText": "Tab 2 Headline",
11
+ "headlineLevel": 4,
10
12
  "htmlContent": "<p>Inhalt 2</p>"
11
13
  },
12
14
  {
13
15
  "name": "Tab 3",
14
- "headline": "Tab 3 Headline",
16
+ "headlineText": "Tab 3 Headline",
17
+ "headlineLevel": 4,
15
18
  "htmlContent": "<p>Inhalt 3</p>"
16
19
  }
17
20
  ]
@@ -1,11 +1,24 @@
1
1
  <template>
2
2
  <!-- begin boxType 'content' -->
3
3
  <div v-if="boxType === 'content'" :class="['cmd-box box content', {open : open, collapsible: collapsible}]">
4
- <header v-if="useSlots?.includes('header')">
5
- <!-- begin slot 'header' -->
6
- <slot name="header"></slot>
7
- <!-- end slot 'header' -->
8
- </header>
4
+ <template v-if="useSlots?.includes('header')">
5
+ <!-- begin collapsible header with slot -->
6
+ <a v-if="collapsible" href="#" :title="open ? iconOpen.tooltip : iconClosed.tooltip" @click.prevent="toggleContentVisibility">
7
+ <!-- begin slot 'header' -->
8
+ <slot name="header"></slot>
9
+ <!-- end slot 'header' -->
10
+ <span class="toggle-icon" :class="[open ? iconOpen.iconClass : iconClosed.iconClass]"></span>
11
+ </a>
12
+ <!-- end collapsible header with slot -->
13
+
14
+ <!-- begin default header with slot -->
15
+ <header v-else>
16
+ <!-- begin slot 'header' -->
17
+ <slot name="header"></slot>
18
+ <!-- end slot 'header' -->
19
+ </header>
20
+ <!-- end default header with slot -->
21
+ </template>
9
22
  <template v-else>
10
23
  <!-- begin header for collapsible -->
11
24
  <a v-if="collapsible" href="#" :title="open ? iconOpen.tooltip : iconClosed.tooltip" @click.prevent="toggleContentVisibility">
@@ -126,7 +126,7 @@ export default {
126
126
  */
127
127
  textLegend: {
128
128
  type: String,
129
- required: true
129
+ required: false
130
130
  },
131
131
  /**
132
132
  * toggle legend visibility
@@ -1,11 +1,11 @@
1
1
  <template>
2
2
  <div class="cmd-company-logo">
3
- <a v-if="link.type === 'router'" href="./" :title="link.tooltip">
4
- <img :src="pathCurrentLogo" :alt="altText"/>
5
- </a>
6
- <router-link v-else to="./" :title="link.tooltip">
3
+ <router-link v-if="link.type === 'router'" :href="link.path" :title="link.tooltip">
7
4
  <img :src="pathCurrentLogo" :alt="altText"/>
8
5
  </router-link>
6
+ <a v-else :to="link.path" :title="link.tooltip">
7
+ <img :src="pathCurrentLogo" :alt="altText"/>
8
+ </a>
9
9
  </div>
10
10
  </template>
11
11