comand-component-library 3.3.10 → 3.3.12

package/src/components/CmdAddressData.vue

@@ -8,7 +8,7 @@
         <address class="adr">
             <!-- begin list with labels -->
             <dl v-if="showLabels">
-                <!-- begin company -->
+                <!-- begin company (name) -->
                 <dt v-if="addressData.company?.value">
                     <!-- begin CmdIcon -->
                     <CmdIcon
@@ -21,8 +21,8 @@
 
                     <span v-if="showLabelTexts">{{ getMessage('cmdaddressdata.labeltext.company')}}</span>
                 </dt>
-                <dd  v-if="addressData.company?.value" class="org">{{ addressData.company.value }}</dd>
-                <!-- end company -->
+                <dd v-if="addressData.company?.value" class="org">{{ addressData.company.value }}</dd>
+                <!-- end company (name) -->
 
                 <!-- begin address -->
                 <template v-if="addressData.address && addressData.address !== undefined">
@@ -39,20 +39,59 @@
                         <span v-if="showLabelTexts">{{ getMessage('cmdaddressdata.labeltext.address')}}</span>
                     </dt>
                     <dd v-if="addressData.address">
+                        <!-- begin linked address -->
                         <a v-if="linkGoogleMaps" :href="locateAddress" target="google-maps" :title="getMessage('cmdaddressdata.title.open_address_on_google_maps')">
-                            <span v-if="addressData.address.streetNo" class="street-address">{{ addressData.address.streetNo }}</span><br/>
-                            <span v-if="addressData.address.zip" class="postal-code">{{ addressData.address.zip }}&nbsp;</span>
-                            <span v-if="addressData.address.city" class="locality">{{ addressData.address.city }}</span><br/>
-                            <span v-if="addressData.address.miscInfo">{{ addressData.address.miscInfo }}</span><br/>
+                            <!-- begin street/number -->
+                            <template v-if="addressData.address.streetNo">
+                                <span class="street-address">{{ addressData.address.streetNo }}</span><br/>
+                            </template>
+                            <!-- end street/number -->
+
+                            <!-- begin zip/city -->
+                            <span v-if="addressData.address.zip" class="postal-code">{{ addressData.address.zip }}</span>
+                            <template v-if="addressData.address.city">
+                                <span class="locality">{{ addressData.address.city }}</span><br/>
+                            </template>
+                            <!-- end zip/city -->
+
+                            <!-- begin miscInfo -->
+                            <template v-if="addressData.address.miscInfo">
+                                <span>{{ addressData.address.miscInfo }}</span><br/>
+                            </template>
+                            <!-- end miscInfo -->
+
+                            <!-- begin country -->
                             <span v-if="addressData.address.country" class="country-name">{{ addressData.address.country }}</span>
+                            <!-- end country -->
                         </a>
+                        <!-- end linked address -->
+
+                        <!-- begin unlinked address -->
                         <template v-else>
-                            <span v-if="addressData.address.streetNo" class="street-address">{{addressData.address.streetNo }}</span><br/>
-                            <span v-if="addressData.address.zip" class="postal-code">{{ addressData.address.zip }}&nbsp;</span>
-                            <span v-if="addressData.address.city" class="locality">{{ addressData.address.city }}</span><br/>
-                            <span v-if="addressData.address.miscInfo">{{ addressData.address.miscInfo }}</span><br/>
+                            <!-- begin street/number -->
+                            <template v-if="addressData.address.streetNo">
+                                <span class="street-address">{{addressData.address.streetNo }}</span><br/>
+                            </template>
+                            <!-- end street/number -->
+
+                            <!-- begin zip/city -->
+                            <span v-if="addressData.address.zip" class="postal-code">{{ addressData.address.zip }}</span>
+                            <template v-if="addressData.address.city">
+                                <span class="locality">{{ addressData.address.city }}</span><br/>
+                            </template>
+                            <!-- end zip/city -->
+
+                            <!-- begin miscInfo -->
+                            <template v-if="addressData.address.miscInfo">
+                                <span>{{ addressData.address.miscInfo }}</span><br/>
+                            </template>
+                            <!-- end miscInfo -->
+
+                            <!-- begin country -->
                             <span v-if="addressData.address.country" class="country-name">{{ addressData.address.country }}</span>
+                            <!-- end country -->
                         </template>
+                        <!-- end unlinked address -->
                     </dd>
                 </template>
                 <!-- end address -->
@@ -165,24 +204,65 @@
 
             <!-- begin list without labels -->
             <ul v-else class="flex-container">
+                <!-- begin company (name) -->
                 <li v-if="addressData.company">
                     <span class="org">{{ addressData.company.value }}</span>
                 </li>
+                <!-- end company (name) -->
                 <li>
+                    <!-- begin linked address -->
                     <a v-if="linkGoogleMaps" :href="locateAddress" target="google-maps" :title="getMessage('cmdaddressdata.title.open_address_on_google_maps')">
-                        <span v-if="addressData.address.streetNo" class="street-address">{{ addressData.address.streetNo }}</span><br/>
-                        <span v-if="addressData.address.zip" class="postal-code">{{ addressData.address.zip }}&nbsp;</span>
-                        <span v-if="addressData.address.city" class="locality">{{ addressData.address.city }}</span><br/>
-                        <span v-if="addressData.address.miscInfo">{{ addressData.address.miscInfo }}</span><br/>
+                        <!-- begin street/number -->
+                        <template v-if="addressData.address.streetNo">
+                            <span  class="street-address">{{ addressData.address.streetNo }}</span><br/>
+                        </template>
+                        <!-- end street/number -->
+
+                        <!-- begin zip/city -->
+                        <template v-if="addressData.address.zip || addressData.address.city">
+                            <span class="postal-code">{{ addressData.address.zip }}</span>
+                            <span class="locality">{{ addressData.address.city }}</span><br/>
+                        </template>
+                        <!-- end zip/city -->
+
+                        <!-- begin miscInfo -->
+                        <template v-if="addressData.address.miscInfo">
+                            <span>{{ addressData.address.miscInfo }}</span><br/>
+                        </template>
+                        <!-- end miscInfo -->
+
+                        <!-- begin country -->
                         <span v-if="addressData.address.country" class="country-name">{{ addressData.address.country }}</span>
+                        <!-- end country -->
                     </a>
+                    <!-- end linked address -->
+
+                    <!-- begin unlinked address -->
                     <template v-else>
-                        <span  v-if="addressData.address.streetNo" class="street-address">{{ addressData.address.streetNo }}</span><br/>
-                        <span v-if="addressData.address.zip" class="postal-code">{{ addressData.address.zip }}&nbsp;</span>
-                        <span v-if="addressData.address.city" class="locality">{{ addressData.address.city }}</span><br/>
-                        <span v-if="addressData.address.miscInfo">{{ addressData.address.miscInfo }}</span><br/>
+                        <!-- begin street/number -->
+                        <template v-if="addressData.address.streetNo">
+                            <span class="street-address">{{ addressData.address.streetNo }}</span><br/>
+                        </template>
+                        <!-- end street/number -->
+
+                        <!-- begin zip/city -->
+                        <template v-if="addressData.address.zip || addressData.address.city">
+                            <span class="postal-code">{{ addressData.address.zip }}</span>
+                            <span class="locality">{{ addressData.address.city }}</span><br/>
+                        </template>
+                        <!-- end zip/ctiy -->
+
+                        <!-- begin miscInfo -->
+                        <template v-if="addressData.address.miscInfo">
+                            <span>{{ addressData.address.miscInfo }}</span><br/>
+                        </template>
+                        <!-- end miscInfo -->
+
+                        <!-- begin country -->
                         <span v-if="addressData.address.country" class="country-name">{{ addressData.address.country }}</span>
+                        <!-- end country -->
                     </template>
+                    <!-- end unlinked address -->
                 </li>
                 <li v-if="addressData.telephone?.value">
                     <a :href="'tel:' + addressData.telephone.value" :title="getMessage('cmdaddressdata.title.call_number')" class="tel">{{ addressData.telephone.value }}</a>
@@ -211,17 +291,9 @@
 import I18n from "../mixins/I18n"
 import DefaultMessageProperties from "../mixins/CmdAddressData/DefaultMessageProperties"
 
-// import components
-import CmdHeadline from "./CmdHeadline"
-import CmdIcon from "./CmdIcon"
-
 export default {
     name: "CmdAddressData",
     mixins: [I18n, DefaultMessageProperties],
-    components: {
-        CmdHeadline,
-        CmdIcon
-    },
     props: {
         /**
          * show a label-icon (if exists)

package/src/components/CmdBackToTopButton.vue

@@ -11,14 +11,9 @@
 </template>
 
 <script>
-// import components
-import CmdIcon from "./CmdIcon"
 
 export default {
     name: "CmdBackToTopButton",
-    components: {
-        CmdIcon
-    },
     data() {
         return {
             windowInnerHeight: window.innerHeight,

package/src/components/CmdBankAccountData.vue

@@ -28,16 +28,8 @@
 </template>
 
 <script>
-// import components
-import CmdHeadline from "./CmdHeadline"
-import CmdIcon from "./CmdIcon"
-
 export default {
     name: "CmdBankAccountData",
-    components: {
-        CmdHeadline,
-        CmdIcon
-    },
     props: {
         /**
          * bank account data

package/src/components/CmdBox.vue

@@ -3,9 +3,13 @@
     <div v-if="boxType === 'content'"
          :class="[
              'cmd-box box content',
-             {open : open, collapsible: collapsible,
-             'stretch-vertically': stretchVertically && !collapsible,
-             'stretch-horizontally': stretchHorizontally}]"
+             {
+                open : open, collapsible: collapsible,
+                'stretch-vertically': stretchVertically && !collapsible,
+                'stretch-horizontally': stretchHorizontally,
+                'row-view': isRowView
+             }
+             ]"
     >
         <!-- begin collapsible header with slot -->
         <a v-if="collapsible"
@@ -123,22 +127,36 @@
     <!-- end boxType 'product' -->
 
     <!-- begin boxType 'user' -->
-    <div v-else-if="boxType === 'user' && user" :class="['cmd-box box user', {'stretch-vertically': stretchVertically,'stretch-horizontally': stretchHorizontally}]">
+    <div v-else-if="boxType === 'user' && user"
+         :class="[
+             'cmd-box box user',
+              profileType,
+             {
+                 'stretch-vertically': stretchVertically,
+                'stretch-horizontally': stretchHorizontally
+             }
+         ]">
         <div class="box-header flex-container vertical">
             <figure v-if="user.image">
                 <img :src="user.image.src" :alt="user.image.alt"/>
-                <figcaption>{{ user.name }}</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>{{ user.name }}</p>
+                <p v-if="!rowView">{{ user.name }}</p>
             </div>
         </div>
         <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">
+            <li v-for="(tag, index) in user.tags" :key="index">
+                {{tag}}
+            </li>
+        </ul>
         <div v-if="user.links" class="box-footer">
             <CmdListOfLinks :links="user.links" orientation="horizontal" :useGap="false"/>
         </div>
@@ -152,36 +170,36 @@ import I18n from "../mixins/I18n"
 import DefaultMessageProperties from "../mixins/CmdBox/DefaultMessageProperties"
 import GlobalCurrency from "../mixins/GlobalCurrency"
 
-// import components
-import CmdHeadline from "./CmdHeadline"
-import CmdIcon from "./CmdIcon"
-import CmdListOfLinks from "./CmdListOfLinks"
-
 export default {
     name: "CmdBox",
-    components: {
-        CmdHeadline,
-        CmdIcon,
-        CmdListOfLinks,
-    },
     mixins: [
         I18n,
         DefaultMessageProperties,
         GlobalCurrency
     ],
+    emits: ["click", "toggle-collapse"],
     data() {
         return {
             open: this.collapsible ? this.collapsingBoxesOpen : true,
             active: true,
-            showCutOffText: false
+            showCutOffText: false,
+            isRowView: false
         }
     },
-    emits: ["click", "toggle-collapse"],
     props: {
         collapsingBoxesOpen: {
             type: Boolean,
             required: false
         },
+        /**
+         * arranges box-content in a row
+         *
+         * @affectsStyling: true
+         */
+        rowView: {
+            type: Boolean,
+            default: false
+        },
         /**
          * set boyType to show different types of boxes/contents
          *
@@ -249,6 +267,17 @@ export default {
             type: Object,
             required: false
         },
+        /**
+         * profile types for user-boxes
+         *
+         * @required: only available for boxtype===user
+         *
+         * @allowedValues: 'business', 'influencer', 'dating'
+         */
+        profileType: {
+            type: String,
+            default: 'business'
+        },
         /**
          * activated if all content (incl. headline) is given by slot
          *
@@ -360,6 +389,9 @@ export default {
             if (this.collapsible) {
                 this.open = this.collapsingBoxesOpen
             }
+        },
+        isRowView() {
+            this.isRowView = this.rowView
         }
     }
 }
@@ -705,6 +737,33 @@ export default {
                 }
             }
         }
+
+        &.row-view {
+            [class*="icon"] {
+                --icon-size: 3rem;
+            }
+
+            .box-header > div:first-child > [class*="icon-"] {
+                padding: calc(var(--default-padding) * 1.5);
+            }
+
+            .box-body p {
+                text-align: left;
+            }
+
+            .box-footer {
+                border: 0;
+
+                .cmd-list-of-links {
+                    background: none;
+
+                    ul, ul * {
+                        border: 0;
+                        background: inherit;
+                    }
+                }
+            }
+        }
     }
 }
 

package/src/components/CmdBoxWrapper.vue

@@ -18,26 +18,18 @@
                 </a>
             </div>
         </div>
-        <div :class="[useFlexbox ? 'flex-container' : 'grid-container-create-columns', {'one-box-per-row': oneBoxPerRow, 'stretch-boxes-vertically': stretchBoxesVertically}]">
-            <slot :collapsingBoxesOpen="collapsingBoxesOpen" :boxToggled="boxToggled" :currentOpenBox="currentOpenBox"></slot>
+        <div :class="[useFlexbox ? 'flex-container' : 'grid-container-create-columns', {'row-view': rowView, 'stretch-boxes-vertically': stretchBoxesVertically}]">
+            <slot :collapsingBoxesOpen="collapsingBoxesOpen" :boxToggled="boxToggled" :currentOpenBox="currentOpenBox" :rowView="rowView"></slot>
         </div>
     </div>
 </template>
 
 <script>
-// import components
-import CmdHeadline from "./CmdHeadline"
-import CmdIcon from "./CmdIcon"
-
 export default {
     name: "CmdBoxWrapper",
-    components: {
-        CmdHeadline,
-        CmdIcon
-    },
     data() {
         return {
-            oneBoxPerRow: this.useRowViewAsDefault,
+            rowView: this.useRowViewAsDefault,
             collapsingBoxesOpen: true,
             currentOpenBox: 0
         }
@@ -227,28 +219,42 @@ export default {
                 margin: 0;
         }
 
-        &.one-box-per-row {
-            flex-direction: column;
+        &.stretch-boxes-vertically {
+            .stretch-vertically {
+                align-self: stretch;
+                height: auto; /* must be set to auto if inner boxes have als stretchVertically-property activated */
+            }
+        }
+    }
+
+    .row-view {
+        flex-direction: column;
 
-            p.cutoff-text {
-                height: auto;
+        p.cutoff-text {
+            height: auto;
 
-                &.fade-last-line::after {
-                    background: none;
-                }
+            &.fade-last-line::after {
+                background: none;
             }
         }
 
-        &.stretch-boxes-vertically {
-            .stretch-vertically {
-                align-self: stretch;
-                height: auto; /* must be set to auto if inner boxes have als stretchVertically-property activated */
+        .cmd-box.user {
+            flex-direction: row;
+            padding: var(--default-padding);
+            align-items: center;
+
+            .box-footer {
+                margin-top: 0;
             }
         }
     }
 
     > .grid-container-create-columns {
         grid-template-columns: repeat(v-bind(boxesPerRowLarge), minmax(0, 1fr));
+
+        &.row-view {
+            grid-template-columns: repeat(1, minmax(0, 1fr));
+        }
     }
 
     @media only screen and (max-width: $medium-max-width) {

package/src/components/CmdBreadcrumbs.vue

@@ -35,14 +35,8 @@
 // import functions
 import {getRoute} from "../utilities.js"
 
-// import components
-import CmdIcon from "./CmdIcon"
-
 export default {
     name: "CmdBreadcrumbs",
-    components: {
-        CmdIcon
-    },
     props: {
         /**
          * label in front/left of breadcrumbs

package/src/components/CmdCompanyLogo.vue

@@ -17,14 +17,8 @@
 // import functions
 import {getRoute} from "../utilities.js"
 
-// import components
-import CmdImage from "./CmdImage"
-
 export default {
     name: "CmdCompanyLogo",
-    components: {
-      CmdImage
-    },
     data() {
         return {
             prefersColorScheme: ""

package/src/components/CmdCookieDisclaimer.vue

@@ -134,19 +134,9 @@
 import I18n from "../mixins/I18n"
 import DefaultMessageProperties from "../mixins/CmdCookieDisclaimer/DefaultMessageProperties"
 
-// import components
-import CmdBox from "./CmdBox"
-import CmdHeadline from "./CmdHeadline"
-import CmdFormElement from "./CmdFormElement"
-
 export default {
     name: "CmdCookieDisclaimer",
     mixins: [I18n, DefaultMessageProperties],
-    components: {
-        CmdBox,
-        CmdHeadline,
-        CmdFormElement
-    },
     data() {
         return {
             showCookieDisclaimer: true,

package/src/components/CmdFakeSelect.vue

@@ -168,10 +168,6 @@ import FieldValidation from "../mixins/FieldValidation"
 import Identifier from "../mixins/Identifier"
 import Tooltip from "../mixins/Tooltip"
 
-// import components
-import CmdIcon from "./CmdIcon"
-import CmdTooltipForInputElements from "./CmdTooltipForInputElements"
-
 export default {
     name: 'CmdFakeSelect',
     inheritAttrs: false,
@@ -182,10 +178,6 @@ export default {
         Identifier,
         Tooltip
     ],
-    components: {
-        CmdIcon,
-        CmdTooltipForInputElements
-    },
     data() {
         return {
             showOptions: false,
@@ -266,7 +258,7 @@ export default {
         /**
          * label-text for fake-select
          *
-         *  @requiredForAccessibility: true
+         * @requiredForAccessibility: true
          */
         labelText: {
             type: String,