comand-component-library 4.0.28 → 4.0.30

package/src/componentSettingsDataAndControls.vue

@@ -339,6 +339,30 @@ data() {
                 }
             ]
         },
+        cmdLinkSettingsData: {
+
+            path: "#",
+            target: "",
+            text: "Linktext",
+            styleAsButton: false,
+            primaryButton: false
+        },
+        cmdLinkSettingsControls: {
+            linkType: [
+                {
+                    text: "href (default)",
+                    value: "href"
+                },
+                {
+                    text: "router",
+                    value: "router"
+                },
+                {
+                    text: "button",
+                    value: "button"
+                }
+            ]
+        },
         cmdListOfLinksSettingsData: {
             useGap: true,
             styleAsBox: false,
@@ -361,8 +385,7 @@ data() {
                 {
                     text: "Right",
                     value: "right"
-                },
-
+                }
             ],
             orientation: [
                 {

package/src/components/CmdAddressData.vue

@@ -310,6 +310,10 @@ export default {
             }
         }
 
+        .postal-code {
+            margin-right: calc(var(--default-margin) / 2);
+        }
+
         .order-city-zip, .order-zip-city {
             display: inline-flex;
             gap: .5rem;
@@ -317,6 +321,11 @@ export default {
 
         .order-city-zip {
             flex-direction: row-reverse;
+
+            .postal-code {
+                margin-right: 0;
+                margin-left: calc(var(--default-margin) / 2);
+            }
         }
     }
 

package/src/components/CmdAddressDataItem.vue

@@ -57,7 +57,7 @@
 
             <!-- begin zip/city (state) -->
             <span v-if="addressEntry.zip || addressEntry.city" :class="showCityBeforeZip ? 'city-zip' : 'zip-city'">
-                <span v-if="addressEntry.zip" class="postal-code">{{ addressEntry.zip }}&nbsp;</span>
+                <span v-if="addressEntry.zip" class="postal-code">{{ addressEntry.zip }}</span>
                 <span v-if="addressEntry.city" class="locality">{{ addressEntry.city }}<template v-if="addressEntry.state"> {{addressEntry.state}}</template></span>
             </span><br/>
             <!-- end zip/city (state) -->
@@ -305,6 +305,7 @@ export default {
                         streetNo: this.addressEntry.streetNo,
                         zip: this.addressEntry.zip,
                         city: this.addressEntry.city,
+                        state: this.addressEntry.state,
                         miscInfo: this.addressEntry.miscInfo,
                         country: this.addressEntry.country
                     }

package/src/components/CmdBankAccountData.vue

@@ -1,29 +1,37 @@
 <template>
     <div class="cmd-bank-account-data">
-        <!-- begin CmdHeadline -->
-        <CmdHeadline v-if="cmdHeadline" v-bind="cmdHeadline" />
-        <!-- end CmdHeadline -->
+        <!-- begin slot -->
+        <template v-if="useSlot">
+            <slot></slot>
+        </template>
+        <!-- end slot -->
 
-        <!-- begin account data -->
-        <dl>
-            <template v-for="(entry, index) in accountData" :key="index">
-                <dt>{{ entry.text }}</dt>
-                <dd v-if="allowCopyByClick && entry.allowCopy">
-                    <span>{{ entry.value }}</span>
-                    <a href="#" @click.prevent="copyToClipboard(entry.value)" :title="iconCopy.tooltip">
-                        <!-- begin CmdIcon -->
-                        <CmdIcon :iconClass="iconCopy.iconClass" :type="iconCopy.iconType" />
-                        <!-- end CmdIcon -->
-                    </a>
-                </dd>
-                <dd v-else :key="index">{{ entry.value }}</dd>
-            </template>
-        </dl>
-        <!-- end account data -->
+        <template v-else>
+            <!-- begin CmdHeadline -->
+            <CmdHeadline v-if="cmdHeadline" v-bind="cmdHeadline"/>
+            <!-- end CmdHeadline -->
 
-        <!-- begin additional information -->
-        <p v-if="additionalInformation">{{ additionalInformation }}</p>
-        <!-- end additional information -->
+            <!-- begin account data -->
+            <dl>
+                <template v-for="(entry, index) in accountData" :key="index">
+                    <dt>{{ entry.text }}</dt>
+                    <dd v-if="allowCopyByClick && entry.allowCopy">
+                        <span>{{ entry.value }}</span>
+                        <a href="#" @click.prevent="copyToClipboard(entry.value)" :title="iconCopy.tooltip">
+                            <!-- begin CmdIcon -->
+                            <CmdIcon :iconClass="iconCopy.iconClass" :type="iconCopy.iconType"/>
+                            <!-- end CmdIcon -->
+                        </a>
+                    </dd>
+                    <dd v-else :key="index">{{ entry.value }}</dd>
+                </template>
+            </dl>
+            <!-- end account data -->
+
+            <!-- begin additional information -->
+            <p v-if="additionalInformation">{{ additionalInformation }}</p>
+            <!-- end additional information -->
+        </template>
     </div>
 </template>
 
@@ -31,6 +39,13 @@
 export default {
     name: "CmdBankAccountData",
     props: {
+        /**
+         * activate if you want to use slot instead for given structure
+         */
+        useSlot: {
+            type: Boolean,
+            default: false
+        },
         /**
          * bank account data
          *
@@ -102,5 +117,6 @@ export default {
         }
     }
 }
+
 /* end cmd-bank-account-data ---------------------------------------------------------------------------------------- */
 </style>

package/src/components/CmdBox.vue

@@ -58,6 +58,7 @@
 
         <!-- begin box-body -->
         <div v-show="open" :class="['box-body', boxBodyClass]" aria-expanded="true" role="article">
+            <!-- begin content given slot -->
             <div v-if="useSlots?.includes('body')"
                  class="inner-box-body-wrapper"
                  :class="{'default-padding': useDefaultPadding, 'allow-scroll': allowContentToScroll}"
@@ -67,12 +68,14 @@
                 <!-- begin slot 'body' -->
                 <slot name="body">
                     <transition-group :name="toggleTransition">
-                        <p :class="{
-                           'cutoff-text': cutoffTextLines > 0,
-                           'fade-last-line': fadeLastLine && !showCutOffText,
-                           'show-text' : showCutOffText
-                       }">
-                            {{ textBody }}
+                        <p
+                            :class="{
+                               'cutoff-text': cutoffTextLines > 0,
+                               'fade-last-line': fadeLastLine && !showCutOffText,
+                               'show-text' : showCutOffText
+                            }"
+                            v-html='textBody'
+                        >
                         </p>
                         <a v-if="cutoffTextLines > 0" href="#" @click.prevent="toggleCutOffText">
                             {{
@@ -83,11 +86,17 @@
                 </slot>
                 <!-- end slot 'body' -->
             </div>
+            <!-- end content given slot -->
 
-            <template v-else>
+            <!-- begin content given by properties -->
+            <div v-else
+                 class="inner-box-body-wrapper"
+                 :class="{'allow-scroll': allowContentToScroll}"
+            >
                 <img v-if="image" :src="image.src" :alt="image.altText"/>
 
-                <div v-else :class="{'default-padding': useDefaultPadding, 'allow-scroll': allowContentToScroll}">
+                <div v-if="textBody"
+                     :class="{'default-padding': useDefaultPadding, 'allow-scroll': allowContentToScroll}">
                     <!-- begin CmdHeadline -->
                     <CmdHeadline
                         v-if="cmdHeadline?.headlineText && repeatHeadlineInBoxBody"
@@ -95,9 +104,18 @@
                     />
                     <!-- end CmdHeadline -->
 
-                    <p v-if="textBody">{{ textBody }}</p>
+                    <!-- begin textBody -->
+                    <p v-if="textBody" v-html="textBody"></p>
+                    <!-- end textBody -->
                 </div>
-            </template>
+
+                <!-- begin additionalLink in box-footer -->
+                <div v-if="cmdLink?.linkType" class="box-footer">
+                    <CmdLink v-bind="cmdLink" />
+                </div>
+                <!-- end additionalLink in box-footer  -->
+            </div>
+            <!-- end content given by properties -->
         </div>
         <!-- end box-body -->
 
@@ -159,18 +177,20 @@
         <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 v-if="!rowView" class="user-name">{{ user.name }}<span v-if="user.age" class="user-age"> ({{
+                        user.age
+                    }})</span></figcaption>
             </figure>
             <div v-else>
                 <span :class="defaultProfileIconClass" :title="user.name"></span>
-                <p v-if="!rowView">{{ user.name }}</p>
+                <p v-if="!rowView" class="user-name">{{ 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="rowView" class="user-name">{{ 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>
@@ -178,7 +198,7 @@
         <!-- end box-body -->
 
         <!-- begin user-tags -->
-        <ul  v-if="user.tags && user.tags.length" class="tags">
+        <ul v-if="user.tags && user.tags.length" class="tags">
             <li v-for="(tag, index) in user.tags" :key="index">
                 {{ tag }}
             </li>
@@ -437,6 +457,13 @@ export default {
         cmdHeadline: {
             type: Object,
             required: false
+        },
+        /**
+         * properties for CmdLink-component to set additional link at bottom of box
+         */
+        cmdLink: {
+            type: Object,
+            default: {}
         }
     },
     /*
@@ -474,11 +501,11 @@ export default {
         // 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 (this.open) {
+                    const firstFormElement = this.$refs.cmdBox.querySelector(":is(input, select, textarea):first-of-type")
 
-                    if(firstFormElement) {
-                       firstFormElement.focus()
+                    if (firstFormElement) {
+                        firstFormElement.focus()
                     }
                 }
             })
@@ -542,7 +569,7 @@ export default {
             overflow-y: auto;
 
             & * {
-              flex-shrink: 0;
+                flex-shrink: 0;
             }
         }
     }
@@ -767,6 +794,15 @@ export default {
 
     /* boxType === 'user' */
     &.user {
+        .user-name {
+            color: var(--color-scheme-text-color);
+            font-size: 2rem;
+        }
+
+        .user-age {
+            font-size: var(--default-font-size);
+        }
+
         > .box-header {
             --default-icon-size: 6rem;
             --box-header-text-color: var(--primary-color);
@@ -779,7 +815,7 @@ export default {
 
             img, > div:first-child > [class*="icon-"] {
                 display: table;
-                margin: 0 auto var(--default-margin) auto;
+                margin: 0 auto var(--default-margin) auto !important;
                 padding: calc(var(--default-padding) * 3);
                 border-radius: var(--full-circle);
                 background: var(--box-header-background);
@@ -885,14 +921,6 @@ export default {
         }
 
         &.row-view {
-            [class*="icon"] {
-                --default-icon-size: 3rem;
-            }
-
-            .box-header > div:first-child > [class*="icon-"] {
-                padding: calc(var(--default-padding) * 1.5);
-            }
-
             .box-body p {
                 text-align: left;
             }
@@ -920,4 +948,6 @@ export default {
 }
 
 /* end cmd-box ------------------------------------------------------------------------------------------ */
-</style>
+</style>
+<script setup>
+</script>

package/src/components/CmdContainer.vue

@@ -1,6 +1,8 @@
 <template>
     <div class="cmd-container">
+        <div v-html="contentAboveSlot"></div>
         <slot></slot>
+        <div v-html="contentBelowSlot"></div>
     </div>
 </template>
 
@@ -9,6 +11,22 @@ import EditMode from "../mixins/EditMode.vue"
 export default {
     name: "CmdContainer",
     mixins: [EditMode],
+    props: {
+        /**
+         * define html-content to display above slot-content
+         */
+        contentAboveSlot: {
+            type: String,
+            required: false
+        },
+        /**
+         * define html-content to display below slot-content
+         */
+        contentBelowSlot: {
+            type: String,
+            required: false
+        }
+    },
     methods: {
         addHandlerProvider() {
             return ""