comand-component-library 3.3.15 → 3.3.17

package/src/components/CmdAddressData.vue

@@ -9,7 +9,7 @@
             <!-- begin list with labels -->
             <dl v-if="showLabels">
                 <!-- begin company (name) -->
-                <dt v-if="addressData.company?.value">
+                <dt v-if="addressData.company?.text">
                     <!-- begin CmdIcon -->
                     <CmdIcon
                         v-if="addressData.company.iconClass && showLabelIcons"
@@ -21,7 +21,7 @@
 
                     <span v-if="showLabelTexts">{{ getMessage('cmdaddressdata.labeltext.company')}}</span>
                 </dt>
-                <dd v-if="addressData.company?.value" class="org">{{ addressData.company.value }}</dd>
+                <dd v-if="addressData.company?.text" class="org">{{ addressData.company.text }}</dd>
                 <!-- end company (name) -->
 
                 <!-- begin address -->
@@ -75,7 +75,7 @@
                             <!-- end street/number -->
 
                             <!-- begin zip/city -->
-                            <span v-if="addressData.address.zip" class="postal-code">{{ addressData.address.zip }}</span>
+                            <span v-if="addressData.address.zip" class="postal-code">{{ addressData.address.zip }}&nbsp;</span>
                             <template v-if="addressData.address.city">
                                 <span class="locality">{{ addressData.address.city }}</span><br/>
                             </template>
@@ -97,7 +97,7 @@
                 <!-- end address -->
 
                 <!-- begin telephone -->
-                <dt v-if="addressData.telephone?.value">
+                <dt v-if="addressData.telephone?.text">
                     <!-- begin CmdIcon -->
                     <CmdIcon
                         v-if="addressData.telephone.iconClass && showLabelIcons"
@@ -109,13 +109,13 @@
 
                     <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 v-if="addressData.telephone?.text">
+                    <a :href="'tel:' + addressData.telephone" title="Call number" class="tel" v-telephone="addressData.telephone.text">{{ addressData.telephone.text }}</a>
                 </dd>
                 <!-- end telephone -->
 
                 <!-- begin mobile phone -->
-                <dt v-if="addressData.mobilephone?.value">
+                <dt v-if="addressData.mobilephone?.text">
                     <!-- begin CmdIcon -->
                     <CmdIcon
                         v-if="addressData.mobilephone.iconClass && showLabelIcons"
@@ -127,13 +127,13 @@
 
                     <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 v-if="addressData.mobilephone?.text">
+                    <a :href="'tel:' + addressData.mobilephone" title="Call number" class="tel" v-telephone="addressData.mobilephone.text">{{ addressData.mobilephone.text  }}</a>
                 </dd>
                 <!-- end mobile phone -->
 
                 <!-- begin fax -->
-                <dt v-if="addressData.fax?.value">
+                <dt v-if="addressData.fax?.text">
                     <!-- begin CmdIcon -->
                     <CmdIcon
                         v-if="addressData.fax.iconClass && showLabelIcons"
@@ -145,11 +145,11 @@
 
                     <span v-if="showLabelTexts">{{ getMessage('cmdaddressdata.labeltext.fax')}}</span>
                 </dt>
-                <dd v-if="addressData.fax?.value" class="fax">{{ addressData.fax.value  }}</dd>
+                <dd v-if="addressData.fax?.text" class="fax">{{ addressData.fax.text }}</dd>
                 <!-- end fax -->
 
                 <!-- begin email -->
-                <dt v-if="addressData.email?.value">
+                <dt v-if="addressData.email?.text">
                     <!-- begin CmdIcon -->
                     <CmdIcon
                         v-if="addressData.email.iconClass && showLabelIcons"
@@ -161,13 +161,13 @@
 
                     <span v-if="showLabelTexts">{{ getMessage('cmdaddressdata.labeltext.email')}}</span>
                 </dt>
-                <dd v-if="addressData.email?.value" class="email" >
-                    <a :href="'mailto:' + addressData.email?.value" class="email">{{ addressData.email.value  }}</a>
+                <dd v-if="addressData.email?.text" class="email" >
+                    <a :href="'mailto:' + addressData.email?.text" class="email">{{ addressData.email.text }}</a>
                 </dd>
                 <!-- end email -->
 
                 <!-- begin web site -->
-                <dt v-if="addressData.website?.value">
+                <dt v-if="addressData.website?.text">
                 <!-- begin CmdIcon -->
                     <CmdIcon
                         v-if="addressData.website.iconClass && showLabelIcons"
@@ -178,13 +178,13 @@
 
                     <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 v-if="addressData.website?.text" >
+                    <a :href="addressData.website.text" target="_blank" :title="getMessage('cmdaddressdata.title.visit_website')">{{ websiteUrlText }}</a>
                 </dd>
                 <!-- end web site -->
 
                 <!-- begin custom data -->
-                <dt v-if="addressData.custom?.value">
+                <dt v-if="addressData.custom?.text">
                     <!-- begin CmdIcon -->
                     <CmdIcon
                         v-if="addressData.custom.iconClass && showLabelIcons"
@@ -195,8 +195,8 @@
 
                     <span v-if="showLabelTexts">{{ getMessage('cmdaddressdata.labeltext.custom')}}</span>
                 </dt>
-                <dd v-if="addressData.custom?.value" >
-                    {{ addressData.custom.value }}
+                <dd v-if="addressData.custom?.text" >
+                    {{ addressData.custom.text }}
                 </dd>
                 <!-- end custom data -->
             </dl>
@@ -206,7 +206,7 @@
             <ul v-else class="flex-container">
                 <!-- begin company (name) -->
                 <li v-if="addressData.company">
-                    <span class="org">{{ addressData.company.value }}</span>
+                    <span class="org">{{ addressData.company.text }}</span>
                 </li>
                 <!-- end company (name) -->
                 <li>
@@ -220,7 +220,7 @@
 
                         <!-- begin zip/city -->
                         <template v-if="addressData.address.zip || addressData.address.city">
-                            <span class="postal-code">{{ addressData.address.zip }}</span>
+                            <span class="postal-code">{{ addressData.address.zip }}&nbsp;</span>
                             <span class="locality">{{ addressData.address.city }}</span><br/>
                         </template>
                         <!-- end zip/city -->
@@ -247,10 +247,10 @@
 
                         <!-- begin zip/city -->
                         <template v-if="addressData.address.zip || addressData.address.city">
-                            <span class="postal-code">{{ addressData.address.zip }}</span>
+                            <span class="postal-code">{{ addressData.address.zip }}&nbsp;</span>
                             <span class="locality">{{ addressData.address.city }}</span><br/>
                         </template>
-                        <!-- end zip/ctiy -->
+                        <!-- end zip/city -->
 
                         <!-- begin miscInfo -->
                         <template v-if="addressData.address.miscInfo">
@@ -264,23 +264,90 @@
                     </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>
+                <li v-if="addressData.telephone?.text">
+                    <a :href="'tel:' + addressData.telephone.text" :title="getMessage('cmdaddressdata.title.call_number')" class="tel">{{ addressData.telephone.text }}</a>
                 </li>
-                <li v-if="addressData.fax?.value">
-                    <span class="fax">{{ addressData.fax.value }}</span>
+                <li v-if="addressData.fax?.text">
+                    <span class="fax">{{ addressData.fax.text }}</span>
                 </li>
-                <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 v-if="addressData.email?.text" :title="getMessage('cmdaddressdata.title.send_email')">
+                    <a :href="'mailto:' + addressData.email.text" class="email">{{ addressData.email.text }}</a>
                 </li>
-                <li v-if="addressData.website?.value" :title="getMessage('cmdaddressdata.title.visit_website')">
-                    <a :href="addressData.website.value" target="_blank">{{ websiteUrlText }}</a>
+                <li v-if="addressData.website?.text" :title="getMessage('cmdaddressdata.title.visit_website')">
+                    <a :href="addressData.website.text" target="_blank">{{ websiteUrlText }}</a>
                 </li>
-                <li v-if="addressData.custom?.value">
-                    {{ addressData.custom.value }}
+                <li v-if="addressData.custom?.text">
+                    {{ addressData.custom.text }}
                 </li>
             </ul>
             <!-- end list without labels -->
+            <ul v-if="showIconsOnly">
+                <template v-if="addressData.company || addressData.address">
+                    <!-- begin company (name) -->
+                    <li v-if="addressData.company">
+                        <span class="org">{{ addressData.company.text }}</span>
+                    </li>
+                    <!-- end company (name) -->
+                    <li 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')">
+                            <!-- 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 }}&nbsp;</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>
+                            <!-- 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 }}&nbsp;</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 -->
+                        </template>
+                        <!-- end unlinked address -->
+                    </li>
+                </template>
+                <template>
+                   <!-- <CmdListOfLinks :links="modifiedAddressData" />-->
+                </template>
+            </ul>
         </address>
         <!-- end address-data in vCard microformat -->
     </div>
@@ -295,6 +362,10 @@ export default {
     name: "CmdAddressData",
     mixins: [I18n, DefaultMessageProperties],
     props: {
+        showIconsOnly: {
+            type: Boolean,
+            default: false
+        },
         /**
          * show a label-icon (if exists)
          */
@@ -343,8 +414,13 @@ export default {
             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://", "")
+            return this.addressData.website?.text.replace("https://", "")
         }
+        // modifiedAddressData() {
+        //     const contactDataWithoutAddress = this.addressData.map(item => () {
+        //
+        //     })
+        // }
     }
 }
 </script>

package/src/components/CmdBox.vue

@@ -8,7 +8,7 @@
                 'stretch-vertically': stretchVertically && !collapsible,
                 'stretch-horizontally': stretchHorizontally,
                 'row-view': isRowView
-             }
+             },
              ]"
     >
         <!-- begin collapsible header with slot -->
@@ -97,7 +97,7 @@
 
     <!-- begin boxType 'product' -->
     <a v-else-if="boxType === 'product' && product"
-       :class="['cmd-box box product', {'stretch-vertically': stretchVertically, 'stretch-horizontally': stretchHorizontally}]"
+       :class="['cmd-box box product', {'stretch-vertically': stretchVertically, 'stretch-horizontally': stretchHorizontally, 'row-view': isRowView}]"
        href="#"
        @click.prevent="clickOnProduct(product)">
         <div class="box-header flex-container vertical">
@@ -132,10 +132,14 @@
              'cmd-box box user',
               profileType,
              {
-                 'stretch-vertically': stretchVertically,
-                'stretch-horizontally': stretchHorizontally
-             }
+                'stretch-vertically': stretchVertically,
+                'stretch-horizontally': stretchHorizontally,
+                'row-view': isRowView
+             },
+             'row-view'
          ]">
+        isRowView {{isRowView}}<br />
+        rowView {{rowView}}
         <div class="box-header flex-container vertical">
             <figure v-if="user.image">
                 <img :src="user.image.src" :alt="user.image.alt"/>
@@ -143,11 +147,11 @@
             </figure>
             <div v-else>
                 <span :class="defaultProfileIconClass" :title="user.name"></span>
-                <p v-if="!rowView">{{ user.name }}</p>
+                <p v-if="!isRowView">{{ user.name }}</p>
             </div>
         </div>
         <div class="box-body">
-            <p v-if="rowView">{{ user.name }}</p>
+            <p v-if="isRowView">{{ 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>
@@ -390,8 +394,11 @@ export default {
                 this.open = this.collapsingBoxesOpen
             }
         },
-        isRowView() {
-            this.isRowView = this.rowView
+        rowView: {
+            handler() {
+                this.isRowView = this.rowView
+            },
+            immediate: true
         }
     }
 }

package/src/components/CmdBoxWrapper.vue

@@ -8,12 +8,12 @@
             <div v-if="allowUserToToggleOrientation || allowTogglingCollapsingBoxes" class="options-wrapper">
                 <a v-if="allowTogglingCollapsingBoxes" href="#" @click.prevent="toggleCollapsingBoxes" :title="collapsingBoxesOpen ? collapseBoxesIcon.tooltip : expandBoxesIcon.tooltip">
                     <!-- begin CmdIcon -->
-                    <CmdIcon :iconClass="collapsingBoxesOpen ? expandBoxesIcon.iconClass : collapseBoxesIcon.iconClass" :type="oneBoxPerRow ? iconGridView.iconType : iconRowView.iconType" />
+                    <CmdIcon :iconClass="collapsingBoxesOpen ? expandBoxesIcon.iconClass : collapseBoxesIcon.iconClass" :type="rowView ? iconGridView.iconType : iconRowView.iconType" />
                     <!-- end CmdIcon -->
                 </a>
-                <a v-if="allowUserToToggleOrientation" href="#" @click.prevent="oneBoxPerRow = !oneBoxPerRow" :title="oneBoxPerRow ? iconRowView.tooltip : iconGridView.tooltip">
+                <a v-if="allowUserToToggleOrientation" href="#" @click.prevent="rowView = !rowView" :title="rowView ? iconRowView.tooltip : iconGridView.tooltip">
                     <!-- begin CmdIcon -->
-                    <CmdIcon :iconClass="oneBoxPerRow ? iconGridView.iconClass : iconRowView.iconClass" :type="oneBoxPerRow ? iconGridView.iconType : iconRowView.iconType" />
+                    <CmdIcon :iconClass="rowView ? iconGridView.iconClass : iconRowView.iconClass" :type="rowView ? iconGridView.iconType : iconRowView.iconType" />
                     <!-- end CmdIcon -->
                 </a>
             </div>
@@ -189,8 +189,11 @@ export default {
         }
     },
     watch: {
-        useRowViewAsDefault() {
-            this.oneBoxPerRow = this.useRowViewAsDefault
+        useRowViewAsDefault: {
+            handler() {
+                this.oneBoxPerRow = this.useRowViewAsDefault
+            },
+            immediate: true
         }
     }
 }

package/src/components/CmdCompanyLogo.vue

@@ -5,11 +5,14 @@
             <CmdImage :image="image" />
             <!-- end CmdImage -->
         </router-link>
-        <a v-else :href="link.path" :title="link.tooltip">
+        <a v-else-if="link.type === 'href'" :href="link.path" :title="link.tooltip">
             <!-- begin CmdImage -->
             <CmdImage :image="image" />
             <!-- end CmdImage -->
         </a>
+        <!-- begin CmdImage -->
+        <CmdImage v-else :image="image" />
+        <!-- end CmdImage -->
     </div>
 </template>
 

package/src/components/CmdFakeSelect.vue

@@ -517,6 +517,11 @@ export default {
                     height: inherit;
                     border: var(--default-border);
                     background: var(--color-scheme-background-color);
+                    color: var(--text-color);
+
+                    span, [class*="icon"] {
+                        color: var(--text-color);
+                    }
 
                     .option-name {
                         text-overflow: ellipsis;
@@ -529,7 +534,12 @@ export default {
                     }
 
                     &:hover, &:active, &:focus {
-                        background: var(--primary-color);
+                        background: var(--pure-white);
+                        border-color: var(--primary-color);
+
+                        span, [class*="icon"] {
+                            color: var(--text-color);
+                        }
                     }
                 }
             }
@@ -559,13 +569,13 @@ export default {
             padding-top: .8rem;
             outline: none;
             border-bottom: var(--default-border);
-            color: var(--color-scheme-text-color);
             text-decoration: none;
 
+
             &:hover, &:active, &:focus {
                 background: var(--primary-color);
 
-                span {
+                span, [class*="icon"] {
                     color: var(--pure-white);
                 }
             }
@@ -592,7 +602,7 @@ export default {
                 &:hover, &:active, &:focus {
                     background: var(--primary-color);
 
-                    span {
+                    span, [class*="icon"] {
                         color: var(--pure-white);
                     }
                 }

package/src/components/CmdFormElement.vue

@@ -58,17 +58,17 @@
         </span>
         <!-- end label-text (+ required asterisk) -->
 
-        <span class="flex-container"><!-- container required to place inner icons correctly -->
+        <span v-if="$attrs.type !== 'checkbox' && $attrs.type !== 'radio'" class="flex-container"><!-- container required to place inner icons correctly -->
             <!-- begin CmdIcon (for icon inside field) -->
             <CmdIcon
-                v-if="$attrs.type !== 'checkbox' && $attrs.type !== 'radio' && fieldIconClass"
+                v-if="fieldIconClass"
                 class="place-inside"
                 :iconClass="fieldIconClass"
             />
             <!-- end CmdIcon (for icon inside field) -->
 
             <!-- begin inputfield -->
-            <template v-if="element === 'input' && $attrs.type !== 'checkbox' && $attrs.type !== 'radio' && $attrs.type !== 'search'">
+            <template v-if="element === 'input' && $attrs.type !== 'search'">
                 <input
                     v-bind="elementAttributes"
                     :id="htmlId"
@@ -839,7 +839,7 @@ export default {
 <style lang="scss">
 /* begin cmd-form-element ------------------------------------------------------------------------------------------ */
 .cmd-form-element {
-    input + .place-inside[class*="icon-"] {
+    input + .place-inside {
         left: auto;
         right: .5rem
     }
@@ -849,10 +849,10 @@ export default {
             color: var(--status-color);
         }
 
-        > span {
+        span {
             color: var(--status-color);
 
-            &[class*="icon-"].place-inside {
+            &.place-inside {
                 color: var(--status-color);
             }
         }
@@ -875,6 +875,19 @@ export default {
             right: 1rem;
             transform: translateY(-50%);
             z-index: 100;
+
+            // set styles to avoid overwriting by has-state-colors
+            &.button {
+                span {
+                    color: var(--pure-white);
+                }
+
+                &:hover, &:active, &:focus {
+                    span {
+                        color: var(--text-color);
+                    }
+                }
+            }
         }
 
         input:not(:only-child) {

package/src/components/CmdPager.vue

@@ -117,7 +117,7 @@ export default {
     },
     computed: {
         numberOfPages() {
-            return Math.ceil(this.items / this.itemsPerPage)
+            return Math.ceil(this.pages / this.itemsPerPage)
         },
         getPreviousHref() {
             if (this.currentPage === 1) {

package/src/components/CmdShareButtons.vue

@@ -1,5 +1,10 @@
 <template>
     <div :class="['cmd-share-buttons', {'stretch': stretchButtons, 'align-right': align === 'right'}]">
+        <!-- begin CmdHeadline -->
+        <CmdHeadline v-if="cmdHeadline" v-bind="cmdHeadline" />
+        <!-- end CmdHeadline -->
+
+        <!-- begin CmdFormElement -->
         <CmdFormElement
             v-if="userMustAcceptDataPrivacy"
             element="input"
@@ -9,6 +14,9 @@
             :required="cmdFormElement.required"
             v-model="dataPrivacyAccepted"
         />
+        <!-- end CmdFormElement -->
+
+        <!-- begin share buttons -->
         <div class="share-button-wrapper">
             <a v-for="shareButton in validShareButtons"
                :key="shareButton.path" :class="['button', {disabled: userMustAcceptDataPrivacy && !dataPrivacyAccepted}]"
@@ -26,6 +34,7 @@
                 <!-- end CmdIcon -->
             </a>
         </div>
+        <!-- end share buttons -->
     </div>
 </template>
 
@@ -114,6 +123,13 @@ export default {
                     required: true
                 }
             }
+        },
+        /**
+         * properties for CmdHeadline-component
+         */
+        cmdHeadline: {
+            type: Object,
+            required: false
         }
     },
     computed: {

package/src/components/CmdThumbnailScroller.vue

@@ -9,9 +9,11 @@
 
         <!-- begin list of images to slide -->
         <transition-group name="slide" tag="ul">
-            <li v-for="(image, index) in thumbnails" :key="image.id" :class="{'active' : imgIndex === index}">
+            <li v-for="(image, index) in thumbnails" :key="index" :class="{'active' : imgIndex === index}">
                 <a href="#" @click.prevent="showFancyBox(index)" :title="getMessage('cmdthumbnailscroller.tooltip.open_large_image')">
+                    <!-- begin CmdImage -->
                     <CmdImage :image="image.image" :figcaption="image.figcaption" />
+                    <!-- end CmdImage -->
                 </a>
             </li>
         </transition-group>

package/src/components/CmdUploadForm.vue

@@ -1171,7 +1171,7 @@ export default {
         display: none;
     }
 
-    .drop-area {
+    .drop-area, &.drop-area {
         border: var(--default-border);
         border-style: dashed;
         background: var(--color-scheme-background-color);
@@ -1187,7 +1187,7 @@ export default {
         }
     }
 
-    a.drop-area {
+    &.drop-area {
         display: inline-flex;
         flex-direction: column;
         text-decoration: none;