comand-component-library 4.0.8 → 4.0.10

package/src/assets/data/pages/boxes-team-overview.json

@@ -0,0 +1,302 @@
+[
+  {
+    "boxesPerRow": 4,
+    "useRowViewAsDefault": true,
+    "useGap": true,
+    "cmdHeadline": {
+      "headlineText": "Team 1",
+      "headlineLevel": 3
+    },
+    "boxes": [
+      {
+        "boxType": "user",
+        "user": {
+          "name": "User name 1",
+          "age": 35,
+          "gender": "m",
+          "imageSrc": "/media/images/user-images/fake-user-1.jpg",
+          "profession": "User profession",
+          "position": "User position",
+          "description": "User profile with image",
+          "tag": [
+            "Tagname",
+            "Long tag",
+            "One more tag"
+          ],
+          "links": [
+            {
+              "path": "mailto:",
+              "iconClass": "icon-mail",
+              "tooltip": "Send mail"
+            }
+          ]
+        }
+      },
+      {
+        "boxType": "user",
+        "user": {
+          "name": "User name 2",
+          "age": 35,
+          "gender": "m",
+          "imageSrc": "/media/images/user-images/fake-user-2.jpg",
+          "profession": "User profession",
+          "position": "User position",
+          "description": "User description",
+          "links": [
+            {
+              "path": "mailto:",
+              "iconClass": "icon-mail",
+              "tooltip": "Send mail"
+            },
+            {
+              "path": "https://www.comand-cms.com",
+              "target": "comand",
+              "iconClass": "icon-globe",
+              "tooltip": "Visit website"
+            }
+          ]
+        }
+      },
+      {
+        "boxType": "user",
+        "user": {
+          "name": "User name 3",
+          "age": 35,
+          "gender": "m",
+          "imageSrc": "/media/images/user-images/fake-user-3.jpg",
+          "profession": "User profession",
+          "position": "User position",
+          "description": "User with a long text as description that wraps over multiple lines",
+          "links": [
+            {
+              "path": "mailto:",
+              "iconClass": "icon-mail",
+              "tooltip": "Send mail"
+            },
+            {
+              "path": "https://www.comand-cms.com",
+              "target": "comand",
+              "iconClass": "icon-globe",
+              "tooltip": "Visit website"
+            },
+            {
+              "path": "tel:",
+              "iconClass": "icon-phone",
+              "tooltip": "Make call"
+            }
+          ]
+        }
+      },
+      {
+        "boxType": "user",
+        "user": {
+          "name": "User name 4",
+          "age": 35,
+          "gender": "m",
+          "imageSrc": "/media/images/user-images/fake-user-4.jpg",
+          "profession": "User profession",
+          "position": "User position",
+          "description": "User description",
+          "links": [
+            {
+              "path": "mailto:",
+              "iconClass": "icon-mail",
+              "tooltip": "Send mail"
+            },
+            {
+              "path": "https://www.comand-cms.com",
+              "target": "comand",
+              "iconClass": "icon-globe",
+              "tooltip": "Visit website"
+            },
+            {
+              "path": "tel:",
+              "iconClass": "icon-phone",
+              "tooltip": "Make call"
+            }
+          ]
+        }
+      },
+      {
+        "boxType": "user",
+        "user": {
+          "name": "User name 5",
+          "age": 35,
+          "gender": "m",
+          "imageSrc": "/media/images/user-images/fake-user-5.jpg",
+          "profession": "User profession",
+          "position": "User position",
+          "description": "User description",
+          "links": [
+            {
+              "path": "mailto:",
+              "iconClass": "icon-mail",
+              "tooltip": "Send mail"
+            },
+            {
+              "path": "https://www.comand-cms.com",
+              "target": "comand",
+              "iconClass": "icon-globe",
+              "tooltip": "Visit website"
+            },
+            {
+              "path": "tel:",
+              "iconClass": "icon-phone",
+              "tooltip": "Make call"
+            }
+          ]
+        }
+      }
+    ]
+  },
+  {
+    "boxesPerRow": 4,
+    "useRowViewAsDefault": true,
+    "useGap": true,
+    "cmdHeadline": {
+      "headlineText": "Team 1",
+      "headlineLevel": 3
+    },
+    "boxes": [
+      {
+        "boxType": "user",
+        "user": {
+          "name": "User name 1",
+          "age": 35,
+          "gender": "m",
+          "imageSrc": "/media/images/user-images/fake-user-1.jpg",
+          "profession": "User profession",
+          "position": "User position",
+          "description": "User profile with image",
+          "tag": [
+            "Tagname",
+            "Long tag",
+            "One more tag"
+          ],
+          "links": [
+            {
+              "path": "mailto:",
+              "iconClass": "icon-mail",
+              "tooltip": "Send mail"
+            }
+          ]
+        }
+      },
+      {
+        "boxType": "user",
+        "user": {
+          "name": "User name 2",
+          "age": 35,
+          "gender": "m",
+          "imageSrc": "/media/images/user-images/fake-user-2.jpg",
+          "profession": "User profession",
+          "position": "User position",
+          "description": "User description",
+          "links": [
+            {
+              "path": "mailto:",
+              "iconClass": "icon-mail",
+              "tooltip": "Send mail"
+            },
+            {
+              "path": "https://www.comand-cms.com",
+              "target": "comand",
+              "iconClass": "icon-globe",
+              "tooltip": "Visit website"
+            }
+          ]
+        }
+      },
+      {
+        "boxType": "user",
+        "user": {
+          "name": "User name 3",
+          "age": 35,
+          "gender": "m",
+          "imageSrc": "/media/images/user-images/fake-user-3.jpg",
+          "profession": "User profession",
+          "position": "User position",
+          "description": "User with a long text as description that wraps over multiple lines",
+          "links": [
+            {
+              "path": "mailto:",
+              "iconClass": "icon-mail",
+              "tooltip": "Send mail"
+            },
+            {
+              "path": "https://www.comand-cms.com",
+              "target": "comand",
+              "iconClass": "icon-globe",
+              "tooltip": "Visit website"
+            },
+            {
+              "path": "tel:",
+              "iconClass": "icon-phone",
+              "tooltip": "Make call"
+            }
+          ]
+        }
+      },
+      {
+        "boxType": "user",
+        "user": {
+          "name": "User name 4",
+          "age": 35,
+          "gender": "m",
+          "imageSrc": "/media/images/user-images/fake-user-4.jpg",
+          "profession": "User profession",
+          "position": "User position",
+          "description": "User description",
+          "links": [
+            {
+              "path": "mailto:",
+              "iconClass": "icon-mail",
+              "tooltip": "Send mail"
+            },
+            {
+              "path": "https://www.comand-cms.com",
+              "target": "comand",
+              "iconClass": "icon-globe",
+              "tooltip": "Visit website"
+            },
+            {
+              "path": "tel:",
+              "iconClass": "icon-phone",
+              "tooltip": "Make call"
+            }
+          ]
+        }
+      },
+      {
+        "boxType": "user",
+        "user": {
+          "name": "User name 5",
+          "age": 35,
+          "gender": "m",
+          "imageSrc": "/media/images/user-images/fake-user-5.jpg",
+          "profession": "User profession",
+          "position": "User position",
+          "description": "User description",
+          "links": [
+            {
+              "path": "mailto:",
+              "iconClass": "icon-mail",
+              "tooltip": "Send mail"
+            },
+            {
+              "path": "https://www.comand-cms.com",
+              "target": "comand",
+              "iconClass": "icon-globe",
+              "tooltip": "Visit website"
+            },
+            {
+              "path": "tel:",
+              "iconClass": "icon-phone",
+              "tooltip": "Make call"
+            }
+          ]
+        }
+      }
+    ]
+  }
+]

package/src/assets/data/pages/list-of-downloads.json

@@ -2,7 +2,7 @@
   {
     "headline": {
       "headlineLevel": 4,
-      "headlineText": "Segment #1 (vertical list)"
+      "headlineText": "List #1 (vertical list)"
     },
     "orientation": "vertical",
     "links": [
@@ -29,7 +29,7 @@
   {
     "headline": {
       "headlineLevel": 4,
-      "headlineText": "Segment #2 (horizontal list)"
+      "headlineText": "List #2 (horizontal list)"
     },
     "orientation": "horizontal",
     "links": [

package/src/assets/data/pages/list-of-site-links.json

@@ -2,7 +2,7 @@
   {
     "headline": {
       "headlineLevel": 4,
-      "headlineText": "Segment #1 (vertical list)"
+      "headlineText": "List #1 (vertical list)"
     },
     "orientation": "vertical",
     "links": [
@@ -42,7 +42,7 @@
   {
     "headline": {
       "headlineLevel": 4,
-      "headlineText": "Segment #2 (horizontal list)"
+      "headlineText": "List #2 (horizontal list)"
     },
     "orientation": "horizontal",
     "links": [

package/src/assets/styles/component-library-global-styles.scss

@@ -39,7 +39,7 @@
 @import 'variables'; /* scss-variables (only used for media-query-breakpoints) */
 /* ---------------------------------------------- END IMPORTS -------------------------------------------------- */
 
-// assign scss-variables for breakpoints (from variables.scss) to css-variables, to get access to their value in JavaScript by getComputedStyle(document.documentElement).getPropertyValue
+/* assign scss-variables for breakpoints (from variables.scss) to css-variables, to get access to their value in JavaScript by getComputedStyle(document.documentElement).getPropertyValue */
 html {
     --medium-max-width: #{$medium-max-width};
     --small-max-width: #{$small-max-width};
@@ -313,6 +313,12 @@ body.avoid-scrolling {
 
 /* ---------------------------------------------- BEGIN COLORS-SCHEMES (LIGHT-/DARK-MODE) -------------------------------------------------- */
 html {
+    --color-scheme-text-color-buttons: var(--dark-mode-text-color-buttons);
+    --color-scheme-text-color-inverted: var(--light-mode-text-color);
+    --color-scheme-background: var(--dark-mode-background);
+    --color-scheme-background-inverted: var(--light-mode-background);
+    --default-background-color-lightness: 20%;
+
     &.light-mode {
         /* assign default colors for custom light-mode set by class */
         --color-scheme-text-color: var(--light-mode-text-color);
@@ -323,12 +329,6 @@ html {
         --default-background-color-lightness: 97%;
     }
 
-    --color-scheme-text-color-buttons: var(--dark-mode-text-color-buttons);
-    --color-scheme-text-color-inverted: var(--light-mode-text-color);
-    --color-scheme-background: var(--dark-mode-background);
-    --color-scheme-background-inverted: var(--light-mode-background);
-    --default-background-color-lightness: 20%;
-
     &.dark-mode {
         /* assign default colors for custom dark-mode set by class */
         --color-scheme-text-color: var(--dark-mode-text-color);

package/src/componentSettingsDataAndControls.vue

@@ -367,16 +367,6 @@ data() {
                     text: "Horizontal",
                     value: "horizontal"
                 }
-            ],
-            showListStyleItems: [
-                {
-                    text: "False (default)",
-                    value: false
-                },
-                {
-                    text: "True",
-                    value: true
-                }
             ]
         },
         cmdLoginFormSettingsData: {

package/src/components/CmdBox.vue

@@ -61,7 +61,7 @@
             <div v-if="useSlots?.includes('body')"
                  :class="{'default-padding': useDefaultPadding, 'allow-scroll': allowContentToScroll}"
                  ref="boxBody"
-                 :style="'max-height: ' + calculatedBodyHeight"
+                 :style="allowContentToScroll ? 'max-height: ' + calculatedBodyHeight : null"
             >
                 <!-- begin slot 'body' -->
                 <slot name="body">
@@ -86,7 +86,7 @@
             <template v-else>
                 <img v-if="image" :src="image.src" :alt="image.altText"/>
 
-                <div :class="{'default-padding': useDefaultPadding, 'allow-scroll': allowContentToScroll}">
+                <div v-else :class="{'default-padding': useDefaultPadding, 'allow-scroll': allowContentToScroll}">
                     <!-- begin CmdHeadline -->
                     <CmdHeadline
                         v-if="cmdHeadline?.headlineText && repeatHeadlineInBoxBody"
@@ -261,7 +261,7 @@ export default {
          */
         maxBoxBodyHeight: {
             type: String,
-            default: "100rem"
+            default: "10rem"
         },
         /**
          * activate if box should be collapsible
@@ -438,12 +438,14 @@ export default {
             required: false
         }
     },
+    /*
     mounted() {
+
         if (this.allowContentToScroll && this.$refs.boxBody) {
             const topPosition = this.$refs.boxBody.getBoundingClientRect().top
             this.calculatedBodyHeight = (document.documentElement.clientHeight - topPosition) + "px"
         }
-    },
+    },*/
     computed: {
         toggleTransition() {
             if (this.useTransition) {
@@ -587,9 +589,14 @@ export default {
         }
 
         .box-body {
+            display: flex;
             flex-grow: 1;
             border-top: var(--box-border);
 
+            & > div:only-child {
+                flex-grow: 1;
+            }
+
             p.cutoff-text {
                 padding: var(--default-padding);
                 margin: 0;

package/src/components/CmdCopyrightInformation.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="cmd-copyright-information" role="contentinfo">
-        <a href="http://www.comand-cms.com" target="comand-website" lang="en" title="CoManD-Website">&copy; CoManD</a>
+        <a href="https://www.comand-cms.com" target="comand-website" lang="en" title="CoManD-Website">&copy; CoManD</a>
     </div>
 </template>
 
@@ -13,7 +13,7 @@ export default {
 <style>
 /* begin cmd-copyright-information ---------------------------------------------------------------------------------------- */
 .cmd-copyright-information {
-    background: var(--default-text-color);
+    background: var(--dark-gray);
     border-top: var(--default-border-width) var(--default-border-style) var(--pure-white);
     text-align: center;
     padding: var(--default-padding);

package/src/components/CmdSiteHeader.vue

@@ -117,7 +117,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style>
 /* begin cmd-site-header ---------------------------------------------------------------------------------------- */
 .cmd-site-header {
     grid-area: site-header;
@@ -155,6 +155,13 @@ export default {
         border-bottom: 0;
     }
 
+    & + #main-navigation-wrapper {
+        nav {
+            border-left: 0;
+            border-right: 0;
+        }
+    }
+
     /* use id to ensure high specificity */
     > .cmd-main-navigation#main-navigation-wrapper:last-child {
         border-bottom: 0;

package/src/components/CmdSocialNetworks.vue

@@ -427,14 +427,18 @@ export default {
 @import "../assets/styles/variables";
 
 @container (max-width: #{$small-max-width}) {
-    .button-wrapper {
-        .button {
-            flex: none;
-            width: auto !important;
+    .cmd-social-networks {
+        container-type: normal; /* do not set to 'inline-size' to avoid to be stretched vertically on small devices */
 
-            [class*="icon-"] {
-                & + span {
-                    display: none;
+        .button-wrapper {
+            .button {
+                flex: none;
+                width: auto !important;
+
+                [class*="icon-"] {
+                    & + span {
+                        display: none;
+                    }
                 }
             }
         }

package/src/index.js

@@ -25,6 +25,7 @@ export { default as CmdListOfLinks } from '@/components/CmdListOfLinks.vue'
 export { default as CmdLoginForm } from '@/components/CmdLoginForm.vue'
 export { default as CmdMainNavigation } from '@/components/CmdMainNavigation.vue'
 export { default as CmdMultistepFormProgressBar } from '@/components/CmdMultistepFormProgressBar.vue'
+export { default as CmdNewsletterSubscription } from '@/components/CmdNewsletterSubscription.vue'
 export { default as CmdOpeningHours } from '@/components/CmdOpeningHours.vue'
 export { default as CmdPagination } from '@/components/CmdPagination.vue'
 export { default as CmdPageFooter } from '@/components/CmdPageFooter.vue'
@@ -48,6 +49,12 @@ export { default as CmdUploadForm } from '@/components/CmdUploadForm.vue'
 export { default as CmdWidthLimitationWrapper } from '@/components/CmdWidthLimitationWrapper.vue'
 export { default as EditComponentWrapper } from '@/components/EditComponentWrapper.vue'
 
+// export page-components
+export { default as BasicForm } from '@/pages/BasicForm.vue'
+export { default as ContactInformation } from '@/pages/ContactInformation.vue'
+export { default as MultipleBoxWrapper } from '@/pages/MultipleBoxWrapper.vue'
+export { default as MultipleListsOfLinks } from '@/pages/MultipleListsOfLinks.vue'
+
 // export directives
 export { default as DirFocus } from '@/directives/focus'
 export { default as DirTelephone } from '@/directives/telephone'

package/src/main.js

@@ -27,7 +27,7 @@ import '@/assets/styles/editmode-iconfont.css'
 import '@/assets/styles/component-library-global-styles.scss'
 
 /* import css for global transitions */
-import '@/assets/styles/transitions.scss'
+import '@/assets/styles/transitions.css'
 
 /* import css-example for your custom styles */
 import '@/assets/styles/template.css'

package/src/mixins/pages/BasicForm/DefaultMessageProperties.js

@@ -21,6 +21,8 @@ export default {
         "basic_form.placeholder.city": "City:",
         "basic_form.labeltext.additional_address_info": "Additional address information",
         "basic_form.placeholder.additional_address_info": "Additional address information",
+        "basic_form.labeltext.additional_text": "Additional text",
+        "basic_form.placeholder.additional_text": "Additional text",
         "basic_form.labeltext.data_privacy": "I accept handling and saving of my personal data a mentioned in the <a href='/content/data-privacy-en.html' class='fancybox'>private policy</a>."
       }
     }