comand-component-library 3.3.87 → 4.0.1

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: {
@@ -181,10 +201,8 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style>
 /* begin cmd-headline ------------------------------------------------------------------------------------------ */
-//@import '../assets/styles/variables';
-
 .cmd-headline {
     margin-bottom: var(--default-margin);
     gap: calc(var(--default-gap) / 2);
@@ -199,47 +217,92 @@ 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;
+            }
+        }
 
-    &:has(h1) span[class*="icon"] {
-        font-size: calc(var(--headline-font-size-h1) * 1.6);
-    }
+        &.text-center {
+            > *:first-child {
+                justify-content: center;
+            }
+        }
 
-    &:has(h2) span[class*="icon"] {
-        font-size: calc(var(--headline-font-size-h2) * 1.8);
-    }
+        &.text-right {
+            > *:first-child {
+                justify-content: flex-end;
+            }
+        }
 
-    &:has(h3) span[class*="icon"] {
-        font-size: calc(var(--headline-font-size-h3) * 1.9);
-    }
+        &.text-right > * {
+            text-align: right;
+        }
 
-    &:has(h4) span[class*="icon"] {
-        font-size: calc(var(--headline-font-size-h4) * 2);
-    }
+        &:has(h1) span[class*="icon"] {
+            font-size: calc(var(--headline-font-size-h1) * 1.6);
+        }
 
-    &:has(h5) span[class*="icon"] {
-        font-size: calc(var(--headline-font-size-h5) * 2.1);
-    }
+        &:has(h2) span[class*="icon"] {
+            font-size: calc(var(--headline-font-size-h2) * 1.8);
+        }
 
-    &:has(h6) span[class*="icon"] {
-        font-size: calc(var(--headline-font-size-h6) * 2.2);
-    }
+        &:has(h3) span[class*="icon"] {
+            font-size: calc(var(--headline-font-size-h3) * 1.9);
+        }
+
+        &:has(h4) span[class*="icon"] {
+            font-size: calc(var(--headline-font-size-h4) * 2);
+        }
+
+        &:has(h5) span[class*="icon"] {
+            font-size: calc(var(--headline-font-size-h5) * 2.1);
+        }
+
+        &:has(h6) span[class*="icon"] {
+            font-size: calc(var(--headline-font-size-h6) * 2.2);
+        }
+
+        .pre-headline-text-wrapper {
+            display: flex;
+            flex-direction: column;
+        }
 
-    &:has(h4, h5, h6) .pre-headline-text {
-        font-size: var(--font-size-small);
+        .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/CmdIcon.vue

@@ -63,7 +63,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style>
 .iconify {
     font-size: var(--icon-size);
     vertical-align: text-bottom;

package/src/components/CmdImage.vue

@@ -369,7 +369,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style>
 /* begin cmd-image ------------------------------------------------------------------------------------------ */
 .cmd-image {
     img {

package/src/components/CmdImageGallery.vue

@@ -145,7 +145,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style>
 /* begin cmd-image-gallery ---------------------------------------------------------------------------------------- */
 .cmd-image-gallery {
     > .cmd-headline, > input.edit-mode, > .edit-component-wrapper {

package/src/components/CmdImageZoom.vue

@@ -109,7 +109,7 @@ function clamp(value, min, max) {
 }
 </script>
 
-<style lang="scss">
+<style>
 /* begin cmd-imagezoom ---------------------------------------------------------------------------------------- */
 .cmd-imagezoom {
     overflow: hidden;

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
@@ -265,7 +266,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style>
 .cmd-input-group {
     &.inline {
         display: flex;
@@ -281,7 +282,7 @@ export default {
     .label-text {
         display: inline-flex;
 
-        > [class*="icon-"] {
+        > span + a [class*="icon-"] {
             margin-left: calc(var(--default-margin) / 2);
         }
     }

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: {
@@ -171,7 +171,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style>
 /* begin cmd-list-of-links ---------------------------------------------------------------------------------------- */
 .cmd-list-of-links {
     > ul {

package/src/components/CmdListOfLinksItem.vue

@@ -91,7 +91,3 @@ export default {
     }
 }
 </script>
-
-<style lang="scss">
-
-</style>

package/src/components/CmdListOfRequirements.vue

@@ -150,12 +150,16 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style>
 /* begin cmd-list-of-requirements ------------------------------------------------------------------------------------------ */
 .cmd-list-of-requirements {
     dl {
         .error {
             --status-color: var(--error-color);
+
+            [class*="icon-"] {
+                color: var(--status-color);
+            }
         }
 
         .warning {
@@ -163,7 +167,11 @@ export default {
         }
 
         .success {
-            --status-color: var(--success-color);
+            --status-color: var(--success-color) !important;
+
+            [class*="icon-"] {
+                color: var(--status-color);
+            }
         }
 
         .info {

package/src/components/CmdLoginForm.vue

@@ -119,6 +119,7 @@
 
         <!-- begin CmdFormElement -->
         <CmdFormElement
+            ref="sendPassword"
             element="input"
             type="email"
             :fieldIconClass="cmdFormElementSendLogin.innerIconClass"
@@ -425,7 +426,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style>
 /* begin cmd-login-form ---------------------------------------------------------------------------------------- */
 .cmd-login-form {
     .option-wrapper {

package/src/components/CmdMainNavigation.vue

@@ -181,6 +181,15 @@ export default {
             type: Boolean,
             default: false
         },
+        /**
+         * toggle if overlay over content should be shown if off-canvas is open
+         *
+         * @affectsStyling: true
+         */
+        showContentOverlay: {
+            type: Boolean,
+            default: true
+        },
         /**
          * list of all navigation-entries (incl. sub-entries)
          */
@@ -203,6 +212,11 @@ export default {
                 }
             }
         },
+        /**
+         * position for offcanvas-navigation
+         *
+         * @allowedValues: "right", "left"
+         */
         offcanvasPosition: {
             type: String,
             default: "right"
@@ -210,6 +224,8 @@ export default {
         /**
          * button to open off-canvas-navigation
          *
+         * (persistOnMobile-property must be false)
+         *
          * @requiredForAccessibility: partial
          */
         buttonOffcanvas: {
@@ -235,15 +251,6 @@ export default {
         subSubentriesIconClass: {
             type: String,
             default: "icon-single-arrow-right"
-        },
-        /**
-         * toggle if overlay over content should be shown if off-canvas is open
-         *
-         * @affectsStyling: true
-         */
-        showContentOverlay: {
-            type: Boolean,
-            default: true
         }
     },
     methods: {
@@ -307,10 +314,8 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style>
 /* begin cmd-main-navigation ---------------------------------------------------------------------------------------- */
-@import '../assets/styles/variables';
-
 .cmd-main-navigation {
     &.hide-sub-navigation {
         ul {
@@ -366,9 +371,27 @@ export default {
     }
 }
 
+/* keep outside of .cmd-main-navigation to keep specificity */
+.off-canvas-right {
+    #toggle-offcanvas {
+        margin-right: 0;
+        margin-left: auto;
+    }
+}
+
+#toggle-offcanvas {
+    margin-left: 0;
+    display: none;
+}
+</style>
+
+<style lang="scss">
+@import '../assets/styles/variables';
+
 @media only screen and (max-width: $medium-max-width) {
     .cmd-main-navigation#main-navigation-wrapper {
         --nav-transition: all .5s linear;
+
         display: flex;
         background: none; /* overwrite framework-css */
         border: 0; /* overwrite framework-css */
@@ -386,11 +409,14 @@ export default {
 
             &.open-off-canvas {
                 nav {
+                    height: 100%;
+                    background: var(--default-background);
                     left: 0;
                     opacity: 1;
                     padding: 0 !important;
                     transition: var(--nav-transition);
                     border-right: var(--default-border);
+                    display: block;
                 }
 
                 &.show-content-overlay {
@@ -530,19 +556,5 @@ export default {
         }
     }
 }
-
-/* keep outside of .cmd-main-navigation to keep specificity */
-.off-canvas-right {
-    #toggle-offcanvas {
-        margin-right: 0;
-        margin-left: auto;
-    }
-}
-
-#toggle-offcanvas {
-    margin-left: 0;
-    display: none;
-}
-
 /* end cmd-main-navigation ------------------------------------------------------------------------------------------ */
 </style>