comand-component-library 3.3.84 → 3.3.86

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 (38) hide show
  1. package/dist/comand-component-library.js +5623 -3929
  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 +215 -112
  6. package/src/assets/data/component-structure.json +228 -0
  7. package/src/assets/data/form-elements.json +156 -0
  8. package/src/assets/data/opening-hours.json +79 -37
  9. package/src/components/CmdAddressData.vue +187 -201
  10. package/src/components/CmdAddressDataItem.vue +306 -0
  11. package/src/components/CmdBox.vue +1 -0
  12. package/src/components/CmdBoxWrapper.vue +53 -5
  13. package/src/components/CmdFancyBox.vue +31 -4
  14. package/src/components/CmdForm.vue +98 -4
  15. package/src/components/CmdFormElement.vue +5 -1
  16. package/src/components/CmdHeadline.vue +179 -52
  17. package/src/components/CmdImage.vue +205 -76
  18. package/src/components/CmdImageGallery.vue +88 -85
  19. package/src/components/CmdListOfLinks.vue +63 -43
  20. package/src/components/CmdListOfLinksItem.vue +97 -0
  21. package/src/components/CmdLoginForm.vue +3 -6
  22. package/src/components/CmdMultistepFormProgressBar.vue +37 -8
  23. package/src/components/CmdOpeningHours.vue +280 -63
  24. package/src/components/CmdOpeningHoursItem.vue +264 -0
  25. package/src/components/{CmdPager.vue → CmdPagination.vue} +2 -2
  26. package/src/components/CmdSlideshow.vue +137 -10
  27. package/src/components/CmdSocialNetworks.vue +115 -28
  28. package/src/components/CmdSocialNetworksItem.vue +184 -0
  29. package/src/components/CmdTable.vue +0 -1
  30. package/src/components/CmdTextImageBlock.vue +158 -0
  31. package/src/components/CmdThumbnailScroller.vue +132 -12
  32. package/src/components/CmdToggleDarkMode.vue +58 -1
  33. package/src/components/EditComponentWrapper.vue +553 -0
  34. package/src/index.js +2 -2
  35. package/src/mixins/EditMode.vue +28 -9
  36. package/src/utils/editmode.js +30 -5
  37. package/src/components/CmdTextBlock.vue +0 -73
  38. package/src/editmode/editModeContext.js +0 -50
package/src/App.vue CHANGED
@@ -10,12 +10,20 @@
10
10
  @toggle-sidebar="setOpenStatus"
11
11
  >
12
12
  <template #open>
13
- <div>
13
+ <CmdBoxWrapper
14
+ :boxesPerRow="[1]"
15
+ :allowMultipleExpandedBoxes="false"
16
+ :allowUserToToggleOrientation="false"
17
+ :openBoxesByDefault="openBoxes"
18
+ :useGap="false"
19
+ >
20
+ <template v-slot="slotProps">
14
21
  <CmdBox
15
22
  :use-slots="['body']"
16
23
  :collapsible="true"
17
- :cmdHeadline="{headlineText: 'Template Settings', headlineLevel: 4, headlineIcon: {iconClass: 'icon-template'}}"
18
- :openCollapsedBox="openBoxes.includes('template')"
24
+ :cmdHeadline="{headlineText: 'Template Settings', headlineLevel: 4, headlineIcon: {iconClass: 'icon-settings-template'}}"
25
+ :openCollapsedBox="slotProps.boxIsOpen(0)"
26
+ @toggleCollapse="slotProps.boxToggled(0, $event)"
19
27
  >
20
28
  <template v-slot:body>
21
29
  <label for="select-template">
@@ -33,8 +41,9 @@
33
41
  <CmdBox
34
42
  :use-slots="['body']"
35
43
  :collapsible="true"
36
- :cmdHeadline="{headlineText: 'Components', headlineLevel: 4, headlineIcon: {iconClass: 'icon-component'}}"
37
- :openCollapsedBox="openBoxes.includes('components')"
44
+ :cmdHeadline="{headlineText: 'Components', headlineLevel: 4, headlineIcon: {iconClass: 'icon-settings-component'}}"
45
+ :openCollapsedBox="slotProps.boxIsOpen(1)"
46
+ @toggleCollapse="slotProps.boxToggled(1, $event)"
38
47
  >
39
48
  <template v-slot:body>
40
49
  <ul>
@@ -48,28 +57,33 @@
48
57
  <li><a href="#section-fancybox">Fancybox</a></li>
49
58
  </ul>
50
59
  <ul>
60
+ <li><a href="#section-forms">Forms</a></li>
51
61
  <li><a href="#section-google-maps">Google-Maps&trade;</a></li>
62
+ <li><a href="#section-headlines">Headlines</a></li>
52
63
  <li><a href="#section-icons">Icons</a></li>
53
64
  <li><a href="#section-image">Image</a></li>
54
65
  <li><a href="#section-image-gallery">Image Gallery</a></li>
55
66
  <li><a href="#section-image-zoom">Image-Zoom</a></li>
56
67
  <li><a href="#section-list-of-links">List Of Links</a></li>
57
- <li><a href="#section-login-form">Login Form</a></li>
58
68
  </ul>
59
69
  <ul>
70
+ <li><a href="#section-login-form">Login Form</a></li>
60
71
  <li><a href="#section-main-navigation">Main-Navigation</a></li>
61
- <li><a href="#section-multistep-form-progress-bar">Multistepform-Progressbar</a>
62
- </li>
63
- <li><a href="#section-pager">Pager</a></li>
64
- <li><a href="#section-social-networks">Social Networks</a></li>
72
+ <li><a href="#section-multistep-form-progress-bar">Multistepform-Progressbar</a></li>
73
+ <li><a href="#section-opening-hours">Opening Hours</a></li>
74
+ <li><a href="#section-pagination">Pagination</a></li>
75
+ <li><a href="#section-site-footer">Site Footer</a></li>
65
76
  <li><a href="#section-site-header">Site Header</a></li>
66
77
  <li><a href="#section-site-search">Site Search</a></li>
67
78
  <li><a href="#section-slideshow">Slideshow</a></li>
68
79
  </ul>
69
80
  <ul>
81
+ <li><a href="#section-social-networks">Social Networks</a></li>
82
+ <li><a href="#section-switch-language">Switch Language</a></li>
70
83
  <li><a href="#section-system-message">System-Message</a></li>
71
84
  <li><a href="#section-tables">Tables</a></li>
72
85
  <li><a href="#section-tabs">Tabs</a></li>
86
+ <li><a href="#section-text-image-block">Text Image Block</a></li>
73
87
  <li><a href="#section-thumbnail-scroller">Thumbnail-Scroller</a></li>
74
88
  <li><a href="#section-toggle-darkmode">ToggleDarkMode</a></li>
75
89
  <li><a href="#section-tooltip">Tooltip</a></li>
@@ -77,7 +91,8 @@
77
91
  </ul>
78
92
  </template>
79
93
  </CmdBox>
80
- </div>
94
+ </template>
95
+ </CmdBoxWrapper>
81
96
  <dl class="comand-versions">
82
97
  <dt>Frontend-Framework Version:</dt>
83
98
  <dd>{{ packageJson.dependencies['comand-frontend-framework'].replace("^", "") }}</dd>
@@ -87,12 +102,12 @@
87
102
  </template>
88
103
  <template #closed>
89
104
  <div class="closed-sidebar">
90
- <a href="#" class="button primary" title="Open Template Settings" @click.prevent="openBox('template')">
91
- <span class="icon-home"></span>
105
+ <a href="#" class="button primary" title="Open Template Settings" @click.prevent="openBox(0)">
106
+ <span class="icon-settings-template"></span>
92
107
  </a>
93
108
  <a href="#" class="button primary" title="Open Template Settings"
94
- @click.prevent="openBox('components')">
95
- <span class="icon-cogs"></span>
109
+ @click.prevent="openBox(1)">
110
+ <span class="icon-settings-component"></span>
96
111
  </a>
97
112
  </div>
98
113
  </template>
@@ -874,7 +889,8 @@
874
889
  <output>{{ inputGroupValue4 }}</output>
875
890
  </dd>
876
891
  </dl>
877
- </fieldset><!-- end fieldset -->
892
+ </fieldset>
893
+ <!-- end fieldset -->
878
894
  <div class="button-wrapper">
879
895
  <small><sup>*</sup>values will not be submitted with the form!</small>
880
896
  <CmdFormElement element="button"
@@ -912,13 +928,15 @@
912
928
  <CmdWidthLimitationWrapper>
913
929
  <h2 class="headline-demopage">Boxes</h2>
914
930
  <CmdBoxWrapper :useFlexbox="true"
915
- :cmdHeadline="{headlineText: 'Boxes in BoxWrapper with flexbox', headlineLevel: 3}">
931
+ :cmdHeadline="{headlineText: 'Boxes in BoxWrapper with flexbox', headlineLevel: 3}"
932
+ :use-gap="true">
916
933
  <CmdBox v-for="index in 14"
917
934
  :key="index"
918
935
  textBody="Content"
919
936
  :cmd-headline="{headlineText: 'Headline ' + index, headlineLevel: 4}"/>
920
937
  </CmdBoxWrapper>
921
938
  <CmdBoxWrapper :useFlexbox="true"
939
+ :use-gap="true"
922
940
  :cmdHeadline="{headlineText: 'Different examples of content-boxes (in BoxWrapper)', headlineLevel: 3}">
923
941
  <CmdBox
924
942
  :stretch-vertically="false"
@@ -1021,7 +1039,7 @@
1021
1039
  </div>
1022
1040
  </div>
1023
1041
  <h3>User boxes</h3>
1024
- <CmdBoxWrapper :boxesPerRow="[5, 2, 1]" :useRowViewAsDefault="true">
1042
+ <CmdBoxWrapper :boxesPerRow="[5, 2, 1]" :useRowViewAsDefault="true" :useGap="true">
1025
1043
  <template v-slot="slotProps">
1026
1044
  <CmdBox
1027
1045
  v-for="index in boxUserData.length"
@@ -1033,7 +1051,10 @@
1033
1051
  </template>
1034
1052
  </CmdBoxWrapper>
1035
1053
  <h3>Product boxes (collapsible)</h3>
1036
- <CmdBoxWrapper :boxesPerRow="[5, 2, 1]" :useRowViewAsDefault="true">
1054
+ <CmdBoxWrapper :boxesPerRow="[5, 2, 1]"
1055
+ :useRowViewAsDefault="true"
1056
+ :allowMultipleExpandedBoxes="false"
1057
+ :useGap="true">
1037
1058
  <template v-slot="slotProps">
1038
1059
  <CmdBox
1039
1060
  v-for="index in boxProductData.length"
@@ -1041,11 +1062,12 @@
1041
1062
  boxType="content"
1042
1063
  :collapsible="true"
1043
1064
  :useSlots="['body']"
1044
- :allowMultipleExpandedBoxes="false"
1045
1065
  :cmdHeadline="{headlineText: 'Box ' + index, headlineLevel: 5}"
1046
1066
  :rowView="slotProps.rowView"
1067
+ :openCollapsedBox="slotProps.boxIsOpen(index - 1)"
1068
+ @toggleCollapse="slotProps.boxToggled(index - 1, $event)"
1047
1069
  >
1048
- <template #body>Content {{ index }}</template>
1070
+ <template #body>{{slotProps.currentOpenBox}}<br />Content {{ index }}</template>
1049
1071
  </CmdBox>
1050
1072
  </template>
1051
1073
  </CmdBoxWrapper>
@@ -1076,11 +1098,11 @@
1076
1098
  <h2 class="headline-demopage">Headlines</h2>
1077
1099
  <CmdHeadline :headlineIcon="{iconClass: 'icon-home'}" pre-headline-text="Pre-headline"
1078
1100
  headlineText="Headline level 1" :headlineLevel="1"/>
1079
- <CmdHeadline headlineText="Headline level 2" :headlineLevel="2"/>
1080
- <CmdHeadline headlineText="Headline level 3" :headlineLevel="3"/>
1081
- <CmdHeadline headlineText="Headline level 4" :headlineLevel="4"/>
1082
- <CmdHeadline headlineText="Headline level 5" :headlineLevel="5"/>
1083
- <CmdHeadline headlineText="Headline level 6" :headlineLevel="6"/>
1101
+ <CmdHeadline pre-headline-text="Pre-headline" :headlineIcon="{iconClass: 'icon-home'}" headlineText="Headline level 2" :headlineLevel="2" />
1102
+ <CmdHeadline pre-headline-text="Pre-headline" :headlineIcon="{iconClass: 'icon-home'}" headlineText="Headline level 3" :headlineLevel="3"/>
1103
+ <CmdHeadline pre-headline-text="Pre-headline" :headlineIcon="{iconClass: 'icon-home'}" headlineText="Headline level 4" :headlineLevel="4"/>
1104
+ <CmdHeadline pre-headline-text="Pre-headline" :headlineIcon="{iconClass: 'icon-home'}" headlineText="Headline level 5" :headlineLevel="5"/>
1105
+ <CmdHeadline pre-headline-text="Pre-headline" :headlineIcon="{iconClass: 'icon-home'}" headlineText="Headline level 6" :headlineLevel="6"/>
1084
1106
  <CmdHeadline pre-headline-text="Pre-headline" headlineText="Headline level 1 (center)"
1085
1107
  text-align="center" :headlineLevel="1"/>
1086
1108
  <CmdHeadline pre-headline-text="Pre-headline" headlineText="Headline level 1 (right)"
@@ -1089,6 +1111,53 @@
1089
1111
  </CmdWidthLimitationWrapper>
1090
1112
  <!-- end headline ------------------------------------------------------------------------------------------------------------------------------------------------------->
1091
1113
 
1114
+ <!-- begin forms ------------------------------------------------------------------------------------------------------------------------------------------------------->
1115
+ <a id="section-forms"></a>
1116
+ <CmdWidthLimitationWrapper>
1117
+ <h2 class="headline-demopage">Forms</h2>
1118
+ <h3>Form elements given by data</h3>
1119
+ <CmdForm
1120
+ :useFieldset="true"
1121
+ :useSlot="false"
1122
+ textLegend="Legend"
1123
+ id="form-component"
1124
+ novalidate="novalidate"
1125
+ :formElements="formElementsData"
1126
+ @submit="doConsoleLog"
1127
+ />
1128
+ <h3>Form elements given by slot</h3>
1129
+ <CmdForm
1130
+ :use-fieldset="true"
1131
+ textLegend="Legend"
1132
+ id="form-component"
1133
+ novalidate="novalidate"
1134
+ @submit="doConsoleLog"
1135
+ >
1136
+ <CmdFormElement
1137
+ element="input"
1138
+ text="text"
1139
+ name="input-text"
1140
+ labelText="Text input"
1141
+ placeholder="Text input"
1142
+ />
1143
+ <CmdFormElement
1144
+ element="input"
1145
+ text="number"
1146
+ labelText="Number input"
1147
+ name="input-number"
1148
+ modelValue="1"
1149
+ />
1150
+ <CmdFormElement
1151
+ element="input"
1152
+ text="password"
1153
+ labelText="Password input"
1154
+ name="password-number"
1155
+ placeholder="Password input"
1156
+ />
1157
+ </CmdForm>
1158
+ </CmdWidthLimitationWrapper>
1159
+ <!-- end forms ------------------------------------------------------------------------------------------------------------------------------------------------------->
1160
+
1092
1161
  <!-- begin fancybox ------------------------------------------------------------------------------------------------------------------------------------------------------->
1093
1162
  <a id="section-fancybox"></a>
1094
1163
  <CmdWidthLimitationWrapper>
@@ -1191,18 +1260,6 @@
1191
1260
  </CmdWidthLimitationWrapper>
1192
1261
  <!-- end image-zoom ------------------------------------------------------------------------------------------------------------------------------------------------------->
1193
1262
 
1194
- <!-- begin login-form ------------------------------------------------------------------------------------------------------------------------------------------------------->
1195
- <a id="section-login-form"></a>
1196
- <CmdWidthLimitationWrapper>
1197
- <h2 class="headline-demopage">Login Form</h2>
1198
- <CmdForm :use-validation="true" :use-fieldset="false">
1199
- <CmdLoginForm v-model="loginData" textLegendLoginForm="Please log in"/>
1200
- </CmdForm>
1201
- <p>LoginData: {{ loginData }}</p>
1202
- </CmdWidthLimitationWrapper>
1203
- <!-- end list-of-links ------------------------------------------------------------------------------------------------------------------------------------------------------->
1204
-
1205
-
1206
1263
  <!-- begin list-of-links ------------------------------------------------------------------------------------------------------------------------------------------------------->
1207
1264
  <a id="section-list-of-links"></a>
1208
1265
  <CmdWidthLimitationWrapper>
@@ -1229,6 +1286,17 @@
1229
1286
  </CmdWidthLimitationWrapper>
1230
1287
  <!-- end list-of-links ------------------------------------------------------------------------------------------------------------------------------------------------------->
1231
1288
 
1289
+ <!-- begin login-form ------------------------------------------------------------------------------------------------------------------------------------------------------->
1290
+ <a id="section-login-form"></a>
1291
+ <CmdWidthLimitationWrapper>
1292
+ <h2 class="headline-demopage">Login Form</h2>
1293
+ <CmdForm :use-validation="true" :use-fieldset="false">
1294
+ <CmdLoginForm v-model="loginData" textLegendLoginForm="Please log in"/>
1295
+ </CmdForm>
1296
+ <p>LoginData: {{ loginData }}</p>
1297
+ </CmdWidthLimitationWrapper>
1298
+ <!-- end login-form ------------------------------------------------------------------------------------------------------------------------------------------------------->
1299
+
1232
1300
  <!-- begin main-navigation ------------------------------------------------------------------------------------------------------------------------------------------------------->
1233
1301
  <a id="section-main-navigation"></a>
1234
1302
  <CmdWidthLimitationWrapper>
@@ -1278,15 +1346,29 @@
1278
1346
  </CmdWidthLimitationWrapper>
1279
1347
  <!-- end newsletter-subscription ------------------------------------------------------------------------------------------------------------------------------------------------------->
1280
1348
 
1281
- <!-- begin pager ------------------------------------------------------------------------------------------------------------------------------------------------------->
1282
- <a id="section-pager"></a>
1349
+ <!-- begin opening-hours ------------------------------------------------------------------------------------------------------------------------------------------------------->
1350
+ <a id="section-opening-hours"></a>
1283
1351
  <CmdWidthLimitationWrapper>
1284
- <h2 class="headline-demopage">Pager</h2>
1352
+ <h2 class="headline-demopage">Opening Hours</h2>
1353
+ <CmdOpeningHours
1354
+ :openingHours="openingHoursData"
1355
+ :cmdHeadline="{headlineText: 'Opening hours', headlineLevel: 6}"
1356
+ textHolidaysClosed="Closed on holidays"
1357
+ textMiscInfo="Miscellaneous information"
1358
+ :checkInterval="0"
1359
+ />
1360
+ </CmdWidthLimitationWrapper>
1361
+ <!-- end opening-hours ------------------------------------------------------------------------------------------------------------------------------------------------------->
1362
+
1363
+ <!-- begin pagination ------------------------------------------------------------------------------------------------------------------------------------------------------->
1364
+ <a id="section-pagination"></a>
1365
+ <CmdWidthLimitationWrapper>
1366
+ <h2 class="headline-demopage">Pagination</h2>
1285
1367
  <h3>Link-view</h3>
1286
1368
  <div>
1287
1369
  <p>Page {{ showPagePager }}</p>
1288
1370
  </div>
1289
- <CmdPager
1371
+ <CmdPagination
1290
1372
  :pages="4"
1291
1373
  :itemsPerPage="1"
1292
1374
  @click="showPagePager = $event"
@@ -1295,38 +1377,24 @@
1295
1377
  <div>
1296
1378
  <p>Page {{ showPagePager }}</p>
1297
1379
  </div>
1298
- <CmdPager
1380
+ <CmdPagination
1299
1381
  :pages="4"
1300
1382
  :itemsPerPage="1"
1301
1383
  link-type="button"
1302
1384
  @click="showPagePager = $event"
1303
1385
  />
1304
1386
  </CmdWidthLimitationWrapper>
1305
- <!-- end pager ------------------------------------------------------------------------------------------------------------------------------------------------------->
1387
+ <!-- end pagination ------------------------------------------------------------------------------------------------------------------------------------------------------->
1306
1388
 
1307
- <!-- begin social-networks ------------------------------------------------------------------------------------------------------------------------------------------------------->
1308
- <a id="section-social-networks"></a>
1389
+ <!-- begin site-footer ------------------------------------------------------------------------------------------------------------------------------------------------------->
1390
+ <a id="section-site-footer"></a>
1309
1391
  <CmdWidthLimitationWrapper>
1310
- <h2 class="headline-demopage">Social Networks</h2>
1311
- <h3>With user confirmation (buttons without gap)</h3>
1312
- <CmdSocialNetworks
1313
- :networks="socialNetworksData"
1314
- :userMustAcceptDataPrivacy="true"
1315
- :useGap="false"
1316
- />
1317
- <h3>Without user confirmation (buttons with gap, text aligned right)</h3>
1318
- <CmdSocialNetworks
1319
- :networks="socialNetworksData"
1320
- :userMustAcceptDataPrivacy="false"
1321
- />
1322
- <h3>Without user confirmation (buttons with gap, text aligned left)</h3>
1323
- <CmdSocialNetworks
1324
- :networks="socialNetworksData"
1325
- :userMustAcceptDataPrivacy="false"
1326
- textAlign="left"
1327
- />
1392
+ <h2 class="headline-demopage">Site Footer</h2>
1393
+ <CmdSiteFooter>
1394
+ Slotcontent
1395
+ </CmdSiteFooter>
1328
1396
  </CmdWidthLimitationWrapper>
1329
- <!-- end social-networks ------------------------------------------------------------------------------------------------------------------------------------------------------->
1397
+ <!-- end site-footer ------------------------------------------------------------------------------------------------------------------------------------------------------->
1330
1398
 
1331
1399
  <!-- begin site-header ------------------------------------------------------------------------------------------------------------------------------------------------------->
1332
1400
  <a id="section-site-header"></a>
@@ -1393,10 +1461,49 @@
1393
1461
  <a id="section-slideshow"></a>
1394
1462
  <CmdWidthLimitationWrapper>
1395
1463
  <h2 class="headline-demopage">Slideshow</h2>
1396
- <CmdSlideshow :slideshow-items="slideshowData" :showCounter="true" :autoplay="true"/>
1464
+ <CmdSlideshow
1465
+ :slideshow-items="slideshowData"
1466
+ :showCounter="true"
1467
+ :autoplay="true"
1468
+ />
1397
1469
  </CmdWidthLimitationWrapper>
1398
1470
  <!-- end slideshow ------------------------------------------------------------------------------------------------------------------------------------------------------->
1399
1471
 
1472
+ <!-- begin social-networks ------------------------------------------------------------------------------------------------------------------------------------------------------->
1473
+ <a id="section-social-networks"></a>
1474
+ <CmdWidthLimitationWrapper>
1475
+ <h2 class="headline-demopage">Social Networks</h2>
1476
+ <h3>With user confirmation (buttons without gap)</h3>
1477
+ <CmdSocialNetworks
1478
+ :networks="socialNetworksData"
1479
+ :userMustAcceptDataPrivacy="true"
1480
+ :useGap="false"
1481
+ />
1482
+ <h3>Without user confirmation (buttons with gap, text aligned right)</h3>
1483
+ <CmdSocialNetworks
1484
+ :networks="socialNetworksData"
1485
+ :userMustAcceptDataPrivacy="false"
1486
+ />
1487
+ <h3>Without user confirmation (buttons with gap, text aligned left)</h3>
1488
+ <CmdSocialNetworks
1489
+ :networks="socialNetworksData"
1490
+ :userMustAcceptDataPrivacy="false"
1491
+ textAlign="left"
1492
+ />
1493
+ </CmdWidthLimitationWrapper>
1494
+ <!-- end social-networks ------------------------------------------------------------------------------------------------------------------------------------------------------->
1495
+
1496
+ <!-- begin switch-language ------------------------------------------------------------------------------------------------------------------------------------------------------->
1497
+ <a id="section-switch-language"></a>
1498
+ <CmdWidthLimitationWrapper>
1499
+ <h2 class="headline-demopage">Switch Language</h2>
1500
+ <CmdSwitchLanguage
1501
+ :languages="languagesData"
1502
+ @click="doSomething"
1503
+ />
1504
+ </CmdWidthLimitationWrapper>
1505
+ <!-- end switch-language ------------------------------------------------------------------------------------------------------------------------------------------------------->
1506
+
1400
1507
  <!-- begin system-message ------------------------------------------------------------------------------------------------------------------------------------------------------->
1401
1508
  <a id="section-system-message"></a>
1402
1509
  <CmdWidthLimitationWrapper>
@@ -1475,18 +1582,35 @@
1475
1582
  </CmdWidthLimitationWrapper>
1476
1583
  <!-- end tabs ------------------------------------------------------------------------------------------------------------------------------------------------------->
1477
1584
 
1478
- <!-- begin textblock ------------------------------------------------------------------------------------------------------------------------------------------------------->
1479
- <a id="section-text-block"></a>
1585
+ <!-- begin text-image-block ------------------------------------------------------------------------------------------------------------------------------------------------------->
1586
+ <a id="section-text-image-block"></a>
1480
1587
  <CmdWidthLimitationWrapper>
1481
- <h2 class="headline-demopage">Text-Block</h2>
1588
+ <h2 class="headline-demopage">Text-Image-Block</h2>
1482
1589
  <div class="flex-container">
1483
- <CmdTextBlock :cmdHeadline="{headlineText: 'Headline', headlineLevel: 3}"
1484
- textContent="Text given as text only"/>
1485
- <CmdTextBlock :cmdHeadline="{headlineText: 'Headline', headlineLevel: 3}"
1486
- htmlContent="<p>Text given as html-content</p>"/>
1590
+ <CmdTextImageBlock
1591
+ :cmdHeadline="{headlineText: 'Text-Image-Block with image', headlineLevel: 3}"
1592
+ :cmdImage='{
1593
+ "image": {
1594
+ "src": "/media/images/demo-images/large/landscape-01.jpg",
1595
+ "alt": "alternative text",
1596
+ "tooltip": "tooltip"
1597
+ },
1598
+ "figcaption": {
1599
+ "text": "figcaption",
1600
+ "position": "bottom",
1601
+ "textAlign": "center",
1602
+ "show": true
1603
+ }
1604
+ }'
1605
+ htmlContent="Text given as text only"
1606
+ />
1607
+ <CmdTextImageBlock
1608
+ :cmdHeadline="{headlineText: 'Headline', headlineLevel: 3}"
1609
+ htmlContent="<p>Text given as html-content</p>"
1610
+ />
1487
1611
  </div>
1488
1612
  </CmdWidthLimitationWrapper>
1489
- <!-- end textblock ------------------------------------------------------------------------------------------------------------------------------------------------------->
1613
+ <!-- end text-image-block ------------------------------------------------------------------------------------------------------------------------------------------------------->
1490
1614
 
1491
1615
  <!-- begin thumbnail-scroller ------------------------------------------------------------------------------------------------------------------------------------------------------->
1492
1616
  <a id="section-thumbnail-scroller"></a>
@@ -1564,38 +1688,6 @@
1564
1688
  <!-- end upload-form ------------------------------------------------------------------------------------------------------------------------------------------------------->
1565
1689
  </main>
1566
1690
 
1567
- <!-- begin site-footer ------------------------------------------------------------------------------------------------------------------------------------------------------->
1568
- <CmdSiteFooter>
1569
- <!-- begin switch-language ------------------------------------------------------------------------------------------------------------------------------------------------------->
1570
- <CmdSwitchLanguage :languages="languagesData" @click="doSomething"/>
1571
- <!-- end switch-languager ------------------------------------------------------------------------------------------------------------------------------------------------------->
1572
-
1573
- <div class="flex-container">
1574
- <!-- begin list-of-links ------------------------------------------------------------------------------------------------------------------------------------------------------->
1575
- <CmdListOfLinks :links="listOfLinksData"
1576
- :cmdHeadline="{headlineText: 'List of links', headlineLevel: 6}"
1577
- />
1578
- <!-- end list-of-links ------------------------------------------------------------------------------------------------------------------------------------------------------->
1579
-
1580
- <!-- begin opening-hours ------------------------------------------------------------------------------------------------------------------------------------------------------->
1581
- <CmdOpeningHours :openingHours="openingHoursData"
1582
- :cmdHeadline="{headlineText: 'Opening hours', headlineLevel: 6}"
1583
- textHolidaysClosed="Closed on holidays"
1584
- textMiscInfo="Miscellaneous information"
1585
- :checkInterval="0"
1586
- />
1587
- <!-- end opening-hours ------------------------------------------------------------------------------------------------------------------------------------------------------->
1588
-
1589
- <!-- begin address-data ------------------------------------------------------------------------------------------------------------------------------------------------------->
1590
- <CmdAddressData :addressData="addressData"
1591
- :linkGoogleMaps="false"
1592
- :cmdHeadline="{headlineText: 'Address data', headlineLevel: 6}"
1593
- />
1594
- <!-- end address-data ------------------------------------------------------------------------------------------------------------------------------------------------------->
1595
- </div>
1596
- </CmdSiteFooter>
1597
- <!-- end site-footer ------------------------------------------------------------------------------------------------------------------------------------------------------->
1598
-
1599
1691
  <!-- begin copyright-information ------------------------------------------------------------------------------------------------------------------------------------------------------->
1600
1692
  <CmdCopyrightInformation/>
1601
1693
  <!-- end copyright-information ------------------------------------------------------------------------------------------------------------------------------------------------------->
@@ -1646,6 +1738,7 @@ import fakeSelectCountriesData from '@/assets/data/fake-select-countries.json'
1646
1738
  import fakeSelectFilterOptionsData from '@/assets/data/fake-select-filter-options.json'
1647
1739
  import fakeSelectOptionsData from '@/assets/data/fake-select-options.json'
1648
1740
  import fakeSelectOptionsWithIconsData from '@/assets/data/fake-select-options-with-icons.json'
1741
+ import formElementsData from '@/assets/data/form-elements.json'
1649
1742
  import imageData from '@/assets/data/image.json'
1650
1743
  import imageGalleryData from '@/assets/data/image-gallery.json'
1651
1744
  import inputGroupRadiobuttonsData from '@/assets/data/input-group-radiobuttons.json'
@@ -1782,7 +1875,7 @@ export default {
1782
1875
  functions.validateCapitalLetters()
1783
1876
  ],
1784
1877
  openSidebar: true,
1785
- openBoxes: ['template', 'components'],
1878
+ openBoxes: [0],
1786
1879
 
1787
1880
  // assign data from json files to data-properties
1788
1881
  accordionData,
@@ -1798,6 +1891,7 @@ export default {
1798
1891
  fakeSelectFilterOptionsData,
1799
1892
  fakeSelectOptionsData,
1800
1893
  fakeSelectOptionsWithIconsData,
1894
+ formElementsData,
1801
1895
  listOfLinksData,
1802
1896
  imageData,
1803
1897
  imageGalleryData,
@@ -1827,12 +1921,9 @@ export default {
1827
1921
  setOpenStatus(event) {
1828
1922
  this.openSidebar = event
1829
1923
  },
1830
- openBox(boxName) {
1924
+ openBox(boxIndex) {
1831
1925
  this.openSidebar = true
1832
-
1833
- if (!this.openBoxes.includes(boxName)) {
1834
- this.openBoxes.push(boxName)
1835
- }
1926
+ this.openBoxes = [boxIndex]
1836
1927
  },
1837
1928
  navigationDataRight() {
1838
1929
  setTimeout(() => {
@@ -1932,6 +2023,10 @@ export default {
1932
2023
  executeSearch() {
1933
2024
  return Math.floor(Math.random() * 100)
1934
2025
  },
2026
+ doConsoleLog(event) {
2027
+ event.originalEvent.preventDefault()
2028
+ console.log("event: ", event)
2029
+ },
1935
2030
  toggleAllAccordions() {
1936
2031
  if (this.accordionGroupOpen) {
1937
2032
  this.$refs.accordionGroup1.closeAll()
@@ -1994,6 +2089,14 @@ main .cmd-width-limitation-wrapper:not(:last-of-type) {
1994
2089
  border-right-color: currentcolor;
1995
2090
  border-right: var(--default-border);
1996
2091
 
2092
+ .box {
2093
+ border-right: 0;
2094
+
2095
+ &:not(:last-child) {
2096
+ border-bottom: 0;
2097
+ }
2098
+ }
2099
+
1997
2100
  .open-slot-wrapper {
1998
2101
  display: flex;
1999
2102
  flex-direction: column;