comand-component-library 4.0.37 → 4.0.39

package/src/components/CmdBox.vue

@@ -25,7 +25,7 @@
 
             <!-- begin CmdHeadline -->
             <CmdHeadline
-                v-else-if="cmdHeadline?.headlineText"
+                v-else-if="cmdHeadline?.headlineText && headlinePosition === 'header'"
                 v-bind="cmdHeadline"
             />
             <!-- end CmdHeadline -->
@@ -41,14 +41,14 @@
 
         <!-- begin default header with slot -->
         <template v-else>
-            <div v-if="useSlots?.includes('header') || cmdHeadline?.headlineText" class="box-header">
+            <div v-if="useSlots?.includes('header') || (cmdHeadline?.headlineText && headlinePosition === 'header')" class="box-header">
                 <!-- begin slot 'header' -->
                 <slot v-if="useSlots?.includes('header')" name="header"></slot>
                 <!-- end slot 'header' -->
 
                 <!-- begin CmdHeadline -->
                 <CmdHeadline
-                    v-if="cmdHeadline?.headlineText"
+                    v-if="cmdHeadline?.headlineText && headlinePosition === 'header'"
                     v-bind="cmdHeadline"
                 />
                 <!-- end CmdHeadline -->
@@ -67,6 +67,19 @@
             >
                 <!-- begin slot 'body' -->
                 <slot name="body">
+                    <!-- begin CmdHeadline -->
+                    <CmdHeadline
+                        v-if="cmdHeadline?.headlineText && headlinePosition === 'body'"
+                        v-bind="cmdHeadline"
+                    />
+                    <!-- end CmdHeadline -->
+
+                    <div v-if="cmdIcon !== undefined" class="body-icon-wrapper">
+                        <!-- begin CmdIcon -->
+                        <CmdIcon :iconClass="cmdIcon.iconClass" :type="cmdIcon.type" />
+                        <!-- end CmdIcon -->
+                    </div>
+
                     <transition-group :name="toggleTransition">
                         <p
                             :class="{
@@ -97,9 +110,15 @@
 
                 <div v-if="textBody"
                      :class="{'default-padding': useDefaultPadding, 'allow-scroll': allowContentToScroll}">
+                    <div v-if="cmdIcon !== undefined" class="body-icon-wrapper">
+                        <!-- begin CmdIcon -->
+                        <CmdIcon :iconClass="cmdIcon.iconClass" :type="cmdIcon.type" />
+                        <!-- end CmdIcon -->
+                    </div>
+
                     <!-- begin CmdHeadline -->
                     <CmdHeadline
-                        v-if="cmdHeadline?.headlineText && repeatHeadlineInBoxBody"
+                        v-if="cmdHeadline?.headlineText && headlinePosition === 'body'"
                         v-bind="cmdHeadline"
                     />
                     <!-- end CmdHeadline -->
@@ -108,17 +127,17 @@
                     <p v-if="textBody" v-html="textBody"></p>
                     <!-- end textBody -->
                 </div>
-
-                <!-- begin additionalLink in box-footer -->
-                <div v-if="cmdLink?.linkType" class="box-footer">
-                    <CmdLink v-bind="cmdLink" />
-                </div>
-                <!-- end additionalLink in box-footer  -->
             </div>
             <!-- end content given by properties -->
         </div>
         <!-- end box-body -->
 
+        <!-- begin additionalLink in box-footer -->
+        <div v-if="cmdLink?.linkType" class="box-footer">
+            <CmdLink v-bind="cmdLink" />
+        </div>
+        <!-- end additionalLink in box-footer  -->
+
         <div v-if="useSlots?.includes('footer')" class="box-footer">
             <!-- begin slot 'footer' -->
             <slot name="footer"></slot>
@@ -307,13 +326,6 @@ export default {
             type: Boolean,
             default: true
         },
-        /**
-         * repeats headline (used in box-header) given by cmdHeadline-property in box-body
-         */
-        repeatHeadlineInBoxBody: {
-            type: Boolean,
-            default: false
-        },
         /**
          * show fade-effect on last line
          *
@@ -451,6 +463,18 @@ export default {
             type: Boolean,
             default: true
         },
+        /**
+         * position of headline
+         *
+         * cmdHeadline-property must be set
+         */
+        headlinePosition: {
+            type: String,
+            default: "header",
+            validator(value) {
+                return value === "header" || value === "body"
+            }
+        },
         /**
          * properties for CmdHeadline-component
          */
@@ -464,6 +488,13 @@ export default {
         cmdLink: {
             type: Object,
             default: {}
+        },
+        /**
+         * properties for CmdIcon-component to set large icon in box-body
+         */
+        cmdIcon: {
+            type: Object,
+            required: false
         }
     },
     /*
@@ -564,6 +595,10 @@ export default {
         }
     }
 
+    > .box-body:first-child {
+        border-top: 0 !important;
+    }
+
     .box-body {
         .allow-scroll {
             overflow-y: auto;
@@ -624,6 +659,16 @@ export default {
                 flex-grow: 1;
             }
 
+            .body-icon-wrapper {
+                display: flex;
+                justify-content: center;
+                margin-bottom: var(--default-margin);
+
+                span[class*="icon"] {
+                    font-size: 8rem;
+                }
+            }
+
             p.cutoff-text {
                 padding: var(--default-padding);
                 margin: 0;

package/src/components/CmdForm.vue

@@ -33,7 +33,7 @@
                 <!-- end loop for formElements -->
 
                 <!-- begin submit-button -->
-                <button v-if="submitButton && submitButton.position === 'insideFieldset'" :class="['button', {primary: submitButton.primary}]" :type="submitButton.type">
+                <button v-if="submitButton && (submitButton.position === 'insideFieldset' || submitButton.position === null) " :class="['button', {primary: submitButton.primary}]" :type="submitButton.type">
                     <span v-if="submitButton.iconClass" :class="submitButton.iconClass"></span>
                     <span v-if="submitButton.text">{{ submitButton.text }}</span>
                 </button>
@@ -42,7 +42,7 @@
 
             <div v-if="submitButton && submitButton.position === 'belowFieldset'" class="button-wrapper">
                 <!-- begin submit-button -->
-                <button :class="['button', {primary: submitButton.primary}]" :type="submitButton.type">
+                <button :class="['button', {primary: submitButton.primary}]" :type="submitButton.type || 'submit'">
                     <span v-if="submitButton.iconClass" :class="submitButton.iconClass"></span>
                     <span v-if="submitButton.text">{{ submitButton.text }}</span>
                 </button>

package/src/components/CmdFormElement.vue

@@ -61,7 +61,7 @@
         <!-- end label-text (+ required asterisk) -->
 
         <span v-if="$attrs.type !== 'checkbox' && $attrs.type !== 'radio' && $attrs.type !== 'search'"
-              class="flex-container"><!-- container required to place inner icons correctly -->
+              class="flex-container inner-input-wrapper"><!-- container required to place inner icons correctly -->
             <!-- begin CmdIcon (for icon inside field) -->
             <CmdIcon v-if="fieldIconClass" class="place-inside" :iconClass="fieldIconClass"
             />
@@ -932,11 +932,17 @@ export default {
     }
 
     &.inline {
-        & > span {
+        .inner-input-wrapper {
             & > a:not(.button) {
                 margin-left: calc(var(--default-margin) / 2);
             }
         }
+
+        &.stretch-field {
+            .inner-input-wrapper {
+                width: 100%;
+            }
+        }
     }
 
     .search-field-wrapper {

package/src/components/CmdThumbnailScroller.vue

@@ -376,7 +376,7 @@ export default {
 .cmd-thumbnail-scroller {
     display: inline-flex; /* do not set to table to avoid overflow is not hidden on small devices */
     flex-direction: column;
-    gap: var(--default-gap);
+    gap: 1rem; /* should not depend on default-gap to avoid odd spacing between headline and scroller */
     width: 100%;
 
     &.full-width:not(.vertical) {
@@ -387,6 +387,10 @@ export default {
         }
     }
 
+    .cmd-headline {
+        margin: 0;
+    }
+
     .cmd-slide-button {
         top: 50% !important;
         height: auto;