comand-component-library 4.3.26 → 4.3.28

package/src/assets/data/text-image-block.json

@@ -16,5 +16,7 @@
       "show": true
     }
   },
-  "htmlContent": "This text is given as plain text and show below an optional image."
+  "cmdParagraph": {
+    "content": "This text is given as plain text and show below an optional image."
+  }  
 }

package/src/assets/data/thumbnail-scroller-images.json

@@ -24,7 +24,7 @@
     "figcaption": {
       "show": true,
       "position": "bottom",
-      "text": "Figcaption 2",
+      "text": "Figcaption 2 with long text",
       "textAlign": "center"
     }
   },

package/src/components/CmdAccordion.vue

@@ -53,7 +53,7 @@ export default {
         /**
          * set highlight-level for headline
          * 
-         * @allowedValues: "", "primary", "secondary", "tertiary"
+         * @allowedValues: null, "primary", "secondary", "tertiary"
          */
         highlightLevel: {
             type: String,

package/src/components/CmdAddressData.vue

@@ -1,60 +1,39 @@
 <template>
     <!-- begin CmdAddressData ---------------------------------------------------------------------------------------- -->
-    <div :class="['cmd-address-data vcard', {box: styleAsBox}]">
-        <!-- begin slot -->
-        <template v-if="useSlot">
-            <slot></slot>
-        </template>
-        <!-- end slot -->
-
-        <template v-else>
-            <!-- begin cmd-headline -->
-            <CmdHeadline
-                v-if="cmdHeadline?.headlineText || editModeContext" v-bind="cmdHeadline"
-            />
-            <!-- end cmd-headline -->
+    <div :class="['cmd-address-data vcard', { box: styleAsBox }]">
+        <slot>
+            <CmdHeadline v-if="(cmdHeadlineProperties?.show && cmdHeadlineProperties?.headlineText) || editModeContext"
+                v-bind="cmdHeadlineProperties" />
 
             <!-- begin address-data in vCard microformat -->
             <address class="adr">
                 <!-- begin list with labels -->
-                <template v-if="showLabels && (showLabelTexts|| showLabelIcons) && !showIconsOnly">
+                <template v-if="showLabels && (showLabelTexts || showLabelIcons) && !showIconsOnly">
                     <!-- begin default view -->
-                    <dl v-if="!editModeContext" :class="{'auto-columns': contentOrientation === 'horizontal'}">
+                    <dl v-if="!editModeContext" :class="{ 'auto-columns': contentOrientation === 'horizontal' }">
                         <!-- begin cmd-address-data-item -->
-                        <CmdAddressDataItem
-                            v-for="(entry, index) in addressData"
-                            :key="index" :addressEntry="entry"
-                            :showLabelIcons="showLabelIcons"
-                            :showLabelTexts="showLabelTexts"
-                            :showCityBeforeZip="showCityBeforeZip"
-                        />
+                        <CmdAddressDataItem v-for="(entry, index) in addressData" :key="index" :addressEntry="entry"
+                            :showLabelIcons="showLabelIcons" :showLabelTexts="showLabelTexts"
+                            :showCityBeforeZip="showCityBeforeZip" />
                         <!-- end cmd-address-data-item -->
                     </dl>
                     <!-- end default view -->
 
                     <!-- begin edit-mode -->
                     <template v-else>
-                        <button v-if="addressData.length === 0" type="button" class="button confirm small" @click="onAddItem">
+                        <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]"
-                        >
+                        <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"
-                                />
+                                <CmdAddressDataItem :addressEntry="entry" :showLabelIcons="showLabelIcons"
+                                    :showLabelTexts="showLabelTexts" />
                                 <!-- end cmd-address-data-item -->
                             </dl>
                         </EditComponentWrapper>
@@ -63,20 +42,17 @@
                 <!-- end list with labels -->
 
                 <!-- begin list without labels -->
-                <ul v-else :class="['flex-container', {'vertical': !showIconsOnly}]">
+                <ul v-else :class="['flex-container', { 'vertical': !showIconsOnly }]">
                     <template v-for="(entry, index) in addressData" :key="index">
                         <li v-if="entry.href || (entry.name === 'address' && entry.linkGoogleMaps) || !showIconsOnly"
-                            :class="{'flex-none' : showIconsOnly}">
+                            :class="{ 'flex-none': showIconsOnly }">
                             <!-- begin all entries except address (which has no href) -->
-                            <a v-if="entry.href"
-                               :class="{'button' : styleLinksAsButtons}"
-                               :href="getHref(entry)"
-                               :target="entry.name === 'url' ? '_blank' : null"
-                               :title="entry.tooltip"
-                            >
+                            <a v-if="entry.href" :class="{ 'button': styleLinksAsButtons }" :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"/>
+                                    <CmdIcon v-if="entry.iconClass" :iconClass="entry.iconClass"
+                                        :type="entry.iconType" />
                                     <!-- end CmdIcon -->
                                 </template>
                                 <template v-else>{{ entry.href }}</template>
@@ -87,35 +63,39 @@
                             <!-- 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">
+                                <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>
                                         <!-- begin street/number -->
                                         <template v-if="entry.streetNo">
-                                            <span class="street-address">{{ entry.streetNo }}</span><br/>
+                                            <span class="street-address">{{ entry.streetNo }}</span><br />
                                         </template>
                                         <!-- end street/number -->
 
                                         <!-- begin zip/city (state) -->
-                                        <span v-if="entry.zip || entry.city" :class="showCityBeforeZip ? 'order-city-zip' : 'order-zip-city'">
+                                        <span v-if="entry.zip || entry.city"
+                                            :class="showCityBeforeZip ? 'order-city-zip' : 'order-zip-city'">
                                             <span v-if="entry.zip" class="postal-code">{{ entry.zip }}&nbsp;</span>
-                                            <span v-if="entry.city" class="locality">{{ entry.city }}<template v-if="entry.state"> {{entry.state}}</template></span><br/>
+                                            <span v-if="entry.city" class="locality">{{ entry.city }}<template
+                                                    v-if="entry.state"> {{ entry.state }}</template></span><br />
                                         </span>
                                         <!-- end zip/city (state) -->
 
                                         <!-- begin po box -->
                                         <template v-if="entry.pobox">
-                                            <span>{{ entry.pobox }}</span><br/>
+                                            <span>{{ entry.pobox }}</span><br />
                                         </template>
                                         <!-- end po box -->
 
                                         <!-- begin miscInfo -->
                                         <template v-if="entry.miscInfo">
-                                            <span>{{ entry.miscInfo }}</span><br/>
+                                            <span>{{ entry.miscInfo }}</span><br />
                                         </template>
                                         <!-- end miscInfo -->
 
@@ -130,26 +110,28 @@
                                 <template v-if="!entry.linkGoogleMaps && !showIconsOnly">
                                     <!-- begin street/number -->
                                     <template v-if="entry.streetNo">
-                                        <span class="street-address">{{ entry.streetNo }}</span><br/>
+                                        <span class="street-address">{{ entry.streetNo }}</span><br />
                                     </template>
                                     <!-- end street/number -->
 
                                     <!-- begin zip/city (state) -->
-                                    <span v-if="entry.zip || entry.city" :class="showCityBeforeZip ? 'order-city-zip' : 'order-zip-city'">
+                                    <span v-if="entry.zip || entry.city"
+                                        :class="showCityBeforeZip ? 'order-city-zip' : 'order-zip-city'">
                                         <span v-if="entry.zip" class="postal-code">{{ entry.zip }}&nbsp;</span>
-                                        <span v-if="entry.city" class="locality">{{ entry.city }}<template v-if="entry.state"> {{entry.state}}</template></span><br/>
+                                        <span v-if="entry.city" class="locality">{{ entry.city }}<template
+                                                v-if="entry.state"> {{ entry.state }}</template></span><br />
                                     </span>
                                     <!-- end zip/city (state) -->
 
                                     <!-- begin po box -->
                                     <template v-if="entry.pobox">
-                                        <span>{{ entry.pobox }}</span><br/>
+                                        <span>{{ entry.pobox }}</span><br />
                                     </template>
                                     <!-- end po box -->
 
                                     <!-- begin miscInfo -->
                                     <template v-if="entry.miscInfo">
-                                        <span>{{ entry.miscInfo }}</span><br/>
+                                        <span>{{ entry.miscInfo }}</span><br />
                                     </template>
                                     <!-- end miscInfo -->
 
@@ -168,14 +150,14 @@
                 <!-- end list without labels -->
             </address>
             <!-- end address-data in vCard microformat -->
-        </template>
+        </slot>
     </div>
     <!-- end CmdAddressData ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>
 // import functions
-import {buildComponentPath, updateHandlerProvider} from "../utils/editmode.js"
+import { buildComponentPath, updateHandlerProvider } from "../utils/editmode.js"
 
 // import mixins
 import EditMode from "../mixins/EditMode.vue"
@@ -183,6 +165,11 @@ import EditMode from "../mixins/EditMode.vue"
 export default {
     name: "CmdAddressData",
     mixins: [EditMode],
+    inject: {
+        editModeContext: {
+            default: null
+        }
+    },
     props: {
         /**
          * style component as a box
@@ -192,23 +179,16 @@ export default {
             default: false
         },
         /**
-         * activate if you want to use slot instead for given structure
+         * define orientation for component-content
          */
-        useSlot: {
-            type: Boolean,
-            default: false
-        },
-        /**
-         * 
-         */
-         contentOrientation: {
+        contentOrientation: {
             type: String,
             default: "vertical",
             validator(value) {
                 return value === "vertical" ||
                     value === "horizontal"
             }
-         },
+        },
         /**
          * show an icon (if exists) in front of label-text
          */
@@ -276,6 +256,13 @@ export default {
         }
     },
     computed: {
+        cmdHeadlineProperties() {
+            return {
+                show: true,
+                headlineLevel: 2,
+                ...this.cmdHeadline
+            }
+        },
         websiteUrlText() {
             return this.addressData.website?.text.replace("https://", "")
         }
@@ -355,7 +342,8 @@ export default {
             margin-right: calc(var(--default-margin) / 2);
         }
 
-        .order-city-zip, .order-zip-city {
+        .order-city-zip,
+        .order-zip-city {
             display: inline-flex;
             gap: .5rem;
         }

package/src/components/CmdBankAccountData.vue

@@ -1,38 +1,37 @@
 <template>
     <!-- begin CmdBankAccountData ---------------------------------------------------------------------------------------- -->
     <div :class="['cmd-bank-account-data', {box: styleAsBox}]">
-        <!-- begin slot -->
-        <template v-if="useSlot">
-            <slot></slot>
-        </template>
-        <!-- end slot -->
-
-        <template v-else>
-            <!-- begin CmdHeadline -->
-            <CmdHeadline v-if="cmdHeadline" v-bind="cmdHeadline"/>
-            <!-- end CmdHeadline -->
+        <slot>
+            <CmdHeadline v-if="(cmdHeadlineProperties?.show && cmdHeadlineProperties?.headlineText) || editModeContext"
+                v-bind="cmdHeadlineProperties" />
 
             <!-- begin account data -->
             <dl>
                 <template v-for="(entry, index) in accountData" :key="index">
                     <dt>{{ entry.text }}</dt>
+
+                    <!-- begin icon to copy data -->
                     <dd v-if="allowCopyByClick && entry.allowCopy">
                         <span>{{ entry.value }}</span>
-                        <a href="#" @click.prevent="copyToClipboard(entry.value)" :title="cmdIcon.tooltip">
-                            <!-- begin CmdIcon -->
-                            <CmdIcon :iconClass="cmdIcon.iconClass" :type="cmdIcon.iconType"/>
-                            <!-- end CmdIcon -->
-                        </a>
+                        <CmdLink 
+                            @click="copyToClipboard(entry.value)"
+                            v-bind="cmdLinkCopyDataProperties"
+                        />
                     </dd>
+                    <!-- end icon to copy data -->
+
                     <dd v-else :key="index">{{ entry.value }}</dd>
                 </template>
             </dl>
             <!-- end account data -->
 
             <!-- begin additional information -->
-            <p v-if="additionalInformation">{{ additionalInformation }}</p>
+            <CmdParagraph 
+                v-if="cmdParagraphAdditionalInformationProperties.show && cmdParagraphAdditionalInformationProperties.text" 
+                v-bind="cmdParagraphAdditionalInformationProperties" 
+            />
             <!-- end additional information -->
-        </template>
+        </slot>
     </div>
     <!-- end CmdBankAccountData ---------------------------------------------------------------------------------------- -->
 </template>
@@ -40,6 +39,11 @@
 <script>
 export default {
     name: "CmdBankAccountData",
+    inject: {
+        editModeContext: {
+            default: null
+        }
+    },
     props: {
         /**
          * style component as a box
@@ -48,13 +52,6 @@ export default {
             type: Boolean,
             default: false
         },
-        /**
-         * activate if you want to use slot instead for given structure
-         */
-        useSlot: {
-            type: Boolean,
-            default: false
-        },
         /**
          * bank account data
          *
@@ -79,20 +76,21 @@ export default {
             required: false
         },
         /**
-         * icon 'copy'
+         * properties for CmdLink to copy data to dashboard
          *
          * @requiredForAccessibility: partial
          */
-        cmdIcon: {
+         cmdLinkCopyData: {
             type: Object,
-            default() {
-                return {
-                    iconClass: "icon-file-copy",
-                    tooltip: "Copy data to clipboard!",
-                    iconType: "auto"
-                }
-            }
+            required: false
         },
+        /**
+         * properties for CmdParagraph for additional information shown at bottom
+         */
+         cmdParagraphAdditionalInformation: {
+            type: Object,
+            required: false
+         },
         /**
          * properties for CmdHeadline-component
          */
@@ -101,6 +99,30 @@ export default {
             required: false
         }
     },
+    computed: {
+        cmdHeadlineProperties() {
+            return {
+                show: true,
+                headlineLevel: 2,
+                ...this.cmdHeadline
+            }
+        },
+        cmdParagraphAdditionalInformationProperties() {
+            return {
+                show: true,
+                ...this.cmdParagraphAdditionalInformation
+            }
+        },
+        cmdLinkCopyDataProperties() {
+            return {
+                icon: {
+                    iconClass: "icon-file-copy",
+                    tooltip: "Copy data to clipboard!"
+                },
+                ...this.cmdLinkCopyData
+            }
+        }
+    },
     methods: {
         copyToClipboard(entry) {
             // get data, remove spaces and copy to clipboard

package/src/components/CmdBasicForm.vue

@@ -1,16 +1,16 @@
 <template>
     <!-- begin CmdBasicForm---------------------------------------------------------------------------------------- -->
     <div class="cmd-basic-form">
-        <!-- begin CmdHeadline -->
-        <CmdHeadline v-if="cmdHeadline" v-bind="cmdHeadline" />
-        <!-- end CmdHeadline -->
+        <CmdHeadline
+            v-if="(cmdHeadlineProperties?.show && cmdHeadlineProperties?.headlineText) || editModeContext"
+            v-bind="cmdHeadlineProperties"
+        />
 
-        <!-- begin CmdForm -->
         <CmdForm
             @submit="onSubmit"
             :class="{'send-success': sendSuccessfully}"
             novalidate="novalidate"
-            v-bind="cmdForm"
+            v-bind="cmdFormProperties"
             :legend="legend"
             :submitButton="submitButtonProperties"
             :formAction="formAction"
@@ -257,7 +257,6 @@
             <button class="button" type="button" @click="onSuccess">On Success</button>
             -->
         </CmdForm>
-        <!-- end CmdForm -->
     </div>
     <!-- end CmdBasicForm---------------------------------------------------------------------------------------- -->
 </template>
@@ -470,6 +469,19 @@ export default {
         })
     },
     computed: {
+        cmdFormProperties() {
+            return {
+                method: "POST",
+                ...this.cmdForm
+            }
+        },
+        cmdHeadlineProperties() {
+            return {
+                show: true,
+                headlineLevel: 3,
+                ...this.cmdHeadline
+            }
+        },
         submitButtonProperties() {
             return {
                 iconClass: "icon-message-send",
@@ -552,7 +564,7 @@ export default {
                 customSubmitFormData.set(this.configuration[configurationEntries[i]].name, this.formData[configurationEntries[i]].value)
             }
 
-            fetch(this.formAction, {method: this.cmdForm?.formMethod || "POST", body: customSubmitFormData}).then((response) => {
+            fetch(this.formAction, {method: this.cmdFormProperties?.formMethod || "POST", body: customSubmitFormData}).then((response) => {
                 if(response.ok) {
                     this.sendSuccessfully = true
                     this.$refs.form.showMessage("success", this.getMessage("basic_form.system_message.success.message_sent_successfully"))

package/src/components/CmdBox.vue

@@ -959,6 +959,8 @@ export default {
 
             .no-user-image {
                 background: var(--default-background);
+                border: var(--image-border);
+                box-shadow: var(--image-box-shadow);
             }
         }
 
@@ -1043,6 +1045,12 @@ export default {
                         }
                     }
                 }
+
+                ul.horizontal {
+                    li {
+                        border-radius: 0 !important;
+                    }
+                }
             }
         }
 

package/src/components/CmdBoxWrapper.vue

@@ -300,6 +300,16 @@ export default {
     }
 
     .row-view {
+        .box.product {
+            .box-header {
+                border-top-right-radius: 0;
+                
+                img {
+                    border-top-right-radius: 0;
+                }
+            }
+        }
+
         p.cutoff-text {
             height: auto;
 
@@ -313,6 +323,10 @@ export default {
             padding: var(--default-padding);
             align-items: center;
 
+            .box-footer {
+                align-self: flex-start;
+            }
+
             img {
                 margin-bottom: 0;
             }

package/src/components/CmdBreadcrumbs.vue

@@ -3,30 +3,22 @@
     <ul class="cmd-breadcrumbs">
         <li v-if="breadcrumbLabel" class="breadcrumb-label">{{ breadcrumbLabel }}</li>
         <li v-for="(link, index) in breadcrumbLinks || []" :key="index">
-            <!-- begin type 'href' -->
-            <a  v-if="link.type === 'href'" :href="link.path">
-                <!-- begin CmdIcon -->
-                <CmdIcon v-if="link.iconClass" :iconClass="link.iconClass" :type="link.iconType" />
-                <!-- end CmdIcon -->
-                <span v-if="link.text">{{ link.text }}</span>
-            </a>
-            <!-- end type 'href' -->
-
-            <!-- begin type 'router' -->
-            <router-link v-else-if="link.type === 'router'" :to="getRoute(link)">
-                <!-- begin CmdIcon -->
-                <CmdIcon v-if="link.iconClass" :iconClass="link.iconClass" :type="link.iconType" />
-                <!-- end CmdIcon -->
-                <span v-if="link.text">{{ link.text }}</span>
-            </router-link>
-            <!-- end type 'router' -->
-
+             <CmdLink 
+                v-if="!link.type || link.type === 'href' || link.type === 'router'"
+                :linkType="link.type"
+                :path="link.type === 'href' ? link.path : getRoute(link)"
+                :icon="{ iconClass: link.iconClass, type: link.iconType }"
+                :text="link.text" 
+            />
+            <!-- begin no link (recommended for active page)-->
             <span v-else>
                 <!-- begin CmdIcon -->
                 <CmdIcon v-if="link.iconClass" :iconClass="link.iconClass" :type="link.iconType" />
                 <!-- end CmdIcon -->
                 <span v-if="link.text">{{ link.text }}</span>
             </span>
+            <!-- end no link (recommended for active page)-->
+
             <span class="separator" v-if="index < breadcrumbLinks.length - 1">{{ breadcrumbSeparator }}</span>
         </li>
     </ul>
@@ -89,15 +81,6 @@ export default {
         &.breadcrumb-label {
             margin-right: calc(var(--default-margin) / 2);
         }
-
-        a {
-            display: table; /* do not set to (inline-)flex to avoid icon to be underlined by hover/active/focus */
-            text-decoration: none;
-
-            &:hover, &:active, &:focus {
-                text-decoration: underline;
-            }
-        }
     }
 }
 

package/src/components/CmdCompanyLogo.vue

@@ -129,6 +129,9 @@ export default {
         display: block;
         max-height: 10rem;
         border: 0; /* overwrite default settings from frontend-framework */
+        border-radius: 0; /* overwrite default settings from frontend-framework */
+        box-shadow: none; /* overwrite default settings from frontend-framework */
+        
     }
 
     > a {

package/src/components/CmdContainer.vue

@@ -2,7 +2,7 @@
     <!-- begin CmdContainer ---------------------------------------------------------------------------------------- -->
     <div :class="['cmd-container', {box: styleAsBox}]">
         <!-- begin CmdHeadline -->
-        <CmdHeadline v-if="cmdHeadline" v-bind="cmdHeadline" />
+        <CmdHeadline v-if="cmdHeadlineProperties.show" v-bind="cmdHeadlineProperties" />
         <!-- end CmdHeadline -->
 
         <div :class="htmlClasses">
@@ -74,6 +74,13 @@ export default {
             type: Boolean,
             default: false
         },
+        /**
+         * define classes for inner container
+         */
+        innerClasses: {
+            type: [String, Array],
+            required: false
+        },
         /**
          * activate if items should not behave like flex-items (they are now shrunk to their content)
          *
@@ -132,8 +139,20 @@ export default {
         }
     },
     computed: {
+        cmdHeadlineProperties() {
+            return {
+                show: true,
+                headlineLevel: 2,
+                ...this.cmdHeadline
+            }
+        },
         htmlClasses() {
-            const htmlClasses = []
+            let htmlClasses = [];
+
+            if (this.innerClasses !== undefined) {
+                // assign innerClasses (dpeending on type (array or string)) to htmlClasses-array
+                htmlClasses = Array.isArray(this.innerClasses) ? [...htmlClasses, ...this.innerClasses] : [...htmlClasses, this.innerClasses];
+            }
 
             if (this.containerType !== 'default') {
                 if (this.containerType === "flex") {