comand-component-library 4.0.2 → 4.0.4

Sign up to get free protection for your applications and to get access to all the features.
Files changed (53) hide show
  1. package/README.md +32 -32
  2. package/dist/comand-component-library.js +3315 -1486
  3. package/dist/comand-component-library.umd.cjs +3 -4
  4. package/dist/index.html +16 -16
  5. package/dist/style.css +1 -1
  6. package/dist/styles/demopage-only.css +4 -0
  7. package/dist/styles/templates/casual.css +3 -0
  8. package/package.json +4 -4
  9. package/src/App.vue +2117 -0
  10. package/src/ComponentLibrary.vue +275 -610
  11. package/src/assets/data/fake-select-options.json +3 -2
  12. package/src/assets/data/form-elements.json +1 -1
  13. package/src/assets/styles/{global-styles.scss → component-library-global-styles.scss} +27 -14
  14. package/src/componentSettingsDataAndControls.vue +705 -0
  15. package/src/components/CmdAddressData.vue +1 -2
  16. package/src/components/CmdBox.vue +106 -52
  17. package/src/components/CmdCopyrightInformation.vue +5 -3
  18. package/src/components/CmdFakeSelect.vue +149 -78
  19. package/src/components/CmdFancyBox.vue +2 -2
  20. package/src/components/CmdFormElement.vue +62 -36
  21. package/src/components/CmdGoogleMaps.vue +5 -0
  22. package/src/components/CmdHeadline.vue +13 -5
  23. package/src/components/CmdIcon.vue +6 -2
  24. package/src/components/CmdImage.vue +6 -1
  25. package/src/components/CmdImageGallery.vue +15 -4
  26. package/src/components/CmdInputGroup.vue +87 -35
  27. package/src/components/CmdListOfLinks.vue +20 -7
  28. package/src/components/CmdListOfRequirements.vue +10 -18
  29. package/src/components/CmdLoginForm.vue +14 -2
  30. package/src/components/CmdMainNavigation.vue +5 -1
  31. package/src/components/CmdMultistepFormProgressBar.vue +13 -8
  32. package/src/components/CmdNewsletterSubscription.vue +18 -1
  33. package/src/components/CmdOpeningHoursItem.vue +1 -3
  34. package/src/components/CmdPagination.vue +5 -1
  35. package/src/components/CmdSiteFooter.vue +12 -2
  36. package/src/components/CmdSiteHeader.vue +2 -1
  37. package/src/components/CmdSlideButton.vue +7 -1
  38. package/src/components/CmdSlideshow.vue +33 -5
  39. package/src/components/CmdSocialNetworks.vue +18 -13
  40. package/src/components/CmdSocialNetworksItem.vue +5 -1
  41. package/src/components/CmdSystemMessage.vue +7 -1
  42. package/src/components/CmdTabs.vue +7 -7
  43. package/src/components/CmdTextImageBlock.vue +11 -2
  44. package/src/components/CmdThumbnailScroller.vue +23 -5
  45. package/src/components/CmdToggleDarkMode.vue +2 -2
  46. package/src/components/CmdTooltip.vue +50 -15
  47. package/src/components/CmdTooltipForFormElements.vue +96 -0
  48. package/src/components/CmdUploadForm.vue +29 -24
  49. package/src/components/CmdWidthLimitationWrapper.vue +1 -1
  50. package/src/components/ComponentSettings.vue +1 -1
  51. package/src/components/EditComponentWrapper.vue +1 -1
  52. package/src/main.js +2 -2
  53. package/src/assets/data/accordion.json +0 -45
package/src/assets/data/fake-select-options.json CHANGED
@@ -8,7 +8,8 @@
8
8
  "value": 2
9
9
  },
10
10
  {
11
- "text": "Option 3",
12
- "value": 3
11
+ "text": "Option 3 with icon",
12
+ "value": 3,
13
+ "iconClass": "icon-mail"
13
14
  }
14
15
  ]
package/src/assets/data/form-elements.json CHANGED
@@ -30,7 +30,7 @@
30
30
  "name": "form-element-password-name",
31
31
  "htmlClass": "form-element-password-class",
32
32
  "id": "form-element-password-id",
33
- "value": "default value",
33
+ "value": "",
34
34
  "fieldIconClass": "icon-cogs",
35
35
  "labelText": "Password input",
36
36
  "placeholder": "Placeholdertext",
package/src/assets/styles/{global-styles.scss → component-library-global-styles.scss} RENAMED
@@ -1,4 +1,4 @@
1
- /* global-styles.scss - last update: 2022/06/11 - IT IS NOT RECOMMENDED TO EDIT THIS FILE (TO AVOID TROUBLESHOOTING AFTER UPDATING) - DO CHANGES IN template.css ONLY */
1
+ /* component-library-global-styles.scss - last update: 2022/06/11 - IT IS NOT RECOMMENDED TO EDIT THIS FILE (TO AVOID TROUBLESHOOTING AFTER UPDATING) - DO CHANGES IN template.css ONLY */
2
2
 
3
3
  /* begin table of contents --------------------------------------------------------------------------------------------------------------------------------------------------- */
4
4
  /*
@@ -48,17 +48,30 @@ html {
48
48
  /* ---------------------------------------------- BEGIN COMPONENTS AND GLOBAL STYLES -------------------------------------------------- */
49
49
  /* begin styles for main structure --------------------------------------------------------------------------------------------------------------------------------------------------- */
50
50
  #page-wrapper {
51
- scroll-padding-top: 10.5rem;
52
51
  display: flex;
53
52
  flex-direction: column;
54
53
  scroll-snap-type: y mandatory;
55
- width: 100dvw;
56
- min-height: 100dvh;
54
+ overflow-y: scroll;
55
+ height: 100dvh;
57
56
  scroll-behavior: smooth;
57
+ scroll-padding-top: 11.7rem;
58
+ }
59
+
60
+ main {
61
+ flex: 1 0 auto;
62
+ }
63
+
64
+ html {
65
+ height: auto;
66
+ scroll-behavior: unset;
67
+ }
68
+
69
+
70
+ body {
71
+ height: auto;
58
72
  }
59
73
 
60
74
  #component-library {
61
- /*scroll-padding-top: unset !important;*/
62
75
  scroll-snap-type: unset !important;
63
76
  }
64
77
 
@@ -130,7 +143,7 @@ body.avoid-scrolling {
130
143
 
131
144
  &:hover, &:active, &:focus {
132
145
  border-color: var(--primary-color);
133
- background: var(--default-background-color);
146
+ background: var(--default-background);
134
147
  }
135
148
  }
136
149
 
@@ -291,26 +304,26 @@ html {
291
304
  &.light-mode {
292
305
  /* assign default colors for custom light-mode set by class */
293
306
  --color-scheme-text-color: var(--light-mode-text-color);
294
- --color-scheme-text-color-buttons: var(--light-mode-text-color-buttons);
295
- --color-scheme-background-color: var(--light-mode-background-color);
296
307
  --color-scheme-text-color-inverted: var(--dark-mode-text-color);
297
- --color-scheme-background-inverted: var(--dark-mode-background-color);
308
+ --color-scheme-text-color-buttons: var(--light-mode-text-color-buttons);
309
+ --color-scheme-background: var(--light-mode-background);
310
+ --color-scheme-background-inverted: var(--dark-mode-background);
298
311
  --default-background-color-lightness: 97%;
299
312
  }
300
313
 
301
314
  --color-scheme-text-color-buttons: var(--dark-mode-text-color-buttons);
302
315
  --color-scheme-text-color-inverted: var(--light-mode-text-color);
303
- --color-scheme-background: var(--dark-mode-background-color);
304
- --color-scheme-background-inverted: var(--light-mode-background-color);
316
+ --color-scheme-background: var(--dark-mode-background);
317
+ --color-scheme-background-inverted: var(--light-mode-background);
305
318
  --default-background-color-lightness: 20%;
306
319
 
307
320
  &.dark-mode {
308
321
  /* assign default colors for custom dark-mode set by class */
309
322
  --color-scheme-text-color: var(--dark-mode-text-color);
310
- --color-scheme-text-color-buttons: var(--dark-mode-text-color-buttons);
311
- --color-scheme-background-color: var(--dark-mode-background-color);
312
323
  --color-scheme-text-color-inverted: var(--light-mode-text-color);
313
- --color-scheme-background-inverted: var(--light-mode-background-color);
324
+ --color-scheme-text-color-buttons: var(--dark-mode-text-color-buttons);
325
+ --color-scheme-background: var(--dark-mode-background);
326
+ --color-scheme-background-inverted: var(--light-mode-background);
314
327
  --default-background-color-lightness: 20%;
315
328
  --hyperlink-color-lightness: 40%; /* hyperlink-color-lightness */
316
329
  --hyperlink-color-highlighted-lightness: 50%; /* hyperlink-color-highlighted-lightness (used for highlighted hyperlinks) */