comand-component-library 4.0.3 → 4.0.5

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 +83 -67
  2. package/dist/comand-component-library.umd.cjs +3 -3
  3. package/dist/style.css +1 -1
  4. package/package.json +2 -2
  5. package/src/ComponentLibrary.vue +239 -138
  6. package/src/assets/styles/{global-styles.scss → component-library-global-styles.scss} +10 -10
  7. package/src/components/CmdBox.vue +50 -14
  8. package/src/components/CmdFakeSelect.vue +16 -16
  9. package/src/components/CmdFormElement.vue +13 -13
  10. package/src/components/CmdHeadline.vue +1 -1
  11. package/src/components/CmdInputGroup.vue +35 -29
  12. package/src/components/CmdMultistepFormProgressBar.vue +1 -1
  13. package/src/components/CmdNewsletterSubscription.vue +18 -1
  14. package/src/components/CmdSiteFooter.vue +1 -1
  15. package/src/components/CmdSiteHeader.vue +1 -1
  16. package/src/components/CmdTabs.vue +2 -2
  17. package/src/components/CmdThumbnailScroller.vue +1 -1
  18. package/src/components/CmdToggleDarkMode.vue +2 -2
  19. package/src/components/CmdTooltip.vue +1 -1
  20. package/src/components/CmdUploadForm.vue +5 -5
  21. package/src/components/EditComponentWrapper.vue +1 -1
  22. package/src/main.js +1 -1
package/src/ComponentLibrary.vue CHANGED
@@ -47,47 +47,90 @@
47
47
  >
48
48
  <template v-slot:body>
49
49
  <ul>
50
- <li :class="'active' ? activeEntry === 'CmdAddressData' : null"><a href="#section-address-data" @click="updateSettingsSidebar('CmdAddressData')">Address Data</a></li>
50
+ <li :class="'active' ? activeEntry === 'CmdAddressData' : null"><a
51
+ href="#section-address-data"
52
+ @click="updateSettingsSidebar('CmdAddressData')">Address Data</a></li>
51
53
  <li><a href="#section-advanced-form-elements">Advanced Form Elements</a></li>
52
- <li><a href="#section-bank-account-data" @click="updateSettingsSidebar('CmdBankAccountData')">Bank Account Data</a></li>
53
- <li><a href="#section-boxes" @click="updateSettingsSidebar('CmdBox')">Boxes</a></li>
54
- <li><a href="#section-breadcrumbs" @click="updateSettingsSidebar('CmdBreadcrumbs')">Breadcrumbs</a></li>
55
- <li><a href="#section-cookie-disclaimer" @click="hideSettingsSidebar">Cookie-Disclaimer</a></li>
54
+ <li><a href="#section-bank-account-data"
55
+ @click="updateSettingsSidebar('CmdBankAccountData')">Bank Account
56
+ Data</a></li>
57
+ <li><a href="#section-boxes" @click="updateSettingsSidebar('CmdBox')">Boxes</a>
58
+ </li>
59
+ <li><a href="#section-breadcrumbs"
60
+ @click="updateSettingsSidebar('CmdBreadcrumbs')">Breadcrumbs</a></li>
61
+ <li><a href="#section-cookie-disclaimer" @click="hideSettingsSidebar">Cookie-Disclaimer</a>
62
+ </li>
56
63
  <li><a href="#section-fancybox" @click="hideSettingsSidebar">Fancybox</a></li>
57
64
  <li><a href="#section-forms" @click="hideSettingsSidebar">Forms</a></li>
58
- <li><a href="#section-google-maps" @click="hideSettingsSidebar">Google-Maps&trade;</a></li>
59
- <li><a href="#section-headlines" @click="updateSettingsSidebar('CmdHeadline')">Headlines</a></li>
65
+ <li><a href="#section-google-maps" @click="hideSettingsSidebar">Google-Maps&trade;</a>
66
+ </li>
67
+ <li><a href="#section-headlines" @click="updateSettingsSidebar('CmdHeadline')">Headlines</a>
68
+ </li>
60
69
  <li><a href="#section-icons" @click="hideSettingsSidebar">Icons</a></li>
61
- <li><a href="#section-input-group" @click="updateSettingsSidebar('CmdInputGroup')">Input-Group</a></li>
70
+ <li><a href="#section-input-group"
71
+ @click="updateSettingsSidebar('CmdInputGroup')">Input-Group</a></li>
62
72
  <li><a href="#section-image" @click="hideSettingsSidebar">Image</a></li>
63
- <li><a href="#section-image-gallery" @click="hideSettingsSidebar">Image Gallery</a></li>
64
- <li><a href="#section-image-zoom" @click="hideSettingsSidebar">Image-Zoom</a></li>
65
- <li><a href="#section-list-of-links" @click="updateSettingsSidebar('CmdLinkOfLists')">List Of Links</a></li>
66
- <li><a href="#section-login-form" @click="updateSettingsSidebar('CmdLoginForm')">Login Form</a></li>
67
- <li><a href="#section-main-navigation" @click="updateSettingsSidebar('CmdMainNavigation')">Main-Navigation</a></li>
68
- <li><a href="#section-multistep-form-progress-bar" @click="updateSettingsSidebar('CmdMultistepFormProgressBar')">Multistepform-Progressbar</a></li>
69
- <li><a href="#section-newsletter-subscription" @click="updateSettingsSidebar('CmdNewsletterSubscription')">Newsletter Subscription</a></li>
70
- <li><a href="#section-opening-hours" @click="updateSettingsSidebar('CmdOpeningHours')">Opening Hours</a></li>
71
- <li><a href="#section-pagination" @click="updateSettingsSidebar('CmdPagination')">Pagination</a></li>
72
- <li><a href="#section-site-footer" @click="hideSettingsSidebar">Site Footer</a></li>
73
- <li><a href="#section-site-header" @click="updateSettingsSidebar('CmdSiteHeader')">Site Header</a></li>
74
- <li><a href="#section-site-search" @click="updateSettingsSidebar('CmdSiteSearch')">Site Search</a></li>
75
- <li><a href="#section-slideshow" @click="updateSettingsSidebar('CmdSlideshow')">Slideshow</a></li>
76
- <li><a href="#section-social-networks" @click="updateSettingsSidebar('CmdSocialNetworks')">Social Networks</a></li>
77
- <li><a href="#section-switch-language" @click="hideSettingsSidebar">Switch Language</a></li>
78
- <li><a href="#section-system-message" @click="updateSettingsSidebar('CmdSystemMessage')">System-Message</a></li>
79
- <li><a href="#section-tables" @click="updateSettingsSidebar('CmdSystemMeCmdTablesssage')">Tables</a></li>
80
- <li><a href="#section-tabs" @click="updateSettingsSidebar('CmdTabs')">Tabs</a></li>
81
- <li><a href="#section-text-image-block" @click="updateSettingsSidebar('CmdTextImageBlock')">Text Image Block</a></li>
82
- <li><a href="#section-thumbnail-scroller" @click="updateSettingsSidebar('CmdThumbnailScroller')">Thumbnail-Scroller</a></li>
83
- <li><a href="#section-toggle-darkmode" @click="updateSettingsSidebar('CmdToggleDarkMode')">ToggleDarkMode</a></li>
84
- <li><a href="#section-tooltip" @click="updateSettingsSidebar('CmdTooltip')">Tooltip</a></li>
85
- <li><a href="#section-upload-form" @click="updateSettingsSidebar('CmdUploadForm')">Upload-Form</a></li>
73
+ <li><a href="#section-image-gallery" @click="hideSettingsSidebar">Image
74
+ Gallery</a></li>
75
+ <li><a href="#section-image-zoom" @click="hideSettingsSidebar">Image-Zoom</a>
76
+ </li>
77
+ <li><a href="#section-list-of-links"
78
+ @click="updateSettingsSidebar('CmdLinkOfLists')">List Of Links</a></li>
79
+ <li><a href="#section-login-form"
80
+ @click="updateSettingsSidebar('CmdLoginForm')">Login Form</a></li>
81
+ <li><a href="#section-main-navigation"
82
+ @click="updateSettingsSidebar('CmdMainNavigation')">Main-Navigation</a>
83
+ </li>
84
+ <li><a href="#section-multistep-form-progress-bar"
85
+ @click="updateSettingsSidebar('CmdMultistepFormProgressBar')">Multistepform-Progressbar</a>
86
+ </li>
87
+ <li><a href="#section-newsletter-subscription"
88
+ @click="updateSettingsSidebar('CmdNewsletterSubscription')">Newsletter
89
+ Subscription</a></li>
90
+ <li><a href="#section-opening-hours"
91
+ @click="updateSettingsSidebar('CmdOpeningHours')">Opening Hours</a></li>
92
+ <li><a href="#section-pagination"
93
+ @click="updateSettingsSidebar('CmdPagination')">Pagination</a></li>
94
+ <li><a href="#section-site-footer" @click="hideSettingsSidebar">Site Footer</a>
95
+ </li>
96
+ <li><a href="#section-site-header"
97
+ @click="updateSettingsSidebar('CmdSiteHeader')">Site Header</a></li>
98
+ <li><a href="#section-site-search"
99
+ @click="updateSettingsSidebar('CmdSiteSearch')">Site Search</a></li>
100
+ <li><a href="#section-slideshow" @click="updateSettingsSidebar('CmdSlideshow')">Slideshow</a>
101
+ </li>
102
+ <li><a href="#section-social-networks"
103
+ @click="updateSettingsSidebar('CmdSocialNetworks')">Social Networks</a>
104
+ </li>
105
+ <li><a href="#section-switch-language" @click="hideSettingsSidebar">Switch
106
+ Language</a></li>
107
+ <li><a href="#section-system-message"
108
+ @click="updateSettingsSidebar('CmdSystemMessage')">System-Message</a>
109
+ </li>
110
+ <li><a href="#section-tables"
111
+ @click="updateSettingsSidebar('CmdSystemMeCmdTablesssage')">Tables</a>
112
+ </li>
113
+ <li><a href="#section-tabs" @click="updateSettingsSidebar('CmdTabs')">Tabs</a>
114
+ </li>
115
+ <li><a href="#section-text-image-block"
116
+ @click="updateSettingsSidebar('CmdTextImageBlock')">Text Image Block</a>
117
+ </li>
118
+ <li><a href="#section-thumbnail-scroller"
119
+ @click="updateSettingsSidebar('CmdThumbnailScroller')">Thumbnail-Scroller</a>
120
+ </li>
121
+ <li><a href="#section-toggle-darkmode"
122
+ @click="updateSettingsSidebar('CmdToggleDarkMode')">ToggleDarkMode</a>
123
+ </li>
124
+ <li><a href="#section-tooltip" @click="updateSettingsSidebar('CmdTooltip')">Tooltip</a>
125
+ </li>
126
+ <li><a href="#section-upload-form"
127
+ @click="updateSettingsSidebar('CmdUploadForm')">Upload-Form</a></li>
86
128
  </ul>
87
129
  </template>
88
130
  </CmdBox>
89
131
  </template>
90
132
  </CmdBoxWrapper>
133
+
91
134
  <dl class="comand-versions">
92
135
  <dt>Frontend-Framework Version:</dt>
93
136
  <dd>{{ packageJson.dependencies['comand-frontend-framework'].replace("^", "") }}</dd>
@@ -133,7 +176,7 @@
133
176
  <!-- begin address-data ------------------------------------------------------------------------------------------------------------------------------------------------------->
134
177
  <CmdWidthLimitationWrapper>
135
178
  <h2 class="headline-demopage" id="section-address-data">
136
- Address Data
179
+ <span>Address Data</span>
137
180
  <a href="#" class="icon-cog" title="Open Component Settings"
138
181
  @click.prevent="openSettingsSidebar('CmdAddressData')"></a>
139
182
  </h2>
@@ -151,7 +194,7 @@
151
194
  <!-- begin advanced form elements --------------------------------------------------------------------------------------------------------------------------------------------------->
152
195
  <CmdWidthLimitationWrapper>
153
196
  <h2 class="headline-demopage" id="section-advanced-form-elements">Advanced Form Elements</h2>
154
- <h3>Form elements status:</h3>
197
+ <h3><span>Form elements status:</span></h3>
155
198
  <div class="flex-container">
156
199
  <ul class="list-status">
157
200
  <li>
@@ -201,7 +244,8 @@
201
244
  <CmdForm :use-fieldset="false" id="advanced-form-elements" novalidate="novalidate">
202
245
  <fieldset class="grid-container-create-columns">
203
246
  <legend>Legend</legend>
204
- <h2 class="headline-demopage">Form Element-Component
247
+ <h2 class="headline-demopage">
248
+ <span>Form Element-Component</span>
205
249
  <a href="#" class="icon-cog" title="Open Component Settings"
206
250
  @click.prevent="openSettingsSidebar('CmdFormElement')"></a>
207
251
  </h2>
@@ -396,10 +440,11 @@
396
440
  />
397
441
  <hr/>
398
442
  <!-- begin FakeSelect -->
399
- <h2 class="headline-demopage">
400
- Fake Selects
401
- <a href="#" class="icon-cog" title="Open Component Settings" @click.prevent="openSettingsSidebar('CmdFakeSelect')"></a>
402
- </h2>
443
+ <h3 class="headline-demopage">
444
+ <span>Fake Selects</span>
445
+ <a href="#" class="icon-cog" title="Open Component Settings"
446
+ @click.prevent="openSettingsSidebar('CmdFakeSelect')"></a>
447
+ </h3>
403
448
  <div class="flex-container">
404
449
  <!-- type === default: normal selectbox (with optional icons) -->
405
450
  <CmdFakeSelect
@@ -606,7 +651,7 @@
606
651
 
607
652
  <!-- begin cmd-toggle-darkmode -->
608
653
  <h3 class="headline-demopage" id="section-toggle-darkmode">
609
- Toggle Dark-Mode
654
+ <span>Toggle Dark-Mode</span>
610
655
  <a href="#" class="icon-cog" title="Open Component Settings"
611
656
  @click.prevent="openSettingsSidebar('CmdToggleDarkMode')"></a>
612
657
  </h3>
@@ -803,7 +848,7 @@
803
848
  :inputElements="idForReplacedInputsInInputGroup('checkbox-group-toggle-switch')"
804
849
  inputTypes="checkbox"
805
850
  v-model="inputGroupValueToggleSwitchCheckbox"
806
- :toggleSwitch="true"
851
+ :toggleSwitches="true"
807
852
  required="required"
808
853
  :status="validationStatus"
809
854
  :disabled="disabledStatus"
@@ -819,7 +864,7 @@
819
864
  :inputElements="idForReplacedInputsInInputGroup('radio-group-toggle-switch')"
820
865
  inputTypes="radio"
821
866
  v-model="inputGroupValueToggleSwitchRadio"
822
- :toggleSwitch="true"
867
+ :toggleSwitches="true"
823
868
  required="required"
824
869
  :status="validationStatus"
825
870
  :disabled="disabledStatus"
@@ -892,7 +937,7 @@
892
937
  <!-- begin bank account data ----------------------------------------------------------------------------------------------------------------------------------------------------->
893
938
  <CmdWidthLimitationWrapper>
894
939
  <h2 class="headline-demopage" id="section-bank-account-data">
895
- Bank Account Data
940
+ <span>Bank Account Data</span>
896
941
  <a href="#" class="icon-cog" title="Open Component Settings"
897
942
  @click.prevent="openSettingsSidebar('CmdBankAccountData')"></a>
898
943
  </h2>
@@ -909,8 +954,9 @@
909
954
  <CmdWidthLimitationWrapper anchorId="section-boxes">
910
955
  <h2 class="headline-demopage">Boxes</h2>
911
956
  <h3 class="headline-demopage">
912
- Default Box
913
- <a href="#" class="icon-cog" title="Open Component Settings" @click.prevent="openSettingsSidebar('CmdBox')"></a>
957
+ <span>Default Box</span>
958
+ <a href="#" class="icon-cog" title="Open Component Settings"
959
+ @click.prevent="openSettingsSidebar('CmdBox')"></a>
914
960
  </h3>
915
961
  <CmdBox
916
962
  ref="CmdBox"
@@ -931,7 +977,8 @@
931
977
  <p>
932
978
  <strong>Header, Content/Body and Footer of this box are given by slots.</strong>
933
979
  </p>
934
- <p>Additionally 'allowContentToScroll' is active, which enables (as far as a max-height is defined) the content of this box to scroll</p>
980
+ <p>Additionally 'allowContentToScroll' is active, which enables (as far as a max-height is
981
+ defined) the content of this box to scroll</p>
935
982
  </template>
936
983
  <template v-slot:footer>
937
984
  <p>
@@ -952,7 +999,6 @@
952
999
  />
953
1000
  </CmdBoxWrapper>
954
1001
  <CmdBoxWrapper
955
- :useFlexbox="true"
956
1002
  :use-gap="true"
957
1003
  :cmdHeadline="{headlineText: 'Different examples of content-boxes (in BoxWrapper)', headlineLevel: 3}"
958
1004
  >
@@ -980,7 +1026,8 @@
980
1026
  <p>
981
1027
  <strong>Header, Content/Body and Footer of this box are given by slots.</strong>
982
1028
  </p>
983
- <p>Additionally 'allowContentToScroll' is active, which enables (as far as a max-height is defined) the content of this box to scroll</p>
1029
+ <p>Additionally 'allowContentToScroll' is active, which enables (as far as a max-height
1030
+ is defined) the content of this box to scroll</p>
984
1031
  </template>
985
1032
  <template v-slot:footer>
986
1033
  <p>
@@ -988,6 +1035,37 @@
988
1035
  </p>
989
1036
  </template>
990
1037
  </CmdBox>
1038
+ <CmdBox :useSlots="['header', 'body']" :use-default-padding="false" :collapsible="true">
1039
+ <template v-slot:header>
1040
+ <h4>
1041
+ Box with inputs
1042
+ </h4>
1043
+ </template>
1044
+ <template v-slot:body>
1045
+ <CmdForm :showLegend="false" textLegend="Login Form">
1046
+ <CmdFormElement
1047
+ element="input"
1048
+ type="text"
1049
+ :required="true"
1050
+ labelText="Username:"
1051
+ placeholder="Username"
1052
+ />
1053
+ <CmdFormElement
1054
+ element="input"
1055
+ type="password"
1056
+ :required="true"
1057
+ labelText="Password:"
1058
+ placeholder="Password"
1059
+ />
1060
+ </CmdForm>
1061
+ </template>
1062
+ <!-- will not be displayed, because useSlots-property does not contain 'footer' in array -->
1063
+ <template v-slot:footer>
1064
+ <p>
1065
+ footer content
1066
+ </p>
1067
+ </template>
1068
+ </CmdBox>
991
1069
  <CmdBox :useSlots="['header', 'body']" :use-default-padding="false">
992
1070
  <template v-slot:header>
993
1071
  <h4>
@@ -1089,7 +1167,7 @@
1089
1167
  <!-- begin breadcrumbs ------------------------------------------------------------------------------------------------------------------------------------------------------->
1090
1168
  <CmdWidthLimitationWrapper inner-component="div">
1091
1169
  <h2 class="headline-demopage" id="section-breadcrumbs">
1092
- Breadcrumbs
1170
+ <span>Breadcrumbs</span>
1093
1171
  <a href="#" class="icon-cog" title="Open Component Settings"
1094
1172
  @click.prevent="openSettingsSidebar('CmdBreadcrumbs')"></a>
1095
1173
  </h2>
@@ -1201,7 +1279,7 @@
1201
1279
  <!-- begin headlines ------------------------------------------------------------------------------------------------------------------------------------------------------->
1202
1280
  <CmdWidthLimitationWrapper>
1203
1281
  <h2 class="headline-demopage" id="section-headlines">
1204
- Headlines
1282
+ <span>Headlines</span>
1205
1283
  <a href="#" class="icon-cog" title="Open Component Settings"
1206
1284
  @click.prevent="openSettingsSidebar('CmdHeadline')"></a>
1207
1285
  </h2>
@@ -1248,14 +1326,21 @@
1248
1326
  <!-- begin images ------------------------------------------------------------------------------------------------------------------------------------------------------->
1249
1327
  <CmdWidthLimitationWrapper>
1250
1328
  <h2 class="headline-demopage" id="section-image">
1251
- Image
1329
+ <span>Image</span>
1252
1330
  <a href="#" class="icon-cog" title="Open Component Settings"
1253
1331
  @click.prevent="openSettingsSidebar('CmdImage')"></a>
1254
1332
  </h2>
1255
1333
  <div class="flex-container">
1256
- <CmdImage ref="CmdImage" :image="imageData[0].image" :figcaption="imageData[0].figcaption"
1257
- v-bind="cmdImageSettingsData"/>
1258
- <CmdImage :image="imageData[1].image" :figcaption="imageData[1].figcaption"/>
1334
+ <CmdImage
1335
+ ref="CmdImage"
1336
+ :image="imageData[0].image"
1337
+ :figcaption="imageData[0].figcaption"
1338
+ v-bind="cmdImageSettingsData"
1339
+ />
1340
+ <CmdImage
1341
+ :image="imageData[1].image"
1342
+ :figcaption="imageData[1].figcaption"
1343
+ />
1259
1344
  </div>
1260
1345
  </CmdWidthLimitationWrapper>
1261
1346
  <!-- end images ------------------------------------------------------------------------------------------------------------------------------------------------------->
@@ -1263,7 +1348,7 @@
1263
1348
  <!-- begin image-gallery------------------------------------------------------------------------------------------------------------------------------------------------------->
1264
1349
  <CmdWidthLimitationWrapper>
1265
1350
  <h2 class="headline-demopage" id="section-image-gallery">
1266
- Image-Gallery
1351
+ <span>Image-Gallery</span>
1267
1352
  <a href="#" class="icon-cog" title="Open Component Settings"
1268
1353
  @click.prevent="openSettingsSidebar('CmdImageGallery')"></a>
1269
1354
  </h2>
@@ -1290,7 +1375,7 @@
1290
1375
  <!-- begin list-of-links ------------------------------------------------------------------------------------------------------------------------------------------------------->
1291
1376
  <CmdWidthLimitationWrapper>
1292
1377
  <h2 class="headline-demopage" id="section-list-of-links">
1293
- List Of Links
1378
+ <span>List Of Links</span>
1294
1379
  <a href="#" class="icon-cog" title="Open Component Settings"
1295
1380
  @click.prevent="openSettingsSidebar('CmdListOfLinks')"></a>
1296
1381
  </h2>
@@ -1305,7 +1390,7 @@
1305
1390
  <!-- begin login-form ------------------------------------------------------------------------------------------------------------------------------------------------------->
1306
1391
  <CmdWidthLimitationWrapper>
1307
1392
  <h2 class="headline-demopage" id="section-login-form">
1308
- Login Form
1393
+ <span>Login Form</span>
1309
1394
  <a href="#" class="icon-cog" title="Open Component Settings"
1310
1395
  @click.prevent="openSettingsSidebar('CmdLoginForm')"></a>
1311
1396
  </h2>
@@ -1319,7 +1404,7 @@
1319
1404
  <!-- begin main-navigation ------------------------------------------------------------------------------------------------------------------------------------------------------->
1320
1405
  <CmdWidthLimitationWrapper>
1321
1406
  <h2 class="headline-demopage" id="section-main-navigation">
1322
- Main Navigation
1407
+ <span>Main Navigation</span>
1323
1408
  <a href="#" class="icon-cog" title="Open Component Settings"
1324
1409
  @click.prevent="openSettingsSidebar('CmdMainNavigation')"></a>
1325
1410
  </h2>
@@ -1334,7 +1419,7 @@
1334
1419
  <!-- begin multistep-form-progress-bar ------------------------------------------------------------------------------------------------------------------------------------------------------->
1335
1420
  <CmdWidthLimitationWrapper>
1336
1421
  <h2 class="headline-demopage" id="section-multistep-form-progress-bar">
1337
- Multistepform-Progressbar
1422
+ <span>Multistepform-Progressbar</span>
1338
1423
  <a href="#" class="icon-cog" title="Open Component Settings"
1339
1424
  @click.prevent="openSettingsSidebar('CmdMultistepFormProgressBar')"></a>
1340
1425
  </h2>
@@ -1354,7 +1439,7 @@
1354
1439
  <!-- begin newsletter-subscription ------------------------------------------------------------------------------------------------------------------------------------------------------->
1355
1440
  <CmdWidthLimitationWrapper>
1356
1441
  <h2 class="headline-demopage" id="section-newsletter-subscription">
1357
- Newsletter Subscription
1442
+ <span>Newsletter Subscription</span>
1358
1443
  <a href="#" class="icon-cog" title="Open Component Settings"
1359
1444
  @click.prevent="openSettingsSidebar('CmdNewsletterSubscription')"></a>
1360
1445
  </h2>
@@ -1372,7 +1457,7 @@
1372
1457
  <!-- begin opening-hours ------------------------------------------------------------------------------------------------------------------------------------------------------->
1373
1458
  <CmdWidthLimitationWrapper>
1374
1459
  <h2 class="headline-demopage" id="section-opening-hours">
1375
- Opening Hours
1460
+ <span>Opening Hours</span>
1376
1461
  <a href="#" class="icon-cog" title="Open Component Settings"
1377
1462
  @click.prevent="openSettingsSidebar('CmdOpeningHours')"></a>
1378
1463
  </h2>
@@ -1388,7 +1473,7 @@
1388
1473
  <!-- begin pagination ------------------------------------------------------------------------------------------------------------------------------------------------------->
1389
1474
  <CmdWidthLimitationWrapper>
1390
1475
  <h2 class="headline-demopage" id="section-pagination">
1391
- Pagination
1476
+ <span>Pagination</span>
1392
1477
  <a href="#" class="icon-cog" title="Open Component Settings"
1393
1478
  @click.prevent="openSettingsSidebar('CmdPagination')"></a>
1394
1479
  </h2>
@@ -1415,7 +1500,7 @@
1415
1500
  <!-- begin site-header ------------------------------------------------------------------------------------------------------------------------------------------------------->
1416
1501
  <CmdWidthLimitationWrapper>
1417
1502
  <h2 class="headline-demopage" id="section-site-header">
1418
- Site Header
1503
+ <span>Site Header</span>
1419
1504
  <a href="#" class="icon-cog" title="Open Component Settings"
1420
1505
  @click.prevent="openSettingsSidebar('CmdSiteHeader')"></a>
1421
1506
  </h2>
@@ -1438,7 +1523,7 @@
1438
1523
  <!-- begin site-search ------------------------------------------------------------------------------------------------------------------------------------------------------->
1439
1524
  <CmdWidthLimitationWrapper>
1440
1525
  <h2 class="headline-demopage" id="section-site-search">
1441
- Site Search
1526
+ <span>Site Search</span>
1442
1527
  <a href="#" class="icon-cog" title="Open Component Settings"
1443
1528
  @click.prevent="openSettingsSidebar('CmdSiteSearch')"></a>
1444
1529
  </h2>
@@ -1458,7 +1543,7 @@
1458
1543
  <!-- begin slideshow ------------------------------------------------------------------------------------------------------------------------------------------------------->
1459
1544
  <CmdWidthLimitationWrapper>
1460
1545
  <h2 class="headline-demopage" id="section-slideshow">
1461
- Slideshow
1546
+ <span>Slideshow</span>
1462
1547
  <a href="#" class="icon-cog" title="Open Component Settings"
1463
1548
  @click.prevent="openSettingsSidebar('CmdSlideshow')"></a>
1464
1549
  </h2>
@@ -1473,7 +1558,7 @@
1473
1558
  <!-- begin social-networks ------------------------------------------------------------------------------------------------------------------------------------------------------->
1474
1559
  <CmdWidthLimitationWrapper>
1475
1560
  <h2 class="headline-demopage" id="section-social-networks">
1476
- Social Networks
1561
+ <span>Social Networks</span>
1477
1562
  <a href="#" class="icon-cog" title="Open Component Settings"
1478
1563
  @click.prevent="openSettingsSidebar('CmdSocialNetworks')"></a>
1479
1564
  </h2>
@@ -1498,7 +1583,7 @@
1498
1583
  <!-- begin system-message ------------------------------------------------------------------------------------------------------------------------------------------------------->
1499
1584
  <CmdWidthLimitationWrapper>
1500
1585
  <h2 class="headline-demopage" id="section-system-message">
1501
- System Message
1586
+ <span>System Message</span>
1502
1587
  <a href="#" class="icon-cog" title="Open Component Settings"
1503
1588
  @click.prevent="openSettingsSidebar('CmdSystemMessage')"></a>
1504
1589
  </h2>
@@ -1518,7 +1603,7 @@
1518
1603
  <!-- begin tables ------------------------------------------------------------------------------------------------------------------------------------------------------->
1519
1604
  <CmdWidthLimitationWrapper>
1520
1605
  <h2 class="headline-demopage" id="section-tables">
1521
- Tables
1606
+ <span>Tables</span>
1522
1607
  <a href="#" class="icon-cog" title="Open Component Settings"
1523
1608
  @click.prevent="openSettingsSidebar('CmdTable')"></a>
1524
1609
  </h2>
@@ -1529,16 +1614,21 @@
1529
1614
  :table-data="tableDataLarge"
1530
1615
  />
1531
1616
  <h3>Table as wide as possible</h3>
1532
- <CmdTable :collapsible="true" :fullWidthOnDefault="false" :userCanToggleWidth="true"
1533
- :table-data="tableDataLarge"/>
1617
+ <CmdTable
1618
+ :collapsible="true"
1619
+ :fullWidthOnDefault="false"
1620
+ :userCanToggleWidth="true"
1621
+ :table-data="tableDataLarge"
1622
+ />
1534
1623
  </CmdWidthLimitationWrapper>
1535
1624
  <!-- end tables ------------------------------------------------------------------------------------------------------------------------------------------------------->
1536
1625
 
1537
1626
  <!-- begin tabs ------------------------------------------------------------------------------------------------------------------------------------------------------->
1538
1627
  <CmdWidthLimitationWrapper>
1539
1628
  <h2 class="headline-demopage" id="section-tabs">
1540
- Tabs
1541
- <a href="#" class="icon-cog" title="Open Component Settings" @click.prevent="openSettingsSidebar('CmdTabs')"></a>
1629
+ <span>Tabs</span>
1630
+ <a href="#" class="icon-cog" title="Open Component Settings"
1631
+ @click.prevent="openSettingsSidebar('CmdTabs')"></a>
1542
1632
  </h2>
1543
1633
  <CmdTabs
1544
1634
  ref="CmdTabs"
@@ -1566,7 +1656,7 @@
1566
1656
  <!-- begin text-image-block ------------------------------------------------------------------------------------------------------------------------------------------------------->
1567
1657
  <CmdWidthLimitationWrapper>
1568
1658
  <h2 class="headline-demopage" id="section-text-image-block">
1569
- Text-Image-Block
1659
+ <span>Text-Image-Block</span>
1570
1660
  <a href="#" class="icon-cog" title="Open Component Settings"
1571
1661
  @click.prevent="openSettingsSidebar('CmdTextImageBlock')"></a>
1572
1662
  </h2>
@@ -1614,7 +1704,7 @@
1614
1704
  <!-- begin thumbnail-scroller ------------------------------------------------------------------------------------------------------------------------------------------------------->
1615
1705
  <CmdWidthLimitationWrapper>
1616
1706
  <h2 class="headline-demopage" id="section-thumbnail-scroller">
1617
- Thumbnail-Scroller
1707
+ <span>Thumbnail-Scroller</span>
1618
1708
  <a href="#" class="icon-cog" title="Open Component Settings"
1619
1709
  @click.prevent="openSettingsSidebar('CmdThumbnailScroller')"></a>
1620
1710
  </h2>
@@ -1631,7 +1721,7 @@
1631
1721
  <!-- begin tooltip ------------------------------------------------------------------------------------------------------------------------------------------------------->
1632
1722
  <CmdWidthLimitationWrapper>
1633
1723
  <h2 class="headline-demopage" id="section-tooltip">
1634
- Tooltip
1724
+ <span>Tooltip</span>
1635
1725
  <a href="#" class="icon-cog" title="Open Component Settings"
1636
1726
  @click.prevent="openSettingsSidebar('CmdTooltip')"></a>
1637
1727
  </h2>
@@ -1647,10 +1737,17 @@
1647
1737
  >
1648
1738
  Tooltip on hover
1649
1739
  </CmdTooltip>
1650
- <CmdTooltip :delay-to-show-tooltip="2000" related-id="show-with-delay">
1740
+ <CmdTooltip
1741
+ :delay-to-show-tooltip="2000"
1742
+ related-id="show-with-delay"
1743
+ >
1651
1744
  Tooltip on hover with delay
1652
1745
  </CmdTooltip>
1653
- <CmdTooltip related-id="show-on-click" :toggle-visibility-by-click="true" :allowEscapeKey="true">
1746
+ <CmdTooltip
1747
+ related-id="show-on-click"
1748
+ :toggle-visibility-by-click="true"
1749
+ :allowEscapeKey="true"
1750
+ >
1654
1751
  Tooltip on click
1655
1752
  </CmdTooltip>
1656
1753
  </CmdWidthLimitationWrapper>
@@ -1659,7 +1756,7 @@
1659
1756
  <!-- begin upload-form ------------------------------------------------------------------------------------------------------------------------------------------------------->
1660
1757
  <CmdWidthLimitationWrapper>
1661
1758
  <h2 class="headline-demopage" id="section-upload-form">
1662
- Upload-Form
1759
+ <span>Upload-Form</span>
1663
1760
  <a href="#" class="icon-cog" title="Open Component Settings"
1664
1761
  @click.prevent="openSettingsSidebar('CmdUploadForm')"></a>
1665
1762
  </h2>
@@ -2112,82 +2209,86 @@ export default {
2112
2209
  </script>
2113
2210
 
2114
2211
  <style>
2115
- .list-status {
2116
- .active {
2117
- color: var(--default-text-color);
2118
- text-decoration: none;
2119
- background: none;
2212
+ .demopage {
2213
+ .list-status {
2214
+ .active {
2215
+ color: var(--default-text-color);
2216
+ text-decoration: none;
2217
+ background: none;
2218
+ }
2120
2219
  }
2121
- }
2122
2220
 
2123
- main .cmd-width-limitation-wrapper:not(:last-child) {
2124
- border-bottom: var(--default-border);
2125
- border-style: dashed;
2221
+ main .cmd-width-limitation-wrapper:not(:last-child) {
2222
+ border-bottom: var(--default-border);
2223
+ border-style: dashed;
2126
2224
 
2127
- section {
2128
- padding-top: calc(var(--default-padding) * 6);
2129
- padding-bottom: calc(var(--default-padding) * 6);
2225
+ section {
2226
+ padding-top: calc(var(--default-padding) * 6);
2227
+ padding-bottom: calc(var(--default-padding) * 6);
2228
+ }
2130
2229
  }
2131
- }
2132
2230
 
2133
- .headline-demopage {
2134
- [class*="icon-"] {
2135
- font-size: 2rem;
2231
+ .headline-demopage {
2232
+ [class*="icon-"] {
2233
+ font-size: 2rem;
2234
+ color: var(--pure-white);
2235
+ margin: 0;
2236
+ }
2136
2237
  }
2137
- }
2138
2238
 
2139
- .cmd-sidebar {
2140
- position: fixed;
2141
- top: 0;
2142
- left: 0;
2143
- z-index: 2000;
2144
- max-width: 30rem;
2145
- height: 100vh;
2146
- margin: 0;
2147
- padding: 0;
2148
- gap: 0;
2149
- border: 0;
2150
- border-right-width: 0;
2151
- border-right-style: none;
2152
- border-right-color: currentcolor;
2153
- border-right: var(--default-border);
2154
-
2155
- .box {
2156
- border-right: 0;
2157
-
2158
- &:not(:last-child) {
2159
- border-bottom: 0;
2239
+ .cmd-sidebar {
2240
+ position: fixed;
2241
+ top: 0;
2242
+ left: 0;
2243
+ z-index: 2000;
2244
+ max-width: 30rem;
2245
+ height: 100vh;
2246
+ margin: 0;
2247
+ padding: 0;
2248
+ gap: 0;
2249
+ border: 0;
2250
+ border-right-width: 0;
2251
+ border-right-style: none;
2252
+ border-right-color: currentcolor;
2253
+ border-right: var(--default-border);
2254
+
2255
+ .box {
2256
+ border-right: 0;
2257
+
2258
+ &:not(:last-child) {
2259
+ border-bottom: 0;
2260
+ }
2160
2261
  }
2161
- }
2162
2262
 
2163
- .open-slot-wrapper {
2164
- display: flex;
2165
- flex-direction: column;
2166
- justify-content: space-between;
2167
- height: 100%;
2263
+ .open-slot-wrapper {
2264
+ display: flex;
2265
+ flex-direction: column;
2266
+ justify-content: space-between;
2267
+ height: 100%;
2168
2268
 
2169
- .comand-versions {
2170
- padding: var(--default-padding);
2171
- margin: 0;
2269
+ .comand-versions {
2270
+ padding: var(--default-padding);
2271
+ margin: 0;
2272
+ }
2172
2273
  }
2173
- }
2174
2274
 
2175
- .closed-sidebar {
2176
- display: flex;
2177
- flex-direction: column;
2178
- gap: var(--default-gap);
2179
- padding: var(--default-padding);
2180
- }
2275
+ .closed-sidebar {
2276
+ display: flex;
2277
+ flex-direction: column;
2278
+ gap: var(--default-gap);
2279
+ padding: var(--default-padding);
2280
+ }
2181
2281
 
2182
- &:last-child {
2183
- left: auto;
2184
- right: 0;
2282
+ &:last-child {
2283
+ left: auto;
2284
+ right: 0;
2285
+ }
2185
2286
  }
2186
- }
2187
2287
 
2188
- #component-settings {
2189
- .open-slot-wrapper {
2190
- display: block;
2288
+ #component-settings {
2289
+ .open-slot-wrapper {
2290
+ display: block;
2291
+ }
2191
2292
  }
2192
2293
  }
2193
2294
  </style>