comand-component-library 3.3.83 → 3.3.85

Sign up to get free protection for your applications and to get access to all the features.
Files changed (38) hide show
  1. package/dist/comand-component-library.js +5630 -3936
  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 +150 -21
  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;