comand-component-library 4.2.53 → 4.2.55

package/src/components/CmdBox.vue

@@ -159,7 +159,7 @@
        href="#"
        @click.prevent="clickOnProduct(product)">
         <div class="box-header flex-container vertical">
-            <CmdImage v-if="product.image?.src" v-bind="product.image" />
+            <CmdImage v-if="product.image?.src" v-bind="{image:{...product.image}}" />
 
             <!-- begin ribbons -->
             <div v-if="product.new" class="ribbon-new">
@@ -208,16 +208,23 @@
                 </figcaption>
             </figure>
             <!-- 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>
+            <template v-else>
+                <div class="no-user-image">
+                    <CmdIcon
+                    :iconClass="iconUserProfile.iconClass"
+                    :type="iconUserProfile.iconType"
+                    :title="user.name" 
+                    />
+                </div>
+                <p v-if="!rowView" class="user-name">
+                    {{ user.name }}
+                    <span v-if="user.age" class="user-age"> 
+                        ({{ user.age }})
+                    </span>
+                </p>
+            </template>
             <!-- end no user-image -->
         </div>
         <!-- end box-header -->
@@ -241,7 +248,7 @@
 
         <!-- begin box-footer -->
         <div v-if="user.links && user.links.length" class="box-footer">
-            <CmdList :links="user.links" orientation="horizontal" :useGap="false"/>
+            <CmdList :items="user.links" orientation="horizontal" :useGap="false"/>
         </div>
         <!-- end box-footer -->
     </div>
@@ -390,7 +397,7 @@ export default {
          *
          * @required: only available for boxtype===user
          *
-         * @allowedValues: 'business', 'influencer', 'dating'
+         * @allowedValues: 'business', 'influencer', 'material-web'
          */
         profileType: {
             type: String,
@@ -398,7 +405,7 @@ export default {
             validator(value) {
                 return value === "business" ||
                     value === "influencer" ||
-                    value === "dating"
+                    value === "material-web"
             }
         },
         /**
@@ -433,6 +440,10 @@ export default {
         /**
          * icon for user-profile if no user-image exists
          *
+         * {
+         *      iconClass: string,
+         *      iconType: string
+         * }
          * @requiredForAccessibility: partial
          */
          iconUserProfile: {
@@ -600,6 +611,8 @@ export default {
     }
 
     .box-header {
+        overflow: hidden; /* hide edges of optional badges */
+        
         .cmd-headline {
             margin-bottom: 0;
             text-decoration: none;
@@ -624,6 +637,7 @@ export default {
             justify-content: space-between;
             background: var(--box-header-background);
             border-radius: var(--box-border-radius);
+            border-bottom: 0;
 
             &:hover, &:active, &:focus {
                 background: var(--color-white);
@@ -633,6 +647,10 @@ export default {
                 }
             }
         }
+
+        .box-body {
+            border-top: var(--box-border);
+        }
     }
 
     > .box-body:first-child {
@@ -693,7 +711,6 @@ export default {
         .box-body {
             display: flex;
             flex-grow: 1;
-            border-top: var(--box-border);
 
             .box-body-padding {
                 padding: var(--box-body-padding);
@@ -855,12 +872,6 @@ export default {
                 border-bottom-left-radius: 0;
                 border-bottom-right-radius: 0;
             }
-
-            figcaption {
-                font-size: 2rem;
-                font-weight: bold;
-                padding: var(--default-padding);
-            }
         }
 
         .box-body {
@@ -888,13 +899,22 @@ export default {
         &:hover, &:active, &:focus {
             border-color: var(--hyperlink-color-highlighted);
         }
+
+        
+        &.row-view {
+            flex-direction: row;
+            align-items: center;
+        }
     }
 
     /* boxType === 'user' */
     &.user {
+        --box-header-padding: var(--default-padding);
+
         .user-name {
             color: var(--color-scheme-text-color);
             font-size: 2rem;
+            font-weight: bold;
         }
 
         .user-age {
@@ -906,15 +926,12 @@ export default {
             --box-header-text-color: var(--primary-color);
             
             background: none;
+            gap: calc(var(--default-gap) / 2);
 
             > div:first-child > [class*="icon-"] {
                 aspect-ratio: 1/1;
             }
 
-            &:has(img) {
-                --box-header-padding: var(--default-padding);
-            }
-
             img {
                 margin: 0 auto var(--default-margin) auto;
 
@@ -937,15 +954,19 @@ export default {
                 color: var(--color-white);
                 justify-content: center;
                 align-items: center;
-                margin: 0;
                 font-size: var(--default-icon-size);
             }
+
+            .no-user-image {
+                background: var(--default-background);
+            }
         }
 
         .box-body {
             flex-grow: 1;
             padding: var(--default-padding);
-            padding-top: 0;
+
+            border-bottom: 0;
 
             p {
                 text-align: center;
@@ -966,7 +987,7 @@ export default {
             padding: 0;
             border-top: var(--box-border);
 
-            .cmd-list-of-links {
+            .cmd-list {
                 ul {
                     width: 100%;
                     margin-bottom: 0;
@@ -1026,6 +1047,10 @@ export default {
         }
 
         &.row-view {
+            .box-header {
+                border: 0;
+            }
+
             .box-body {
                 padding: 0;
 

package/src/components/CmdBoxWrapper.vue

@@ -300,8 +300,6 @@ export default {
     }
 
     .row-view {
-        flex-direction: column;
-
         p.cutoff-text {
             height: auto;
 
@@ -332,8 +330,6 @@ export default {
             grid-template-columns: repeat(1, minmax(0, 1fr));
         }
     }
-
-
 }
 </style>
 

package/src/components/CmdFancyBox.vue

@@ -93,7 +93,6 @@
                 <!-- end slot-content -->
             </div>
         </div>
-
         <footer v-if="showSubmitButtons && fancyBoxOptionsProperties.submitButtons" class="flex-container flex-none">
             <!-- begin cancel-button -->
             <button
@@ -545,9 +544,10 @@ export default FancyBox
 
     > header {
         display: flex;
+        height: auto; /* overwrite possible overwrites by global header */
+        max-height: none; /* overwrite possible overwrites by global header */
     }
 
-
     > .grayscale {
         filter: grayscale(1);
     }

package/src/components/CmdForm.vue

@@ -68,7 +68,7 @@
                 <small v-if="mandatoryText" class="mandatory-text"><sup>*</sup>{{ mandatoryText }}</small>     
                 <!-- begin cancel-button (below fieldset) -->
                 <button 
-                    v-if="cancelButtonOptions !== undefined"
+                    v-if="cancelButtonOptions.show"
                     :class="['button', {'stretch-on-small-devices': cancelButtonOptions.stretchOnSmallDevices, disabled: cancelButtonOptions.disabled, cancel: cancelButtonOptions.useDefaultStyling}]" 
                     type="button"
                     @click="cancelFormSubmit"
@@ -79,7 +79,8 @@
                 <!-- end cancel-button (below fieldset) -->
 
                 <!-- begin submit-button (below fieldset) -->
-                <button :class="['button', {'stretch-on-small-devices': submitButtonOptions.stretchOnSmallDevices, primary: submitButtonOptions.primary, disabled: submitButtonOptions.disabled}]"
+                <button v-if="submitButtonOptions.show"
+                        :class="['button', {'stretch-on-small-devices': submitButtonOptions.stretchOnSmallDevices, primary: submitButtonOptions.primary, disabled: submitButtonOptions.disabled}]"
                         :type="submitButtonOptions.type || 'submit'">
                     <span v-if="submitButtonOptions.iconClass" :class="submitButtonOptions.iconClass"></span>
                     <span v-if="submitButtonOptions.text">{{ submitButtonOptions.text }}</span>
@@ -220,6 +221,7 @@ export default {
         },
         cancelButtonOptions() {
             return {
+                show: true,
                 iconClass: "icon-cancel-circle",
                 text: "Cancel",
                 useDefaultStyling: false,
@@ -230,6 +232,7 @@ export default {
         },
         submitButtonOptions() {
             return {
+                show: true,
                 iconClass: "icon-check-circle",
                 text: "Submit",
                 type: "submit",

package/src/components/CmdLink.vue

@@ -98,7 +98,7 @@ export default {
          */
         icon: {
             type: Object,
-            default: {}
+            default: null
         },
         /**
          * displayed text

package/src/components/CmdList.vue

@@ -73,7 +73,7 @@
                             <CmdTag 
                                 :tagText="tag"
                                 :highlightLevel="highlightLevel" 
-                                :removeTagByClick="true" 
+                                :removeTagByClick="removeTagByClick" 
                                 @click.prevent="removeTag(event, index)" 
                             />
                             <!-- end CmdTag -->
@@ -283,8 +283,19 @@ export default {
                     value === "vertical"
             }
         },
+        /**
+         * allow tags to be remove by click 
+         * 
+         * (listContentType-property must be set to "tags")
+         */
+        removeTagByClick: {
+            type: Boolean,
+            default: false
+        },
         /**
          * define remove-icon/link for tags
+         * 
+         * (listContentType-property must be set to "tags" and removeTabByClick-property must be set to true)
          */
         iconRemoveTag: {
             type: Object,

package/src/components/CmdSystemMessage.vue

@@ -7,20 +7,6 @@
             :role="validationStatus === 'error' ? 'alert' : 'dialog'"
             :aria-labelledby="htmlId"
         >
-            <!-- begin close-icon -->
-            <a
-                v-if="iconClose.show && iconClose.iconClass"
-                href="#"
-                class="close-button"
-                @click.prevent="hideSystemMessage"
-                :title="iconClose.tooltip"
-            >
-                <!-- begin CmdIcon -->
-                <CmdIcon :iconClass="iconClose.iconClass" :type="iconClose.iconType" />
-                <!-- end CmdIcon -->
-            </a>
-            <!-- end close-icon -->
-
             <!-- begin slot-content -->
             <slot>
                 <!-- begin CmdHeadline -->
@@ -34,6 +20,20 @@
                 <!-- end CmdHeadline -->
             </slot>
             <!-- end slot-content -->
+
+            <!-- begin close-icon -->
+            <a
+                v-if="iconClose.show && iconClose.iconClass"
+                href="#"
+                class="close-button"
+                @click.prevent="hideSystemMessage"
+                :title="iconClose.tooltip"
+            >
+                <!-- begin CmdIcon -->
+                <CmdIcon :iconClass="iconClose.iconClass" :type="iconClose.iconType" />
+                <!-- end CmdIcon -->
+            </a>
+            <!-- end close-icon -->
         </div>
     </transition>
     <!-- end CmdSystemMessage ---------------------------------------------------------------------------------------- -->