comand-component-library 4.0.0 → 4.0.2

package/src/assets/data/main-navigation.json

@@ -1,5 +1,7 @@
 {
   "offcanvasPosition": "right",
+  "stretchMainItems": false,
+  "persistOnMobile": false,
   "navigationEntries": [
     {
       "type": "href",

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

@@ -47,23 +47,14 @@ html {
 
 /* ---------------------------------------------- BEGIN COMPONENTS AND GLOBAL STYLES -------------------------------------------------- */
 /* begin styles for main structure --------------------------------------------------------------------------------------------------------------------------------------------------- */
-body {
-    overflow: hidden;
-}
-
 #page-wrapper {
     scroll-padding-top: 10.5rem;
     display: flex;
     flex-direction: column;
     scroll-snap-type: y mandatory;
-    overflow-y: scroll;
     width: 100dvw;
-    height: 100dvh;
+    min-height: 100dvh;
     scroll-behavior: smooth;
-
-    .cmd-site-footer {
-        margin-top: auto;
-    }
 }
 
 #component-library {

package/src/components/CmdAddressData.vue

@@ -16,7 +16,7 @@
             <!-- begin address-data in vCard microformat -->
             <address class="adr">
                 <!-- begin list with labels -->
-                <template v-if="showLabels && !showIconsOnly">
+                <template v-if="showLabels && (showLabelTexts|| showLabelIcons) && !showIconsOnly">
                     <!-- begin default view -->
                     <dl v-if="!editModeContext">
                         <!-- begin cmd-address-data-item -->

package/src/components/CmdBox.vue

@@ -56,8 +56,8 @@
         <!-- end default header with slot -->
 
         <!-- begin box-body -->
-        <div v-show="open" class="box-body" aria-expanded="true" role="article">
-            <div v-if="useSlots?.includes('body')" :class="{'default-padding': useDefaultPadding}">
+        <div v-show="open" :class="['box-body', boxBodyClass]" aria-expanded="true" role="article">
+            <div v-if="useSlots?.includes('body')" :class="{'default-padding': useDefaultPadding, 'allow-scroll': allowContentToScroll}">
                 <!-- begin slot 'body' -->
                 <slot name="body">
                     <transition-group :name="toggleTransition">
@@ -79,7 +79,7 @@
             <template v-else>
                 <img v-if="image" :src="image.src" :alt="image.altText"/>
 
-                <div :class="{'default-padding': useDefaultPadding}">
+                <div :class="{'default-padding': useDefaultPadding, 'allow-scroll': allowContentToScroll}">
                     <!-- begin CmdHeadline -->
                     <CmdHeadline
                         v-if="cmdHeadline?.headlineText && repeatHeadlineInBoxBody"
@@ -219,6 +219,22 @@ export default {
             type: String,
             default: "content"
         },
+        /**
+         * set if content (in box-body) should scroll
+         *
+         * (maxBoxBodyHeight must be set)
+         */
+        allowContentToScroll: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * set max-height for body (should only be used it allowContentToScroll-property is active)
+         */
+        maxBoxBodyHeight: {
+          type: String,
+          default: "10rem"
+        },
         /**
          * activate if box should be collapsible
          */
@@ -261,12 +277,19 @@ export default {
         /**
          * use transition to expand and collapse box-body
          *
-         * boyType must be 'content' and 'collapsible' must be activated
+         * 'boyType-property' must be set to 'content' and 'collapsible-property' must be activated
          */
         useTransition: {
             type: Boolean,
             default: true
         },
+        /**
+         * custom class placed on box-body-container
+         */
+        boxBodyClass: {
+            type: String,
+            required: false
+        },
         /**
          * set default profile-icon (will eb shown if no user-image exists)
          */
@@ -383,6 +406,12 @@ export default {
         }
     },
     computed: {
+        setMaxBoxBodyHeight() {
+            if (this.allowContentToScroll && this.maxBoxBodyHeight) {
+                return this.maxBoxBodyHeight
+            }
+            return null
+        },
         toggleTransition() {
             if (this.useTransition) {
                 return "fade"
@@ -456,6 +485,13 @@ export default {
         }
     }
 
+    .box-body {
+        .allow-scroll {
+            overflow-y: auto;
+            max-height: v-bind(maxBoxBodyHeight);
+        }
+    }
+
     /* boyType === 'content' */
     &.content {
         > * {

package/src/components/CmdBoxWrapper.vue

@@ -1,7 +1,6 @@
 <template>
     <div class="cmd-box-wrapper">
-        <div v-if="cmdHeadline.headlineText || allowUserToToggleOrientation || allowTogglingCollapsingBoxes"
-             class="flex-container headline-wrapper">
+        <div v-if="cmdHeadline.headlineText || allowUserToToggleOrientation || allowTogglingCollapsingBoxes" class="flex-container headline-wrapper">
             <!-- begin CmdHeadline -->
             <CmdHeadline v-if="cmdHeadline.headlineText" v-bind="cmdHeadline" />
             <!-- end CmdHeadline -->
@@ -12,14 +11,14 @@
                     <CmdIcon :iconClass="collapsingBoxesOpen ? expandBoxesIcon.iconClass : collapseBoxesIcon.iconClass" :type="rowView ? iconGridView.iconType : iconRowView.iconType" />
                     <!-- end CmdIcon -->
                 </a>
-                <a v-if="allowUserToToggleOrientation" href="#" @click.prevent="rowView = !rowView" :title="rowView ? iconRowView.tooltip : iconGridView.tooltip">
+                <a v-if="allowUserToToggleOrientation" href="#" @click.prevent="toggleOrientation" :title="rowView ? iconRowView.tooltip : iconGridView.tooltip">
                     <!-- begin CmdIcon -->
                     <CmdIcon :iconClass="rowView ? iconGridView.iconClass : iconRowView.iconClass" :type="rowView ? iconGridView.iconType : iconRowView.iconType" />
                     <!-- end CmdIcon -->
                 </a>
             </div>
         </div>
-        <div :class="[
+        <div :class="['inner-box-wrapper',
             useFlexbox ? 'flex-container' : 'grid-container-create-columns',
             {
                 'no-gap': !useGap,
@@ -46,7 +45,8 @@ export default {
         return {
             rowView: this.useRowViewAsDefault,
             collapsingBoxesOpen: true,
-            currentOpenBox: []
+            currentOpenBox: [],
+            oneBoxPerRow: false
         }
     },
     props: {
@@ -198,6 +198,10 @@ export default {
         }
     },
     methods: {
+        toggleOrientation() {
+            this.rowView = !this.rowView
+            this.oneBoxPerRow = this.rowView
+        },
         boxIsOpen(index) {
             return this.currentOpenBox.includes(index)
         },
@@ -296,6 +300,12 @@ export default {
         }
     }
 
+    .inner-box-wrapper > *{
+        flex: none;
+        flex-grow: 1;
+        flex-basis: min-content;
+    }
+
     .row-view {
         flex-direction: column;
 

package/src/components/CmdFormElement.vue

@@ -1,7 +1,7 @@
 <template>
     <label
-       v-if="(element === 'input' || element === 'select' || element === 'textarea')"
-       :class="[
+        v-if="(element === 'input' || element === 'select' || element === 'textarea')"
+        :class="[
         'cmd-form-element',
          validationStatus,
          $attrs.class,
@@ -13,9 +13,9 @@
             'has-state': validationStatus
            }
        ]"
-       :for="htmlId"
-       :title="$attrs.title"
-       ref="label">
+        :for="htmlId"
+        :title="$attrs.title"
+        ref="label">
 
         <!-- begin label-text (+ required asterisk) -->
         <span v-if="(labelText || $slots.labeltext) && $attrs.type !== 'checkbox' && $attrs.type !== 'radio'"
@@ -23,7 +23,7 @@
             <span>
                 <template v-if="labelText">{{ labelText }}</template>
                 <!-- begin slot 'labeltext' -->
-                <slot v-else name="labeltext" />
+                <slot v-else name="labeltext"/>
                 <!-- end slot 'labeltext' -->
                 <sup v-if="$attrs.required" aria-hidden="true">*</sup>
             </span>
@@ -41,14 +41,14 @@
             <!-- end CmdTooltipForInputElements -->
 
             <a v-if="($attrs.required || inputRequirements.length) && showStatusIcon"
-                href="#"
-                @click.prevent
-                :title="validationTooltip"
-                :aria-errormessage="tooltipId"
-                aria-live="assertive"
-                :id="tooltipId">
+               href="#"
+               @click.prevent
+               :title="validationTooltip"
+               :aria-errormessage="tooltipId"
+               aria-live="assertive"
+               :id="tooltipId">
                 <!-- begin CmdIcon -->
-                <CmdIcon :iconClass="getStatusIconClass" />
+                <CmdIcon :iconClass="getStatusIconClass"/>
                 <!-- end CmdIcon -->
             </a>
         </span>
@@ -92,8 +92,8 @@
                :title="iconPasswordVisible.tooltip"
             >
                <!-- begin CmdIcon -->
-               <CmdIcon :iconClass="iconPasswordVisible.iconClass" />
-               <!-- end CmdIcon -->
+               <CmdIcon :iconClass="iconPasswordVisible.iconClass"/>
+                <!-- end CmdIcon -->
             </a>
             <!-- end show-password-icon -->
         </span>
@@ -124,7 +124,7 @@
                     <span>
                         <template v-if="labelText">{{ labelText }}</template>
                         <!-- begin slot 'labeltext' -->
-                        <slot v-else name="labeltext" />
+                        <slot v-else name="labeltext"/>
                         <!-- end slot 'labeltext' -->
                         <sup v-if="$attrs.required">*</sup>
                     </span>
@@ -134,15 +134,16 @@
             <!-- begin labels for toggle-switch with switch-label -->
             <template v-else-if="onLabel && offLabel">
                 <span class="switch-label-wrapper">
-                    <input v-bind="elementAttributes"
-                           @change="onChange"
-                           @blur="onBlur"
-                           :checked="isChecked"
-                           :value="inputValue"
-                           :class="{inputClass, validationStatus}"
-                           :id="htmlId"
-                           :disabled="$attrs.disabled"
-                           :aria-invalid="validationStatus === 'error'"
+                    <input
+                        v-bind="elementAttributes"
+                        @change="onChange"
+                        @blur="onBlur"
+                        :checked="isChecked"
+                        :value="inputValue"
+                        :class="{inputClass, validationStatus}"
+                        :id="htmlId"
+                        :disabled="$attrs.disabled"
+                        :aria-invalid="validationStatus === 'error'"
                     />
                     <span class="label-text">{{ onLabel }}</span>
                     <span class="label-text">{{ offLabel }}</span>
@@ -194,14 +195,16 @@
                     :maxlength="getMaxLength()"
                     :value="modelValue"
                 />
-                <a v-if="showSearchButton" href="#" :class="['button no-flex', {disabled: $attrs.disabled}]" :title="iconSearch.tooltip" @click.prevent="executeSearch">
+                <a v-if="showSearchButton" href="#" :class="['button no-flex', {disabled: $attrs.disabled}]"
+                   :title="iconSearch.tooltip" @click.prevent="executeSearch">
                     <!-- begin CmdIcon -->
-                    <CmdIcon :iconClass="iconSearch.iconClass" />
+                    <CmdIcon :iconClass="iconSearch.iconClass"/>
                     <!-- end CmdIcon -->
                 </a>
-                <a v-if="iconDelete?.show" href="#" @click.prevent="$emit('update:modelValue', '')" :title="iconDelete?.tooltip">
+                <a v-if="iconDelete?.show" href="#" @click.prevent="$emit('update:modelValue', '')"
+                   :title="iconDelete?.tooltip">
                     <!-- begin CmdIcon -->
-                    <CmdIcon :iconClass="iconDelete?.iconClass" :type="iconDelete?.iconType" />
+                    <CmdIcon :iconClass="iconDelete?.iconClass" :type="iconDelete?.iconType"/>
                     <!-- end CmdIcon -->
                 </a>
             </span>
@@ -707,8 +710,8 @@ export default {
         },
         // toggle icons for toggle-switch
         toggleSwitchIconClass() {
-            if(this.toggleSwitch && this.useIconsForToggleSwitch && this.toggleSwitchUncheckedIconClass && this.toggleSwitchCheckedIconClass) {
-                if(this.isChecked) {
+            if (this.toggleSwitch && this.useIconsForToggleSwitch && this.toggleSwitchUncheckedIconClass && this.toggleSwitchCheckedIconClass) {
+                if (this.isChecked) {
                     return this.toggleSwitchCheckedIconClass
                 }
                 return this.toggleSwitchUncheckedIconClass
@@ -720,7 +723,7 @@ export default {
         additionalStandardRequirements() {
             const requirements = []
             // check if field is type "email"
-            if(this.$attrs.type === "email") {
+            if (this.$attrs.type === "email") {
                 requirements.push({
                     message: this.getMessage("cmdformelement.validationTooltip.is_valid_email"),
                     valid: () => this.$refs.input.checkValidity()
@@ -823,7 +826,7 @@ export default {
         },
         closeTooltipOnBlur() {
             // close tooltip by calling function from CmdTooltipForInputElements using $refs
-            if(this.$refs.tooltip) {
+            if (this.$refs.tooltip) {
                 this.$refs.tooltip.hideTooltip()
             }
         },
@@ -944,5 +947,6 @@ export default {
         }
     }
 }
+
 /* end cmd-form-element------------------------------------------------------------------------------------------ */
 </style>

package/src/components/CmdHeadline.vue

@@ -1,22 +1,35 @@
 <template>
     <div v-if="!editModeContext || settingsContext || mainSidebarContext"
          :class="['cmd-headline', {'has-pre-headline-text': preHeadlineText, 'has-icon': headlineIcon?.iconClass}, getTextAlign]">
-        <!-- begin CmdIcon -->
-        <CmdIcon v-if="headlineIcon" :iconClass="headlineIcon?.iconClass" :type="headlineIcon?.iconType" />
-        <!-- end CmdIcon -->
 
-        <div v-if="preHeadlineText">
-            <span class="pre-headline-text">{{ preHeadlineText }}</span>
+        <template v-if="preHeadlineText">
             <component v-if="headlineText" :is="headlineTag">
-                <!-- being slot -->
-                <slot>{{ headlineText }}</slot>
-                <!-- end slot -->
+                <!-- begin CmdIcon -->
+                <CmdIcon v-if="headlineIcon" :iconClass="headlineIcon?.iconClass" :type="headlineIcon?.iconType"/>
+                <!-- end CmdIcon -->
+
+                <span class="pre-headline-text-wrapper">
+                    <!-- begin pre-headline-text -->
+                    <span class="pre-headline-text">{{ preHeadlineText }}</span>
+                    <!-- end pre-headline-text -->
+
+                    <span>
+                        <!-- being slot -->
+                         <slot>{{ headlineText }}</slot>
+                         <!-- end slot -->
+                    </span>
+                </span>
             </component>
-        </div>
+        </template>
         <component v-else-if="headlineText" :is="headlineTag">
+            <!-- begin CmdIcon -->
+            <CmdIcon v-if="headlineIcon" :iconClass="headlineIcon?.iconClass" :type="headlineIcon?.iconType"/>
+            <!-- end CmdIcon -->
+            <span>
             <!-- being slot -->
             <slot>{{ headlineText }}</slot>
-            <!-- end slot -->
+                <!-- end slot -->
+            </span>
         </component>
     </div>
     <!-- begin edit-mode -->
@@ -42,26 +55,33 @@
                 placeholder="Headline"
                 v-model="editableHeadlineText"
             />
-            <div v-else-if="headlineText"
+            <template v-else-if="headlineText"
                  :class="['cmd-headline', {'has-pre-headline-text': preHeadlineText, 'has-icon': headlineIcon?.iconClass}, getTextAlign]">
                 <!-- begin CmdIcon -->
                 <CmdIcon v-if="headlineIcon" :iconClass="headlineIcon?.iconClass" :type="headlineIcon?.iconType"/>
                 <!-- end CmdIcon -->
 
-                <div v-if="preHeadlineText">
-                    <span class="pre-headline-text">{{ preHeadlineText }}</span>
+                <template v-if="preHeadlineText">
                     <component v-if="headlineText" :is="headlineTag">
+                        <!-- begin CmdIcon -->
+                        <CmdIcon v-if="headlineIcon" :iconClass="headlineIcon?.iconClass" :type="headlineIcon?.iconType"/>
+                        <!-- end CmdIcon -->
+
+                        <!-- begin pre-headline-text -->
+                        <span class="pre-headline-text">{{ preHeadlineText }}</span>
+                        <!-- end pre-headline-text -->
+
                         <!-- being slot -->
                         <slot>{{ headlineText }}</slot>
                         <!-- end slot -->
                     </component>
-                </div>
+                </template>
                 <component v-else-if="headlineText" :is="headlineTag">
                     <!-- being slot -->
                     <slot>{{ headlineText }}</slot>
                     <!-- end slot -->
                 </component>
-            </div>
+            </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>
@@ -116,7 +136,7 @@ export default {
             required: false
         },
         /**
-         * text-alignment
+         * text-alignment (has no effect if icon is used)
          *
          * @allowedValues: "left", "center", "right"
          */
@@ -133,13 +153,13 @@ export default {
             return this.componentPath || ["props", "cmdHeadline"]
         },
         headlineTag() {
-            if(this.headlineLevel) {
+            if (this.headlineLevel) {
                 return "h" + this.headlineLevel
             }
             return ""
         },
         getTextAlign() {
-            if(this.textAlign) {
+            if (this.textAlign) {
                 return "text-" + this.textAlign
             }
             return ""
@@ -162,7 +182,7 @@ export default {
         onAddItem() {
             // execute editComponent-function from editComponentWrapper to enter editMode directly on "add"
             this.$refs.editComponentWrapper.editComponent()
-            }
+        }
     },
     watch: {
         headlineText: {
@@ -197,18 +217,32 @@ export default {
 
     &.has-pre-headline-text {
         text-align: inherit;
-    }
 
-    p {
-        margin-bottom: 0;
-    }
+        > *:first-child {
+            display: flex;
+            align-items: flex-start;
 
-    &:has(span[class*="icon"]) {
-        display: flex;
-        align-items: center;
-    }
+            span[class*="icon"] {
+                bottom: .2rem;
+            }
+        }
+
+        &.text-center {
+            > *:first-child {
+                justify-content: center;
+            }
+        }
+
+        &.text-right {
+            > *:first-child {
+                justify-content: flex-end;
+            }
+        }
+
+        &.text-right > * {
+            text-align: right;
+        }
 
-    &.has-pre-headline-text {
         &:has(h1) span[class*="icon"] {
             font-size: calc(var(--headline-font-size-h1) * 1.6);
         }
@@ -232,14 +266,43 @@ export default {
         &:has(h6) span[class*="icon"] {
             font-size: calc(var(--headline-font-size-h6) * 2.2);
         }
-    }
 
-    &:has(h4, h5, h6) .pre-headline-text {
-        font-size: var(--font-size-small);
+        .pre-headline-text-wrapper {
+            display: flex;
+            flex-direction: column;
+        }
+
+        .pre-headline-text {
+            font-size: var(--default-font-size);
+            font-weight: var(--font-weight-normal);
+            line-height: 1;
+        }
+
+        &:has(h4, h5, h6) .pre-headline-text {
+            font-size: var(--font-size-small);
+        }
+
+        &.has-icon {
+            &.text-center {
+                justify-content: center;
+
+                * {
+                    text-align: left;
+                }
+            }
+
+            &.text-right {
+                justify-content: flex-end;
+
+                * {
+                    text-align: left;
+                }
+            }
+        }
     }
 
-    .pre-headline-text {
-        line-height: 1;
+    p {
+        margin-bottom: 0;
     }
 
     h1, h2, h3, h4, h5, h6 {
@@ -284,5 +347,6 @@ export default {
         font-size: var(--headline-font-size-h6);
     }
 }
+
 /* end cmd-headline ------------------------------------------------------------------------------------------ */
 </style>

package/src/components/CmdInputGroup.vue

@@ -37,8 +37,8 @@
                aria-live="assertive"
                :id="tooltipId">
                <!-- begin CmdIcon -->
-               <CmdIcon :iconClass="getStatusIconClass" />
-               <!-- end CmdIcon -->
+               <CmdIcon :iconClass="getStatusIconClass"/>
+                <!-- end CmdIcon -->
             </a>
         </span>
         <span v-if="!useSlot" :class="['flex-container', {'no-flex': !stretchHorizontally, 'no-gap': multipleSwitch}]">
@@ -53,7 +53,8 @@
                     :class="{'replace-input-type': replaceInputType, 'toggle-switch': toggleSwitch}"
                 />
                 <!-- begin CmdIcon -->
-                <CmdIcon v-if="multipleSwitch && inputElement.iconClass" :iconClass="inputElement.iconClass" :type="inputElement.iconType" />
+                <CmdIcon v-if="multipleSwitch && inputElement.iconClass" :iconClass="inputElement.iconClass"
+                         :type="inputElement.iconType"/>
                 <!-- end CmdIcon -->
                 <span v-if="inputElement.labelText">{{ inputElement.labelText }}</span>
             </label>
@@ -213,11 +214,11 @@ export default {
     methods: {
         updateStatus() {
             if (this.required) {
-                if(this.inputValue?.length) {
+                if (this.inputValue?.length) {
                     this.validationStatus = ""
                     return
                 }
-                this.validationStatus =  "error"
+                this.validationStatus = "error"
                 return
             }
             this.validationStatus = this.status

package/src/components/CmdListOfLinks.vue

@@ -57,20 +57,20 @@ export default {
     mixins: [EditMode],
     props: {
         /**
-         * activate if component should contain a list of anchors for the section within the page
+         * toggle gab between links
          */
-        sectionAnchors: {
+        useGap: {
             type: Boolean,
-            default: false
+            default: true
         },
         /**
-         * given active section from outside to set class for styling
+         * style component like a box
          *
-         * sectionAnchors-property must be activated
+         * @affectsStyling: true
          */
-        activeSection: {
-            type: Number,
-            default: 0
+        styleAsBox: {
+            type: Boolean,
+            default: false
         },
         /**
          * activate if large icons should be displayed above link text
@@ -81,6 +81,22 @@ export default {
             type: Boolean,
             default: false
         },
+        /**
+         * activate if component should contain a list of anchors for the section within the page
+         */
+        sectionAnchors: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * given active section from outside to set class for styling
+         *
+         * sectionAnchors-property must be activated
+         */
+        activeSection: {
+            type: Number,
+            default: 0
+        },
         /**
          * set horizontal alignment
          *
@@ -114,22 +130,6 @@ export default {
         orientation: {
             type: String,
             default: "vertical"
-        },
-        /**
-         * toggle gab between links
-         */
-        useGap: {
-            type: Boolean,
-            default: true
-        },
-        /**
-         * style component like a box
-         *
-         * @affectsStyling: true
-         */
-        styleAsBox: {
-            type: Boolean,
-            default: false
         }
     },
     computed: {