comand-component-library 3.1.45 → 3.1.48

package/src/components/CmdAddressData.vue

@@ -1,91 +1,153 @@
 <template>
     <div class="cmd-address-data vcard">
-        <h4 v-if="headline">{{ headline }}</h4>
+        <!-- begin CmdCustomHeadline -->
+        <CmdCustomHeadline v-if="cmdCustomHeadline" v-bind="cmdCustomHeadline" />
+        <!-- end CmdCustomHeadline -->
+
+        <!-- begin address-data in vCard microformat -->
         <address class="adr">
+            <!-- begin list with labels -->
             <dl v-if="showLabels">
-                <dt v-if="addressData.company">Company:</dt>
-                <dd class="org">{{ addressData.company }}</dd>
-                <dt v-if="addressData.address">Address:</dt>
+                <!-- begin company -->
+                <dt v-if="addressData.company?.value">
+                    <span v-if="addressData.company.iconClass && showLabelIcons" :class="addressData.company.iconClass" :title="getMessage('cmdaddressdata.labeltext.company')"></span>
+                    <span v-if="showLabelTexts">{{ getMessage('cmdaddressdata.labeltext.company')}}</span>
+                </dt>
+                <dd  v-if="addressData.company?.value" class="org">{{ addressData.company.value }}</dd>
+                <!-- end company -->
+
+                <!-- begin address -->
+                <dt v-if="addressData.address && addressData.address.length">
+                    <span v-if="addressData.address.iconClass && showLabelIcons" :class="addressData.address.iconClass" :title="getMessage('cmdaddressdata.labeltext.address')"></span>
+                    <span v-if="showLabelTexts">{{ getMessage('cmdaddressdata.labeltext.address')}}</span>
+                </dt>
                 <dd v-if="addressData.address">
-                    <a :href="locateAddress" target="_blank" v-if="linkGoogleMaps"
-                       title="Open address on GoogleMaps™ in new tab">
-            <span class="street-address" v-if="addressData.address.streetNo">{{
-                    addressData.address.streetNo
-                }}</span><br/>
-                        <span class="postal-code" v-if="addressData.address.zip">{{ addressData.address.zip }}</span>&nbsp;<span
-                        class="locality" v-if="addressData.address.city">{{ addressData.address.city }}</span>
-                        <span class="country-name" v-if="addressData.country">{{ addressData.country }}</span>
+                    <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>
+                        <span  v-if="addressData.country" class="country-name">{{ addressData.country }}</span>
                     </a>
                     <template v-else>
-            <span class="street-address" v-if="addressData.address.streetNo">{{
-                    addressData.address.streetNo
-                }}</span><br/>
-                        <span class="postal-code" v-if="addressData.address.zip">{{ addressData.address.zip }}</span>&nbsp;<span
-                        class="locality" v-if="addressData.address.city">{{ addressData.address.city }}</span>
-                        <span class="country-name" v-if="addressData.country">{{ addressData.country }}</span>
+                        <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 }}</span>
+                        <span v-if="addressData.address.city" class="locality">{{ addressData.address.city }}</span>
+                        <span  v-if="addressData.country" class="country-name">{{ addressData.country }}</span>
                     </template>
                 </dd>
-                <dt v-if="addressData.telephone">Telephone:</dt>
-                <dd v-if="addressData.telephone">
-                    <a :href="'tel:' + addressData.telephone" title="Call number" class="tel" v-telephone="addressData.telephone">{{ addressData.telephone }}</a>
+                <!-- end address -->
+
+                <!-- begin telephone -->
+                <dt v-if="addressData.telephone?.value">
+                    <span v-if="addressData.telephone.iconClass && showLabelIcons" :class="addressData.telephone.iconClass" :title="getMessage('cmdaddressdata.labeltext.telephone')"></span>
+                    <span v-if="showLabelTexts">{{ getMessage('cmdaddressdata.labeltext.telephone')}}</span>
+                </dt>
+                <dd v-if="addressData.telephone?.value">
+                    <a :href="'tel:' + addressData.telephone" title="Call number" class="tel" v-telephone="addressData.telephone.value">{{ addressData.telephone.value }}</a>
+                </dd>
+                <!-- end telephone -->
+
+                <!-- begin mobilephone -->
+                <dt v-if="addressData.mobilephone?.value">
+                    <span v-if="addressData.mobilephone.iconClass && showLabelIcons" :class="addressData.mobilephone.iconClass" :title="getMessage('cmdaddressdata.labeltext.mobile_phone')"></span>
+                    <span v-if="showLabelTexts">{{ getMessage('cmdaddressdata.labeltext.mobile_phone')}}</span>
+                </dt>
+                <dd v-if="addressData.mobilephone?.value">
+                    <a :href="'tel:' + addressData.mobilephone" title="Call number" class="tel" v-telephone="addressData.mobilephone.value">{{ addressData.mobilephone.value  }}</a>
                 </dd>
-                <dt v-if="addressData.mobilephone">Mobile phone:</dt>
-                <dd v-if="addressData.mobilephone">
-                    <a :href="'tel:' + addressData.mobilephone" title="Call number" class="tel" v-telephone="addressData.mobilephone">{{ addressData.mobilephone }}</a>
+                <!-- end mobilephone -->
+
+                <!-- begin fax -->
+                <dt v-if="addressData.fax?.value">
+                    <span v-if="addressData.fax.iconClass && showLabelIcons" :class="addressData.fax.iconClass" :title="getMessage('cmdaddressdata.labeltext.fax')"></span>
+                    <span v-if="showLabelTexts">{{ getMessage('cmdaddressdata.labeltext.fax')}}</span>
+                </dt>
+                <dd v-if="addressData.fax?.value" class="fax">{{ addressData.fax.value  }}</dd>
+                <!-- end fax -->
+
+                <!-- begin email -->
+                <dt v-if="addressData.email?.value">
+                    <span v-if="addressData.email.iconClass && showLabelIcons" :class="addressData.email.iconClass" :title="getMessage('cmdaddressdata.labeltext.email')"></span>
+                    <span v-if="showLabelTexts">{{ getMessage('cmdaddressdata.labeltext.email')}}</span>
+                </dt>
+                <dd class="email" v-if="addressData.email?.value">
+                    <a :href="'mailto:' + addressData.email?.value" class="email">{{ addressData.email.value  }}</a>
                 </dd>
-                <dt v-if="addressData.fax">Fax:</dt>
-                <dd v-if="addressData.fax" class="fax">{{ addressData.fax }}</dd>
-                <dt v-if="addressData.email">E-Mail:</dt>
-                <dd class="email" v-if="addressData.email"><a :href="'mailto:' + addressData.email"
-                                                              class="email">{{ addressData.email }}</a></dd>
+                <!-- end email -->
             </dl>
+            <!-- end list with labels -->
+
+            <!-- begin list without labels -->
             <ul v-else class="flex-container">
                 <li v-if="addressData.company">
-                    <span> class="org">{{ addressData.company }}</span>
+                    <span class="org">{{ addressData.company.value }}</span>
                 </li>
                 <li>
-                    <a :href="locateAddress" target="_blank" v-if="linkGoogleMaps"
-                       title="Open address on GoogleMaps™ in new tab">
-            <span class="street-address" v-if="addressData.address.streetNo">{{
-                    addressData.address.streetNo
-                }}</span><br/>
-                        <span class="postal-code" v-if="addressData.address.zip">{{ addressData.address.zip }}</span>&nbsp;<span
-                        class="locality" v-if="addressData.address.city">{{ addressData.address.city }}</span>
+                    <a :href="locateAddress" target="google-maps" v-if="linkGoogleMaps"
+                       :title="getMessage('cmdaddressdata.title.open_address_on_google_maps')">
+                        <span class="street-address" v-if="addressData.address.streetNo">{{ addressData.address.streetNo }}</span><br/>
+                        <span class="postal-code" v-if="addressData.address.zip">{{ addressData.address.zip }}</span>
+                        <span class="locality" v-if="addressData.address.city">{{ addressData.address.city }}</span>
                         <span class="country-name" v-if="addressData.country">{{ addressData.country }}</span>
                     </a>
                     <template v-else>
-            <span class="street-address" v-if="addressData.address.streetNo">{{
-                    addressData.address.streetNo
-                }}</span><br/>
-                        <span class="postal-code" v-if="addressData.address.zip">{{ addressData.address.zip }}</span>&nbsp;<span
-                        class="locality" v-if="addressData.address.city">{{ addressData.address.city }}</span>
+                        <span class="street-address" v-if="addressData.address.streetNo">{{ addressData.address.streetNo }}</span><br/>
+                        <span class="postal-code" v-if="addressData.address.zip">{{ addressData.address.zip }}</span>
+                        <span class="locality" v-if="addressData.address.city">{{ addressData.address.city }}</span>
                         <span class="country-name" v-if="addressData.country">{{ addressData.country }}</span>
                     </template>
                 </li>
-                <li v-if="addressData.telephone">
-                    <a :href="'tel:' + addressData.telephone" title="Call number" class="tel">{{
-                            addressData.telephone
-                        }}</a>
+                <li v-if="addressData.telephone?.value">
+                    <a :href="'tel:' + addressData.telephone.value" :title="getMessage('cmdaddressdata.title.call_number')" class="tel">{{ addressData.telephone.value }}</a>
+                </li>
+                <li v-if="addressData.fax?.value">
+                    <span class="fax">{{ addressData.fax.value }}</span>
                 </li>
-                <li v-if="addressData.fax"><span class="fax">{{ addressData.fax }}</span></li>
-                <li v-if="addressData.email"><a :href="'mailto:' + addressData.email" class="email">{{
-                        addressData.email
-                    }}</a>
+                <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>
             </ul>
+            <!-- end list without labels -->
         </address>
+        <!-- end address-data in vCard microformat -->
     </div>
 </template>
 
 <script>
+// import mixins
+import I18n from "../mixins/I18n"
+import DefaultMessageProperties from "../mixins/CmdAddressData/DefaultMessageProperties"
+
+// import components
+import CmdCustomHeadline from "./CmdCustomHeadline"
+
 export default {
     name: "CmdAddressData",
+    mixins: [I18n, DefaultMessageProperties],
+    components: {
+        CmdCustomHeadline
+    },
     props: {
         /**
-         * headline shown above address-data
+         * show a label-icon (if exists)
          */
-        headline: {
-            type: String,
+        showLabelIcons: {
+            type: Boolean,
+            default: true
+        },
+        /**
+         * show a label-text
+         */
+        showLabelTexts: {
+            type: Boolean,
+            default: true
+        },
+        /**
+         * properties for CmdCustomHeadline-component
+         */
+        cmdCustomHeadline: {
+            type: Object,
             required: false
         },
         /**
@@ -96,7 +158,7 @@ export default {
             default: true
         },
         /**
-         * all address-data (incl. lables) that will be shown
+         * all address-data (incl. labels) that will be shown
          */
         addressData: {
             type: Object,
@@ -121,10 +183,16 @@ export default {
 <style lang="scss">
 /* begin cmd-address-data ---------------------------------------------------------------------------------------- */
 .cmd-address-data {
-    dd {
-        margin-bottom: var(--default-margin);
+    dl {
+        grid-row-gap: calc(var(--default-gap) / 2);
+
+        dt, dd {
+            display: flex;
+            align-items: center;
+        }
     }
 
+
     ul {
         flex-direction: column;
         gap: calc(var(--default-gap) / 2);

package/src/components/CmdBackToTopButton.vue

@@ -1,9 +1,7 @@
 <template>
     <!-- begin cmd-back-to-top-button -->
     <transition name="fade">
-        <a :class="iconBackToTop.iconClass" class="cmd-back-to-top-button" href="#" :title="iconBackToTop.tooltip"
-           @click.prevent="onBackToTop"
-           v-if="show"></a>
+        <a v-if="show" :class="iconBackToTop.iconClass" class="cmd-back-to-top-button" href="#" :title="iconBackToTop.tooltip" @click.prevent="onBackToTop"></a>
     </transition>
     <!-- end cmd-back-to-top-button -->
 </template>
@@ -21,6 +19,8 @@ export default {
     props: {
         /**
          * icon-class (and shown tooltip on hover) for back to top button
+         *
+         * @requiredForAccessibility: partial
          */
         iconBackToTop: {
             type: Object,

package/src/components/CmdBankAccountData.vue

@@ -0,0 +1,104 @@
+<template>
+    <div class="cmd-bank-account-data">
+        <!-- begin CmdCustomHeadline -->
+        <CmdCustomHeadline v-if="cmdCustomHeadline" v-bind="cmdCustomHeadline"/>
+        <!-- end CmdCustomHeadline -->
+
+        <!-- begin account data -->
+        <dl>
+            <template v-for="(entry, index) in accountData" :key="index">
+                <dt>{{ entry.text }}</dt>
+                <dd v-if="allowCopyByClick && entry.allowCopy" class="flex-container no-flex">
+                    <span>{{ entry.value }}</span>
+                    <a href="#" @click.prevent="copyToClipboard(entry.value)" :title="iconCopy.tooltip">
+                        <span :class="iconCopy.iconClass"></span>
+                    </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 -->
+    </div>
+</template>
+
+<script>
+// import components
+import CmdCustomHeadline from "./CmdCustomHeadline"
+
+export default {
+    name: "CmdBankAccountData",
+    components: {CmdCustomHeadline},
+    props: {
+        /**
+         * bank account data
+         *
+         * must contain: owner, name of bank, IBAN, SWIFT/BIC
+         */
+        accountData: {
+            type: Array,
+            required: true
+        },
+        /**
+         * enable if data can be copied by click on icon
+         */
+        allowCopyByClick: {
+            type: Boolean,
+            default: true
+        },
+        /**
+         * additional information shown in a paragraph below account data
+         */
+        additionalInformation: {
+            type: String,
+            required: false
+        },
+        /**
+         * icon 'copy'
+         *
+         * @requiredForAccessibility: partial
+         */
+        iconCopy: {
+            type: Object,
+            default() {
+                return {
+                    iconClass: "icon-file-copy",
+                    tooltip: "Copy data to clipboard!"
+                }
+            }
+        },
+        /**
+         * properties for CmdCustomHeadline-component
+         */
+        cmdCustomHeadline: {
+            type: Object,
+            required: false
+        }
+    },
+    methods: {
+        copyToClipboard(entry) {
+            // get data, remove spaces and copy to clipboard
+            const output = entry.replace(/\s/g, "")
+            navigator.clipboard.writeText(output)
+            alert(output + " was copied to clipboard")
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+.cmd-bank-account-data {
+    dd.flex-container {
+        gap: calc(var(--default-gap) / 2);
+
+        > span {
+            &:first-child {
+                white-space: nowrap;
+            }
+        }
+    }
+}
+</style>