comand-component-library 3.3.87 → 4.0.1

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)
         },
@@ -263,10 +267,8 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style>
 /* begin cmd-box-wrapper ---------------------------------------------------------------------------------------- */
-@import '../assets/styles/variables';
-
 .cmd-box-wrapper {
     display: flex;
     flex-direction: column;
@@ -298,6 +300,12 @@ export default {
         }
     }
 
+    .inner-box-wrapper > *{
+        flex: none;
+        flex-grow: 1;
+        flex-basis: min-content;
+    }
+
     .row-view {
         flex-direction: column;
 
@@ -328,6 +336,13 @@ export default {
         }
     }
 
+
+}
+</style>
+
+<style lang="scss">
+@import '../assets/styles/variables';
+.cmd-box-wrapper {
     @media only screen and (max-width: $medium-max-width) {
         > .grid-container-create-columns {
             grid-template-columns: repeat(v-bind(boxesPerRowMedium), minmax(0, 1fr));
@@ -340,6 +355,5 @@ export default {
         }
     }
 }
-
 /* end cmd-box-wrapper ---------------------------------------------------------------------------------------- */
 </style>

package/src/components/CmdBreadcrumbs.vue

@@ -68,7 +68,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style>
 /* begin cmd-breadcrumbs ---------------------------------------------------------------------------------------- */
 .cmd-breadcrumbs {
     display: flex;

package/src/components/CmdCompanyLogo.vue

@@ -1,17 +1,17 @@
 <template>
-    <div class="cmd-company-logo">
+    <div class="cmd-company-logo company-logo">
         <router-link v-if="link?.type === 'router'" :to="link?.path" :title="link?.tooltip">
             <!-- begin CmdImage -->
-            <CmdImage :image="image" />
+            <CmdImage :image="image"/>
             <!-- end CmdImage -->
         </router-link>
         <a v-else-if="link?.type === 'href'" :href="link?.path" :title="link?.tooltip">
             <!-- begin CmdImage -->
-            <CmdImage :image="image" />
+            <CmdImage :image="image"/>
             <!-- end CmdImage -->
         </a>
         <!-- begin CmdImage -->
-        <CmdImage v-else :image="image" />
+        <CmdImage v-else :image="image"/>
         <!-- end CmdImage -->
     </div>
 </template>
@@ -92,8 +92,8 @@ export default {
             this.prefersColorScheme = event.matches ? "light" : "dark"
         },
         observeDom(mutationList) {
-            for(let i = 0; i < mutationList.length; i++) {
-                if(mutationList[i].type === 'attributes') {
+            for (let i = 0; i < mutationList.length; i++) {
+                if (mutationList[i].type === 'attributes') {
                     this.toggleColorScheme()
                     break
                 }
@@ -105,7 +105,7 @@ export default {
         toggleColorScheme() {
             if (document.querySelector("html").classList.contains("light-mode")) {
                 this.prefersColorScheme = "light"
-            } else if(document.querySelector("html").classList.contains("dark-mode")) {
+            } else if (document.querySelector("html").classList.contains("dark-mode")) {
                 this.prefersColorScheme = "dark"
             } else if (matchMedia("(prefers-color-scheme: light)").matches) {
                 this.prefersColorScheme = "light"
@@ -117,10 +117,8 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style>
 /* begin cmd-company-logo ---------------------------------------------------------------------------------------- */
-@import '../assets/styles/variables';
-
 .cmd-company-logo {
     img {
         display: block;
@@ -134,9 +132,14 @@ export default {
             border: 0;
         }
     }
+}
+</style>
 
+<style lang="scss">
+@import '../assets/styles/variables';
 
-    @media only screen and (max-width: $medium-max-width) {
+@media only screen and (max-width: $medium-max-width) {
+    .cmd-company-logo {
         img {
             max-width: 100%;
             max-height: 7.5rem;

package/src/components/CmdContainer.vue

@@ -17,7 +17,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style>
 .cmd-container {
     min-height: 5rem;
 }

package/src/components/CmdCookieDisclaimer.vue

@@ -273,7 +273,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style>
 /* begin cmd-cookie-disclaimer ---------------------------------------------------------------------------------------- */
 .cmd-cookie-disclaimer {
     width: 100%;

package/src/components/CmdCopyrightInformation.vue

@@ -10,7 +10,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style>
 /* begin cmd-copyright-information ---------------------------------------------------------------------------------------- */
 .cmd-copyright-information {
     background: var(--text-color);

package/src/components/CmdFancyBox.vue

@@ -471,10 +471,8 @@ export {openFancyBox}
 export default FancyBox
 </script>
 
-<style lang="scss">
+<style>
 /* begin cmd-fancybox ---------------------------------------------------------------------------------------- */
-@import "../assets/styles/variables";
-
 .cmd-fancybox {
     z-index: 500;
     flex-direction: column;
@@ -490,13 +488,13 @@ export default FancyBox
         margin-top: calc(var(--default-margin) * 2)
     }
 
-    // detect open-attribute (will be added to dom automatically)
+    /* detect open-attribute (will be added to dom automatically) */
     &[open] {
         display: flex;
     }
 
     &.show-overlay::backdrop {
-        --reduced-opacity: .75; // must be declared again, because ::backdrop does not allow the use of global variables
+        --reduced-opacity: .75; /* must be declared again, because ::backdrop does not allow the use of global variables */
         background: rgba(0, 0, 0, var(--reduced-opacity));
     }
 
@@ -619,7 +617,12 @@ export default FancyBox
             }
         }
     }
+}
+</style>
 
+<style lang="scss">
+@import "../assets/styles/variables";
+.cmd-fancybox {
     @media only screen and (max-width: $medium-max-width) {
         .outer-content-wrapper {
             .content {

package/src/components/CmdForm.vue

@@ -185,7 +185,8 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style>
+/* begin cmd-form ---------------------------------------------------------------------------------------- */
 .cmd-form {
     &:not([data-use-validation="true"]) {
         label.error :where(::placeholder, select option:first-child),
@@ -204,5 +205,10 @@ export default {
             border-color: var(--error-color);
         }
     }
+
+    .button, .button:last-child {
+        margin-left: auto;
+    }
 }
+/* end cmd-form ---------------------------------------------------------------------------------------- */
 </style>

package/src/components/CmdFormElement.vue

@@ -1,24 +1,21 @@
 <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,
            {
             disabled: $attrs.disabled,
             inline : displayLabelInline,
-            checked: isChecked,
             'toggle-switch': toggleSwitch,
             colored: colored,
-            on: colored && isChecked,
-            off: colored && !isChecked,
             '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'"
@@ -26,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>
@@ -43,15 +40,15 @@
             />
             <!-- end CmdTooltipForInputElements -->
 
-            <a v-if="$attrs.required || inputRequirements.length"
-                href="#"
-                @click.prevent
-                :title="validationTooltip"
-                :aria-errormessage="tooltipId"
-                aria-live="assertive"
-                :id="tooltipId">
+            <a v-if="($attrs.required || inputRequirements.length) && showStatusIcon"
+               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>
@@ -59,10 +56,7 @@
 
         <span v-if="$attrs.type !== 'checkbox' && $attrs.type !== 'radio'" class="flex-container"><!-- container required to place inner icons correctly -->
             <!-- begin CmdIcon (for icon inside field) -->
-            <CmdIcon
-                v-if="fieldIconClass"
-                class="place-inside"
-                :iconClass="fieldIconClass"
+            <CmdIcon v-if="fieldIconClass" class="place-inside" :iconClass="fieldIconClass"
             />
             <!-- end CmdIcon (for icon inside field) -->
 
@@ -98,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>
@@ -121,7 +115,7 @@
                     @blur="onBlur"
                     :checked="isChecked"
                     :value="inputValue"
-                    :class="[inputClass, validationStatus, toggleSwitchIconClass, { 'replace-input-type': replaceInputType, 'toggle-switch': toggleSwitch }]"
+                    :class="[inputClass, validationStatus, toggleSwitchIconClass, { 'replace-input-type': replaceInputType}]"
                     :id="htmlId"
                     :disabled="$attrs.disabled"
                     :aria-invalid="validationStatus === 'error'"
@@ -130,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>
@@ -140,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>
@@ -200,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>
@@ -392,6 +389,13 @@ export default {
             type: Array,
             required: false
         },
+        /**
+         * activate if interactive status-icon (to show requirements) should be shown above form-element
+         */
+        showStatusIcon: {
+            type: Boolean,
+            default: true
+        },
         /**
          * native button
          */
@@ -706,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
@@ -719,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()
@@ -822,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()
             }
         },
@@ -842,9 +846,10 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style>
 /* begin cmd-form-element ------------------------------------------------------------------------------------------ */
 .cmd-form-element {
+    /* icon right aligned in input */
     input + .place-inside {
         left: auto;
         right: .5rem
@@ -859,11 +864,17 @@ export default {
             color: var(--status-color);
 
             &.place-inside {
-                color: var(--status-color);
+                --status-color: var(--error-color);
             }
         }
     }
 
+    :is(input[type="checkbox"], input[type="radio"]):checked {
+        ~ .label-text span {
+            color: var(--hyperlink-color);
+        }
+    }
+
     &.inline {
         & > span {
             & > a:not(.button) {
@@ -918,85 +929,24 @@ export default {
         }
     }
 
-    &.colored {
-        input {
-            border-color: var(--error-color);
-
-            &::after {
-                border-color: inherit;
-            }
-        }
-
-        &.on {
-            input {
-                border-color: var(--success-color);
-
-                &::after {
-                    border-color: inherit;
-                    background: var(--success-color);
-                }
-            }
-        }
-    }
-
     .characters-left-wrapper {
         margin-top: calc(var(--default-margin) / 2);
         display: block;
 
         span:not(:only-child):first-child {
             margin-right: calc(var(--default-margin) / 2);
-            color: var(--text-color);
+            color: var(--color-scheme-text-color);
         }
 
         .characters-left {
-            color: var(--text-color);
+            color: var(--color-scheme-text-color);
 
             &.error {
                 color: var(--error-color);
             }
         }
     }
-
-    /* begin toggle-switch */
-    /* no cmd-prefix-styling (class based on frontend-framework) */
-    &.toggle-switch {
-        &.colored {
-            &.off {
-                .switch-label-wrapper {
-                    border-color: var(--error-color);
-
-                    span {
-                        &.label-text {
-                            color: var(--error-color);
-
-                            &::before {
-                                border-color: var(--error-color);
-                                background-color: var(--pure-white);
-                            }
-                        }
-                    }
-                }
-            }
-
-            &.on {
-                .switch-label-wrapper {
-                    border-color: var(--success-color);
-
-                    span {
-                        &.label-text {
-                            color: var(--success-color);
-
-                            &::before {
-                                border-color: var(--success-color);
-                                background-color: var(--success-color);
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
-    /* end toggle-switch */
 }
+
 /* end cmd-form-element------------------------------------------------------------------------------------------ */
 </style>

package/src/components/CmdFormFilters.vue

@@ -105,10 +105,11 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style>
 /* begin cmd-form-filters ------------------------------------------------------------------------------------------ */
 .cmd-form-filters {
     display: flex;
+    margin: 0;
 
     li {
         list-style-type: none;

package/src/components/CmdGoogleMaps.vue

@@ -30,7 +30,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style>
 /* begin cmd-google-maps ---------------------------------------------------------------------------------------- */
 .cmd-google-maps {
     border: var(--default-border);