comand-component-library 4.2.51 → 4.2.53

package/src/assets/styles/component-library-global-styles.scss

@@ -284,22 +284,8 @@ a img.flag {
         border-color: var(--status-color);
     }
 }
-
-.cmd-link.button {
-    &.router-link-active {
-        background: var(--button-primary-background-highlighted); /* set background for active router-links styled as buttons buttons */
-    }
-}
-
 /* end tooltip for cmd-form-element and cmd-fake-select -------------------------------------------------------------------------------------------------------------------- */
 
-/* begin cmd-link -------------------------------------------------------------------------------------------------------------------- */
-.cmd-link.button {
-    &.router-link-active {
-        background: var(--button-primary-background-highlighted); /* set background for active router-links styled as buttons */
-    }
-}
-/* end cmd-link -------------------------------------------------------------------------------------------------------------------- */
 /* ----------------------------------------------- END COMPONENTS AND GLOBAL STYLES --------------------------------------------------- */
 
 /* ---------------------------------------------- BEGIN MEDIA QUERIES AND BROWSER SPECIFIC STYLES -------------------------------------------------- */

package/src/componentSettingsDataAndControls.vue

@@ -104,24 +104,22 @@ data() {
                 headlineText: "Container Headline",
                 headlineLevel: 3
             },
-            contentAboveSlot: "<p>Content above slot</p>",
-            contentBelowSlot: "<p>Content below slot</p>",
-            containerType: "flex"
+            containerType: "default"
         },
         cmdContainerSettingsControls: {
             containerType: [
                 {
-                    text: "flex (default)",
+                    text: "default (default)",
+                    text: "default",
+                },
+                {
+                    text: "flex",
                     value: "flex"
                 },
                 {
                     text: "grid",
                     value: "grid"
-                },
-                {
-                    text: "none",
-                    value: ""
-                },
+                }
             ],
             contentOrientation: [
                 {
@@ -334,6 +332,24 @@ data() {
                     text: "Right",
                     value: "right"
                 }
+            ],
+            highlightLevel: [
+                {
+                    text: "none (default)",
+                    value: "none"
+                },
+                {
+                    text: "primary",
+                    value: "primary"
+                },
+                {
+                    text: "secondary",
+                    value: "secondary"
+                },
+                {
+                    text: "tertiary",
+                    value: "tertiary"
+                }
             ]
         },
         cmdInputGroupSettingsData: {
@@ -401,6 +417,24 @@ data() {
                     text: "button",
                     value: "button"
                 }
+            ],
+            highlightLevel: [
+                {
+                    text: "none",
+                    value: "none"
+                },
+                {
+                    text: "primary (default)",
+                    value: "primary"
+                },
+                {
+                    text: "secondary",
+                    value: "secondary"
+                },
+                {
+                    text: "tertiary",
+                    value: "tertiary"
+                }
             ]
         },
         cmdListSettingsData: {
@@ -508,6 +542,24 @@ data() {
                     text: "icon-chevron-two-stripes-right",
                     value: "icon-chevron-two-stripes-right"
                 }
+            ],
+            highlightLevel: [
+                {
+                    text: "none",
+                    value: "none"
+                },
+                {
+                    text: "primary (default)",
+                    value: "primary"
+                },
+                {
+                    text: "secondary",
+                    value: "secondary"
+                },
+                {
+                    text: "tertiary",
+                    value: "tertiary"
+                }
             ]
         },
         cmdNewsletterSubscriptionSettingsData: {
@@ -599,6 +651,31 @@ data() {
                 }
             ]
         },
+        cmdParagraphSettingsData: {
+            content: "This is a paragraph with content provided per property with <dfn title='HyperText Markup Language'>HTML</dfn> inside. Its alignment can be adjusted with the <em>textAlign</em>-property. Additionally the number of columns (1-4) can be defined by <em>numberOfColumns</em>-property.",
+            numberOfColumns: 1,
+            textAlign: "left",
+        },
+        cmdParagraphSettingsControls: {
+            textAlign: [
+                {
+                    text: "left",
+                    value: "left"
+                },
+                {
+                    text: "center",
+                    value: "center"
+                },
+                {
+                    text: "right",
+                    value: "right"
+                },
+                {
+                    text: "justify",
+                    value: "justify"
+                }
+            ]
+        },
         cmdSiteHeaderSettingsData: {
             sticky: false,
             navigationInline: false,
@@ -669,7 +746,7 @@ data() {
         cmdSystemMessageSettingsData: {
             validationStatus: "error",
             fullWidth: true,
-            systemMessage: "This is an error message!",
+            systemMessage: "This is an system message!",
             messageHeadlineLevel: 4
         },
         cmdSystemMessageSettingsControls: {
@@ -703,6 +780,50 @@ data() {
             useSlot: false,
             activeTab: 0
         },
+        cmdTabsSettingsControls: {
+            highlightLevel: [
+                {
+                    text: "none",
+                    value: "none"
+                },
+                {
+                    text: "primary (default)",
+                    value: "primary"
+                },
+                {
+                    text: "secondary",
+                    value: "secondary"
+                },
+                {
+                    text: "tertiary",
+                    value: "tertiary"
+                }
+            ]
+        },
+        cmdTagSettingsData: {
+            tagText: "Text for Tag",
+            removeByClick: false
+        },
+        cmdTagSettingsControls: {
+            highlightLevel: [
+                {
+                    text: "none (default)",
+                    value: "none"
+                },
+                {
+                    text: "primary",
+                    value: "primary"
+                },
+                {
+                    text: "secondary",
+                    value: "secondary"
+                },
+                {
+                    text: "tertiary",
+                    value: "tertiary"
+                }
+            ]
+        },
         cmdTextImageBlockSettingsData: {
             htmlContent: "Text given as html-content",
             paragraphTextAlign: "left",

package/src/components/CmdAddressData.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdAddressData ---------------------------------------------------------------------------------------- -->
     <div class="cmd-address-data vcard">
         <!-- begin slot -->
         <template v-if="useSlot">
@@ -169,6 +170,7 @@
             <!-- end address-data in vCard microformat -->
         </template>
     </div>
+    <!-- end CmdAddressData ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>

package/src/components/CmdAddressDataItem.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdAddressDataItem ---------------------------------------------------------------------------------------- -->
     <dt :class="['cmd-address-data-item', {'address': addressEntry.name === 'address'}]" :id="addressEntry.id">
         <!-- begin CmdIcon -->
         <CmdIcon
@@ -165,7 +166,7 @@
         <!-- end unlinked address -->
     </dd>
     <!-- end data for address -->
-
+    <!-- end CmdAddressDataItem ---------------------------------------------------------------------------------------- -->
 </template>
 <!-- end data (except for address) -->
 <script>

package/src/components/CmdBackToTopButton.vue

@@ -1,13 +1,13 @@
 <template>
-    <!-- begin cmd-back-to-top-button -->
-    <transition name="fade">
+    <!-- begin CmdBackToTopButton ---------------------------------------------------------------------------------------- -->
+    <transition :name="transition">
         <a v-if="show" class="cmd-back-to-top-button button" id="back-to-top-button" href="#" role="button" :title="cmdIcon.tooltip" @click.prevent="onBackToTop">
             <!-- begin CmdIcon -->
             <CmdIcon :iconClass="cmdIcon.iconClass" :type="cmdIcon.iconType" />
             <!-- end CmdIcon -->
         </a>
     </transition>
-    <!-- end cmd-back-to-top-button -->
+    <!-- end CmdBackToTopButton ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>
@@ -21,6 +21,15 @@ export default {
         }
     },
     props: {
+        /**
+         * define the transition when button appears/disappears
+         * 
+         * @allowedValues: "none", "fade", "scroll" 
+         */
+        transition: {
+            type: String,
+            default: "fade"
+        },
         /**
          * define which container's scroll-behavior should be observed (can be any selector)
          */

package/src/components/CmdBankAccountData.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdBankAccountData ---------------------------------------------------------------------------------------- -->
     <div class="cmd-bank-account-data">
         <!-- begin slot -->
         <template v-if="useSlot">
@@ -33,6 +34,7 @@
             <!-- end additional information -->
         </template>
     </div>
+    <!-- end CmdBankAccountData ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>

package/src/components/CmdBasicForm.vue

@@ -1,5 +1,6 @@
 <template>
-    <div class="cmd-pages-basic-form">
+    <!-- begin CmdBasicForm---------------------------------------------------------------------------------------- -->
+    <div class="cmd-basic-form">
         <!-- begin CmdHeadline -->
         <CmdHeadline v-if="cmdHeadline" v-bind="cmdHeadline" />
         <!-- end CmdHeadline -->
@@ -258,6 +259,7 @@
         </CmdForm>
         <!-- end CmdForm -->
     </div>
+    <!-- end CmdBasicForm---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>
@@ -611,7 +613,8 @@ export default {
 </script>
 
 <style>
-.cmd-pages-basic-form {
+/* begin cmd-basic-form ---------------------------------------------------------------------------------------- */
+.cmd-basic-form {
     fieldset {
         margin: 0;
 
@@ -629,5 +632,6 @@ export default {
 .grecaptcha-badge {
     bottom: 10rem !important;
 }
+/* end cmd-basic-form ---------------------------------------------------------------------------------------- */
 </style>
 

package/src/components/CmdBox.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdBox ---------------------------------------------------------------------------------------- -->
     <!-- begin boxType 'content' -->
     <div v-if="boxType === 'content'"
          ref="cmdBox"
@@ -158,11 +159,7 @@
        href="#"
        @click.prevent="clickOnProduct(product)">
         <div class="box-header flex-container vertical">
-            <figure v-if="product.image !== undefined">
-                <img :src="product.image.src" :alt="product.image.alt"/>
-                <figcaption>{{ product.name }}</figcaption>
-            </figure>
-            <p v-else>{{ product.name }}</p>
+            <CmdImage v-if="product.image?.src" v-bind="product.image" />
 
             <!-- begin ribbons -->
             <div v-if="product.new" class="ribbon-new">
@@ -200,16 +197,28 @@
          ]">
         <!-- begin box-header -->
         <div class="box-header flex-container vertical">
-            <figure v-if="user.image">
+            <!-- begin user-image -->
+            <figure v-if="user.image?.src">
                 <img :src="user.image.src" :alt="user.image.alt"/>
-                <figcaption v-if="!rowView" class="user-name">{{ user.name }}<span v-if="user.age" class="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>
+            <!-- end no user-image -->
+
+            <!-- begin no user-image -->
+            <div v-else class="no-user-image">
+                <CmdIcon
+                  :iconClass="iconUserProfile.iconClass"
+                  :type="iconUserProfile.iconType"
+                  :title="user.name" 
+                />
                 <p v-if="!rowView" class="user-name">{{ user.name }}</p>
             </div>
+            <!-- end no user-image -->
         </div>
         <!-- end box-header -->
 
@@ -237,6 +246,7 @@
         <!-- end box-footer -->
     </div>
     <!-- end boxType 'user' -->
+    <!-- end CmdBox ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>
@@ -357,13 +367,6 @@ export default {
             type: String,
             required: false
         },
-        /**
-         * set the default profile-icon (will eb shown if no user-image exists)
-         */
-        defaultProfileIconClass: {
-            type: String,
-            default: "icon-user-profile"
-        },
         /**
          * the shown product (incl. name, price, image, description)
          *
@@ -427,6 +430,20 @@ export default {
             type: String,
             default: ""
         },
+        /**
+         * icon for user-profile if no user-image exists
+         *
+         * @requiredForAccessibility: partial
+         */
+         iconUserProfile: {
+            type: Object,
+            default: function () {
+                return {
+                    iconClass: "icon-user-profile",
+                    iconType: "auto"
+                }
+            }
+        },
         /**
          * icon to expand an accordion
          *
@@ -440,7 +457,7 @@ export default {
                     tooltip: "Close content",
                     iconType: "auto"
                 }
-            },
+            }
         },
         /**
          * icon to collapse an accordion
@@ -597,7 +614,7 @@ export default {
         align-self: auto !important; /* overwrite settings form frontend-framework */
     }
 
-    &:has(.cmd-image:only-child) {
+    &:has(> .cmd-image:only-child) {
         align-self: start !important;
     }
 
@@ -849,10 +866,13 @@ export default {
         .box-body {
             flex-grow: 1;
             padding: var(--default-padding);
-            padding-bottom: 0;
 
             > * {
                 text-align: center;
+
+                &:last-child {
+                    margin-bottom: 0;
+                }
             }
 
             .price {
@@ -884,20 +904,19 @@ export default {
         > .box-header {
             --default-icon-size: 6rem;
             --box-header-text-color: var(--primary-color);
-
+            
             background: none;
 
             > div:first-child > [class*="icon-"] {
                 aspect-ratio: 1/1;
             }
 
-            img, > div:first-child > [class*="icon-"] {
-                display: table;
-                margin: 0 auto var(--default-margin) auto !important;
-                padding: calc(var(--default-padding) * 3);
-                border-radius: var(--full-circle);
-                background: var(--box-header-background);
-                color: var(--color-white);
+            &:has(img) {
+                --box-header-padding: var(--default-padding);
+            }
+
+            img {
+                margin: 0 auto var(--default-margin) auto;
 
                 & + p, & + figcaption {
                     margin: 0 auto;
@@ -907,13 +926,17 @@ export default {
                 }
             }
 
-            img {
+            img, .no-user-image {
                 padding: 0;
                 width: calc(var(--default-icon-size) * 2);
                 aspect-ratio: 1/1;
-            }
-
-            > div:first-child > [class*="icon-"] {
+                max-width: 12rem;
+                border-radius: var(--full-circle);
+                background: var(--box-header-background);
+                display: flex;
+                color: var(--color-white);
+                justify-content: center;
+                align-items: center;
                 margin: 0;
                 font-size: var(--default-icon-size);
             }
@@ -1003,8 +1026,12 @@ export default {
         }
 
         &.row-view {
-            .box-body p {
-                text-align: left;
+            .box-body {
+                padding: 0;
+
+                p {
+                    text-align: left;
+                }
             }
 
             .box-footer {

package/src/components/CmdBoxWrapper.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdBoxWrapper ---------------------------------------------------------------------------------------- -->
     <div class="cmd-box-wrapper">
         <div v-if="cmdHeadline.headlineText || allowUserToToggleOrientation" class="flex-container headline-wrapper">
             <!-- begin CmdHeadline -->
@@ -31,6 +32,7 @@
             </slot>
         </div>
     </div>
+    <!-- end CmdBoxWrapper ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>
@@ -313,6 +315,10 @@ export default {
             padding: var(--default-padding);
             align-items: center;
 
+            img {
+                margin-bottom: 0;
+            }
+
             .box-footer {
                 margin-top: 0;
             }

package/src/components/CmdBreadcrumbs.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdBreadcrumbs ---------------------------------------------------------------------------------------- -->
     <ul class="cmd-breadcrumbs">
         <li v-if="breadcrumbLabel" class="breadcrumb-label">{{ breadcrumbLabel }}</li>
         <li v-for="(link, index) in breadcrumbLinks || []" :key="index">
@@ -29,6 +30,7 @@
             <span class="separator" v-if="index < breadcrumbLinks.length - 1">{{ breadcrumbSeparator }}</span>
         </li>
     </ul>
+    <!-- end CmdBreadcrumbs ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>

package/src/components/CmdCodeOutput.vue

@@ -1,5 +1,6 @@
 
 <template>
+    <!-- begin CmdOutput ---------------------------------------------------------------------------------------- -->
     <div :class="['cmd-code-output', {box : styleAsBox}]" style="max-height: maxHeight">
         <a v-if="allowCopyByClick" href="#" @click.prevent="copyToClipboard()" :title="cmdIcon.tooltip">
             <!-- begin CmdIcon -->
@@ -20,11 +21,10 @@
         </code>
         <!-- end unformatted code -->
     </div>
+    <!-- end CmdOutput ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>
-import { ref } from "vue"
-
 export default {
     name: "CmdCodeOutput",
     props: {

package/src/components/CmdCompanyLogo.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdCompanyLogo ---------------------------------------------------------------------------------------- -->
     <div class="cmd-company-logo company-logo">
         <router-link v-if="link?.type === 'router'" :to="link?.path" :title="link?.tooltip">
             <!-- begin CmdImage -->
@@ -14,6 +15,7 @@
         <CmdImage v-else :image="image" @image-loaded="onImageLoaded" />
         <!-- end CmdImage -->
     </div>
+    <!-- end CmdCompanyLogo ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>