comand-component-library 4.0.3 → 4.0.5

Sign up to get free protection for your applications and to get access to all the features.
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>