comand-component-library 4.0.2 → 4.0.4

package/src/components/CmdBox.vue

@@ -1,6 +1,7 @@
 <template>
     <!-- begin boxType 'content' -->
     <div v-if="boxType === 'content'"
+         ref="cmdBox"
          :class="[
              'cmd-box box content',
              {
@@ -57,7 +58,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 +74,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>
@@ -122,13 +129,17 @@
             </div>
             <!-- end ribbons -->
         </div>
+        <!-- begin box-body -->
         <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>
             <p v-if="product.description">{{ product.description }}</p>
         </div>
+        <!-- end box-body -->
     </a>
     <!-- end boxType 'product' -->
 
@@ -143,30 +154,41 @@
                 'row-view': rowView
              }
          ]">
+        <!-- begin box-header -->
         <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>
                 <p v-if="!rowView">{{ user.name }}</p>
             </div>
         </div>
+        <!-- end box-header -->
+
+        <!-- begin box-body -->
         <div class="box-body">
             <p v-if="rowView">{{ user.name }}</p>
             <p v-if="user.profession">{{ user.profession }}</p>
             <p v-if="user.position">{{ user.position }}</p>
             <p v-if="user.description" class="description">{{ user.description }}</p>
         </div>
-        <ul class="tags">
+        <!-- end box-body -->
+
+        <!-- begin user-tags -->
+        <ul  v-if="user.tags && user.tags.length" class="tags">
             <li v-for="(tag, index) in user.tags" :key="index">
-                {{tag}}
+                {{ tag }}
             </li>
         </ul>
-        <div v-if="user.links" class="box-footer">
+        <!-- end user-tags -->
+
+        <!-- begin box-footer -->
+        <div v-if="user.links && user.links.length" class="box-footer">
             <CmdListOfLinks :links="user.links" orientation="horizontal" :useGap="false"/>
         </div>
+        <!-- end box-footer -->
     </div>
     <!-- end boxType 'user' -->
 </template>
@@ -189,7 +211,8 @@ export default {
         return {
             open: this.collapsible ? this.openCollapsedBox : true,
             active: true,
-            showCutOffText: false
+            showCutOffText: false,
+            calculatedBodyHeight: this.maxBoxBodyHeight
         }
     },
     props: {
@@ -217,7 +240,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 +260,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 +352,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 +438,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"
@@ -435,6 +468,18 @@ export default {
         // for boxType === product
         clickOnProduct(product) {
             this.$emit('click', product)
+        },
+        // set focus on first input if box contains form-elements
+        setFocus() {
+            this.$nextTick(() => {
+                if(this.open) {
+                   const firstFormElement = this.$refs.cmdBox.querySelector(":is(input, select, textarea):first-of-type")
+
+                    if(firstFormElement) {
+                       firstFormElement.focus()
+                    }
+                }
+            })
         }
     },
     watch: {
@@ -442,7 +487,11 @@ export default {
             // toggle collapse-status of all boxes if changed in outer component
             if (this.collapsible) {
                 this.open = this.openCollapsedBox
+                this.setFocus()
             }
+        },
+        open() {
+            this.setFocus()
         }
     }
 }
@@ -473,7 +522,8 @@ export default {
     &.collapsible {
         a.box-header {
             justify-content: space-between;
-            background: var(--hyperlink-color);
+            background: var(--box-header-background);
+            border-radius: var(--box-border-radius);
 
             &:hover, &:active, &:focus {
                 background: var(--pure-white);
@@ -488,7 +538,10 @@ export default {
     .box-body {
         .allow-scroll {
             overflow-y: auto;
-            max-height: v-bind(maxBoxBodyHeight);
+
+            & * {
+              flex-shrink: 0;
+            }
         }
     }
 
@@ -505,15 +558,14 @@ export default {
                 border-bottom-left-radius: 0;
                 border-bottom-right-radius: 0;
             }
+
+            fieldset {
+                border: 0;
+                padding: var(--default-padding);
+            }
         }
 
         > .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 {
@@ -536,7 +588,7 @@ export default {
 
         .box-body {
             flex-grow: 1;
-            border-top: var(--default-border);
+            border-top: var(--box-border);
 
             p.cutoff-text {
                 padding: var(--default-padding);
@@ -551,7 +603,7 @@ export default {
                     left: 0;
                     bottom: 0;
                     height: calc(var(--line-of-text-height) * 3);
-                    background: linear-gradient(to bottom, transparent 0%, var(--default-background-color) 100%);
+                    background: linear-gradient(to bottom, transparent 0%, var(--default-background) 100%);
                 }
 
                 &.show-text {
@@ -559,7 +611,7 @@ export default {
                 }
 
                 & + a {
-                    border-top: var(--default-border);
+                    border-top: var(--box-border);
                     display: block;
                     padding: var(--default-padding);
                     margin: 0;
@@ -583,7 +635,7 @@ export default {
                         display: block;
                         padding: var(--default-padding);
                         text-decoration: none;
-                        border-bottom: var(--default-border);
+                        border-bottom: var(--box-border);
 
                         &:hover, &:active, &:focus {
                             background: var(--primary-color);
@@ -599,13 +651,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 +705,8 @@ export default {
         }
 
         > .box-header {
+            padding: 0;
+
             > img, > div {
                 display: table;
                 margin: 0 auto;
@@ -674,12 +721,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 +752,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 +766,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: var(--pure-white);
 
                 & + p, & + figcaption {
@@ -732,17 +779,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,7 +810,8 @@ export default {
 
         .box-footer {
             margin-top: auto;
-            border-top: var(--default-border);
+            padding: 0;
+            border-top: var(--box-border);
 
             .cmd-list-of-links {
                 ul {
@@ -769,13 +820,15 @@ export default {
 
                     li {
                         flex: 1;
+                        border-radius: var(--box-border-radius);
 
                         a {
                             flex: 1;
                             padding: var(--default-padding);
                             text-align: center;
-                            background: var(--color-scheme-background-color);
-                            border-left: var(--default-border);
+                            background: var(--color-scheme-background);
+                            border-left: var(--box-border);
+                            border-radius: var(--box-border-radius);
                         }
 
                         &:hover, &:active, &:focus {
@@ -801,7 +854,7 @@ export default {
 
         &.row-view {
             [class*="icon"] {
-                --icon-size: 3rem;
+                --default-icon-size: 3rem;
             }
 
             .box-header > div:first-child > [class*="icon-"] {
@@ -814,6 +867,7 @@ export default {
 
             .box-footer {
                 border: 0;
+                background: none;
 
                 .cmd-list-of-links {
                     background: none;

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;