comand-component-library 4.0.38 → 4.0.40

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 v-bind="cmdIcon" />
+                        <!-- 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/CmdHeadline.vue

@@ -1,11 +1,12 @@
 <template>
     <!-- begin default-view -->
     <div v-if="!editModeContext || settingsContext || mainSidebarContext || headlineText"
-         :class="['cmd-headline', {'has-pre-headline-text': preHeadlineText, 'has-icon': headlineIcon?.iconClass}, getTextAlign]">
+         :class="['cmd-headline', {'has-pre-headline-text': preHeadlineText, 'has-icon': cmdIcon?.iconClass}, headlineTextAlign]">
+        <!-- begin headline with pre-headline-text -->
         <template v-if="preHeadlineText">
             <component v-if="headlineText" :is="headlineTag">
                 <!-- begin CmdIcon -->
-                <CmdIcon v-if="headlineIcon" :iconClass="headlineIcon?.iconClass" :type="headlineIcon?.iconType"/>
+                <CmdIcon v-if="cmdIcon" v-bind="cmdIcon" />
                 <!-- end CmdIcon -->
 
                 <span class="pre-headline-text-wrapper">
@@ -21,9 +22,12 @@
                 </span>
             </component>
         </template>
+        <!-- end headline with pre-headline-text -->
+
+        <!-- begin headline without pre-headline-text -->
         <component v-else :is="headlineTag">
             <!-- begin CmdIcon -->
-            <CmdIcon v-if="headlineIcon" :iconClass="headlineIcon?.iconClass" :type="headlineIcon?.iconType"/>
+            <CmdIcon v-if="cmdIcon" v-bind="cmdIcon" />
             <!-- end CmdIcon -->
 
             <span>
@@ -32,6 +36,7 @@
                 <!-- end slot -->
             </span>
         </component>
+        <!-- end headline without pre-headline-text -->
     </div>
     <!-- end default-view -->
 
@@ -48,26 +53,29 @@
         :allowDeleteComponent="!!headlineText"
     >
         <template v-slot="slotProps">
+            <!-- begin CmdFormElement -->
             <CmdFormElement
                 v-if="slotProps.editing"
                 element="input"
                 type="text"
-                :class="['edit-mode', 'headline', 'h'+ headlineLevel, getTextAlign]"
+                :class="['edit-mode', 'headline', 'h'+ headlineLevel, headlineTextAlign]"
                 labelText="Headline"
                 :showLabel="false"
                 placeholder="Headline"
                 v-model="editableHeadlineText"
             />
+            <!-- end CmdFormElement -->
+
             <template v-else-if="headlineText"
-                 :class="['cmd-headline', {'has-pre-headline-text': preHeadlineText, 'has-icon': headlineIcon?.iconClass}, getTextAlign]">
+                 :class="['cmd-headline', {'has-pre-headline-text': preHeadlineText, 'has-icon': cmdIcon?.iconClass}, headlineTextAlign]">
                 <!-- begin CmdIcon -->
-                <CmdIcon v-if="headlineIcon" :iconClass="headlineIcon?.iconClass" :type="headlineIcon?.iconType"/>
+                <CmdIcon v-if="cmdIcon" v-bind="cmdIcon" />
                 <!-- end CmdIcon -->
 
                 <template v-if="preHeadlineText">
                     <component v-if="headlineText" :is="headlineTag">
                         <!-- begin CmdIcon -->
-                        <CmdIcon v-if="headlineIcon" :iconClass="headlineIcon?.iconClass" :type="headlineIcon?.iconType"/>
+                        <CmdIcon v-if="cmdIcon" v-bind="cmdIcon" />
                         <!-- end CmdIcon -->
 
                         <!-- begin pre-headline-text -->
@@ -85,6 +93,7 @@
                     <!-- end slot -->
                 </component>
             </template>
+
             <!-- begin show placeholder if no image exists (and component is not edited) -->
             <button v-else-if="componentActive" type="button" class="button confirm" @click="onAddItem">
                 <span class="icon-plus"></span>
@@ -131,13 +140,6 @@ export default {
             type: String,
             required: false
         },
-        /**
-         * icon-class for icon shown left/before headline
-         */
-        headlineIcon: {
-            type: Object,
-            required: false
-        },
         /**
          * text-alignment (has no effect if icon is used)
          *
@@ -151,6 +153,13 @@ export default {
                     value === "center" ||
                     value === "right"
             }
+        },
+        /**
+         * properties for CmdIcon-component to show icon left/before headline
+         */
+        cmdIcon: {
+            type: Object,
+            required: false
         }
     },
     computed: {
@@ -166,7 +175,7 @@ export default {
             }
             return ""
         },
-        getTextAlign() {
+        headlineTextAlign() {
             if (this.textAlign) {
                 return "text-" + this.textAlign
             }

package/src/components/CmdSystemMessage.vue

@@ -22,7 +22,7 @@
             <!-- begin CmdHeadline -->
             <CmdHeadline
                 class="message-headline"
-                :headlineIcon="headlineIcon"
+                :cmdIcon="headlineIcon"
                 :headlineText="systemMessage"
                 :headlineLevel="messageHeadlineLevel"
                 :id="htmlId"

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;

package/src/components/CmdWidthLimitationWrapper.vue

@@ -5,9 +5,7 @@
             <!-- begin cmd-headline -->
             <CmdHeadline
                 v-if="cmdHeadline"
-                :pre-headline-text="cmdHeadline.preHeadlineText"
-                :headline-text="cmdHeadline.headlineText"
-                :headline-level="cmdHeadline.headlineLevel"
+                v-bind="cmdHeadline"
             />
             <!-- end cmd-headline -->
 

package/src/components/ComponentSettings.vue

@@ -2,7 +2,7 @@
     <CmdBox
         :use-slots="['body']"
         :collapsible="true"
-        :cmdHeadline="{headlineText: readableName(componentName), headlineLevel: 4, headlineIcon: {iconClass: 'icon-settings-template'}}"
+        :cmdHeadline="{headlineText: readableName(componentName), headlineLevel: 4, cmdIcon: {iconClass: 'icon-settings-template'}}"
         :openCollapsedBox="true"
         boxBodyClass="settings-body"
     >

package/src/documentation/generated/CmdHeadlinePropertyDescriptions.json

@@ -14,7 +14,7 @@
             "small pre-headline-text above main-headline"
         ]
     },
-    "headlineIcon": {
+    "cmdIcon": {
         "comments": [
             "icon-class for icon shown left/before headline"
         ]