comand-component-library 3.3.87 → 4.0.1

package/src/assets/data/address-data.json

@@ -19,7 +19,7 @@
     "location": ""
   },
   {
-    "name": "telephone",
+    "name": "phone",
     "iconClass": "icon-phone",
     "data": "Your phone number",
     "labelText": "Telephone",
@@ -27,7 +27,7 @@
     "href": "0123456789"
   },
   {
-    "name": "mobilephone",
+    "name": "phone",
     "iconClass": "icon-device-smartphone",
     "data": "Your mobile phone number",
     "labelText": "Mobile phone",
@@ -49,7 +49,7 @@
     "href": "mail@provider.de"
   },
   {
-    "name": "website",
+    "name": "url",
     "iconClass": "icon-globe",
     "data": "Your web site",
     "labelText": "Web site",

package/src/assets/data/main-navigation.json

@@ -1,5 +1,7 @@
 {
   "offcanvasPosition": "right",
+  "stretchMainItems": false,
+  "persistOnMobile": false,
   "navigationEntries": [
     {
       "type": "href",

package/src/components/CmdAddressData.vue

@@ -9,119 +9,85 @@
         <template v-else>
             <!-- begin cmd-headline -->
             <CmdHeadline
-                v-if="cmdHeadline?.headlineText || editModeContext"
-                v-bind="cmdHeadline"
+                v-if="cmdHeadline?.headlineText || editModeContext" v-bind="cmdHeadline"
             />
             <!-- end cmd-headline -->
 
             <!-- begin address-data in vCard microformat -->
             <address class="adr">
                 <!-- begin list with labels -->
-                <template v-if="showLabels && !showIconsOnly">
+                <template v-if="showLabels && (showLabelTexts|| showLabelIcons) && !showIconsOnly">
                     <!-- begin default view -->
                     <dl v-if="!editModeContext">
+                        <!-- begin cmd-address-data-item -->
                         <CmdAddressDataItem
                             v-for="(entry, index) in addressData"
-                            :key="index"
-                            :addressEntry="entry"
+                            :key="index" :addressEntry="entry"
+                            :showLabelIcons="showLabelIcons"
+                            :showLabelTexts="showLabelTexts"
                         />
+                        <!-- end cmd-address-data-item -->
                     </dl>
                     <!-- end default view -->
 
                     <!-- begin edit-mode -->
-                    <button v-if="addressData.length === 0" type="button" class="button confirm small"
-                            @click="onAddItem">
-                        <span class="icon-plus"></span>
-                        <span>Add new entry</span>
-                    </button>
-                    <EditComponentWrapper
-                        v-else
-                        v-for="(entry, index) in addressData"
-                        :key="'x' + index"
-                        class="edit-items"
-                        :showComponentName="false"
-                        :allowedComponentTypes="[]"
-                        componentName="CmdAddressDataItem"
-                        :componentProps="entry"
-                        :componentPath="['props', 'addressData', index]"
-                    >
-                        <dl>
-                            <CmdAddressDataItem
-                                :addressEntry="entry"
-                                :showLabelIcons="showLabelIcons"
-                                :showLabelTexts="showLabelTexts"
-                            />
-                        </dl>
-                    </EditComponentWrapper>
+                    <template v-else>
+                        <button v-if="addressData.length === 0" type="button" class="button confirm small" @click="onAddItem">
+                            <span class="icon-plus"></span>
+                            <span>Add new entry</span>
+                        </button>
+                        <EditComponentWrapper
+                            v-for="(entry, index) in addressData"
+                            :key="'x' + index"
+                            class="edit-items"
+                            :showComponentName="false"
+                            :allowedComponentTypes="[]"
+                            componentName="CmdAddressDataItem"
+                            :componentProps="entry"
+                            :componentPath="['props', 'addressData', index]"
+                        >
+                            <dl>
+                                <!-- begin cmd-address-data-item -->
+                                <CmdAddressDataItem
+                                    :addressEntry="entry"
+                                    :showLabelIcons="showLabelIcons"
+                                    :showLabelTexts="showLabelTexts"
+                                />
+                                <!-- end cmd-address-data-item -->
+                            </dl>
+                        </EditComponentWrapper>
+                    </template>
                 </template>
                 <!-- end list with labels -->
 
                 <!-- begin list without labels -->
                 <ul v-else :class="['flex-container', {'vertical': !showIconsOnly}]">
                     <template v-for="(entry, index) in addressData" :key="index">
-                        <template v-if="entry.href || entry.type === 'address' || !showIconsOnly">
-                            <li :class="{'no-flex' : showIconsOnly}">
-                                <!-- begin all entries except address (which has no href) -->
-                                <a v-if="entry.href" :href="getHref(entry)"
-                                   :target="{'_blank' : entry.type === 'url'}"
-                                   :title="entry.tooltip">
+                        <li v-if="entry.href || (entry.name === 'address' && entry.linkGoogleMaps) || !showIconsOnly"
+                            :class="{'no-flex' : showIconsOnly}">
+                            <!-- begin all entries except address (which has no href) -->
+                            <a v-if="entry.href" :href="getHref(entry)" :target="entry.name === 'url' ? '_blank' : null" :title="entry.tooltip">
+                                <template v-if="showIconsOnly">
+                                    <!-- begin CmdIcon -->
+                                    <CmdIcon v-if="entry.iconClass" :iconClass="entry.iconClass" :type="entry.iconType"/>
+                                    <!-- end CmdIcon -->
+                                </template>
+                                <template v-else>{{ entry.href }}</template>
+                            </a>
+                            <span v-else-if="!showIconsOnly" v-html="entry.data"></span>
+                            <!-- end all entries except address -->
+
+                            <!-- begin address -->
+                            <template v-if="entry.name === 'address'">
+                                <!-- begin linked address -->
+                                <a v-if="entry.linkGoogleMaps" :href="locateAddress(entry)" target="google-maps" :title="entry.tooltip">
                                     <template v-if="showIconsOnly">
                                         <!-- begin CmdIcon -->
-                                        <CmdIcon
-                                            v-if="entry.iconClass"
-                                            :iconClass="entry.iconClass"
-                                            :type="entry.iconType"
-                                        />
+                                        <CmdIcon v-if="entry.iconClass" :iconClass="entry.iconClass"
+                                                 :type="entry.iconType"/>
                                         <!-- end CmdIcon -->
                                     </template>
-                                    <template v-else>{{ entry.href }}</template>
-                                </a>
-                                <span v-else-if="!showIconsOnly" v-html="entry.data"></span>
-                                <!-- end all entries except address -->
-
-                                <!-- begin address -->
-                                <template v-if="entry.type === 'address'">
-                                    <!-- begin linked address -->
-                                    <a v-if="entry.linkGoogleMaps" :href="locateAddress(entry)" target="google-maps"
-                                       :title="entry.tooltip">
-                                        <template v-if="showIconsOnly">
-                                            <!-- begin CmdIcon -->
-                                            <CmdIcon
-                                                v-if="entry.iconClass"
-                                                :iconClass="entry.iconClass"
-                                                :type="entry.iconType"
-                                            />
-                                            <!-- end CmdIcon -->
-                                        </template>
-                                        <template v-else>
-                                            <!-- begin street/number -->
-                                            <template v-if="entry.streetNo">
-                                                <span class="street-address">{{ entry.streetNo }}</span><br/>
-                                            </template>
-                                            <!-- end street/number -->
-
-                                            <!-- begin zip/city -->
-                                            <template v-if="entry.zip || entry.city">
-                                                <span class="postal-code">{{ entry.zip }}&nbsp;</span>
-                                                <span class="locality">{{ entry.city }}</span><br/>
-                                            </template>
-                                            <!-- end zip/city -->
-
-                                            <!-- begin miscInfo -->
-                                            <template v-if="entry.miscInfo">
-                                                <span>{{ entry.miscInfo }}</span><br/>
-                                            </template>
-                                            <!-- end miscInfo -->
-
-                                            <!-- begin country -->
-                                            <span v-if="entry.country" class="country-name">{{ entry.country }}</span>
-                                            <!-- end country -->
-                                        </template>
-                                    </a>
-                                    <!-- end linked address -->
-
-                                    <!-- begin unlinked address -->
-                                    <template v-if="!entry.linkGoogleMaps && !showIconsOnly">
+                                    <template v-else>
                                         <!-- begin street/number -->
                                         <template v-if="entry.streetNo">
                                             <span class="street-address">{{ entry.streetNo }}</span><br/>
@@ -145,11 +111,38 @@
                                         <span v-if="entry.country" class="country-name">{{ entry.country }}</span>
                                         <!-- end country -->
                                     </template>
-                                    <!-- end unlinked address -->
+                                </a>
+                                <!-- end linked address -->
+
+                                <!-- begin unlinked address -->
+                                <template v-if="!entry.linkGoogleMaps && !showIconsOnly">
+                                    <!-- begin street/number -->
+                                    <template v-if="entry.streetNo">
+                                        <span class="street-address">{{ entry.streetNo }}</span><br/>
+                                    </template>
+                                    <!-- end street/number -->
+
+                                    <!-- begin zip/city -->
+                                    <template v-if="entry.zip || entry.city">
+                                        <span class="postal-code">{{ entry.zip }}&nbsp;</span>
+                                        <span class="locality">{{ entry.city }}</span><br/>
+                                    </template>
+                                    <!-- end zip/city -->
+
+                                    <!-- begin miscInfo -->
+                                    <template v-if="entry.miscInfo">
+                                        <span>{{ entry.miscInfo }}</span><br/>
+                                    </template>
+                                    <!-- end miscInfo -->
+
+                                    <!-- begin country -->
+                                    <span v-if="entry.country" class="country-name">{{ entry.country }}</span>
+                                    <!-- end country -->
                                 </template>
-                                <!-- end address -->
-                            </li>
-                        </template>
+                                <!-- end unlinked address -->
+                            </template>
+                            <!-- end address -->
+                        </li>
                         <!-- end all entries except address -->
                     </template>
                     <!-- end v-for -->
@@ -251,13 +244,13 @@ export default {
             return "https://www.google.com/maps/place/" + entry.streetNo + ", " + entry.zip + " " + entry.city
         },
         getHref(entry) {
-            if (entry.type === "phone") {
+            if (entry.name === "phone") {
                 return "tel:" + entry.href
             }
-            if (entry.type === "email") {
+            if (entry.name === "email") {
                 return "mailto:" + entry.href
             }
-            if (entry.type === "url") {
+            if (entry.name === "url") {
                 return entry.href
             }
             return null
@@ -279,7 +272,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style>
 /* begin cmd-address-data ---------------------------------------------------------------------------------------- */
 .cmd-address-data {
     dl {
@@ -287,7 +280,7 @@ export default {
 
         dt {
             display: flex;
-            align-items: center;
+            top: 0.2rem;
 
             &.address {
                 align-self: flex-start;
@@ -301,6 +294,7 @@ export default {
 
     ul {
         gap: calc(var(--default-gap) / 2);
+        margin-left: 0;
 
         li {
             margin-left: 0;

package/src/components/CmdAddressDataItem.vue

@@ -2,18 +2,22 @@
     <dt :class="['cmd-address-data-item', {'address': addressEntry.type === 'address'}]">
         <!-- begin CmdIcon -->
         <CmdIcon
-                v-if="addressEntry.iconClass && showLabelIcons"
-                :iconClass="addressEntry.iconClass"
-                :type="addressEntry.iconType"
-                :tooltip="addressEntry.labelText"
+            v-if="addressEntry.iconClass && showLabelIcons"
+            :iconClass="addressEntry.iconClass"
+            :type="addressEntry.iconType"
+            :tooltip="addressEntry.labelText"
         />
         <!-- end CmdIcon -->
+
+        <!-- begin show label-texts -->
         <span v-if="showLabelTexts">{{ addressEntry.labelText }}</span>
+        <!-- end show label-texts -->
     </dt>
     <!-- end labels -->
 
     <!-- begin data (except for address) -->
     <dd v-if="addressEntry.type !== 'address' && (addressEntry.data || addressEntry.href)" :class="vCardClass(addressEntry)">
+        <!-- begin default-view -->
         <template v-if="!editing">
             <a v-if="addressEntry.href"
                :href="getHref(addressEntry)"
@@ -25,28 +29,26 @@
             </a>
             <span v-else v-html="addressEntry.data"></span>
         </template>
+        <!-- end default-view -->
 
         <!-- begin edit-mode -->
         <CmdFormElement
-                v-else
-                element="input"
-                :type="inputType(addressEntry)"
-                class="edit-mode"
-                :show-label="false"
-                :labelText="addressEntry.labelText"
-                :placeholder="addressEntry.labelText"
-                v-model="editableAddressEntry"
+            v-else
+            element="input"
+            :type="inputType(addressEntry)"
+            class="edit-mode"
+            :show-label="false"
+            :labelText="addressEntry.labelText"
+            :placeholder="addressEntry.labelText"
+            v-model="editableAddressEntry"
         />
         <!-- end edit-mode -->
     </dd>
 
     <!-- begin data for address -->
-    <dd v-else-if="addressEntry.type === 'address'">
+    <dd v-else-if="addressEntry.name === 'address'">
         <!-- begin linked address -->
-        <a v-if="linkGoogleMaps && !editing"
-           :href="locateAddress(addressEntry)"
-           target="google-maps"
-           :title="addressEntry.tooltip">
+        <a v-if="linkGoogleMaps && !editing" :href="locateAddress(addressEntry)" target="google-maps" :title="addressEntry.tooltip">
             <!-- begin street/number -->
             <template v-if="addressEntry.streetNo">
                 <span class="street-address">{{ addressEntry.streetNo }}</span><br/>
@@ -103,59 +105,59 @@
             <template v-else>
                 <!-- begin street/number -->
                 <CmdFormElement
-                        element="input"
-                        type="text"
-                        class="edit-mode"
-                        :show-label="false"
-                        :labelText="addressEntry.labelText"
-                        :placeholder="addressEntry.labelText"
-                        v-model="editableAddressEntry.streetNo"
+                    element="input"
+                    type="text"
+                    class="edit-mode"
+                    :show-label="false"
+                    :labelText="addressEntry.labelText"
+                    :placeholder="addressEntry.labelText"
+                    v-model="editableAddressEntry.streetNo"
                 />
                 <!-- end street/number -->
 
                 <!-- begin zip/city -->
                 <div class="input-wrapper">
                     <CmdFormElement
-                            element="input"
-                            type="text"
-                            class="edit-mode"
-                            :show-label="false"
-                            :labelText="addressEntry.labelText"
-                            :placeholder="addressEntry.labelText"
-                            v-model="editableAddressEntry.zip"
+                        element="input"
+                        type="text"
+                        class="edit-mode"
+                        :show-label="false"
+                        :labelText="addressEntry.labelText"
+                        :placeholder="addressEntry.labelText"
+                        v-model="editableAddressEntry.zip"
                     />
                     <CmdFormElement
-                            element="input"
-                            type="text"
-                            class="edit-mode"
-                            :show-label="false"
-                            :labelText="addressEntry.labelText"
-                            :placeholder="addressEntry.labelText"
-                            v-model="editableAddressEntry.city"
-                    />
-                </div>
-                <!-- end zip/city -->
-
-                <!-- begin miscInfo -->
-                <CmdFormElement
                         element="input"
                         type="text"
                         class="edit-mode"
                         :show-label="false"
                         :labelText="addressEntry.labelText"
                         :placeholder="addressEntry.labelText"
-                        v-model="editableAddressEntry.miscInfo"
+                        v-model="editableAddressEntry.city"
+                    />
+                </div>
+                <!-- end zip/city -->
+
+                <!-- begin miscInfo -->
+                <CmdFormElement
+                    element="input"
+                    type="text"
+                    class="edit-mode"
+                    :show-label="false"
+                    :labelText="addressEntry.labelText"
+                    :placeholder="addressEntry.labelText"
+                    v-model="editableAddressEntry.miscInfo"
                 />
                 <!-- end miscInfo -->
 
                 <!-- begin country -->
                 <CmdFormElement
-                        element="select"
-                        class="edit-mode"
-                        :show-label="false"
-                        :labelText="addressEntry.labelText"
-                        :selectOptions="[{text: 'Germany', value: 'de'}, {text: 'United Kingdom', value: 'uk'}]"
-                        v-model="editableAddressEntry.country"
+                    element="select"
+                    class="edit-mode"
+                    :show-label="false"
+                    :labelText="addressEntry.labelText"
+                    :selectOptions="[{text: 'Germany', value: 'de'}, {text: 'United Kingdom', value: 'uk'}]"
+                    v-model="editableAddressEntry.country"
                 />
                 <!-- end country -->
             </template>
@@ -169,7 +171,7 @@
 <!-- end data (except for address) -->
 <script>
 import EditMode from "../mixins/EditMode.vue"
-import {updateHandlerProvider} from "../utils/editmode.js";
+import {updateHandlerProvider} from "../utils/editmode.js"
 
 export default {
     name: "CmdAddressDataItem",
@@ -180,6 +182,9 @@ export default {
         }
     },
     props: {
+        /**
+         * one single address-entry
+         */
         addressEntry: {
             type: Object,
             default: {}
@@ -198,6 +203,9 @@ export default {
             type: Boolean,
             default: false
         },
+        /**
+         * activate if physical address should be linked with GoogleMaps
+         */
         linkGoogleMaps: {
             type: Boolean,
             default: false

package/src/components/CmdBankAccountData.vue

@@ -88,7 +88,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style>
 /* begin cmd-bank-account-data ---------------------------------------------------------------------------------------- */
 .cmd-bank-account-data {
     dd {

package/src/components/CmdBox.vue

@@ -56,8 +56,8 @@
         <!-- end default header with slot -->
 
         <!-- begin box-body -->
-        <div v-show="open" class="box-body" aria-expanded="true" role="article">
-            <div v-if="useSlots?.includes('body')" :class="{'default-padding': useDefaultPadding}">
+        <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}" :style="setMaxBoxBodyHeight">
                 <!-- begin slot 'body' -->
                 <slot name="body">
                     <transition-group :name="toggleTransition">
@@ -79,7 +79,7 @@
             <template v-else>
                 <img v-if="image" :src="image.src" :alt="image.altText"/>
 
-                <div :class="{'default-padding': useDefaultPadding}">
+                <div :class="{'default-padding': useDefaultPadding, 'allow-scroll': allowContentToScroll}">
                     <!-- begin CmdHeadline -->
                     <CmdHeadline
                         v-if="cmdHeadline?.headlineText && repeatHeadlineInBoxBody"
@@ -219,6 +219,22 @@ export default {
             type: String,
             default: "content"
         },
+        /**
+         * set if content (in box-body) should scroll
+         *
+         * (maxBoxBodyHeight must be set)
+         */
+        allowContentToScroll: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * set max-height for body (should only be used it allowContentToScroll-property is active)
+         */
+        maxBoxBodyHeight: {
+          type: String,
+          default: "10rem"
+        },
         /**
          * activate if box should be collapsible
          */
@@ -261,12 +277,19 @@ export default {
         /**
          * use transition to expand and collapse box-body
          *
-         * boyType must be 'content' and 'collapsible' must be activated
+         * 'boyType-property' must be set to 'content' and 'collapsible-property' must be activated
          */
         useTransition: {
             type: Boolean,
             default: true
         },
+        /**
+         * custom class placed on box-body-container
+         */
+        boxBodyClass: {
+            type: String,
+            required: false
+        },
         /**
          * set default profile-icon (will eb shown if no user-image exists)
          */
@@ -383,6 +406,12 @@ export default {
         }
     },
     computed: {
+        setMaxBoxBodyHeight() {
+            if (this.allowContentToScroll && this.maxBoxBodyHeight) {
+                return this.maxBoxBodyHeight
+            }
+            return null
+        },
         toggleTransition() {
             if (this.useTransition) {
                 return "fade"
@@ -419,7 +448,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style>
 /* begin cmd-box ---------------------------------------------------------------------------------------- */
 .cmd-box {
     display: inline-flex;
@@ -436,28 +465,34 @@ export default {
         height: 100%;
     }
 
-    > .cmd-headline {
+    .box-header .cmd-headline {
         margin-bottom: 0;
     }
 
-    // collapsible box only
+    /* collapsible box only */
     &.collapsible {
         a.box-header {
             justify-content: space-between;
-            background: var(--primary-color);
-            border: var(--primary-border);
+            background: var(--hyperlink-color);
 
             &:hover, &:active, &:focus {
                 background: var(--pure-white);
 
                 * {
-                    color: var(--primary-color);
+                    color: var(--hyperlink-color);
                 }
             }
         }
     }
 
-    // boyType === 'content'
+    .box-body {
+        .allow-scroll {
+            overflow-y: auto;
+            /*max-height: '${this.maxBoxBodyHeight}'*/
+        }
+    }
+
+    /* boyType === 'content' */
     &.content {
         > * {
             *:last-child {
@@ -501,6 +536,7 @@ export default {
 
         .box-body {
             flex-grow: 1;
+            border-top: var(--default-border);
 
             p.cutoff-text {
                 padding: var(--default-padding);
@@ -572,7 +608,7 @@ export default {
         }
     }
 
-    // boyType === 'product' and boxType === 'user'
+    /* boyType === 'product' and boxType === 'user' */
     &.product, &.user {
         > div {
             > .cmd-custom-headline {
@@ -582,7 +618,7 @@ export default {
         }
     }
 
-    // boyType === 'product'
+    /* boyType === 'product' */
     &.product {
         text-decoration: none;
         overflow: hidden;
@@ -664,7 +700,7 @@ export default {
         }
     }
 
-    // boxType === 'user'
+    /* boxType === 'user' */
     &.user {
         > .box-header {
             --icon-size: 6rem;