comand-component-library 4.2.51 → 4.2.52

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,6 +21,7 @@
         </code>
         <!-- end unformatted code -->
     </div>
+    <!-- end CmdOutput ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>

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>

package/src/components/CmdContainer.vue

@@ -1,93 +1,111 @@
 <template>
+    <!-- begin CmdContainer ---------------------------------------------------------------------------------------- -->
     <div class="cmd-container">
-        <!-- begin cmd-headline -->
-        <CmdHeadline
-            v-if="cmdHeadline"
-            v-bind="cmdHeadline"
-        />
-        <!-- end cmd-headline -->
+        <!-- begin CmdHeadline -->
+        <CmdHeadline v-if="cmdHeadline" v-bind="cmdHeadline" />
+        <!-- end CmdHeadline -->
 
-        <!-- begin contentAboveSlot -->
-        <div v-if="contentAboveSlot" v-html="contentAboveSlot"></div>
-        <!-- end contentAboveSlot -->
-
-        <!-- begin slot-content (one column/slot-item only) -->
-        <slot v-if="oneSlotItem()"></slot>
-        <!-- end slot-content (one column/slot-item only) -->
-
-        <!-- begin grid-/flex-container to wrap multiple columns/items -->
-        <div v-else :class="[setInnerClass, 'inner-slot-wrapper']">
-            <!-- begin slot-content (multiple columns only) -->
-            <slot><p>{{innerText}}</p></slot>
-            <!-- end slot-content (multiple columns only) -->
+        <div :class="htmlClasses">
+            <!-- begin slot-content -->
+            <slot></slot>
+            <!-- end slot-content -->
         </div>
-        <!-- end grid-/flex-container to wrap multiple columns/items -->
-
-        <!-- begin contentBelowSlot -->
-        <div v-if="contentBelowSlot" v-html="contentBelowSlot"></div>
-        <!-- end contentBelowSlot -->
     </div>
+    <!-- end CmdContainer ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>
 export default {
     name: "CmdContainer",
     props: {
-        /**
-         * define (html-)content to display above slot-content
+        /** define container-type
          *
-         * @canContainHtml: true
+         * @affectsStyling: true
+         * @allowedValues: "", "default", "flex", "grid"
          */
-        contentAboveSlot: {
+        containerType: {
             type: String,
-            required: false
+            default: "default",
+            validator(value) {
+                return value === "" ||
+                    value === "default" ||
+                    value === "flex" ||
+                    value === "grid"
+            }
         },
         /**
-         * define inner-text
+         * define content-orientation
+         *
+         * containerType-property must be set to "flex"
+         *
+         * @affectsStyling: true
+         * @allowedValues: "vertical", "horizontal"
          */
-        innerText: {
-            type: String ,
-            required: false
+        contentOrientation: {
+            type: String,
+            default: "vertical",
+            validator(value) {
+                return value === "horizontal" ||
+                    value === "vertical"
+            }
         },
         /**
-         * define (html-)content to display below slot-content
+         * activate if no gap between items should be used
          *
-         * @canContainHtml: true
+         * @affectsStyling: true
          */
-        contentBelowSlot: {
-            type: String,
-            required: false
+        noGap: {
+            type: Boolean,
+            default: true
         },
         /**
-         * define container-type
+         * activate if items should not behave like flex-items (they are now shrunk to their content)
          *
-         * @allowedValues: "grid", "flex"
+         * @affectsStyling: true
          */
-        containerType: {
-            type: String,
-            required: false
+        flexNone: {
+            type: Boolean,
+            default: false
         },
         /**
-         * define content-orientation
+         * define how the items will be aligned vertically
          *
-         * containerType-property must be set to "flex"
+         * attention: if alignContentVertical is activated, this property defines the horizontal alignment
          *
-         * @allowedValues: "vertical", "horizontal"
+         * @allowedValues: top, flex-start, center, flex-end, bottom
+         * @affectsStyling: true
          */
-        contentOrientation: {
+        alignItems: {
             type: String,
-            default: "vertical",
+            required: false,
             validator(value) {
-                return value === "horizontal" ||
-                    value === "vertical"
+                return value === "top" ||
+                    value === "flex-start" ||
+                    value === "center" ||
+                    value === "flex-end" ||
+                    value === "bottom"
             }
         },
         /**
-         * define a class to set on inner div
+         * define how the items will be aligned/justified horizontally.
+         *
+         * attention: if alignContentVertical is activated, this property defines the vertical alignment/justification
+         *
+         * @allowedValues: top, flex-start, center, flex-end, bottom, space-between, space-around
+         * @affectsStyling: true
          */
-        innerClass: {
+        justifyContent: {
             type: String,
-            required: false
+            required: false,
+            validator(value) {
+                return value === "top" ||
+                    value === "flex-start" ||
+                    value === "center" ||
+                    value === "flex-end" ||
+                    value === "bottom" ||
+                    value === "space-between" ||
+                    value === "space-around"
+            }
         },
         /**
          * properties for CmdHeadline-component
@@ -97,43 +115,38 @@ export default {
             required: false
         }
     },
-    methods: {
-        addHandlerProvider() {
-            return ""
-        },
-        oneSlotItem() {
-            if (typeof this.$slots.default !== "function") {
-                return false
-            }
+    computed: {
+        htmlClasses() {
+            const htmlClasses = []
 
-            const vnodes = this.$slots.default()
+            if (this.containerType !== 'default') {
+                if (this.containerType === "flex") {
+                    htmlClasses.push("flex-container")
 
-            if (vnodes.length === 1 && typeof vnodes[0].type === "symbol" && Array.isArray(vnodes[0].children)) {
-                return vnodes[0].children.length === 1
-            }
-            if (vnodes.length === 1 && typeof vnodes[0].type === "object" && vnodes[0].type.name === "RenderComponents" && typeof vnodes[0].props === "object" && Array.isArray(vnodes[0].props.components)) {
-                return vnodes[0].props.components.length === 1
-            }
-            return vnodes.length === 1
-        }
-    },
-    computed: {
-        setInnerClass() {
-            let htmlClass = this.innerClass || ""
-            switch (this.containerType) {
-                case "grid":
-                    htmlClass += " grid-container-create-columns"
-                    break
-                case "flex":
-                    if (this.contentOrientation === "horizontal") {
-                        htmlClass += " flex-container"
-                    } else if (this.contentOrientation === "vertical") {
-                        htmlClass += " flex-container vertical"
+                    if (this.contentOrientation) {
+                        htmlClasses.push(this.contentOrientation === "vertical" ? "flex-direction-column" : null)
+                    }
+                    if (this.useGap) {
+                        htmlClasses.push("no-gap")
                     }
-                    break
-                default: /* do nothing */
+                    if (this.flexNone) {
+                        htmlClasses.push("flex-none")
+                    }
+                    if (this.alignItems) {
+                        htmlClasses.push("align-items-" + this.alignItems)
+                    }
+                }
+
+                if (this.containerType === "grid") {
+                    htmlClasses.push("grid-container-create-columns")
+                }
             }
-            return htmlClass
+
+            if (this.justifyContent) {
+                htmlClasses.push("justify-content-" + this.justifyContent)
+            }
+
+            return htmlClasses.join(" ")
         }
     }
 }
@@ -143,4 +156,4 @@ export default {
 .cmd-container {
     min-height: 1rem;
 }
-</style>
+</style>

package/src/components/CmdCookieDisclaimer.vue

@@ -1,5 +1,6 @@
 <template>
-    <transition name="fade">
+    <transition :name="transition">
+        <!-- begin CmdCookieDisclaimer ---------------------------------------------------------------------------------------- -->
         <div class="cmd-cookie-disclaimer flex-container vertical">
             <!-- begin slot -->
             <template v-if="useSlot">
@@ -135,6 +136,7 @@
                 <!-- end button-wrapper for 'accept'-buttons -->
             </div>
         </div>
+        <!-- end CmdCookieDisclaimer ---------------------------------------------------------------------------------------- -->
     </transition>
 </template>
 
@@ -153,6 +155,15 @@ export default {
         }
     },
     props: {
+         /**
+         * define the transition when cookie disclaimer disappears
+         * 
+         * @allowedValues: "none", "fade", "scroll" 
+         */
+         transition: {
+            type: String,
+            default: "fade"
+        },
         /**
          * define icon-class for collapsed box
          */

package/src/components/CmdCopyrightInformation.vue

@@ -1,7 +1,9 @@
 <template>
+    <!-- begin CmdCopyrightInformation ---------------------------------------------------------------------------------------- -->
     <div class="cmd-copyright-information" role="contentinfo">
         <a href="https://www.comand-ui.com" target="comand-ui-website" lang="en" title="CoManD-UI-Website">&copy; CoManD-UI</a>
     </div>
+    <!-- end CmdCopyrightInformation ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>