comand-component-library 3.3.6 → 3.3.8

package/src/assets/data/thumbnail-scroller.json

@@ -1,58 +1,114 @@
 [
   {
-    "imgId": 1,
-    "srcImageSmall": "media/images/thumbnail-scroller/thumbnail/logo-cmd-blue-landscape.jpg",
-    "srcImageLarge": "media/images/thumbnail-scroller/original/logo-cmd-blue-landscape.jpg",
-    "alt": "Alternativ Text 1",
-    "figcaption": "Figcaption DE 1"
+    "image": {
+      "id": 1,
+      "srcImageSmall": "media/images/thumbnail-scroller/thumbnail/logo-cmd-blue-landscape.jpg",
+      "srcImageLarge": "media/images/thumbnail-scroller/original/logo-cmd-blue-landscape.jpg",
+      "alt": "Alternative Text 1"
+    },
+    "figcaption": {
+      "show": true,
+      "position": "bottom",
+      "text": "Figcaption 1",
+      "textAlign": "center"
+    }
   },
   {
-    "imgId": 2,
-    "srcImageSmall": "media/images/thumbnail-scroller/thumbnail/logo-cmd-green-landscape.jpg",
-    "srcImageLarge": "media/images/thumbnail-scroller/original/logo-cmd-green-landscape.jpg",
-    "alt": "Alternativ Text 2",
-    "figcaption": "Figcaption DE 2"
+    "image": {
+      "id": 2,
+      "srcImageSmall": "media/images/thumbnail-scroller/thumbnail/logo-cmd-blue-landscape.jpg",
+      "srcImageLarge": "media/images/thumbnail-scroller/original/logo-cmd-blue-landscape.jpg",
+      "alt": "Alternative Text 2"
+    },
+    "figcaption": {
+      "show": true,
+      "position": "bottom",
+      "text": "Figcaption 2",
+      "textAlign": "center"
+    }
   },
   {
-    "imgId": 3,
-    "srcImageSmall": "media/images/thumbnail-scroller/thumbnail/logo-cmd-red-landscape.jpg",
-    "srcImageLarge": "media/images/thumbnail-scroller/original/logo-cmd-red-landscape.jpg",
-    "alt": "Alternativ Text 3",
-    "figcaption": "Figcaption DE 3"
+    "image": {
+      "id": 3,
+      "srcImageSmall": "media/images/thumbnail-scroller/thumbnail/logo-cmd-blue-landscape.jpg",
+      "srcImageLarge": "media/images/thumbnail-scroller/original/logo-cmd-blue-landscape.jpg",
+      "alt": "Alternative Text 3"
+    },
+    "figcaption": {
+      "show": true,
+      "position": "bottom",
+      "text": "Figcaption 3",
+      "textAlign": "center"
+    }
   },
   {
-    "imgId": 4,
-    "srcImageSmall": "media/images/thumbnail-scroller/thumbnail/logo-cmd-yellow-landscape.jpg",
-    "srcImageLarge": "media/images/thumbnail-scroller/original/logo-cmd-yellow-landscape.jpg",
-    "alt": "Alternativ Text 4",
-    "figcaption": "Figcaption DE 4"
+    "image": {
+      "id": 4,
+      "srcImageSmall": "media/images/thumbnail-scroller/thumbnail/logo-cmd-blue-landscape.jpg",
+      "srcImageLarge": "media/images/thumbnail-scroller/original/logo-cmd-blue-landscape.jpg",
+      "alt": "Alternative Text 4"
+    },
+    "figcaption": {
+      "show": true,
+      "position": "bottom",
+      "text": "Figcaption 4",
+      "textAlign": "center"
+    }
   },
   {
-    "imgId": 5,
-    "srcImageSmall": "media/images/thumbnail-scroller/thumbnail/logo-cmd-blue-landscape.jpg",
-    "srcImageLarge": "media/images/thumbnail-scroller/original/logo-cmd-blue-landscape.jpg",
-    "alt": "Alternativ Text 5",
-    "figcaption": "Figcaption DE 5"
+    "image": {
+      "id": 5,
+      "srcImageSmall": "media/images/thumbnail-scroller/thumbnail/logo-cmd-blue-landscape.jpg",
+      "srcImageLarge": "media/images/thumbnail-scroller/original/logo-cmd-blue-landscape.jpg",
+      "alt": "Alternative Text 5"
+    },
+    "figcaption": {
+      "show": true,
+      "position": "bottom",
+      "text": "Figcaption 5",
+      "textAlign": "center"
+    }
   },
   {
-    "imgId": 6,
-    "srcImageSmall": "media/images/thumbnail-scroller/thumbnail/logo-cmd-green-landscape.jpg",
-    "srcImageLarge": "media/images/thumbnail-scroller/original/logo-cmd-green-landscape.jpg",
-    "alt": "Alternativ Text 6",
-    "figcaption": "Figcaption DE 6"
+    "image": {
+      "id": 6,
+      "srcImageSmall": "media/images/thumbnail-scroller/thumbnail/logo-cmd-blue-landscape.jpg",
+      "srcImageLarge": "media/images/thumbnail-scroller/original/logo-cmd-blue-landscape.jpg",
+      "alt": "Alternative Text 6"
+    },
+    "figcaption": {
+      "show": true,
+      "position": "bottom",
+      "text": "Figcaption 6",
+      "textAlign": "center"
+    }
   },
   {
-    "imgId": 7,
-    "srcImageSmall": "media/images/thumbnail-scroller/thumbnail/logo-cmd-red-landscape.jpg",
-    "srcImageLarge": "media/images/thumbnail-scroller/original/logo-cmd-red-landscape.jpg",
-    "alt": "Alternativ Text 7",
-    "figcaption": "Figcaption DE 7"
+    "image": {
+      "id": 7,
+      "srcImageSmall": "media/images/thumbnail-scroller/thumbnail/logo-cmd-blue-landscape.jpg",
+      "srcImageLarge": "media/images/thumbnail-scroller/original/logo-cmd-blue-landscape.jpg",
+      "alt": "Alternative Text 7"
+    },
+    "figcaption": {
+      "show": true,
+      "position": "bottom",
+      "text": "Figcaption 7",
+      "textAlign": "center"
+    }
   },
   {
-    "imgId": 8,
-    "srcImageSmall": "media/images/thumbnail-scroller/thumbnail/logo-cmd-yellow-landscape.jpg",
-    "srcImageLarge": "media/images/thumbnail-scroller/original/logo-cmd-yellow-landscape.jpg",
-    "alt": "Alternativ Text 8",
-    "figcaption": "Figcaption DE 8"
+    "image": {
+      "id": 8,
+      "srcImageSmall": "media/images/thumbnail-scroller/thumbnail/logo-cmd-blue-landscape.jpg",
+      "srcImageLarge": "media/images/thumbnail-scroller/original/logo-cmd-blue-landscape.jpg",
+      "alt": "Alternative Text 8"
+    },
+    "figcaption": {
+      "show": true,
+      "position": "bottom",
+      "text": "Figcaption 8",
+      "textAlign": "center"
+    }
   }
 ]

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

@@ -293,7 +293,7 @@ html {
     --color-scheme-background-inverted: var(--light-mode-background-color);
     --default-background-color-lightness: 20%;
 
-    :where(label, .label) .label-text > [class*="icon"] {
+    :where(label, .label) .label-text > [class*="icon-"] {
       background: var(--dark-gray);
     }
   }

package/src/components/CmdAddressData.vue

@@ -122,10 +122,44 @@
 
                     <span v-if="showLabelTexts">{{ getMessage('cmdaddressdata.labeltext.email')}}</span>
                 </dt>
-                <dd class="email" v-if="addressData.email?.value">
+                <dd v-if="addressData.email?.value" class="email" >
                     <a :href="'mailto:' + addressData.email?.value" class="email">{{ addressData.email.value  }}</a>
                 </dd>
                 <!-- end email -->
+
+                <!-- begin web site -->
+                <dt v-if="addressData.website?.value">
+                <!-- begin CmdIcon -->
+                    <CmdIcon
+                        v-if="addressData.website.iconClass && showLabelIcons"
+                        :iconClass="addressData.website.iconClass"
+                        :type="addressData.website.iconType"
+                    />
+                    <!-- end CmdIcon -->
+
+                    <span v-if="showLabelTexts">{{ getMessage('cmdaddressdata.labeltext.website')}}</span>
+                </dt>
+                <dd v-if="addressData.website?.value" >
+                    <a :href="addressData.website.value" target="_blank" :title="getMessage('cmdaddressdata.title.visit_website')">{{ websiteUrlText }}</a>
+                </dd>
+                <!-- end web site -->
+
+                <!-- begin custom data -->
+                <dt v-if="addressData.custom?.value">
+                    <!-- begin CmdIcon -->
+                    <CmdIcon
+                        v-if="addressData.custom.iconClass && showLabelIcons"
+                        :iconClass="addressData.custom.iconClass"
+                        :type="addressData.custom.iconType"
+                    />
+                    <!-- end CmdIcon -->
+
+                    <span v-if="showLabelTexts">{{ getMessage('cmdaddressdata.labeltext.custom')}}</span>
+                </dt>
+                <dd v-if="addressData.custom?.value" >
+                    {{ addressData.custom.value }}
+                </dd>
+                <!-- end custom data -->
             </dl>
             <!-- end list with labels -->
 
@@ -159,6 +193,12 @@
                 <li v-if="addressData.email?.value" :title="getMessage('cmdaddressdata.title.send_email')">
                     <a :href="'mailto:' + addressData.email.value" class="email">{{ addressData.email.value }}</a>
                 </li>
+                <li v-if="addressData.website?.value" :title="getMessage('cmdaddressdata.title.visit_website')">
+                    <a :href="addressData.website.value" target="_blank">{{ websiteUrlText }}</a>
+                </li>
+                <li v-if="addressData.custom?.value">
+                    {{ addressData.custom.value }}
+                </li>
             </ul>
             <!-- end list without labels -->
         </address>
@@ -229,6 +269,9 @@ export default {
     computed: {
         locateAddress() {
             return "https://www.google.com/maps/place/" + this.addressData.address.streetNo + ", " + this.addressData.address.zip + " " + this.addressData.address.city
+        },
+        websiteUrlText() {
+            return this.addressData.website?.value.replace("https://", "")
         }
     }
 }
@@ -245,7 +288,7 @@ export default {
             align-items: center;
 
             &.address {
-                align-items: flex-start;
+                align-self: flex-start;
             }
         }
     }

package/src/components/CmdBox.vue

@@ -1,66 +1,85 @@
 <template>
     <!-- begin boxType 'content' -->
     <div v-if="boxType === 'content'"
-         :class="['cmd-box box content', {open : open, collapsible: collapsible, 'stretch-vertically': stretchVertically && !collapsible, 'stretch-horizontally': stretchHorizontally}]">
-        <template v-if="useSlots?.includes('header')">
-            <!-- begin collapsible header with slot -->
-            <div v-if="collapsible" class="box-header">
-                <!-- begin slot 'header' -->
-                <slot name="header"></slot>
-                <!-- end slot 'header' -->
-
-                <a href="#" @click.prevent="toggleContentVisibility" :title="open ? iconOpen.tooltip : iconClosed.tooltip" class="toggle-icon">
-                    <!-- begin CmdIcon -->
-                    <CmdIcon :iconClass="[open ? iconOpen.iconClass : iconClosed.iconClass]" :type="[open ? iconOpen.iconType : iconClosed.iconType]" />
-                    <!-- end CmdIcon -->
-                </a>
-            </div>
-            <!-- end collapsible header with slot -->
+         :class="[
+             'cmd-box box content',
+             {open : open, collapsible: collapsible,
+             'stretch-vertically': stretchVertically && !collapsible,
+             'stretch-horizontally': stretchHorizontally}]"
+    >
+        <!-- begin collapsible header with slot -->
+        <a v-if="collapsible"
+           href="#"
+           class="box-header"
+           :title="open ? iconOpen.tooltip : iconClosed.tooltip"
+           @click.prevent="toggleContentVisibility"
+        >
+            <!-- begin slot 'header' -->
+            <slot v-if="useSlots?.includes('header')" name="header"></slot>
+            <!-- end slot 'header' -->
 
-            <!-- begin default header with slot -->
-            <div v-else class="box-header">
-                <!-- begin slot 'header' -->
-                <slot name="header"></slot>
-                <!-- end slot 'header' -->
-            </div>
-            <!-- end default header with slot -->
-        </template>
-        <template v-else>
-            <!-- begin header for collapsible -->
-            <a v-if="collapsible" class="box-header" href="#" :title="open ? iconOpen.tooltip : iconClosed.tooltip" @click.prevent="toggleContentVisibility">
-                <!-- begin CmdHeadline -->
-                <CmdHeadline
-                    v-if="cmdHeadline?.headlineText"
-                    v-bind="cmdHeadline"
-                />
-                <!-- end CmdHeadline -->
+            <!-- begin CmdHeadline -->
+            <CmdHeadline
+                v-else-if="cmdHeadline?.headlineText"
+                v-bind="cmdHeadline"
+            />
+            <!-- end CmdHeadline -->
+
+            <!-- begin CmdIcon -->
+            <CmdIcon
+                :iconClass="open ? iconOpen.iconClass : iconClosed.iconClass"
+                :type="open ? iconOpen.iconType : iconClosed.iconType"
+            />
+            <!-- end CmdIcon -->
+        </a>
+        <!-- end collapsible header with slot -->
 
-                <!-- begin CmdIcon -->
-                <CmdIcon class="toggle-icon" :iconClass="[open ? iconOpen.iconClass : iconClosed.iconClass]" :type="[open ? iconOpen.iconType : iconClosed.iconType]" />
-                <!-- end CmdIcon -->
-            </a>
-            <!-- end header for collapsible -->
+        <!-- begin default header with slot -->
+        <div v-else class="box-header">
+            <!-- begin slot 'header' -->
+            <slot v-if="useSlots?.includes('header')" name="header"></slot>
+            <!-- end slot 'header' -->
 
             <!-- begin CmdHeadline -->
             <CmdHeadline
-                v-else-if="!collapsible && cmdHeadline?.headlineText"
-                class="box-header"
+                v-else-if="cmdHeadline?.headlineText"
                 v-bind="cmdHeadline"
             />
             <!-- end CmdHeadline -->
-        </template>
+        </div>
+        <!-- end default header with slot -->
 
         <!-- begin box-body -->
         <div v-if="open" class="box-body" aria-expanded="true" role="article">
             <!-- begin slot 'body' -->
-            <slot name="body">
-                <transition :name="toggleTransition">
-                    <div class="padding">
-                        <p :class="{'cutoff-text': cutoffTextLines > 0, 'fade-last-line': fadeLastLine }">{{ textBody }}</p>
-                    </div>
-                </transition>
+            <slot v-if="useSlots?.includes('body')" name="body">
+                <transition-group :name="toggleTransition">
+                    <p :class="{
+                       'cutoff-text': cutoffTextLines > 0,
+                       'fade-last-line': fadeLastLine && !showCutOffText,
+                       'show-text' : showCutOffText
+                   }">
+                        {{ textBody }}
+                    </p>
+                    <a v-if="cutoffTextLines > 0" href="#" @click.prevent="toggleCutOffText">
+                        {{ showCutOffText ? getMessage("cmdbox.contentbox.collapse_text") : getMessage("cmdbox.contentbox.expand_text") }}
+                    </a>
+                </transition-group>
             </slot>
             <!-- end slot 'body' -->
+
+            <template v-else>
+                <img v-if="image" :src="image.src" :alt="image.altText"/>
+
+                <!-- begin CmdHeadline -->
+                <CmdHeadline
+                    v-if="cmdHeadline?.headlineText"
+                    v-bind="cmdHeadline"
+                />
+                <!-- end CmdHeadline -->
+
+                <p v-if="textBody">{{ textBody }}</p>
+            </template>
         </div>
         <!-- end box-body -->
 
@@ -73,7 +92,10 @@
     <!-- end boxType 'content' -->
 
     <!-- begin boxType 'product' -->
-    <a v-else-if="boxType === 'product' && product" :class="['cmd-box box product', {'stretch-vertically': stretchVertically, 'stretch-horizontally': stretchHorizontally}]" href="#" @click.prevent="clickOnProduct(product)">
+    <a v-else-if="boxType === 'product' && product"
+       :class="['cmd-box box product', {'stretch-vertically': stretchVertically, 'stretch-horizontally': stretchHorizontally}]"
+       href="#"
+       @click.prevent="clickOnProduct(product)">
         <div class="box-header flex-container vertical">
             <figure v-if="product.image !== undefined">
                 <img :src="product.image.src" :alt="product.image.alt"/>
@@ -150,7 +172,8 @@ export default {
     data() {
         return {
             open: this.collapsible ? this.collapsingBoxesOpen : true,
-            active: true
+            active: true,
+            showCutOffText: false
         }
     },
     emits: ["click", "toggle-collapse"],
@@ -235,6 +258,15 @@ export default {
             type: Array,
             required: false
         },
+        /**
+         * image-object for box-body of content-box
+         *
+         * src and altText must be set if image is sed
+         */
+        image: {
+            type: Object,
+            required: false
+        },
         /**
          * String used as content (placed in a paragraph-tag) for box-body
          *
@@ -282,8 +314,8 @@ export default {
             default: true
         },
         /**
-        * allow box to be stretched as high as parent-element
-        */
+         * allow box to be stretched as high as parent-element
+         */
         stretchVertically: {
             type: Boolean,
             default: true
@@ -312,6 +344,11 @@ export default {
 
             this.$emit('toggle-collapse', this.open)
         },
+        // toggle cutofftext (between full and faded text)
+        toggleCutOffText() {
+            this.showCutOffText = !this.showCutOffText
+            this.$emit('toggle-cutofftext', this.showCutOffText)
+        },
         // for boxType === product
         clickOnProduct(product) {
             this.$emit('click', product)
@@ -338,6 +375,7 @@ export default {
 
     &.stretch-horizontally {
         display: flex;
+        width: 100%;
     }
 
     &.stretch-vertically {
@@ -376,7 +414,7 @@ export default {
             }
         }
 
-        > .box-header, > a {
+        > .box-header {
             display: flex;
             align-items: center;
             border-top-left-radius: var(--border-radius);
@@ -395,7 +433,11 @@ export default {
                 margin-bottom: 0;
             }
 
-            > .toggle-icon, .toggle-icon > [class*="icon"] {
+            > .toggle-icon {
+                margin-left: auto;
+            }
+
+            > .toggle-icon, .toggle-icon > [class*="icon-"] {
                 font-size: var(--font-size-small);
             }
         }
@@ -405,6 +447,8 @@ export default {
             padding: 0;
 
             p.cutoff-text {
+                padding: var(--default-padding);
+                margin: 0;
                 overflow: hidden;
                 height: calc(var(--line-of-text-height) * v-bind(cutoffTextLines));
 
@@ -414,14 +458,20 @@ export default {
                     position: absolute;
                     left: 0;
                     bottom: 0;
-                    height: var(--line-of-text-height);
-                    background: linear-gradient(to bottom, transparent 0%, var(--default-background-color) 90%);
+                    height: calc(var(--line-of-text-height) * 3);
+                    background: linear-gradient(to bottom, transparent 0%, var(--default-background-color) 100%);
                 }
-            }
 
-            .padding {
-                padding: var(--default-padding);
-                margin: 0;
+                &.show-text {
+                    height: auto;
+                }
+
+                & + a {
+                    border-top: var(--default-border);
+                    display: block;
+                    padding: var(--default-padding);
+                    margin: 0;
+                }
             }
 
             img {
@@ -564,14 +614,14 @@ export default {
 
             padding: var(--default-padding);
 
-            .cmd-headline  {
+            .cmd-headline {
                 > * {
                     display: block;
                     text-align: center;
                 }
             }
 
-            img, > div:first-child > [class*="icon"] {
+            img, > div:first-child > [class*="icon-"] {
                 display: table;
                 margin: 0 auto var(--default-margin) auto;
                 padding: calc(var(--default-padding) * 3);
@@ -593,7 +643,7 @@ export default {
                 aspect-ratio: 1/1;
             }
 
-            > div:first-child > [class*="icon"] {
+            > div:first-child > [class*="icon-"] {
                 font-size: var(--icon-size);
             }
         }
@@ -640,7 +690,7 @@ export default {
                                 background: var(--primary-color);
                                 color: var(--pure-white);
 
-                                span, span[class*="icon"] {
+                                span, [class*="icon-"] {
                                     color: var(--pure-white);
                                 }
                             }

package/src/components/CmdCompanyLogo.vue

@@ -1,19 +1,30 @@
 <template>
     <div class="cmd-company-logo">
         <router-link v-if="link.type === 'router'" :to="link.path" :title="link.tooltip">
-            <img :src="pathCurrentLogo" :alt="altText"/>
+            <!-- begin CmdImage -->
+            <CmdImage :image="image" />
+            <!-- end CmdImage -->
         </router-link>
         <a v-else :href="link.path" :title="link.tooltip">
-            <img :src="pathCurrentLogo" :alt="altText" />
+            <!-- begin CmdImage -->
+            <CmdImage :image="image" />
+            <!-- end CmdImage -->
         </a>
     </div>
 </template>
 
 <script>
+// import functions
 import {getRoute} from "../utilities.js"
 
+// import components
+import CmdImage from "./CmdImage"
+
 export default {
     name: "CmdCompanyLogo",
+    components: {
+      CmdImage
+    },
     data() {
         return {
             prefersColorScheme: ""
@@ -57,6 +68,12 @@ export default {
                 return this.pathDefaultLogo
             }
             return this.pathDarkmodeLogo
+        },
+        image() {
+            return {
+                src: this.pathCurrentLogo,
+                alt: this.altText
+            }
         }
     },
     created() {

package/src/components/CmdFakeSelect.vue

@@ -60,7 +60,7 @@
 
                     <!-- begin optional icon -->
                     <!-- begin CmdIcon -->
-                    <CmdIcon v-if="optionIcon?.iconClass" :type="optionIcon?.iconType" :class="optionIcon?.iconClass" />
+                    <CmdIcon v-if="optionIcon?.iconClass" :type="optionIcon?.iconType" :iconClass="optionIcon?.iconClass" />
                     <!-- end CmdIcon -->
                     <!-- end optional icon -->
 
@@ -661,7 +661,7 @@ export default {
                 > a {
                     border-color: var(--status-color);
 
-                    > span, span[class*="icon-"] {
+                    > span, [class*="icon-"] {
                         color: var(--status-color);
                     }