comand-component-library 4.0.2 → 4.0.3

package/src/components/CmdBox.vue

@@ -57,7 +57,11 @@
 
         <!-- begin box-body -->
         <div v-show="open" :class="['box-body', boxBodyClass]" aria-expanded="true" role="article">
-            <div v-if="useSlots?.includes('body')" :class="{'default-padding': useDefaultPadding, 'allow-scroll': allowContentToScroll}">
+            <div v-if="useSlots?.includes('body')"
+                 :class="{'default-padding': useDefaultPadding, 'allow-scroll': allowContentToScroll}"
+                 ref="boxBody"
+                 :style="'max-height: ' + calculatedBodyHeight"
+            >
                 <!-- begin slot 'body' -->
                 <slot name="body">
                     <transition-group :name="toggleTransition">
@@ -69,7 +73,9 @@
                             {{ textBody }}
                         </p>
                         <a v-if="cutoffTextLines > 0" href="#" @click.prevent="toggleCutOffText">
-                            {{ showCutOffText ? getMessage("cmdbox.contentbox.collapse_text") : getMessage("cmdbox.contentbox.expand_text") }}
+                            {{
+                                showCutOffText ? getMessage("cmdbox.contentbox.collapse_text") : getMessage("cmdbox.contentbox.expand_text")
+                            }}
                         </a>
                     </transition-group>
                 </slot>
@@ -123,7 +129,9 @@
             <!-- end ribbons -->
         </div>
         <div class="box-body">
-            <p v-if="product.articleNumber">{{ getMessage("cmdbox.productbox.article_no") }} {{ product.articleNumber }}</p>
+            <p v-if="product.articleNumber">{{ getMessage("cmdbox.productbox.article_no") }} {{
+                    product.articleNumber
+                }}</p>
             <p v-if="product.price" class="price">
                 <span>{{ product.price }}</span><span :title="globalCurrency.name">{{ globalCurrency.symbol }}</span>
             </p>
@@ -146,7 +154,7 @@
         <div class="box-header flex-container vertical">
             <figure v-if="user.image">
                 <img :src="user.image.src" :alt="user.image.alt"/>
-                <figcaption>{{ user.name }} <span v-if="user.age">, {{user.age}}</span></figcaption>
+                <figcaption>{{ user.name }} <span v-if="user.age">, {{ user.age }}</span></figcaption>
             </figure>
             <div v-else>
                 <span :class="defaultProfileIconClass" :title="user.name"></span>
@@ -161,7 +169,7 @@
         </div>
         <ul class="tags">
             <li v-for="(tag, index) in user.tags" :key="index">
-                {{tag}}
+                {{ tag }}
             </li>
         </ul>
         <div v-if="user.links" class="box-footer">
@@ -189,7 +197,8 @@ export default {
         return {
             open: this.collapsible ? this.openCollapsedBox : true,
             active: true,
-            showCutOffText: false
+            showCutOffText: false,
+            calculatedBodyHeight: this.maxBoxBodyHeight
         }
     },
     props: {
@@ -217,7 +226,12 @@ export default {
          */
         boxType: {
             type: String,
-            default: "content"
+            default: "content",
+            validator(value) {
+                return value === "content" ||
+                    value === "product" ||
+                    value === "user"
+            }
         },
         /**
          * set if content (in box-body) should scroll
@@ -232,8 +246,8 @@ export default {
          * set max-height for body (should only be used it allowContentToScroll-property is active)
          */
         maxBoxBodyHeight: {
-          type: String,
-          default: "10rem"
+            type: String,
+            default: "100rem"
         },
         /**
          * activate if box should be collapsible
@@ -324,7 +338,12 @@ export default {
          */
         profileType: {
             type: String,
-            default: "business"
+            default: "business",
+            validator(value) {
+                return value === "business" ||
+                    value === "influencer" ||
+                    value === "dating"
+            }
         },
         /**
          * activated if all content (incl. headline) is given by slot
@@ -405,13 +424,13 @@ 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: {
-        setMaxBoxBodyHeight() {
-            if (this.allowContentToScroll && this.maxBoxBodyHeight) {
-                return this.maxBoxBodyHeight
-            }
-            return null
-        },
         toggleTransition() {
             if (this.useTransition) {
                 return "fade"
@@ -474,6 +493,7 @@ export default {
         a.box-header {
             justify-content: space-between;
             background: var(--hyperlink-color);
+            border-radius: var(--default-border-radius);
 
             &:hover, &:active, &:focus {
                 background: var(--pure-white);
@@ -488,7 +508,10 @@ export default {
     .box-body {
         .allow-scroll {
             overflow-y: auto;
-            max-height: v-bind(maxBoxBodyHeight);
+
+            & * {
+              flex-shrink: 0;
+            }
         }
     }
 
@@ -508,12 +531,6 @@ export default {
         }
 
         > .box-header {
-            display: flex;
-            align-items: center;
-            border-radius: var(--border-radius);
-            padding: calc(var(--default-padding) / 2) var(--default-padding);
-            background: var(--secondary-color);
-            color: var(--pure-white);
             text-decoration: none;
 
             > .cmd-custom-headline {
@@ -599,13 +616,6 @@ export default {
                 }
             }
         }
-
-        .box-footer {
-            border-bottom-left-radius: var(--border-radius);
-            border-bottom-right-radius: var(--border-radius);
-            padding: var(--default-padding);
-            border-top: var(--default-border);
-        }
     }
 
     /* boyType === 'product' and boxType === 'user' */
@@ -660,6 +670,8 @@ export default {
         }
 
         > .box-header {
+            padding: 0;
+
             > img, > div {
                 display: table;
                 margin: 0 auto;
@@ -674,12 +686,14 @@ export default {
             figcaption {
                 font-size: 2rem;
                 font-weight: bold;
-                padding-top: var(--default-padding)
+                padding: var(--default-padding);
             }
         }
 
         .box-body {
             flex-grow: 1;
+            padding: var(--default-padding);
+            padding-bottom: 0;
 
             > * {
                 text-align: center;
@@ -703,15 +717,13 @@ export default {
     /* boxType === 'user' */
     &.user {
         > .box-header {
-            --icon-size: 6rem;
+            --default-icon-size: 6rem;
+            --box-header-text-color: var(--primary-color);
 
-            padding: var(--default-padding);
+            background: none;
 
-            .cmd-headline {
-                > * {
-                    display: block;
-                    text-align: center;
-                }
+            > div:first-child > [class*="icon-"] {
+                aspect-ratio: 1/1;
             }
 
             img, > div:first-child > [class*="icon-"] {
@@ -719,7 +731,7 @@ export default {
                 margin: 0 auto var(--default-margin) auto;
                 padding: calc(var(--default-padding) * 3);
                 border-radius: var(--full-circle);
-                background: var(--primary-color);
+                background: var(--box-header-background-color);
                 color: var(--pure-white);
 
                 & + p, & + figcaption {
@@ -732,17 +744,20 @@ export default {
 
             img {
                 padding: 0;
-                width: calc(var(--icon-size) * 2);
+                width: calc(var(--default-icon-size) * 2);
                 aspect-ratio: 1/1;
             }
 
             > div:first-child > [class*="icon-"] {
-                font-size: var(--icon-size);
+                margin: 0;
+                font-size: var(--default-icon-size);
             }
         }
 
         .box-body {
             flex-grow: 1;
+            padding: var(--default-padding);
+            padding-top: 0;
 
             p {
                 text-align: center;
@@ -760,6 +775,7 @@ export default {
 
         .box-footer {
             margin-top: auto;
+            padding: 0;
             border-top: var(--default-border);
 
             .cmd-list-of-links {
@@ -769,6 +785,7 @@ export default {
 
                     li {
                         flex: 1;
+                        border-radius: var(--default-border-radius);
 
                         a {
                             flex: 1;
@@ -776,6 +793,7 @@ export default {
                             text-align: center;
                             background: var(--color-scheme-background-color);
                             border-left: var(--default-border);
+                            border-radius: var(--default-border-radius);
                         }
 
                         &:hover, &:active, &:focus {
@@ -801,7 +819,7 @@ export default {
 
         &.row-view {
             [class*="icon"] {
-                --icon-size: 3rem;
+                --default-icon-size: 3rem;
             }
 
             .box-header > div:first-child > [class*="icon-"] {

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="_blank" lang="en" title="CoManD-Website">&copy; CoManD</a>
+        <a href="http://www.comand-cms.com" target="comand-website" lang="en" title="CoManD-Website">&copy; CoManD</a>
     </div>
 </template>
 
@@ -13,10 +13,12 @@ export default {
 <style>
 /* begin cmd-copyright-information ---------------------------------------------------------------------------------------- */
 .cmd-copyright-information {
-    background: var(--text-color);
-    border-top: var(--border-width) var(--border-style) var(--pure-white);
+    background: var(--default-text-color);
+    border-top: var(--default-border-width) var(--default-border-style) var(--pure-white);
     text-align: center;
     padding: var(--default-padding);
+    margin-top: auto;
+    flex: none;
 
     a {
         text-decoration: none;